@nexxtmove/ui 2.5.0 → 2.7.0

package/src/components/atoms/EnergyLabel/EnergyLabel.stories.ts

@@ -0,0 +1,189 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import { expect } from 'storybook/test'
+import EnergyLabel, { ENERGY_LABEL_COLORS, type EnergyLabelLetter } from './EnergyLabel.vue'
+
+export default {
+  title: 'Components/Atoms/Energy Label',
+  component: EnergyLabel,
+  argTypes: {
+    label: {
+      control: 'select',
+      options: ['A++++', 'A+++', 'A++', 'A+', 'A', 'B', 'C', 'D', 'E', 'F', 'G'],
+    },
+  },
+} satisfies Meta<typeof EnergyLabel>
+
+type Story = StoryObj<typeof EnergyLabel>
+
+export const AQuadruplePlus: Story = {
+  name: 'A++++',
+  args: { label: 'A++++' },
+}
+
+export const ATriplePlus: Story = {
+  name: 'A+++',
+  args: { label: 'A+++' },
+}
+
+export const ADoublePlus: Story = {
+  name: 'A++',
+  args: { label: 'A++' },
+}
+
+export const ASinglePlus: Story = {
+  name: 'A+',
+  args: { label: 'A+' },
+}
+
+export const A: Story = {
+  args: { label: 'A' },
+}
+
+export const B: Story = {
+  args: { label: 'B' },
+}
+
+export const C: Story = {
+  args: { label: 'C' },
+}
+
+export const D: Story = {
+  args: { label: 'D' },
+}
+
+export const E: Story = {
+  args: { label: 'E' },
+}
+
+export const F: Story = {
+  args: { label: 'F' },
+}
+
+export const G: Story = {
+  args: { label: 'G' },
+}
+
+export const Lowercase: Story = {
+  args: { label: 'a++' },
+}
+
+const LETTERS = Object.keys(ENERGY_LABEL_COLORS) as EnergyLabelLetter[]
+
+const SIZES = [
+  { name: 'Klein', class: 'text-[0.625rem]' },
+  { name: 'Standaard', class: '' },
+  { name: 'Groot', class: 'text-xl' },
+]
+
+// The arrow is a square of 17/24 of the label's height, turned 45 degrees.
+const ARROW_RATIO = 17 / 24
+
+const measureRow = (row: HTMLElement) =>
+  [...row.querySelectorAll<HTMLElement>('[role="img"]')].map((el) => {
+    const box = el.getBoundingClientRect()
+    const after = getComputedStyle(el, '::after')
+    const style = getComputedStyle(el)
+    const side = parseFloat(after.height)
+    return {
+      fontSize: parseFloat(style.fontSize),
+      lineHeight: parseFloat(style.lineHeight),
+      marginRight: parseFloat(style.marginRight),
+      box,
+      text: (el.firstElementChild as HTMLElement).getBoundingClientRect(),
+      side,
+      centerY: box.top + parseFloat(after.top),
+      tip: box.right + (side * Math.SQRT2) / 2,
+    }
+  })
+
+/**
+ * Size comes from classes on the component: a font-size class scales the whole
+ * label, arrow and margin included. The play checks every letter at every size:
+ * the arrow keeps its proportion and centre, covers the full height, stays clear
+ * of the next label, and the text fits inside the label.
+ */
+export const Sizes: Story = {
+  render: () => ({
+    components: { EnergyLabel },
+    setup: () => ({ letters: LETTERS, sizes: SIZES }),
+    template: `
+      <div class="flex flex-col gap-6">
+        <div v-for="size in sizes" :key="size.name" class="flex flex-col gap-2">
+          <span class="small-normal text-gray-700">{{ size.name }}</span>
+          <div :data-size="size.name" class="flex flex-wrap items-center gap-y-2">
+            <EnergyLabel v-for="letter in letters" :key="letter" :label="letter" :class="size.class" />
+          </div>
+        </div>
+        <div data-size="Stretched" class="flex h-12">
+          <EnergyLabel label="B" />
+        </div>
+      </div>`,
+  }),
+  play: async ({ canvasElement }) => {
+    const fontSizes: Record<string, number> = {}
+
+    for (const { name } of SIZES) {
+      const labels = measureRow(canvasElement.querySelector(`[data-size="${name}"]`) as HTMLElement)
+      await expect(labels).toHaveLength(LETTERS.length)
+      fontSizes[name] = labels[0].fontSize
+
+      for (const [index, label] of labels.entries()) {
+        const { box, text, side, centerY, tip } = label
+        // The height follows from line-height plus a third of an em on each side,
+        // and the margin is half of it: the room the arrow tip takes.
+        await expect(box.height).toBeCloseTo(label.lineHeight + (label.fontSize * 2) / 3, 1)
+        await expect(label.marginRight).toBeCloseTo(box.height / 2, 1)
+        await expect(side / box.height).toBeCloseTo(ARROW_RATIO, 2)
+        await expect(side * Math.SQRT2).toBeGreaterThanOrEqual(box.height)
+        await expect(centerY).toBeCloseTo(box.top + box.height / 2, 1)
+        await expect(tip - box.right).toBeCloseTo(box.height / 2, 0)
+
+        const next = labels[index + 1]
+        if (next && next.box.top === box.top) {
+          await expect(tip).toBeLessThanOrEqual(next.box.left + 0.5)
+        }
+
+        await expect(text.left).toBeGreaterThanOrEqual(box.left)
+        await expect(text.right).toBeLessThanOrEqual(box.right)
+        await expect(text.top).toBeGreaterThanOrEqual(box.top)
+        await expect(text.bottom).toBeLessThanOrEqual(box.bottom)
+      }
+    }
+
+    await expect(fontSizes).toEqual({ Klein: 10, Standaard: 12, Groot: 20 })
+
+    const [standard] = measureRow(
+      canvasElement.querySelector('[data-size="Standaard"]') as HTMLElement,
+    )
+    await expect(standard.box.height).toBe(24)
+
+    const [stretched] = measureRow(
+      canvasElement.querySelector('[data-size="Stretched"]') as HTMLElement,
+    )
+    await expect(stretched.box.height).toBe(24)
+  },
+}
+
+/**
+ * Padding, typography and margin classes override the defaults. Raising the
+ * vertical padding needs the same raise on the right margin, so the arrow keeps
+ * its room: `py-2` and `mr-5` give a 40px label with 20px for the arrow.
+ */
+export const CustomStyling: Story = {
+  render: () => ({
+    components: { EnergyLabel },
+    template: `
+      <div class="flex items-center">
+        <EnergyLabel label="A+" class="mr-5 px-4 py-2 body-semibold-serif" />
+        <span data-neighbour class="small-normal text-gray-700">Buur</span>
+      </div>`,
+  }),
+  play: async ({ canvasElement }) => {
+    const [label] = measureRow(canvasElement)
+    const neighbour = (
+      canvasElement.querySelector('[data-neighbour]') as HTMLElement
+    ).getBoundingClientRect()
+    await expect(label.side / label.box.height).toBeCloseTo(ARROW_RATIO, 2)
+    await expect(label.tip).toBeLessThanOrEqual(neighbour.left + 0.5)
+  },
+}

package/src/components/atoms/EnergyLabel/EnergyLabel.test.ts

@@ -0,0 +1,100 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import EnergyLabel from './EnergyLabel.vue'
+import { ENERGY_LABEL_COLORS, type EnergyLabelLetter } from '../../../index'
+
+describe('EnergyLabel', () => {
+  it.each([
+    { label: 'A++++' as const, color: 'rgb(0, 149, 63)' },
+    { label: 'A+++' as const, color: 'rgb(0, 149, 63)' },
+    { label: 'A++' as const, color: 'rgb(0, 149, 63)' },
+    { label: 'A+' as const, color: 'rgb(0, 149, 63)' },
+    { label: 'A' as const, color: 'rgb(0, 149, 63)' },
+    { label: 'B' as const, color: 'rgb(82, 174, 50)' },
+    { label: 'C' as const, color: 'rgb(165, 206, 109)' },
+    { label: 'D' as const, color: 'rgb(255, 204, 0)' },
+    { label: 'E' as const, color: 'rgb(249, 169, 60)' },
+    { label: 'F' as const, color: 'rgb(239, 125, 52)' },
+    { label: 'G' as const, color: 'rgb(230, 51, 41)' },
+  ])('renders "$label" with its swatch colour as background', ({ label, color }) => {
+    const wrapper = mount(EnergyLabel, { props: { label } })
+    expect(wrapper.text()).toBe(label)
+    expect(wrapper.attributes('style')).toContain(`background-color: ${color}`)
+  })
+
+  it('exposes the colour to the arrow via a custom property', () => {
+    const wrapper = mount(EnergyLabel, { props: { label: 'G' } })
+    expect(wrapper.attributes('style')).toContain('--energy-label-color: #E63329')
+  })
+
+  it.each([
+    { label: 'a++++' as const, expected: 'A++++' },
+    { label: 'a+' as const, expected: 'A+' },
+    { label: 'c' as const, expected: 'C' },
+    { label: 'g' as const, expected: 'G' },
+  ])('uppercases lowercase input "$label"', ({ label, expected }) => {
+    const wrapper = mount(EnergyLabel, { props: { label } })
+    expect(wrapper.text()).toBe(expected)
+  })
+
+  it('renders lowercase input with the same colour as its uppercase equivalent', () => {
+    const lower = mount(EnergyLabel, { props: { label: 'd' } })
+    const upper = mount(EnergyLabel, { props: { label: 'D' } })
+    expect(lower.attributes('style')).toBe(upper.attributes('style'))
+  })
+
+  it('renders white text on the label', () => {
+    const wrapper = mount(EnergyLabel, { props: { label: 'A' } })
+    expect(wrapper.classes()).toContain('text-white')
+  })
+
+  it('is announced as an energy label with its grade', () => {
+    const wrapper = mount(EnergyLabel, { props: { label: 'a++' } })
+    expect(wrapper.attributes('role')).toBe('img')
+    expect(wrapper.attributes('aria-label')).toBe('Energielabel A++')
+  })
+
+  it('hides the visible text from screen readers to avoid a double announcement', () => {
+    const wrapper = mount(EnergyLabel, { props: { label: 'A' } })
+    expect(wrapper.find('span > span').attributes('aria-hidden')).toBe('true')
+  })
+
+  it('updates colour and label when the prop changes', async () => {
+    const wrapper = mount(EnergyLabel, { props: { label: 'A' } })
+    await wrapper.setProps({ label: 'G' })
+    expect(wrapper.text()).toBe('G')
+    expect(wrapper.attributes('style')).toContain('rgb(230, 51, 41)')
+  })
+
+  it('exports the colour table from the package entry, one swatch per grade', () => {
+    const letters: EnergyLabelLetter[] = [
+      'A++++',
+      'A+++',
+      'A++',
+      'A+',
+      'A',
+      'B',
+      'C',
+      'D',
+      'E',
+      'F',
+      'G',
+    ]
+    expect(Object.keys(ENERGY_LABEL_COLORS)).toEqual(letters)
+    expect(ENERGY_LABEL_COLORS.G).toBe('#E63329')
+    expect(Object.isFrozen(ENERGY_LABEL_COLORS)).toBe(true)
+  })
+
+  it('paints each grade in the colour the exported table gives it', () => {
+    for (const [label, color] of Object.entries(ENERGY_LABEL_COLORS)) {
+      const wrapper = mount(EnergyLabel, { props: { label: label as EnergyLabelLetter } })
+      expect(wrapper.attributes('style')).toContain(`--energy-label-color: ${color}`)
+    }
+  })
+
+  it('passes a class through to the label, next to its own classes', () => {
+    const wrapper = mount(EnergyLabel, { props: { label: 'B' }, attrs: { class: 'px-4 text-xl' } })
+    expect(wrapper.classes()).toEqual(expect.arrayContaining(['px-4', 'text-xl', 'inline-flex']))
+    expect(wrapper.attributes('role')).toBe('img')
+  })
+})