@ds-mo/ui 0.2.4 → 0.4.0

package/src/components/Tag/Tag.tsx

@@ -1,162 +0,0 @@
-import React, { forwardRef } from 'react';
-import { cn } from '@/utils/cn';
-import { Text } from '@/components/Text';
-import { LabelWrap } from '@/components/LabelWrap';
-import { Cross } from '@ds-mo/icons';
-import type { IconComponent } from '@/types/icons';
-import styles from './Tag.module.css';
-
-export type TagIntent      = 'neutral' | 'brand' | 'ai' | 'negative' | 'warning' | 'caution' | 'positive';
-export type TagContrast    = 'strong' | 'bold' | 'medium' | 'faint';
-export type TagElevation   = 'none' | 'flat' | 'elevated';
-export type TagSize        = 'md' | 'sm' | 'xs';
-export type TagBackground  = 'faint' | 'medium' | 'bold' | 'strong' | 'always-dark';
-
-export interface TagProps {
-  label: string;
-  intent?: TagIntent;
-  contrast?: TagContrast;
-  /**
-   * Visual chrome level.
-   *   none     — filled with intent bg, no border, no shadow  [default]
-   *   flat     — transparent bg + intent-coloured border ring
-   *   elevated — filled with intent bg + elevated shadow
-   */
-  elevation?: TagElevation;
-  size?: TagSize;
-  rounded?: boolean;
-  /** Leading icon component. */
-  icon?: IconComponent;
-  removable?: boolean;
-  onRemove?: () => void;
-  /** Override the default Cross remove icon. */
-  removeIcon?: IconComponent;
-  maxWidth?: string | number;
-  inactive?: boolean;
-  /** Parent surface context. Adjusts hover tokens for tags on colored backgrounds. */
-  background?: TagBackground;
-  /** Makes the tag clickable. Pair with pressed/onPressedChange for filter-chip behaviour. */
-  onClick?: () => void;
-  pressed?: boolean;
-  onPressedChange?: (pressed: boolean) => void;
-  className?: string;
-}
-
-const ICON_SIZE: Record<TagSize, number> = { md: 20, sm: 16, xs: 12 };
-
-const TEXT_STYLE_MAP: Record<TagSize, string> = {
-  md: 'text-body-medium',
-  sm: 'text-body-small',
-  xs: 'text-caption',
-};
-
-export const Tag = forwardRef<HTMLDivElement, TagProps>(
-  (
-    {
-      label,
-      intent    = 'neutral',
-      contrast  = 'faint',
-      elevation = 'none',
-      size      = 'md',
-      rounded   = false,
-      icon: Icon,
-      removable = false,
-      onRemove,
-      removeIcon: RemoveIcon,
-      maxWidth,
-      inactive  = false,
-      background,
-      onClick,
-      pressed,
-      onPressedChange,
-      className,
-    },
-    ref
-  ) => {
-    const isInteractive  = !!onClick || !!onPressedChange;
-    const hasRemove      = removable && !!onRemove;
-    const iconSize       = ICON_SIZE[size];
-    const textStyle      = TEXT_STYLE_MAP[size];
-    const elevKey        = elevation.charAt(0).toUpperCase() + elevation.slice(1);
-    const sizeKey        = size.toUpperCase() as 'MD' | 'SM' | 'XS';
-
-    const classes = cn(
-      styles.tag,
-      styles[`intent${intent.charAt(0).toUpperCase() + intent.slice(1)}`],
-      styles[`contrast${contrast.charAt(0).toUpperCase() + contrast.slice(1)}`],
-      styles[`elevation${elevKey}`],
-      styles[`size${size.charAt(0).toUpperCase() + size.slice(1)}`],
-      rounded    && styles.rounded,
-      // Pill padding correction — extra space-050 on bare sides (no content anchor)
-      rounded && !Icon      && (styles as Record<string, string>)[`roundedLeft${sizeKey}`],
-      rounded && !hasRemove && (styles as Record<string, string>)[`roundedRight${sizeKey}`],
-      // Icon-edge correction — reduce padding to (height − icon) / 2 on icon sides
-      !!Icon    && (styles as Record<string, string>)[`iconLeft${sizeKey}`],
-      hasRemove && (styles as Record<string, string>)[`iconRight${sizeKey}`],
-      removable  && styles.removable,
-      isInteractive && styles.interactive,
-      background && background !== 'faint' && styles[
-        background === 'always-dark' ? 'onAlwaysDark'
-          : `on${background.charAt(0).toUpperCase() + background.slice(1)}`
-      ],
-      inactive   && styles.inactive,
-      pressed    && styles.pressed,
-      className,
-    );
-
-    const style = maxWidth != null
-      ? { maxWidth: typeof maxWidth === 'number' ? `${maxWidth}px` : maxWidth }
-      : undefined;
-
-    const handleInteract = isInteractive && !inactive
-      ? () => {
-          onPressedChange?.(!pressed);
-          onClick?.();
-        }
-      : undefined;
-
-    const handleKeyDown = isInteractive && !inactive
-      ? (e: React.KeyboardEvent<HTMLDivElement>) => {
-          if (e.key === 'Enter' || e.key === ' ') {
-            e.preventDefault();
-            onPressedChange?.(!pressed);
-            onClick?.();
-          }
-        }
-      : undefined;
-
-    return (
-      <div
-        ref={ref}
-        className={classes}
-        style={style}
-        onClick={handleInteract}
-        onKeyDown={handleKeyDown}
-        role={isInteractive ? 'button' : undefined}
-        tabIndex={isInteractive && !inactive ? 0 : undefined}
-        aria-pressed={onPressedChange != null ? pressed : undefined}
-        aria-disabled={inactive || undefined}
-      >
-        {Icon && <Icon size={iconSize} />}
-        <LabelWrap size={size}>
-          <Text variant={textStyle as never} as="span" color="inherit">
-            {label}
-          </Text>
-        </LabelWrap>
-        {removable && onRemove && (
-          <button
-            type="button"
-            className={styles.removeButton}
-            onClick={(e) => { e.stopPropagation(); onRemove(); }}
-            aria-label={`Remove ${label}`}
-            tabIndex={-1}
-          >
-            {RemoveIcon ? <RemoveIcon size={iconSize} /> : <Cross size={iconSize} />}
-          </button>
-        )}
-      </div>
-    );
-  }
-);
-
-Tag.displayName = 'Tag';

package/src/components/Tag/index.ts

@@ -1,2 +0,0 @@
-export { Tag } from './Tag';
-export type { TagProps, TagIntent, TagContrast, TagElevation, TagSize, TagBackground } from './Tag';

package/src/components/Text/Text.module.css

@@ -1,166 +0,0 @@
-.text {
-  margin: 0;
-}
-
-/* ============================================
-   LINE TRUNCATION
-   ============================================ */
-
-.truncate1Line {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.truncate2Lines {
-  overflow: hidden;
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-  text-overflow: ellipsis;
-  word-break: break-word;
-}
-
-.truncate3Lines {
-  overflow: hidden;
-  display: -webkit-box;
-  -webkit-line-clamp: 3;
-  -webkit-box-orient: vertical;
-  text-overflow: ellipsis;
-  word-break: break-word;
-}
-
-.truncate4Lines {
-  overflow: hidden;
-  display: -webkit-box;
-  -webkit-line-clamp: 4;
-  -webkit-box-orient: vertical;
-  text-overflow: ellipsis;
-  word-break: break-word;
-}
-
-.truncate5Lines {
-  overflow: hidden;
-  display: -webkit-box;
-  -webkit-line-clamp: 5;
-  -webkit-box-orient: vertical;
-  text-overflow: ellipsis;
-  word-break: break-word;
-}
-
-.noTruncation {
-  word-break: break-word;
-  white-space: normal;
-}
-
-.wrapNowrap {
-  white-space: nowrap;
-  word-break: normal;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  min-width: 0;
-}
-
-.wrapBalance {
-  text-wrap: balance;
-}
-
-.wrapPretty {
-  text-wrap: pretty;
-}
-
-/* ============================================
-   TEXT COLOR - Semantic Tokens
-   ============================================ */
-
-.colorPrimary {
-  color: var(--color-foreground-primary);
-}
-
-.colorSecondary {
-  color: var(--color-foreground-secondary);
-}
-
-.colorTertiary {
-  color: var(--color-foreground-tertiary);
-}
-
-.colorBrand {
-  color: var(--color-foreground-bold-brand);
-}
-
-.colorNegative {
-  color: var(--color-foreground-bold-negative);
-}
-
-.colorPositive {
-  color: var(--color-foreground-bold-positive);
-}
-
-.colorWarning {
-  color: var(--color-foreground-bold-warning);
-}
-
-.colorCaution {
-  color: var(--color-foreground-bold-caution);
-}
-
-.colorAi {
-  color: var(--color-foreground-bold-ai);
-}
-
-.colorOnStrong {
-  color: var(--color-foreground-on-strong-background-primary);
-}
-
-.colorOnBold {
-  color: var(--color-foreground-on-bold-background-primary);
-}
-
-.colorInherit {
-  color: inherit;
-}
-
-/* ============================================
-   TEXT DECORATION
-   ============================================ */
-
-.decorationNone {
-  text-decoration: none;
-}
-
-.decorationUnderline {
-  text-decoration: underline;
-  text-underline-offset: 2px;
-  text-decoration-thickness: 1px;
-}
-
-.decorationDottedUnderline {
-  text-decoration: underline dotted;
-  text-underline-offset: 2px;
-  text-decoration-thickness: 1px;
-}
-
-/* ============================================
-   FONT STYLE
-   ============================================ */
-
-.italic {
-  font-style: italic;
-}
-
-/* ============================================
-   TEXT ALIGNMENT
-   ============================================ */
-
-.alignLeft {
-  text-align: left;
-}
-
-.alignCenter {
-  text-align: center;
-}
-
-.alignRight {
-  text-align: right;
-}

package/src/components/Text/Text.stories.tsx

@@ -1,212 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import React from 'react';
-import { Text } from './Text';
-import type { TextVariant, TextColorToken } from './Text';
-
-const VARIANTS: TextVariant[] = [
-  'text-display-medium',
-  'text-display-small',
-  'text-title-large',
-  'text-title-medium',
-  'text-title-small',
-  'text-body-large',
-  'text-body-large-emphasis',
-  'text-body-medium',
-  'text-body-medium-emphasis',
-  'text-body-small',
-  'text-body-small-emphasis',
-  'text-caption',
-  'text-caption-emphasis',
-];
-
-const COLORS: TextColorToken[] = [
-  'primary', 'secondary', 'tertiary',
-  'brand', 'negative', 'positive', 'warning', 'caution', 'ai',
-  'on-strong', 'on-bold', 'inherit',
-];
-
-const meta: Meta<typeof Text> = {
-  title: 'Primitives (Reviewed)/Text',
-  component: Text,
-  args: {
-    variant: 'text-body-medium',
-    children: 'The quick brown fox jumps over the lazy dog',
-  },
-  argTypes: {
-    variant:       { control: 'select', options: VARIANTS },
-    color:         { control: 'select', options: COLORS },
-    as:            { control: 'select', options: ['p', 'span', 'div', 'label', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'] },
-    align:         { control: 'select', options: ['left', 'center', 'right'] },
-    decoration:    { control: 'select', options: ['none', 'underline', 'dotted-underline'] },
-    italic:        { control: 'boolean' },
-    lineTruncation:{ control: 'select', options: [1, 2, 3, 4, 5, 'none'] },
-    wrap:          { control: 'select', options: ['wrap', 'nowrap', 'balance', 'pretty'] },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof Text>;
-
-// ─── Helpers ──────────────────────────────────────────────────────────────────
-
-const monoLabel = (text: string) => (
-  <span style={{ fontSize: 10, fontFamily: 'monospace', color: 'var(--color-foreground-tertiary)', minWidth: 210, flexShrink: 0, paddingTop: 2 }}>
-    {text}
-  </span>
-);
-
-const sectionHeading = (title: string) => (
-  <div style={{ fontSize: 10, fontFamily: 'monospace', fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.08em', color: 'var(--color-foreground-tertiary)', marginTop: 12, marginBottom: 2 }}>
-    {title}
-  </div>
-);
-
-const divider = <hr style={{ border: 'none', borderTop: '1px solid var(--color-border-tertiary)', margin: '12px 0' }} />;
-
-const SAMPLE      = 'The quick brown fox jumps over the lazy dog';
-const SHORT_SAMPLE = 'Bright vixens jump dozy fowl quack';
-const LONG_SAMPLE  = 'This text is intentionally long to demonstrate how the component behaves when content exceeds the available width and must either wrap or truncate gracefully.';
-
-// ─── Stories ──────────────────────────────────────────────────────────────────
-
-export const Playground: Story = {};
-
-export const TypeScale: Story = {
-  name: 'Type Scale',
-  parameters: { layout: 'padded' },
-  render: () => (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
-      {sectionHeading('Display')}
-      {(['text-display-medium', 'text-display-small'] as TextVariant[]).map(v => (
-        <div key={v} style={{ display: 'flex', alignItems: 'baseline', gap: 16 }}>
-          {monoLabel(v)}
-          <Text variant={v}>{SHORT_SAMPLE}</Text>
-        </div>
-      ))}
-      {divider}
-      {sectionHeading('Title')}
-      {(['text-title-large', 'text-title-medium', 'text-title-small'] as TextVariant[]).map(v => (
-        <div key={v} style={{ display: 'flex', alignItems: 'baseline', gap: 16 }}>
-          {monoLabel(v)}
-          <Text variant={v}>{SAMPLE}</Text>
-        </div>
-      ))}
-      {divider}
-      {sectionHeading('Body')}
-      {([
-        'text-body-large', 'text-body-large-emphasis',
-        'text-body-medium', 'text-body-medium-emphasis',
-        'text-body-small', 'text-body-small-emphasis',
-      ] as TextVariant[]).map(v => (
-        <div key={v} style={{ display: 'flex', alignItems: 'baseline', gap: 16 }}>
-          {monoLabel(v)}
-          <Text variant={v}>{SAMPLE}</Text>
-        </div>
-      ))}
-      {divider}
-      {sectionHeading('Caption')}
-      {(['text-caption', 'text-caption-emphasis'] as TextVariant[]).map(v => (
-        <div key={v} style={{ display: 'flex', alignItems: 'baseline', gap: 16 }}>
-          {monoLabel(v)}
-          <Text variant={v}>{SAMPLE}</Text>
-        </div>
-      ))}
-    </div>
-  ),
-};
-
-export const Colors: Story = {
-  parameters: { layout: 'padded' },
-  render: () => (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
-      {(['primary', 'secondary', 'tertiary'] as TextColorToken[]).map(color => (
-        <div key={color} style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
-          {monoLabel(color)}
-          <Text variant="text-body-medium" color={color}>{SAMPLE}</Text>
-        </div>
-      ))}
-      {divider}
-      {(['brand', 'negative', 'positive', 'warning', 'caution', 'ai'] as TextColorToken[]).map(color => (
-        <div key={color} style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
-          {monoLabel(color)}
-          <Text variant="text-body-medium" color={color}>{SAMPLE}</Text>
-        </div>
-      ))}
-      {divider}
-      {/* on-strong and on-bold require a colored background to be legible */}
-      <div style={{ display: 'flex', gap: 12 }}>
-        <div style={{ background: 'var(--color-background-strong-brand)', borderRadius: 8, padding: '12px 16px', flex: 1, display: 'flex', gap: 16, alignItems: 'center' }}>
-          {monoLabel('on-strong')}
-          <Text variant="text-body-medium" color="on-strong">{SAMPLE}</Text>
-        </div>
-      </div>
-      <div style={{ display: 'flex', gap: 12 }}>
-        <div style={{ background: 'var(--color-background-bold-brand)', borderRadius: 8, padding: '12px 16px', flex: 1, display: 'flex', gap: 16, alignItems: 'center' }}>
-          {monoLabel('on-bold')}
-          <Text variant="text-body-medium" color="on-bold">{SAMPLE}</Text>
-        </div>
-      </div>
-    </div>
-  ),
-};
-
-export const Decorations: Story = {
-  parameters: { layout: 'padded' },
-  render: () => (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
-      {([
-        { label: 'underline',        props: { decoration: 'underline' as const } },
-        { label: 'dotted-underline', props: { decoration: 'dotted-underline' as const } },
-        { label: 'italic',           props: { italic: true } },
-        { label: 'italic + underline', props: { italic: true, decoration: 'underline' as const } },
-      ]).map(({ label, props }) => (
-        <div key={label} style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
-          {monoLabel(label)}
-          <Text variant="text-body-medium" {...props}>{SAMPLE}</Text>
-        </div>
-      ))}
-    </div>
-  ),
-};
-
-export const Alignment: Story = {
-  parameters: { layout: 'padded' },
-  render: () => (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: 8, width: 480 }}>
-      {(['left', 'center', 'right'] as const).map(align => (
-        <div key={align} style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
-          {monoLabel(align)}
-          <Text
-            variant="text-body-medium"
-            align={align}
-            style={{ flex: 1, background: 'var(--color-background-secondary)', borderRadius: 6, padding: '8px 12px' }}
-          >
-            The quick brown fox
-          </Text>
-        </div>
-      ))}
-    </div>
-  ),
-};
-
-export const Truncation: Story = {
-  parameters: { layout: 'padded' },
-  render: () => (
-    <div style={{ maxWidth: 400, display: 'flex', flexDirection: 'column', gap: 12 }}>
-      {([1, 2, 3] as const).map(lines => (
-        <div key={lines} style={{ display: 'flex', gap: 16, alignItems: 'flex-start' }}>
-          {monoLabel(`${lines} line${lines > 1 ? 's' : ''}`)}
-          <Text variant="text-body-medium" lineTruncation={lines} style={{ flex: 1 }}>
-            {LONG_SAMPLE}
-          </Text>
-        </div>
-      ))}
-      <div style={{ display: 'flex', gap: 16, alignItems: 'flex-start' }}>
-        {monoLabel('no truncation')}
-        <Text variant="text-body-medium" style={{ flex: 1 }}>
-          {LONG_SAMPLE}
-        </Text>
-      </div>
-    </div>
-  ),
-};