@davidbirchall/core 1.0.6 → 1.0.8

package/src/components/Heading/Heading.stories.ts

@@ -0,0 +1,121 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import Heading from './Heading.vue'
+
+const meta = {
+  title: 'Components/Heading',
+  component: Heading,
+  tags: ['autodocs'],
+  argTypes: {
+    tag: {
+      control: 'select',
+      options: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6']
+    },
+    size: {
+      control: 'select',
+      options: ['1', '2', '3', '4', '5', '6']
+    },
+    weight: {
+      control: 'select',
+      options: ['light', 'normal', 'medium', 'semibold', 'bold']
+    },
+    align: {
+      control: 'select',
+      options: ['left', 'center', 'right']
+    }
+  }
+} satisfies Meta<typeof Heading>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    tag: 'h2',
+    size: '2',
+    weight: 'bold',
+    align: 'left'
+  },
+  render: (args: any) => ({
+    components: { Heading },
+    setup() {
+      return { args }
+    },
+    template: '<Heading v-bind="args">Welcome to Vue Design System</Heading>'
+  })
+}
+
+export const AllSizes: Story = {
+  render: () => ({
+    components: { Heading },
+    template: `
+      <div style="display: flex; flex-direction: column; gap: 1.5rem;">
+        <Heading tag="h1" size="1">Heading Size 1</Heading>
+        <Heading tag="h2" size="2">Heading Size 2</Heading>
+        <Heading tag="h3" size="3">Heading Size 3</Heading>
+        <Heading tag="h4" size="4">Heading Size 4</Heading>
+        <Heading tag="h5" size="5">Heading Size 5</Heading>
+        <Heading tag="h6" size="6">Heading Size 6</Heading>
+      </div>
+    `
+  })
+}
+
+export const AllWeights: Story = {
+  render: () => ({
+    components: { Heading },
+    template: `
+      <div style="display: flex; flex-direction: column; gap: 1rem;">
+        <Heading weight="light">Light Weight</Heading>
+        <Heading weight="normal">Normal Weight</Heading>
+        <Heading weight="medium">Medium Weight</Heading>
+        <Heading weight="semibold">Semibold Weight</Heading>
+        <Heading weight="bold">Bold Weight</Heading>
+      </div>
+    `
+  })
+}
+
+export const Alignment: Story = {
+  render: () => ({
+    components: { Heading },
+    template: `
+      <div style="display: flex; flex-direction: column; gap: 1rem;">
+        <Heading align="left">Left Aligned Heading</Heading>
+        <Heading align="center">Center Aligned Heading</Heading>
+        <Heading align="right">Right Aligned Heading</Heading>
+      </div>
+    `
+  })
+}
+
+export const SemanticVsVisual: Story = {
+  render: () => ({
+    components: { Heading },
+    template: `
+      <div style="display: flex; flex-direction: column; gap: 1rem;">
+        <Heading tag="h1" size="3">H1 tag with size 3 appearance</Heading>
+        <Heading tag="h3" size="1">H3 tag with size 1 appearance</Heading>
+        <Heading tag="h6" size="2">H6 tag with size 2 appearance</Heading>
+      </div>
+    `
+  })
+}
+
+export const CustomStyling: Story = {
+  render: () => ({
+    components: { Heading },
+    template: `
+      <div style="display: flex; flex-direction: column; gap: 1.5rem;">
+        <Heading tag="h1" size="1" weight="light" align="center">
+          Light Centered Hero
+        </Heading>
+        <Heading tag="h2" size="2" weight="semibold">
+          Section Title with Semibold
+        </Heading>
+        <Heading tag="h3" size="4" weight="normal" align="right">
+          Small Right Aligned Subtitle
+        </Heading>
+      </div>
+    `
+  })
+}

package/src/components/Heading/Heading.test.ts

@@ -0,0 +1,184 @@
+import { describe, it, expect } from 'vitest'
+import { render, screen } from '@testing-library/vue'
+import Heading from './Heading.vue'
+
+describe('Heading', () => {
+  describe('Rendering', () => {
+    it('renders with default props', () => {
+      render(Heading, {
+        slots: {
+          default: 'Test Heading'
+        }
+      })
+      
+      const heading = screen.getByText('Test Heading')
+      expect(heading).toBeInTheDocument()
+      expect(heading.tagName).toBe('H2')
+    })
+
+    it('renders the correct heading tag', () => {
+      render(Heading, {
+        props: { tag: 'h1' },
+        slots: { default: 'H1 Heading' }
+      })
+      
+      const heading = screen.getByText('H1 Heading')
+      expect(heading.tagName).toBe('H1')
+    })
+
+    it('renders all heading levels correctly', () => {
+      const levels = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'] as const
+      
+      levels.forEach(level => {
+        const { unmount } = render(Heading, {
+          props: { tag: level },
+          slots: { default: `${level.toUpperCase()} content` }
+        })
+        
+        const heading = screen.getByText(`${level.toUpperCase()} content`)
+        expect(heading.tagName).toBe(level.toUpperCase())
+        unmount()
+      })
+    })
+  })
+
+  describe('Size Prop', () => {
+    it('applies the correct size class', () => {
+      render(Heading, {
+        props: { size: '3' },
+        slots: { default: 'Sized Heading' }
+      })
+      
+      const heading = screen.getByText('Sized Heading')
+      expect(heading).toHaveClass('heading--3')
+    })
+
+    it('applies different size classes', () => {
+      const sizes = ['1', '2', '3', '4', '5', '6'] as const
+      
+      sizes.forEach(size => {
+        const { unmount } = render(Heading, {
+          props: { size },
+          slots: { default: `Size ${size}` }
+        })
+        
+        const heading = screen.getByText(`Size ${size}`)
+        expect(heading).toHaveClass(`heading--${size}`)
+        unmount()
+      })
+    })
+
+    it('allows different tag and size combinations', () => {
+      render(Heading, {
+        props: { tag: 'h1', size: '4' },
+        slots: { default: 'H1 with size 4' }
+      })
+      
+      const heading = screen.getByText('H1 with size 4')
+      expect(heading.tagName).toBe('H1')
+      expect(heading).toHaveClass('heading--4')
+    })
+  })
+
+  describe('Weight Prop', () => {
+    it('applies default weight class', () => {
+      render(Heading, {
+        slots: { default: 'Default Weight' }
+      })
+      
+      const heading = screen.getByText('Default Weight')
+      expect(heading).toHaveClass('heading--bold')
+    })
+
+    it('applies custom weight classes', () => {
+      const weights = ['light', 'normal', 'medium', 'semibold', 'bold'] as const
+      
+      weights.forEach(weight => {
+        const { unmount } = render(Heading, {
+          props: { weight },
+          slots: { default: `${weight} weight` }
+        })
+        
+        const heading = screen.getByText(`${weight} weight`)
+        expect(heading).toHaveClass(`heading--${weight}`)
+        unmount()
+      })
+    })
+  })
+
+  describe('Align Prop', () => {
+    it('applies default alignment class', () => {
+      render(Heading, {
+        slots: { default: 'Default Align' }
+      })
+      
+      const heading = screen.getByText('Default Align')
+      expect(heading).toHaveClass('heading--left')
+    })
+
+    it('applies custom alignment classes', () => {
+      const alignments = ['left', 'center', 'right'] as const
+      
+      alignments.forEach(align => {
+        const { unmount } = render(Heading, {
+          props: { align },
+          slots: { default: `${align} aligned` }
+        })
+        
+        const heading = screen.getByText(`${align} aligned`)
+        expect(heading).toHaveClass(`heading--${align}`)
+        unmount()
+      })
+    })
+  })
+
+  describe('CSS Classes', () => {
+    it('applies base heading class', () => {
+      render(Heading, {
+        slots: { default: 'Base Class' }
+      })
+      
+      const heading = screen.getByText('Base Class')
+      expect(heading).toHaveClass('heading')
+    })
+
+    it('combines multiple modifier classes', () => {
+      render(Heading, {
+        props: {
+          tag: 'h3',
+          size: '2',
+          weight: 'semibold',
+          align: 'center'
+        },
+        slots: { default: 'Multiple Modifiers' }
+      })
+      
+      const heading = screen.getByText('Multiple Modifiers')
+      expect(heading).toHaveClass('heading')
+      expect(heading).toHaveClass('heading--2')
+      expect(heading).toHaveClass('heading--semibold')
+      expect(heading).toHaveClass('heading--center')
+    })
+  })
+
+  describe('Slot Content', () => {
+    it('renders simple text content', () => {
+      render(Heading, {
+        slots: { default: 'Simple Text' }
+      })
+      
+      expect(screen.getByText('Simple Text')).toBeInTheDocument()
+    })
+
+    it('renders complex HTML content', () => {
+      render(Heading, {
+        slots: {
+          default: '<span>Complex</span> <strong>HTML</strong>'
+        }
+      })
+      
+      expect(screen.getByText(/Complex/)).toBeInTheDocument()
+      expect(screen.getByText(/HTML/)).toBeInTheDocument()
+    })
+  })
+})

package/src/components/Heading/Heading.vue

@@ -0,0 +1,95 @@
+<template>
+  <component 
+    :is="tag" 
+    :class="['heading', `heading--${size}`, `heading--${weight}`, { [`heading--${align}`]: align }]"
+  >
+    <slot />
+  </component>
+</template>
+
+<script setup lang="ts">
+
+export interface HeadingProps {
+  tag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
+  size?: '1' | '2' | '3' | '4' | '5' | '6'
+  weight?: 'light' | 'normal' | 'medium' | 'semibold' | 'bold'
+  align?: 'left' | 'center' | 'right'
+}
+
+withDefaults(defineProps<HeadingProps>(), {
+  tag: 'h2',
+  size: '2',
+  weight: 'bold',
+  align: 'left'
+})
+</script>
+
+<style scoped>
+.heading {
+  margin: 0;
+  line-height: 1.2;
+  color: #111827;
+}
+
+/* Size variations */
+.heading--1 {
+  font-size: 3rem; /* 48px */
+  letter-spacing: -0.02em;
+}
+
+.heading--2 {
+  font-size: 2.25rem; /* 36px */
+  letter-spacing: -0.01em;
+}
+
+.heading--3 {
+  font-size: 1.875rem; /* 30px */
+  letter-spacing: -0.01em;
+}
+
+.heading--4 {
+  font-size: 1.5rem; /* 24px */
+}
+
+.heading--5 {
+  font-size: 1.25rem; /* 20px */
+}
+
+.heading--6 {
+  font-size: 1rem; /* 16px */
+}
+
+/* Weight variations */
+.heading--light {
+  font-weight: 300;
+}
+
+.heading--normal {
+  font-weight: 400;
+}
+
+.heading--medium {
+  font-weight: 500;
+}
+
+.heading--semibold {
+  font-weight: 600;
+}
+
+.heading--bold {
+  font-weight: 700;
+}
+
+/* Alignment */
+.heading--left {
+  text-align: left;
+}
+
+.heading--center {
+  text-align: center;
+}
+
+.heading--right {
+  text-align: right;
+}
+</style>

package/src/components/Heading/types.ts

@@ -0,0 +1,6 @@
+export interface HeadingProps {
+  tag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
+  size?: '1' | '2' | '3' | '4' | '5' | '6'
+  weight?: 'light' | 'normal' | 'medium' | 'semibold' | 'bold'
+  align?: 'left' | 'center' | 'right'
+}

package/src/components/Input/Input.stories.ts

@@ -0,0 +1,172 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import { ref } from 'vue'
+import Input from './Input.vue'
+
+const meta = {
+  title: 'Form Fields/Input',
+  component: Input,
+  tags: ['autodocs'],
+  argTypes: {
+    type: {
+      control: 'select',
+      options: ['text', 'email', 'password', 'number', 'tel', 'url'],
+      description: 'Input type'
+    },
+    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 Input>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    label: 'Email',
+    type: 'email',
+    placeholder: 'Enter your email'
+  },
+  render: (args: any) => ({
+    components: { Input },
+    setup() {
+      const value = ref('')
+      return { args, value }
+    },
+    template: '<Input v-bind="args" v-model="value" />'
+  })
+}
+
+export const WithValue: Story = {
+  args: {
+    label: 'Name',
+    modelValue: 'John Doe'
+  },
+  render: (args: any) => ({
+    components: { Input },
+    setup() {
+      const value = ref(args.modelValue ?? '')
+      return { args, value }
+    },
+    template: '<Input v-bind="args" v-model="value" />'
+  })
+}
+
+export const WithHint: Story = {
+  args: {
+    label: 'Username',
+    placeholder: 'Choose a username',
+    hint: 'Must be 3-20 characters'
+  },
+  render: (args: any) => ({
+    components: { Input },
+    setup() {
+      const value = ref('')
+      return { args, value }
+    },
+    template: '<Input v-bind="args" v-model="value" />'
+  })
+}
+
+export const WithError: Story = {
+  args: {
+    label: 'Email',
+    type: 'email',
+    modelValue: 'invalid-email',
+    error: 'Please enter a valid email address'
+  },
+  render: (args: any) => ({
+    components: { Input },
+    setup() {
+      const value = ref(args.modelValue ?? '')
+      return { args, value }
+    },
+    template: '<Input v-bind="args" v-model="value" />'
+  })
+}
+
+export const Required: Story = {
+  args: {
+    label: 'Password',
+    type: 'password',
+    required: true,
+    placeholder: 'Enter your password'
+  },
+  render: (args: any) => ({
+    components: { Input },
+    setup() {
+      const value = ref('')
+      return { args, value }
+    },
+    template: '<Input v-bind="args" v-model="value" />'
+  })
+}
+
+export const Disabled: Story = {
+  args: {
+    label: 'Disabled Input',
+    modelValue: 'Cannot edit this',
+    disabled: true
+  },
+  render: (args: any) => ({
+    components: { Input },
+    setup() {
+      const value = ref(args.modelValue ?? '')
+      return { args, value }
+    },
+    template: '<Input v-bind="args" v-model="value" />'
+  })
+}
+
+export const Number: Story = {
+  args: {
+    label: 'Age',
+    type: 'number',
+    placeholder: 'Enter your age'
+  },
+  render: (args: any) => ({
+    components: { Input },
+    setup() {
+      const value = ref('')
+      return { args, value }
+    },
+    template: '<Input v-bind="args" v-model="value" />'
+  })
+}
+
+export const Password: Story = {
+  args: {
+    label: 'Password',
+    type: 'password',
+    placeholder: 'Enter password'
+  },
+  render: (args: any) => ({
+    components: { Input },
+    setup() {
+      const value = ref('')
+      return { args, value }
+    },
+    template: '<Input v-bind="args" v-model="value" />'
+  })
+}