@deriv-com/dds-marketing 0.2.0 → 1.0.1

package/dist/components/blocks/feature-split/FeatureSplit.js

@@ -0,0 +1,38 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from 'react';
+import './FeatureSplit.css';
+import './feature-split-impl.css';
+import '../block-reveal.css';
+import { arriving, useReveal } from '../use-reveal.js';
+import { given } from '../../given.js';
+import { featureSplitDefaults, featureSplitParts, } from './FeatureSplit.types.js';
+/**
+ * A section putting one claim, a line explaining it and a way onward beside a single picture.
+ *
+ * The plainest block this package has, and that is what it is for: a page that has said what
+ * something is needs somewhere to say one more thing about it without opening a list, a grid or a
+ * set of cards.
+ *
+ * A split rather than a stack, because the picture is the other half of the argument — the same
+ * words over a full-width photograph read as a caption, and beside it they read as a claim with
+ * evidence.
+ *
+ * The steps inside the column are carried by each part's own `margin-block-end` rather than by a
+ * gap on the column, because title-to-description and description-to-what-follows are two
+ * different roles that a single gap could only ever be one of. `content` binds `space.gap.none`
+ * to say the absence is deliberate rather than forgotten.
+ *
+ * The source template carried `showDescription` and `showLink` beside the values themselves. Both
+ * are gone: absence is the switch, which is the rule Footer set and `given` exists for. A flag
+ * saying whether to draw a value the caller already decided not to pass is two ways to say one
+ * thing, and they disagree the first time somebody sets only one of them.
+ *
+ * The title carries the section's accessible name through `aria-labelledby`. A `<section>` is only
+ * a region landmark once it has a name.
+ */
+export function FeatureSplit({ ground = featureSplitDefaults.ground, mediaPosition = featureSplitDefaults.mediaPosition, title, description, link, media, }) {
+    const titleId = useId();
+    const [band, revealed] = useReveal();
+    return (_jsx("section", { className: featureSplitParts.root, "data-ground": ground, "data-media-position": mediaPosition, "aria-labelledby": titleId, children: _jsx("div", { className: featureSplitParts.inner, ref: band, "data-revealed": revealed, children: _jsxs("div", { className: featureSplitParts.split, children: [_jsxs("div", { className: featureSplitParts.content, children: [_jsx("h2", { className: featureSplitParts.title, ...arriving(0), id: titleId, children: title }), given(description) ? (_jsx("p", { className: featureSplitParts.description, ...arriving(1), children: description })) : null, link ? (_jsx("div", { className: featureSplitParts.link, ...arriving(2), children: link })) : null] }), _jsx("div", { className: featureSplitParts.media, ...arriving(3), "aria-hidden": "true", children: media })] }) }) }));
+}

package/dist/components/blocks/feature-split/FeatureSplit.types.d.ts

@@ -0,0 +1,39 @@
+import type { ReactNode } from 'react';
+export interface FeatureSplitOwnProps {
+    /**
+     * `page` — The default, and the page's own white. A section that has nothing to separate itself from what is above it — most of them — and the ground a reader is already on
+     * `subtle` — A quiet step off the page, for a band that wants to read as its own section without changing the page's voice. The one to reach for first when two sections need telling apart. Painted as the band's tint laid over the page's own ground, so it is the same grey whatever is behind the section — in dark mode the tint alone took on whatever it was set against, and on a light surface it was light ink on white.
+     * `strong` — `color.bg.brand-strong`, the dark band. It stops the page rather than dividing it, so it is for a section a reader should arrive at — and one per page is usually one more than enough
+     */
+    ground?: 'page' | 'subtle' | 'strong';
+    /**
+     * `end` — The default. The claim is read first, which is the order the section argues in
+     * `start` — The second of two on a page, so the two do not read as one column with a picture stuck to one side
+     */
+    mediaPosition?: 'end' | 'start';
+    /** Always. The one claim the section makes, in the fewest words that say it */
+    title: string;
+    /** The lines under the title that say what the claim above means, for a reader not convinced by the claim alone. Two sentences is the normal length here and what the section is sized around — one is usually the title restated, and the column is wide enough to carry more than that. */
+    description?: string;
+    /** The section has somewhere to send a reader who wants more than it says — the page this one is a summary of. "Learn more" is this site's wording for it, and using the same three words everywhere is what lets a reader stop reading them: a link that renames itself per section is a link somebody has to read before they know it is the way onward. */
+    link?: ReactNode;
+    /** Always. The picture that sits beside the claim — a screenshot, a photograph, an illustration. The section is a split and the picture is one half of it: without one the claim runs to a measure it was never sized for. */
+    media: ReactNode;
+}
+export type FeatureSplitProps = FeatureSplitOwnProps;
+/** The class each part carries. Apply these — do not retype them. */
+export declare const featureSplitParts: {
+    readonly root: "dds-featuresplit";
+    readonly inner: "dds-featuresplit__inner";
+    readonly split: "dds-featuresplit__split";
+    readonly content: "dds-featuresplit__content";
+    readonly title: "dds-featuresplit__title";
+    readonly description: "dds-featuresplit__description";
+    readonly link: "dds-featuresplit__link";
+    readonly media: "dds-featuresplit__media";
+};
+/** Generated so defaults cannot drift from the contract. */
+export declare const featureSplitDefaults: {
+    readonly ground: "page";
+    readonly mediaPosition: "end";
+};

package/dist/components/blocks/feature-split/FeatureSplit.types.js

@@ -0,0 +1,14 @@
+// GENERATED from feature-split.contract.json. Do not edit.
+/** The class each part carries. Apply these — do not retype them. */
+export const featureSplitParts = {
+    root: 'dds-featuresplit',
+    inner: 'dds-featuresplit__inner',
+    split: 'dds-featuresplit__split',
+    content: 'dds-featuresplit__content',
+    title: 'dds-featuresplit__title',
+    description: 'dds-featuresplit__description',
+    link: 'dds-featuresplit__link',
+    media: 'dds-featuresplit__media',
+};
+/** Generated so defaults cannot drift from the contract. */
+export const featureSplitDefaults = { ground: 'page', mediaPosition: 'end' };

package/dist/components/blocks/feature-split/feature-split-impl.css

@@ -0,0 +1,83 @@
+/*
+ * Scoped to this package, like the generated sheet beside it.
+ *
+ * `:where([data-dds-context="marketing"])` confines these rules without contributing specificity,
+ * so each is decided against the generated rule on its own terms.
+ */
+
+/*
+ * A title with nothing under it carries no step under it.
+ *
+ * The steps inside the column sit on each part's own `margin-block-end`, because title-to-
+ * description and description-to-what-follows are two different roles. The cost is a trailing
+ * margin: with both the description and the link absent, the title is the last child and its step
+ * is measured against nothing.
+ *
+ * `:last-child` is the condition itself rather than a prop standing in for it — two parts can
+ * follow the title, and asking the DOM which is last is the question with one answer.
+ */
+:where([data-dds-context="marketing"]) .dds-featuresplit .dds-featuresplit__title:last-child,
+:where([data-dds-context="marketing"]) .dds-featuresplit .dds-featuresplit__description:last-child {
+  margin-block-end: 0;
+}
+
+/*
+ * One column below the fold, and the claim leads it.
+ *
+ * The row direction is the contract's to say — it varies by a styling axis, which is what
+ * `structure[]` is for, and the generated sheet carries both values. What is left here is the
+ * fold, which a binding cannot express: `structure` has no width to attach a rule to.
+ *
+ * Written a class deeper than it looks so it wins. The generated rule is
+ * `.dds-featuresplit[data-media-position="end"] .dds-featuresplit__split` — a class, an attribute
+ * and a class — and a plainer selector here would lose to it however late it is loaded. That is
+ * the fault FeatureBullets shipped with for an afternoon: the split stayed a column at every
+ * width, and a picture given `flex: 1 1 0` on the block axis collapsed to nothing.
+ *
+ * `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 (max-width: 47.9375rem) {
+  :where([data-dds-context="marketing"])
+    .dds-featuresplit[data-media-position]
+    .dds-featuresplit__split {
+    flex-direction: column;
+  }
+}
+
+/*
+ * At full width the claim takes a measure and the picture takes the rest.
+ *
+ * The reference design writes 540px against its 1280, which is a number only right at one width.
+ * A share holds everywhere, and the picture growing into whatever is left is what keeps the square
+ * square without either half naming a height.
+ */
+@container (min-width: 48rem) {
+  :where([data-dds-context="marketing"]) .dds-featuresplit .dds-featuresplit__split {
+    align-items: center;
+  }
+
+  :where([data-dds-context="marketing"]) .dds-featuresplit .dds-featuresplit__content {
+    flex: 0 0 45%;
+  }
+
+  :where([data-dds-context="marketing"]) .dds-featuresplit .dds-featuresplit__media {
+    flex: 1 1 0;
+  }
+}
+
+/*
+ * Whatever the page put in the picture fills the square.
+ *
+ * The slot takes a node rather than a source, so what arrives is the page's element and this
+ * cannot know whether it carries dimensions. `cover` rather than `contain`, because the slot is a
+ * square the section decided on and a picture letterboxed inside it would show the ground through
+ * a corner the section rounded.
+ */
+:where([data-dds-context="marketing"]) .dds-featuresplit .dds-featuresplit__media > *,
+:where([data-dds-context="marketing"]) .dds-featuresplit .dds-featuresplit__media img {
+  block-size: 100%;
+  display: block;
+  inline-size: 100%;
+  object-fit: cover;
+}

package/dist/components/blocks/landing-hero/LandingHero.css

@@ -0,0 +1,85 @@
+/* GENERATED from landinghero.contract.json. Do not edit. */
+
+:where([data-dds-context="marketing"]) .dds-landinghero {
+  box-sizing: border-box;
+  container-type: inline-size;
+  display: flex;
+  inline-size: 100%;
+  justify-content: center;
+  overflow: hidden;
+  position: relative;
+  background-color: var(--color-bg-brand-strong);
+  color: var(--color-fg-on-brand-strong);
+}
+
+:where([data-dds-context="marketing"]) .dds-landinghero .dds-landinghero__inner {
+  box-sizing: border-box;
+  display: flex;
+  inline-size: 100%;
+  min-inline-size: 0;
+  position: relative;
+  max-inline-size: var(--size-content-max);
+  padding-block: var(--space-section-default);
+  padding-inline: var(--space-inset-page);
+}
+
+:where([data-dds-context="marketing"]) .dds-landinghero .dds-landinghero__content {
+  display: flex;
+  flex-direction: column;
+  inline-size: 100%;
+  min-inline-size: 0;
+  row-gap: var(--space-heading-description-actions);
+}
+
+:where([data-dds-context="marketing"]) .dds-landinghero .dds-landinghero__text {
+  display: flex;
+  flex-direction: column;
+  min-inline-size: 0;
+  row-gap: var(--space-gap-none);
+}
+
+:where([data-dds-context="marketing"]) .dds-landinghero .dds-landinghero__eyebrow {
+  margin-block: 0;
+  font-family: var(--font-eyebrow-lg-family);
+  font-size: var(--font-eyebrow-lg-size);
+  font-weight: var(--font-eyebrow-lg-weight);
+  letter-spacing: var(--font-eyebrow-lg-letter-spacing);
+  line-height: var(--font-eyebrow-lg-line-height);
+  margin-block-end: var(--space-heading-eyebrow-title);
+}
+
+:where([data-dds-context="marketing"]) .dds-landinghero .dds-landinghero__title {
+  margin-block: 0;
+  text-wrap: balance;
+  font-family: var(--font-h1-family);
+  font-size: var(--font-h1-size);
+  font-weight: var(--font-h1-weight);
+  letter-spacing: var(--font-h1-letter-spacing);
+  line-height: var(--font-h1-line-height);
+  margin-block-end: var(--space-heading-title-description);
+}
+
+:where([data-dds-context="marketing"]) .dds-landinghero .dds-landinghero__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-hero-description);
+}
+
+:where([data-dds-context="marketing"]) .dds-landinghero .dds-landinghero__actions {
+  display: flex;
+  flex-wrap: wrap;
+  column-gap: var(--space-actions-gap);
+  row-gap: var(--space-actions-gap);
+}
+
+:where([data-dds-context="marketing"]) .dds-landinghero .dds-landinghero__media {
+  min-inline-size: 0;
+  position: relative;
+  aspect-ratio: var(--aspect-portrait);
+  border-radius: var(--radius-none);
+}
+

package/dist/components/blocks/landing-hero/LandingHero.d.ts

@@ -0,0 +1,41 @@
+import './LandingHero.css';
+import './landing-hero-impl.css';
+import '../block-reveal.css';
+import { type LandingHeroProps } from './LandingHero.types.js';
+export type { LandingHeroProps };
+/**
+ * The band that opens a marketing page.
+ *
+ * The landing tier's band, and one of three. Which band a page opens with follows from where the
+ * page sits rather than from a prop: a product page takes ProductHero and a legal page PageHeader.
+ * Separate components rather than one with a switch, so a page cannot be given a tier it is not.
+ *
+ * One column, read down: what the page is about, then what a reader can do about it. The eyebrow,
+ * the title and the description are strings the page passes; the calls to action and both visuals
+ * are nodes it composes. Nothing here writes copy or decides a destination — the same stance
+ * Footer takes at the other end of the page.
+ *
+ * `root` spans the full width and `inner` holds the measure, which is the arrangement Footer uses
+ * and for the same reason: a ground stopping at the measure would read as a wide card at the top of
+ * the page rather than as the page beginning. The ground is dark and the ink is set once on the
+ * root, inherited by the eyebrow, the title and the description alike — this package's rule about a
+ * section that paints a ground, and the reason none of the three names a colour of its own.
+ *
+ * The steps inside the text block are carried by each part's own `margin-block-end` rather than by
+ * a gap on the block. Eyebrow-to-title and title-to-description are two different roles that happen
+ * to agree at full width and part company on a phone — twelve against sixteen — so a single gap
+ * could only ever have been one of them. `text` binds `space.gap.none` to say the absence is
+ * deliberate rather than forgotten.
+ *
+ * `media` is a child of the band rather than of the column. The visual is
+ * placed against the band's own edge, which an element nested inside the measure could not reach.
+ * The title carries the band's accessible name through `aria-labelledby`. A `<section>` is only a
+ * region landmark once it has a name, and a hero that announced itself as an unnamed section is one
+ * more thing a screen reader user walks through rather than a place they can skip to. The id is
+ * `useId` rather than a prop, because a page should not have to invent one to get a landmark.
+ *
+ * Both visual slots are hidden from assistive technology. What the band says is the
+ * title and the description; a photograph that carried meaning they do not would be a hero that
+ * reads as empty to anyone who cannot see it, and the contract says so.
+ */
+export declare function LandingHero({ eyebrow, title, headingLevel, description, actions, media, backgroundImage, }: LandingHeroProps): import("react").JSX.Element;

package/dist/components/blocks/landing-hero/LandingHero.js

@@ -0,0 +1,54 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from 'react';
+import './LandingHero.css';
+import './landing-hero-impl.css';
+import '../block-reveal.css';
+import { arriving, useReveal } from '../use-reveal.js';
+import { given } from '../../given.js';
+import { landingHeroDefaults, landingHeroParts, } from './LandingHero.types.js';
+/**
+ * The band that opens a marketing page.
+ *
+ * The landing tier's band, and one of three. Which band a page opens with follows from where the
+ * page sits rather than from a prop: a product page takes ProductHero and a legal page PageHeader.
+ * Separate components rather than one with a switch, so a page cannot be given a tier it is not.
+ *
+ * One column, read down: what the page is about, then what a reader can do about it. The eyebrow,
+ * the title and the description are strings the page passes; the calls to action and both visuals
+ * are nodes it composes. Nothing here writes copy or decides a destination — the same stance
+ * Footer takes at the other end of the page.
+ *
+ * `root` spans the full width and `inner` holds the measure, which is the arrangement Footer uses
+ * and for the same reason: a ground stopping at the measure would read as a wide card at the top of
+ * the page rather than as the page beginning. The ground is dark and the ink is set once on the
+ * root, inherited by the eyebrow, the title and the description alike — this package's rule about a
+ * section that paints a ground, and the reason none of the three names a colour of its own.
+ *
+ * The steps inside the text block are carried by each part's own `margin-block-end` rather than by
+ * a gap on the block. Eyebrow-to-title and title-to-description are two different roles that happen
+ * to agree at full width and part company on a phone — twelve against sixteen — so a single gap
+ * could only ever have been one of them. `text` binds `space.gap.none` to say the absence is
+ * deliberate rather than forgotten.
+ *
+ * `media` is a child of the band rather than of the column. The visual is
+ * placed against the band's own edge, which an element nested inside the measure could not reach.
+ * The title carries the band's accessible name through `aria-labelledby`. A `<section>` is only a
+ * region landmark once it has a name, and a hero that announced itself as an unnamed section is one
+ * more thing a screen reader user walks through rather than a place they can skip to. The id is
+ * `useId` rather than a prop, because a page should not have to invent one to get a landmark.
+ *
+ * Both visual slots are hidden from assistive technology. What the band says is the
+ * title and the description; a photograph that carried meaning they do not would be a hero that
+ * reads as empty to anyone who cannot see it, and the contract says so.
+ */
+export function LandingHero({ eyebrow, title, headingLevel = landingHeroDefaults.headingLevel, description, actions, media, backgroundImage, }) {
+    const titleId = useId();
+    const [band, revealed] = useReveal();
+    const Title = headingLevel === 'h2' ? 'h2' : 'h1';
+    return (_jsxs("section", { className: landingHeroParts.root, "aria-labelledby": titleId, 
+        /* The one inline style here, and it is a value rather than a decision: which photograph,
+           supplied by the page. Everything about how it is drawn — the cover fit and the position — is in the stylesheet, where it can be reasoned about. A background shorthand
+           would have reset those four properties every time the page passed an image. */
+        style: given(backgroundImage) ? { backgroundImage: `url(${backgroundImage})` } : undefined, children: [media ? (_jsx("div", { className: landingHeroParts.media, "aria-hidden": "true", children: media })) : null, _jsx("div", { className: landingHeroParts.inner, ref: band, "data-revealed": revealed, children: _jsxs("div", { className: landingHeroParts.content, children: [_jsxs("div", { className: landingHeroParts.text, children: [given(eyebrow) ? (_jsx("p", { className: landingHeroParts.eyebrow, ...arriving(0), children: eyebrow })) : null, _jsx(Title, { className: landingHeroParts.title, ...arriving(1), id: titleId, children: title }), given(description) ? (_jsx("p", { className: landingHeroParts.description, ...arriving(2), children: description })) : null] }), actions ? (_jsx("div", { className: landingHeroParts.actions, ...arriving(3), children: actions })) : null] }) })] }));
+}

package/dist/components/blocks/landing-hero/LandingHero.types.d.ts

@@ -0,0 +1,37 @@
+import type { ReactNode } from 'react';
+export interface LandingHeroOwnProps {
+    /** A word or two placing the page before its title names it — a product family, a market, a campaign */
+    eyebrow?: string;
+    /** Always. The one thing the page is about, in the fewest words that still say it. It is the page's leading heading and the band's accessible name */
+    title: string;
+    /**
+     * `h1` — The default, and correct whenever the hero opens the page — which is what a hero is for
+     * `h2` — The rare page that already carries its `h1` elsewhere, and would otherwise have two
+     */
+    headingLevel?: 'h1' | 'h2';
+    /** The sentence under the title that says what the claim above it means, for the reader who is not yet convinced by the claim alone */
+    description?: string;
+    /** The one or two things the page wants a reader to do. Composed by the page rather than described to this component, so a call to action is the same Button here as anywhere else on the site */
+    actions?: ReactNode;
+    /** The band's visual — the subject standing beside the claim, cropped by the band's own inline edge rather than floating clear of it */
+    media?: ReactNode;
+    /** A photograph filling the whole band. It is shown as it is — nothing is painted over it, so choose one already dark enough that the title reads on it */
+    backgroundImage?: string;
+}
+export type LandingHeroProps = LandingHeroOwnProps;
+/** The class each part carries. Apply these — do not retype them. */
+export declare const landingHeroParts: {
+    readonly root: "dds-landinghero";
+    readonly inner: "dds-landinghero__inner";
+    readonly content: "dds-landinghero__content";
+    readonly text: "dds-landinghero__text";
+    readonly eyebrow: "dds-landinghero__eyebrow";
+    readonly title: "dds-landinghero__title";
+    readonly description: "dds-landinghero__description";
+    readonly actions: "dds-landinghero__actions";
+    readonly media: "dds-landinghero__media";
+};
+/** Generated so defaults cannot drift from the contract. */
+export declare const landingHeroDefaults: {
+    readonly headingLevel: "h1";
+};

package/dist/components/blocks/landing-hero/LandingHero.types.js

@@ -0,0 +1,15 @@
+// GENERATED from landing-hero.contract.json. Do not edit.
+/** The class each part carries. Apply these — do not retype them. */
+export const landingHeroParts = {
+    root: 'dds-landinghero',
+    inner: 'dds-landinghero__inner',
+    content: 'dds-landinghero__content',
+    text: 'dds-landinghero__text',
+    eyebrow: 'dds-landinghero__eyebrow',
+    title: 'dds-landinghero__title',
+    description: 'dds-landinghero__description',
+    actions: 'dds-landinghero__actions',
+    media: 'dds-landinghero__media',
+};
+/** Generated so defaults cannot drift from the contract. */
+export const landingHeroDefaults = { headingLevel: 'h1' };