@nexxtmove/ui 2.5.0 → 2.7.0

package/src/components/editor/molecules/EditorGap/EditorGap.stories.ts

@@ -0,0 +1,129 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import { expect, userEvent, within } from 'storybook/test'
+import { ref } from 'vue'
+import EditorGap from './EditorGap.vue'
+import type { EditorGapValue } from './EditorGap.vue'
+
+export default {
+  title: 'Components/Editor Components/Molecules/Editor Gap',
+  component: EditorGap,
+  decorators: [() => ({ template: '<div class="w-100 mx-auto"><story /></div>' })],
+  argTypes: {
+    label: { control: 'text' },
+  },
+} satisfies Meta<typeof EditorGap>
+
+type Story = StoryObj<typeof EditorGap>
+
+export const Default: Story = {
+  render: (args) => ({
+    components: { EditorGap },
+    setup() {
+      const gap = ref<EditorGapValue>('gap-4')
+      return { args, gap }
+    },
+    // The value is shown as-is: it is the Tailwind class the editor applies.
+    template: `
+      <div>
+        <EditorGap v-bind="args" v-model="gap" />
+        <p class="small-normal text-gray-700">{{ gap }}</p>
+      </div>
+    `,
+  }),
+}
+
+export const CustomMessages: Story = {
+  args: {
+    label: 'Gap',
+    messages: { unit: 'px' },
+  },
+  render: (args) => ({
+    components: { EditorGap },
+    setup() {
+      const gap = ref<EditorGapValue>('gap-4')
+      return { args, gap }
+    },
+    template: `<EditorGap v-bind="args" v-model="gap" />`,
+  }),
+}
+
+/**
+ * axe in error mode on the Auto stories. The toolbar is NexxtToggleGroup, whose
+ * chosen label fails color-contrast on its own (cornflower-600 text, 4.31:1 on
+ * white); that is ToggleGroup's, not this block's, so it is left out here.
+ */
+const AUTO_A11Y = { a11y: { test: 'error', context: { exclude: ['[role="toolbar"]'] } } }
+
+/** The slider and the readout of one EditorGap, by the readout's text. */
+const sliderRow = (block: HTMLElement) => {
+  const readout = within(block).getByText(/\d+ px/)
+  const slider = readout.parentElement!.firstElementChild!
+  const box = (el: Element) => {
+    const { left, width } = el.getBoundingClientRect()
+    return { left, width }
+  }
+  return { slider: box(slider), readout: box(readout) }
+}
+
+/**
+ * With the auto model bound: Vast | Auto above the slider, on Vast. Below it,
+ * for comparison, the same block without the model: the slider and the readout
+ * keep their width and place in all three.
+ */
+export const WithAuto: Story = {
+  parameters: AUTO_A11Y,
+  render: (args) => ({
+    components: { EditorGap },
+    setup() {
+      const gap = ref<EditorGapValue>('gap-4')
+      const auto = ref(false)
+      return { args, gap, auto }
+    },
+    template: `
+      <div>
+        <EditorGap v-bind="args" v-model="gap" v-model:auto="auto" data-variant="auto" />
+        <EditorGap v-bind="args" v-model="gap" data-variant="plain" />
+        <p class="small-normal text-gray-700">{{ gap }}, auto: {{ auto }}</p>
+      </div>
+    `,
+  }),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    const block = (variant: string) =>
+      canvasElement.querySelector(`[data-variant="${variant}"]`) as HTMLElement
+    const settle = () =>
+      new Promise((resolve) => requestAnimationFrame(() => requestAnimationFrame(resolve)))
+
+    await document.fonts.ready
+    await settle()
+    const plain = sliderRow(block('plain'))
+    const vast = sliderRow(block('auto'))
+    await expect(vast).toEqual(plain)
+    await expect(
+      within(block('auto')).getByRole('slider', { name: 'Tussenruimte' }),
+    ).toBeInTheDocument()
+
+    await userEvent.click(canvas.getByRole('button', { name: 'Auto' }))
+    await settle()
+
+    await expect(sliderRow(block('auto'))).toEqual(plain)
+    await expect(
+      within(block('auto')).getByRole('slider', { name: 'Tussenruimte, minimaal' }),
+    ).toBeInTheDocument()
+    await expect(canvas.getByText('gap-4, auto: true')).toBeInTheDocument()
+  },
+}
+
+/** Auto on: the slider sets the minimum gap. */
+export const AutoOn: Story = {
+  parameters: AUTO_A11Y,
+  render: (args) => ({
+    components: { EditorGap },
+    setup() {
+      const gap = ref<EditorGapValue>('gap-6')
+      const auto = ref(true)
+      return { args, gap, auto }
+    },
+    template: `<EditorGap v-bind="args" v-model="gap" v-model:auto="auto" />`,
+  }),
+}

package/src/components/editor/molecules/EditorGap/EditorGap.test.ts

@@ -0,0 +1,253 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { mount } from '@vue/test-utils'
+import EditorGap, { EDITOR_GAP_STEPS } from './EditorGap.vue'
+import type { EditorGapValue } from './EditorGap.vue'
+import Slider from '../../../atoms/Slider/Slider.vue'
+
+// jsdom ships no ResizeObserver, and reka-ui's slider observes its track to place the thumbs
+vi.stubGlobal(
+  'ResizeObserver',
+  class {
+    observe() {}
+    unobserve() {}
+    disconnect() {}
+  },
+)
+
+// jsdom implements no pointer capture either, and reka-ui captures the pointer on thumb pointerdown
+Element.prototype.setPointerCapture ??= () => {}
+Element.prototype.releasePointerCapture ??= () => {}
+Element.prototype.hasPointerCapture ??= () => false
+
+/** The index the slider sits on, read from the model handed to the slider. */
+const sliderIndex = (wrapper: ReturnType<typeof mount>) =>
+  wrapper.findComponent(Slider).props('modelValue')
+
+describe('EditorGap', () => {
+  // No assertions on typography utilities: the label and the value are found by
+  // text or by structure, so restyling the block or the slider cannot turn
+  // these red.
+  it('renders the Dutch default label', () => {
+    const wrapper = mount(EditorGap, { props: { modelValue: 'gap-4' } })
+
+    expect(wrapper.find('p').text()).toBe('Tussenruimte')
+  })
+
+  it('renders the gap in pixels with the default unit', () => {
+    const wrapper = mount(EditorGap, { props: { modelValue: 'gap-4' } })
+
+    expect(wrapper.text()).toContain('16 px')
+  })
+
+  it('renders a custom label', () => {
+    const wrapper = mount(EditorGap, { props: { modelValue: 'gap-4', label: 'Gap' } })
+
+    expect(wrapper.find('p').text()).toBe('Gap')
+  })
+
+  it('renders a custom unit', () => {
+    const wrapper = mount(EditorGap, {
+      props: { modelValue: 'gap-4', messages: { unit: 'pixels' } },
+    })
+
+    expect(wrapper.text()).toContain('16 pixels')
+  })
+
+  // The scale skips 13 and 15, so the slider steps over the list rather than
+  // over the px value: gap-14 is the fourteenth step, not the fifteenth.
+  it('puts the slider on the index of the value, not on its number', () => {
+    const wrapper = mount(EditorGap, { props: { modelValue: 'gap-14' } })
+
+    expect(sliderIndex(wrapper)).toEqual([13])
+    expect(wrapper.text()).toContain('56 px')
+  })
+
+  it('spans the whole step list', () => {
+    const wrapper = mount(EditorGap, { props: { modelValue: 'gap-0' } })
+    const slider = wrapper.findComponent(Slider)
+
+    expect(slider.props('min')).toBe(0)
+    expect(slider.props('max')).toBe(14)
+    expect(slider.props('step')).toBe(1)
+  })
+
+  it('emits update:modelValue with the Tailwind class of the new step', async () => {
+    const wrapper = mount(EditorGap, { props: { modelValue: 'gap-12' } })
+
+    // One step up from index 12 (gap-12) is index 13, which is gap-14.
+    wrapper.findComponent(Slider).vm.$emit('update:modelValue', [13])
+    await wrapper.vm.$nextTick()
+
+    expect(wrapper.emitted('update:modelValue')).toEqual([['gap-14']])
+  })
+
+  it('falls back to the first step for a value outside the scale', () => {
+    // `gap-13` has no spacing token, so there is no step for it to sit on. The
+    // type rules it out, which is exactly why the runtime fallback is worth a
+    // test: a consumer restoring an old stored value gets past the types.
+    const outOfScale = 'gap-13' as unknown as EditorGapValue
+    const wrapper = mount(EditorGap, { props: { modelValue: outOfScale } })
+
+    expect(sliderIndex(wrapper)).toEqual([0])
+    expect(wrapper.text()).toContain('0 px')
+  })
+
+  // aria-valuenow is the step index, which is meaningless read aloud; the text
+  // the readout shows is what the thumb announces instead.
+  it('announces the gap in pixels on the thumb', () => {
+    const wrapper = mount(EditorGap, { props: { modelValue: 'gap-4' } })
+    const thumb = wrapper.find('[role="slider"]')
+
+    expect(thumb.attributes('aria-valuetext')).toBe('16 px')
+    expect(thumb.attributes('aria-label')).toBe('Tussenruimte')
+  })
+
+  it('is always visible, so it renders no switch', () => {
+    const wrapper = mount(EditorGap, { props: { modelValue: 'gap-4' } })
+
+    expect(wrapper.find('input[type="checkbox"]').exists()).toBe(false)
+  })
+})
+
+// The consumer derives its class matchers from this list, so the list is a
+// contract: any change here changes what the app recognises.
+describe('EDITOR_GAP_STEPS', () => {
+  it('offers exactly the agreed steps', () => {
+    expect(EDITOR_GAP_STEPS).toEqual([
+      { token: 0, px: 0 },
+      { token: 1, px: 4 },
+      { token: 2, px: 8 },
+      { token: 3, px: 12 },
+      { token: 4, px: 16 },
+      { token: 5, px: 20 },
+      { token: 6, px: 24 },
+      { token: 7, px: 28 },
+      { token: 8, px: 32 },
+      { token: 9, px: 36 },
+      { token: 10, px: 40 },
+      { token: 11, px: 44 },
+      { token: 12, px: 48 },
+      { token: 14, px: 56 },
+      { token: 16, px: 64 },
+    ])
+  })
+})
+
+describe('EditorGap with auto', () => {
+  // ToggleGroup awaits document.fonts.ready on mount, which jsdom does not ship.
+  beforeEach(() => {
+    Object.defineProperty(document, 'fonts', {
+      value: { ready: Promise.resolve() },
+      configurable: true,
+    })
+  })
+
+  const mountAuto = (auto: boolean, props: Record<string, unknown> = {}) =>
+    mount(EditorGap, { props: { modelValue: 'gap-4', auto, ...props } })
+
+  const toolbar = (wrapper: ReturnType<typeof mount>) => wrapper.find('[role="toolbar"]')
+
+  const pressed = (wrapper: ReturnType<typeof mount>) =>
+    toolbar(wrapper)
+      .findAll('button[aria-pressed="true"]')
+      .map((button) => button.text())
+
+  it('offers no choice without the auto model', () => {
+    const wrapper = mount(EditorGap, { props: { modelValue: 'gap-4' } })
+
+    expect(toolbar(wrapper).exists()).toBe(false)
+  })
+
+  // Named apart from the slider, which carries the block label on Vast.
+  it('offers Vast and Auto in the block, under a name of their own', () => {
+    const wrapper = mountAuto(false)
+
+    expect(toolbar(wrapper).attributes('aria-label')).toBe('Soort tussenruimte')
+    expect(pressed(wrapper)).toEqual(['Vast'])
+    expect(wrapper.findAll('p').map((p) => p.text())).toEqual(['Tussenruimte'])
+  })
+
+  it('keeps the slider named by the block label on Vast', () => {
+    const wrapper = mountAuto(false)
+
+    expect(wrapper.get('[role="slider"]').attributes('aria-label')).toBe('Tussenruimte')
+  })
+
+  it('names the slider as the minimum on Auto, without a visible field label', () => {
+    const wrapper = mountAuto(true)
+
+    expect(pressed(wrapper)).toEqual(['Auto'])
+    expect(wrapper.get('[role="slider"]').attributes('aria-label')).toBe('Tussenruimte, minimaal')
+    expect(wrapper.text()).not.toContain('inimaal')
+  })
+
+  // The slider row has the same structure and classes as without the model, so
+  // it cannot change width or place between the three variants. Compared by
+  // structure: reka-ui positions its thumb a tick after mount.
+  it('renders the slider row as without the model, on Vast and on Auto', async () => {
+    const shape = (wrapper: ReturnType<typeof mount>) => {
+      const row = wrapper.findAll('span').find((span) => span.text() === '16 px')!.element
+        .parentElement!
+      return [row.className, ...[...row.children].map((child) => child.className)]
+    }
+    const plain = shape(mount(EditorGap, { props: { modelValue: 'gap-4' } }))
+    const withAuto = mountAuto(false)
+
+    expect(shape(withAuto)).toEqual(plain)
+    await withAuto.setProps({ auto: true })
+    expect(shape(withAuto)).toEqual(plain)
+  })
+
+  it('emits only the auto model when switched, never the gap', async () => {
+    const wrapper = mountAuto(false)
+    const auto = toolbar(wrapper)
+      .findAll('button')
+      .find((button) => button.text() === 'Auto')!
+
+    await auto.trigger('click')
+
+    expect(wrapper.emitted('update:auto')).toEqual([[true]])
+    expect(wrapper.emitted('update:modelValue')).toBeUndefined()
+  })
+
+  it('keeps the slider on the same step in both states', async () => {
+    const wrapper = mountAuto(false, { modelValue: 'gap-6' })
+    const before = sliderIndex(wrapper)
+
+    await wrapper.setProps({ auto: true })
+
+    expect(sliderIndex(wrapper)).toEqual(before)
+  })
+
+  it('takes the new copy from messages, per key', () => {
+    const wrapper = mountAuto(true, {
+      messages: {
+        fixed: 'Fixed',
+        minimumName: 'Minimum gap',
+        modeName: 'Gap type',
+      },
+    })
+
+    expect(
+      toolbar(wrapper)
+        .findAll('button[aria-pressed]')
+        .map((b) => b.text()),
+    ).toEqual(['Fixed', 'Auto'])
+    expect(wrapper.get('[role="slider"]').attributes('aria-label')).toBe('Minimum gap')
+    expect(toolbar(wrapper).attributes('aria-label')).toBe('Gap type')
+  })
+})
+
+// Recorded before the optional `auto` model existed: without it the markup has
+// to stay what consumers already ship, also for a value outside the scale.
+describe('EditorGap markup without auto', () => {
+  it.each([
+    ['a value on the scale', 'gap-6'],
+    ['a value outside the scale', 'gap-13'],
+  ] as const)('renders unchanged with %s', (_, value) => {
+    const wrapper = mount(EditorGap, { props: { modelValue: value as EditorGapValue } })
+
+    expect(wrapper.html()).toMatchSnapshot()
+    wrapper.unmount()
+  })
+})

package/src/components/editor/molecules/EditorHeadingType/EditorHeadingType.stories.ts

@@ -0,0 +1,68 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import { expect, userEvent, waitFor, within } from 'storybook/test'
+import { ref } from 'vue'
+import EditorHeadingType from './EditorHeadingType.vue'
+import type { EditorHeadingTypeValue } from './EditorHeadingType.vue'
+
+export default {
+  title: 'Components/Editor Components/Molecules/Editor Heading Type',
+  component: EditorHeadingType,
+  decorators: [() => ({ template: '<div class="w-100 mx-auto"><story /></div>' })],
+  argTypes: {
+    label: { control: 'text' },
+  },
+} satisfies Meta<typeof EditorHeadingType>
+
+type Story = StoryObj<typeof EditorHeadingType>
+
+export const Default: Story = {
+  render: (args) => ({
+    components: { EditorHeadingType },
+    setup() {
+      const heading = ref<EditorHeadingTypeValue>('text-4xl')
+      return { args, heading }
+    },
+    // The value is shown as-is: it is the Tailwind class the editor applies.
+    template: `
+      <div>
+        <EditorHeadingType v-bind="args" v-model="heading" />
+        <p class="small-normal text-gray-700">{{ heading }}</p>
+      </div>
+    `,
+  }),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+
+    await userEvent.click(canvas.getByRole('combobox'))
+    await waitFor(() => expect(canvas.getByRole('listbox')).toBeInTheDocument())
+
+    // Picked by its text rather than by accessible name: the option's icon is a
+    // Font Awesome glyph, and the kit's CSS is supplied by the consumer, so the
+    // name computation would depend on whether it happens to be loaded.
+    await userEvent.click(canvas.getByText('Heading 3'))
+
+    await waitFor(() => expect(canvas.getByText('text-2xl')).toBeInTheDocument())
+  },
+}
+
+export const CustomMessages: Story = {
+  args: {
+    label: 'Kopniveau',
+    messages: {
+      h1: 'Kop 1',
+      h2: 'Kop 2',
+      h3: 'Kop 3',
+      h4: 'Kop 4',
+      h5: 'Kop 5',
+      h6: 'Kop 6',
+    },
+  },
+  render: (args) => ({
+    components: { EditorHeadingType },
+    setup() {
+      const heading = ref<EditorHeadingTypeValue>('text-4xl')
+      return { args, heading }
+    },
+    template: `<EditorHeadingType v-bind="args" v-model="heading" />`,
+  }),
+}

package/src/components/editor/molecules/EditorHeadingType/EditorHeadingType.test.ts

@@ -0,0 +1,150 @@
+import { describe, it, expect, vi } from 'vitest'
+import { mount, flushPromises, type VueWrapper } from '@vue/test-utils'
+import { ref, nextTick } from 'vue'
+import EditorHeadingType, {
+  EDITOR_HEADING_TYPE_OPTIONS,
+  type EditorHeadingTypeValue,
+} from './EditorHeadingType.vue'
+
+// Select positions its list with floating-ui, which needs a real layout engine.
+vi.mock('@floating-ui/vue', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('@floating-ui/vue')>()
+  return {
+    ...actual,
+    useFloating: () => ({
+      floatingStyles: ref({}),
+      placement: ref('bottom-start'),
+      isPositioned: ref(true),
+    }),
+    autoUpdate: () => () => {},
+  }
+})
+
+/** Text of the closed field, which is the label of the selected option. */
+const fieldText = (wrapper: VueWrapper) => wrapper.find('[role="combobox"]').text()
+
+const open = async (wrapper: VueWrapper) => {
+  await wrapper.find('[role="combobox"]').trigger('click')
+  await flushPromises()
+  await nextTick()
+}
+
+const optionLabels = (wrapper: VueWrapper) =>
+  wrapper.findAll('[role="option"]').map((option) => option.text())
+
+describe('EditorHeadingType', () => {
+  // No assertions on typography utilities: labels are found by text or by
+  // structure, so restyling the block or the select cannot turn these red.
+  it('renders the default label', () => {
+    const wrapper = mount(EditorHeadingType, { props: { modelValue: 'text-4xl' } })
+
+    expect(wrapper.find('p').text()).toBe('Type')
+  })
+
+  it('renders a custom label', () => {
+    const wrapper = mount(EditorHeadingType, {
+      props: { modelValue: 'text-4xl', label: 'Kopniveau' },
+    })
+
+    expect(wrapper.find('p').text()).toBe('Kopniveau')
+  })
+
+  it('shows the label of the selected heading in the field', () => {
+    const wrapper = mount(EditorHeadingType, { props: { modelValue: 'text-4xl' } })
+
+    expect(fieldText(wrapper)).toBe('Heading 1')
+  })
+
+  it('offers every heading level with its default label', async () => {
+    const wrapper = mount(EditorHeadingType, { props: { modelValue: 'text-4xl' } })
+    await open(wrapper)
+
+    expect(optionLabels(wrapper)).toEqual([
+      'Heading 1',
+      'Heading 2',
+      'Heading 3',
+      'Heading 4',
+      'Heading 5',
+      'Heading 6',
+    ])
+  })
+
+  it('renders custom option labels', async () => {
+    const wrapper = mount(EditorHeadingType, {
+      props: {
+        modelValue: 'text-4xl',
+        messages: {
+          h1: 'Kop 1',
+          h2: 'Kop 2',
+          h3: 'Kop 3',
+          h4: 'Kop 4',
+          h5: 'Kop 5',
+          h6: 'Kop 6',
+        },
+      },
+    })
+    await open(wrapper)
+
+    expect(optionLabels(wrapper)).toEqual(['Kop 1', 'Kop 2', 'Kop 3', 'Kop 4', 'Kop 5', 'Kop 6'])
+  })
+
+  it('keeps the untouched defaults when only one message is overridden', async () => {
+    const wrapper = mount(EditorHeadingType, {
+      props: { modelValue: 'text-4xl', messages: { h3: 'Kop 3' } },
+    })
+    await open(wrapper)
+
+    expect(optionLabels(wrapper)).toEqual([
+      'Heading 1',
+      'Heading 2',
+      'Kop 3',
+      'Heading 4',
+      'Heading 5',
+      'Heading 6',
+    ])
+  })
+
+  it('emits update:modelValue with the Tailwind class of the chosen option', async () => {
+    const wrapper = mount(EditorHeadingType, { props: { modelValue: 'text-4xl' } })
+    await open(wrapper)
+
+    await wrapper.findAll('[role="option"]')[2].trigger('click')
+
+    expect(wrapper.emitted('update:modelValue')).toEqual([['text-2xl']])
+  })
+
+  it('follows the model when the parent changes it', async () => {
+    const wrapper = mount(EditorHeadingType, { props: { modelValue: 'text-4xl' } })
+
+    await wrapper.setProps({ modelValue: 'text-lg' })
+
+    expect(fieldText(wrapper)).toBe('Heading 5')
+  })
+
+  // A stored value from before this component, or from a scale it does not
+  // offer, must not be written back through the model as if it were a choice.
+  it('ignores a value that is not one of the offered sizes', async () => {
+    const wrapper = mount(EditorHeadingType, { props: { modelValue: 'text-4xl' } })
+
+    // The model type rules this value out, which is the point: it arrives from stored data.
+    await wrapper.setProps({ modelValue: 'text-7xl' as unknown as EditorHeadingTypeValue })
+
+    expect(wrapper.emitted('update:modelValue')).toBeUndefined()
+    expect(fieldText(wrapper)).toBe('Selecteer...')
+  })
+})
+
+// The consumer derives its class matchers from this list, so the list is a
+// contract: any change here changes what the app recognises.
+describe('EDITOR_HEADING_TYPE_OPTIONS', () => {
+  it('offers exactly the agreed options', () => {
+    expect(EDITOR_HEADING_TYPE_OPTIONS).toEqual([
+      { token: 'text-4xl', level: 1 },
+      { token: 'text-3xl', level: 2 },
+      { token: 'text-2xl', level: 3 },
+      { token: 'text-xl', level: 4 },
+      { token: 'text-lg', level: 5 },
+      { token: 'text-base', level: 6 },
+    ])
+  })
+})

package/src/components/editor/molecules/EditorJustifyContent/EditorJustifyContent.stories.ts

@@ -0,0 +1,71 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import { ref } from 'vue'
+import EditorJustifyContent from './EditorJustifyContent.vue'
+import type { EditorJustifyContentValue } from './EditorJustifyContent.vue'
+
+export default {
+  title: 'Components/Editor Components/Molecules/Editor Justify Content',
+  component: EditorJustifyContent,
+  decorators: [() => ({ template: '<div class="w-100 mx-auto"><story /></div>' })],
+  argTypes: {
+    label: { control: 'text' },
+  },
+} satisfies Meta<typeof EditorJustifyContent>
+
+type Story = StoryObj<typeof EditorJustifyContent>
+
+export const Default: Story = {
+  render: (args) => ({
+    components: { EditorJustifyContent },
+    setup() {
+      const justify = ref<EditorJustifyContentValue>('justify-start')
+      return { args, justify }
+    },
+    // The value is shown as-is: it is the Tailwind class the editor applies.
+    template: `
+      <div>
+        <EditorJustifyContent v-bind="args" v-model="justify" />
+        <p class="small-normal text-gray-700">{{ justify }}</p>
+      </div>
+    `,
+  }),
+}
+
+export const CustomMessages: Story = {
+  args: {
+    label: 'Alignment',
+    messages: { start: 'Start', center: 'Center', end: 'End', between: 'Space between' },
+  },
+  render: (args) => ({
+    components: { EditorJustifyContent },
+    setup() {
+      const justify = ref<EditorJustifyContentValue>('justify-start')
+      return { args, justify }
+    },
+    template: `<EditorJustifyContent v-bind="args" v-model="justify" />`,
+  }),
+}
+
+/**
+ * A subset of the options, always in the canonical order: a consumer placing a
+ * block within its parent has no use for `justify-between`.
+ */
+export const OptionsSubset: Story = {
+  args: {
+    options: ['justify-start', 'justify-center', 'justify-end'],
+    messages: { start: 'Links', center: 'Midden', end: 'Rechts' },
+  },
+  render: (args) => ({
+    components: { EditorJustifyContent },
+    setup() {
+      const justify = ref<EditorJustifyContentValue>('justify-center')
+      return { args, justify }
+    },
+    template: `
+      <div>
+        <EditorJustifyContent v-bind="args" v-model="justify" />
+        <p class="small-normal text-gray-700">{{ justify }}</p>
+      </div>
+    `,
+  }),
+}