@deriv-web-design/ui 0.1.19 → 0.1.21

package/components.manifest.json

@@ -1,7 +1,7 @@
 {
   "$comment": "Generated by scripts/generate-component-manifest.ts from the TypeScript types. Do not edit by hand. Props inherited from React HTMLAttributes are intentionally omitted. `default` is the value declared in the component's own parameter destructuring; a prop whose effective default is applied further down the tree (e.g. cards[].showLink) has no `default` here — see block-registry.json `fields` for documented effective defaults.",
   "package": "@deriv-web-design/ui",
-  "componentCount": 56,
+  "componentCount": 63,
   "components": {
     "Accordion": {
       "name": "Accordion",
@@ -57,6 +57,111 @@
         }
       }
     },
+    "AffiliatesSlider": {
+      "name": "AffiliatesSlider",
+      "source": "templates/AffiliatesSlider/AffiliatesSlider.tsx",
+      "props": {
+        "currencySymbol": {
+          "type": "string",
+          "required": false,
+          "description": "Currency symbol prepended to the income figure.",
+          "default": "$"
+        },
+        "defaultValue": {
+          "type": "number",
+          "required": false,
+          "description": "Initial slider value when uncontrolled.",
+          "default": 10
+        },
+        "description": {
+          "type": "string",
+          "required": false,
+          "description": "Intro paragraph under the heading",
+          "default": "Explain how this specific feature helps your user."
+        },
+        "disclaimer": {
+          "type": "string",
+          "required": false,
+          "description": "Disclaimer copy below the slider.",
+          "default": "This calculator provides estimates only and may not reflect actual earnings."
+        },
+        "disclaimerIconAlt": {
+          "type": "string",
+          "required": false,
+          "description": "Alt text for the disclaimer icon. Empty = decorative",
+          "default": ""
+        },
+        "disclaimerIconSrc": {
+          "type": "string",
+          "required": false,
+          "description": "Info icon beside the disclaimer. A fixed hosted brand asset.",
+          "default": "https://cdn.prod.website-files.com/68da5c86c91c54f39c86c28a/68da5c86c91c54f39c86cdaf_icon.svg"
+        },
+        "incomeLabel": {
+          "type": "string",
+          "required": false,
+          "description": "Label shown under the income figure.",
+          "default": "your potential income per month"
+        },
+        "incomePerReferral": {
+          "type": "number",
+          "required": false,
+          "description": "Amount earned per referral — multiplied by the slider value for the income display.",
+          "default": 100
+        },
+        "max": {
+          "type": "number",
+          "required": false,
+          "description": "Maximum slider value.",
+          "default": 50
+        },
+        "min": {
+          "type": "number",
+          "required": false,
+          "description": "Minimum slider value.",
+          "default": 10
+        },
+        "onValueChange": {
+          "type": "((value: number) => void)",
+          "required": false,
+          "description": "Called when the slider value changes"
+        },
+        "referralsLabel": {
+          "type": "string",
+          "required": false,
+          "description": "Label shown under the referrals count.",
+          "default": "total referrals (Min deposit amount of $100 each)"
+        },
+        "sliderLabel": {
+          "type": "string",
+          "required": false,
+          "description": "Accessible label for the referrals slider",
+          "default": "Number of referrals"
+        },
+        "step": {
+          "type": "number",
+          "required": false,
+          "description": "Slider step.",
+          "default": 1
+        },
+        "tickValues": {
+          "type": "number[]",
+          "required": false,
+          "description": "Tick labels rendered under the track. Defaults to five evenly spaced values from `min` to `max`."
+        },
+        "title": {
+          "type": "string",
+          "required": false,
+          "description": "Section heading",
+          "default": "Section title goes here"
+        },
+        "value": {
+          "type": "number",
+          "required": false,
+          "description": "Controlled slider value"
+        }
+      }
+    },
     "ArticleHero": {
       "name": "ArticleHero",
       "source": "templates/ArticleHero/ArticleHero.tsx",
@@ -806,6 +911,35 @@
         }
       }
     },
+    "CountryLinkGrid": {
+      "name": "CountryLinkGrid",
+      "source": "templates/CountryLinkGrid/CountryLinkGrid.tsx",
+      "props": {
+        "description": {
+          "type": "string",
+          "required": false,
+          "description": "Intro paragraph rendered under the heading",
+          "default": "Explain how this specific feature helps your user."
+        },
+        "headingLevel": {
+          "type": "CountryLinkGridHeadingLevel",
+          "required": false,
+          "description": "Heading tag to render. This block usually sits under a page title and beside other regulatory sections, so a lower level is often correct.",
+          "default": "h2"
+        },
+        "items": {
+          "type": "CountryLinkGridItem[]",
+          "required": false,
+          "description": "Countries rendered in the grid. Each is a flag icon plus a country name linking to that country's document."
+        },
+        "title": {
+          "type": "string",
+          "required": false,
+          "description": "Section heading, e.g. the entity whose passporting list this is",
+          "default": "Section title goes here"
+        }
+      }
+    },
     "DayNightTransition": {
       "name": "DayNightTransition",
       "source": "templates/DayNightTransition/DayNightTransition.tsx",
@@ -887,6 +1021,63 @@
         }
       }
     },
+    "DocumentChips": {
+      "name": "DocumentChips",
+      "source": "templates/DocumentChips/DocumentChips.tsx",
+      "props": {
+        "allowMultipleOpen": {
+          "type": "boolean",
+          "required": false,
+          "description": "Allow more than one group open at a time. Off by default, matching the reference block, which opens the first group and one group at a time.",
+          "default": false
+        },
+        "description": {
+          "type": "string",
+          "required": false,
+          "description": "Optional intro paragraph rendered under the heading"
+        },
+        "groups": {
+          "type": "DocumentChipsGroup[]",
+          "required": false,
+          "description": "Expandable groups, each holding a set of document chips"
+        },
+        "headingLevel": {
+          "type": "DocumentChipsHeadingLevel",
+          "required": false,
+          "description": "Heading tag to render. Demote when the page already owns the heading hierarchy above this section.",
+          "default": "h2"
+        },
+        "iconAlt": {
+          "type": "string",
+          "required": false,
+          "description": "Alt text for the file mark. Empty by default: the mark is decorative next to the document title it sits beside.",
+          "default": ""
+        },
+        "iconSrc": {
+          "type": "string",
+          "required": false,
+          "description": "Default file mark rendered at the start of every chip, as an `<img>`. This is a fixed brand asset, not a themeable icon — override it only to point at a different hosted mark.",
+          "default": "https://media.ffycdn.net/eu/deriv/d/8d33a322464c4809a9d01119104caa0d"
+        },
+        "onLanguageSelect": {
+          "type": "((document: DocumentChipsDocument, event: MouseEvent<HTMLAnchorElement, MouseEvent>) => void)",
+          "required": false,
+          "description": "Called when a chip's language link is activated. When supplied, the link's default navigation is prevented — wire this to `LanguageSelectModal`. When omitted the link navigates normally."
+        },
+        "title": {
+          "type": "string",
+          "required": false,
+          "description": "Section heading rendered above the groups. Pass `\"\"` to drop it",
+          "default": "Section title goes here"
+        },
+        "variant": {
+          "type": "DocumentChipsVariant",
+          "required": false,
+          "description": "`accordion` — expandable groups (default). `flat` — a single chip list with no accordion chrome.",
+          "default": "accordion"
+        }
+      }
+    },
     "DotLottieInView": {
       "name": "DotLottieInView",
       "source": "components/DotLottieInView/DotLottieInView.tsx",
@@ -1063,6 +1254,40 @@
         }
       }
     },
+    "EntityInfoSection": {
+      "name": "EntityInfoSection",
+      "source": "templates/EntityInfoSection/EntityInfoSection.tsx",
+      "props": {
+        "bullets": {
+          "type": "string[]",
+          "required": false,
+          "description": "Optional bulleted list rendered below the paragraph — used by entities that enumerate their regulated activities."
+        },
+        "description": {
+          "type": "string",
+          "required": false,
+          "description": "Registration / licensing paragraph",
+          "default": "Explain how this specific feature helps your user."
+        },
+        "headingLevel": {
+          "type": "EntityInfoSectionHeadingLevel",
+          "required": false,
+          "description": "Heading tag to render. These blocks repeat down a page under a single page title, so a lower level is often correct.",
+          "default": "h2"
+        },
+        "links": {
+          "type": "EntityInfoSectionLink[]",
+          "required": false,
+          "description": "Coral arrow links rendered below the copy, e.g. \"View licence\". Laid out in a row that wraps, matching the reference section."
+        },
+        "name": {
+          "type": "string",
+          "required": false,
+          "description": "Legal entity name, e.g. \"Deriv (FX) Ltd\"",
+          "default": "Section title goes here"
+        }
+      }
+    },
     "FaqAccordion": {
       "name": "FaqAccordion",
       "source": "templates/FaqAccordion/FaqAccordion.tsx",
@@ -1826,6 +2051,16 @@
               "required": true,
               "description": "Visible label on the link, e.g. \"Learn more\""
             },
+            "mediaSizes": {
+              "type": "string",
+              "required": false,
+              "description": "Browser layout contract for `mediaSrcSet`. Defaults to the column this template actually lays out (`(min-width: 992px) 50vw, 100vw`), so a consumer supplying only `mediaSrcSet` still gets a correct pick."
+            },
+            "mediaSrcSet": {
+              "type": "string",
+              "required": false,
+              "description": "Responsive candidates for `mediaUrl`, as a standard `srcset` string. Render-time only — a CMS stores one master URL and the renderer derives these. Without them the same file is sent to every device: the desktop media column is ~560 CSS px (1120 at DPR 2, so a 1200w rendition), while a phone paints the same slot at ~382 CSS px and needs 800w. Measured on one asset: 64,736 B against 40,120 B for the width that actually paints. Ignored for `\"lottie\"` items — an animation is played, not resized."
+            },
             "mediaType": {
               "type": "\"image\" | \"lottie\"",
               "required": false,
@@ -1836,6 +2071,16 @@
               "required": true,
               "description": "URL to the .lottie file or any image asset (png, jpg, svg, webp…)"
             },
+            "posterSizes": {
+              "type": "string",
+              "required": false,
+              "description": "Layout contract for `posterSrcSet`. Same default as `mediaSizes`."
+            },
+            "posterSrcSet": {
+              "type": "string",
+              "required": false,
+              "description": "Responsive candidates for `posterUrl`. Same contract as `mediaSrcSet`."
+            },
             "posterUrl": {
               "type": "string",
               "required": false,
@@ -2411,6 +2656,49 @@
         }
       }
     },
+    "LanguageSelectModal": {
+      "name": "LanguageSelectModal",
+      "source": "templates/LanguageSelectModal/LanguageSelectModal.tsx",
+      "props": {
+        "closeLabel": {
+          "type": "string",
+          "required": false,
+          "description": "Accessible label for the close button",
+          "default": "Close"
+        },
+        "container": {
+          "type": "HTMLElement | null",
+          "required": false,
+          "description": "Element the dialog is portalled into. Defaults to `document.body`. Pass a node when the app renders inside a shadow root or a modal host."
+        },
+        "headingLevel": {
+          "type": "\"h2\" | \"h3\"",
+          "required": false,
+          "description": "Heading tag for the title. The dialog is a top-level surface, so `h2` is usually right regardless of the page's own hierarchy.",
+          "default": "h2"
+        },
+        "onClose": {
+          "type": "() => void",
+          "required": true,
+          "description": "Called when the user dismisses the dialog — close button, Escape key, or a click on the scrim. The consumer owns the open state."
+        },
+        "open": {
+          "type": "boolean",
+          "required": true,
+          "description": "Whether the dialog is rendered. Nothing mounts while false"
+        },
+        "options": {
+          "type": "LanguageSelectModalOption[]",
+          "required": false
+        },
+        "title": {
+          "type": "string",
+          "required": false,
+          "description": "Dialog title, rendered centred and used as the dialog's accessible name",
+          "default": "Select your language"
+        }
+      }
+    },
     "Link": {
       "name": "Link",
       "source": "components/Link/Link.tsx",
@@ -2451,6 +2739,50 @@
         }
       }
     },
+    "LinkModal": {
+      "name": "LinkModal",
+      "source": "components/LinkModal/LinkModal.tsx",
+      "props": {
+        "children": {
+          "type": "ReactNode",
+          "required": false,
+          "description": "Dialog body — any content the consumer supplies"
+        },
+        "closeLabel": {
+          "type": "string",
+          "required": false,
+          "description": "Accessible label for the close button",
+          "default": "Close"
+        },
+        "container": {
+          "type": "HTMLElement | null",
+          "required": false,
+          "description": "Element the dialog is portalled into. Defaults to `document.body`. Pass a node when the app renders inside a shadow root or a modal host."
+        },
+        "headingLevel": {
+          "type": "\"h2\" | \"h3\"",
+          "required": false,
+          "description": "Heading tag for the title. The dialog is a top-level surface, so `h2` is usually right regardless of the page's own hierarchy.",
+          "default": "h2"
+        },
+        "onClose": {
+          "type": "() => void",
+          "required": true,
+          "description": "Called when the user dismisses the dialog — close button, Escape key, or a click on the scrim. The consumer owns the open state."
+        },
+        "open": {
+          "type": "boolean",
+          "required": true,
+          "description": "Whether the dialog is rendered. Nothing mounts while false"
+        },
+        "title": {
+          "type": "string",
+          "required": false,
+          "description": "Dialog title, rendered centred and used as the dialog's accessible name",
+          "default": "Dialog title"
+        }
+      }
+    },
     "LogoMarquee": {
       "name": "LogoMarquee",
       "source": "templates/LogoMarquee/LogoMarquee.tsx",
@@ -2648,6 +2980,68 @@
         }
       }
     },
+    "OptionsTypes": {
+      "name": "OptionsTypes",
+      "source": "templates/OptionsTypes/OptionsTypes.tsx",
+      "props": {
+        "activeId": {
+          "type": "string",
+          "required": false,
+          "description": "Selected item for controlled tab usage."
+        },
+        "defaultActiveId": {
+          "type": "string",
+          "required": false,
+          "description": "Initially selected item for uncontrolled tab usage."
+        },
+        "disclaimer": {
+          "type": "string",
+          "required": false,
+          "description": "Optional small-print note below the block."
+        },
+        "heading": {
+          "type": "string",
+          "required": false,
+          "description": "Section heading.",
+          "default": "Section title goes here"
+        },
+        "headingLevel": {
+          "type": "\"h2\" | \"h3\" | \"h4\"",
+          "required": false,
+          "description": "Heading element used for the section title.",
+          "default": "h2"
+        },
+        "items": {
+          "type": "OptionsTypesItem[]",
+          "required": false,
+          "description": "Ordered option-type content.",
+          "defaultExpression": "OPTIONS_TYPES_PLACEHOLDER_ITEMS"
+        },
+        "marketsLabel": {
+          "type": "string",
+          "required": false,
+          "description": "Label above the market list.",
+          "default": "Markets available"
+        },
+        "onChange": {
+          "type": "((id: string) => void)",
+          "required": false,
+          "description": "Optional selection callback."
+        },
+        "platformsLabel": {
+          "type": "string",
+          "required": false,
+          "description": "Label above the platform list.",
+          "default": "Trade on"
+        },
+        "variant": {
+          "type": "OptionsTypesVariant",
+          "required": false,
+          "description": "`tabs` shows a selectable list of option types. `single` shows one option in a media/content split.",
+          "default": "tabs"
+        }
+      }
+    },
     "Pagination": {
       "name": "Pagination",
       "source": "components/Pagination/Pagination.tsx",
@@ -3101,6 +3495,11 @@
           "required": false,
           "description": "Optional CSS class name"
         },
+        "idPrefix": {
+          "type": "string",
+          "required": false,
+          "description": "Stable prefix used to connect tabs to their tab panels."
+        },
         "items": {
           "type": "TabItem[]",
           "required": true,