@nexxtmove/ui 2.5.0 → 2.7.0

package/src/components/organisms/FontPicker/FontPicker.stories.ts

@@ -0,0 +1,476 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import { expect, fn, userEvent, waitFor, within } from 'storybook/test'
+import { ref } from 'vue'
+import FontPicker, { type NexxtFontPickerFont } from './FontPicker.vue'
+
+const WEB_SAFE: NexxtFontPickerFont[] = [
+  'Arial',
+  'Helvetica',
+  'Verdana',
+  'Tahoma',
+  'Trebuchet MS',
+  'Georgia',
+  'Times New Roman',
+  'Palatino',
+  'Courier New',
+].map((family) => ({ family, source: 'web-safe' }))
+
+/** A slice of the Google catalogue, by popularity. Stories load no faces, so rows use the fallback. */
+const GOOGLE: NexxtFontPickerFont[] = [
+  'Roboto',
+  'Open Sans',
+  'Noto Sans JP',
+  'Montserrat',
+  'Inter',
+  'Poppins',
+  'Lato',
+  'Roboto Condensed',
+  'Oswald',
+  'Raleway',
+  'Nunito',
+  'Ubuntu',
+  'Playfair Display',
+  'Rubik',
+  'Merriweather',
+  'Work Sans',
+  'Kanit',
+  'PT Sans',
+  'Lora',
+  'Fira Sans',
+  'Quicksand',
+  'Barlow',
+  'Mulish',
+  'Inconsolata',
+  'IBM Plex Sans',
+  'Titillium Web',
+  'DM Sans',
+  'Heebo',
+  'Libre Baskerville',
+  'Karla',
+  'Josefin Sans',
+  'Dancing Script',
+  'Source Code Pro',
+  'Libre Franklin',
+  'Cabin',
+  'Bebas Neue',
+  'Arimo',
+  'Manrope',
+  'Hind Siliguri',
+  'Space Grotesk',
+].map((family) => ({ family, source: 'google' }))
+
+const FONTS = [...WEB_SAFE, ...GOOGLE]
+
+const LONG_FAMILY = 'Noto Serif Display Extra Condensed Semi Expanded Italic'
+
+export default {
+  title: 'Components/Organisms/FontPicker',
+  component: FontPicker,
+  // Room for the 360px panel under the trigger, also when Docs renders the story inline
+  decorators: [() => ({ template: '<div class="min-h-112 p-2"><story /></div>' })],
+  args: {
+    fonts: FONTS,
+    catalogueStatus: 'ready',
+    loadFont: fn(),
+    onOpen: fn(),
+    onClose: fn(),
+    onRetry: fn(),
+  },
+  argTypes: {
+    catalogueStatus: { control: 'inline-radio', options: ['loading', 'ready', 'error'] },
+  },
+} satisfies Meta<typeof FontPicker>
+
+type Story = StoryObj<typeof FontPicker>
+
+/** The settings panel of the editor is 312px of content; the panel is 320 and sticks out 8px. */
+const EDITOR_WIDTH = 'w-78'
+
+const renderPicker =
+  (initial: string | null, frame = EDITOR_WIDTH) =>
+  (args: Story['args']) => ({
+    components: { FontPicker },
+    setup() {
+      const font = ref<string | null>(initial)
+      return { args, font, frame }
+    },
+    template: `
+      <div class="flex flex-col gap-3">
+        <div :class="frame">
+          <FontPicker v-bind="args" v-model="font" />
+        </div>
+        <p class="extra-small-normal text-gray-700">
+          model: <code data-testid="model">{{ font === null ? 'null' : font }}</code>
+        </p>
+      </div>
+    `,
+  })
+
+const triggerOf = (canvasElement: HTMLElement) =>
+  canvasElement.querySelector<HTMLButtonElement>('button[aria-haspopup="listbox"]')!
+
+const openPanel = async (canvasElement: HTMLElement) => {
+  const canvas = within(canvasElement)
+  await userEvent.click(triggerOf(canvasElement))
+  const input = await canvas.findByRole('combobox')
+  await waitFor(() => expect(input).toHaveFocus())
+  return input
+}
+
+/** The panel scales in for 200ms; layout sizes are not scaled, rects are. */
+const settled = (element: HTMLElement) =>
+  waitFor(() => expect(getComputedStyle(element.closest('.z-50 > div')!).opacity).toBe('1'))
+
+const activeOption = (input: HTMLElement) =>
+  document.getElementById(input.getAttribute('aria-activedescendant') ?? '')
+
+/**
+ * The editor: no visible label, `inherit` on top. `null` on the model is "Huisstijl", so the
+ * trigger reads "Huisstijl · Montserrat" in the house-style font.
+ */
+export const Editor: Story = {
+  args: {
+    ariaLabel: 'Lettertype',
+    inherit: { label: 'Huisstijl', family: 'Georgia' },
+  },
+  render: renderPicker(null),
+  play: async ({ canvasElement, args }) => {
+    const canvas = within(canvasElement)
+    const trigger = triggerOf(canvasElement)
+
+    // the visible value is part of the name
+    await expect(trigger).toHaveAccessibleName('Lettertype, Huisstijl · Georgia')
+    const value = trigger.querySelector<HTMLElement>('[id$="-value"]')!
+    await expect(value.style.fontFamily).toContain('Georgia')
+
+    const input = await openPanel(canvasElement)
+    await expect(args.onOpen).toHaveBeenCalledOnce()
+
+    // Huisstijl first and ungrouped, then the two groups; the current value is highlighted
+    const listbox = canvas.getByRole('listbox')
+    const first = listbox.firstElementChild as HTMLElement
+    await expect(first).toHaveAttribute('role', 'option')
+    await expect(activeOption(input)).toBe(first)
+    await expect(first).toHaveAccessibleDescription(
+      'Huidige keuze. Volgt de huisstijl, ook als die later verandert',
+    )
+    await settled(listbox)
+    await expect(canvas.getByRole('group', { name: 'Standaard' })).toBeVisible()
+    await expect(canvas.getByRole('group', { name: 'Google Fonts' })).toBeInTheDocument()
+
+    // 320px wide against a 312px trigger, and inside the viewport
+    const panel = canvas.getByRole('group', { name: 'Lettertype' })
+    await expect(panel.offsetWidth).toBe(320)
+    await expect(panel.getBoundingClientRect().right).toBeLessThanOrEqual(
+      document.documentElement.clientWidth,
+    )
+
+    // a choice writes the model, closes the panel and puts focus back on the trigger
+    await userEvent.click(canvas.getByRole('option', { name: 'Verdana' }))
+    await waitFor(() => expect(canvas.queryByRole('listbox')).toBeNull())
+    await expect(trigger).toHaveFocus()
+    await expect(canvas.getByTestId('model')).toHaveTextContent('Verdana')
+    await expect(trigger).toHaveAccessibleName('Lettertype, Verdana')
+  },
+}
+
+/** The house style has no font of its own: just "Huisstijl", in the sans font. */
+export const InheritWithoutFont: Story = {
+  args: {
+    ariaLabel: 'Lettertype',
+    inherit: { label: 'Huisstijl' },
+  },
+  render: renderPicker(null),
+  play: async ({ canvasElement }) => {
+    await expect(triggerOf(canvasElement)).toHaveAccessibleName('Lettertype, Huisstijl')
+  },
+}
+
+/**
+ * A form: visible label, placeholder, no inherit option. The panel follows the trigger's width
+ * (at least 320px).
+ */
+export const Form: Story = {
+  args: {
+    label: 'Lettertype voor koppen',
+    placeholder: 'Kies een lettertype',
+  },
+  render: renderPicker(null, 'w-96'),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    const trigger = triggerOf(canvasElement)
+
+    await expect(trigger).toHaveAccessibleName('Lettertype voor koppen Kies een lettertype')
+    await openPanel(canvasElement)
+
+    const panel = canvas.getByRole('group', { name: 'Lettertype voor koppen' })
+    await expect(panel.offsetWidth).toBe(trigger.offsetWidth)
+  },
+}
+
+/** A long name is cut off with an ellipsis; the trigger keeps the width of its container. */
+export const LongName: Story = {
+  args: {
+    ariaLabel: 'Lettertype',
+    inherit: { label: 'Huisstijl', family: LONG_FAMILY },
+  },
+  render: renderPicker(null),
+  play: async ({ canvasElement }) => {
+    const trigger = triggerOf(canvasElement)
+    const frame = trigger.closest('.w-78')!
+    const [label, family] = Array.from(
+      trigger.querySelectorAll<HTMLElement>('[id$="-value"] > span'),
+    )
+
+    await expect(trigger.getBoundingClientRect().width).toBe(frame.getBoundingClientRect().width)
+    // "Huisstijl" stays whole, the family is the part that truncates
+    await expect(label.scrollWidth).toBe(label.clientWidth)
+    await expect(family.scrollWidth).toBeGreaterThan(family.clientWidth)
+  },
+}
+
+/** The current family is no longer in the catalogue; it is still listed, at the top. */
+export const CurrentNotInCatalogue: Story = {
+  args: { ariaLabel: 'Lettertype' },
+  render: renderPicker('Comic Neue'),
+  play: async ({ canvasElement }) => {
+    const input = await openPanel(canvasElement)
+    const first = within(canvasElement).getByRole('listbox').firstElementChild
+
+    await expect(activeOption(input)).toBe(first)
+    await expect(first).toHaveAccessibleName('Comic Neue')
+    await expect(first).toHaveAccessibleDescription('Huidige keuze')
+  },
+}
+
+/**
+ * The catalogue is on its way: the web-safe families can be chosen right away, with skeleton rows
+ * under "Google Fonts". A search without results keeps the skeletons; there is no empty state yet.
+ */
+export const Loading: Story = {
+  args: {
+    ariaLabel: 'Lettertype',
+    fonts: WEB_SAFE,
+    catalogueStatus: 'loading',
+    inherit: { label: 'Huisstijl', family: 'Georgia' },
+  },
+  render: renderPicker(null),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    const input = await openPanel(canvasElement)
+    const listbox = canvas.getByRole('listbox')
+
+    await expect(listbox).toHaveAttribute('aria-busy', 'true')
+    await settled(listbox)
+    await expect(canvas.getByRole('option', { name: 'Arial' })).toBeVisible()
+    await expect(canvas.queryByRole('option', { name: 'Roboto' })).toBeNull()
+    await expect(listbox.querySelectorAll('[aria-hidden="true"] .animate-pulse')).toHaveLength(6)
+
+    // grouped rows and the skeletons start 12px in from the group heading; Huisstijl does not
+    const heading = canvas.getByText('Standaard')
+    const left = (element: Element) => Math.round(element.getBoundingClientRect().left)
+    const textOf = (name: string) =>
+      canvas
+        .getByRole('option', { name: new RegExp(`^${name}`) })
+        .querySelector('[data-font-family] > span')!
+    const step = Math.round(12 * (heading.getBoundingClientRect().width / heading.offsetWidth))
+    await expect(left(textOf('Arial'))).toBe(left(heading) + step)
+    await expect(left(textOf('Huisstijl'))).toBe(left(heading))
+    await expect(left(listbox.querySelector('.animate-pulse')!)).toBe(left(textOf('Arial')))
+
+    await userEvent.type(input, 'roboto')
+    await expect(canvas.queryByText('Geen lettertypes gevonden')).toBeNull()
+    await expect(listbox.querySelectorAll('.animate-pulse')).toHaveLength(6)
+  },
+}
+
+/**
+ * The catalogue failed: only Huisstijl and "Standaard", and a notice under the list. "Opnieuw
+ * proberen" really fetches again here: it goes to loading, and after a moment to ready.
+ */
+export const CatalogueError: Story = {
+  args: {
+    ariaLabel: 'Lettertype',
+    inherit: { label: 'Huisstijl', family: 'Georgia' },
+  },
+  render: (args) => ({
+    components: { FontPicker },
+    setup() {
+      const font = ref<string | null>(null)
+      const status = ref<'loading' | 'ready' | 'error'>('error')
+      const fonts = ref<NexxtFontPickerFont[]>(WEB_SAFE)
+      // `args.onRetry` is bound through v-bind as well, so the spy sees the click on its own
+      const onRetry = () => {
+        status.value = 'loading'
+        setTimeout(() => {
+          fonts.value = FONTS
+          status.value = 'ready'
+        }, 600)
+      }
+      return { args, font, status, fonts, onRetry }
+    },
+    template: `
+      <div class="w-78">
+        <FontPicker v-bind="args" v-model="font" :fonts="fonts" :catalogue-status="status" @retry="onRetry" />
+      </div>
+    `,
+  }),
+  play: async ({ canvasElement, args }) => {
+    const canvas = within(canvasElement)
+    const input = await openPanel(canvasElement)
+
+    await expect(canvas.queryByRole('group', { name: 'Google Fonts' })).toBeNull()
+    const retry = canvas.getByRole('button', { name: 'Opnieuw proberen' })
+    await expect(retry.closest('[role="status"]')).toHaveTextContent(
+      'Google Fonts konden niet worden geladen.',
+    )
+
+    // search field → listbox → retry: three tab stops, the notice last
+    await expect(input).toHaveFocus()
+    await userEvent.tab()
+    await expect(canvas.getByRole('listbox')).toHaveFocus()
+    await userEvent.tab()
+    await expect(retry).toHaveFocus()
+
+    await userEvent.click(retry)
+    await expect(args.onRetry).toHaveBeenCalledOnce()
+    await waitFor(() =>
+      expect(canvas.getByRole('group', { name: 'Google Fonts' })).toBeInTheDocument(),
+    )
+  },
+}
+
+/** Nothing matches: the empty state, with a button that clears the search. */
+export const NoResults: Story = {
+  args: { ariaLabel: 'Lettertype' },
+  render: renderPicker('Arial'),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    const input = await openPanel(canvasElement)
+
+    await userEvent.type(input, 'zzz')
+    await settled(input)
+    await expect(await canvas.findByText('Geen lettertypes gevonden')).toBeVisible()
+    await expect(canvas.getByText('Niets gevonden voor ‘zzz’.')).toBeVisible()
+
+    await userEvent.click(canvas.getByRole('button', { name: 'Zoekopdracht wissen' }))
+    await expect(input).toHaveValue('')
+    await expect(input).toHaveFocus()
+  },
+}
+
+/**
+ * The keyboard from the search field: arrows and PageDown move the highlight, Enter chooses,
+ * Escape first clears and then closes, and Tab out of the panel closes it without moving focus.
+ */
+export const Keyboard: Story = {
+  args: { ariaLabel: 'Lettertype' },
+  render: (args) => ({
+    components: { FontPicker },
+    setup() {
+      const font = ref<string | null>('Arial')
+      return { args, font }
+    },
+    template: `
+      <div class="flex w-78 flex-col gap-3">
+        <FontPicker v-bind="args" v-model="font" />
+        <button type="button" class="self-start small-normal text-gray-900 underline">Volgende veld</button>
+        <code data-testid="model" class="extra-small-normal text-gray-700">{{ font }}</code>
+      </div>
+    `,
+  }),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    const trigger = triggerOf(canvasElement)
+
+    trigger.focus()
+    await userEvent.keyboard('{ArrowDown}')
+    const input = await canvas.findByRole('combobox')
+    await waitFor(() => expect(input).toHaveFocus())
+    await expect(activeOption(input)).toHaveAccessibleName('Arial')
+
+    await userEvent.keyboard('{ArrowDown}{ArrowDown}')
+    await expect(activeOption(input)).toHaveAccessibleName('Verdana')
+    // eight down from Verdana: past the end of "Standaard" into "Google Fonts"
+    await userEvent.keyboard('{PageDown}')
+    await expect(activeOption(input)).toHaveAccessibleName('Open Sans')
+    await userEvent.keyboard('{ArrowUp}')
+    await expect(activeOption(input)).toHaveAccessibleName('Roboto')
+    await expect(canvas.getByTestId('model')).toHaveTextContent('Arial')
+
+    await userEvent.keyboard('{Enter}')
+    await waitFor(() => expect(canvas.queryByRole('listbox')).toBeNull())
+    await expect(trigger).toHaveFocus()
+    await expect(canvas.getByTestId('model')).toHaveTextContent('Roboto')
+
+    // Escape: clear, then close
+    await userEvent.keyboard('{Enter}')
+    const again = await canvas.findByRole('combobox')
+    await waitFor(() => expect(again).toHaveFocus())
+    await userEvent.type(again, 'ro')
+    await userEvent.keyboard('{Escape}')
+    await expect(again).toHaveValue('')
+    await expect(canvas.getByRole('listbox')).toBeInTheDocument()
+    await userEvent.keyboard('{Escape}')
+    await waitFor(() => expect(canvas.queryByRole('listbox')).toBeNull())
+    await expect(trigger).toHaveFocus()
+
+    // Tab out of the panel: closed, and focus is where Tab put it
+    await userEvent.keyboard('{Enter}')
+    await waitFor(() => expect(canvas.getByRole('combobox')).toHaveFocus())
+    await userEvent.tab()
+    await expect(canvas.getByRole('listbox')).toHaveFocus()
+    await userEvent.tab()
+    const next = canvas.getByRole('button', { name: 'Volgende veld' })
+    await waitFor(() => expect(canvas.queryByRole('listbox')).toBeNull())
+    await expect(next).toHaveFocus()
+  },
+}
+
+/** Dimmed, and it does not open. */
+export const Disabled: Story = {
+  args: { ariaLabel: 'Lettertype', disabled: true },
+  render: renderPicker('Georgia'),
+  play: async ({ canvasElement }) => {
+    const trigger = triggerOf(canvasElement)
+
+    await expect(trigger).toBeDisabled()
+    await userEvent.click(trigger, { pointerEventsCheck: 0 })
+    await expect(within(canvasElement).queryByRole('listbox')).toBeNull()
+  },
+}
+
+/**
+ * The app's flow: the catalogue is fetched on the first open, which takes a moment; after that it
+ * is cached and the panel opens with it in place.
+ */
+export const LazyCatalogue: Story = {
+  args: {
+    ariaLabel: 'Lettertype',
+    inherit: { label: 'Huisstijl', family: 'Georgia' },
+  },
+  render: (args) => ({
+    components: { FontPicker },
+    setup() {
+      const font = ref<string | null>(null)
+      const status = ref<'loading' | 'ready' | 'error'>('loading')
+      const fonts = ref<NexxtFontPickerFont[]>(WEB_SAFE)
+      let fetched = false
+      const onOpen = () => {
+        args.onOpen?.()
+        if (fetched) return
+        fetched = true
+        setTimeout(() => {
+          fonts.value = FONTS
+          status.value = 'ready'
+        }, 1200)
+      }
+      return { args, font, status, fonts, onOpen }
+    },
+    template: `
+      <div class="w-78">
+        <FontPicker v-bind="args" v-model="font" :fonts="fonts" :catalogue-status="status" @open="onOpen" />
+      </div>
+    `,
+  }),
+}