@ds-mo/ui 1.0.2 → 1.2.0

package/src/wc/components/EmptyState/EmptyState.tsx

@@ -0,0 +1,32 @@
+import { Component, Prop, h, Host } from '@stencil/core';
+
+export type EmptyStateType = 'no-content' | 'no-results' | 'no-results-filter' | 'no-access';
+
+const DEFAULT_MESSAGES: Record<EmptyStateType, string> = {
+  'no-content': 'No page contents to display.',
+  'no-results': 'No results found.',
+  'no-results-filter': 'No results found. Please update search criteria.',
+  'no-access': "You don't have access to this page.",
+};
+
+@Component({
+  tag: 'ds-empty-state',
+  styleUrl: 'EmptyState.css',
+  scoped: true,
+})
+export class EmptyState {
+  @Prop() type: EmptyStateType = 'no-content';
+  @Prop() message: string | undefined;
+
+  render() {
+    return (
+      <Host>
+        <div class="empty-state">
+          <p class="text-body-medium" style={{ color: 'var(--color-foreground-secondary)' }}>
+            {this.message || DEFAULT_MESSAGES[this.type]}
+          </p>
+        </div>
+      </Host>
+    );
+  }
+}

package/src/wc/components/Fade/Fade.tsx

@@ -0,0 +1,32 @@
+import { Component, Prop, h, Host } from '@stencil/core';
+
+export type FadeSide = 'top' | 'bottom' | 'left' | 'right';
+
+@Component({
+  tag: 'ds-fade',
+  styleUrl: 'Fade.css',
+  shadow: true,
+})
+export class Fade {
+  @Prop() side!: FadeSide;
+  /** Height (or width for left/right) of the fade overlay — any CSS value. */
+  @Prop() height: string | undefined;
+  /** Background color to fade from. Defaults to var(--color-background-secondary). */
+  @Prop() background: string = 'var(--color-background-secondary)';
+
+  render() {
+    return (
+      <Host
+        aria-hidden="true"
+        class={{
+          fade: true,
+          [`fade--${this.side}`]: true,
+        }}
+        style={{
+          height: this.height,
+          '--ds-fade-bg': this.background,
+        } as Record<string, string>}
+      />
+    );
+  }
+}

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

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

package/src/wc/components/Field/Field.tsx

@@ -0,0 +1,28 @@
+import { Component, Prop, h, Host } from '@stencil/core';
+
+let fieldCounter = 0;
+
+@Component({
+  tag: 'ds-field',
+  styleUrl: 'Field.css',
+  scoped: true,
+})
+export class Field {
+  @Prop() label!: string;
+  /** ID forwarded to the slotted control via the label's `for` attribute. Auto-generated if omitted. */
+  @Prop() fieldId: string | undefined;
+
+  private resolvedId = `ds-field-${++fieldCounter}`;
+
+  render() {
+    const id = this.fieldId || this.resolvedId;
+    return (
+      <Host>
+        <div class="field">
+          <label class="text-body-small-emphasis field__label" htmlFor={id}>{this.label}</label>
+          <slot />
+        </div>
+      </Host>
+    );
+  }
+}

package/src/wc/components/Header/Header.tsx

@@ -0,0 +1,33 @@
+import { Component, Prop, h, Host } from '@stencil/core';
+
+export type HeaderBackground = 'primary' | 'secondary' | 'transparent' | 'translucent';
+
+@Component({
+  tag: 'ds-header',
+  styleUrl: 'Header.css',
+  scoped: true,
+})
+export class Header {
+  @Prop() heading: string | undefined;
+  @Prop() background: HeaderBackground = 'secondary';
+
+  render() {
+    return (
+      <Host
+        class={{ header: true, [`bg-${this.background}`]: true }}
+        role="banner"
+      >
+        <div class="left">
+          <slot name="left" />
+          {this.heading && <span class="title text-title-small">{this.heading}</span>}
+        </div>
+        <div class="center">
+          <slot name="center" />
+        </div>
+        <div class="right">
+          <slot name="right" />
+        </div>
+      </Host>
+    );
+  }
+}

package/src/wc/components/Icon/Icon.tsx

@@ -0,0 +1,112 @@
+import { Component, Prop, Element, Watch, h, Host } from '@stencil/core';
+import { flagIconCatalog } from './flag-icon-catalog';
+import { systemIconCatalog } from './system-icon-catalog';
+
+export type IconSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl';
+
+export type IconColorToken =
+  // Hierarchy
+  | 'primary' | 'secondary' | 'tertiary' | 'quaternary'
+  // Intent — bold contrast (default)
+  | 'brand' | 'negative' | 'positive' | 'warning' | 'caution' | 'ai' | 'guide' | 'neutral'
+  // Intent — faint
+  | 'faint-brand' | 'faint-negative' | 'faint-positive' | 'faint-warning'
+  | 'faint-caution' | 'faint-ai' | 'faint-neutral'
+  // Intent — medium
+  | 'medium-brand' | 'medium-negative' | 'medium-positive' | 'medium-warning'
+  | 'medium-caution' | 'medium-ai' | 'medium-neutral'
+  // Intent — bold (explicit)
+  | 'bold-brand' | 'bold-negative' | 'bold-positive' | 'bold-warning'
+  | 'bold-caution' | 'bold-ai' | 'bold-neutral'
+  // Intent — strong
+  | 'strong-brand' | 'strong-negative' | 'strong-positive' | 'strong-warning'
+  | 'strong-caution' | 'strong-ai' | 'strong-neutral'
+  // Contextual
+  | 'on-strong' | 'on-bold'
+  // Pass-through
+  | 'inherit';
+
+export type IconColor = IconColorToken | `var(--${string})`;
+
+@Component({
+  tag: 'ds-icon',
+  styleUrl: 'Icon.css',
+  scoped: true,
+})
+export class Icon {
+  @Element() el!: HTMLElement;
+
+  /** Name of the system icon (e.g. `"Gear"`, `"ArrowRight"`) or flag (e.g. `"US"`) */
+  @Prop() name: string = '';
+  /** Iconography size token. Maps to `--dimension-iconography-{size}`. Default `md` = 20 px. */
+  @Prop() size: IconSize = 'md';
+  /** Semantic foreground color token, or a raw CSS var reference. */
+  @Prop() color: IconColor | undefined;
+  /** Accessible label. Sets `role="img"` and `aria-label`. Omit for decorative icons. */
+  @Prop() label: string | undefined;
+  /** Set `true` to look up from the flag icon set instead of the system icon set. */
+  @Prop() flag: boolean = false;
+
+  private get svgString(): string {
+    const source = this.flag ? flagIconCatalog : systemIconCatalog;
+    return source[this.name] ?? '';
+  }
+
+  private updateSvg() {
+    const container = this.el.querySelector<HTMLElement>('.icon__svg');
+    if (!container) return;
+    container.innerHTML = this.svgString;
+    // Stencil's scoped CSS cannot reach innerHTML-injected elements (no sc-* class).
+    // Apply width/height as inline styles so sizing works regardless of scope class.
+    const svg = container.querySelector<SVGElement>('svg');
+    if (svg) {
+      svg.removeAttribute('width');
+      svg.removeAttribute('height');
+      // Prevent SVG from being natively focusable (Firefox/IE default) while
+      // sitting inside an aria-hidden parent — fixes aria-hidden-focus violation.
+      svg.setAttribute('focusable', 'false');
+      svg.setAttribute('aria-hidden', 'true');
+      svg.style.display = 'block';
+      svg.style.flexShrink = '0';
+      svg.style.width = '100%';
+      svg.style.height = '100%';
+    }
+  }
+
+  @Watch('name')
+  @Watch('flag')
+  onIconChange() {
+    this.updateSvg();
+  }
+
+  componentDidRender() {
+    this.updateSvg();
+  }
+
+  render() {
+    const isCustomColor = typeof this.color === 'string' && this.color.startsWith('var(--');
+
+    const cls: Record<string, boolean> = {
+      icon: true,
+      [`icon--size-${this.size}`]: true,
+      [`icon--color-${this.color}`]: !!this.color && !isCustomColor && this.color !== 'inherit',
+      'icon--color-inherit': this.color === 'inherit',
+    };
+
+    const style = isCustomColor ? { color: this.color as string } : undefined;
+
+    return (
+      <Host style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}>
+        <span
+          class={cls}
+          style={style}
+          role={this.label ? 'img' : 'presentation'}
+          aria-label={this.label}
+          aria-hidden={!this.label ? 'true' : undefined}
+        >
+          <span class="icon__svg" />
+        </span>
+      </Host>
+    );
+  }
+}

package/src/wc/components/Icon/flag-icon-catalog.ts

@@ -0,0 +1,68 @@
+/** Auto-generated by scripts/generate-icon-catalog.mjs — do not edit. */
+import { FlagAustria } from '@ds-mo/icons/svg/flags/FlagAustria';
+import { FlagBelgium } from '@ds-mo/icons/svg/flags/FlagBelgium';
+import { FlagBulgaria } from '@ds-mo/icons/svg/flags/FlagBulgaria';
+import { FlagCanada } from '@ds-mo/icons/svg/flags/FlagCanada';
+import { FlagCroatia } from '@ds-mo/icons/svg/flags/FlagCroatia';
+import { FlagCyprus } from '@ds-mo/icons/svg/flags/FlagCyprus';
+import { FlagCzechRepublic } from '@ds-mo/icons/svg/flags/FlagCzechRepublic';
+import { FlagDenmark } from '@ds-mo/icons/svg/flags/FlagDenmark';
+import { FlagEU } from '@ds-mo/icons/svg/flags/FlagEU';
+import { FlagEstonia } from '@ds-mo/icons/svg/flags/FlagEstonia';
+import { FlagFinland } from '@ds-mo/icons/svg/flags/FlagFinland';
+import { FlagFrance } from '@ds-mo/icons/svg/flags/FlagFrance';
+import { FlagGermany } from '@ds-mo/icons/svg/flags/FlagGermany';
+import { FlagGreece } from '@ds-mo/icons/svg/flags/FlagGreece';
+import { FlagHungary } from '@ds-mo/icons/svg/flags/FlagHungary';
+import { FlagIreland } from '@ds-mo/icons/svg/flags/FlagIreland';
+import { FlagItaly } from '@ds-mo/icons/svg/flags/FlagItaly';
+import { FlagLatvia } from '@ds-mo/icons/svg/flags/FlagLatvia';
+import { FlagLithuania } from '@ds-mo/icons/svg/flags/FlagLithuania';
+import { FlagLuxembourg } from '@ds-mo/icons/svg/flags/FlagLuxembourg';
+import { FlagMalta } from '@ds-mo/icons/svg/flags/FlagMalta';
+import { FlagMexico } from '@ds-mo/icons/svg/flags/FlagMexico';
+import { FlagNetherlands } from '@ds-mo/icons/svg/flags/FlagNetherlands';
+import { FlagPoland } from '@ds-mo/icons/svg/flags/FlagPoland';
+import { FlagPortugal } from '@ds-mo/icons/svg/flags/FlagPortugal';
+import { FlagRomania } from '@ds-mo/icons/svg/flags/FlagRomania';
+import { FlagSlovakia } from '@ds-mo/icons/svg/flags/FlagSlovakia';
+import { FlagSlovenia } from '@ds-mo/icons/svg/flags/FlagSlovenia';
+import { FlagSpain } from '@ds-mo/icons/svg/flags/FlagSpain';
+import { FlagSweden } from '@ds-mo/icons/svg/flags/FlagSweden';
+import { FlagUnitedKingdom } from '@ds-mo/icons/svg/flags/FlagUnitedKingdom';
+import { FlagUnitedStates } from '@ds-mo/icons/svg/flags/FlagUnitedStates';
+
+export const flagIconCatalog: Record<string, string> = {
+  FlagAustria,
+  FlagBelgium,
+  FlagBulgaria,
+  FlagCanada,
+  FlagCroatia,
+  FlagCyprus,
+  FlagCzechRepublic,
+  FlagDenmark,
+  FlagEU,
+  FlagEstonia,
+  FlagFinland,
+  FlagFrance,
+  FlagGermany,
+  FlagGreece,
+  FlagHungary,
+  FlagIreland,
+  FlagItaly,
+  FlagLatvia,
+  FlagLithuania,
+  FlagLuxembourg,
+  FlagMalta,
+  FlagMexico,
+  FlagNetherlands,
+  FlagPoland,
+  FlagPortugal,
+  FlagRomania,
+  FlagSlovakia,
+  FlagSlovenia,
+  FlagSpain,
+  FlagSweden,
+  FlagUnitedKingdom,
+  FlagUnitedStates,
+};

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

@@ -0,0 +1 @@
+export type { IconSize, IconColorToken, IconColor } from './Icon';