@deriv-com/dds-marketing 1.0.1 → 1.1.0

package/dist/components/comparison-cards-data.d.ts

@@ -0,0 +1,59 @@
+/**
+ * The cards a ComparisonCards sets side by side, and the rows each one repeats.
+ *
+ * Exported from the package for the reason `testimonial-row-data.ts` is: a block whose content is a
+ * list is one whose consumer builds a value before passing it.
+ *
+ * Records rather than a Card per option, because what a comparison is made of is structured — a
+ * name, a sentence, and the same few labels each answered with a value — and the block has to lay
+ * those rows out against the rows of the card beside it. A Card handed in whole is a box the block
+ * cannot see into, so its rows could never line up with anyone else's.
+ */
+/** One line of a comparison card: what is being compared, and this option's answer to it. */
+export interface ComparisonCardsRow {
+    /**
+     * What the row compares — "Leverage", "Cost per trade". Written on every card rather than once
+     * for the set: each card is read on its own, and a phone stacks them out of sight of each other.
+     */
+    label: string;
+    /** This option's answer, short enough to sit at the end of the row — "Up to 1:1000", "None". */
+    value: string;
+}
+/** A way on from one card to the page about that option, written as a standalone link. */
+export interface ComparisonCardsAction {
+    /** The words of the link — "Explore Futures", "Open a Spot account". */
+    label: string;
+    /** Where it goes, as a URL. */
+    href: string;
+}
+/** One option in a ComparisonCards: its name, a sentence, its rows, and the surface it is drawn on. */
+export interface ComparisonCardsCard {
+    /** The option's name — "Spot", "Futures", "Standard account". */
+    title: string;
+    /** What the option is, in a sentence or two, under its name. */
+    description?: string;
+    /**
+     * This is the option the page recommends. In the highlighted variant it is drawn coral, the one
+     * card set against the light ones; only the first card marked is. Ignored by the standard variant.
+     */
+    recommended?: boolean;
+    /**
+     * A word on a badge over the recommended card's top edge — "Most popular", "Recommended". Optional:
+     * the coral already says which card it is, and a badge is for a page that wants to say why. Drawn
+     * only on the recommended card, in the highlighted variant.
+     */
+    badge?: string;
+    /**
+     * The rows, in the order they are read. Keep the same labels in the same order on every card in
+     * the set, so a row lines up with its counterpart beside it.
+     */
+    rows: ComparisonCardsRow[];
+    /**
+     * A disclaimer that belongs to this option alone — a risk warning, a condition on a value — at
+     * the foot of its card. Never the section's: a note under the heading would read as true of every
+     * option.
+     */
+    footnote?: string;
+    /** A way on to the page about this option, at the foot of its card under any footnote. */
+    action?: ComparisonCardsAction;
+}

package/dist/components/comparison-cards-data.js

@@ -0,0 +1,12 @@
+/**
+ * The cards a ComparisonCards sets side by side, and the rows each one repeats.
+ *
+ * Exported from the package for the reason `testimonial-row-data.ts` is: a block whose content is a
+ * list is one whose consumer builds a value before passing it.
+ *
+ * Records rather than a Card per option, because what a comparison is made of is structured — a
+ * name, a sentence, and the same few labels each answered with a value — and the block has to lay
+ * those rows out against the rows of the card beside it. A Card handed in whole is a box the block
+ * cannot see into, so its rows could never line up with anyone else's.
+ */
+export {};

package/dist/components/comparison-table-data.d.ts

@@ -0,0 +1,39 @@
+/**
+ * The columns a ComparisonTable compares and the rows it compares them on.
+ *
+ * Exported from the package for the reason `testimonial-row-data.ts` and `banner-data.ts` are: a block
+ * whose content is a list is one whose consumer builds a value before passing it.
+ *
+ * Records rather than a component per row, because a row of a comparison is a label and a few short
+ * values — nothing in it is an element a page composes — and the block has to draw every row against
+ * the same columns, which it cannot check inside rows it was handed whole.
+ */
+/**
+ * One column of a ComparisonTable: the key its values are filed under in every row, and the name
+ * written over it.
+ *
+ * The first column is the labels' own: its `label` names what the rows are — "Features", "Market" —
+ * and its `key` files nothing, since each row carries its label itself. The columns after it are the
+ * options being compared, two or three of them.
+ */
+export interface ComparisonTableColumn {
+    /** What this column's values are filed under in each row's `values`: "web", "desktop". */
+    key: string;
+    /** The name over the column, one short line: "Web terminal", "Desktop". */
+    label: string;
+}
+/**
+ * One cell's value. A string is one line; a list of strings is several, each its own line — a
+ * schedule's sessions, a platform's operating systems — and is announced as a list of that many.
+ */
+export type ComparisonTableValue = string | string[];
+/** One row of a ComparisonTable: what is being compared, and each option's answer to it. */
+export interface ComparisonTableRow {
+    /** What the row compares, in a few words: "Charts", "Expert Advisors". Drawn as the row's header. */
+    label: string;
+    /**
+     * Each option's answer, filed under its column's `key`. A column the row has no value for is an
+     * empty cell rather than a missing one, so the row keeps the table's shape.
+     */
+    values: Record<string, ComparisonTableValue | undefined>;
+}

package/dist/components/comparison-table-data.js

@@ -0,0 +1,11 @@
+/**
+ * The columns a ComparisonTable compares and the rows it compares them on.
+ *
+ * Exported from the package for the reason `testimonial-row-data.ts` and `banner-data.ts` are: a block
+ * whose content is a list is one whose consumer builds a value before passing it.
+ *
+ * Records rather than a component per row, because a row of a comparison is a label and a few short
+ * values — nothing in it is an element a page composes — and the block has to draw every row against
+ * the same columns, which it cannot check inside rows it was handed whole.
+ */
+export {};

package/dist/components/core/accordion-item/AccordionItem.css

@@ -13,7 +13,7 @@
 }
 
 :where([data-dds-context="marketing"]) .dds-accordionitem .dds-accordionitem__trigger {
-  transition-property: color, outline-color, outline-width;
+  transition-property: outline-color, outline-width;
   align-items: center;
   appearance: none;
   background: none;
@@ -73,10 +73,6 @@
   transition-timing-function: var(--motion-easing-enter);
 }
 
-:where([data-dds-context="marketing"]) .dds-accordionitem .dds-accordionitem__trigger:hover:where(:not(:disabled)) {
-  color: var(--color-fg-muted);
-}
-
 :where([data-dds-context="marketing"]) .dds-accordionitem .dds-accordionitem__trigger:focus-visible {
   outline-color: var(--color-border-focus);
   outline-width: var(--border-width-focus);

package/dist/components/core/background/Background.css

@@ -0,0 +1,92 @@
+/* GENERATED from background.contract.json. Do not edit. */
+
+:where([data-dds-context="marketing"]) .dds-background {
+  align-content: center;
+  display: grid;
+  inline-size: 100%;
+  isolation: isolate;
+  justify-items: center;
+  overflow: hidden;
+  position: relative;
+}
+
+:where([data-dds-context="marketing"]) .dds-background .dds-background__mesh {
+  pointer-events: none;
+  position: absolute;
+}
+
+:where([data-dds-context="marketing"]) .dds-background .dds-background__pool {
+  position: absolute;
+  background-color: var(--color-bg-brand-active);
+  transition-timing-function: var(--motion-easing-standard);
+}
+
+:where([data-dds-context="marketing"]) .dds-background .dds-background__content {
+  box-sizing: border-box;
+  inline-size: 100%;
+  text-align: center;
+  max-inline-size: var(--size-content-max);
+  padding-inline: var(--space-inset-page);
+}
+
+:where([data-dds-context="marketing"]) .dds-background .dds-background__canvas {
+  transition-duration: var(--motion-duration-trail);
+  transition-timing-function: var(--motion-easing-enter);
+}
+
+:where([data-dds-context="marketing"]) .dds-background[data-tone="brand"] {
+  background-color: var(--color-bg-brand);
+}
+
+:where([data-dds-context="marketing"]) .dds-background[data-tone="brand"] .dds-background__canvas {
+  color: var(--color-fg-on-brand);
+  outline-color: var(--color-fg-on-brand);
+}
+
+:where([data-dds-context="marketing"]) .dds-background[data-tone="brand"] .dds-background__content {
+  color: var(--color-fg-on-brand);
+}
+
+:where([data-dds-context="marketing"]) .dds-background[data-tone="brand"] .dds-background__mesh {
+  background-color: var(--color-bg-brand);
+}
+
+:where([data-dds-context="marketing"]) .dds-background[data-tone="dark"] {
+  background-color: var(--color-bg-brand-strong);
+}
+
+:where([data-dds-context="marketing"]) .dds-background[data-tone="dark"] .dds-background__canvas {
+  color: var(--color-bg-brand);
+  outline-color: var(--color-fg-on-brand-strong);
+}
+
+:where([data-dds-context="marketing"]) .dds-background[data-tone="dark"] .dds-background__content {
+  color: var(--color-fg-on-brand-strong);
+}
+
+:where([data-dds-context="marketing"]) .dds-background[data-tone="dark"] .dds-background__mesh {
+  background-color: var(--color-bg-brand-strong);
+}
+
+:where([data-dds-context="marketing"]) .dds-background[data-tone="light"] {
+  background-color: var(--color-bg-page);
+}
+
+:where([data-dds-context="marketing"]) .dds-background[data-tone="light"] .dds-background__canvas {
+  color: var(--color-bg-brand);
+  outline-color: var(--color-bg-brand);
+}
+
+:where([data-dds-context="marketing"]) .dds-background[data-tone="light"] .dds-background__content {
+  color: var(--color-fg-default);
+}
+
+:where([data-dds-context="marketing"]) .dds-background[data-tone="light"] .dds-background__mesh {
+  background-color: var(--color-bg-page);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :where([data-dds-context="marketing"]) .dds-background,
+  :where([data-dds-context="marketing"]) .dds-background * { transition: none !important; }
+}
+

package/dist/components/core/background/Background.d.ts

@@ -0,0 +1,27 @@
+import './Background.css';
+import './background-impl.css';
+import { type BackgroundProps } from './Background.types.js';
+export type { BackgroundProps };
+/**
+ * A ground a section or a block sits on, painted with a pattern.
+ *
+ * The band paints the tone's flat colour, the pattern is laid over it, and the content over that.
+ * The flat colour is what shows before anything has drawn — on a server-rendered page, until
+ * hydration — so the band is finished from the first paint and the pattern only ever adds to it.
+ *
+ * Five patterns, drawn two ways. The halftone is drawn by script on a 2D canvas, through
+ * `useHalftone`, which owns every question of its cost. The aurora, the mesh, the grid and the
+ * rings are fragment shaders on a WebGL canvas, through `useShader` — light with structure
+ * in it, and a grain over it — with the same rules: drawn only while something moves, paused out of
+ * view, held still for a reader who asked for less motion.
+ *
+ * Each shaded pattern has a stylesheet version as well, which is what shows before the shader has
+ * drawn and wherever WebGL cannot run: the root is marked `data-shaded` once the canvas has a frame,
+ * and the stylesheet's paint steps aside. `useSpotlight` and `useOffscreen` serve that version. The
+ * mesh's is the one that needs elements of its own — five pools, each moving on its own loops.
+ *
+ * With nothing to hold it is a layer: it fills its positioned parent behind that parent's own
+ * content, and listens for the pointer on the parent, because the content covers it. That is how a
+ * block draws a pattern under itself without its own layout changing.
+ */
+export declare function Background({ tone, pattern, animated, interactive, children, ...rest }: BackgroundProps): import("react").JSX.Element;

package/dist/components/core/background/Background.js

@@ -0,0 +1,45 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import './Background.css';
+import './background-impl.css';
+import { backgroundDefaults, backgroundParts } from './Background.types.js';
+import { useHalftone } from './use-halftone.js';
+import { useOffscreen } from './use-offscreen.js';
+import { useShader } from './use-shader.js';
+import { useSpotlight } from './use-spotlight.js';
+/**
+ * A ground a section or a block sits on, painted with a pattern.
+ *
+ * The band paints the tone's flat colour, the pattern is laid over it, and the content over that.
+ * The flat colour is what shows before anything has drawn — on a server-rendered page, until
+ * hydration — so the band is finished from the first paint and the pattern only ever adds to it.
+ *
+ * Five patterns, drawn two ways. The halftone is drawn by script on a 2D canvas, through
+ * `useHalftone`, which owns every question of its cost. The aurora, the mesh, the grid and the
+ * rings are fragment shaders on a WebGL canvas, through `useShader` — light with structure
+ * in it, and a grain over it — with the same rules: drawn only while something moves, paused out of
+ * view, held still for a reader who asked for less motion.
+ *
+ * Each shaded pattern has a stylesheet version as well, which is what shows before the shader has
+ * drawn and wherever WebGL cannot run: the root is marked `data-shaded` once the canvas has a frame,
+ * and the stylesheet's paint steps aside. `useSpotlight` and `useOffscreen` serve that version. The
+ * mesh's is the one that needs elements of its own — five pools, each moving on its own loops.
+ *
+ * With nothing to hold it is a layer: it fills its positioned parent behind that parent's own
+ * content, and listens for the pointer on the parent, because the content covers it. That is how a
+ * block draws a pattern under itself without its own layout changing.
+ */
+export function Background({ tone = backgroundDefaults.tone, pattern = backgroundDefaults.pattern, animated = backgroundDefaults.animated, interactive = backgroundDefaults.interactive, children, ...rest }) {
+    // Nothing to hold: a layer under the parent's own content. See above.
+    const layer = children === undefined || children === null || children === false;
+    const [root, canvas] = useHalftone(pattern === 'halftone', interactive, animated, tone, layer);
+    const shaded = useShader(root, pattern === 'halftone' ? undefined : pattern, interactive, animated, tone, layer);
+    // The stylesheet's versions of the patterns answer the pointer from where it is: the grid's lines and
+    // the rings brighten around it, the aurora carries a pool of its light after it, and the mesh's
+    // pools lean towards it.
+    useSpotlight(root, pattern !== 'halftone' && interactive, layer);
+    // The patterns the stylesheet moves at rest wait while the band is off screen; the halftone's
+    // painter has its own observer.
+    useOffscreen(root, pattern !== 'halftone' && animated);
+    return (_jsxs("div", { ...rest, ref: root, className: backgroundParts.root, "data-tone": tone, "data-pattern": pattern, "data-animated": animated ? undefined : 'false', "data-layer": layer || undefined, "aria-hidden": layer || undefined, children: [_jsx("canvas", { ref: pattern === 'halftone' ? canvas : shaded, className: backgroundParts.canvas, "aria-hidden": "true" }, pattern), pattern === 'mesh' ? (_jsx("div", { className: backgroundParts.mesh, "aria-hidden": "true", children: [0, 1, 2, 3, 4].map((at) => (_jsx("span", { className: backgroundParts.pool }, at))) })) : null, layer ? null : _jsx("div", { className: backgroundParts.content, children: children })] }));
+}

package/dist/components/core/background/Background.types.d.ts

@@ -0,0 +1,39 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+export interface BackgroundOwnProps {
+    /**
+     * `dark` — The band the halftone was drawn for: coral dots glowing on color.bg.brand-strong, which is dark in both modes. Reach for it for the band a page opens or closes on, where the glow gives the band a centre
+     * `light` — Coral dots on the page's own ground, for a light page that wants one moment of brand colour without a solid coral band. The glow reads as warmth rather than light, so keep it for a section that is not competing with a dark one nearby
+     * `brand` — The default: the brand's own coral, the ground the mesh was made for and the one a call to action stands on. White dots on it for the halftone. The heading is white too, and the glow rises from the foot of the band towards it, so check the words read on the coral alone — the pattern can only add to what is behind them
+     */
+    tone?: 'dark' | 'light' | 'brand';
+    /**
+     * `halftone` — A grid of dots across the whole band that grow towards a soft glow and settle to a fine screen away from it, over a faint wash of their own ink. The glow's edge wanders from a plain ellipse as it drifts, so it reads as light on a surface rather than a spotlight. The default, and the one that moves most
+     * `aurora` — Curtains of light rising from the band's foot: sheets of the brand's colour swaying and folding, with a ragged crest and fine rays running up through them — light falling through folds rather than pools of colour. Drawn by a shader with a grain over it; before it has drawn, and where it cannot, soft pools of the same colour painted by the stylesheet. At rest the curtains sway over motion.duration.drift; on an interactive band the pointer bends them towards it and brightens them. Reach for it where the halftone would be too busy — an opening band with a picture or a product on it, where dots behind the picture fight it and a wash of light does not
+     * `mesh` — The whole band in the brand's reds, folded into one another like a liquid — the design system's own front page. A noise warped by a noise, so the colours run in ribbons and eddies with a sheen on their crests, turning slowly. Drawn by a shader with a grain over it; before it has drawn, and where it cannot, five blurred pools painted by the stylesheet. On an interactive band the pointer draws the field towards it, as a hand drawn through paint; with `animated` off it rests until the pointer is over the band and flows only while it is. Made for the coral ground, where it is the brand at its loudest; on the dark ground it is red smoke on near-black, on the light one a faint marbling. Reach for it for the one band a page is remembered by, and keep the words on it few and large
+     * `grid` — Hairlines a pitch apart, size.rule-grid.pitch, rising from a soft bloom at the band's foot — the grid PageHeader paints, offered for any band, now lit: a brighter point where two lines cross, and every few lines a short dash of light running along it. Drawn by a shader at up to twice the pixel density, so a hairline stays a hairline; before it has drawn, and where it cannot, the same rules painted by the stylesheet. At rest the rules rise slowly, a pitch over motion.duration.drift; on an interactive band the lines brighten around the pointer. Reach for it where the band should read as deliberate and quiet rather than lit
+     * `rings` — Hairline circles spreading out from the middle of the band's foot at size.rings.pitch, out of a soft bloom there, with arcs of light travelling round each ring at its own pace and direction. Drawn by a shader at up to twice the pixel density; before it has drawn, and where it cannot, the same rings painted by the stylesheet. At rest the rings spread slowly outward, a pitch over motion.duration.drift; on an interactive band they brighten around the pointer. As quiet as the grid, but round: reach for it where the band should feel open and centred rather than ruled — a call to action, a closing band with one thing to say
+     */
+    pattern?: 'halftone' | 'aurora' | 'mesh' | 'grid' | 'rings';
+    /** On by default: every pattern moves slowly at rest, whether or not anybody is pointing at it — the halftone's glow and the aurora's pools drift along the band's foot, the grid's rules rise and the rings spread outward, each over motion.duration.drift. Turn it off for a band that should be still until somebody reaches for it — a band beside a video or an animation of its own, or one a page repeats further down — and the pattern rests where it is. What the pattern does under the pointer is `interactive`, which is set apart from this. */
+    animated?: boolean;
+    /** On by default: the pattern answers a pointer over the band. The halftone's glow follows it, gathers into a smaller pool and parts the dots it crosses, and a click sends a small ripple through them; the aurora sends a pool of its light after it; the grid's rules and the rings brighten around it. Turn it off for a band whose content is itself interactive enough that a moving ground would compete with it — a band of controls, a form — and the pattern ignores the pointer. Touch has no hover, so on a touch screen nothing follows a finger. Whether it moves at rest is `animated`, which is set apart from this. */
+    interactive?: boolean;
+    /** Allowed: any content */
+    children: ReactNode;
+}
+export type BackgroundProps = BackgroundOwnProps & Omit<HTMLAttributes<HTMLDivElement>, 'className' | 'tone' | 'pattern' | 'animated' | 'interactive'>;
+/** The class each part carries. Apply these — do not retype them. */
+export declare const backgroundParts: {
+    readonly root: "dds-background";
+    readonly canvas: "dds-background__canvas";
+    readonly mesh: "dds-background__mesh";
+    readonly pool: "dds-background__pool";
+    readonly content: "dds-background__content";
+};
+/** Generated so defaults cannot drift from the contract. */
+export declare const backgroundDefaults: {
+    readonly tone: "brand";
+    readonly pattern: "halftone";
+    readonly animated: true;
+    readonly interactive: true;
+};

package/dist/components/core/background/Background.types.js

@@ -0,0 +1,11 @@
+// GENERATED from background.contract.json. Do not edit.
+/** The class each part carries. Apply these — do not retype them. */
+export const backgroundParts = {
+    root: 'dds-background',
+    canvas: 'dds-background__canvas',
+    mesh: 'dds-background__mesh',
+    pool: 'dds-background__pool',
+    content: 'dds-background__content',
+};
+/** Generated so defaults cannot drift from the contract. */
+export const backgroundDefaults = { tone: 'brand', pattern: 'halftone', animated: true, interactive: true };