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

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. Left out, the pane takes the surface one elevation above its parent. */
+  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 = options.surface && `et-surface--${options.surface}`;
+  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',
+  ].filter(Boolean);
+
+  const tooltipAttributes = [
+    options.attributes,
+    'role="tooltip"',
+    `class="et-tooltip et-color--inherited ${surface ?? 'et-surface--inherited'}"`,
+    `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}"${surface ? '' : ' data-et-auto-surface'}><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>`;
+};