From 39c203b997fb22ee90283d1ec7e5baac0b28790b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bel=C3=A9n=20Albeza?= <belen@hey.com>
Date: Tue, 3 Dec 2024 09:59:01 +0100
Subject: [PATCH] :sparkles: Explicitly display icon IDs in storybook

---
 .../ui/ds/foundations/assets/icon.stories.jsx  | 18 ++++++++++++++----
 frontend/src/app/main/ui/ds/storybook.scss     |  1 +
 2 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/frontend/src/app/main/ui/ds/foundations/assets/icon.stories.jsx b/frontend/src/app/main/ui/ds/foundations/assets/icon.stories.jsx
index 49219f46b..ad375f8d0 100644
--- a/frontend/src/app/main/ui/ds/foundations/assets/icon.stories.jsx
+++ b/frontend/src/app/main/ui/ds/foundations/assets/icon.stories.jsx
@@ -26,16 +26,26 @@ export const All = {
     <>
       <StoryHeader>
         <h1>All Icons</h1>
-        <p>Hover on an icon to see its ID.</p>
       </StoryHeader>
-      <StoryGrid>
+      <StoryGrid size="256">
         {icons.map((iconId) => (
           <StoryGridCell
-            title={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} />
+            <code
+              style={{
+                "font-family": "monospace",
+                color: "var(--color-foreground-secondary)",
+              }}
+            >
+              {iconId}
+            </code>
           </StoryGridCell>
         ))}
       </StoryGrid>
diff --git a/frontend/src/app/main/ui/ds/storybook.scss b/frontend/src/app/main/ui/ds/storybook.scss
index 167fe085c..0bd5c45e9 100644
--- a/frontend/src/app/main/ui/ds/storybook.scss
+++ b/frontend/src/app/main/ui/ds/storybook.scss
@@ -16,6 +16,7 @@
 
 .story-header {
   color: var(--color-foreground-primary);
+  margin-bottom: 1rem;
 }
 
 .story-grid-row {