@nuvia-ui/components 4.0.1

package/src/ds-button/ds-button.stories.js

@@ -0,0 +1,152 @@
+import './ds-button.js';
+import '../ds-icon/ds-icon.js';
+
+
+export default {
+  title: 'Components/Button',
+  component: 'ds-button',
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['primary', 'secondary', 'outline', 'action', 'tertiary'],
+    },
+    disabled: { control: 'boolean' },
+    label: { control: 'text' },
+    iconStart: { control: 'text' },
+    iconEnd: { control: 'text' }
+  },
+};
+
+const createButton = ({ variant, disabled, label, iconStart, iconEnd }) => {
+  const btn = document.createElement('ds-button');
+
+  if (variant) btn.setAttribute('variant', variant);
+  if (disabled) btn.setAttribute('disabled', ''); // Boolean attribute
+
+  if (iconStart) {
+    const icon = document.createElement('ds-icon');
+    icon.setAttribute('slot', 'icon-start');
+    icon.setAttribute('name', iconStart);
+    icon.setAttribute('size', 'sm');
+    btn.appendChild(icon);
+  }
+
+  if (label) {
+    btn.appendChild(document.createTextNode(label));
+  }
+
+  if (iconEnd) {
+    const icon = document.createElement('ds-icon');
+    icon.setAttribute('slot', 'icon-end');
+    icon.setAttribute('name', iconEnd);
+    icon.setAttribute('size', 'sm');
+    btn.appendChild(icon);
+  }
+
+  return btn;
+};
+
+export const Primary = {
+  args: {
+    variant: 'primary',
+    label: 'Save Changes',
+  },
+  render: createButton
+};
+
+export const Secondary = {
+  args: {
+    variant: 'secondary',
+    label: 'Cancel',
+  },
+  render: createButton
+};
+
+export const Outline = {
+  args: {
+    variant: 'outline',
+    label: 'Learn More',
+  },
+  render: createButton
+};
+
+export const Action = {
+  args: {
+    variant: 'action',
+    label: 'Edit',
+  },
+  render: createButton
+};
+
+export const Tertiary = {
+  args: {
+    variant: 'tertiary',
+    label: 'Skip',
+  },
+  render: createButton
+};
+
+export const WithIconStart = {
+  args: {
+    variant: 'primary',
+    label: 'Icon Start',
+    iconStart: 'star',
+    disabled: false
+  },
+  render: createButton
+};
+
+export const WithIconEnd = {
+  args: {
+    variant: 'primary',
+    label: 'Icon End',
+    iconEnd: 'arrow-forward',
+  },
+  render: createButton
+};
+
+export const WithBothIcons = {
+  args: {
+    variant: 'primary',
+    label: 'Both Icons',
+    iconStart: 'check',
+    iconEnd: 'close',
+  },
+  render: createButton
+};
+
+export const Disabled = {
+  args: {
+    variant: 'primary',
+    label: 'Disabled',
+    disabled: true,
+  },
+  render: createButton
+};
+
+export const AllVariants = {
+  render: () => {
+    const container = document.createElement('div');
+    container.style.cssText = 'display: flex; flex-direction: column; gap: 20px;';
+
+    // Row 1: Enabled
+    const row1 = document.createElement('div');
+    row1.style.cssText = 'display: flex; gap: 16px; flex-wrap: wrap; align-items: center;';
+
+    ['primary', 'secondary', 'outline', 'action', 'tertiary'].forEach(variant => {
+      row1.appendChild(createButton({ variant, label: variant.charAt(0).toUpperCase() + variant.slice(1) }));
+    });
+    container.appendChild(row1);
+
+    // Row 2: Disabled
+    const row2 = document.createElement('div');
+    row2.style.cssText = 'display: flex; gap: 16px; flex-wrap: wrap; align-items: center;';
+
+    ['primary', 'secondary', 'outline', 'action', 'tertiary'].forEach(variant => {
+      row2.appendChild(createButton({ variant, label: variant.charAt(0).toUpperCase() + variant.slice(1), disabled: true }));
+    });
+    container.appendChild(row2);
+
+    return container;
+  }
+};

package/src/ds-button/ds-button.test.js

@@ -0,0 +1,62 @@
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+import './ds-button.js';
+
+describe('ds-button', () => {
+    let container;
+
+    beforeEach(() => {
+        container = document.createElement('div');
+        document.body.appendChild(container);
+    });
+
+    afterEach(() => {
+        container.remove();
+    });
+
+    it('should render default primary variant', async () => {
+        container.innerHTML = '<ds-button>Click me</ds-button>';
+        const el = container.querySelector('ds-button');
+        await new Promise(resolve => setTimeout(resolve, 100));
+
+        const button = el.shadowRoot.querySelector('button');
+        expect(button).toBeTruthy();
+        expect(el.variant).toBe('primary');
+    });
+
+    it('should reflect variant attribute', async () => {
+        container.innerHTML = '<ds-button variant="secondary">Secondary</ds-button>';
+        const el = container.querySelector('ds-button');
+        await new Promise(resolve => setTimeout(resolve, 100));
+
+        expect(el.variant).toBe('secondary');
+        expect(el.getAttribute('variant')).toBe('secondary');
+    });
+
+    it('should render disabled state', async () => {
+        container.innerHTML = '<ds-button disabled>Disabled</ds-button>';
+        const el = container.querySelector('ds-button');
+        await new Promise(resolve => setTimeout(resolve, 100));
+
+        const button = el.shadowRoot.querySelector('button');
+        expect(button.disabled).toBe(true);
+        expect(el.hasAttribute('disabled')).toBe(true);
+    });
+
+    it('should render slots correctly', async () => {
+        container.innerHTML = `
+            <ds-button>
+                <div slot="icon-start">Start</div>
+                Label
+                <div slot="icon-end">End</div>
+            </ds-button>
+        `;
+        const el = container.querySelector('ds-button');
+        await new Promise(resolve => setTimeout(resolve, 100));
+
+        const slots = el.shadowRoot.querySelectorAll('slot');
+        expect(slots.length).toBe(3);
+        expect(slots[0].name).toBe('icon-start');
+        expect(slots[1].name).toBe('');
+        expect(slots[2].name).toBe('icon-end');
+    });
+});

package/src/ds-button/index.js

@@ -0,0 +1 @@
+export { DsButton } from './ds-button.js';

package/src/ds-button-group/ds-button-group.js

@@ -0,0 +1,82 @@
+import { LitElement, html, css } from 'lit';
+
+/**
+ * Button component for the Design System
+ * 
+ * @element ds-button-group
+ * 
+ * @prop {string} align - Layout/Alignment of buttons: 'start' | 'end' | 'stack' (default: 'start')
+ *                        'start': Left aligned
+ *                        'end': Right aligned (reversed visual order)
+ *                        'stack': Vertical stack, full width
+ * 
+ * @slot - Button content
+ */
+export class DsButtonGroup extends LitElement {
+  static properties = {
+    align: { type: String, reflect: true }
+  };
+
+  static styles = css`
+    :host {
+      display: flex;
+      width: 100%;
+    }
+
+    /* Base Layout */
+    .button-group {
+      display: flex;
+      flex-wrap: wrap;
+      width: 100%;
+      gap: var(--ds-space-sm, 8px);
+    }
+
+    /* 
+     * Alignment / Layout Variants
+     */
+    
+    /* Start (Default) */
+    :host([align="start"]) .button-group {
+      flex-direction: row;
+      justify-content: flex-start;
+      align-items: center;
+    }
+
+    /* End (Visual Inversion for Dialogs) */
+    :host([align="end"]) .button-group {
+      flex-direction: row-reverse;
+      justify-content: flex-start;
+      align-items: center;
+    }
+    
+    /* Stack (Vertical, Full Width) */
+    :host([align="stack"]) .button-group {
+      flex-direction: column;
+      align-items: stretch;
+    }
+
+    /* Ensure buttons take full width when stacked */
+    :host([align="stack"]) ::slotted(ds-button) {
+       width: 100%;
+       display: flex; /* Ensure ds-button behaves as a flex container if it isn't already, or fills width */
+    }
+    
+    /* Specific fix for ds-button internal styling if needed */
+    /* If ds-button host is inline-block, width:100% works but we might need to ensure its internal button is also 100% */
+  `;
+
+  constructor() {
+    super();
+    this.align = 'start';
+  }
+
+  render() {
+    return html`
+      <div class="button-group">
+        <slot></slot>
+      </div>
+    `;
+  }
+}
+
+customElements.define('ds-button-group', DsButtonGroup);

package/src/ds-button-group/ds-button-group.mdx

@@ -0,0 +1,39 @@
+import { Meta, Story, Canvas, Controls } from '@storybook/blocks';
+import { DsButtonGroup } from './ds-button-group';
+import * as stories from './ds-button-group.stories';
+
+<Meta title="Components/Button Group" component={DsButtonGroup} />
+
+# Button Group
+
+The `ds-button-group` component is used to group related buttons together. It supports horizontal and vertical stacking, custom spacing, and alignment options.
+
+## Usage
+
+```html
+<ds-button-group>
+  <ds-button>Primary</ds-button>
+  <ds-button variant="secondary">Secondary</ds-button>
+</ds-button-group>
+```
+
+## Examples
+
+### Default (Left Aligned)
+<Canvas>
+  <Story name="Default" story={stories.Default} />
+</Canvas>
+
+### Right Aligned (Dialog Footer)
+<Canvas>
+  <Story name="RightAligned" story={stories.RightAligned} />
+</Canvas>
+
+### Vertical Stack
+<Canvas>
+  <Story name="VerticalStack" story={stories.Stacked} />
+</Canvas>
+
+## API
+
+<Controls />

package/src/ds-button-group/ds-button-group.stories.js

@@ -0,0 +1,47 @@
+import { html } from 'lit';
+import './ds-button-group';
+import '../ds-button/ds-button';
+
+export default {
+  title: 'Components/Button Group',
+  component: 'ds-button-group',
+  argTypes: {
+    align: {
+      control: { type: 'select' },
+      options: ['start', 'end', 'stack'],
+      description: 'Layout of the buttons. "end" reverses visual order. "stack" is vertical full-width.',
+    },
+  },
+};
+
+const Template = ({ align }) => html`
+  <div style="max-width: 300px;">
+    <ds-button-group align=${align}>
+      <ds-button variant="primary">Primary</ds-button>
+      <ds-button variant="secondary">Secondary</ds-button>
+      <ds-button variant="action">Action</ds-button>
+    </ds-button-group>
+  </div>
+`;
+
+export const Default = Template.bind({});
+Default.args = {
+  align: 'start',
+};
+
+export const RightAligned = Template.bind({});
+RightAligned.args = {
+  align: 'end',
+};
+RightAligned.parameters = {
+  docs: {
+    description: {
+      story: 'Visual Order is reversed [Action] [Secondary] [Primary] relative to DOM.',
+    },
+  },
+};
+
+export const Stacked = Template.bind({});
+Stacked.args = {
+  align: 'stack',
+};

package/src/ds-button-group/ds-button-group.test.js

@@ -0,0 +1,47 @@
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+import './ds-button-group.js';
+import '../ds-button/ds-button.js';
+
+describe('ds-button-group', () => {
+  let container;
+
+  beforeEach(() => {
+    container = document.createElement('div');
+    document.body.appendChild(container);
+  });
+
+  afterEach(() => {
+    container.remove();
+  });
+
+  it('renders with default values', async () => {
+    container.innerHTML = `
+      <ds-button-group>
+        <ds-button>Button 1</ds-button>
+        <ds-button>Button 2</ds-button>
+      </ds-button-group>
+    `;
+    const el = container.querySelector('ds-button-group');
+    await new Promise(resolve => setTimeout(resolve, 100));
+
+    expect(el).toBeTruthy();
+    expect(el.align).toBe('start');
+  });
+
+  it('applies correct alignment attribute', async () => {
+    container.innerHTML = '<ds-button-group align="end"></ds-button-group>';
+    const el = container.querySelector('ds-button-group');
+    await new Promise(resolve => setTimeout(resolve, 100));
+
+    expect(el.getAttribute('align')).toBe('end');
+    expect(el.align).toBe('end');
+  });
+
+  it('applies stack alignment', async () => {
+    container.innerHTML = '<ds-button-group align="stack"></ds-button-group>';
+    const el = container.querySelector('ds-button-group');
+    await new Promise(resolve => setTimeout(resolve, 100));
+
+    expect(el.getAttribute('align')).toBe('stack');
+  });
+});

package/src/ds-button-group/index.js

@@ -0,0 +1 @@
+export * from './ds-button-group';

package/src/ds-checkbox/ds-checkbox.a11y.test.js

@@ -0,0 +1,79 @@
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+import axe from 'axe-core';
+import './ds-checkbox.js';
+
+describe('ds-checkbox a11y', () => {
+    let container;
+
+    beforeEach(() => {
+        container = document.createElement('div');
+        document.body.appendChild(container);
+    });
+
+    afterEach(() => {
+        container.remove();
+    });
+
+    it('should pass axe accessibility checks in default state', async () => {
+        container.innerHTML = '<ds-checkbox label="Accept terms"></ds-checkbox>';
+        await new Promise(resolve => setTimeout(resolve, 100));
+
+        const results = await axe.run(container, {
+            rules: { 'color-contrast': { enabled: false } }
+        });
+        if (results.violations.length > 0) {
+            console.log('Violations:', JSON.stringify(results.violations, null, 2));
+        }
+        expect(results.violations).toHaveLength(0);
+    });
+
+    it('should pass axe accessibility checks when checked', async () => {
+        container.innerHTML = '<ds-checkbox label="I agree" checked></ds-checkbox>';
+        await new Promise(resolve => setTimeout(resolve, 100));
+
+        const results = await axe.run(container, {
+            rules: { 'color-contrast': { enabled: false } }
+        });
+        expect(results.violations).toHaveLength(0);
+    });
+
+    it('should pass axe accessibility checks when indeterminate', async () => {
+        container.innerHTML = '<ds-checkbox label="Select all" indeterminate></ds-checkbox>';
+        await new Promise(resolve => setTimeout(resolve, 100));
+
+        const results = await axe.run(container, {
+            rules: { 'color-contrast': { enabled: false } }
+        });
+        expect(results.violations).toHaveLength(0);
+    });
+
+    it('should pass axe accessibility checks when disabled', async () => {
+        container.innerHTML = '<ds-checkbox label="Disabled option" disabled></ds-checkbox>';
+        await new Promise(resolve => setTimeout(resolve, 100));
+
+        const results = await axe.run(container, {
+            rules: { 'color-contrast': { enabled: false } }
+        });
+        expect(results.violations).toHaveLength(0);
+    });
+
+    it('should pass axe accessibility checks in error state', async () => {
+        container.innerHTML = '<ds-checkbox label="Required field" validation-status="error"></ds-checkbox>';
+        await new Promise(resolve => setTimeout(resolve, 100));
+
+        const results = await axe.run(container, {
+            rules: { 'color-contrast': { enabled: false } }
+        });
+        expect(results.violations).toHaveLength(0);
+    });
+
+    it('should pass axe accessibility checks with required attribute', async () => {
+        container.innerHTML = '<ds-checkbox label="Required checkbox" required></ds-checkbox>';
+        await new Promise(resolve => setTimeout(resolve, 100));
+
+        const results = await axe.run(container, {
+            rules: { 'color-contrast': { enabled: false } }
+        });
+        expect(results.violations).toHaveLength(0);
+    });
+});