@nexxtmove/ui 2.6.0 → 2.8.0

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

@@ -0,0 +1,45 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import NexxtCard from './Card.vue'
+
+export default {
+  title: 'Components/Atoms/Card',
+  component: NexxtCard,
+} satisfies Meta<typeof NexxtCard>
+
+type Story = StoryObj<typeof NexxtCard>
+
+export const Default: Story = {
+  args: {},
+  render: (args) => ({
+    components: { NexxtCard },
+    setup: () => ({ args }),
+    template: `<NexxtCard v-bind="args"><div>Default slot content</div></NexxtCard>`,
+  }),
+}
+
+export const WithImage: Story = {
+  args: {
+    image: 'https://placehold.co/333x160',
+  },
+  render: (args) => ({
+    components: { NexxtCard },
+    setup: () => ({ args }),
+    template: `<NexxtCard v-bind="args"><div>Default slot content</div></NexxtCard>`,
+  }),
+}
+
+export const WithCustomImageSlot: Story = {
+  render: () => ({
+    components: { NexxtCard },
+    template: `
+      <NexxtCard>
+        <template #image>
+          <div class="flex h-40 w-full items-center justify-center rounded-tl-lg rounded-tr-lg bg-gray-100">
+            <span class="text-gray-400 text-sm">Custom image slot</span>
+          </div>
+        </template>
+        <div>Default slot content</div>
+      </NexxtCard>
+    `,
+  }),
+}

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

@@ -0,0 +1,46 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import NexxtCard from './Card.vue'
+
+const slotContent = '<div>Slot Content</div>'
+
+describe('NexxtCard', () => {
+  it('renders slot content', () => {
+    const wrapper = mount(NexxtCard, {
+      slots: { default: slotContent },
+    })
+    expect(wrapper.html()).toContain('Slot Content')
+  })
+
+  it('renders image when provided', () => {
+    const wrapper = mount(NexxtCard, {
+      props: { image: 'https://placehold.co/333x160' },
+      slots: { default: slotContent },
+    })
+    const img = wrapper.find('img')
+    expect(img.exists()).toBe(true)
+    expect(img.attributes('src')).toBe('https://placehold.co/333x160')
+  })
+
+  it('does not render image when not provided', () => {
+    const wrapper = mount(NexxtCard, {
+      slots: { default: slotContent },
+    })
+    expect(wrapper.find('img').exists()).toBe(false)
+  })
+
+  it('applies correct classes', () => {
+    const wrapper = mount(NexxtCard, {
+      slots: { default: slotContent },
+    })
+    // `card` is what supplies the background: it applies `bg-card-bg` from the
+    // token set. This used to assert a `bg-color-` class that Tailwind never
+    // generated any CSS for, so the assertion passed on a class that did
+    // nothing.
+    expect(wrapper.classes()).toContain('card')
+    expect(wrapper.classes()).toContain('rounded-t-lg')
+    const content = wrapper.find('.card-content')
+    expect(content.classes()).toContain('border')
+    expect(content.classes()).toContain('rounded-b-lg')
+  })
+})

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

@@ -0,0 +1,35 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import Checkbox from './Checkbox.vue'
+
+export default {
+  title: 'Components/Atoms/Checkbox',
+  component: Checkbox,
+} satisfies Meta<typeof Checkbox>
+
+type Story = StoryObj<typeof Checkbox>
+
+export const Default: Story = {
+  args: {
+    modelValue: false,
+  },
+}
+
+export const Checked: Story = {
+  args: {
+    modelValue: true,
+  },
+}
+
+export const Disabled: Story = {
+  args: {
+    modelValue: false,
+    disabled: true,
+  },
+}
+
+export const DisabledChecked: Story = {
+  args: {
+    modelValue: true,
+    disabled: true,
+  },
+}

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

@@ -0,0 +1,55 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import Checkbox from './Checkbox.vue'
+
+describe('Checkbox', () => {
+  it('renders a checkbox input', () => {
+    const wrapper = mount(Checkbox)
+
+    expect(wrapper.find('input[type="checkbox"]').exists()).toBe(true)
+  })
+
+  it('is unchecked by default', () => {
+    const wrapper = mount(Checkbox)
+
+    expect((wrapper.find('input').element as HTMLInputElement).checked).toBe(false)
+  })
+
+  it('is checked when modelValue is true', () => {
+    const wrapper = mount(Checkbox, { props: { modelValue: true } })
+
+    expect((wrapper.find('input').element as HTMLInputElement).checked).toBe(true)
+  })
+
+  it('emits update:modelValue when toggled', async () => {
+    const wrapper = mount(Checkbox, { props: { modelValue: false } })
+
+    await wrapper.find('input').setValue(true)
+
+    expect(wrapper.emitted('update:modelValue')).toBeTruthy()
+  })
+
+  it('disables the input when disabled prop is true', () => {
+    const wrapper = mount(Checkbox, { props: { disabled: true } })
+
+    expect((wrapper.find('input').element as HTMLInputElement).disabled).toBe(true)
+  })
+
+  it('applies opacity class when disabled', () => {
+    const wrapper = mount(Checkbox, { props: { disabled: true } })
+
+    expect(wrapper.find('label').classes()).toContain('opacity-50')
+  })
+
+  it('forwards attributes to the input', () => {
+    const wrapper = mount(Checkbox, { attrs: { 'aria-label': 'Accept terms' } })
+
+    expect(wrapper.find('input').attributes('aria-label')).toBe('Accept terms')
+  })
+
+  it('renders the check icon', () => {
+    const wrapper = mount(Checkbox)
+
+    expect(wrapper.find('i.fa-check').exists()).toBe(true)
+  })
+})

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

@@ -0,0 +1,274 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import Chip from './Chip.vue'
+
+export default {
+  title: 'Components/Atoms/Chip',
+  component: Chip,
+} satisfies Meta<typeof Chip>
+
+type Story = StoryObj<typeof Chip>
+
+// The full variant set, in the order the design system lists them. Driven from
+// data so the overview story cannot silently fall out of sync with the single
+// stories below it.
+const variants = ['default', 'warning', 'success', 'danger', 'neutral', 'accent', 'yellow']
+
+/**
+ * Every variant, solid and ghost, in one view — this is the story to review when
+ * judging the set as a whole.
+ *
+ * Note the one deliberate exception: solid `yellow` is the only variant that does
+ * not carry white text. White on `yellow-400` measures 1.4:1, which fails every
+ * WCAG threshold, so it uses dark `yellow-950` text instead. The ghost `yellow`
+ * likewise steps its text down to `yellow-700` where the other ghosts sit at 500.
+ */
+export const AllVariants: Story = {
+  render: () => ({
+    components: { Chip },
+    setup: () => ({ variants }),
+    template: `
+      <div style="display: inline-grid; grid-template-columns: auto auto auto; gap: 12px 24px; align-items: center; font-family: system-ui, sans-serif;">
+        <span style="font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: #374151;">Variant</span>
+        <span style="font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: #374151;">Solid</span>
+        <span style="font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: #374151;">Ghost</span>
+
+        <template v-for="variant in variants" :key="variant">
+          <span style="font-size: 13px; color: #111827;">
+            {{ variant }}
+            <span v-if="variant === 'yellow'" style="color: #6b7280;">(dark text)</span>
+          </span>
+          <span><Chip :variant="variant">{{ variant }}</Chip></span>
+          <span><Chip :variant="variant" ghost>{{ variant }}</Chip></span>
+        </template>
+      </div>
+    `,
+  }),
+}
+
+/**
+ * The same set placed on a mid-grey canvas. Solid `yellow` is light enough that it
+ * can read as an unstyled gap on white, so this is where to check that it still
+ * looks like a filled chip rather than a hole in the layout.
+ */
+export const AllVariantsOnGrey: Story = {
+  render: () => ({
+    components: { Chip },
+    setup: () => ({ variants }),
+    template: `
+      <div style="background: #6b7280; padding: 24px; border-radius: 12px; display: flex; flex-direction: column; gap: 16px;">
+        <div style="display: flex; flex-wrap: wrap; gap: 12px;">
+          <Chip v-for="variant in variants" :key="variant" :variant="variant">{{ variant }}</Chip>
+        </div>
+        <div style="display: flex; flex-wrap: wrap; gap: 12px;">
+          <Chip v-for="variant in variants" :key="variant" :variant="variant" ghost>{{ variant }}</Chip>
+        </div>
+      </div>
+    `,
+  }),
+}
+
+/**
+ * Solid `yellow` next to the other solid variants, so the dark-text exception is
+ * seen in context rather than discovered later. Every other solid chip is
+ * white-on-colour; this one is `yellow-950` on `yellow-400`.
+ */
+export const YellowContrast: Story = {
+  render: () => ({
+    components: { Chip },
+    template: `
+      <div style="display: flex; flex-direction: column; gap: 12px; font-family: system-ui, sans-serif;">
+        <div style="display: flex; align-items: center; gap: 12px;">
+          <Chip variant="yellow">Yellow solid</Chip>
+          <span style="font-size: 12px; color: #374151;">yellow-950 on yellow-400 — the only solid chip with dark text</span>
+        </div>
+        <div style="display: flex; align-items: center; gap: 12px;">
+          <Chip variant="warning">Warning solid</Chip>
+          <span style="font-size: 12px; color: #374151;">white on orange-500 — how every other solid chip is built</span>
+        </div>
+        <div style="display: flex; align-items: center; gap: 12px;">
+          <Chip variant="yellow" ghost>Yellow ghost</Chip>
+          <span style="font-size: 12px; color: #374151;">yellow-700 on yellow-50 — steps down where other ghosts use 500</span>
+        </div>
+      </div>
+    `,
+  }),
+}
+
+/** The `icon` prop renders a leading icon before the chip label. */
+export const WithIcon: Story = {
+  args: {
+    icon: 'circle-check',
+    variant: 'success',
+    default: 'Verified',
+  },
+}
+
+/**
+ * The leading icon across the whole variant set, so it can be checked that the
+ * icon inherits each variant's text colour and that nothing overflows the chip's
+ * fixed 20px height.
+ */
+export const IconAllVariants: Story = {
+  render: () => ({
+    components: { Chip },
+    setup: () => ({
+      rows: [
+        { variant: 'default', icon: 'circle-info', label: 'Information' },
+        { variant: 'warning', icon: 'triangle-exclamation', label: 'Warning' },
+        { variant: 'success', icon: 'circle-check', label: 'Approved' },
+        { variant: 'danger', icon: 'circle-xmark', label: 'Rejected' },
+        { variant: 'neutral', icon: 'clock', label: 'Pending' },
+        { variant: 'accent', icon: 'star', label: 'Featured' },
+        { variant: 'yellow', icon: 'bolt', label: 'Draft' },
+      ],
+    }),
+    template: `
+      <div style="display: flex; flex-direction: column; gap: 16px;">
+        <div style="display: flex; flex-wrap: wrap; gap: 12px;">
+          <Chip v-for="row in rows" :key="row.variant" :variant="row.variant" :icon="row.icon">
+            {{ row.label }}
+          </Chip>
+        </div>
+        <div style="display: flex; flex-wrap: wrap; gap: 12px;">
+          <Chip v-for="row in rows" :key="row.variant" :variant="row.variant" :icon="row.icon" ghost>
+            {{ row.label }}
+          </Chip>
+        </div>
+      </div>
+    `,
+  }),
+}
+
+/**
+ * The same chip with and without `icon`, so the horizontal padding change the icon
+ * brings with it is visible side by side.
+ */
+export const IconVersusNoIcon: Story = {
+  render: () => ({
+    components: { Chip },
+    template: `
+      <div style="display: flex; align-items: center; gap: 16px;">
+        <Chip variant="accent">No icon</Chip>
+        <Chip variant="accent" icon="star">With icon</Chip>
+      </div>
+    `,
+  }),
+}
+
+/** A leading icon combined with the trailing `close` slot. */
+export const IconWithCloseSlot: Story = {
+  render: () => ({
+    components: { Chip },
+    template: `
+      <Chip variant="neutral" icon="filter">
+        Amsterdam
+        <template #close>
+          <span aria-hidden="true" style="padding-left: 6px;">&times;</span>
+        </template>
+      </Chip>
+    `,
+  }),
+}
+
+export const Default: Story = {
+  args: {
+    default: 'Default',
+  },
+}
+
+export const Warning: Story = {
+  args: {
+    variant: 'warning',
+    default: 'Warning',
+  },
+}
+
+export const Success: Story = {
+  args: {
+    variant: 'success',
+    default: 'Succes',
+  },
+}
+
+export const Danger: Story = {
+  args: {
+    variant: 'danger',
+    default: 'Danger',
+  },
+}
+
+export const Neutral: Story = {
+  args: {
+    variant: 'neutral',
+    default: 'Neutral',
+  },
+}
+
+export const Accent: Story = {
+  args: {
+    variant: 'accent',
+    default: 'Accent',
+  },
+}
+
+export const Yellow: Story = {
+  args: {
+    variant: 'yellow',
+    default: 'Yellow',
+  },
+}
+
+export const GhostDefault: Story = {
+  args: {
+    ghost: true,
+    default: 'Ghost Default',
+  },
+}
+
+export const GhostWarning: Story = {
+  args: {
+    variant: 'warning',
+    ghost: true,
+    default: 'Ghost Warning',
+  },
+}
+
+export const GhostSuccess: Story = {
+  args: {
+    variant: 'success',
+    ghost: true,
+    default: 'Ghost Success',
+  },
+}
+
+export const GhostDanger: Story = {
+  args: {
+    variant: 'danger',
+    ghost: true,
+    default: 'Ghost Danger',
+  },
+}
+
+export const GhostNeutral: Story = {
+  args: {
+    variant: 'neutral',
+    ghost: true,
+    default: 'Ghost Neutral',
+  },
+}
+
+export const GhostAccent: Story = {
+  args: {
+    variant: 'accent',
+    ghost: true,
+    default: 'Ghost Accent',
+  },
+}
+
+export const GhostYellow: Story = {
+  args: {
+    variant: 'yellow',
+    ghost: true,
+    default: 'Ghost Yellow',
+  },
+}

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

@@ -0,0 +1,230 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import Chip from './Chip.vue'
+
+describe('Chip', () => {
+  it('renders correctly with default slot content', () => {
+    const wrapper = mount(Chip, {
+      slots: {
+        default: 'Test Chip',
+      },
+    })
+    expect(wrapper.text()).toBe('Test Chip')
+  })
+
+  it('renders default text when no slot is provided', () => {
+    const wrapper = mount(Chip)
+    expect(wrapper.text()).toBe('Chip')
+  })
+
+  it('applies the correct background color for default variant', () => {
+    const wrapper = mount(Chip)
+    expect(wrapper.classes()).toContain('bg-cornflower-blue-600')
+  })
+
+  it('applies the correct background color for warning variant', () => {
+    const wrapper = mount(Chip, {
+      props: {
+        variant: 'warning',
+      },
+    })
+    expect(wrapper.classes()).toContain('bg-orange-500')
+  })
+
+  it('applies the correct background color for success variant', () => {
+    const wrapper = mount(Chip, {
+      props: {
+        variant: 'success',
+      },
+    })
+    expect(wrapper.classes()).toContain('bg-green-500')
+  })
+
+  it('applies the correct background color for danger variant', () => {
+    const wrapper = mount(Chip, {
+      props: {
+        variant: 'danger',
+      },
+    })
+    expect(wrapper.classes()).toContain('bg-brick-500')
+  })
+
+  it('applies the correct background color for neutral variant', () => {
+    const wrapper = mount(Chip, {
+      props: {
+        variant: 'neutral',
+      },
+    })
+    expect(wrapper.classes()).toContain('bg-gray-700')
+  })
+
+  it('applies the correct background color for accent variant', () => {
+    const wrapper = mount(Chip, {
+      props: {
+        variant: 'accent',
+      },
+    })
+    expect(wrapper.classes()).toContain('bg-purple-600')
+  })
+
+  it.each([
+    {
+      variant: undefined,
+      bg: 'bg-cornflower-blue-50',
+      border: 'border-cornflower-blue-500',
+      text: 'text-cornflower-blue-500',
+    },
+    {
+      variant: 'warning' as const,
+      bg: 'bg-orange-50',
+      border: 'border-orange-500',
+      text: 'text-orange-500',
+    },
+    {
+      variant: 'success' as const,
+      bg: 'bg-green-50',
+      border: 'border-green-500',
+      text: 'text-green-500',
+    },
+    {
+      variant: 'danger' as const,
+      bg: 'bg-brick-100/20',
+      border: 'border-brick-500',
+      text: 'text-brick-500',
+    },
+    {
+      variant: 'neutral' as const,
+      bg: 'bg-gray-100',
+      border: 'border-gray-600',
+      text: 'text-gray-700',
+    },
+    {
+      variant: 'accent' as const,
+      bg: 'bg-purple-50',
+      border: 'border-purple-500',
+      text: 'text-purple-500',
+    },
+  ])(
+    'ghost=true with variant "$variant" applies light background, border and colored text',
+    ({ variant, bg, border, text }) => {
+      const wrapper = mount(Chip, { props: { ghost: true, ...(variant ? { variant } : {}) } })
+      expect(wrapper.classes()).toContain(bg)
+      expect(wrapper.classes()).toContain('border')
+      expect(wrapper.classes()).toContain(border)
+      expect(wrapper.find('span > span').classes()).toContain(text)
+    },
+  )
+
+  it.each([
+    { variant: undefined, text: 'text-white' },
+    { variant: 'warning' as const, text: 'text-white' },
+    { variant: 'success' as const, text: 'text-white' },
+    { variant: 'danger' as const, text: 'text-white' },
+    { variant: 'neutral' as const, text: 'text-white' },
+    { variant: 'accent' as const, text: 'text-white' },
+  ])('ghost=false with variant "$variant" uses white text and no border', ({ variant, text }) => {
+    const wrapper = mount(Chip, { props: { ...(variant ? { variant } : {}) } })
+    expect(wrapper.classes()).not.toContain('border')
+    expect(wrapper.find('span > span').classes()).toContain(text)
+  })
+})
+
+// Class names are assembled at runtime from fragments. Writing a complete utility
+// class as a literal in a file under src/components/ makes Tailwind's @source scan
+// generate that CSS, which turns a broken component green in Storybook only.
+// See CONTRIBUTING.md.
+const tw = (...parts: string[]) => parts.join('-')
+
+// Matches a colour utility (text-white, text-gray-700, ...) but not text-center.
+const colourClass = /^text-(white|black|[a-z]+(-[a-z]+)*-\d{2,3})(\/\d+)?$/
+
+const label = (wrapper: ReturnType<typeof mount>) => wrapper.find('span > span')
+
+describe('Chip yellow variant', () => {
+  it('solid yellow renders the yellow surface with white text', () => {
+    const wrapper = mount(Chip, { props: { variant: 'yellow' } })
+
+    expect(wrapper.classes()).toContain(tw('bg', 'yellow', '500'))
+    expect(label(wrapper).classes()).toContain(tw('text', 'white'))
+  })
+
+  it('solid yellow renders no border, like every other solid variant', () => {
+    const wrapper = mount(Chip, { props: { variant: 'yellow' } })
+
+    expect(wrapper.classes()).not.toContain('border')
+  })
+
+  it('ghost yellow renders a yellow border and yellow label on a lighter yellow surface', () => {
+    const ghost = mount(Chip, { props: { variant: 'yellow', ghost: true } })
+    const solid = mount(Chip, { props: { variant: 'yellow' } })
+
+    const bg = ghost.classes().find((c) => c.startsWith(tw('bg', 'yellow') + '-'))
+    const border = ghost.classes().find((c) => c.startsWith(tw('border', 'yellow') + '-'))
+    const text = label(ghost)
+      .classes()
+      .find((c) => c.startsWith(tw('text', 'yellow') + '-'))
+
+    expect(bg).toBeDefined()
+    expect(border).toBeDefined()
+    expect(text).toBeDefined()
+    expect(ghost.classes()).toContain('border')
+    // the ghost surface must not be the solid fill
+    expect(bg).not.toBe(solid.classes().find((c) => c.startsWith(tw('bg', 'yellow') + '-')))
+  })
+})
+
+describe('Chip explicit label colour', () => {
+  it.each(['default', 'warning', 'success', 'danger', 'neutral', 'accent', 'yellow'] as const)(
+    'solid variant "%s" sets an explicit label colour',
+    (variant) => {
+      const wrapper = mount(Chip, { props: { variant } })
+
+      expect(
+        label(wrapper)
+          .classes()
+          .filter((c) => colourClass.test(c)),
+      ).toHaveLength(1)
+    },
+  )
+
+  it.each(['default', 'warning', 'success', 'danger', 'neutral', 'accent', 'yellow'] as const)(
+    'ghost variant "%s" sets an explicit label colour',
+    (variant) => {
+      const wrapper = mount(Chip, { props: { variant, ghost: true } })
+
+      expect(
+        label(wrapper)
+          .classes()
+          .filter((c) => colourClass.test(c)),
+      ).toHaveLength(1)
+    },
+  )
+})
+
+describe('Chip icon prop', () => {
+  it('renders no icon when the prop is omitted', () => {
+    const wrapper = mount(Chip, { slots: { default: 'Label' } })
+
+    expect(wrapper.find('i').exists()).toBe(false)
+    expect(wrapper.text()).toBe('Label')
+  })
+
+  it('renders the named icon ahead of the label text', () => {
+    const wrapper = mount(Chip, { props: { icon: 'megaphone' }, slots: { default: 'Label' } })
+
+    expect(wrapper.find('i.fa-megaphone').exists()).toBe(true)
+    const html = wrapper.html()
+    expect(html.indexOf('fa-megaphone')).toBeLessThan(html.indexOf('Label'))
+    expect(wrapper.text()).toContain('Label')
+  })
+
+  it('renders the icon alongside a close slot without dropping either', () => {
+    const wrapper = mount(Chip, {
+      props: { icon: 'circle-check' },
+      slots: { default: 'Label', close: '<button class="x">x</button>' },
+    })
+
+    expect(wrapper.find('i.fa-circle-check').exists()).toBe(true)
+    expect(wrapper.find('button.x').exists()).toBe(true)
+  })
+})