feat: add collapse in icon gallery

juntossomosmais · Jul 18, 2023 · ab5c9e9 · ab5c9e9
1 parent 13c407f
commit ab5c9e9
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 19 deletions.
diff --git a/apps/docs/.storybook/preview-body.html b/apps/docs/.storybook/preview-body.html
@@ -0,0 +1,11 @@
+<style>
+  .icon-gallery > summary {
+    border-bottom: 1px solid #0002;
+    cursor: pointer;
+    font-family: 'Nunito Sans', sans-serif;
+    font-size: 24px;
+    font-weight: 600;
+    margin-bottom: 16px;
+    user-select: none;
+  }
+</style>
diff --git a/apps/docs/stories/1_4_Icons.stories.mdx b/apps/docs/stories/1_4_Icons.stories.mdx
@@ -8,22 +8,24 @@ import { mdiIconsList, customIconsList } from '../utils/icon-list'
 
 The icons library is a collection of icons that can be used in your components. It is based on the [Material Design Icons](https://materialdesignicons.com/) library. But we can also add our own custom icons.
 
-## Custom Icons
-
-<IconGallery>
-  {customIconsList?.map((icon) => (
-    <IconItem name={icon}>
-      <atom-icon icon={icon}></atom-icon>
-    </IconItem>
-  ))}
-</IconGallery>
-
-## Material Design Icons
-
-<IconGallery>
-  {mdiIconsList?.map((icon) => (
-    <IconItem name={icon}>
-      <atom-icon icon={icon}></atom-icon>
-    </IconItem>
-  ))}
-</IconGallery>
+<details class="icon-gallery">
+  <summary>Custom Icons</summary>
+  <IconGallery>
+    {customIconsList?.map((icon) => (
+      <IconItem name={icon}>
+        <atom-icon icon={icon}></atom-icon>
+      </IconItem>
+    ))}
+  </IconGallery>
+</details>
+
+<details class="icon-gallery">
+  <summary>Material Design Icons</summary>
+  <IconGallery>
+    {mdiIconsList?.map((icon) => (
+      <IconItem name={icon}>
+        <atom-icon icon={icon}></atom-icon>
+      </IconItem>
+    ))}
+  </IconGallery>
+</details>