@deriv-web-design/ui 0.1.6 → 0.1.9

package/block-registry.json

@@ -1041,6 +1041,100 @@
       }
     }
   },
+  "dynamic-table": {
+    "id": "dynamic-table",
+    "name": "Dynamic Table",
+    "component": "DynamicTable",
+    "category": "table",
+    "description": "Comparison-table section with a label column and two or three value columns (Three columns or Four columns). Rounded card, light header row, horizontal dividers, and multi-line cells.",
+    "purpose": "A comparison-table section for short, fixed column sets. It renders a rounded card with a light header row, horizontal dividers only, a bold first-column label, and two or three value columns. Unlike Table, this block has no search, pagination, or header tooltips. It is for marketing and product comparison content — not large instrument specification datasets.",
+    "keywords": [
+      "table",
+      "comparison",
+      "features",
+      "platforms",
+      "columns",
+      "mt5",
+      "web terminal",
+      "desktop",
+      "mobile",
+      "windows",
+      "mac",
+      "trading",
+      "deriv"
+    ],
+    "sectionType": "table",
+    "global": false,
+    "requiredFields": [
+      "columns",
+      "rows"
+    ],
+    "optionalFields": [
+      "sectionTitle",
+      "variant"
+    ],
+    "variants": [
+      "Three columns",
+      "Four columns"
+    ],
+    "recommendedPosition": 4,
+    "placement": [
+      "middle"
+    ],
+    "layout": {
+      "alignment": "center",
+      "contentWidth": "wide",
+      "horizontalScroll": true,
+      "background": true,
+      "overlay": false
+    },
+    "supports": {
+      "backgroundImage": false,
+      "search": false,
+      "pagination": false,
+      "headerTooltips": false,
+      "multiLineCells": true,
+      "primaryButton": false,
+      "secondaryButton": false,
+      "badge": false
+    },
+    "imageRoles": [],
+    "defaultValues": {
+      "variant": "Three columns"
+    },
+    "fields": {
+      "columns": {
+        "type": "array",
+        "required": true,
+        "itemFields": {
+          "header": {
+            "type": "string",
+            "required": true,
+            "maxLength": 40
+          },
+          "key": {
+            "type": "string",
+            "required": true,
+            "maxLength": 40
+          }
+        }
+      },
+      "rows": {
+        "type": "array",
+        "required": true
+      },
+      "sectionTitle": {
+        "type": "string",
+        "required": false,
+        "maxLength": 80
+      },
+      "variant": {
+        "type": "enum",
+        "required": false,
+        "default": "Three columns"
+      }
+    }
+  },
   "faq-accordion-white": {
     "id": "faq-accordion-white",
     "name": "FAQ Accordion White",
@@ -2227,6 +2321,161 @@
       }
     }
   },
+  "feature-offices": {
+    "id": "feature-offices",
+    "name": "Feature Offices",
+    "component": "FeatureOffices",
+    "category": "content",
+    "description": "Light section with a centered H2 heading and CMS-managed region tabs above a responsive grid of office address cards (flag image, city/country, address, optional \"See location\" link). Filtering by region happens client-side.",
+    "purpose": "A light-background content section that lists a company's offices grouped by region, using a row of CMS-managed region tabs above a responsive grid of address cards (flag image, city/country, address, optional \"See location\" link). Modeled after [deriv.com/contact-us](https://deriv.com/contact-us) (\"Our offices\").",
+    "keywords": [
+      "offices",
+      "locations",
+      "contact",
+      "addresses",
+      "regions",
+      "tabs",
+      "cms",
+      "map",
+      "branches",
+      "deriv"
+    ],
+    "sectionType": "content",
+    "global": false,
+    "requiredFields": [
+      "regions",
+      "offices"
+    ],
+    "optionalFields": [
+      "title",
+      "defaultActiveRegionId",
+      "linkText"
+    ],
+    "variants": [
+      "default"
+    ],
+    "recommendedPosition": 5,
+    "placement": [
+      "middle",
+      "bottom"
+    ],
+    "layout": {
+      "alignment": "center",
+      "gridColumns": "3",
+      "contentWidth": "large",
+      "background": false,
+      "overlay": false
+    },
+    "supports": {
+      "backgroundImage": false,
+      "backgroundVideo": false,
+      "foregroundImage": true,
+      "primaryButton": false,
+      "secondaryButton": false,
+      "search": false,
+      "tabs": true,
+      "cardLink": true,
+      "externalLinkNewTab": true,
+      "tags": false
+    },
+    "imageRoles": [
+      "office-flag"
+    ],
+    "defaultValues": {
+      "title": "Our offices",
+      "linkText": "See location"
+    },
+    "fields": {
+      "defaultActiveRegionId": {
+        "type": "string",
+        "required": false,
+        "description": "Initial active tab id. Defaults to regions[0].id when omitted."
+      },
+      "linkText": {
+        "type": "string",
+        "required": false,
+        "default": "See location",
+        "defaultSource": "effective",
+        "maxLength": 30,
+        "description": "Default label for each office's link. Overridable per office via offices[].linkText."
+      },
+      "offices": {
+        "type": "array",
+        "required": true,
+        "itemFields": {
+          "address": {
+            "type": "string",
+            "required": true,
+            "maxLength": 220,
+            "description": "Full postal address. Use \"\\n\" to break onto multiple lines."
+          },
+          "city": {
+            "type": "string",
+            "required": true,
+            "maxLength": 60
+          },
+          "country": {
+            "type": "string",
+            "required": true,
+            "maxLength": 60
+          },
+          "flagAlt": {
+            "type": "string",
+            "required": false,
+            "maxLength": 60,
+            "description": "Alt text for the flag image. Defaults to country when omitted."
+          },
+          "flagImage": {
+            "type": "image",
+            "required": true,
+            "description": "Real flag artwork (not an emoji), e.g. a flagcdn.com URL."
+          },
+          "href": {
+            "type": "url",
+            "required": false,
+            "description": "Absolute http(s):// URLs open in a new tab (external); relative/internal paths navigate same-tab. Omit to render the card with no link."
+          },
+          "linkText": {
+            "type": "string",
+            "required": false,
+            "maxLength": 30,
+            "description": "Overrides the default \"See location\" link label for this office."
+          },
+          "region": {
+            "type": "string",
+            "required": true,
+            "maxLength": 40,
+            "description": "Must match one of regions[].id."
+          }
+        }
+      },
+      "regions": {
+        "type": "array",
+        "required": true,
+        "description": "Region tabs, CMS-managed.",
+        "itemFields": {
+          "id": {
+            "type": "string",
+            "required": true,
+            "maxLength": 40,
+            "description": "Must match FeatureOffice.region for filtering to work."
+          },
+          "label": {
+            "type": "string",
+            "required": true,
+            "maxLength": 30
+          }
+        }
+      },
+      "title": {
+        "type": "string",
+        "required": false,
+        "default": "Our offices",
+        "defaultSource": "effective",
+        "maxLength": 60
+      }
+    }
+  },
   "feature-scroll-media-right": {
     "id": "feature-scroll-media-right",
     "name": "Feature Scroll Media Right",
@@ -2483,6 +2732,7 @@
       "logoAlt",
       "socialLinks",
       "derivGo",
+      "tradingView",
       "investorsInPeopleSrc",
       "investorsInPeopleAlt",
       "licenseText",
@@ -3345,8 +3595,10 @@
       "imageAlt"
     ],
     "variants": [
-      "split",
-      "full-bg"
+      "split-left",
+      "split-right",
+      "full-bg-left",
+      "full-bg-right"
     ],
     "recommendedPosition": 7,
     "placement": [
@@ -3374,7 +3626,7 @@
       "card-background"
     ],
     "defaultValues": {
-      "variant": "split",
+      "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",
@@ -3418,10 +3670,12 @@
         "type": "string",
         "required": false,
         "enum": [
-          "split",
-          "full-bg"
+          "split-left",
+          "split-right",
+          "full-bg-left",
+          "full-bg-right"
         ],
-        "default": "split"
+        "default": "split-left"
       }
     }
   },
@@ -4801,5 +5055,251 @@
         "maxLength": 300
       }
     }
+  },
+  "trading-calculator": {
+    "id": "trading-calculator",
+    "name": "TradingCalculator",
+    "component": "TradingCalculator",
+    "category": "tools",
+    "description": "A live two-panel trading calculator for a searchable instrument picker across forex, synthetics, stocks, commodities, and crypto. Four variants share the same inputs and live data but each surface a different focused result: `main` (margin, trade volume, pip value, long/short swap together), `margin` (margin required only, mirrors deriv.com/trading-calculators/margin-calculator), `pip` (pip value only, mirrors deriv.com/trading-calculators/pip-calculator), and `swap` (long/short swap charges only, mirrors deriv.com/trading-calculators/swap-calculator). Fetches live instrument specs and USD exchange rates itself, no configuration required.",
+    "purpose": "A two-panel \"Calculator\" / \"Results\" trading calculator: a searchable instrument picker plus volume and asset-price inputs on the left, and computed results on the right. Ships in four variants (`variant` prop) that share identical inputs, styling, and live data, but each surface a different focused subset of results — see [Variants](#variants) below. Modeled after deriv.com's own trading-calculators pages, and wired to the same live data they use — the component fetches Deriv's public instrument-specs feed on mount and, only when an instrument's currency isn't already USD, calls Deriv's public exchange-rate API to convert the result. No API keys or setup are required; both endpoints are public and unauthenticated, and every variant is connected to the same two data sources — there is no separate margin/pip/swap API, matching how the three reference pages themselves work. | `variant` | Mirrors | Results panel shows | |---|---|---| | `\"main\"` (default) | [deriv.com/trading-calculators](https://deriv.com/trading-calculators) | Margin Required, Trade Volume + Pip value, Swap Charge Long + Short, swap rate/type/three-day/weekend info | | `\"margin\"` | [deriv.com/trading-calculators/margin-calculator](https://deriv.com/trading-calculators/margin-calculator) | Margin Required only | | `\"pip\"` | [deriv.com/trading-calculators/pip-calculator](https://deriv.com/trading-calculators/pip-calculator) | Pip value only | | `\"swap\"` | [deriv.com/trading-calculators/swap-calculator](https://deriv.com/trading-calculators/swap-calculator) | Swap Charge Long + Short, swap rate/type/three-day/weekend info |",
+    "keywords": [
+      "calculator",
+      "trading calculator",
+      "margin calculator",
+      "pip calculator",
+      "swap calculator",
+      "leverage",
+      "lot size",
+      "forex",
+      "cfd",
+      "trading tools",
+      "instrument specs",
+      "exchange rate",
+      "deriv",
+      "trading-calculators"
+    ],
+    "sectionType": "calculator",
+    "global": false,
+    "requiredFields": [],
+    "optionalFields": [
+      "variant",
+      "symbols",
+      "symbolsEndpoint",
+      "exchangeRateWsUrl",
+      "defaultSymbol"
+    ],
+    "variants": [
+      "main",
+      "margin",
+      "pip",
+      "swap"
+    ],
+    "recommendedPosition": 4,
+    "placement": [
+      "middle"
+    ],
+    "layout": {
+      "alignment": "center",
+      "carousel": false,
+      "contentWidth": "large",
+      "background": false,
+      "overlay": false
+    },
+    "supports": {
+      "backgroundImage": false,
+      "liveData": true,
+      "form": true,
+      "primaryButton": true,
+      "secondaryButton": true,
+      "badge": false
+    },
+    "imageRoles": [],
+    "defaultValues": {
+      "variant": "main",
+      "symbolsEndpoint": "https://deriv-static-pricingfeedv2.firebaseio.com/n8n/row/prod/dynamic_trading_specs.json",
+      "exchangeRateWsUrl": "wss://ws.derivws.com/websockets/v3?app_id=1089"
+    },
+    "fields": {
+      "defaultSymbol": {
+        "type": "string",
+        "required": false,
+        "maxLength": 30
+      },
+      "exchangeRateWsUrl": {
+        "type": "string",
+        "required": false
+      },
+      "symbols": {
+        "type": "array",
+        "required": false,
+        "itemFields": {
+          "ask_last": {
+            "type": "number",
+            "required": true
+          },
+          "asset_class": {
+            "type": "string",
+            "required": true
+          },
+          "base_currency": {
+            "type": "string",
+            "required": true
+          },
+          "contract_size": {
+            "type": "number",
+            "required": true
+          },
+          "description": {
+            "type": "string",
+            "required": true
+          },
+          "effective_leverage": {
+            "type": "number",
+            "required": true
+          },
+          "market": {
+            "type": "string",
+            "required": true
+          },
+          "pip_size": {
+            "type": "number",
+            "required": true
+          },
+          "point_size": {
+            "type": "number",
+            "required": true
+          },
+          "profit_currency": {
+            "type": "string",
+            "required": true
+          },
+          "swap_mode": {
+            "type": "string",
+            "required": true
+          },
+          "swap_rate_long": {
+            "type": "number",
+            "required": true
+          },
+          "swap_rate_short": {
+            "type": "number",
+            "required": true
+          },
+          "symbol": {
+            "type": "string",
+            "required": true
+          },
+          "volume_limit": {
+            "type": "number",
+            "required": true
+          },
+          "volume_min": {
+            "type": "number",
+            "required": true
+          }
+        }
+      },
+      "symbolsEndpoint": {
+        "type": "string",
+        "required": false
+      },
+      "variant": {
+        "type": "string",
+        "required": false,
+        "enum": [
+          "main",
+          "margin",
+          "pip",
+          "swap"
+        ],
+        "default": "main"
+      }
+    }
+  },
+  "trading-calculator-how-to": {
+    "id": "trading-calculator-how-to",
+    "name": "TradingCalculatorHowTo",
+    "component": "TradingCalculatorHowTo",
+    "category": "tools",
+    "description": "A \"How to calculate…\" explainer section pairing a centered title/description with a two-column \"Formula\" / \"Example\" card, walking through a worked calculation with an annotated calculation strip. Four variants mirror deriv.com's margin/pip/swap calculator explainer content: `margin` (deriv.com/trading-calculators/margin-calculator), `pip` (deriv.com/trading-calculators/pip-calculator), and `swap-points`/`swap-percentage` (deriv.com/trading-calculators/swap-calculator), which both render the same interactive \"In points\" / \"In percentage\" tab switch and only differ in which of the two formulas starts active.",
+    "purpose": "A \"How to calculate…\" explainer section: a centered title/description, then a two-column \"Formula\" / \"Example\" card that walks through one worked calculation using an annotated calculation strip (a boxed row of numbers, each connected by a small dot to a caption naming what it is — \"Lots\", \"Contract size\", \"Volume\", etc.). Modeled after the explainer content on deriv.com's own trading-calculators pages. Ships in four variants (`variant` prop); the two `swap-*` variants both render the same interactive \"In points\" / \"In percentage\" tab switch between the swap page's two formulas — they only differ in which formula starts active, a visitor can still click either tab afterwards regardless of which variant was set. | `variant` | Mirrors | Notes | |---|---|---| | `\"margin\"` (default) | [deriv.com/trading-calculators/margin-calculator](https://deriv.com/trading-calculators/margin-calculator) | One formula, two calculation strips (Volume, then Required margin) | | `\"pip\"` | [deriv.com/trading-calculators/pip-calculator](https://deriv.com/trading-calculators/pip-calculator) | One formula, one calculation strip | | `\"swap-points\"` | [deriv.com/trading-calculators/swap-calculator](https://deriv.com/trading-calculators/swap-calculator) | Interactive tab switch — \"Swap calculation (In points)\" / \"Swap calculation (In percentage)\" — opening on the points-based formula | | `\"swap-percentage\"` | [deriv.com/trading-calculators/swap-calculator](https://deriv.com/trading-calculators/swap-calculator) | Same interactive tab switch, opening on the percentage/rollover-price-based formula | This block is the worked-example/explainer companion to `TradingCalculator` (the live tool) — pair the two together, `TradingCalculatorHowTo` typically placed below `TradingCalculator` on the same page, exactly as deriv.com does on all three reference pages.",
+    "keywords": [
+      "how to calculate",
+      "margin calculator",
+      "pip calculator",
+      "swap calculator",
+      "formula",
+      "worked example",
+      "explainer",
+      "leverage",
+      "lot size",
+      "forex",
+      "cfd",
+      "trading tools",
+      "deriv",
+      "trading-calculators"
+    ],
+    "sectionType": "explainer",
+    "global": false,
+    "requiredFields": [],
+    "optionalFields": [
+      "variant",
+      "title",
+      "description"
+    ],
+    "variants": [
+      "margin",
+      "pip",
+      "swap-points",
+      "swap-percentage"
+    ],
+    "recommendedPosition": 5,
+    "placement": [
+      "middle"
+    ],
+    "layout": {
+      "alignment": "center",
+      "carousel": false,
+      "contentWidth": "large",
+      "background": false,
+      "overlay": false
+    },
+    "supports": {
+      "backgroundImage": false,
+      "liveData": false,
+      "form": false,
+      "primaryButton": false,
+      "secondaryButton": false,
+      "badge": false,
+      "editableText": true
+    },
+    "imageRoles": [],
+    "defaultValues": {
+      "variant": "margin"
+    },
+    "fields": {
+      "description": {
+        "type": "string",
+        "required": false,
+        "maxLength": 200
+      },
+      "title": {
+        "type": "string",
+        "required": false,
+        "maxLength": 80
+      },
+      "variant": {
+        "type": "string",
+        "required": false,
+        "enum": [
+          "margin",
+          "pip",
+          "swap-points",
+          "swap-percentage"
+        ],
+        "default": "margin"
+      }
+    }
   }
 }