From 638c4b14bda45a746e8fc1c925a35a65091a8cc5 Mon Sep 17 00:00:00 2001
From: Mauricio Mutte <mauriciomutte.mm@gmail.com>
Date: Tue, 18 Jul 2023 17:32:49 -0300
Subject: [PATCH] feat: add collapse in icon gallery

---
 apps/docs/.storybook/preview-body.html  | 11 +++++++
 apps/docs/stories/1_4_Icons.stories.mdx | 40 +++++++++++++------------
 2 files changed, 32 insertions(+), 19 deletions(-)
 create mode 100644 apps/docs/.storybook/preview-body.html

diff --git a/apps/docs/.storybook/preview-body.html b/apps/docs/.storybook/preview-body.html
new file mode 100644
index 000000000..c405832a7
--- /dev/null
+++ 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
index a614bed9e..9053b5f38 100644
--- 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>