@nexxtmove/ui 2.6.0 → 2.7.0

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

@@ -0,0 +1,374 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import { ref } from 'vue'
+import { expect, userEvent, waitFor, within } from 'storybook/test'
+import EditorPadding from './EditorPadding.vue'
+
+export default {
+  title: 'Components/Editor Components/Molecules/Editor Padding',
+  component: EditorPadding,
+  decorators: [() => ({ template: '<div class="w-100 mx-auto"><story /></div>' })],
+  argTypes: {
+    label: { control: 'text' },
+  },
+} satisfies Meta<typeof EditorPadding>
+
+type Story = StoryObj<typeof EditorPadding>
+
+/** Shows the class string as-is: it is what the editor puts on the element. */
+const render = (args: Story['args'], initial: string) => ({
+  components: { EditorPadding },
+  setup() {
+    const padding = ref(initial)
+    return { args, padding }
+  },
+  template: `
+    <div>
+      <EditorPadding v-bind="args" v-model="padding" />
+      <p data-testid="padding-class" class="small-normal text-gray-700">{{ padding }}</p>
+    </div>
+  `,
+})
+
+/** The class string the story is bound to, as the readout under the block shows it. */
+const classString = (canvasElement: HTMLElement) =>
+  canvasElement.querySelector('[data-testid="padding-class"]')!.textContent
+
+/** The fields, in reading order; the two of the collapsed row are in the DOM as well. */
+const fields = (canvas: ReturnType<typeof within>) =>
+  canvas.getAllByRole('textbox') as HTMLInputElement[]
+
+/** The fields show px while the model stays a Tailwind class: `p-6` reads as 24. */
+export const Default: Story = {
+  render: (args) => render(args, 'p-6'),
+}
+
+/** Padding that is not set yet: every field falls back to its `0` placeholder. */
+export const Empty: Story = {
+  render: (args) => render(args, 'p-0'),
+}
+
+/**
+ * The tooltip is portalled to the body, so it is looked up outside the canvas,
+ * and on reka-ui's own wrapper rather than by role or text: `role="tooltip"`
+ * sits on a visually hidden copy that is also `aria-hidden` (so `*ByRole`
+ * skips it) while the text itself is in the DOM twice (so `*ByText` finds two).
+ * Hover and keyboard focus both have to open it.
+ */
+const expectTooltip = async (text: string, canvas: ReturnType<typeof within>) => {
+  const button = canvas.getByRole('button', { name: text })
+
+  const tooltip = () => document.querySelector('[data-reka-popper-content-wrapper]')
+
+  expect(button).toHaveAttribute('data-state', 'closed')
+
+  // Keyboard first, from a state the pointer has not touched yet.
+  button.focus()
+  await waitFor(() => expect(tooltip()).toHaveTextContent(text))
+  expect(button).toHaveAttribute('aria-describedby')
+
+  button.blur()
+  await waitFor(() => expect(button).toHaveAttribute('data-state', 'closed'))
+
+  await userEvent.hover(button)
+  await waitFor(() => expect(tooltip()).toHaveTextContent(text))
+}
+
+/**
+ * Opening the four fields slides the second row out from behind the first, so
+ * the block grows instead of jumping. Both rows keep the same column widths.
+ */
+export const TogglesOpen: Story = {
+  render: (args) => render(args, 'p-4'),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    const row = canvasElement.querySelector('[data-testid="editor-padding-secondary-row"]')!
+    const toggleLine = canvas
+      .getByRole('button', { name: 'Padding per zijde' })
+      .querySelector('line')!
+    const lengthBefore = toggleLine.getAttribute('x1')
+
+    expect(row.className).toContain('grid-rows-[0fr]')
+    expect(row.getAttribute('inert')).not.toBeNull()
+
+    await expectTooltip('Padding per zijde', canvas)
+
+    await userEvent.click(canvas.getByRole('button', { name: 'Padding per zijde' }))
+
+    await waitFor(() => expect(row.className).toContain('grid-rows-[1fr]'))
+    expect(row.getAttribute('inert')).toBeNull()
+
+    // The second row carries its own grid, so its columns are only guaranteed
+    // to line up with the first row as long as both use the same template.
+    const [first, , third] = fields(canvas)
+    expect(third.getBoundingClientRect().width).toBe(first.getBoundingClientRect().width)
+
+    // The second row is clipped to make the 0fr collapse work, so its fields
+    // need room left over for a focus ring inside that clipping box.
+    const clip = row.firstElementChild!.getBoundingClientRect()
+    const field = third.parentElement!.getBoundingClientRect()
+    expect(clip.left).toBeLessThanOrEqual(field.left - 2)
+    expect(clip.right).toBeGreaterThanOrEqual(field.right + 2)
+
+    // The toggle is four-sided in both states, so its lines must not change
+    // length when it flips -- only the field icons swap which lines are lit,
+    // and they fade rather than cut.
+    expect(toggleLine.getAttribute('x1')).toBe(lengthBefore)
+
+    const fieldLine = first.previousElementSibling!.querySelector('line')!
+    expect(getComputedStyle(fieldLine).transitionProperty).toContain('opacity')
+    await waitFor(() => expect(getComputedStyle(fieldLine).opacity).toBe('1'))
+  },
+}
+
+/**
+ * A value that two fields cannot express, so the four fields open on mount.
+ * `pt-4 pr-2 pb-4 pl-2` would *not* open them: that is `px-2 py-4`, which the
+ * collapsed pair says in full. Reads 16 / 8 / 24 / 8 px.
+ */
+export const Expanded: Story = {
+  render: (args) => render(args, 'pt-4 pr-2 pb-6 pl-2'),
+}
+
+/**
+ * The widest the fields ever get: three digits and the unit. The story renders
+ * at the same width as every other one; the narrow case is measured in the play,
+ * because a clipped number is silent -- the value scrolls inside its own box and
+ * nothing looks broken.
+ */
+export const MaxValue: Story = {
+  render: (args) => render(args, 'p-96'),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    const [horizontal, vertical] = fields(canvas)
+
+    expect(horizontal.value).toBe('384')
+
+    // Poppins is what the numbers are measured in, and a fallback font is a
+    // different width: without this the margin below is measured against
+    // whatever happened to be loaded.
+    await document.fonts.ready
+
+    // The decorator is a fixed `w-100`, so narrowing the canvas would change
+    // nothing -- the wrapper itself has to shrink. Inline, and put back
+    // afterwards, so the story looks like all the others in Storybook.
+    const wrapper = canvasElement.firstElementChild as HTMLElement
+    const width = wrapper.style.width
+
+    try {
+      // A real editor sidebar column, narrower than the story renders at.
+      wrapper.style.width = '256px'
+
+      const field = horizontal.parentElement!.getBoundingClientRect()
+      const unit = horizontal.nextElementSibling!.getBoundingClientRect()
+
+      // Nothing is clipped. `scrollWidth` bottoms out at the padding box, so it
+      // can only prove the absence of overflow, never how much room is left.
+      expect(horizontal.scrollWidth).toBeLessThanOrEqual(horizontal.clientWidth)
+
+      // Room to spare, measured against the text itself: at 0 the next font or
+      // the next digit clips the value with no other symptom. The ruler carries
+      // the same utilities and sits in the same font context as the input.
+      const ruler = document.createElement('span')
+      ruler.className = 'small-normal tabular-nums'
+      ruler.style.cssText = 'position:absolute;visibility:hidden;white-space:pre'
+      ruler.textContent = horizontal.value
+      horizontal.parentElement!.append(ruler)
+
+      const text = ruler.getBoundingClientRect().width
+      ruler.remove()
+
+      // Measured at 6px with Poppins loaded; 4 is the floor worth defending.
+      expect(horizontal.clientWidth - text).toBeGreaterThanOrEqual(4)
+
+      // The unit sits behind the number and inside the field, never clipped by
+      // the rounded box or overlapping the value.
+      expect(unit.left).toBeGreaterThanOrEqual(horizontal.getBoundingClientRect().right - 1)
+      expect(unit.right).toBeLessThanOrEqual(field.right)
+
+      // Both fields share the 1fr columns, so neither grows with its content.
+      expect(vertical.parentElement!.getBoundingClientRect().width).toBe(field.width)
+    } finally {
+      wrapper.style.width = width
+    }
+  },
+}
+
+/**
+ * Closing the four fields is a decision, not just a view change: the two fields
+ * that stay on screen are the ones the user can see, so the hidden sides follow
+ * them and the value is rewritten at once. Opening is the harmless direction.
+ */
+export const CollapsesToVisibleValues: Story = {
+  render: (args) => render(args, 'pt-4 pr-2 pb-6 pl-2'),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+
+    expect(classString(canvasElement)).toBe('pt-4 pr-2 pb-6 pl-2')
+    expect(fields(canvas).map((field) => field.value)).toEqual(['16', '8', '24', '8'])
+
+    await userEvent.click(canvas.getByRole('button', { name: 'Padding per zijde' }))
+
+    // Onder followed Boven and Links followed Rechts, so the 24 is gone.
+    await waitFor(() => expect(classString(canvasElement)).toBe('px-2 py-4'))
+    const [horizontal, vertical] = fields(canvas)
+    expect(horizontal.value).toBe('8')
+    expect(vertical.value).toBe('16')
+
+    // And opening again only shows what is already there.
+    await userEvent.click(canvas.getByRole('button', { name: 'Padding per zijde' }))
+    await waitFor(() => expect(fields(canvas)[2].value).toBe('16'))
+    expect(classString(canvasElement)).toBe('px-2 py-4')
+  },
+}
+
+/**
+ * Typing is left alone until it is confirmed: the value only snaps to a step on
+ * blur or Enter, so a "3" on the way to "30" is not snapped to 4 under the
+ * caret. The arrow keys skip that wait -- they step the list itself.
+ */
+export const SnapsOnCommit: Story = {
+  render: (args) => render(args, 'p-4'),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    const [horizontal] = fields(canvas)
+
+    // Focus selects the value, so the first digit replaces it instead of
+    // landing next to it.
+    horizontal.focus()
+    expect(horizontal.selectionStart).toBe(0)
+    expect(horizontal.selectionEnd).toBe(horizontal.value.length)
+
+    await userEvent.clear(horizontal)
+    await userEvent.type(horizontal, '30')
+
+    // Mid-edit: the field shows what was typed and the model is untouched.
+    expect(horizontal.value).toBe('30')
+    expect(classString(canvasElement)).toBe('p-4')
+
+    // 30 sits between 28 and 32, and the tie-free nearer of the two wins.
+    await userEvent.tab()
+    await waitFor(() => expect(horizontal.value).toBe('28'))
+    expect(classString(canvasElement)).toBe('px-7 py-4')
+
+    // A tie goes down: 26 is as far from 24 as it is from 28.
+    await userEvent.clear(horizontal)
+    await userEvent.type(horizontal, '26')
+    await userEvent.tab()
+    await waitFor(() => expect(horizontal.value).toBe('24'))
+    expect(classString(canvasElement)).toBe('px-6 py-4')
+
+    // Arrows write straight away, no blur needed.
+    horizontal.focus()
+    await userEvent.keyboard('{ArrowUp}')
+    await waitFor(() => expect(horizontal.value).toBe('28'))
+    expect(classString(canvasElement)).toBe('px-7 py-4')
+
+    // Escape is an undo of the typing, not of the value.
+    await userEvent.clear(horizontal)
+    await userEvent.type(horizontal, '9')
+    await userEvent.keyboard('{Escape}')
+    await waitFor(() => expect(horizontal.value).toBe('28'))
+    expect(classString(canvasElement)).toBe('px-7 py-4')
+  },
+}
+
+/**
+ * Top and bottom only, for an element where horizontal padding has no sensible
+ * effect. Collapsed it is one field writing `py-N`; the toggle shows Boven and
+ * Onder in the same row, written as `pt-N pb-N`. The incoming `px-6` is not
+ * shown and drops out on the first write.
+ */
+export const Vertical: Story = {
+  args: { sides: 'vertical', label: 'Witruimte' },
+  render: (args) => render(args, 'px-6 py-4'),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+
+    expect(fields(canvas)).toHaveLength(1)
+    const [field] = fields(canvas)
+    expect(field).toHaveAccessibleName('Verticaal (px)')
+    expect(field.value).toBe('16')
+
+    // The single field spans both field columns, up to the toggle.
+    const toggle = canvas.getByRole('button', { name: 'Padding per zijde' })
+    const box = field.parentElement!.getBoundingClientRect()
+    expect(box.right).toBeLessThan(toggle.getBoundingClientRect().left)
+    expect(box.width).toBeGreaterThan(toggle.getBoundingClientRect().width * 2)
+
+    field.focus()
+    await userEvent.keyboard('{ArrowUp}')
+    await waitFor(() => expect(classString(canvasElement)).toBe('py-5'))
+
+    await userEvent.click(toggle)
+    await waitFor(() => expect(fields(canvas)).toHaveLength(2))
+    const [top, bottom] = fields(canvas)
+    expect(top).toHaveAccessibleName('Boven (px)')
+    expect(bottom).toHaveAccessibleName('Onder (px)')
+
+    // Same row: the two fields share a top edge.
+    expect(bottom.getBoundingClientRect().top).toBe(top.getBoundingClientRect().top)
+
+    bottom.focus()
+    await userEvent.keyboard('{ArrowUp}')
+    await waitFor(() => expect(classString(canvasElement)).toBe('pt-5 pb-6'))
+  },
+}
+
+/**
+ * The mirror image of `vertical`, for a standing divider in a row: left and
+ * right only. Collapsed it is one field writing `px-N`; the toggle shows Links
+ * and Rechts in the same row, written as `pl-N pr-N`. The incoming `py-6` is
+ * not shown and drops out on the first write.
+ */
+export const Horizontal: Story = {
+  args: {
+    sides: 'horizontal',
+    label: 'Witruimte',
+    messages: { horizontal: 'Links en rechts', toggle: 'Links en rechts apart' },
+  },
+  render: (args) => render(args, 'px-4 py-6'),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+
+    expect(fields(canvas)).toHaveLength(1)
+    const [field] = fields(canvas)
+    expect(field).toHaveAccessibleName('Links en rechts (px)')
+    expect(field.value).toBe('16')
+
+    field.focus()
+    await userEvent.keyboard('{ArrowUp}')
+    await waitFor(() => expect(classString(canvasElement)).toBe('px-5'))
+
+    const toggle = canvas.getByRole('button', { name: 'Links en rechts apart' })
+    await userEvent.click(toggle)
+    await waitFor(() => expect(fields(canvas)).toHaveLength(2))
+    const [left, right] = fields(canvas)
+    expect(left).toHaveAccessibleName('Links (px)')
+    expect(right).toHaveAccessibleName('Rechts (px)')
+    expect(right.getBoundingClientRect().top).toBe(left.getBoundingClientRect().top)
+
+    right.focus()
+    await userEvent.keyboard('{ArrowUp}')
+    await waitFor(() => expect(classString(canvasElement)).toBe('pl-5 pr-6'))
+  },
+}
+
+export const CustomMessages: Story = {
+  args: {
+    label: 'Padding',
+    messages: {
+      horizontal: 'Horizontal',
+      vertical: 'Vertical',
+      top: 'Top',
+      right: 'Right',
+      bottom: 'Bottom',
+      left: 'Left',
+      toggle: 'Separate sides',
+      unit: 'px',
+    },
+  },
+  render: (args) => render(args, 'p-4'),
+  // The tooltip says the same thing as the accessible name, so overriding
+  // `toggle` has to move both.
+  play: async ({ canvasElement }) => expectTooltip('Separate sides', within(canvasElement)),
+}