@davidbirchall/core 1.0.6 → 1.0.8

package/src/components/ProgressBar/ProgressBar.test.ts

@@ -0,0 +1,98 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import ProgressBar from './ProgressBar.vue'
+
+describe('ProgressBar', () => {
+  it('renders with default props', () => {
+    const wrapper = mount(ProgressBar, {
+      props: {
+        percentage: 50
+      }
+    })
+    expect(wrapper.find('.progress-bar').exists()).toBe(true)
+  })
+
+  it('displays correct percentage', () => {
+    const wrapper = mount(ProgressBar, {
+      props: {
+        percentage: 75
+      }
+    })
+    expect(wrapper.find('.progress-bar__percentage').text()).toBe('75%')
+  })
+
+  it('clamps percentage to 0-100 range', () => {
+    const wrapper = mount(ProgressBar, {
+      props: {
+        percentage: 150
+      }
+    })
+    const fill = wrapper.find('.progress-bar__fill')
+    expect(fill.attributes('style')).toContain('width: 100%')
+  })
+
+  it('applies correct variant class', () => {
+    const variants = ['primary', 'success', 'warning', 'danger'] as const
+    
+    variants.forEach(variant => {
+      const wrapper = mount(ProgressBar, {
+        props: {
+          percentage: 50,
+          variant
+        }
+      })
+      expect(wrapper.find(`.progress-bar__fill--${variant}`).exists()).toBe(true)
+    })
+  })
+
+  it('shows label when provided', () => {
+    const wrapper = mount(ProgressBar, {
+      props: {
+        percentage: 50,
+        label: 'Progress'
+      }
+    })
+    expect(wrapper.find('.progress-bar__label').text()).toBe('Progress')
+  })
+
+  it('hides header when showLabel is false', () => {
+    const wrapper = mount(ProgressBar, {
+      props: {
+        percentage: 50,
+        showLabel: false
+      }
+    })
+    expect(wrapper.find('.progress-bar__header').exists()).toBe(false)
+  })
+
+  it('shows percentage in bar when showPercentageInBar is true', () => {
+    const wrapper = mount(ProgressBar, {
+      props: {
+        percentage: 50,
+        showPercentageInBar: true
+      }
+    })
+    expect(wrapper.find('.progress-bar__text').exists()).toBe(true)
+    expect(wrapper.find('.progress-bar__text').text()).toBe('50%')
+  })
+
+  it('applies custom height', () => {
+    const wrapper = mount(ProgressBar, {
+      props: {
+        percentage: 50,
+        height: 20
+      }
+    })
+    expect(wrapper.find('.progress-bar__track').attributes('style')).toContain('height: 20px')
+  })
+
+  it('adds animated class when animated prop is true', () => {
+    const wrapper = mount(ProgressBar, {
+      props: {
+        percentage: 50,
+        animated: true
+      }
+    })
+    expect(wrapper.find('.progress-bar__fill--animated').exists()).toBe(true)
+  })
+})

package/src/components/ProgressBar/ProgressBar.vue

@@ -0,0 +1,117 @@
+<template>
+  <div class="progress-bar">
+    <div v-if="showLabel" class="progress-bar__header">
+      <span class="progress-bar__label">{{ label }}</span>
+      <span class="progress-bar__percentage">{{ displayPercentage }}%</span>
+    </div>
+    <div class="progress-bar__track" :style="{ height: `${height}px` }">
+      <div 
+        class="progress-bar__fill"
+        :class="[
+          `progress-bar__fill--${variant}`,
+          { 'progress-bar__fill--animated': animated }
+        ]"
+        :style="{ width: `${clampedPercentage}%` }"
+      >
+        <span v-if="showPercentageInBar" class="progress-bar__text">
+          {{ displayPercentage }}%
+        </span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+interface Props {
+  percentage: number
+  label?: string
+  showLabel?: boolean
+  showPercentageInBar?: boolean
+  height?: number
+  variant?: 'primary' | 'success' | 'warning' | 'danger'
+  animated?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  percentage: 0,
+  label: '',
+  showLabel: true,
+  showPercentageInBar: false,
+  height: 12,
+  variant: 'primary',
+  animated: true
+})
+
+const clampedPercentage = computed(() => {
+  return Math.min(Math.max(props.percentage, 0), 100)
+})
+
+const displayPercentage = computed(() => {
+  return Math.round(clampedPercentage.value)
+})
+</script>
+
+<style scoped>
+.progress-bar {
+  width: 100%;
+}
+
+.progress-bar__header {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 0.75rem;
+  font-weight: 600;
+  color: #374151;
+  font-size: 0.9375rem;
+}
+
+.progress-bar__percentage {
+  color: #667eea;
+}
+
+.progress-bar__track {
+  width: 100%;
+  background: #e5e7eb;
+  border-radius: 0.5rem;
+  overflow: hidden;
+  position: relative;
+}
+
+.progress-bar__fill {
+  height: 100%;
+  border-radius: 0.5rem;
+  transition: width 0.3s ease;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+}
+
+.progress-bar__fill--animated {
+  transition: width 0.6s ease;
+}
+
+.progress-bar__fill--primary {
+  background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
+}
+
+.progress-bar__fill--success {
+  background: linear-gradient(90deg, #10b981 0%, #059669 100%);
+}
+
+.progress-bar__fill--warning {
+  background: linear-gradient(90deg, #f59e0b 0%, #d97706 100%);
+}
+
+.progress-bar__fill--danger {
+  background: linear-gradient(90deg, #ef4444 0%, #dc2626 100%);
+}
+
+.progress-bar__text {
+  color: white;
+  font-size: 0.75rem;
+  font-weight: 600;
+}
+</style>

package/src/components/Select/Select.stories.ts

@@ -0,0 +1,177 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import { ref } from 'vue'
+import Select from './Select.vue'
+
+const meta = {
+  title: 'Form Fields/Select',
+  component: Select,
+  tags: ['autodocs'],
+  argTypes: {
+    label: {
+      control: 'text',
+      description: 'Label text'
+    },
+    placeholder: {
+      control: 'text',
+      description: 'Placeholder text'
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Disabled state'
+    },
+    required: {
+      control: 'boolean',
+      description: 'Required field'
+    },
+    error: {
+      control: 'text',
+      description: 'Error message'
+    },
+    hint: {
+      control: 'text',
+      description: 'Hint text'
+    }
+  }
+} satisfies Meta<typeof Select>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+const countryOptions = [
+  { value: 'us', label: 'United States' },
+  { value: 'uk', label: 'United Kingdom' },
+  { value: 'ca', label: 'Canada' },
+  { value: 'au', label: 'Australia' },
+  { value: 'de', label: 'Germany' }
+]
+
+export const Default: Story = {
+  args: {
+    label: 'Country',
+    placeholder: 'Select a country',
+    options: countryOptions
+  },
+  render: (args: any) => ({
+    components: { Select },
+    setup() {
+      const value = ref('')
+      return { args, value }
+    },
+    template: '<Select v-bind="args" v-model="value" />'
+  })
+}
+
+export const WithValue: Story = {
+  args: {
+    label: 'Country',
+    modelValue: 'uk',
+    options: countryOptions
+  },
+  render: (args: any) => ({
+    components: { Select },
+    setup() {
+      const value = ref(args.modelValue ?? '')
+      return { args, value }
+    },
+    template: '<Select v-bind="args" v-model="value" />'
+  })
+}
+
+export const WithHint: Story = {
+  args: {
+    label: 'Shipping Method',
+    placeholder: 'Choose shipping method',
+    hint: 'Standard shipping takes 5-7 business days',
+    options: [
+      { value: 'standard', label: 'Standard Shipping' },
+      { value: 'express', label: 'Express Shipping' },
+      { value: 'overnight', label: 'Overnight Shipping' }
+    ]
+  },
+  render: (args: any) => ({
+    components: { Select },
+    setup() {
+      const value = ref('')
+      return { args, value }
+    },
+    template: '<Select v-bind="args" v-model="value" />'
+  })
+}
+
+export const WithError: Story = {
+  args: {
+    label: 'Country',
+    placeholder: 'Select a country',
+    error: 'Please select a country',
+    options: countryOptions
+  },
+  render: (args: any) => ({
+    components: { Select },
+    setup() {
+      const value = ref('')
+      return { args, value }
+    },
+    template: '<Select v-bind="args" v-model="value" />'
+  })
+}
+
+export const Required: Story = {
+  args: {
+    label: 'Country',
+    placeholder: 'Select a country',
+    required: true,
+    options: countryOptions
+  },
+  render: (args: any) => ({
+    components: { Select },
+    setup() {
+      const value = ref('')
+      return { args, value }
+    },
+    template: '<Select v-bind="args" v-model="value" />'
+  })
+}
+
+export const Disabled: Story = {
+  args: {
+    label: 'Country',
+    modelValue: 'us',
+    disabled: true,
+    options: countryOptions
+  },
+  render: (args: any) => ({
+    components: { Select },
+    setup() {
+      const value = ref(args.modelValue ?? '')
+      return { args, value }
+    },
+    template: '<Select v-bind="args" v-model="value" />'
+  })
+}
+
+export const ManyOptions: Story = {
+  args: {
+    label: 'State',
+    placeholder: 'Select a state',
+    options: [
+      { value: 'al', label: 'Alabama' },
+      { value: 'ak', label: 'Alaska' },
+      { value: 'az', label: 'Arizona' },
+      { value: 'ar', label: 'Arkansas' },
+      { value: 'ca', label: 'California' },
+      { value: 'co', label: 'Colorado' },
+      { value: 'ct', label: 'Connecticut' },
+      { value: 'de', label: 'Delaware' },
+      { value: 'fl', label: 'Florida' },
+      { value: 'ga', label: 'Georgia' }
+    ]
+  },
+  render: (args: any) => ({
+    components: { Select },
+    setup() {
+      const value = ref('')
+      return { args, value }
+    },
+    template: '<Select v-bind="args" v-model="value" />'
+  })
+}

package/src/components/Select/Select.test.ts

@@ -0,0 +1,225 @@
+import { describe, it, expect } from 'vitest'
+import { render, screen } from '@testing-library/vue'
+import userEvent from '@testing-library/user-event'
+import Select from './Select.vue'
+
+const mockOptions = [
+  { value: 'option1', label: 'Option 1' },
+  { value: 'option2', label: 'Option 2' },
+  { value: 'option3', label: 'Option 3' }
+]
+
+describe('Select', () => {
+  describe('rendering', () => {
+    it('renders with label', () => {
+      render(Select, {
+        props: {
+          label: 'Choose an option',
+          options: mockOptions
+        }
+      })
+
+      expect(screen.getByText('Choose an option')).toBeInTheDocument()
+    })
+
+    it('renders without label', () => {
+      const { container } = render(Select, {
+        props: {
+          options: mockOptions
+        }
+      })
+      
+      expect(container.querySelector('.select-label')).not.toBeInTheDocument()
+    })
+
+    it('renders all options', () => {
+      render(Select, {
+        props: {
+          options: mockOptions
+        }
+      })
+
+      expect(screen.getByRole('option', { name: 'Option 1' })).toBeInTheDocument()
+      expect(screen.getByRole('option', { name: 'Option 2' })).toBeInTheDocument()
+      expect(screen.getByRole('option', { name: 'Option 3' })).toBeInTheDocument()
+    })
+
+    it('renders placeholder as disabled option', () => {
+      render(Select, {
+        props: {
+          placeholder: 'Select an option',
+          options: mockOptions
+        }
+      })
+
+      const placeholderOption = screen.getByRole('option', { name: 'Select an option' }) as HTMLOptionElement
+      expect(placeholderOption).toBeInTheDocument()
+      expect(placeholderOption.disabled).toBe(true)
+    })
+
+    it('renders error message', () => {
+      render(Select, {
+        props: {
+          error: 'This field is required',
+          options: mockOptions
+        }
+      })
+
+      expect(screen.getByText('This field is required')).toBeInTheDocument()
+    })
+
+    it('renders hint text', () => {
+      render(Select, {
+        props: {
+          hint: 'Choose wisely',
+          options: mockOptions
+        }
+      })
+
+      expect(screen.getByText('Choose wisely')).toBeInTheDocument()
+    })
+
+    it('does not show hint when error is present', () => {
+      render(Select, {
+        props: {
+          hint: 'Helper text',
+          error: 'Error message',
+          options: mockOptions
+        }
+      })
+
+      expect(screen.queryByText('Helper text')).not.toBeInTheDocument()
+      expect(screen.getByText('Error message')).toBeInTheDocument()
+    })
+
+    it('shows required asterisk when required', () => {
+      render(Select, {
+        props: {
+          label: 'Country',
+          required: true,
+          options: mockOptions
+        }
+      })
+
+      expect(screen.getByText('*')).toBeInTheDocument()
+    })
+
+    it('applies error class when error prop is set', () => {
+      render(Select, {
+        props: {
+          error: 'Error',
+          options: mockOptions
+        }
+      })
+
+      const select = screen.getByRole('combobox')
+      expect(select).toHaveClass('select-field--error')
+    })
+  })
+
+  describe('v-model', () => {
+    it('displays initial value', () => {
+      render(Select, {
+        props: {
+          modelValue: 'option2',
+          options: mockOptions
+        }
+      })
+
+      const select = screen.getByRole('combobox') as HTMLSelectElement
+      expect(select.value).toBe('option2')
+    })
+
+    it('emits update:modelValue on change', async () => {
+      const user = userEvent.setup()
+      const { emitted } = render(Select, {
+        props: {
+          options: mockOptions
+        }
+      })
+
+      const select = screen.getByRole('combobox')
+      await user.selectOptions(select, 'option2')
+
+      expect(emitted()['update:modelValue']).toBeTruthy()
+      expect(emitted()['update:modelValue'][0]).toEqual(['option2'])
+    })
+  })
+
+  describe('disabled state', () => {
+    it('disables the select when disabled prop is true', () => {
+      render(Select, {
+        props: {
+          disabled: true,
+          options: mockOptions
+        }
+      })
+
+      const select = screen.getByRole('combobox')
+      expect(select).toBeDisabled()
+    })
+
+    it('applies disabled class', () => {
+      render(Select, {
+        props: {
+          disabled: true,
+          options: mockOptions
+        }
+      })
+
+      const select = screen.getByRole('combobox')
+      expect(select).toHaveClass('select-field--disabled')
+    })
+  })
+
+  describe('required attribute', () => {
+    it('sets required attribute when required prop is true', () => {
+      render(Select, {
+        props: {
+          required: true,
+          options: mockOptions
+        }
+      })
+
+      const select = screen.getByRole('combobox')
+      expect(select).toBeRequired()
+    })
+
+    it('does not set required attribute by default', () => {
+      render(Select, {
+        props: {
+          options: mockOptions
+        }
+      })
+
+      const select = screen.getByRole('combobox')
+      expect(select).not.toBeRequired()
+    })
+  })
+
+  describe('accessibility', () => {
+    it('associates label with select using htmlFor', () => {
+      render(Select, {
+        props: {
+          label: 'Choose option',
+          options: mockOptions
+        }
+      })
+
+      const label = screen.getByText('Choose option') as HTMLLabelElement
+      const select = screen.getByRole('combobox')
+      
+      expect(label.htmlFor).toBe(select.id)
+    })
+  })
+
+  describe('empty options', () => {
+    it('renders without options', () => {
+      const { container } = render(Select)
+
+      const select = container.querySelector('select')
+      expect(select).toBeInTheDocument()
+      expect(select?.children.length).toBe(0)
+    })
+  })
+})