Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-02-01 11:59:17 -05:00
Code Issues Activity

Merge pull request #5406 from penpot/ladybenko-add-icon-ids-storybook

Browse source 
✨ Explicitly display icon IDs in storybook
This commit is contained in:
Eva Marco 2024-12-03 10:17:35 +01:00 • committed by GitHub
commit 0c3a362e85
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 15 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -26,16 +26,26 @@ export const All = {
<> <>
<StoryHeader> <StoryHeader>
<h1>All Icons</h1> <h1>All Icons</h1>
<p>Hover on an icon to see its ID.</p>
</StoryHeader> </StoryHeader>
<StoryGrid> <StoryGrid size="256">
{icons.map((iconId) => ( {icons.map((iconId) => (
<StoryGridCell <StoryGridCell
title={iconId}
key={iconId} key={iconId}
style={{ color: "var(--color-accent-primary)" }} style={{
color: "var(--color-accent-primary)",
display: "grid",
gap: "0.5rem",
}}
> >
<Icon id={iconId} size={size} /> <Icon id={iconId} size={size} />
<code
style={{
"font-family": "monospace",
color: "var(--color-foreground-secondary)",
}}
>
{iconId}
</code>
</StoryGridCell> </StoryGridCell>
))} ))}
</StoryGrid> </StoryGrid>

1
frontend/src/app/main/ui/ds/storybook.scss
View file

@ -16,6 +16,7 @@
.story-header { .story-header {
color: var(--color-foreground-primary); color: var(--color-foreground-primary);
margin-bottom: 1rem;
} }
.story-grid-row { .story-grid-row {