@nexxtmove/ui 2.6.0 → 2.8.0

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

@@ -0,0 +1,230 @@
+import { describe, it, expect, beforeEach, vi } from 'vitest'
+import { mount, type VueWrapper } from '@vue/test-utils'
+import EditorLineStyle, {
+  EDITOR_LINE_MIN_THICKNESS,
+  EDITOR_LINE_STYLE_OPTIONS,
+  EDITOR_LINE_THICKNESS_STEPS,
+} from './EditorLineStyle.vue'
+import type { EditorLineStyleValue, EditorLineThickness } from './EditorLineStyle.vue'
+import Slider from '../../../atoms/Slider/Slider.vue'
+
+// jsdom ships no ResizeObserver, and reka-ui's slider observes its track.
+vi.stubGlobal(
+  'ResizeObserver',
+  class {
+    observe() {}
+    unobserve() {}
+    disconnect() {}
+  },
+)
+
+// ToggleGroup awaits document.fonts.ready on mount, which jsdom does not ship.
+beforeEach(() => {
+  Object.defineProperty(document, 'fonts', {
+    value: { ready: Promise.resolve() },
+    configurable: true,
+  })
+})
+
+const render = (
+  modelValue: EditorLineStyleValue,
+  thickness: EditorLineThickness,
+  props: Record<string, unknown> = {},
+) => mount(EditorLineStyle, { props: { modelValue, thickness, ...props } })
+
+/** The option buttons; the slider thumb is a span, so it is not among them. */
+const optionButtons = (wrapper: VueWrapper) => wrapper.findAll('button')
+
+const optionNames = (wrapper: VueWrapper) =>
+  optionButtons(wrapper).map((button) => button.attributes('aria-label'))
+
+const thicknessRow = (wrapper: VueWrapper) =>
+  wrapper.get('[data-testid="editor-line-style-thickness"]')
+
+const slider = (wrapper: VueWrapper) => wrapper.findComponent(Slider)
+
+describe('EditorLineStyle', () => {
+  // No assertions on typography utilities: copy is found by structure, text or
+  // accessible name, so restyling cannot turn these red.
+  it('renders the Dutch default label', () => {
+    expect(render('solid', 2).find('p').text()).toBe('Lijn')
+  })
+
+  it('renders a custom label and names the toolbar with it', () => {
+    const wrapper = render('solid', 2, { label: 'Line' })
+
+    expect(wrapper.find('p').text()).toBe('Line')
+    expect(wrapper.get('[role="toolbar"]').attributes('aria-label')).toBe('Line')
+  })
+
+  it('names the four options with the Dutch defaults', () => {
+    expect(optionNames(render('solid', 2))).toEqual([
+      'Geen',
+      'Doorgetrokken',
+      'Gestreept',
+      'Gestippeld',
+    ])
+  })
+
+  it('renders no tooltips, like the other editor toggle groups', () => {
+    const wrapper = render('solid', 2)
+
+    // ToggleGroup only mounts NexxtTooltip -- and with it reka-ui's provider
+    // and the trigger's data attribute -- for options that carry a `tooltip`.
+    expect(wrapper.findAllComponents({ name: 'TooltipProvider' })).toHaveLength(0)
+    expect(wrapper.find('[data-grace-area-trigger]').exists()).toBe(false)
+  })
+
+  it('merges custom messages per key', () => {
+    const wrapper = render('solid', 2, { messages: { dashed: 'Dashed', thickness: 'Width' } })
+
+    expect(optionNames(wrapper)).toEqual(['Geen', 'Doorgetrokken', 'Dashed', 'Gestippeld'])
+    expect(wrapper.get('[role="slider"]').attributes('aria-label')).toBe('Width')
+  })
+
+  it('draws the three line styles and shows the ban icon for none', () => {
+    const wrapper = render('solid', 2)
+    const [none, solid, dashed, dotted] = optionButtons(wrapper)
+
+    expect(none.find('i').exists()).toBe(true)
+    expect(none.find('i').classes().join(' ')).toContain('ban')
+    expect(solid.find('span[aria-hidden]').classes()).toContain('border-solid')
+    expect(dashed.find('span[aria-hidden]').classes()).toContain('border-dashed')
+    expect(dotted.find('span[aria-hidden]').classes()).toContain('border-dotted')
+    optionButtons(wrapper).forEach((button) => expect(button.text()).toBe(''))
+  })
+
+  it('leaves the option colours to ToggleGroup', () => {
+    const wrapper = render('solid', 2)
+
+    // No colour of its own on the drawings: they inherit the button's colour,
+    // and the active colour in the overlay.
+    wrapper
+      .findAll('button i, button span[aria-hidden]')
+      .forEach((el) => expect(el.classes().some((name) => name.startsWith('text-'))).toBe(false))
+  })
+
+  it('emits the token of the clicked option', async () => {
+    const wrapper = render('solid', 2)
+
+    await optionButtons(wrapper)[2].trigger('click')
+
+    expect(wrapper.emitted('update:modelValue')).toEqual([['dashed']])
+  })
+
+  describe('thickness row', () => {
+    it('is open and reachable while there is a line', () => {
+      const row = thicknessRow(render('solid', 2))
+
+      expect(row.classes()).toContain('grid-rows-[1fr]')
+      expect(row.attributes('inert')).toBeUndefined()
+    })
+
+    it('collapses and goes inert for none', () => {
+      const row = thicknessRow(render('none', 2))
+
+      expect(row.classes()).toContain('grid-rows-[0fr]')
+      // jsdom reflects the attribute Vue sets as 'true'; presence is what counts.
+      expect(row.attributes('inert')).toBeDefined()
+    })
+
+    it('opens again when a style with a line is chosen from outside', async () => {
+      const wrapper = render('none', 2)
+
+      await wrapper.setProps({ modelValue: 'dashed' })
+
+      expect(thicknessRow(wrapper).attributes('inert')).toBeUndefined()
+    })
+
+    it('renders the heading with the default copy', () => {
+      expect(thicknessRow(render('solid', 2)).find('p').text()).toBe('Dikte')
+    })
+  })
+
+  describe('slider', () => {
+    it('spans every step for solid', () => {
+      const wrapper = render('solid', 3)
+
+      expect(slider(wrapper).props('max')).toBe(EDITOR_LINE_THICKNESS_STEPS.length - 1)
+      expect(slider(wrapper).props('modelValue')).toEqual([2])
+      expect(wrapper.text()).toContain('3 px')
+    })
+
+    it('names the thumb and announces the thickness in px', () => {
+      const thumb = render('solid', 4).get('[role="slider"]')
+
+      expect(thumb.attributes('aria-label')).toBe('Dikte')
+      expect(thumb.attributes('aria-valuetext')).toBe('4 px')
+    })
+
+    it('writes the px of the new step', async () => {
+      const wrapper = render('solid', 4)
+
+      // Index 4 of [1, 2, 3, 4, 6, 8] is 6.
+      slider(wrapper).vm.$emit('update:modelValue', [4])
+      await wrapper.vm.$nextTick()
+
+      expect(wrapper.emitted('update:thickness')).toEqual([[6]])
+    })
+
+    it('offers only steps from 2 up for dotted', () => {
+      const wrapper = render('dotted', 4)
+
+      expect(slider(wrapper).props('max')).toBe(4)
+      expect(slider(wrapper).props('modelValue')).toEqual([2])
+    })
+
+    it('writes from the dotted list, not from the full one', async () => {
+      const wrapper = render('dotted', 2)
+
+      // Index 1 of [2, 3, 4, 6, 8] is 3; of the full list it would be 2.
+      slider(wrapper).vm.$emit('update:modelValue', [1])
+      await wrapper.vm.$nextTick()
+
+      expect(wrapper.emitted('update:thickness')).toEqual([[3]])
+    })
+
+    it('shows an incoming 1 as 2 for dotted without writing it back', () => {
+      const wrapper = render('dotted', 1)
+
+      expect(slider(wrapper).props('modelValue')).toEqual([0])
+      expect(wrapper.get('[role="slider"]').attributes('aria-valuetext')).toBe('2 px')
+      expect(wrapper.text()).toContain('2 px')
+      expect(wrapper.emitted('update:thickness')).toBeUndefined()
+    })
+
+    it('falls back to the first valid step for a value outside the list', () => {
+      // The type rules 5 out; a stored value from elsewhere gets past it.
+      const offList = 5 as unknown as EditorLineThickness
+
+      expect(slider(render('solid', offList)).props('modelValue')).toEqual([0])
+      expect(render('solid', offList).text()).toContain('1 px')
+      expect(render('dotted', offList).text()).toContain('2 px')
+    })
+
+    it('renders a custom unit', () => {
+      expect(render('solid', 3, { messages: { unit: 'pixels' } }).text()).toContain('3 pixels')
+    })
+  })
+})
+
+// The consumer derives its matchers and patches from these, so they are a
+// contract: any change here changes what the app recognises.
+describe('EditorLineStyle constants', () => {
+  it('offers exactly the agreed styles', () => {
+    expect(EDITOR_LINE_STYLE_OPTIONS).toEqual([
+      { token: 'none' },
+      { token: 'solid' },
+      { token: 'dashed' },
+      { token: 'dotted' },
+    ])
+  })
+
+  it('offers exactly the agreed thickness steps', () => {
+    expect(EDITOR_LINE_THICKNESS_STEPS).toEqual([1, 2, 3, 4, 6, 8])
+  })
+
+  it('starts dotted at 2 px and nothing else above the first step', () => {
+    expect(EDITOR_LINE_MIN_THICKNESS).toEqual({ dotted: 2 })
+  })
+})

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

@@ -0,0 +1,154 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import { expect, userEvent, waitFor, within } from 'storybook/test'
+import { ref } from 'vue'
+import EditorMaxWidth from './EditorMaxWidth.vue'
+import type { EditorMaxWidthValue } from './EditorMaxWidth.vue'
+
+/**
+ * The collapsing wrapper, found by the grid row it animates rather than by any
+ * styling class, so restyling the block cannot quietly break the assertions.
+ */
+const contentWrapper = (canvasElement: HTMLElement) =>
+  canvasElement.querySelector('[class*="grid-rows-"]') as HTMLElement
+
+export default {
+  title: 'Components/Editor Components/Molecules/Editor Max Width',
+  component: EditorMaxWidth,
+  decorators: [() => ({ template: '<div class="w-100 mx-auto"><story /></div>' })],
+  argTypes: {
+    label: { control: 'text' },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component:
+          '**Deprecated** -- use `NexxtEditorSizeLimit` instead: a free maximum in px or % that can be none, rather than the `max-w-*` steps.',
+      },
+    },
+  },
+} satisfies Meta<typeof EditorMaxWidth>
+
+type Story = StoryObj<typeof EditorMaxWidth>
+
+export const Default: Story = {
+  render: (args) => ({
+    components: { EditorMaxWidth },
+    setup() {
+      const maxWidth = ref<EditorMaxWidthValue>('max-w-3xl')
+      const enabled = ref(true)
+      return { args, maxWidth, enabled }
+    },
+    // The value is shown as-is: it is the Tailwind class the editor applies.
+    template: `
+      <div>
+        <EditorMaxWidth v-bind="args" v-model="maxWidth" v-model:enabled="enabled" />
+        <p class="small-normal text-gray-700">{{ maxWidth }}</p>
+      </div>
+    `,
+  }),
+}
+
+/**
+ * Switched off means full width: the app writes no `max-w-*` class at all. The
+ * chosen width is kept anyway, so switching back on restores it.
+ */
+export const SwitchedOff: Story = {
+  render: (args) => ({
+    components: { EditorMaxWidth },
+    setup() {
+      const maxWidth = ref<EditorMaxWidthValue>('max-w-3xl')
+      const enabled = ref(false)
+      return { args, maxWidth, enabled }
+    },
+    template: `
+      <div>
+        <EditorMaxWidth v-bind="args" v-model="maxWidth" v-model:enabled="enabled" />
+        <p class="small-normal text-gray-700">{{ maxWidth }}</p>
+      </div>
+    `,
+  }),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    const content = contentWrapper(canvasElement)
+
+    expect(content).toHaveAttribute('inert')
+
+    await userEvent.click(canvas.getByRole('switch'))
+    await waitFor(() => expect(content).not.toHaveAttribute('inert'))
+
+    await userEvent.click(canvas.getByRole('switch'))
+    await waitFor(() => expect(content).toHaveAttribute('inert'))
+
+    // The width survives the round trip: only the switch state changed.
+    expect(canvas.getByText('max-w-3xl')).toBeInTheDocument()
+  },
+}
+
+/** The keyboard reaches both ends of the scale and every step in between. */
+export const AllSteps: Story = {
+  render: (args) => ({
+    components: { EditorMaxWidth },
+    setup() {
+      const maxWidth = ref<EditorMaxWidthValue>('max-w-3xl')
+      const enabled = ref(true)
+      return { args, maxWidth, enabled }
+    },
+    template: `
+      <div>
+        <EditorMaxWidth v-bind="args" v-model="maxWidth" v-model:enabled="enabled" />
+        <p class="small-normal text-gray-700">{{ maxWidth }}</p>
+      </div>
+    `,
+  }),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    const thumb = canvas.getByRole('slider')
+
+    thumb.focus()
+
+    await userEvent.keyboard('{End}')
+    await waitFor(() => {
+      expect(canvas.getByText('1280 px')).toBeInTheDocument()
+      expect(canvas.getByText('max-w-7xl')).toBeInTheDocument()
+    })
+
+    await userEvent.keyboard('{Home}')
+    await waitFor(() => {
+      expect(canvas.getByText('320 px')).toBeInTheDocument()
+      expect(canvas.getByText('max-w-xs')).toBeInTheDocument()
+    })
+
+    await userEvent.keyboard('{ArrowRight}')
+    await waitFor(() => {
+      expect(canvas.getByText('384 px')).toBeInTheDocument()
+      expect(canvas.getByText('max-w-sm')).toBeInTheDocument()
+    })
+  },
+}
+
+export const CustomMessages: Story = {
+  args: {
+    label: 'Max width',
+    messages: { unit: 'pt' },
+  },
+  render: (args) => ({
+    components: { EditorMaxWidth },
+    setup() {
+      const maxWidth = ref<EditorMaxWidthValue>('max-w-3xl')
+      const enabled = ref(true)
+      return { args, maxWidth, enabled }
+    },
+    template: `
+      <div>
+        <EditorMaxWidth v-bind="args" v-model="maxWidth" v-model:enabled="enabled" />
+        <p class="small-normal text-gray-700">{{ maxWidth }}</p>
+      </div>
+    `,
+  }),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+
+    expect(canvas.getByRole('slider')).toHaveAttribute('aria-label', 'Max width')
+    expect(canvas.getByText('768 pt')).toBeInTheDocument()
+  },
+}

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

@@ -0,0 +1,112 @@
+import { describe, it, expect, vi } from 'vitest'
+import { mount } from '@vue/test-utils'
+import EditorMaxWidth, { EDITOR_MAX_WIDTH_STEPS } from './EditorMaxWidth.vue'
+import type { EditorMaxWidthValue } from './EditorMaxWidth.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('EditorMaxWidth', () => {
+  // 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(EditorMaxWidth, { props: { modelValue: 'max-w-3xl' } })
+
+    expect(wrapper.text()).toContain('Vaste breedte')
+  })
+
+  it('puts the slider on the index of the value and reads it in pixels', () => {
+    const wrapper = mount(EditorMaxWidth, { props: { modelValue: 'max-w-3xl' } })
+
+    expect(sliderIndex(wrapper)).toEqual([6])
+    expect(wrapper.find('[role="slider"]').attributes('aria-valuetext')).toBe('768 px')
+    expect(wrapper.text()).toContain('768 px')
+  })
+
+  it('spans the whole step list', () => {
+    const wrapper = mount(EditorMaxWidth, { props: { modelValue: 'max-w-xs' } })
+    const slider = wrapper.findComponent(Slider)
+
+    expect(slider.props('min')).toBe(0)
+    expect(slider.props('max')).toBe(10)
+    expect(slider.props('step')).toBe(1)
+  })
+
+  it('emits update:modelValue with the Tailwind class of the new step', async () => {
+    const wrapper = mount(EditorMaxWidth, { props: { modelValue: 'max-w-3xl' } })
+
+    wrapper.findComponent(Slider).vm.$emit('update:modelValue', [10])
+    await wrapper.vm.$nextTick()
+
+    expect(wrapper.emitted('update:modelValue')).toEqual([['max-w-7xl']])
+  })
+
+  it('falls back to the first step for a value outside the scale', () => {
+    // `max-w-prose` is a real Tailwind class but not a size on this scale, 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 = 'max-w-prose' as unknown as EditorMaxWidthValue
+    const wrapper = mount(EditorMaxWidth, { props: { modelValue: outOfScale } })
+
+    expect(sliderIndex(wrapper)).toEqual([0])
+    expect(wrapper.text()).toContain('320 px')
+  })
+
+  it('emits update:enabled when the switch is turned off', async () => {
+    const wrapper = mount(EditorMaxWidth, { props: { modelValue: 'max-w-3xl', enabled: true } })
+
+    await wrapper.find('input[type="checkbox"]').setValue(false)
+
+    expect(wrapper.emitted('update:enabled')).toEqual([[false]])
+  })
+
+  it('renders a custom label and unit', () => {
+    const wrapper = mount(EditorMaxWidth, {
+      props: { modelValue: 'max-w-3xl', label: 'Max width', messages: { unit: 'pt' } },
+    })
+
+    expect(wrapper.text()).toContain('Max width')
+    expect(wrapper.text()).toContain('768 pt')
+    expect(wrapper.find('[role="slider"]').attributes('aria-valuetext')).toBe('768 pt')
+    expect(wrapper.find('[role="slider"]').attributes('aria-label')).toBe('Max width')
+  })
+
+  it('exposes the step list in ascending order', () => {
+    expect(EDITOR_MAX_WIDTH_STEPS).toHaveLength(11)
+    expect(EDITOR_MAX_WIDTH_STEPS.map(({ token }) => token)).toEqual([
+      'xs',
+      'sm',
+      'md',
+      'lg',
+      'xl',
+      '2xl',
+      '3xl',
+      '4xl',
+      '5xl',
+      '6xl',
+      '7xl',
+    ])
+    expect(EDITOR_MAX_WIDTH_STEPS.map(({ px }) => px)).toEqual([
+      320, 384, 448, 512, 576, 672, 768, 896, 1024, 1152, 1280,
+    ])
+  })
+})