Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-03-20 19:51:23 -05:00
Code Issues Activity

✨ Revamp icon stories

Browse source
This commit is contained in:
Belén Albeza 2024-07-10 15:53:27 +02:00
parent df858c2c7d
commit d7ca4d49dc
1 changed files with 31 additions and 10 deletions

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

@ -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",
}
};