@deriv-com/dds-marketing 1.0.2 → 1.1.1

package/dist/components/index.js

@@ -5,6 +5,8 @@ export { AccordionItem } from './core/accordion-item/AccordionItem.js';
 export { accordionItemParts, accordionItemDefaults } from './core/accordion-item/AccordionItem.types.js';
 export { AspectRatio } from './layout/aspect-ratio/AspectRatio.js';
 export { aspectRatioParts, aspectRatioDefaults } from './layout/aspect-ratio/AspectRatio.types.js';
+export { Awards } from './blocks/awards/Awards.js';
+export { awardsParts, awardsDefaults } from './blocks/awards/Awards.types.js';
 export { Background } from './core/background/Background.js';
 export { backgroundParts, backgroundDefaults } from './core/background/Background.types.js';
 export { Badge } from './core/badge/Badge.js';
@@ -27,12 +29,20 @@ export { CardButton } from './core/card-button/CardButton.js';
 export { cardButtonParts, cardButtonDefaults } from './core/card-button/CardButton.types.js';
 export { Checkbox } from './core/checkbox/Checkbox.js';
 export { checkboxParts, checkboxDefaults } from './core/checkbox/Checkbox.types.js';
+export { ComparisonCards } from './blocks/comparison-cards/ComparisonCards.js';
+export { comparisonCardsParts, comparisonCardsDefaults } from './blocks/comparison-cards/ComparisonCards.types.js';
+export { ComparisonTable } from './blocks/comparison-table/ComparisonTable.js';
+export { comparisonTableParts, comparisonTableDefaults } from './blocks/comparison-table/ComparisonTable.types.js';
 export { CtaBanner } from './blocks/cta-banner/CtaBanner.js';
 export { ctaBannerParts, ctaBannerDefaults } from './blocks/cta-banner/CtaBanner.types.js';
 export { CtaBannerSlider } from './blocks/cta-banner-slider/CtaBannerSlider.js';
 export { ctaBannerSliderParts, ctaBannerSliderDefaults } from './blocks/cta-banner-slider/CtaBannerSlider.types.js';
+export { DataTable } from './blocks/data-table/DataTable.js';
+export { dataTableParts, dataTableDefaults } from './blocks/data-table/DataTable.types.js';
 export { Divider } from './core/divider/Divider.js';
 export { dividerParts, dividerDefaults } from './core/divider/Divider.types.js';
+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 { FaqAccordion } from './blocks/faq-accordion/FaqAccordion.js';
@@ -41,10 +51,14 @@ export { FeatureBullets } from './blocks/feature-bullets/FeatureBullets.js';
 export { featureBulletsParts, featureBulletsDefaults } from './blocks/feature-bullets/FeatureBullets.types.js';
 export { FeatureCards } from './blocks/feature-cards/FeatureCards.js';
 export { featureCardsParts, featureCardsDefaults } from './blocks/feature-cards/FeatureCards.types.js';
+export { FeatureCardsCarousel } from './blocks/feature-cards-carousel/FeatureCardsCarousel.js';
+export { featureCardsCarouselParts, featureCardsCarouselDefaults } from './blocks/feature-cards-carousel/FeatureCardsCarousel.types.js';
 export { FeatureScroll } from './blocks/feature-scroll/FeatureScroll.js';
 export { featureScrollParts, featureScrollDefaults } from './blocks/feature-scroll/FeatureScroll.types.js';
 export { FeatureSplit } from './blocks/feature-split/FeatureSplit.js';
 export { featureSplitParts, featureSplitDefaults } from './blocks/feature-split/FeatureSplit.types.js';
+export { FeatureStack } from './blocks/feature-stack/FeatureStack.js';
+export { featureStackParts, featureStackDefaults } from './blocks/feature-stack/FeatureStack.types.js';
 export { FilterChip } from './core/filter-chip/FilterChip.js';
 export { filterChipParts, filterChipDefaults } from './core/filter-chip/FilterChip.types.js';
 export { Footer } from './core/footer/Footer.js';
@@ -59,6 +73,8 @@ export { IllustrationCard } from './core/illustration-card/IllustrationCard.js';
 export { illustrationCardParts, illustrationCardDefaults } from './core/illustration-card/IllustrationCard.types.js';
 export { IllustrationScene } from './core/illustration-scene/IllustrationScene.js';
 export { illustrationSceneParts, illustrationSceneDefaults } from './core/illustration-scene/IllustrationScene.types.js';
+export { ImageBanner } from './blocks/image-banner/ImageBanner.js';
+export { imageBannerParts, imageBannerDefaults } from './blocks/image-banner/ImageBanner.types.js';
 export { LandingHero } from './blocks/landing-hero/LandingHero.js';
 export { landingHeroParts, landingHeroDefaults } from './blocks/landing-hero/LandingHero.types.js';
 export { Link } from './core/link/Link.js';
@@ -96,8 +112,12 @@ export { ProductHero } from './blocks/product-hero/ProductHero.js';
 export { productHeroParts, productHeroDefaults } from './blocks/product-hero/ProductHero.types.js';
 export { RemovableChip } from './core/removable-chip/RemovableChip.js';
 export { removableChipParts, removableChipDefaults } from './core/removable-chip/RemovableChip.types.js';
+export { ResourceBanner } from './blocks/resource-banner/ResourceBanner.js';
+export { resourceBannerParts, resourceBannerDefaults } from './blocks/resource-banner/ResourceBanner.types.js';
 export { Row } from './layout/row/Row.js';
 export { rowParts, rowDefaults } from './layout/row/Row.types.js';
+export { SceneScroll } from './blocks/scene-scroll/SceneScroll.js';
+export { sceneScrollParts, sceneScrollDefaults } from './blocks/scene-scroll/SceneScroll.types.js';
 export { Scroller } from './layout/scroller/Scroller.js';
 export { scrollerParts, scrollerDefaults } from './layout/scroller/Scroller.types.js';
 export { SearchInput } from './core/search-input/SearchInput.js';
@@ -114,8 +134,14 @@ export { Spinner } from './core/spinner/Spinner.js';
 export { spinnerParts, spinnerDefaults } from './core/spinner/Spinner.types.js';
 export { Stack } from './layout/stack/Stack.js';
 export { stackParts, stackDefaults } from './layout/stack/Stack.types.js';
+export { Stats } from './blocks/stats/Stats.js';
+export { statsParts, statsDefaults } from './blocks/stats/Stats.types.js';
 export { StatusDot } from './core/status-dot/StatusDot.js';
 export { statusDotParts, statusDotDefaults } from './core/status-dot/StatusDot.types.js';
+export { Steps } from './blocks/steps/Steps.js';
+export { stepsParts, stepsDefaults } from './blocks/steps/Steps.types.js';
+export { StickyCards } from './blocks/sticky-cards/StickyCards.js';
+export { stickyCardsParts, stickyCardsDefaults } from './blocks/sticky-cards/StickyCards.types.js';
 export { SubdomainNavbar } from './core/subdomain-navbar/SubdomainNavbar.js';
 export { subdomainNavbarParts, subdomainNavbarDefaults } from './core/subdomain-navbar/SubdomainNavbar.types.js';
 export { Tab } from './core/tab/Tab.js';
@@ -135,6 +161,8 @@ export { TableRow } from './core/table-row/TableRow.js';
 export { tableRowParts, tableRowDefaults } from './core/table-row/TableRow.types.js';
 export { TabList } from './core/tab-list/TabList.js';
 export { tabListParts } from './core/tab-list/TabList.types.js';
+export { TeamGrid } from './blocks/team-grid/TeamGrid.js';
+export { teamGridParts, teamGridDefaults } from './blocks/team-grid/TeamGrid.types.js';
 export { TestimonialRow } from './blocks/testimonial-row/TestimonialRow.js';
 export { testimonialRowParts, testimonialRowDefaults } from './blocks/testimonial-row/TestimonialRow.types.js';
 export { TestimonialSlider } from './blocks/testimonial-slider/TestimonialSlider.js';
@@ -143,6 +171,10 @@ export { TextArea } from './core/text-area/TextArea.js';
 export { textAreaParts, textAreaDefaults } from './core/text-area/TextArea.types.js';
 export { TextInput } from './core/text-input/TextInput.js';
 export { textInputParts, textInputDefaults } from './core/text-input/TextInput.types.js';
+export { TextScroll } from './blocks/text-scroll/TextScroll.js';
+export { textScrollParts, textScrollDefaults } from './blocks/text-scroll/TextScroll.types.js';
+export { Tiers } from './blocks/tiers/Tiers.js';
+export { tiersParts, tiersDefaults } from './blocks/tiers/Tiers.types.js';
 export { Tooltip } from './core/tooltip/Tooltip.js';
 export { tooltipParts, tooltipDefaults } from './core/tooltip/Tooltip.types.js';
 export { useTooltip, useTooltipDefaults } from './core/tooltip/use-tooltip.js';

package/dist/components/resource-banner-data.d.ts

@@ -0,0 +1,34 @@
+/**
+ * The resources a ResourceBanner points at.
+ *
+ * Exported from the package for the reason `testimonial-row-data.ts` and `banner-data.ts` are: a
+ * block whose content is a list is one whose consumer builds a value before passing it.
+ *
+ * Records rather than a Link per resource, because a resource is words and a destination — nothing
+ * in it is an element a page composes — and every one is drawn the same way. A stack whose rows
+ * could each bring their own variant, tone or mark is a stack that stops reading as one list, and
+ * what a link has to say about leaving the site or starting a download is the block's to say, in
+ * the same words on every row.
+ */
+/** One resource in a ResourceBanner: what it is called, and where it is. */
+export interface ResourceBannerLink {
+    /**
+     * The name of the guide, policy or page, as the reader would look for it: "Terms and
+     * conditions", "Risk disclosure". The stack is read as a list, so each label has to make sense
+     * on its own — never "Read more" or "Click here".
+     */
+    label: string;
+    /** Where it is, as a URL. */
+    href: string;
+    /**
+     * The destination is off this site. It opens in a new tab, carries Link's up-right mark, and its
+     * accessible name says so in the block's `externalLabel`. Absent, the link opens in place.
+     */
+    external?: boolean;
+    /**
+     * The destination is a file to save rather than a page to read — a PDF of a policy, a form. The
+     * anchor takes `download`, the row is marked with a file rather than an arrow, and its accessible
+     * name says so in the block's `downloadLabel`.
+     */
+    download?: boolean;
+}

package/dist/components/resource-banner-data.js

@@ -0,0 +1,13 @@
+/**
+ * The resources a ResourceBanner points at.
+ *
+ * Exported from the package for the reason `testimonial-row-data.ts` and `banner-data.ts` are: a
+ * block whose content is a list is one whose consumer builds a value before passing it.
+ *
+ * Records rather than a Link per resource, because a resource is words and a destination — nothing
+ * in it is an element a page composes — and every one is drawn the same way. A stack whose rows
+ * could each bring their own variant, tone or mark is a stack that stops reading as one list, and
+ * what a link has to say about leaving the site or starting a download is the block's to say, in
+ * the same words on every row.
+ */
+export {};

package/dist/components/scene-scroll-data.d.ts

@@ -0,0 +1,24 @@
+/**
+ * The two scenes a SceneScroll changes between.
+ *
+ * Exported from the package for the reason the other data shapes are: the page builds the value and
+ * hands it over, and building it without the type means writing the shape out twice. A record
+ * rather than a node, because the block draws both the photograph and the words itself — it has to,
+ * to stack one scene over the other and change them over as the reader scrolls.
+ */
+import type { BlockImage } from './block-image-data.js';
+/** One scene: the photograph that fills the band, and the words set over it. */
+export interface SceneScrollScene {
+    /**
+     * What the scene says, in a few words. Drawn as a heading: the first scene's names the section,
+     * and the second's sits one level under it.
+     */
+    title: string;
+    /** A line under the title saying what it means for the reader. A sentence or two, not a paragraph. */
+    description?: string;
+    /**
+     * The photograph filling the band behind the words, cropped to fill it. Usually decoration, so
+     * `alt` is empty; a photograph that shows something the words do not say is described.
+     */
+    image: BlockImage;
+}

package/dist/components/scene-scroll-data.js

@@ -0,0 +1,9 @@
+/**
+ * The two scenes a SceneScroll changes between.
+ *
+ * Exported from the package for the reason the other data shapes are: the page builds the value and
+ * hands it over, and building it without the type means writing the shape out twice. A record
+ * rather than a node, because the block draws both the photograph and the words itself — it has to,
+ * to stack one scene over the other and change them over as the reader scrolls.
+ */
+export {};

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

@@ -0,0 +1,28 @@
+/**
+ * The key numbers a Stats section sets in a row.
+ *
+ * Exported from the package for the reason `testimonial-row-data.ts` and `scroll-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 figure is a number and the words that say
+ * what it counts — nothing in it is an element a page composes — and a set of them is what a CMS
+ * or a facts sheet hands over.
+ */
+/** One key number in a Stats section: the figure, and what it counts. */
+export interface StatsFigure {
+    /**
+     * The figure, written exactly as it is to be read: '3M+', '$5', '250+', '24/7', '1.2B'.
+     *
+     * A string rather than a number, because the way it is written is the claim — the currency sign,
+     * the abbreviation, the plus that says "at least". It is drawn as given, in the page's first
+     * HTML and to assistive technology alike. Where it holds one number, that number counts up from
+     * nought as the section arrives, keeping whatever is written either side of it; where it holds
+     * none, or more than one — '24/7' is a phrase, not a quantity — it simply shows.
+     */
+    value: string;
+    /**
+     * What the figure counts, in a few words under it: 'Traders worldwide', 'Minimum deposit'.
+     * Sentence case, and short enough that a row of them reads as a row.
+     */
+    label: string;
+}

package/dist/components/stats-data.js

@@ -0,0 +1,11 @@
+/**
+ * The key numbers a Stats section sets in a row.
+ *
+ * Exported from the package for the reason `testimonial-row-data.ts` and `scroll-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 figure is a number and the words that say
+ * what it counts — nothing in it is an element a page composes — and a set of them is what a CMS
+ * or a facts sheet hands over.
+ */
+export {};

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

@@ -0,0 +1,38 @@
+/**
+ * The steps a Steps section numbers down its list.
+ *
+ * Exported from the package for the reason `scroll-data.ts` and `testimonial-slider-data.ts` are: a
+ * block whose content is a list is one whose consumer builds a value before passing it, and building
+ * it without the type means writing the shape out a second time.
+ *
+ * A record rather than a component per step, because a step is a name and a sentence — nothing in it
+ * is an element a page composes — and the number in front of it is the section's to draw, not the
+ * page's. A set that arrives as data can be mapped from a CMS and reordered by the page that holds
+ * it, and the numbers follow the order without anybody retyping them.
+ */
+import type { BlockImage } from './block-image-data.js';
+/** One step in a Steps section: what the reader does, and what it involves. */
+export interface StepsItem {
+    /**
+     * What the reader does at this step, as a short imperative — 'Open an account', 'Fund it'.
+     *
+     * It is what a reader scanning the list takes in, so a verb and its object beats a sentence. Drawn
+     * as a heading, which is what lets a screen reader move from one step to the next.
+     */
+    title: string;
+    /**
+     * What the step involves, in a sentence.
+     *
+     * Under about two hundred characters: past that a list of four runs longer than the square beside
+     * it and the two halves stop lining up, which is the one thing a split has to get right.
+     */
+    description: string;
+    /**
+     * A picture of this step — a screenshot of the screen it happens on.
+     *
+     * Given on every step, the picture beside the list is the current step's: the first while the
+     * list is still, and each in turn under `autoplay`. Decoration, as the section's one picture is:
+     * what the step says is its title and its line.
+     */
+    image?: BlockImage;
+}

package/dist/components/steps-data.js

@@ -0,0 +1,13 @@
+/**
+ * The steps a Steps section numbers down its list.
+ *
+ * Exported from the package for the reason `scroll-data.ts` and `testimonial-slider-data.ts` are: a
+ * block whose content is a list is one whose consumer builds a value before passing it, and building
+ * it without the type means writing the shape out a second time.
+ *
+ * A record rather than a component per step, because a step is a name and a sentence — nothing in it
+ * is an element a page composes — and the number in front of it is the section's to draw, not the
+ * page's. A set that arrives as data can be mapped from a CMS and reordered by the page that holds
+ * it, and the numbers follow the order without anybody retyping them.
+ */
+export {};

package/dist/components/sticky-cards-data.d.ts

@@ -0,0 +1,43 @@
+/**
+ * The cards a StickyCards section piles up as the page scrolls.
+ *
+ * Exported from the package for the reason `testimonial-row-data.ts` is: a block whose content is a
+ * list is one whose consumer builds a value before passing it.
+ *
+ * Records rather than a component per card, because a card here is words, a picture and a fill —
+ * nothing in it is an element a page composes — and a list of markets or steps is what a content
+ * system hands over. The one thing a record cannot carry, an animation the page plays itself, comes
+ * through the block's `media` callback instead, so the records stay plain data.
+ */
+import type { BlockImage } from './block-image-data.js';
+/** One card in a StickyCards pile: what it is called, what it says, and what it shows. */
+export interface StickyCardsItem {
+    /** What the card is about, in a few words — "Forex", "Sign up". It is the card's heading. */
+    title: string;
+    /**
+     * What the title means, a sentence or two. Kept to about the same length across the set: the
+     * cards are drawn the height of the tallest, so one long description makes every card taller.
+     */
+    description: string;
+    /**
+     * The card's picture. In `compact` it fills the card's panel — a landscape container beside the
+     * words from the fold, under them on a phone — cropped to fill it. In `feature` it is half the
+     * card, running to the card's edges; give one to every card there. `alt` empty when the title already says what it
+     * shows. A picture the `media` callback replaces is not drawn.
+     */
+    image?: BlockImage;
+    /**
+     * A photograph behind the whole card, in the `compact` layout: drawn under an 72% wash of the
+     * card's own fill, so the words keep their contrast and the picture shows through as texture — the
+     * reference design's market cards. Not drawn in `feature`, where the picture is half the card.
+     * Usually decorative: `alt` empty.
+     */
+    background?: BlockImage;
+    /**
+     * The card's fill — Card's own variants, the three that are opaque and keep their colour in both
+     * themes, so a card laid over another hides it in either: `accent-strong` the dark card, the
+     * default; `accent` the coral one, for a title and a short sentence; `surface-light` the light
+     * one. Alternate them so each edge in the pile reads apart from the next.
+     */
+    variant?: 'accent-strong' | 'accent' | 'surface-light';
+}

package/dist/components/sticky-cards-data.js

@@ -0,0 +1,12 @@
+/**
+ * The cards a StickyCards section piles up as the page scrolls.
+ *
+ * Exported from the package for the reason `testimonial-row-data.ts` is: a block whose content is a
+ * list is one whose consumer builds a value before passing it.
+ *
+ * Records rather than a component per card, because a card here is words, a picture and a fill —
+ * nothing in it is an element a page composes — and a list of markets or steps is what a content
+ * system hands over. The one thing a record cannot carry, an animation the page plays itself, comes
+ * through the block's `media` callback instead, so the records stay plain data.
+ */
+export {};

package/dist/components/team-grid-data.d.ts

@@ -0,0 +1,38 @@
+/**
+ * The people a TeamGrid section sets out in its grid.
+ *
+ * Exported from the package for the reason `testimonial-row-data.ts` is: a block whose content is a
+ * list is one whose consumer builds a value before passing it.
+ *
+ * Records rather than a component per person, because a person here is a picture, a name, a role
+ * and perhaps a link — nothing in it is an element a page composes — and a team page's list is
+ * what a content system hands over.
+ */
+/** One person in a TeamGrid grid: who they are, what they do, and their picture. */
+export interface TeamGridMember {
+    /** Their full name, as they would write it. It is the card's heading. */
+    name: string;
+    /**
+     * What they do, in a few words — "Chief Executive Officer". Kept short and in one style across the
+     * set: the roles are read down a column, and one that runs to a sentence breaks the line.
+     */
+    role: string;
+    /**
+     * Their picture. `alt` is what a screen reader hears for it, and an empty string is the usual
+     * answer: the name is the heading right under it, so a portrait alt-texted with the name is the
+     * name read twice. Describe the picture only when it shows something the name does not.
+     */
+    image: {
+        src: string;
+        alt: string;
+    };
+    /**
+     * A profile of theirs elsewhere — "LinkedIn" and its URL. `label` is the visible word; the link is
+     * named for the person as well, so a list of links heard on its own says whose each is. It opens in
+     * a new tab, the profile being on a site the page does not own.
+     */
+    profile?: {
+        href: string;
+        label: string;
+    };
+}

package/dist/components/team-grid-data.js

@@ -0,0 +1,11 @@
+/**
+ * The people a TeamGrid section sets out in its grid.
+ *
+ * Exported from the package for the reason `testimonial-row-data.ts` is: a block whose content is a
+ * list is one whose consumer builds a value before passing it.
+ *
+ * Records rather than a component per person, because a person here is a picture, a name, a role
+ * and perhaps a link — nothing in it is an element a page composes — and a team page's list is
+ * what a content system hands over.
+ */
+export {};

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

@@ -0,0 +1,47 @@
+/**
+ * The tiers a Tiers section lays out in order, lowest first.
+ *
+ * Exported from the package for the reason `testimonial-row-data.ts` and `logo-data.ts` are: a block
+ * whose content is a list is one whose consumer builds a value before passing it, and building it
+ * without the type means writing the shape out a second time.
+ *
+ * A record rather than a component per tier, because a tier is a name, a stage, a benefit and the
+ * bar a partner clears to reach it — nothing in it is an element a page composes. The order is the
+ * argument, and it is the list's: a set that arrives as data can be mapped from a partner programme's
+ * own configuration, and the progression follows it without anybody restating which tier is higher.
+ */
+/** One tier in a Tiers section: its medal, its name and stage, what it gives and what it asks. */
+export interface TiersItem {
+    /**
+     * The tier's name, one word — 'Bronze', 'Gold'. Drawn as a heading, which is what lets a screen
+     * reader move from one tier to the next.
+     */
+    name: string;
+    /**
+     * The stage the tier stands for, as a single verb — 'Launch', 'Grow', 'Scale', 'Lead'. Read with
+     * the name as its second line, so a verb says what a partner at this tier is doing rather than
+     * restating the rank.
+     */
+    stage: string;
+    /**
+     * The medal drawn over the name, as a path or a URL. A square picture with a transparent ground —
+     * a matching set across the tiers, so the progression reads in the art as well as the words.
+     *
+     * Decoration: it is drawn with empty alternative text, because the name under it is the heading a
+     * reader hears, and a medal announced as 'Bronze' over a heading reading 'Bronze' says it twice.
+     */
+    medal: string;
+    /**
+     * The headline on the benefit card — 'Commission + 4% bonus'. What a partner at this tier gets, in
+     * the fewest words that state it.
+     */
+    benefit: string;
+    /** What the benefit means, in a sentence under the headline. */
+    description: string;
+    /**
+     * What it takes to reach the tier, under the card — '3-month average commission:\n$500+'. A line
+     * break in it is kept, so the measure and the amount can sit on lines of their own. Absent for the
+     * entry tier, which a partner holds from the day they join.
+     */
+    qualification?: string;
+}

package/dist/components/tiers-data.js

@@ -0,0 +1,13 @@
+/**
+ * The tiers a Tiers section lays out in order, lowest first.
+ *
+ * Exported from the package for the reason `testimonial-row-data.ts` and `logo-data.ts` are: a block
+ * whose content is a list is one whose consumer builds a value before passing it, and building it
+ * without the type means writing the shape out a second time.
+ *
+ * A record rather than a component per tier, because a tier is a name, a stage, a benefit and the
+ * bar a partner clears to reach it — nothing in it is an element a page composes. The order is the
+ * argument, and it is the list's: a set that arrives as data can be mapped from a partner programme's
+ * own configuration, and the progression follows it without anybody restating which tier is higher.
+ */
+export {};