@deriv-com/dds-marketing 0.1.0 → 0.2.0

package/dist/components/core/checkbox/checkbox-impl.css

@@ -0,0 +1,90 @@
+/*
+ * Scoped to this package, like the generated sheet beside it.
+ *
+ * `:where([data-dds-context="marketing"])` confines this rule without contributing
+ * specificity, so the override below still ties or beats exactly what it did before —
+ * it is written a class deeper than it looks in order to match generated CSS, and a
+ * scope that carried weight would break it.
+ */
+
+/*
+ * Implementation CSS the contract cannot express.
+ *
+ * A `structure` rule's `when` must name a styling axis, and `description` is not one.
+ * Making it one would emit a rule per value and multiply every cell of the variant grid
+ * for a single alignment declaration.
+ *
+ * What it decides is where the box sits against the words, and the answer differs by what
+ * the second line is. Flush with the first line is right when the label wrapped: a box
+ * floating to the middle of three lines is level with none of them, and the line it names
+ * is the first. Centred is right when the second line is a description, because then the
+ * box belongs to the pair rather than to the first half of it.
+ *
+ * `:has()` is what makes that possible and also the limit of it. CSS can see that a
+ * description exists; it cannot see that the label took two lines. So a wrapping label
+ * that *also* carries a description centres, which is the one arrangement of the four
+ * this rule gets wrong. Written down because it is a known edge rather than an oversight
+ * — the fix would be a line count, and there is no such selector.
+ *
+ * Three classes deep deliberately. The generated rule that sets flex-start is two, and
+ * `:has()` takes the specificity of its argument, so a two-class selector here would tie
+ * and leave source order to decide it.
+ */
+:where([data-dds-context='marketing'])
+  .dds-checkbox
+  .dds-checkbox__control:has(.dds-checkbox__description-text) {
+  align-items: center;
+}
+
+/*
+ * And where the box sits on the line, which is the other thing no token can say.
+ *
+ * Product's label is font.body.md at fourteen, so its line box is twenty-one and the
+ * twenty-pixel square is half a pixel off the middle of it — near enough that nothing
+ * carries the difference. Marketing's body.md is sixteen. The line is twenty-four, the
+ * square is still twenty, and `align-items: flex-start` puts the box's top edge on the
+ * line box's top edge, which leaves it two pixels above the letters it belongs to.
+ *
+ * The square stays twenty because that is the mark's size, not the line's: at
+ * twenty-four it filled the line and read as a panel beside the words rather than a box
+ * in front of them. So the measure is left alone and the position is corrected.
+ *
+ * Half the difference between the line and the box, taken from the two of them rather
+ * than written down: `1lh` is the box's own computed line-height, which it inherits from
+ * the row and which is the label's, and the token is the box's own. Retune either and
+ * this follows. A browser without `lh` drops the declaration and gets the two pixels
+ * back, which is the behaviour this replaces rather than something worse.
+ *
+ * Only where the row is not already centred. With a description the control centres the
+ * box on the pair, and an offset on top of that would push it below the middle it was
+ * just put in.
+ */
+:where([data-dds-context='marketing'])
+  .dds-checkbox
+  .dds-checkbox__control:not(:has(.dds-checkbox__description-text))
+  > .dds-checkbox__box {
+  margin-block-start: calc((1lh - var(--size-checkbox-box)) / 2);
+}
+
+/*
+ * And the same correction for the mark beside the message, for the same reason.
+ *
+ * `align-items: flex-start` on the message is the contract's, and right: a message that
+ * runs to two lines wants its glyph on the first of them rather than floating to the
+ * middle of the pair. What it aligns is the top edges, though, and the glyph is sixteen
+ * against a line box of twenty-one — so the mark sat two and a half pixels above the
+ * words it belongs to, on every status.
+ *
+ * Product's message is font.body-strong.sm at twelve, an eighteen-pixel line, so the
+ * same glyph is a pixel out there and nobody reads it. This package sets the message in
+ * font.body.sm at fourteen, which is what makes the difference visible — the same step
+ * up that put the box two pixels off its label.
+ *
+ * `1lh` is the line the glyph is sitting in, read from the message it inherits from.
+ * `--icon-size-xs` is the step the component asks Icon for a few lines above; the two
+ * have to be changed together, which is worth saying out loud because nothing here
+ * enforces it.
+ */
+:where([data-dds-context='marketing']) .dds-checkbox .dds-checkbox__message > .dds-icon {
+  margin-block-start: calc((1lh - var(--icon-size-xs)) / 2);
+}

package/dist/components/core/divider/Divider.css

@@ -0,0 +1,41 @@
+/* GENERATED from divider.contract.json. Do not edit. */
+
+:where([data-dds-context="marketing"]) .dds-divider {
+  align-items: center;
+  display: flex;
+  gap: var(--space-gap-sm);
+}
+
+:where([data-dds-context="marketing"]) .dds-divider .dds-divider__line {
+  flex: auto;
+  flex-basis: 0;
+  background-color: var(--color-border-subtle);
+}
+
+:where([data-dds-context="marketing"]) .dds-divider .dds-divider__label {
+  white-space: nowrap;
+  color: var(--color-fg-tertiary);
+  font-family: var(--font-label-sm-family);
+  font-size: var(--font-label-sm-size);
+  font-weight: var(--font-label-sm-weight);
+  letter-spacing: var(--font-label-sm-letter-spacing);
+  line-height: var(--font-label-sm-line-height);
+}
+
+:where([data-dds-context="marketing"]) .dds-divider[data-orientation="horizontal"] {
+  inline-size: 100%;
+}
+
+:where([data-dds-context="marketing"]) .dds-divider[data-orientation="vertical"] {
+  align-self: stretch;
+  flex-direction: column;
+}
+
+:where([data-dds-context="marketing"]) .dds-divider[data-orientation="horizontal"] .dds-divider__line {
+  block-size: var(--border-width-default);
+}
+
+:where([data-dds-context="marketing"]) .dds-divider[data-orientation="vertical"] .dds-divider__line {
+  inline-size: var(--border-width-default);
+}
+

package/dist/components/core/divider/Divider.d.ts

@@ -0,0 +1,46 @@
+import './Divider.css';
+import { type DividerProps } from './Divider.types.js';
+export type { DividerProps };
+/**
+ * A rule between two groups, and one shape for both the bare case and the labelled one.
+ *
+ * The line is a child rather than a border on the root, because a labelled divider
+ * needs two of them and a border cannot be halved. That makes the bare case one
+ * element more than an `<hr>` would be, and buys a component whose ink and thickness
+ * are bound in exactly one place — and a labelled divider that is this component
+ * rather than a second one wearing the same name.
+ *
+ * Three renderings, and the difference between them is entirely what reaches the
+ * accessibility tree:
+ *
+ * A bare divider is `role="separator"`, which is what says the groups either side of
+ * it are different groups. Vertical adds `aria-orientation`, and horizontal
+ * deliberately does not: a separator is horizontal by default, so writing it there
+ * would be stating the default out loud.
+ *
+ * A labelled divider is not a separator at all. A non-focusable separator's children
+ * are presentational to a screen reader — the ARIA spec's own list — so a word inside
+ * one is drawn and never announced, which is the exact opposite of why anybody puts a
+ * word in a divider. With the role dropped, the word is ordinary text on the page and
+ * is read as such, and the two lines either side of it are decoration, which is all
+ * they ever were. `aria-orientation` goes with the role rather than staying behind: an
+ * orientation on a box that is not a separator describes nothing.
+ *
+ * A decorative divider is hidden outright. `aria-hidden` rather than
+ * `role="presentation"`: the bare case has no children to worry about, so the two
+ * would be equivalent here — but this component can hold a child, and
+ * `role="presentation"` does not travel to one. The type makes that pairing
+ * impossible, and the attribute that survives a future where it is not is the one to
+ * write now.
+ *
+ * The label is read for truth rather than for presence. `presentWhen` in the contract
+ * names the prop, and the generated test renders `label=""` and asserts the part is
+ * *not* there — an empty string is a word nobody typed, and a span holding nothing
+ * would still open the root's gap on both sides of it and split the rule in two
+ * around a space.
+ *
+ * The spread goes first, so a consumer can override what is not load-bearing and
+ * cannot override what is. Everything this component decides about semantics is
+ * written after it.
+ */
+export declare function Divider({ orientation, decorative, label, ...rest }: DividerProps): import("react").JSX.Element;

package/dist/components/core/divider/Divider.js

@@ -0,0 +1,51 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import './Divider.css';
+import { dividerDefaults, dividerParts } from './Divider.types.js';
+/**
+ * A rule between two groups, and one shape for both the bare case and the labelled one.
+ *
+ * The line is a child rather than a border on the root, because a labelled divider
+ * needs two of them and a border cannot be halved. That makes the bare case one
+ * element more than an `<hr>` would be, and buys a component whose ink and thickness
+ * are bound in exactly one place — and a labelled divider that is this component
+ * rather than a second one wearing the same name.
+ *
+ * Three renderings, and the difference between them is entirely what reaches the
+ * accessibility tree:
+ *
+ * A bare divider is `role="separator"`, which is what says the groups either side of
+ * it are different groups. Vertical adds `aria-orientation`, and horizontal
+ * deliberately does not: a separator is horizontal by default, so writing it there
+ * would be stating the default out loud.
+ *
+ * A labelled divider is not a separator at all. A non-focusable separator's children
+ * are presentational to a screen reader — the ARIA spec's own list — so a word inside
+ * one is drawn and never announced, which is the exact opposite of why anybody puts a
+ * word in a divider. With the role dropped, the word is ordinary text on the page and
+ * is read as such, and the two lines either side of it are decoration, which is all
+ * they ever were. `aria-orientation` goes with the role rather than staying behind: an
+ * orientation on a box that is not a separator describes nothing.
+ *
+ * A decorative divider is hidden outright. `aria-hidden` rather than
+ * `role="presentation"`: the bare case has no children to worry about, so the two
+ * would be equivalent here — but this component can hold a child, and
+ * `role="presentation"` does not travel to one. The type makes that pairing
+ * impossible, and the attribute that survives a future where it is not is the one to
+ * write now.
+ *
+ * The label is read for truth rather than for presence. `presentWhen` in the contract
+ * names the prop, and the generated test renders `label=""` and asserts the part is
+ * *not* there — an empty string is a word nobody typed, and a span holding nothing
+ * would still open the root's gap on both sides of it and split the rule in two
+ * around a space.
+ *
+ * The spread goes first, so a consumer can override what is not load-bearing and
+ * cannot override what is. Everything this component decides about semantics is
+ * written after it.
+ */
+export function Divider({ orientation = dividerDefaults.orientation, decorative = dividerDefaults.decorative, label, ...rest }) {
+    // A word, rather than a prop that was passed. See above: "" is not a label.
+    const labelled = typeof label === 'string' && label !== '';
+    const separator = !decorative && !labelled;
+    return (_jsxs("div", { ...rest, className: dividerParts.root, "data-orientation": orientation, role: separator ? 'separator' : undefined, "aria-orientation": separator && orientation === 'vertical' ? 'vertical' : undefined, "aria-hidden": decorative ? true : undefined, children: [_jsx("span", { className: dividerParts.line }), labelled ? (_jsxs(_Fragment, { children: [_jsx("span", { className: dividerParts.label, children: label }), _jsx("span", { className: dividerParts.line })] })) : null] }));
+}

package/dist/components/core/divider/Divider.types.d.ts

@@ -0,0 +1,25 @@
+export interface DividerOwnProps {
+    /**
+     * `horizontal` — The default, and nearly every divider: a rule across a stack, separating what is above it from what is below. It takes all of whatever contains it rather than waiting to be stretched, so it spans a block, a flex column and a centred grid cell alike — and in a flex row, where it has no business being, it takes the row's whole width rather than a share of it, which is the sign that the rule wanted the other axis
+     * `vertical` — A rule down a row, separating items beside one another. It stretches to the height of the row rather than declaring one, so it is exactly as tall as what it stands between — and in a container with no height of its own it draws nothing, which is the mirror of the horizontal case and the same thing to check first
+     */
+    orientation?: 'horizontal' | 'vertical';
+}
+export type DividerProps = DividerOwnProps & ({
+    decorative?: boolean;
+    label?: undefined;
+} | {
+    decorative?: false;
+    label?: string;
+});
+/** The class each part carries. Apply these — do not retype them. */
+export declare const dividerParts: {
+    readonly root: "dds-divider";
+    readonly line: "dds-divider__line";
+    readonly label: "dds-divider__label";
+};
+/** Generated so defaults cannot drift from the contract. */
+export declare const dividerDefaults: {
+    readonly orientation: "horizontal";
+    readonly decorative: false;
+};

package/dist/components/core/divider/Divider.types.js

@@ -0,0 +1,9 @@
+// GENERATED from divider.contract.json. Do not edit.
+/** The class each part carries. Apply these — do not retype them. */
+export const dividerParts = {
+    root: 'dds-divider',
+    line: 'dds-divider__line',
+    label: 'dds-divider__label',
+};
+/** Generated so defaults cannot drift from the contract. */
+export const dividerDefaults = { orientation: 'horizontal', decorative: false };

package/dist/components/core/dropdown-menu/DropdownMenu.css

@@ -0,0 +1,146 @@
+/* GENERATED from dropdownmenu.contract.json. Do not edit. */
+
+:where([data-dds-context="marketing"]) .dds-dropdownmenu {
+  display: inline-flex;
+  position: relative;
+}
+
+:where([data-dds-context="marketing"]) .dds-dropdownmenu .dds-dropdownmenu__trigger {
+  transition-property: background-color, outline-color, outline-width;
+  align-items: center;
+  background-color: transparent;
+  border-style: solid;
+  box-sizing: border-box;
+  cursor: pointer;
+  display: inline-flex;
+  flex-direction: row;
+  justify-content: center;
+  outline-style: solid;
+  position: relative;
+  white-space: nowrap;
+  block-size: var(--size-control-md);
+  border-color: var(--color-border-strong);
+  border-radius: var(--radius-pill);
+  border-width: var(--border-width-emphasis);
+  color: var(--color-fg-default);
+  gap: var(--space-gap-sm);
+  outline-width: var(--border-width-none);
+  padding-inline: var(--space-control-md);
+  transition-duration: var(--motion-duration-normal);
+  transition-timing-function: var(--motion-easing-standard);
+}
+
+:where([data-dds-context="marketing"]) .dds-dropdownmenu .dds-dropdownmenu__surface {
+  border-style: solid;
+  box-sizing: border-box;
+  inline-size: max-content;
+  inset-block-start: 100%;
+  list-style: none;
+  margin: 0;
+  min-inline-size: 100%;
+  overflow-y: auto;
+  position: absolute;
+  background-color: var(--color-bg-surface-raised);
+  border-color: var(--color-border-subtle);
+  border-radius: var(--radius-menu);
+  border-width: var(--border-width-default);
+  box-shadow: var(--elevation-surface-floating);
+  margin-block-start: var(--space-gap-sm);
+  max-block-size: var(--size-menu-max);
+  padding-block: var(--space-inset-2xs);
+  padding-inline: var(--space-inset-2xs);
+}
+
+:where([data-dds-context="marketing"]) .dds-dropdownmenu[data-variant="plain"] .dds-dropdownmenu__trigger {
+  color: inherit;
+  border-width: var(--border-width-none);
+}
+
+:where([data-dds-context="marketing"]) .dds-dropdownmenu[data-alignment="end"] .dds-dropdownmenu__surface {
+  inset-inline-end: 0;
+  inset-inline-start: auto;
+}
+
+:where([data-dds-context="marketing"]) .dds-dropdownmenu[data-alignment="start"] .dds-dropdownmenu__surface {
+  inset-inline-end: auto;
+  inset-inline-start: 0;
+}
+
+:where([data-dds-context="marketing"]) .dds-dropdownmenu .dds-dropdownmenu__chevron {
+  block-size: var(--icon-control-lg);
+  color: var(--color-fg-muted);
+  inline-size: var(--icon-control-lg);
+  transition-duration: var(--motion-duration-fast);
+  transition-timing-function: var(--motion-easing-standard);
+}
+
+:where([data-dds-context="marketing"]) .dds-dropdownmenu .dds-dropdownmenu__icon {
+  block-size: var(--icon-control-lg);
+  inline-size: var(--icon-control-lg);
+}
+
+:where([data-dds-context="marketing"]) .dds-dropdownmenu .dds-dropdownmenu__label {
+  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);
+}
+
+:where([data-dds-context="marketing"]) .dds-dropdownmenu .dds-dropdownmenu__trigger:hover:where(:not(:disabled)) {
+  background-color: var(--color-bg-hover);
+}
+
+:where([data-dds-context="marketing"]) .dds-dropdownmenu .dds-dropdownmenu__trigger:active {
+  background-color: var(--color-bg-active);
+}
+
+:where([data-dds-context="marketing"]) .dds-dropdownmenu .dds-dropdownmenu__trigger:focus-visible {
+  outline-color: var(--color-border-focus);
+  outline-width: var(--border-width-focus);
+}
+
+:where([data-dds-context="marketing"]) .dds-dropdownmenu[data-size="sm"] .dds-dropdownmenu__chevron {
+  block-size: var(--icon-control-md);
+  inline-size: var(--icon-control-md);
+}
+
+:where([data-dds-context="marketing"]) .dds-dropdownmenu[data-size="sm"] .dds-dropdownmenu__icon {
+  block-size: var(--icon-control-md);
+  inline-size: var(--icon-control-md);
+}
+
+:where([data-dds-context="marketing"]) .dds-dropdownmenu[data-size="sm"] .dds-dropdownmenu__label {
+  font-family: var(--font-label-sm-family);
+  font-size: var(--font-label-sm-size);
+  font-weight: var(--font-label-sm-weight);
+  letter-spacing: var(--font-label-sm-letter-spacing);
+  line-height: var(--font-label-sm-line-height);
+}
+
+:where([data-dds-context="marketing"]) .dds-dropdownmenu[data-size="sm"] .dds-dropdownmenu__trigger {
+  block-size: var(--size-control-sm);
+  padding-inline: var(--space-control-sm);
+}
+
+:where([data-dds-context="marketing"]) .dds-dropdownmenu[data-tone="inverse"] .dds-dropdownmenu__trigger:hover:where(:not(:disabled)) {
+  background-color: var(--color-bg-hover-inverse);
+}
+
+:where([data-dds-context="marketing"]) .dds-dropdownmenu[data-tone="inverse"] .dds-dropdownmenu__trigger:active {
+  background-color: var(--color-bg-active-inverse);
+}
+
+:where([data-dds-context="marketing"]) .dds-dropdownmenu[data-tone="inverse"] .dds-dropdownmenu__trigger:focus-visible {
+  outline-color: var(--color-border-focus-inverse);
+}
+
+:where([data-dds-context="marketing"]) .dds-dropdownmenu[data-variant="plain"][data-size="sm"] .dds-dropdownmenu__trigger {
+  block-size: var(--size-control-md);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :where([data-dds-context="marketing"]) .dds-dropdownmenu,
+  :where([data-dds-context="marketing"]) .dds-dropdownmenu * { transition: none; }
+}
+

package/dist/components/core/dropdown-menu/DropdownMenu.d.ts

@@ -0,0 +1,22 @@
+import './DropdownMenu.css';
+import './dropdown-menu-impl.css';
+import { type DropdownMenuProps } from './DropdownMenu.types.js';
+export type { DropdownMenuProps };
+/**
+ * A button that opens a short set of destinations.
+ *
+ * It is the host MenuItem was written against: a row whose role is `menuitem` announces wrong
+ * outside an element whose role is `menu`, so what this adds is everything a row cannot know about
+ * itself — that there is a set, how long it is, which one the visitor is on, and that Escape puts
+ * them back on the button they pressed.
+ *
+ * The trigger is drawn here rather than passed in, which is where this parts company with product's
+ * menu of the same name. That is forced rather than chosen: this package's Button is an anchor with
+ * a required `href`, so it is a link and a link that opens a menu does not navigate; ButtonIcon is a
+ * real button and takes no words. A set of destinations is chosen by reading it, so the trigger
+ * needs words, and nothing here draws a button with words.
+ *
+ * Focus moves to the rows themselves rather than being described from the trigger. A menu's rows are
+ * things to take, and a visitor pressing Enter should be pressing the thing they are on.
+ */
+export declare function DropdownMenu(props: DropdownMenuProps): import("react").JSX.Element;