@deriv-com/dds-marketing 0.1.0 → 0.2.0

package/dist/components/core/badge/Badge.d.ts

@@ -0,0 +1,37 @@
+import './Badge.css';
+import './badge-impl.css';
+import { type BadgeProps } from './Badge.types.js';
+export type { BadgeProps };
+/**
+ * A pill with a fill, one or two words, and a glyph if the page has one.
+ *
+ * The label is a prop rather than children, for the reason CardBody's title is
+ * one: a node prop cannot be given text in an examples row, and a badge nobody
+ * can show is worse than one that cannot hold a link.
+ *
+ * The glyph is drawn at the badge's own step rather than the page's. Icon
+ * unwraps one that arrives already sized, so a row of badges cannot quietly
+ * disagree about how big their marks are — which is the whole reason a slot
+ * hands its glyph to the component rather than the other way round.
+ *
+ * The words are not wrapped. A flex row treats bare text as an item, so the gap
+ * falls between the glyph and the label without an element in between to hang it
+ * on — and a span that carried nothing would be a part the stylesheet never names.
+ *
+ * The glyph slot is tested against `null` as well as `undefined`. CardBody's rule
+ * is that a node is not blank-able the way a string is, so `undefined` is enough —
+ * and that is right about blankness and wrong about absence. `null` is how React
+ * writes "no node here", and `icon={hasGlyph ? <GlobeRegularIcon /> : null}` is the
+ * ordinary shape of a conditional glyph. Read as present it renders an empty
+ * sixteen-pixel box and a four-pixel gap in a pill twenty-four tall, which is a
+ * visible dent with nothing in it — cheap in a card body, obvious in a mark.
+ *
+ * The leading inset closes to eight around the glyph, which the stylesheet beside the generated
+ * one does rather than the contract: what decides it is whether a glyph was passed, and a
+ * slot is not a styling axis, so there is no value for a binding to switch on.
+ *
+ * No role and no name. Its words are read in the order they sit on the page,
+ * and the glyph is decorative: what it says is already in the label beside it,
+ * so Icon marks it presentational and a screen reader passes over it.
+ */
+export declare function Badge({ variant, label, icon, ...rest }: BadgeProps): import("react").JSX.Element;

package/dist/components/core/badge/Badge.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import './Badge.css';
+import './badge-impl.css';
+import { Icon } from '../icon/Icon.js';
+import { badgeDefaults, badgeParts } from './Badge.types.js';
+/**
+ * A pill with a fill, one or two words, and a glyph if the page has one.
+ *
+ * The label is a prop rather than children, for the reason CardBody's title is
+ * one: a node prop cannot be given text in an examples row, and a badge nobody
+ * can show is worse than one that cannot hold a link.
+ *
+ * The glyph is drawn at the badge's own step rather than the page's. Icon
+ * unwraps one that arrives already sized, so a row of badges cannot quietly
+ * disagree about how big their marks are — which is the whole reason a slot
+ * hands its glyph to the component rather than the other way round.
+ *
+ * The words are not wrapped. A flex row treats bare text as an item, so the gap
+ * falls between the glyph and the label without an element in between to hang it
+ * on — and a span that carried nothing would be a part the stylesheet never names.
+ *
+ * The glyph slot is tested against `null` as well as `undefined`. CardBody's rule
+ * is that a node is not blank-able the way a string is, so `undefined` is enough —
+ * and that is right about blankness and wrong about absence. `null` is how React
+ * writes "no node here", and `icon={hasGlyph ? <GlobeRegularIcon /> : null}` is the
+ * ordinary shape of a conditional glyph. Read as present it renders an empty
+ * sixteen-pixel box and a four-pixel gap in a pill twenty-four tall, which is a
+ * visible dent with nothing in it — cheap in a card body, obvious in a mark.
+ *
+ * The leading inset closes to eight around the glyph, which the stylesheet beside the generated
+ * one does rather than the contract: what decides it is whether a glyph was passed, and a
+ * slot is not a styling axis, so there is no value for a binding to switch on.
+ *
+ * No role and no name. Its words are read in the order they sit on the page,
+ * and the glyph is decorative: what it says is already in the label beside it,
+ * so Icon marks it presentational and a screen reader passes over it.
+ */
+export function Badge({ variant = badgeDefaults.variant, label, icon, ...rest }) {
+    return (_jsxs("span", { className: badgeParts.root, "data-variant": variant, ...rest, children: [icon === undefined || icon === null ? null : (_jsx("span", { className: badgeParts.icon, children: _jsx(Icon, { size: "xs", children: icon }) })), label] }));
+}

package/dist/components/core/badge/Badge.types.d.ts

@@ -0,0 +1,24 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+export interface BadgeOwnProps {
+    /**
+     * `accent` — The default, and the one a marketing page nearly always wants. A brand-coloured mark rather than a coral block: the tint carries the colour and the ink carries the words, which is what lets a badge sit on a card without competing with the card
+     * `neutral` — The badge is naming a kind rather than making a claim — a category on an article, a market type on a card. It marks without asking, which is what lets a page use several without the set becoming loud
+     */
+    variant?: 'accent' | 'neutral';
+    /** Always — it is the whole component. One or two words: 'New', 'Most popular', 'Save 20%'. A string rather than a node, for the reason CardBody's title is one: a node prop cannot be given text in an examples row, and a badge nobody can show is worse than one that cannot hold a link */
+    label: string;
+    /** A glyph that says what the badge is about faster than its word does — a globe on a badge reading 'For platforms', a spark on one reading 'New'. Pass the glyph; the badge draws it at its own step. Alongside the label and never instead of it.
+  
+  The regular weight, always: `GlobeRegularIcon` rather than `GlobeSolidIcon` or `GlobeLightIcon`. Icon has no weight prop and cannot have one — a Quill glyph's weight is chosen when it is imported — so this is the call site's to get right and there is nothing that will catch it */
+    icon?: ReactNode;
+}
+export type BadgeProps = BadgeOwnProps & Omit<HTMLAttributes<HTMLSpanElement>, 'className' | 'variant' | 'label' | 'icon'>;
+/** The class each part carries. Apply these — do not retype them. */
+export declare const badgeParts: {
+    readonly root: "dds-badge";
+    readonly icon: "dds-badge__icon";
+};
+/** Generated so defaults cannot drift from the contract. */
+export declare const badgeDefaults: {
+    readonly variant: "accent";
+};

package/dist/components/core/badge/Badge.types.js

@@ -0,0 +1,8 @@
+// GENERATED from badge.contract.json. Do not edit.
+/** The class each part carries. Apply these — do not retype them. */
+export const badgeParts = {
+    root: 'dds-badge',
+    icon: 'dds-badge__icon',
+};
+/** Generated so defaults cannot drift from the contract. */
+export const badgeDefaults = { variant: 'accent' };

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

@@ -0,0 +1,32 @@
+/*
+ * Scoped to this package, like the generated sheet beside it.
+ *
+ * `:where([data-dds-context="marketing"])` confines the rule without contributing
+ * specificity, so what it overrides it overrides on its own terms: one class for
+ * `.dds-badge` and one for the `:has()` argument, against the generated rule's one.
+ */
+
+/*
+ * The leading inset closes up around a glyph.
+ *
+ * The root is inset twelve either side, which is the measure for words: at `radius.pill`
+ * the corner is half a twenty-four-pixel height, so the ends curve through twelve and a
+ * shorter inset would start the first letter inside the arc.
+ *
+ * A glyph is not a letter, and it does not need the same room. It arrives as a sixteen-pixel
+ * box with its mark drawn inside it, so it carries a margin a letter does not and twelve in
+ * front of it reads as more air than the label's own end has. Eight is the step below, and it
+ * is the one the badge was inset by before words and glyph were told apart — tighter than the
+ * label without collapsing onto the curve, which four does: four is the block inset, and an
+ * inline inset that matches it puts the mark hard against the arc at the one place the pill is
+ * narrowest.
+ *
+ * Here rather than in the contract because what decides it is whether the page passed an
+ * icon, and an icon is a slot rather than a styling axis: there is no value for a binding's
+ * `when` to name. `:has()` asks the question the DOM can answer — this badge, containing the
+ * part that is only rendered when there is a glyph — which is the same move BottomSheet's
+ * header makes about its leading end.
+ */
+:where([data-dds-context="marketing"]) .dds-badge:has(.dds-badge__icon) {
+  padding-inline-start: var(--space-inset-xs);
+}

package/dist/components/core/bottom-sheet/BottomSheet.css

@@ -0,0 +1,178 @@
+/* GENERATED from bottomsheet.contract.json. Do not edit. */
+
+:where([data-dds-context="marketing"]) .dds-bottomsheet {
+  transition-property: opacity, visibility;
+  align-items: flex-end;
+  display: flex;
+  inset: 0;
+  justify-content: center;
+  position: fixed;
+  transition-duration: var(--motion-duration-slow);
+  transition-timing-function: var(--motion-easing-enter);
+}
+
+:where([data-dds-context="marketing"]) .dds-bottomsheet .dds-bottomsheet__scrim {
+  inset: 0;
+  position: absolute;
+  background-color: var(--color-bg-overlay);
+}
+
+:where([data-dds-context="marketing"]) .dds-bottomsheet .dds-bottomsheet__frame {
+  transition-property: translate;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  inline-size: 100%;
+  max-block-size: 100%;
+  min-block-size: 0;
+  position: relative;
+  max-inline-size: var(--size-sheet-max);
+  transition-duration: var(--motion-duration-slow);
+  transition-timing-function: var(--motion-easing-enter);
+}
+
+:where([data-dds-context="marketing"]) .dds-bottomsheet .dds-bottomsheet__surface {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  inline-size: 100%;
+  max-block-size: 100%;
+  overflow: hidden;
+  position: relative;
+  background-color: var(--color-bg-surface-modal);
+  border-start-end-radius: var(--radius-surface);
+  border-start-start-radius: var(--radius-surface);
+  box-shadow: var(--elevation-surface-modal);
+  color: var(--color-fg-default);
+  font-family: var(--font-body-md-family);
+  font-size: var(--font-body-md-size);
+  font-weight: var(--font-body-md-weight);
+  line-height: var(--font-body-md-line-height);
+}
+
+:where([data-dds-context="marketing"]) .dds-bottomsheet .dds-bottomsheet__handle {
+  align-self: center;
+  flex-shrink: 0;
+  touch-action: none;
+  background-color: var(--color-bg-track);
+  block-size: var(--size-sheet-handle-height);
+  border-radius: var(--radius-pill);
+  inline-size: var(--size-sheet-handle-width);
+  margin-block-start: var(--space-inset-sm);
+}
+
+:where([data-dds-context="marketing"]) .dds-bottomsheet .dds-bottomsheet__header {
+  align-items: center;
+  box-sizing: border-box;
+  display: flex;
+  flex-shrink: 0;
+  touch-action: none;
+  padding-block-start: var(--space-inset-md);
+  padding-inline: var(--space-inset-md);
+}
+
+:where([data-dds-context="marketing"]) .dds-bottomsheet .dds-bottomsheet__leading {
+  align-items: center;
+  display: flex;
+}
+
+:where([data-dds-context="marketing"]) .dds-bottomsheet .dds-bottomsheet__heading {
+  display: flex;
+  flex: auto;
+  flex-direction: column;
+  min-inline-size: 0;
+  gap: var(--space-gap-xs);
+}
+
+:where([data-dds-context="marketing"]) .dds-bottomsheet .dds-bottomsheet__title {
+  inline-size: 100%;
+  margin: 0;
+  min-inline-size: 0;
+  overflow: hidden;
+  text-align: start;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--color-fg-default);
+  font-family: var(--font-title-family);
+  font-size: var(--font-title-size);
+  font-weight: var(--font-title-weight);
+  letter-spacing: var(--font-title-letter-spacing);
+  line-height: var(--font-title-line-height);
+}
+
+:where([data-dds-context="marketing"]) .dds-bottomsheet .dds-bottomsheet__trailing {
+  align-items: center;
+  display: flex;
+  gap: var(--space-gap-xs);
+}
+
+:where([data-dds-context="marketing"]) .dds-bottomsheet .dds-bottomsheet__description {
+  box-sizing: border-box;
+  margin: 0;
+  overflow: hidden;
+  text-align: start;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-family: var(--font-body-sm-family);
+  font-size: var(--font-body-sm-size);
+  font-weight: var(--font-body-sm-weight);
+  line-height: var(--font-body-sm-line-height);
+}
+
+:where([data-dds-context="marketing"]) .dds-bottomsheet .dds-bottomsheet__body {
+  box-sizing: border-box;
+  min-block-size: 0;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  padding-block-end: var(--space-inset-md);
+  padding-block-start: var(--space-inset-xs);
+  padding-inline: var(--space-inset-md);
+}
+
+:where([data-dds-context="marketing"]) .dds-bottomsheet[data-open="false"] {
+  pointer-events: none;
+  visibility: hidden;
+  opacity: var(--opacity-hidden);
+  transition-duration: var(--motion-duration-normal);
+  transition-timing-function: var(--motion-easing-exit);
+}
+
+:where([data-dds-context="marketing"]) .dds-bottomsheet[data-open="true"] {
+  pointer-events: auto;
+  visibility: visible;
+}
+
+:where([data-dds-context="marketing"]) .dds-bottomsheet[data-height="full"] .dds-bottomsheet__frame {
+  block-size: 100%;
+  max-inline-size: none;
+}
+
+:where([data-dds-context="marketing"]) .dds-bottomsheet[data-height="tall"] .dds-bottomsheet__frame {
+  block-size: 100%;
+}
+
+:where([data-dds-context="marketing"]) .dds-bottomsheet[data-height="full"] .dds-bottomsheet__surface {
+  block-size: 100%;
+  border-start-end-radius: var(--radius-none);
+  border-start-start-radius: var(--radius-none);
+}
+
+:where([data-dds-context="marketing"]) .dds-bottomsheet[data-height="tall"] .dds-bottomsheet__surface {
+  block-size: 100%;
+}
+
+:where([data-dds-context="marketing"]) .dds-bottomsheet[data-height="tall"] {
+  padding-block-start: var(--size-sheet-peek);
+}
+
+:where([data-dds-context="marketing"]) .dds-bottomsheet[data-open="false"] .dds-bottomsheet__frame {
+  transition-duration: var(--motion-duration-normal);
+  transition-timing-function: var(--motion-easing-exit);
+  translate: var(--motion-translate-enter);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :where([data-dds-context="marketing"]) .dds-bottomsheet,
+  :where([data-dds-context="marketing"]) .dds-bottomsheet * { transition: none; }
+}
+

package/dist/components/core/bottom-sheet/BottomSheet.d.ts

@@ -0,0 +1,22 @@
+import './BottomSheet.css';
+import './bottom-sheet-impl.css';
+import { type BottomSheetProps } from './BottomSheet.types.js';
+export type { BottomSheetProps };
+/**
+ * A panel that rises from the bottom edge to hold one focused task.
+ *
+ * Mounted whether it is open or not, which is the decision everything else here follows from.
+ * A sheet that mounts on opening has no previous state to animate out of, so the reveal would
+ * be a jump — and the contract's `open` axis is what the stylesheet varies, which it cannot do
+ * to an element that is not there. What keeps a shut sheet out of the reading order and out of
+ * the tab order is `visibility: hidden` in the generated CSS rather than anything written here:
+ * an `aria-hidden` or an `inert` set from this file would say the same thing twice, and the two
+ * would disagree the first time one of them changed.
+ *
+ * It owns none of its own openness. Every way out — the close button, the scrim, Escape, the
+ * drag — reports through `onOpenChange` and changes nothing, so a page that does not answer that
+ * callback has a sheet that cannot be closed. That is the same shape every other controlled
+ * component in this package takes, and the reason is the same: two things holding one fact
+ * disagree eventually, and the consumer is the one that has to win.
+ */
+export declare function BottomSheet(props: BottomSheetProps): import("react").JSX.Element;