@nexxtmove/ui 0.1.28 → 0.1.29

package/dist/nuxt.js

@@ -1,24 +1,25 @@
 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 = {
+const a = "components/AnimatedNumber/AnimatedNumber.vue", m = "components/Button/Button.vue", u = "components/Calendar/Calendar.vue", p = "components/Chip/Chip.vue", x = "components/CustomerJourneyTile/CustomerJourneyTile.vue", l = "components/DatePicker/DatePicker.vue", r = "components/DropdownButton/DropdownButton.vue", d = "components/Header/Header.vue", v = "components/Icon/Icon.vue", N = "components/InfoBlock/InfoBlock.vue", T = "components/ProgressBar/ProgressBar.vue", S = "components/SocialIcons/SocialIcons.vue", C = "components/SocialMediaCustomTemplate/SocialMediaCustomTemplate.vue", f = "components/SocialMediaTemplate/SocialMediaTemplate.vue", B = "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 = {
   NexxtAnimatedNumber: a,
   NexxtButton: m,
-  NexxtCalendar: x,
-  NexxtChip: u,
-  NexxtCustomerJourneyTile: p,
+  NexxtCalendar: u,
+  NexxtChip: p,
+  NexxtCustomerJourneyTile: x,
   NexxtDatePicker: l,
-  NexxtHeader: r,
-  NexxtIcon: d,
-  NexxtInfoBlock: v,
-  NexxtProgressBar: N,
-  NexxtSocialIcons: T,
-  NexxtSocialMediaCustomTemplate: S,
-  NexxtSocialMediaTemplate: C,
-  NexxtSocialMediaType: f,
+  NexxtDropdownButton: r,
+  NexxtHeader: d,
+  NexxtIcon: v,
+  NexxtInfoBlock: N,
+  NexxtProgressBar: T,
+  NexxtSocialIcons: S,
+  NexxtSocialMediaCustomTemplate: C,
+  NexxtSocialMediaTemplate: f,
+  NexxtSocialMediaType: B,
   NexxtStepperHeader: h,
   NexxtTimelineEvent: M,
   NexxtTimelinePhaseblock: P,
   NexxtTooltip: b
-}, I = s({
+}, y = s({
   meta: {
     name: "@nexxtmove/ui",
     configKey: "nexxtmoveUi",
@@ -49,5 +50,5 @@ const a = "components/AnimatedNumber/AnimatedNumber.vue", m = "components/Button
   }
 });
 export {
-  I as default
+  y as default
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@nexxtmove/ui",
   "type": "module",
-  "version": "0.1.28",
+  "version": "0.1.29",
   "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/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>

package/src/components.json

@@ -5,6 +5,7 @@
   "NexxtChip": "components/Chip/Chip.vue",
   "NexxtCustomerJourneyTile": "components/CustomerJourneyTile/CustomerJourneyTile.vue",
   "NexxtDatePicker": "components/DatePicker/DatePicker.vue",
+  "NexxtDropdownButton": "components/DropdownButton/DropdownButton.vue",
   "NexxtHeader": "components/Header/Header.vue",
   "NexxtIcon": "components/Icon/Icon.vue",
   "NexxtInfoBlock": "components/InfoBlock/InfoBlock.vue",

package/src/index.ts

@@ -5,6 +5,7 @@ export { default as NexxtCalendar } from './components/Calendar/Calendar.vue'
 export { default as NexxtChip } from './components/Chip/Chip.vue'
 export { default as NexxtCustomerJourneyTile } from './components/CustomerJourneyTile/CustomerJourneyTile.vue'
 export { default as NexxtDatePicker } from './components/DatePicker/DatePicker.vue'
+export { default as NexxtDropdownButton } from './components/DropdownButton/DropdownButton.vue'
 export { default as NexxtHeader } from './components/Header/Header.vue'
 export { default as NexxtIcon } from './components/Icon/Icon.vue'
 export { default as NexxtInfoBlock } from './components/InfoBlock/InfoBlock.vue'