@nexxtmove/ui 2.6.0 → 2.7.0

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

@@ -0,0 +1,563 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import { expect, screen, userEvent, waitFor, within } from 'storybook/test'
+import { ref } from 'vue'
+import EditorColor from './EditorColor.vue'
+import type { EditorColorThemeRole, EditorColorValue } from './EditorColor.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
+
+/**
+ * The roles as a consumer would pass them: its own labels, and the hex each role
+ * has in the customer's theme right now. Heading and text share a hex, so only
+ * the tooltip tells their swatches apart.
+ */
+const THEME_ROLES: EditorColorThemeRole[] = [
+  { role: 'main', label: 'Hoofdkleur', hex: '#1777EA' },
+  { role: 'accent', label: 'Accentkleur', hex: '#F59E0B' },
+  { role: 'background', label: 'Achtergrond', hex: '#F0F4F8' },
+  { role: 'heading', label: 'Koppen', hex: '#1F2937' },
+  { role: 'text', label: 'Tekst', hex: '#1F2937' },
+]
+
+export default {
+  title: 'Components/Editor Components/Molecules/Editor Color',
+  component: EditorColor,
+  decorators: [() => ({ template: '<div class="w-100 mx-auto"><story /></div>' })],
+  argTypes: {
+    label: { control: 'text' },
+    switchable: { control: 'boolean' },
+    property: { control: 'select', options: ['bg', 'text'] },
+    showAlpha: { control: 'boolean' },
+  },
+} satisfies Meta<typeof EditorColor>
+
+type Story = StoryObj<typeof EditorColor>
+
+export const Default: Story = {
+  render: (args) => ({
+    components: { EditorColor },
+    setup() {
+      const color = ref<EditorColorValue>('bg-[#1777EA]')
+      return { args, color }
+    },
+    // The value is shown as-is: it is the Tailwind class the editor applies.
+    template: `
+      <div>
+        <EditorColor v-bind="args" v-model="color" />
+        <p class="small-normal text-gray-700">{{ color }}</p>
+      </div>
+    `,
+  }),
+  // The panel defaults to a fixed w-70, which is narrower than the full-width
+  // trigger in a settings column. jsdom has no layout, so the two widths can
+  // only be compared in a real browser.
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    const trigger = canvas.getByRole('button')
+
+    await userEvent.click(trigger)
+
+    // The floating container is found by the inline position it is given, not by
+    // a styling class: it is the only fixed-positioned ancestor of the panel.
+    await waitFor(() => {
+      const panel = canvasElement
+        .querySelector('[placeholder="#000000"]')!
+        .closest<HTMLElement>('div[style*="position: fixed"]')!
+
+      expect(panel.getBoundingClientRect().width).toBe(trigger.getBoundingClientRect().width)
+    })
+  },
+}
+export const WithSuggestions: Story = {
+  args: {
+    suggestions: ['#1777EA', '#F0F4F8', '#1F2937'],
+  },
+  render: (args) => ({
+    components: { EditorColor },
+    setup() {
+      const color = ref<EditorColorValue>('bg-[#1777EA]')
+      return { args, color }
+    },
+    template: `
+      <EditorColor v-bind="args" v-model="color" />
+    `,
+  }),
+}
+
+/** Picking a role writes the role class for the current property, not its hex. */
+export const WithThemeRoles: Story = {
+  args: { themeRoles: THEME_ROLES },
+  render: (args) => ({
+    components: { EditorColor },
+    setup() {
+      const color = ref<EditorColorValue>('bg-[#1777EA]')
+      return { args, color }
+    },
+    template: `
+      <div>
+        <EditorColor v-bind="args" v-model="color" />
+        <p class="small-normal text-gray-700">{{ color }}</p>
+      </div>
+    `,
+  }),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+
+    // The trigger is named after its placeholder; a role button after its label.
+    await userEvent.click(canvas.getByRole('button', { name: 'Kies kleur...' }))
+
+    const main = await canvas.findByRole('button', { name: 'Hoofdkleur' })
+
+    // The literal has the hex of the main colour, and that selects nothing.
+    expect(main).toHaveAttribute('aria-pressed', 'false')
+
+    // The swatch carries no visible label; hovering it names the role. The
+    // tooltip is portalled to the body, outside the canvas, and reka hides the
+    // node that carries the role from the accessibility tree: the bubble around
+    // it is what the user sees.
+    await userEvent.hover(main)
+    const bubble = (await screen.findByRole('tooltip', { hidden: true })).parentElement
+    expect(bubble).toBeVisible()
+    expect(bubble).toHaveTextContent('Hoofdkleur')
+
+    await userEvent.click(main)
+
+    await waitFor(() => {
+      expect(canvas.getByText('bg-theme-main')).toBeInTheDocument()
+      expect(main).toHaveAttribute('aria-pressed', 'true')
+      expect(canvas.getByRole('button', { name: 'Kies kleur...' })).toHaveTextContent('Hoofdkleur')
+    })
+  },
+}
+
+/** A stored role class is shown by its label, with the swatch of the role's current hex. */
+export const ThemeRoleSelected: Story = {
+  args: { themeRoles: THEME_ROLES, property: 'text', label: 'Tekstkleur' },
+  render: (args) => ({
+    components: { EditorColor },
+    setup() {
+      const color = ref<EditorColorValue>('text-theme-heading')
+      return { args, color }
+    },
+    template: `
+      <div>
+        <EditorColor v-bind="args" v-model="color" />
+        <p class="small-normal text-gray-700">{{ color }}</p>
+      </div>
+    `,
+  }),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    const trigger = canvas.getByRole('button', { name: 'Kies kleur...' })
+
+    expect(trigger).toHaveTextContent('Koppen')
+
+    await userEvent.click(trigger)
+
+    // `Tekst` has the same hex as `Koppen`; only the stored role is selected.
+    expect(await canvas.findByRole('button', { name: 'Koppen' })).toHaveAttribute(
+      'aria-pressed',
+      'true',
+    )
+    expect(canvas.getByRole('button', { name: 'Tekst' })).toHaveAttribute('aria-pressed', 'false')
+
+    // The picker is handed the role's hex with an alpha pair; the field must not show it.
+    expect(canvasElement.querySelector('[placeholder="#000000"]')).toHaveValue('#1f2937')
+  },
+}
+
+/** The theme section sits above the suggestions; a suggestion still writes a literal colour. */
+export const ThemeRolesWithSuggestions: Story = {
+  args: {
+    themeRoles: THEME_ROLES,
+    suggestions: ['#0F766E', '#F0F4F8', '#1F2937'],
+  },
+  render: (args) => ({
+    components: { EditorColor },
+    setup() {
+      const color = ref<EditorColorValue>('bg-theme-main')
+      return { args, color }
+    },
+    template: `
+      <div>
+        <EditorColor v-bind="args" v-model="color" />
+        <p class="small-normal text-gray-700">{{ color }}</p>
+      </div>
+    `,
+  }),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+
+    await userEvent.click(canvas.getByRole('button', { name: 'Kies kleur...' }))
+
+    const title = await canvas.findByText('Huisstijl')
+    const suggestionsTitle = canvas.getByText('Gebruikte kleuren')
+
+    expect(
+      title.compareDocumentPosition(suggestionsTitle) & Node.DOCUMENT_POSITION_FOLLOWING,
+    ).toBeTruthy()
+
+    await userEvent.click(canvas.getByRole('button', { name: 'Kies kleur #0f766e' }))
+
+    await waitFor(() => {
+      expect(canvas.getByText('bg-[#0f766e]')).toBeInTheDocument()
+      expect(canvas.getByRole('button', { name: 'Hoofdkleur' })).toHaveAttribute(
+        'aria-pressed',
+        'false',
+      )
+    })
+  },
+}
+
+/**
+ * With `showAlpha` the picker offers an opacity slider. Below full opacity the
+ * class carries an 8-digit hex; a theme role has no opacity, so picking one
+ * hides the slider.
+ */
+export const WithAlpha: Story = {
+  args: { showAlpha: true, themeRoles: THEME_ROLES },
+  render: (args) => ({
+    components: { EditorColor },
+    setup() {
+      const color = ref<EditorColorValue>('bg-[#1777EA80]')
+      return { args, color }
+    },
+    template: `
+      <div>
+        <EditorColor v-bind="args" v-model="color" />
+        <p class="small-normal text-gray-700">{{ color }}</p>
+      </div>
+    `,
+  }),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+
+    await userEvent.click(canvas.getByRole('button', { name: 'Kies kleur...' }))
+
+    // The slider is named by its visible label and reads the opacity out as a percentage.
+    const alpha = await canvas.findByRole('slider', { name: 'Dekking' })
+    expect(alpha).toHaveAttribute('aria-valuetext', '50%')
+
+    alpha.focus()
+    await userEvent.keyboard('{ArrowRight}')
+
+    // 51% of 255 rounds to 0x82; the picker writes hex in lower case.
+    await waitFor(() => expect(canvas.getByText('bg-[#1777ea82]')).toBeInTheDocument())
+
+    await userEvent.click(canvas.getByRole('button', { name: 'Hoofdkleur' }))
+
+    await waitFor(() => {
+      expect(canvas.getByText('bg-theme-main')).toBeInTheDocument()
+      expect(canvas.queryByRole('slider', { name: 'Dekking' })).not.toBeInTheDocument()
+    })
+  },
+}
+
+/**
+ * The flow from the editor: a colour picked, made translucent with the slider,
+ * then replaced by a theme role in one click.
+ */
+export const WithAlphaRolePicked: Story = {
+  args: { showAlpha: true, switchable: true, themeRoles: THEME_ROLES, suggestions: ['#00aa00'] },
+  render: (args) => ({
+    components: { EditorColor },
+    setup() {
+      const color = ref<EditorColorValue>('bg-[#1777EA]')
+      const enabled = ref(true)
+      return { args, color, enabled }
+    },
+    template: `
+      <div>
+        <EditorColor v-bind="args" v-model="color" v-model:enabled="enabled" />
+        <p class="small-normal text-gray-700">{{ color }}</p>
+      </div>
+    `,
+  }),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+
+    await userEvent.click(canvas.getByRole('button', { name: 'Kies kleur...' }))
+
+    await userEvent.click(await canvas.findByRole('button', { name: 'Kies kleur #00aa00' }))
+    await waitFor(() => expect(canvas.getByText('bg-[#00aa00]')).toBeInTheDocument())
+
+    const alpha = canvas.getByRole('slider', { name: 'Dekking' })
+    alpha.focus()
+    for (let step = 0; step < 10; step++) await userEvent.keyboard('{ArrowLeft}')
+    await waitFor(() => expect(canvas.getByText('bg-[#00aa00e6]')).toBeInTheDocument())
+
+    await userEvent.click(canvas.getByRole('button', { name: 'Hoofdkleur' }))
+
+    await waitFor(() => {
+      expect(canvas.getByText('bg-theme-main')).toBeInTheDocument()
+      expect(canvas.queryByRole('slider', { name: 'Dekking' })).not.toBeInTheDocument()
+    })
+  },
+}
+
+export const Switchable: Story = {
+  args: { switchable: true },
+  render: (args) => ({
+    components: { EditorColor },
+    setup() {
+      const color = ref<EditorColorValue>('bg-[#1777EA]')
+      const enabled = ref(true)
+      return { args, color, enabled }
+    },
+    template: `
+      <div>
+        <EditorColor v-bind="args" v-model="color" v-model:enabled="enabled" />
+        <p class="small-normal text-gray-700">{{ color }}</p>
+        <p class="small-normal text-gray-700">{{ enabled }}</p>
+      </div>
+    `,
+  }),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    const content = contentWrapper(canvasElement)
+
+    expect(content).not.toHaveAttribute('inert')
+
+    await userEvent.click(canvas.getByRole('switch'))
+
+    await waitFor(() => {
+      expect(content).toHaveAttribute('inert')
+      expect(canvas.getByText('false')).toBeInTheDocument()
+    })
+
+    // The colour survives the collapse: only the switch state changed.
+    expect(canvas.getByText('bg-[#1777EA]')).toBeInTheDocument()
+  },
+}
+
+export const SwitchableOff: Story = {
+  args: { switchable: true },
+  render: (args) => ({
+    components: { EditorColor },
+    setup() {
+      const color = ref<EditorColorValue>('bg-[#1777EA]')
+      const enabled = ref(false)
+      return { args, color, enabled }
+    },
+    template: `
+      <div>
+        <EditorColor v-bind="args" v-model="color" v-model:enabled="enabled" />
+        <p class="small-normal text-gray-700">{{ color }}</p>
+      </div>
+    `,
+  }),
+}
+
+export const TextProperty: Story = {
+  args: { property: 'text', label: 'Tekstkleur' },
+  render: (args) => ({
+    components: { EditorColor },
+    setup() {
+      const color = ref<EditorColorValue>('text-[#1777EA]')
+      return { args, color }
+    },
+    template: `
+      <div>
+        <EditorColor v-bind="args" v-model="color" />
+        <p class="small-normal text-gray-700">{{ color }}</p>
+      </div>
+    `,
+  }),
+}
+
+/** A stored value the component cannot parse shows the placeholder instead. */
+export const Empty: Story = {
+  render: (args) => ({
+    components: { EditorColor },
+    setup() {
+      const color = ref('bg-red-500' as EditorColorValue)
+      return { args, color }
+    },
+    template: `
+      <div>
+        <EditorColor v-bind="args" v-model="color" />
+        <p class="small-normal text-gray-700">{{ color }}</p>
+      </div>
+    `,
+  }),
+}
+
+/**
+ * The gradient stories render in a 256px column, the width of the editor's
+ * settings column, so the panel's content is the 224px the layout is made for.
+ */
+const gradientRender = (initial: EditorColorValue) => (args: Story['args']) => ({
+  components: { EditorColor },
+  setup() {
+    const color = ref<EditorColorValue>(initial)
+    return { args, color }
+  },
+  template: `
+    <div class="w-64">
+      <EditorColor v-bind="args" v-model="color" />
+      <p class="mt-2 extra-small-normal break-all text-gray-700">{{ color }}</p>
+    </div>
+  `,
+})
+
+/** The panel, found by the stop bar it always contains in the gradient mode. */
+const gradientPanel = (canvasElement: HTMLElement) =>
+  canvasElement
+    .querySelector('[data-gradient-bar]')!
+    .closest<HTMLElement>('div[style*="position: fixed"]')!
+
+/** Opens the picker and checks that the panel fits: no scrolling, nothing sticking out. */
+const openAndMeasure = async (canvasElement: HTMLElement) => {
+  const trigger = within(canvasElement).getAllByRole('button')[0]!
+  await userEvent.click(trigger)
+  await waitFor(() => expect(canvasElement.querySelector('[data-gradient-bar]')).not.toBeNull())
+  const panel = gradientPanel(canvasElement)
+  const surface = panel.querySelector<HTMLElement>('.rounded-xl')!
+  // Layout pixels, not the bounding box: the test canvas may be zoomed. The
+  // spec expects ~560px at a content width of 224px, well within 720px; the
+  // measured height is the guard, so the panel cannot quietly grow.
+  expect(surface.offsetHeight).toBeLessThanOrEqual(PANEL_HEIGHT)
+  expect(surface.scrollHeight).toBeLessThanOrEqual(surface.clientHeight)
+  // The panel is exactly as wide as the trigger: nothing in it is wider.
+  expect(surface.offsetWidth).toBe(trigger.offsetWidth)
+  expect(surface.scrollWidth).toBeLessThanOrEqual(surface.clientWidth)
+  // The preview square takes the full content width: 224px in this column.
+  const square = panel.querySelector<HTMLElement>('[data-gradient-preview]')!
+  expect(square.offsetWidth).toBe(224)
+  expect(square.offsetHeight).toBe(224)
+  // Every handle lies in the square; half a handle may cross its edge.
+  const box = square.getBoundingClientRect()
+  square
+    .querySelectorAll<HTMLElement>('[data-stop-point], [data-gradient-center]')
+    .forEach((handle) => {
+      const r = handle.getBoundingClientRect()
+      const x = r.left + r.width / 2
+      const y = r.top + r.height / 2
+      expect(x).toBeGreaterThanOrEqual(box.left - 0.5)
+      expect(x).toBeLessThanOrEqual(box.right + 0.5)
+      expect(y).toBeGreaterThanOrEqual(box.top - 0.5)
+      expect(y).toBeLessThanOrEqual(box.bottom + 0.5)
+    })
+  // No field in a row overflows or clips its value. A role name longer than
+  // "Hoofdkleur" -- the one the layout is measured with -- may truncate.
+  const fields = panel.querySelectorAll<HTMLInputElement>('[data-gradient-row] input')
+  const measured = [...fields].filter((input) => !input.readOnly || input.value === 'Hoofdkleur')
+  measured.forEach((input) => {
+    expect(input.scrollWidth, input.getAttribute('aria-label') ?? '').toBeLessThanOrEqual(
+      input.clientWidth,
+    )
+  })
+  return panel
+}
+
+/** Measured height of the tallest gradient panel (three stops, a role) in the 224px column. */
+const PANEL_HEIGHT = 544
+
+/**
+ * A linear gradient: the to-point in the preview sets the angle, two stops in
+ * the bar and the list.
+ */
+export const GradientLinear: Story = {
+  // Axe runs on the open panel, after the play function.
+  parameters: { a11y: { test: 'error' } },
+  args: {
+    modes: ['solid', 'gradient'],
+    themeRoles: THEME_ROLES,
+    suggestions: ['#7F56D9', '#432E73'],
+  },
+  render: gradientRender('bg-linear-135 from-[#7f56d9] to-[#432e73cc]'),
+  play: async ({ canvasElement }) => {
+    const panel = await openAndMeasure(canvasElement)
+    const angle = within(panel).getByRole('slider', { name: 'Hoek' })
+    expect(angle).toHaveAttribute('aria-valuetext', '135 graden')
+    expect(within(panel).getAllByRole('group', { name: /^Kleurstop \d van 2$/ })).toHaveLength(2)
+  },
+}
+
+/** A radial gradient with its centre off the middle: the centre point and the stops on one ray. */
+export const GradientRadial: Story = {
+  // Axe runs on the open panel, after the play function.
+  parameters: { a11y: { test: 'error' } },
+  args: { modes: ['solid', 'gradient'], themeRoles: THEME_ROLES },
+  render: gradientRender('bg-radial-[at_30%_70%] from-theme-accent to-[#ffffff00]'),
+  play: async ({ canvasElement }) => {
+    const panel = await openAndMeasure(canvasElement)
+    expect(within(panel).getByRole('slider', { name: 'Middelpunt' })).toHaveAttribute(
+      'aria-valuetext',
+      '30 % van links, 70 % van boven',
+    )
+    // The first stop is a theme role: in its popover the opacity is locked, with the hint.
+    const [swatch] = within(panel).getAllByRole('button', { name: 'Kleur kiezen' })
+    await userEvent.click(swatch!)
+    const dialog = await within(panel).findByRole('dialog', { name: 'Kleur van kleurstop 1' })
+    const opacity = within(dialog).getByRole('slider', { name: 'Dekking' })
+    expect(opacity).toHaveAttribute('aria-disabled', 'true')
+    expect(opacity).toHaveAccessibleDescription('Huisstijlkleuren zijn altijd dekkend.')
+  },
+}
+
+/**
+ * Three stops, the most the gradient takes: adding is unavailable, with the
+ * reason, and removing is possible. The middle stop is a theme role and the
+ * last one translucent, so its hex has eight digits. This is the tallest panel,
+ * and it carries the height check. The play also opens a stop's colour popover
+ * and closes it with Escape.
+ */
+export const GradientThreeStops: Story = {
+  // Axe runs on the open panel, after the play function.
+  parameters: { a11y: { test: 'error' } },
+  args: {
+    modes: ['solid', 'gradient'],
+    themeRoles: THEME_ROLES,
+    suggestions: ['#7F56D9', '#432E73', '#F0F4F8', '#1F2937', '#F59E0B', '#1777EA'],
+  },
+  render: gradientRender('bg-linear-90 from-[#7f56d9] via-theme-main via-40% to-[#432e73cc]'),
+  play: async ({ canvasElement }) => {
+    const panel = await openAndMeasure(canvasElement)
+    const add = within(panel).getByRole('button', { name: 'Kleurstop toevoegen' })
+    expect(add).toHaveAttribute('aria-disabled', 'true')
+    expect(add).toHaveAccessibleDescription('Een verloop heeft maximaal 3 kleurstops.')
+    within(panel)
+      .getAllByRole('button', { name: 'Verwijderen' })
+      .forEach((remove) => expect(remove).toBeEnabled())
+    expect(within(panel).getAllByRole('slider', { name: /^Kleurstop \d van 3$/ })).toHaveLength(3)
+
+    const [swatch] = within(panel).getAllByRole('button', { name: 'Kleur kiezen' })
+    await userEvent.click(swatch!)
+    const dialog = await within(panel).findByRole('dialog', { name: 'Kleur van kleurstop 1' })
+    expect(within(dialog).getByRole('textbox', { name: 'Hex' })).toBeInTheDocument()
+    await userEvent.keyboard('{Escape}')
+    await waitFor(() => expect(within(panel).queryByRole('dialog')).toBeNull())
+    expect(swatch).toHaveFocus()
+    expect(canvasElement.querySelector('[data-gradient-bar]')).not.toBeNull()
+  },
+}
+
+/**
+ * Only the gradient, without the Effen | Verloop switch. The stored value is a
+ * solid colour, so the panel opens on its fade -- the colour to the same hex
+ * at `00` -- and nothing is written until the first change.
+ */
+export const GradientOnly: Story = {
+  // Axe runs on the open panel, after the play function.
+  parameters: { a11y: { test: 'error' } },
+  args: { modes: ['gradient'], themeRoles: THEME_ROLES },
+  render: gradientRender('bg-[#7f56d9]'),
+  play: async ({ canvasElement }) => {
+    const panel = await openAndMeasure(canvasElement)
+    expect(within(panel).queryByRole('button', { name: 'Effen' })).toBeNull()
+    const hexes = within(panel).getAllByRole('textbox', { name: 'Hex' })
+    expect(hexes.map((input) => (input as HTMLInputElement).value)).toEqual([
+      '#7f56d9',
+      '#7f56d900',
+    ])
+    expect(canvasElement).toHaveTextContent('bg-[#7f56d9]')
+    // Until the first change the trigger shows the stored colour, not the placeholder.
+    expect(within(canvasElement).getAllByRole('button')[0]).toHaveTextContent('#7f56d9')
+  },
+}