@boostdev/design-system-components 1.1.1 → 1.1.2

package/src/web-components/ui/bds-link.ts

@@ -0,0 +1,138 @@
+import { LitElement, css, html, nothing } from 'lit';
+
+export type LinkVariant = 'default' | 'subtle' | 'standalone';
+
+/**
+ * `<bds-link>` — framework-agnostic Link custom element.
+ *
+ * Attributes:
+ *   href           — URL for the anchor
+ *   target         — link target (e.g. "_blank")
+ *   variant        — "default" (default) | "subtle" | "standalone"
+ *   external       — boolean; when set, adds rel="noreferrer noopener" and a
+ *                    visually-hidden label for screen readers
+ *   external-label — the screen reader text appended for external links
+ *                    (default: "(opens in new tab)")
+ *
+ * Slots:
+ *   (default) — link text / content
+ *
+ * @example
+ * <bds-link href="https://example.com" external>Visit site</bds-link>
+ */
+export class BdsLink extends LitElement {
+  static styles = css`
+    :host {
+      display: inline;
+    }
+
+    .link {
+      color: var(--link_color, var(--bds-color_interactive_on-bg));
+      text-decoration: underline;
+      text-underline-offset: 0.2em;
+      transition: var(--bds-animation_transition);
+      cursor: pointer;
+    }
+
+    .link:focus-visible {
+      outline: var(--bds-outline_default);
+      outline-offset: var(--bds-outline_offset);
+      border-radius: var(--bds-border_radius--xs);
+    }
+
+    @media (hover: hover) and (pointer: fine) {
+      .link:hover {
+        --link_color: var(--link_color-hover, var(--bds-color_blue--strong));
+      }
+    }
+
+    .link.--variant_default {
+      --link_color:       var(--bds-color_interactive_on-bg);
+      --link_color-hover: var(--bds-color_blue--strong);
+    }
+
+    .link.--variant_subtle {
+      --link_color:       var(--bds-color_on-bg);
+      --link_color-hover: var(--bds-color_interactive_on-bg);
+    }
+
+    .link.--variant_standalone {
+      --link_color:       var(--bds-color_interactive_on-bg);
+      --link_color-hover: var(--bds-color_blue--strong);
+      display: inline-flex;
+      align-items: center;
+      gap: var(--bds-space_xxs);
+      font-weight: var(--bds-font_weight--semibold);
+      text-decoration: none;
+    }
+
+    @media (hover: hover) and (pointer: fine) {
+      .link.--variant_standalone:hover {
+        text-decoration: underline;
+        text-underline-offset: 0.2em;
+      }
+    }
+
+    .external-label {
+      position: absolute;
+      inline-size: 1px;
+      block-size: 1px;
+      padding: 0;
+      margin: -1px;
+      overflow: hidden;
+      clip: rect(0, 0, 0, 0);
+      white-space: nowrap;
+      border-width: 0;
+    }
+  `;
+
+  static properties = {
+    href:          { type: String },
+    target:        { type: String },
+    variant:       { type: String, reflect: true },
+    external:      { type: Boolean, reflect: true },
+    externalLabel: { type: String, attribute: 'external-label' },
+  };
+
+  declare href: string;
+  declare target: string;
+  declare variant: LinkVariant;
+  declare external: boolean;
+  declare externalLabel: string;
+
+  constructor() {
+    super();
+    this.href = '';
+    this.target = '';
+    this.variant = 'default';
+    this.external = false;
+    this.externalLabel = '(opens in new tab)';
+  }
+
+  render() {
+    const rel = this.external ? 'noreferrer noopener' : nothing;
+    const target = this.external ? '_blank' : (this.target || nothing);
+
+    return html`
+      <a
+        class="link --variant_${this.variant}"
+        href=${this.href || nothing}
+        target=${target}
+        rel=${rel}
+      >
+        <slot></slot>
+        ${this.external
+          ? html`<span class="external-label">${this.externalLabel}</span>`
+          : nothing}
+      </a>
+    `;
+  }
+}
+
+customElements.define('bds-link', BdsLink);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'bds-link': BdsLink;
+  }
+}

package/src/web-components/ui/bds-loading.spec.ts

@@ -0,0 +1,38 @@
+import { fixture, cleanup } from '../test/helpers';
+import { BdsLoading } from './bds-loading';
+
+describe('bds-loading', () => {
+  it('is registered as a custom element', () => {
+    expect(customElements.get('bds-loading')).toBe(BdsLoading);
+  });
+
+  it('defaults to size="medium"', async () => {
+    const el = await fixture('<bds-loading></bds-loading>');
+    expect(el.getAttribute('size')).toBe('medium');
+    cleanup(el);
+  });
+
+  it('renders a spinner in shadow DOM', async () => {
+    const el = await fixture('<bds-loading></bds-loading>');
+    const spinner = el.shadowRoot!.querySelector('.spinner');
+    expect(spinner).not.toBeNull();
+    cleanup(el);
+  });
+
+  it('spinner has role="status" and aria-label="Loading"', async () => {
+    const el = await fixture('<bds-loading></bds-loading>');
+    const spinner = el.shadowRoot!.querySelector('.spinner');
+    expect(spinner!.getAttribute('role')).toBe('status');
+    expect(spinner!.getAttribute('aria-label')).toBe('Loading');
+    cleanup(el);
+  });
+
+  it('reflects size attribute', async () => {
+    const el = await fixture('<bds-loading size="large"></bds-loading>') as BdsLoading;
+    expect(el.size).toBe('large');
+    el.size = 'small';
+    await el.updateComplete;
+    expect(el.getAttribute('size')).toBe('small');
+    cleanup(el);
+  });
+});

package/src/web-components/ui/bds-loading.ts

@@ -0,0 +1,76 @@
+import { LitElement, css, html } from 'lit';
+
+/**
+ * `<bds-loading>` — framework-agnostic Loading spinner custom element.
+ *
+ * Attributes:
+ *   size — "small" | "medium" (default) | "large"
+ *
+ * @example
+ * <bds-loading></bds-loading>
+ * <bds-loading size="large"></bds-loading>
+ */
+export class BdsLoading extends LitElement {
+  static styles = css`
+    :host {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+
+    .spinner {
+      inline-size: 2.5em;
+      block-size: 2.5em;
+      border: 4px solid var(--bds-color_bg);
+      border-block-start: 4px solid var(--bds-color_interactive);
+      border-radius: 50%;
+      animation: spin 1s linear infinite;
+    }
+
+    :host([size='small']) .spinner {
+      inline-size: 1.5em;
+      block-size: 1.5em;
+      border-width: 2px;
+    }
+
+    :host([size='large']) .spinner {
+      inline-size: 4em;
+      block-size: 4em;
+      border-width: 6px;
+    }
+
+    @keyframes spin {
+      0% { transform: rotate(0deg); }
+      100% { transform: rotate(360deg); }
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      .spinner {
+        animation: none;
+      }
+    }
+  `;
+
+  static properties = {
+    size: { type: String, reflect: true },
+  };
+
+  declare size: 'small' | 'medium' | 'large';
+
+  constructor() {
+    super();
+    this.size = 'medium';
+  }
+
+  render() {
+    return html`<div class="spinner" role="status" aria-label="Loading"></div>`;
+  }
+}
+
+customElements.define('bds-loading', BdsLoading);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'bds-loading': BdsLoading;
+  }
+}

package/src/web-components/ui/bds-notification-banner.spec.ts

@@ -0,0 +1,82 @@
+import { fixture, cleanup } from '../test/helpers';
+import { BdsNotificationBanner } from './bds-notification-banner';
+
+describe('bds-notification-banner', () => {
+  it('is registered as a custom element', () => {
+    expect(customElements.get('bds-notification-banner')).toBe(BdsNotificationBanner);
+  });
+
+  it('defaults to variant="info"', async () => {
+    const el = await fixture('<bds-notification-banner>Message</bds-notification-banner>');
+    expect(el.getAttribute('variant')).toBe('info');
+    cleanup(el);
+  });
+
+  it('renders banner with role="status" for info variant', async () => {
+    const el = await fixture('<bds-notification-banner variant="info">Info</bds-notification-banner>');
+    const banner = el.shadowRoot!.querySelector('.banner');
+    expect(banner!.getAttribute('role')).toBe('status');
+    expect(banner!.getAttribute('aria-live')).toBe('polite');
+    cleanup(el);
+  });
+
+  it('renders banner with role="alert" for error variant', async () => {
+    const el = await fixture('<bds-notification-banner variant="error">Error</bds-notification-banner>');
+    const banner = el.shadowRoot!.querySelector('.banner');
+    expect(banner!.getAttribute('role')).toBe('alert');
+    expect(banner!.getAttribute('aria-live')).toBe('assertive');
+    cleanup(el);
+  });
+
+  it('renders banner with role="alert" for warning variant', async () => {
+    const el = await fixture('<bds-notification-banner variant="warning">Warning</bds-notification-banner>');
+    const banner = el.shadowRoot!.querySelector('.banner');
+    expect(banner!.getAttribute('role')).toBe('alert');
+    cleanup(el);
+  });
+
+  it('does not render dismiss button by default', async () => {
+    const el = await fixture('<bds-notification-banner>Message</bds-notification-banner>');
+    expect(el.shadowRoot!.querySelector('button.dismiss')).toBeNull();
+    cleanup(el);
+  });
+
+  it('renders dismiss button when dismissible is set', async () => {
+    const el = await fixture('<bds-notification-banner dismissible>Message</bds-notification-banner>');
+    const btn = el.shadowRoot!.querySelector('button.dismiss');
+    expect(btn).not.toBeNull();
+    expect(btn!.getAttribute('aria-label')).toBe('Dismiss notification');
+    cleanup(el);
+  });
+
+  it('uses custom dismiss-label when set', async () => {
+    const el = await fixture('<bds-notification-banner dismissible dismiss-label="Close banner">Message</bds-notification-banner>');
+    const btn = el.shadowRoot!.querySelector('button.dismiss');
+    expect(btn!.getAttribute('aria-label')).toBe('Close banner');
+    cleanup(el);
+  });
+
+  it('fires bds-dismiss when dismiss button is clicked', async () => {
+    const el = await fixture('<bds-notification-banner dismissible>Message</bds-notification-banner>');
+    const btn = el.shadowRoot!.querySelector('button.dismiss')!;
+    const handler = vi.fn();
+    el.addEventListener('bds-dismiss', handler);
+    btn.dispatchEvent(new MouseEvent('click', { bubbles: true, composed: true }));
+    expect(handler).toHaveBeenCalledOnce();
+    cleanup(el);
+  });
+
+  it('renders slotted content', async () => {
+    const el = await fixture('<bds-notification-banner>Hello world</bds-notification-banner>');
+    expect(el.textContent?.trim()).toBe('Hello world');
+    cleanup(el);
+  });
+
+  it('reflects variant property updates', async () => {
+    const el = await fixture('<bds-notification-banner>Message</bds-notification-banner>') as BdsNotificationBanner;
+    el.variant = 'success';
+    await el.updateComplete;
+    expect(el.getAttribute('variant')).toBe('success');
+    cleanup(el);
+  });
+});

package/src/web-components/ui/bds-notification-banner.ts

@@ -0,0 +1,185 @@
+import { LitElement, css, html, nothing } from 'lit';
+
+export type NotificationBannerVariant = 'info' | 'success' | 'warning' | 'error';
+
+/**
+ * `<bds-notification-banner>` — framework-agnostic Notification Banner custom element.
+ *
+ * Attributes:
+ *   variant       — "info" (default) | "success" | "warning" | "error"
+ *   dismissible   — boolean; shows a dismiss button when present
+ *   dismiss-label — aria-label for the dismiss button (default: "Dismiss notification")
+ *
+ * Slots:
+ *   (default) — banner body content
+ *   action    — optional action area (e.g. a button)
+ *
+ * Events:
+ *   bds-dismiss — fired (bubbles, composed) when the dismiss button is clicked
+ *
+ * @example
+ * <bds-notification-banner variant="success">
+ *   Your changes have been saved.
+ *   <button slot="action" type="button">Undo</button>
+ * </bds-notification-banner>
+ */
+export class BdsNotificationBanner extends LitElement {
+  static styles = css`
+    :host {
+      display: block;
+    }
+
+    .banner {
+      display: flex;
+      align-items: center;
+      gap: var(--bds-space_m);
+      padding: var(--bds-space_s) var(--bds-space_m);
+      background-color: var(--banner_bg, var(--bds-color_blue--subtle));
+      color: var(--banner_text, var(--bds-color_on-blue--subtle));
+      border-block-end: 3px solid var(--banner_border, var(--bds-color_blue));
+      font-size: var(--bds-font_size--body);
+      line-height: var(--bds-font_line-height--body);
+      inline-size: 100%;
+      box-sizing: border-box;
+    }
+
+    :host([variant='info']) .banner {
+      --banner_bg:     var(--bds-color_blue--subtle);
+      --banner_text:   var(--bds-color_on-blue--subtle);
+      --banner_border: var(--bds-color_blue);
+    }
+
+    :host([variant='success']) .banner {
+      --banner_bg:     var(--bds-color_success--subtle);
+      --banner_text:   var(--bds-color_on-success--subtle);
+      --banner_border: var(--bds-color_success);
+    }
+
+    :host([variant='warning']) .banner {
+      --banner_bg:     var(--bds-color_orange--subtle);
+      --banner_text:   var(--bds-color_on-orange--subtle);
+      --banner_border: var(--bds-color_warning);
+    }
+
+    :host([variant='error']) .banner {
+      --banner_bg:     rgb(from var(--bds-color_error) r g b / 12%);
+      --banner_text:   var(--bds-color_on-bg);
+      --banner_border: var(--bds-color_error);
+    }
+
+    .content {
+      flex: 1;
+    }
+
+    .action {
+      flex-shrink: 0;
+      display: none;
+    }
+
+    .action.has-content {
+      display: block;
+    }
+
+    .dismiss {
+      all: unset;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-shrink: 0;
+      cursor: pointer;
+      color: currentcolor;
+      border-radius: 50%;
+      transition: var(--bds-animation_transition);
+      --bdc_color: currentcolor;
+      outline: var(--bdc-outline_width) solid var(--bdc_color);
+      outline-offset: var(--bdc-outline_offset);
+    }
+
+    .dismiss svg {
+      inline-size: 1rem;
+      block-size: 1rem;
+    }
+
+    .dismiss:focus-visible {
+      outline: var(--bds-outline_default);
+      outline-offset: var(--bds-outline_offset);
+    }
+
+    @media (hover: hover) and (pointer: fine) {
+      .dismiss:hover {
+        opacity: 0.7;
+      }
+    }
+  `;
+
+  static properties = {
+    variant:      { type: String, reflect: true },
+    dismissible:  { type: Boolean, reflect: true },
+    dismissLabel: { type: String, attribute: 'dismiss-label' },
+    _actionFilled: { state: true },
+  };
+
+  declare variant: NotificationBannerVariant;
+  declare dismissible: boolean;
+  declare dismissLabel: string;
+  declare private _actionFilled: boolean;
+
+  constructor() {
+    super();
+    this.variant = 'info';
+    this.dismissible = false;
+    this.dismissLabel = 'Dismiss notification';
+    this._actionFilled = false;
+  }
+
+  private _onActionSlotChange(e: Event) {
+    const slot = e.target as HTMLSlotElement;
+    this._actionFilled = slot.assignedNodes({ flatten: true }).length > 0;
+  }
+
+  private get _isUrgent() {
+    return this.variant === 'error' || this.variant === 'warning';
+  }
+
+  private _handleDismiss() {
+    this.dispatchEvent(new CustomEvent('bds-dismiss', { bubbles: true, composed: true }));
+  }
+
+  render() {
+    return html`
+      <div
+        class="banner"
+        role=${this._isUrgent ? 'alert' : 'status'}
+        aria-live=${this._isUrgent ? 'assertive' : 'polite'}
+        aria-atomic="true"
+      >
+        <div class="content"><slot></slot></div>
+        <div class="action ${this._actionFilled ? 'has-content' : ''}">
+          <slot name="action" @slotchange=${this._onActionSlotChange}></slot>
+        </div>
+        ${this.dismissible
+          ? html`
+              <button
+                type="button"
+                class="dismiss"
+                @click=${this._handleDismiss}
+                aria-label=${this.dismissLabel}
+              >
+                <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                  <path stroke-linecap="round" stroke-linejoin="round" d="M18 6L6 18M6 6l12 12" />
+                </svg>
+              </button>
+            `
+          : nothing}
+      </div>
+    `;
+  }
+}
+
+customElements.define('bds-notification-banner', BdsNotificationBanner);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'bds-notification-banner': BdsNotificationBanner;
+  }
+}

package/src/web-components/ui/bds-progress-circle.spec.ts

@@ -0,0 +1,58 @@
+import { fixture, cleanup } from '../test/helpers';
+import { BdsProgressCircle } from './bds-progress-circle';
+
+describe('bds-progress-circle', () => {
+  it('is registered as a custom element', () => {
+    expect(customElements.get('bds-progress-circle')).toBe(BdsProgressCircle);
+  });
+
+  it('defaults to max=100 and size="medium"', async () => {
+    const el = await fixture('<bds-progress-circle value="50" label="Loading"></bds-progress-circle>') as BdsProgressCircle;
+    expect(el.max).toBe(100);
+    expect(el.getAttribute('size')).toBe('medium');
+    cleanup(el);
+  });
+
+  it('renders a progressbar wrapper in shadow DOM', async () => {
+    const el = await fixture('<bds-progress-circle value="50" label="Loading"></bds-progress-circle>');
+    const wrapper = el.shadowRoot!.querySelector('[role="progressbar"]');
+    expect(wrapper).not.toBeNull();
+    cleanup(el);
+  });
+
+  it('sets aria-label and aria-valuenow', async () => {
+    const el = await fixture('<bds-progress-circle value="75" label="Upload"></bds-progress-circle>');
+    const wrapper = el.shadowRoot!.querySelector('[role="progressbar"]');
+    expect(wrapper!.getAttribute('aria-label')).toBe('Upload');
+    expect(wrapper!.getAttribute('aria-valuenow')).toBe('75');
+    cleanup(el);
+  });
+
+  it('renders two SVG circles (track and fill)', async () => {
+    const el = await fixture('<bds-progress-circle value="50" label="Loading"></bds-progress-circle>');
+    const circles = el.shadowRoot!.querySelectorAll('circle');
+    expect(circles.length).toBe(2);
+    cleanup(el);
+  });
+
+  it('does not render the value text by default', async () => {
+    const el = await fixture('<bds-progress-circle value="50" label="Loading"></bds-progress-circle>');
+    expect(el.shadowRoot!.querySelector('.value')).toBeNull();
+    cleanup(el);
+  });
+
+  it('renders percentage text when show-value is set', async () => {
+    const el = await fixture('<bds-progress-circle value="75" label="Loading" show-value></bds-progress-circle>');
+    const value = el.shadowRoot!.querySelector('.value');
+    expect(value).not.toBeNull();
+    expect(value!.textContent).toBe('75%');
+    cleanup(el);
+  });
+
+  it('SVG has aria-hidden="true"', async () => {
+    const el = await fixture('<bds-progress-circle value="50" label="Loading"></bds-progress-circle>');
+    const svg = el.shadowRoot!.querySelector('svg');
+    expect(svg!.getAttribute('aria-hidden')).toBe('true');
+    cleanup(el);
+  });
+});