@citizenplane/pimp 16.0.2 → 16.1.0

package/src/stories/CpBadge.stories.ts

@@ -2,32 +2,44 @@ import type { Args, Meta, StoryObj } from '@storybook/vue3'
 
 import CpBadge from '@/components/CpBadge.vue'
 
-import {
-  docCellStyle,
-  docLabelStyle,
-  docPageStyle,
-  docRowWrapStyle,
-  docSectionStyle,
-  docTitleStyle,
-} from '@/stories/documentationStyles'
+import { docCellStyle, docLabelStyle, docRowWrapStyle } from '@/stories/documentationStyles'
+
+const badgeColors = [
+  'neutral',
+  'accent',
+  'error',
+  'warning',
+  'success',
+  'blue',
+  'pink',
+  'magenta',
+  'yellow',
+  'white',
+] as const
+
+const badgeSizes = ['2xs', 'xs', 'sm', 'md'] as const
+
+const badgeVariants = ['outline', 'soft', 'solid'] as const
+
+const badgeIcons = ['', 'check', 'arrow-right', 'arrow-left', 'arrow-up', 'arrow-down', 'plus'] as const
 
 const meta = {
-  title: 'Visual/CpBadge',
+  title: 'Atoms/CpBadge',
   component: CpBadge,
   argTypes: {
     color: {
       control: 'select',
-      options: ['neutral', 'accent', 'error', 'warning', 'success', 'blue', 'pink', 'magenta', 'yellow', 'white'],
+      options: badgeColors,
       description: 'The color variant of the badge',
     },
     size: {
       control: 'select',
-      options: ['2xs', 'xs', 'sm', 'md'],
+      options: badgeSizes,
       description: 'The size of the badge',
     },
     variant: {
       control: 'select',
-      options: ['outline', 'soft', 'solid'],
+      options: badgeVariants,
       description: 'The variant of the badge',
     },
     disabled: {
@@ -40,12 +52,12 @@ const meta = {
     },
     leadingIcon: {
       control: 'select',
-      options: ['', 'check', 'arrow-right', 'arrow-left', 'arrow-up', 'arrow-down', 'plus'],
+      options: badgeIcons,
       description: 'Type of leading icon (if any)',
     },
     trailingIcon: {
       control: 'select',
-      options: ['', 'check', 'arrow-right', 'arrow-left', 'arrow-up', 'arrow-down', 'plus'],
+      options: badgeIcons,
       description: 'Type of trailing icon (if any)',
     },
     label: {
@@ -72,204 +84,258 @@ const defaultRender = (args: Args) => ({
   template: defaultTemplate,
 })
 
-export const Documentation: Story = {
-  args: {},
+/**
+ * Default badge: neutral color, outline variant, medium size. Use the controls
+ * to experiment with each prop in isolation.
+ */
+export const Default: Story = {
+  args: {
+    color: 'neutral',
+    size: 'md',
+    variant: 'outline',
+    isSquare: false,
+    disabled: false,
+    leadingIcon: '',
+    trailingIcon: '',
+    label: 'Badge',
+    isClearable: false,
+  },
+  render: defaultRender,
+}
+
+/* -------------------------------------------------------------------------- */
+/* Sizes                                                                      */
+/* -------------------------------------------------------------------------- */
+
+/**
+ * All sizes rendered side by side, from `2xs` to `md`.
+ */
+export const Sizes: Story = {
+  parameters: { controls: { disable: true } },
   render: () => ({
     components: { CpBadge },
-    setup: () => ({}),
+    setup() {
+      return { badgeSizes, docCellStyle, docLabelStyle, docRowWrapStyle }
+    },
     template: `
-      <div>
-        <div style="${docPageStyle}">
-          <h1 style="margin: 0 0 32px 0; font-size: 28px; font-weight: 700; color: #111;">CpBadge</h1>
-
-          <section style="${docSectionStyle}">
-            <h2 style="${docTitleStyle}">Size</h2>
-            <div style="${docRowWrapStyle}">
-              <div style="${docCellStyle}">
-                <span style="${docLabelStyle}">2xs</span>
-                <CpBadge color="accent" size="2xs" label="Badge" />
-              </div>
-              <div style="${docCellStyle}">
-                <span style="${docLabelStyle}">xs</span>
-                <CpBadge color="accent" size="xs" label="Badge" />
-              </div>
-              <div style="${docCellStyle}">
-                <span style="${docLabelStyle}">sm</span>
-                <CpBadge color="accent" size="sm" label="Badge" />
-              </div>
-              <div style="${docCellStyle}">
-                <span style="${docLabelStyle}">md</span>
-                <CpBadge color="accent" size="md" label="Badge" />
-              </div>
-            </div>
-          </section>
+      <div :style="docRowWrapStyle">
+        <div v-for="size in badgeSizes" :key="size" :style="docCellStyle">
+          <span :style="docLabelStyle">{{ size }}</span>
+          <CpBadge color="accent" :size="size" label="Badge" />
+        </div>
+      </div>
+    `,
+  }),
+}
 
-          <section style="${docSectionStyle}">
-            <h2 style="${docTitleStyle}">Color</h2>
-            <div style="${docRowWrapStyle}">
-              <div style="${docCellStyle}">
-                <span style="${docLabelStyle}">neutral</span>
-                <CpBadge color="neutral" label="Badge" />
-              </div>
-              <div style="${docCellStyle}">
-                <span style="${docLabelStyle}">accent</span>
-                <CpBadge color="accent" label="Badge" />
-              </div>
-              <div style="${docCellStyle}">
-                <span style="${docLabelStyle}">error</span>
-                <CpBadge color="error" label="Badge" />
-              </div>
-              <div style="${docCellStyle}">
-                <span style="${docLabelStyle}">warning</span>
-                <CpBadge color="warning" label="Badge" />
-              </div>
-              <div style="${docCellStyle}">
-                <span style="${docLabelStyle}">success</span>
-                <CpBadge color="success" label="Badge" />
-              </div>
-              <div style="${docCellStyle}">
-                <span style="${docLabelStyle}">blue</span>
-                <CpBadge color="blue" label="Badge" />
-              </div>
-              <div style="${docCellStyle}">
-                <span style="${docLabelStyle}">pink</span>
-                <CpBadge color="pink" label="Badge" />
-              </div>
-              <div style="${docCellStyle}">
-                <span style="${docLabelStyle}">magenta</span>
-                <CpBadge color="magenta" label="Badge" />
-              </div>
-              <div style="${docCellStyle}">
-                <span style="${docLabelStyle}">yellow</span>
-                <CpBadge color="yellow" label="Badge" />
-              </div>
-              <div style="${docCellStyle}">
-                <span style="${docLabelStyle}">white</span>
-                <CpBadge color="white" label="Badge" />
-              </div>
-            </div>
-          </section>
+/* -------------------------------------------------------------------------- */
+/* Colors                                                                     */
+/* -------------------------------------------------------------------------- */
 
-          <section style="${docSectionStyle}">
-            <h2 style="${docTitleStyle}">Variant</h2>
-            <table style="border-collapse: collapse; width: 100%;">
-              <thead>
-                <tr>
-                  <th style="text-align: left; padding: 8px 12px; font-size: 12px; color: #666; font-weight: 500;"></th>
-                  <th v-for="color in ['neutral', 'accent', 'error', 'warning', 'success', 'blue', 'pink', 'magenta', 'yellow', 'white']" :key="color" style="text-align: center; padding: 8px 12px; font-size: 12px; color: #666; font-weight: 500;">{{ color }}</th>
-                </tr>
-              </thead>
-              <tbody>
-                <tr v-for="variant in ['outline', 'soft', 'solid']" :key="variant">
-                  <td style="padding: 8px 12px; font-size: 12px; color: #666;">{{ variant }}</td>
-                  <td v-for="color in ['neutral', 'accent', 'error', 'warning', 'success', 'blue', 'pink', 'magenta', 'yellow', 'white']" :key="color" style="padding: 8px 12px; text-align: center;">
-                    <CpBadge :color="color" :variant label="Badge" />
-                  </td>
-                </tr>
-              </tbody>
-            </table>
-          </section>
+/**
+ * Every semantic and utility color available for the badge.
+ */
+export const Colors: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => ({
+    components: { CpBadge },
+    setup() {
+      return { badgeColors, docCellStyle, docLabelStyle, docRowWrapStyle }
+    },
+    template: `
+      <div :style="docRowWrapStyle">
+        <div v-for="color in badgeColors" :key="color" :style="docCellStyle">
+          <span :style="docLabelStyle">{{ color }}</span>
+          <CpBadge :color="color" label="Badge" />
+        </div>
+      </div>
+    `,
+  }),
+}
 
-          <section style="${docSectionStyle}">
-            <h2 style="${docTitleStyle}">disabled</h2>
-            <div style="${docRowWrapStyle}">
-              <div style="${docCellStyle}">
-                <span style="${docLabelStyle}">false</span>
-                <CpBadge color="accent" label="Badge" />
-              </div>
-              <div style="${docCellStyle}">
-                <span style="${docLabelStyle}">true</span>
-                <CpBadge color="accent" :disabled="true" label="Badge" />
-              </div>
-            </div>
-          </section>
+/* -------------------------------------------------------------------------- */
+/* Variants                                                                   */
+/* -------------------------------------------------------------------------- */
 
-          <section style="${docSectionStyle}">
-            <h2 style="${docTitleStyle}">is-square</h2>
-            <div style="${docRowWrapStyle}">
-              <div style="${docCellStyle}">
-                <span style="${docLabelStyle}">false</span>
-                <CpBadge color="accent" :is-square="false" label="Badge" />
-              </div>
-              <div style="${docCellStyle}">
-                <span style="${docLabelStyle}">true</span>
-                <CpBadge color="accent" :is-square="true" label="Badge" />
-              </div>
-            </div>
-          </section>
+/**
+ * Variant × color matrix, showing how each variant renders across every color.
+ */
+export const Variants: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => ({
+    components: { CpBadge },
+    setup() {
+      return { badgeColors, badgeVariants }
+    },
+    template: `
+      <table style="border-collapse: collapse; width: 100%;">
+        <thead>
+          <tr>
+            <th style="text-align: left; padding: 8px 12px; font-size: 12px; color: #666; font-weight: 500;"></th>
+            <th
+              v-for="color in badgeColors"
+              :key="color"
+              style="text-align: center; padding: 8px 12px; font-size: 12px; color: #666; font-weight: 500; text-transform: capitalize;"
+            >
+              {{ color }}
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="variant in badgeVariants" :key="variant">
+            <td style="padding: 8px 12px; font-size: 12px; color: #666; text-transform: capitalize;">{{ variant }}</td>
+            <td
+              v-for="color in badgeColors"
+              :key="color"
+              style="padding: 8px 12px; text-align: center;"
+            >
+              <CpBadge :color="color" :variant="variant" label="Badge" />
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    `,
+  }),
+}
 
-          <section style="${docSectionStyle}">
-            <h2 style="${docTitleStyle}">leading-icon & trailing-icon</h2>
-            <div style="${docRowWrapStyle}">
-              <div style="${docCellStyle}">
-                <span style="${docLabelStyle}">default</span>
-                <CpBadge color="accent" label="Badge" />
-              </div>
-              <div style="${docCellStyle}">
-                <span style="${docLabelStyle}">leading</span>
-                <CpBadge color="accent" leading-icon="check" label="Badge" />
-              </div>
-              <div style="${docCellStyle}">
-                <span style="${docLabelStyle}">leading + trailing</span>
-                <CpBadge color="accent" leading-icon="check" trailing-icon="arrow-right" label="Badge" />
-              </div>
-              <div style="${docCellStyle}">
-                <span style="${docLabelStyle}">trailing</span>
-                <CpBadge color="accent" trailing-icon="arrow-right" label="Badge" />
-              </div>
-              <div style="${docCellStyle}">
-                <span style="${docLabelStyle}">without label</span>
-                <CpBadge color="accent" leading-icon="check" />
-              </div>
-            </div>
-          </section>
+/* -------------------------------------------------------------------------- */
+/* Disabled                                                                   */
+/* -------------------------------------------------------------------------- */
 
-          <section style="${docSectionStyle}">
-            <h2 style="${docTitleStyle}">is-clearable</h2>
-            <div style="${docRowWrapStyle}">
-              <div style="${docCellStyle}">
-                <span style="${docLabelStyle}">without event</span>
-                <CpBadge color="accent" label="Badge" />
-              </div>
-              <div style="${docCellStyle}">
-                <span style="${docLabelStyle}">with event</span>
-                <CpBadge color="accent" @on-clear="console.log('clear')" is-clearable label="Badge" />
-              </div>
-              <div style="${docCellStyle}">
-                <span style="${docLabelStyle}">with disabled clear</span>
-                <CpBadge color="accent" @on-clear="console.log('clear')" is-clearable disabled label="Badge" />
-              </div>
-            </div>
-          </section>
+/**
+ * Enabled and disabled states compared side by side.
+ */
+export const Disabled: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => ({
+    components: { CpBadge },
+    setup() {
+      return { docCellStyle, docLabelStyle, docRowWrapStyle }
+    },
+    template: `
+      <div :style="docRowWrapStyle">
+        <div :style="docCellStyle">
+          <span :style="docLabelStyle">Enabled</span>
+          <CpBadge color="accent" label="Badge" />
+        </div>
+        <div :style="docCellStyle">
+          <span :style="docLabelStyle">Disabled</span>
+          <CpBadge color="accent" :disabled="true" label="Badge" />
         </div>
       </div>
     `,
   }),
-  parameters: {
-    controls: { disable: true },
-    docs: {
-      source: {
-        code: null,
-      },
+}
+
+/* -------------------------------------------------------------------------- */
+/* Square vs rounded                                                          */
+/* -------------------------------------------------------------------------- */
+
+/**
+ * Fully rounded (default) compared with the square variant.
+ */
+export const Squared: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => ({
+    components: { CpBadge },
+    setup() {
+      return { docCellStyle, docLabelStyle, docRowWrapStyle }
     },
-  },
+    template: `
+      <div :style="docRowWrapStyle">
+        <div :style="docCellStyle">
+          <span :style="docLabelStyle">Rounded</span>
+          <CpBadge color="accent" :is-square="false" label="Badge" />
+        </div>
+        <div :style="docCellStyle">
+          <span :style="docLabelStyle">Square</span>
+          <CpBadge color="accent" :is-square="true" label="Badge" />
+        </div>
+      </div>
+    `,
+  }),
 }
 
-export const Default: Story = {
-  args: {
-    color: 'neutral',
-    size: 'md',
-    variant: 'outline',
-    isSquare: false,
-    disabled: false,
-    leadingIcon: '',
-    trailingIcon: '',
-    label: 'Badge',
-    isClearable: false,
-  },
+/* -------------------------------------------------------------------------- */
+/* Icons                                                                      */
+/* -------------------------------------------------------------------------- */
+
+/**
+ * Badge with a leading icon.
+ */
+export const WithLeadingIcon: Story = {
+  args: { ...Default.args, color: 'accent', leadingIcon: 'check' },
+  render: defaultRender,
+}
+
+/**
+ * Badge with a trailing icon.
+ */
+export const WithTrailingIcon: Story = {
+  args: { ...Default.args, color: 'accent', trailingIcon: 'arrow-right' },
+  render: defaultRender,
+}
+
+/**
+ * Badge with both a leading and a trailing icon.
+ */
+export const WithBothIcons: Story = {
+  args: { ...Default.args, color: 'accent', leadingIcon: 'check', trailingIcon: 'arrow-right' },
   render: defaultRender,
 }
 
+/**
+ * Badge without a label, acting as an icon-only indicator.
+ */
+export const WithoutLabel: Story = {
+  args: { ...Default.args, color: 'accent', leadingIcon: 'check', label: '' },
+  render: defaultRender,
+}
+
+/* -------------------------------------------------------------------------- */
+/* Clearable                                                                  */
+/* -------------------------------------------------------------------------- */
+
+/**
+ * The clearable affordance shows up when `isClearable` is `true` and an
+ * `onClear` listener is provided. The clear button follows the badge disabled
+ * state.
+ */
+export const Clearable: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => ({
+    components: { CpBadge },
+    setup() {
+      const onClear = () => console.log('clear')
+      return { docCellStyle, docLabelStyle, docRowWrapStyle, onClear }
+    },
+    template: `
+      <div :style="docRowWrapStyle">
+        <div :style="docCellStyle">
+          <span :style="docLabelStyle">Not clearable</span>
+          <CpBadge color="accent" label="Badge" />
+        </div>
+        <div :style="docCellStyle">
+          <span :style="docLabelStyle">Clearable</span>
+          <CpBadge color="accent" :is-clearable="true" label="Badge" @on-clear="onClear" />
+        </div>
+        <div :style="docCellStyle">
+          <span :style="docLabelStyle">Clearable (disabled)</span>
+          <CpBadge color="accent" :is-clearable="true" :disabled="true" label="Badge" @on-clear="onClear" />
+        </div>
+      </div>
+    `,
+  }),
+}
+
+/* -------------------------------------------------------------------------- */
+/* Slots                                                                      */
+/* -------------------------------------------------------------------------- */
+
+/**
+ * Customize the icons and the label through `#leading-icon`, `#trailing-icon`
+ * and the default slot.
+ */
 export const WithSlot: Story = {
   render: (args: Args) => ({
     components: { CpBadge },