@nexxtmove/ui 2.5.0 → 2.7.0

package/src/components/molecules/ToggleGroup/ToggleGroup.stories.ts

@@ -0,0 +1,297 @@
+import { ref } from 'vue'
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import { expect, userEvent, waitFor, within } from 'storybook/test'
+import ToggleGroup from './ToggleGroup.vue'
+
+export default {
+  title: 'Components/Molecules/ToggleGroup',
+  component: ToggleGroup,
+  decorators: [
+    () => ({
+      template:
+        '<div style="padding: 32px; display: flex; align-items: center; justify-content: center; background-color: #ffffff;"><story /></div>',
+    }),
+  ],
+} satisfies Meta<typeof ToggleGroup>
+
+type Story = StoryObj<typeof ToggleGroup>
+
+const render = (args: Story['args']) => ({
+  components: { ToggleGroup },
+  setup() {
+    const selected = ref(args?.options?.[0]?.value ?? '')
+    return { args, selected }
+  },
+  template: `<ToggleGroup v-bind="args" v-model="selected" />`,
+})
+
+export const Default: Story = {
+  render,
+  args: {
+    options: [
+      { value: 'week', label: 'Week' },
+      { value: 'month', label: 'Month' },
+      { value: 'year', label: 'Year' },
+    ],
+  },
+}
+
+export const WithLabel: Story = {
+  render,
+  args: {
+    label: 'Period',
+    options: [
+      { value: 'week', label: 'Week' },
+      { value: 'month', label: 'Month' },
+      { value: 'year', label: 'Year' },
+    ],
+  },
+}
+
+export const WithIcons: Story = {
+  render,
+  args: {
+    options: [
+      { value: 'list', icon: 'list', ariaLabel: 'List view' },
+      { value: 'grid', icon: 'grid-2', ariaLabel: 'Grid view' },
+    ],
+  },
+}
+
+export const WithIconsAndTooltips: Story = {
+  render,
+  args: {
+    options: [
+      { value: 'list', icon: 'list', tooltip: 'List view' },
+      { value: 'grid', icon: 'grid-2', tooltip: 'Grid view' },
+    ],
+  },
+}
+
+export const WithMixedTooltips: Story = {
+  render,
+  args: {
+    label: 'View',
+    options: [
+      { value: 'list', icon: 'list', tooltip: 'List view' },
+      { value: 'grid', icon: 'grid-2', ariaLabel: 'Grid view' },
+    ],
+  },
+}
+
+export const WithIconsAndLabel: Story = {
+  render,
+  args: {
+    label: 'View',
+    options: [
+      { value: 'list', icon: 'list', ariaLabel: 'List view' },
+      { value: 'grid', icon: 'grid-2', ariaLabel: 'Grid view' },
+    ],
+  },
+}
+
+export const WithIconAndTextCombined: Story = {
+  render,
+  args: {
+    options: [
+      { value: 'list', icon: 'list', label: 'List' },
+      { value: 'grid', icon: 'grid-2', label: 'Grid' },
+    ],
+  },
+}
+
+export const TwoOptions: Story = {
+  render,
+  args: {
+    label: 'Mode',
+    options: [
+      { value: 'buy', label: 'Buy' },
+      { value: 'rent', label: 'Rent' },
+    ],
+  },
+}
+
+export const FullWidth: Story = {
+  render: (args) => ({
+    components: { ToggleGroup },
+    setup() {
+      const selected = ref(args?.options?.[0]?.value ?? '')
+      return { args, selected }
+    },
+    template: `<div style="width: 500px;"><ToggleGroup v-bind="args" v-model="selected" /></div>`,
+  }),
+  args: {
+    label: 'Period',
+    options: [
+      { value: 'week', label: 'Week' },
+      { value: 'month', label: 'Month' },
+      { value: 'year', label: 'Year' },
+    ],
+  },
+}
+
+export const VariableWidth: Story = {
+  render,
+  args: {
+    label: 'Period',
+    equalWidth: false,
+    options: [
+      { value: 'week', label: 'This week' },
+      { value: 'month', label: 'month' },
+      { value: 'quarter', label: 'quarter' },
+      { value: 'year', label: 'year' },
+      { value: 'grid', icon: 'grid-2', ariaLabel: 'Grid view' },
+    ],
+  },
+}
+
+export const CustomActiveColor: Story = {
+  render,
+  args: {
+    label: 'Status',
+    options: [
+      { value: 'buy', label: 'Buy', activeClass: 'text-green-600' },
+      { value: 'rent', label: 'Rent', activeClass: 'text-orange-500' },
+      { value: 'sold', label: 'Sold', activeClass: 'text-red-500' },
+    ],
+  },
+}
+
+/**
+ * The `#option` slot replaces the icon and label with any drawing. It renders
+ * on the button and again in the active-colour overlay, so it draws in
+ * `currentColor`; the pill, focus ring and keyboard behaviour stay ToggleGroup's.
+ * Content without text still needs an `ariaLabel` per option.
+ */
+export const CustomOptionContent: Story = {
+  render: (args) => ({
+    components: { ToggleGroup },
+    setup() {
+      const selected = ref('solid')
+      return { args, selected }
+    },
+    template: `
+      <div class="w-80">
+        <ToggleGroup v-bind="args" v-model="selected">
+          <template #option="{ option }">
+            <span
+              aria-hidden="true"
+              class="block h-0 w-6 border-t-2 border-current"
+              :class="option.value === 'solid' ? 'border-solid' : 'border-dashed'"
+            />
+          </template>
+        </ToggleGroup>
+      </div>
+    `,
+  }),
+  args: {
+    options: [
+      { value: 'solid', ariaLabel: 'Solid', tooltip: 'Solid' },
+      { value: 'dashed', ariaLabel: 'Dashed', tooltip: 'Dashed' },
+    ],
+  },
+}
+
+/**
+ * Unselected options read as choosable, not disabled: gray-700 on the gray-100
+ * track (about 4.6:1), gray-900 on hover. The selected one is told apart by the
+ * white pill and the active colour, not by a lighter grey on the others.
+ */
+export const UnselectedContrast: Story = {
+  render: (args) => ({
+    components: { ToggleGroup },
+    setup() {
+      const selected = ref('week')
+      return { args, selected }
+    },
+    template: `
+      <div>
+        <ToggleGroup v-bind="args" v-model="selected" />
+        <span data-testid="reference" class="text-gray-700">ref</span>
+      </div>
+    `,
+  }),
+  args: {
+    options: [
+      { value: 'week', label: 'Week' },
+      { value: 'month', label: 'Month' },
+      { value: 'list', icon: 'list', ariaLabel: 'List' },
+    ],
+  },
+  play: ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    const reference = getComputedStyle(canvas.getByTestId('reference')).color
+
+    expect(getComputedStyle(canvas.getByRole('button', { name: 'Month' })).color).toBe(reference)
+    expect(getComputedStyle(canvas.getByRole('button', { name: 'List' })).color).toBe(reference)
+  },
+}
+
+/**
+ * Keyboard: one tab stop per group (the selected option), arrows move focus
+ * with wrap, Home/End jump to the ends, and only Enter or Space selects. Tab
+ * leaves the group; Shift+Tab comes back to the selected option.
+ */
+export const KeyboardNavigation: Story = {
+  render: (args) => ({
+    components: { ToggleGroup },
+    setup() {
+      const selected = ref('month')
+      return { args, selected }
+    },
+    template: `
+      <div class="flex flex-col items-start gap-3">
+        <button type="button" class="small-normal">Voor</button>
+        <ToggleGroup v-bind="args" v-model="selected" />
+        <button type="button" class="small-normal">Na</button>
+        <p data-testid="selected" class="small-normal text-gray-700">{{ selected }}</p>
+      </div>
+    `,
+  }),
+  args: {
+    options: [
+      { value: 'week', label: 'Week' },
+      { value: 'month', label: 'Month' },
+      { value: 'year', label: 'Year' },
+    ],
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    const button = (name: string) => canvas.getByRole('button', { name })
+    const selected = () => canvas.getByTestId('selected').textContent
+
+    button('Voor').focus()
+    await userEvent.tab()
+    expect(button('Month')).toHaveFocus()
+
+    await userEvent.keyboard('{ArrowRight}')
+    expect(button('Year')).toHaveFocus()
+    await userEvent.keyboard('{ArrowRight}')
+    expect(button('Week')).toHaveFocus()
+    await userEvent.keyboard('{End}')
+    expect(button('Year')).toHaveFocus()
+    await userEvent.keyboard('{Home}')
+    expect(button('Week')).toHaveFocus()
+    expect(selected()).toBe('month')
+
+    // Moving focus pressed nothing: Month is still the pressed one.
+    expect(button('Month')).toHaveAttribute('aria-pressed', 'true')
+    expect(button('Week')).toHaveAttribute('aria-pressed', 'false')
+
+    await userEvent.keyboard('{Enter}')
+    await waitFor(() => expect(selected()).toBe('week'))
+    expect(button('Week')).toHaveAttribute('aria-pressed', 'true')
+    expect(button('Month')).toHaveAttribute('aria-pressed', 'false')
+
+    await userEvent.keyboard('{ArrowRight}')
+    await userEvent.keyboard(' ')
+    await waitFor(() => expect(selected()).toBe('month'))
+    expect(button('Month')).toHaveAttribute('aria-pressed', 'true')
+    expect(button('Week')).toHaveAttribute('aria-pressed', 'false')
+
+    await userEvent.tab()
+    expect(button('Na')).toHaveFocus()
+    await userEvent.tab({ shift: true })
+    expect(button('Month')).toHaveFocus()
+  },
+}