@deriv-web-design/ui 0.1.13 → 0.1.15

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": 52,
+  "componentCount": 55,
   "components": {
     "Accordion": {
       "name": "Accordion",
@@ -2338,6 +2338,12 @@
       "name": "ImageBanner",
       "source": "templates/ImageBanner/ImageBanner.tsx",
       "props": {
+        "chips": {
+          "type": "string[]",
+          "required": false,
+          "description": "Feature chips shown under the description for `chips-left` / `chips-right`. Each string becomes a pill with a leading checkmark icon.",
+          "defaultExpression": "DEFAULT_CHIPS"
+        },
         "className": {
           "type": "string",
           "required": false,
@@ -2351,7 +2357,7 @@
         "ctaLabel": {
           "type": "string",
           "required": false,
-          "description": "CTA link label",
+          "description": "CTA link label — ignored for `chips-left` / `chips-right` (those variants have no CTA)",
           "default": "Trader's Hub"
         },
         "description": {
@@ -2369,7 +2375,7 @@
         "imageUrl": {
           "type": "string",
           "required": false,
-          "description": "URL of the photo. - `\"split-left\"`: fills the right-hand panel; stacks below text on mobile. - `\"split-right\"`: fills the left-hand panel; stacks above text on mobile. - `\"full-bg-left\"` / `\"full-bg-right\"`: covers the entire card as a background image."
+          "description": "URL of the photo. - `\"split-left\"`: fills the right-hand panel; stacks below text on mobile. - `\"split-right\"`: fills the left-hand panel; stacks above text on mobile. - `\"full-bg-left\"` / `\"full-bg-right\"`: covers the entire card as a background image. - `\"chips-left\"` / `\"chips-right\"`: collage panel; banner height follows the image’s intrinsic aspect ratio (defaults to the partners tier-cover collage, 1920×1440). Prefer 4:3 assets so later images match this reference."
         },
         "onCtaClick": {
           "type": "(() => void)",
@@ -2383,9 +2389,9 @@
           "default": "Join our global community"
         },
         "variant": {
-          "type": "\"split-left\" | \"split-right\" | \"full-bg-left\" | \"full-bg-right\"",
+          "type": "ImageBannerVariant",
           "required": false,
-          "description": "Layout variant. - `\"split-left\"` (default): text on the left; image fills the right-hand panel. - `\"split-right\"`: image fills the left-hand panel; text on the right. - `\"full-bg-left\"`: image covers the entire card as a background; text overlaid on the left. - `\"full-bg-right\"`: image covers the entire card as a background; text overlaid on the right.",
+          "description": "Layout variant. - `\"split-left\"` (default): text on the left; image fills the right-hand panel. - `\"split-right\"`: image fills the left-hand panel; text on the right. - `\"full-bg-left\"`: image covers the entire card as a background; text overlaid on the left. - `\"full-bg-right\"`: image covers the entire card as a background; text overlaid on the right. - `\"chips-left\"`: title, description, and checkmark chips on the left; collage image on the right (matches the \"Everything you need to grow your network\" block on deriv.com/partners). - `\"chips-right\"`: mirror of `\"chips-left\"` — collage on the left; text and chips on the right.",
           "default": "split-left"
         }
       }
@@ -2465,6 +2471,81 @@
         }
       }
     },
+    "MasterPartner": {
+      "name": "MasterPartner",
+      "source": "templates/MasterPartner/MasterPartner.tsx",
+      "props": {
+        "closingText": {
+          "type": "string",
+          "required": false,
+          "description": "Optional closing paragraph rendered after `note`."
+        },
+        "ctaHref": {
+          "type": "string",
+          "required": false,
+          "description": "CTA destination URL. Renders the button inside an anchor when set."
+        },
+        "ctaLabel": {
+          "type": "string",
+          "required": false,
+          "description": "CTA button label. Rendered on desktop only; omit to hide the CTA entirely."
+        },
+        "description": {
+          "type": "string",
+          "required": true,
+          "description": "Intro paragraph under the title."
+        },
+        "image": {
+          "type": "string",
+          "required": true,
+          "description": "Foreground image URL (e.g. a partner working at a desk)."
+        },
+        "imageAlt": {
+          "type": "string",
+          "required": false,
+          "description": "Accessible alt text for the image. Leave empty when purely decorative.",
+          "default": ""
+        },
+        "note": {
+          "type": "MasterPartnerNote",
+          "required": false,
+          "description": "Optional bold-led paragraph, e.g. a worked commission example."
+        },
+        "onCtaClick": {
+          "type": "(() => void)",
+          "required": false,
+          "description": "CTA click handler, used whether or not `ctaHref` is set."
+        },
+        "steps": {
+          "type": "MasterPartnerStep[]",
+          "required": true,
+          "description": "Ordered \"how it works\" steps (typically 4), each with a numbered icon.",
+          "items": {
+            "description": {
+              "type": "string",
+              "required": true,
+              "description": "Step description copy."
+            },
+            "icon": {
+              "type": "string",
+              "required": true,
+              "description": "Numbered icon image URL (e.g. a circled numeral graphic)."
+            },
+            "iconAlt": {
+              "type": "string",
+              "required": false,
+              "description": "Accessible alt text for the icon. Leave empty — order is already conveyed by the list."
+            }
+          }
+        },
+        "title": {
+          "type": "string",
+          "required": true,
+          "description": "Section headline (H2)."
+        }
+      },
+      "description": "\"Master Partner programme\" section — headline and intro copy beside a foreground image, a desktop-only coral CTA placed after the copy and before the numbered steps, and a full-width row of numbered \"how it works\" steps underneath. Modeled after the \"Master Partner programme\" block on https://deriv.com/partners. Mobile/tablet (<992px): single column (content, then image), steps stack to 1-2 columns, and the CTA button is hidden. Desktop (≥992px): content and image sit side by side, the CTA button becomes visible right after the copy, and steps lay out in a single row."
+    },
     "Navbar": {
       "name": "Navbar",
       "source": "components/Navbar/Navbar.tsx",
@@ -2641,6 +2722,51 @@
         }
       }
     },
+    "PartnersPayout": {
+      "name": "PartnersPayout",
+      "source": "templates/PartnersPayout/PartnersPayout.tsx",
+      "props": {
+        "imageAlt": {
+          "type": "string",
+          "required": false,
+          "description": "Accessible alt text. Leave empty when the globe is decorative.",
+          "default": ""
+        },
+        "imageUrl": {
+          "type": "string",
+          "required": true,
+          "description": "Globe image URL."
+        },
+        "payouts": {
+          "type": "PartnerPayoutItem[]",
+          "required": true,
+          "description": "Regional payout figures.",
+          "items": {
+            "amount": {
+              "type": "string",
+              "required": true,
+              "description": "Formatted payout amount, e.g. \"$ 1,237,927.70\"."
+            },
+            "region": {
+              "type": "string",
+              "required": true,
+              "description": "Region or market label, e.g. \"Africa\"."
+            }
+          }
+        },
+        "period": {
+          "type": "string",
+          "required": true,
+          "description": "Reporting period shown below the headline."
+        },
+        "title": {
+          "type": "string",
+          "required": true,
+          "description": "Section headline."
+        }
+      },
+      "description": "Dark partner-payout section with a responsive metric grid and globe image, modeled after the \"Top partner payouts\" section on deriv.com/partners."
+    },
     "Stats": {
       "name": "Stats",
       "source": "templates/Stats/StatsV2.tsx",
@@ -3062,6 +3188,92 @@
         }
       }
     },
+    "Tiers": {
+      "name": "Tiers",
+      "source": "templates/Tiers/Tiers.tsx",
+      "props": {
+        "description": {
+          "type": "string",
+          "required": false,
+          "description": "Supporting copy under the title"
+        },
+        "linkHref": {
+          "type": "string",
+          "required": false,
+          "description": "Destination for the section-level link"
+        },
+        "linkText": {
+          "type": "string",
+          "required": false,
+          "description": "Label for the section-level link",
+          "default": "Learn more about partner tiers"
+        },
+        "onLinkClick": {
+          "type": "(() => void)",
+          "required": false,
+          "description": "Click handler for the section-level link"
+        },
+        "showLink": {
+          "type": "boolean",
+          "required": false,
+          "description": "Show the section-level CTA link under the tier grid (default: false)",
+          "default": false
+        },
+        "tiers": {
+          "type": "TierItem[]",
+          "required": true,
+          "description": "Ordered list of partnership tiers (typically 4)",
+          "items": {
+            "accent": {
+              "type": "TierAccent",
+              "required": false,
+              "description": "Connector-line accent for this tier on desktop. Defaults by index when omitted (bronze → silver → gold → platinum)."
+            },
+            "description": {
+              "type": "ReactNode",
+              "required": true,
+              "description": "Benefit body copy inside the card. Accepts a string or a ReactNode so consumers can bold key phrases (as on the Platinum tier on deriv.com/partners)."
+            },
+            "icon": {
+              "type": "string",
+              "required": true,
+              "description": "Medal / badge image URL"
+            },
+            "iconAlt": {
+              "type": "string",
+              "required": false,
+              "description": "Accessible alt text for the icon. Defaults to the tier `name` when omitted."
+            },
+            "name": {
+              "type": "string",
+              "required": true,
+              "description": "Tier label shown under the icon, e.g. \"Bronze\""
+            },
+            "requirement": {
+              "type": "string",
+              "required": false,
+              "description": "Optional qualification line under the card, e.g. \"3-month average commission:\\\\n$500+\". Use `\\\\n` for the line break shown on the reference page. Omit for the entry tier."
+            },
+            "status": {
+              "type": "string",
+              "required": true,
+              "description": "Short stage label under the name, e.g. \"Launch\""
+            },
+            "title": {
+              "type": "string",
+              "required": true,
+              "description": "Benefit headline inside the card, e.g. \"Commission + 4% bonus\""
+            }
+          }
+        },
+        "title": {
+          "type": "string",
+          "required": true,
+          "description": "Section headline (H2)"
+        }
+      },
+      "description": "Partnership-tier comparison section — centred header, a responsive track of medal tiers (with desktop connector lines), and an optional CTA. Modeled after the \"Growing rewards as you scale\" block on https://deriv.com/partners. Mobile (<768px): single column; each tier is a white outer card with the medal, a horizontal name/status row, a slate benefit panel, and an optional requirement. Desktop (≥992px): four equal columns with metallic connector lines through the medals."
+    },
     "TradingCalculator": {
       "name": "TradingCalculator",
       "source": "templates/TradingCalculator/TradingCalculator.tsx",