@davidbirchall/core 1.0.6 → 1.0.8

package/src/components/Card/Card.test.ts

@@ -0,0 +1,173 @@
+import { describe, it, expect } from 'vitest'
+import { render, screen } from '@testing-library/vue'
+import Card from './Card.vue'
+
+describe('Card', () => {
+  describe('rendering', () => {
+    it('renders default slot content', () => {
+      render(Card, {
+        slots: {
+          default: '<p>Card content</p>'
+        }
+      })
+
+      expect(screen.getByText('Card content')).toBeInTheDocument()
+    })
+
+    it('renders header slot when provided', () => {
+      const { container } = render(Card, {
+        slots: {
+          header: 'Card Header',
+          default: 'Card content'
+        }
+      })
+
+      const header = container.querySelector('.card__header')
+      expect(header).toBeInTheDocument()
+      expect(header).toHaveTextContent('Card Header')
+    })
+
+    it('does not render header section when slot is not provided', () => {
+      const { container } = render(Card, {
+        slots: {
+          default: 'Card content'
+        }
+      })
+
+      const header = container.querySelector('.card__header')
+      expect(header).not.toBeInTheDocument()
+    })
+
+    it('renders footer slot when provided', () => {
+      const { container } = render(Card, {
+        slots: {
+          default: 'Card content',
+          footer: 'Card Footer'
+        }
+      })
+
+      const footer = container.querySelector('.card__footer')
+      expect(footer).toBeInTheDocument()
+      expect(footer).toHaveTextContent('Card Footer')
+    })
+
+    it('does not render footer section when slot is not provided', () => {
+      const { container } = render(Card, {
+        slots: {
+          default: 'Card content'
+        }
+      })
+
+      const footer = container.querySelector('.card__footer')
+      expect(footer).not.toBeInTheDocument()
+    })
+
+    it('renders all slots together', () => {
+      const { container } = render(Card, {
+        slots: {
+          header: 'Header',
+          default: 'Body',
+          footer: 'Footer'
+        }
+      })
+
+      expect(container.querySelector('.card__header')).toBeInTheDocument()
+      expect(container.querySelector('.card__body')).toBeInTheDocument()
+      expect(container.querySelector('.card__footer')).toBeInTheDocument()
+    })
+  })
+
+  describe('hoverable prop', () => {
+    it('does not apply hoverable class by default', () => {
+      const { container } = render(Card, {
+        slots: {
+          default: 'Content'
+        }
+      })
+
+      const card = container.querySelector('.card')
+      expect(card).not.toHaveClass('card--hoverable')
+    })
+
+    it('applies hoverable class when prop is true', () => {
+      const { container } = render(Card, {
+        props: {
+          hoverable: true
+        },
+        slots: {
+          default: 'Content'
+        }
+      })
+
+      const card = container.querySelector('.card')
+      expect(card).toHaveClass('card--hoverable')
+    })
+
+    it('does not apply hoverable class when prop is false', () => {
+      const { container } = render(Card, {
+        props: {
+          hoverable: false
+        },
+        slots: {
+          default: 'Content'
+        }
+      })
+
+      const card = container.querySelector('.card')
+      expect(card).not.toHaveClass('card--hoverable')
+    })
+  })
+
+  describe('styling', () => {
+    it('always applies base card class', () => {
+      const { container } = render(Card, {
+        slots: {
+          default: 'Content'
+        }
+      })
+
+      const card = container.querySelector('.card')
+      expect(card).toHaveClass('card')
+    })
+
+    it('maintains card structure with body wrapper', () => {
+      const { container } = render(Card, {
+        slots: {
+          default: 'Test content'
+        }
+      })
+
+      const body = container.querySelector('.card__body')
+      expect(body).toBeInTheDocument()
+      expect(body).toHaveTextContent('Test content')
+    })
+  })
+
+  describe('complex content', () => {
+    it('handles complex HTML in slots', () => {
+      const { container } = render(Card, {
+        slots: {
+          header: '<h2>Title</h2>',
+          default: '<div><p>Paragraph 1</p><p>Paragraph 2</p></div>',
+          footer: '<button>Action</button>'
+        }
+      })
+
+      expect(container.querySelector('.card__header h2')).toBeInTheDocument()
+      expect(container.querySelectorAll('.card__body p')).toHaveLength(2)
+      expect(screen.getByRole('button', { name: 'Action' })).toBeInTheDocument()
+    })
+
+    it('handles nested components in slots', () => {
+      const { container } = render(Card, {
+        slots: {
+          default: '<div class="custom-content">Nested</div>'
+        }
+      })
+
+      const customContent = container.querySelector('.custom-content')
+      expect(customContent).toBeInTheDocument()
+      expect(customContent).toHaveTextContent('Nested')
+    })
+  })
+})

package/src/components/Card/Card.vue

@@ -0,0 +1,59 @@
+<template>
+  <div :class="['card', { 'card--hoverable': hoverable }]">
+    <div v-if="$slots.header" class="card__header">
+      <slot name="header" />
+    </div>
+    <div class="card__body">
+      <slot />
+    </div>
+    <div v-if="$slots.footer" class="card__footer">
+      <slot name="footer" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+export interface CardProps {
+  hoverable?: boolean
+}
+
+withDefaults(defineProps<CardProps>(), {
+  hoverable: false
+})
+</script>
+
+<style scoped>
+.card {
+  background: white;
+  border: 1px solid #e5e7eb;
+  border-radius: 0.5rem;
+  overflow: hidden;
+}
+
+.card--hoverable {
+  transition: all 0.2s ease-in-out;
+  cursor: pointer;
+}
+
+.card--hoverable:hover {
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  transform: translateY(-2px);
+}
+
+.card__header {
+  padding: 1rem 1.5rem;
+  border-bottom: 1px solid #e5e7eb;
+  font-weight: 600;
+  font-size: 1.125rem;
+}
+
+.card__body {
+  padding: 1.5rem;
+}
+
+.card__footer {
+  padding: 1rem 1.5rem;
+  border-top: 1px solid #e5e7eb;
+  background-color: #f9fafb;
+}
+</style>

package/{dist/Card/types.d.ts → src/components/Card/types.ts}

@@ -1,3 +1,3 @@
 export interface CardProps {
-    hoverable?: boolean;
+  hoverable?: boolean
 }

package/src/components/Checkbox/Checkbox.stories.ts

@@ -0,0 +1,126 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import { ref } from 'vue'
+import Checkbox from './Checkbox.vue'
+
+const meta = {
+  title: 'Form Fields/Checkbox',
+  component: Checkbox,
+  tags: ['autodocs'],
+  argTypes: {
+    modelValue: {
+      control: 'boolean',
+      description: 'Checked state'
+    },
+    label: {
+      control: 'text',
+      description: 'Label text'
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Disabled state'
+    },
+    required: {
+      control: 'boolean',
+      description: 'Required field'
+    },
+    error: {
+      control: 'text',
+      description: 'Error message'
+    }
+  },
+  args: {
+    modelValue: false,
+    disabled: false,
+    required: false
+  }
+} satisfies Meta<typeof Checkbox>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    label: 'Accept terms and conditions'
+  },
+  render: (args: any) => ({
+    components: { Checkbox },
+    setup() {
+      const checked = ref(args.modelValue ?? false)
+      return { args, checked }
+    },
+    template: '<Checkbox v-bind="args" v-model="checked" />'
+  })
+}
+
+export const Checked: Story = {
+  args: {
+    label: 'Subscribe to newsletter',
+    modelValue: true
+  },
+  render: (args: any) => ({
+    components: { Checkbox },
+    setup() {
+      const checked = ref(args.modelValue ?? false)
+      return { args, checked }
+    },
+    template: '<Checkbox v-bind="args" v-model="checked" />'
+  })
+}
+
+export const Disabled: Story = {
+  args: {
+    label: 'Disabled option',
+    disabled: true
+  },
+  render: (args: any) => ({
+    components: { Checkbox },
+    setup() {
+      const checked = ref(false)
+      return { args, checked }
+    },
+    template: '<Checkbox v-bind="args" v-model="checked" />'
+  })
+}
+
+export const DisabledChecked: Story = {
+  args: {
+    label: 'Disabled checked option',
+    disabled: true,
+    modelValue: true
+  },
+  render: (args: any) => ({
+    components: { Checkbox },
+    setup() {
+      const checked = ref(args.modelValue ?? false)
+      return { args, checked }
+    },
+    template: '<Checkbox v-bind="args" v-model="checked" />'
+  })
+}
+
+export const WithError: Story = {
+  args: {
+    label: 'I agree to the terms',
+    error: 'You must accept the terms to continue'
+  },
+  render: (args: any) => ({
+    components: { Checkbox },
+    setup() {
+      const checked = ref(false)
+      return { args, checked }
+    },
+    template: '<Checkbox v-bind="args" v-model="checked" />'
+  })
+}
+
+export const WithoutLabel: Story = {
+  args: {},
+  render: (args: any) => ({
+    components: { Checkbox },
+    setup() {
+      const checked = ref(false)
+      return { args, checked }
+    },
+    template: '<Checkbox v-bind="args" v-model="checked" />'
+  })
+}

package/src/components/Checkbox/Checkbox.test.ts

@@ -0,0 +1,155 @@
+import { describe, it, expect } from 'vitest'
+import { render, screen } from '@testing-library/vue'
+import userEvent from '@testing-library/user-event'
+import Checkbox from './Checkbox.vue'
+
+describe('Checkbox', () => {
+  describe('rendering', () => {
+    it('renders with label', () => {
+      render(Checkbox, {
+        props: {
+          label: 'Accept terms'
+        }
+      })
+
+      expect(screen.getByText('Accept terms')).toBeInTheDocument()
+    })
+
+    it('renders without label', () => {
+      const { container } = render(Checkbox)
+      
+      expect(container.querySelector('.checkbox-text')).not.toBeInTheDocument()
+    })
+
+    it('renders error message', () => {
+      render(Checkbox, {
+        props: {
+          error: 'This field is required'
+        }
+      })
+
+      expect(screen.getByText('This field is required')).toBeInTheDocument()
+    })
+
+    it('applies disabled class when disabled', () => {
+      render(Checkbox, {
+        props: {
+          label: 'Disabled',
+          disabled: true
+        }
+      })
+
+      const label = screen.getByText('Disabled').closest('.checkbox-label')
+      expect(label).toHaveClass('checkbox-label--disabled')
+    })
+  })
+
+  describe('checked state', () => {
+    it('is unchecked by default', () => {
+      render(Checkbox, {
+        props: {
+          label: 'Checkbox'
+        }
+      })
+
+      const checkbox = screen.getByRole('checkbox')
+      expect(checkbox).not.toBeChecked()
+    })
+
+    it('renders as checked when modelValue is true', () => {
+      render(Checkbox, {
+        props: {
+          label: 'Checkbox',
+          modelValue: true
+        }
+      })
+
+      const checkbox = screen.getByRole('checkbox')
+      expect(checkbox).toBeChecked()
+    })
+
+    it('can be toggled', async () => {
+      const user = userEvent.setup()
+      const { emitted } = render(Checkbox, {
+        props: {
+          label: 'Toggle me'
+        }
+      })
+
+      const checkbox = screen.getByRole('checkbox')
+      await user.click(checkbox)
+
+      expect(emitted()['update:modelValue']).toBeTruthy()
+      expect(emitted()['update:modelValue'][0]).toEqual([true])
+    })
+  })
+
+  describe('disabled state', () => {
+    it('disables the checkbox when disabled prop is true', () => {
+      render(Checkbox, {
+        props: {
+          label: 'Disabled',
+          disabled: true
+        }
+      })
+
+      const checkbox = screen.getByRole('checkbox')
+      expect(checkbox).toBeDisabled()
+    })
+
+    it('does not emit events when disabled', async () => {
+      const user = userEvent.setup()
+      const { emitted } = render(Checkbox, {
+        props: {
+          label: 'Disabled',
+          disabled: true
+        }
+      })
+
+      const checkbox = screen.getByRole('checkbox')
+      await user.click(checkbox)
+
+      expect(emitted()['update:modelValue']).toBeFalsy()
+    })
+  })
+
+  describe('required attribute', () => {
+    it('sets required attribute when required prop is true', () => {
+      render(Checkbox, {
+        props: {
+          label: 'Required',
+          required: true
+        }
+      })
+
+      const checkbox = screen.getByRole('checkbox')
+      expect(checkbox).toBeRequired()
+    })
+
+    it('does not set required attribute by default', () => {
+      render(Checkbox, {
+        props: {
+          label: 'Optional'
+        }
+      })
+
+      const checkbox = screen.getByRole('checkbox')
+      expect(checkbox).not.toBeRequired()
+    })
+  })
+
+  describe('accessibility', () => {
+    it('associates label with checkbox', () => {
+      render(Checkbox, {
+        props: {
+          label: 'Accept terms'
+        }
+      })
+
+      const checkbox = screen.getByRole('checkbox')
+      const label = screen.getByText('Accept terms')
+      
+      expect(checkbox.closest('label')).toContainElement(label)
+    })
+  })
+})

package/src/components/Checkbox/Checkbox.vue

@@ -0,0 +1,121 @@
+<template>
+  <div class="checkbox-wrapper">
+    <label :class="['checkbox-label', { 'checkbox-label--disabled': disabled }]">
+      <input
+        type="checkbox"
+        class="checkbox-input"
+        :checked="modelValue"
+        :disabled="disabled"
+        :required="required"
+        @change="handleChange"
+      />
+      <span class="checkbox-box"></span>
+      <span v-if="label" class="checkbox-text">{{ label }}</span>
+    </label>
+    <span v-if="error" class="checkbox-error">{{ error }}</span>
+  </div>
+</template>
+
+<script setup lang="ts">
+
+export interface CheckboxProps {
+  modelValue?: boolean
+  label?: string
+  disabled?: boolean
+  required?: boolean
+  error?: string
+}
+
+withDefaults(defineProps<CheckboxProps>(), {
+  modelValue: false,
+  disabled: false,
+  required: false
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: boolean]
+}>()
+
+const handleChange = (event: Event) => {
+  const target = event.target as HTMLInputElement
+  emit('update:modelValue', target.checked)
+}
+</script>
+
+<style scoped>
+.checkbox-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.checkbox-label {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  cursor: pointer;
+  position: relative;
+}
+
+.checkbox-label--disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+.checkbox-input {
+  position: absolute;
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.checkbox-box {
+  width: 1.25rem;
+  height: 1.25rem;
+  border: 2px solid #d1d5db;
+  border-radius: 0.25rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.2s ease-in-out;
+  background: white;
+  flex-shrink: 0;
+}
+
+.checkbox-input:checked + .checkbox-box {
+  background: #3b82f6;
+  border-color: #3b82f6;
+}
+
+.checkbox-input:checked + .checkbox-box::after {
+  content: '';
+  width: 0.375rem;
+  height: 0.75rem;
+  border: solid white;
+  border-width: 0 2px 2px 0;
+  transform: rotate(45deg);
+  margin-bottom: 0.125rem;
+}
+
+.checkbox-input:focus + .checkbox-box {
+  outline: 2px solid #3b82f6;
+  outline-offset: 2px;
+}
+
+.checkbox-input:disabled + .checkbox-box {
+  background: #f3f4f6;
+  cursor: not-allowed;
+}
+
+.checkbox-text {
+  font-size: 0.875rem;
+  color: #374151;
+  user-select: none;
+}
+
+.checkbox-error {
+  font-size: 0.75rem;
+  color: #ef4444;
+  margin-left: 1.75rem;
+}
+</style>

package/src/components/Checkbox/types.ts

@@ -0,0 +1,7 @@
+export interface CheckboxProps {
+  modelValue?: boolean
+  label?: string
+  disabled?: boolean
+  required?: boolean
+  error?: string
+}