@deriv-web-design/ui 0.1.13 → 0.1.15

package/block-registry.json

@@ -3597,8 +3597,8 @@
     "name": "Image Banner Split",
     "component": "ImageBanner",
     "category": "banner",
-    "description": "Dark full-bleed banner card with headline, supporting copy, one CTA link, and a photo in a split panel or as a full background.",
-    "purpose": "A full-bleed, dark-background conversion banner pairing a headline, supporting copy, and a single CTA link with a photo — either in a right-hand panel (split) or as the card's full background with a gradient overlay (full-bg). This block is designed as a mid-page or bottom-of-page conversion moment, not a page-opening hero.",
+    "description": "Dark banner card with headline, supporting copy, and either a CTA link with a photo (split / full-bg) or checkmark feature chips with a collage (chips).",
+    "purpose": "A dark-background banner pairing a headline and supporting copy with either a photo + CTA (split / full-bg) or a collage + checkmark feature chips (chips). The chips variants match the “Everything you need to grow your network” block on [deriv.com/partners](https://deriv.com/partners). This block is designed as a mid-page or bottom-of-page conversion / feature moment, not a page-opening hero.",
     "keywords": [
       "banner",
       "image",
@@ -3611,7 +3611,10 @@
       "full-width",
       "dark",
       "trading",
-      "deriv"
+      "deriv",
+      "chips",
+      "partners",
+      "features"
     ],
     "sectionType": "banner",
     "global": false,
@@ -3622,6 +3625,7 @@
       "description",
       "ctaLabel",
       "ctaHref",
+      "chips",
       "imageUrl",
       "imageAlt"
     ],
@@ -3629,7 +3633,9 @@
       "split-left",
       "split-right",
       "full-bg-left",
-      "full-bg-right"
+      "full-bg-right",
+      "chips-left",
+      "chips-right"
     ],
     "recommendedPosition": 7,
     "placement": [
@@ -3654,16 +3660,28 @@
     },
     "imageRoles": [
       "split-panel",
-      "card-background"
+      "card-background",
+      "collage"
     ],
     "defaultValues": {
       "variant": "split-left",
       "title": "Join our global community",
       "description": "Connect with traders around the world to exchange insights, explore portfolios, and gain valuable expertise.",
       "ctaLabel": "Trader's Hub",
+      "chips": [
+        "Dynamic ads",
+        "AI insights",
+        "Performance tracking",
+        "Events"
+      ],
       "imageAlt": ""
     },
     "fields": {
+      "chips": {
+        "type": "array",
+        "required": false,
+        "description": "Feature chip labels for chips-left / chips-right. Each string renders as a pill with a leading checkmark."
+      },
       "ctaHref": {
         "type": "url",
         "required": false
@@ -3672,6 +3690,7 @@
         "type": "string",
         "required": false,
         "maxLength": 30,
+        "description": "CTA link label. Ignored for chips-left / chips-right (those variants have no CTA).",
         "default": "Trader's Hub"
       },
       "description": {
@@ -3689,7 +3708,8 @@
       "imageUrl": {
         "type": "image",
         "required": false,
-        "aspectRatio": "4:3"
+        "aspectRatio": "4:3",
+        "description": "For chips-left / chips-right, banner height follows the image’s intrinsic ratio. Defaults to the partners tier-cover collage (1920×1440). Prefer 4:3 assets."
       },
       "title": {
         "type": "string",
@@ -3704,7 +3724,9 @@
           "split-left",
           "split-right",
           "full-bg-left",
-          "full-bg-right"
+          "full-bg-right",
+          "chips-left",
+          "chips-right"
         ],
         "default": "split-left"
       }
@@ -3960,6 +3982,157 @@
       }
     }
   },
+  "master-partner": {
+    "id": "master-partner",
+    "name": "Master Partner",
+    "component": "MasterPartner",
+    "category": "feature",
+    "description": "Two-column 'Master Partner programme' section with a headline, intro copy, a desktop-only coral CTA, a foreground image, and a full-width row of numbered how-it-works steps.",
+    "purpose": "A \"Master Partner programme\" section pairing a headline and intro copy with a foreground image, a coral CTA button placed after the copy and before the numbered steps, and a full-width row of numbered \"how it works\" steps. Modeled after the \"Master Partner programme\" block on [deriv.com/partners](https://deriv.com/partners).",
+    "keywords": [
+      "master partner",
+      "sub-partner",
+      "partner",
+      "referral",
+      "commission",
+      "income stream",
+      "how it works",
+      "steps",
+      "numbered",
+      "affiliate",
+      "deriv"
+    ],
+    "sectionType": "master-partner",
+    "global": false,
+    "requiredFields": [
+      "title",
+      "description",
+      "image",
+      "steps"
+    ],
+    "optionalFields": [
+      "note",
+      "closingText",
+      "ctaLabel",
+      "ctaHref",
+      "imageAlt"
+    ],
+    "variants": [
+      "default"
+    ],
+    "recommendedPosition": 6,
+    "placement": [
+      "middle"
+    ],
+    "layout": {
+      "alignment": "left",
+      "gridColumns": "1-2-4",
+      "contentWidth": "wide",
+      "background": true,
+      "overlay": false
+    },
+    "supports": {
+      "backgroundImage": false,
+      "backgroundVideo": false,
+      "foregroundImage": true,
+      "primaryButton": true,
+      "secondaryButton": false,
+      "sectionLink": false,
+      "icons": true,
+      "numberedList": true
+    },
+    "imageRoles": [
+      "supporting-image",
+      "step-icon"
+    ],
+    "defaultValues": {
+      "imageAlt": ""
+    },
+    "fields": {
+      "closingText": {
+        "type": "string",
+        "required": false,
+        "maxLength": 320
+      },
+      "ctaHref": {
+        "type": "string",
+        "required": false,
+        "maxLength": 300,
+        "description": "CTA destination URL."
+      },
+      "ctaLabel": {
+        "type": "string",
+        "required": false,
+        "maxLength": 40,
+        "description": "CTA button label. Rendered on desktop only; omit to hide the CTA entirely."
+      },
+      "description": {
+        "type": "string",
+        "required": true,
+        "maxLength": 320
+      },
+      "image": {
+        "type": "image",
+        "required": true,
+        "aspectRatio": "1:1",
+        "description": "Foreground image, e.g. a partner working at a desk."
+      },
+      "imageAlt": {
+        "type": "string",
+        "required": false,
+        "default": "",
+        "maxLength": 160
+      },
+      "note": {
+        "type": "object",
+        "required": false,
+        "description": "Optional bold-led paragraph, e.g. a worked commission example.",
+        "objectFields": {
+          "label": {
+            "type": "string",
+            "required": true,
+            "maxLength": 60,
+            "description": "Bold lead-in phrase, e.g. \"Here's how it works:\"."
+          },
+          "text": {
+            "type": "string",
+            "required": true,
+            "maxLength": 260,
+            "description": "Remaining sentence rendered after the bold label."
+          }
+        }
+      },
+      "steps": {
+        "type": "array",
+        "required": true,
+        "itemFields": {
+          "description": {
+            "type": "string",
+            "required": true,
+            "maxLength": 200
+          },
+          "icon": {
+            "type": "image",
+            "required": true,
+            "description": "Numbered icon image URL, e.g. a circled numeral graphic."
+          },
+          "iconAlt": {
+            "type": "string",
+            "required": false,
+            "default": "",
+            "defaultSource": "effective",
+            "maxLength": 80,
+            "description": "Alt text for the icon. Leave empty — order is already conveyed by the list."
+          }
+        }
+      },
+      "title": {
+        "type": "string",
+        "required": true,
+        "maxLength": 80
+      }
+    }
+  },
   "navbar-global": {
     "id": "navbar-global",
     "name": "Navbar",
@@ -4250,6 +4423,106 @@
       }
     }
   },
+  "partners-payout": {
+    "id": "partners-payout",
+    "name": "Partners Payout",
+    "component": "PartnersPayout",
+    "category": "stats",
+    "description": "Dark partner-payout section with a reporting period, responsive regional metric cards, and a large globe image.",
+    "purpose": "Use this template to highlight partner or affiliate payouts by region for a defined reporting period.",
+    "keywords": [
+      "partners",
+      "payout",
+      "affiliate",
+      "commission",
+      "regions",
+      "metrics",
+      "statistics",
+      "globe",
+      "deriv"
+    ],
+    "sectionType": "partners-payout",
+    "global": false,
+    "requiredFields": [
+      "title",
+      "period",
+      "payouts",
+      "imageUrl"
+    ],
+    "optionalFields": [
+      "imageAlt"
+    ],
+    "variants": [
+      "default"
+    ],
+    "recommendedPosition": 8,
+    "placement": [
+      "middle"
+    ],
+    "layout": {
+      "alignment": "center",
+      "gridColumns": "1-2",
+      "contentWidth": "wide",
+      "background": true,
+      "overlay": false
+    },
+    "supports": {
+      "backgroundImage": false,
+      "backgroundVideo": false,
+      "foregroundImage": true,
+      "primaryButton": false,
+      "secondaryButton": false,
+      "sectionLink": false,
+      "icons": false
+    },
+    "imageRoles": [
+      "decorative-globe"
+    ],
+    "defaultValues": {
+      "imageAlt": ""
+    },
+    "fields": {
+      "imageAlt": {
+        "type": "string",
+        "required": false,
+        "default": "",
+        "maxLength": 160,
+        "description": "Alt text for the globe. Leave empty when it is decorative."
+      },
+      "imageUrl": {
+        "type": "image",
+        "required": true,
+        "description": "Transparent globe image displayed below the payout grid."
+      },
+      "payouts": {
+        "type": "array",
+        "required": true,
+        "itemFields": {
+          "amount": {
+            "type": "string",
+            "required": true,
+            "maxLength": 40,
+            "description": "Preformatted payout value, including its currency symbol."
+          },
+          "region": {
+            "type": "string",
+            "required": true,
+            "maxLength": 60
+          }
+        }
+      },
+      "period": {
+        "type": "string",
+        "required": true,
+        "maxLength": 40
+      },
+      "title": {
+        "type": "string",
+        "required": true,
+        "maxLength": 80
+      }
+    }
+  },
   "stats-carousel": {
     "id": "stats-carousel",
     "name": "Stats Carousel",
@@ -4903,7 +5176,7 @@
     "component": "Testimonial",
     "category": "testimonial",
     "description": "Testimonial section with two variants: an auto-advancing single-slide quote carousel with dot pagination (default), and a horizontally-scrollable row of star-rated Trustpilot review cards with a rating badge and prev/next controls (trustpilot).",
-    "purpose": "A full-width testimonial section for showcasing partner or customer quotes. Ships in two variants: - **Default** — one quote card at a time, with decorative quote marks, an optional author avatar, name, and location; auto-advances every 5 seconds with dot pagination for manual navigation. - **Trustpilot** — a horizontally-scrollable row of star-rated review cards plus a \"Trustpilot\" rating badge and prev/next arrow controls. Modeled after the \"What our customers say\" section on deriv.com's homepage. The 5-second auto-advance is **not configurable** — there is no prop to slow it down or switch it off. The block's only props are `title`, `items` and `className`.",
+    "purpose": "A full-width testimonial section for showcasing partner or customer quotes. Ships in two variants: - **Default** — one quote card at a time, with decorative quote marks, an optional author avatar, name, and location; auto-advances every 5 seconds with dot pagination for manual navigation. - **Trustpilot** — a horizontally-scrollable row of star-rated review cards plus a \"Trustpilot\" rating badge and prev/next arrow controls. Modeled after the \"What our customers say\" section on deriv.com's homepage. The default variant's 5-second auto-advance is **not configurable** — there is no prop to slow it down or switch it off. Props are `title`, `items`, `variant`, and (for `trustpilot`) `trustpilotUrl` / `trustpilotScore`, plus optional per-item `rating` and `reviewUrl`.",
     "keywords": [
       "testimonial",
       "quote",
@@ -5087,6 +5360,160 @@
       }
     }
   },
+  "tiers": {
+    "id": "tiers",
+    "name": "Tiers",
+    "component": "Tiers",
+    "category": "feature",
+    "description": "Centred partnership-tier track with medal icons, benefit cards, optional qualification lines, and a CTA — modeled after deriv.com/partners.",
+    "purpose": "A partnership-tier comparison section with a centred header, a responsive track of medal tiers (icon, name, stage label, benefit card, optional qualification line), and an optional CTA link. Modeled after the \"Growing rewards as you scale\" block on [deriv.com/partners](https://deriv.com/partners).",
+    "keywords": [
+      "tiers",
+      "partner",
+      "partnership",
+      "rewards",
+      "bronze",
+      "silver",
+      "gold",
+      "platinum",
+      "commission",
+      "bonus",
+      "affiliate",
+      "levels",
+      "progression",
+      "deriv"
+    ],
+    "sectionType": "tiers",
+    "global": false,
+    "requiredFields": [
+      "title",
+      "tiers"
+    ],
+    "optionalFields": [
+      "description",
+      "showLink",
+      "linkText",
+      "linkHref"
+    ],
+    "variants": [
+      "default"
+    ],
+    "recommendedPosition": 4,
+    "placement": [
+      "middle"
+    ],
+    "layout": {
+      "alignment": "center",
+      "gridColumns": "1-2-4",
+      "contentWidth": "wide",
+      "background": true,
+      "overlay": false
+    },
+    "supports": {
+      "backgroundImage": false,
+      "backgroundVideo": false,
+      "foregroundImage": false,
+      "primaryButton": false,
+      "secondaryButton": false,
+      "sectionLink": true,
+      "icons": true
+    },
+    "imageRoles": [
+      "tier-icon"
+    ],
+    "defaultValues": {
+      "showLink": false,
+      "linkText": "Learn more about partner tiers"
+    },
+    "fields": {
+      "description": {
+        "type": "string",
+        "required": false,
+        "maxLength": 240
+      },
+      "linkHref": {
+        "type": "string",
+        "required": false,
+        "maxLength": 300,
+        "description": "Destination URL for the section-level link."
+      },
+      "linkText": {
+        "type": "string",
+        "required": false,
+        "default": "Learn more about partner tiers",
+        "maxLength": 60,
+        "description": "Label for the section-level link."
+      },
+      "showLink": {
+        "type": "boolean",
+        "required": false,
+        "default": false,
+        "description": "Show a section-level CTA link under the tier grid. Off by default."
+      },
+      "tiers": {
+        "type": "array",
+        "required": true,
+        "itemFields": {
+          "accent": {
+            "type": "string",
+            "required": false,
+            "enum": [
+              "bronze",
+              "silver",
+              "gold",
+              "platinum"
+            ],
+            "description": "Desktop connector-line accent. Defaults by index (bronze → silver → gold → platinum)."
+          },
+          "description": {
+            "type": "string",
+            "required": true,
+            "maxLength": 240,
+            "description": "Benefit body copy inside the card."
+          },
+          "icon": {
+            "type": "image",
+            "required": true,
+            "description": "Medal / badge image URL for this tier."
+          },
+          "iconAlt": {
+            "type": "string",
+            "required": false,
+            "maxLength": 80,
+            "description": "Alt text for the medal image. Defaults to the tier name."
+          },
+          "name": {
+            "type": "string",
+            "required": true,
+            "maxLength": 40
+          },
+          "requirement": {
+            "type": "string",
+            "required": false,
+            "maxLength": 120,
+            "description": "Optional qualification line under the card. Use a newline between the label and the threshold (e.g. \"3-month average commission:\\n$500+\")."
+          },
+          "status": {
+            "type": "string",
+            "required": true,
+            "maxLength": 40,
+            "description": "Short stage label under the name, e.g. Launch / Grow."
+          },
+          "title": {
+            "type": "string",
+            "required": true,
+            "maxLength": 80,
+            "description": "Benefit headline inside the card."
+          }
+        }
+      },
+      "title": {
+        "type": "string",
+        "required": true,
+        "maxLength": 80
+      }
+    }
+  },
   "trading-calculator": {
     "id": "trading-calculator",
     "name": "TradingCalculator",