@nexxtmove/ui 2.6.0 → 2.7.0

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

@@ -0,0 +1,290 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import Button from './Button.vue'
+
+export default {
+  title: 'Components/Atoms/Button',
+  component: Button,
+} satisfies Meta<typeof Button>
+
+type Story = StoryObj<typeof Button>
+
+export const Primary: Story = {
+  args: {
+    default: 'Button',
+    variant: 'primary',
+    iconRight: false,
+    disabled: false,
+    loading: false,
+  },
+}
+
+export const Secondary: Story = {
+  args: {
+    variant: 'secondary',
+    default: 'Secondary Button',
+  },
+}
+
+export const Success: Story = {
+  args: {
+    variant: 'success',
+    default: 'Success Button',
+  },
+}
+
+export const Danger: Story = {
+  args: {
+    variant: 'danger',
+    default: 'Danger Button',
+  },
+}
+
+export const Warning: Story = {
+  args: {
+    variant: 'warning',
+    default: 'Warning Button',
+  },
+}
+
+export const Link: Story = {
+  args: {
+    variant: 'link',
+    default: 'Link Button',
+  },
+}
+
+export const WithIcon: Story = {
+  args: {
+    icon: 'star',
+    default: 'With Icon',
+  },
+}
+
+export const WithIconRight: Story = {
+  args: {
+    icon: 'arrow-right',
+    iconRight: true,
+    default: 'Next Step',
+  },
+}
+
+export const WithIconSecondary: Story = {
+  args: {
+    variant: 'secondary',
+    icon: 'download',
+    default: 'Download',
+  },
+}
+
+export const WithIconSuccess: Story = {
+  args: {
+    variant: 'success',
+    icon: 'check',
+    default: 'Success Button',
+  },
+}
+
+export const WithIconDanger: Story = {
+  args: {
+    variant: 'danger',
+    icon: 'trash',
+    default: 'Danger Button',
+  },
+}
+
+export const WithIconWarning: Story = {
+  args: {
+    variant: 'warning',
+    icon: 'triangle-exclamation',
+    default: 'Warning Button',
+  },
+}
+
+export const WithIconLink: Story = {
+  args: {
+    variant: 'link',
+    icon: 'download',
+    default: 'Download',
+  },
+}
+
+export const IconOnly: Story = {
+  args: {
+    icon: 'plus',
+  },
+}
+
+export const IconOnlySecondary: Story = {
+  args: {
+    variant: 'secondary',
+    icon: 'plus',
+  },
+}
+
+export const IconOnlySuccess: Story = {
+  args: {
+    variant: 'success',
+    icon: 'check',
+  },
+}
+
+export const IconOnlyDanger: Story = {
+  args: {
+    variant: 'danger',
+    icon: 'trash',
+  },
+}
+
+export const IconOnlyWarning: Story = {
+  args: {
+    variant: 'warning',
+    icon: 'triangle-exclamation',
+  },
+}
+
+export const IconOnlyLink: Story = {
+  args: {
+    variant: 'link',
+    icon: 'plus',
+  },
+}
+
+export const Disabled: Story = {
+  args: {
+    default: 'Disabled',
+    disabled: true,
+  },
+}
+
+export const DisabledSecondary: Story = {
+  args: {
+    variant: 'secondary',
+    default: 'Secondary Disabled',
+    disabled: true,
+  },
+}
+
+export const DisabledSuccess: Story = {
+  args: {
+    variant: 'success',
+    default: 'Success Disabled',
+    disabled: true,
+  },
+}
+
+export const DisabledDanger: Story = {
+  args: {
+    variant: 'danger',
+    default: 'Danger Disabled',
+    disabled: true,
+  },
+}
+
+export const DisabledWarning: Story = {
+  args: {
+    variant: 'warning',
+    default: 'Warning Disabled',
+    disabled: true,
+  },
+}
+
+export const DisabledLink: Story = {
+  args: {
+    variant: 'link',
+    default: 'Link Disabled',
+    disabled: true,
+  },
+}
+
+export const Loading: Story = {
+  args: {
+    default: 'Loading',
+    loading: true,
+  },
+}
+
+export const LoadingSecondary: Story = {
+  args: {
+    variant: 'secondary',
+    default: 'Loading',
+    loading: true,
+  },
+}
+
+export const LoadingSuccess: Story = {
+  args: {
+    variant: 'success',
+    default: 'Loading',
+    loading: true,
+  },
+}
+
+export const LoadingDanger: Story = {
+  args: {
+    variant: 'danger',
+    default: 'Loading',
+    loading: true,
+  },
+}
+
+export const LoadingWarning: Story = {
+  args: {
+    variant: 'warning',
+    default: 'Loading',
+    loading: true,
+  },
+}
+
+export const LoadingLink: Story = {
+  args: {
+    variant: 'link',
+    default: 'Link Button',
+    loading: true,
+  },
+}
+
+export const Rounded: Story = {
+  args: {
+    default: 'Rounded Button',
+    rounded: true,
+  },
+}
+
+export const RoundedSecondary: Story = {
+  args: {
+    variant: 'secondary',
+    default: 'Rounded Button',
+    rounded: true,
+  },
+}
+
+export const RoundedWithIcon: Story = {
+  args: {
+    icon: 'star',
+    default: 'Rounded With Icon',
+    rounded: true,
+  },
+}
+
+export const RoundedIconOnly: Story = {
+  args: {
+    icon: 'plus',
+    rounded: true,
+  },
+}
+
+export const RoundedDisabled: Story = {
+  args: {
+    default: 'Rounded Disabled',
+    rounded: true,
+    disabled: true,
+  },
+}
+
+export const RoundedLoading: Story = {
+  args: {
+    default: 'Rounded Loading',
+    rounded: true,
+    loading: true,
+  },
+}

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

@@ -0,0 +1,406 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import Button from './Button.vue'
+
+describe('Button', () => {
+  it('renders slot content', () => {
+    const wrapper = mount(Button, {
+      slots: {
+        default: 'Click me',
+      },
+    })
+
+    expect(wrapper.text()).toBe('Click me')
+  })
+
+  it('renders complex slot content', () => {
+    const wrapper = mount(Button, {
+      slots: {
+        default: '<span>Complex</span> <span>Text</span>',
+      },
+    })
+
+    expect(wrapper.html()).toContain('<span>Complex</span>')
+    expect(wrapper.html()).toContain('<span>Text</span>')
+  })
+
+  it('applies primary variant by default', () => {
+    const wrapper = mount(Button, {
+      slots: {
+        default: 'Click me',
+      },
+    })
+
+    expect(wrapper.classes()).toContain('button-primary')
+  })
+
+  it('applies secondary variant when specified', () => {
+    const wrapper = mount(Button, {
+      props: {
+        variant: 'secondary',
+      },
+      slots: {
+        default: 'Click me',
+      },
+    })
+
+    expect(wrapper.classes()).toContain('button-secondary')
+  })
+
+  it('applies success variant when specified', () => {
+    const wrapper = mount(Button, {
+      props: {
+        variant: 'success',
+      },
+      slots: {
+        default: 'Click me',
+      },
+    })
+
+    expect(wrapper.classes()).toContain('button-success')
+  })
+
+  it('applies danger variant when specified', () => {
+    const wrapper = mount(Button, {
+      props: {
+        variant: 'danger',
+      },
+      slots: {
+        default: 'Click me',
+      },
+    })
+
+    expect(wrapper.classes()).toContain('button-danger')
+  })
+
+  it('applies warning variant when specified', () => {
+    const wrapper = mount(Button, {
+      props: {
+        variant: 'warning',
+      },
+      slots: {
+        default: 'Click me',
+      },
+    })
+
+    expect(wrapper.classes()).toContain('button-warning')
+  })
+
+  it('applies link variant when specified', () => {
+    const wrapper = mount(Button, {
+      props: {
+        variant: 'link',
+      },
+      slots: {
+        default: 'Click me',
+      },
+    })
+
+    expect(wrapper.classes()).toContain('button-link')
+  })
+
+  it('applies link variant special classes', () => {
+    const wrapper = mount(Button, {
+      props: {
+        variant: 'link',
+      },
+      slots: {
+        default: 'Click me',
+      },
+    })
+
+    const span = wrapper.find('span')
+    expect(span.classes()).toContain('body-link')
+    expect(span.classes()).toContain('underline-offset-1')
+    expect(span.classes()).toContain('hover:underline-offset-2')
+  })
+
+  it('does not apply hover underline offset when link is disabled', () => {
+    const wrapper = mount(Button, {
+      props: {
+        variant: 'link',
+        disabled: true,
+      },
+      slots: {
+        default: 'Click me',
+      },
+    })
+
+    const span = wrapper.find('span')
+    expect(span.classes()).not.toContain('hover:underline-offset-2')
+  })
+
+  it('renders icon when icon prop is provided', () => {
+    const wrapper = mount(Button, {
+      props: {
+        icon: 'star',
+      },
+      slots: {
+        default: 'Click me',
+      },
+    })
+
+    const icon = wrapper.find('i')
+    expect(icon.exists()).toBe(true)
+    expect(icon.classes()).toContain('fa-light')
+    expect(icon.classes()).toContain('fa-star')
+  })
+
+  it('does not render icon when icon prop is not provided', () => {
+    const wrapper = mount(Button, {
+      slots: {
+        default: 'Click me',
+      },
+    })
+
+    const icon = wrapper.find('i')
+    expect(icon.exists()).toBe(false)
+  })
+
+  it('positions icon on the right when iconRight is true', () => {
+    const wrapper = mount(Button, {
+      props: {
+        icon: 'arrow-right',
+        iconRight: true,
+      },
+      slots: {
+        default: 'Next',
+      },
+    })
+
+    const icon = wrapper.find('i')
+    expect(icon.classes()).toContain('order-last')
+  })
+
+  it('positions icon on the left by default', () => {
+    const wrapper = mount(Button, {
+      props: {
+        icon: 'arrow-right',
+      },
+      slots: {
+        default: 'Back',
+      },
+    })
+
+    const icon = wrapper.find('i')
+    expect(icon.classes()).not.toContain('order-last')
+  })
+
+  it('renders as button type="button"', () => {
+    const wrapper = mount(Button, {
+      slots: {
+        default: 'Click me',
+      },
+    })
+
+    expect(wrapper.element.tagName).toBe('BUTTON')
+    expect(wrapper.attributes('type')).toBe('button')
+  })
+
+  it('disables button when disabled prop is true', () => {
+    const wrapper = mount(Button, {
+      props: {
+        disabled: true,
+      },
+      slots: {
+        default: 'Click me',
+      },
+    })
+
+    expect(wrapper.attributes('disabled')).toBeDefined()
+    expect(wrapper.classes()).toContain('disabled:cursor-not-allowed')
+  })
+
+  it('applies disabled styles for primary variant', () => {
+    const wrapper = mount(Button, {
+      props: {
+        variant: 'primary',
+        disabled: true,
+      },
+      slots: {
+        default: 'Click me',
+      },
+    })
+
+    expect(wrapper.attributes()).toHaveProperty('disabled')
+  })
+
+  it('hides icon and slot content when loading', () => {
+    const wrapper = mount(Button, {
+      props: {
+        loading: true,
+        icon: 'star',
+      },
+      slots: {
+        default: 'Submit',
+      },
+    })
+
+    const starIcon = wrapper.find('.fa-star')
+    expect(starIcon.classes()).toContain('opacity-0')
+
+    const label = wrapper.find('span')
+    expect(label.classes()).toContain('opacity-0')
+  })
+
+  it('removes hover effects when loading or disabled in link variant', async () => {
+    const wrapper = mount(Button, {
+      props: {
+        variant: 'link',
+        loading: true,
+      },
+      slots: {
+        default: 'Link',
+      },
+    })
+
+    expect(wrapper.find('span').classes()).not.toContain('hover:underline-offset-2')
+
+    await wrapper.setProps({ loading: false, disabled: true })
+    expect(wrapper.find('span').classes()).not.toContain('hover:underline-offset-2')
+
+    await wrapper.setProps({ disabled: false })
+    expect(wrapper.find('span').classes()).toContain('hover:underline-offset-2')
+  })
+
+  it('renders icon-only button without padding', () => {
+    const wrapper = mount(Button, {
+      props: {
+        icon: 'star',
+      },
+    })
+
+    expect(wrapper.classes()).toContain('w-10')
+    expect(wrapper.classes()).not.toContain('px-4')
+  })
+
+  it('displays spinner icon when loading is true', () => {
+    const wrapper = mount(Button, {
+      props: {
+        loading: true,
+      },
+    })
+
+    const icon = wrapper.find('i')
+    expect(icon.exists()).toBe(true)
+    expect(icon.classes()).toContain('fa-spinner-third')
+    expect(icon.classes()).toContain('fa-spin')
+  })
+
+  it('disables button when loading is true', () => {
+    const wrapper = mount(Button, {
+      props: {
+        loading: true,
+      },
+    })
+
+    expect(wrapper.classes()).toContain('pointer-events-none')
+  })
+
+  it('set the button type prop', async () => {
+    const wrapper = mount(Button)
+
+    expect(wrapper.attributes('type')).toBe('button')
+
+    await wrapper.setProps({ buttonType: 'submit' })
+    expect(wrapper.attributes('type')).toBe('submit')
+
+    await wrapper.setProps({ buttonType: 'reset' })
+    expect(wrapper.attributes('type')).toBe('reset')
+  })
+
+  it('no animated span whitout default slot', async () => {
+    const wrapper = mount(Button)
+
+    const slotSpanWrapper = wrapper.find('span')
+
+    expect(slotSpanWrapper.exists()).toBe(false)
+  })
+
+  it('applies rounded-full when rounded prop is true', () => {
+    const wrapper = mount(Button, {
+      props: { rounded: true },
+      slots: { default: 'Click me' },
+    })
+
+    expect(wrapper.classes()).toContain('rounded-full')
+    expect(wrapper.classes()).not.toContain('rounded-lg')
+  })
+
+  it('applies rounded-lg by default when rounded is false', () => {
+    const wrapper = mount(Button, {
+      slots: { default: 'Click me' },
+    })
+
+    expect(wrapper.classes()).toContain('rounded-lg')
+    expect(wrapper.classes()).not.toContain('rounded-full')
+  })
+
+  it('applies rounded-full to the loading overlay when rounded is true', () => {
+    const wrapper = mount(Button, {
+      props: { rounded: true, loading: true },
+    })
+
+    const overlay = wrapper.find('.absolute.inset-0')
+    expect(overlay.classes()).toContain('rounded-full')
+    expect(overlay.classes()).not.toContain('rounded-lg')
+  })
+
+  it('applies rounded-lg to the loading overlay by default', () => {
+    const wrapper = mount(Button, {
+      props: { loading: true },
+    })
+
+    const overlay = wrapper.find('.absolute.inset-0')
+    expect(overlay.classes()).toContain('rounded-lg')
+    expect(overlay.classes()).not.toContain('rounded-full')
+  })
+
+  it('has animated span with default slot', async () => {
+    const wrapper = mount(Button, {
+      slots: {
+        default: 'text',
+      },
+    })
+
+    const slotSpanWrapper = wrapper.find('span')
+
+    expect(slotSpanWrapper.exists()).toBe(true)
+  })
+
+  describe('fullWidth prop', () => {
+    it('applies justify-center and no w-full by default', () => {
+      const wrapper = mount(Button, { slots: { default: 'Click me' } })
+      expect(wrapper.classes()).toContain('justify-center')
+      expect(wrapper.classes()).not.toContain('w-full')
+      expect(wrapper.classes()).not.toContain('justify-start')
+    })
+
+    it('applies w-full and justify-start when fullWidth is true', () => {
+      const wrapper = mount(Button, {
+        props: { fullWidth: true },
+        slots: { default: 'Click me' },
+      })
+      expect(wrapper.classes()).toContain('w-full')
+      expect(wrapper.classes()).toContain('justify-start')
+      expect(wrapper.classes()).not.toContain('justify-center')
+    })
+
+    it('adds flex-1 and min-w-0 to the slot span when fullWidth is true', () => {
+      const wrapper = mount(Button, {
+        props: { fullWidth: true },
+        slots: { default: 'Click me' },
+      })
+      const span = wrapper.find('span')
+      expect(span.classes()).toContain('flex-1')
+      expect(span.classes()).toContain('min-w-0')
+    })
+
+    it('does not add flex-1 or min-w-0 to the slot span by default', () => {
+      const wrapper = mount(Button, { slots: { default: 'Click me' } })
+      const span = wrapper.find('span')
+      expect(span.classes()).not.toContain('flex-1')
+      expect(span.classes()).not.toContain('min-w-0')
+    })
+  })
+})