@ds-mo/ui 1.0.2 → 1.1.0

package/src/react/ds-toggle-button.ts

@@ -0,0 +1,27 @@
+'use client';
+
+/**
+ * This file was automatically generated by the Stencil React Output Target.
+ * Changes to this file may cause incorrect behavior and will be lost if the code is regenerated.
+ */
+
+/* eslint-disable */
+
+import type { EventName, StencilReactComponent } from '@stencil/react-output-target/runtime';
+import { createComponent } from '@stencil/react-output-target/runtime';
+import React from 'react';
+
+import { type DsToggleButtonCustomEvent } from "@ds-mo/ui";
+import type { Components } from "@ds-mo/ui/dist/components";
+import { DsToggleButton as DsToggleButtonElement, defineCustomElement as defineDsToggleButton } from "@ds-mo/ui/dist/components/ds-toggle-button.js";
+
+export type DsToggleButtonEvents = { onDsChange: EventName<DsToggleButtonCustomEvent<boolean>> };
+
+export const DsToggleButton: StencilReactComponent<DsToggleButtonElement, DsToggleButtonEvents, Components.DsToggleButton> = /*@__PURE__*/ createComponent<DsToggleButtonElement, DsToggleButtonEvents, Components.DsToggleButton>({
+    tagName: 'ds-toggle-button',
+    elementClass: DsToggleButtonElement,
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
+    react: React,
+    events: { onDsChange: 'dsChange' } as DsToggleButtonEvents,
+    defineCustomElement: defineDsToggleButton
+});

package/src/react/ds-toggle.ts

@@ -0,0 +1,27 @@
+'use client';
+
+/**
+ * This file was automatically generated by the Stencil React Output Target.
+ * Changes to this file may cause incorrect behavior and will be lost if the code is regenerated.
+ */
+
+/* eslint-disable */
+
+import type { EventName, StencilReactComponent } from '@stencil/react-output-target/runtime';
+import { createComponent } from '@stencil/react-output-target/runtime';
+import React from 'react';
+
+import { type DsToggleCustomEvent } from "@ds-mo/ui";
+import type { Components } from "@ds-mo/ui/dist/components";
+import { DsToggle as DsToggleElement, defineCustomElement as defineDsToggle } from "@ds-mo/ui/dist/components/ds-toggle.js";
+
+export type DsToggleEvents = { onDsChange: EventName<DsToggleCustomEvent<boolean>> };
+
+export const DsToggle: StencilReactComponent<DsToggleElement, DsToggleEvents, Components.DsToggle> = /*@__PURE__*/ createComponent<DsToggleElement, DsToggleEvents, Components.DsToggle>({
+    tagName: 'ds-toggle',
+    elementClass: DsToggleElement,
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
+    react: React,
+    events: { onDsChange: 'dsChange' } as DsToggleEvents,
+    defineCustomElement: defineDsToggle
+});

package/src/react/ds-tooltip.ts

@@ -0,0 +1,26 @@
+'use client';
+
+/**
+ * This file was automatically generated by the Stencil React Output Target.
+ * Changes to this file may cause incorrect behavior and will be lost if the code is regenerated.
+ */
+
+/* eslint-disable */
+
+import type { StencilReactComponent } from '@stencil/react-output-target/runtime';
+import { createComponent } from '@stencil/react-output-target/runtime';
+import React from 'react';
+
+import type { Components } from "@ds-mo/ui/dist/components";
+import { DsTooltip as DsTooltipElement, defineCustomElement as defineDsTooltip } from "@ds-mo/ui/dist/components/ds-tooltip.js";
+
+export type DsTooltipEvents = NonNullable<unknown>;
+
+export const DsTooltip: StencilReactComponent<DsTooltipElement, DsTooltipEvents, Components.DsTooltip> = /*@__PURE__*/ createComponent<DsTooltipElement, DsTooltipEvents, Components.DsTooltip>({
+    tagName: 'ds-tooltip',
+    elementClass: DsTooltipElement,
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
+    react: React,
+    events: {} as DsTooltipEvents,
+    defineCustomElement: defineDsTooltip
+});

package/src/wc/components/Accordion/Accordion.tsx

@@ -0,0 +1,144 @@
+import { Component, Prop, State, Event, EventEmitter, Element, Watch, h, Host } from '@stencil/core';
+
+export interface AccordionItemData {
+  id: string;
+  label: string;
+  content?: string;
+  inactive?: boolean;
+}
+
+let idCounter = 0;
+
+@Component({
+  tag: 'ds-accordion',
+  styleUrl: 'Accordion.css',
+  scoped: true,
+})
+export class Accordion {
+  @Element() el!: HTMLElement;
+
+  @Prop() items: AccordionItemData[] = [];
+  @Prop() multiple: boolean = false;
+  /** Comma-separated list of expanded item IDs for controlled mode. */
+  @Prop({ mutable: true }) expandedIds: string = '';
+
+  @State() private internalIds: string[] = [];
+  @State() private heights: Record<string, number> = {};
+
+  @Event() dsExpandedChange!: EventEmitter<string[]>;
+
+  private instanceId = ++idCounter;
+  private resizeObservers: Map<string, ResizeObserver> = new Map();
+
+  private get activeIds(): string[] {
+    if (this.expandedIds) return this.expandedIds.split(',').map(s => s.trim()).filter(Boolean);
+    return this.internalIds;
+  }
+
+  componentDidLoad() {
+    this.bindResizeObservers();
+  }
+
+  disconnectedCallback() {
+    this.resizeObservers.forEach(ro => ro.disconnect());
+    this.resizeObservers.clear();
+  }
+
+  @Watch('items')
+  onItemsChange() {
+    requestAnimationFrame(() => {
+      this.bindResizeObservers();
+      this.measureAll();
+    });
+  }
+
+  private bindResizeObservers() {
+    this.resizeObservers.forEach(ro => ro.disconnect());
+    this.resizeObservers.clear();
+
+    this.items.forEach(item => {
+      const inner = this.el.querySelector(`[data-inner="${item.id}"]`) as HTMLElement | null;
+      if (!inner) return;
+      const ro = new ResizeObserver(() => {
+        this.heights = { ...this.heights, [item.id]: inner.scrollHeight };
+      });
+      ro.observe(inner);
+      this.resizeObservers.set(item.id, ro);
+    });
+  }
+
+  private measureAll() {
+    const next: Record<string, number> = { ...this.heights };
+    this.items.forEach(item => {
+      const inner = this.el.querySelector(`[data-inner="${item.id}"]`) as HTMLElement | null;
+      if (inner) next[item.id] = inner.scrollHeight;
+    });
+    this.heights = next;
+  }
+
+  private toggle(id: string) {
+    const current = this.activeIds;
+    let next: string[];
+    if (current.includes(id)) {
+      next = current.filter(x => x !== id);
+    } else {
+      next = this.multiple ? [...current, id] : [id];
+    }
+    this.internalIds = next;
+    this.dsExpandedChange.emit(next);
+  }
+
+  render() {
+    const activeIds = this.activeIds;
+
+    return (
+      <Host class="accordion">
+        {this.items.map(item => {
+          const isExpanded = activeIds.includes(item.id);
+          const triggerId = `ds-accordion-${this.instanceId}-trigger-${item.id}`;
+          const panelId = `ds-accordion-${this.instanceId}-panel-${item.id}`;
+          const bodyHeight = this.heights[item.id] ?? 0;
+
+          return (
+            <div
+              key={item.id}
+              class={{ item: true, 'item--inactive': !!item.inactive }}
+            >
+              <button
+                type="button"
+                id={triggerId}
+                class="trigger"
+                onClick={() => !item.inactive && this.toggle(item.id)}
+                aria-expanded={isExpanded}
+                aria-controls={panelId}
+                aria-disabled={item.inactive || undefined}
+                tabIndex={item.inactive ? -1 : 0}
+              >
+                <span class="text-body-medium-emphasis">{item.label}</span>
+                <span
+                  class={{ chevron: true, 'chevron--open': isExpanded }}
+                  aria-hidden="true"
+                >&#x203A;</span>
+              </button>
+              <div
+                id={panelId}
+                role="region"
+                aria-labelledby={triggerId}
+                class="body"
+                style={{ height: isExpanded ? `${bodyHeight}px` : '0' }}
+                aria-hidden={!isExpanded}
+              >
+                <div class="body-inner" data-inner={item.id}>
+                  {item.content
+                    ? <span class="text-body-medium">{item.content}</span>
+                    : <slot name={item.id} />
+                  }
+                </div>
+              </div>
+            </div>
+          );
+        })}
+      </Host>
+    );
+  }
+}

package/src/wc/components/Badge/Badge.tsx

@@ -0,0 +1,34 @@
+import { Component, Prop, h, Host } from '@stencil/core';
+
+@Component({
+  tag: 'ds-badge',
+  styleUrl: 'Badge.css',
+  scoped: true,
+})
+export class Badge {
+  @Prop() count: number = 0;
+  @Prop() isSelected: boolean = false;
+  /** Accessible label. Defaults to the count as a string. */
+  @Prop() label: string | undefined;
+
+  render() {
+    if (this.count === 0) return <Host style={{ display: 'none' }} />;
+
+    const display = this.count > 9 ? '+' : String(this.count);
+    const ariaLabel = this.label ?? String(this.count);
+
+    return (
+      <Host class="badge" aria-label={ariaLabel}>
+        <span
+          class={{
+            'text-caption-emphasis': true,
+            'badge__text': true,
+            'badge__text--selected': this.isSelected,
+          }}
+        >
+          {display}
+        </span>
+      </Host>
+    );
+  }
+}

package/src/wc/components/Badge/index.ts

@@ -0,0 +1 @@
+export type {} from './Badge';

package/src/wc/components/Banner/Banner.tsx

@@ -0,0 +1,148 @@
+import { Component, Prop, State, Event, EventEmitter, Watch, h, Host } from '@stencil/core';
+
+export type BannerIntent =
+  | 'brand' | 'positive' | 'negative' | 'warning' | 'caution'
+  | 'ai' | 'neutral' | 'walkthrough' | 'guide';
+
+export type BannerContrast = 'faint' | 'medium' | 'bold' | 'strong';
+
+const FADE_OUT_MS = 200;
+const AUTO_DISMISS_MS = 4000;
+
+@Component({
+  tag: 'ds-banner',
+  styleUrl: 'Banner.css',
+  scoped: true,
+})
+export class Banner {
+  @Prop() intent: BannerIntent = 'neutral';
+  @Prop() contrast: BannerContrast = 'medium';
+  @Prop() message: string = '';
+  /** Renders the diagonal-stripe accent bar above the body. */
+  @Prop() header: boolean = false;
+  /** Renders at a fixed position (centered top) and auto-dismisses after 4 s. */
+  @Prop() floating: boolean = false;
+  @Prop() showDismiss: boolean = false;
+  @Prop() dismissLabel: string = 'Dismiss';
+
+  @State() private closing: boolean = false;
+
+  @Event() dsDismiss!: EventEmitter<void>;
+
+  private dismissTimer: ReturnType<typeof setTimeout> | null = null;
+  private closeTimer: ReturnType<typeof setTimeout> | null = null;
+
+  componentDidLoad() {
+    if (this.floating && this.message) this.scheduleDismiss();
+  }
+
+  @Watch('message')
+  onMessageChange(newVal: string) {
+    if (this.floating && newVal) {
+      this.closing = false;
+      this.scheduleDismiss();
+    }
+  }
+
+  disconnectedCallback() {
+    this.clearTimers();
+  }
+
+  private clearTimers() {
+    if (this.dismissTimer) { clearTimeout(this.dismissTimer); this.dismissTimer = null; }
+    if (this.closeTimer)   { clearTimeout(this.closeTimer);   this.closeTimer = null; }
+  }
+
+  private scheduleDismiss() {
+    this.clearTimers();
+    this.dismissTimer = setTimeout(() => {
+      this.dismissTimer = null;
+      this.beginClose();
+    }, AUTO_DISMISS_MS);
+  }
+
+  private beginClose() {
+    this.clearTimers();
+    if (this.floating) {
+      this.closing = true;
+      this.closeTimer = setTimeout(() => {
+        this.closing = false;
+        this.closeTimer = null;
+        this.dsDismiss.emit();
+      }, FADE_OUT_MS);
+    } else {
+      this.dsDismiss.emit();
+    }
+  }
+
+  private getContentColor(): string {
+    if (this.contrast === 'bold') return 'var(--color-foreground-on-bold-background-primary)';
+    const c = this.contrast === 'faint' ? 'bold' : this.contrast === 'medium' ? 'strong' : 'medium';
+    return `var(--color-foreground-${c}-${this.intent})`;
+  }
+
+  private getBg(): string {
+    return `var(--color-background-${this.contrast}-${this.intent})`;
+  }
+
+  private getElevation(): string {
+    return this.floating
+      ? 'var(--effect-elevation-elevated-floating, var(--effect-elevation-floating))'
+      : 'var(--effect-elevation-elevated)';
+  }
+
+  render() {
+    const contentColor = this.getContentColor();
+    const isAssertive = this.intent === 'negative';
+
+    const bannerEl = (
+      <div
+        class={{ 'banner-wrapper': true }}
+        style={{ '--banner-content': contentColor } as { [key: string]: string }}
+        role={isAssertive ? 'alert' : 'status'}
+        aria-live={isAssertive ? undefined : 'polite'}
+      >
+        <div
+          class="banner-surface"
+          style={{
+            backgroundColor: this.getBg(),
+            boxShadow: this.getElevation(),
+          }}
+        >
+          {this.header && (
+            <div class="banner-header-surface">
+              <div class="banner-header" />
+            </div>
+          )}
+          <div class="banner-body">
+            <span class="text-body-medium banner-message">{this.message}</span>
+            {this.showDismiss && (
+              <button
+                type="button"
+                class="banner-dismiss"
+                onClick={() => this.beginClose()}
+                aria-label={this.dismissLabel}
+              >
+                &times;
+              </button>
+            )}
+          </div>
+        </div>
+      </div>
+    );
+
+    if (this.floating) {
+      return (
+        <Host style={{ display: 'contents' }}>
+          <div class="floating-position" style={{ zIndex: '9998' }}>
+            <div class={{ 'floating-toast': true, 'floating-toast--closing': this.closing }}>
+              {bannerEl}
+            </div>
+          </div>
+        </Host>
+      );
+    }
+
+    return <Host style={{ display: 'contents' }}>{bannerEl}</Host>;
+  }
+}