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:
parent
4ecaaba1e5
commit
203a39f07c
5 changed files with 11 additions and 10 deletions
|
@ -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*}})
|
||||
|
|
|
@ -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>
|
||||
),
|
||||
};
|
||||
|
|
|
@ -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: {
|
||||
|
|
|
@ -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])
|
|
@ -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;
|
||||
|
|
Loading…
Reference in a new issue