@deriv-web-design/ui 0.1.33 → 0.1.35

package/block-registry.json

@@ -504,6 +504,121 @@
       }
     }
   },
+  "comparison-cards": {
+    "id": "comparison-cards",
+    "name": "Comparison Cards",
+    "component": "ComparisonCards",
+    "category": "feature",
+    "description": "Centred section header above two or three equal-height comparison cards. Each card repeats its own label/value rows on an independent light or dark surface, with an optional per-card footnote.",
+    "purpose": "An authored marketing band with a section heading and supporting copy above two or three equal-height comparison cards. Each card is an independent light or dark surface that repeats its own label/value rows. Optional footnotes belong to a specific card — never the section header. This is a separate block from `DynamicTable` and `FeatureCards` so Raven can map a 2–3 option card band with repeated spec rows without a route-specific hack.",
+    "keywords": [
+      "comparison",
+      "cards",
+      "spot",
+      "futures",
+      "specs",
+      "what-you-can-trade",
+      "options",
+      "marketing",
+      "trading",
+      "deriv",
+      "light-dark"
+    ],
+    "sectionType": "feature",
+    "global": false,
+    "requiredFields": [
+      "title",
+      "cards"
+    ],
+    "optionalFields": [
+      "description"
+    ],
+    "variants": [
+      "default"
+    ],
+    "recommendedPosition": 5,
+    "placement": [
+      "middle"
+    ],
+    "layout": {
+      "alignment": "center",
+      "gridColumns": "2",
+      "contentWidth": "large",
+      "background": false,
+      "overlay": false
+    },
+    "supports": {
+      "backgroundImage": false,
+      "backgroundVideo": false,
+      "foregroundImage": false,
+      "primaryButton": false,
+      "secondaryButton": false,
+      "sectionLink": false,
+      "cardLink": false,
+      "icons": false
+    },
+    "imageRoles": [],
+    "defaultValues": {},
+    "fields": {
+      "cards": {
+        "type": "array",
+        "required": true,
+        "itemFields": {
+          "description": {
+            "type": "string",
+            "required": true,
+            "maxLength": 280
+          },
+          "footnote": {
+            "type": "string",
+            "required": false,
+            "maxLength": 280,
+            "description": "Optional disclaimer belonging to this card only — not the section header."
+          },
+          "rows": {
+            "type": "array",
+            "required": true,
+            "itemFields": {
+              "label": {
+                "type": "string",
+                "required": true,
+                "maxLength": 60
+              },
+              "value": {
+                "type": "string",
+                "required": true,
+                "maxLength": 80
+              }
+            }
+          },
+          "theme": {
+            "type": "string",
+            "required": false,
+            "enum": [
+              "light",
+              "dark"
+            ],
+            "description": "Card surface. When omitted, cards cycle light → dark."
+          },
+          "title": {
+            "type": "string",
+            "required": true,
+            "maxLength": 80
+          }
+        }
+      },
+      "description": {
+        "type": "string",
+        "required": false,
+        "maxLength": 240
+      },
+      "title": {
+        "type": "string",
+        "required": true,
+        "maxLength": 80
+      }
+    }
+  },
   "coral-banner-static": {
     "id": "coral-banner-static",
     "name": "Coral Banner",
@@ -777,6 +892,189 @@
       }
     }
   },
+  "crypto-markets-table": {
+    "id": "crypto-markets-table",
+    "name": "CryptoMarketsTable",
+    "component": "CryptoMarketsTable",
+    "category": "markets",
+    "description": "Self-sourcing spot/futures markets table for Deriv Crypto Exchange. Streams public tickers and hourly klines, shows price, 1h/24h change, and a 7-day sparkline. No authentication required.",
+    "purpose": "A self-sourcing markets table for Deriv Crypto Exchange. Streams public spot or futures tickers plus hourly klines to show price, 1h %, 24h %, and a 7-day sparkline. Quote-currency tabs are generated from discovered markets.",
+    "keywords": [
+      "crypto",
+      "exchange",
+      "markets",
+      "table",
+      "spot",
+      "futures",
+      "sparkline",
+      "deriv crypto exchange",
+      "explore markets"
+    ],
+    "sectionType": "table",
+    "global": false,
+    "requiredFields": [],
+    "optionalFields": [
+      "variant",
+      "initialMarket",
+      "initialQuoteCurrency",
+      "apiOrigin",
+      "maxRows"
+    ],
+    "variants": [
+      "default"
+    ],
+    "recommendedPosition": 3,
+    "placement": [
+      "middle"
+    ],
+    "layout": {
+      "alignment": "center",
+      "carousel": false,
+      "contentWidth": "large",
+      "background": false,
+      "overlay": false
+    },
+    "supports": {
+      "backgroundImage": false,
+      "liveData": true,
+      "form": false,
+      "primaryButton": false,
+      "secondaryButton": false,
+      "badge": false
+    },
+    "imageRoles": [],
+    "defaultValues": {
+      "variant": "default",
+      "initialMarket": "spot",
+      "initialQuoteCurrency": "USDT",
+      "apiOrigin": "https://deriv.exchange"
+    },
+    "fields": {
+      "apiOrigin": {
+        "type": "string",
+        "required": false
+      },
+      "initialMarket": {
+        "type": "string",
+        "required": false,
+        "enum": [
+          "spot",
+          "futures"
+        ],
+        "default": "spot"
+      },
+      "initialQuoteCurrency": {
+        "type": "string",
+        "required": false,
+        "maxLength": 12,
+        "default": "USDT"
+      },
+      "maxRows": {
+        "type": "number",
+        "required": false,
+        "min": 1,
+        "max": 500
+      },
+      "variant": {
+        "type": "string",
+        "required": false,
+        "enum": [
+          "default"
+        ],
+        "default": "default"
+      }
+    }
+  },
+  "crypto-trade-converter": {
+    "id": "crypto-trade-converter",
+    "name": "CryptoTradeConverter",
+    "component": "CryptoTradeConverter",
+    "category": "tools",
+    "description": "Self-sourcing Buy/Sell crypto converter for Deriv Crypto Exchange. Streams public spot prices, keeps pay/receive amounts synchronized, and links to the exchange. No authentication, balances, or order placement.",
+    "purpose": "A self-sourcing Buy/Sell converter for Deriv Crypto Exchange marketing pages. Streams public spot prices at runtime, keeps pay/receive amounts synchronized to the live mid price, and links traders to the exchange. Authoring fields are configuration only — never live prices.",
+    "keywords": [
+      "crypto",
+      "exchange",
+      "converter",
+      "buy sell",
+      "spot",
+      "btc",
+      "usdt",
+      "deriv crypto exchange",
+      "trade converter"
+    ],
+    "sectionType": "converter",
+    "global": false,
+    "requiredFields": [],
+    "optionalFields": [
+      "variant",
+      "market",
+      "defaultPair",
+      "tradeHref",
+      "apiOrigin"
+    ],
+    "variants": [
+      "default"
+    ],
+    "recommendedPosition": 2,
+    "placement": [
+      "middle"
+    ],
+    "layout": {
+      "alignment": "center",
+      "carousel": false,
+      "contentWidth": "large",
+      "background": false,
+      "overlay": false
+    },
+    "supports": {
+      "backgroundImage": false,
+      "liveData": true,
+      "form": true,
+      "primaryButton": true,
+      "secondaryButton": false,
+      "badge": false
+    },
+    "imageRoles": [],
+    "defaultValues": {
+      "variant": "default",
+      "market": "spot",
+      "defaultPair": "BTC/USDT",
+      "tradeHref": "https://deriv.exchange",
+      "apiOrigin": "https://deriv.exchange"
+    },
+    "fields": {
+      "apiOrigin": {
+        "type": "string",
+        "required": false
+      },
+      "defaultPair": {
+        "type": "string",
+        "required": false,
+        "maxLength": 40
+      },
+      "market": {
+        "type": "string",
+        "required": false,
+        "enum": [
+          "spot"
+        ],
+        "default": "spot"
+      },
+      "tradeHref": {
+        "type": "string",
+        "required": false
+      },
+      "variant": {
+        "type": "string",
+        "required": false,
+        "enum": [
+          "default"
+        ],
+        "default": "default"
+      }
+    }
+  },
   "cta-banner-standard": {
     "id": "cta-banner-standard",
     "name": "CTA Banner Standard",
@@ -2739,6 +3037,173 @@
       }
     }
   },
+  "feature-cards-carousel": {
+    "id": "feature-cards-carousel",
+    "name": "Feature Cards Carousel",
+    "component": "FeatureCardsCarousel",
+    "category": "feature",
+    "description": "Centred section header above a swipeable, peeking feature-card carousel with prev/next controls and pagination dots.",
+    "purpose": "A marketing feature band with a section heading and supporting copy above a swipeable, peeking card carousel. Each slide carries a title, body, optional artwork, optional CTA, and a coral / dark / light surface tone. This is a separate block from `FeatureCards` so page builders can map a multi-slide feature band without choosing among static grid variants.",
+    "keywords": [
+      "feature",
+      "carousel",
+      "slider",
+      "cards",
+      "benefits",
+      "showcase",
+      "what-you-get",
+      "swipe",
+      "marketing",
+      "trading",
+      "deriv"
+    ],
+    "sectionType": "feature",
+    "global": false,
+    "requiredFields": [
+      "title",
+      "items"
+    ],
+    "optionalFields": [
+      "description",
+      "defaultActiveIndex",
+      "autoplay",
+      "autoplayDelay",
+      "showArrows",
+      "showDots"
+    ],
+    "variants": [
+      "default"
+    ],
+    "recommendedPosition": 4,
+    "placement": [
+      "middle"
+    ],
+    "layout": {
+      "alignment": "center",
+      "gridColumns": "1",
+      "contentWidth": "large",
+      "background": false,
+      "overlay": false
+    },
+    "supports": {
+      "backgroundImage": false,
+      "backgroundVideo": false,
+      "foregroundImage": true,
+      "primaryButton": false,
+      "secondaryButton": false,
+      "sectionLink": false,
+      "cardLink": true,
+      "icons": false
+    },
+    "imageRoles": [
+      "slide-image"
+    ],
+    "defaultValues": {
+      "defaultActiveIndex": 0,
+      "autoplay": false,
+      "autoplayDelay": 5000,
+      "showArrows": true,
+      "showDots": true
+    },
+    "fields": {
+      "autoplay": {
+        "type": "boolean",
+        "required": false,
+        "default": false,
+        "description": "Advance slides automatically. Off by default. When on, autoplay pauses on hover, focus, and prefers-reduced-motion."
+      },
+      "autoplayDelay": {
+        "type": "number",
+        "required": false,
+        "default": 5000,
+        "description": "Milliseconds between autoplay advances."
+      },
+      "defaultActiveIndex": {
+        "type": "number",
+        "required": false,
+        "default": 0,
+        "description": "Zero-based index of the initially active slide."
+      },
+      "description": {
+        "type": "string",
+        "required": false,
+        "maxLength": 240
+      },
+      "items": {
+        "type": "array",
+        "required": true,
+        "itemFields": {
+          "ctaHref": {
+            "type": "url",
+            "required": false
+          },
+          "ctaLabel": {
+            "type": "string",
+            "required": false,
+            "maxLength": 40
+          },
+          "description": {
+            "type": "string",
+            "required": true,
+            "maxLength": 280
+          },
+          "image": {
+            "type": "image",
+            "required": false
+          },
+          "imageAlt": {
+            "type": "string",
+            "required": false,
+            "default": "",
+            "defaultSource": "effective",
+            "maxLength": 125,
+            "description": "Alt text for the slide image. Defaults to an empty string (decorative)."
+          },
+          "imageFit": {
+            "type": "string",
+            "required": false,
+            "default": "media",
+            "defaultSource": "effective",
+            "enum": [
+              "media",
+              "cover"
+            ],
+            "description": "Artwork layout. \"media\" places a strip under the copy; \"cover\" fills the card behind the copy."
+          },
+          "title": {
+            "type": "string",
+            "required": true,
+            "maxLength": 80
+          },
+          "tone": {
+            "type": "string",
+            "required": false,
+            "enum": [
+              "coral",
+              "dark",
+              "light"
+            ],
+            "description": "Card surface. When omitted, slides cycle coral → dark → light."
+          }
+        }
+      },
+      "showArrows": {
+        "type": "boolean",
+        "required": false,
+        "default": true
+      },
+      "showDots": {
+        "type": "boolean",
+        "required": false,
+        "default": true
+      },
+      "title": {
+        "type": "string",
+        "required": true,
+        "maxLength": 80
+      }
+    }
+  },
   "feature-cards-icon": {
     "id": "feature-cards-icon",
     "name": "Feature Cards Icon",
@@ -3992,6 +4457,7 @@
     "optionalFields": [
       "subtitle",
       "description",
+      "headingLevel",
       "primaryButton",
       "secondaryButton",
       "backgroundImageSrc",
@@ -4030,7 +4496,9 @@
       "product-image",
       "floating-image"
     ],
-    "defaultValues": {},
+    "defaultValues": {
+      "headingLevel": 1
+    },
     "fields": {
       "backgroundImageSrc": {
         "type": "image",
@@ -4053,6 +4521,16 @@
         ],
         "description": "Secondary foreground image. In Showcase it sits below productImage, cropped to 1:1. In Split it is a small layer anchored to the hero's lower inline-end, painted behind heroImage and hidden below 992px; portrait assets keep their natural aspect ratio. Accepts a ReactNode in code; page builders should pass an image URL string."
       },
+      "headingLevel": {
+        "type": "number",
+        "required": false,
+        "default": 1,
+        "enum": [
+          1,
+          2
+        ],
+        "description": "Semantic heading level for the title. Defaults to 1 (<h1>). Pass 2 when the Hero is not the page’s primary heading. Styling is unchanged."
+      },
       "heroImage": {
         "type": "image",
         "required": false,