3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-05-22 13:16:13 +02:00
Code Issues Projects Releases Packages Wiki 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
Download patch file Download diff file Expand all files Collapse all files

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; Components.storybook;
const { icons } = Components.meta; const { icons } = Components.meta;
export default {
title: "Foundations/Icons",
component: Components.Icon,
};
const iconList = Object.entries(icons) const iconList = Object.entries(icons)
.map(([_, value]) => value) .map(([_, value]) => value)
.sort(); .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 = { export const AllIcons = {
render: () => ( render: () => (
<StoryWrapper theme="default"> <StoryWrapper theme="default">
@ -41,17 +51,28 @@ export const AllIcons = {
}; };
export const Default = { export const Default = {
render: () => ( render: ({icon, ...args}) => (
<StoryWrapper theme="default"> <StoryWrapper theme="default">
<Icon icon={icons.Pin} /> <Icon icon={icon} />
</StoryWrapper> </StoryWrapper>
), ),
args: {
icon: "pin",
},
parameters: {
controls: { exclude: "size" }
}
}; };
export const Small = { export const CustomSize = {
render: () => ( render: ({icon, size, ...args}) => (
<StoryWrapper theme="default"> <StoryWrapper theme="default">
<Icon icon={icons.Pin} size="s" /> <Icon icon={icon} size={size} />
</StoryWrapper> </StoryWrapper>
), ),
args: {
icon: "pin",
size: "m",
}
}; };