@deriv-com/dds-marketing 0.2.0 → 1.0.0

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

@@ -0,0 +1,64 @@
+/**
+ * The stops a scrolling feature section walks a reader through.
+ *
+ * Exported from the package, because a section whose content is a list is one whose consumer has
+ * to build a value before they can pass it — and building it without the type means writing the
+ * shape out a second time and finding out at the call site that the two disagree.
+ *
+ * It sits at the components root rather than inside the component, which is where every shape a
+ * consumer constructs lives here. `chart-data.ts` beside it holds Product's.
+ *
+ * A record rather than a component per stop, which is the one decision worth stating. A set that
+ * arrives as data can be mapped from a CMS, counted, reordered and filtered by the page that holds
+ * it; a set that arrives as children is written out by hand. What it costs is slots: a picture is a
+ * path here rather than an element, and the way onward is a label and a href rather than a Link the
+ * page composed. Both are the price of the list being a list.
+ */
+/** One stop in a FeatureScroll: what it is called, what it is, where it goes and what it shows. */
+export interface FeatureScrollStep {
+    /**
+     * What this stop is called, in the fewest words that name it — 'Forex', 'Stock indices'.
+     *
+     * It is what a reader scans for on the way past, so a name beats a sentence. Drawn as a heading,
+     * which is what lets a screen reader move between the stops rather than scroll through them.
+     */
+    title: string;
+    /**
+     * What this stop is, in a sentence or two.
+     *
+     * The stop is a screen tall and this is the only thing on it a reader actually reads, so it can
+     * afford to be a real sentence. Past about two hundred characters it runs longer than the
+     * picture beside it and the two halves stop lining up.
+     */
+    description: string;
+    /**
+     * Where the way onward goes, for a stop with a page of its own.
+     *
+     * Optional, and paired with `linkLabel`: a href with no label is a link with nothing to press,
+     * and a label with no href is words that look pressable and are not. Passing one without the
+     * other draws nothing rather than drawing half of it.
+     */
+    href?: string;
+    /**
+     * The words the way onward is under.
+     *
+     * "Learn more" is this site's wording, and using the same three words on every stop is what lets
+     * a reader stop reading them — a link that renames itself per stop is a link somebody has to
+     * read before they know it is the way onward. It is stated per stop rather than defaulted here
+     * because a component inventing copy is a component deciding something the page is responsible
+     * for.
+     */
+    linkLabel?: string;
+    /**
+     * The picture that pins beside the words, as a path or a URL.
+     *
+     * A path rather than an element, because a list of records cannot hold one. It is held to a
+     * square and cropped to fill it, so a section of six stops is six identical frames whatever the
+     * page passes — and anything a reader has to read or press inside it is cropped with it.
+     *
+     * Decorative: it is hidden from assistive technology, because what the stop says is the title
+     * and the description, and a picture carrying something they do not is a stop that reads as half
+     * empty to anyone who cannot see it.
+     */
+    image: string;
+}

package/dist/components/scroll-data.js

@@ -0,0 +1,17 @@
+/**
+ * The stops a scrolling feature section walks a reader through.
+ *
+ * Exported from the package, because a section whose content is a list is one whose consumer has
+ * to build a value before they can pass it — and building it without the type means writing the
+ * shape out a second time and finding out at the call site that the two disagree.
+ *
+ * It sits at the components root rather than inside the component, which is where every shape a
+ * consumer constructs lives here. `chart-data.ts` beside it holds Product's.
+ *
+ * A record rather than a component per stop, which is the one decision worth stating. A set that
+ * arrives as data can be mapped from a CMS, counted, reordered and filtered by the page that holds
+ * it; a set that arrives as children is written out by hand. What it costs is slots: a picture is a
+ * path here rather than an element, and the way onward is a label and a href rather than a Link the
+ * page composed. Both are the price of the list being a list.
+ */
+export {};

package/dist/components/testimonial-row-data.d.ts

@@ -0,0 +1,51 @@
+/**
+ * The reviews a TestimonialRow runs along, and the overall rating it states over them.
+ *
+ * Exported from the package for the reason `testimonial-slider-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 component per review, because a review is words, a name and a score —
+ * nothing in it is an element a page composes — and a set of them is what a review service's feed
+ * hands over.
+ */
+/** One review in a TestimonialRow: what was said, who said it, and what they rated it. */
+export interface TestimonialRowReview {
+    /**
+     * What the reviewer wrote, in their words. A sentence or two: a card is read on the way along the
+     * row, and one that runs on is one nobody finishes.
+     */
+    quote: string;
+    /** Who wrote it — the name the review service shows. */
+    name: string;
+    /** Where they are, under the name: "United Kingdom". */
+    detail?: string;
+    /**
+     * The stars they gave, out of five. Halves are drawn as half a star; anything finer is rounded to
+     * the nearest half. Absent, no stars are drawn — never five on a reviewer's behalf. Keep it the
+     * rating the source shows: it is a claim made in the reviewer's name.
+     */
+    rating?: number;
+    /**
+     * Where the review itself is, as a URL. Given, the whole card links to it and opens in a new tab,
+     * the review being on a service the page does not own.
+     */
+    href?: string;
+}
+/**
+ * The overall rating the reviews come with, written under the section's heading.
+ *
+ * The words are the page's rather than the component's, because they name the service the reviews
+ * came from — which this component deliberately does not know — and they have to be translated.
+ */
+export interface TestimonialRowSummary {
+    /**
+     * The overall rating, in the page's words: "Rated 4.5 out of 5 on our review site". Written, not
+     * drawn — the score is stated once, in words that can be translated and read aloud.
+     */
+    label: string;
+    /**
+     * Where the reviews were collected, as a URL. Given, the words become a link to it, opening in a
+     * new tab.
+     */
+    href?: string;
+}

package/dist/components/testimonial-row-data.js

@@ -0,0 +1,11 @@
+/**
+ * The reviews a TestimonialRow runs along, and the overall rating it states over them.
+ *
+ * Exported from the package for the reason `testimonial-slider-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 component per review, because a review is words, a name and a score —
+ * nothing in it is an element a page composes — and a set of them is what a review service's feed
+ * hands over.
+ */
+export {};

package/dist/components/testimonial-slider-data.d.ts

@@ -0,0 +1,26 @@
+/**
+ * The quotes a TestimonialSlider rotates between.
+ *
+ * Exported from the package for the reason `scroll-data.ts` and `banner-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 quote, because a quote is words and a name — nothing in it
+ * is an element a page composes — and a set of them is what a CMS hands over.
+ */
+/** One quote in a TestimonialSlider: what was said, and who said it. */
+export interface TestimonialSliderQuote {
+    /**
+     * What the person said, in their words. A few sentences at most: a quote is read while it is in
+     * view, and one that runs past the card is one nobody finishes.
+     */
+    quote: string;
+    /** Who said it — a name, or the role they speak as: "Deriv partner". */
+    name: string;
+    /** Where they are or what they do, under the name: "Sri Lanka", "Trader since 2019". */
+    detail?: string;
+    /**
+     * Their picture, as a path or a URL. Drawn round at size.avatar beside the name, and decorative:
+     * the name says who it is.
+     */
+    avatar?: string;
+}

package/dist/components/testimonial-slider-data.js

@@ -0,0 +1,10 @@
+/**
+ * The quotes a TestimonialSlider rotates between.
+ *
+ * Exported from the package for the reason `scroll-data.ts` and `banner-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 quote, because a quote is words and a name — nothing in it
+ * is an element a page composes — and a set of them is what a CMS hands over.
+ */
+export {};