@citizenplane/pimp 16.0.3 → 16.1.0

package/src/stories/CpButton.stories.ts

@@ -1,36 +1,31 @@
-import type { Meta, StoryObj } from '@storybook/vue3'
-
-import { ButtonAppearances } from '@/constants/Button'
+import type { Args, Meta, StoryObj } from '@storybook/vue3'
 
 import CpButton from '@/components/CpButton.vue'
 import CpIcon from '@/components/CpIcon.vue'
 
-import {
-  docCellStyle,
-  docLabelStyle,
-  docPageStyle,
-  docRowWrapStyle,
-  docSectionStyle,
-  docTitleStyle,
-} from '@/stories/documentationStyles'
+import { docCellStyle, docLabelStyle, docRowWrapStyle } from '@/stories/documentationStyles'
+
+const buttonAppearances = ['primary', 'secondary', 'tertiary'] as const
+const buttonColors = ['neutral', 'accent', 'success', 'warning', 'error'] as const
+const buttonSizes = ['2xs', 'xs', 'sm', 'md', 'lg'] as const
 
 const meta = {
-  title: 'Form/CpButton',
+  title: 'Atoms/CpButton',
   component: CpButton,
   argTypes: {
     appearance: {
       control: 'select',
-      options: ['primary', 'secondary', 'tertiary'],
+      options: buttonAppearances,
       description: 'The visual style of the button',
     },
     size: {
       control: 'select',
-      options: ['2xs', 'xs', 'sm', 'md', 'lg'],
+      options: buttonSizes,
       description: 'The size of the button',
     },
     color: {
       control: 'select',
-      options: ['Neutral', 'Accent', 'Success', 'Warning', 'Error'],
+      options: buttonColors,
       description: 'The color variant of the button',
     },
     disabled: {
@@ -55,15 +50,20 @@ const meta = {
       control: 'boolean',
       description: 'Whether the button has square corners',
     },
+    enableHaptics: {
+      control: 'boolean',
+      description: 'Trigger haptic feedback on click (supported devices only)',
+    },
   },
 } satisfies Meta<typeof CpButton>
 
 export default meta
+
 type Story = StoryObj<typeof meta>
 
 const defaultTemplate = '<CpButton v-bind="args">Button</CpButton>'
 
-const defaultRender = (args: (typeof CpButton)['props']) => ({
+const defaultRender = (args: Args) => ({
   components: { CpButton },
   setup() {
     return { args }
@@ -71,307 +71,206 @@ const defaultRender = (args: (typeof CpButton)['props']) => ({
   template: defaultTemplate,
 })
 
-export const Documentation: Story = {
-  args: {},
-  render: () => ({
-    components: { CpButton, CpIcon },
-    setup: () => ({}),
-    template: `
-      <div>
-        <div style="${docPageStyle}">
-          <h1 style="margin: 0 0 32px 0; font-size: 28px; font-weight: 700; color: #111;">CpButton</h1>
-
-          <section style="${docSectionStyle}">
-            <h2 style="${docTitleStyle}">Size</h2>
-            <div style="${docRowWrapStyle}">
-              <div style="${docCellStyle}">
-                <span style="${docLabelStyle}">2xs</span>
-                <CpButton color="accent" size="2xs">Default button</CpButton>
-              </div>
-              <div style="${docCellStyle}">
-                <span style="${docLabelStyle}">xs</span>
-                <CpButton color="accent" size="xs">Default button</CpButton>
-              </div>
-              <div style="${docCellStyle}">
-                <span style="${docLabelStyle}">sm</span>
-                <CpButton color="accent" size="sm">Default button</CpButton>
-              </div>
-              <div style="${docCellStyle}">
-                <span style="${docLabelStyle}">md</span>
-                <CpButton color="accent" size="md">Default button</CpButton>
-              </div>
-              <div style="${docCellStyle}">
-                <span style="${docLabelStyle}">lg</span>
-                <CpButton color="accent" size="lg">Default button</CpButton>
-              </div>
-            </div>
-          </section>
-
-          <section style="${docSectionStyle}">
-            <h2 style="${docTitleStyle}">Color</h2>
-            <div style="${docRowWrapStyle}">
-              <div style="${docCellStyle}">
-                <span style="${docLabelStyle}">neutral</span>
-                <CpButton color="neutral">Default button</CpButton>
-              </div>
-              <div style="${docCellStyle}">
-                <span style="${docLabelStyle}">accent</span>
-                <CpButton color="accent">Default button</CpButton>
-              </div>
-              <div style="${docCellStyle}">
-                <span style="${docLabelStyle}">error</span>
-                <CpButton color="error">Default button</CpButton>
-              </div>
-              <div style="${docCellStyle}">
-                <span style="${docLabelStyle}">warning</span>
-                <CpButton color="warning">Default button</CpButton>
-              </div>
-              <div style="${docCellStyle}">
-                <span style="${docLabelStyle}">success</span>
-                <CpButton color="success">Default button</CpButton>
-              </div>
-            </div>
-          </section>
+/**
+ * Default button: primary appearance, neutral color, medium size. Use the
+ * controls to experiment with each prop in isolation.
+ */
+export const Default: Story = {
+  args: {
+    appearance: 'primary',
+    color: 'neutral',
+    size: 'md',
+    disabled: false,
+    isLoading: false,
+    isSquare: false,
+    tag: 'button',
+    type: 'button',
+  },
+  render: defaultRender,
+}
 
-          <section style="${docSectionStyle}">
-            <h2 style="${docTitleStyle}">State</h2>
-            <div style="${docRowWrapStyle}">
-              <div style="${docCellStyle}">
-                <span style="${docLabelStyle}">default</span>
-                <CpButton color="accent">Default button</CpButton>
-              </div>
-              <div style="${docCellStyle}">
-                <span style="${docLabelStyle}">disabled</span>
-                <CpButton color="accent" :disabled="true">Default button</CpButton>
-              </div>
-            </div>
-          </section>
+/* -------------------------------------------------------------------------- */
+/* Appearances                                                                */
+/* -------------------------------------------------------------------------- */
 
-          <section style="${docSectionStyle}">
-            <h2 style="${docTitleStyle}">Squared</h2>
-            <div style="${docRowWrapStyle}">
-              <div style="${docCellStyle}">
-                <span style="${docLabelStyle}">false</span>
-                <CpButton color="accent" :is-square="false">Default button</CpButton>
-              </div>
-              <div style="${docCellStyle}">
-                <span style="${docLabelStyle}">true</span>
-                <CpButton color="accent" :is-square="true">Default button</CpButton>
-              </div>
-            </div>
-          </section>
+/**
+ * Every appearance rendered side by side: `primary`, `secondary`, `tertiary`.
+ */
+export const Appearances: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => ({
+    components: { CpButton },
+    setup() {
+      return { buttonAppearances, docCellStyle, docLabelStyle, docRowWrapStyle }
+    },
+    template: `
+      <div :style="docRowWrapStyle">
+        <div v-for="appearance in buttonAppearances" :key="appearance" :style="docCellStyle">
+          <span :style="docLabelStyle">{{ appearance }}</span>
+          <CpButton :appearance="appearance" color="accent">Button</CpButton>
+        </div>
+      </div>
+    `,
+  }),
+}
 
-          <section style="${docSectionStyle}">
-            <h2 style="${docTitleStyle}">Style</h2>
-            <div style="${docRowWrapStyle}">
-              <div style="${docCellStyle}">
-                <span style="${docLabelStyle}">primary</span>
-                <CpButton color="accent">Default button</CpButton>
-              </div>
-              <div style="${docCellStyle}">
-                <span style="${docLabelStyle}">secondary</span>
-                <CpButton appearance="secondary" color="accent">Default button</CpButton>
-              </div>
-              <div style="${docCellStyle}">
-                <span style="${docLabelStyle}">tertiary</span>
-                <CpButton appearance="tertiary" color="accent">Default button</CpButton>
-              </div>
-            </div>
-          </section>
+/* -------------------------------------------------------------------------- */
+/* Colors                                                                     */
+/* -------------------------------------------------------------------------- */
 
-          <section style="${docSectionStyle}">
-            <h2 style="${docTitleStyle}">Icon</h2>
-            <div style="${docRowWrapStyle}">
-              <div style="${docCellStyle}">
-                <span style="${docLabelStyle}">—</span>
-                <CpButton color="accent">Default button</CpButton>
-              </div>
-              <div style="${docCellStyle}">
-                <span style="${docLabelStyle}">leading</span>
-                <CpButton color="accent">
-                  <template #leading-icon><CpIcon type="plus" /></template>
-                  Default button
-                </CpButton>
-              </div>
-              <div style="${docCellStyle}">
-                <span style="${docLabelStyle}">leading + trailing</span>
-                <CpButton color="accent">
-                  <template #leading-icon><CpIcon type="plus" /></template>
-                  Default button
-                  <template #trailing-icon><CpIcon type="plus" /></template>
-                </CpButton>
-              </div>
-              <div style="${docCellStyle}">
-                <span style="${docLabelStyle}">trailing</span>
-                <CpButton color="accent">
-                  Default button
-                  <template #trailing-icon><CpIcon type="plus" /></template>
-                </CpButton>
-              </div>
-            </div>
-          </section>
+/**
+ * Every semantic color available for the button.
+ */
+export const Colors: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => ({
+    components: { CpButton },
+    setup() {
+      return { buttonColors, docCellStyle, docLabelStyle, docRowWrapStyle }
+    },
+    template: `
+      <div :style="docRowWrapStyle">
+        <div v-for="color in buttonColors" :key="color" :style="docCellStyle">
+          <span :style="docLabelStyle">{{ color }}</span>
+          <CpButton appearance="primary" :color="color">Button</CpButton>
         </div>
       </div>
     `,
   }),
-  parameters: {
-    controls: { disable: true },
-    docs: {
-      source: {
-        code: null,
-      },
-    },
-  },
 }
 
-export const Default: Story = {
-  args: {},
-  render: defaultRender,
+/* -------------------------------------------------------------------------- */
+/* Sizes                                                                      */
+/* -------------------------------------------------------------------------- */
+
+/**
+ * All sizes rendered side by side, from `2xs` to `lg`.
+ */
+export const Sizes: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => ({
+    components: { CpButton },
+    setup() {
+      return { buttonSizes, docCellStyle, docLabelStyle, docRowWrapStyle }
+    },
+    template: `
+      <div :style="docRowWrapStyle">
+        <div v-for="size in buttonSizes" :key="size" :style="docCellStyle">
+          <span :style="docLabelStyle">{{ size }}</span>
+          <CpButton :size="size" color="accent">Button</CpButton>
+        </div>
+      </div>
+    `,
+  }),
 }
 
-/** Semantic colors shown in appearance variant stories (primary, secondary, etc.). */
-const semanticButtonColors = [
-  { value: 'neutral', label: 'neutral' },
-  { value: 'accent', label: 'accent' },
-  { value: 'error', label: 'error' },
-  { value: 'warning', label: 'warning' },
-  { value: 'success', label: 'success' },
-] as const
+/* -------------------------------------------------------------------------- */
+/* States                                                                     */
+/* -------------------------------------------------------------------------- */
 
-const appearanceVariantsStoryParameters = {
-  docs: {
-    source: {
-      code: null,
+/**
+ * Enabled, disabled and loading states compared side by side. The loading
+ * state is automatically disabled to prevent double submissions.
+ */
+export const States: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => ({
+    components: { CpButton },
+    setup() {
+      return { docCellStyle, docLabelStyle, docRowWrapStyle }
     },
-  },
-} as const
+    template: `
+      <div :style="docRowWrapStyle">
+        <div :style="docCellStyle">
+          <span :style="docLabelStyle">Enabled</span>
+          <CpButton color="accent">Button</CpButton>
+        </div>
+        <div :style="docCellStyle">
+          <span :style="docLabelStyle">Disabled</span>
+          <CpButton color="accent" :disabled="true">Button</CpButton>
+        </div>
+        <div :style="docCellStyle">
+          <span :style="docLabelStyle">Loading</span>
+          <CpButton color="accent" :is-loading="true">Button</CpButton>
+        </div>
+      </div>
+    `,
+  }),
+}
+
+/* -------------------------------------------------------------------------- */
+/* Square vs rounded                                                          */
+/* -------------------------------------------------------------------------- */
 
-function createAppearanceVariantsStory(appearance: ButtonAppearances): Story {
-  return {
-    args: {
-      ...Default.args,
-      appearance,
+/**
+ * Fully rounded (default) compared with the square variant. Square fits
+ * better inside forms or grouped controls.
+ */
+export const Squared: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => ({
+    components: { CpButton },
+    setup() {
+      return { docCellStyle, docLabelStyle, docRowWrapStyle }
     },
-    render: (args) => ({
-      components: { CpButton },
-      setup: () => ({
-        args,
-        semanticButtonColors,
-        storyAppearance: appearance,
-      }),
-      template: `
-      <div style="display: flex; flex-direction: column; gap: 32px; padding: 24px;">
-        <div
-          v-for="c in semanticButtonColors"
-          :key="c.value"
-          style="display: flex; flex-direction: column; gap: 12px; padding: 16px; background: #fff; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.08);"
-        >
-          <h4 style="margin: 0; font-size: 14px; font-weight: 600; color: #333; text-transform: capitalize;">{{ c.label }}</h4>
-          <div style="display: flex; flex-wrap: wrap; gap: 24px 32px; align-items: flex-end;">
-            <div style="display: flex; flex-direction: column; gap: 12px;">
-              <span style="font-size: 12px; color: #6b7280; font-weight: 500;">Square</span>
-              <div style="display: flex; gap: 16px; align-items: flex-end;">
-                <div style="display: flex; flex-direction: column; gap: 8px; align-items: flex-start;">
-                  <span style="font-size: 12px; color: #9ca3af;">Normal</span>
-                  <CpButton
-                    v-bind="args"
-                    :appearance="storyAppearance"
-                    :color="c.value"
-                    :is-square="true"
-                    :disabled="false"
-                  >
-                    Default button
-                  </CpButton>
-                </div>
-                <div style="display: flex; flex-direction: column; gap: 8px; align-items: flex-start;">
-                  <span style="font-size: 12px; color: #9ca3af;">Disabled</span>
-                  <CpButton
-                    v-bind="args"
-                    :appearance="storyAppearance"
-                    :color="c.value"
-                    :is-square="true"
-                    :disabled="true"
-                  >
-                    Default button
-                  </CpButton>
-                </div>
-              </div>
-            </div>
-            <div style="display: flex; flex-direction: column; gap: 12px;">
-              <span style="font-size: 12px; color: #6b7280; font-weight: 500;">Not square</span>
-              <div style="display: flex; gap: 16px; align-items: flex-end;">
-                <div style="display: flex; flex-direction: column; gap: 8px; align-items: flex-start;">
-                  <span style="font-size: 12px; color: #9ca3af;">Normal</span>
-                  <CpButton
-                    v-bind="args"
-                    :appearance="storyAppearance"
-                    :color="c.value"
-                    :is-square="false"
-                    :disabled="false"
-                  >
-                    Default button
-                  </CpButton>
-                </div>
-                <div style="display: flex; flex-direction: column; gap: 8px; align-items: flex-start;">
-                  <span style="font-size: 12px; color: #9ca3af;">Disabled</span>
-                  <CpButton
-                    v-bind="args"
-                    :appearance="storyAppearance"
-                    :color="c.value"
-                    :is-square="false"
-                    :disabled="true"
-                  >
-                    Default button
-                  </CpButton>
-                </div>
-              </div>
-            </div>
-          </div>
+    template: `
+      <div :style="docRowWrapStyle">
+        <div :style="docCellStyle">
+          <span :style="docLabelStyle">Rounded</span>
+          <CpButton color="accent" :is-square="false">Button</CpButton>
+        </div>
+        <div :style="docCellStyle">
+          <span :style="docLabelStyle">Square</span>
+          <CpButton color="accent" :is-square="true">Button</CpButton>
         </div>
       </div>
     `,
-    }),
-    parameters: appearanceVariantsStoryParameters,
-  }
+  }),
 }
 
-export const Primary = createAppearanceVariantsStory('primary')
-export const Secondary = createAppearanceVariantsStory('secondary')
-export const Tertiary = createAppearanceVariantsStory('tertiary')
-
-const withIconsSizes = [
-  { value: '2xs', label: '2xs' },
-  { value: 'xs', label: 'xs' },
-  { value: 'sm', label: 'sm' },
-  { value: 'md', label: 'md' },
-  { value: 'lg', label: 'lg' },
-] as const
+/* -------------------------------------------------------------------------- */
+/* Icons                                                                      */
+/* -------------------------------------------------------------------------- */
 
-export const WithIcons: Story = {
-  args: {
-    ...Default.args,
-    appearance: 'primary',
-    color: 'accent',
-  },
-  render: (args) => ({
+/**
+ * Button with a leading icon, a trailing icon, both or an icon-only
+ * configuration (pair with `isSquare` for best visual balance).
+ */
+export const Icons: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => ({
     components: { CpButton, CpIcon },
-    setup: () => ({ args, withIconsSizes }),
+    setup() {
+      return { docCellStyle, docLabelStyle, docRowWrapStyle }
+    },
     template: `
-      <div style="display: flex; flex-wrap: wrap; gap: 24px 32px; align-items: flex-end; padding: 24px;">
-        <div
-          v-for="s in withIconsSizes"
-          :key="s.value"
-          style="display: flex; flex-direction: column; gap: 8px; align-items: flex-start;"
-        >
-          <span style="font-size: 12px; color: #6b7280;">{{ s.label }}</span>
-          <CpButton v-bind="args" :size="s.value">
-            <template #leading-icon>
-              <CpIcon type="arrow-left" />
-            </template>
-            Button with Icon
-            <template #trailing-icon>
-              <CpIcon type="arrow-right" />
-            </template>
+      <div :style="docRowWrapStyle">
+        <div :style="docCellStyle">
+          <span :style="docLabelStyle">Leading</span>
+          <CpButton color="accent">
+            <template #leading-icon><CpIcon type="plus" /></template>
+            Button
+          </CpButton>
+        </div>
+        <div :style="docCellStyle">
+          <span :style="docLabelStyle">Trailing</span>
+          <CpButton color="accent">
+            Button
+            <template #trailing-icon><CpIcon type="arrow-right" /></template>
+          </CpButton>
+        </div>
+        <div :style="docCellStyle">
+          <span :style="docLabelStyle">Both</span>
+          <CpButton color="accent">
+            <template #leading-icon><CpIcon type="arrow-left" /></template>
+            Button
+            <template #trailing-icon><CpIcon type="arrow-right" /></template>
+          </CpButton>
+        </div>
+        <div :style="docCellStyle">
+          <span :style="docLabelStyle">Icon only</span>
+          <CpButton color="accent" :is-square="true">
+            <template #leading-icon><CpIcon type="plus" /></template>
           </CpButton>
         </div>
       </div>
@@ -379,150 +278,82 @@ export const WithIcons: Story = {
   }),
 }
 
-export const WithHaptics: Story = {
-  args: {
-    ...Default.args,
-    enableHaptics: true,
-    color: 'accent',
-  },
-  render: (args) => ({
+/* -------------------------------------------------------------------------- */
+/* Element & form integration                                                 */
+/* -------------------------------------------------------------------------- */
+
+/**
+ * Render the button as an `<a>` anchor while keeping the visual style.
+ * Useful for links that look like buttons.
+ */
+export const AsAnchor: Story = {
+  args: { ...Default.args, tag: 'a', color: 'accent' },
+  render: (args: Args) => ({
     components: { CpButton },
     setup() {
-      const onClick = () => {
-        console.log('Button clicked')
-      }
+      return { args }
+    },
+    template: `<CpButton v-bind="args" href="#">Anchor button</CpButton>`,
+  }),
+}
 
-      return { args, onClick }
+/**
+ * `type="submit"` submits the parent form. The button is wrapped in a minimal
+ * form to demonstrate the behaviour.
+ */
+export const SubmitType: Story = {
+  args: { ...Default.args, type: 'submit', color: 'accent' },
+  render: (args: Args) => ({
+    components: { CpButton },
+    setup() {
+      const handleSubmit = (event: Event) => {
+        event.preventDefault()
+        console.log('Form submitted')
+      }
+      return { args, handleSubmit }
     },
     template: `
-      <CpButton v-bind="args" @click="onClick">
-        Button with haptics
-      </CpButton>
+      <form @submit="handleSubmit" style="display: inline-flex;">
+        <CpButton v-bind="args">Submit form</CpButton>
+      </form>
     `,
   }),
 }
 
-export const Loading: Story = {
-  args: {
-    ...Default.args,
-    isLoading: true,
-    color: 'accent',
-  },
-  render: defaultRender,
-}
-
-const iconOnlySizes = [
-  { value: '2xs', label: '2xs' },
-  { value: 'xs', label: 'xs' },
-  { value: 'sm', label: 'sm' },
-  { value: 'md', label: 'md' },
-  { value: 'lg', label: 'lg' },
-] as const
-
-/** Icon-only appearances (inverse excluded for this story). */
-const iconOnlyAppearances = [
-  { value: 'primary', label: 'primary' },
-  { value: 'secondary', label: 'secondary' },
-  { value: 'tertiary', label: 'tertiary' },
-] as const
-
-export const IconOnly: Story = {
-  args: {
-    ...Default.args,
-    appearance: 'primary',
-    color: 'accent',
-    isSquare: true,
-  },
-  render: (args) => ({
-    components: { CpButton, CpIcon },
-    setup: () => ({
-      args,
-      iconOnlySizes,
-      iconOnlyAppearances,
-      semanticButtonColors,
-      docSectionStyle,
-      docTitleStyle,
-      docRowWrapStyle,
-      docCellStyle,
-      docLabelStyle,
-    }),
+/**
+ * `type="reset"` resets the parent form to its initial values.
+ */
+export const ResetType: Story = {
+  args: { ...Default.args, type: 'reset', appearance: 'secondary', color: 'neutral' },
+  render: (args: Args) => ({
+    components: { CpButton },
+    setup() {
+      return { args }
+    },
     template: `
-      <div style="${docPageStyle}">
-        <h1 style="margin: 0 0 32px 0; font-size: 28px; font-weight: 700; color: #111;">Icon Button</h1>
-
-        <section style="${docSectionStyle}">
-          <h2 style="${docTitleStyle}">Size</h2>
-          <div style="${docRowWrapStyle}">
-            <div
-              v-for="s in iconOnlySizes"
-              :key="s.value"
-              style="${docCellStyle}"
-            >
-              <span style="${docLabelStyle}">{{ s.label }}</span>
-              <CpButton v-bind="args" :size="s.value">
-                <template #leading-icon><CpIcon type="plus" /></template>
-              </CpButton>
-            </div>
-          </div>
-        </section>
-
-        <section style="${docSectionStyle}">
-          <h2 style="${docTitleStyle}">Color</h2>
-          <div style="${docRowWrapStyle}">
-            <div
-              v-for="c in semanticButtonColors"
-              :key="c.value"
-              style="${docCellStyle}"
-            >
-              <span style="${docLabelStyle}">{{ c.label }}</span>
-              <CpButton v-bind="args" :color="c.value">
-                <template #leading-icon><CpIcon type="plus" /></template>
-              </CpButton>
-            </div>
-          </div>
-        </section>
-
-        <section style="${docSectionStyle}">
-          <h2 style="${docTitleStyle}">Squared</h2>
-          <div style="${docRowWrapStyle}">
-            <div style="${docCellStyle}">
-              <span style="${docLabelStyle}">false</span>
-              <CpButton v-bind="args" :is-square="false">
-                <template #leading-icon><CpIcon type="plus" /></template>
-              </CpButton>
-            </div>
-            <div style="${docCellStyle}">
-              <span style="${docLabelStyle}">true</span>
-              <CpButton v-bind="args" :is-square="true">
-                <template #leading-icon><CpIcon type="plus" /></template>
-              </CpButton>
-            </div>
-          </div>
-        </section>
-
-        <section style="${docSectionStyle}">
-          <h2 style="${docTitleStyle}">Style</h2>
-          <div style="${docRowWrapStyle}">
-            <div
-              v-for="a in iconOnlyAppearances"
-              :key="a.value"
-              style="${docCellStyle}"
-            >
-              <span style="${docLabelStyle}">{{ a.label }}</span>
-              <CpButton v-bind="args" :appearance="a.value">
-                <template #leading-icon><CpIcon type="plus" /></template>
-              </CpButton>
-            </div>
-          </div>
-        </section>
-      </div>
+      <form style="display: inline-flex; gap: 8px;">
+        <input name="field" defaultValue="" placeholder="Type, then reset" style="padding: 8px; border: 1px solid #e5e7eb; border-radius: 6px;" />
+        <CpButton v-bind="args">Reset</CpButton>
+      </form>
     `,
   }),
-  parameters: {
-    docs: {
-      source: {
-        code: null,
-      },
+}
+
+/* -------------------------------------------------------------------------- */
+/* Interaction                                                                */
+/* -------------------------------------------------------------------------- */
+
+/**
+ * Triggers a haptic feedback on supported devices on click.
+ */
+export const WithHaptics: Story = {
+  args: { ...Default.args, enableHaptics: true, color: 'accent' },
+  render: (args: Args) => ({
+    components: { CpButton },
+    setup() {
+      const onClick = () => console.log('Button clicked')
+      return { args, onClick }
     },
-  },
+    template: `<CpButton v-bind="args" @click="onClick">Button with haptics</CpButton>`,
+  }),
 }