@ds-mo/ui 2.8.0 → 2.9.0

package/src/wc/components/ToggleButton/ToggleButton.tsx

@@ -1,124 +0,0 @@
-import { Component, Prop, Event, EventEmitter, h, Host } from '@stencil/core';
-import type { IconSize } from '../Icon/Icon';
-import { resolveCssLengthPx, TOKEN_DEFAULTS } from '../../utils';
-
-export type ToggleButtonElevation  = 'none' | 'flat' | 'elevated' | 'floating';
-export type ToggleButtonSize       = 'md' | 'sm' | 'xs';
-export type ToggleButtonBackground = 'faint' | 'medium' | 'bold' | 'strong' | 'always-dark';
-
-const ICON_SIZE: Record<ToggleButtonSize, IconSize> = { md: 'md', sm: 'sm', xs: 'xs' };
-
-const ICON_TOKEN: Record<ToggleButtonSize, string> = {
-  md: TOKEN_DEFAULTS.iconographyMd,
-  sm: TOKEN_DEFAULTS.iconographySm,
-  xs: TOKEN_DEFAULTS.iconographyXs,
-};
-
-const TEXT_CLASS: Record<ToggleButtonSize, string> = {
-  md: 'text-body-medium-emphasis',
-  sm: 'text-body-small-emphasis',
-  xs: 'text-caption-emphasis',
-};
-
-@Component({
-  tag: 'ds-toggle-button',
-  styleUrl: 'ToggleButton.css',
-  scoped: true,
-})
-export class ToggleButton {
-  /**
-   * Chrome level.
-   *   none     — ghost (transparent, no border, no shadow)
-   *   flat     — border only, transparent bg
-   *   elevated — bg-primary + shadow  [default]
-   *   floating — bg-primary + FAB-strength shadow
-   */
-  @Prop() elevation: ToggleButtonElevation = 'elevated';
-
-  /** Label text. */
-  @Prop() label: string | undefined;
-
-  /**
-   * Icon name for <ds-icon>. Set via JS property.
-   * @example el.icon = 'GridView';
-   */
-  @Prop() icon: string | undefined;
-
-  /** Size: md (32px), sm (24px), xs (16px). */
-  @Prop() size: ToggleButtonSize = 'md';
-
-  /** Pill shape. */
-  @Prop() rounded: boolean = false;
-
-  /** Parent surface context — adjusts hover tokens for colored backgrounds. */
-  @Prop() background: ToggleButtonBackground | undefined;
-
-  /** Controlled pressed state. */
-  @Prop({ mutable: true }) pressed: boolean = false;
-
-  /** Disables interaction. */
-  @Prop() inactive: boolean = false;
-
-  @Prop({ attribute: 'aria-label' }) ariaLabel: string | undefined;
-
-  /** Emits the new pressed value (!pressed) on click. */
-  @Event() dsChange!: EventEmitter<boolean>;
-
-  private handleClick = () => {
-    if (this.inactive) return;
-    this.dsChange.emit(!this.pressed);
-  };
-
-  render() {
-    const size = this.size;
-    const iconSize = ICON_SIZE[size];
-    const iconPx = resolveCssLengthPx(ICON_TOKEN[size], ICON_TOKEN[size]);
-    const textClass = TEXT_CLASS[size];
-    const hasIcon = !!this.icon;
-    const hasLabel = !!this.label;
-    const isIconOnly = hasIcon && !hasLabel;
-    const isLabelOnly = hasLabel && !hasIcon;
-    const isIconAndLabel = hasIcon && hasLabel;
-    const bg = this.background;
-    const elevKey = this.elevation.charAt(0).toUpperCase() + this.elevation.slice(1);
-
-    const cls: Record<string, boolean> = {
-      'toggle-btn': true,
-      [`elevation${elevKey}`]: true,
-      sizeSM: size === 'sm',
-      sizeXS: size === 'xs',
-      rounded: this.rounded,
-      inactive: this.inactive,
-      pressed: this.pressed,
-      iconOnly: isIconOnly,
-      labelOnly: isLabelOnly,
-      iconAndLabel: isIconAndLabel,
-      onMedium: bg === 'medium',
-      onBold: bg === 'bold',
-      onStrong: bg === 'strong',
-      onAlwaysDark: bg === 'always-dark',
-    };
-
-    return (
-      <Host>
-        <button
-          type="button"
-          class={cls}
-          disabled={this.inactive}
-          aria-label={this.ariaLabel ?? this.label ?? 'toggle'}
-          aria-pressed={this.pressed}
-          onClick={this.handleClick}
-        >
-          {hasIcon && (
-            <span class="toggle-btn__icon" style={{ fontSize: `${iconPx}px` }}>
-              <ds-icon name={this.icon} size={iconSize} />
-            </span>
-          )}
-          {hasLabel && (
-            <span class={`toggle-btn__label ${textClass}`}>{this.label}</span>
-          )}
-        </button>
-      </Host>
-    );
-  }
-}

package/src/wc/components/ToggleButtonGroup/ToggleButtonGroup.tsx

@@ -1,118 +0,0 @@
-import { Component, Prop, Event, EventEmitter, h, Host } from '@stencil/core';
-
-export type ToggleGroupElevation  = 'none' | 'flat' | 'elevated' | 'floating';
-export type ToggleGroupSize       = 'md' | 'sm' | 'xs';
-export type ToggleGroupBackground = 'faint' | 'medium' | 'bold' | 'strong' | 'always-dark';
-
-export interface ToggleGroupItem {
-  id: string;
-  label?: string;
-  /** Icon name for <ds-icon>. */
-  icon?: string;
-  inactive?: boolean;
-}
-
-@Component({
-  tag: 'ds-toggle-button-group',
-  styleUrl: 'ToggleButtonGroup.css',
-  scoped: true,
-})
-export class ToggleButtonGroup {
-  /**
-   * Array of item descriptors. Set via JS property.
-   * @example el.items = [{ id: 'list', label: 'List' }, { id: 'grid', icon: 'GridView' }];
-   */
-  @Prop() items: ToggleGroupItem[] = [];
-
-  /** ID of the currently selected / pressed item. */
-  @Prop({ mutable: true }) value: string = '';
-
-  /** Chrome level for the group container. */
-  @Prop() elevation: ToggleGroupElevation = 'elevated';
-
-  /** Size passed to each ds-toggle-button. */
-  @Prop() size: ToggleGroupSize = 'md';
-
-  /** Pill shape for group + buttons. */
-  @Prop() rounded: boolean = false;
-
-  /** Parent surface context. */
-  @Prop() background: ToggleGroupBackground | undefined;
-
-  /** Emits the id of the newly selected item. */
-  @Event() dsChange!: EventEmitter<string>;
-
-  private handleItemChange(id: string) {
-    if (id === this.value) return;
-    this.value = id;
-    this.dsChange.emit(id);
-  }
-
-  render() {
-    const items = this.items;
-    const count = items.length;
-    const elev = this.elevation;
-    const elevKey = elev.charAt(0).toUpperCase() + elev.slice(1);
-    const bg = this.background;
-    const isGhost = elev === 'none';
-
-    const groupCls: Record<string, boolean> = {
-      group: true,
-      [`group${elevKey}`]: true,
-      groupRounded: this.rounded,
-    };
-
-    return (
-      <Host>
-        <div class={groupCls} role="group">
-          {items.map((item, i) => {
-            const isFirst = i === 0;
-            const isLast = i === count - 1;
-            const isMid = !isFirst && !isLast;
-            const isPressed = item.id === this.value;
-            const isIconOnly = !!item.icon && !item.label;
-            const needsRoundedCorrection = this.rounded && !isIconOnly && this.size !== 'xs';
-            const sizeKey = this.size.toUpperCase() as 'MD' | 'SM' | 'XS';
-
-            const itemCls: Record<string, boolean> = {
-              item: true,
-              first: isFirst,
-              last: isLast,
-              middle: isMid,
-              itemShort: isGhost,
-              itemPressed: isGhost && isPressed,
-              [`roundedFirst${sizeKey}`]: !!(needsRoundedCorrection && isFirst),
-              [`roundedLast${sizeKey}`]: !!(needsRoundedCorrection && isLast),
-              [`roundedMid${sizeKey}`]: !!(needsRoundedCorrection && isMid),
-            };
-
-            const dividerCls: Record<string, boolean> = {
-              divider: true,
-              dividerGhost: isGhost,
-              dividerGhostXS: isGhost && this.size === 'xs',
-              dividerGhostSM: isGhost && this.size === 'sm',
-            };
-
-            return [
-              i > 0 && (
-                <div class={dividerCls} aria-hidden="true" />
-              ),
-              <ds-toggle-button
-                class={itemCls}
-                elevation={elev}
-                size={this.size}
-                label={item.label}
-                icon={item.icon}
-                rounded={this.rounded}
-                background={bg}
-                pressed={isPressed}
-                inactive={item.inactive}
-                onDsChange={() => this.handleItemChange(item.id)}
-              />,
-            ];
-          })}
-        </div>
-      </Host>
-    );
-  }
-}