@nexxtmove/ui 2.6.0 → 2.7.0

package/src/components/editor/atoms/EditorSettingsGroup/EditorSettingsGroup.stories.ts

@@ -0,0 +1,365 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import { ref } from 'vue'
+import { expect, userEvent, waitFor, within } from 'storybook/test'
+import EditorSettingsGroup from './EditorSettingsGroup.vue'
+import EditorSettingsBlock from '../EditorSettingsBlock/EditorSettingsBlock.vue'
+import EditorPadding from '../../molecules/EditorPadding/EditorPadding.vue'
+import EditorLineStyle from '../../molecules/EditorLineStyle/EditorLineStyle.vue'
+import EditorJustifyContent from '../../molecules/EditorJustifyContent/EditorJustifyContent.vue'
+import type { EditorLineStyleValue } from '../../molecules/EditorLineStyle/EditorLineStyle.vue'
+import type { EditorJustifyContentValue } from '../../molecules/EditorJustifyContent/EditorJustifyContent.vue'
+
+export default {
+  title: 'Components/Editor Components/Atoms/Editor Settings Group',
+  component: EditorSettingsGroup,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'A section of an editor settings panel: the settings about the same thing. Draws the divider above itself and owns the vertical space. Without a label, the label of the one setting inside is promoted to group weight.',
+      },
+    },
+  },
+  // The settings panel's content width: `w-92` with `p-7` leaves 312px.
+  decorators: [() => ({ template: '<div class="mx-auto w-78"><story /></div>' })],
+  argTypes: {
+    label: { control: 'text' },
+    headingLevel: { control: 'select', options: [2, 3, 4, 5, 6] },
+  },
+} satisfies Meta<typeof EditorSettingsGroup>
+
+type Story = StoryObj<typeof EditorSettingsGroup>
+
+/** A labelled group: the heading names the group for assistive technology too. */
+export const Labelled: Story = {
+  args: { label: 'Achtergrond' },
+  render: (args) => ({
+    components: { EditorSettingsGroup, EditorSettingsBlock },
+    setup: () => ({ args }),
+    template: `
+      <EditorSettingsGroup v-bind="args">
+        <EditorSettingsBlock label="Kleur">
+          <p class="small-normal text-gray-700">Kleurkiezer</p>
+        </EditorSettingsBlock>
+        <EditorSettingsBlock label="Afbeelding">
+          <p class="small-normal text-gray-700">Afbeeldingkiezer</p>
+        </EditorSettingsBlock>
+      </EditorSettingsGroup>
+    `,
+  }),
+  play: ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+
+    expect(canvas.getByRole('group', { name: 'Achtergrond' })).toBeInTheDocument()
+    expect(canvas.getByRole('heading', { level: 3, name: 'Achtergrond' })).toBeInTheDocument()
+  },
+}
+
+/** No label: the one setting inside carries the group's weight, as a heading. */
+export const Unlabelled: Story = {
+  render: (args) => ({
+    components: { EditorSettingsGroup, EditorPadding },
+    setup() {
+      const padding = ref('py-6')
+      return { args, padding }
+    },
+    template: `
+      <EditorSettingsGroup v-bind="args">
+        <EditorPadding v-model="padding" sides="vertical" label="Witruimte" />
+      </EditorSettingsGroup>
+    `,
+  }),
+  play: ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+
+    expect(canvas.queryByRole('group')).toBeNull()
+    expect(canvas.getByRole('heading', { level: 3, name: 'Witruimte' })).toBeInTheDocument()
+  },
+}
+
+/**
+ * The divider panel from the pattern spec: a promoted Witruimte and the group
+ * Lijn. Measured: 24px from a line to the heading under it in both groups and
+ * from the last visible control to the next line or the group's end, 16px from
+ * the group heading to the first setting and between two settings.
+ */
+export const DividerPanel: Story = {
+  render: () => ({
+    components: { EditorSettingsGroup, EditorPadding, EditorLineStyle, EditorJustifyContent },
+    setup() {
+      const padding = ref('py-6')
+      const lineStyle = ref<EditorLineStyleValue>('solid')
+      const thickness = ref<1 | 2 | 3 | 4 | 6 | 8>(2)
+      const align = ref<EditorJustifyContentValue>('justify-center')
+      return { padding, lineStyle, thickness, align }
+    },
+    template: `
+      <div class="flex flex-col">
+        <EditorSettingsGroup>
+          <EditorPadding v-model="padding" sides="vertical" label="Witruimte" />
+        </EditorSettingsGroup>
+        <EditorSettingsGroup label="Lijn">
+          <EditorLineStyle v-model="lineStyle" v-model:thickness="thickness" label="Stijl" />
+          <EditorJustifyContent
+            v-model="align"
+            :options="['justify-start', 'justify-center', 'justify-end']"
+            :messages="{ start: 'Links', center: 'Midden', end: 'Rechts' }"
+          />
+        </EditorSettingsGroup>
+      </div>
+    `,
+  }),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    await document.fonts.ready
+
+    const [first, second] = canvasElement.querySelectorAll<HTMLElement>('.border-t')
+    const witruimte = canvas.getByRole('heading', { name: 'Witruimte' })
+    const lijn = canvas.getByRole('heading', { name: 'Lijn' })
+    const stijl = canvas.getByText('Stijl')
+    const uitlijning = canvas.getByText('Uitlijning')
+
+    // Both headings sit 24px under their own line, promoted or not.
+    const gapUnderLine = (group: HTMLElement, heading: HTMLElement) =>
+      heading.getBoundingClientRect().top - group.getBoundingClientRect().top - 1
+    expect(gapUnderLine(first, witruimte)).toBe(24)
+    expect(gapUnderLine(second, lijn)).toBe(24)
+
+    // Last visible control to the next group's line: 24px, the same as line
+    // to heading. Here the control is the padding field.
+    const lastControl = first.querySelector('input')!.parentElement!
+    expect(second.getBoundingClientRect().top - lastControl.getBoundingClientRect().bottom).toBe(24)
+
+    // The last setting of the second group (Uitlijning, stacked) ends 24px
+    // above the group's bottom too.
+    const alignOptions = canvas.getByRole('button', { name: 'Links' }).parentElement!
+    expect(
+      second.getBoundingClientRect().bottom - alignOptions.getBoundingClientRect().bottom,
+    ).toBe(24)
+
+    // Group heading to the first setting: 16px.
+    expect(stijl.getBoundingClientRect().top - lijn.getBoundingClientRect().bottom).toBe(16)
+
+    // Setting to setting: 16px between the blocks (Stijl to Uitlijning).
+    const stijlBlock = stijl.parentElement!.parentElement!
+    expect(uitlijning.getBoundingClientRect().top - stijlBlock.getBoundingClientRect().bottom).toBe(
+      16,
+    )
+
+    // The two promoted and labelled headings weigh the same.
+    expect(getComputedStyle(witruimte).fontWeight).toBe(getComputedStyle(lijn).fontWeight)
+    expect(getComputedStyle(stijl).fontWeight).not.toBe(getComputedStyle(lijn).fontWeight)
+  },
+}
+
+/**
+ * The divider panel with "Lijn" collapsible, the open state shown under it.
+ * `lastFocusable` adds a mobile marker with a link as the last item of the
+ * group, to check that the clip box does not cut off its focus ring.
+ */
+const collapsiblePanel =
+  (initiallyOpen: boolean, lastFocusable = false) =>
+  () => ({
+    components: { EditorSettingsGroup, EditorPadding, EditorLineStyle, EditorJustifyContent },
+    setup() {
+      const padding = ref('py-6')
+      const lineStyle = ref<EditorLineStyleValue>('solid')
+      const thickness = ref<1 | 2 | 3 | 4 | 6 | 8>(2)
+      const align = ref<EditorJustifyContentValue>('justify-center')
+      const open = ref(initiallyOpen)
+      return { padding, lineStyle, thickness, align, open, lastFocusable }
+    },
+    template: `
+    <div class="flex flex-col">
+      <EditorSettingsGroup>
+        <EditorPadding v-model="padding" sides="vertical" label="Witruimte" />
+      </EditorSettingsGroup>
+      <EditorSettingsGroup v-model:open="open" label="Lijn" collapsible>
+        <EditorLineStyle v-model="lineStyle" v-model:thickness="thickness" label="Stijl" />
+        <EditorJustifyContent
+          v-model="align"
+          :options="['justify-start', 'justify-center', 'justify-end']"
+          :messages="{ start: 'Links', center: 'Midden', end: 'Rechts' }"
+        />
+        <div v-if="lastFocusable" class="flex items-center justify-between pt-2">
+          <span class="small-normal text-gray-700">Aangepast voor mobiel</span>
+          <a
+            href="#"
+            data-testid="marker-link"
+            class="small-normal text-gray-900 underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-cornflower-blue-600"
+            @click.prevent
+          >Terug naar desktop</a>
+        </div>
+      </EditorSettingsGroup>
+      <p data-testid="open-state" class="pt-4 small-normal text-gray-700">open: {{ open }}</p>
+    </div>
+  `,
+  })
+
+const lijnGroup = (canvasElement: HTMLElement) =>
+  canvasElement.querySelectorAll<HTMLElement>('.border-t')[1]
+
+const groupContent = (canvasElement: HTMLElement) =>
+  canvasElement.querySelector<HTMLElement>('[data-testid="editor-settings-group-content"]')!
+
+/**
+ * Open, pixel-equal to DividerPanel: the same 24px under the line, 16px to the
+ * first setting, and a 20px title row. Click closes it (content inert, the
+ * group folds to line + 24 + title + 24); Space opens it again with focus
+ * staying on the button.
+ */
+export const Collapsible: Story = {
+  render: collapsiblePanel(true),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    await document.fonts.ready
+
+    const group = lijnGroup(canvasElement)
+    const heading = canvas.getByRole('heading', { name: 'Lijn' })
+    const button = canvas.getByRole('button', { name: 'Lijn' })
+    const content = groupContent(canvasElement)
+
+    // Parity with a group that does not collapse.
+    expect(heading.getBoundingClientRect().top - group.getBoundingClientRect().top - 1).toBe(24)
+    expect(heading.getBoundingClientRect().height).toBe(20)
+    expect(
+      canvas.getByText('Stijl').getBoundingClientRect().top -
+        heading.getBoundingClientRect().bottom,
+    ).toBe(16)
+
+    // The whole row is the hit area, at least 24px tall.
+    expect(button.getBoundingClientRect().height).toBeGreaterThanOrEqual(24)
+    expect(button.getBoundingClientRect().width).toBeGreaterThanOrEqual(
+      heading.getBoundingClientRect().width,
+    )
+    expect(button).toHaveAttribute('aria-controls', content.id)
+
+    await userEvent.click(button)
+    await waitFor(() => expect(button).toHaveAttribute('aria-expanded', 'false'))
+    expect(content).toHaveAttribute('inert')
+    expect(canvas.getByTestId('open-state')).toHaveTextContent('open: false')
+
+    // Closed, the chevron points up: a half turn from pointing down.
+    const chevron = button.querySelector<HTMLElement>('span[aria-hidden="true"]')!
+    await waitFor(() => expect(getComputedStyle(chevron).rotate).toBe('180deg'))
+
+    // Closed: line + 24 + title + 24, nothing left of the first block.
+    await waitFor(() => expect(group.getBoundingClientRect().height).toBe(1 + 24 + 20 + 24))
+    expect(group.getBoundingClientRect().bottom - heading.getBoundingClientRect().bottom).toBe(24)
+
+    button.focus()
+    await userEvent.keyboard(' ')
+    await waitFor(() => expect(button).toHaveAttribute('aria-expanded', 'true'))
+    expect(content).not.toHaveAttribute('inert')
+    expect(document.activeElement).toBe(button)
+    await waitFor(() => expect(['0deg', 'none']).toContain(getComputedStyle(chevron).rotate))
+
+    // Open again: 24px from the last visible control to the group's bottom.
+    const alignOptions = canvas.getByRole('button', { name: 'Links' }).parentElement!
+    await waitFor(() =>
+      expect(
+        group.getBoundingClientRect().bottom - alignOptions.getBoundingClientRect().bottom,
+      ).toBe(24),
+    )
+  },
+}
+
+/** Starts closed: no animation on the first render, Tab skips the content. */
+export const CollapsibleStartsClosed: Story = {
+  render: collapsiblePanel(false),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    const button = canvas.getByRole('button', { name: 'Lijn' })
+
+    expect(button).toHaveAttribute('aria-expanded', 'false')
+    expect(groupContent(canvasElement)).toHaveAttribute('inert')
+
+    // Keyboard focus shows a real ring: a stray `focus:outline-none` would set
+    // the outline style to none under `focus-visible:outline-2` and hide it.
+    button.focus()
+    expect(button.matches(':focus-visible')).toBe(true)
+    expect(getComputedStyle(button).outlineStyle).not.toBe('none')
+    expect(getComputedStyle(button).outlineWidth).toBe('2px')
+
+    await userEvent.keyboard('{Enter}')
+    await waitFor(() => expect(button).toHaveAttribute('aria-expanded', 'true'))
+    expect(document.activeElement).toBe(button)
+  },
+}
+
+/**
+ * A focusable mobile marker as the last item: its focus ring (2px outline,
+ * 2px offset) must fit inside the clip box on every side, the bottom too.
+ */
+export const CollapsibleLastFocusable: Story = {
+  render: collapsiblePanel(true, true),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    await document.fonts.ready
+
+    const link = canvas.getByTestId('marker-link')
+    const clip = groupContent(canvasElement).firstElementChild!.getBoundingClientRect()
+    const ring = link.getBoundingClientRect()
+
+    expect(clip.bottom).toBeGreaterThanOrEqual(ring.bottom + 4)
+    expect(clip.right).toBeGreaterThanOrEqual(ring.right + 4)
+    expect(clip.left).toBeLessThanOrEqual(ring.left - 4)
+
+    // And it is reachable by keyboard while open.
+    link.focus()
+    expect(document.activeElement).toBe(link)
+  },
+}
+
+/**
+ * A tall group (~330px of settings), where the closing curve shows most. Closing
+ * on ease-in-out-strong starts gently: about 40ms in, well over half the height
+ * is still there (a strong ease-out would already have taken most of it). Fully
+ * closed, the content wrapper is exactly 0px and the group is line + 24 + title
+ * + 24.
+ */
+export const CollapsibleTall: Story = {
+  render: () => ({
+    components: { EditorSettingsGroup, EditorSettingsBlock },
+    setup() {
+      const open = ref(true)
+      return { open }
+    },
+    template: `
+      <EditorSettingsGroup v-model:open="open" label="Achtergrond" collapsible>
+        <EditorSettingsBlock v-for="name in ['Kleur', 'Afbeelding', 'Vulling']" :key="name" :label="name">
+          <div class="h-16 rounded-lg bg-gray-100" />
+        </EditorSettingsBlock>
+      </EditorSettingsGroup>
+    `,
+  }),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    const group = canvasElement.querySelector<HTMLElement>('.border-t')!
+    const button = canvas.getByRole('button', { name: 'Achtergrond' })
+    const content = groupContent(canvasElement)
+
+    const openHeight = content.getBoundingClientRect().height
+    expect(openHeight).toBeGreaterThan(300)
+
+    // Sample frame by frame from the click until 40ms have passed.
+    const start = performance.now()
+    button.click()
+    const sample = await new Promise<{ height: number; elapsed: number }>((resolve) => {
+      const tick = () => {
+        const elapsed = performance.now() - start
+        if (elapsed >= 40) resolve({ height: content.getBoundingClientRect().height, elapsed })
+        else requestAnimationFrame(tick)
+      }
+      requestAnimationFrame(tick)
+    })
+    expect(sample.elapsed).toBeLessThan(80)
+    expect(sample.height).toBeGreaterThan(openHeight / 2)
+
+    // Fully closed: no height left behind by the content or the clip box.
+    await waitFor(() => expect(content.getBoundingClientRect().height).toBe(0))
+    await waitFor(() => expect(group.getBoundingClientRect().height).toBe(1 + 24 + 20 + 24))
+    const heading = canvas.getByRole('heading', { name: 'Achtergrond' })
+    expect(group.getBoundingClientRect().bottom - heading.getBoundingClientRect().bottom).toBe(24)
+  },
+}