@boostdev/design-system-components 1.0.3 → 1.1.1

package/src/web-components/interaction/BdsToastProvider.stories.tsx

@@ -0,0 +1,73 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import type { ToastVariant } from './bds-toast-provider';
+import { BdsToastProvider } from './bds-toast-provider';
+import '../index'; // auto-registers all custom elements
+
+// Render the bds-toast-provider as a wrapper around demo content.
+// Trigger buttons call BdsToastProvider.show() — the static convenience API.
+function ToastDemo() {
+  const variants: { label: string; variant: ToastVariant }[] = [
+    { label: 'Info',    variant: 'info' },
+    { label: 'Success', variant: 'success' },
+    { label: 'Warning', variant: 'warning' },
+    { label: 'Error',   variant: 'error' },
+  ];
+
+  return React.createElement(
+    'bds-toast-provider',
+    null,
+    React.createElement(
+      'div',
+      { style: { display: 'flex', gap: '0.75rem', flexWrap: 'wrap' } },
+      ...variants.map(({ label, variant }) =>
+        React.createElement(
+          'button',
+          {
+            key: variant,
+            onClick: () => BdsToastProvider.show(`This is a ${variant} toast`, variant),
+          },
+          `Show ${label}`,
+        ),
+      ),
+    ),
+  );
+}
+
+const meta = {
+  title: 'Web Components/Interaction/ToastProvider',
+  component: ToastDemo,
+  tags: ['!stable', 'experimental'],
+  parameters: { layout: 'centered' },
+} satisfies Meta<typeof ToastDemo>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const EventAPI: Story = {
+  render: () =>
+    React.createElement(
+      'bds-toast-provider',
+      null,
+      React.createElement(
+        'div',
+        { style: { display: 'flex', flexDirection: 'column', gap: '0.5rem' } },
+        React.createElement('p', { style: { margin: 0, fontSize: '0.875rem', color: '#666' } },
+          'Uses the document event API — no import required.'),
+        React.createElement(
+          'button',
+          {
+            onClick: () =>
+              document.dispatchEvent(
+                new CustomEvent('bds-show-toast', {
+                  detail: { message: 'Fired via bds-show-toast event', variant: 'info' },
+                }),
+              ),
+          },
+          'Dispatch bds-show-toast',
+        ),
+      ),
+    ),
+};

package/src/web-components/interaction/bds-button.spec.ts

@@ -0,0 +1,95 @@
+import { fixture, cleanup } from '../test/helpers';
+import { BdsButton } from './bds-button';
+
+describe('bds-button', () => {
+  it('is registered as a custom element', () => {
+    expect(customElements.get('bds-button')).toBe(BdsButton);
+  });
+
+  it('renders a <button> by default', async () => {
+    const el = await fixture('<bds-button>Click</bds-button>');
+    const btn = el.shadowRoot!.querySelector('button');
+    expect(btn).not.toBeNull();
+    cleanup(el);
+  });
+
+  it('renders an <a> when href is set', async () => {
+    const el = await fixture('<bds-button href="/home">Home</bds-button>');
+    const a = el.shadowRoot!.querySelector('a');
+    expect(a).not.toBeNull();
+    expect(a!.getAttribute('href')).toBe('/home');
+    cleanup(el);
+  });
+
+  it('defaults to variant="default" and size="medium"', async () => {
+    const el = await fixture('<bds-button>Click</bds-button>');
+    expect(el.getAttribute('variant')).toBe('default');
+    expect(el.getAttribute('size')).toBe('medium');
+    cleanup(el);
+  });
+
+  it('reflects variant attribute', async () => {
+    const el = await fixture('<bds-button variant="ghost">Click</bds-button>');
+    expect(el.getAttribute('variant')).toBe('ghost');
+    const btn = el.shadowRoot!.querySelector('button');
+    expect(btn!.className).toContain('ghost');
+    cleanup(el);
+  });
+
+  it('reflects size attribute', async () => {
+    const el = await fixture('<bds-button size="small">Click</bds-button>');
+    const btn = el.shadowRoot!.querySelector('button');
+    expect(btn!.className).toContain('small');
+    cleanup(el);
+  });
+
+  it('sets disabled on the inner button', async () => {
+    const el = await fixture('<bds-button disabled>Click</bds-button>');
+    const btn = el.shadowRoot!.querySelector('button');
+    expect(btn!.disabled).toBe(true);
+    cleanup(el);
+  });
+
+  it('sets aria-disabled and removes href when disabled + href', async () => {
+    const el = await fixture('<bds-button href="/home" disabled>Home</bds-button>');
+    const a = el.shadowRoot!.querySelector('a');
+    expect(a!.getAttribute('aria-disabled')).toBe('true');
+    expect(a!.hasAttribute('href')).toBe(false);
+    cleanup(el);
+  });
+
+  it('applies has-pulse class when has-pulse is set', async () => {
+    const el = await fixture('<bds-button has-pulse>Click</bds-button>');
+    const btn = el.shadowRoot!.querySelector('button');
+    expect(btn!.className).toContain('has-pulse');
+    cleanup(el);
+  });
+
+  it('renders default slot content in light DOM', async () => {
+    const el = await fixture('<bds-button>Save</bds-button>');
+    expect(el.textContent?.trim()).toBe('Save');
+    cleanup(el);
+  });
+
+  it('renders icon-start slot when content is provided', async () => {
+    const el = await fixture(`
+      <bds-button>
+        <svg slot="icon-start" data-testid="icon"></svg>
+        Label
+      </bds-button>
+    `);
+    await (el as unknown as { updateComplete: Promise<void> }).updateComplete;
+    // Icon span should be present in shadow DOM
+    const iconStart = el.shadowRoot!.querySelector('.icon-start');
+    expect(iconStart).not.toBeNull();
+    cleanup(el);
+  });
+
+  it('forwards target and rel to anchor', async () => {
+    const el = await fixture('<bds-button href="/ext" target="_blank" rel="noopener">Ext</bds-button>');
+    const a = el.shadowRoot!.querySelector('a');
+    expect(a!.getAttribute('target')).toBe('_blank');
+    expect(a!.getAttribute('rel')).toBe('noopener');
+    cleanup(el);
+  });
+});

package/src/web-components/interaction/bds-button.ts

@@ -0,0 +1,293 @@
+import { LitElement, css, html, nothing } from 'lit';
+
+export type ButtonVariant = 'default' | 'ghost';
+export type ButtonSize = 'small' | 'medium' | 'large';
+
+/**
+ * `<bds-button>` — framework-agnostic Button custom element.
+ *
+ * Attributes:
+ *   variant   — "default" (filled, default) | "ghost" (transparent + outlined)
+ *   size      — "small" | "medium" (default) | "large"
+ *   disabled  — boolean
+ *   href      — renders an <a> tag instead of <button>
+ *   target    — forwarded to <a> when href is set
+ *   rel       — forwarded to <a> when href is set
+ *   has-pulse — boolean, enables the pulse ring animation
+ *   type      — "button" (default) | "submit" | "reset"
+ *
+ * Slots:
+ *   (default)    — button label
+ *   icon-start   — icon placed before the label
+ *   icon-end     — icon placed after the label
+ *
+ * Events:
+ *   click — standard DOM click (disabled buttons suppress it and set aria-disabled)
+ *
+ * @example
+ * <bds-button variant="ghost" size="small">
+ *   <svg slot="icon-start">…</svg>
+ *   Save
+ * </bds-button>
+ */
+export class BdsButton extends LitElement {
+  static styles = css`
+    @keyframes fadeZoom {
+      0%, 100% { opacity: 1; transform: scale(1); }
+      50%       { opacity: 0.75; transform: scale(1.15); }
+    }
+
+    @keyframes pulse {
+      0%   { transform: scale(1);    box-shadow: 0 0 0 0    rgb(from var(--button_pulse-color, var(--button_color, var(--bds-color_green))) r g b / 50%); }
+      70%  { transform: scale(1.01); box-shadow: 0 0 0 var(--bds-space_m) rgb(from var(--button_pulse-color, var(--button_color, var(--bds-color_green))) r g b / 0%); }
+      100% { transform: scale(1);    box-shadow: 0 0 0 0    rgb(from var(--button_pulse-color, var(--button_color, var(--bds-color_green))) r g b / 0%); }
+    }
+
+    :host {
+      display: inline-flex;
+    }
+
+    .button,
+    .button[href] {
+      all: unset;
+      position: relative;
+      font: inherit;
+      padding-inline: var(--bds-space_l);
+      display: inline-flex;
+      gap: var(--bds-space_xs);
+      border-radius: var(--button_border_radius--s, var(--bds-border_radius--s));
+      align-items: center;
+      cursor: pointer;
+      justify-content: center;
+      height: var(--button_height, 3em);
+      font-size: var(--button_font-size, inherit);
+      white-space: nowrap;
+      line-height: 1;
+
+      --button_color:    var(--bds-color_green);
+      --button_on-color: var(--bds-color_on-green);
+
+      background-color: var(--button_bg, var(--button_color));
+      color: var(--button_text, var(--button_on-color));
+      border: var(--button_border, none);
+      --bdc_color: transparent;
+
+      outline: var(--bdc-outline_width) solid var(--bdc_color);
+      outline-offset: var(--bdc-outline_offset);
+      transition: var(--bds-animation_transition),
+                  --bdc_color var(--bds-animation_transition-duration) var(--bds-animation_easing);
+    }
+
+    .button[href] {
+      text-decoration: none;
+    }
+
+    /* Variants */
+    .button.ghost {
+      --button_bg:   transparent;
+      --button_text: var(--button_color);
+      --bdc_color:   var(--button_color);
+    }
+
+    /* Sizes */
+    .button.small {
+      --button_height:    2.25em;
+      --button_font-size: var(--bds-font_size--body--s);
+      --button_border_radius--s: var(--bds-border_radius--xs);
+      padding-inline: var(--bds-space_m);
+    }
+
+    .button.medium {
+      --button_height: 3em;
+      padding-inline: var(--bds-space_l);
+    }
+
+    .button.large {
+      --button_font-size: var(--bds-font_size--heading-3);
+      --button_border_radius--s: var(--bds-border_radius--m);
+      padding-inline: var(--bds-space_xl);
+    }
+
+    /* Pulse */
+    .button.has-pulse {
+      animation: pulse 3s infinite;
+    }
+
+    /* SVG icon colour */
+    .button svg {
+      --icon__stroke: currentcolor;
+      fill: currentcolor;
+      color: currentcolor;
+      flex-shrink: 0;
+    }
+
+    /* Icon slots — hidden by default, shown when slot has content */
+    .icon-start,
+    .icon-end {
+      display: none;
+      align-items: center;
+    }
+
+    .icon-start.has-content {
+      display: flex;
+      margin-inline-start: calc(var(--bds-space_s) * -1);
+      transition: var(--bds-animation_transition);
+    }
+
+    .icon-end.has-content {
+      display: flex;
+      margin-inline-end: calc(var(--bds-space_s) * -1);
+      transition: var(--bds-animation_transition);
+    }
+
+    /* Hover icon animation */
+    @media (hover: hover) and (pointer: fine) {
+      .button:hover .icon-start svg,
+      .button:hover .icon-end svg {
+        animation: fadeZoom 2s ease-out infinite;
+      }
+
+      /* Default hover */
+      .button.default:hover {
+        --button_bg:          var(--bds-color_bg);
+        --button_text:        var(--bds-color_interactive);
+        --button_pulse-color: var(--bds-color_interactive);
+        --bdc_color:          currentcolor;
+      }
+
+      /* Ghost hover */
+      .button.ghost:hover {
+        --button_bg:   var(--button_color);
+        --button_text: var(--button_on-color);
+        --bdc_color:   transparent;
+      }
+    }
+
+    /* Focus visible */
+    .button:focus-visible {
+      outline: var(--bds-outline_default);
+      outline-offset: var(--bds-outline_offset);
+      border-radius: var(--bds-border_radius--s);
+    }
+
+    /* Disabled */
+    .button:disabled,
+    .button[aria-disabled='true'] {
+      opacity: 0.5;
+      cursor: not-allowed;
+      pointer-events: none;
+    }
+  `;
+
+  static properties = {
+    variant:          { type: String, reflect: true },
+    size:             { type: String, reflect: true },
+    disabled:         { type: Boolean, reflect: true },
+    href:             { type: String },
+    target:           { type: String },
+    rel:              { type: String },
+    hasPulse:         { type: Boolean, attribute: 'has-pulse', reflect: true },
+    type:             { type: String },
+    ariaLabel:        { type: String, attribute: 'aria-label' },
+    // Internal state
+    _iconStartFilled: { state: true },
+    _iconEndFilled:   { state: true },
+  };
+
+  // `declare` annotates the type without emitting a class field initializer
+  // that would shadow Lit's reactive accessors on the prototype.
+  declare variant: ButtonVariant;
+  declare size: ButtonSize;
+  declare disabled: boolean;
+  declare href: string | undefined;
+  declare target: string | undefined;
+  declare rel: string | undefined;
+  declare hasPulse: boolean;
+  declare type: 'button' | 'submit' | 'reset';
+  declare ariaLabel: string | null;
+  declare private _iconStartFilled: boolean;
+  declare private _iconEndFilled: boolean;
+
+  constructor() {
+    super();
+    this.variant = 'default';
+    this.size = 'medium';
+    this.disabled = false;
+    this.hasPulse = false;
+    this.type = 'button';
+    this.ariaLabel = null;
+    this._iconStartFilled = false;
+    this._iconEndFilled = false;
+  }
+
+  private _onIconSlotChange(e: Event, position: 'start' | 'end') {
+    const slot = e.target as HTMLSlotElement;
+    const filled = slot.assignedNodes({ flatten: true }).length > 0;
+    if (position === 'start') {
+      this._iconStartFilled = filled;
+    } else {
+      this._iconEndFilled = filled;
+    }
+  }
+
+  private get _classes() {
+    return `button ${this.variant} ${this.size}${this.hasPulse ? ' has-pulse' : ''}`;
+  }
+
+  private _handleAnchorClick(e: MouseEvent) {
+    if (this.disabled) {
+      e.preventDefault();
+    }
+  }
+
+  private _iconSlot(position: 'start' | 'end') {
+    const filled = position === 'start' ? this._iconStartFilled : this._iconEndFilled;
+    return html`
+      <span class="icon-${position} ${filled ? 'has-content' : ''}">
+        <slot name="icon-${position}" @slotchange=${(e: Event) => this._onIconSlotChange(e, position)}></slot>
+      </span>
+    `;
+  }
+
+  render() {
+    if (this.href) {
+      return html`
+        <a
+          class=${this._classes}
+          href=${this.disabled ? nothing : this.href}
+          target=${this.target ?? nothing}
+          rel=${this.rel ?? nothing}
+          aria-disabled=${this.disabled ? 'true' : nothing}
+          tabindex=${this.disabled ? '-1' : nothing}
+          aria-label=${this.ariaLabel ?? nothing}
+          @click=${this._handleAnchorClick}
+        >
+          ${this._iconSlot('start')}
+          <slot></slot>
+          ${this._iconSlot('end')}
+        </a>
+      `;
+    }
+
+    return html`
+      <button
+        class=${this._classes}
+        type=${this.type}
+        ?disabled=${this.disabled}
+        aria-label=${this.ariaLabel ?? nothing}
+      >
+        ${this._iconSlot('start')}
+        <slot></slot>
+        ${this._iconSlot('end')}
+      </button>
+    `;
+  }
+}
+
+customElements.define('bds-button', BdsButton);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'bds-button': BdsButton;
+  }
+}

package/src/web-components/interaction/bds-popover.spec.ts

@@ -0,0 +1,174 @@
+import { fixture, cleanup, makeCommandEvent } from '../test/helpers';
+import { BdsPopover } from './bds-popover';
+
+describe('bds-popover', () => {
+  it('is registered as a custom element', () => {
+    expect(customElements.get('bds-popover')).toBe(BdsPopover);
+  });
+
+  it('defaults to placement="bottom" and open=false', async () => {
+    const el = await fixture('<bds-popover><button slot="trigger">Open</button><p>Content</p></bds-popover>');
+    expect(el.getAttribute('placement')).toBe('bottom');
+    expect(el.hasAttribute('open')).toBe(false);
+    cleanup(el);
+  });
+
+  it('panel is hidden by default (no .open class)', async () => {
+    const el = await fixture('<bds-popover><button slot="trigger">Open</button><p>Content</p></bds-popover>');
+    const panel = el.shadowRoot!.querySelector('.panel');
+    expect(panel!.classList.contains('open')).toBe(false);
+    cleanup(el);
+  });
+
+  it('sets data-placement on the panel', async () => {
+    const el = await fixture('<bds-popover placement="right"><button slot="trigger">Open</button></bds-popover>');
+    const panel = el.shadowRoot!.querySelector('.panel');
+    expect(panel!.getAttribute('data-placement')).toBe('right');
+    cleanup(el);
+  });
+
+  it('opens when trigger slot is clicked', async () => {
+    const el = await fixture('<bds-popover><button slot="trigger">Open</button></bds-popover>') as BdsPopover;
+    const trigger = el.shadowRoot!.querySelector('slot[name="trigger"]')!;
+    trigger.dispatchEvent(new MouseEvent('click', { bubbles: true, composed: true }));
+    await el.updateComplete;
+    expect(el.open).toBe(true);
+    expect(el.hasAttribute('open')).toBe(true);
+    const panel = el.shadowRoot!.querySelector('.panel');
+    expect(panel!.classList.contains('open')).toBe(true);
+    cleanup(el);
+  });
+
+  it('closes when trigger is clicked again', async () => {
+    const el = await fixture('<bds-popover open><button slot="trigger">Open</button></bds-popover>') as BdsPopover;
+    await el.updateComplete;
+    const trigger = el.shadowRoot!.querySelector('slot[name="trigger"]')!;
+    trigger.dispatchEvent(new MouseEvent('click', { bubbles: true, composed: true }));
+    await el.updateComplete;
+    expect(el.open).toBe(false);
+    cleanup(el);
+  });
+
+  it('closes on Escape key', async () => {
+    const el = await fixture('<bds-popover open><button slot="trigger">Open</button></bds-popover>') as BdsPopover;
+    await el.updateComplete;
+    document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }));
+    await el.updateComplete;
+    expect(el.open).toBe(false);
+    cleanup(el);
+  });
+
+  it('closes on outside mousedown', async () => {
+    const el = await fixture('<bds-popover open><button slot="trigger">Open</button></bds-popover>') as BdsPopover;
+    await el.updateComplete;
+    document.body.dispatchEvent(new MouseEvent('mousedown', { bubbles: true }));
+    await el.updateComplete;
+    expect(el.open).toBe(false);
+    cleanup(el);
+  });
+
+  it('does not close on inside mousedown', async () => {
+    const el = await fixture('<bds-popover open><button slot="trigger">Open</button></bds-popover>') as BdsPopover;
+    await el.updateComplete;
+    el.dispatchEvent(new MouseEvent('mousedown', { bubbles: true }));
+    await el.updateComplete;
+    expect(el.open).toBe(true);
+    cleanup(el);
+  });
+
+  it('fires bds-open event when opened', async () => {
+    const el = await fixture('<bds-popover><button slot="trigger">Open</button></bds-popover>') as BdsPopover;
+    const handler = vi.fn();
+    el.addEventListener('bds-open', handler);
+    el.shadowRoot!.querySelector('slot[name="trigger"]')!
+      .dispatchEvent(new MouseEvent('click', { bubbles: true, composed: true }));
+    await el.updateComplete;
+    expect(handler).toHaveBeenCalledOnce();
+    cleanup(el);
+  });
+
+  it('fires bds-close event when closed', async () => {
+    const el = await fixture('<bds-popover open><button slot="trigger">Open</button></bds-popover>') as BdsPopover;
+    await el.updateComplete;
+    const handler = vi.fn();
+    el.addEventListener('bds-close', handler);
+    el.shadowRoot!.querySelector('slot[name="trigger"]')!
+      .dispatchEvent(new MouseEvent('click', { bubbles: true, composed: true }));
+    await el.updateComplete;
+    expect(handler).toHaveBeenCalledOnce();
+    cleanup(el);
+  });
+
+  it('injects a unique anchor-name CSS custom property on :host', async () => {
+    const el = await fixture('<bds-popover><button slot="trigger">Open</button></bds-popover>');
+    const anchorValue = el.style.getPropertyValue('--bds-popover-anchor');
+    expect(anchorValue).toMatch(/^--bds-popover-[a-z0-9]+$/);
+    cleanup(el);
+  });
+
+  it('panel has role="region" and aria-label="Popover"', async () => {
+    const el = await fixture('<bds-popover><button slot="trigger">Open</button></bds-popover>');
+    const panel = el.shadowRoot!.querySelector('.panel');
+    expect(panel!.getAttribute('role')).toBe('region');
+    expect(panel!.getAttribute('aria-label')).toBe('Popover');
+    cleanup(el);
+  });
+
+  describe('Invoker Commands API (command event on host)', () => {
+    it('opens on --open command', async () => {
+      const el = await fixture('<bds-popover id="p1"><button slot="trigger">T</button></bds-popover>') as BdsPopover;
+      el.dispatchEvent(makeCommandEvent('--open'));
+      await el.updateComplete;
+      expect(el.open).toBe(true);
+      cleanup(el);
+    });
+
+    it('closes on --close command', async () => {
+      const el = await fixture('<bds-popover id="p2" open><button slot="trigger">T</button></bds-popover>') as BdsPopover;
+      await el.updateComplete;
+      el.dispatchEvent(makeCommandEvent('--close'));
+      await el.updateComplete;
+      expect(el.open).toBe(false);
+      cleanup(el);
+    });
+
+    it('toggles on --toggle command', async () => {
+      const el = await fixture('<bds-popover id="p3"><button slot="trigger">T</button></bds-popover>') as BdsPopover;
+      el.dispatchEvent(makeCommandEvent('--toggle'));
+      await el.updateComplete;
+      expect(el.open).toBe(true);
+      el.dispatchEvent(makeCommandEvent('--toggle'));
+      await el.updateComplete;
+      expect(el.open).toBe(false);
+      cleanup(el);
+    });
+
+    it('fires bds-open event on --open command', async () => {
+      const el = await fixture('<bds-popover id="p4"><button slot="trigger">T</button></bds-popover>') as BdsPopover;
+      const handler = vi.fn();
+      el.addEventListener('bds-open', handler);
+      el.dispatchEvent(makeCommandEvent('--open'));
+      await el.updateComplete;
+      expect(handler).toHaveBeenCalledOnce();
+      cleanup(el);
+    });
+
+    it('ignores unknown commands', async () => {
+      const el = await fixture('<bds-popover id="p5"><button slot="trigger">T</button></bds-popover>') as BdsPopover;
+      el.dispatchEvent(makeCommandEvent('--unknown'));
+      await el.updateComplete;
+      expect(el.open).toBe(false);
+      cleanup(el);
+    });
+  });
+
+  it('two instances get different anchor names', async () => {
+    const a = await fixture('<bds-popover><button slot="trigger">A</button></bds-popover>');
+    const b = await fixture('<bds-popover><button slot="trigger">B</button></bds-popover>');
+    const anchorA = a.style.getPropertyValue('--bds-popover-anchor');
+    const anchorB = b.style.getPropertyValue('--bds-popover-anchor');
+    expect(anchorA).not.toBe(anchorB);
+    cleanup(a);
+    cleanup(b);
+  });
+});