@boostdev/design-system-components 1.1.1 → 1.2.0

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,184 @@
+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;
+      box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color);
+    }
+
+    .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);
+  });
+});

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

@@ -0,0 +1,142 @@
+import { LitElement, css, html, nothing } from 'lit';
+
+const SIZE_PX = { small: 40, medium: 64, large: 96 } as const;
+const STROKE_WIDTH = 4;
+
+/**
+ * `<bds-progress-circle>` — framework-agnostic circular Progress custom element.
+ *
+ * Attributes:
+ *   value      — current progress value (required)
+ *   max        — maximum value (default: 100)
+ *   label      — accessible label for the progress bar
+ *   show-value — boolean; when set, displays the percentage in the centre
+ *   size       — "small" | "medium" (default) | "large"
+ *
+ * @example
+ * <bds-progress-circle value="75" label="Loading" show-value></bds-progress-circle>
+ */
+export class BdsProgressCircle extends LitElement {
+  static styles = css`
+    :host {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      position: relative;
+    }
+
+    .svg {
+      display: block;
+    }
+
+    .track {
+      stroke: var(--bds-color_bg--subtle);
+    }
+
+    .fill {
+      stroke: var(--progressCircle_color-active, var(--bdc-color_active));
+      transition: stroke-dashoffset var(--bds-animation_transition-duration) var(--bds-animation_easing);
+    }
+
+    .value {
+      position: absolute;
+      font-size: var(--bds-font_size--body--s);
+      font-weight: var(--bds-font_weight--semibold);
+      font-variant-numeric: tabular-nums;
+      color: var(--bds-color_on-bg);
+      line-height: 1;
+    }
+
+    :host([size='small'])  .value { font-size: 0.5rem; }
+    :host([size='large'])  .value { font-size: var(--bds-font_size--body); }
+
+    @media (prefers-reduced-motion: reduce) {
+      .fill {
+        transition: none;
+      }
+    }
+  `;
+
+  static properties = {
+    value:     { type: Number },
+    max:       { type: Number },
+    label:     { type: String },
+    showValue: { type: Boolean, attribute: 'show-value', reflect: true },
+    size:      { type: String, reflect: true },
+  };
+
+  declare value: number;
+  declare max: number;
+  declare label: string;
+  declare showValue: boolean;
+  declare size: 'small' | 'medium' | 'large';
+
+  constructor() {
+    super();
+    this.value = 0;
+    this.max = 100;
+    this.label = '';
+    this.showValue = false;
+    this.size = 'medium';
+  }
+
+  render() {
+    const percentage = Math.min(100, Math.max(0, (this.value / this.max) * 100));
+    const px = SIZE_PX[this.size] ?? SIZE_PX.medium;
+    const radius = (px - STROKE_WIDTH * 2) / 2;
+    const circumference = 2 * Math.PI * radius;
+    const offset = circumference - (percentage / 100) * circumference;
+    const cx = px / 2;
+
+    return html`
+      <div
+        role="progressbar"
+        aria-label=${this.label}
+        aria-valuenow=${this.value}
+        aria-valuemin="0"
+        aria-valuemax=${this.max}
+        style="position: relative; display: inline-flex; align-items: center; justify-content: center;"
+      >
+        <svg
+          class="svg"
+          width=${px}
+          height=${px}
+          viewBox="0 0 ${px} ${px}"
+          aria-hidden="true"
+        >
+          <circle
+            class="track"
+            cx=${cx}
+            cy=${cx}
+            r=${radius}
+            stroke-width=${STROKE_WIDTH}
+            fill="none"
+          />
+          <circle
+            class="fill"
+            cx=${cx}
+            cy=${cx}
+            r=${radius}
+            stroke-width=${STROKE_WIDTH}
+            fill="none"
+            stroke-dasharray=${circumference}
+            stroke-dashoffset=${offset}
+            stroke-linecap="round"
+            transform="rotate(-90 ${cx} ${cx})"
+          />
+        </svg>
+        ${this.showValue
+          ? html`<span class="value" aria-hidden="true">${Math.round(percentage)}%</span>`
+          : nothing}
+      </div>
+    `;
+  }
+}
+
+customElements.define('bds-progress-circle', BdsProgressCircle);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'bds-progress-circle': BdsProgressCircle;
+  }
+}

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

@@ -0,0 +1,66 @@
+import { fixture, cleanup } from '../test/helpers';
+import { BdsProgress } from './bds-progress';
+
+describe('bds-progress', () => {
+  it('is registered as a custom element', () => {
+    expect(customElements.get('bds-progress')).toBe(BdsProgress);
+  });
+
+  it('defaults to max=100 and size="medium"', async () => {
+    const el = await fixture('<bds-progress value="50" label="Loading"></bds-progress>') as BdsProgress;
+    expect(el.max).toBe(100);
+    expect(el.getAttribute('size')).toBe('medium');
+    cleanup(el);
+  });
+
+  it('renders a progressbar track in shadow DOM', async () => {
+    const el = await fixture('<bds-progress value="50" label="Loading"></bds-progress>');
+    const track = el.shadowRoot!.querySelector('.track');
+    expect(track).not.toBeNull();
+    expect(track!.getAttribute('role')).toBe('progressbar');
+    cleanup(el);
+  });
+
+  it('sets aria-label, aria-valuenow, aria-valuemax on the track', async () => {
+    const el = await fixture('<bds-progress value="60" max="200" label="Upload"></bds-progress>');
+    const track = el.shadowRoot!.querySelector('.track');
+    expect(track!.getAttribute('aria-label')).toBe('Upload');
+    expect(track!.getAttribute('aria-valuenow')).toBe('60');
+    expect(track!.getAttribute('aria-valuemax')).toBe('200');
+    cleanup(el);
+  });
+
+  it('does not render the label row by default', async () => {
+    const el = await fixture('<bds-progress value="50" label="Loading"></bds-progress>');
+    expect(el.shadowRoot!.querySelector('.label-row')).toBeNull();
+    cleanup(el);
+  });
+
+  it('renders label row when show-label is set', async () => {
+    const el = await fixture('<bds-progress value="50" label="Upload" show-label></bds-progress>');
+    const labelRow = el.shadowRoot!.querySelector('.label-row');
+    expect(labelRow).not.toBeNull();
+    expect(labelRow!.querySelector('.label')!.textContent).toBe('Upload');
+    cleanup(el);
+  });
+
+  it('clamps percentage to 100 for value > max', async () => {
+    const el = await fixture('<bds-progress value="150" label="Done" show-label></bds-progress>');
+    const valueSpan = el.shadowRoot!.querySelector('.value');
+    expect(valueSpan!.textContent).toBe('100%');
+    cleanup(el);
+  });
+
+  it('clamps percentage to 0 for negative value', async () => {
+    const el = await fixture('<bds-progress value="-10" label="Done" show-label></bds-progress>');
+    const valueSpan = el.shadowRoot!.querySelector('.value');
+    expect(valueSpan!.textContent).toBe('0%');
+    cleanup(el);
+  });
+
+  it('reflects size attribute', async () => {
+    const el = await fixture('<bds-progress value="50" label="Loading" size="large"></bds-progress>') as BdsProgress;
+    expect(el.getAttribute('size')).toBe('large');
+    cleanup(el);
+  });
+});

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

@@ -0,0 +1,127 @@
+import { LitElement, css, html, nothing } from 'lit';
+
+/**
+ * `<bds-progress>` — framework-agnostic Progress bar custom element.
+ *
+ * Attributes:
+ *   value      — current progress value (required)
+ *   max        — maximum value (default: 100)
+ *   label      — accessible label for the progress bar
+ *   show-label — boolean; when set, displays the label and percentage above the bar
+ *   size       — "small" | "medium" (default) | "large"
+ *
+ * @example
+ * <bds-progress value="60" label="Upload progress" show-label></bds-progress>
+ */
+export class BdsProgress extends LitElement {
+  static styles = css`
+    :host {
+      display: block;
+    }
+
+    .container {
+      display: flex;
+      flex-direction: column;
+      gap: var(--bds-space_xxs);
+      inline-size: 100%;
+    }
+
+    .label-row {
+      display: flex;
+      justify-content: space-between;
+      align-items: baseline;
+      font-size: var(--bds-font_size--body--s);
+      color: var(--bds-color_on-bg);
+    }
+
+    .value {
+      font-variant-numeric: tabular-nums;
+    }
+
+    .track {
+      inline-size: 100%;
+      block-size: var(--progress_height, var(--bds-space_xs));
+      background-color: var(--bds-color_bg--subtle);
+      border-radius: 999px;
+      overflow: hidden;
+    }
+
+    :host([size='small'])  .track { --progress_height: var(--bds-space_xxs); }
+    :host([size='medium']) .track { --progress_height: var(--bds-space_xs); }
+    :host([size='large'])  .track { --progress_height: var(--bds-space_s); }
+
+    .fill {
+      block-size: 100%;
+      background-color: var(--progress_color-active, var(--bdc-color_active));
+      border-radius: 999px;
+      transition: inline-size var(--bds-animation_transition-duration) var(--bds-animation_easing);
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      .fill {
+        transition: none;
+      }
+    }
+  `;
+
+  static properties = {
+    value:     { type: Number },
+    max:       { type: Number },
+    label:     { type: String },
+    showLabel: { type: Boolean, attribute: 'show-label', reflect: true },
+    size:      { type: String, reflect: true },
+  };
+
+  declare value: number;
+  declare max: number;
+  declare label: string;
+  declare showLabel: boolean;
+  declare size: 'small' | 'medium' | 'large';
+
+  constructor() {
+    super();
+    this.value = 0;
+    this.max = 100;
+    this.label = '';
+    this.showLabel = false;
+    this.size = 'medium';
+  }
+
+  private get _percentage(): number {
+    return Math.min(100, Math.max(0, (this.value / this.max) * 100));
+  }
+
+  render() {
+    const pct = this._percentage;
+    return html`
+      <div class="container">
+        ${this.showLabel
+          ? html`
+              <div class="label-row">
+                <span class="label">${this.label}</span>
+                <span class="value">${Math.round(pct)}%</span>
+              </div>
+            `
+          : nothing}
+        <div
+          class="track"
+          role="progressbar"
+          aria-label=${this.label}
+          aria-valuenow=${this.value}
+          aria-valuemin="0"
+          aria-valuemax=${this.max}
+        >
+          <div class="fill" style="inline-size: ${pct}%"></div>
+        </div>
+      </div>
+    `;
+  }
+}
+
+customElements.define('bds-progress', BdsProgress);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'bds-progress': BdsProgress;
+  }
+}