@deriv-com/dds-marketing 1.0.2 → 1.1.0

package/dist/components/blocks/comparison-table/comparison-table-impl.css

@@ -0,0 +1,143 @@
+/*
+ * Scoped to this package, like the generated sheet beside it.
+ *
+ * Most of what is here is the page's Table, drawn the way the reference's comparison asks and its
+ * props do not reach. The block knows its ground and the table does not, so the answers are here
+ * rather than in Table — FaqAccordion's arrangement with the Accordion it holds.
+ */
+
+/*
+ * The header starts on a phone and is centred once the band is wide enough to hold a line.
+ *
+ * FeatureCards' rule and its reason: the table is stacked content under the heading, so a centred
+ * heading is symmetric with it — but centred text starts every line at a different edge, which
+ * costs a great deal across a phone's measure. The header and its line are capped narrower than the
+ * column, so `margin-inline: auto` is what centres those boxes rather than their words. The footnote
+ * stays at the start edge, with the cells it is a note on.
+ *
+ * `48rem` longhand because `var()` is not permitted in a container query condition, and it is the
+ * width the rest of this package folds at.
+ */
+@container (min-width: 48rem) {
+  :where([data-dds-context="marketing"]) .dds-comparisontable .dds-comparisontable__header {
+    align-items: center;
+    margin-inline: auto;
+    text-align: center;
+  }
+
+  :where([data-dds-context="marketing"]) .dds-comparisontable .dds-comparisontable__description {
+    margin-inline: auto;
+  }
+}
+
+/*
+ * The columns keep a readable width, and the card scrolls rather than squeezes them.
+ *
+ * The reference's phone: a table of three or four equal columns on a screen a third as wide sets
+ * every value a word to a line, so it holds a narrowest width and scrolls across inside its card.
+ * Table's root is already the scroll region, with the tab stop a keyboard needs to reach what is off
+ * the edge, so all this sets is the width it scrolls over — size.grid.track-sm, the narrowest a grid
+ * track goes before it drops a column, once per column. The count is the component's, handed over
+ * as `--dds-comparisontable-columns`, the one thing the sheet cannot read from the markup. From the
+ * fold the card is wider than that and nothing scrolls.
+ *
+ * The ink is the card's rather than the table's. Table draws its grid in color.fg.default, which is
+ * the right ink on every card but the dark band's; inheriting is what lets one rule serve all three.
+ */
+:where([data-dds-context="marketing"]) .dds-comparisontable .dds-table__grid {
+  color: inherit;
+  min-inline-size: calc(var(--size-grid-track-sm) * var(--dds-comparisontable-columns, 3));
+}
+
+/*
+ * The light band under the column names.
+ *
+ * TableHead paints nothing — a table's surface is whoever put it there — so the band is the block's.
+ * color.bg.subtle is an alpha, so it is one step from whichever card it lies on: grey on the
+ * recessed card, a lighter grey on the raised white one. On the dark band it is the band's own veil,
+ * which is white where the page's is black. The card's corner clips it, so its top edge follows the
+ * card's round.
+ */
+:where([data-dds-context="marketing"]) .dds-comparisontable .dds-tablehead {
+  background-color: var(--color-bg-subtle);
+}
+
+:where([data-dds-context="marketing"]) .dds-comparisontable[data-ground="strong"] .dds-tablehead {
+  background-color: var(--color-bg-subtle-on-brand-strong);
+}
+
+/*
+ * The column names, in the card's ink and the row labels' weight, and on as many lines as they need.
+ *
+ * TableHeaderCell recedes a column's name to color.fg.muted, which is the right voice for a data
+ * table's headers and the wrong one here: the names are the options being compared, read as often
+ * as the labels down the side, and muted ink on the dark band is grey on near-black. So they take
+ * the card's ink, at label.md — the row labels' step, the reference setting both alike.
+ *
+ * And they wrap. A header cell holds its name on one line and clips the rest, which suits a long
+ * column of figures and not a comparison, where a clipped name is an option the reader cannot
+ * identify. Three classes deep, which beats the header cell's own class-and-attribute.
+ */
+:where([data-dds-context="marketing"]) .dds-comparisontable .dds-tablehead .dds-tableheadercell {
+  color: inherit;
+  font-family: var(--font-label-md-family);
+  font-size: var(--font-label-md-size);
+  font-weight: var(--font-label-md-weight);
+  letter-spacing: var(--font-label-md-letter-spacing);
+  line-height: var(--font-label-md-line-height);
+  white-space: normal;
+  /* The clip and the ellipsis go with the single line: wrapping alone left them standing, so a
+     name longer than its column — a German one, at a phone's 128px — was still cut off. */
+  overflow: visible;
+  text-overflow: clip;
+}
+
+/*
+ * The rules on the dark band.
+ *
+ * The cells draw their rules in color.border.subtle, black at a few percent, which is gone on
+ * near-black. The band's own quiet rule is the counterpart, white where the page's is black.
+ */
+:where([data-dds-context="marketing"]) .dds-comparisontable[data-ground="strong"] .dds-tablerow > :is(.dds-tablecell, .dds-tableheadercell) {
+  border-color: var(--color-border-subtle-inverse);
+}
+
+/*
+ * The cells' inset opens from the fold.
+ *
+ * The reference's two steps: sixteen on a phone, where every column is spending width it does not
+ * have, and twenty-four once the card has room — space.inset.md, which Table's middle size already
+ * sets, then space.inset.lg. Not Table's large size, which would set the values a step larger too;
+ * this is only the air. The row labels carry TableCell's class, so they open with the values.
+ */
+@container (min-width: 48rem) {
+  :where([data-dds-context="marketing"]) .dds-comparisontable .dds-tablerow > :is(.dds-tablecell, .dds-tableheadercell) {
+    padding-block: var(--space-inset-lg);
+    padding-inline: var(--space-inset-lg);
+  }
+}
+
+/*
+ * The scroll region's ring, drawn inside the card.
+ *
+ * Table rings its scroll region outside its own edge, and here that edge is the card's, which clips
+ * whatever it holds to its corner — so the ring was cut away on every side and a keyboard reader
+ * tabbed into a table with nothing drawn to say so. Pulled in by its own width, it sits just inside
+ * the card. On the dark band it takes the band's own ring.
+ */
+:where([data-dds-context="marketing"]) .dds-comparisontable .dds-table:focus-visible {
+  outline-offset: calc(var(--border-width-focus) * -1);
+}
+
+:where([data-dds-context="marketing"]) .dds-comparisontable[data-ground="strong"] .dds-table:focus-visible {
+  outline-color: var(--color-border-focus-on-brand-strong);
+}
+
+/*
+ * A heading with no line under it closes up: its bound step is the distance to the line, and with
+ * nothing there it would only add to the step from the header to what follows. `:last-child` is the
+ * condition itself, DataTable's way, rather than a prop standing in for it.
+ */
+:where([data-dds-context="marketing"]) .dds-comparisontable .dds-comparisontable__title:last-child {
+  margin-block-end: 0;
+}

package/dist/components/blocks/cta-banner/CtaBanner.css

@@ -6,6 +6,7 @@
   display: flex;
   inline-size: 100%;
   justify-content: center;
+  overflow-wrap: anywhere;
   position: relative;
   background-color: var(--color-bg-brand);
   color: var(--color-fg-on-brand);

package/dist/components/blocks/cta-banner/CtaBanner.js

@@ -24,9 +24,9 @@ import { ctaBannerDefaults, ctaBannerParts } from './CtaBanner.types.js';
  * It arrives the way every block does, and the way CtaBannerSlider's slides do: block-reveal.css
  * brings the headline, the line and the actions up a step apart once the band is in view.
  */
-export function CtaBanner({ title, headingLevel = ctaBannerDefaults.headingLevel, description, actions, background, }) {
+export function CtaBanner({ title, headingLevel = ctaBannerDefaults.headingLevel, description, actions, background = ctaBannerDefaults.background, }) {
     const titleId = useId();
     const [band, revealed] = useReveal();
     const Title = headingLevel === 'h3' ? 'h3' : 'h2';
-    return (_jsxs("section", { className: ctaBannerParts.root, "data-background": background, "aria-labelledby": titleId, children: [background === undefined ? null : (_jsx(Background, { tone: "brand", pattern: background, children: null })), _jsx("div", { className: ctaBannerParts.inner, ref: band, "data-revealed": revealed, children: _jsxs("div", { className: ctaBannerParts.content, children: [_jsxs("div", { className: ctaBannerParts.text, children: [_jsx(Title, { className: ctaBannerParts.title, id: titleId, ...arriving(0), children: title }), given(description) ? (_jsx("p", { className: ctaBannerParts.description, ...arriving(1), children: description })) : null] }), actions ? (_jsx("div", { className: ctaBannerParts.actions, ...arriving(2), children: actions })) : null] }) })] }));
+    return (_jsxs("section", { className: ctaBannerParts.root, "data-background": background, "aria-labelledby": titleId, children: [background === 'plain' ? null : (_jsx(Background, { tone: "brand", pattern: background, children: null })), _jsx("div", { className: ctaBannerParts.inner, ref: band, "data-revealed": revealed, children: _jsxs("div", { className: ctaBannerParts.content, children: [_jsxs("div", { className: ctaBannerParts.text, children: [_jsx(Title, { className: ctaBannerParts.title, id: titleId, ...arriving(0), children: title }), given(description) ? (_jsx("p", { className: ctaBannerParts.description, ...arriving(1), children: description })) : null] }), actions ? (_jsx("div", { className: ctaBannerParts.actions, ...arriving(2), children: actions })) : null] }) })] }));
 }

package/dist/components/blocks/cta-banner/CtaBanner.types.d.ts

@@ -12,10 +12,10 @@ export interface CtaBannerOwnProps {
     /** The one action the message asks for, or two at most. The coral is the banner's ground, so the primary is Button variant="inverse" tone="brand" — a primary Button is coral on coral, and the tone keeps it near-black in both themes — and a second is Button variant="secondary" tone="brand" — a white tint with a white label, fixed in both themes like the band. */
     actions?: ReactNode;
     /**
-     * `halftone` — A halftone drawn behind the band's content: white dots on the band's own coral, following the pointer over the band. Drawn by Background, placed as a layer under the content, so the band's own layout is untouched.
-     * `grid` — A fine rule grid behind the band's content: white hairlines on the coral, fading in towards the foot, brightening in a soft circle around the pointer. Drawn by Background as a layer under the band's own content, by the stylesheet alone — quieter than the halftone, and nothing runs at rest
+     * `grid` — The default: a fine rule grid behind the band's content — light coral hairlines rising out of a deeper red at the band's foot, moving slowly at rest and brightening around the pointer. Drawn by Background as a layer under the band's own content, so the band's layout is untouched.
+     * `plain` — The flat coral and nothing on it, asked for by name: a page that already spends its one pattern on another band, or a banner set among busy content where the grid would be texture fighting texture.
      */
-    background?: 'halftone' | 'grid';
+    background?: 'grid' | 'plain';
 }
 export type CtaBannerProps = CtaBannerOwnProps;
 /** The class each part carries. Apply these — do not retype them. */
@@ -31,4 +31,5 @@ export declare const ctaBannerParts: {
 /** Generated so defaults cannot drift from the contract. */
 export declare const ctaBannerDefaults: {
     readonly headingLevel: "h2";
+    readonly background: "grid";
 };

package/dist/components/blocks/cta-banner/CtaBanner.types.js

@@ -10,4 +10,4 @@ export const ctaBannerParts = {
     actions: 'dds-ctabanner__actions',
 };
 /** Generated so defaults cannot drift from the contract. */
-export const ctaBannerDefaults = { headingLevel: 'h2' };
+export const ctaBannerDefaults = { headingLevel: 'h2', background: 'grid' };

package/dist/components/blocks/cta-banner-slider/CtaBannerSlider.css

@@ -7,6 +7,7 @@
   inline-size: 100%;
   justify-content: center;
   overflow: hidden;
+  overflow-wrap: anywhere;
   position: relative;
   background-color: var(--color-bg-brand);
   color: var(--color-fg-on-brand);

package/dist/components/blocks/cta-banner-slider/CtaBannerSlider.d.ts

@@ -36,4 +36,4 @@ export type { CtaBannerSliderProps };
  * the same rise, a step apart. The slide leaving drops to waiting at once, as that sheet has every
  * part do, so the outgoing words never travel.
  */
-export declare function CtaBannerSlider({ slides, headingLevel, autoplay, label, controlsLabel, slideLabel, background, }: CtaBannerSliderProps): import("react").JSX.Element | null;
+export declare function CtaBannerSlider({ slides, headingLevel, autoplay, label, controlsLabel, slideLabel, roleDescription, slideRoleDescription, positionLabel, background, }: CtaBannerSliderProps): import("react").JSX.Element | null;

package/dist/components/blocks/cta-banner-slider/CtaBannerSlider.js

@@ -43,14 +43,18 @@ import { ctaBannerSliderDefaults, ctaBannerSliderParts, } from './CtaBannerSlide
  * the same rise, a step apart. The slide leaving drops to waiting at once, as that sheet has every
  * part do, so the outgoing words never travel.
  */
-export function CtaBannerSlider({ slides, headingLevel = ctaBannerSliderDefaults.headingLevel, autoplay = ctaBannerSliderDefaults.autoplay, label = ctaBannerSliderDefaults.label, controlsLabel = ctaBannerSliderDefaults.controlsLabel, slideLabel = ctaBannerSliderDefaults.slideLabel, background, }) {
+export function CtaBannerSlider({ slides, headingLevel = ctaBannerSliderDefaults.headingLevel, autoplay = ctaBannerSliderDefaults.autoplay, label = ctaBannerSliderDefaults.label, controlsLabel = ctaBannerSliderDefaults.controlsLabel, slideLabel = ctaBannerSliderDefaults.slideLabel, roleDescription = ctaBannerSliderDefaults.roleDescription, slideRoleDescription = ctaBannerSliderDefaults.slideRoleDescription, positionLabel, background, }) {
     const Title = headingLevel === 'h3' ? 'h3' : 'h2';
     const count = slides.length;
     // The band arriving on screen, as every block does; until then no slide has arrived.
     const [band, revealed] = useReveal();
     // Which slide is in view, and every way a reader moves, holds or stops the set — shared with
     // TestimonialSlider, so the two rotate by one set of rules. See use-rotation.ts.
-    const { current, rotating, root, region, track, item, away, dots } = useRotation(count, autoplay);
+    const { current, rotating, root, region, track, item, away, dots } = useRotation(count, autoplay, {
+        roleDescription,
+        slideRoleDescription,
+        positionLabel,
+    });
     // Nothing to show is nothing drawn: a named region with no message in it is a landmark that
     // leads a screen reader to an empty band.
     if (count === 0)

package/dist/components/blocks/cta-banner-slider/CtaBannerSlider.types.d.ts

@@ -21,6 +21,12 @@ export interface CtaBannerSliderOwnProps {
      * `grid` — A fine rule grid behind the slides: white hairlines on the coral, fading in towards the foot, brightening in a soft circle around the pointer. Drawn by Background as a layer under the band's content, by the stylesheet alone, so it holds still while the slides move and costs nothing at rest
      */
     background?: 'grid';
+    /** What a screen reader calls the set while it rotates — announced in place of a region, as the word for this kind of thing. Translate it with the page: it is read out as given, so an untranslated one announces an English word on every page in every language. */
+    roleDescription?: string;
+    /** What a screen reader calls each item while the set rotates, for the reason roleDescription exists. Translate it with the page. */
+    slideRoleDescription?: string;
+    /** The accessible name of each item while the set rotates, given its place in the set counting from one — so a reader hears where they are. Without it each is named "2 of 5"; pass it to translate that with the page, in that language's own order and digits. */
+    positionLabel?: (position: number, count: number) => string;
 }
 export type CtaBannerSliderProps = CtaBannerSliderOwnProps;
 /** The class each part carries. Apply these — do not retype them. */
@@ -42,4 +48,6 @@ export declare const ctaBannerSliderDefaults: {
     readonly label: "Promotions";
     readonly controlsLabel: "Slides";
     readonly slideLabel: "Slide";
+    readonly roleDescription: "carousel";
+    readonly slideRoleDescription: "slide";
 };

package/dist/components/blocks/cta-banner-slider/CtaBannerSlider.types.js

@@ -12,4 +12,4 @@ export const ctaBannerSliderParts = {
     controls: 'dds-ctabannerslider__controls',
 };
 /** Generated so defaults cannot drift from the contract. */
-export const ctaBannerSliderDefaults = { headingLevel: 'h2', autoplay: false, label: 'Promotions', controlsLabel: 'Slides', slideLabel: 'Slide' };
+export const ctaBannerSliderDefaults = { headingLevel: 'h2', autoplay: false, label: 'Promotions', controlsLabel: 'Slides', slideLabel: 'Slide', roleDescription: 'carousel', slideRoleDescription: 'slide' };

package/dist/components/blocks/data-table/DataTable.css

@@ -0,0 +1,170 @@
+/* GENERATED from datatable.contract.json. Do not edit. */
+
+:where([data-dds-context="marketing"]) .dds-datatable {
+  box-sizing: border-box;
+  container-type: inline-size;
+  display: flex;
+  inline-size: 100%;
+  justify-content: center;
+  overflow-wrap: anywhere;
+}
+
+:where([data-dds-context="marketing"]) .dds-datatable .dds-datatable__inner {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  inline-size: 100%;
+  min-inline-size: 0;
+  max-inline-size: var(--size-content-max);
+  padding-block: var(--space-section-default);
+  padding-inline: var(--space-inset-page);
+  row-gap: var(--space-heading-content);
+}
+
+:where([data-dds-context="marketing"]) .dds-datatable .dds-datatable__header {
+  display: flex;
+  flex-direction: column;
+  min-inline-size: 0;
+  max-inline-size: var(--size-measure-heading);
+  row-gap: var(--space-gap-none);
+}
+
+:where([data-dds-context="marketing"]) .dds-datatable .dds-datatable__title {
+  margin-block: 0;
+  text-wrap: balance;
+  font-family: var(--font-h2-family);
+  font-size: var(--font-h2-size);
+  font-weight: var(--font-h2-weight);
+  letter-spacing: var(--font-h2-letter-spacing);
+  line-height: var(--font-h2-line-height);
+  margin-block-end: var(--space-heading-title-description);
+}
+
+:where([data-dds-context="marketing"]) .dds-datatable .dds-datatable__description {
+  margin-block: 0;
+  font-family: var(--font-body-md-family);
+  font-size: var(--font-body-md-size);
+  font-weight: var(--font-body-md-weight);
+  letter-spacing: var(--font-body-md-letter-spacing);
+  line-height: var(--font-body-md-line-height);
+  max-inline-size: var(--size-measure-description);
+}
+
+:where([data-dds-context="marketing"]) .dds-datatable .dds-datatable__content {
+  display: flex;
+  flex-direction: column;
+  min-inline-size: 0;
+  row-gap: var(--space-gap-lg);
+}
+
+:where([data-dds-context="marketing"]) .dds-datatable .dds-datatable__frame {
+  border-style: solid;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  min-inline-size: 0;
+  overflow: clip;
+  position: relative;
+  background-color: var(--color-bg-page);
+  border-color: var(--color-border-subtle);
+  border-radius: var(--radius-surface);
+  border-width: var(--border-width-default);
+  color: var(--color-fg-default);
+}
+
+:where([data-dds-context="marketing"]) .dds-datatable .dds-datatable__toolbar {
+  align-items: center;
+  border-block-start-width: 0;
+  border-inline-width: 0;
+  border-style: solid;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  border-block-end-width: var(--border-width-hairline);
+  border-color: var(--color-border-subtle);
+  column-gap: var(--space-gap-md);
+  padding-block: var(--space-inset-md);
+  padding-inline: var(--space-inset-lg);
+  row-gap: var(--space-gap-sm);
+}
+
+:where([data-dds-context="marketing"]) .dds-datatable .dds-datatable__search {
+  inline-size: 100%;
+  min-inline-size: 0;
+  max-inline-size: var(--size-data-table-search);
+}
+
+:where([data-dds-context="marketing"]) .dds-datatable .dds-datatable__status {
+  margin: 0;
+  color: var(--color-fg-muted);
+  font-family: var(--font-body-sm-family);
+  font-size: var(--font-body-sm-size);
+  font-weight: var(--font-body-sm-weight);
+  letter-spacing: var(--font-body-sm-letter-spacing);
+  line-height: var(--font-body-sm-line-height);
+}
+
+:where([data-dds-context="marketing"]) .dds-datatable .dds-datatable__empty {
+  margin: 0;
+  text-align: center;
+  border-color: var(--color-border-subtle);
+  color: var(--color-fg-muted);
+  font-family: var(--font-body-md-family);
+  font-size: var(--font-body-md-size);
+  font-weight: var(--font-body-md-weight);
+  letter-spacing: var(--font-body-md-letter-spacing);
+  line-height: var(--font-body-md-line-height);
+  padding-block: var(--space-inset-2xl);
+  padding-inline: var(--space-inset-lg);
+}
+
+:where([data-dds-context="marketing"]) .dds-datatable .dds-datatable__pager {
+  border-block-end-width: 0;
+  border-inline-width: 0;
+  border-style: solid;
+  display: flex;
+  justify-content: center;
+  border-block-start-width: var(--border-width-hairline);
+  border-color: var(--color-border-subtle);
+  padding-block: var(--space-inset-md);
+  padding-inline: var(--space-inset-lg);
+}
+
+:where([data-dds-context="marketing"]) .dds-datatable .dds-datatable__footnote {
+  margin-block: 0;
+  font-family: var(--font-body-sm-family);
+  font-size: var(--font-body-sm-size);
+  font-weight: var(--font-body-sm-weight);
+  letter-spacing: var(--font-body-sm-letter-spacing);
+  line-height: var(--font-body-sm-line-height);
+  max-inline-size: var(--size-measure-description);
+}
+
+:where([data-dds-context="marketing"]) .dds-datatable[data-ground="page"] {
+  background-color: var(--color-bg-page);
+  color: var(--color-fg-default);
+}
+
+:where([data-dds-context="marketing"]) .dds-datatable[data-ground="page"] .dds-datatable__footnote {
+  color: var(--color-fg-muted);
+}
+
+:where([data-dds-context="marketing"]) .dds-datatable[data-ground="strong"] {
+  background-color: var(--color-bg-brand-strong);
+  color: var(--color-fg-on-brand-strong);
+}
+
+:where([data-dds-context="marketing"]) .dds-datatable[data-ground="strong"] .dds-datatable__footnote {
+  color: var(--color-fg-muted-inverse);
+}
+
+:where([data-dds-context="marketing"]) .dds-datatable[data-ground="subtle"] {
+  background-color: var(--color-bg-page);
+  background-image: linear-gradient(var(--color-bg-band-subtle), var(--color-bg-band-subtle));
+  color: var(--color-fg-default);
+}
+
+:where([data-dds-context="marketing"]) .dds-datatable[data-ground="subtle"] .dds-datatable__footnote {
+  color: var(--color-fg-muted);
+}
+

package/dist/components/blocks/data-table/DataTable.d.ts

@@ -0,0 +1,29 @@
+import './DataTable.css';
+import './data-table-impl.css';
+import '../block-reveal.css';
+import { type DataTableProps } from './DataTable.types.js';
+export type { DataTableProps };
+/**
+ * A heading over a framed table a reader searches and pages through — the reference site's Table
+ * template, renamed because Table is already the grid it is drawn around.
+ *
+ * Everything that is a control is a component this package already has: the search is SearchInput,
+ * the pages are Pagination, and the grid is Table with its first column pinned. What this adds is
+ * the section — the heading, the frame, the count, the small print — and the two pieces of state
+ * the reference holds: the query and the page. Both are the block's own rather than the page's,
+ * because nothing outside the section reads them, and both are client-side: the rows are the ones
+ * the page handed in, searched and sliced here.
+ *
+ * Each row's name is a row header, so a screen reader announces the instrument before each of its
+ * values, as it announces each column's name. TableHeaderCell draws it with `scope="row"`, in the
+ * body, where a TableCell would otherwise go.
+ *
+ * The count is a polite live region from the first render, so a reader who cannot see the rows
+ * thin out as they type is told how many are left, and told in words when none are. When none are,
+ * the table is not drawn at all and the empty line is — TableBody's rule, a sentence in place of
+ * the data rather than a row pretending to be some.
+ *
+ * `'use client'` for the query, the page, the arrival and `useId`, which names the region by its
+ * heading.
+ */
+export declare function DataTable({ ground, title, description, columns, rows, pageSize, footnote, searchLabel, searchPlaceholder, clearLabel, emptyText, resultCount, paginationLabel, previousLabel, nextLabel, morePagesLabel, }: DataTableProps): import("react").JSX.Element;

package/dist/components/blocks/data-table/DataTable.js

@@ -0,0 +1,84 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId, useMemo, useState } from 'react';
+import './DataTable.css';
+import './data-table-impl.css';
+import '../block-reveal.css';
+import { given } from '../../given.js';
+import { Pagination } from '../../core/pagination/Pagination.js';
+import { SearchInput } from '../../core/search-input/SearchInput.js';
+import { Table } from '../../core/table/Table.js';
+import { TableBody } from '../../core/table-body/TableBody.js';
+import { TableCell } from '../../core/table-cell/TableCell.js';
+import { TableHead } from '../../core/table-head/TableHead.js';
+import { TableHeaderCell } from '../../core/table-header-cell/TableHeaderCell.js';
+import { TableRow } from '../../core/table-row/TableRow.js';
+import { arriving, useReveal } from '../use-reveal.js';
+import { dataTableDefaults, dataTableParts } from './DataTable.types.js';
+/** The count in English, for a page that passes none: where the reader is, or that nothing matched. */
+const countInEnglish = (first, last, total) => total === 0 ? 'No results' : `Showing ${first}–${last} of ${total}`;
+/**
+ * Whether a row holds the query in any of the columns drawn — case-insensitive, anywhere in the
+ * value. Only the drawn columns: a field the table does not show is one a reader could never see
+ * the match in, and a row matching on it would look like a row matching on nothing.
+ */
+const matches = (row, keys, query) => keys.some((key) => (row[key] ?? '').toLowerCase().includes(query));
+/**
+ * A heading over a framed table a reader searches and pages through — the reference site's Table
+ * template, renamed because Table is already the grid it is drawn around.
+ *
+ * Everything that is a control is a component this package already has: the search is SearchInput,
+ * the pages are Pagination, and the grid is Table with its first column pinned. What this adds is
+ * the section — the heading, the frame, the count, the small print — and the two pieces of state
+ * the reference holds: the query and the page. Both are the block's own rather than the page's,
+ * because nothing outside the section reads them, and both are client-side: the rows are the ones
+ * the page handed in, searched and sliced here.
+ *
+ * Each row's name is a row header, so a screen reader announces the instrument before each of its
+ * values, as it announces each column's name. TableHeaderCell draws it with `scope="row"`, in the
+ * body, where a TableCell would otherwise go.
+ *
+ * The count is a polite live region from the first render, so a reader who cannot see the rows
+ * thin out as they type is told how many are left, and told in words when none are. When none are,
+ * the table is not drawn at all and the empty line is — TableBody's rule, a sentence in place of
+ * the data rather than a row pretending to be some.
+ *
+ * `'use client'` for the query, the page, the arrival and `useId`, which names the region by its
+ * heading.
+ */
+export function DataTable({ ground = dataTableDefaults.ground, title, description, columns, rows, pageSize = dataTableDefaults.pageSize, footnote, searchLabel = dataTableDefaults.searchLabel, searchPlaceholder = dataTableDefaults.searchPlaceholder, clearLabel = dataTableDefaults.clearLabel, emptyText = dataTableDefaults.emptyText, resultCount = countInEnglish, paginationLabel = dataTableDefaults.paginationLabel, previousLabel = dataTableDefaults.previousLabel, nextLabel = dataTableDefaults.nextLabel, morePagesLabel = dataTableDefaults.morePagesLabel, }) {
+    const titleId = useId();
+    const [band, revealed] = useReveal();
+    const [query, setQuery] = useState('');
+    const [page, setPage] = useState(1);
+    const keys = useMemo(() => columns.map((column) => column.key), [columns]);
+    const found = useMemo(() => {
+        const needle = query.trim().toLowerCase();
+        return needle === '' ? rows : rows.filter((row) => matches(row, keys, needle));
+    }, [rows, keys, query]);
+    // A page size that is not a whole number of at least one would divide the set by nothing.
+    const perPage = Number.isFinite(pageSize) ? Math.max(1, Math.trunc(pageSize)) : dataTableDefaults.pageSize;
+    const pages = Math.max(1, Math.ceil(found.length / perPage));
+    // Held to the last page rather than trusted: rows handed in again, shorter, can leave the page
+    // past the end, and a page past the end is an empty table under a count that says otherwise.
+    const current = Math.min(page, pages);
+    const start = (current - 1) * perPage;
+    const shown = found.slice(start, start + perPage);
+    const none = found.length === 0;
+    const [first, ...rest] = columns;
+    const search = (next) => {
+        setQuery(next);
+        // Every new query starts at its first page: page three of what the last query matched is a
+        // page of nothing, or of rows the reader never saw the first two pages of.
+        setPage(1);
+    };
+    return (_jsx("section", { className: dataTableParts.root, "data-ground": ground, "aria-labelledby": titleId, children: _jsxs("div", { className: dataTableParts.inner, ref: band, "data-revealed": revealed, children: [_jsxs("div", { className: dataTableParts.header, children: [_jsx("h2", { className: dataTableParts.title, id: titleId, ...arriving(0), children: title }), given(description) ? (_jsx("p", { className: dataTableParts.description, ...arriving(1), children: description })) : null] }), _jsxs("div", { className: dataTableParts.content, children: [_jsxs("div", { className: dataTableParts.frame, ...arriving(2), children: [_jsxs("div", { className: dataTableParts.toolbar, children: [_jsx("div", { className: dataTableParts.search, children: _jsx(SearchInput, { label: searchLabel, placeholder: searchPlaceholder, clearLabel: clearLabel, value: query, onChange: search }) }), _jsx("p", { className: dataTableParts.status, role: "status", "aria-live": "polite", children: none ? resultCount(0, 0, 0) : resultCount(start + 1, start + shown.length, found.length) })] }), none || first === undefined ? null : (
+                                /* Named by the heading's words, as its caption — clipped rather than drawn twice, in
+                                   the block's stylesheet. Table names its scroller from the caption alone, so the
+                                   caption is what reaches both the grid and the region a keyboard tabs into. */
+                                _jsxs(Table, { caption: title, pinFirstColumn: true, size: "sm", headerCase: "title", hoverable: false, children: [_jsx(TableHead, { children: _jsx(TableRow, { children: columns.map((column, at) => (_jsx(TableHeaderCell, { align: at === 0 ? 'start' : (column.align ?? 'start'), children: column.label }, column.key))) }) }), _jsx(TableBody, { children: shown.map((row, at) => (
+                                            /* The case by hand: Table hands its headerCase to the head's rows through
+                                               TableHead, and TableBody passes none on — so a body row would draw its row
+                                               header in the header row's default capitals. */
+                                            _jsxs(TableRow, { headerCase: "title", children: [_jsx(TableHeaderCell, { scope: "row", children: _jsx("bdi", { children: row[first.key] ?? '' }) }), rest.map((column) => (_jsx(TableCell, { align: column.align ?? 'start', numeric: column.align === 'end', children: _jsx("bdi", { children: row[column.key] ?? '' }) }, column.key)))] }, `${start + at}-${row[first.key] ?? ''}`))) })] })), _jsx("p", { className: dataTableParts.empty, hidden: !none, children: emptyText }), _jsx("div", { className: dataTableParts.pager, hidden: pages < 2, children: pages < 2 ? null : (_jsx(Pagination, { page: current, totalPages: pages, onPageChange: setPage, label: paginationLabel, previousLabel: previousLabel, nextLabel: nextLabel, morePagesLabel: morePagesLabel })) })] }), given(footnote) ? (_jsx("p", { className: dataTableParts.footnote, ...arriving(3), children: footnote })) : null] })] }) }));
+}

package/dist/components/blocks/data-table/DataTable.types.d.ts

@@ -0,0 +1,69 @@
+import type { DataTableColumn, DataTableRow } from '../../data-table-data.js';
+export interface DataTableOwnProps {
+    /**
+     * `page` — The default, and the page's own white. The frame's rule is what sets the table off
+     * `subtle` — The grey band — the reference design's slate section. The frame lifts off it as a raised card. Painted as the band's tint laid over the page's own ground, so it is the same grey whatever is behind the section
+     * `strong` — `color.bg.brand-strong`, the dark band, for a listing a reader should arrive at. The heading and the small print turn white and muted-white; the frame stays the light surface it is everywhere else
+     */
+    ground?: 'page' | 'subtle' | 'strong';
+    /** Always. What the rows are, in the fewest words — "Forex trading conditions", "Synthetic indices". It names the section and the table both. */
+    title: string;
+    /** A line under the heading where the heading alone does not say which account or platform the conditions are for — "Conditions on Deriv MT5 Financial accounts." */
+    description?: string;
+    /** Always. The columns in reading order, each a `key` the rows hold its value under and the `label` drawn over it. The first is the rows' names — the instrument — and is pinned to the start edge while the rest scroll sideways; give a column of numbers `align: 'end'` so its figures line up. */
+    columns: DataTableColumn[];
+    /** Always. The records, in the order they are listed — each a value per column key, as the page would print it. Every value is searched as written. An empty list draws the empty line in place of the table. */
+    rows: DataTableRow[];
+    /** How many rows a page holds. Ten, the reference's, unless the rows are few enough that a second page would hold two or three of them — then raise it so the set is one page and the pages are not drawn at all. */
+    pageSize?: number;
+    /** A line of small print under the table — how current the figures are, what they are subject to. "Information is based on the most recent available trading data and may not represent today's conditions." */
+    footnote?: string;
+    /** The search's name — SearchInput's `label`, never drawn and always announced. Say what is searched where the default is vague for the page: "Search instruments". Translate it with the page. */
+    searchLabel?: string;
+    /** What the empty field shows, the reference's "Search" — or an example of a query, "EUR/USD". It disappears as the reader types and is never the field's name. Translate it with the page. */
+    searchPlaceholder?: string;
+    /** The name of the button that empties the search, which is a cross and says nothing on its own. Translate it with the page. */
+    clearLabel?: string;
+    /** The line drawn in place of the table when nothing matches the query. Translate it with the page; say what to try where the page can — "No markets match. Try a symbol, like EURUSD." */
+    emptyText?: string;
+    /** The count across from the search, given the first and last row on this page and how many matched — counting from one, and all three 0 when nothing matched. It is also what a screen reader is told, politely, as the query or the page changes. Without it the count reads "Showing 1–10 of 24", and "No results" when nothing matched; pass it to translate that with the page. */
+    resultCount?: (first: number, last: number, total: number) => string;
+    /** The name of the pages' navigation landmark, Pagination's `label`. Its own name rather than Pagination's default, so a reader listing landmarks can tell this table's pages from anything else on the page that is paginated. Translate it with the page. */
+    paginationLabel?: string;
+    /** The name of the step back through the pages, which is a glyph. Translate it with the page, and keep it parallel to nextLabel. */
+    previousLabel?: string;
+    /** The name of the step on through the pages, for the reason previousLabel exists. */
+    nextLabel?: string;
+    /** The name of the break between two runs of page numbers, which opens a menu of the pages it stands for. Only drawn when the pages run long. Translate it with the page. */
+    morePagesLabel?: string;
+}
+export type DataTableProps = DataTableOwnProps;
+/** The class each part carries. Apply these — do not retype them. */
+export declare const dataTableParts: {
+    readonly root: "dds-datatable";
+    readonly inner: "dds-datatable__inner";
+    readonly header: "dds-datatable__header";
+    readonly title: "dds-datatable__title";
+    readonly description: "dds-datatable__description";
+    readonly content: "dds-datatable__content";
+    readonly frame: "dds-datatable__frame";
+    readonly toolbar: "dds-datatable__toolbar";
+    readonly search: "dds-datatable__search";
+    readonly status: "dds-datatable__status";
+    readonly empty: "dds-datatable__empty";
+    readonly pager: "dds-datatable__pager";
+    readonly footnote: "dds-datatable__footnote";
+};
+/** Generated so defaults cannot drift from the contract. */
+export declare const dataTableDefaults: {
+    readonly ground: "page";
+    readonly pageSize: 10;
+    readonly searchLabel: "Search the table";
+    readonly searchPlaceholder: "Search";
+    readonly clearLabel: "Clear search";
+    readonly emptyText: "No results match your search.";
+    readonly paginationLabel: "Table pages";
+    readonly previousLabel: "Previous page";
+    readonly nextLabel: "Next page";
+    readonly morePagesLabel: "More pages";
+};

package/dist/components/blocks/data-table/DataTable.types.js

@@ -0,0 +1,19 @@
+// GENERATED from data-table.contract.json. Do not edit.
+/** The class each part carries. Apply these — do not retype them. */
+export const dataTableParts = {
+    root: 'dds-datatable',
+    inner: 'dds-datatable__inner',
+    header: 'dds-datatable__header',
+    title: 'dds-datatable__title',
+    description: 'dds-datatable__description',
+    content: 'dds-datatable__content',
+    frame: 'dds-datatable__frame',
+    toolbar: 'dds-datatable__toolbar',
+    search: 'dds-datatable__search',
+    status: 'dds-datatable__status',
+    empty: 'dds-datatable__empty',
+    pager: 'dds-datatable__pager',
+    footnote: 'dds-datatable__footnote',
+};
+/** Generated so defaults cannot drift from the contract. */
+export const dataTableDefaults = { ground: 'page', pageSize: 10, searchLabel: 'Search the table', searchPlaceholder: 'Search', clearLabel: 'Clear search', emptyText: 'No results match your search.', paginationLabel: 'Table pages', previousLabel: 'Previous page', nextLabel: 'Next page', morePagesLabel: 'More pages' };