@tempoxyz/ds 0.2.6 → 0.3.1

package/src/web/components/StatusChip.tsx

@@ -0,0 +1,138 @@
+import type { ComponentPropsWithRef } from 'react'
+import type * as zyzz from 'zyzz'
+import { variants } from '../zyzz.config.js'
+import { Spinner } from './Spinner.js'
+
+/**
+ * A pill that names the status of a payment, an authorization, or a network, rendered as a
+ * `span`. A dot in the color of its `intent` leads the label, and `loading` replaces the dot with
+ * a spinner. It sets no live region, so a status that changes in place needs one around it.
+ *
+ * - Keep the label to one or two words that name the status, such as Pending or Needs approval.
+ * - Pick the `intent` from the outcome: `positive` for done or live, `warning` for waiting on
+ *   someone, `negative` for failed, and `neutral` for ended without an outcome.
+ * - Set `network` for the chip that names a network, such as Mainnet or Testnet. It keeps an 80px
+ *   minimum width, with 4px between the dot and the label.
+ * - Use `Badge` for a category or an attribute that is not a status.
+ *
+ * @example
+ * <StatusChip intent="warning">Pending</StatusChip>
+ * <StatusChip loading size="small">Processing</StatusChip>
+ * <StatusChip intent="positive" network>Mainnet</StatusChip>
+ *
+ * @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/span | MDN span element}
+ * @see {@link https://www.w3.org/WAI/WCAG22/Understanding/use-of-color.html | WCAG 2.2 Use of Color}
+ * @see {@link https://www.w3.org/WAI/WCAG22/Understanding/status-messages.html | WCAG 2.2 Status Messages}
+ */
+export function StatusChip(props: StatusChip.Props) {
+  const { children, className, intent, loading = false, network, size, vars, ...attributes } = props
+
+  return (
+    <span
+      {...attributes}
+      data-intent={intent ?? 'neutral'}
+      {...styles.chip({ className, intent, network, size, style: props.style, vars })}
+    >
+      {/* The label names the status, so the mark is decorative. */}
+      {loading ? (
+        <span aria-hidden="true" {...styles.spinner({ size })}>
+          <Spinner />
+        </span>
+      ) : (
+        <span aria-hidden="true" {...styles.dot({ intent, size })} />
+      )}
+      {children}
+    </span>
+  )
+}
+
+export namespace StatusChip {
+  export type Props = ComponentPropsWithRef<'span'> &
+    zyzz.Props.Variants<typeof styles.chip> & {
+      /**
+       * Replaces the dot with a spinner, for a status that is in progress, such as Processing.
+       *
+       * @default false
+       */
+      loading?: boolean | undefined
+    }
+}
+
+namespace styles {
+  export const chip = variants(
+    {
+      base: {
+        alignItems: 'center',
+        borderRadius: 'full',
+        boxSizing: 'border-box',
+        color: 'content.secondary',
+        cornerShape: 'round',
+        display: 'inline-flex',
+        flexShrink: '0 !custom',
+        paddingInline: '8',
+        typography: 'body.b3Strong',
+        verticalAlign: 'middle',
+        whiteSpace: 'nowrap',
+      },
+      // A network chip sets the dot 4px from its label at every size, so it outranks the size gap.
+      compoundVariants: [{ when: { network: true }, style: { columnGap: '4' } }],
+      defaultVariants: { intent: 'neutral', network: false, size: 'medium' },
+      variants: {
+        intent: {
+          negative: { backgroundColor: 'container.negative' },
+          neutral: { backgroundColor: 'container.regular' },
+          positive: { backgroundColor: 'container.positive' },
+          warning: { backgroundColor: 'container.warning' },
+        },
+        // A network chip keeps its label at the start of an 80px minimum width.
+        network: { false: {}, true: { minWidth: '80' } },
+        size: {
+          medium: { columnGap: '6', height: '28' },
+          small: { columnGap: '4', height: '24' },
+        },
+      },
+    },
+    { id: 'tds/web/status-chip' },
+  )
+
+  export const dot = variants(
+    {
+      base: { borderRadius: 'full', cornerShape: 'round', flexShrink: '0 !custom' },
+      defaultVariants: { intent: 'neutral', size: 'medium' },
+      variants: {
+        intent: {
+          negative: { backgroundColor: 'content.negative' },
+          neutral: { backgroundColor: 'content.subtle' },
+          positive: { backgroundColor: 'content.positive' },
+          warning: { backgroundColor: 'content.warning' },
+        },
+        size: {
+          medium: { height: '8', width: '8' },
+          small: { height: '6', width: '6' },
+        },
+      },
+    },
+    { id: 'tds/web/status-chip/dot' },
+  )
+
+  // The spinner shrinks to the 12 or 10px mark, which the attribute selector holds over its own size.
+  export const spinner = variants(
+    {
+      base: {
+        display: 'inline-flex',
+        flexShrink: '0 !custom',
+        selectors: {
+          '& > [role="progressbar"]': { height: '100% !custom', width: '100% !custom' },
+        },
+      },
+      defaultVariants: { size: 'medium' },
+      variants: {
+        size: {
+          medium: { height: '12', width: '12' },
+          small: { height: '10', width: '10' },
+        },
+      },
+    },
+    { id: 'tds/web/status-chip/spinner' },
+  )
+}

package/src/web/components/StatusRow.tsx

@@ -0,0 +1,162 @@
+import type { ComponentPropsWithRef } from 'react'
+import type * as zyzz from 'zyzz'
+import { style, variants } from '../zyzz.config.js'
+
+/**
+ * A row that follows the status of one payment or task, such as a deposit on its way. It renders
+ * a `div` with `role="status"`, so screen readers announce a change of its text politely. Compose
+ * a leading `StatusRow.Icon`, a `StatusRow.Content` with a title and a description, and an
+ * optional trailing `StatusChip`.
+ *
+ * - Lead with a `Spinner` while the task runs, and with a check once `intent` is `positive`.
+ * - State the amount or the task in the title, and the expected wait in the description.
+ * - Keep one status row per task. Use `ListGroup` for a list of finished payments.
+ *
+ * @example
+ * <StatusRow>
+ *   <StatusRow.Icon>
+ *     <Spinner />
+ *   </StatusRow.Icon>
+ *   <StatusRow.Content>
+ *     <StatusRow.Title>Waiting for $10.00</StatusRow.Title>
+ *     <StatusRow.Description>Usually under a minute on Tempo.</StatusRow.Description>
+ *   </StatusRow.Content>
+ *   <StatusChip intent="warning" size="small">
+ *     Pending
+ *   </StatusChip>
+ * </StatusRow>
+ *
+ * @see {@link https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/status_role | MDN status role}
+ * @see {@link https://www.w3.org/WAI/WCAG22/Understanding/status-messages.html | WCAG 2.2 Status Messages}
+ */
+export function StatusRow(props: StatusRow.Props) {
+  const { className, intent, vars, ...attributes } = props
+
+  return (
+    <div
+      role="status"
+      {...attributes}
+      {...styles.row({ className, intent, style: props.style, vars })}
+    />
+  )
+}
+
+export namespace StatusRow {
+  /** Stacks a `StatusRow.Title` above a `StatusRow.Description`, and takes the free width. */
+  export function Content(props: Content.Props) {
+    const { className, vars, ...attributes } = props
+
+    return <div {...attributes} {...styles.content({ className, style: props.style, vars })} />
+  }
+
+  export namespace Content {
+    export type Props = ComponentPropsWithRef<'div'> & zyzz.Props.Variants<typeof styles.content>
+  }
+
+  /** Secondary text under the title, such as the expected wait. It wraps onto more lines. */
+  export function Description(props: Description.Props) {
+    const { className, vars, ...attributes } = props
+
+    return <span {...attributes} {...styles.description({ className, style: props.style, vars })} />
+  }
+
+  export namespace Description {
+    export type Props = ComponentPropsWithRef<'span'> &
+      zyzz.Props.Variants<typeof styles.description>
+  }
+
+  /**
+   * The leading mark, hidden from assistive technology. An icon renders at 24px in the color of
+   * the row's `intent`, and a `Spinner` keeps its 16px.
+   */
+  export function Icon(props: Icon.Props) {
+    const { className, vars, ...attributes } = props
+
+    return (
+      <span
+        aria-hidden="true"
+        {...attributes}
+        data-status-row-icon=""
+        {...styles.icon({ className, style: props.style, vars })}
+      />
+    )
+  }
+
+  export namespace Icon {
+    export type Props = ComponentPropsWithRef<'span'> & zyzz.Props.Variants<typeof styles.icon>
+  }
+
+  export type Props = ComponentPropsWithRef<'div'> & zyzz.Props.Variants<typeof styles.row>
+
+  /** The task, such as the amount that the row waits for. */
+  export function Title(props: Title.Props) {
+    const { className, vars, ...attributes } = props
+
+    return <span {...attributes} {...styles.title({ className, style: props.style, vars })} />
+  }
+
+  export namespace Title {
+    export type Props = ComponentPropsWithRef<'span'> & zyzz.Props.Variants<typeof styles.title>
+  }
+}
+
+namespace styles {
+  export const content = variants(
+    {
+      base: { display: 'flex', flexDirection: 'column', flexGrow: '1 !custom', minWidth: '0' },
+    },
+    { id: 'tds/web/status-row/content' },
+  )
+
+  export const description = variants(
+    { base: { color: 'content.secondary', typography: 'body.b3' } },
+    { id: 'tds/web/status-row/description' },
+  )
+
+  export const icon = variants(
+    {
+      base: {
+        alignItems: 'center',
+        display: 'inline-flex',
+        flexShrink: '0 !custom',
+        selectors: { '& > svg': { height: '24', width: '24' } },
+      },
+    },
+    { id: 'tds/web/status-row/icon' },
+  )
+
+  // Fields and alerts pad a 12px corner by 16px, and the row keeps 12px above and below its text.
+  export const row = variants(
+    {
+      base: {
+        alignItems: 'center',
+        borderRadius: 'xs',
+        boxSizing: 'border-box',
+        color: 'content.primary',
+        columnGap: '12',
+        display: 'flex',
+        paddingBlock: '12',
+        paddingInline: '16',
+        transitionDuration: '200',
+        transitionProperty: 'background-color',
+        transitionTimingFunction: 'snappy',
+      },
+      defaultVariants: { intent: 'neutral' },
+      variants: {
+        intent: {
+          neutral: { backgroundColor: 'container.subtle' },
+          positive: {
+            backgroundColor: 'container.positive',
+            selectors: { '& > [data-status-row-icon]': { color: 'content.positive' } },
+          },
+        },
+      },
+    },
+    { id: 'tds/web/status-row' },
+  )
+
+  export const title = style(
+    { color: 'content.primary', typography: 'body.b2Strong' },
+    { id: 'tds/web/status-row/title' },
+  )
+}

package/src/web/components/Stepper.tsx

@@ -3,12 +3,13 @@ import type * as zyzz from 'zyzz'
 import { style, variants } from '../zyzz.config.js'
 
 /**
- * Shows progress through a fixed sequence of steps as a row of segments. Renders a `div` with
- * `role="progressbar"`, the name `Progress`, and the value text `Step <value> of <count>`.
+ * Shows progress through a fixed sequence of steps as a row of 24px by 4px segments, 4px apart.
+ * Renders a `div` with `role="progressbar"`, the name `Progress`, and the value text
+ * `Step <value> of <count>`. The row is as wide as its segments.
  *
  * - Pass `aria-label` to name the flow, such as `Account setup`.
+ * - Center it in the header of a dialog, beside the Back button.
  * - Label each step in visible text near the stepper, since the segments carry no text.
- * - Pair the filled segments with that text, so completion does not rely on color alone.
  *
  * @example
  * <Stepper.Root aria-label="Account setup" count={4} value={2} />
@@ -61,7 +62,7 @@ export namespace Stepper {
 
 namespace styles {
   export const root = style(
-    { columnGap: '8', display: 'flex', width: '100% !custom' },
+    { columnGap: '4', display: 'flex', width: 'fit-content !custom' },
     { id: 'tds/web/stepper' },
   )
 
@@ -69,17 +70,19 @@ namespace styles {
     {
       base: {
         borderRadius: 'full',
-        flex: '1 !custom',
-        height: '8',
+        cornerShape: 'round',
+        flexShrink: '0 !custom',
+        height: '4',
         transitionDuration: '240',
         transitionProperty: 'background-color',
         transitionTimingFunction: 'snappy',
+        width: '24',
       },
       defaultVariants: { state: 'pending' },
       variants: {
         state: {
-          complete: { backgroundColor: 'foreground' },
-          pending: { backgroundColor: 'grayAlpha.200' },
+          complete: { backgroundColor: 'content.primary' },
+          pending: { backgroundColor: 'container.strong' },
         },
       },
     },