@tempoxyz/ds 0.3.0 → 0.3.2

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tempoxyz/ds",
   "type": "module",
-  "version": "0.3.0",
+  "version": "0.3.2",
   "license": "MIT",
   "files": [
     "DESIGN.md",

package/src/web/components/AddressCard.tsx

@@ -0,0 +1,216 @@
+/**
+ * A receive card that pairs a wallet address with its QR code, a copy action, and the networks it
+ * accepts.
+ * @module
+ */
+import type { ComponentPropsWithRef, ReactNode } from 'react'
+import { useId } from 'react'
+import type * as zyzz from 'zyzz'
+import { style } from '../zyzz.config.js'
+import { AssetChip } from './AssetChip.js'
+import { CopyButton } from './CopyButton.js'
+import { formatHex } from './Hex.js'
+import { NetworkLogo } from './NetworkLogo.js'
+import { Qr } from './Qr.js'
+
+/**
+ * A bordered receive card with a 120px QR code of `address` beside the address, a copy button,
+ * and the networks that it accepts. The address shows its first and last four characters, and
+ * screen readers receive the full value. Pass `AddressCard.Networks` as children to list the
+ * networks.
+ *
+ * - Use it where a person receives funds, such as a deposit or top-up screen.
+ * - List only the networks that the address accepts, and mark the picked one `selected`.
+ * - Use `Hex` with `copy` for an address inside a row or a sentence.
+ *
+ * @example
+ * <AddressCard address={address}>
+ *   <AddressCard.Networks>
+ *     <AddressCard.Network network="tempo" selected>
+ *       Tempo
+ *     </AddressCard.Network>
+ *     <AddressCard.Network network="base">Base</AddressCard.Network>
+ *   </AddressCard.Networks>
+ * </AddressCard>
+ *
+ * @see {@link https://www.w3.org/WAI/WCAG22/Understanding/non-text-content.html | WCAG 2.2 Non-text Content}
+ * @see {@link https://www.w3.org/WAI/WCAG22/Understanding/name-role-value.html | WCAG 2.2 Name, Role, Value}
+ */
+export function AddressCard(props: AddressCard.Props) {
+  const { address, children, className, label = 'Your wallet address', vars, ...attributes } = props
+
+  return (
+    <div {...attributes} {...styles.card({ className, style: props.style, vars })}>
+      <div {...styles.qr()}>
+        <Qr value={address} />
+      </div>
+      <div {...styles.details()}>
+        <div {...styles.section()}>
+          <span {...styles.label()}>{label}</span>
+          <div {...styles.row()}>
+            <span {...styles.address()}>
+              <span aria-hidden="true">{formatHex(address)}</span>
+              <span {...styles.hidden()}>{address}</span>
+            </span>
+            <CopyButton aria-label="Copy address" value={address} variant="secondary" />
+          </div>
+        </div>
+        {children}
+      </div>
+    </div>
+  )
+}
+
+export namespace AddressCard {
+  export type Props = ComponentPropsWithRef<'div'> &
+    zyzz.Props.Variants<typeof styles.card> & {
+      /** Wallet address that the QR code encodes and the copy button writes. */
+      address: string
+      /**
+       * Label above the address.
+       * @default 'Your wallet address'
+       */
+      label?: ReactNode | undefined
+    }
+
+  /**
+   * One network that the address accepts, rendered as an `AssetChip` with the 12px logo of
+   * `network` before its text. Give it an `onClick` to pick a network, and set `selected` on the
+   * picked one.
+   */
+  export function Network(props: Network.Props) {
+    const { children, className, network, ...attributes } = props
+
+    return (
+      <AssetChip {...attributes} {...styles.network({ className, style: props.style })}>
+        <NetworkLogo network={network} />
+        {children}
+      </AssetChip>
+    )
+  }
+
+  export namespace Network {
+    export type Props = Omit<AssetChip.Props, 'vars'> & {
+      /** Network whose logo renders before the text. */
+      network: NetworkLogo.Props['network']
+    }
+  }
+
+  /**
+   * Lists the `AddressCard.Network` chips under a label, wrapping them onto more rows. Screen
+   * readers announce the chips as a group named by the label.
+   */
+  export function Networks(props: Networks.Props) {
+    const { children, className, label = 'Network', vars, ...attributes } = props
+    const id = useId()
+
+    return (
+      <div {...attributes} {...styles.networks({ className, style: props.style, vars })}>
+        <span id={id} {...styles.label()}>
+          {label}
+        </span>
+        <div aria-labelledby={id} role="group" {...styles.chips()}>
+          {children}
+        </div>
+      </div>
+    )
+  }
+
+  export namespace Networks {
+    export type Props = ComponentPropsWithRef<'div'> &
+      zyzz.Props.Variants<typeof styles.networks> & {
+        /**
+         * Label above the chips, which also names their group.
+         * @default 'Network'
+         */
+        label?: ReactNode | undefined
+      }
+  }
+}
+
+namespace styles {
+  export const address = style(
+    { color: 'content.primary', typography: 'mono.m1', whiteSpace: 'nowrap' },
+    { id: 'tds/web/address-card/address' },
+  )
+
+  // The card pads its 16px corner by 16px inside its 1px border.
+  export const card = style(
+    {
+      borderColor: 'line.secondary',
+      borderRadius: 'sm',
+      borderStyle: 'solid',
+      borderWidth: 'regular',
+      boxSizing: 'border-box',
+      columnGap: '20',
+      display: 'flex',
+      padding: '16',
+    },
+    { id: 'tds/web/address-card' },
+  )
+
+  export const chips = style(
+    { columnGap: '6', display: 'flex', flexWrap: 'wrap', rowGap: '6' },
+    { id: 'tds/web/address-card/chips' },
+  )
+
+  export const details = style(
+    { display: 'flex', flex: '1 !custom', flexDirection: 'column', minWidth: '0', rowGap: '16' },
+    { id: 'tds/web/address-card/details' },
+  )
+
+  export const hidden = style(
+    {
+      clipPath: 'inset(50%) !custom',
+      height: '1',
+      overflow: 'hidden',
+      position: 'absolute',
+      whiteSpace: 'nowrap',
+      width: '1',
+    },
+    { id: 'tds/web/address-card/hidden' },
+  )
+
+  export const label = style(
+    { color: 'content.secondary', typography: 'body.b3' },
+    { id: 'tds/web/address-card/label' },
+  )
+
+  // The chip sizes a token image to its 12px logo slot, and the network logo takes the same slot.
+  export const network = style(
+    { selectors: { '& > svg': { height: '12', width: '12' } } },
+    { id: 'tds/web/address-card/network' },
+  )
+
+  export const networks = style(
+    { display: 'flex', flexDirection: 'column', rowGap: '8' },
+    { id: 'tds/web/address-card/networks' },
+  )
+
+  // Figma pads the 12px corner of the QR frame by 8px, below its radius, and the 120px code fills
+  // the rest.
+  export const qr = style(
+    {
+      backgroundColor: 'background.elevated',
+      borderColor: 'line.secondary',
+      borderRadius: 'xs',
+      borderStyle: 'solid',
+      borderWidth: 'regular',
+      display: 'flex',
+      flexShrink: '0 !custom',
+      padding: '8',
+      selectors: { '& > svg': { height: '120', width: '120' } },
+    },
+    { id: 'tds/web/address-card/qr' },
+  )
+
+  export const row = style(
+    { alignItems: 'center', columnGap: '8', display: 'flex' },
+    { id: 'tds/web/address-card/row' },
+  )
+
+  export const section = style(
+    { display: 'flex', flexDirection: 'column', rowGap: '4' },
+    { id: 'tds/web/address-card/section' },
+  )
+}

package/src/web/components/AgentLogo.tsx

@@ -2,7 +2,7 @@ import { type ComponentPropsWithRef, type ReactNode, useId } from 'react'
 import type * as zyzz from 'zyzz'
 import { variants } from '../zyzz.config.js'
 
-// The Agent Logo marks from the TDPS page of Web-Wallet, with each clip and gradient ID suffixed
+// The Agent marks of the Logo component in TPDS 1.0 Platform, with each clip and gradient ID suffixed
 // per instance. A brand tile fills with the agent's color and draws its white mark in
 // `currentColor`. An outlined tile draws the mark in its own colors, or in `currentColor` for a
 // black mark.

package/src/web/components/Alert.tsx

@@ -48,7 +48,8 @@ export namespace Alert {
 
   /**
    * A text `<button>` with a 44px tall target, in the alert's strong type. Place it inside
-   * `Alert.Content`, after the message. Name the action it performs, such as Review fees.
+   * `Alert.Content`, after the message, or at the end of the row, where its label sits in line
+   * with the first line. Name the action it performs, such as Review fees.
    */
   export function Action(props: Action.Props) {
     const { className, vars, ...attributes } = props
@@ -70,7 +71,8 @@ export namespace Alert {
 
   /**
    * Stacks the title, message, and action in a `<div>` that fills the row and can shrink, so long
-   * text wraps beside the indicator.
+   * text wraps beside the indicator. The message flows as text. When it sits beside a paragraph or
+   * a list, wrap it in a `p`, so the blocks keep their 4px gap.
    */
   export function Content(props: Content.Props) {
     const { className, vars, ...attributes } = props
@@ -176,13 +178,28 @@ namespace styles {
     { id: 'tds/web/alert/action' },
   )
 
+  // The message flows as text, so inline elements such as `strong` stay on its lines. The title,
+  // the action and block children each take a line of their own, 4px from the content beside
+  // them.
   export const content = style(
     {
-      display: 'flex',
+      display: 'block',
       flex: '1 !custom',
-      flexDirection: 'column',
       minWidth: '0',
-      rowGap: '4',
+      selectors: {
+        '& > [data-alert-action]': {
+          display: 'flex',
+          marginBlockStart: '4',
+          width: 'fit-content !custom',
+        },
+        '& > [data-alert-title]': { marginBlockEnd: '4' },
+        // The browser's block margins of paragraphs and lists give way to the 4px gap. `:where`
+        // keeps the reset below any class that sets a margin of its own.
+        '& > :where(p, ul, ol)': { marginBlock: '0' },
+        // A list sits 4px below the message, and a paragraph 4px below the element before it. A
+        // list follows text in practice, which CSS cannot select, so it always takes the gap.
+        '& > :is(ul, ol), & > * + :is(p, div)': { marginBlockStart: '4' },
+      },
     },
     { id: 'tds/web/alert/content' },
   )
@@ -260,6 +277,9 @@ namespace styles {
         padding: '16',
         typography: 'body.b3',
         selectors: {
+          // An action at the end of the row centers its 44px target on the 16px first line, so its
+          // label stays in line with the message.
+          '& > [data-alert-action]': { marginBlock: 'calc((1rem - 2.75rem) / 2) !custom' },
           '& [data-alert-action], & [data-alert-title]': { typography: 'body.b3Strong' },
           '& [data-alert-icon]': { height: '16', width: '16' },
         },

package/src/web/components/AmountInput.tsx

@@ -74,7 +74,7 @@ export namespace AmountInput {
   export namespace Root {
     export type Props = Omit<
       TextInput.Group.Props,
-      'defaultValue' | 'onChange' | 'success' | 'variant'
+      'appearance' | 'defaultValue' | 'onChange' | 'size' | 'success' | 'variant'
     > & {
       /** @default '' */
       defaultValue?: string | undefined