@davidbirchall/core 1.0.8 → 1.0.9

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

@@ -1,121 +0,0 @@
-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

@@ -1,184 +0,0 @@
-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

@@ -1,95 +0,0 @@
-<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

@@ -1,6 +0,0 @@
-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

@@ -1,172 +0,0 @@
-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" />'
-  })
-}