@deriv-com/dds-marketing 1.0.2 → 1.1.0

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

@@ -0,0 +1,216 @@
+/*
+ * Scoped to this package, like the generated sheet beside it.
+ */
+
+/*
+ * Two badges to a row on a phone, each chip filling its column, so every badge is the same size
+ * there as it is from the fold. `minmax(0, 1fr)` rather than `1fr`, so a column narrower than the
+ * artwork narrows the artwork — it keeps its proportions inside the chip — instead of pushing the
+ * grid past the card.
+ */
+:where([data-dds-context="marketing"]) .dds-downloadbanner .dds-downloadbanner__badges {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+:where([data-dds-context="marketing"]) .dds-downloadbanner .dds-downloadbanner__badge-link {
+  inline-size: 100%;
+}
+
+/*
+ * The code and its line from the fold, and the badges a row that wraps.
+ *
+ * On a phone the generated sheet draws neither the code nor the line telling the reader to scan
+ * it — the reference design's swap, and its reason: a code is for a reader on a device other than
+ * the one it opens on, and on a phone the reader is holding that device. The heading stays, so the
+ * region keeps one name at every width. The badges there are two to a row, each filling its
+ * column, the reference's phone grid.
+ *
+ * From the fold there is room for the code beside the words, and the badges sit in a row that
+ * wraps, each chip size.download-banner.badge wide — one width for every store, whatever the shape
+ * of its artwork.
+ *
+ * `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-downloadbanner .dds-downloadbanner__qr-tile,
+  :where([data-dds-context="marketing"]) .dds-downloadbanner .dds-downloadbanner__qr-label {
+    display: block;
+  }
+
+  :where([data-dds-context="marketing"]) .dds-downloadbanner .dds-downloadbanner__badges {
+    display: flex;
+    flex-wrap: wrap;
+  }
+
+  :where([data-dds-context="marketing"]) .dds-downloadbanner .dds-downloadbanner__badge-link {
+    inline-size: var(--size-download-banner-badge);
+  }
+}
+
+/*
+ * From 64rem the heading and the badges side by side.
+ *
+ * The reference's desktop card: the code and its words at the start, the badges ranged to the end
+ * and wrapping there when there are more than the row holds. The words keep their own width and the
+ * badges take what is left, so a long set wraps under itself rather than pushing the heading into a
+ * column a word wide. `end` rather than right, so a mirrored page ranges them the other way.
+ */
+@container (min-width: 64rem) {
+  :where([data-dds-context="marketing"]) .dds-downloadbanner .dds-downloadbanner__card {
+    align-items: center;
+    flex-direction: row;
+    justify-content: space-between;
+  }
+
+  :where([data-dds-context="marketing"]) .dds-downloadbanner .dds-downloadbanner__lead {
+    flex: 0 1 auto;
+  }
+
+  :where([data-dds-context="marketing"]) .dds-downloadbanner .dds-downloadbanner__badges {
+    flex: 1 1 0;
+    justify-content: flex-end;
+  }
+}
+
+/*
+ * The featured card: the brand's coral, with its pattern inside it.
+ *
+ * color.bg.brand, the same in both themes, with the pattern on Background's brand tone — the mesh
+ * there is the design system's own front page. Every word on it is white, color.fg.on-brand, the
+ * line under the heading and the small print included: the quieter white the dark band uses is too
+ * faint on the coral, as CtaBanner found. The badges keep their own black, which reads on the coral.
+ * The featured card draws no QR code: it promotes the app with the app's own image, and the badges
+ * are its one way in.
+ *
+ * The pattern is held inside the card's own corners by its own layer, rounded as the card is, rather
+ * than by the card clipping everything it holds — the app's image rises out of the card's top edge,
+ * and a card that clipped would cut it off. The pattern stacks under the words.
+ */
+:where([data-dds-context="marketing"]) .dds-downloadbanner[data-variant='featured'] .dds-downloadbanner__card {
+  background-color: var(--color-bg-brand);
+  color: var(--color-fg-on-brand);
+  isolation: isolate;
+  position: relative;
+}
+
+:where([data-dds-context="marketing"]) .dds-downloadbanner[data-variant='featured'] .dds-downloadbanner__card > .dds-background {
+  border-radius: inherit;
+}
+
+:where([data-dds-context="marketing"]) .dds-downloadbanner[data-variant='featured'] :is(.dds-downloadbanner__description, .dds-downloadbanner__disclaimer) {
+  color: var(--color-fg-on-brand);
+}
+
+:where([data-dds-context="marketing"]) .dds-downloadbanner[data-variant='featured'] :is(.dds-downloadbanner__lead, .dds-downloadbanner__badges) {
+  position: relative;
+  z-index: 1;
+}
+
+
+/*
+ * The featured card's layout: a page promoting an app.
+ *
+ * A grid rather than the standard card's row. On a phone it stacks — the app's name, the heading
+ * and the line, the badges, and the app's image under them, resting on the card's foot.
+ *
+ * The lead is opened out (`display: contents`) so the words are placed on the card's grid
+ * themselves, beside the app's image from the fold.
+ */
+:where([data-dds-context="marketing"]) .dds-downloadbanner[data-variant='featured'] .dds-downloadbanner__card {
+  align-items: center;
+  display: grid;
+  grid-template-areas:
+    'text'
+    'badges'
+    'media';
+  grid-template-columns: minmax(0, 1fr);
+  justify-content: normal;
+}
+
+:where([data-dds-context="marketing"]) .dds-downloadbanner[data-variant='featured'] .dds-downloadbanner__lead {
+  display: contents;
+}
+
+/* Opened out, the lead stacks nothing above the pattern any more, so its words are
+   lifted over the pattern themselves — and the app's image with them. */
+:where([data-dds-context="marketing"]) .dds-downloadbanner[data-variant='featured'] :is(.dds-downloadbanner__text, .dds-downloadbanner__media) {
+  position: relative;
+  z-index: 1;
+}
+
+:where([data-dds-context="marketing"]) .dds-downloadbanner[data-variant='featured'] .dds-downloadbanner__text {
+  grid-area: text;
+}
+
+:where([data-dds-context="marketing"]) .dds-downloadbanner[data-variant='featured'] .dds-downloadbanner__badges {
+  grid-area: badges;
+}
+
+/*
+ * The app's image rests on the card's foot: it reaches down through the card's own padding to the
+ * bottom edge, so the phone stands on the card rather than floating in it. The image is the page's,
+ * at its own proportions, never wider than its column.
+ */
+:where([data-dds-context="marketing"]) .dds-downloadbanner[data-variant='featured'] .dds-downloadbanner__media {
+  align-self: end;
+  grid-area: media;
+  justify-self: center;
+  max-inline-size: 100%;
+  margin-block-end: calc(-1 * var(--space-inset-card));
+}
+
+:where([data-dds-context="marketing"]) .dds-downloadbanner[data-variant='featured'] .dds-downloadbanner__media > * {
+  block-size: auto;
+  inline-size: 100%;
+}
+
+/*
+ * Bare media is a block; a component keeps its own display.
+ *
+ * `display: block` is for what arrives as a raw element — an image, a video, an inline SVG — which
+ * sits on a text baseline otherwise and leaves a gap under it. Written at no weight at all, so a
+ * component the page placed here — an IllustrationScene, whose grid lays its pane over its photo —
+ * keeps the display its own sheet gives it. In the rule above, a class deeper than the component's
+ * root, it turned the scene's grid into a block, and the pane fell below the photo and was clipped.
+ */
+:where([data-dds-context="marketing"] .dds-downloadbanner[data-variant='featured'] .dds-downloadbanner__media > *) {
+  display: block;
+}
+
+
+/*
+ * At full width, the split: the words over the badges on one side, the app on the other at its own
+ * width (size.download-banner.media, a phone held out rather than a slab). The app rises out of the
+ * card's top edge by the step a heading keeps from its content, so the card reads as the app being
+ * held out to the reader.
+ *
+ * At 64rem rather than the fold. Between the two the words column is narrow, its heading wraps and
+ * its badges stack, so the words stand taller than the app: the app, resting on the card's foot,
+ * then sat well below the top edge with coral above it and never rose. Stacked, as on a phone, until
+ * there is room for the split to look like one.
+ */
+@container (min-width: 64rem) {
+  :where([data-dds-context="marketing"]) .dds-downloadbanner[data-variant='featured'] .dds-downloadbanner__card {
+    grid-template-areas:
+      'text media'
+      'badges media';
+    grid-template-columns: minmax(0, 1fr) auto;
+  }
+
+  /* The badges start under the words, where the standard card ranges them to the end. The app is
+     taller than the words, and its two rows share what it adds; the words sit at the foot of theirs
+     and the badges at the head of theirs, so the two stay together in the middle of the card. */
+  :where([data-dds-context="marketing"]) .dds-downloadbanner[data-variant='featured'] .dds-downloadbanner__text {
+    align-self: end;
+  }
+
+  :where([data-dds-context="marketing"]) .dds-downloadbanner[data-variant='featured'] .dds-downloadbanner__badges {
+    align-self: start;
+    justify-content: flex-start;
+  }
+
+  :where([data-dds-context="marketing"]) .dds-downloadbanner[data-variant='featured'] .dds-downloadbanner__media {
+    margin-block-start: calc(-1 * (var(--space-inset-card) + var(--space-heading-content)));
+  }
+}

package/dist/components/blocks/faq-accordion/FaqAccordion.css

@@ -6,6 +6,7 @@
   display: flex;
   inline-size: 100%;
   justify-content: center;
+  overflow-wrap: anywhere;
 }
 
 :where([data-dds-context="marketing"]) .dds-faqaccordion .dds-faqaccordion__inner {

package/dist/components/blocks/faq-accordion/faq-accordion-impl.css

@@ -23,11 +23,11 @@
 /*
  * The questions turn round on the dark band.
  *
- * AccordionItem draws its question in color.fg.default, its chevron and its hover in color.fg.muted,
+ * AccordionItem draws its question in color.fg.default, its chevron in color.fg.muted,
  * its rules in color.border.subtle and its focus ring in color.border.focus — every one of them made
  * for a light page, and every one dark on near-black. It has no tone to answer with, so the block,
- * which knows its ground, gives it the dark band's fixed roles: white questions, a chevron and a
- * hover at fg.muted-inverse, rules at the band's veil, the band's own focus ring. The answers need
+ * which knows its ground, gives it the dark band's fixed roles: white questions, a chevron at
+ * fg.muted-inverse, rules at the band's veil, the band's own focus ring. The answers need
  * nothing: they take the section's ink, which is already white.
  */
 :where([data-dds-context="marketing"]) .dds-faqaccordion[data-ground="strong"] .dds-accordionitem {
@@ -38,10 +38,6 @@
   color: var(--color-fg-on-brand-strong);
 }
 
-:where([data-dds-context="marketing"])
-  .dds-faqaccordion[data-ground="strong"]
-  .dds-accordionitem
-  .dds-accordionitem__trigger:hover:where(:not(:disabled)),
 :where([data-dds-context="marketing"]) .dds-faqaccordion[data-ground="strong"] .dds-accordionitem .dds-accordionitem__marker {
   color: var(--color-fg-muted-inverse);
 }

package/dist/components/blocks/feature-bullets/FeatureBullets.css

@@ -6,6 +6,7 @@
   display: flex;
   inline-size: 100%;
   justify-content: center;
+  overflow-wrap: anywhere;
 }
 
 :where([data-dds-context="marketing"]) .dds-featurebullets .dds-featurebullets__inner {

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

@@ -91,11 +91,24 @@
  */
 :where([data-dds-context="marketing"]) .dds-featurebullets .dds-featurebullets__media > * {
   block-size: 100%;
-  display: block;
   inline-size: 100%;
   object-fit: cover;
 }
 
+/*
+ * Bare media is a block; a component keeps its own display.
+ *
+ * `display: block` is for what arrives as a raw element — an image, a video, an inline SVG — which
+ * sits on a text baseline otherwise and leaves a gap under it. Written at no weight at all, so a
+ * component the page placed here — an IllustrationScene, whose grid lays its pane over its photo —
+ * keeps the display its own sheet gives it. In the rule above, a class deeper than the component's
+ * root, it turned the scene's grid into a block, and the pane fell below the photo and was clipped.
+ */
+:where([data-dds-context="marketing"] .dds-featurebullets .dds-featurebullets__media > *) {
+  display: block;
+}
+
+
 :where([data-dds-context="marketing"]) .dds-featurebullets .dds-featurebullets__media img {
   block-size: 100%;
   display: block;

package/dist/components/blocks/feature-cards/FeatureCards.css

@@ -6,6 +6,7 @@
   display: flex;
   inline-size: 100%;
   justify-content: center;
+  overflow-wrap: anywhere;
 }
 
 :where([data-dds-context="marketing"]) .dds-featurecards .dds-featurecards__inner {

package/dist/components/blocks/feature-cards/FeatureCards.d.ts

@@ -13,7 +13,8 @@ export type { FeatureCardsProps };
  * how many cards share a row.
  *
  * The row is read from the cards. One column on a phone and two from the fold; at full width three,
- * four when there are exactly four, and one or two held to two thirds of the row, centred. A card
+ * four when there are exactly four, two filling the row half each, and one held to two thirds of
+ * it, centred. A card
  * alone lays its words beside a portrait picture. The stylesheet asks all of it of the markup — the
  * count is already there, and a prop restating it is a second place for the two to disagree.
  *

package/dist/components/blocks/feature-cards/FeatureCards.js

@@ -1,31 +1,13 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Children, Fragment, isValidElement, useId } from 'react';
+import { useId } from 'react';
 import './FeatureCards.css';
 import './feature-cards-impl.css';
 import '../block-reveal.css';
 import { given } from '../../given.js';
+import { cardsOf } from '../cards-of.js';
 import { arriving, useReveal } from '../use-reveal.js';
 import { featureCardsDefaults, featureCardsParts } from './FeatureCards.types.js';
-/**
- * The cards, with any fragment opened out.
- *
- * `Children.toArray` flattens arrays and leaves a fragment whole, so a page writing
- * `<>{cards}</>` handed over one child: every card in a single cell, and the grid reading the set
- * as one card alone. A fragment is the page grouping its own markup, never a card, so it is opened
- * out here and the grid counts what is inside it.
- */
-function cardsOf(children, within = '') {
-    return Children.toArray(children).flatMap((child, at) => {
-        // `toArray` keys a fragment's children afresh — `.0`, `.1` — so a card is keyed by the
-        // fragment it came out of as well as its own place, or two cards from different groups share a
-        // key and React reconciles one into the other's cell.
-        const key = `${within}${isValidElement(child) && child.key !== null ? child.key : at}`;
-        return isValidElement(child) && child.type === Fragment
-            ? cardsOf(child.props.children, `${key}/`)
-            : [{ key, card: child }];
-    });
-}
 /**
  * Where a card comes in the arrival, capped so a long set does not keep a reader waiting.
  *
@@ -46,7 +28,8 @@ const LAST_STEP = FIRST_CARD + 3;
  * how many cards share a row.
  *
  * The row is read from the cards. One column on a phone and two from the fold; at full width three,
- * four when there are exactly four, and one or two held to two thirds of the row, centred. A card
+ * four when there are exactly four, two filling the row half each, and one held to two thirds of
+ * it, centred. A card
  * alone lays its words beside a portrait picture. The stylesheet asks all of it of the markup — the
  * count is already there, and a prop restating it is a second place for the two to disagree.
  *

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

@@ -122,22 +122,23 @@
     grid-template-columns: repeat(4, minmax(0, 1fr));
   }
 
-  /* A pair as two columns of their own, rather than two of three with an empty third beside them —
-     the rule below then holds the pair to the width two columns take in a row of three. */
+  /* A pair as two columns of their own, rather than two of three with an empty third beside them,
+     across the whole row as three and four are — each card half of it. */
   :where([data-dds-context="marketing"]) .dds-featurecards .dds-featurecards__grid:has(> :nth-child(2):last-child) {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
 
   /*
-   * One or two cards hold to two thirds of the row, centred, rather than the whole of it.
+   * One card alone holds to two thirds of the row, centred, rather than the whole of it.
    *
-   * Two cards across the full width are each half as wide again as a card in a row of three, and
-   * one alone is a banner. Two thirds is exactly two of the three columns and the gutter between
-   * them, so a pair is the width a pair is in any other set, and a single card the width of that
-   * pair. Computed from the row's own width and gutter rather than a fixed measure, so it follows
-   * the grid wherever the grid is.
+   * One across the full width is a banner. Two thirds is exactly two of the three columns and the
+   * gutter between them — the width a pair takes in a row of three. Computed from the row's own
+   * width and gutter rather than a fixed measure, so it follows the grid wherever the grid is.
+   *
+   * A pair is not held: it fills the row, as three and four do, so a section's cards reach the same
+   * edges whatever their number.
    */
-  :where([data-dds-context="marketing"]) .dds-featurecards .dds-featurecards__grid:is(:has(> :only-child), :has(> :nth-child(2):last-child)) {
+  :where([data-dds-context="marketing"]) .dds-featurecards .dds-featurecards__grid:has(> :only-child) {
     margin-inline: auto;
     max-inline-size: calc((100% - 2 * var(--space-grid-gutter)) * 2 / 3 + var(--space-grid-gutter));
     inline-size: 100%;

package/dist/components/blocks/feature-cards-carousel/FeatureCardsCarousel.css

@@ -0,0 +1,115 @@
+/* GENERATED from featurecardscarousel.contract.json. Do not edit. */
+
+:where([data-dds-context="marketing"]) .dds-featurecardscarousel {
+  box-sizing: border-box;
+  container-type: inline-size;
+  display: flex;
+  inline-size: 100%;
+  justify-content: center;
+  overflow: clip;
+  overflow-wrap: anywhere;
+}
+
+:where([data-dds-context="marketing"]) .dds-featurecardscarousel .dds-featurecardscarousel__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-featurecardscarousel .dds-featurecardscarousel__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-featurecardscarousel .dds-featurecardscarousel__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-featurecardscarousel .dds-featurecardscarousel__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-featurecardscarousel .dds-featurecardscarousel__carousel {
+  display: flex;
+  flex-direction: column;
+  min-inline-size: 0;
+  row-gap: var(--space-gap-xl);
+}
+
+:where([data-dds-context="marketing"]) .dds-featurecardscarousel .dds-featurecardscarousel__track {
+  display: flex;
+  outline-style: solid;
+  column-gap: var(--space-grid-gutter);
+  outline-width: var(--border-width-none);
+}
+
+:where([data-dds-context="marketing"]) .dds-featurecardscarousel .dds-featurecardscarousel__item {
+  display: grid;
+  min-inline-size: 0;
+}
+
+:where([data-dds-context="marketing"]) .dds-featurecardscarousel .dds-featurecardscarousel__footer {
+  align-items: center;
+  display: flex;
+  justify-content: space-between;
+  column-gap: var(--space-gap-lg);
+}
+
+:where([data-dds-context="marketing"]) .dds-featurecardscarousel .dds-featurecardscarousel__nav {
+  display: flex;
+  flex: none;
+  column-gap: var(--space-gap-md);
+}
+
+:where([data-dds-context="marketing"]) .dds-featurecardscarousel .dds-featurecardscarousel__nav-slot {
+  display: flex;
+  border-radius: var(--radius-pill);
+}
+
+:where([data-dds-context="marketing"]) .dds-featurecardscarousel .dds-featurecardscarousel__track:focus-visible {
+  outline-color: var(--color-border-focus);
+  outline-width: var(--border-width-focus);
+}
+
+:where([data-dds-context="marketing"]) .dds-featurecardscarousel[data-ground="page"] {
+  background-color: var(--color-bg-page);
+  color: var(--color-fg-default);
+}
+
+:where([data-dds-context="marketing"]) .dds-featurecardscarousel[data-ground="strong"] {
+  background-color: var(--color-bg-brand-strong);
+  color: var(--color-fg-on-brand-strong);
+}
+
+:where([data-dds-context="marketing"]) .dds-featurecardscarousel[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-featurecardscarousel[data-ground="strong"] .dds-featurecardscarousel__track:focus-visible {
+  outline-color: var(--color-border-focus-on-brand-strong);
+}
+

package/dist/components/blocks/feature-cards-carousel/FeatureCardsCarousel.d.ts

@@ -0,0 +1,30 @@
+import './FeatureCardsCarousel.css';
+import './feature-cards-carousel-impl.css';
+import '../block-reveal.css';
+import { type FeatureCardsCarouselProps } from './FeatureCardsCarousel.types.js';
+export type { FeatureCardsCarouselProps };
+/**
+ * A heading over a row of the page's own cards, moved along a stop at a time — the reference site's
+ * FeatureCardsCarousel.
+ *
+ * The cards are Card or CardButton with a CardBody inside, as in FeatureCards: a card's fill, its
+ * picture and where it leads are the card's, so the reference's coral, dark and light slides are
+ * Card's accent, accent-strong and surface-light, and its cover picture is CardBody's overMedia.
+ * What this decides is the heading, the row and the way along it.
+ *
+ * The browser does the scrolling and the snapping, TestimonialRow's way; this reads where the row
+ * is. A stop is a card's start, until the last few cards are all in view — those share the last
+ * stop, the row's end, so the row never scrolls into empty space and there are fewer dots than
+ * cards at full width. The dots say which stop the row is at and move to any one pressed; the
+ * arrows step one either way.
+ *
+ * Autoplay is off unless asked for. On, PaginationDots holds the clock, as it does for every block
+ * that rotates: each motion.duration.dwell it reports the next stop, wrapping from the last to the
+ * first, and this scrolls there. It holds while the pointer is over the band or focus is inside it,
+ * never runs for a reader who asked for less motion, and stops for good once the reader presses
+ * anything in the band or swipes the row.
+ *
+ * `'use client'` for the row's position, the clock, the arrival, and `useId`, which names the
+ * region by its heading.
+ */
+export declare function FeatureCardsCarousel({ ground, title, description, autoplay, label, previousLabel, nextLabel, controlsLabel, stopLabel, children, }: FeatureCardsCarouselProps): import("react").JSX.Element | null;