3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-07-11 02:57:18 +02:00
Code Issues Projects Releases Packages Wiki Activity

♻️ Rename IconGrid to StoryGrid (storybook helper component)

Browse source
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
Download patch file Download diff file Expand all files Collapse all files

3
frontend/src/app/main/ui/ds.cljs
View file

@ -16,4 +16,5 @@
:RawSvg raw-svg* :RawSvg raw-svg*
;; meta / misc ;; meta / misc
:meta #js {:icons icon-list :svgs raw-svg-list} :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*}})

6
frontend/src/app/main/ui/ds/foundations/icon.stories.jsx
View file

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

6
frontend/src/app/main/ui/ds/foundations/raw_svg.stories.jsx
View file

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

4
frontend/src/app/main/ui/ds/storybook.cljs
View file

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

2
frontend/src/app/main/ui/ds/storybook.scss
View file

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