mirror of
https://github.com/penpot/penpot.git
synced 2025-03-20 19:51:23 -05:00
✨ Revamp icon stories
This commit is contained in:
parent
df858c2c7d
commit
d7ca4d49dc
1 changed files with 31 additions and 10 deletions
|
@ -6,15 +6,25 @@ const { StoryWrapper, StoryGrid, StoryGridCell, StoryHeader } =
|
|||
Components.storybook;
|
||||
const { icons } = Components.meta;
|
||||
|
||||
export default {
|
||||
title: "Foundations/Icons",
|
||||
component: Components.Icon,
|
||||
};
|
||||
|
||||
const iconList = Object.entries(icons)
|
||||
.map(([_, value]) => value)
|
||||
.sort();
|
||||
|
||||
export default {
|
||||
title: "Foundations/Assets/Icon",
|
||||
component: Components.Icon,
|
||||
argTypes: {
|
||||
icon: {
|
||||
options: iconList,
|
||||
control: { type: "select" }
|
||||
},
|
||||
size: {
|
||||
options: ["m", "s"],
|
||||
control: { type: "radio" }
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
export const AllIcons = {
|
||||
render: () => (
|
||||
<StoryWrapper theme="default">
|
||||
|
@ -41,17 +51,28 @@ export const AllIcons = {
|
|||
};
|
||||
|
||||
export const Default = {
|
||||
render: () => (
|
||||
render: ({icon, ...args}) => (
|
||||
<StoryWrapper theme="default">
|
||||
<Icon icon={icons.Pin} />
|
||||
<Icon icon={icon} />
|
||||
</StoryWrapper>
|
||||
),
|
||||
args: {
|
||||
icon: "pin",
|
||||
},
|
||||
parameters: {
|
||||
controls: { exclude: "size" }
|
||||
}
|
||||
};
|
||||
|
||||
export const Small = {
|
||||
render: () => (
|
||||
export const CustomSize = {
|
||||
render: ({icon, size, ...args}) => (
|
||||
<StoryWrapper theme="default">
|
||||
<Icon icon={icons.Pin} size="s" />
|
||||
<Icon icon={icon} size={size} />
|
||||
</StoryWrapper>
|
||||
),
|
||||
args: {
|
||||
icon: "pin",
|
||||
size: "m",
|
||||
}
|
||||
};
|
||||
|
||||
|
|
Loading…
Add table
Reference in a new issue