@citizenplane/pimp 8.29.0 → 8.30.0

package/src/stories/CpBadge.stories.ts

@@ -1,7 +1,9 @@
-import type { Meta, StoryObj } from '@storybook/vue3'
+import type { Args, Meta, StoryObj } from '@storybook/vue3'
 
 import CpBadge from '@/components/CpBadge.vue'
 
+import { Colors, Sizes } from '@/constants'
+
 const meta = {
   title: 'CpBadge',
   component: CpBadge,
@@ -13,7 +15,7 @@ const meta = {
     },
     size: {
       control: 'select',
-      options: ['sm', 'md'],
+      options: ['xs', 'sm', 'md'],
       description: 'The size of the badge',
     },
     isStroked: {
@@ -26,12 +28,12 @@ const meta = {
     },
     leadingIcon: {
       control: 'select',
-      options: ['check', 'arrow-right', 'arrow-left', 'arrow-up', 'arrow-down'],
+      options: ['', 'check', 'arrow-right', 'arrow-left', 'arrow-up', 'arrow-down', 'plus'],
       description: 'Type of leading icon (if any)',
     },
     trailingIcon: {
       control: 'select',
-      options: ['check', 'arrow-right', 'arrow-left', 'arrow-up', 'arrow-down'],
+      options: ['', 'check', 'arrow-right', 'arrow-left', 'arrow-up', 'arrow-down', 'plus'],
       description: 'Type of trailing icon (if any)',
     },
     label: {
@@ -45,23 +47,26 @@ export default meta
 
 type Story = StoryObj<typeof meta>
 
+const defaultTemplate = '<CpBadge v-bind="args" />'
+const defaultRender = (args: Args) => ({
+  components: { CpBadge },
+  setup() {
+    return { args }
+  },
+  template: defaultTemplate,
+})
+
 export const Default: Story = {
   args: {
-    color: 'gray',
-    size: 'md',
+    color: Colors.GRAY,
+    size: Sizes.MD,
     isStroked: false,
     isSquare: false,
     leadingIcon: '',
     trailingIcon: '',
     label: 'Badge',
   },
-  render: (args) => ({
-    components: { CpBadge },
-    setup() {
-      return { args }
-    },
-    template: '<CpBadge v-bind="args" />',
-  }),
+  render: defaultRender,
 }
 
 export const WithColors: Story = {
@@ -83,74 +88,79 @@ export const WithColors: Story = {
 }
 
 export const WithSizes: Story = {
-  render: () => ({
+  render: (args: Args) => ({
     components: { CpBadge },
+    setup() {
+      return { args }
+    },
     template: `
       <div style="display: flex; gap: 8px; align-items: center;">
-        <CpBadge size="sm" label="Small" />
-        <CpBadge size="md" label="Medium" />
+        <CpBadge v-bind="args" leading-icon="plus" trailing-icon="plus" size="md" label="Medium" />
+        <CpBadge v-bind="args" leading-icon="plus" trailing-icon="plus" size="sm" label="Small" />
+        <CpBadge v-bind="args" leading-icon="plus" trailing-icon="plus" size="xs" label="Extra Small" />
       </div>
     `,
   }),
 }
 
+export const WithLeadingIcon: Story = {
+  args: { ...Default.args, leadingIcon: 'check', label: 'Leading Icon' },
+  render: defaultRender,
+}
+
+export const WithTrailingIcon: Story = {
+  args: { ...Default.args, trailingIcon: 'check', label: 'Trailing Icon' },
+  render: defaultRender,
+}
+
+export const IconOnly: Story = {
+  args: { ...Default.args, leadingIcon: 'check', label: '' },
+  render: defaultRender,
+}
+
 export const IsStroked: Story = {
-  render: () => ({
+  render: (args: Args) => ({
     components: { CpBadge },
+    setup() {
+      return { args }
+    },
     template: `
-      <div style="display: flex; gap: 8px; flex-wrap: wrap;">
-        <CpBadge color="blue" isStroked label="Stroked" />
-        <CpBadge color="green" isStroked label="Stroked" />
-        <CpBadge color="red" isStroked label="Stroked" />
+      <div style="display: flex; gap: 8px; align-items: center;">
+        <CpBadge v-bind="args" is-stroked color="blue" leading-icon="plus" trailing-icon="plus" label="Label" />
+        <CpBadge v-bind="args" is-stroked color="red" leading-icon="plus" trailing-icon="plus" label="Label" />
+        <CpBadge v-bind="args" is-stroked color="orange" leading-icon="plus" trailing-icon="plus" label="Label" />
+        <CpBadge v-bind="args" is-stroked color="yellow" leading-icon="plus" trailing-icon="plus" label="Label" />
+        <CpBadge v-bind="args" is-stroked color="green" leading-icon="plus" trailing-icon="plus" label="Label" />
+        <CpBadge v-bind="args" is-stroked color="purple" leading-icon="plus" trailing-icon="plus" label="Label" />
+        <CpBadge v-bind="args" is-stroked color="gray" leading-icon="plus" trailing-icon="plus" label="Label" />
       </div>
     `,
   }),
 }
 
 export const WithIcons: Story = {
-  render: () => ({
-    components: { CpBadge },
-    template: `
-      <div style="display: flex; gap: 8px; align-items: center;">
-        <CpBadge color="blue" leading-icon="check" label="Leading Icon" />
-        <CpBadge color="green" trailing-icon="arrow-right" label="Trailing Icon" />
-        <CpBadge color="red" leading-icon="check" trailing-icon="arrow-right" label="Both Icons" />
-      </div>
-    `,
-  }),
+  args: { ...Default.args, leadingIcon: 'check', trailingIcon: 'arrow-right', label: 'Both Icons' },
+  render: defaultRender,
 }
 
 export const IsSquare: Story = {
-  render: () => ({
-    components: { CpBadge },
-    template: `
-      <div style="display: flex; gap: 8px; align-items: center;">
-        <CpBadge color="blue" isSquare label="Square" />
-        <CpBadge color="green" isSquare label="Square" />
-        <CpBadge color="red" isSquare label="Square" />
-      </div>
-    `,
-  }),
+  args: { ...Default.args, isSquare: true, label: 'Square' },
+  render: defaultRender,
 }
 
 export const IsClearable: Story = {
-  render: () => ({
-    components: { CpBadge },
-    template: `
-      <div style="display: flex; gap: 8px; align-items: center;">
-        <CpBadge color="blue" isClearable label="Clearable" />
-        <CpBadge color="green" isClearable label="Clearable" />
-        <CpBadge color="red" isClearable label="Clearable" />
-      </div>
-    `,
-  }),
+  args: { ...Default.args, isClearable: true, label: 'Clearable' },
+  render: defaultRender,
 }
 
 export const WithSlot: Story = {
-  render: () => ({
+  render: (args: Args) => ({
     components: { CpBadge },
+    setup() {
+      return { args }
+    },
     template: `
-      <CpBadge color="purple">
+      <CpBadge v-bind="args">
         <template #leading-icon>
           <span style="font-size: 16px; margin-right: 4px;">🌟</span>
         </template>