@ds-mo/ui 0.1.0

package/src/components/Tag/Tag.tsx

@@ -0,0 +1,162 @@
+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

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

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

@@ -0,0 +1,166 @@
+.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

@@ -0,0 +1,212 @@
+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>
+  ),
+};