From 2d9742f849f09a37b8f9aaf59006caa051a89f69 Mon Sep 17 00:00:00 2001
From: Pavel Klibani <pavel@techloop.io>
Date: Thu, 14 Sep 2023 13:49:46 +0200
Subject: [PATCH] Docs(web-twig): Add Icons demo #DS-900

- Icons layout synced with other packages
---
 .../web-twig-demo/src/Controller/IconsController.php |  7 +++++++
 .../web-twig/src/Resources/icons/Icons.stories.twig  | 12 +++++-------
 2 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/apps/web-twig-demo/src/Controller/IconsController.php b/apps/web-twig-demo/src/Controller/IconsController.php
index 1de761f314..c8dceb8dc3 100644
--- 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
index 02426ebdbe..8b36af0033 100644
--- 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 %}