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

package/design/tabs.ts

@@ -0,0 +1,75 @@
+import { interactiveStyles } from '@ethlete/core/design/interactive-styles';
+import focusRing from '../src/lib/focus-ring/focus-ring-styles.component.css?inline';
+import scrollable from '../src/lib/scrollable/scrollable.component.css?inline';
+import tabBar from '../src/lib/tabs/tab-bar-styles.component.css?inline';
+import tabScale from '../src/lib/tabs/tab-scale-styles.component.css?inline';
+import tabGroup from '../src/lib/tabs/tabs/tab-group.component.css?inline';
+
+export type TabsMockTab = {
+  label: string;
+  disabled?: boolean;
+};
+
+export type TabsMockOptions = {
+  tabs: TabsMockTab[];
+  /** The index of the selected tab. Defaults to 0. */
+  selected?: number;
+  /** Defaults to `md`. */
+  size?: 'sm' | 'md' | 'lg';
+  /** Defaults to `secondary`. */
+  variant?: 'primary' | 'secondary';
+  /** Defaults to `horizontal`. */
+  orientation?: 'horizontal' | 'vertical';
+  /** Defaults to `true`: the baseline under the bar. */
+  divider?: boolean;
+  /** The text of the selected tab's panel. Left out, the group draws no panel. */
+  panel?: string;
+  /** Unique per frame: the trigger and panel ids derive from it. */
+  id?: string;
+  /** Extra attributes on a trigger's element, by tab index, e.g. design markers. */
+  triggerAttributes?: Record<number, string>;
+};
+
+/** The stylesheets `tabs()` draws with: the real `et-tab-group` CSS. */
+export const tabsStyles = /* @__PURE__ */ [interactiveStyles, focusRing, scrollable, tabScale, tabBar, tabGroup].join(
+  '\n',
+);
+
+/** Draws `<et-tab-group>` as HTML, with the DOM the component renders after its first frame. */
+export const tabs = (options: TabsMockOptions) => {
+  const { id = 'tabs', selected = 0, orientation = 'horizontal' } = options;
+
+  const triggers = options.tabs
+    .map((tab, index) => {
+      const isSelected = index === selected;
+      const attributes = [
+        options.triggerAttributes?.[index],
+        `id="et-tab-${id}-${index}"`,
+        'role="tab"',
+        `aria-selected="${isSelected}"`,
+        `aria-controls="et-tab-panel-${id}-${index}"`,
+        tab.disabled && 'aria-disabled="true" disabled',
+        `tabindex="${isSelected ? 0 : -1}"`,
+        `class="${['et-tab-group__trigger', 'et-surface-interactive', 'et-focus-ring', isSelected && 'et-tab-group__trigger--active', tab.disabled && 'et-tab-group__trigger--disabled'].filter(Boolean).join(' ')}"`,
+      ].filter(Boolean);
+
+      return `<button ${attributes.join(' ')}><span class="et-tab-group__trigger-content">${tab.label}</span><span class="et-tab-bar-underline${isSelected ? ' et-tab-bar-underline--active' : ''}"></span></button>`;
+    })
+    .join('');
+
+  const panel =
+    options.panel === undefined
+      ? ''
+      : `<div class="et-tab-group__body"><div id="et-tab-panel-${id}-${selected}" aria-labelledby="et-tab-${id}-${selected}" class="et-tab-group__panel" role="tabpanel">${options.panel}</div></div>`;
+
+  const hostAttributes = [
+    'class="et-tab-group et-tab-scale"',
+    `data-orientation="${orientation}"`,
+    `data-size="${options.size ?? 'md'}"`,
+    'data-fit="auto"',
+    `data-divider="${options.divider ?? true}"`,
+    `data-variant="${options.variant ?? 'secondary'}"`,
+  ];
+
+  return `<et-tab-group ${hostAttributes.join(' ')}><div aria-orientation="${orientation}" class="et-tab-group__header-shell" role="tablist"><et-scrollable class="et-scrollable et-tab-group__header-scrollable" direction="${orientation}" item-size="auto" role="presentation"><div class="et-scrollable-wrapper" role="presentation"><div class="et-scrollable-container et-tab-group__header" role="presentation">${triggers}</div></div></et-scrollable></div>${panel}</et-tab-group>`;
+};

package/design/textarea.ts

@@ -0,0 +1,92 @@
+import description from '../src/lib/forms/description/description.component.css?inline';
+import textareaFieldSheet from '../src/lib/forms/form-field/form-field-textarea-styles.component.css?inline';
+import { formField, formFieldStyles, FormFieldMockOptions, textarea, TextareaMockOptions } from './form-field';
+
+/** An interaction a frame forces with the `data-et-force` design marker. */
+export type TextareaFieldMockForce = 'hover' | 'focus-visible';
+
+export type TextareaFieldMockOptions = Omit<FormFieldMockOptions, 'control'> &
+  TextareaMockOptions & {
+    /** Caps the autosize growth at this many rows; the textarea scrolls past it. */
+    maxRows?: number;
+    /** An unresolved bulk-edit value: the raw value stays hidden and `mixedLabel` shows as the placeholder. */
+    mixed?: boolean;
+    mixedLabel?: string;
+    /** An `et-description` under the field, as HTML. */
+    description?: string;
+    /** Forced interactions: `hover` on the control frame, `focus-visible` on the native textarea. */
+    force?: TextareaFieldMockForce | TextareaFieldMockForce[];
+  };
+
+/** The stylesheets `textareaField()` draws with: the real `et-form-field`, `et-textarea` and `et-description` CSS. */
+export const textareaFieldStyles = /* @__PURE__ */ [formFieldStyles, textareaFieldSheet, description].join('\n');
+
+const forceList = (force: TextareaFieldMockForce | TextareaFieldMockForce[] | undefined) =>
+  force === undefined ? [] : Array.isArray(force) ? force : [force];
+
+/** Draws `<et-form-field>` around `<et-textarea>` as HTML, with the DOM the components render. */
+export const textareaField = (options: TextareaFieldMockOptions = {}) => {
+  const {
+    id = 'field',
+    value,
+    placeholder,
+    rows,
+    autosize = true,
+    minRows,
+    maxRows,
+    mixed,
+    mixedLabel = 'Mixed',
+    force,
+    ...field
+  } = options;
+  const forced = forceList(force);
+  const descriptionId = `et-description-${id}`;
+  const control = textarea({
+    value: mixed ? undefined : value,
+    placeholder: mixed ? mixedLabel : placeholder,
+    rows,
+    autosize,
+    minRows,
+  });
+
+  let html = formField({
+    ...field,
+    id,
+    control: {
+      ...control,
+      hasValue: !!mixed || control.hasValue,
+      html: (state) => {
+        const describedBy = [options.description !== undefined && descriptionId, state.describedBy]
+          .filter(Boolean)
+          .join(' ');
+        let markup = control.html({ ...state, describedBy: describedBy || null });
+
+        if (mixed)
+          markup = markup.replace('<et-textarea class="et-color-interactive et-textarea"', '$& data-mixed="true"');
+        if (autosize && maxRows !== undefined)
+          markup = markup.replace(
+            /(--et-textarea-min-rows: \d+)"/,
+            `$1; --et-textarea-max-block-size: calc(${maxRows} * 1lh)"`,
+          );
+        if (forced.includes('focus-visible'))
+          markup = markup.replace('<textarea ', '<textarea data-et-force="focus-visible" ');
+
+        return markup;
+      },
+    },
+  });
+
+  if (forced.includes('hover')) {
+    html = html.replace('<div class="et-form-field-control-frame"', '$& data-et-force="hover"');
+  }
+
+  if (options.description !== undefined) {
+    const descriptionHtml = `<et-description class="et-description" id="${descriptionId}">${options.description}</et-description>`;
+    const supportStart = html.indexOf('<div class="et-color-interactive-exclude et-form-field-support"');
+    const at = supportStart === -1 ? html.lastIndexOf('</et-form-field>') : supportStart;
+
+    html = `${html.slice(0, at)}${descriptionHtml}${html.slice(at)}`;
+  }
+
+  return html;
+};

package/design/timeline.ts

@@ -0,0 +1,52 @@
+import iconBase from '../src/lib/icon/headless/icon-styles.component.css?inline';
+import timelineItemBase from '../src/lib/timeline/timeline-item.component.css?inline';
+import timelineBase from '../src/lib/timeline/timeline.component.css?inline';
+
+export type TimelineMockItem = {
+  /** The item's body HTML, projected after the time. */
+  content: string;
+  /** The `[etTimelineTime]` text above the content. Left out, the item has no time. */
+  time?: string;
+  /** The `[etTimelineMarker]` HTML, e.g. an `iconMarkup()`. Left out, the item draws the default dot. */
+  marker?: string;
+  /** The color theme name the item's `color` input scopes. Left out, the item takes the theme around it. */
+  color?: string;
+  /** Extra attributes on the item, e.g. design markers. */
+  attributes?: string;
+};
+
+export type TimelineMockOptions = {
+  items: TimelineMockItem[];
+  /** Extra attributes on the timeline, e.g. design markers. */
+  attributes?: string;
+};
+
+/** The stylesheets `timeline()` draws with: the real timeline, timeline-item and icon CSS. */
+export const timelineStyles = /* @__PURE__ */ [iconBase, timelineBase, timelineItemBase].join('\n');
+
+const item = ({ content, time, marker, color, attributes }: TimelineMockItem) => {
+  const hostAttributes = [
+    attributes,
+    `class="et-color--${color ?? 'inherited'} et-timeline-item"`,
+    'role="listitem"',
+  ].filter(Boolean);
+  const markerSlot = marker ? marker.replace(/^<(\w+)/, '<$1 etTimelineMarker=""') : '';
+  const timeSlot = time ? `<span etTimelineTime="">${time}</span>` : '';
+
+  return (
+    `<et-timeline-item ${hostAttributes.join(' ')}>` +
+    `<span class="et-timeline-item-rail"><span class="et-timeline-item-marker">${markerSlot}</span></span>` +
+    `<div class="et-timeline-item-content">${timeSlot}${content}</div>` +
+    `</et-timeline-item>`
+  );
+};
+
+/**
+ * Draws `<et-timeline>` with one `<et-timeline-item>` per item as HTML: the rail with its connector, the default
+ * dot or a projected marker, and the time above the content.
+ */
+export const timeline = (options: TimelineMockOptions) => {
+  const attributes = [options.attributes, 'class="et-timeline"', 'role="list"'].filter(Boolean);
+
+  return `<et-timeline ${attributes.join(' ')}>${options.items.map(item).join('')}</et-timeline>`;
+};

package/design/toolbar.ts

@@ -0,0 +1,95 @@
+import iconButtonBase from '../src/lib/button/icon-button.component.css?inline';
+import { IconDefinition } from '../src/lib/icon/headless/icon-definition';
+import iconBase from '../src/lib/icon/headless/icon-styles.component.css?inline';
+import toolbarBase from '../src/lib/toolbar/toolbar.component.css?inline';
+import { buttonStyles } from './button';
+import { divider, dividerStyles } from './divider';
+import { iconMarkup } from './icon';
+
+export type ToolbarMockItem =
+  | {
+      type: 'button';
+      icon: IconDefinition;
+      /** The button's `aria-label`. */
+      label: string;
+      /** Makes the button a toggle: `false` draws it unpressed, left out it is no toggle. */
+      pressed?: boolean;
+      disabled?: boolean;
+      /** Extra attributes on the button, e.g. design markers. */
+      attributes?: string;
+    }
+  | { type: 'divider' };
+
+export type ToolbarMockOptions = {
+  items: ToolbarMockItem[];
+  orientation?: 'horizontal' | 'vertical';
+  /** The `aria-label` naming what the toolbar acts on. */
+  label?: string;
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  /**
+   * The index into `items` of the button holding the toolbar's one tab stop. Left out, the first enabled
+   * button, as `[etToolbar]` picks it.
+   */
+  tabStop?: number;
+  /** Extra attributes on the toolbar, e.g. design markers. */
+  attributes?: string;
+};
+
+/** The stylesheets `toolbar()` draws with: the real toolbar, icon-button, button, icon and divider CSS. */
+export const toolbarStyles = /* @__PURE__ */ [buttonStyles, iconBase, iconButtonBase, dividerStyles, toolbarBase].join(
+  '\n',
+);
+
+const control = (item: Extract<ToolbarMockItem, { type: 'button' }>, options: { size: string; tabStop: boolean }) => {
+  const classes = [
+    'et-icon-button',
+    'et-color-interactive',
+    'et-focus-ring',
+    item.pressed ? 'et-color--inherited' : 'et-color--surface',
+  ];
+
+  const attributes = [
+    item.attributes,
+    `class="${classes.join(' ')}"`,
+    'type="button"',
+    `aria-label="${item.label}"`,
+    item.disabled && 'disabled aria-disabled="true"',
+    item.pressed && 'data-pressed="true"',
+    item.pressed !== undefined && `aria-pressed="${item.pressed}"`,
+    'data-variant="transparent"',
+    `data-size="${options.size}"`,
+    item.pressed && 'data-pressed-variant="tonal"',
+    'data-et-toolbar-control=""',
+    `tabindex="${options.tabStop ? 0 : -1}"`,
+  ].filter(Boolean);
+
+  return `<button ${attributes.join(' ')}><div class="et-icon-button-icon">${iconMarkup(item.icon)}</div></button>`;
+};
+
+/**
+ * Draws `<et-toolbar>` composed as its story shows it - transparent `et-icon-button`s in the surface's neutral
+ * colors that take the surrounding color theme while pressed, grouped by decorative `et-divider`s - as HTML,
+ * with the roving tab stop `[etToolbar]` sets.
+ */
+export const toolbar = (options: ToolbarMockOptions) => {
+  const { items, orientation = 'horizontal', size = 'sm' } = options;
+  const tabStop = options.tabStop ?? items.findIndex((item) => item.type === 'button' && !item.disabled);
+
+  const contents = items
+    .map((item, index) =>
+      item.type === 'divider'
+        ? divider({ orientation: orientation === 'horizontal' ? 'vertical' : 'horizontal', decorative: true })
+        : control(item, { size, tabStop: index === tabStop }),
+    )
+    .join('');
+
+  const attributes = [
+    options.attributes,
+    'class="et-toolbar"',
+    'role="toolbar"',
+    `aria-orientation="${orientation}"`,
+    `aria-label="${options.label ?? 'Text formatting'}"`,
+  ].filter(Boolean);
+
+  return `<et-toolbar ${attributes.join(' ')}>${contents}</et-toolbar>`;
+};

package/design/tooltip.ts

@@ -0,0 +1,87 @@
+import { Placement } from '@floating-ui/dom';
+import overlayContainer from '../src/lib/overlay/overlay-container.component.css?inline';
+import floatingTip from '../src/lib/overlay/floating-tip-styles.component.css?inline';
+import overlayArrow from '../src/lib/overlay/strategies/overlay-arrow-styles.component.css?inline';
+import tooltipBase from '../src/lib/tooltip/tooltip.component.css?inline';
+
+export type TooltipMockOptions = {
+  /** The tooltip text, as HTML. Drawn like a string `etTooltip`. */
+  text?: string;
+  /** Template content, as HTML. Drawn like a `TemplateRef` `etTooltip`; wins over `text`. */
+  content?: string;
+  /** The side the pane opened on; the arrow points back at the trigger. Defaults to `top`. */
+  placement?: Placement;
+  /** A surface theme name the app registers. */
+  surface?: string;
+  /** The tooltip id, which the trigger's `aria-describedby` points at. */
+  id?: string;
+  /** Extra attributes on the `<et-tooltip>`, e.g. design markers. */
+  attributes?: string;
+};
+
+/** The stylesheets `tooltip()` draws with: the real `et-tooltip`, floating tip, overlay pane and arrow CSS. */
+export const tooltipStyles = /* @__PURE__ */ [
+  overlayContainer,
+  overlayArrow,
+  floatingTip,
+  tooltipBase,
+  `@layer components {
+  .et-tooltip-mock-frame > .et-tooltip-panel {
+    --_et-overlay-arrow-pane-border-width: 1px;
+    inline-size: max-content;
+  }
+  .et-tooltip-mock-frame > .et-tooltip-panel:is([data-overlay-placement^='top'], [data-overlay-placement^='bottom']) > .et-overlay-arrow {
+    left: calc(50% - 10px);
+  }
+  .et-tooltip-mock-frame > .et-tooltip-panel:is([data-overlay-placement^='left'], [data-overlay-placement^='right']) > .et-overlay-arrow {
+    top: calc(50% - 10px);
+  }
+  .et-tooltip-mock-frame > .et-tooltip-panel:is([data-overlay-placement^='top-start'], [data-overlay-placement^='bottom-start']) > .et-overlay-arrow {
+    left: 20px;
+  }
+  .et-tooltip-mock-frame > .et-tooltip-panel:is([data-overlay-placement^='top-end'], [data-overlay-placement^='bottom-end']) > .et-overlay-arrow {
+    left: calc(100% - 40px);
+  }
+  .et-tooltip-mock-frame > .et-tooltip-panel:is([data-overlay-placement^='left-start'], [data-overlay-placement^='right-start']) > .et-overlay-arrow {
+    top: 20px;
+  }
+  .et-tooltip-mock-frame > .et-tooltip-panel:is([data-overlay-placement^='left-end'], [data-overlay-placement^='right-end']) > .et-overlay-arrow {
+    top: calc(100% - 40px);
+  }
+}`,
+].join('\n');
+
+/**
+ * Draws an open `et-tooltip` in its overlay pane, with the arrow, as HTML. The pane sits in flow,
+ * wrapped in a frame that centers the arrow on its side, instead of where the overlay runtime would
+ * position it, so place it next to the drawn trigger.
+ */
+export const tooltip = (options: TooltipMockOptions = {}) => {
+  const { placement = 'top', id = 'et-tooltip-1' } = options;
+  const surface = `et-surface--${options.surface ?? 'inherited'}`;
+  const hasTemplate = options.content !== undefined;
+
+  const paneClasses = [
+    'et-overlay',
+    'et-overlay-runtime-pane',
+    'et-tooltip-panel',
+    'et-overlay--tooltip',
+    'et-floating-panel',
+    'et-color--inherited',
+    surface,
+    'et-with-default-animation',
+    'et-animation-enter-done',
+  ];
+
+  const tooltipAttributes = [
+    options.attributes,
+    'role="tooltip"',
+    `class="et-tooltip et-color--inherited ${surface}"`,
+    `id="${id}"`,
+    hasTemplate && 'data-has-template="true"',
+  ].filter(Boolean);
+
+  const body = hasTemplate ? options.content : `<p class="et-tooltip__text">${options.text ?? ''}</p>`;
+
+  return `<div class="et-tooltip-mock-frame"><div class="${paneClasses.join(' ')}" data-overlay-placement="${placement}"><et-tooltip ${tooltipAttributes.join(' ')}><div class="et-tooltip__surface"><div class="et-tooltip__content">${body}</div></div></et-tooltip><div et-floating-arrow class="et-overlay-arrow"></div></div></div>`;
+};

package/design/tree.ts

@@ -0,0 +1,106 @@
+import iconStyles from '../src/lib/icon/headless/icon-styles.component.css?inline';
+import treeBase from '../src/lib/tree/tree.component.css?inline';
+import { CHEVRON_ICON } from '../src/lib/icon/headless/chevron-icon';
+import { iconMarkup } from './icon';
+
+export type TreeMockItem = {
+  label: string;
+  /** Defaults to the slash-joined labels of the item and its parents. */
+  value?: string;
+  /** Left out, the item is a leaf. */
+  children?: TreeMockItem[];
+  disabled?: boolean;
+};
+
+export type TreeMockOptions = {
+  items: TreeMockItem[];
+  /** The tree's `aria-label`. */
+  label?: string;
+  /** The values of the expanded branches. */
+  expanded?: string[];
+  /** The selected value, or values in `multiple` mode. */
+  value?: string | string[];
+  /** Defaults to `single`. */
+  selectionMode?: 'none' | 'single' | 'multiple';
+  /** The value of the row that holds the tab stop. Defaults to the first row. */
+  active?: string;
+  disabled?: boolean;
+  /** Extra attributes on a row's element, by row value, e.g. design markers. */
+  rowAttributes?: Record<string, string>;
+};
+
+type MockRow = { item: TreeMockItem; value: string; level: number; posInSet: number; setSize: number };
+
+/** The stylesheets `tree()` draws with: the real `et-tree` CSS. */
+export const treeStyles = /* @__PURE__ */ [iconStyles, treeBase].join('\n');
+
+const valueOf = (item: TreeMockItem, parent: string | null) =>
+  item.value ?? (parent ? `${parent}/${item.label}` : item.label);
+
+const visibleRows = (
+  items: TreeMockItem[],
+  { expanded, parent, level }: { expanded: Set<string>; parent: string | null; level: number },
+): MockRow[] =>
+  items.flatMap((item, index) => {
+    const value = valueOf(item, parent);
+    const row = { item, value, level, posInSet: index + 1, setSize: items.length };
+    const children =
+      item.children && expanded.has(value)
+        ? visibleRows(item.children, { expanded, parent: value, level: level + 1 })
+        : [];
+
+    return [row, ...children];
+  });
+
+const marker = (isBranch: boolean) =>
+  `<et-tree-marker aria-hidden="true" class="et-tree-node-marker">${
+    isBranch ? iconMarkup(CHEVRON_ICON, 'et-tree-node-chevron') : ''
+  }</et-tree-marker>`;
+
+/** Draws `<et-tree>` with the rows its `visibleRows()` would render for `items`. */
+export const tree = (options: TreeMockOptions) => {
+  const mode = options.selectionMode ?? 'single';
+  const expanded = new Set(options.expanded ?? []);
+  const selected = new Set(
+    options.value === undefined ? [] : Array.isArray(options.value) ? options.value : [options.value],
+  );
+  const rows = visibleRows(options.items, { expanded, parent: null, level: 1 });
+  const active = rows.some((row) => row.value === options.active) ? options.active : rows[0]?.value;
+
+  const rowHtml = (row: MockRow) => {
+    const isBranch = row.item.children !== undefined;
+    const isExpanded = isBranch && expanded.has(row.value);
+    const isSelected = mode !== 'none' && selected.has(row.value);
+    const isDisabled = !!row.item.disabled || !!options.disabled;
+    const attributes = [
+      options.rowAttributes?.[row.value],
+      `style="--_et-tree-node-depth: ${row.level - 1};"`,
+      'class="et-tree-node"',
+      'role="treeitem"',
+      `aria-level="${row.level}"`,
+      `aria-posinset="${row.posInSet}"`,
+      `aria-setsize="${row.setSize}"`,
+      isBranch && `aria-expanded="${isExpanded}"`,
+      mode !== 'none' && `aria-selected="${isSelected}"`,
+      isDisabled && 'aria-disabled="true"',
+      `tabindex="${row.value === active ? 0 : -1}"`,
+      isSelected && 'data-selected="true"',
+      isExpanded && 'data-expanded="true"',
+      isBranch && 'data-branch="true"',
+      isDisabled && 'data-disabled="true"',
+    ].filter(Boolean);
+    const check = mode === 'multiple' ? '<span aria-hidden="true" class="et-tree-node-check"></span>' : '';
+
+    return `<div ${attributes.join(' ')}>${marker(isBranch)}${check}<span class="et-tree-node-label">${row.item.label}</span></div>`;
+  };
+
+  const hostAttributes = [
+    'class="et-tree"',
+    'role="tree"',
+    options.label && `aria-label="${options.label}"`,
+    mode === 'multiple' && 'aria-multiselectable="true"',
+    options.disabled && 'data-disabled="true"',
+  ].filter(Boolean);
+
+  return `<et-tree ${hostAttributes.join(' ')}>${rows.map(rowHtml).join('')}</et-tree>`;
+};