@deriv-com/dds-marketing 1.1.2 → 1.1.3

package/dist/components/core/segmented-control-item/SegmentedControlItem.types.d.ts

@@ -10,7 +10,7 @@ export interface SegmentedControlItemOwnProps {
     value: string;
     /** Always — it is the segment's accessible name as well as its words, and a radio with no name is announced as a control with nothing in it. One or two words: a row is scanned across, and the segment that needs a phrase is a choice that wanted a list */
     label: string;
-    /** The glyph tells the modes apart faster than the words do — a card and a bank beside two payment methods. Import it from @deriv-com/quill-icons-web and pass the element */
+    /** The glyph tells the modes apart faster than the words do — a card and a bank beside two payment methods. Import it from @deriv-com/dds-marketing/icons and pass the element */
     icon?: ReactNode;
     /** This segment reports its own presses — logging which plan a visitor looked at, say. It is called with this segment's value, and SegmentedControl chains its own handler after it rather than replacing it */
     onSelect?: (value: string) => void;

package/dist/components/core/select/Select.css

@@ -151,6 +151,8 @@
   gap: var(--space-gap-xs);
   letter-spacing: var(--font-body-sm-letter-spacing);
   line-height: var(--font-body-sm-line-height);
+  transition-duration: var(--motion-duration-fast);
+  transition-timing-function: var(--motion-easing-standard);
 }
 
 :where([data-dds-context="marketing"]) .dds-select .dds-select__message-icon {

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

@@ -112,3 +112,61 @@
     animation: none;
   }
 }
+
+/*
+ * The status message fades in when it arrives.
+ *
+ * A contract binds transitions, and a transition needs a value to move from: the message is not
+ * in the DOM until a status is reported, so only a keyframe can bring it in. Opacity alone — the
+ * message takes the helper's place rather than pushing the row down, so there is no distance to
+ * travel, and moving it would shift the words being read. A status changing while the message is
+ * showing keeps the same element, and its colour moves with the transition the contract binds.
+ */
+@keyframes dds-select-message-in {
+  from {
+    opacity: 0;
+  }
+}
+
+:where([data-dds-context="marketing"]) .dds-select .dds-select__message {
+  animation: dds-select-message-in var(--motion-duration-normal) var(--motion-easing-enter);
+}
+
+/*
+ * The box shakes once when the field turns to an error, as TextInput's does.
+ *
+ * Once, on arrival: the animation is attached by the error status, so it plays when the status
+ * becomes error and not again while it stays one. Only the box moves; the label and the
+ * message hold still, so the words saying what went wrong can be read while it settles.
+ *
+ * Not while the list is open. The popup is drawn inside the box, so shaking the box would shake
+ * the answers being read along with it. A status that arrives while it is open shakes the box
+ * as the list closes, which is the moment the answer is handed in.
+ */
+@keyframes dds-select-shake {
+  20% {
+    translate: calc(var(--motion-distance-shake) * -1) 0;
+  }
+  40% {
+    translate: var(--motion-distance-shake) 0;
+  }
+  60% {
+    translate: calc(var(--motion-distance-shake) * -0.5) 0;
+  }
+  80% {
+    translate: calc(var(--motion-distance-shake) * 0.5) 0;
+  }
+}
+
+:where([data-dds-context="marketing"]) .dds-select[data-status="error"]:not(:has([aria-expanded="true"])) .dds-select__control {
+  animation: dds-select-shake var(--motion-duration-slow) var(--motion-easing-standard);
+}
+
+/* The generated reduce block is written from the token bindings and these are not. A reader who
+   has asked for less movement has asked for this too. */
+@media (prefers-reduced-motion: reduce) {
+  :where([data-dds-context="marketing"]) .dds-select .dds-select__message,
+  :where([data-dds-context="marketing"]) .dds-select[data-status="error"]:not(:has([aria-expanded="true"])) .dds-select__control {
+    animation: none;
+  }
+}

package/dist/components/core/text-area/TextArea.css

@@ -92,6 +92,8 @@
   gap: var(--space-gap-xs);
   letter-spacing: var(--font-body-sm-letter-spacing);
   line-height: var(--font-body-sm-line-height);
+  transition-duration: var(--motion-duration-fast);
+  transition-timing-function: var(--motion-easing-standard);
 }
 
 :where([data-dds-context="marketing"]) .dds-textarea .dds-textarea__message-icon {

package/dist/components/core/text-area/text-area-impl.css

@@ -34,3 +34,57 @@
 :where([data-dds-context="marketing"]) .dds-textarea__message-icon {
   block-size: calc(var(--font-body-sm-size) * var(--font-body-sm-line-height));
 }
+
+/*
+ * The status message fades in when it arrives.
+ *
+ * A contract binds transitions, and a transition needs a value to move from: the message is not
+ * in the DOM until a status is reported, so only a keyframe can bring it in. Opacity alone — the
+ * message takes the helper's place rather than pushing the row down, so there is no distance to
+ * travel, and moving it would shift the words being read. A status changing while the message is
+ * showing keeps the same element, and its colour moves with the transition the contract binds.
+ */
+@keyframes dds-textarea-message-in {
+  from {
+    opacity: 0;
+  }
+}
+
+:where([data-dds-context="marketing"]) .dds-textarea .dds-textarea__message {
+  animation: dds-textarea-message-in var(--motion-duration-normal) var(--motion-easing-enter);
+}
+
+/*
+ * The box shakes once when the field turns to an error, as TextInput's does.
+ *
+ * Once, on arrival: the animation is attached by the error status, so it plays when the status
+ * becomes error and not again while it stays one. Only the box moves; the label and the
+ * message hold still, so the words saying what went wrong can be read while it settles.
+ */
+@keyframes dds-textarea-shake {
+  20% {
+    translate: calc(var(--motion-distance-shake) * -1) 0;
+  }
+  40% {
+    translate: var(--motion-distance-shake) 0;
+  }
+  60% {
+    translate: calc(var(--motion-distance-shake) * -0.5) 0;
+  }
+  80% {
+    translate: calc(var(--motion-distance-shake) * 0.5) 0;
+  }
+}
+
+:where([data-dds-context="marketing"]) .dds-textarea[data-status="error"] .dds-textarea__control {
+  animation: dds-textarea-shake var(--motion-duration-slow) var(--motion-easing-standard);
+}
+
+/* The generated reduce block is written from the token bindings and these are not. A reader who
+   has asked for less movement has asked for this too. */
+@media (prefers-reduced-motion: reduce) {
+  :where([data-dds-context="marketing"]) .dds-textarea .dds-textarea__message,
+  :where([data-dds-context="marketing"]) .dds-textarea[data-status="error"] .dds-textarea__control {
+    animation: none;
+  }
+}

package/dist/components/core/text-input/TextInput.css

@@ -118,6 +118,8 @@
   gap: var(--space-gap-xs);
   letter-spacing: var(--font-body-sm-letter-spacing);
   line-height: var(--font-body-sm-line-height);
+  transition-duration: var(--motion-duration-fast);
+  transition-timing-function: var(--motion-easing-standard);
 }
 
 :where([data-dds-context="marketing"]) .dds-textinput .dds-textinput__message-icon {

package/dist/components/core/text-input/text-input-impl.css

@@ -34,3 +34,66 @@
 :where([data-dds-context="marketing"]) .dds-textinput__message-icon {
   block-size: calc(var(--font-body-sm-size) * var(--font-body-sm-line-height));
 }
+
+/*
+ * The status message fades in when it arrives.
+ *
+ * A contract binds transitions, and a transition needs a value to move from: the message is not
+ * in the DOM until a status is reported, so there is nothing to transition and only a keyframe
+ * can bring it in. Opacity alone — the message takes the helper's place rather than pushing the
+ * row down, so there is no distance to travel, and moving it would shift the words being read.
+ *
+ * It plays once, on arrival. A status changing while the message is already showing keeps the
+ * same element, and its colour moves with the transition the contract binds rather than the
+ * whole message blinking out and back.
+ */
+@keyframes dds-textinput-message-in {
+  from {
+    opacity: 0;
+  }
+}
+
+:where([data-dds-context="marketing"]) .dds-textinput .dds-textinput__message {
+  animation: dds-textinput-message-in var(--motion-duration-normal) var(--motion-easing-enter);
+}
+
+/*
+ * The box shakes once when the field turns to an error.
+ *
+ * Once, on arrival: the animation is attached by the error status, so it plays when the status
+ * becomes error and not again while it stays one — typing on in a field that is still wrong does
+ * not shake it at every keystroke. Leaving the error and coming back is a new refusal and shakes
+ * again. Only the box moves; the label above it and the message below hold still, so the words
+ * saying what went wrong can be read while it settles.
+ *
+ * Each swing is smaller than the last, so it reads as a shake that stops rather than a vibration
+ * that is cut off. The swing is symmetric, so it reads the same in either writing direction.
+ */
+@keyframes dds-textinput-shake {
+  20% {
+    translate: calc(var(--motion-distance-shake) * -1) 0;
+  }
+  40% {
+    translate: var(--motion-distance-shake) 0;
+  }
+  60% {
+    translate: calc(var(--motion-distance-shake) * -0.5) 0;
+  }
+  80% {
+    translate: calc(var(--motion-distance-shake) * 0.5) 0;
+  }
+}
+
+:where([data-dds-context="marketing"]) .dds-textinput[data-status="error"] .dds-textinput__control {
+  animation: dds-textinput-shake var(--motion-duration-slow) var(--motion-easing-standard);
+}
+
+/* The generated reduce block is written from the token bindings and these are not. A reader who
+   has asked for less movement has asked for this too — and a shake is the movement most likely
+   to be the reason they asked. */
+@media (prefers-reduced-motion: reduce) {
+  :where([data-dds-context="marketing"]) .dds-textinput .dds-textinput__message,
+  :where([data-dds-context="marketing"]) .dds-textinput[data-status="error"] .dds-textinput__control {
+    animation: none;
+  }
+}

package/dist/components/estimator-data.d.ts

@@ -0,0 +1,29 @@
+/**
+ * The figures an Estimator lays out once a reader has filled its inputs in.
+ *
+ * Exported from the package for the reason `stats-data.ts` and `comparison-cards-data.ts` are: a
+ * block whose content is a list is one whose consumer builds a value before passing it.
+ *
+ * A record rather than a component per figure, because a result is a number and the words that say
+ * what it is — nothing in it is an element a page composes. The page works the figures out, from a
+ * live feed, a formula or both; the block only sets them, so the same block serves a margin
+ * calculator, a crypto converter and an affiliate's income estimate without knowing which.
+ */
+/** One figure an Estimator shows: what it is, its value, and anything a reader needs to read it. */
+export interface EstimatorResult {
+    /** What the figure is, in a few words: 'Margin required', 'You receive', 'Monthly income'. */
+    label: string;
+    /**
+     * The figure, written exactly as it is to be read: '1,240.50 USD', '0.0214 BTC', '$2,400'.
+     *
+     * A string rather than a number, because the way it is written is the page's: its currency, its
+     * digits, its grouping, its locale. The block draws it as given and isolates it, so a sign or a
+     * currency keeps its place in a right-to-left line.
+     */
+    value: string;
+    /**
+     * A line under the figure, where it needs one to be read correctly: 'Per lot, at 1:500
+     * leverage', 'Estimate at the current price'. Optional; most figures need none.
+     */
+    note?: string;
+}

package/dist/components/estimator-data.js

@@ -0,0 +1,12 @@
+/**
+ * The figures an Estimator lays out once a reader has filled its inputs in.
+ *
+ * Exported from the package for the reason `stats-data.ts` and `comparison-cards-data.ts` are: a
+ * block whose content is a list is one whose consumer builds a value before passing it.
+ *
+ * A record rather than a component per figure, because a result is a number and the words that say
+ * what it is — nothing in it is an element a page composes. The page works the figures out, from a
+ * live feed, a formula or both; the block only sets them, so the same block serves a margin
+ * calculator, a crypto converter and an affiliate's income estimate without knowing which.
+ */
+export {};

package/dist/components/index.d.ts

@@ -44,6 +44,8 @@ export { DownloadBanner, type DownloadBannerProps } from './blocks/download-bann
 export { downloadBannerParts, downloadBannerDefaults } from './blocks/download-banner/DownloadBanner.types.js';
 export { DropdownMenu, type DropdownMenuProps } from './core/dropdown-menu/DropdownMenu.js';
 export { dropdownMenuParts, dropdownMenuDefaults } from './core/dropdown-menu/DropdownMenu.types.js';
+export { Estimator, type EstimatorProps } from './blocks/estimator/Estimator.js';
+export { estimatorParts, estimatorDefaults } from './blocks/estimator/Estimator.types.js';
 export { FaqAccordion, type FaqAccordionProps } from './blocks/faq-accordion/FaqAccordion.js';
 export { faqAccordionParts, faqAccordionDefaults } from './blocks/faq-accordion/FaqAccordion.types.js';
 export { FeatureBullets, type FeatureBulletsProps } from './blocks/feature-bullets/FeatureBullets.js';
@@ -187,6 +189,7 @@ export type { ComparisonCardsCard } from './comparison-cards-data.js';
 export type { ComparisonTableColumn, ComparisonTableRow } from './comparison-table-data.js';
 export type { DataTableColumn, DataTableRow } from './data-table-data.js';
 export type { DownloadBannerBadge, DownloadBannerQr } from './download-banner-data.js';
+export type { EstimatorResult } from './estimator-data.js';
 export type { LogoTile } from './logo-data.js';
 export type { ResourceBannerLink } from './resource-banner-data.js';
 export type { SceneScrollScene } from './scene-scroll-data.js';

package/dist/components/index.js

@@ -45,6 +45,8 @@ export { DownloadBanner } from './blocks/download-banner/DownloadBanner.js';
 export { downloadBannerParts, downloadBannerDefaults } from './blocks/download-banner/DownloadBanner.types.js';
 export { DropdownMenu } from './core/dropdown-menu/DropdownMenu.js';
 export { dropdownMenuParts, dropdownMenuDefaults } from './core/dropdown-menu/DropdownMenu.types.js';
+export { Estimator } from './blocks/estimator/Estimator.js';
+export { estimatorParts, estimatorDefaults } from './blocks/estimator/Estimator.types.js';
 export { FaqAccordion } from './blocks/faq-accordion/FaqAccordion.js';
 export { faqAccordionParts, faqAccordionDefaults } from './blocks/faq-accordion/FaqAccordion.types.js';
 export { FeatureBullets } from './blocks/feature-bullets/FeatureBullets.js';

package/dist/icons/accounts.d.ts

@@ -0,0 +1 @@
+export * from '@deriv-com/quill-icons-web/accounts';

package/dist/icons/accounts.js

@@ -0,0 +1 @@
+export * from '@deriv-com/quill-icons-web/accounts';

package/dist/icons/app-stores.d.ts

@@ -0,0 +1 @@
+export * from '@deriv-com/quill-icons-web/app-stores';

package/dist/icons/app-stores.js

@@ -0,0 +1 @@
+export * from '@deriv-com/quill-icons-web/app-stores';

package/dist/icons/currency.d.ts

@@ -0,0 +1 @@
+export * from '@deriv-com/quill-icons-web/currency';

package/dist/icons/currency.js

@@ -0,0 +1 @@
+export * from '@deriv-com/quill-icons-web/currency';

package/dist/icons/flag.d.ts

@@ -0,0 +1 @@
+export * from '@deriv-com/quill-icons-web/flag';

package/dist/icons/flag.js

@@ -0,0 +1 @@
+export * from '@deriv-com/quill-icons-web/flag';

package/dist/icons/illustrative.d.ts

@@ -0,0 +1 @@
+export * from '@deriv-com/quill-icons-web/illustrative';

package/dist/icons/illustrative.js

@@ -0,0 +1 @@
+export * from '@deriv-com/quill-icons-web/illustrative';

package/dist/icons/index.d.ts

@@ -0,0 +1 @@
+export * from '@deriv-com/quill-icons-web';

package/dist/icons/index.js

@@ -0,0 +1,4 @@
+// Every Quill icon, re-exported so an app installs only @deriv-com/dds-marketing. Prefer a
+// group subpath (`@deriv-com/dds-marketing/icons/system`) where you can: the full index is ~1,850 icons,
+// and a dev server that does not tree-shake loads all of them.
+export * from '@deriv-com/quill-icons-web';

package/dist/icons/markets.d.ts

@@ -0,0 +1 @@
+export * from '@deriv-com/quill-icons-web/markets';

package/dist/icons/markets.js

@@ -0,0 +1 @@
+export * from '@deriv-com/quill-icons-web/markets';

package/dist/icons/social.d.ts

@@ -0,0 +1 @@
+export * from '@deriv-com/quill-icons-web/social';

package/dist/icons/social.js

@@ -0,0 +1 @@
+export * from '@deriv-com/quill-icons-web/social';

package/dist/icons/system.d.ts

@@ -0,0 +1 @@
+export * from '@deriv-com/quill-icons-web/system';

package/dist/icons/system.js

@@ -0,0 +1 @@
+export * from '@deriv-com/quill-icons-web/system';

package/dist/icons/trade.d.ts

@@ -0,0 +1 @@
+export * from '@deriv-com/quill-icons-web/trade';

package/dist/icons/trade.js

@@ -0,0 +1 @@
+export * from '@deriv-com/quill-icons-web/trade';

package/dist/marketing.css

@@ -224,6 +224,7 @@
   --layer-overlay: 800;
   --layer-popup: 400;
   --motion-distance-drift: 64px;
+  --motion-distance-shake: 4px;
   --motion-duration-dramatic: 700ms;
   --motion-duration-drift: 10000ms;
   --motion-duration-dwell: 5000ms;
@@ -581,6 +582,7 @@
   --layer-overlay: 800;
   --layer-popup: 400;
   --motion-distance-drift: 64px;
+  --motion-distance-shake: 4px;
   --motion-duration-dramatic: 700ms;
   --motion-duration-drift: 10000ms;
   --motion-duration-dwell: 5000ms;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deriv-com/dds-marketing",
-  "version": "1.1.2",
+  "version": "1.1.3",
   "description": "Deriv Design System — components and tokens for marketing sites (landing pages, pricing, sign-up).",
   "license": "MIT",
   "author": {
@@ -19,6 +19,46 @@
     },
     "./marketing.css": "./dist/marketing.css",
     "./fonts.css": "./dist/fonts/fonts.css",
+    "./icons": {
+      "types": "./dist/icons/index.d.ts",
+      "default": "./dist/icons/index.js"
+    },
+    "./icons/accounts": {
+      "types": "./dist/icons/accounts.d.ts",
+      "default": "./dist/icons/accounts.js"
+    },
+    "./icons/app-stores": {
+      "types": "./dist/icons/app-stores.d.ts",
+      "default": "./dist/icons/app-stores.js"
+    },
+    "./icons/currency": {
+      "types": "./dist/icons/currency.d.ts",
+      "default": "./dist/icons/currency.js"
+    },
+    "./icons/flag": {
+      "types": "./dist/icons/flag.d.ts",
+      "default": "./dist/icons/flag.js"
+    },
+    "./icons/illustrative": {
+      "types": "./dist/icons/illustrative.d.ts",
+      "default": "./dist/icons/illustrative.js"
+    },
+    "./icons/markets": {
+      "types": "./dist/icons/markets.d.ts",
+      "default": "./dist/icons/markets.js"
+    },
+    "./icons/social": {
+      "types": "./dist/icons/social.d.ts",
+      "default": "./dist/icons/social.js"
+    },
+    "./icons/system": {
+      "types": "./dist/icons/system.d.ts",
+      "default": "./dist/icons/system.js"
+    },
+    "./icons/trade": {
+      "types": "./dist/icons/trade.d.ts",
+      "default": "./dist/icons/trade.js"
+    },
     "./package.json": "./package.json"
   },
   "files": [
@@ -62,8 +102,10 @@
     "promote:marketing": "node --env-file=../../.env --import tsx ../../src/figma/promote-cli.ts marketing --package-root .",
     "ratify": "node --import tsx ../../src/ratify/cli.ts --package-root ."
   },
+  "dependencies": {
+    "@deriv-com/quill-icons-web": "~2.0.0"
+  },
   "peerDependencies": {
-    "@deriv-com/quill-icons-web": "~2.0.0",
     "react": ">=19",
     "react-dom": ">=19"
   }