Docs(web-twig): Add Icons demo #DS-900

- Icons layout synced with other packages
lmc-eu · Sep 14, 2023 · 2d9742f · 2d9742f
1 parent d235e8d
commit 2d9742f
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 7 deletions.
diff --git a/apps/web-twig-demo/src/Controller/IconsController.php b/apps/web-twig-demo/src/Controller/IconsController.php
@@ -34,6 +34,13 @@ private function getWebIcons(): array
         // sort them alphabetically
         sort($icons);
 
+        // remove unwanted 'sprite' from the array
+        $filterCallback = function ($value) {
+            return $value !== 'sprite';
+        };
+
+        $icons = array_filter($icons, $filterCallback);
+
         return $icons;
     }
 }
diff --git a/packages/web-twig/src/Resources/icons/Icons.stories.twig b/packages/web-twig/src/Resources/icons/Icons.stories.twig
@@ -2,22 +2,20 @@
 
 {% block content %}
 
-    <section class="docs-Section">
+    <DocsSection title="Icons">
 
-        <h2 class="typography-heading-medium-text text-secondary-disabled mb-700 mb-tablet-900">Icons</h2>
-
-        <ul class="Grid Grid--cols-2 Grid--tablet--cols-4 Grid--desktop--cols-6 list-unstyled text-center my-1000">
+        <Grid elementType="ul" cols={2} tablet={4} desktop={6} UNSAFE_className="text-center my-1000 list-unstyled">
 
             {% for icon in icons %}
                 <li class="mb-600">
                     <Icon name={{ icon }} />
 
-                    <h3 class="mt-500">{{ icon }}</h3>
+                    <Text UNSAFE_className="mt-500" emphasis="bold">{{ icon }}</Text>
                 </li>
             {% endfor %}
 
-        </ul>
+        </Grid>
 
-    </section>
+    </DocsSection>
 
 {% endblock %}