mirror of
https://github.com/penpot/penpot.git
synced 2025-07-11 00:07:18 +02:00
♻️ Rename IconGrid to StoryGrid (storybook helper component)
This commit is contained in:
parent
4ecaaba1e5
commit
203a39f07c
5 changed files with 11 additions and 10 deletions
|
@ -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*}})
|
||||||
|
|
|
@ -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>
|
||||||
),
|
),
|
||||||
};
|
};
|
||||||
|
|
|
@ -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: {
|
||||||
|
|
|
@ -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])
|
|
@ -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;
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue