@boostdev/design-system-components 1.1.0 → 1.1.2

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

@@ -0,0 +1,70 @@
+import { fixture, cleanup } from '../test/helpers';
+import { BdsRating } from './bds-rating';
+
+describe('bds-rating', () => {
+  it('is registered as a custom element', () => {
+    expect(customElements.get('bds-rating')).toBe(BdsRating);
+  });
+
+  it('defaults to max=5', async () => {
+    const el = await fixture('<bds-rating value="3"></bds-rating>') as BdsRating;
+    expect(el.max).toBe(5);
+    cleanup(el);
+  });
+
+  it('renders a container with role="img"', async () => {
+    const el = await fixture('<bds-rating value="3"></bds-rating>');
+    const container = el.shadowRoot!.querySelector('.rating');
+    expect(container!.getAttribute('role')).toBe('img');
+    cleanup(el);
+  });
+
+  it('sets aria-label with value and max', async () => {
+    const el = await fixture('<bds-rating value="3"></bds-rating>');
+    const container = el.shadowRoot!.querySelector('.rating');
+    expect(container!.getAttribute('aria-label')).toBe('3 out of 5 stars');
+    cleanup(el);
+  });
+
+  it('renders max number of star SVGs', async () => {
+    const el = await fixture('<bds-rating value="3"></bds-rating>');
+    const stars = el.shadowRoot!.querySelectorAll('.star');
+    expect(stars.length).toBe(5);
+    cleanup(el);
+  });
+
+  it('marks the correct stars as filled', async () => {
+    const el = await fixture('<bds-rating value="3"></bds-rating>');
+    const stars = el.shadowRoot!.querySelectorAll('.star');
+    const filledStars = [...stars].filter(s => s.classList.contains('--filled'));
+    expect(filledStars.length).toBe(3);
+    cleanup(el);
+  });
+
+  it('renders correct count with custom max', async () => {
+    const el = await fixture('<bds-rating value="2" max="10"></bds-rating>');
+    const stars = el.shadowRoot!.querySelectorAll('.star');
+    expect(stars.length).toBe(10);
+    const filledStars = [...stars].filter(s => s.classList.contains('--filled'));
+    expect(filledStars.length).toBe(2);
+    cleanup(el);
+  });
+
+  it('stars have aria-hidden="true"', async () => {
+    const el = await fixture('<bds-rating value="3"></bds-rating>');
+    const stars = el.shadowRoot!.querySelectorAll('.star');
+    [...stars].forEach(star => {
+      expect(star.getAttribute('aria-hidden')).toBe('true');
+    });
+    cleanup(el);
+  });
+
+  it('updates when value property changes', async () => {
+    const el = await fixture('<bds-rating value="1"></bds-rating>') as BdsRating;
+    el.value = 4;
+    await el.updateComplete;
+    const filledStars = [...el.shadowRoot!.querySelectorAll('.star')].filter(s => s.classList.contains('--filled'));
+    expect(filledStars.length).toBe(4);
+    cleanup(el);
+  });
+});

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

@@ -0,0 +1,80 @@
+import { LitElement, css, html } from 'lit';
+
+const STAR_PATH = 'M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z';
+
+/**
+ * `<bds-rating>` — framework-agnostic read-only star Rating custom element.
+ *
+ * Attributes:
+ *   value — number of filled stars
+ *   max   — total number of stars (default: 5)
+ *
+ * @example
+ * <bds-rating value="3"></bds-rating>
+ * <bds-rating value="4" max="10"></bds-rating>
+ */
+export class BdsRating extends LitElement {
+  static styles = css`
+    :host {
+      display: inline-flex;
+    }
+
+    .rating {
+      display: inline-flex;
+      gap: var(--bds-space_xxxs);
+      color: var(--bds-color_bg);
+    }
+
+    .star {
+      inline-size: 1.5em;
+      block-size: 1.5em;
+    }
+
+    .star.--filled {
+      color: var(--bds-color_warning);
+    }
+  `;
+
+  static properties = {
+    value: { type: Number },
+    max:   { type: Number },
+  };
+
+  declare value: number;
+  declare max: number;
+
+  constructor() {
+    super();
+    this.value = 0;
+    this.max = 5;
+  }
+
+  render() {
+    return html`
+      <div
+        class="rating"
+        role="img"
+        aria-label="${this.value} out of ${this.max} stars"
+      >
+        ${Array.from({ length: this.max }, (_, i) => html`
+          <svg
+            class="star ${i < this.value ? '--filled' : ''}"
+            aria-hidden="true"
+            fill="currentColor"
+            viewBox="0 0 24 24"
+          >
+            <path d=${STAR_PATH} />
+          </svg>
+        `)}
+      </div>
+    `;
+  }
+}
+
+customElements.define('bds-rating', BdsRating);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'bds-rating': BdsRating;
+  }
+}

package/src/web-components/ui/bds-section-header.spec.ts

@@ -0,0 +1,57 @@
+import { fixture, cleanup } from '../test/helpers';
+import { BdsSectionHeader } from './bds-section-header';
+
+describe('bds-section-header', () => {
+  it('is registered as a custom element', () => {
+    expect(customElements.get('bds-section-header')).toBe(BdsSectionHeader);
+  });
+
+  it('renders an <h2> title by default', async () => {
+    const el = await fixture('<bds-section-header title="Hello"></bds-section-header>');
+    const h2 = el.shadowRoot!.querySelector('h2');
+    expect(h2).not.toBeNull();
+    expect(h2!.textContent).toBe('Hello');
+    cleanup(el);
+  });
+
+  it('renders the title text', async () => {
+    const el = await fixture('<bds-section-header title="Welcome"></bds-section-header>');
+    expect(el.shadowRoot!.querySelector('.title')!.textContent).toBe('Welcome');
+    cleanup(el);
+  });
+
+  it('does not render subtitle when not set', async () => {
+    const el = await fixture('<bds-section-header title="Hello"></bds-section-header>');
+    expect(el.shadowRoot!.querySelector('.subtitle')).toBeNull();
+    cleanup(el);
+  });
+
+  it('renders subtitle when set', async () => {
+    const el = await fixture('<bds-section-header title="Hello" subtitle="Subtitle text"></bds-section-header>');
+    const subtitle = el.shadowRoot!.querySelector('.subtitle');
+    expect(subtitle).not.toBeNull();
+    expect(subtitle!.textContent).toBe('Subtitle text');
+    cleanup(el);
+  });
+
+  it('uses title-as to override the title element', async () => {
+    const el = await fixture('<bds-section-header title="Hello" title-as="h1"></bds-section-header>');
+    expect(el.shadowRoot!.querySelector('h1')).not.toBeNull();
+    expect(el.shadowRoot!.querySelector('h2')).toBeNull();
+    cleanup(el);
+  });
+
+  it('applies alignment class', async () => {
+    const el = await fixture('<bds-section-header title="Hello" alignment="center"></bds-section-header>');
+    const header = el.shadowRoot!.querySelector('.header');
+    expect(header!.classList.contains('--center')).toBe(true);
+    cleanup(el);
+  });
+
+  it('applies size class', async () => {
+    const el = await fixture('<bds-section-header title="Hello" size="large"></bds-section-header>');
+    const header = el.shadowRoot!.querySelector('.header');
+    expect(header!.classList.contains('--large')).toBe(true);
+    cleanup(el);
+  });
+});

package/src/web-components/ui/bds-section-header.ts

@@ -0,0 +1,96 @@
+import { LitElement, css, html, nothing } from 'lit';
+import { html as staticHtml, unsafeStatic } from 'lit/static-html.js';
+
+/**
+ * `<bds-section-header>` — framework-agnostic Section Header custom element.
+ *
+ * Attributes:
+ *   title     — heading text (required)
+ *   subtitle  — optional subheading text
+ *   alignment — "start" (default) | "center" | "end"
+ *   size      — "small" | "medium" (default) | "large"
+ *   title-as  — tag name for the title element (default: "h2")
+ *
+ * @example
+ * <bds-section-header title="Our Products" subtitle="Browse the full range" size="large"></bds-section-header>
+ */
+export class BdsSectionHeader extends LitElement {
+  static styles = css`
+    :host {
+      display: block;
+    }
+
+    .header {
+      display: flex;
+      flex-direction: column;
+      gap: var(--bds-space_m);
+    }
+
+    .title {
+      color: var(--sectionHeader-title-color, var(--bds-color_on-bg));
+      margin: 0;
+      font-family: var(--bds-font_family--body);
+    }
+
+    .subtitle {
+      color: var(--sectionHeader_subtitle-color, var(--bds-color_grey--strong));
+      margin: 0;
+      font-family: var(--bds-font_family--body);
+      font-weight: var(--bds-font_weight--medium);
+    }
+
+    .header.--start  { align-items: flex-start; text-align: start; }
+    .header.--center { align-items: center;      text-align: center; }
+    .header.--end    { align-items: flex-end;    text-align: end; }
+
+    .header.--small  .title { font-size: var(--bds-font_size--heading-1); line-height: var(--bds-font_line-height--heading); font-weight: var(--bds-font_weight--bold); }
+    .header.--small  .subtitle { font-size: var(--bds-font_size--body); line-height: 1.4; }
+
+    .header.--medium .title { font-size: var(--bds-font_size--display); line-height: var(--bds-font_line-height--display); font-weight: var(--bds-font_weight--bold); }
+    .header.--medium .subtitle { font-size: var(--bds-font_size--heading-3); line-height: 1.3; }
+
+    .header.--large  .title { font-size: var(--bds-font_size--display); line-height: var(--bds-font_line-height--display); font-weight: var(--bds-font_weight--bold); letter-spacing: var(--bds-font_tracking--tight); }
+    .header.--large  .subtitle { font-size: var(--bds-font_size--heading-2); line-height: 1.3; font-weight: var(--bds-font_weight--medium); }
+  `;
+
+  static properties = {
+    title:     { type: String },
+    subtitle:  { type: String },
+    alignment: { type: String, reflect: true },
+    size:      { type: String, reflect: true },
+    titleAs:   { type: String, attribute: 'title-as' },
+  };
+
+  declare title: string;
+  declare subtitle: string;
+  declare alignment: 'start' | 'center' | 'end';
+  declare size: 'small' | 'medium' | 'large';
+  declare titleAs: string;
+
+  constructor() {
+    super();
+    this.title = '';
+    this.subtitle = '';
+    this.alignment = 'start';
+    this.size = 'medium';
+    this.titleAs = 'h2';
+  }
+
+  render() {
+    const tag = unsafeStatic(this.titleAs || 'h2');
+    return html`
+      <div class="header --${this.alignment} --${this.size}">
+        ${staticHtml`<${tag} class="title">${this.title}</${tag}>`}
+        ${this.subtitle ? html`<p class="subtitle">${this.subtitle}</p>` : nothing}
+      </div>
+    `;
+  }
+}
+
+customElements.define('bds-section-header', BdsSectionHeader);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'bds-section-header': BdsSectionHeader;
+  }
+}

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

@@ -0,0 +1,50 @@
+import { fixture, cleanup } from '../test/helpers';
+import { BdsSeparator } from './bds-separator';
+
+describe('bds-separator', () => {
+  it('is registered as a custom element', () => {
+    expect(customElements.get('bds-separator')).toBe(BdsSeparator);
+  });
+
+  it('defaults to orientation="horizontal"', async () => {
+    const el = await fixture('<bds-separator></bds-separator>');
+    expect(el.getAttribute('orientation')).toBe('horizontal');
+    cleanup(el);
+  });
+
+  it('renders a separator div in shadow DOM', async () => {
+    const el = await fixture('<bds-separator></bds-separator>');
+    const sep = el.shadowRoot!.querySelector('.separator');
+    expect(sep).not.toBeNull();
+    cleanup(el);
+  });
+
+  it('has role="separator"', async () => {
+    const el = await fixture('<bds-separator></bds-separator>');
+    const sep = el.shadowRoot!.querySelector('.separator');
+    expect(sep!.getAttribute('role')).toBe('separator');
+    cleanup(el);
+  });
+
+  it('sets aria-orientation="horizontal" by default', async () => {
+    const el = await fixture('<bds-separator></bds-separator>');
+    const sep = el.shadowRoot!.querySelector('.separator');
+    expect(sep!.getAttribute('aria-orientation')).toBe('horizontal');
+    cleanup(el);
+  });
+
+  it('sets aria-orientation="vertical" when orientation="vertical"', async () => {
+    const el = await fixture('<bds-separator orientation="vertical"></bds-separator>');
+    const sep = el.shadowRoot!.querySelector('.separator');
+    expect(sep!.getAttribute('aria-orientation')).toBe('vertical');
+    cleanup(el);
+  });
+
+  it('reflects orientation property to attribute', async () => {
+    const el = await fixture('<bds-separator></bds-separator>') as BdsSeparator;
+    el.orientation = 'vertical';
+    await el.updateComplete;
+    expect(el.getAttribute('orientation')).toBe('vertical');
+    cleanup(el);
+  });
+});

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

@@ -0,0 +1,66 @@
+import { LitElement, css, html } from 'lit';
+
+/**
+ * `<bds-separator>` — framework-agnostic Separator custom element.
+ *
+ * Attributes:
+ *   orientation — "horizontal" (default) | "vertical"
+ *
+ * @example
+ * <bds-separator></bds-separator>
+ * <bds-separator orientation="vertical"></bds-separator>
+ */
+export class BdsSeparator extends LitElement {
+  static styles = css`
+    :host {
+      display: block;
+    }
+
+    :host([orientation='vertical']) {
+      display: inline-block;
+      align-self: stretch;
+    }
+
+    .separator {
+      border: none;
+      background-color: var(--separator_color, var(--bds-color_on-bg));
+      display: block;
+      inline-size: 100%;
+      block-size: var(--separator_thickness, 1px);
+    }
+
+    :host([orientation='vertical']) .separator {
+      inline-size: var(--separator_thickness, 1px);
+      block-size: 100%;
+    }
+  `;
+
+  static properties = {
+    orientation: { type: String, reflect: true },
+  };
+
+  declare orientation: 'horizontal' | 'vertical';
+
+  constructor() {
+    super();
+    this.orientation = 'horizontal';
+  }
+
+  render() {
+    return html`
+      <div
+        class="separator"
+        role="separator"
+        aria-orientation=${this.orientation}
+      ></div>
+    `;
+  }
+}
+
+customElements.define('bds-separator', BdsSeparator);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'bds-separator': BdsSeparator;
+  }
+}

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

@@ -0,0 +1,22 @@
+import { fixture, cleanup } from '../test/helpers';
+import { BdsSkeleton } from './bds-skeleton';
+
+describe('bds-skeleton', () => {
+  it('is registered as a custom element', () => {
+    expect(customElements.get('bds-skeleton')).toBe(BdsSkeleton);
+  });
+
+  it('renders a skeleton element in shadow DOM', async () => {
+    const el = await fixture('<bds-skeleton></bds-skeleton>');
+    const skeleton = el.shadowRoot!.querySelector('.skeleton');
+    expect(skeleton).not.toBeNull();
+    cleanup(el);
+  });
+
+  it('has aria-hidden="true" on the skeleton element', async () => {
+    const el = await fixture('<bds-skeleton></bds-skeleton>');
+    const skeleton = el.shadowRoot!.querySelector('.skeleton');
+    expect(skeleton!.getAttribute('aria-hidden')).toBe('true');
+    cleanup(el);
+  });
+});

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

@@ -0,0 +1,55 @@
+import { LitElement, css, html } from 'lit';
+
+/**
+ * `<bds-skeleton>` — framework-agnostic Skeleton loading placeholder custom element.
+ *
+ * No attributes. The host inherits width/height from its container or inline styles.
+ *
+ * @example
+ * <bds-skeleton style="width: 200px; height: 1rem;"></bds-skeleton>
+ */
+export class BdsSkeleton extends LitElement {
+  static styles = css`
+    :host {
+      display: block;
+    }
+
+    .skeleton {
+      display: block;
+      background: linear-gradient(
+        90deg,
+        var(--bds-color_grey--subtle) 25%,
+        var(--bds-color_bg) 50%,
+        var(--bds-color_grey--subtle) 75%
+      );
+      background-size: 200% 100%;
+      animation: shimmer 1.5s infinite;
+      border-radius: var(--bds-border_radius--xs);
+      min-block-size: var(--bds-space_m);
+      inline-size: 100%;
+    }
+
+    @keyframes shimmer {
+      0% { background-position: 200% 0; }
+      100% { background-position: -200% 0; }
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      .skeleton {
+        animation: none;
+      }
+    }
+  `;
+
+  render() {
+    return html`<span class="skeleton" aria-hidden="true"></span>`;
+  }
+}
+
+customElements.define('bds-skeleton', BdsSkeleton);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'bds-skeleton': BdsSkeleton;
+  }
+}

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

@@ -0,0 +1,76 @@
+import { fixture, cleanup } from '../test/helpers';
+import { BdsTypography } from './bds-typography';
+
+describe('bds-typography', () => {
+  it('is registered as a custom element', () => {
+    expect(customElements.get('bds-typography')).toBe(BdsTypography);
+  });
+
+  it('defaults to variant="body"', async () => {
+    const el = await fixture('<bds-typography>Text</bds-typography>');
+    expect(el.getAttribute('variant')).toBe('body');
+    cleanup(el);
+  });
+
+  it('renders a <p> element for body variant', async () => {
+    const el = await fixture('<bds-typography variant="body">Text</bds-typography>');
+    const p = el.shadowRoot!.querySelector('p');
+    expect(p).not.toBeNull();
+    cleanup(el);
+  });
+
+  it('renders a <p> element for body_s variant', async () => {
+    const el = await fixture('<bds-typography variant="body_s">Text</bds-typography>');
+    const p = el.shadowRoot!.querySelector('p');
+    expect(p).not.toBeNull();
+    cleanup(el);
+  });
+
+  it('renders an <h1> element for h1 variant', async () => {
+    const el = await fixture('<bds-typography variant="h1">Heading</bds-typography>');
+    const h1 = el.shadowRoot!.querySelector('h1');
+    expect(h1).not.toBeNull();
+    cleanup(el);
+  });
+
+  it('renders an <h2> element for h2 variant', async () => {
+    const el = await fixture('<bds-typography variant="h2">Heading</bds-typography>');
+    expect(el.shadowRoot!.querySelector('h2')).not.toBeNull();
+    cleanup(el);
+  });
+
+  it('renders an <h3> element for h3 variant', async () => {
+    const el = await fixture('<bds-typography variant="h3">Heading</bds-typography>');
+    expect(el.shadowRoot!.querySelector('h3')).not.toBeNull();
+    cleanup(el);
+  });
+
+  it('renders the element with typography and variant classes', async () => {
+    const el = await fixture('<bds-typography variant="h1">Heading</bds-typography>');
+    const h1 = el.shadowRoot!.querySelector('h1');
+    expect(h1!.classList.contains('typography')).toBe(true);
+    expect(h1!.classList.contains('--h1')).toBe(true);
+    cleanup(el);
+  });
+
+  it('uses the component attribute to override the tag', async () => {
+    const el = await fixture('<bds-typography component="span">Text</bds-typography>');
+    expect(el.shadowRoot!.querySelector('span')).not.toBeNull();
+    cleanup(el);
+  });
+
+  it('renders slotted content', async () => {
+    const el = await fixture('<bds-typography>Hello world</bds-typography>');
+    expect(el.textContent?.trim()).toBe('Hello world');
+    cleanup(el);
+  });
+
+  it('reflects variant property to attribute', async () => {
+    const el = await fixture('<bds-typography>Text</bds-typography>') as BdsTypography;
+    el.variant = 'h2';
+    await el.updateComplete;
+    expect(el.getAttribute('variant')).toBe('h2');
+    expect(el.shadowRoot!.querySelector('h2')).not.toBeNull();
+    cleanup(el);
+  });
+});

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

@@ -0,0 +1,112 @@
+import { LitElement, css } from 'lit';
+import { html, unsafeStatic } from 'lit/static-html.js';
+
+export type TypographyVariant = 'h1' | 'h2' | 'h3' | 'body' | 'body_s';
+
+const VARIANT_TAG: Record<TypographyVariant, string> = {
+  h1: 'h1',
+  h2: 'h2',
+  h3: 'h3',
+  body: 'p',
+  body_s: 'p',
+};
+
+/**
+ * `<bds-typography>` — framework-agnostic Typography custom element.
+ *
+ * Renders slotted content inside the appropriate semantic HTML element.
+ *
+ * Attributes:
+ *   variant   — "h1" | "h2" | "h3" | "body" (default) | "body_s"
+ *   component — override the rendered tag name (e.g. "span", "label")
+ *
+ * Slots:
+ *   (default) — text content
+ *
+ * @example
+ * <bds-typography variant="h1">Page title</bds-typography>
+ * <bds-typography variant="body_s" component="span">Small text</bds-typography>
+ */
+export class BdsTypography extends LitElement {
+  static styles = css`
+    :host {
+      display: block;
+    }
+
+    .typography {
+      margin: 0;
+      font-family: var(--bds-font_family--body);
+      color: var(--typography_color, var(--bds-color_on-bg));
+    }
+
+    .typography.--h1 {
+      font-family: var(--bds-font_family--heading);
+      font-size: var(--bds-font_size--heading-1);
+      font-weight: var(--bds-font_weight--bold);
+      line-height: var(--bds-font_line-height--heading);
+    }
+
+    .typography.--h2 {
+      font-family: var(--bds-font_family--heading);
+      font-size: var(--bds-font_size--heading-2);
+      font-weight: var(--bds-font_weight--semibold);
+      line-height: var(--bds-font_line-height--heading);
+    }
+
+    .typography.--h3 {
+      font-family: var(--bds-font_family--heading);
+      font-size: var(--bds-font_size--heading-3);
+      font-weight: var(--bds-font_weight--semibold);
+      line-height: var(--bds-font_line-height--heading);
+    }
+
+    .typography.--body {
+      font-size: var(--bds-font_size--body);
+      line-height: var(--bds-font_line-height--body);
+    }
+
+    .typography.--body_s {
+      font-size: var(--bds-font_size--body--s);
+      line-height: var(--bds-font_line-height--body);
+    }
+  `;
+
+  static properties = {
+    variant:   { type: String, reflect: true },
+    component: { type: String },
+  };
+
+  declare variant: TypographyVariant;
+  declare component: string;
+
+  constructor() {
+    super();
+    this.variant = 'body';
+    this.component = '';
+  }
+
+  private get _tag(): string {
+    if (this.component) return this.component;
+    return VARIANT_TAG[this.variant] ?? 'p';
+  }
+
+  render() {
+    // unsafeStatic is safe here — tag values are derived from a known allowlist
+    // (VARIANT_TAG map + the `component` property which is developer-controlled).
+    const tag = unsafeStatic(this._tag);
+    const variant = unsafeStatic(this.variant);
+    return html`
+      <${tag} class="typography --${variant}">
+        <slot></slot>
+      </${tag}>
+    `;
+  }
+}
+
+customElements.define('bds-typography', BdsTypography);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'bds-typography': BdsTypography;
+  }
+}