feat: Update button component (#10362)

app/javascript/dashboard/components-next/button/Button.story.vue

@@ -1,125 +1,123 @@
 <script setup>
 import Button from './Button.vue';
+
+// Constants for documentation
+const VARIANTS = ['solid', 'outline', 'faded', 'link', 'ghost'];
+const COLORS = ['blue', 'ruby', 'amber', 'slate', 'teal'];
+const SIZES = ['default', 'sm', 'lg'];
 </script>
 
 <template>
-  <Story title="Components/Button" :layout="{ type: 'grid', width: '400' }">
-    <Variant title="Default">
-      <div class="p-4 bg-white dark:bg-slate-900">
-        <Button label="Default Button" />
+  <Story title="Components/Button" :layout="{ type: 'grid', width: '800px' }">
+    <!-- Basic Variants -->
+    <Variant title="Basic Variants">
+      <div class="flex flex-wrap gap-2 p-4 bg-white dark:bg-slate-900">
+        <Button
+          v-for="variant in VARIANTS"
+          :key="variant"
+          :label="variant"
+          :variant="variant"
+        />
       </div>
     </Variant>
 
-    <Variant title="Disabled">
+    <!-- Colors -->
+    <Variant title="Color Variants">
+      <div class="flex flex-wrap gap-2 p-4 bg-white dark:bg-slate-900">
+        <Button
+          v-for="color in COLORS"
+          :key="color"
+          :label="color"
+          :color="color"
+        />
+      </div>
+    </Variant>
+
+    <!-- Sizes -->
+    <Variant title="Size Variants">
+      <div
+        class="flex flex-wrap items-center gap-2 p-4 bg-white dark:bg-slate-900"
+      >
+        <Button v-for="size in SIZES" :key="size" :label="size" :size="size" />
+      </div>
+    </Variant>
+
+    <!-- Icons -->
+    <Variant title="Icons">
+      <div class="flex flex-wrap gap-2 p-4 bg-white dark:bg-slate-900">
+        <Button label="Leading Icon" icon="i-lucide-plus" />
+        <Button label="Trailing Icon" icon="i-lucide-plus" trailing-icon />
+        <Button icon="i-lucide-plus" />
+      </div>
+    </Variant>
+
+    <!-- Loading State -->
+    <Variant title="Loading State">
+      <div class="flex flex-wrap gap-2 p-4 bg-white dark:bg-slate-900">
+        <Button label="Loading" is-loading />
+        <Button label="Loading" variant="outline" is-loading />
+        <Button is-loading icon="i-lucide-plus" />
+      </div>
+    </Variant>
+
+    <!-- Disabled State -->
+    <Variant title="Disabled State">
       <div class="flex flex-wrap gap-2 p-4 bg-white dark:bg-slate-900">
         <Button label="Disabled" disabled />
-        <Button label="Disabled" variant="outline" disabled />
-        <Button label="Disabled" disabled icon="delete" variant="outline" />
+        <Button label="Disabled Outline" variant="outline" disabled />
+        <Button label="Disabled Icon" icon="delete" disabled />
         <Button
-          label="Disabled"
+          label="Disabled Destructive"
+          color="ruby"
           disabled
           icon="delete"
-          variant="destructive"
-          size="sm"
-        />
-        <Button
-          label="Disabled"
-          disabled
-          icon="delete"
-          variant="ghost"
-          size="sm"
-        />
-        <Button
-          label="Disabled"
-          disabled
-          icon="delete"
-          variant="link"
           size="sm"
         />
       </div>
     </Variant>
 
-    <Variant title="Disabled with icon">
-      <div class="p-4 bg-white dark:bg-slate-900">
-        <Button label="Disabled Button" icon="emoji-add" disabled />
+    <!-- Color Combinations -->
+    <Variant title="Color & Variant Combinations">
+      <div class="flex flex-wrap gap-2 p-4 bg-white dark:bg-slate-900">
+        <template v-for="color in COLORS" :key="color">
+          <Button
+            v-for="variant in VARIANTS"
+            :key="`${color}-${variant}`"
+            :label="`${color} ${variant}`"
+            :color="color"
+            :variant="variant"
+          />
+        </template>
       </div>
     </Variant>
 
-    <Variant title="Different variant">
+    <!-- Icon Positions -->
+    <Variant title="Icon Positions & Sizes">
       <div class="flex flex-wrap gap-2 p-4 bg-white dark:bg-slate-900">
-        <Button label="Default" variant="default" />
-        <Button label="Destructive" variant="destructive" />
-        <Button label="Outline" variant="outline" />
-        <Button label="Secondary" variant="secondary" />
-        <Button label="Ghost" variant="ghost" />
-        <Button label="Link" variant="link" />
+        <template v-for="size in SIZES" :key="size">
+          <Button
+            :label="`${size} Leading`"
+            icon="i-lucide-plus"
+            :size="size"
+          />
+          <Button
+            :label="`${size} Trailing`"
+            icon="i-lucide-plus"
+            trailing-icon
+            :size="size"
+          />
+          <Button icon="i-lucide-plus" :size="size" />
+        </template>
       </div>
     </Variant>
 
-    <Variant title="Different variant with icon only">
+    <!-- Ghost & Link Variants -->
+    <Variant title="Ghost & Link Variants">
       <div class="flex flex-wrap gap-2 p-4 bg-white dark:bg-slate-900">
-        <Button icon="emoji-add" variant="default" />
-        <Button icon="emoji-add" variant="destructive" />
-        <Button icon="emoji-add" variant="outline" />
-        <Button icon="emoji-add" variant="secondary" />
-        <Button icon="emoji-add" variant="ghost" />
-        <Button icon="emoji-add" variant="link" />
-      </div>
-    </Variant>
-
-    <Variant title="Different size">
-      <div class="flex flex-wrap gap-2 p-4 bg-white dark:bg-slate-900">
-        <Button label="Default" />
-        <Button label="Large" size="lg" />
-        <Button label="Small" size="sm" />
-      </div>
-    </Variant>
-
-    <Variant title="Different text variant">
-      <div class="flex flex-wrap gap-2 p-4 bg-white dark:bg-slate-900">
-        <Button label="Default" text-variant="default" variant="outline" />
-        <Button label="Success" text-variant="success" variant="outline" />
-        <Button label="Warning" text-variant="warning" variant="outline" />
-        <Button label="Danger" text-variant="danger" variant="outline" />
-        <Button label="Info" text-variant="info" variant="outline" />
-      </div>
-    </Variant>
-
-    <Variant title="Button with left icon with different sizes and icon only">
-      <div class="flex flex-wrap gap-2 p-4 bg-white dark:bg-slate-900">
-        <Button label="Default" icon="emoji-add" icon-position="left" />
-        <Button
-          label="Default LG"
-          icon="emoji-add"
-          icon-position="left"
-          size="lg"
-        />
-        <Button
-          label="Default SM"
-          icon="emoji-add"
-          icon-position="left"
-          size="sm"
-        />
-        <Button icon="emoji-add" size="sm" />
-      </div>
-    </Variant>
-
-    <Variant title="Button with right icon with different sizes and icon only">
-      <div class="flex flex-wrap gap-2 p-4 bg-white dark:bg-slate-900">
-        <Button label="Default" icon="emoji-add" icon-position="right" />
-        <Button
-          label="Default LG"
-          icon="emoji-add"
-          icon-position="right"
-          size="lg"
-        />
-        <Button
-          label="Default SM"
-          icon="emoji-add"
-          icon-position="right"
-          size="sm"
-        />
-        <Button icon="emoji-add" size="sm" />
+        <Button label="Ghost Button" variant="ghost" />
+        <Button label="Ghost with Icon" variant="ghost" icon="i-lucide-plus" />
+        <Button label="Link Button" variant="link" />
+        <Button label="Link with Icon" variant="link" icon="i-lucide-plus" />
       </div>
     </Variant>
   </Story>