@deriv-web-design/ui 0.1.6 → 0.1.9

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": 48,
+  "componentCount": 52,
   "components": {
     "Accordion": {
       "name": "Accordion",
@@ -1024,6 +1024,45 @@
         }
       }
     },
+    "DynamicTable": {
+      "name": "DynamicTable",
+      "source": "templates/DynamicTable/DynamicTable.tsx",
+      "props": {
+        "columns": {
+          "type": "DynamicTableColumnDef[]",
+          "required": true,
+          "description": "Column definitions (order matters). Extra columns beyond the variant are ignored.",
+          "items": {
+            "header": {
+              "type": "string | string[]",
+              "required": true,
+              "description": "Header label text. Pass an array for multi-line headers (e.g. [\"Spread\", \"reduction\"])."
+            },
+            "key": {
+              "type": "string",
+              "required": true,
+              "description": "Unique key matching the row data field"
+            }
+          }
+        },
+        "rows": {
+          "type": "DynamicTableRowData[]",
+          "required": true,
+          "description": "Row data"
+        },
+        "sectionTitle": {
+          "type": "string",
+          "required": false,
+          "description": "Optional section title rendered above the table"
+        },
+        "variant": {
+          "type": "DynamicTableVariant",
+          "required": false,
+          "description": "Column-count variant. - `Three columns` — one label column + two comparison columns - `Four columns` — one label column + three comparison columns",
+          "default": "Three columns"
+        }
+      }
+    },
     "FaqAccordion": {
       "name": "FaqAccordion",
       "source": "templates/FaqAccordion/FaqAccordion.tsx",
@@ -1651,6 +1690,108 @@
         }
       }
     },
+    "FeatureOffices": {
+      "name": "FeatureOffices",
+      "source": "templates/FeatureOffices/FeatureOffices.tsx",
+      "props": {
+        "activeRegionId": {
+          "type": "string",
+          "required": false,
+          "description": "Controlled active region tab id"
+        },
+        "className": {
+          "type": "string",
+          "required": false,
+          "description": "Extra class name merged onto the root `<section>`."
+        },
+        "defaultActiveRegionId": {
+          "type": "string",
+          "required": false,
+          "description": "Initial active tab id for uncontrolled usage (default: `regions[0].id`)"
+        },
+        "linkText": {
+          "type": "string",
+          "required": false,
+          "description": "Default label for each office's \"See location\" link.",
+          "defaultExpression": "FEATURE_OFFICES_TEXT_CONTENT.linkText"
+        },
+        "offices": {
+          "type": "FeatureOffice[]",
+          "required": true,
+          "description": "All offices — filtered client-side by the active region tab.",
+          "items": {
+            "address": {
+              "type": "string",
+              "required": true,
+              "description": "Full postal address. Use \"\\n\" to break the address onto multiple lines."
+            },
+            "city": {
+              "type": "string",
+              "required": true,
+              "description": "City name, e.g. \"London\"."
+            },
+            "country": {
+              "type": "string",
+              "required": true,
+              "description": "Country name, e.g. \"United Kingdom\"."
+            },
+            "flagAlt": {
+              "type": "string",
+              "required": false,
+              "description": "Alt text for the flag image. Defaults to `country` when omitted."
+            },
+            "flagImage": {
+              "type": "string",
+              "required": true,
+              "description": "Flag image shown above the office name (real flag artwork, not an emoji)."
+            },
+            "href": {
+              "type": "string",
+              "required": false,
+              "description": "Destination URL for the \"See location\" link (typically a map link). When omitted, the office card renders with no link."
+            },
+            "linkText": {
+              "type": "string",
+              "required": false,
+              "description": "Overrides the default \"See location\" link label for this office."
+            },
+            "region": {
+              "type": "string",
+              "required": true,
+              "description": "Region tab id this office belongs to (matches a `regions[].id`)."
+            }
+          }
+        },
+        "onRegionChange": {
+          "type": "((id: string) => void)",
+          "required": false,
+          "description": "Called whenever a different region tab is selected"
+        },
+        "regions": {
+          "type": "FeatureOfficeRegion[]",
+          "required": true,
+          "description": "Region tabs, CMS-managed. At least one is required.",
+          "items": {
+            "id": {
+              "type": "string",
+              "required": true,
+              "description": "Stable identifier — must match `FeatureOffice.region` for filtering to work. CMS-managed."
+            },
+            "label": {
+              "type": "string",
+              "required": true,
+              "description": "Tab label shown in the pill row. CMS-managed."
+            }
+          }
+        },
+        "title": {
+          "type": "string",
+          "required": false,
+          "description": "Section heading. Defaults to \"Our offices\".",
+          "defaultExpression": "FEATURE_OFFICES_TEXT_CONTENT.title"
+        }
+      }
+    },
     "FeatureScroll": {
       "name": "FeatureScroll",
       "source": "templates/FeatureScroll/FeatureScroll.tsx",
@@ -1779,6 +1920,12 @@
           "description": "Alt text for the Investors in People badge",
           "default": "Investors in People - Platinum"
         },
+        "investorsInPeopleInHeader": {
+          "type": "boolean",
+          "required": false,
+          "description": "Moves the \"Investors in People\" badge into the header row (desktop only, replacing the AI summary bar's slot) and centers the social icons between the logo and the badge, instead of showing the badge in the sidebar/stacked position below the nav.",
+          "default": false
+        },
         "investorsInPeopleSrc": {
           "type": "string",
           "required": false,
@@ -1815,6 +1962,11 @@
           "required": false,
           "description": "Social media links shown in the header row",
           "default": []
+        },
+        "tradingView": {
+          "type": "FooterTradeOnProps",
+          "required": false,
+          "description": "\"Trade on TradingView\" promotion banner"
         }
       }
     },
@@ -2206,7 +2358,7 @@
         "imageUrl": {
           "type": "string",
           "required": false,
-          "description": "URL of the photo. - `\"split\"`: fills the right-hand panel; stacks below text on mobile. - `\"full-bg\"`: 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."
         },
         "onCtaClick": {
           "type": "(() => void)",
@@ -2220,10 +2372,10 @@
           "default": "Join our global community"
         },
         "variant": {
-          "type": "\"split\" | \"full-bg\"",
+          "type": "\"split-left\" | \"split-right\" | \"full-bg-left\" | \"full-bg-right\"",
           "required": false,
-          "description": "Layout variant. - `\"split\"` (default): image fills the right-hand panel; text on the left. - `\"full-bg\"`: image covers the entire card as a background; text overlaid on top.",
-          "default": "split"
+          "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.",
+          "default": "split-left"
         }
       }
     },
@@ -2887,6 +3039,72 @@
           "description": "The large body copy that animates word-by-word on scroll"
         }
       }
+    },
+    "TradingCalculator": {
+      "name": "TradingCalculator",
+      "source": "templates/TradingCalculator/TradingCalculator.tsx",
+      "props": {
+        "className": {
+          "type": "string",
+          "required": false,
+          "description": "Extra class name merged onto the root `<section>`."
+        },
+        "defaultSymbol": {
+          "type": "string",
+          "required": false,
+          "description": "Symbol code to preselect on mount once symbols have loaded, e.g. \"EURUSD\"."
+        },
+        "exchangeRateWsUrl": {
+          "type": "string | null",
+          "required": false,
+          "description": "Deriv's public WebSocket API endpoint, used to fetch live USD exchange rates when a selected instrument's base/profit currency isn't already USD. `app_id=1089` is Deriv's public demo app id (safe to ship — it is not a secret, only a rate-limited API client identifier); register your own at https://api.deriv.com for production traffic volumes. Pass `null` to disable live conversion — non-USD instruments then show \"N/A\" for any value that would have required it, instead of a silently wrong number.",
+          "defaultExpression": "DEFAULT_EXCHANGE_RATE_WS_URL"
+        },
+        "symbols": {
+          "type": "TradingSymbolSpec[]",
+          "required": false,
+          "description": "Live instrument specs (contract size, leverage, swap rates, live price...). When omitted, the component fetches them itself from `symbolsEndpoint` on mount. Pass this to supply your own data — tests, Storybook, SSR, or a project-side proxy/cache in front of the feed."
+        },
+        "symbolsEndpoint": {
+          "type": "string",
+          "required": false,
+          "description": "JSON endpoint returning an array of `TradingSymbolSpec`. This is Deriv's own public, unauthenticated feed — the same one deriv.com/trading-calculators uses — refreshed continuously server-side.",
+          "defaultExpression": "DEFAULT_SYMBOLS_ENDPOINT"
+        },
+        "variant": {
+          "type": "TradingCalculatorVariant",
+          "required": false,
+          "description": "Which single-purpose calculator page this instance mirrors — controls which result(s) the \"Results\" panel shows. See `TradingCalculatorVariant` for what each value maps to.",
+          "default": "main"
+        }
+      }
+    },
+    "TradingCalculatorHowTo": {
+      "name": "TradingCalculatorHowTo",
+      "source": "templates/TradingCalculatorHowTo/TradingCalculatorHowTo.tsx",
+      "props": {
+        "className": {
+          "type": "string",
+          "required": false,
+          "description": "Extra class name merged onto the root `<section>`."
+        },
+        "description": {
+          "type": "string",
+          "required": false,
+          "description": "Section description, shown under the title. Defaults to the canonical copy for `variant`."
+        },
+        "title": {
+          "type": "string",
+          "required": false,
+          "description": "Section heading. Defaults to the canonical heading for `variant`, e.g. \"How to calculate margin requirements\"."
+        },
+        "variant": {
+          "type": "TradingCalculatorHowToVariant",
+          "required": false,
+          "description": "Which deriv.com \"How to calculate…\" page this instance mirrors.",
+          "default": "margin"
+        }
+      }
     }
   },
   "aliases": {