@citizenplane/pimp 16.0.3 → 16.1.0

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'
 
 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>
     `,