@nexxtmove/ui 2.5.0 → 2.7.0

package/src/components/molecules/Announcement/Announcement.stories.ts

@@ -0,0 +1,224 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import { ref, watch } from 'vue'
+import { NexxtAnnouncement, NexxtButton, NexxtIcon } from '../../../index'
+
+export default {
+  title: 'Components/Molecules/Announcement',
+  component: NexxtAnnouncement,
+  decorators: [() => ({ template: '<div class="bg-gray-100"><story /></div>' })],
+} satisfies Meta<typeof NexxtAnnouncement>
+
+type Story = StoryObj<typeof NexxtAnnouncement>
+
+const makeRender = (slotText: string) => (args: Story['args']) => ({
+  components: { NexxtAnnouncement },
+  setup() {
+    const visible = ref(true)
+    watch(visible, (val) => {
+      if (!val)
+        setTimeout(() => {
+          visible.value = true
+        }, 1500)
+    })
+    return { visible, args }
+  },
+  template: `
+    <NexxtAnnouncement v-if="visible" v-bind="args" @hide="visible = false">
+      ${slotText}
+    </NexxtAnnouncement>
+  `,
+})
+
+export const Default: Story = {
+  args: {
+    color: 'var(--color-cornflower-blue-500)',
+    icon: 'megaphone',
+  },
+  render: makeRender('New features are available! Check the release notes.'),
+}
+
+export const Success: Story = {
+  args: {
+    color: 'var(--color-green-400)',
+    icon: 'circle-check',
+  },
+  render: makeRender('Your changes have been saved successfully.'),
+}
+
+export const Warning: Story = {
+  args: {
+    color: 'var(--color-orange-500)',
+    icon: 'triangle-exclamation',
+  },
+  render: makeRender('Your trial expires in 3 days. Upgrade to keep access.'),
+}
+
+export const Danger: Story = {
+  args: {
+    color: 'var(--color-brick-500)',
+    icon: 'circle-xmark',
+  },
+  render: makeRender('Scheduled maintenance on Sunday 02:00–04:00 UTC. Expect downtime.'),
+}
+
+export const RichContent: Story = {
+  render: () => ({
+    components: { NexxtAnnouncement, NexxtButton, NexxtIcon },
+    template: `
+      <NexxtAnnouncement color="white" text_color="var(--color-gray-900)" icon="triangle-exclamation" :show-hide-button="false" class="border border-gray-200">
+        <div class="flex items-center justify-between">
+          <div>
+            <p class="text-sm font-medium">Access request from <strong>John Doe</strong></p>
+            <p class="text-xs text-gray-500">Do you want to give John Doe access to your account?</p>
+          </div>
+          <div class="flex gap-2">
+            <NexxtButton size="xs" variant="success">Allow</NexxtButton>
+            <NexxtButton size="xs" variant="secondary">Deny</NexxtButton>
+          </div>
+        </div>
+      </NexxtAnnouncement>
+    `,
+  }),
+}
+
+export const CustomIcon: Story = {
+  args: {
+    color: 'var(--color-purple-600)',
+    icon: 'gift',
+  },
+  render: makeRender('You have a special offer waiting for you!'),
+}
+
+/*
+ * Announcement has two colouring paths and they are not interchangeable:
+ *
+ * - `variant` is the semantic one. Five values — info, success, warning, danger,
+ *   neutral — resolved to design tokens inside the component. Use it whenever the
+ *   colour is a decision the design system gets to make.
+ * - `color` / `text_color` take RAW CSS COLOUR VALUES (`#f59e0b`, `rgb(...)`,
+ *   `var(--color-green-400)`), not Tailwind classes. They exist because the API
+ *   hands us colours at runtime that no class can express.
+ *
+ * They are applied differently — variant as classes, color/text_color as inline
+ * style — so an explicitly passed colour WINS over a variant. That is deliberate:
+ * an API-supplied banner keeps rendering its own colours even if a variant is set
+ * alongside it. The stories below are ordered to make that precedence visible.
+ */
+
+/** All five semantic variants. This is the set to review; no raw colours involved. */
+export const SemanticVariants: Story = {
+  render: () => ({
+    components: { NexxtAnnouncement },
+    setup: () => ({
+      rows: [
+        {
+          variant: 'info',
+          icon: 'megaphone',
+          text: 'New features are available! Check the release notes.',
+        },
+        {
+          variant: 'success',
+          icon: 'circle-check',
+          text: 'Your changes have been saved successfully.',
+        },
+        {
+          variant: 'warning',
+          icon: 'triangle-exclamation',
+          text: 'Your trial expires in 3 days. Upgrade to keep access.',
+        },
+        {
+          variant: 'danger',
+          icon: 'circle-xmark',
+          text: 'Scheduled maintenance on Sunday 02:00–04:00 UTC.',
+        },
+        { variant: 'neutral', icon: 'circle-info', text: 'This account is in read-only mode.' },
+      ],
+    }),
+    template: `
+      <div style="display: flex; flex-direction: column; gap: 12px; padding: 16px;">
+        <div v-for="row in rows" :key="row.variant">
+          <p style="margin: 0 0 4px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: #374151;">
+            variant="{{ row.variant }}"
+          </p>
+          <NexxtAnnouncement :variant="row.variant" :icon="row.icon" :show-hide-button="false">
+            {{ row.text }}
+          </NexxtAnnouncement>
+        </div>
+      </div>
+    `,
+  }),
+}
+
+/** A single semantic variant, driven from the args table. */
+export const VariantInfo: Story = {
+  args: { variant: 'info', icon: 'megaphone' },
+  render: makeRender('New features are available! Check the release notes.'),
+}
+
+export const VariantNeutral: Story = {
+  args: { variant: 'neutral', icon: 'circle-info' },
+  render: makeRender('This account is in read-only mode.'),
+}
+
+/**
+ * The raw-colour path, kept so the distinction stays documented. `color` and
+ * `text_color` are CSS colour values, not Tailwind classes — here a literal hex of
+ * the kind the API returns for a customer's own branding. There is no `variant`
+ * that expresses this, which is the whole reason the props exist.
+ */
+export const RawColoursFromApi: Story = {
+  args: {
+    color: '#7c2d12',
+    text_color: '#fed7aa',
+    icon: 'megaphone',
+  },
+  render: makeRender('Brand colours supplied by the API at runtime, not by a variant.'),
+}
+
+/**
+ * Both paths on the same component. `variant="success"` would paint this green;
+ * the explicitly passed raw `color` wins, because variant resolves to a class and
+ * `color` is applied as inline style. An API-supplied colour therefore always
+ * survives a variant sitting next to it.
+ */
+export const RawColourOverridesVariant: Story = {
+  render: () => ({
+    components: { NexxtAnnouncement },
+    template: `
+      <div style="display: flex; flex-direction: column; gap: 12px; padding: 16px;">
+        <div>
+          <p style="margin: 0 0 4px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: #374151;">
+            variant="success" — token colours
+          </p>
+          <NexxtAnnouncement variant="success" icon="circle-check" :show-hide-button="false">
+            Painted by the design system.
+          </NexxtAnnouncement>
+        </div>
+        <div>
+          <p style="margin: 0 0 4px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: #374151;">
+            variant="success" + color="#7c2d12" — the raw colour wins
+          </p>
+          <NexxtAnnouncement
+            variant="success"
+            color="#7c2d12"
+            text_color="#fed7aa"
+            icon="circle-check"
+            :show-hide-button="false"
+          >
+            Painted by the API-supplied colour, despite the variant.
+          </NexxtAnnouncement>
+        </div>
+      </div>
+    `,
+  }),
+}
+
+/**
+ * Neither `variant` nor `color` passed. The legacy inline defaults still apply
+ * (`background: blue`, `color: white`) rather than a semantic variant, so existing
+ * consumers see no change from this addition.
+ */
+export const NoVariantNoColour: Story = {
+  args: { icon: 'megaphone' },
+  render: makeRender('Legacy defaults: raw "blue" background, white text.'),
+}

package/src/components/molecules/Announcement/Announcement.test.ts

@@ -0,0 +1,161 @@
+import { describe, expect, it } from 'vitest'
+import { mount } from '@vue/test-utils'
+import Announcement from './Announcement.vue'
+
+describe('Announcement', () => {
+  it('renders slot content', () => {
+    const wrapper = mount(Announcement, {
+      slots: { default: 'Hello world' },
+    })
+
+    expect(wrapper.text()).toContain('Hello world')
+  })
+
+  it('applies color and text_color as inline styles', () => {
+    const wrapper = mount(Announcement, {
+      props: { color: 'red', text_color: 'black' },
+    })
+
+    const style = wrapper.element.getAttribute('style')
+    expect(style).toContain('background: red')
+    expect(style).toContain('color: black')
+  })
+
+  it('uses blue and white as defaults', () => {
+    const wrapper = mount(Announcement)
+
+    const style = wrapper.element.getAttribute('style')
+    expect(style).toContain('background: blue')
+    expect(style).toContain('color: white')
+  })
+
+  it('emits hide when the close button is clicked', async () => {
+    const wrapper = mount(Announcement)
+
+    await wrapper.find('button').trigger('click')
+
+    expect(wrapper.emitted('hide')).toHaveLength(1)
+  })
+
+  it('shows the close button by default', () => {
+    const wrapper = mount(Announcement)
+
+    expect(wrapper.find('button').exists()).toBe(true)
+  })
+
+  it('hides the close button when showHideButton is false', () => {
+    const wrapper = mount(Announcement, {
+      props: { showHideButton: false },
+    })
+
+    expect(wrapper.find('button').exists()).toBe(false)
+  })
+
+  it('uses a two-column grid when showHideButton is false', () => {
+    const wrapper = mount(Announcement, {
+      props: { showHideButton: false },
+    })
+
+    expect(wrapper.classes()).toContain('grid-cols-[auto_1fr]')
+  })
+
+  it('uses a three-column grid when showHideButton is true', () => {
+    const wrapper = mount(Announcement)
+
+    expect(wrapper.classes()).toContain('grid-cols-[auto_1fr_auto]')
+  })
+
+  it('renders the default megaphone icon', () => {
+    const wrapper = mount(Announcement)
+
+    expect(wrapper.find('i.fa-megaphone').exists()).toBe(true)
+  })
+
+  it('renders a custom icon when the icon prop is set', () => {
+    const wrapper = mount(Announcement, {
+      props: { icon: 'circle-check' },
+    })
+
+    expect(wrapper.find('i.fa-circle-check').exists()).toBe(true)
+  })
+})
+
+describe('Announcement variant', () => {
+  const root = (props: Record<string, unknown>) => mount(Announcement, { props })
+  const inlineStyle = (w: ReturnType<typeof mount>) => w.element.getAttribute('style') ?? ''
+
+  it('exposes the semantic variant on the root element', () => {
+    expect(root({ variant: 'success' }).attributes('data-variant')).toBe('success')
+  })
+
+  it('carries no variant marker when the prop is omitted', () => {
+    expect(root({}).attributes('data-variant')).toBeUndefined()
+  })
+
+  it.each(['info', 'success', 'warning', 'danger', 'neutral'] as const)(
+    'variant "%s" styles the announcement without touching the inline style',
+    (variant) => {
+      const wrapper = root({ variant })
+
+      expect(wrapper.attributes('data-variant')).toBe(variant)
+      expect(inlineStyle(wrapper)).not.toContain('background')
+      expect(inlineStyle(wrapper)).not.toMatch(/(^|;)\s*color:/)
+    },
+  )
+
+  it('renders visibly different classes per variant', () => {
+    const seen = (['info', 'success', 'warning', 'danger', 'neutral'] as const).map((variant) =>
+      root({ variant }).classes().sort().join(' '),
+    )
+    const plain = root({}).classes().sort().join(' ')
+
+    expect(new Set(seen).size).toBe(seen.length)
+    expect(seen).not.toContain(plain)
+  })
+
+  it('lets an explicitly supplied color win over the variant', () => {
+    const wrapper = root({ variant: 'success', color: 'red' })
+
+    expect(inlineStyle(wrapper)).toContain('background: red')
+    expect(wrapper.attributes('data-variant')).toBe('success')
+  })
+
+  it('lets an explicitly supplied text_color win over the variant', () => {
+    const wrapper = root({ variant: 'danger', text_color: 'black' })
+
+    expect(inlineStyle(wrapper)).toContain('color: black')
+    expect(inlineStyle(wrapper)).not.toContain('background')
+  })
+
+  // jsdom serialises hex to rgb(), so the expectation is the CSSOM form of the
+  // value, not the string typed in — the point is that the value reaches CSS at all.
+  it.each([
+    { value: '#ff0000', serialised: 'background: rgb(255, 0, 0)' },
+    { value: 'rgb(1, 2, 3)', serialised: 'background: rgb(1, 2, 3)' },
+    { value: 'var(--brand)', serialised: 'background: var(--brand)' },
+    { value: 'linear-gradient(90deg, red, blue)', serialised: 'linear-gradient' },
+  ])('passes the raw CSS value $value through as the background', ({ value, serialised }) => {
+    const wrapper = root({ color: value })
+
+    expect(inlineStyle(wrapper)).toContain(serialised)
+  })
+
+  it('keeps the legacy inline defaults when no variant is given', () => {
+    const style = inlineStyle(root({}))
+
+    expect(style).toContain('background: blue')
+    expect(style).toContain('color: white')
+  })
+
+  it('keeps rendering slot content, the icon and the hide button under a variant', async () => {
+    const wrapper = mount(Announcement, {
+      props: { variant: 'warning' },
+      slots: { default: 'Heads up' },
+    })
+
+    expect(wrapper.text()).toContain('Heads up')
+    expect(wrapper.find('i.fa-megaphone').exists()).toBe(true)
+    await wrapper.find('button').trigger('click')
+    expect(wrapper.emitted('hide')).toHaveLength(1)
+  })
+})

package/src/components/molecules/ContactInfoCard/ContactInfoCard.stories.ts

@@ -0,0 +1,99 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import ContactInfoCard from './ContactInfoCard.vue'
+
+export default {
+  title: 'Components/Molecules/Contact Info Card',
+  component: ContactInfoCard,
+  decorators: [
+    // The card now paints its own white background, which is invisible on
+    // Storybook's default white canvas — the border alone would be doing all the
+    // work and a regression to a transparent card would look identical. Every
+    // story therefore sits on the tinted page background the app actually uses.
+    () => ({
+      template:
+        '<div style="background: #f3f4f6; padding: 32px; border-radius: 8px;"><story /></div>',
+    }),
+  ],
+} satisfies Meta<typeof ContactInfoCard>
+
+type Story = StoryObj<typeof ContactInfoCard>
+
+export const Default: Story = {
+  render: () => ({
+    components: { ContactInfoCard },
+    template: `
+      <ContactInfoCard>
+        <template #title><span class="heading-3">Contact information</span></template>
+        <template #content>
+          <p>john.doe@example.com</p>
+          <p>+31 6 12345678</p>
+        </template>
+      </ContactInfoCard>
+    `,
+  }),
+}
+
+/**
+ * The card on a tinted page against the same card on white, side by side. This is
+ * the story that shows what `bg-white` buys: on the left the card is a distinct
+ * surface lifted off the page, on the right it is defined only by its border.
+ */
+export const OnTintedAndWhite: Story = {
+  render: () => ({
+    components: { ContactInfoCard },
+    template: `
+      <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start;">
+        <div>
+          <p style="margin: 0 0 8px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: #374151;">On a tinted page</p>
+          <ContactInfoCard>
+            <template #title><span class="heading-3">Contact information</span></template>
+            <template #content>
+              <p>john.doe@example.com</p>
+              <p>+31 6 12345678</p>
+            </template>
+          </ContactInfoCard>
+        </div>
+        <div style="background: #ffffff; padding: 16px; border-radius: 8px;">
+          <p style="margin: 0 0 8px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: #374151;">On a white page</p>
+          <ContactInfoCard>
+            <template #title><span class="heading-3">Contact information</span></template>
+            <template #content>
+              <p>john.doe@example.com</p>
+              <p>+31 6 12345678</p>
+            </template>
+          </ContactInfoCard>
+        </div>
+      </div>
+    `,
+  }),
+}
+
+/**
+ * The card over page content. The white background has to be opaque — anything
+ * showing through would read as a rendering fault rather than a design choice.
+ */
+export const OverPageContent: Story = {
+  render: () => ({
+    components: { ContactInfoCard },
+    template: `
+      <div style="position: relative;">
+        <p style="position: absolute; inset: 0; margin: 0; font-size: 13px; line-height: 22px; color: #6b7280;">
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
+          incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
+          nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+          Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
+          fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.
+        </p>
+        <div style="position: relative; padding-top: 24px; max-width: 420px;">
+          <ContactInfoCard>
+            <template #title><span class="heading-3">Contact information</span></template>
+            <template #content>
+              <p>john.doe@example.com</p>
+              <p>+31 6 12345678</p>
+            </template>
+          </ContactInfoCard>
+        </div>
+      </div>
+    `,
+  }),
+}

package/src/components/molecules/ContactInfoCard/ContactInfoCard.test.ts

@@ -0,0 +1,70 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import ContactInfoCard from './ContactInfoCard.vue'
+
+describe('ContactInfoCard', () => {
+  it('renders the default title fallback when no title slot is provided', () => {
+    const wrapper = mount(ContactInfoCard)
+    expect(wrapper.text()).toContain('Title')
+  })
+
+  it('renders custom title slot content', () => {
+    const wrapper = mount(ContactInfoCard, {
+      slots: {
+        title: 'Contact information',
+      },
+    })
+    expect(wrapper.text()).toContain('Contact information')
+  })
+
+  it('renders content slot content', () => {
+    const wrapper = mount(ContactInfoCard, {
+      slots: {
+        content: '<p>john.doe@example.com</p><p>+31 6 12345678</p>',
+      },
+    })
+    expect(wrapper.text()).toContain('john.doe@example.com')
+    expect(wrapper.text()).toContain('+31 6 12345678')
+  })
+
+  it('renders both slots together', () => {
+    const wrapper = mount(ContactInfoCard, {
+      slots: {
+        title: 'Contact information',
+        content: 'john.doe@example.com',
+      },
+    })
+    expect(wrapper.text()).toContain('Contact information')
+    expect(wrapper.text()).toContain('john.doe@example.com')
+  })
+
+  // Assembled at runtime: a complete utility class written as a literal under
+  // src/components/ is picked up by Tailwind's @source scan and generated, which
+  // makes a missing class look present. See CONTRIBUTING.md.
+  const tw = (...parts: string[]) => parts.join('-')
+
+  it('renders an opaque white surface on the root element by default', () => {
+    const wrapper = mount(ContactInfoCard)
+
+    expect(wrapper.classes()).toContain(tw('bg', 'white'))
+  })
+
+  it('keeps the white surface on the root, not on an inner section', () => {
+    const wrapper = mount(ContactInfoCard, {
+      slots: { title: 'Contact information', content: 'john.doe@example.com' },
+    })
+
+    const bg = tw('bg', 'white')
+    expect(wrapper.classes()).toContain(bg)
+    const inner = wrapper.element.querySelectorAll('div')
+    expect([...inner].some((el) => el.classList.contains(bg))).toBe(false)
+  })
+
+  it('still renders the rounded bordered card shell alongside the surface', () => {
+    const wrapper = mount(ContactInfoCard)
+
+    expect(wrapper.classes()).toContain('border')
+    expect(wrapper.classes()).toContain(tw('border', 'gray', '200'))
+    expect(wrapper.classes()).toContain(tw('rounded', 'xl'))
+  })
+})

package/src/components/molecules/CustomerJourneyTile/CustomerJourneyTile.stories.ts

@@ -0,0 +1,148 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import CustomerJourneyTile from './CustomerJourneyTile.vue'
+
+export default {
+  title: 'Components/Molecules/Customer Journey Tile',
+  component: CustomerJourneyTile,
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['information', 'display'],
+    },
+  },
+} satisfies Meta<typeof CustomerJourneyTile>
+
+type Story = StoryObj<typeof CustomerJourneyTile>
+
+export const Default: Story = {
+  args: {
+    title: 'Latent',
+    amount: 270,
+    percentage: 14,
+    percentageExplanaition: 'vorige maand',
+  },
+}
+
+export const NegativePercentage: Story = {
+  args: {
+    title: 'Latent',
+    amount: 270,
+    percentage: -8,
+    percentageExplanaition: 'vorige maand',
+  },
+}
+
+export const ZeroPercentage: Story = {
+  args: {
+    title: 'Latent',
+    amount: 270,
+    percentage: 0,
+    percentageExplanaition: 'vorige maand',
+  },
+}
+
+export const WithoutPercentage: Story = {
+  args: {
+    title: 'Wonen',
+    amount: 54,
+  },
+}
+
+export const WithoutAmount: Story = {
+  args: {
+    title: 'Actief zoeken',
+    percentage: 5,
+    percentageExplanaition: 'vorige maand',
+  },
+}
+
+export const Orientatie: Story = {
+  args: {
+    title: 'Oriëntatie',
+    amount: 142,
+    percentage: 3,
+    percentageExplanaition: 'vorige maand',
+  },
+}
+
+export const Selectie: Story = {
+  args: {
+    title: 'Selectie',
+    amount: 89,
+    percentage: -2,
+    percentageExplanaition: 'vorige maand',
+  },
+}
+
+export const Transactie: Story = {
+  args: {
+    title: 'Transactie',
+    amount: 31,
+    percentage: 21,
+    percentageExplanaition: 'vorige maand',
+  },
+}
+
+export const WithoutPhase: Story = {
+  args: {
+    amount: 270,
+    percentage: 14,
+    percentageExplanaition: 'vorige maand',
+  },
+}
+
+export const AsButton: Story = {
+  args: {
+    as: 'button',
+    title: 'Latent',
+    amount: 270,
+    percentage: 14,
+    percentageExplanaition: 'vorige maand',
+  },
+}
+
+export const Animated: Story = {
+  args: {
+    title: 'Latent',
+    amount: 270,
+    animated: true,
+    percentage: 14,
+    percentageExplanaition: 'vorige maand',
+  },
+}
+
+export const AnimatedWithDelay: Story = {
+  args: {
+    title: 'Latent',
+    amount: 270,
+    animated: true,
+    delay: 500,
+    percentage: 14,
+    percentageExplanaition: 'vorige maand',
+  },
+}
+
+export const Display: Story = {
+  args: {
+    title: 'Latent',
+    variant: 'display',
+  },
+}
+
+export const DisplaySelected: Story = {
+  args: {
+    title: 'Latent',
+    variant: 'display',
+    selected: true,
+  },
+}
+
+export const InvertedPercentageColor: Story = {
+  args: {
+    title: 'Latent',
+    amount: 270,
+    percentage: 14,
+    percentageExplanaition: 'vorige maand',
+    invertPercentageColor: true,
+  },
+}