@ethlete/components 1.0.0-next.78 → 1.0.0-next.79

package/design/standings.ts

@@ -0,0 +1,161 @@
+import focusRing from '../src/lib/focus-ring/focus-ring-styles.component.css?inline';
+import participantBase from '../src/lib/match/match-participant.component.css?inline';
+import pickBase from '../src/lib/standings/standings-pick.component.css?inline';
+import standingsBase from '../src/lib/standings/standings.component.css?inline';
+
+export type StandingsMockFormResult = 'win' | 'tie' | 'loss';
+
+export type StandingsMockRow = {
+  position: number;
+  name: string;
+  played: number;
+  wins: number;
+  ties: number;
+  losses: number;
+  /** Left out, the table has no difference column unless another row has one. */
+  difference?: number;
+  points: number;
+  /** Oldest first. Left out on every row, the table has no form column. */
+  form?: readonly StandingsMockFormResult[];
+};
+
+export type StandingsMockZone = {
+  from: number;
+  to: number;
+  label: string;
+  /** A color theme name the app registers. Left out, the zone takes the color theme around the table. */
+  color?: string;
+};
+
+export type StandingsMockOptions = {
+  rows: readonly StandingsMockRow[];
+  zones?: readonly StandingsMockZone[];
+  /** The position of the highlighted (own) row. */
+  highlighted?: number;
+  showLegend?: boolean;
+  /** Extra attributes on the host, e.g. a style or design markers. */
+  attributes?: string;
+};
+
+export type StandingsPickMockRow = {
+  name: string;
+  /** The consumer's mark template content, as HTML, drawn only while locked. */
+  mark?: string;
+  /** A design marker for the reorder handle, e.g. `hover` or `focus-visible`. */
+  handleForce?: string;
+};
+
+export type StandingsPickMockOptions = {
+  rows: readonly StandingsPickMockRow[];
+  advancingCount: number;
+  locked?: boolean;
+  /** The index of the card being dragged, and its offset from the slot in px. */
+  dragging?: { index: number; offset: number };
+  /** Per index, the preview offset in px the other cards slide by while a drag runs. */
+  shifts?: readonly number[];
+  /** Extra attributes on the host, e.g. a style or design markers. */
+  attributes?: string;
+};
+
+/** The stylesheets the standings mocks draw with: the real standings, standings pick, match participant and focus ring CSS. */
+export const standingsStyles = /* @__PURE__ */ [focusRing, participantBase, standingsBase, pickBase].join('\n');
+
+const forced = (force: string | undefined) => (force ? ` data-et-force="${force}"` : '');
+
+const colored = (color: string | undefined) => (color ? ` et-color--${color}` : '');
+
+const participant = (name: string, className: string) =>
+  `<et-match-participant class="et-match-participant ${className}"><span class="et-match-participant-emblem"><span data-mark="${(Array.from(name.trim())[0] ?? '').toUpperCase()}" class="et-match-participant-emblem-mark" aria-hidden="true"></span></span><span class="et-match-participant-names"><span class="et-match-participant-name">${name}</span></span></et-match-participant>`;
+
+const differenceText = (difference: number | undefined) =>
+  difference === undefined ? '' : difference > 0 ? `+${difference}` : `${difference}`;
+
+const FORM_SHORT = { win: 'W', tie: 'D', loss: 'L' } as const;
+
+const headCell = (column: string, label: string) =>
+  `<th class="et-standings-cell" data-column="${column}" scope="col">${label}</th>`;
+
+/** Draws an `et-standings` table with its zone bands, highlighted row and legend, as HTML. */
+export const standings = (options: StandingsMockOptions) => {
+  const zones = options.zones ?? [];
+  const hasDifference = options.rows.some((row) => row.difference !== undefined);
+  const hasForm = options.rows.some((row) => row.form);
+  const zoneOf = (position: number) => zones.find((zone) => position >= zone.from && position <= zone.to);
+
+  const head = [
+    headCell('position', '#'),
+    headCell('participant', 'Team'),
+    ...['P', 'W', 'D', 'L'].map((label) => headCell('detail', label)),
+    hasDifference ? headCell('detail', 'Diff') : '',
+    headCell('points', 'Pts'),
+    hasForm ? headCell('form', 'Form') : '',
+  ].join('');
+
+  const body = options.rows
+    .map((row) => {
+      const zone = zoneOf(row.position);
+      const highlighted = row.position === options.highlighted;
+      const attributes = [
+        zone ? ' data-zone=""' : '',
+        highlighted ? ' data-highlighted="" aria-current="true"' : '',
+      ].join('');
+      const form = row.form
+        ? `<span class="et-standings-form">${row.form.map((result) => `<span data-result="${result}" class="et-standings-form-result" aria-hidden="true">${FORM_SHORT[result]}</span>`).join('')}</span>`
+        : '';
+
+      return [
+        `<tr class="et-standings-row${colored(zone?.color)}"${attributes}>`,
+        `<th class="et-standings-cell" data-column="position" scope="row">${row.position}</th>`,
+        `<td class="et-standings-cell" data-column="participant">${participant(row.name, 'et-standings-participant')}</td>`,
+        ...[row.played, row.wins, row.ties, row.losses].map(
+          (value) => `<td class="et-standings-cell" data-column="detail">${value}</td>`,
+        ),
+        hasDifference
+          ? `<td class="et-standings-cell" data-column="detail">${differenceText(row.difference)}</td>`
+          : '',
+        `<td class="et-standings-cell" data-column="points">${row.points}</td>`,
+        hasForm ? `<td class="et-standings-cell" data-column="form">${form}</td>` : '',
+        `</tr>`,
+      ].join('');
+    })
+    .join('');
+
+  const legend =
+    options.showLegend && zones.length
+      ? `<ul aria-label="What the highlighted positions mean" class="et-standings-legend">${zones.map((zone) => `<li class="et-standings-legend-item"><span class="et-standings-legend-swatch${colored(zone.color)}" aria-hidden="true"></span>${zone.label}</li>`).join('')}</ul>`
+      : '';
+
+  return `<et-standings class="et-standings"${zones.length ? ' data-has-zones=""' : ''} ${options.attributes ?? ''}><div class="et-standings-content"><table class="et-standings-table"><thead><tr class="et-standings-head-row">${head}</tr></thead><tbody>${body}</tbody></table>${legend}</div></et-standings>`;
+};
+
+/** Draws an `et-standings-pick` list with its cut line, at rest, mid-drag or locked with marks, as HTML. */
+export const standingsPick = (options: StandingsPickMockOptions) => {
+  const items = options.rows
+    .map((row, index) => {
+      const advancing = index < options.advancingCount;
+      const dragging = options.dragging?.index === index;
+      const offset = dragging ? options.dragging?.offset : options.shifts?.[index];
+      const translate = offset ? ` style="translate: 0 ${offset}px"` : '';
+      const mark = options.locked && row.mark ? `<span class="et-standings-pick-mark">${row.mark}</span>` : '';
+      const handle = options.locked
+        ? ''
+        : `<button aria-label="Move ${row.name}, position ${index + 1}" class="et-standings-pick-handle et-focus-ring" type="button"${forced(row.handleForce)}><span class="et-standings-pick-grip" aria-hidden="true"></span></button>`;
+      const cut =
+        index === options.advancingCount - 1
+          ? `<p class="et-standings-pick-cut" aria-hidden="true"><span class="et-standings-pick-cut-line"></span><span class="et-standings-pick-cut-label">Advancing</span><span class="et-standings-pick-cut-line"></span></p>`
+          : '';
+
+      return [
+        `<li class="et-standings-pick-item"${advancing ? ' data-advancing=""' : ''}>`,
+        `<div class="et-standings-pick-row"><span class="et-standings-pick-position">${index + 1}</span>`,
+        `<div class="et-standings-pick-card"${dragging ? ' data-dragging=""' : ''}${translate}>`,
+        participant(row.name, 'et-standings-pick-participant'),
+        mark,
+        handle,
+        `</div></div>${cut}</li>`,
+      ].join('');
+    })
+    .join('');
+
+  return `<et-standings-pick class="et-standings-pick"${options.locked ? ' data-locked=""' : ''} ${options.attributes ?? ''}><ol aria-label="Your predicted order" class="et-standings-pick-list"${options.dragging ? ' data-dragging=""' : ''}>${items}</ol></et-standings-pick>`;
+};

package/design/stat-tile.ts

@@ -0,0 +1,109 @@
+import sparklineBase from '../src/lib/stat-tile/stat-tile-sparkline.component.css?inline';
+import statTileBase from '../src/lib/stat-tile/stat-tile.component.css?inline';
+import { skeleton, skeletonItem, skeletonStyles } from './skeleton';
+
+export type StatTileDeltaMockOptions = {
+  /** The formatted, signed delta, e.g. `+6.8%`. */
+  text: string;
+  direction: 'up' | 'down' | 'neutral';
+  /** Left out, `neutral`. `good` and `bad` draw the delta in the ink of its color theme. */
+  sentiment?: 'good' | 'bad' | 'neutral';
+  /**
+   * The color theme name the delta forces, as the app's semantic theme for `success` (good) or `error` (bad)
+   * resolves. Left out, the delta takes the color theme around it.
+   */
+  color?: string;
+};
+
+export type StatTileMockOptions = {
+  label: string;
+  /** The formatted value. `null` draws the dash. */
+  value: string | null;
+  unit?: string;
+  delta?: StatTileDeltaMockOptions;
+  caption?: string;
+  /** Replaces the value and footer with the skeleton, as `[loading]` does. */
+  loading?: boolean;
+  /** The values of a projected `et-stat-tile-sparkline`, oldest first. Left out, none. */
+  sparkline?: readonly (number | null)[];
+  /** Extra attributes on the stat tile, e.g. design markers. */
+  attributes?: string;
+};
+
+const VIEW_WIDTH = 100;
+const VIEW_HEIGHT = 32;
+const VIEW_PADDING = 4;
+
+const round = (value: number) => Math.round(value * 100) / 100;
+
+const DELTA_ICONS = {
+  up: 'M6 2 11 9H1Z',
+  down: 'M6 10 1 3h10Z',
+  neutral: 'M1.5 5h9v2h-9Z',
+} as const;
+
+/** The stylesheets `statTile()` draws with: the real stat-tile, sparkline and skeleton CSS. */
+export const statTileStyles = /* @__PURE__ */ [skeletonStyles, statTileBase, sparklineBase].join('\n');
+
+/** Draws an `et-stat-tile-sparkline` with the geometry the component computes, as HTML. */
+export const statTileSparkline = (values: readonly (number | null)[]) => {
+  const finite = values.filter((value): value is number => value !== null && Number.isFinite(value));
+  const min = finite.length ? Math.min(...finite) : 0;
+  const span = (finite.length ? Math.max(...finite) : 0) - min;
+  const step = values.length > 1 ? VIEW_WIDTH / (values.length - 1) : 0;
+  const plotHeight = VIEW_HEIGHT - VIEW_PADDING * 2;
+  const points = values.map((value, index) => {
+    if (value === null || !Number.isFinite(value)) return null;
+
+    const ratio = span ? (value - min) / span : 0.5;
+
+    return { x: values.length > 1 ? index * step : VIEW_WIDTH / 2, y: VIEW_PADDING + (1 - ratio) * plotHeight };
+  });
+  const segments = points
+    .map((point) => (point ? `${round(point.x)},${round(point.y)}` : '|'))
+    .join(' ')
+    .split('|')
+    .map((segment) => segment.trim().split(' ').filter(Boolean))
+    .filter((segment) => segment.length > 1);
+  const line = segments
+    .map((segment) => segment.map((point, index) => `${index ? 'L' : 'M'}${point}`).join(''))
+    .join('');
+  const current = [...points].reverse().find((point) => point !== null) ?? null;
+  const dot = current ? `<path d="M${current.x},${current.y}h0" class="et-stat-tile-sparkline-current"></path>` : '';
+
+  return `<et-stat-tile-sparkline class="et-stat-tile-sparkline" aria-hidden="true"><svg viewBox="0 0 ${VIEW_WIDTH} ${VIEW_HEIGHT}" class="et-stat-tile-sparkline-svg" preserveAspectRatio="none" aria-hidden="true" focusable="false"><path d="${line}" class="et-stat-tile-sparkline-line"></path>${dot}</svg></et-stat-tile-sparkline>`;
+};
+
+const loadingMarkup = () =>
+  skeleton({
+    content: [
+      skeletonItem({ shape: 'rect' }).replace('class="', 'class="et-stat-tile-value-skeleton '),
+      skeletonItem({ shape: 'rect' }).replace('class="', 'class="et-stat-tile-delta-skeleton '),
+    ].join(''),
+  }).replace('class="et-skeleton', 'class="et-stat-tile-skeleton et-skeleton');
+
+const deltaMarkup = (delta: StatTileDeltaMockOptions) =>
+  `<span class="et-color--${delta.color ?? 'inherited'} et-stat-tile-delta" data-direction="${delta.direction}" data-sentiment="${delta.sentiment ?? 'neutral'}"><svg class="et-stat-tile-delta-icon" viewBox="0 0 12 12" aria-hidden="true" focusable="false"><path d="${DELTA_ICONS[delta.direction]}"></path></svg>${delta.text}</span>`;
+
+const valueMarkup = (options: StatTileMockOptions) => {
+  const unit = options.unit ? ` <span class="et-stat-tile-unit">${options.unit}</span>` : '';
+  const value = options.value === null ? '<span aria-hidden="true">–</span>' : `${options.value}${unit}`;
+  const footerParts = [
+    options.delta && deltaMarkup(options.delta),
+    options.caption && `<span class="et-stat-tile-caption">${options.caption}</span>`,
+  ].filter(Boolean);
+  const footer = footerParts.length ? ` <span class="et-stat-tile-footer">${footerParts.join(' ')}</span>` : '';
+
+  return `<span class="et-stat-tile-value">${value}</span>${footer}`;
+};
+
+/** Draws an `et-stat-tile` with its projected sparkline as the component renders it, as HTML, without its visually hidden text. */
+export const statTile = (options: StatTileMockOptions) => {
+  const attributes = [options.attributes, options.loading && 'aria-busy="true"', 'class="et-stat-tile"'].filter(
+    Boolean,
+  );
+  const body = options.loading ? loadingMarkup() : valueMarkup(options);
+  const sparkline = options.sparkline ? statTileSparkline(options.sparkline) : '';
+
+  return `<et-stat-tile ${attributes.join(' ')}><span class="et-stat-tile-label">${options.label}</span> ${body}${sparkline}</et-stat-tile>`;
+};

package/design/stream.ts

@@ -0,0 +1,92 @@
+import iconBase from '../src/lib/icon/headless/icon-styles.component.css?inline';
+import { ARROW_OUT_UP_RIGHT_ICON } from '../src/lib/icon/headless/arrow-out-up-right-icon';
+import { IconDefinition } from '../src/lib/icon/headless/icon-definition';
+import { LOCK_ICON } from '../src/lib/icon/headless/lock-icon';
+import { TRIANGLE_EXCLAMATION_ICON } from '../src/lib/icon/headless/triangle-exclamation-icon';
+import consentBase from '../src/lib/stream/consent/stream-consent.component.css?inline';
+import errorBase from '../src/lib/stream/error/stream-player-error.component.css?inline';
+import loadingBase from '../src/lib/stream/loading/stream-player-loading.component.css?inline';
+import placeholderBase from '../src/lib/stream/pip/pip-slot-placeholder.component.css?inline';
+import overlayCardBase from '../src/lib/stream/stream-overlay-card-styles.component.css?inline';
+import slotBase from '../src/lib/stream/stream-player-slot-styles.component.css?inline';
+import { button, buttonStyles } from './button';
+import { iconMarkup } from './icon';
+import { loaderStyles, spinner } from './loader';
+
+export type StreamMockState = 'player' | 'loading' | 'consent' | 'error' | 'pip-placeholder';
+
+export type StreamMockOptions = {
+  /** What the slot shows: the bare player, or one of the overlays the slot mounts over it. */
+  state: StreamMockState;
+  /** The player element, as HTML. The consent state draws no player, as the slot holds it back until consent. */
+  player?: string;
+  /** A color theme name the app registers, for the overlay button. Left out, the button takes the color theme around it. */
+  buttonColor?: string;
+  /** Extra attributes on the overlay button, e.g. design markers. */
+  buttonAttributes?: string;
+  /** Extra attributes on the slot host, e.g. a style or design markers. */
+  attributes?: string;
+};
+
+/** The stylesheets `streamPlayerSlot()` draws with: the real slot, overlay card, consent, error, loading, PiP placeholder, spinner, button and icon CSS. */
+export const streamStyles = /* @__PURE__ */ [
+  buttonStyles,
+  iconBase,
+  loaderStyles,
+  slotBase,
+  overlayCardBase,
+  consentBase,
+  errorBase,
+  loadingBase,
+  placeholderBase,
+].join('\n');
+
+const LABELS = {
+  loading: 'Loading',
+  consentHeading: 'Content blocked',
+  consentDescription: 'Playback requires your consent. Third-party cookies and data may be used.',
+  consentAccept: 'Allow and play',
+  errorHeading: 'Playback failed',
+  errorDescription: 'The player could not be loaded. Please check your connection or try again.',
+  errorRetry: 'Retry',
+  pipPlaceholderMessage: 'Playing in picture-in-picture',
+  pipPlaceholderBack: 'Back to player',
+} as const;
+
+const icon = (definition: IconDefinition, className: string) =>
+  iconMarkup(definition, className)
+    .replace(/^<i /, '<span ')
+    .replace(/<\/i>$/, '</span>');
+
+const overlayButton = (label: string, options: StreamMockOptions) =>
+  button({ label, color: options.buttonColor }).replace('<button ', `<button ${options.buttonAttributes ?? ''} `);
+
+const consent = (options: StreamMockOptions) =>
+  `<et-stream-consent class="et-stream-consent" role="group" aria-labelledby="et-stream-consent-heading-0"><div class="et-stream-consent-card">${icon(LOCK_ICON, 'et-stream-consent-icon')}<p id="et-stream-consent-heading-0" class="et-stream-consent-heading">${LABELS.consentHeading}</p><p class="et-stream-consent-description">${LABELS.consentDescription}</p>${overlayButton(LABELS.consentAccept, options)}</div></et-stream-consent>`;
+
+const loading = () =>
+  `<et-stream-player-loading class="et-stream-player-loading" role="status" aria-label="${LABELS.loading}">${spinner({ diameter: 35, strokeWidth: 2, track: true })}</et-stream-player-loading>`;
+
+const error = (options: StreamMockOptions) =>
+  `<et-stream-player-error class="et-stream-player-error" role="alert"><div class="et-stream-player-error-card">${icon(TRIANGLE_EXCLAMATION_ICON, 'et-stream-player-error-icon')}<p class="et-stream-player-error-heading">${LABELS.errorHeading}</p><p class="et-stream-player-error-description">${LABELS.errorDescription}</p>${overlayButton(LABELS.errorRetry, options)}</div></et-stream-player-error>`;
+
+const pipPlaceholder = (options: StreamMockOptions) =>
+  `<et-pip-slot-placeholder><div class="et-pip-slot-placeholder-overlay"><div class="et-pip-slot-placeholder-card">${icon(ARROW_OUT_UP_RIGHT_ICON, 'et-pip-slot-placeholder-icon')}<p class="et-pip-slot-placeholder-message">${LABELS.pipPlaceholderMessage}</p>${overlayButton(LABELS.pipPlaceholderBack, options)}</div></div></et-pip-slot-placeholder>`;
+
+const OVERLAY = {
+  player: () => '',
+  loading,
+  consent,
+  error,
+  'pip-placeholder': pipPlaceholder,
+} as const satisfies Record<StreamMockState, (options: StreamMockOptions) => string>;
+
+/**
+ * Draws an `etStreamPlayerSlot` host as HTML: the player element and the overlay the slot mounts for the state,
+ * with the default labels. The loading spinner is held at one frame.
+ */
+export const streamPlayerSlot = (options: StreamMockOptions) => {
+  const player = options.state === 'consent' || options.state === 'pip-placeholder' ? '' : (options.player ?? '');
+
+  return `<div class="et-stream-player-slot" ${options.attributes ?? ''}>${player}${OVERLAY[options.state](options)}</div>`;
+};

package/design/switch.ts

@@ -0,0 +1,83 @@
+import { interactiveStyles } from '@ethlete/core/design/interactive-styles';
+import choiceFieldBase from '../src/lib/forms/choice-field/choice-field.component.css?inline';
+import choiceFieldCard from '../src/lib/forms/choice-field/choice-field-card-styles.component.css?inline';
+import label from '../src/lib/forms/form-field/headless/label.directive.css?inline';
+import selectionCard from '../src/lib/forms/selection-card-styles.component.css?inline';
+import switchBase from '../src/lib/forms/switch/switch.component.css?inline';
+
+export type SwitchMockOptions = {
+  checked?: boolean;
+  /** The bulk-edit state: the thumb parks mid-track. Wins over `checked` in the look. */
+  indeterminate?: boolean;
+  disabled?: boolean;
+  /** View-only: the normal look, without the interactive affordance. */
+  readonly?: boolean;
+  required?: boolean;
+  /** The label, as HTML. Draws the switch inside an `<et-choice-field>`; left out, the switch stands alone. */
+  label?: string;
+  /** Unique per frame: the label id derives from it. */
+  id?: string;
+  /** The `et-choice-field` size. Only drawn with a `label`. */
+  size?: 'sm' | 'md' | 'lg';
+  /** The `et-choice-field` variant. Only drawn with a `label`. */
+  variant?: 'plain' | 'card';
+  /** Where a `card` puts the switch. */
+  controlPosition?: 'start' | 'end';
+  /** A color theme name the app registers. Only drawn with a `label`. */
+  color?: string;
+  /** Extra attributes on the `<et-switch>`, e.g. design markers like `data-et-force="hover"`. */
+  attributes?: string;
+};
+
+/** The stylesheets `switchControl()` draws with: the real `et-switch` and `et-choice-field` CSS. */
+export const switchStyles = /* @__PURE__ */ [
+  interactiveStyles,
+  label,
+  selectionCard,
+  choiceFieldBase,
+  choiceFieldCard,
+  switchBase,
+].join('\n');
+
+/** Draws `<et-switch>` as HTML, inside an `<et-choice-field>` when it has a label, with the DOM the components render. */
+export const switchControl = (options: SwitchMockOptions = {}) => {
+  const { id = 'switch', variant = 'plain' } = options;
+  const labelId = options.label !== undefined ? `et-label-${id}` : null;
+
+  const switchAttributes = [
+    options.attributes,
+    'role="switch"',
+    'class="et-switch et-color-interactive"',
+    'data-can-animate="true"',
+    `aria-checked="${!!options.checked}"`,
+    options.indeterminate && 'data-indeterminate="true"',
+    options.disabled && 'aria-disabled="true"',
+    options.readonly && 'aria-readonly="true" data-readonly="true"',
+    options.required && 'aria-required="true"',
+    labelId && `aria-labelledby="${labelId}"`,
+    `tabindex="${options.disabled ? -1 : 0}"`,
+  ].filter(Boolean);
+
+  const control = `<et-switch ${switchAttributes.join(' ')}><div class="et-switch-track"><div class="et-switch-thumb"></div></div></et-switch>`;
+
+  if (labelId === null) return control;
+
+  const fieldAttributes = [
+    `class="et-choice-field et-color--${options.color ?? 'inherited'}"`,
+    `data-size="${options.size ?? 'md'}"`,
+    `data-variant="${variant}"`,
+    'data-can-animate="true"',
+    variant === 'card' && `data-control-position="${options.controlPosition ?? 'end'}"`,
+  ].filter(Boolean);
+
+  const controlClasses = [
+    variant === 'card' && 'et-selection-card',
+    'et-choice-field-control',
+    'et-color-interactive',
+    'et-color-interactive-container',
+  ].filter(Boolean);
+
+  const labelHtml = `<et-label id="${labelId}"${options.disabled ? ' data-disabled="true"' : ''}><span class="et-label-content">${options.label}</span>${options.required ? '<span class="et-label-required-marker" aria-hidden="true">*</span>' : ''}</et-label>`;
+
+  return `<et-choice-field ${fieldAttributes.join(' ')}><div class="${controlClasses.join(' ')}"><div class="et-choice-field-control-slot et-selection-card-control">${control}</div><div class="et-choice-field-label-area et-selection-card-content">${labelHtml}</div></div></et-choice-field>`;
+};