@citizenplane/pimp 16.0.3 → 16.2.0

package/src/stories/CpSelectMenu.stories.ts

@@ -1,48 +1,48 @@
 import { ref } from 'vue'
 
-import type { Meta, StoryObj } from '@storybook/vue3'
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
 
 import CpSelectMenu from '@/components/CpSelectMenu.vue'
 
+interface SelectValue {
+  label: string
+  value: string
+}
+
 const meta = {
-  title: 'Form/CpSelectMenu',
+  title: 'Molecules/CpSelectMenu',
   component: CpSelectMenu,
   argTypes: {
-    values: {
-      control: 'object',
-      description: 'Array of options to display',
-    },
-    selectedValue: {
-      control: 'object',
-      description: 'Currently selected value',
-    },
-    hasFilter: {
-      control: 'boolean',
-      description: 'Whether to show search filter',
-    },
-    dropdownTitle: {
-      control: 'text',
-      description: 'Title text for the dropdown',
-    },
-    dropdownFilterPlaceholder: {
-      control: 'text',
-      description: 'Placeholder text for the filter input',
-    },
+    values: { control: 'object', description: 'Array of options to display' },
+    selectedValue: { control: 'object', description: 'Currently selected value' },
+    hasFilter: { control: 'boolean', description: 'Whether to show search filter' },
+    dropdownTitle: { control: 'text', description: 'Title text for the dropdown' },
+    dropdownFilterPlaceholder: { control: 'text', description: 'Placeholder text for the filter input' },
     dropdownEmptyViewPlaceholder: {
       control: 'text',
       description: 'Text to show when no options match the filter',
     },
-    closeOnSelect: {
-      control: 'boolean',
-      description: 'Whether to close dropdown after selection',
-    },
+    closeOnSelect: { control: 'boolean', description: 'Whether to close dropdown after selection' },
   },
-  decorators: [() => ({ template: '<div style="min-height: 30vh;"><story/></div>' })],
+  decorators: [() => ({ template: '<div style="min-height: 30vh;"><story /></div>' })],
 } satisfies Meta<typeof CpSelectMenu>
 
 export default meta
+
 type Story = StoryObj<typeof meta>
 
+type SelectMenuStoryArgs = NonNullable<Story['args']>
+
+function pickSelectMenuBindProps(args: SelectMenuStoryArgs) {
+  return {
+    closeOnSelect: args.closeOnSelect,
+    dropdownEmptyViewPlaceholder: args.dropdownEmptyViewPlaceholder,
+    dropdownFilterPlaceholder: args.dropdownFilterPlaceholder,
+    dropdownTitle: args.dropdownTitle,
+    hasFilter: args.hasFilter,
+  }
+}
+
 const sampleOptions = [
   { value: '1', label: 'Apple' },
   { value: '2', label: 'Banana' },
@@ -53,6 +53,10 @@ const sampleOptions = [
   { value: '7', label: 'Cherry' },
 ]
 
+/**
+ * Default select menu. Use the controls to experiment with each prop in
+ * isolation.
+ */
 export const Default: Story = {
   args: {
     values: sampleOptions,
@@ -63,69 +67,76 @@ export const Default: Story = {
     dropdownEmptyViewPlaceholder: 'No option found',
     closeOnSelect: true,
   },
-  render: (args) => ({
+  render: (args: SelectMenuStoryArgs) => ({
     components: { CpSelectMenu },
     setup() {
-      const selectedValue = ref(args.selectedValue)
-      return { args, selectedValue }
+      const selectedValue = ref<SelectValue>({ ...args.selectedValue })
+      const values = ref<SelectValue[]>([...(args.values ?? [])])
+      const menuProps = pickSelectMenuBindProps(args)
+
+      const onUpdateSelectedValue = (data: SelectValue) => {
+        selectedValue.value = data
+      }
+
+      return { menuProps, onUpdateSelectedValue, selectedValue, values }
     },
     template: `
       <div style="max-width: 400px; padding: 20px;">
         <CpSelectMenu
           v-model:selectedValue="selectedValue"
-          v-bind="args"
+          v-bind="menuProps"
+          :values="values"
           @update:selected-value="onUpdateSelectedValue"
         />
       </div>
     `,
-    methods: {
-      onUpdateSelectedValue: (data) => {
-        args.selectedValue = data
-      },
-    },
   }),
 }
 
-const searchQuery = ref('')
-
 export const WithFilter: Story = {
   args: {
     ...Default.args,
     hasFilter: true,
     dropdownTitle: 'Search for a fruit',
-    selectedValue: { value: '1', label: 'Apple' },
-    values: sampleOptions,
   },
-  render: (args) => ({
+  render: (args: SelectMenuStoryArgs) => ({
     components: { CpSelectMenu },
     setup() {
-      const selectedValue = ref(args.selectedValue)
-      return { args, selectedValue }
+      const selectedValue = ref<SelectValue>({ ...args.selectedValue })
+      const values = ref<SelectValue[]>([...(args.values ?? [])])
+      const menuProps = pickSelectMenuBindProps(args)
+      const searchQuery = ref('')
+
+      const onUpdateSelectedValue = (data: SelectValue) => {
+        selectedValue.value = data
+      }
+
+      const onFilterChange = (data: string) => {
+        searchQuery.value = data
+        values.value = sampleOptions.filter((option) =>
+          option.label.toLowerCase().includes(searchQuery.value.toLowerCase()),
+        )
+      }
+
+      return { menuProps, onFilterChange, onUpdateSelectedValue, selectedValue, values }
     },
     template: `
       <div style="max-width: 400px; padding: 20px;">
         <CpSelectMenu
           v-model:selectedValue="selectedValue"
-          v-bind="args"
+          v-bind="menuProps"
+          :values="values"
           @on-filter-change="onFilterChange"
           @update:selected-value="onUpdateSelectedValue"
         />
       </div>
     `,
-    methods: {
-      onFilterChange: (data) => {
-        searchQuery.value = data
-        args.values = sampleOptions.filter((option) =>
-          option.label.toLowerCase().includes(searchQuery.value.toLowerCase()),
-        )
-      },
-      onUpdateSelectedValue: (data) => {
-        args.selectedValue = data
-      },
-    },
   }),
 }
 
+/**
+ * Override the dropdown title via `dropdownTitle`.
+ */
 export const CustomTitle: Story = {
   args: {
     ...Default.args,

package/src/stories/CpSelectableButton.stories.ts

@@ -1,16 +1,19 @@
-import { ref } from 'vue'
-
-import type { Meta, StoryObj } from '@storybook/vue3'
+import type { Args, Meta, StoryObj } from '@storybook/vue3-vite'
 
 import CpSelectableButton from '@/components/CpSelectableButton.vue'
 
+import { docCellStyle, docLabelStyle, docRowWrapStyle } from '@/stories/documentationStyles'
+
+const selectableAppearances = ['primary', 'secondary', 'tertiary', 'quaternary', 'inverse'] as const
+const selectableSizes = ['3xs', '2xs', 'xs', 'sm', 'md'] as const
+
 const meta = {
-  title: 'Form/CpSelectableButton',
+  title: 'Atoms/CpSelectableButton',
   component: CpSelectableButton,
   argTypes: {
     appearance: {
       control: 'select',
-      options: ['primary', 'secondary', 'tertiary', 'quaternary', 'inverse'],
+      options: selectableAppearances,
       description: 'Visual style of the selectable button',
     },
     isSelected: {
@@ -23,7 +26,7 @@ const meta = {
     },
     size: {
       control: 'select',
-      options: ['3xs', '2xs', 'xs', 'sm', 'md'],
+      options: selectableSizes,
       description: 'Size of the button',
     },
     disabled: {
@@ -40,6 +43,22 @@ const meta = {
 export default meta
 type Story = StoryObj<typeof meta>
 
+const defaultRender = (args: Args) => ({
+  components: { CpSelectableButton },
+  setup() {
+    return { args }
+  },
+  template: `
+    <div style="display: flex; justify-content: center; align-items: center; min-height: 120px; min-width: 240px;">
+      <CpSelectableButton v-bind="args" />
+    </div>
+  `,
+})
+
+/**
+ * Default selectable button. Use the controls to experiment with each prop
+ * in isolation.
+ */
 export const Default: Story = {
   args: {
     appearance: 'primary',
@@ -49,72 +68,150 @@ export const Default: Story = {
     isSelected: false,
     isExpanded: false,
   },
-  render: (args) => ({
+  render: defaultRender,
+}
+
+/* -------------------------------------------------------------------------- */
+/* Appearances                                                                */
+/* -------------------------------------------------------------------------- */
+
+/**
+ * Every appearance rendered side by side. The `inverse` appearance is meant
+ * for dark backgrounds.
+ */
+export const Appearances: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => ({
     components: { CpSelectableButton },
     setup() {
-      return { args }
+      return { selectableAppearances, docCellStyle, docLabelStyle, docRowWrapStyle }
+    },
+    template: `
+      <div :style="docRowWrapStyle">
+        <div
+          v-for="appearance in selectableAppearances"
+          :key="appearance"
+          :style="[docCellStyle, appearance === 'inverse' ? 'background: #111; color: #fff; padding: 16px; border-radius: 8px;' : '']"
+        >
+          <span :style="[docLabelStyle, appearance === 'inverse' ? 'color: #e5e7eb;' : '']">{{ appearance }}</span>
+          <CpSelectableButton :appearance="appearance" label="Label" />
+        </div>
+      </div>
+    `,
+  }),
+}
+
+/* -------------------------------------------------------------------------- */
+/* Sizes                                                                      */
+/* -------------------------------------------------------------------------- */
+
+/**
+ * All sizes rendered side by side, from `3xs` to `md`.
+ */
+export const Sizes: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => ({
+    components: { CpSelectableButton },
+    setup() {
+      return { selectableSizes, docCellStyle, docLabelStyle, docRowWrapStyle }
+    },
+    template: `
+      <div :style="docRowWrapStyle">
+        <div v-for="size in selectableSizes" :key="size" :style="docCellStyle">
+          <span :style="docLabelStyle">{{ size }}</span>
+          <CpSelectableButton appearance="primary" :size="size" label="Label" />
+        </div>
+      </div>
+    `,
+  }),
+}
+
+/* -------------------------------------------------------------------------- */
+/* States                                                                     */
+/* -------------------------------------------------------------------------- */
+
+/**
+ * The three selection states: default, `isExpanded` and `isSelected`.
+ */
+export const States: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => ({
+    components: { CpSelectableButton },
+    setup() {
+      return { docCellStyle, docLabelStyle, docRowWrapStyle }
     },
     template: `
-      <div style="display: flex; justify-content: center; align-items: center; min-height: 240px; min-width:240px;">
-        <CpSelectableButton
-          v-bind="args"
-        />
+      <div :style="docRowWrapStyle">
+        <div :style="docCellStyle">
+          <span :style="docLabelStyle">Default</span>
+          <CpSelectableButton appearance="primary" label="Label" />
+        </div>
+        <div :style="docCellStyle">
+          <span :style="docLabelStyle">Expanded</span>
+          <CpSelectableButton appearance="primary" label="Label" :is-expanded="true" />
+        </div>
+        <div :style="docCellStyle">
+          <span :style="docLabelStyle">Selected</span>
+          <CpSelectableButton appearance="primary" label="Label" :is-selected="true" />
+        </div>
+        <div :style="docCellStyle">
+          <span :style="docLabelStyle">Disabled</span>
+          <CpSelectableButton appearance="primary" label="Label" :disabled="true" />
+        </div>
       </div>
     `,
   }),
 }
 
+/* -------------------------------------------------------------------------- */
+/* Icons                                                                      */
+/* -------------------------------------------------------------------------- */
+
+/**
+ * Slot `#leading-icon` and `#trailing-icon` accept any icon component.
+ */
 export const WithIcons: Story = {
   args: {
     appearance: 'primary',
     size: 'md',
-    disabled: false,
     label: 'Label',
-    isSelected: false,
-    isExpanded: false,
   },
-  render: (args) => ({
+  render: (args: Args) => ({
     components: { CpSelectableButton },
     setup() {
       return { args }
     },
     template: `
-      <div style="display: flex; justify-content: center; align-items: center; min-height: 240px; min-width:240px;">
-        <CpSelectableButton
-          v-bind="args"
-        >
-          <template #leading-icon>
-            <CpIcon type="circle" />
-          </template>
-          <template #trailing-icon>
-            <CpIcon type="circle" />
-          </template>
-        </CpSelectableButton>
-      </div>
+      <CpSelectableButton v-bind="args">
+        <template #leading-icon>
+          <CpIcon type="circle" />
+        </template>
+        <template #trailing-icon>
+          <CpIcon type="circle" />
+        </template>
+      </CpSelectableButton>
     `,
   }),
 }
 
+/**
+ * Stretch the button to fill its container by setting `width: 100%`.
+ */
 export const FullWidth: Story = {
   args: {
     appearance: 'secondary',
     size: 'md',
-    disabled: false,
     label: 'Label',
     isSelected: true,
-    isExpanded: false,
   },
-  render: (args) => ({
+  render: (args: Args) => ({
     components: { CpSelectableButton },
     setup() {
       return { args }
     },
     template: `
-      <div style="display: flex; justify-content: center; align-items: center; min-height: 240px; width:500px;">
-        <CpSelectableButton
-          style="width: 100%;"
-          v-bind="args"
-        >
+      <div style="width: 500px;">
+        <CpSelectableButton style="width: 100%;" v-bind="args">
           <template #leading-icon>
             <CpIcon type="circle" />
           </template>
@@ -127,56 +224,48 @@ export const FullWidth: Story = {
   }),
 }
 
-export const Sizing: Story = {
-  args: {
-    disabled: false,
-    label: 'Label',
-  },
-  render: (args) => ({
+/* -------------------------------------------------------------------------- */
+/* Matrix                                                                     */
+/* -------------------------------------------------------------------------- */
+
+/**
+ * Full appearance × size matrix, each cell showing default / expanded /
+ * selected side by side. Useful for visual regression.
+ */
+export const Matrix: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => ({
     components: { CpSelectableButton },
     setup() {
-      const defaultValue = ref('default')
-      const expandedValue = ref('expanded')
-      const selectedValue = ref('selected')
-      return { args, defaultValue, expandedValue, selectedValue }
+      return { selectableAppearances, selectableSizes }
     },
     template: `
-      <div v-for="appearance in ['primary', 'secondary', 'tertiary', 'quaternary', 'inverse']" :style="['display: flex; flex-direction: row; gap: 48px; align-items: center; padding: 48px', {'background-color': appearance === 'inverse' ? 'black' : 'transparent', 'color': appearance === 'inverse' ? 'white' : 'black'}]">
-        <p style="min-width: 80px;">{{ appearance }}</p>
-        <div v-for="size in ['3xs', '2xs', 'xs', 'sm', 'md']" style="display: flex; justify-content: center; align-items: center; gap: 8px;">
-          <p>{{ size }}</p>
-          <CpSelectableButton
-            v-bind="{ ...args, appearance, size }"
-          >
-            <template #leading-icon>
-              <CpIcon type="circle" />
-            </template>
-            <template #trailing-icon>
-              <CpIcon type="circle" />
-            </template>
-          </CpSelectableButton>  
-          <CpSelectableButton
-            v-bind="{ ...args, appearance, size }"
-            isExpanded
-          >
-            <template #leading-icon>
-              <CpIcon type="circle" />
-            </template>
-            <template #trailing-icon>
-              <CpIcon type="circle" />
-            </template>
-          </CpSelectableButton>
-          <CpSelectableButton
-            v-bind="{ ...args, appearance, size }"
-            isSelected
+      <div>
+        <div
+          v-for="appearance in selectableAppearances"
+          :key="appearance"
+          :style="['display: flex; flex-direction: row; gap: 48px; align-items: center; padding: 48px', appearance === 'inverse' ? 'background-color: black; color: white;' : '']"
+        >
+          <p style="min-width: 80px; margin: 0;">{{ appearance }}</p>
+          <div
+            v-for="size in selectableSizes"
+            :key="size"
+            style="display: flex; justify-content: center; align-items: center; gap: 8px;"
           >
-            <template #leading-icon>
-              <CpIcon type="circle" />
-            </template>
-            <template #trailing-icon>
-              <CpIcon type="circle" />
-            </template>
-          </CpSelectableButton>
+            <p style="margin: 0;">{{ size }}</p>
+            <CpSelectableButton :appearance="appearance" :size="size" label="Label">
+              <template #leading-icon><CpIcon type="circle" /></template>
+              <template #trailing-icon><CpIcon type="circle" /></template>
+            </CpSelectableButton>
+            <CpSelectableButton :appearance="appearance" :size="size" label="Label" :is-expanded="true">
+              <template #leading-icon><CpIcon type="circle" /></template>
+              <template #trailing-icon><CpIcon type="circle" /></template>
+            </CpSelectableButton>
+            <CpSelectableButton :appearance="appearance" :size="size" label="Label" :is-selected="true">
+              <template #leading-icon><CpIcon type="circle" /></template>
+              <template #trailing-icon><CpIcon type="circle" /></template>
+            </CpSelectableButton>
+          </div>
         </div>
       </div>
     `,