@times-design-system/components-wordpress 0.4.0 → 1.2.0

package/src/CommentsDisabled/TOKEN_MAPPING.md

@@ -1,269 +0,0 @@
-# CommentsDisabled Component - Token Mapping Reference
-
-This document provides a comprehensive mapping between the CommentsDisabled component's design elements and the Times Design System tokens.
-
-## Component Structure
-
-The CommentsDisabled component consists of four main elements:
-
-```
-.tds-comments-disabled
-├── .tds-comments-disabled__heading (h3)
-├── .tds-comments-disabled__divider (hr)
-└── .tds-comments-disabled__content (p)
-    └── .tds-comments-disabled__link (a)
-```
-
-## Token Mapping
-
-### Container (`.tds-comments-disabled`)
-
-| Property         | Token                            | Value | Fallback |
-| ---------------- | -------------------------------- | ----- | -------- |
-| `margin-inline`  | auto                             | -     | -        |
-| `padding-inline` | `--tds-foundation-dimension-500` | 20px  | -        |
-| `width`          | -                                | 100%  | -        |
-
-**Token Details:**
-
-- `--tds-foundation-dimension-500` is the responsive horizontal padding
-- Used for balanced spacing on all viewports
-
-### Heading (`.tds-comments-disabled__heading`)
-
-| Property         | Token                                     | Value           | Usage                   |
-| ---------------- | ----------------------------------------- | --------------- | ----------------------- |
-| `font-family`    | `--tds-foundation-font-family040`         | Roboto          | Primary UI font         |
-| `font-size`      | `--tds-foundation-font-size040`           | 1.125rem (18px) | Readable heading        |
-| `font-weight`    | `--tds-foundation-font-weight050`         | 500 (Medium)    | Emphasis                |
-| `line-height`    | `--tds-foundation-font-line-height030`    | 1.25            | Comfortable reading     |
-| `color`          | `--tds-foundation-foundation-brand-black` | #000000         | High contrast           |
-| `margin`         | -                                         | 0               | Reset                   |
-| `padding-top`    | `--tds-foundation-dimension-750`          | 30px            | Top spacing             |
-| `padding-bottom` | `--tds-foundation-dimension-125`          | 5px             | Separation from divider |
-| `text-align`     | -                                         | center          | Visual emphasis         |
-
-**Token Details:**
-
-- Font scale starts at foundation level
-- Weight 050 (500) provides hierarchy without being too bold
-- Line height 030 (1.25) ensures readability
-- Dimensions follow 4px base unit system
-
-### Divider (`.tds-comments-disabled__divider`)
-
-| Property             | Token                                     | Value             | Purpose               |
-| -------------------- | ----------------------------------------- | ----------------- | --------------------- |
-| `border-top`         | `--tds-foundation-foundation-brand-black` | #000000 1px solid | Visual separator      |
-| `border-top` opacity | -                                         | 10%               | Subtle, non-intrusive |
-| `margin`             | `--tds-foundation-dimension-100`          | 4px auto          | Balanced spacing      |
-| `max-width`          | -                                         | 522px             | Content width limit   |
-| `width`              | -                                         | 100%              | Responsive width      |
-| `border`             | -                                         | none              | Override default      |
-
-**Token Details:**
-
-- Black with 10% opacity creates subtle visual separation
-- Dimensions use base 4px unit: `dimension-100` = 4px
-- 522px max-width provides visual balance with heading
-
-### Content Text (`.tds-comments-disabled__content`)
-
-| Property         | Token                                     | Value         | Usage                   |
-| ---------------- | ----------------------------------------- | ------------- | ----------------------- |
-| `font-family`    | `--tds-foundation-font-family040`         | Roboto        | Consistent UI font      |
-| `font-size`      | `--tds-foundation-font-size030`           | 1rem (16px)   | Body text size          |
-| `font-weight`    | `--tds-foundation-font-weight040`         | 400 (Regular) | Normal weight           |
-| `line-height`    | `--tds-foundation-font-line-height030`    | 1.25          | Readable spacing        |
-| `color`          | `--tds-foundation-foundation-brand-black` | #000000       | High contrast           |
-| `margin`         | -                                         | 0             | Reset                   |
-| `padding-bottom` | `--tds-foundation-dimension-750`          | 30px          | Bottom spacing          |
-| `padding-top`    | `--tds-foundation-dimension-125`          | 5px           | Separation from divider |
-| `text-align`     | -                                         | center        | Visual balance          |
-
-**Token Details:**
-
-- `font-size030` is standard body text size
-- `font-weight040` ensures readability
-- Padding mirrors heading for symmetry
-
-### Link (`.tds-comments-disabled__link`)
-
-| State       | Property           | Token                                                       | Value                  | Purpose                    |
-| ----------- | ------------------ | ----------------------------------------------------------- | ---------------------- | -------------------------- |
-| **Default** | `color`            | `--tds-foundation-foundation-brand-digital-blue`            | #005c8a                | Brand identity             |
-| **Default** | `font-weight`      | `--tds-foundation-font-weight050`                           | 500                    | Visual emphasis            |
-| **Default** | `text-decoration`  | -                                                           | underline              | Link indication            |
-| **Default** | `transition`       | -                                                           | color 0.2s ease-in-out | Smooth interaction         |
-| **Hover**   | `color`            | `--tds-foundation-foundation-brand-digital-blue` (darkened) | ~#003d5a               | Interactive feedback       |
-| **Hover**   | darkening modifier | `--tds-foundation-colour-modifier-interactive-hover`        | 0.15 (15%)             | Consistent hover treatment |
-| **Active**  | `color`            | `--tds-foundation-foundation-brand-digital-blue` (darkened) | ~#003147               | Pressed feedback           |
-| **Active**  | darkening modifier | `--tds-foundation-colour-modifier-interactive-pressed`      | 0.25 (25%)             | Clear active state         |
-| **Focus**   | `outline`          | `--tds-foundation-foundation-brand-digital-blue`            | 2px solid #005c8a      | Keyboard accessible        |
-| **Focus**   | `outline-offset`   | -                                                           | 2px                    | Visible focus ring         |
-
-**Token Details:**
-
-- Brand digital blue is primary call-to-action color
-- Hover uses `colour-modifier-interactive-hover` for consistent interaction
-- Active uses `colour-modifier-interactive-pressed` for distinction
-- Focus outline uses brand blue for visibility
-
-#### Link Color Mix Formula
-
-**Hover State:**
-
-```css
-color-mix(
-  in srgb,
-  var(--tds-foundation-foundation-brand-digital-blue) calc(100% - 0.15 * 100%),
-  var(--tds-foundation-foundation-brand-black)
-)
-```
-
-Results in ~15% darker blue
-
-**Active State:**
-
-```css
-color-mix(
-  in srgb,
-  var(--tds-foundation-foundation-brand-digital-blue) calc(100% - 0.25 * 100%),
-  var(--tds-foundation-foundation-brand-black)
-)
-```
-
-Results in ~25% darker blue
-
-## Responsive Behavior
-
-### Viewport Modifiers
-
-The component uses viewport multipliers for responsive sizing:
-
-- **Small Viewport (< 768px)**
-  - Heading: `calc(font-size040 * viewport-multiplier-small)` = 1.125rem × 1.0 = 1.125rem
-  - Content: `calc(font-size030 * viewport-multiplier-small)` = 1rem × 1.0 = 1rem
-- **Large Viewport (≥ 768px)**
-  - Heading: Full size (1.125rem)
-  - Content: Full size (1rem)
-
-**Token Values:**
-
-- `--tds-foundation-viewport-multiplier-small` = 1.0
-- Base font sizes are already optimized for readability
-
-## Color Palette Reference
-
-### Brand Colors Used
-
-| Color Name   | Token                                            | Hex Value | Usage                    |
-| ------------ | ------------------------------------------------ | --------- | ------------------------ |
-| Digital Blue | `--tds-foundation-foundation-brand-digital-blue` | #005c8a   | Link color, interactions |
-| Black        | `--tds-foundation-foundation-brand-black`        | #000000   | Text, heading, divider   |
-
-### Color Accessibility
-
-- **Text to Background:** Black (#000000) on white background
-  - Contrast Ratio: 21:1 (WCAG AAA)
-- **Link to Background:** Digital Blue (#005c8a) on white background
-  - Contrast Ratio: 8.5:1 (WCAG AAA)
-- **Link Hover:** ~#003d5a on white background
-  - Contrast Ratio: 14:1 (WCAG AAA)
-
-## Font Scale Reference
-
-| Token          | Size (rem) | Size (px) | Usage        |
-| -------------- | ---------- | --------- | ------------ |
-| `font-size030` | 1          | 16        | Content text |
-| `font-size040` | 1.125      | 18        | Heading      |
-
-### Font Family Reference
-
-| Token            | Family | Usage              |
-| ---------------- | ------ | ------------------ |
-| `font-family040` | Roboto | All component text |
-
-### Font Weight Reference
-
-| Token            | Weight | Usage         |
-| ---------------- | ------ | ------------- |
-| `font-weight040` | 400    | Content text  |
-| `font-weight050` | 500    | Heading, link |
-
-### Line Height Reference
-
-| Token                 | Value | Usage    |
-| --------------------- | ----- | -------- |
-| `font-line-height030` | 1.25  | All text |
-
-## Dimension Reference
-
-| Token           | Value (px) | Usage              |
-| --------------- | ---------- | ------------------ |
-| `dimension-50`  | 2          | -                  |
-| `dimension-100` | 4          | Divider margin     |
-| `dimension-125` | 5          | -                  |
-| `dimension-500` | 20         | Container padding  |
-| `dimension-750` | 30         | Top/bottom padding |
-
-## Colour Modifier Reference
-
-| Token                                 | Value | Usage                 |
-| ------------------------------------- | ----- | --------------------- |
-| `colour-modifier-interactive-hover`   | 0.15  | Link hover darkening  |
-| `colour-modifier-interactive-pressed` | 0.25  | Link active darkening |
-
-## Implementation Notes
-
-### Why These Tokens?
-
-1. **Consistency:** All tokens come from the foundation set, ensuring visual consistency across the design system
-2. **Accessibility:** Color choices ensure WCAG AAA compliance
-3. **Scalability:** Dimension tokens use 4px base unit for predictable spacing
-4. **Responsiveness:** Viewport multipliers allow for one component definition across all screen sizes
-5. **Maintainability:** Using tokens instead of hard-coded values makes theme changes simple
-
-### Token Hierarchy
-
-```
-Foundation Tokens (Base values)
-├── Brand Colors (digital-blue, black, white)
-├── Typography (fonts, sizes, weights, line-heights)
-├── Spacing (dimensions)
-└── Modifiers (colour-modifier-interactive-*)
-```
-
-### CSS Variable Usage
-
-All tokens are accessed via CSS custom properties (variables):
-
-```css
-.tds-comments-disabled__link {
-  color: var(--tds-foundation-foundation-brand-digital-blue);
-  font-weight: var(--tds-foundation-font-weight050);
-}
-```
-
-This allows for:
-
-- Runtime theme switching
-- Easy dark mode support in future updates
-- Consistent token naming across the design system
-- Clear token traceability in browser DevTools
-
-## Maintenance
-
-When updating this component:
-
-1. Always check if tokens exist before using hard-coded values
-2. Use the most specific token available (e.g., prefer `font-family040` over generic "sans-serif")
-3. Document any new token usage in this reference
-4. Test on multiple viewports to ensure responsive design works correctly
-5. Verify contrast ratios when changing colors
-
-## Related Documentation
-
-- Design Token Framework: `/packages/tokens/design-token-framework.md`
-- CSS Variables File: `/build/css/variables.css`
-- Design System Guidelines: `/packages/tokens/README.md`

package/src/CommentsDisabled/index.ts

@@ -1,2 +0,0 @@
-export { CommentsDisabled } from './CommentsDisabled';
-export type { CommentsDisabledProps } from './CommentsDisabled';

package/src/CommentsDisabled/styles.css

@@ -1,82 +0,0 @@
-
-
-/**
- * CommentsDisabled Component Styles
- * Maps Times Design System tokens to semantic styles
- */
-
-/* Base Container */
-.tds-comments-disabled {
-  margin-inline: auto;
-  padding-inline: var(--tds-dimension-500);
-  width: 100%;
-}
-
-/* Heading */
-.tds-comments-disabled__heading {
-  margin: 0;
-  padding-top: var(--tds-dimension-750);
-  padding-bottom: var(--tds-dimension-125);
-  text-align: center;
-  color: var(--tds-light-core-light-text-primary);
-}
-
-/* Divider */
-.tds-comments-disabled__divider {
-  margin: var(--tds-dimension-100) auto;
-  max-width: 522px;
-  width: 100%;
-  border: none;
-  border-top: 1px solid var(--tds-light-core-border-secondary);
-  opacity: 0.1;
-}
-
-/* Content Text */
-.tds-comments-disabled__content {
-  margin: 0;
-  padding-bottom: var(--tds-dimension-750);
-  padding-top: var(--tds-dimension-125);
-  text-align: center;
-  color: var(--tds-light-brand-brand-core-ramp-core-neutral-700);
-}
-
-/* Guidelines Link */
-.tds-comments-disabled__link {
-  text-decoration: underline;
-  color: var(--tds-foundation-brand-digital-blue);
-  transition: color 0.2s ease-in-out;
-  cursor: pointer;
-}
-
-.tds-comments-disabled__link:hover {
-  color: color-mix(
-    in srgb,
-    var(--tds-foundation-brand-digital-blue) calc(100% - var(--tds-colour-modifier-interactive-hover) * 100%),
-    var(--tds-foundation-brand-black)
-  );
-}
-
-.tds-comments-disabled__link:active {
-  color: color-mix(
-    in srgb,
-    var(--tds-foundation-brand-digital-blue) calc(100% - var(--tds-colour-modifier-interactive-pressed) * 100%),
-    var(--tds-foundation-brand-black)
-  );
-}
-
-/* Focus State */
-.tds-comments-disabled__link:focus-visible {
-  outline: 2px solid var(--tds-foundation-brand-digital-blue);
-  outline-offset: 2px;
-}
-
-/* Responsive */
-/* @media (max-width: 768px) {
-  .tds-comments-disabled__heading {
-    font-size: calc(var(--tds-font-size040) * var(--tds-viewport-multiplier-small));
-  }
-
-  .tds-comments-disabled__content {
-    font-size: calc(var(--tds-font-size030) * var(--tds-viewport-multiplier-small));
-  }
-} */

package/src/Divider/Divider.tsx

@@ -1,41 +0,0 @@
-import React from 'react';
-import './styles.css';
-
-interface DividerProps {
-  /** Whether the divider should span full width of its container */
-  fullWidth?: boolean;
-  /** Orientation of the divider */
-  orientation?: 'horizontal' | 'vertical';
-  /** Custom spacing/margin */
-  spacing?: 'small' | 'medium' | 'large';
-  /** CSS class for additional styling */
-  className?: string;
-}
-
-/** Divider component that uses design tokens for styling */
-export const Divider: React.FC<DividerProps> = ({
-  fullWidth = true,
-  orientation = 'horizontal',
-  spacing = 'medium',
-  className = '',
-  ...props
-}) => {
-  const baseClass = 'tds-divider';
-  const orientationClass = `tds-divider--${orientation}`;
-  const spacingClass = `tds-divider--spacing-${spacing}`;
-  const widthClass = fullWidth
-    ? 'tds-divider--full-width'
-    : 'tds-divider--constrained';
-
-  const classes = [
-    baseClass,
-    orientationClass,
-    spacingClass,
-    widthClass,
-    className
-  ]
-    .filter(Boolean)
-    .join(' ');
-
-  return <div className={classes} data-node-id="4042:14179" {...props} />;
-};

package/src/Divider/styles.css

@@ -1,80 +0,0 @@
-/* Divider component styles using design tokens */
-
-/* Base divider styles */
-.tds-divider {
-  background-color: transparent;
-  box-sizing: border-box;
-}
-
-/* Horizontal divider (default) */
-.tds-divider--horizontal {
-  height: 1px;
-  width: 100%;
-  border-top: 1px solid var(--border-primary, #999999);
-  border-right: none;
-  border-bottom: none;
-  border-left: none;
-}
-
-/* Vertical divider */
-.tds-divider--vertical {
-  width: 1px;
-  height: 100%;
-  border-left: 1px solid var(--border-primary, #999999);
-  border-top: none;
-  border-right: none;
-  border-bottom: none;
-}
-
-/* Full width divider */
-.tds-divider--full-width {
-  width: 100%;
-  margin-left: 0;
-  margin-right: 0;
-}
-
-/* Constrained width divider */
-.tds-divider--constrained {
-  width: auto;
-  margin-left: auto;
-  margin-right: auto;
-  flex-shrink: 0;
-}
-
-/* Spacing variants */
-.tds-divider--spacing-small {
-  margin-top: var(--tds-dimension-200, 8px);
-  margin-bottom: var(--tds-dimension-200, 8px);
-}
-
-.tds-divider--spacing-medium {
-  margin-top: var(--tds-dimension-400, 16px);
-  margin-bottom: var(--tds-dimension-400, 16px);
-}
-
-.tds-divider--spacing-large {
-  margin-top: var(--tds-dimension-600, 24px);
-  margin-bottom: var(--tds-dimension-600, 24px);
-}
-
-/* Vertical spacing for vertical dividers */
-.tds-divider--vertical.tds-divider--spacing-small {
-  margin-left: var(--tds-dimension-200, 8px);
-  margin-right: var(--tds-dimension-200, 8px);
-  margin-top: 0;
-  margin-bottom: 0;
-}
-
-.tds-divider--vertical.tds-divider--spacing-medium {
-  margin-left: var(--tds-dimension-400, 16px);
-  margin-right: var(--tds-dimension-400, 16px);
-  margin-top: 0;
-  margin-bottom: 0;
-}
-
-.tds-divider--vertical.tds-divider--spacing-large {
-  margin-left: var(--tds-dimension-600, 24px);
-  margin-right: var(--tds-dimension-600, 24px);
-  margin-top: 0;
-  margin-bottom: 0;
-}

package/src/Input/Input.tsx

@@ -1,62 +0,0 @@
-import React from 'react';
-import './styles.css';
-
-interface InputProps {
-  /** Label text for the input */
-  label?: string;
-  /** Input placeholder text */
-  placeholder?: string;
-  /** Input type */
-  type?: 'text' | 'email' | 'password' | 'number' | 'tel' | 'url';
-  /** Input value */
-  value?: string;
-  /** Change handler */
-  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
-  /** Disabled state */
-  disabled?: boolean;
-  /** Required state */
-  required?: boolean;
-  /** Input name attribute */
-  name?: string;
-  /** Input id attribute */
-  id?: string;
-}
-
-/** Input component with label using design tokens */
-export const Input: React.FC<InputProps> = ({
-  label,
-  placeholder,
-  type = 'text',
-  value,
-  onChange,
-  disabled = false,
-  required = false,
-  name,
-  id,
-  ...props
-}) => {
-  const inputId = id || name;
-
-  return (
-    <div className="tds-input-wrapper">
-      {label && (
-        <label htmlFor={inputId} className="tds-input-label">
-          {label}
-          {required && <span className="tds-input-required">*</span>}
-        </label>
-      )}
-      <input
-        id={inputId}
-        type={type}
-        name={name}
-        className="tds-input"
-        placeholder={placeholder}
-        value={value}
-        onChange={onChange}
-        disabled={disabled}
-        required={required}
-        {...props}
-      />
-    </div>
-  );
-};

package/src/Input/styles.css

@@ -1,69 +0,0 @@
-/* Input component styles using design tokens */
-
-.tds-input-wrapper {
-  display: flex;
-  flex-direction: column;
-  gap: var(--tds-dimension-200);
-}
-
-/* Label styles */
-.tds-input-label {
-  font: var(--tds-typography-styles-utility-label-medium);
-  color: var(--tds-palette-light-core-light-text-primary, #1a1a1a);
-  display: flex;
-  align-items: center;
-  gap: var(--tds-dimension-50);
-}
-
-/* Required asterisk */
-.tds-input-required {
-  color: var(--tds-palette-light-core-light-text-error, #cc0000);
-}
-
-/* Input field styles */
-.tds-input {
-  width: 100%;
-  padding: var(--tds-dimension-200, 8px) var(--tds-dimension-300, 12px);
-  font: var(--tds-typography-styles-utility-body-regular-medium);
-  color: var(--tds-palette-light-core-light-text-primary, #1a1a1a);
-  background-color: var(--tds-palette-light-core-light-interactive-background-default, #ffffff);
-  border: 1px solid var(--tds-palette-light-core-light-border-primary, #999999);
-  border-radius: 0;
-  transition: all 0.2s ease-in-out;
-  box-sizing: border-box;
-}
-
-/* Input focus state */
-.tds-input:focus {
-  outline: none;
-  border-color: var(--text-interactive-primary, #0f4aa2);
-  box-shadow: 0 0 0 2px rgba(15, 74, 162, 0.1);
-}
-
-/* Input hover state */
-.tds-input:hover:not(:disabled) {
-  border-color: var(--text-interactive-primary, #0f4aa2);
-}
-
-/* Input disabled state */
-.tds-input:disabled {
-  background-color: var(--interactive-background-disabled, #f2f2f2);
-  color: var(--text-disabled, #999999);
-  border-color: var(--border-disabled, #cccccc);
-  cursor: not-allowed;
-}
-
-/* Input placeholder */
-.tds-input::placeholder {
-  color: var(--text-secondary, #666666);
-}
-
-/* Input error state (optional class to apply) */
-.tds-input.error {
-  border-color: var(--text-error, #cc0000);
-}
-
-.tds-input.error:focus {
-  border-color: var(--text-error, #cc0000);
-  box-shadow: 0 0 0 2px rgba(204, 0, 0, 0.1);
-}

package/src/Link/Link.tsx

@@ -1,49 +0,0 @@
-import React from 'react';
-import './styles.css';
-import { cn } from '../utils/cn';
-
-interface LinkProps {
-  href: string;
-  variant?: 'primary' | 'secondary' | 'danger';
-  onClick?: (e: React.MouseEvent<HTMLAnchorElement>) => void;
-  target?: '_self' | '_blank' | '_parent' | '_top';
-  rel?: string;
-  className?: string;
-  classes?: string;
-  styles?: { [key: string]: string };
-  children?: React.ReactNode;
-}
-
-/** Link UI component for navigation and interactive linking */
-export const Link: React.FC<LinkProps> = ({
-  href,
-  variant = 'primary',
-  onClick,
-  target,
-  rel,
-  className,
-  classes,
-  styles,
-  children
-}) => {
-  // If target is _blank, set rel to noopener noreferrer for security
-  const linkRel =
-    target === '_blank'
-      ? rel
-        ? `${rel} noopener noreferrer`
-        : 'noopener noreferrer'
-      : rel;
-
-  return (
-    <a
-      href={href}
-      onClick={onClick}
-      target={target}
-      rel={linkRel}
-      className={cn('tds-link', `tds-link--${variant}`, className || classes)}
-      style={styles ? styles : undefined}
-    >
-      {children}
-    </a>
-  );
-};