From 81966b9b39ece0d2a63629d18e9a2201aeacff8a Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Sat, 4 Jan 2025 00:27:29 +0300
Subject: [PATCH] Use fieldsets in components token grouping

---
 .../editor/component/DesignComponent.vue      | 53 +++++++++++--------
 1 file changed, 30 insertions(+), 23 deletions(-)

diff --git a/apps/showcase/components/layout/designer/editor/component/DesignComponent.vue b/apps/showcase/components/layout/designer/editor/component/DesignComponent.vue
index 57a2582e4..ed09e48f0 100644
--- a/apps/showcase/components/layout/designer/editor/component/DesignComponent.vue
+++ b/apps/showcase/components/layout/designer/editor/component/DesignComponent.vue
@@ -1,27 +1,34 @@
 <template>
-    <section v-if="isComponentRoute" class="flex flex-col gap-3">
-        <div class="text-lg font-semibold capitalize">{{ componentKey }}</div>
-        <template v-for="(value, name) in tokens" :key="name">
-            <DesignComponentSection v-if="name !== 'colorScheme'" :componentKey="componentKey" :path="name" />
-        </template>
-        <Tabs v-if="hasColorScheme" value="cs-0">
-            <TabList>
-                <Tab value="cs-0">Light</Tab>
-                <Tab value="cs-1">Dark</Tab>
-            </TabList>
-            <TabPanels class="!px-0">
-                <TabPanel value="cs-0">
-                    <div class="flex flex-col gap-3">
-                        <DesignComponentSection v-for="(value, name) in lightTokens" :key="name" :componentKey="componentKey" :path="'colorScheme.light.' + name" />
-                    </div>
-                </TabPanel>
-                <TabPanel value="cs-1">
-                    <div class="flex flex-col gap-3">
-                        <DesignComponentSection v-for="(value, name) in darkTokens" :key="name" :componentKey="componentKey" :path="'colorScheme.dark.' + name" />
-                    </div>
-                </TabPanel>
-            </TabPanels>
-        </Tabs>
+    <section v-if="isComponentRoute">
+        <div class="text-lg font-semibold capitalize mb-2">{{ componentKey }}</div>
+        <Fieldset legend="Common" :toggleable="true" class="mb-3">
+            <div class="flex flex-col gap-3">
+                <template v-for="(value, name) in tokens" :key="name">
+                    <DesignComponentSection v-if="name !== 'colorScheme'" :componentKey="componentKey" :path="name" />
+                </template>
+            </div>
+        </Fieldset>
+        <Fieldset legend="Color Scheme" :toggleable="true">
+            <Tabs v-if="hasColorScheme" value="cs-0">
+                <TabList>
+                    <Tab value="cs-0">Light</Tab>
+                    <Tab value="cs-1">Dark</Tab>
+                </TabList>
+                <TabPanels>
+                    <TabPanel value="cs-0">
+                        <div class="flex flex-col gap-3">
+                            <DesignComponentSection v-for="(value, name) in lightTokens" :key="name" :componentKey="componentKey" :path="'colorScheme.light.' + name" />
+                        </div>
+                    </TabPanel>
+                    <TabPanel value="cs-1">
+                        <div class="flex flex-col gap-3">
+                            <DesignComponentSection v-for="(value, name) in darkTokens" :key="name" :componentKey="componentKey" :path="'colorScheme.dark.' + name" />
+                        </div>
+                    </TabPanel>
+                </TabPanels>
+            </Tabs>
+            <span v-else class="block py-3"> There are no design tokens per color scheme. </span>
+        </Fieldset>
     </section>
 </template>