@tempoxyz/ds 0.2.5 → 0.3.0

package/src/web/components/Tabs.tsx

@@ -1,10 +1,10 @@
 import * as BaseUi from '@base-ui/react/tabs'
-import type { ComponentPropsWithRef } from 'react'
+import { Children, type ComponentPropsWithRef, type ReactNode } from 'react'
 import type * as zyzz from 'zyzz'
-import { variants } from '../zyzz.config.js'
+import { style, variants, vars } from '../zyzz.config.js'
 
 /**
- * A segmented `role="tablist"` that switches between `role="tabpanel"` views, built on Base UI
+ * An underlined `role="tablist"` that switches between `role="tabpanel"` views, built on Base UI
  * Tabs. Arrow keys move focus between tabs and wrap at the ends. Enter or Space activates the
  * focused tab unless `activateOnFocus` is set on `List`.
  *
@@ -31,8 +31,8 @@ import { variants } from '../zyzz.config.js'
  */
 export namespace Tabs {
   /**
-   * The raised pill that slides to the active tab and matches its size. Place it inside `List`
-   * after the tabs. It ignores pointer events.
+   * The 2px bar along the bottom of the active tab, which slides to each tab and matches its
+   * width. Place it inside `List` after the tabs. It ignores pointer events.
    */
   export function Indicator(props: Indicator.Props) {
     const { className, vars, ...attributes } = props
@@ -50,8 +50,9 @@ export namespace Tabs {
   }
 
   /**
-   * The `role="tablist"` track. `size` sets its height to 32, 40 or 56px, and `expand` stretches
-   * the tabs to fill the width. The track scrolls horizontally when tabs overflow.
+   * The `role="tablist"` row, with 4px between tabs. `size` sets the height of the tabs to 32, 40
+   * or 56px, and `expand` stretches the tabs to equal widths across the row. The row scrolls
+   * horizontally when tabs overflow.
    */
   export function List(props: List.Props) {
     const { className, expand, size, vars, ...attributes } = props
@@ -111,12 +112,19 @@ export namespace Tabs {
       }
   }
 
-  /** A `<button>` with `role="tab"` that activates the panel sharing its `value`. */
+  /**
+   * A `<button>` with `role="tab"` that activates the panel sharing its `value`. The active tab
+   * sets its label in the strong weight, and every tab reserves the width of that weight for the
+   * text in its children, so selecting a tab never shifts the row. Text that an element child
+   * renders reserves no width.
+   */
   export function Tab(props: Tab.Props) {
-    const { className, vars, ...attributes } = props
+    const { children, className, vars, ...attributes } = props
 
     return (
-      <BaseUi.Tabs.Tab {...attributes} {...styles.tab({ className, style: props.style, vars })} />
+      <BaseUi.Tabs.Tab {...attributes} {...styles.tab({ className, style: props.style, vars })}>
+        <span {...styles.label()}>{runs(children)}</span>
+      </BaseUi.Tabs.Tab>
     )
   }
 
@@ -127,21 +135,51 @@ export namespace Tabs {
   }
 }
 
+/**
+ * Pairs each run of text in `children` with a hidden copy that reserves the width of the strong
+ * weight. Elements render once, so text inside an element reserves no width.
+ */
+function runs(children: ReactNode) {
+  return Children.toArray(children)
+    .reduce<ReactNode[]>((nodes, child) => {
+      const last = nodes.at(-1)
+      const text = typeof child === 'number' ? String(child) : child
+
+      // Adjacent text, such as `Activity {count}`, renders as one flex item, so it stays one run.
+      if (typeof text === 'string' && typeof last === 'string')
+        return [...nodes.slice(0, -1), last + text]
+      return [...nodes, text]
+    }, [])
+    .map((node, index) =>
+      typeof node === 'string' ? (
+        <span key={index} {...styles.text()}>
+          {node}
+          <span aria-hidden="true" data-reserve="" {...styles.reserve()}>
+            {node}
+          </span>
+        </span>
+      ) : (
+        node
+      ),
+    )
+}
+
 namespace styles {
   export const indicator = variants(
     {
       base: {
-        backgroundColor: 'background.indicator',
-        boxShadow: 'raised',
-        height: 'var(--active-tab-height) !custom',
+        backgroundColor: 'content.primary',
+        borderRadius: 'full',
+        cornerShape: 'round',
+        height: '2',
         insetBlockStart: '0',
         insetInlineStart: '0',
         pointerEvents: 'none',
         position: 'absolute',
-        translate: 'var(--active-tab-left) var(--active-tab-top) !custom',
-        // The indicator matches each tab's size, so it transitions width and height with its position.
+        translate: `var(--active-tab-left) calc(var(--active-tab-top) + var(--active-tab-height) - ${vars.spacing['2']}) !custom`,
+        // The bar matches each tab's width, so it transitions width with its position.
         transitionDuration: '240',
-        transitionProperty: 'height, translate, width',
+        transitionProperty: 'translate, width',
         transitionTimingFunction: 'spring',
         width: 'var(--active-tab-width) !custom',
         '@media (prefers-reduced-motion: reduce)': { transitionProperty: 'none' },
@@ -150,13 +188,20 @@ namespace styles {
     { id: 'tds/web/tabs/indicator' },
   )
 
+  export const label = style(
+    { alignItems: 'center', columnGap: '8', display: 'inline-flex' },
+    { id: 'tds/web/tabs/label' },
+  )
+
   export const list = variants(
     {
       base: {
-        backgroundColor: 'grayAlpha.100',
         boxSizing: 'border-box',
+        columnGap: '4',
         display: 'inline-flex',
-        maxWidth: '100% !custom',
+        // The padding, offset by the margin, leaves room for focus rings inside the scroll clip.
+        margin: '-4',
+        maxWidth: `calc(100% + ${vars.spacing['8']}) !custom`,
         overflowX: 'auto',
         padding: '4',
         position: 'relative',
@@ -170,30 +215,18 @@ namespace styles {
             selectors: { '& > [role="tab"]': { flex: '1 !custom' } },
           },
         },
-        // The shared control scale: 32, 40 and 56px. Tabs and the indicator sit 4px in, so their
-        // radius is the track's minus 4px.
+        // The shared control scale: 32, 40 and 56px. The 40px tab matches the TDPS Tab, which
+        // has no other size. Small keeps its padding and label, and large pads a B1 label by 12px.
         size: {
           large: {
-            borderRadius: '16',
-            height: '56',
             selectors: {
-              '& > *': { borderRadius: '12' },
-              '& > [role="tab"]': {
-                paddingInline: '24',
-                typography: 'button.16',
-              },
+              '& > [role="tab"]': { height: '56', paddingInline: '12', typography: 'body.b1' },
+              '& > [role="tab"] [data-reserve]': { typography: 'body.b1Strong' },
+              '& > [role="tab"][data-active]': { typography: 'body.b1Strong' },
             },
           },
-          medium: {
-            borderRadius: '12',
-            height: '40',
-            selectors: { '& > *': { borderRadius: '8' } },
-          },
-          small: {
-            borderRadius: '8',
-            height: '32',
-            selectors: { '& > *': { borderRadius: '4' } },
-          },
+          medium: { selectors: { '& > [role="tab"]': { height: '40' } } },
+          small: { selectors: { '& > [role="tab"]': { height: '32' } } },
         },
       },
     },
@@ -212,7 +245,7 @@ namespace styles {
         transitionProperty: 'outline-color, outline-offset',
         transitionTimingFunction: 'snappy',
         selectors: {
-          '&:focus-visible': { outlineColor: 'blue.700', outlineOffset: '2' },
+          '&:focus-visible': { outlineColor: 'border.focus', outlineOffset: '2' },
         },
         '@media (prefers-reduced-motion: reduce)': { transitionProperty: 'outline-color' },
       },
@@ -220,38 +253,42 @@ namespace styles {
     { id: 'tds/web/tabs/panel' },
   )
 
+  // The hidden copy of a run of label text holds the strong weight, so the tab keeps the width
+  // that the active label takes.
+  export const reserve = style(
+    { height: '0', overflow: 'hidden', typography: 'body.b2Strong', visibility: 'hidden' },
+    { id: 'tds/web/tabs/reserve' },
+  )
+
   export const tab = variants(
     {
       base: {
         alignItems: 'center',
         backgroundColor: 'transparent !custom',
         border: 'none !custom',
+        borderRadius: '2xs',
         boxSizing: 'border-box',
-        color: 'gray.900',
-        columnGap: '8',
+        color: 'content.secondary',
         cursor: 'pointer',
         display: 'inline-flex',
-        height: '100% !custom',
+        flexDirection: 'column',
         justifyContent: 'center',
         outlineColor: 'transparent !custom',
         outlineOffset: '0',
         outlineStyle: 'solid !custom',
         outlineWidth: '2',
-        paddingInline: '16',
-        position: 'relative',
+        paddingInline: '8',
         transitionDuration: '160',
-        transitionProperty: 'color, outline-color, outline-offset, scale',
+        transitionProperty: 'color, outline-color, scale',
         transitionTimingFunction: 'snappy',
-        // Weight overrides the typography token, so it stays after it.
-        typography: 'button.14',
+        typography: 'body.b2',
         userSelect: 'none',
         whiteSpace: 'nowrap',
-        zIndex: '1 !custom',
         selectors: {
           '&:active:not([data-disabled])': { scale: 'press' },
-          '&:focus-visible': { outlineColor: 'blue.700', outlineOffset: '2' },
-          '&:hover:not([data-disabled])': { color: 'foreground' },
-          '&[data-active]': { color: 'foreground' },
+          '&:focus-visible': { outlineColor: 'border.focus' },
+          '&:hover:not([data-disabled])': { color: 'content.primary' },
+          '&[data-active]': { color: 'content.primary', typography: 'body.b2Strong' },
           '&[data-disabled]': { cursor: 'default', opacity: 'disabled' },
         },
         '@media (prefers-reduced-motion: reduce)': {
@@ -262,4 +299,10 @@ namespace styles {
     },
     { id: 'tds/web/tabs/tab' },
   )
+
+  // Stacks a run of label text over its reserve, so the run takes the wider of the two widths.
+  export const text = style(
+    { alignItems: 'center', display: 'inline-flex', flexDirection: 'column' },
+    { id: 'tds/web/tabs/text' },
+  )
 }

package/src/web/components/TempoLogo.tsx

@@ -0,0 +1,89 @@
+import type { ComponentPropsWithRef } from 'react'
+import type * as zyzz from 'zyzz'
+import { variants } from '../zyzz.config.js'
+
+// The Tempo Logo exports from the TDPS page of Web-Wallet, drawn in `currentColor`.
+const artwork = {
+  mark: {
+    paths: ['M6.88 20H1.413L6.48 4.533H0L1.413 0H19.466L18.053 4.533H11.92L6.88 20Z'],
+    viewBox: '0 0 19.466 20',
+  },
+  wordmark: {
+    paths: [
+      'M6.675 19.69H1.371L6.287 4.684H0L1.371 0.285999H18.887L17.516 4.684H11.565L6.675 19.69Z',
+      'M13.839 19.69L20.152 0.285001H32.675L31.485 3.985H24.215L22.895 8.151H29.933L28.743 11.799H21.68L20.36 15.99H27.579L26.415 19.69H13.839Z',
+      'M32.104 19.69H27.887L34.226 0.285001H41.264L41.031 10.764L47.887 0.285001H55.597L49.284 19.69H44.006L48.197 6.65H48.119L39.503 19.69H36.372L36.501 6.495H36.449L32.102 19.69H32.104Z',
+      'M61.534 3.881L59.49 10.142H60.059C61.353 10.142 62.431 9.84 63.293 9.236C64.155 8.615 64.716 7.735 64.975 6.597C65.199 5.614 65.079 4.915 64.613 4.501C64.147 4.087 63.371 3.88 62.284 3.88H61.534V3.881ZM56.411 19.69H51.107L57.42 0.285001H63.862C65.345 0.285001 66.622 0.526 67.691 1.009C68.778 1.475 69.571 2.147 70.071 3.027C70.588 3.889 70.761 4.898 70.588 6.054C70.364 7.572 69.777 8.909 68.829 10.064C67.88 11.22 66.647 12.117 65.129 12.755C63.628 13.376 61.947 13.686 60.084 13.686H58.35L56.41 19.689L56.411 19.69Z',
+      'M83.232 18.448C81.473 19.483 79.601 20 77.617 20H77.565C75.806 20 74.322 19.612 73.115 18.836C71.925 18.043 71.071 16.973 70.554 15.628C70.054 14.283 69.933 12.808 70.192 11.204C70.52 9.186 71.27 7.323 72.443 5.615C73.616 3.907 75.082 2.545 76.841 1.527C78.6 0.508999 80.481 0 82.481 0H82.533C84.361 0 85.871 0.388001 87.061 1.164C88.268 1.94 89.105 3.001 89.571 4.346C90.054 5.674 90.157 7.166 89.881 8.822C89.553 10.771 88.803 12.608 87.63 14.333C86.457 16.041 84.991 17.412 83.232 18.447V18.448ZM75.91 15.11C76.376 15.99 77.186 16.429 78.342 16.429H78.394C79.343 16.429 80.222 16.075 81.033 15.368C81.861 14.644 82.56 13.678 83.129 12.47C83.715 11.263 84.147 9.917 84.423 8.434C84.682 6.985 84.578 5.821 84.113 4.941C83.647 4.044 82.845 3.596 81.707 3.596H81.655C80.775 3.596 79.921 3.958 79.094 4.683C78.283 5.407 77.576 6.382 76.972 7.607C76.368 8.832 75.928 10.16 75.652 11.591C75.376 13.04 75.462 14.213 75.911 15.11H75.91Z',
+    ],
+    viewBox: '0 0 90.032 20',
+  },
+} as const
+
+/**
+ * The Tempo brand logo, rendered as a 20px tall `svg` in `currentColor`. `type="wordmark"`, the
+ * default, spells Tempo, and `type="mark"` draws the T alone. It is hidden from assistive
+ * technology unless it has an `aria-label` or `aria-labelledby`.
+ *
+ * - Use the wordmark where the brand is introduced, such as the header of a page.
+ * - Use the mark where space is tight, such as a sidebar tile or a favicon-sized slot.
+ * - Pass `aria-label="Tempo"` when the logo stands alone, such as in a home link without text.
+ *
+ * @example
+ * <TempoLogo aria-label="Tempo" />
+ * <TempoLogo type="mark" />
+ *
+ * @see {@link https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/svg | MDN svg element}
+ * @see {@link https://www.w3.org/WAI/WCAG22/Understanding/non-text-content.html | WCAG 2.2 Non-text Content}
+ */
+export function TempoLogo(props: TempoLogo.Props) {
+  const { className, type = 'wordmark', vars, ...attributes } = props
+  const labelled = props['aria-label'] || props['aria-labelledby']
+  const logo = artwork[type ?? 'wordmark']
+
+  return (
+    <svg
+      aria-hidden={labelled ? undefined : true}
+      fill="currentColor"
+      role={labelled ? 'img' : undefined}
+      viewBox={logo.viewBox}
+      xmlns="http://www.w3.org/2000/svg"
+      {...attributes}
+      {...styles.logo({ className, style: props.style, type, vars })}
+    >
+      {logo.paths.map((path) => (
+        <path d={path} key={path} />
+      ))}
+    </svg>
+  )
+}
+
+export namespace TempoLogo {
+  export type Props = Omit<
+    ComponentPropsWithRef<'svg'>,
+    'children' | 'dangerouslySetInnerHTML' | 'height' | 'type' | 'width'
+  > &
+    zyzz.Props.Variants<typeof styles.logo>
+}
+
+namespace styles {
+  // The width follows the aspect ratio of each artwork at the 20px height.
+  export const logo = variants(
+    {
+      base: {
+        display: 'inline-block',
+        flexShrink: '0 !custom',
+        height: '20',
+        verticalAlign: 'middle',
+      },
+      defaultVariants: { type: 'wordmark' },
+      variants: {
+        type: {
+          mark: { width: '19.466px !custom' },
+          wordmark: { width: '90.032px !custom' },
+        },
+      },
+    },
+    { id: 'tds/web/tempo-logo' },
+  )
+}