@deriv-web-design/ui 0.1.5 → 0.1.6

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": 44,
+  "componentCount": 48,
   "components": {
     "Accordion": {
       "name": "Accordion",
@@ -1087,6 +1087,377 @@
         }
       }
     },
+    "FeatureBlog": {
+      "name": "FeatureBlog",
+      "source": "templates/FeatureBlog/FeatureBlog.tsx",
+      "props": {
+        "className": {
+          "type": "string",
+          "required": false,
+          "description": "Extra class name merged onto the root `<section>`."
+        },
+        "linkHref": {
+          "type": "string",
+          "required": false,
+          "description": "Href for the \"See all\" link"
+        },
+        "linkText": {
+          "type": "string",
+          "required": false,
+          "description": "Label for the \"See all\" link (default: \"See all press releases\")",
+          "defaultExpression": "FEATURE_BLOG_TEXT_CONTENT.linkText"
+        },
+        "onLinkClick": {
+          "type": "(() => void)",
+          "required": false
+        },
+        "posts": {
+          "type": "FeatureBlogPost[]",
+          "required": true,
+          "description": "Posts rendered as a responsive card grid.",
+          "items": {
+            "category": {
+              "type": "string",
+              "required": false,
+              "description": "Category label, e.g. \"Company\""
+            },
+            "date": {
+              "type": "string",
+              "required": false,
+              "description": "Publish date label, e.g. \"July 24, 2026\""
+            },
+            "href": {
+              "type": "string",
+              "required": false,
+              "description": "Link target — wraps the card in an anchor when set"
+            },
+            "onClick": {
+              "type": "(() => void)",
+              "required": false,
+              "description": "Click handler — used when `href` is not set"
+            },
+            "summary": {
+              "type": "string",
+              "required": true,
+              "description": "Post summary / dek text"
+            },
+            "thumbnail": {
+              "type": "string",
+              "required": true,
+              "description": "Card thumbnail image"
+            },
+            "thumbnailAlt": {
+              "type": "string",
+              "required": false
+            },
+            "title": {
+              "type": "string",
+              "required": true,
+              "description": "Post headline"
+            }
+          }
+        },
+        "showLink": {
+          "type": "boolean",
+          "required": false,
+          "description": "Show the \"See all\" link below the grid (default: true)",
+          "default": true
+        },
+        "title": {
+          "type": "string",
+          "required": false,
+          "description": "Section heading. Defaults to \"Deriv press releases\".",
+          "defaultExpression": "FEATURE_BLOG_TEXT_CONTENT.title"
+        }
+      }
+    },
+    "FeatureBlogCategories": {
+      "name": "FeatureBlogCategories",
+      "source": "templates/FeatureBlogCategories/FeatureBlogCategories.tsx",
+      "props": {
+        "activeCategoryId": {
+          "type": "string",
+          "required": false,
+          "description": "Controlled active category tab id"
+        },
+        "allCategoryId": {
+          "type": "string",
+          "required": false,
+          "description": "Id used internally for the auto-prepended \"show everything\" tab (default: \"all\")",
+          "defaultExpression": "FEATURE_BLOG_CATEGORIES_TEXT_CONTENT.allCategoryId"
+        },
+        "allCategoryLabel": {
+          "type": "string",
+          "required": false,
+          "description": "Label for the auto-prepended \"show everything\" tab (default: \"View all\")",
+          "defaultExpression": "FEATURE_BLOG_CATEGORIES_TEXT_CONTENT.allCategoryLabel"
+        },
+        "categories": {
+          "type": "FeatureBlogCategoryTab[]",
+          "required": true,
+          "description": "Category tabs, CMS-managed. An \"all\" tab is always prepended automatically.",
+          "items": {
+            "id": {
+              "type": "string",
+              "required": true,
+              "description": "Stable identifier — must match `FeatureBlogCategoryPost.category` for filtering to work. CMS-managed."
+            },
+            "label": {
+              "type": "string",
+              "required": true,
+              "description": "Tab label shown in the pill row. CMS-managed."
+            }
+          }
+        },
+        "className": {
+          "type": "string",
+          "required": false,
+          "description": "Extra class name merged onto the root `<section>`."
+        },
+        "defaultActiveCategoryId": {
+          "type": "string",
+          "required": false,
+          "description": "Initial active tab id for uncontrolled usage (default: `allCategoryId`)"
+        },
+        "emptyStateText": {
+          "type": "string",
+          "required": false,
+          "description": "Message shown when no posts match the active tab + search query",
+          "defaultExpression": "FEATURE_BLOG_CATEGORIES_TEXT_CONTENT.emptyStateText"
+        },
+        "onCategoryChange": {
+          "type": "((id: string) => void)",
+          "required": false,
+          "description": "Called whenever a different tab is selected"
+        },
+        "onSearchChange": {
+          "type": "((value: string) => void)",
+          "required": false,
+          "description": "Called on every keystroke in the search field with the current value"
+        },
+        "posts": {
+          "type": "FeatureBlogCategoryPost[]",
+          "required": true,
+          "description": "All posts — filtered client-side by the active tab and search query",
+          "items": {
+            "category": {
+              "type": "string",
+              "required": true,
+              "description": "Category tab id this post belongs to (matches a `categories[].id`). Posts also always match the \"all\" tab."
+            },
+            "categoryLabel": {
+              "type": "string",
+              "required": false,
+              "description": "Category chip label shown on the card. Defaults to the matching tab's `label` when omitted."
+            },
+            "date": {
+              "type": "string",
+              "required": false,
+              "description": "Publish date label, e.g. \"July 24, 2026\""
+            },
+            "href": {
+              "type": "string",
+              "required": false,
+              "description": "Destination URL. Absolute `http(s)://` URLs are treated as external and open in a new tab (`target=\"_blank\" rel=\"noopener noreferrer\"`); relative/internal paths (e.g. \"/newsroom/my-article\") navigate as a normal same-tab inner-page link."
+            },
+            "onClick": {
+              "type": "(() => void)",
+              "required": false,
+              "description": "Click handler — used when `href` is not set (renders a `<button>`)"
+            },
+            "summary": {
+              "type": "string",
+              "required": true,
+              "description": "Post summary / dek text"
+            },
+            "thumbnail": {
+              "type": "string",
+              "required": true,
+              "description": "Card thumbnail image"
+            },
+            "thumbnailAlt": {
+              "type": "string",
+              "required": false
+            },
+            "title": {
+              "type": "string",
+              "required": true,
+              "description": "Post headline"
+            }
+          }
+        },
+        "searchAriaLabel": {
+          "type": "string",
+          "required": false,
+          "description": "Accessible label for the search field (defaults to `searchPlaceholder`)"
+        },
+        "searchPlaceholder": {
+          "type": "string",
+          "required": false,
+          "description": "Placeholder text for the search field (default: \"Search\")",
+          "defaultExpression": "FEATURE_BLOG_CATEGORIES_TEXT_CONTENT.searchPlaceholder"
+        },
+        "title": {
+          "type": "string",
+          "required": false,
+          "description": "Section heading. Defaults to \"Deriv press releases\".",
+          "defaultExpression": "FEATURE_BLOG_CATEGORIES_TEXT_CONTENT.title"
+        }
+      }
+    },
+    "FeatureBlogPage": {
+      "name": "FeatureBlogPage",
+      "source": "templates/FeatureBlogPage/FeatureBlogPage.tsx",
+      "props": {
+        "author": {
+          "type": "FeatureBlogAuthor",
+          "required": false,
+          "description": "Article author, shown in the meta row next to the publish date"
+        },
+        "category": {
+          "type": "string",
+          "required": false,
+          "description": "Small category label rendered above the title (e.g. \"Press releases\")"
+        },
+        "className": {
+          "type": "string",
+          "required": false,
+          "description": "Additional CSS class on the outer `<section>`"
+        },
+        "content": {
+          "type": "FeatureBlogContentBlock[]",
+          "required": true,
+          "description": "Main article body, rendered from plain data blocks (required, at least 1 item)",
+          "items": {
+            "caption": {
+              "type": "string",
+              "required": false,
+              "description": "Optional caption rendered below an \"image\" block"
+            },
+            "cite": {
+              "type": "string",
+              "required": false,
+              "description": "Citation / source line for \"quote\" blocks"
+            },
+            "id": {
+              "type": "string",
+              "required": false,
+              "description": "Stable anchor id for a \"heading\" block; auto-generated (slugified) from `text` when omitted"
+            },
+            "image": {
+              "type": "string",
+              "required": false,
+              "description": "Image source for \"image\" blocks"
+            },
+            "imageAlt": {
+              "type": "string",
+              "required": false
+            },
+            "items": {
+              "type": "string[]",
+              "required": false,
+              "description": "List entries for \"list\" blocks"
+            },
+            "level": {
+              "type": "2 | 3",
+              "required": false,
+              "description": "Heading level for \"heading\" blocks (default: 2). Only level-2 headings are collected into the table of contents — level-3 headings render inline as sub-sections but are not listed."
+            },
+            "ordered": {
+              "type": "boolean",
+              "required": false,
+              "description": "Render a \"list\" block as `<ol>` instead of `<ul>` (default: false)"
+            },
+            "text": {
+              "type": "string",
+              "required": false,
+              "description": "Text content for \"heading\" / \"paragraph\" / \"quote\" blocks"
+            },
+            "type": {
+              "type": "FeatureBlogContentBlockType",
+              "required": true,
+              "description": "Block kind — \"heading\"/\"paragraph\"/\"quote\" use `text`, \"list\" uses `items`, \"image\" uses `image`"
+            }
+          }
+        },
+        "copiedLabel": {
+          "type": "string",
+          "required": false,
+          "description": "Label shown briefly after \"copy link\" succeeds (default: \"Copied!\")",
+          "default": "Copied!"
+        },
+        "heroImage": {
+          "type": "string",
+          "required": false,
+          "description": "Hero image rendered below the title / meta row"
+        },
+        "heroImageAlt": {
+          "type": "string",
+          "required": false
+        },
+        "hideShare": {
+          "type": "boolean",
+          "required": false,
+          "description": "Hide the share row entirely (default: false)",
+          "default": false
+        },
+        "hideToc": {
+          "type": "boolean",
+          "required": false,
+          "description": "Hide the table of contents entirely (default: false) — e.g. for very short articles with no level-2 headings",
+          "default": false
+        },
+        "onShare": {
+          "type": "((platform: FeatureBlogSharePlatform | \"copy\") => void)",
+          "required": false,
+          "description": "Fired whenever a share icon (including \"copy link\") is activated"
+        },
+        "publishDate": {
+          "type": "string",
+          "required": false,
+          "description": "Publish date label shown in the meta row (e.g. \"July 24, 2026\")"
+        },
+        "sharePlatforms": {
+          "type": "FeatureBlogSharePlatform[]",
+          "required": false,
+          "description": "Which social platforms to show, in order (default: all four)",
+          "defaultExpression": "[\"facebook\", \"twitter\", \"telegram\", \"linkedin\"]"
+        },
+        "shareText": {
+          "type": "string",
+          "required": false,
+          "description": "Text passed to platforms that accept share text (X/Twitter, Telegram); defaults to `title`"
+        },
+        "shareTitle": {
+          "type": "string",
+          "required": false,
+          "description": "\"Share article\" label above the share icons (default: \"Share article\")",
+          "default": "Share article"
+        },
+        "shareUrl": {
+          "type": "string",
+          "required": false,
+          "description": "Canonical URL used to build every share link and for \"copy link\"; sharing is hidden when omitted"
+        },
+        "title": {
+          "type": "string",
+          "required": true,
+          "description": "Article headline, rendered as the page's `<h1>` (required)"
+        },
+        "tocDefaultOpen": {
+          "type": "boolean",
+          "required": false,
+          "description": "Whether the table of contents starts expanded (default: true)",
+          "default": true
+        },
+        "tocTitle": {
+          "type": "string",
+          "required": false,
+          "description": "Table of contents card heading (default: \"Contents\")",
+          "default": "Contents"
+        }
+      }
+    },
     "FeatureBullets": {
       "name": "FeatureBullets",
       "source": "templates/FeatureBullets/FeatureBullets.tsx",
@@ -1459,22 +1830,27 @@
         "leftVisual": {
           "type": "ReactNode",
           "required": false,
-          "description": "Left floating visual for the Visuals variant. Accepts a ReactNode or image URL string."
+          "description": "Left floating visual for the \"visuals\" variant. Accepts a ReactNode or image URL string."
         },
         "primaryButton": {
           "type": "HeaderButtonProps",
           "required": false,
-          "description": "Primary CTA button (coral). Shown on both variants."
+          "description": "Primary CTA button (coral). Shown on all variants."
         },
         "rightVisual": {
           "type": "ReactNode",
           "required": false,
-          "description": "Right floating visual for the Visuals variant. Accepts a ReactNode or image URL string."
+          "description": "Right floating visual for the \"visuals\" variant. Accepts a ReactNode or image URL string."
+        },
+        "search": {
+          "type": "HeaderSearchProps",
+          "required": false,
+          "description": "Search field configuration for the \"dark-search\" variant (e.g. Help Centre header). The field always renders for that variant; this prop only customises it."
         },
         "secondaryButton": {
           "type": "HeaderButtonProps",
           "required": false,
-          "description": "Secondary CTA button (white outline). Shown on both variants."
+          "description": "Secondary CTA button (white outline). Shown on all variants."
         },
         "subtitle": {
           "type": "string",
@@ -1489,7 +1865,7 @@
         "variant": {
           "type": "HeaderVariant",
           "required": true,
-          "description": "Layout variant: - \"visuals\" — light grey bg + SVG grid, center-aligned text, floating visuals left & right, parallax scroll effect on visuals, min-height 540px - \"minimal\" — same as visuals but without the floating graphics"
+          "description": "Layout variant: - \"visuals\"     — light grey bg + SVG grid, center-aligned text, floating visuals left & right, parallax scroll effect on visuals, min-height 540px - \"minimal\"     — same as visuals but without the floating graphics - \"dark\"        — dark navy bg + SVG grid, center-aligned text, no floating visuals, min-height 420px on mobile/tablet, 460px on desktop (shorter than the light variants) - \"dark-search\" — same as \"dark\" plus a search field below the text, for pages such as the Help Centre index"
         }
       }
     },
@@ -2033,6 +2409,75 @@
         }
       }
     },
+    "ParallaxBanner": {
+      "name": "ParallaxBanner",
+      "source": "templates/ParallaxBanner/ParallaxBanner.tsx",
+      "props": {
+        "cards": {
+          "type": "ParallaxBannerCultureCard[]",
+          "required": false,
+          "description": "Four (or more) short value/culture cards rendered in a grid below the banner. Ignored when `variant` is `\"banner-only\"`. Defaults to `DEFAULT_CULTURE_CARDS`.",
+          "defaultExpression": "DEFAULT_CULTURE_CARDS"
+        },
+        "className": {
+          "type": "string",
+          "required": false,
+          "description": "Extra class name merged onto the root `<section>`"
+        },
+        "ctaHref": {
+          "type": "string",
+          "required": false,
+          "description": "CTA link href"
+        },
+        "ctaLabel": {
+          "type": "string",
+          "required": false,
+          "description": "CTA link label. Defaults to \"Culture at Deriv\".",
+          "defaultExpression": "PARALLAX_BANNER_TEXT_CONTENT.ctaLabel"
+        },
+        "description": {
+          "type": "string",
+          "required": false,
+          "description": "Supporting copy beneath the headline",
+          "defaultExpression": "PARALLAX_BANNER_TEXT_CONTENT.description"
+        },
+        "enableParallax": {
+          "type": "boolean",
+          "required": false,
+          "description": "Enables the subtle scroll-linked parallax on the banner photo. Automatically disabled when the user has `prefers-reduced-motion` set. Defaults to `true`.",
+          "default": true
+        },
+        "imageAlt": {
+          "type": "string",
+          "required": false,
+          "description": "Accessible alt text for the banner photo",
+          "default": ""
+        },
+        "imageUrl": {
+          "type": "string",
+          "required": false,
+          "description": "URL of the photo shown in the banner's image panel",
+          "defaultExpression": "PLACEHOLDER_IMAGE"
+        },
+        "onCtaClick": {
+          "type": "(() => void)",
+          "required": false,
+          "description": "Callback fired when the CTA link is clicked"
+        },
+        "title": {
+          "type": "string",
+          "required": false,
+          "description": "Banner headline. Defaults to \"Our culture\".",
+          "defaultExpression": "PARALLAX_BANNER_TEXT_CONTENT.title"
+        },
+        "variant": {
+          "type": "\"default\" | \"banner-only\"",
+          "required": false,
+          "description": "Layout variant. - `\"default\"`: banner card plus a grid of culture/value cards beneath it. - `\"banner-only\"`: just the banner card — no cards grid.",
+          "default": "default"
+        }
+      }
+    },
     "Stats": {
       "name": "Stats",
       "source": "templates/Stats/StatsV2.tsx",
@@ -2371,7 +2816,7 @@
         "items": {
           "type": "TestimonialItem[]",
           "required": true,
-          "description": "Array of testimonial items to display in the carousel",
+          "description": "Array of testimonial items to display",
           "items": {
             "authorLocation": {
               "type": "string",
@@ -2392,6 +2837,16 @@
               "type": "string",
               "required": true,
               "description": "The testimonial quote text"
+            },
+            "rating": {
+              "type": "number",
+              "required": false,
+              "description": "`trustpilot` variant only — star rating out of 5 shown on the card. Supports halves (e.g. `4.5`). Defaults to `5`."
+            },
+            "reviewUrl": {
+              "type": "string",
+              "required": false,
+              "description": "`trustpilot` variant only — link to the full review on Trustpilot. When omitted, the card links to `trustpilotUrl` instead."
             }
           }
         },
@@ -2399,6 +2854,21 @@
           "type": "string",
           "required": false,
           "description": "Section heading"
+        },
+        "trustpilotScore": {
+          "type": "number",
+          "required": false,
+          "description": "`trustpilot` variant only — overall TrustScore shown in the footer badge (out of 5)."
+        },
+        "trustpilotUrl": {
+          "type": "string",
+          "required": false,
+          "description": "`trustpilot` variant only — URL to the brand's Trustpilot profile page. Used by the footer rating badge link, and as the fallback link for any item without its own `reviewUrl`."
+        },
+        "variant": {
+          "type": "\"default\" | \"trustpilot\"",
+          "required": false,
+          "description": "Visual style. - `default` (default): single-slide auto-advancing quote carousel with dot pagination. - `trustpilot`: horizontally-scrollable row of star-rated review cards, a \"Trustpilot\" rating badge, and prev/next controls — modeled after deriv.com's homepage \"What our customers say\" section."
         }
       }
     },