0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-01-09 08:20:45 -05:00

♻️ Rename IconGrid to StoryGrid (storybook helper component)

This commit is contained in:
Belén Albeza 2024-07-04 10:45:45 +02:00
parent 4ecaaba1e5
commit 203a39f07c
5 changed files with 11 additions and 10 deletions

View file

@ -16,4 +16,5 @@
:RawSvg raw-svg*
;; meta / misc
:meta #js {:icons icon-list :svgs raw-svg-list}
:storybook #js {:StoryWrapper sb/story-wrapper* :IconGrid sb/icon-grid*}})
:storybook #js {:StoryGrid sb/story-grid*
:StoryWrapper sb/story-wrapper*}})

View file

@ -2,7 +2,7 @@ import * as React from "react";
import Components from "@target/components";
const { Icon } = Components;
const { StoryWrapper, IconGrid } = Components.storybook;
const { StoryWrapper, StoryGrid } = Components.storybook;
const { icons } = Components.meta;
export default {
@ -19,13 +19,13 @@ export const AllIcons = {
<StoryWrapper theme="default">
<h1>All Icons</h1>
<p>Hover on an icon to see its ID</p>
<IconGrid>
<StoryGrid>
{iconList.map((iconId) => (
<div title={iconId} key={iconId}>
<Icon icon={iconId} />
</div>
))}
</IconGrid>
</StoryGrid>
</StoryWrapper>
),
};

View file

@ -2,7 +2,7 @@ import * as React from "react";
import Components from "@target/components";
const { RawSvg } = Components;
const { StoryWrapper, IconGrid } = Components.storybook;
const { StoryWrapper, StoryGrid } = Components.storybook;
const { svgs } = Components.meta;
export default {
@ -20,13 +20,13 @@ export const AllAssets = {
<h1>All assets</h1>
<p>Hover on a asset to see its id.</p>
<IconGrid size="200">
<StoryGrid size="200">
{assetList.map(x => (
<div key={x} title={x}>
<RawSvg asset={x} style={{maxWidth: "100%"}} />
</div>
))}
</IconGrid>
</StoryGrid>
</StoryWrapper>
),
parameters: {

View file

@ -22,8 +22,8 @@
[:section {:class "default"} children]
[:section {:class "light"} children]])])
(mf/defc icon-grid*
(mf/defc story-grid*
{::mf/props :obj}
[{:keys [children size]}]
[:article {:class (stl/css :icon-grid)
[:article {:class (stl/css :story-grid)
:style (when (some? size) #js {"--component-grid-size" (dm/str size "px")})} children])

View file

@ -5,7 +5,7 @@
row-gap: 1rem;
}
.icon-grid {
.story-grid {
display: grid;
grid-template-columns: repeat(auto-fit, var(--component-grid-size, 16px));
gap: 1rem;