@deriv-com/dds-marketing 1.0.2 → 1.1.0

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

@@ -0,0 +1,155 @@
+/*
+ * Scoped to this package, like the generated sheet beside it.
+ */
+
+/*
+ * The frame's fill: the stack the table's pinned column paints.
+ *
+ * Table's pinned first column cannot be see-through — the values slide under it — so it paints a
+ * ground of its own, and that ground is a fixed stack: the page as an opaque floor, the grey band
+ * over it and a raised card over that. In light all three are opaque and the stack is white; in
+ * dark the band and the card are each white at six, so the stack is a lifted grey. The frame
+ * paints the same stack, which is what makes the pinned cells the frame's own colour on every
+ * ground and in both themes rather than a strip of a slightly different grey down the table.
+ *
+ * The floor is the contract's binding; the two layers over it are here because a binding holds
+ * one layer and this is two. Listed topmost first, as Table lists them.
+ */
+:where([data-dds-context="marketing"]) .dds-datatable .dds-datatable__frame {
+  background-image:
+    linear-gradient(var(--color-bg-surface-card-raised), var(--color-bg-surface-card-raised)),
+    linear-gradient(var(--color-bg-band-subtle), var(--color-bg-band-subtle));
+}
+
+/*
+ * A part waiting for its state is out of the layout, not merely empty.
+ *
+ * The empty line and the pager are always in the markup and `hidden` until they are wanted. The
+ * browser's own `[hidden]` is `display: none` at the lowest weight there is, and the generated
+ * sheet's `display: flex` on the pager beats it — so it is said again here, a class deeper.
+ */
+:where([data-dds-context="marketing"]) .dds-datatable .dds-datatable__empty[hidden],
+:where([data-dds-context="marketing"]) .dds-datatable .dds-datatable__pager[hidden] {
+  display: none;
+}
+
+/*
+ * The table's name is the heading's, already on screen.
+ *
+ * Table names its grid and its scroller from its caption and from nothing else, so the heading's
+ * words are handed to it as one — and clipped here rather than drawn a second time an inch under
+ * the first. Clipped, not hidden: `display: none` would take the name out of the accessibility
+ * tree with the pixels, which is the half that was wanted.
+ *
+ * SegmentedControlItem's recipe: `clip-path: inset(50%)` clips the caption to nothing without the
+ * one-pixel box of the older one, which needs a raw dimension no token covers, and `position:
+ * absolute` takes it out of the flow so the grid starts at the frame's rule. The frame is the
+ * positioned box it is held in — see its `position` in the contract — so it cannot stray to the
+ * foot of the document and widen it.
+ */
+:where([data-dds-context="marketing"]) .dds-datatable .dds-table .dds-table__caption {
+  clip-path: inset(50%);
+  padding: 0;
+  position: absolute;
+  white-space: nowrap;
+}
+
+/*
+ * The scroller's focus ring, drawn inside its edge.
+ *
+ * The table runs the frame's full width and the frame clips to keep its corner, so a ring drawn
+ * outside the scroller — Table's own — would be cut off down both sides, which is a ring a keyboard
+ * reader sees only half of. Pulled in by its own width, it is whole.
+ */
+:where([data-dds-context="marketing"]) .dds-datatable .dds-table {
+  outline-offset: calc(-1 * var(--border-width-focus));
+}
+
+/*
+ * Values on one line, so the table is as wide as its values and scrolls.
+ *
+ * A specification table's values are short — "1:1000", "-3.00", "Mon–Fri 00:00–21:00" — and one
+ * broken over two lines is one a reader misreads down the column. Held to a line, the columns take
+ * the room their values need, and the scroller takes the rest: the reference's `max-content` table.
+ *
+ * Written against the cell's `data-overflow` so it outweighs TableCell's own `wrap` rule, which
+ * would otherwise tie with it and win on order — TableCell's sheet arrives after this one.
+ */
+:where([data-dds-context="marketing"]) .dds-datatable .dds-tablecell[data-overflow] {
+  white-space: nowrap;
+}
+
+/*
+ * The row's name: a row header that reads as the row's name rather than as a column's.
+ *
+ * TableHeaderCell is drawn for the header row — muted, ranged to the foot of the cell, at a
+ * label's tight leading — and two of those are wrong down the side of the table. The name is the
+ * strongest thing in its row, so it takes the default ink; and it sits at the top of the row at the
+ * values' leading, as the values beside it do, so the first lines share a baseline.
+ *
+ * It keeps the header's single line. Allowed to wrap, the one column that could was the one the
+ * table squeezed whenever it nearly fitted — "Boom 1000 Index" over three lines beside values with
+ * room to spare — so the name holds its width and the values scroll under it instead.
+ */
+:where([data-dds-context="marketing"]) .dds-datatable .dds-tableheadercell[scope='row'] {
+  color: var(--color-fg-default);
+  line-height: var(--font-body-sm-line-height);
+  vertical-align: top;
+}
+
+/*
+ * From the fold, the heading group is centred over the table, the small print centred under it,
+ * and the pages move to the end edge.
+ *
+ * Stats' rule and its reason for the header: content stacked under a heading takes a centred
+ * heading, and the header and its line are capped narrower than the column, so `margin-inline:
+ * auto` is what centres those boxes rather than their words inside a box left at the start edge.
+ * The note under the table follows the reference, centred under the frame. The pages are centred
+ * on a phone, where they are the width of the frame, and go to the end edge beside nothing once
+ * there is room — the reference's footer.
+ *
+ * `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-datatable .dds-datatable__header {
+    align-items: center;
+    margin-inline: auto;
+    text-align: center;
+  }
+
+  :where([data-dds-context="marketing"]) .dds-datatable .dds-datatable__description {
+    margin-inline: auto;
+  }
+
+  :where([data-dds-context="marketing"]) .dds-datatable .dds-datatable__pager {
+    justify-content: flex-end;
+  }
+
+  /* The small print centres under the table with the heading over it; on a phone both start at the edge. */
+  :where([data-dds-context="marketing"]) .dds-datatable .dds-datatable__footnote {
+    margin-inline: auto;
+    text-align: center;
+  }
+}
+
+/*
+ * A heading with no line under it closes up, Stats' way: its bound step is the distance to the
+ * line, and with nothing there it would only add to the step from the header to the table.
+ */
+:where([data-dds-context="marketing"]) .dds-datatable .dds-datatable__title:last-child {
+  margin-block-end: 0;
+}
+
+/*
+ * On a phone the search takes the row, as size.data-table.search says: the cap is for the fold,
+ * where the search shares its row with the count. Below it the count wraps underneath, and a search
+ * stopped short of the edge is room thrown away on the narrowest screen.
+ *
+ * `47.9375rem` is the last width below the fold, LogoRows' bound.
+ */
+@container (max-width: 47.9375rem) {
+  :where([data-dds-context="marketing"]) .dds-datatable .dds-datatable__search {
+    max-inline-size: none;
+  }
+}

package/dist/components/blocks/download-banner/DownloadBanner.css

@@ -0,0 +1,228 @@
+/* GENERATED from downloadbanner.contract.json. Do not edit. */
+
+:where([data-dds-context="marketing"]) .dds-downloadbanner {
+  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-downloadbanner .dds-downloadbanner__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);
+}
+
+:where([data-dds-context="marketing"]) .dds-downloadbanner .dds-downloadbanner__card {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  min-inline-size: 0;
+  border-radius: var(--radius-container);
+  column-gap: var(--space-heading-content);
+  padding-block: var(--space-inset-card);
+  padding-inline: var(--space-inset-card);
+  row-gap: var(--space-heading-content);
+}
+
+:where([data-dds-context="marketing"]) .dds-downloadbanner .dds-downloadbanner__lead {
+  align-items: center;
+  display: flex;
+  min-inline-size: 0;
+  column-gap: var(--space-gap-xl);
+}
+
+:where([data-dds-context="marketing"]) .dds-downloadbanner .dds-downloadbanner__qr-tile {
+  display: none;
+  flex-shrink: 0;
+  background-color: var(--color-bg-surface-card-light-raised);
+  border-radius: var(--radius-container-item);
+  padding-block: var(--space-inset-sm);
+  padding-inline: var(--space-inset-sm);
+}
+
+:where([data-dds-context="marketing"]) .dds-downloadbanner .dds-downloadbanner__qr {
+  display: block;
+  object-fit: cover;
+  block-size: var(--size-download-banner-qr);
+  border-radius: var(--radius-subtle);
+  inline-size: var(--size-download-banner-qr);
+}
+
+:where([data-dds-context="marketing"]) .dds-downloadbanner .dds-downloadbanner__text {
+  display: flex;
+  flex-direction: column;
+  min-inline-size: 0;
+  row-gap: var(--space-gap-none);
+}
+
+:where([data-dds-context="marketing"]) .dds-downloadbanner .dds-downloadbanner__qr-label {
+  display: none;
+  margin-block: 0;
+  font-family: var(--font-body-lg-family);
+  font-size: var(--font-body-lg-size);
+  font-weight: var(--font-body-lg-weight);
+  letter-spacing: var(--font-body-lg-letter-spacing);
+  line-height: var(--font-body-lg-line-height);
+  margin-block-end: var(--space-heading-eyebrow-title);
+}
+
+:where([data-dds-context="marketing"]) .dds-downloadbanner .dds-downloadbanner__eyebrow {
+  margin: 0;
+  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);
+  margin-block-end: var(--space-heading-eyebrow-title);
+}
+
+:where([data-dds-context="marketing"]) .dds-downloadbanner .dds-downloadbanner__title {
+  margin-block: 0;
+  text-wrap: balance;
+  font-family: var(--font-h3-family);
+  font-size: var(--font-h3-size);
+  font-weight: var(--font-h3-weight);
+  letter-spacing: var(--font-h3-letter-spacing);
+  line-height: var(--font-h3-line-height);
+}
+
+:where([data-dds-context="marketing"]) .dds-downloadbanner .dds-downloadbanner__description {
+  margin: 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);
+  margin-block-start: var(--space-heading-title-description-compact);
+  max-inline-size: var(--size-measure-description);
+}
+
+:where([data-dds-context="marketing"]) .dds-downloadbanner .dds-downloadbanner__disclaimer {
+  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);
+  margin-block-start: var(--space-heading-title-description-compact);
+  max-inline-size: var(--size-measure-description);
+}
+
+:where([data-dds-context="marketing"]) .dds-downloadbanner .dds-downloadbanner__badges {
+  display: grid;
+  list-style: none;
+  margin: 0;
+  min-inline-size: 0;
+  padding: 0;
+  column-gap: var(--space-actions-gap);
+  row-gap: var(--space-actions-gap);
+}
+
+:where([data-dds-context="marketing"]) .dds-downloadbanner .dds-downloadbanner__badge {
+  display: flex;
+  min-inline-size: 0;
+  min-block-size: var(--size-target-min);
+}
+
+:where([data-dds-context="marketing"]) .dds-downloadbanner .dds-downloadbanner__badge-link {
+  transition-property: outline-color, outline-width, translate;
+  align-items: center;
+  box-sizing: border-box;
+  display: flex;
+  justify-content: center;
+  max-inline-size: 100%;
+  outline-style: solid;
+  background-color: var(--color-bg-store-badge);
+  block-size: var(--size-control-lg);
+  border-radius: var(--radius-subtle);
+  inline-size: var(--size-download-banner-badge);
+  outline-width: var(--border-width-none);
+  padding-block: var(--space-gap-xs);
+  padding-inline: var(--space-inset-sm);
+  transition-duration: var(--motion-duration-normal);
+  transition-timing-function: var(--motion-easing-standard);
+}
+
+:where([data-dds-context="marketing"]) .dds-downloadbanner .dds-downloadbanner__mark {
+  block-size: 100%;
+  display: block;
+  inline-size: 100%;
+  max-block-size: var(--size-control-md);
+}
+
+:where([data-dds-context="marketing"]) .dds-downloadbanner .dds-downloadbanner__media {
+  display: flex;
+  justify-content: center;
+  overflow: clip;
+  border-start-end-radius: var(--radius-container);
+  border-start-start-radius: var(--radius-container);
+  inline-size: var(--size-download-banner-media);
+}
+
+:where([data-dds-context="marketing"]) .dds-downloadbanner .dds-downloadbanner__badge-link:hover {
+  translate: var(--motion-translate-hover);
+}
+
+:where([data-dds-context="marketing"]) .dds-downloadbanner .dds-downloadbanner__badge-link:focus-visible {
+  outline-color: var(--color-border-focus);
+  outline-width: var(--border-width-focus);
+}
+
+:where([data-dds-context="marketing"]) .dds-downloadbanner[data-ground="page"] {
+  background-color: var(--color-bg-page);
+  color: var(--color-fg-default);
+}
+
+:where([data-dds-context="marketing"]) .dds-downloadbanner[data-ground="page"] .dds-downloadbanner__card {
+  background-color: var(--color-bg-surface);
+}
+
+:where([data-dds-context="marketing"]) .dds-downloadbanner[data-ground="page"] .dds-downloadbanner__disclaimer {
+  color: var(--color-fg-muted);
+}
+
+:where([data-dds-context="marketing"]) .dds-downloadbanner[data-ground="strong"] {
+  background-color: var(--color-bg-brand-strong);
+  color: var(--color-fg-on-brand-strong);
+}
+
+:where([data-dds-context="marketing"]) .dds-downloadbanner[data-ground="strong"] .dds-downloadbanner__card {
+  background-color: var(--color-bg-surface-card-strong);
+  color: var(--color-fg-on-brand-strong);
+}
+
+:where([data-dds-context="marketing"]) .dds-downloadbanner[data-ground="strong"] .dds-downloadbanner__disclaimer {
+  color: var(--color-fg-muted-inverse);
+}
+
+:where([data-dds-context="marketing"]) .dds-downloadbanner[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-downloadbanner[data-ground="subtle"] .dds-downloadbanner__card {
+  background-color: var(--color-bg-surface-card-raised);
+}
+
+:where([data-dds-context="marketing"]) .dds-downloadbanner[data-ground="subtle"] .dds-downloadbanner__disclaimer {
+  color: var(--color-fg-muted);
+}
+
+:where([data-dds-context="marketing"]) .dds-downloadbanner[data-ground="strong"] .dds-downloadbanner__badge-link:focus-visible {
+  outline-color: var(--color-border-focus-on-brand-strong);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :where([data-dds-context="marketing"]) .dds-downloadbanner,
+  :where([data-dds-context="marketing"]) .dds-downloadbanner * { transition: none !important; }
+}
+

package/dist/components/blocks/download-banner/DownloadBanner.d.ts

@@ -0,0 +1,28 @@
+import './DownloadBanner.css';
+import './download-banner-impl.css';
+import '../block-reveal.css';
+import { type DownloadBannerProps } from './DownloadBanner.types.js';
+export type { DownloadBannerProps };
+/**
+ * A card promoting the app's downloads — the reference site's DownloadBanner.
+ *
+ * A heading and the stores' badges, and from the fold a QR code beside the heading with a line
+ * telling the reader to scan it. On a phone the code and its line are not drawn: the reader is
+ * already holding the device the code would open on, so the heading stands alone over the badges,
+ * two to a row. The reference swapped in a second heading there; this keeps the one, so the region
+ * is named the same at every width.
+ *
+ * The badges are records rather than elements: a platform and a link. The component picks the
+ * artwork from the platform, so a page cannot hand over a redrawn or outdated store badge, and names
+ * each link by the words its artwork carries unless the record gives a label of its own.
+ *
+ * Two ways to draw the card. The standard card takes the ground's fill. The featured card is for a
+ * page promoting an app: the brand's coral, with a Background pattern drawn inside it as a layer
+ * under its content — the aurora unless the page names the mesh — laid out as a split, the app's
+ * name, the heading and the badges with the code beside them on one side and the app's own image on
+ * the other, rising out of the card. Its words are white, and the pattern answers the pointer.
+ *
+ * It arrives the way every block does: the code, then the words, then the badges. `'use client'`
+ * for that and for `useId`, which names the region by its heading.
+ */
+export declare function DownloadBanner({ ground, variant, pattern, eyebrow, media, title, description, badges, qr, disclaimer, }: DownloadBannerProps): import("react").JSX.Element;

package/dist/components/blocks/download-banner/DownloadBanner.js

@@ -0,0 +1,75 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from 'react';
+import { AndroidApkFillColoredIcon, AppleAppStoreFillColoredIcon, AppleDmgFillColoredIcon, AppleMacAppStoreFillColoredIcon, GooglePlayFillColoredIcon, HuaweiAppGalleryFillColoredIcon, LinuxFillColoredIcon, WebBrowserFillColoredIcon, WindowsExeFillColoredIcon, WindowsStoreFillColoredIcon, } from '@deriv-com/quill-icons-web';
+import './DownloadBanner.css';
+import './download-banner-impl.css';
+import '../block-reveal.css';
+import { Background } from '../../core/background/Background.js';
+import { given } from '../../given.js';
+import { arriving, useReveal } from '../use-reveal.js';
+import { downloadBannerDefaults, downloadBannerParts } from './DownloadBanner.types.js';
+/**
+ * Each platform's artwork, and the words that artwork carries.
+ *
+ * The artwork is the store's own badge from Quill's app-store set, never redrawn here: a store's
+ * badge is a trademark with rules about how it is shown, and the set is where those rules were
+ * already kept. The filled, coloured form, because it carries its own black ground — the outline
+ * form is dark ink with no ground, which vanishes on the dark band and in dark mode.
+ *
+ * The words are what the artwork says, so the name a screen reader hears and the name a speech-input
+ * user says are the ones on the badge.
+ */
+const BADGES = {
+    'app-store': { Mark: AppleAppStoreFillColoredIcon, name: 'Download on the App Store' },
+    'google-play': { Mark: GooglePlayFillColoredIcon, name: 'Get it on Google Play' },
+    'app-gallery': { Mark: HuaweiAppGalleryFillColoredIcon, name: 'Explore it on AppGallery' },
+    'android-apk': { Mark: AndroidApkFillColoredIcon, name: 'Direct download APK file' },
+    'mac-app-store': { Mark: AppleMacAppStoreFillColoredIcon, name: 'Download on the Mac App Store' },
+    'macos-dmg': { Mark: AppleDmgFillColoredIcon, name: 'Download for macOS .dmg' },
+    'windows-store': { Mark: WindowsStoreFillColoredIcon, name: 'Download app for Windows' },
+    'windows-exe': { Mark: WindowsExeFillColoredIcon, name: 'Download for Windows .exe' },
+    linux: { Mark: LinuxFillColoredIcon, name: 'Installation on Linux. Download' },
+    web: { Mark: WebBrowserFillColoredIcon, name: 'Use it on your web browser' },
+};
+/**
+ * A card promoting the app's downloads — the reference site's DownloadBanner.
+ *
+ * A heading and the stores' badges, and from the fold a QR code beside the heading with a line
+ * telling the reader to scan it. On a phone the code and its line are not drawn: the reader is
+ * already holding the device the code would open on, so the heading stands alone over the badges,
+ * two to a row. The reference swapped in a second heading there; this keeps the one, so the region
+ * is named the same at every width.
+ *
+ * The badges are records rather than elements: a platform and a link. The component picks the
+ * artwork from the platform, so a page cannot hand over a redrawn or outdated store badge, and names
+ * each link by the words its artwork carries unless the record gives a label of its own.
+ *
+ * Two ways to draw the card. The standard card takes the ground's fill. The featured card is for a
+ * page promoting an app: the brand's coral, with a Background pattern drawn inside it as a layer
+ * under its content — the aurora unless the page names the mesh — laid out as a split, the app's
+ * name, the heading and the badges with the code beside them on one side and the app's own image on
+ * the other, rising out of the card. Its words are white, and the pattern answers the pointer.
+ *
+ * It arrives the way every block does: the code, then the words, then the badges. `'use client'`
+ * for that and for `useId`, which names the region by its heading.
+ */
+export function DownloadBanner({ ground = downloadBannerDefaults.ground, variant = downloadBannerDefaults.variant, pattern, eyebrow, media, title, description, badges, qr, disclaimer, }) {
+    const titleId = useId();
+    /* The code is the standard card's: the featured card promotes the app with its image instead. */
+    const code = variant === 'standard' ? qr : undefined;
+    const [band, revealed] = useReveal();
+    return (_jsx("section", { className: downloadBannerParts.root, "data-ground": ground, "data-variant": variant, "aria-labelledby": titleId, children: _jsx("div", { className: downloadBannerParts.inner, ref: band, "data-revealed": revealed, children: _jsxs("div", { className: downloadBannerParts.card, children: [variant === 'featured' ? (_jsx(Background, { tone: "brand", pattern: pattern ?? 'aurora', children: null })) : null, _jsxs("div", { className: downloadBannerParts.lead, children: [code ? (_jsx("div", { className: downloadBannerParts['qr-tile'], ...arriving(0), children: _jsx("img", { className: downloadBannerParts.qr, src: code.src, alt: code.alt }) })) : null, _jsxs("div", { className: downloadBannerParts.text, ...arriving(1), children: [code ? _jsx("p", { className: downloadBannerParts['qr-label'], children: code.label }) : null, variant === 'featured' && given(eyebrow) ? (_jsx("p", { className: downloadBannerParts.eyebrow, children: eyebrow })) : null, _jsx("h2", { className: downloadBannerParts.title, id: titleId, children: title }), given(description) ? _jsx("p", { className: downloadBannerParts.description, children: description }) : null, given(disclaimer) ? _jsx("p", { className: downloadBannerParts.disclaimer, children: disclaimer }) : null] })] }), badges.length > 0 ? (_jsx("ul", { className: downloadBannerParts.badges, ...arriving(2), children: badges.map(({ platform, href, label }, at) => {
+                            /* A platform this has no artwork for draws nothing rather than a blank link: the
+                               type rules it out, and a record from a feed or an editor is not typed. */
+                            const badge = BADGES[platform];
+                            if (badge === undefined)
+                                return null;
+                            const { Mark, name } = badge;
+                            return (
+                            /* Keyed by place as well as platform: a page may list one platform twice — two
+                               builds of the same desktop app — and a key repeated is a badge React confuses
+                               with the other. */
+                            _jsx("li", { className: downloadBannerParts.badge, children: _jsx("a", { className: downloadBannerParts['badge-link'], href: href, "aria-label": given(label) ? label : name, children: _jsx(Mark, { className: downloadBannerParts.mark, width: undefined, height: undefined, "aria-hidden": "true", focusable: "false" }) }) }, `${platform}-${at}`));
+                        }) })) : null, variant === 'featured' && media !== undefined && media !== null ? (_jsx("div", { className: downloadBannerParts.media, ...arriving(3), children: media })) : null] }) }) }));
+}

package/dist/components/blocks/download-banner/DownloadBanner.types.d.ts

@@ -0,0 +1,56 @@
+import type { ReactNode } from 'react';
+import type { DownloadBannerBadge, DownloadBannerQr } from '../../download-banner-data.js';
+export interface DownloadBannerOwnProps {
+    /**
+     * `page` — The default, and the page's own white. The card is the recessed gray that sets it off — the reference design's light-2
+     * `subtle` — The grey band, with the card white on it — the reference design's light. 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, with the card at color.bg.surface-card-strong and white words on it — the reference design's dark. For a download section a reader should arrive at; the badges are black and keep their own edge on it
+     */
+    ground?: 'page' | 'subtle' | 'strong';
+    /** The featured card only: the app itself — a screenshot of it in a phone, the page's own image. It stands at the card's end, rising out of the card's top edge and resting on its bottom one, so the card reads as the app being held out to the reader. On a phone it sits under the badges. */
+    media?: ReactNode;
+    /** The featured card only: the app's name, or what kind of app it is, small above the heading — "Deriv GO", "Mobile app". */
+    eyebrow?: string;
+    /** Always. Where the app can be had, in a few words — "Trade on the go", "Available on". The section's heading at every width: under the scan line beside the code from the fold, and alone over the badges on a phone. */
+    title: string;
+    /** A line under the heading saying what the app gives a reader — "Trade on the go with the same account, markets and tools." One sentence. */
+    description?: string;
+    /** Always. The stores and downloads the app is in, in the order a reader should meet them — mobile stores first, then desktop, then the web. Each names its `platform`, which picks the store's own artwork, and the `href` that reaches the product in it. An empty list draws no badges. */
+    badges: DownloadBannerBadge[];
+    /** A QR code reaching the same app the badges do, so a reader at a desktop can take it to their phone. The page's image, with the words it is read as and the line telling the reader to scan it. Drawn from the fold and never on a phone, where the reader is already holding the device it would open on, and only on the standard card: the featured card promotes an app with its image, and the badges are its one way in. Leave it out and the heading stands alone at every width. */
+    qr?: DownloadBannerQr;
+    /** One line of small print under the heading — which versions the desktop app runs on, or where the app is not offered. */
+    disclaimer?: string;
+}
+export type DownloadBannerProps = DownloadBannerOwnProps & ({
+    variant?: 'standard' | 'featured';
+    pattern?: undefined;
+} | {
+    variant: Exclude<'standard' | 'featured', 'standard'>;
+    pattern?: 'aurora' | 'mesh';
+});
+/** The class each part carries. Apply these — do not retype them. */
+export declare const downloadBannerParts: {
+    readonly root: "dds-downloadbanner";
+    readonly inner: "dds-downloadbanner__inner";
+    readonly card: "dds-downloadbanner__card";
+    readonly lead: "dds-downloadbanner__lead";
+    readonly 'qr-tile': "dds-downloadbanner__qr-tile";
+    readonly qr: "dds-downloadbanner__qr";
+    readonly text: "dds-downloadbanner__text";
+    readonly 'qr-label': "dds-downloadbanner__qr-label";
+    readonly eyebrow: "dds-downloadbanner__eyebrow";
+    readonly title: "dds-downloadbanner__title";
+    readonly description: "dds-downloadbanner__description";
+    readonly disclaimer: "dds-downloadbanner__disclaimer";
+    readonly badges: "dds-downloadbanner__badges";
+    readonly badge: "dds-downloadbanner__badge";
+    readonly 'badge-link': "dds-downloadbanner__badge-link";
+    readonly mark: "dds-downloadbanner__mark";
+    readonly media: "dds-downloadbanner__media";
+};
+/** Generated so defaults cannot drift from the contract. */
+export declare const downloadBannerDefaults: {
+    readonly ground: "page";
+    readonly variant: "standard";
+};

package/dist/components/blocks/download-banner/DownloadBanner.types.js

@@ -0,0 +1,23 @@
+// GENERATED from download-banner.contract.json. Do not edit.
+/** The class each part carries. Apply these — do not retype them. */
+export const downloadBannerParts = {
+    root: 'dds-downloadbanner',
+    inner: 'dds-downloadbanner__inner',
+    card: 'dds-downloadbanner__card',
+    lead: 'dds-downloadbanner__lead',
+    'qr-tile': 'dds-downloadbanner__qr-tile',
+    qr: 'dds-downloadbanner__qr',
+    text: 'dds-downloadbanner__text',
+    'qr-label': 'dds-downloadbanner__qr-label',
+    eyebrow: 'dds-downloadbanner__eyebrow',
+    title: 'dds-downloadbanner__title',
+    description: 'dds-downloadbanner__description',
+    disclaimer: 'dds-downloadbanner__disclaimer',
+    badges: 'dds-downloadbanner__badges',
+    badge: 'dds-downloadbanner__badge',
+    'badge-link': 'dds-downloadbanner__badge-link',
+    mark: 'dds-downloadbanner__mark',
+    media: 'dds-downloadbanner__media',
+};
+/** Generated so defaults cannot drift from the contract. */
+export const downloadBannerDefaults = { ground: 'page', variant: 'standard' };