@nexxtmove/ui 0.1.28 → 0.1.30

package/dist/nuxt.js

@@ -1,24 +1,27 @@
-import { defineNuxtModule as s, addComponent as c, addTemplate as i } from "@nuxt/kit";
-const a = "components/AnimatedNumber/AnimatedNumber.vue", m = "components/Button/Button.vue", x = "components/Calendar/Calendar.vue", u = "components/Chip/Chip.vue", p = "components/CustomerJourneyTile/CustomerJourneyTile.vue", l = "components/DatePicker/DatePicker.vue", r = "components/Header/Header.vue", d = "components/Icon/Icon.vue", v = "components/InfoBlock/InfoBlock.vue", N = "components/ProgressBar/ProgressBar.vue", T = "components/SocialIcons/SocialIcons.vue", S = "components/SocialMediaCustomTemplate/SocialMediaCustomTemplate.vue", C = "components/SocialMediaTemplate/SocialMediaTemplate.vue", f = "components/SocialMediaType/SocialMediaType.vue", h = "components/StepperHeader/StepperHeader.vue", M = "components/TimelineEvent/TimelineEvent.vue", P = "components/TimelinePhaseblock/TimelinePhaseblock.vue", b = "components/Tooltip/Tooltip.vue", k = {
+import { defineNuxtModule as c, addComponent as s, addTemplate as i } from "@nuxt/kit";
+const a = "components/AnimatedNumber/AnimatedNumber.vue", m = "components/Button/Button.vue", x = "components/Calendar/Calendar.vue", u = "components/Checkbox/Checkbox.vue", p = "components/Chip/Chip.vue", l = "components/CustomerJourneyTile/CustomerJourneyTile.vue", r = "components/DatePicker/DatePicker.vue", d = "components/DropdownButton/DropdownButton.vue", v = "components/Header/Header.vue", N = "components/Icon/Icon.vue", T = "components/InfoBlock/InfoBlock.vue", C = "components/ProgressBar/ProgressBar.vue", S = "components/SocialIcons/SocialIcons.vue", b = "components/SocialMediaCustomTemplate/SocialMediaCustomTemplate.vue", f = "components/SocialMediaTemplate/SocialMediaTemplate.vue", h = "components/SocialMediaType/SocialMediaType.vue", k = "components/StepperHeader/StepperHeader.vue", B = "components/Table/Table.vue", M = "components/TimelineEvent/TimelineEvent.vue", P = "components/TimelinePhaseblock/TimelinePhaseblock.vue", I = "components/Tooltip/Tooltip.vue", y = {
   NexxtAnimatedNumber: a,
   NexxtButton: m,
   NexxtCalendar: x,
-  NexxtChip: u,
-  NexxtCustomerJourneyTile: p,
-  NexxtDatePicker: l,
-  NexxtHeader: r,
-  NexxtIcon: d,
-  NexxtInfoBlock: v,
-  NexxtProgressBar: N,
-  NexxtSocialIcons: T,
-  NexxtSocialMediaCustomTemplate: S,
-  NexxtSocialMediaTemplate: C,
-  NexxtSocialMediaType: f,
-  NexxtStepperHeader: h,
+  NexxtCheckbox: u,
+  NexxtChip: p,
+  NexxtCustomerJourneyTile: l,
+  NexxtDatePicker: r,
+  NexxtDropdownButton: d,
+  NexxtHeader: v,
+  NexxtIcon: N,
+  NexxtInfoBlock: T,
+  NexxtProgressBar: C,
+  NexxtSocialIcons: S,
+  NexxtSocialMediaCustomTemplate: b,
+  NexxtSocialMediaTemplate: f,
+  NexxtSocialMediaType: h,
+  NexxtStepperHeader: k,
+  NexxtTable: B,
   NexxtTimelineEvent: M,
   NexxtTimelinePhaseblock: P,
-  NexxtTooltip: b
-}, I = s({
+  NexxtTooltip: I
+}, H = c({
   meta: {
     name: "@nexxtmove/ui",
     configKey: "nexxtmoveUi",
@@ -30,8 +33,8 @@ const a = "components/AnimatedNumber/AnimatedNumber.vue", m = "components/Button
     addCSS: !0
   },
   setup(e, o) {
-    for (const [t, n] of Object.entries(k))
-      c({
+    for (const [t, n] of Object.entries(y))
+      s({
         name: t,
         export: "default",
         filePath: `@nexxtmove/ui/${n}`
@@ -49,5 +52,5 @@ const a = "components/AnimatedNumber/AnimatedNumber.vue", m = "components/Button
   }
 });
 export {
-  I as default
+  H as default
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@nexxtmove/ui",
   "type": "module",
-  "version": "0.1.28",
+  "version": "0.1.30",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",

package/src/components/Button/Button.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import Icon from '../Icon/Icon.vue'
+import NexxtIcon from '../Icon/Icon.vue'
 
 interface NexxtButtonProps {
   variant?: 'primary' | 'secondary' | 'success' | 'danger' | 'link'
-  icon?: InstanceType<typeof Icon>['name']
+  icon?: InstanceType<typeof NexxtIcon>['name']
   iconRight?: boolean
   disabled?: boolean
   loading?: boolean
@@ -34,7 +34,7 @@ const {
     ]"
     :data-variant="variant"
   >
-    <Icon
+    <NexxtIcon
       v-if="icon"
       :name="icon"
       class="transition-all duration-200"
@@ -60,7 +60,7 @@ const {
       leave-to-class="opacity-0"
     >
       <div v-if="loading" :class="['absolute inset-0 flex items-center justify-center rounded-lg']">
-        <Icon name="spinner-third" type="light" class="fa-spin absolute text-sm" />
+        <NexxtIcon name="spinner-third" type="light" class="fa-spin absolute text-sm" />
       </div>
     </Transition>
   </button>

package/src/components/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/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/Checkbox/Checkbox.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import { ref, watchEffect } from 'vue'
+import Icon from '../Icon/Icon.vue'
+
+interface NexxtCheckboxProps {
+  disabled?: boolean
+  indeterminate?: boolean
+}
+
+defineOptions({
+  name: 'NexxtCheckbox',
+})
+
+const model = defineModel<boolean>()
+const { indeterminate } = defineProps<NexxtCheckboxProps>()
+
+const inputRef = ref<HTMLInputElement>()
+watchEffect(() => {
+  if (inputRef.value) inputRef.value.indeterminate = indeterminate ?? false
+})
+</script>
+
+<template>
+  <label :class="['inline-flex cursor-pointer', disabled ? 'cursor-not-allowed opacity-50' : '']">
+    <input
+      v-bind="$attrs"
+      ref="inputRef"
+      type="checkbox"
+      class="peer sr-only"
+      v-model="model"
+      :disabled="disabled"
+    />
+    <span
+      aria-hidden="true"
+      :class="[
+        'flex h-5 w-5 shrink-0 items-center justify-center rounded border transition-colors duration-200',
+        'peer-focus-visible:ring-primary peer-focus-visible:ring-2 peer-focus-visible:ring-offset-2',
+        model || indeterminate
+          ? 'border-primary text-cornflower-blue-600'
+          : 'border-gray-300 text-transparent',
+      ]"
+    >
+      <Icon :name="indeterminate ? 'minus' : 'check'" type="solid" class="text-xs" />
+    </span>
+  </label>
+</template>

package/src/components/DropdownButton/DropdownButton.stories.ts

@@ -0,0 +1,68 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import DropdowndButton from './DropdownButton.vue'
+
+export default {
+  title: 'Components/Atoms/Dropdown Button',
+  component: DropdowndButton,
+  decorators: [
+    () => ({
+      template:
+        '<div style="min-height: 250px; padding: 16px; display: flex; align-items: center; justify-content: center;"><story /></div>',
+    }),
+  ],
+  parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/design/CdbFJ7qUga6mtjagcPDvYK/Design-System?node-id=862-1453&t=1SBsWbYXUXIJUJuq-4',
+    },
+  },
+} satisfies Meta<typeof DropdowndButton>
+
+type Story = StoryObj<typeof DropdowndButton>
+
+export const Default: Story = {
+  args: {
+    label: 'Actions',
+    action: () => alert('Primary action clicked'),
+    options: [
+      { label: 'Edit', action: () => alert('Edit clicked'), icon: 'pencil' },
+      { label: 'Delete', action: () => alert('Delete clicked'), icon: 'trash-can' },
+    ],
+  },
+}
+
+export const Secondary: Story = {
+  args: {
+    label: 'More info',
+    variant: 'secondary',
+    action: () => alert('Secondary main action'),
+    options: [
+      { label: 'View Profile', action: '/profile', icon: 'user' },
+      { label: 'Settings', action: '/settings', icon: 'gear' },
+    ],
+  },
+}
+
+export const LeftPlacement: Story = {
+  args: {
+    label: 'Menu',
+    placement: 'left',
+    action: () => console.log('Main action'),
+    options: [
+      { label: 'Option 1', action: () => console.log('1') },
+      { label: 'Option 2', action: () => console.log('2') },
+    ],
+  },
+}
+
+export const WithIcon: Story = {
+  args: {
+    label: 'Download',
+    icon: 'download',
+    action: '/download/all',
+    options: [
+      { label: 'As PDF', action: '/download/pdf', icon: 'file-pdf' },
+      { label: 'As CSV', action: '/download/csv', icon: 'file-csv' },
+    ],
+  },
+}

package/src/components/DropdownButton/DropdownButton.test.ts

@@ -0,0 +1,124 @@
+import { describe, it, expect, vi } from 'vitest'
+import { mount } from '@vue/test-utils'
+import type { IconName } from '@awesome.me/kit-37b149f3ef/icons'
+import DropdownButton, { type NexxtDropdownButtonProps } from './DropdownButton.vue'
+
+const stubs = { NexxtIcon: { template: '<span :data-name="name" />', props: ['name'] } }
+
+const defaultProps: NexxtDropdownButtonProps = {
+  label: 'Actions',
+  action: '/main-action',
+  options: [
+    { label: 'Edit', action: '/edit', icon: 'pencil' as IconName },
+    { label: 'Delete', action: '/delete', icon: 'trash-can' as IconName },
+  ],
+}
+
+const mountDropdown = (props = {}) =>
+  mount(DropdownButton, {
+    props: { ...defaultProps, ...props } as NexxtDropdownButtonProps,
+    global: { stubs },
+  })
+
+describe('DropdownButton', () => {
+  describe('rendering', () => {
+    it('renders the main label', () => {
+      const wrapper = mountDropdown()
+      expect(wrapper.text()).toContain('Actions')
+    })
+
+    it('renders the main icon when provided', () => {
+      const wrapper = mountDropdown({ icon: 'download' })
+      expect(wrapper.find('[data-name="download"]').exists()).toBe(true)
+    })
+
+    it('renders the primary variant by default', () => {
+      const wrapper = mountDropdown()
+      expect(wrapper.find('.bg-button-bg-primary-default').exists()).toBe(true)
+    })
+
+    it('renders the secondary variant when specified', () => {
+      const wrapper = mountDropdown({ variant: 'secondary' })
+      expect(wrapper.find('.bg-button-bg-secondary-default').exists()).toBe(true)
+    })
+
+    it('does not show the dropdown menu by default', () => {
+      const wrapper = mountDropdown()
+      expect(wrapper.find('[role="menu"]').exists()).toBe(false)
+    })
+  })
+
+  describe('interactions', () => {
+    it('emits navigate when main button is clicked with a string action', async () => {
+      const wrapper = mountDropdown()
+      const mainButton = wrapper.findAll('button')[0]
+      await mainButton.trigger('click')
+
+      expect(wrapper.emitted('navigate')).toBeTruthy()
+      expect(wrapper.emitted('navigate')?.[0]).toEqual(['/main-action'])
+    })
+
+    it('executes function when main button is clicked with function action', async () => {
+      const action = vi.fn()
+      const wrapper = mountDropdown({ action })
+      const mainButton = wrapper.findAll('button')[0]
+      await mainButton.trigger('click')
+
+      expect(action).toHaveBeenCalled()
+      expect(wrapper.emitted('navigate')).toBeFalsy()
+    })
+
+    it('toggles the dropdown menu when chevron is clicked', async () => {
+      const wrapper = mountDropdown()
+      const toggleButton = wrapper.findAll('button')[1]
+
+      await toggleButton.trigger('click')
+      expect(wrapper.find('[role="menu"]').exists()).toBe(true)
+      expect(toggleButton.attributes('aria-expanded')).toBe('true')
+
+      await toggleButton.trigger('click')
+      expect(wrapper.find('[role="menu"]').exists()).toBe(false)
+      expect(toggleButton.attributes('aria-expanded')).toBe('false')
+    })
+
+    it('closes the dropdown and emits navigate when an option is clicked', async () => {
+      const wrapper = mountDropdown()
+      await wrapper.findAll('button')[1].trigger('click')
+
+      const option = wrapper.find('[role="menuitem"]')
+      await option.trigger('click')
+
+      expect(wrapper.emitted('navigate')).toBeTruthy()
+      expect(wrapper.emitted('navigate')?.[0]).toEqual(['/edit'])
+      expect(wrapper.find('[role="menu"]').exists()).toBe(false)
+    })
+  })
+
+  describe('placement', () => {
+    it('aligns to right by default', () => {
+      const wrapper = mountDropdown()
+      expect(wrapper.find('.items-end').exists()).toBe(true)
+    })
+
+    it('aligns to left when placement is set to left', () => {
+      const wrapper = mountDropdown({ placement: 'left' })
+      expect(wrapper.find('.items-start').exists()).toBe(true)
+    })
+  })
+
+  describe('accessibility', () => {
+    it('has correct ARIA roles', async () => {
+      const wrapper = mountDropdown()
+      await wrapper.findAll('button')[1].trigger('click')
+
+      expect(wrapper.find('[role="menu"]').exists()).toBe(true)
+      expect(wrapper.find('[role="menuitem"]').exists()).toBe(true)
+    })
+
+    it('has aria-haspopup on the toggle button', () => {
+      const wrapper = mountDropdown()
+      const toggleButton = wrapper.findAll('button')[1]
+      expect(toggleButton.attributes('aria-haspopup')).toBe('menu')
+    })
+  })
+})

package/src/components/DropdownButton/DropdownButton.vue

@@ -0,0 +1,159 @@
+<script lang="ts" setup>
+import { ref, onMounted, onUnmounted, computed } from 'vue'
+import NexxtIcon from '../Icon/Icon.vue'
+
+interface NexxtDropdownButton {
+  label: string
+  action: string | (() => void)
+  icon?: InstanceType<typeof NexxtIcon>['name']
+}
+
+export interface NexxtDropdownButtonProps extends NexxtDropdownButton {
+  variant?: 'primary' | 'secondary'
+  options: NexxtDropdownButton[]
+  placement?: 'left' | 'right'
+}
+
+const {
+  variant = 'primary',
+  options,
+  label,
+  action,
+  icon,
+  placement = 'right',
+} = defineProps<NexxtDropdownButtonProps>()
+
+const emit = defineEmits<{
+  navigate: [url: string]
+}>()
+
+const isOpen = ref(false)
+const wrapperRef = ref<HTMLElement | null>(null)
+
+const handleAction = (action: string | (() => void)) => {
+  if (typeof action === 'function') {
+    action()
+  } else {
+    emit('navigate', action)
+  }
+}
+
+const toggleDropdown = () => {
+  isOpen.value = !isOpen.value
+}
+
+const handleOptionClick = (optionAction: string | (() => void)) => {
+  handleAction(optionAction)
+  isOpen.value = false
+}
+
+const handleClickOutside = (event: MouseEvent) => {
+  if (wrapperRef.value && !wrapperRef.value.contains(event.target as Node)) {
+    isOpen.value = false
+  }
+}
+
+onMounted(() => {
+  document.addEventListener('mousedown', handleClickOutside)
+})
+
+onUnmounted(() => {
+  document.removeEventListener('mousedown', handleClickOutside)
+})
+
+const componentClasses = computed(() => {
+  if (variant === 'primary') {
+    return 'bg-button-bg-primary-default text-button-text-primary-default'
+  }
+
+  if (variant === 'secondary') {
+    return 'bg-button-bg-secondary-default text-button-text-secondary-default border-button-border-secondary-default border border-solid'
+  }
+
+  return ''
+})
+
+const buttonClasses = computed(() => {
+  if (variant === 'primary') {
+    return 'bg-button-bg-primary-default hover:bg-button-bg-primary-hover focus-visible:bg-button-bg-primary-focussed focus-visible:outline-button-border-primary-focussed focus-visible:outline focus-visible:outline-solid active:bg-button-bg-primary-selected'
+  }
+
+  if (variant === 'secondary') {
+    return 'bg-button-bg-secondary-default hover:bg-button-bg-secondary-hover focus-visible:bg-button-bg-secondary-focussed focus-visible:outline-button-border-secondary-focussed focus-visible:outline focus-visible:outline-solid active:bg-button-bg-secondary-selected'
+  }
+
+  return ''
+})
+
+const transitionClasses = computed(() => {
+  const origin = placement === 'right' ? 'origin-top-right' : 'origin-top-left'
+
+  return {
+    enterActiveClass: `transition-all duration-200 ease-out ${origin}`,
+    leaveActiveClass: `transition-all duration-150 ease-in ${origin}`,
+    enterFromClass: 'opacity-0 scale-95 -translate-y-3',
+    leaveToClass: 'opacity-0 scale-95 -translate-y-3',
+    enterToClass: 'opacity-100 scale-100 translate-y-0',
+    leaveFromClass: 'opacity-100 scale-100 translate-y-0',
+  }
+})
+</script>
+
+<template>
+  <div
+    ref="wrapperRef"
+    class="relative inline-flex flex-col"
+    :class="placement === 'right' ? 'items-end' : 'items-start'"
+  >
+    <div class="inline-flex items-center overflow-hidden rounded-md" :class="componentClasses">
+      <button
+        class="flex cursor-pointer items-center gap-2 px-4 py-2 transition-colors duration-200"
+        :class="buttonClasses"
+        @click="handleAction(action)"
+      >
+        <NexxtIcon v-if="icon" :name="icon" aria-hidden="true" />
+        {{ label }}
+      </button>
+      <span
+        class="h-7 w-px rounded-sm"
+        :class="variant === 'primary' ? 'bg-white' : 'bg-gray-200'"
+        aria-hidden="true"
+      ></span>
+      <button
+        class="cursor-pointer px-2 py-2 transition-colors duration-200"
+        :class="buttonClasses"
+        @click="toggleDropdown"
+        aria-haspopup="menu"
+        :aria-expanded="isOpen"
+        :aria-label="`Open ${label} menu`"
+      >
+        <NexxtIcon
+          name="chevron-down"
+          class="transition-transform duration-200"
+          :class="{ 'rotate-180': isOpen }"
+          aria-hidden="true"
+        />
+      </button>
+    </div>
+
+    <Transition v-bind="transitionClasses">
+      <div
+        v-if="isOpen"
+        role="menu"
+        class="absolute top-full z-10 mt-2.5 min-w-full rounded-md border border-gray-200 bg-white"
+        :class="placement === 'right' ? 'right-0' : 'left-0'"
+      >
+        <button
+          v-for="option in options"
+          :key="option.label"
+          role="menuitem"
+          class="flex w-full min-w-42 cursor-pointer items-center gap-2 px-4 py-2 text-left text-sm text-gray-700 transition-colors duration-200 hover:bg-gray-100 hover:text-purple-600 focus:bg-gray-100 focus:outline-none"
+          @click="handleOptionClick(option.action)"
+        >
+          <NexxtIcon v-if="option.icon" :name="option.icon" aria-hidden="true" />
+          {{ option.label }}
+        </button>
+      </div>
+    </Transition>
+  </div>
+</template>