@nexxtmove/ui 2.5.0 → 2.7.0

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

@@ -0,0 +1,64 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import { ref } from 'vue'
+import EditorRadius from './EditorRadius.vue'
+import type { EditorRadiusValue } from './EditorRadius.vue'
+
+export default {
+  title: 'Components/Editor Components/Molecules/Editor Radius',
+  component: EditorRadius,
+  decorators: [() => ({ template: '<div class="w-100 mx-auto"><story /></div>' })],
+  argTypes: {
+    label: { control: 'text' },
+  },
+} satisfies Meta<typeof EditorRadius>
+
+type Story = StoryObj<typeof EditorRadius>
+
+export const Default: Story = {
+  render: (args) => ({
+    components: { EditorRadius },
+    setup() {
+      const radius = ref<EditorRadiusValue>('rounded-lg')
+      return { args, radius }
+    },
+    // The value is shown as-is: it is the Tailwind class the editor applies.
+    template: `
+      <div>
+        <EditorRadius v-bind="args" v-model="radius" />
+        <p class="small-normal text-gray-700">{{ radius }}</p>
+      </div>
+    `,
+  }),
+}
+
+export const Full: Story = {
+  render: (args) => ({
+    components: { EditorRadius },
+    setup() {
+      const radius = ref<EditorRadiusValue>('rounded-full')
+      return { args, radius }
+    },
+    // The last step has no px size, so the readout names it instead.
+    template: `
+      <div>
+        <EditorRadius v-bind="args" v-model="radius" />
+        <p class="small-normal text-gray-700">{{ radius }}</p>
+      </div>
+    `,
+  }),
+}
+
+export const CustomMessages: Story = {
+  args: {
+    label: 'Corner radius',
+    messages: { unit: 'pixels', full: 'Pill' },
+  },
+  render: (args) => ({
+    components: { EditorRadius },
+    setup() {
+      const radius = ref<EditorRadiusValue>('rounded-lg')
+      return { args, radius }
+    },
+    template: `<EditorRadius v-bind="args" v-model="radius" />`,
+  }),
+}

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

@@ -0,0 +1,137 @@
+import { describe, it, expect, vi } from 'vitest'
+import { mount } from '@vue/test-utils'
+import EditorRadius from './EditorRadius.vue'
+import type { EditorRadiusValue } from './EditorRadius.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('EditorRadius', () => {
+  // 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(EditorRadius, { props: { modelValue: 'rounded-lg' } })
+
+    expect(wrapper.find('p').text()).toBe('Hoekafronding')
+  })
+
+  it('renders the radius in pixels with the default unit', () => {
+    const wrapper = mount(EditorRadius, { props: { modelValue: 'rounded-lg' } })
+
+    expect(wrapper.text()).toContain('8 px')
+  })
+
+  it('renders a custom label', () => {
+    const wrapper = mount(EditorRadius, {
+      props: { modelValue: 'rounded-lg', label: 'Corner radius' },
+    })
+
+    expect(wrapper.find('p').text()).toBe('Corner radius')
+  })
+
+  it('renders a custom unit', () => {
+    const wrapper = mount(EditorRadius, {
+      props: { modelValue: 'rounded-lg', messages: { unit: 'pixels' } },
+    })
+
+    expect(wrapper.text()).toContain('8 pixels')
+  })
+
+  // The tokens are not evenly spaced in px (0, 2, 4, 6, 8, 12, 16, 24, 32), so
+  // the slider steps over the list rather than over the px value.
+  it('puts the slider on the index of the value, not on its px size', () => {
+    const wrapper = mount(EditorRadius, { props: { modelValue: 'rounded-xl' } })
+
+    expect(sliderIndex(wrapper)).toEqual([5])
+    expect(wrapper.text()).toContain('12 px')
+  })
+
+  it('puts the slider on the index of a Tailwind default step', () => {
+    const wrapper = mount(EditorRadius, { props: { modelValue: 'rounded-4xl' } })
+
+    expect(sliderIndex(wrapper)).toEqual([8])
+    expect(wrapper.text()).toContain('32 px')
+  })
+
+  it('names the last step instead of measuring it', () => {
+    const wrapper = mount(EditorRadius, { props: { modelValue: 'rounded-full' } })
+    const thumb = wrapper.find('[role="slider"]')
+
+    expect(wrapper.text()).toContain('Rond')
+    expect(wrapper.text()).not.toContain('px')
+    expect(thumb.attributes('aria-valuetext')).toBe('Rond')
+  })
+
+  it('renders custom copy for the last step', () => {
+    const wrapper = mount(EditorRadius, {
+      props: { modelValue: 'rounded-full', messages: { full: 'Pill' } },
+    })
+
+    expect(wrapper.text()).toContain('Pill')
+  })
+
+  it('spans the whole step list', () => {
+    const wrapper = mount(EditorRadius, { props: { modelValue: 'rounded-none' } })
+    const slider = wrapper.findComponent(Slider)
+
+    expect(slider.props('min')).toBe(0)
+    expect(slider.props('max')).toBe(9)
+    expect(slider.props('step')).toBe(1)
+  })
+
+  it('emits update:modelValue with the Tailwind class of the new step', async () => {
+    const wrapper = mount(EditorRadius, { props: { modelValue: 'rounded-lg' } })
+
+    // Index 2 on the list is the `sm` token.
+    wrapper.findComponent(Slider).vm.$emit('update:modelValue', [2])
+    await wrapper.vm.$nextTick()
+
+    expect(wrapper.emitted('update:modelValue')).toEqual([['rounded-sm']])
+  })
+
+  it('falls back to the first step for a value outside the scale', () => {
+    // `rounded-5xl` is on neither the theme nor the Tailwind 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 = 'rounded-5xl' as unknown as EditorRadiusValue
+    const wrapper = mount(EditorRadius, { 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 radius in pixels on the thumb', () => {
+    const wrapper = mount(EditorRadius, { props: { modelValue: 'rounded-lg' } })
+    const thumb = wrapper.find('[role="slider"]')
+
+    expect(thumb.attributes('aria-valuetext')).toBe('8 px')
+    expect(thumb.attributes('aria-label')).toBe('Hoekafronding')
+  })
+
+  it('is always visible, so it renders no switch', () => {
+    const wrapper = mount(EditorRadius, { props: { modelValue: 'rounded-lg' } })
+
+    expect(wrapper.find('input[type="checkbox"]').exists()).toBe(false)
+  })
+})

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

@@ -0,0 +1,103 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import { expect, userEvent, waitFor, within } from 'storybook/test'
+import { ref } from 'vue'
+import EditorShadow from './EditorShadow.vue'
+import type { EditorShadowValue } from './EditorShadow.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 Shadow',
+  component: EditorShadow,
+  decorators: [() => ({ template: '<div class="w-100 mx-auto"><story /></div>' })],
+  argTypes: {
+    label: { control: 'text' },
+    switchable: { control: 'boolean' },
+  },
+} satisfies Meta<typeof EditorShadow>
+
+type Story = StoryObj<typeof EditorShadow>
+
+export const Default: Story = {
+  render: (args) => ({
+    components: { EditorShadow },
+    setup() {
+      const shadow = ref<EditorShadowValue>('shadow-sm')
+      const enabled = ref(true)
+      return { args, shadow, enabled }
+    },
+    // The value is shown as-is: it is the Tailwind class the editor applies.
+    template: `
+      <div>
+        <EditorShadow v-bind="args" v-model="shadow" v-model:enabled="enabled" />
+        <p class="small-normal text-gray-700">{{ shadow }}</p>
+        <p class="small-normal text-gray-700">{{ enabled }}</p>
+      </div>
+    `,
+  }),
+}
+
+/**
+ * Two things jsdom cannot see: a pick moves the value in the browser, and the
+ * collapse that follows leaves that value alone. Its own story, so that the
+ * default one stays open for whoever is looking at it.
+ */
+export const KeepsStrengthWhenSwitchedOff: Story = {
+  render: Default.render,
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    const content = contentWrapper(canvasElement)
+
+    await userEvent.click(canvas.getByRole('button', { name: 'Gemiddeld' }))
+
+    await waitFor(() => expect(canvas.getByText('shadow-md')).toBeInTheDocument())
+    expect(content).not.toHaveAttribute('inert')
+
+    await userEvent.click(canvas.getByRole('switch'))
+
+    await waitFor(() => {
+      expect(content).toHaveAttribute('inert')
+      expect(canvas.getByText('false')).toBeInTheDocument()
+    })
+
+    // The strength survives the collapse: only the switch state changed.
+    expect(canvas.getByText('shadow-md')).toBeInTheDocument()
+  },
+}
+
+export const Disabled: Story = {
+  render: (args) => ({
+    components: { EditorShadow },
+    setup() {
+      const shadow = ref<EditorShadowValue>('shadow-lg')
+      const enabled = ref(false)
+      return { args, shadow, enabled }
+    },
+    template: `
+      <div>
+        <EditorShadow v-bind="args" v-model="shadow" v-model:enabled="enabled" />
+        <p class="small-normal text-gray-700">{{ shadow }}</p>
+      </div>
+    `,
+  }),
+}
+
+export const CustomMessages: Story = {
+  args: {
+    label: 'Shadow',
+    messages: { strength: 'Strength', sm: 'Light', md: 'Medium', lg: 'Strong' },
+  },
+  render: (args) => ({
+    components: { EditorShadow },
+    setup() {
+      const shadow = ref<EditorShadowValue>('shadow-md')
+      return { args, shadow }
+    },
+    template: `<EditorShadow v-bind="args" v-model="shadow" />`,
+  }),
+}

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

@@ -0,0 +1,168 @@
+import { describe, it, expect, beforeEach } from 'vitest'
+import { mount, type VueWrapper } from '@vue/test-utils'
+import EditorShadow, { EDITOR_SHADOW_OPTIONS } from './EditorShadow.vue'
+import type { EditorShadowValue } from './EditorShadow.vue'
+import NexxtToggleGroup from '../../../molecules/ToggleGroup/ToggleGroup.vue'
+
+// ToggleGroup awaits document.fonts.ready on mount, which jsdom does not ship.
+beforeEach(() => {
+  Object.defineProperty(document, 'fonts', {
+    value: { ready: Promise.resolve() },
+    configurable: true,
+  })
+})
+
+/** The names of the options, which are their visible text. */
+const optionNames = (wrapper: VueWrapper) =>
+  wrapper.findAll('button').map((button) => button.text())
+
+/** The option the toggle group is told to show as selected. */
+const selectedOption = (wrapper: VueWrapper) =>
+  wrapper.findComponent(NexxtToggleGroup).props('modelValue')
+
+/** The collapsing wrapper, found by the grid row it animates, not by styling. */
+const contentWrapper = (wrapper: VueWrapper) => wrapper.find('[class*="grid-rows-"]')
+
+describe('EditorShadow', () => {
+  // No assertions on typography utilities: copy is found by text or by
+  // structure, so restyling the block or the toggle group cannot turn these red.
+  it('renders the Dutch default label', () => {
+    const wrapper = mount(EditorShadow, { props: { modelValue: 'shadow-sm' } })
+
+    expect(wrapper.text()).toContain('Schaduw')
+  })
+
+  it('renders the Dutch default label above the strengths', () => {
+    const wrapper = mount(EditorShadow, { props: { modelValue: 'shadow-sm' } })
+
+    expect(wrapper.text()).toContain('Sterkte')
+  })
+
+  it('renders a button for each of the three strengths', () => {
+    const wrapper = mount(EditorShadow, { props: { modelValue: 'shadow-sm' } })
+
+    expect(wrapper.findAll('button')).toHaveLength(3)
+  })
+
+  it('names the strengths with the Dutch defaults', () => {
+    const wrapper = mount(EditorShadow, { props: { modelValue: 'shadow-sm' } })
+
+    expect(optionNames(wrapper)).toEqual(['Licht', 'Gemiddeld', 'Sterk'])
+  })
+
+  it('renders a custom label', () => {
+    const wrapper = mount(EditorShadow, {
+      props: { modelValue: 'shadow-sm', label: 'Shadow' },
+    })
+
+    expect(wrapper.text()).toContain('Shadow')
+    expect(wrapper.text()).not.toContain('Schaduw')
+  })
+
+  it('renders custom messages', () => {
+    const wrapper = mount(EditorShadow, {
+      props: {
+        modelValue: 'shadow-sm',
+        messages: { strength: 'Strength', sm: 'Light', md: 'Medium', lg: 'Strong' },
+      },
+    })
+
+    expect(wrapper.text()).toContain('Strength')
+    expect(optionNames(wrapper)).toEqual(['Light', 'Medium', 'Strong'])
+  })
+
+  it('keeps the untouched defaults when only one message is overridden', () => {
+    const wrapper = mount(EditorShadow, {
+      props: { modelValue: 'shadow-sm', messages: { md: 'Medium' } },
+    })
+
+    expect(wrapper.text()).toContain('Sterkte')
+    expect(optionNames(wrapper)).toEqual(['Licht', 'Medium', 'Sterk'])
+  })
+
+  it('shows the strength of the model as the selected one', () => {
+    const wrapper = mount(EditorShadow, { props: { modelValue: 'shadow-lg' } })
+
+    expect(selectedOption(wrapper)).toBe('shadow-lg')
+  })
+
+  it('emits update:modelValue with the Tailwind class of the clicked strength', async () => {
+    const wrapper = mount(EditorShadow, { props: { modelValue: 'shadow-sm' } })
+
+    await wrapper.findAll('button')[1].trigger('click')
+    await wrapper.findAll('button')[2].trigger('click')
+
+    expect(wrapper.emitted('update:modelValue')).toEqual([['shadow-md'], ['shadow-lg']])
+  })
+
+  it('shows the first strength for a value outside the list', () => {
+    // `shadow-xl` is on the theme scale but not among the options, so there is
+    // no option 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 outOfList = 'shadow-xl' as unknown as EditorShadowValue
+    const wrapper = mount(EditorShadow, { props: { modelValue: outOfList } })
+
+    expect(selectedOption(wrapper)).toBe('shadow-sm')
+  })
+
+  it('follows the model when the parent changes it', async () => {
+    const wrapper = mount(EditorShadow, { props: { modelValue: 'shadow-sm' } })
+
+    await wrapper.setProps({ modelValue: 'shadow-md' })
+
+    expect(selectedOption(wrapper)).toBe('shadow-md')
+  })
+
+  it('emits update:enabled when the switch is toggled', async () => {
+    const wrapper = mount(EditorShadow, { props: { modelValue: 'shadow-sm', enabled: true } })
+
+    await wrapper.find('input[type="checkbox"]').setValue(false)
+
+    expect(wrapper.emitted('update:enabled')).toEqual([[false]])
+  })
+
+  it('leaves the strength alone when the switch is toggled', async () => {
+    const wrapper = mount(EditorShadow, { props: { modelValue: 'shadow-lg', enabled: true } })
+
+    await wrapper.find('input[type="checkbox"]').setValue(false)
+
+    expect(wrapper.emitted('update:modelValue')).toBeUndefined()
+    expect(selectedOption(wrapper)).toBe('shadow-lg')
+  })
+
+  it('makes the strengths inert when enabled is false', () => {
+    const wrapper = mount(EditorShadow, { props: { modelValue: 'shadow-sm', enabled: false } })
+
+    expect(contentWrapper(wrapper).attributes('inert')).toBeDefined()
+  })
+
+  it('keeps the strengths interactive when enabled is true', () => {
+    const wrapper = mount(EditorShadow, { props: { modelValue: 'shadow-sm', enabled: true } })
+
+    expect(contentWrapper(wrapper).attributes('inert')).toBeUndefined()
+  })
+
+  // Switchable by default, like the border: a shadow is off as often as it is on.
+  it('renders the switch by default', () => {
+    const wrapper = mount(EditorShadow, { props: { modelValue: 'shadow-sm' } })
+
+    expect(wrapper.find('input[type="checkbox"]').exists()).toBe(true)
+  })
+
+  it('renders no switch when switchable is false', () => {
+    const wrapper = mount(EditorShadow, {
+      props: { modelValue: 'shadow-sm', switchable: false },
+    })
+
+    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_SHADOW_OPTIONS', () => {
+  it('offers exactly the agreed strengths', () => {
+    expect(EDITOR_SHADOW_OPTIONS).toEqual([{ token: 'sm' }, { token: 'md' }, { token: 'lg' }])
+  })
+})

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

@@ -0,0 +1,84 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import { ref } from 'vue'
+import { expect, userEvent, waitFor, within } from 'storybook/test'
+import EditorSize from './EditorSize.vue'
+import type { EditorSizeValue } from './EditorSize.vue'
+
+export default {
+  title: 'Components/Editor Components/Molecules/Editor Size',
+  component: EditorSize,
+  decorators: [() => ({ template: '<div class="w-100 mx-auto"><story /></div>' })],
+  argTypes: {
+    label: { control: 'text' },
+  },
+} satisfies Meta<typeof EditorSize>
+
+type Story = StoryObj<typeof EditorSize>
+
+const render = (args: Story['args'], initial: EditorSizeValue) => ({
+  components: { EditorSize },
+  setup() {
+    const size = ref(initial)
+    return { args, size }
+  },
+  template: `
+    <div>
+      <EditorSize v-bind="args" v-model="size" />
+      <p data-testid="size-value" class="small-normal text-gray-700">{{ JSON.stringify(size) }}</p>
+    </div>
+  `,
+})
+
+export const Default: Story = {
+  args: { label: 'Breedte' },
+  render: (args) => render(args, { mode: 'auto' }),
+}
+
+/**
+ * Picking Vast opens the field under the toggle. The model already carries a
+ * fixed size -- what a consumer measured, say -- so the field starts there.
+ */
+export const OpensOnFixed: Story = {
+  args: { label: 'Breedte' },
+  render: (args) => render(args, { mode: 'fill', fixed: { value: 480, unit: 'px' } }),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    const row = canvasElement.querySelector('[data-testid="editor-size-fixed-row"]')!
+
+    expect(row.getAttribute('inert')).not.toBeNull()
+
+    await userEvent.click(canvas.getByRole('button', { name: 'Breedte vast' }))
+
+    await waitFor(() => expect(row.getAttribute('inert')).toBeNull())
+    expect(
+      (canvas.getByRole('spinbutton', { name: 'Breedte (px)' }) as HTMLInputElement).value,
+    ).toBe('480')
+  },
+}
+
+/** The Vast state, px only. */
+export const Fixed: Story = {
+  args: { label: 'Hoogte' },
+  render: (args) => render(args, { mode: 'fixed', fixed: { value: 320, unit: 'px' } }),
+}
+
+/** The Vast state with px and %. */
+export const FixedWithPercent: Story = {
+  args: { label: 'Breedte', units: ['px', '%'] },
+  render: (args) => render(args, { mode: 'fixed', fixed: { value: 50, unit: '%' } }),
+}
+
+export const CustomMessages: Story = {
+  args: {
+    label: 'Width',
+    units: ['px', '%'],
+    messages: { auto: 'Hug', fill: 'Fill', fixed: 'Fixed', unit: 'Unit' },
+  },
+  render: (args) => render(args, { mode: 'fixed', fixed: { value: 320, unit: 'px' } }),
+}
+
+/** An image has nothing to fill, so it is offered Automatisch and Vast only. */
+export const WithoutFill: Story = {
+  args: { label: 'Breedte', modes: ['auto', 'fixed'] },
+  render: (args) => render(args, { mode: 'auto' }),
+}