@dsn-starter-kit/components-web 1.0.0

package/src/button/Button.test.ts

@@ -0,0 +1,360 @@
+import { describe, it, expect, beforeAll, beforeEach, vi } from 'vitest';
+import { DsnButton, defineButton } from './Button';
+
+// Register the custom element once for all tests
+beforeAll(() => {
+  defineButton();
+});
+
+function createElement(attrs: Record<string, string> = {}): DsnButton {
+  const el = document.createElement('dsn-button') as DsnButton;
+  for (const [key, value] of Object.entries(attrs)) {
+    el.setAttribute(key, value);
+  }
+  document.body.appendChild(el);
+  return el;
+}
+
+function getInternalButton(el: DsnButton): HTMLButtonElement {
+  return el.shadowRoot!.querySelector('button')!;
+}
+
+describe('DsnButton', () => {
+  beforeEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  describe('rendering', () => {
+    it('creates a shadow root', () => {
+      const el = createElement();
+      expect(el.shadowRoot).not.toBeNull();
+    });
+
+    it('renders an internal button element', () => {
+      const el = createElement();
+      const btn = getInternalButton(el);
+      expect(btn).toBeInstanceOf(HTMLButtonElement);
+    });
+
+    it('renders a style element in shadow DOM', () => {
+      const el = createElement();
+      const style = el.shadowRoot!.querySelector('style');
+      expect(style).not.toBeNull();
+      expect(style!.textContent).toContain('.dsn-button');
+    });
+
+    it('renders a default slot for content projection', () => {
+      const el = createElement();
+      const slot = el.shadowRoot!.querySelector('slot:not([name])');
+      expect(slot).not.toBeNull();
+    });
+
+    it('renders an icon-start named slot', () => {
+      const el = createElement();
+      const slot = el.shadowRoot!.querySelector('slot[name="icon-start"]');
+      expect(slot).not.toBeNull();
+    });
+
+    it('renders an icon-end named slot', () => {
+      const el = createElement();
+      const slot = el.shadowRoot!.querySelector('slot[name="icon-end"]');
+      expect(slot).not.toBeNull();
+    });
+
+    it('renders slots in correct order: icon-start, default, icon-end', () => {
+      const el = createElement();
+      const btn = getInternalButton(el);
+      const slots = btn.querySelectorAll('slot');
+      expect(slots).toHaveLength(3);
+      expect(slots[0].getAttribute('name')).toBe('icon-start');
+      expect(slots[1].getAttribute('name')).toBeNull();
+      expect(slots[2].getAttribute('name')).toBe('icon-end');
+    });
+  });
+
+  describe('default values', () => {
+    it('defaults variant to "strong"', () => {
+      const el = createElement();
+      expect(el.variant).toBe('strong');
+    });
+
+    it('defaults size to "default"', () => {
+      const el = createElement();
+      expect(el.size).toBe('default');
+    });
+
+    it('defaults type to "button"', () => {
+      const el = createElement();
+      expect(el.type).toBe('button');
+    });
+
+    it('defaults disabled to false', () => {
+      const el = createElement();
+      expect(el.disabled).toBe(false);
+    });
+
+    it('defaults loading to false', () => {
+      const el = createElement();
+      expect(el.loading).toBe(false);
+    });
+
+    it('defaults fullWidth to false', () => {
+      const el = createElement();
+      expect(el.fullWidth).toBe(false);
+    });
+
+    it('defaults iconOnly to false', () => {
+      const el = createElement();
+      expect(el.iconOnly).toBe(false);
+    });
+  });
+
+  describe('CSS classes', () => {
+    it('applies default classes', () => {
+      const el = createElement();
+      const btn = getInternalButton(el);
+      expect(btn.className).toBe(
+        'dsn-button dsn-button--strong dsn-button--size-default'
+      );
+    });
+
+    it('applies variant class from attribute', () => {
+      const el = createElement({ variant: 'subtle' });
+      const btn = getInternalButton(el);
+      expect(btn.className).toContain('dsn-button--subtle');
+    });
+
+    it('applies size class from attribute', () => {
+      const el = createElement({ size: 'large' });
+      const btn = getInternalButton(el);
+      expect(btn.className).toContain('dsn-button--size-large');
+    });
+
+    it('applies loading class', () => {
+      const el = createElement({ loading: '' });
+      const btn = getInternalButton(el);
+      expect(btn.className).toContain('dsn-button--loading');
+    });
+
+    it('applies full-width class', () => {
+      const el = createElement({ 'full-width': '' });
+      const btn = getInternalButton(el);
+      expect(btn.className).toContain('dsn-button--full-width');
+    });
+
+    it('applies icon-only class', () => {
+      const el = createElement({ 'icon-only': '' });
+      const btn = getInternalButton(el);
+      expect(btn.className).toContain('dsn-button--icon-only');
+    });
+
+    it('updates classes when variant changes', () => {
+      const el = createElement({ variant: 'strong' });
+      const btn = getInternalButton(el);
+      expect(btn.className).toContain('dsn-button--strong');
+
+      el.variant = 'default';
+      expect(btn.className).toContain('dsn-button--default');
+      expect(btn.className).not.toContain('dsn-button--strong');
+    });
+
+    it('updates classes when size changes', () => {
+      const el = createElement({ size: 'small' });
+      const btn = getInternalButton(el);
+      expect(btn.className).toContain('dsn-button--size-small');
+
+      el.size = 'large';
+      expect(btn.className).toContain('dsn-button--size-large');
+      expect(btn.className).not.toContain('dsn-button--size-small');
+    });
+  });
+
+  describe('disabled state', () => {
+    it('disables internal button when disabled attribute is set', () => {
+      const el = createElement({ disabled: '' });
+      const btn = getInternalButton(el);
+      expect(btn.disabled).toBe(true);
+    });
+
+    it('enables internal button when disabled is removed', () => {
+      const el = createElement({ disabled: '' });
+      const btn = getInternalButton(el);
+      expect(btn.disabled).toBe(true);
+
+      el.disabled = false;
+      expect(btn.disabled).toBe(false);
+    });
+
+    it('reflects disabled property to attribute', () => {
+      const el = createElement();
+      el.disabled = true;
+      expect(el.hasAttribute('disabled')).toBe(true);
+
+      el.disabled = false;
+      expect(el.hasAttribute('disabled')).toBe(false);
+    });
+  });
+
+  describe('loading state', () => {
+    it('disables internal button when loading', () => {
+      const el = createElement({ loading: '' });
+      const btn = getInternalButton(el);
+      expect(btn.disabled).toBe(true);
+    });
+
+    it('sets aria-busy when loading', () => {
+      const el = createElement({ loading: '' });
+      const btn = getInternalButton(el);
+      expect(btn.getAttribute('aria-busy')).toBe('true');
+    });
+
+    it('removes aria-busy when loading is removed', () => {
+      const el = createElement({ loading: '' });
+      const btn = getInternalButton(el);
+      expect(btn.getAttribute('aria-busy')).toBe('true');
+
+      el.loading = false;
+      expect(btn.hasAttribute('aria-busy')).toBe(false);
+    });
+
+    it('adds loading class and disables button', () => {
+      const el = createElement();
+      el.loading = true;
+      const btn = getInternalButton(el);
+
+      expect(btn.className).toContain('dsn-button--loading');
+      expect(btn.disabled).toBe(true);
+      expect(btn.getAttribute('aria-busy')).toBe('true');
+    });
+
+    it('reflects loading property to attribute', () => {
+      const el = createElement();
+      el.loading = true;
+      expect(el.hasAttribute('loading')).toBe(true);
+
+      el.loading = false;
+      expect(el.hasAttribute('loading')).toBe(false);
+    });
+  });
+
+  describe('full-width', () => {
+    it('reflects fullWidth property to full-width attribute', () => {
+      const el = createElement();
+      el.fullWidth = true;
+      expect(el.hasAttribute('full-width')).toBe(true);
+
+      el.fullWidth = false;
+      expect(el.hasAttribute('full-width')).toBe(false);
+    });
+  });
+
+  describe('icon-only', () => {
+    it('reflects iconOnly property to icon-only attribute', () => {
+      const el = createElement();
+      el.iconOnly = true;
+      expect(el.hasAttribute('icon-only')).toBe(true);
+
+      el.iconOnly = false;
+      expect(el.hasAttribute('icon-only')).toBe(false);
+    });
+  });
+
+  describe('type attribute', () => {
+    it('sets internal button type', () => {
+      const el = createElement({ type: 'submit' });
+      const btn = getInternalButton(el);
+      expect(btn.getAttribute('type')).toBe('submit');
+    });
+
+    it('defaults internal button type to "button"', () => {
+      const el = createElement();
+      const btn = getInternalButton(el);
+      expect(btn.getAttribute('type')).toBe('button');
+    });
+
+    it('updates internal button type when property changes', () => {
+      const el = createElement();
+      el.type = 'reset';
+      const btn = getInternalButton(el);
+      expect(btn.getAttribute('type')).toBe('reset');
+    });
+  });
+
+  describe('focus delegation', () => {
+    it('delegates focus to internal button', () => {
+      const el = createElement();
+      const btn = getInternalButton(el);
+      const focusSpy = vi.spyOn(btn, 'focus');
+
+      el.focus();
+      expect(focusSpy).toHaveBeenCalled();
+    });
+
+    it('delegates blur to internal button', () => {
+      const el = createElement();
+      const btn = getInternalButton(el);
+      const blurSpy = vi.spyOn(btn, 'blur');
+
+      el.blur();
+      expect(blurSpy).toHaveBeenCalled();
+    });
+
+    it('delegates click to internal button', () => {
+      const el = createElement();
+      const btn = getInternalButton(el);
+      const clickSpy = vi.spyOn(btn, 'click');
+
+      el.click();
+      expect(clickSpy).toHaveBeenCalled();
+    });
+  });
+
+  describe('all variants', () => {
+    const variants = [
+      'strong',
+      'strong-negative',
+      'strong-positive',
+      'default',
+      'default-negative',
+      'default-positive',
+      'subtle',
+      'subtle-negative',
+      'subtle-positive',
+      'link',
+    ] as const;
+
+    variants.forEach((variant) => {
+      it(`applies class for variant "${variant}"`, () => {
+        const el = createElement({ variant });
+        const btn = getInternalButton(el);
+        expect(btn.className).toContain(`dsn-button--${variant}`);
+      });
+    });
+  });
+
+  describe('all sizes', () => {
+    const sizes = ['small', 'default', 'large'] as const;
+
+    sizes.forEach((size) => {
+      it(`applies class for size "${size}"`, () => {
+        const el = createElement({ size });
+        const btn = getInternalButton(el);
+        expect(btn.className).toContain(`dsn-button--size-${size}`);
+      });
+    });
+  });
+});
+
+describe('defineButton', () => {
+  it('does not throw when called with an already-registered tag', () => {
+    expect(() => defineButton('dsn-button')).not.toThrow();
+  });
+
+  it('registers a custom element with a custom tag name', () => {
+    // DsnButton constructor is already registered as 'dsn-button',
+    // so re-registering under another name is not allowed by the spec.
+    // Instead, verify that the existing registration works.
+    const el = document.createElement('dsn-button');
+    expect(el).toBeInstanceOf(DsnButton);
+  });
+});

package/src/button/Button.ts

@@ -0,0 +1,299 @@
+/**
+ * DSN Button Web Component
+ *
+ * A custom element that provides a styled button with multiple variants and sizes.
+ * Uses the same CSS classes and design tokens as the HTML and React button components.
+ *
+ * @example
+ * ```html
+ * <dsn-button variant="strong" size="default">Save</dsn-button>
+ * <dsn-button variant="strong-negative" size="small">Delete</dsn-button>
+ * <dsn-button variant="default" loading>Loading...</dsn-button>
+ * <dsn-button variant="subtle" icon-only aria-label="Close">×</dsn-button>
+ * ```
+ */
+
+export type ButtonVariant =
+  | 'strong'
+  | 'strong-negative'
+  | 'strong-positive'
+  | 'default'
+  | 'default-negative'
+  | 'default-positive'
+  | 'subtle'
+  | 'subtle-negative'
+  | 'subtle-positive'
+  | 'link';
+
+export type ButtonSize = 'small' | 'default' | 'large';
+
+// Auto-generated CSS from shared source — run `node scripts/build-css.js` to regenerate
+import { buttonStyles } from './button-styles.generated';
+import { iconPaths } from '../icon/icon-paths.generated';
+
+export class DsnButton extends HTMLElement {
+  static get observedAttributes(): string[] {
+    return [
+      'variant',
+      'size',
+      'disabled',
+      'loading',
+      'full-width',
+      'icon-only',
+      'type',
+    ];
+  }
+
+  private _button: HTMLButtonElement;
+  private _iconStartSlot: HTMLSlotElement;
+  private _loaderEl: SVGElement | null = null;
+
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+
+    // Create the internal button element
+    this._button = document.createElement('button');
+    this._button.setAttribute('type', 'button');
+    this._iconStartSlot = document.createElement('slot');
+    this._iconStartSlot.setAttribute('name', 'icon-start');
+    this._button.appendChild(this._iconStartSlot);
+    this._button.appendChild(document.createElement('slot'));
+    const iconEndSlot = document.createElement('slot');
+    iconEndSlot.setAttribute('name', 'icon-end');
+    this._button.appendChild(iconEndSlot);
+
+    // Create style element with embedded CSS
+    const style = document.createElement('style');
+    style.textContent = buttonStyles;
+
+    this.shadowRoot!.appendChild(style);
+    this.shadowRoot!.appendChild(this._button);
+  }
+
+  connectedCallback(): void {
+    this._updateClasses();
+    this._updateDisabled();
+    this._updateType();
+  }
+
+  attributeChangedCallback(
+    name: string,
+    _oldValue: string | null,
+    _newValue: string | null
+  ): void {
+    switch (name) {
+      case 'variant':
+      case 'size':
+      case 'loading':
+      case 'full-width':
+      case 'icon-only':
+        this._updateClasses();
+        break;
+      case 'disabled':
+        this._updateDisabled();
+        break;
+      case 'type':
+        this._updateType();
+        break;
+    }
+
+    // Loading affects classes, disabled state, and loader icon
+    if (name === 'loading') {
+      this._updateDisabled();
+      this._updateLoader();
+    }
+  }
+
+  private _updateLoader(): void {
+    if (this.loading) {
+      if (!this._loaderEl) {
+        this._loaderEl = this._createLoaderSvg();
+      }
+      // Hide the icon-start slot and show loader instead
+      this._iconStartSlot.style.display = 'none';
+      this._button.insertBefore(this._loaderEl, this._iconStartSlot);
+    } else {
+      if (this._loaderEl && this._loaderEl.parentNode) {
+        this._loaderEl.remove();
+      }
+      this._iconStartSlot.style.display = '';
+    }
+  }
+
+  private _createLoaderSvg(): SVGElement {
+    const ns = 'http://www.w3.org/2000/svg';
+    const svg = document.createElementNS(ns, 'svg');
+    svg.setAttribute('viewBox', '0 0 24 24');
+    svg.setAttribute('fill', 'none');
+    svg.setAttribute('stroke', 'currentColor');
+    svg.setAttribute('stroke-width', '2');
+    svg.setAttribute('stroke-linecap', 'round');
+    svg.setAttribute('stroke-linejoin', 'round');
+    svg.setAttribute('aria-hidden', 'true');
+    svg.classList.add('dsn-icon', 'dsn-button__loader');
+
+    const paths = iconPaths['loader'] || [];
+    paths.forEach((d) => {
+      const path = document.createElementNS(ns, 'path');
+      path.setAttribute('d', d);
+      // Skip the transparent fill path (bounding box)
+      if (d === 'M0 0h24v24H0z') {
+        path.setAttribute('stroke', 'none');
+        path.setAttribute('fill', 'none');
+      }
+      svg.appendChild(path);
+    });
+
+    return svg;
+  }
+
+  private _updateClasses(): void {
+    const variant = this.variant;
+    const size = this.size;
+    const loading = this.loading;
+    const fullWidth = this.fullWidth;
+    const iconOnly = this.iconOnly;
+
+    const classes = [
+      'dsn-button',
+      `dsn-button--${variant}`,
+      `dsn-button--size-${size}`,
+    ];
+
+    if (loading) {
+      classes.push('dsn-button--loading');
+    }
+    if (fullWidth) {
+      classes.push('dsn-button--full-width');
+    }
+    if (iconOnly) {
+      classes.push('dsn-button--icon-only');
+    }
+
+    this._button.className = classes.join(' ');
+  }
+
+  private _updateDisabled(): void {
+    const isDisabled = this.disabled || this.loading;
+    if (isDisabled) {
+      this._button.setAttribute('disabled', '');
+    } else {
+      this._button.removeAttribute('disabled');
+    }
+
+    if (this.loading) {
+      this._button.setAttribute('aria-busy', 'true');
+    } else {
+      this._button.removeAttribute('aria-busy');
+    }
+  }
+
+  private _updateType(): void {
+    this._button.setAttribute('type', this.type);
+  }
+
+  // Property: variant
+  get variant(): ButtonVariant {
+    return (this.getAttribute('variant') as ButtonVariant) || 'strong';
+  }
+
+  set variant(value: ButtonVariant) {
+    this.setAttribute('variant', value);
+  }
+
+  // Property: size
+  get size(): ButtonSize {
+    return (this.getAttribute('size') as ButtonSize) || 'default';
+  }
+
+  set size(value: ButtonSize) {
+    this.setAttribute('size', value);
+  }
+
+  // Property: disabled
+  get disabled(): boolean {
+    return this.hasAttribute('disabled');
+  }
+
+  set disabled(value: boolean) {
+    if (value) {
+      this.setAttribute('disabled', '');
+    } else {
+      this.removeAttribute('disabled');
+    }
+  }
+
+  // Property: loading
+  get loading(): boolean {
+    return this.hasAttribute('loading');
+  }
+
+  set loading(value: boolean) {
+    if (value) {
+      this.setAttribute('loading', '');
+    } else {
+      this.removeAttribute('loading');
+    }
+  }
+
+  // Property: fullWidth (maps to full-width attribute)
+  get fullWidth(): boolean {
+    return this.hasAttribute('full-width');
+  }
+
+  set fullWidth(value: boolean) {
+    if (value) {
+      this.setAttribute('full-width', '');
+    } else {
+      this.removeAttribute('full-width');
+    }
+  }
+
+  // Property: iconOnly (maps to icon-only attribute)
+  get iconOnly(): boolean {
+    return this.hasAttribute('icon-only');
+  }
+
+  set iconOnly(value: boolean) {
+    if (value) {
+      this.setAttribute('icon-only', '');
+    } else {
+      this.removeAttribute('icon-only');
+    }
+  }
+
+  // Property: type
+  get type(): string {
+    return this.getAttribute('type') || 'button';
+  }
+
+  set type(value: string) {
+    this.setAttribute('type', value);
+  }
+
+  // Expose the internal button for form submission
+  get form(): HTMLFormElement | null {
+    return this._button.form;
+  }
+
+  // Focus delegation
+  focus(options?: FocusOptions): void {
+    this._button.focus(options);
+  }
+
+  blur(): void {
+    this._button.blur();
+  }
+
+  click(): void {
+    this._button.click();
+  }
+}
+
+// Register the custom element
+export function defineButton(tagName = 'dsn-button'): void {
+  if (!customElements.get(tagName)) {
+    customElements.define(tagName, DsnButton);
+  }
+}