From 3fb97140102ceed254bd769572db0d763ef7e4f7 Mon Sep 17 00:00:00 2001
From: brabli <67018167+brabli@users.noreply.github.com>
Date: Thu, 30 Apr 2026 15:52:00 +0100
Subject: [PATCH] Update showcase

---
 dev/templates/showcase.html.twig | 78 ++++++++++++--------------------
 1 file changed, 28 insertions(+), 50 deletions(-)

diff --git a/dev/templates/showcase.html.twig b/dev/templates/showcase.html.twig
index 1f6b62f..68bd2d5 100644
--- a/dev/templates/showcase.html.twig
+++ b/dev/templates/showcase.html.twig
@@ -25,7 +25,25 @@
     <p class="text-zinc-600 mb-8">Local dev preview. Edit <code class="bg-zinc-200 px-1 rounded">dev/templates/showcase.html.twig</code> to add new variants.</p>
 
     <section class="mb-10">
-        <h2 class="text-lg font-semibold mb-3">Solid (all colours)</h2>
+        <h2 class="text-lg font-semibold mb-3">Solid</h2>
+        <div class="flex flex-wrap gap-2">
+            {% for colour in colours %}
+                <twig:Pcm:Badge colour="{{ colour }}">{{ colour }}</twig:Pcm:Badge>
+            {% endfor %}
+        </div>
+    </section>
+
+    <section class="mb-10">
+        <h2 class="text-lg font-semibold mb-3">Outline</h2>
+        <div class="flex flex-wrap gap-2">
+            {% for colour in colours %}
+                <twig:Pcm:Badge colour="{{ colour }}" outline>{{ colour }}</twig:Pcm:Badge>
+            {% endfor %}
+        </div>
+    </section>
+
+    <section class="mb-10">
+        <h2 class="text-lg font-semibold mb-3">Solid glossy</h2>
         <div class="flex flex-wrap gap-2">
             {% for colour in colours %}
                 <twig:Pcm:Badge glossy colour="{{ colour }}">{{ colour }}</twig:Pcm:Badge>
@@ -34,71 +52,31 @@
     </section>
 
     <section class="mb-10">
-        <h2 class="text-lg font-semibold mb-3">Outline (all colours)</h2>
+        <h2 class="text-lg font-semibold mb-3">Solid icon</h2>
         <div class="flex flex-wrap gap-2">
             {% for colour in colours %}
-                <twig:Pcm:Badge colour="{{ colour }}" glossy outline>{{ colour }}</twig:Pcm:Badge>
+                <twig:Pcm:Badge icon="material-symbols:add" colour="{{ colour }}">{{ colour }}</twig:Pcm:Badge>
             {% endfor %}
         </div>
     </section>
 
     <section class="mb-10">
-        <h2 class="text-lg font-semibold mb-3">No icons</h2>
+        <h2 class="text-lg font-semibold mb-3">Outline icon</h2>
         <div class="flex flex-wrap gap-2">
-            {% for sample in samples %}
-                <twig:Pcm:Badge :obj="sample">{{ sample.label }}</twig:Pcm:Badge>
+            {% for colour in colours %}
+                <twig:Pcm:Badge icon="material-symbols:add" colour="{{ colour }}" outline>{{ colour }}</twig:Pcm:Badge>
             {% endfor %}
         </div>
     </section>
 
     <section class="mb-10">
-        <h2 class="text-lg font-semibold mb-3">Icons</h2>
+        <h2 class="text-lg font-semibold mb-3">Solid icon glossy</h2>
         <div class="flex flex-wrap gap-2">
-            <div class="flex gap-2 flex-col">
-                {% for icon_sample in icon_samples %}
-                    <twig:Pcm:Badge icon :obj="icon_sample" class="text-[8px]">{{ icon_sample.label }}</twig:Pcm:Badge>
-                {% endfor %}
-            </div>
-
-            <div class="flex gap-2 flex-col">
-                {% for icon_sample in icon_samples %}
-                    <twig:Pcm:Badge icon :obj="icon_sample">{{ icon_sample.label }}</twig:Pcm:Badge>
-                {% endfor %}
-            </div>
-
-            <div class="flex gap-2 flex-col">
-                {% for icon_sample in icon_samples %}
-                    <twig:Pcm:Badge icon :obj="icon_sample" class="text-xl">{{ icon_sample.label }}</twig:Pcm:Badge>
-                {% endfor %}
-            </div>
-
-            <div class="flex gap-2 flex-col">
-                {% for icon_sample in icon_samples %}
-                    <twig:Pcm:Badge outline icon :obj="icon_sample" class="text-[8px]">{{ icon_sample.label }}</twig:Pcm:Badge>
-                {% endfor %}
-            </div>
-
-            <div class="flex gap-2 flex-col">
-                {% for icon_sample in icon_samples %}
-                    <twig:Pcm:Badge outline icon :obj="icon_sample">{{ icon_sample.label }}</twig:Pcm:Badge>
-                {% endfor %}
-            </div>
-
-            <div class="flex gap-2 flex-col">
-                {% for icon_sample in icon_samples %}
-                    <twig:Pcm:Badge outline icon :obj="icon_sample" class="text-xl">{{ icon_sample.label }}</twig:Pcm:Badge>
-                {% endfor %}
-            </div>
+            {% for colour in colours %}
+                <twig:Pcm:Badge glossy icon="material-symbols:edit-outline" colour="{{ colour }}">{{ colour }}</twig:Pcm:Badge>
+            {% endfor %}
         </div>
     </section>
 
-    <section class="mb-10">
-        <h2 class="text-lg font-semibold mb-3">Custom classes</h2>
-        <div class="flex flex-wrap gap-2 items-center">
-            <twig:Pcm:Badge colour="green" class="rounded-full" label="Sale 20% off" />
-            <twig:Pcm:Badge class="text-xl p-2" colour="maroon" outline>Danger!</twig:Pcm:Badge>
-            <twig:Pcm:Badge icon="material-symbols:add-alert" class="rounded-full text-xl" colour="maroon" outline>Danger!</twig:Pcm:Badge>
-        </div>
-    </section>
 </body>
 </html>