@deriv-web-design/ui 0.1.4 → 0.1.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/block-registry.json +2358 -57
- package/components.manifest.json +2432 -0
- package/dist/award-leaf-left-HVAB5T5H.png +0 -0
- package/dist/award-leaf-right-WR5I37KI.png +0 -0
- package/dist/index.css +872 -0
- package/dist/index.css.map +1 -1
- package/dist/index.d.mts +198 -1
- package/dist/index.d.ts +198 -1
- package/dist/index.js +577 -0
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +569 -0
- package/dist/index.mjs.map +1 -1
- package/package.json +21 -5
|
@@ -0,0 +1,2432 @@
|
|
|
1
|
+
{
|
|
2
|
+
"$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.",
|
|
3
|
+
"package": "@deriv-web-design/ui",
|
|
4
|
+
"componentCount": 44,
|
|
5
|
+
"components": {
|
|
6
|
+
"Accordion": {
|
|
7
|
+
"name": "Accordion",
|
|
8
|
+
"source": "components/Accordion/Accordion.tsx",
|
|
9
|
+
"props": {
|
|
10
|
+
"children": {
|
|
11
|
+
"type": "ReactNode",
|
|
12
|
+
"required": false,
|
|
13
|
+
"description": "Body content revealed when expanded"
|
|
14
|
+
},
|
|
15
|
+
"className": {
|
|
16
|
+
"type": "string",
|
|
17
|
+
"required": false
|
|
18
|
+
},
|
|
19
|
+
"defaultOpen": {
|
|
20
|
+
"type": "boolean",
|
|
21
|
+
"required": false,
|
|
22
|
+
"description": "Initial open state for uncontrolled usage",
|
|
23
|
+
"default": false
|
|
24
|
+
},
|
|
25
|
+
"onToggle": {
|
|
26
|
+
"type": "((open: boolean) => void)",
|
|
27
|
+
"required": false,
|
|
28
|
+
"description": "Called when the accordion is toggled"
|
|
29
|
+
},
|
|
30
|
+
"open": {
|
|
31
|
+
"type": "boolean",
|
|
32
|
+
"required": false,
|
|
33
|
+
"description": "Controlled open state"
|
|
34
|
+
},
|
|
35
|
+
"showBottomDivider": {
|
|
36
|
+
"type": "boolean",
|
|
37
|
+
"required": false,
|
|
38
|
+
"description": "Show the bottom divider line (default: true)",
|
|
39
|
+
"default": true
|
|
40
|
+
},
|
|
41
|
+
"showFocusRing": {
|
|
42
|
+
"type": "boolean",
|
|
43
|
+
"required": false,
|
|
44
|
+
"description": "Render a visible focus-ring overlay (Storybook demo)",
|
|
45
|
+
"default": false
|
|
46
|
+
},
|
|
47
|
+
"showTopDivider": {
|
|
48
|
+
"type": "boolean",
|
|
49
|
+
"required": false,
|
|
50
|
+
"description": "Show the top divider line (default: true)",
|
|
51
|
+
"default": true
|
|
52
|
+
},
|
|
53
|
+
"title": {
|
|
54
|
+
"type": "string",
|
|
55
|
+
"required": true,
|
|
56
|
+
"description": "Accordion header title"
|
|
57
|
+
}
|
|
58
|
+
}
|
|
59
|
+
},
|
|
60
|
+
"ArticleHero": {
|
|
61
|
+
"name": "ArticleHero",
|
|
62
|
+
"source": "templates/ArticleHero/ArticleHero.tsx",
|
|
63
|
+
"props": {
|
|
64
|
+
"className": {
|
|
65
|
+
"type": "string",
|
|
66
|
+
"required": false,
|
|
67
|
+
"description": "Additional CSS class"
|
|
68
|
+
},
|
|
69
|
+
"featured": {
|
|
70
|
+
"type": "ArticleHeroArticle",
|
|
71
|
+
"required": true,
|
|
72
|
+
"description": "The featured/hero article displayed prominently in the center",
|
|
73
|
+
"objectFields": {
|
|
74
|
+
"onClick": {
|
|
75
|
+
"type": "(() => void)",
|
|
76
|
+
"required": false,
|
|
77
|
+
"description": "Click handler for the article"
|
|
78
|
+
},
|
|
79
|
+
"summary": {
|
|
80
|
+
"type": "string",
|
|
81
|
+
"required": false,
|
|
82
|
+
"description": "Article summary/description"
|
|
83
|
+
},
|
|
84
|
+
"tags": {
|
|
85
|
+
"type": "string[]",
|
|
86
|
+
"required": false,
|
|
87
|
+
"description": "Tags displayed below the content (e.g. date, category)"
|
|
88
|
+
},
|
|
89
|
+
"thumbnail": {
|
|
90
|
+
"type": "string",
|
|
91
|
+
"required": false,
|
|
92
|
+
"description": "Thumbnail image URL"
|
|
93
|
+
},
|
|
94
|
+
"thumbnailAlt": {
|
|
95
|
+
"type": "string",
|
|
96
|
+
"required": false
|
|
97
|
+
},
|
|
98
|
+
"title": {
|
|
99
|
+
"type": "string",
|
|
100
|
+
"required": true,
|
|
101
|
+
"description": "Article title"
|
|
102
|
+
}
|
|
103
|
+
}
|
|
104
|
+
},
|
|
105
|
+
"featuredFooter": {
|
|
106
|
+
"type": "ArticleHeroArticle[]",
|
|
107
|
+
"required": false,
|
|
108
|
+
"description": "Small cards displayed below the featured article (max 2)",
|
|
109
|
+
"default": []
|
|
110
|
+
},
|
|
111
|
+
"leftColumn": {
|
|
112
|
+
"type": "ArticleHeroColumn",
|
|
113
|
+
"required": true,
|
|
114
|
+
"description": "Left sidebar column",
|
|
115
|
+
"objectFields": {
|
|
116
|
+
"articles": {
|
|
117
|
+
"type": "ArticleHeroArticle[]",
|
|
118
|
+
"required": true,
|
|
119
|
+
"description": "List of articles in this column",
|
|
120
|
+
"items": {
|
|
121
|
+
"onClick": {
|
|
122
|
+
"type": "(() => void)",
|
|
123
|
+
"required": false,
|
|
124
|
+
"description": "Click handler for the article"
|
|
125
|
+
},
|
|
126
|
+
"summary": {
|
|
127
|
+
"type": "string",
|
|
128
|
+
"required": false,
|
|
129
|
+
"description": "Article summary/description"
|
|
130
|
+
},
|
|
131
|
+
"tags": {
|
|
132
|
+
"type": "string[]",
|
|
133
|
+
"required": false,
|
|
134
|
+
"description": "Tags displayed below the content (e.g. date, category)"
|
|
135
|
+
},
|
|
136
|
+
"thumbnail": {
|
|
137
|
+
"type": "string",
|
|
138
|
+
"required": false,
|
|
139
|
+
"description": "Thumbnail image URL"
|
|
140
|
+
},
|
|
141
|
+
"thumbnailAlt": {
|
|
142
|
+
"type": "string",
|
|
143
|
+
"required": false
|
|
144
|
+
},
|
|
145
|
+
"title": {
|
|
146
|
+
"type": "string",
|
|
147
|
+
"required": true,
|
|
148
|
+
"description": "Article title"
|
|
149
|
+
}
|
|
150
|
+
}
|
|
151
|
+
},
|
|
152
|
+
"label": {
|
|
153
|
+
"type": "string",
|
|
154
|
+
"required": false,
|
|
155
|
+
"description": "Section label displayed with a horizontal line (e.g. \"Today's pick\", \"Trending stories\")"
|
|
156
|
+
}
|
|
157
|
+
}
|
|
158
|
+
},
|
|
159
|
+
"rightColumn": {
|
|
160
|
+
"type": "ArticleHeroColumn",
|
|
161
|
+
"required": true,
|
|
162
|
+
"description": "Right sidebar column",
|
|
163
|
+
"objectFields": {
|
|
164
|
+
"articles": {
|
|
165
|
+
"type": "ArticleHeroArticle[]",
|
|
166
|
+
"required": true,
|
|
167
|
+
"description": "List of articles in this column",
|
|
168
|
+
"items": {
|
|
169
|
+
"onClick": {
|
|
170
|
+
"type": "(() => void)",
|
|
171
|
+
"required": false,
|
|
172
|
+
"description": "Click handler for the article"
|
|
173
|
+
},
|
|
174
|
+
"summary": {
|
|
175
|
+
"type": "string",
|
|
176
|
+
"required": false,
|
|
177
|
+
"description": "Article summary/description"
|
|
178
|
+
},
|
|
179
|
+
"tags": {
|
|
180
|
+
"type": "string[]",
|
|
181
|
+
"required": false,
|
|
182
|
+
"description": "Tags displayed below the content (e.g. date, category)"
|
|
183
|
+
},
|
|
184
|
+
"thumbnail": {
|
|
185
|
+
"type": "string",
|
|
186
|
+
"required": false,
|
|
187
|
+
"description": "Thumbnail image URL"
|
|
188
|
+
},
|
|
189
|
+
"thumbnailAlt": {
|
|
190
|
+
"type": "string",
|
|
191
|
+
"required": false
|
|
192
|
+
},
|
|
193
|
+
"title": {
|
|
194
|
+
"type": "string",
|
|
195
|
+
"required": true,
|
|
196
|
+
"description": "Article title"
|
|
197
|
+
}
|
|
198
|
+
}
|
|
199
|
+
},
|
|
200
|
+
"label": {
|
|
201
|
+
"type": "string",
|
|
202
|
+
"required": false,
|
|
203
|
+
"description": "Section label displayed with a horizontal line (e.g. \"Today's pick\", \"Trending stories\")"
|
|
204
|
+
}
|
|
205
|
+
}
|
|
206
|
+
}
|
|
207
|
+
}
|
|
208
|
+
},
|
|
209
|
+
"ArticleSection": {
|
|
210
|
+
"name": "ArticleSection",
|
|
211
|
+
"source": "templates/ArticleSection/ArticleSection.tsx",
|
|
212
|
+
"props": {
|
|
213
|
+
"articles": {
|
|
214
|
+
"type": "ArticleSectionItem[]",
|
|
215
|
+
"required": true,
|
|
216
|
+
"description": "List of smaller articles",
|
|
217
|
+
"items": {
|
|
218
|
+
"onClick": {
|
|
219
|
+
"type": "(() => void)",
|
|
220
|
+
"required": false,
|
|
221
|
+
"description": "Click handler"
|
|
222
|
+
},
|
|
223
|
+
"summary": {
|
|
224
|
+
"type": "string",
|
|
225
|
+
"required": false,
|
|
226
|
+
"description": "Article summary/description"
|
|
227
|
+
},
|
|
228
|
+
"tags": {
|
|
229
|
+
"type": "string[]",
|
|
230
|
+
"required": false,
|
|
231
|
+
"description": "Tags displayed below the content (e.g. category, date)"
|
|
232
|
+
},
|
|
233
|
+
"thumbnail": {
|
|
234
|
+
"type": "string",
|
|
235
|
+
"required": false,
|
|
236
|
+
"description": "Thumbnail image URL"
|
|
237
|
+
},
|
|
238
|
+
"thumbnailAlt": {
|
|
239
|
+
"type": "string",
|
|
240
|
+
"required": false
|
|
241
|
+
},
|
|
242
|
+
"title": {
|
|
243
|
+
"type": "string",
|
|
244
|
+
"required": true,
|
|
245
|
+
"description": "Article title"
|
|
246
|
+
}
|
|
247
|
+
}
|
|
248
|
+
},
|
|
249
|
+
"className": {
|
|
250
|
+
"type": "string",
|
|
251
|
+
"required": false,
|
|
252
|
+
"description": "Additional CSS class"
|
|
253
|
+
},
|
|
254
|
+
"featured": {
|
|
255
|
+
"type": "ArticleSectionItem",
|
|
256
|
+
"required": false,
|
|
257
|
+
"description": "The featured article (large card) — not used in \"grid\" variant"
|
|
258
|
+
},
|
|
259
|
+
"linkText": {
|
|
260
|
+
"type": "string",
|
|
261
|
+
"required": false,
|
|
262
|
+
"description": "\"View all\" link text",
|
|
263
|
+
"default": "View all articles"
|
|
264
|
+
},
|
|
265
|
+
"onLinkClick": {
|
|
266
|
+
"type": "(() => void)",
|
|
267
|
+
"required": false,
|
|
268
|
+
"description": "\"View all\" link click handler"
|
|
269
|
+
},
|
|
270
|
+
"sectionTitle": {
|
|
271
|
+
"type": "string",
|
|
272
|
+
"required": true,
|
|
273
|
+
"description": "Section heading"
|
|
274
|
+
},
|
|
275
|
+
"variant": {
|
|
276
|
+
"type": "ArticleSectionVariant",
|
|
277
|
+
"required": false,
|
|
278
|
+
"description": "Layout variant — \"featured\" shows a large horizontal hero card + text-only grid; \"showcase\" shows a vertical featured card + horizontal-reverse card columns; \"grid\" shows a 4-column card grid (horizontal scroll on mobile)",
|
|
279
|
+
"default": "featured"
|
|
280
|
+
}
|
|
281
|
+
}
|
|
282
|
+
},
|
|
283
|
+
"AvatarGrid": {
|
|
284
|
+
"name": "AvatarGrid",
|
|
285
|
+
"source": "templates/Leaders/Leaders.tsx",
|
|
286
|
+
"props": {
|
|
287
|
+
"className": {
|
|
288
|
+
"type": "string",
|
|
289
|
+
"required": false,
|
|
290
|
+
"description": "Optional CSS class name"
|
|
291
|
+
},
|
|
292
|
+
"collapseText": {
|
|
293
|
+
"type": "string",
|
|
294
|
+
"required": false,
|
|
295
|
+
"description": "Text for the collapse button (default: \"View less\")",
|
|
296
|
+
"default": "View less"
|
|
297
|
+
},
|
|
298
|
+
"description": {
|
|
299
|
+
"type": "string",
|
|
300
|
+
"required": false,
|
|
301
|
+
"description": "Optional description text rendered below the title"
|
|
302
|
+
},
|
|
303
|
+
"expandText": {
|
|
304
|
+
"type": "string",
|
|
305
|
+
"required": false,
|
|
306
|
+
"description": "Text for the expand button (default: \"View all\")",
|
|
307
|
+
"default": "View all"
|
|
308
|
+
},
|
|
309
|
+
"initialVisibleCount": {
|
|
310
|
+
"type": "number",
|
|
311
|
+
"required": false,
|
|
312
|
+
"description": "Number of items to show initially before expanding (default: 4)",
|
|
313
|
+
"default": 4
|
|
314
|
+
},
|
|
315
|
+
"items": {
|
|
316
|
+
"type": "PersonItem[]",
|
|
317
|
+
"required": true,
|
|
318
|
+
"description": "Array of person data objects",
|
|
319
|
+
"items": {
|
|
320
|
+
"imageUrl": {
|
|
321
|
+
"type": "string",
|
|
322
|
+
"required": true,
|
|
323
|
+
"description": "URL to the person's profile image"
|
|
324
|
+
},
|
|
325
|
+
"linkIcon": {
|
|
326
|
+
"type": "ReactNode",
|
|
327
|
+
"required": false,
|
|
328
|
+
"description": "Optional icon element to render inside the link"
|
|
329
|
+
},
|
|
330
|
+
"linkLabel": {
|
|
331
|
+
"type": "string",
|
|
332
|
+
"required": false,
|
|
333
|
+
"description": "Accessible label for the link (e.g. \"LinkedIn\", \"Website\") — defaults to \"Profile\""
|
|
334
|
+
},
|
|
335
|
+
"linkUrl": {
|
|
336
|
+
"type": "string",
|
|
337
|
+
"required": false,
|
|
338
|
+
"description": "Optional URL for a profile link (e.g. LinkedIn, personal page)"
|
|
339
|
+
},
|
|
340
|
+
"name": {
|
|
341
|
+
"type": "string",
|
|
342
|
+
"required": true,
|
|
343
|
+
"description": "Person's full name"
|
|
344
|
+
},
|
|
345
|
+
"role": {
|
|
346
|
+
"type": "string",
|
|
347
|
+
"required": true,
|
|
348
|
+
"description": "Person's job title or role"
|
|
349
|
+
}
|
|
350
|
+
}
|
|
351
|
+
},
|
|
352
|
+
"title": {
|
|
353
|
+
"type": "string",
|
|
354
|
+
"required": false,
|
|
355
|
+
"description": "Section title"
|
|
356
|
+
}
|
|
357
|
+
}
|
|
358
|
+
},
|
|
359
|
+
"BottomSheet": {
|
|
360
|
+
"name": "BottomSheet",
|
|
361
|
+
"source": "components/BottomSheet/BottomSheet.tsx",
|
|
362
|
+
"props": {
|
|
363
|
+
"children": {
|
|
364
|
+
"type": "ReactNode",
|
|
365
|
+
"required": false,
|
|
366
|
+
"description": "Flexible body content — list items, form fields, etc."
|
|
367
|
+
},
|
|
368
|
+
"onClose": {
|
|
369
|
+
"type": "() => void",
|
|
370
|
+
"required": true,
|
|
371
|
+
"description": "Called when the user dismisses the sheet (overlay click, close button, or Escape key)"
|
|
372
|
+
},
|
|
373
|
+
"open": {
|
|
374
|
+
"type": "boolean",
|
|
375
|
+
"required": true,
|
|
376
|
+
"description": "Whether the sheet is visible"
|
|
377
|
+
},
|
|
378
|
+
"primaryAction": {
|
|
379
|
+
"type": "BottomSheetAction",
|
|
380
|
+
"required": false,
|
|
381
|
+
"description": "Primary action button rendered at the bottom of the sheet"
|
|
382
|
+
},
|
|
383
|
+
"secondaryAction": {
|
|
384
|
+
"type": "BottomSheetAction",
|
|
385
|
+
"required": false,
|
|
386
|
+
"description": "Secondary action button rendered below the primary"
|
|
387
|
+
},
|
|
388
|
+
"showHandleBar": {
|
|
389
|
+
"type": "boolean",
|
|
390
|
+
"required": false,
|
|
391
|
+
"description": "Show the drag handle bar at the top. Default: true",
|
|
392
|
+
"default": true
|
|
393
|
+
},
|
|
394
|
+
"showHeader": {
|
|
395
|
+
"type": "boolean",
|
|
396
|
+
"required": false,
|
|
397
|
+
"description": "Show the header row (title + close button). Default: true",
|
|
398
|
+
"default": true
|
|
399
|
+
},
|
|
400
|
+
"title": {
|
|
401
|
+
"type": "string",
|
|
402
|
+
"required": false,
|
|
403
|
+
"description": "Title displayed in the header"
|
|
404
|
+
}
|
|
405
|
+
}
|
|
406
|
+
},
|
|
407
|
+
"Breadcrumb": {
|
|
408
|
+
"name": "Breadcrumb",
|
|
409
|
+
"source": "components/Breadcrumb/Breadcrumb.tsx",
|
|
410
|
+
"props": {
|
|
411
|
+
"collapsible": {
|
|
412
|
+
"type": "boolean",
|
|
413
|
+
"required": false,
|
|
414
|
+
"description": "Collapse middle items into \"…\" on mobile when items > 3. Defaults to true.",
|
|
415
|
+
"default": true
|
|
416
|
+
},
|
|
417
|
+
"items": {
|
|
418
|
+
"type": "BreadcrumbItem[]",
|
|
419
|
+
"required": true,
|
|
420
|
+
"items": {
|
|
421
|
+
"href": {
|
|
422
|
+
"type": "string",
|
|
423
|
+
"required": false
|
|
424
|
+
},
|
|
425
|
+
"label": {
|
|
426
|
+
"type": "string",
|
|
427
|
+
"required": true
|
|
428
|
+
},
|
|
429
|
+
"onClick": {
|
|
430
|
+
"type": "((event: MouseEvent<HTMLAnchorElement, MouseEvent>) => void)",
|
|
431
|
+
"required": false
|
|
432
|
+
}
|
|
433
|
+
}
|
|
434
|
+
},
|
|
435
|
+
"size": {
|
|
436
|
+
"type": "BreadcrumbSize",
|
|
437
|
+
"required": false,
|
|
438
|
+
"default": "md"
|
|
439
|
+
}
|
|
440
|
+
}
|
|
441
|
+
},
|
|
442
|
+
"Button": {
|
|
443
|
+
"name": "Button",
|
|
444
|
+
"source": "components/Button/Button.tsx",
|
|
445
|
+
"props": {
|
|
446
|
+
"colorScheme": {
|
|
447
|
+
"type": "ButtonColorScheme",
|
|
448
|
+
"required": false,
|
|
449
|
+
"description": "Color scheme — coral (brand), black, or white (for dark backgrounds)",
|
|
450
|
+
"default": "coral"
|
|
451
|
+
},
|
|
452
|
+
"fullWidth": {
|
|
453
|
+
"type": "boolean",
|
|
454
|
+
"required": false,
|
|
455
|
+
"description": "Stretch the button to fill its container",
|
|
456
|
+
"default": false
|
|
457
|
+
},
|
|
458
|
+
"icon": {
|
|
459
|
+
"type": "ReactNode",
|
|
460
|
+
"required": false,
|
|
461
|
+
"description": "Icon node to render"
|
|
462
|
+
},
|
|
463
|
+
"iconPosition": {
|
|
464
|
+
"type": "ButtonIconPosition",
|
|
465
|
+
"required": false,
|
|
466
|
+
"description": "Icon placement relative to the label",
|
|
467
|
+
"default": "none"
|
|
468
|
+
},
|
|
469
|
+
"label": {
|
|
470
|
+
"type": "string",
|
|
471
|
+
"required": false,
|
|
472
|
+
"description": "Button label text"
|
|
473
|
+
},
|
|
474
|
+
"showFocusRing": {
|
|
475
|
+
"type": "boolean",
|
|
476
|
+
"required": false,
|
|
477
|
+
"description": "Render a visible focus-ring overlay (keyboard / accessibility demos)",
|
|
478
|
+
"default": false
|
|
479
|
+
},
|
|
480
|
+
"variant": {
|
|
481
|
+
"type": "ButtonVariant",
|
|
482
|
+
"required": false,
|
|
483
|
+
"description": "Visual style variant",
|
|
484
|
+
"default": "primary"
|
|
485
|
+
}
|
|
486
|
+
}
|
|
487
|
+
},
|
|
488
|
+
"CTABanner": {
|
|
489
|
+
"name": "CTABanner",
|
|
490
|
+
"source": "templates/CTABanner/CTABanner.tsx",
|
|
491
|
+
"props": {
|
|
492
|
+
"avatars": {
|
|
493
|
+
"type": "AvatarItem[]",
|
|
494
|
+
"required": false,
|
|
495
|
+
"description": "Override the default avatar array"
|
|
496
|
+
},
|
|
497
|
+
"ctaHref": {
|
|
498
|
+
"type": "string",
|
|
499
|
+
"required": false,
|
|
500
|
+
"description": "CTA button href",
|
|
501
|
+
"default": "#"
|
|
502
|
+
},
|
|
503
|
+
"ctaLabel": {
|
|
504
|
+
"type": "string",
|
|
505
|
+
"required": false,
|
|
506
|
+
"description": "CTA button label",
|
|
507
|
+
"default": "Open account"
|
|
508
|
+
},
|
|
509
|
+
"headline": {
|
|
510
|
+
"type": "string",
|
|
511
|
+
"required": false,
|
|
512
|
+
"description": "Section headline",
|
|
513
|
+
"default": "Short section title goes here"
|
|
514
|
+
},
|
|
515
|
+
"variant": {
|
|
516
|
+
"type": "\"standard\" | \"compact\"",
|
|
517
|
+
"required": false,
|
|
518
|
+
"description": "Layout variant. - `standard` (default): 12 avatars, taller section (864px desktop) - `compact`: 7 avatars, section height matches stage (680px desktop)",
|
|
519
|
+
"default": "standard"
|
|
520
|
+
}
|
|
521
|
+
}
|
|
522
|
+
},
|
|
523
|
+
"Card": {
|
|
524
|
+
"name": "Card",
|
|
525
|
+
"source": "components/Card/Card.tsx",
|
|
526
|
+
"props": {
|
|
527
|
+
"articles": {
|
|
528
|
+
"type": "CardCategoryArticle[]",
|
|
529
|
+
"required": true,
|
|
530
|
+
"description": "List of articles under this category",
|
|
531
|
+
"items": {
|
|
532
|
+
"date": {
|
|
533
|
+
"type": "string",
|
|
534
|
+
"required": false,
|
|
535
|
+
"description": "Date or tag label"
|
|
536
|
+
},
|
|
537
|
+
"onClick": {
|
|
538
|
+
"type": "(() => void)",
|
|
539
|
+
"required": false,
|
|
540
|
+
"description": "Click handler"
|
|
541
|
+
},
|
|
542
|
+
"title": {
|
|
543
|
+
"type": "string",
|
|
544
|
+
"required": true,
|
|
545
|
+
"description": "Article title"
|
|
546
|
+
}
|
|
547
|
+
}
|
|
548
|
+
},
|
|
549
|
+
"avatar": {
|
|
550
|
+
"type": "string",
|
|
551
|
+
"required": false,
|
|
552
|
+
"description": "Author avatar (article type only)"
|
|
553
|
+
},
|
|
554
|
+
"avatarAlt": {
|
|
555
|
+
"type": "string",
|
|
556
|
+
"required": false
|
|
557
|
+
},
|
|
558
|
+
"colorScheme": {
|
|
559
|
+
"type": "CardPrimaryStyle",
|
|
560
|
+
"required": false,
|
|
561
|
+
"description": "Visual variant — controls background, text and link colours"
|
|
562
|
+
},
|
|
563
|
+
"description": {
|
|
564
|
+
"type": "string",
|
|
565
|
+
"required": true,
|
|
566
|
+
"description": "Card body text"
|
|
567
|
+
},
|
|
568
|
+
"hideAvatar": {
|
|
569
|
+
"type": "boolean",
|
|
570
|
+
"required": false,
|
|
571
|
+
"description": "Hide the author avatar (default: false)"
|
|
572
|
+
},
|
|
573
|
+
"hideTags": {
|
|
574
|
+
"type": "boolean",
|
|
575
|
+
"required": false,
|
|
576
|
+
"description": "Hide the tag pills"
|
|
577
|
+
},
|
|
578
|
+
"hideThumbnail": {
|
|
579
|
+
"type": "boolean",
|
|
580
|
+
"required": false,
|
|
581
|
+
"description": "Hide the thumbnail image"
|
|
582
|
+
},
|
|
583
|
+
"icon": {
|
|
584
|
+
"type": "ReactNode",
|
|
585
|
+
"required": false,
|
|
586
|
+
"description": "Icon rendered above the title"
|
|
587
|
+
},
|
|
588
|
+
"image": {
|
|
589
|
+
"type": "string",
|
|
590
|
+
"required": false,
|
|
591
|
+
"description": "Card image source"
|
|
592
|
+
},
|
|
593
|
+
"imageAlt": {
|
|
594
|
+
"type": "string",
|
|
595
|
+
"required": false
|
|
596
|
+
},
|
|
597
|
+
"layout": {
|
|
598
|
+
"type": "CardThumbnailLayout",
|
|
599
|
+
"required": false,
|
|
600
|
+
"description": "Layout direction — \"vertical\" stacks thumbnail above content, \"horizontal\" places them side by side"
|
|
601
|
+
},
|
|
602
|
+
"linkText": {
|
|
603
|
+
"type": "string",
|
|
604
|
+
"required": false,
|
|
605
|
+
"description": "Link label text (default: \"Learn more\")"
|
|
606
|
+
},
|
|
607
|
+
"onCopyLink": {
|
|
608
|
+
"type": "(() => void)",
|
|
609
|
+
"required": false
|
|
610
|
+
},
|
|
611
|
+
"onHeaderClick": {
|
|
612
|
+
"type": "(() => void)",
|
|
613
|
+
"required": false,
|
|
614
|
+
"description": "Click handler for the title + thumbnail area"
|
|
615
|
+
},
|
|
616
|
+
"onLinkClick": {
|
|
617
|
+
"type": "(() => void)",
|
|
618
|
+
"required": false
|
|
619
|
+
},
|
|
620
|
+
"showCopyLink": {
|
|
621
|
+
"type": "boolean",
|
|
622
|
+
"required": false,
|
|
623
|
+
"description": "Show the copy-link pill button"
|
|
624
|
+
},
|
|
625
|
+
"showIcon": {
|
|
626
|
+
"type": "boolean",
|
|
627
|
+
"required": false,
|
|
628
|
+
"description": "Show or hide the icon (default: true)"
|
|
629
|
+
},
|
|
630
|
+
"showLink": {
|
|
631
|
+
"type": "boolean",
|
|
632
|
+
"required": false,
|
|
633
|
+
"description": "Show the \"Learn more\" inline link (default: true)"
|
|
634
|
+
},
|
|
635
|
+
"summary": {
|
|
636
|
+
"type": "string",
|
|
637
|
+
"required": true,
|
|
638
|
+
"description": "Card body text"
|
|
639
|
+
},
|
|
640
|
+
"tags": {
|
|
641
|
+
"type": "CardTag[]",
|
|
642
|
+
"required": false,
|
|
643
|
+
"description": "Label tags rendered in the meta row"
|
|
644
|
+
},
|
|
645
|
+
"thumbnail": {
|
|
646
|
+
"type": "string",
|
|
647
|
+
"required": false,
|
|
648
|
+
"description": "Hero image for the category"
|
|
649
|
+
},
|
|
650
|
+
"thumbnailAlt": {
|
|
651
|
+
"type": "string",
|
|
652
|
+
"required": false
|
|
653
|
+
},
|
|
654
|
+
"title": {
|
|
655
|
+
"type": "string",
|
|
656
|
+
"required": true,
|
|
657
|
+
"description": "Category heading"
|
|
658
|
+
},
|
|
659
|
+
"type": {
|
|
660
|
+
"type": "CardThumbnailType",
|
|
661
|
+
"required": false,
|
|
662
|
+
"description": "Thumbnail variant — \"video\" shows a play button, \"article\" shows an optional avatar"
|
|
663
|
+
},
|
|
664
|
+
"variant": {
|
|
665
|
+
"type": "\"category\"",
|
|
666
|
+
"required": true
|
|
667
|
+
}
|
|
668
|
+
}
|
|
669
|
+
},
|
|
670
|
+
"Chip": {
|
|
671
|
+
"name": "Chip",
|
|
672
|
+
"source": "components/Chip/Chip.tsx",
|
|
673
|
+
"props": {
|
|
674
|
+
"icon": {
|
|
675
|
+
"type": "ReactNode",
|
|
676
|
+
"required": false
|
|
677
|
+
},
|
|
678
|
+
"label": {
|
|
679
|
+
"type": "string",
|
|
680
|
+
"required": false
|
|
681
|
+
},
|
|
682
|
+
"selected": {
|
|
683
|
+
"type": "boolean",
|
|
684
|
+
"required": false,
|
|
685
|
+
"default": false
|
|
686
|
+
},
|
|
687
|
+
"showFocusRing": {
|
|
688
|
+
"type": "boolean",
|
|
689
|
+
"required": false,
|
|
690
|
+
"default": false
|
|
691
|
+
},
|
|
692
|
+
"size": {
|
|
693
|
+
"type": "ChipSize",
|
|
694
|
+
"required": false,
|
|
695
|
+
"default": "md"
|
|
696
|
+
},
|
|
697
|
+
"tag": {
|
|
698
|
+
"type": "string",
|
|
699
|
+
"required": false,
|
|
700
|
+
"description": "Optional bold secondary label displayed after the main label"
|
|
701
|
+
}
|
|
702
|
+
}
|
|
703
|
+
},
|
|
704
|
+
"ChipDropdown": {
|
|
705
|
+
"name": "ChipDropdown",
|
|
706
|
+
"source": "components/ChipDropdown/ChipDropdown.tsx",
|
|
707
|
+
"props": {
|
|
708
|
+
"icon": {
|
|
709
|
+
"type": "ReactNode",
|
|
710
|
+
"required": false,
|
|
711
|
+
"description": "Optional leading icon inside the chip trigger"
|
|
712
|
+
},
|
|
713
|
+
"label": {
|
|
714
|
+
"type": "string",
|
|
715
|
+
"required": true,
|
|
716
|
+
"description": "Placeholder label shown when no value is selected"
|
|
717
|
+
},
|
|
718
|
+
"onChange": {
|
|
719
|
+
"type": "((value: string) => void)",
|
|
720
|
+
"required": false,
|
|
721
|
+
"description": "Called when the user selects an option"
|
|
722
|
+
},
|
|
723
|
+
"options": {
|
|
724
|
+
"type": "ChipDropdownOption[]",
|
|
725
|
+
"required": true,
|
|
726
|
+
"description": "Selectable options rendered in the dropdown list",
|
|
727
|
+
"items": {
|
|
728
|
+
"label": {
|
|
729
|
+
"type": "string",
|
|
730
|
+
"required": true
|
|
731
|
+
},
|
|
732
|
+
"value": {
|
|
733
|
+
"type": "string",
|
|
734
|
+
"required": true
|
|
735
|
+
}
|
|
736
|
+
}
|
|
737
|
+
},
|
|
738
|
+
"size": {
|
|
739
|
+
"type": "\"sm\" | \"md\"",
|
|
740
|
+
"required": false,
|
|
741
|
+
"description": "Trigger chip size — sm (24px) or md (32px)",
|
|
742
|
+
"default": "md"
|
|
743
|
+
},
|
|
744
|
+
"tag": {
|
|
745
|
+
"type": "string",
|
|
746
|
+
"required": false,
|
|
747
|
+
"description": "Optional bold secondary label shown after main label"
|
|
748
|
+
},
|
|
749
|
+
"value": {
|
|
750
|
+
"type": "string | null",
|
|
751
|
+
"required": false,
|
|
752
|
+
"description": "Currently selected option value"
|
|
753
|
+
}
|
|
754
|
+
}
|
|
755
|
+
},
|
|
756
|
+
"CoralBanner": {
|
|
757
|
+
"name": "CoralBanner",
|
|
758
|
+
"source": "templates/CoralBanner/CoralBanner.tsx",
|
|
759
|
+
"props": {
|
|
760
|
+
"autoplay": {
|
|
761
|
+
"type": "boolean",
|
|
762
|
+
"required": false,
|
|
763
|
+
"description": "Auto-advance slides (carousel only)",
|
|
764
|
+
"default": true
|
|
765
|
+
},
|
|
766
|
+
"autoplayDelay": {
|
|
767
|
+
"type": "number",
|
|
768
|
+
"required": false,
|
|
769
|
+
"description": "Milliseconds between auto-advances (carousel only). Reference site uses `2000`.",
|
|
770
|
+
"default": 2000
|
|
771
|
+
},
|
|
772
|
+
"infinite": {
|
|
773
|
+
"type": "boolean",
|
|
774
|
+
"required": false,
|
|
775
|
+
"description": "Loop back to the first slide after the last (carousel only)",
|
|
776
|
+
"default": true
|
|
777
|
+
},
|
|
778
|
+
"showArrows": {
|
|
779
|
+
"type": "boolean",
|
|
780
|
+
"required": false,
|
|
781
|
+
"description": "Show the prev/next arrow controls (carousel only, 2+ slides)",
|
|
782
|
+
"default": true
|
|
783
|
+
},
|
|
784
|
+
"showDots": {
|
|
785
|
+
"type": "boolean",
|
|
786
|
+
"required": false,
|
|
787
|
+
"description": "Show the dot pagination (carousel only, 2+ slides)",
|
|
788
|
+
"default": true
|
|
789
|
+
},
|
|
790
|
+
"slides": {
|
|
791
|
+
"type": "CoralBannerSlide[]",
|
|
792
|
+
"required": false,
|
|
793
|
+
"description": "Slide content. `static` variant renders only `slides[0]`."
|
|
794
|
+
},
|
|
795
|
+
"transitionDuration": {
|
|
796
|
+
"type": "number",
|
|
797
|
+
"required": false,
|
|
798
|
+
"description": "Slide transition duration in ms. Reference site uses `330`.",
|
|
799
|
+
"default": 330
|
|
800
|
+
},
|
|
801
|
+
"variant": {
|
|
802
|
+
"type": "\"static\" | \"carousel\"",
|
|
803
|
+
"required": false,
|
|
804
|
+
"description": "`static` — renders a single, non-interactive slide (no arrows/dots/autoplay). `carousel` — renders `slides` in a swipeable, auto-advancing slider (horizontal slide transition, dot pagination, prev/next arrows), matching the banner used on deriv.com and deriv.com/markets/forex.",
|
|
805
|
+
"default": "static"
|
|
806
|
+
}
|
|
807
|
+
}
|
|
808
|
+
},
|
|
809
|
+
"DayNightTransition": {
|
|
810
|
+
"name": "DayNightTransition",
|
|
811
|
+
"source": "templates/DayNightTransition/DayNightTransition.tsx",
|
|
812
|
+
"props": {
|
|
813
|
+
"ctaHref": {
|
|
814
|
+
"type": "string",
|
|
815
|
+
"required": false,
|
|
816
|
+
"description": "href for the CTA button",
|
|
817
|
+
"default": "#"
|
|
818
|
+
},
|
|
819
|
+
"ctaLabel": {
|
|
820
|
+
"type": "string",
|
|
821
|
+
"required": false,
|
|
822
|
+
"description": "Label for the CTA button",
|
|
823
|
+
"default": "Get started"
|
|
824
|
+
},
|
|
825
|
+
"dayDescription": {
|
|
826
|
+
"type": "string",
|
|
827
|
+
"required": false,
|
|
828
|
+
"description": "Description shown in the day state",
|
|
829
|
+
"default": "Description goes here. Description goes here. Description goes here."
|
|
830
|
+
},
|
|
831
|
+
"dayHeadline": {
|
|
832
|
+
"type": "string",
|
|
833
|
+
"required": false,
|
|
834
|
+
"description": "Headline shown in the day state",
|
|
835
|
+
"default": "Medium length section title goes here"
|
|
836
|
+
},
|
|
837
|
+
"dayImageUrl": {
|
|
838
|
+
"type": "string",
|
|
839
|
+
"required": true,
|
|
840
|
+
"description": "URL for the daytime background image"
|
|
841
|
+
},
|
|
842
|
+
"descriptionLevel": {
|
|
843
|
+
"type": "\"body-md\" | \"body-lg\"",
|
|
844
|
+
"required": false,
|
|
845
|
+
"description": "Description typography scale — maps to `--typography-body-md-*` or `--typography-body-lg-*` tokens.",
|
|
846
|
+
"default": "body-md"
|
|
847
|
+
},
|
|
848
|
+
"headlineLevel": {
|
|
849
|
+
"type": "\"h1\" | \"h2\"",
|
|
850
|
+
"required": false,
|
|
851
|
+
"description": "Headline typography scale — maps to global `--typography-h1-*` or `--typography-h2-*` tokens.",
|
|
852
|
+
"default": "h2"
|
|
853
|
+
},
|
|
854
|
+
"hideCta": {
|
|
855
|
+
"type": "boolean",
|
|
856
|
+
"required": false,
|
|
857
|
+
"description": "When true, the CTA button is omitted (e.g. hero blocks that end on copy only).",
|
|
858
|
+
"default": false
|
|
859
|
+
},
|
|
860
|
+
"inlineDayNightHeadline": {
|
|
861
|
+
"type": "{ prefix: string; dayWord: string; nightWord: string; }",
|
|
862
|
+
"required": false,
|
|
863
|
+
"description": "Webflow-style headline: fixed `prefix` plus `dayWord` / `nightWord` overlaid and scroll-crossfaded (same pattern as `DayNightTransitionV2` HTML: “Trade all ” + day + night)."
|
|
864
|
+
},
|
|
865
|
+
"nightDescription": {
|
|
866
|
+
"type": "string",
|
|
867
|
+
"required": false,
|
|
868
|
+
"description": "Description shown in the night state",
|
|
869
|
+
"default": "Description goes here. Description goes here. Description goes here."
|
|
870
|
+
},
|
|
871
|
+
"nightHeadline": {
|
|
872
|
+
"type": "string",
|
|
873
|
+
"required": false,
|
|
874
|
+
"description": "Headline shown in the night state",
|
|
875
|
+
"default": "Medium length section title goes here"
|
|
876
|
+
},
|
|
877
|
+
"nightImageUrl": {
|
|
878
|
+
"type": "string",
|
|
879
|
+
"required": true,
|
|
880
|
+
"description": "URL for the nighttime background image"
|
|
881
|
+
},
|
|
882
|
+
"scrollPreset": {
|
|
883
|
+
"type": "\"default\" | \"webflow-day-night-v2\"",
|
|
884
|
+
"required": false,
|
|
885
|
+
"description": "`\"webflow-day-night-v2\"` replays IX2 scroll curves from Webflow export `DayNightTransitionV2` (`SCROLLING_IN_VIEW` + `SCROLL_PROGRESS` actionLists `a` / `a-2` in `js/webflow.js`).",
|
|
886
|
+
"default": "default"
|
|
887
|
+
}
|
|
888
|
+
}
|
|
889
|
+
},
|
|
890
|
+
"DotLottieInView": {
|
|
891
|
+
"name": "DotLottieInView",
|
|
892
|
+
"source": "components/DotLottieInView/DotLottieInView.tsx",
|
|
893
|
+
"props": {},
|
|
894
|
+
"description": "Plays a .lottie once when it scrolls into view. Stops and resets when it leaves view. When it enters view again, it plays once more. Set `enabled={false}` to force stop (e.g. hidden slides) without relying on geometry alone."
|
|
895
|
+
},
|
|
896
|
+
"DownloadBadge": {
|
|
897
|
+
"name": "DownloadBadge",
|
|
898
|
+
"source": "components/DownloadBadge/DownloadBadge.tsx",
|
|
899
|
+
"props": {
|
|
900
|
+
"colorScheme": {
|
|
901
|
+
"type": "DownloadBadgeColorScheme",
|
|
902
|
+
"required": false,
|
|
903
|
+
"description": "Colour scheme — use \"light\" on light backgrounds, \"dark\" on dark backgrounds.",
|
|
904
|
+
"default": "light"
|
|
905
|
+
},
|
|
906
|
+
"href": {
|
|
907
|
+
"type": "string",
|
|
908
|
+
"required": false,
|
|
909
|
+
"description": "Destination URL"
|
|
910
|
+
},
|
|
911
|
+
"platform": {
|
|
912
|
+
"type": "DownloadBadgePlatform",
|
|
913
|
+
"required": true,
|
|
914
|
+
"description": "Which platform badge to render"
|
|
915
|
+
}
|
|
916
|
+
}
|
|
917
|
+
},
|
|
918
|
+
"DownloadBanner": {
|
|
919
|
+
"name": "DownloadBanner",
|
|
920
|
+
"source": "templates/DownloadBanner/DownloadBanner.tsx",
|
|
921
|
+
"props": {
|
|
922
|
+
"appGalleryHref": {
|
|
923
|
+
"type": "string",
|
|
924
|
+
"required": false
|
|
925
|
+
},
|
|
926
|
+
"appStoreHref": {
|
|
927
|
+
"type": "string",
|
|
928
|
+
"required": false
|
|
929
|
+
},
|
|
930
|
+
"disclaimer": {
|
|
931
|
+
"type": "string",
|
|
932
|
+
"required": false,
|
|
933
|
+
"description": "Optional small-print disclaimer shown below the QR text"
|
|
934
|
+
},
|
|
935
|
+
"googlePlayHref": {
|
|
936
|
+
"type": "string",
|
|
937
|
+
"required": false
|
|
938
|
+
},
|
|
939
|
+
"linuxHref": {
|
|
940
|
+
"type": "string",
|
|
941
|
+
"required": false
|
|
942
|
+
},
|
|
943
|
+
"macOSHref": {
|
|
944
|
+
"type": "string",
|
|
945
|
+
"required": false
|
|
946
|
+
},
|
|
947
|
+
"mobileTitle": {
|
|
948
|
+
"type": "string",
|
|
949
|
+
"required": false,
|
|
950
|
+
"description": "Heading shown on mobile above the badge grid (default: \"Available on\")",
|
|
951
|
+
"default": "Available on"
|
|
952
|
+
},
|
|
953
|
+
"qrCodeAlt": {
|
|
954
|
+
"type": "string",
|
|
955
|
+
"required": false,
|
|
956
|
+
"description": "Accessible alt text for the QR code image",
|
|
957
|
+
"default": "QR code to download the app"
|
|
958
|
+
},
|
|
959
|
+
"qrCodeImage": {
|
|
960
|
+
"type": "string",
|
|
961
|
+
"required": false,
|
|
962
|
+
"description": "QR code image URL. When provided the QR block is shown on desktop."
|
|
963
|
+
},
|
|
964
|
+
"qrSubtitle": {
|
|
965
|
+
"type": "string",
|
|
966
|
+
"required": false,
|
|
967
|
+
"description": "Second line of text beside the QR code (default: \"Android & iOS\")",
|
|
968
|
+
"default": "Android & iOS"
|
|
969
|
+
},
|
|
970
|
+
"qrTitle": {
|
|
971
|
+
"type": "string",
|
|
972
|
+
"required": false,
|
|
973
|
+
"description": "First line of text beside the QR code (default: \"Scan to download\")",
|
|
974
|
+
"default": "Scan to download"
|
|
975
|
+
},
|
|
976
|
+
"showAppGallery": {
|
|
977
|
+
"type": "boolean",
|
|
978
|
+
"required": false,
|
|
979
|
+
"default": true
|
|
980
|
+
},
|
|
981
|
+
"showAppStore": {
|
|
982
|
+
"type": "boolean",
|
|
983
|
+
"required": false,
|
|
984
|
+
"default": true
|
|
985
|
+
},
|
|
986
|
+
"showGooglePlay": {
|
|
987
|
+
"type": "boolean",
|
|
988
|
+
"required": false,
|
|
989
|
+
"default": true
|
|
990
|
+
},
|
|
991
|
+
"showLinux": {
|
|
992
|
+
"type": "boolean",
|
|
993
|
+
"required": false,
|
|
994
|
+
"default": true
|
|
995
|
+
},
|
|
996
|
+
"showMacOS": {
|
|
997
|
+
"type": "boolean",
|
|
998
|
+
"required": false,
|
|
999
|
+
"default": true
|
|
1000
|
+
},
|
|
1001
|
+
"showWeb": {
|
|
1002
|
+
"type": "boolean",
|
|
1003
|
+
"required": false,
|
|
1004
|
+
"default": true
|
|
1005
|
+
},
|
|
1006
|
+
"showWindows": {
|
|
1007
|
+
"type": "boolean",
|
|
1008
|
+
"required": false,
|
|
1009
|
+
"default": true
|
|
1010
|
+
},
|
|
1011
|
+
"style": {
|
|
1012
|
+
"type": "DownloadBannerStyle",
|
|
1013
|
+
"required": false,
|
|
1014
|
+
"description": "Visual style of the inner card. - \"light\" → slate-100 outer section, white inner card - \"light-2\" → white outer section, slate-100 inner card (default) - \"dark\" → white outer section, slate-1200 inner card",
|
|
1015
|
+
"default": "light-2"
|
|
1016
|
+
},
|
|
1017
|
+
"webHref": {
|
|
1018
|
+
"type": "string",
|
|
1019
|
+
"required": false
|
|
1020
|
+
},
|
|
1021
|
+
"windowsHref": {
|
|
1022
|
+
"type": "string",
|
|
1023
|
+
"required": false
|
|
1024
|
+
}
|
|
1025
|
+
}
|
|
1026
|
+
},
|
|
1027
|
+
"FaqAccordion": {
|
|
1028
|
+
"name": "FaqAccordion",
|
|
1029
|
+
"source": "templates/FaqAccordion/FaqAccordion.tsx",
|
|
1030
|
+
"props": {
|
|
1031
|
+
"colorScheme": {
|
|
1032
|
+
"type": "FaqAccordionColorScheme",
|
|
1033
|
+
"required": false,
|
|
1034
|
+
"description": "Background color scheme (default: \"white\")",
|
|
1035
|
+
"default": "white"
|
|
1036
|
+
},
|
|
1037
|
+
"items": {
|
|
1038
|
+
"type": "FaqItem[]",
|
|
1039
|
+
"required": true,
|
|
1040
|
+
"description": "FAQ items",
|
|
1041
|
+
"items": {
|
|
1042
|
+
"answer": {
|
|
1043
|
+
"type": "string",
|
|
1044
|
+
"required": true,
|
|
1045
|
+
"description": "The answer revealed when expanded"
|
|
1046
|
+
},
|
|
1047
|
+
"question": {
|
|
1048
|
+
"type": "string",
|
|
1049
|
+
"required": true,
|
|
1050
|
+
"description": "The question shown in the accordion header"
|
|
1051
|
+
}
|
|
1052
|
+
}
|
|
1053
|
+
},
|
|
1054
|
+
"title": {
|
|
1055
|
+
"type": "string",
|
|
1056
|
+
"required": true,
|
|
1057
|
+
"description": "Section headline"
|
|
1058
|
+
}
|
|
1059
|
+
}
|
|
1060
|
+
},
|
|
1061
|
+
"FeatureAwards": {
|
|
1062
|
+
"name": "FeatureAwards",
|
|
1063
|
+
"source": "templates/FeatureAwards/FeatureAwards.tsx",
|
|
1064
|
+
"props": {
|
|
1065
|
+
"autoScrollDuration": {
|
|
1066
|
+
"type": "number",
|
|
1067
|
+
"required": false,
|
|
1068
|
+
"description": "Seconds for one full auto-scroll loop on mobile (< 768px) — lower is faster. Mobile always auto-scrolls; this only tunes the speed. Defaults to `32`.",
|
|
1069
|
+
"default": 32
|
|
1070
|
+
},
|
|
1071
|
+
"awards": {
|
|
1072
|
+
"type": "AwardItem[]",
|
|
1073
|
+
"required": false,
|
|
1074
|
+
"description": "Ordered list of awards to display. Defaults to `DEFAULT_AWARDS`.",
|
|
1075
|
+
"defaultExpression": "DEFAULT_AWARDS"
|
|
1076
|
+
},
|
|
1077
|
+
"className": {
|
|
1078
|
+
"type": "string",
|
|
1079
|
+
"required": false,
|
|
1080
|
+
"description": "Extra class name merged onto the root `<section>`."
|
|
1081
|
+
},
|
|
1082
|
+
"title": {
|
|
1083
|
+
"type": "string",
|
|
1084
|
+
"required": false,
|
|
1085
|
+
"description": "Section heading. Defaults to \"Our awards\".",
|
|
1086
|
+
"defaultExpression": "FEATURE_AWARDS_TEXT_CONTENT.title"
|
|
1087
|
+
}
|
|
1088
|
+
}
|
|
1089
|
+
},
|
|
1090
|
+
"FeatureBullets": {
|
|
1091
|
+
"name": "FeatureBullets",
|
|
1092
|
+
"source": "templates/FeatureBullets/FeatureBullets.tsx",
|
|
1093
|
+
"props": {
|
|
1094
|
+
"bullets": {
|
|
1095
|
+
"type": "string[]",
|
|
1096
|
+
"required": true,
|
|
1097
|
+
"description": "Array of bullet points to display"
|
|
1098
|
+
},
|
|
1099
|
+
"image": {
|
|
1100
|
+
"type": "string",
|
|
1101
|
+
"required": true,
|
|
1102
|
+
"description": "URL for the image"
|
|
1103
|
+
},
|
|
1104
|
+
"imageAlt": {
|
|
1105
|
+
"type": "string",
|
|
1106
|
+
"required": false,
|
|
1107
|
+
"description": "Alt text for the image",
|
|
1108
|
+
"default": ""
|
|
1109
|
+
},
|
|
1110
|
+
"imagePosition": {
|
|
1111
|
+
"type": "\"left\" | \"right\"",
|
|
1112
|
+
"required": false,
|
|
1113
|
+
"description": "Position of the image relative to the text on desktop",
|
|
1114
|
+
"default": "right"
|
|
1115
|
+
},
|
|
1116
|
+
"title": {
|
|
1117
|
+
"type": "string",
|
|
1118
|
+
"required": true,
|
|
1119
|
+
"description": "Title of the section"
|
|
1120
|
+
}
|
|
1121
|
+
}
|
|
1122
|
+
},
|
|
1123
|
+
"FeatureCards": {
|
|
1124
|
+
"name": "FeatureCards",
|
|
1125
|
+
"source": "templates/FeatureCards/FeatureCards.tsx",
|
|
1126
|
+
"props": {
|
|
1127
|
+
"cardColorScheme": {
|
|
1128
|
+
"type": "CardPrimaryStyle",
|
|
1129
|
+
"required": false,
|
|
1130
|
+
"description": "Controls the visual style of all cards in the default grid",
|
|
1131
|
+
"default": "image"
|
|
1132
|
+
},
|
|
1133
|
+
"cards": {
|
|
1134
|
+
"type": "FeatureCardItem[]",
|
|
1135
|
+
"required": true,
|
|
1136
|
+
"items": {
|
|
1137
|
+
"colorScheme": {
|
|
1138
|
+
"type": "CardPrimaryStyle",
|
|
1139
|
+
"required": false
|
|
1140
|
+
},
|
|
1141
|
+
"description": {
|
|
1142
|
+
"type": "string",
|
|
1143
|
+
"required": true
|
|
1144
|
+
},
|
|
1145
|
+
"image": {
|
|
1146
|
+
"type": "string",
|
|
1147
|
+
"required": false
|
|
1148
|
+
},
|
|
1149
|
+
"imageAlt": {
|
|
1150
|
+
"type": "string",
|
|
1151
|
+
"required": false
|
|
1152
|
+
},
|
|
1153
|
+
"linkHref": {
|
|
1154
|
+
"type": "string",
|
|
1155
|
+
"required": false,
|
|
1156
|
+
"description": "Two Cards / One Card variants: main CTA href"
|
|
1157
|
+
},
|
|
1158
|
+
"linkText": {
|
|
1159
|
+
"type": "string",
|
|
1160
|
+
"required": false
|
|
1161
|
+
},
|
|
1162
|
+
"onLinkClick": {
|
|
1163
|
+
"type": "(() => void)",
|
|
1164
|
+
"required": false
|
|
1165
|
+
},
|
|
1166
|
+
"platforms": {
|
|
1167
|
+
"type": "FeatureCardPlatformLink[]",
|
|
1168
|
+
"required": false,
|
|
1169
|
+
"description": "Two Cards / One Card variants: platform links under the CTA"
|
|
1170
|
+
},
|
|
1171
|
+
"platformsHeading": {
|
|
1172
|
+
"type": "string",
|
|
1173
|
+
"required": false,
|
|
1174
|
+
"description": "Two Cards / One Card variants: label above platform row (default: \"Available on\")"
|
|
1175
|
+
},
|
|
1176
|
+
"showLink": {
|
|
1177
|
+
"type": "boolean",
|
|
1178
|
+
"required": false
|
|
1179
|
+
},
|
|
1180
|
+
"title": {
|
|
1181
|
+
"type": "string",
|
|
1182
|
+
"required": true
|
|
1183
|
+
},
|
|
1184
|
+
"twoTone": {
|
|
1185
|
+
"type": "FeatureCardTwoTone",
|
|
1186
|
+
"required": false,
|
|
1187
|
+
"description": "Two Cards variant: light or dark card shell"
|
|
1188
|
+
}
|
|
1189
|
+
}
|
|
1190
|
+
},
|
|
1191
|
+
"linkText": {
|
|
1192
|
+
"type": "string",
|
|
1193
|
+
"required": false,
|
|
1194
|
+
"default": "Learn more"
|
|
1195
|
+
},
|
|
1196
|
+
"onLinkClick": {
|
|
1197
|
+
"type": "(() => void)",
|
|
1198
|
+
"required": false
|
|
1199
|
+
},
|
|
1200
|
+
"sectionDescription": {
|
|
1201
|
+
"type": "string",
|
|
1202
|
+
"required": false
|
|
1203
|
+
},
|
|
1204
|
+
"sectionTitle": {
|
|
1205
|
+
"type": "string",
|
|
1206
|
+
"required": true
|
|
1207
|
+
},
|
|
1208
|
+
"showLink": {
|
|
1209
|
+
"type": "boolean",
|
|
1210
|
+
"required": false,
|
|
1211
|
+
"default": false
|
|
1212
|
+
},
|
|
1213
|
+
"variant": {
|
|
1214
|
+
"type": "FeatureCardsLayoutVariant",
|
|
1215
|
+
"required": false,
|
|
1216
|
+
"description": "Default: primary card grid. twoCards / oneCard: large feature blocks with optional platform links and image.",
|
|
1217
|
+
"default": "default"
|
|
1218
|
+
}
|
|
1219
|
+
}
|
|
1220
|
+
},
|
|
1221
|
+
"FeatureCardsIcon": {
|
|
1222
|
+
"name": "FeatureCardsIcon",
|
|
1223
|
+
"source": "templates/FeatureCardsIcon/FeatureCardsIcon.tsx",
|
|
1224
|
+
"props": {
|
|
1225
|
+
"cards": {
|
|
1226
|
+
"type": "FeatureCardIconItem[]",
|
|
1227
|
+
"required": true,
|
|
1228
|
+
"items": {
|
|
1229
|
+
"description": {
|
|
1230
|
+
"type": "string",
|
|
1231
|
+
"required": true
|
|
1232
|
+
},
|
|
1233
|
+
"icon": {
|
|
1234
|
+
"type": "ReactNode",
|
|
1235
|
+
"required": false
|
|
1236
|
+
},
|
|
1237
|
+
"linkText": {
|
|
1238
|
+
"type": "string",
|
|
1239
|
+
"required": false
|
|
1240
|
+
},
|
|
1241
|
+
"onLinkClick": {
|
|
1242
|
+
"type": "(() => void)",
|
|
1243
|
+
"required": false
|
|
1244
|
+
},
|
|
1245
|
+
"showIcon": {
|
|
1246
|
+
"type": "boolean",
|
|
1247
|
+
"required": false
|
|
1248
|
+
},
|
|
1249
|
+
"showLink": {
|
|
1250
|
+
"type": "boolean",
|
|
1251
|
+
"required": false
|
|
1252
|
+
},
|
|
1253
|
+
"title": {
|
|
1254
|
+
"type": "string",
|
|
1255
|
+
"required": true
|
|
1256
|
+
}
|
|
1257
|
+
}
|
|
1258
|
+
},
|
|
1259
|
+
"linkText": {
|
|
1260
|
+
"type": "string",
|
|
1261
|
+
"required": false,
|
|
1262
|
+
"default": "Learn more"
|
|
1263
|
+
},
|
|
1264
|
+
"onLinkClick": {
|
|
1265
|
+
"type": "(() => void)",
|
|
1266
|
+
"required": false
|
|
1267
|
+
},
|
|
1268
|
+
"sectionDescription": {
|
|
1269
|
+
"type": "string",
|
|
1270
|
+
"required": false
|
|
1271
|
+
},
|
|
1272
|
+
"sectionTitle": {
|
|
1273
|
+
"type": "string",
|
|
1274
|
+
"required": true
|
|
1275
|
+
},
|
|
1276
|
+
"showLink": {
|
|
1277
|
+
"type": "boolean",
|
|
1278
|
+
"required": false,
|
|
1279
|
+
"default": false
|
|
1280
|
+
}
|
|
1281
|
+
}
|
|
1282
|
+
},
|
|
1283
|
+
"FeatureScroll": {
|
|
1284
|
+
"name": "FeatureScroll",
|
|
1285
|
+
"source": "templates/FeatureScroll/FeatureScroll.tsx",
|
|
1286
|
+
"props": {
|
|
1287
|
+
"header": {
|
|
1288
|
+
"type": "string",
|
|
1289
|
+
"required": true,
|
|
1290
|
+
"description": "Section heading rendered as an H2"
|
|
1291
|
+
},
|
|
1292
|
+
"items": {
|
|
1293
|
+
"type": "FeatureScrollItem[]",
|
|
1294
|
+
"required": true,
|
|
1295
|
+
"description": "Ordered list of feature items. Drives both the desktop scroll-driven layout and the mobile stacked layout.",
|
|
1296
|
+
"items": {
|
|
1297
|
+
"description": {
|
|
1298
|
+
"type": "string",
|
|
1299
|
+
"required": true,
|
|
1300
|
+
"description": "Body copy below the title"
|
|
1301
|
+
},
|
|
1302
|
+
"link": {
|
|
1303
|
+
"type": "string",
|
|
1304
|
+
"required": true,
|
|
1305
|
+
"description": "URL the link points to"
|
|
1306
|
+
},
|
|
1307
|
+
"linkLabel": {
|
|
1308
|
+
"type": "string",
|
|
1309
|
+
"required": true,
|
|
1310
|
+
"description": "Visible label on the link, e.g. \"Learn more\""
|
|
1311
|
+
},
|
|
1312
|
+
"mediaType": {
|
|
1313
|
+
"type": "\"image\" | \"lottie\"",
|
|
1314
|
+
"required": false,
|
|
1315
|
+
"description": "Optional override for media rendering. When omitted the component auto-detects based on the URL extension: *.lottie → DotLottie animation player everything else (png, jpg, svg, webp…) → <img>"
|
|
1316
|
+
},
|
|
1317
|
+
"mediaUrl": {
|
|
1318
|
+
"type": "string",
|
|
1319
|
+
"required": true,
|
|
1320
|
+
"description": "URL to the .lottie file or any image asset (png, jpg, svg, webp…)"
|
|
1321
|
+
},
|
|
1322
|
+
"title": {
|
|
1323
|
+
"type": "string",
|
|
1324
|
+
"required": true,
|
|
1325
|
+
"description": "Short feature name, e.g. \"Forex\""
|
|
1326
|
+
}
|
|
1327
|
+
}
|
|
1328
|
+
},
|
|
1329
|
+
"variant": {
|
|
1330
|
+
"type": "\"media-left\" | \"media-right\"",
|
|
1331
|
+
"required": false,
|
|
1332
|
+
"description": "Controls which side the sticky media column sits on.",
|
|
1333
|
+
"default": "media-right"
|
|
1334
|
+
}
|
|
1335
|
+
}
|
|
1336
|
+
},
|
|
1337
|
+
"FeatureSplit": {
|
|
1338
|
+
"name": "FeatureSplit",
|
|
1339
|
+
"source": "templates/FeatureSplit/FeatureSplit.tsx",
|
|
1340
|
+
"props": {
|
|
1341
|
+
"description": {
|
|
1342
|
+
"type": "string",
|
|
1343
|
+
"required": false,
|
|
1344
|
+
"description": "Body paragraph beneath the title"
|
|
1345
|
+
},
|
|
1346
|
+
"image": {
|
|
1347
|
+
"type": "string",
|
|
1348
|
+
"required": false,
|
|
1349
|
+
"description": "Image source URL"
|
|
1350
|
+
},
|
|
1351
|
+
"imageAlt": {
|
|
1352
|
+
"type": "string",
|
|
1353
|
+
"required": false,
|
|
1354
|
+
"default": ""
|
|
1355
|
+
},
|
|
1356
|
+
"imagePosition": {
|
|
1357
|
+
"type": "FeatureSplitImagePosition",
|
|
1358
|
+
"required": false,
|
|
1359
|
+
"description": "Which side the image sits on (default: \"right\")",
|
|
1360
|
+
"default": "right"
|
|
1361
|
+
},
|
|
1362
|
+
"linkText": {
|
|
1363
|
+
"type": "string",
|
|
1364
|
+
"required": false,
|
|
1365
|
+
"description": "CTA link label (default: \"Learn more\")",
|
|
1366
|
+
"default": "Learn more"
|
|
1367
|
+
},
|
|
1368
|
+
"onLinkClick": {
|
|
1369
|
+
"type": "(() => void)",
|
|
1370
|
+
"required": false
|
|
1371
|
+
},
|
|
1372
|
+
"showDescription": {
|
|
1373
|
+
"type": "boolean",
|
|
1374
|
+
"required": false,
|
|
1375
|
+
"description": "Show or hide the description (default: true)",
|
|
1376
|
+
"default": true
|
|
1377
|
+
},
|
|
1378
|
+
"showLink": {
|
|
1379
|
+
"type": "boolean",
|
|
1380
|
+
"required": false,
|
|
1381
|
+
"description": "Show or hide the link (default: true)",
|
|
1382
|
+
"default": true
|
|
1383
|
+
},
|
|
1384
|
+
"title": {
|
|
1385
|
+
"type": "string",
|
|
1386
|
+
"required": true,
|
|
1387
|
+
"description": "Section headline"
|
|
1388
|
+
}
|
|
1389
|
+
}
|
|
1390
|
+
},
|
|
1391
|
+
"Footer": {
|
|
1392
|
+
"name": "Footer",
|
|
1393
|
+
"source": "components/Footer/Footer.tsx",
|
|
1394
|
+
"props": {
|
|
1395
|
+
"aiSummary": {
|
|
1396
|
+
"type": "FooterAiSummaryProps",
|
|
1397
|
+
"required": false,
|
|
1398
|
+
"description": "AI summary section. Desktop: rendered inline inside the header row. Mobile: rendered as a standalone card below the header. Tablet: hidden."
|
|
1399
|
+
},
|
|
1400
|
+
"derivGo": {
|
|
1401
|
+
"type": "FooterDerivGoProps",
|
|
1402
|
+
"required": false,
|
|
1403
|
+
"description": "Deriv GO promotion banner"
|
|
1404
|
+
},
|
|
1405
|
+
"investorsInPeopleAlt": {
|
|
1406
|
+
"type": "string",
|
|
1407
|
+
"required": false,
|
|
1408
|
+
"description": "Alt text for the Investors in People badge",
|
|
1409
|
+
"default": "Investors in People - Platinum"
|
|
1410
|
+
},
|
|
1411
|
+
"investorsInPeopleSrc": {
|
|
1412
|
+
"type": "string",
|
|
1413
|
+
"required": false,
|
|
1414
|
+
"description": "\"Investors in People\" badge image source"
|
|
1415
|
+
},
|
|
1416
|
+
"licenseText": {
|
|
1417
|
+
"type": "ReactNode",
|
|
1418
|
+
"required": false,
|
|
1419
|
+
"description": "Legal / licence text block (supports ReactNode for inline links)"
|
|
1420
|
+
},
|
|
1421
|
+
"logoAlt": {
|
|
1422
|
+
"type": "string",
|
|
1423
|
+
"required": false,
|
|
1424
|
+
"description": "Alt text for the logo",
|
|
1425
|
+
"default": "Deriv"
|
|
1426
|
+
},
|
|
1427
|
+
"logoSrc": {
|
|
1428
|
+
"type": "string",
|
|
1429
|
+
"required": true,
|
|
1430
|
+
"description": "Deriv logo image source"
|
|
1431
|
+
},
|
|
1432
|
+
"navColumns": {
|
|
1433
|
+
"type": "FooterNavSection[][]",
|
|
1434
|
+
"required": true,
|
|
1435
|
+
"description": "Navigation structure. Outer array = columns (desktop grid), inner array = sections per column. On mobile/tablet all sections are flattened into an accordion list."
|
|
1436
|
+
},
|
|
1437
|
+
"riskWarningText": {
|
|
1438
|
+
"type": "ReactNode",
|
|
1439
|
+
"required": false,
|
|
1440
|
+
"description": "Risk-warning paragraph text"
|
|
1441
|
+
},
|
|
1442
|
+
"socialLinks": {
|
|
1443
|
+
"type": "FooterSocialLink[]",
|
|
1444
|
+
"required": false,
|
|
1445
|
+
"description": "Social media links shown in the header row",
|
|
1446
|
+
"default": []
|
|
1447
|
+
}
|
|
1448
|
+
}
|
|
1449
|
+
},
|
|
1450
|
+
"Header": {
|
|
1451
|
+
"name": "Header",
|
|
1452
|
+
"source": "templates/Header/Header.tsx",
|
|
1453
|
+
"props": {
|
|
1454
|
+
"description": {
|
|
1455
|
+
"type": "string",
|
|
1456
|
+
"required": false,
|
|
1457
|
+
"description": "Body copy below the title"
|
|
1458
|
+
},
|
|
1459
|
+
"leftVisual": {
|
|
1460
|
+
"type": "ReactNode",
|
|
1461
|
+
"required": false,
|
|
1462
|
+
"description": "Left floating visual for the Visuals variant. Accepts a ReactNode or image URL string."
|
|
1463
|
+
},
|
|
1464
|
+
"primaryButton": {
|
|
1465
|
+
"type": "HeaderButtonProps",
|
|
1466
|
+
"required": false,
|
|
1467
|
+
"description": "Primary CTA button (coral). Shown on both variants."
|
|
1468
|
+
},
|
|
1469
|
+
"rightVisual": {
|
|
1470
|
+
"type": "ReactNode",
|
|
1471
|
+
"required": false,
|
|
1472
|
+
"description": "Right floating visual for the Visuals variant. Accepts a ReactNode or image URL string."
|
|
1473
|
+
},
|
|
1474
|
+
"secondaryButton": {
|
|
1475
|
+
"type": "HeaderButtonProps",
|
|
1476
|
+
"required": false,
|
|
1477
|
+
"description": "Secondary CTA button (white outline). Shown on both variants."
|
|
1478
|
+
},
|
|
1479
|
+
"subtitle": {
|
|
1480
|
+
"type": "string",
|
|
1481
|
+
"required": false,
|
|
1482
|
+
"description": "Optional eyebrow / subtitle above the title"
|
|
1483
|
+
},
|
|
1484
|
+
"title": {
|
|
1485
|
+
"type": "string",
|
|
1486
|
+
"required": true,
|
|
1487
|
+
"description": "Main heading"
|
|
1488
|
+
},
|
|
1489
|
+
"variant": {
|
|
1490
|
+
"type": "HeaderVariant",
|
|
1491
|
+
"required": true,
|
|
1492
|
+
"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"
|
|
1493
|
+
}
|
|
1494
|
+
}
|
|
1495
|
+
},
|
|
1496
|
+
"HelpCenterPage": {
|
|
1497
|
+
"name": "HelpCenterPage",
|
|
1498
|
+
"source": "templates/HelpCenterPage/HelpCenterPage.tsx",
|
|
1499
|
+
"props": {
|
|
1500
|
+
"activeQuestionId": {
|
|
1501
|
+
"type": "string",
|
|
1502
|
+
"required": false,
|
|
1503
|
+
"description": "Controlled id of the currently selected/highlighted question"
|
|
1504
|
+
},
|
|
1505
|
+
"articlesSheetTitle": {
|
|
1506
|
+
"type": "string",
|
|
1507
|
+
"required": false,
|
|
1508
|
+
"description": "Title of the mobile \"browse questions\" bottom sheet (default: \"Articles in this section\")",
|
|
1509
|
+
"default": "Articles in this section"
|
|
1510
|
+
},
|
|
1511
|
+
"categoryTitle": {
|
|
1512
|
+
"type": "string",
|
|
1513
|
+
"required": true,
|
|
1514
|
+
"description": "Category name shown above the question table and on the mobile dropdown trigger (e.g. \"Account\")"
|
|
1515
|
+
},
|
|
1516
|
+
"className": {
|
|
1517
|
+
"type": "string",
|
|
1518
|
+
"required": false,
|
|
1519
|
+
"description": "Additional CSS class on the outer section"
|
|
1520
|
+
},
|
|
1521
|
+
"content": {
|
|
1522
|
+
"type": "HelpCenterContentBlock[]",
|
|
1523
|
+
"required": true,
|
|
1524
|
+
"description": "Main content column body (CMS-supplied rich content, rendered from plain data blocks)",
|
|
1525
|
+
"items": {
|
|
1526
|
+
"items": {
|
|
1527
|
+
"type": "string[]",
|
|
1528
|
+
"required": false,
|
|
1529
|
+
"description": "List entries for \"list\" blocks"
|
|
1530
|
+
},
|
|
1531
|
+
"level": {
|
|
1532
|
+
"type": "2 | 3",
|
|
1533
|
+
"required": false,
|
|
1534
|
+
"description": "Heading level for \"heading\" blocks (default: 2 — the page title itself is always the `<h1>`)"
|
|
1535
|
+
},
|
|
1536
|
+
"ordered": {
|
|
1537
|
+
"type": "boolean",
|
|
1538
|
+
"required": false,
|
|
1539
|
+
"description": "Render a \"list\" block as `<ol>` instead of `<ul>` (default: false)"
|
|
1540
|
+
},
|
|
1541
|
+
"text": {
|
|
1542
|
+
"type": "string",
|
|
1543
|
+
"required": false,
|
|
1544
|
+
"description": "Text content for \"heading\" / \"paragraph\" blocks"
|
|
1545
|
+
},
|
|
1546
|
+
"type": {
|
|
1547
|
+
"type": "HelpCenterContentBlockType",
|
|
1548
|
+
"required": true,
|
|
1549
|
+
"description": "Block kind — \"heading\" and \"paragraph\" use `text`, \"list\" uses `items`"
|
|
1550
|
+
}
|
|
1551
|
+
}
|
|
1552
|
+
},
|
|
1553
|
+
"contentTitle": {
|
|
1554
|
+
"type": "string",
|
|
1555
|
+
"required": true,
|
|
1556
|
+
"description": "Main content column heading (CMS-supplied answer title, rendered as the page's `<h1>`)"
|
|
1557
|
+
},
|
|
1558
|
+
"defaultActiveQuestionId": {
|
|
1559
|
+
"type": "string",
|
|
1560
|
+
"required": false,
|
|
1561
|
+
"description": "Initial selected question id for uncontrolled usage (default: first item in `questions`)"
|
|
1562
|
+
},
|
|
1563
|
+
"onQuestionSelect": {
|
|
1564
|
+
"type": "((id: string) => void)",
|
|
1565
|
+
"required": false,
|
|
1566
|
+
"description": "Called whenever a different question is selected (click on a row without `href`, or via keyboard)"
|
|
1567
|
+
},
|
|
1568
|
+
"onSearchChange": {
|
|
1569
|
+
"type": "((value: string) => void)",
|
|
1570
|
+
"required": false,
|
|
1571
|
+
"description": "Called on every keystroke in the search field with the current value"
|
|
1572
|
+
},
|
|
1573
|
+
"questions": {
|
|
1574
|
+
"type": "HelpCenterQuestionItem[]",
|
|
1575
|
+
"required": true,
|
|
1576
|
+
"description": "Every question belonging to this category, rendered as a single-select table/list",
|
|
1577
|
+
"items": {
|
|
1578
|
+
"content": {
|
|
1579
|
+
"type": "HelpCenterContentBlock[]",
|
|
1580
|
+
"required": false,
|
|
1581
|
+
"description": "Optional per-question content blocks, used to swap the main content column in-place when no `href` is given"
|
|
1582
|
+
},
|
|
1583
|
+
"contentTitle": {
|
|
1584
|
+
"type": "string",
|
|
1585
|
+
"required": false,
|
|
1586
|
+
"description": "Optional per-question title, used to swap the main content column in-place when no `href` is given"
|
|
1587
|
+
},
|
|
1588
|
+
"href": {
|
|
1589
|
+
"type": "string",
|
|
1590
|
+
"required": false,
|
|
1591
|
+
"description": "Destination URL — renders the row as a link (real multi-page navigation)"
|
|
1592
|
+
},
|
|
1593
|
+
"id": {
|
|
1594
|
+
"type": "string",
|
|
1595
|
+
"required": true,
|
|
1596
|
+
"description": "Stable identifier for the question — used as the React key and for active-state matching"
|
|
1597
|
+
},
|
|
1598
|
+
"onClick": {
|
|
1599
|
+
"type": "(() => void)",
|
|
1600
|
+
"required": false,
|
|
1601
|
+
"description": "Click handler, called in addition to selecting the row"
|
|
1602
|
+
},
|
|
1603
|
+
"question": {
|
|
1604
|
+
"type": "string",
|
|
1605
|
+
"required": true,
|
|
1606
|
+
"description": "The FAQ question shown in the sidebar table / mobile sheet"
|
|
1607
|
+
}
|
|
1608
|
+
}
|
|
1609
|
+
},
|
|
1610
|
+
"searchAriaLabel": {
|
|
1611
|
+
"type": "string",
|
|
1612
|
+
"required": false,
|
|
1613
|
+
"description": "Accessible label for the search field (defaults to `searchPlaceholder`)"
|
|
1614
|
+
},
|
|
1615
|
+
"searchNoResultsText": {
|
|
1616
|
+
"type": "string",
|
|
1617
|
+
"required": false,
|
|
1618
|
+
"description": "Message shown when a search query matches no questions. `{query}` is replaced with the current search text. Default: `No results found for \"{query}\"`",
|
|
1619
|
+
"default": "No results found for \"{query}\""
|
|
1620
|
+
},
|
|
1621
|
+
"searchPlaceholder": {
|
|
1622
|
+
"type": "string",
|
|
1623
|
+
"required": false,
|
|
1624
|
+
"description": "Placeholder text for the top search field (default: \"Search\")",
|
|
1625
|
+
"default": "Search"
|
|
1626
|
+
}
|
|
1627
|
+
}
|
|
1628
|
+
},
|
|
1629
|
+
"HelpCentreCategories": {
|
|
1630
|
+
"name": "HelpCentreCategories",
|
|
1631
|
+
"source": "templates/HelpCentreCategories/HelpCentreCategories.tsx",
|
|
1632
|
+
"props": {
|
|
1633
|
+
"categories": {
|
|
1634
|
+
"type": "HelpCentreCategoryItem[]",
|
|
1635
|
+
"required": true,
|
|
1636
|
+
"description": "Category tiles",
|
|
1637
|
+
"items": {
|
|
1638
|
+
"href": {
|
|
1639
|
+
"type": "string",
|
|
1640
|
+
"required": false,
|
|
1641
|
+
"description": "Destination URL — renders the tile as a link"
|
|
1642
|
+
},
|
|
1643
|
+
"icon": {
|
|
1644
|
+
"type": "ReactNode",
|
|
1645
|
+
"required": false,
|
|
1646
|
+
"description": "Icon shown above the title — an image URL or a custom ReactNode (e.g. inline SVG)"
|
|
1647
|
+
},
|
|
1648
|
+
"iconAlt": {
|
|
1649
|
+
"type": "string",
|
|
1650
|
+
"required": false,
|
|
1651
|
+
"description": "Alt text when `icon` is an image URL (default: \"\")"
|
|
1652
|
+
},
|
|
1653
|
+
"id": {
|
|
1654
|
+
"type": "string",
|
|
1655
|
+
"required": false,
|
|
1656
|
+
"description": "Stable identifier for the category (e.g. used for anchors or filtering)"
|
|
1657
|
+
},
|
|
1658
|
+
"onClick": {
|
|
1659
|
+
"type": "(() => void)",
|
|
1660
|
+
"required": false,
|
|
1661
|
+
"description": "Click handler — renders the tile as a button when no `href` is given"
|
|
1662
|
+
},
|
|
1663
|
+
"title": {
|
|
1664
|
+
"type": "string",
|
|
1665
|
+
"required": true,
|
|
1666
|
+
"description": "Category label shown under the icon"
|
|
1667
|
+
}
|
|
1668
|
+
}
|
|
1669
|
+
},
|
|
1670
|
+
"sectionDescription": {
|
|
1671
|
+
"type": "string",
|
|
1672
|
+
"required": false,
|
|
1673
|
+
"description": "Optional copy under the heading"
|
|
1674
|
+
},
|
|
1675
|
+
"sectionTitle": {
|
|
1676
|
+
"type": "string",
|
|
1677
|
+
"required": false,
|
|
1678
|
+
"description": "Optional H2 heading above the grid"
|
|
1679
|
+
}
|
|
1680
|
+
}
|
|
1681
|
+
},
|
|
1682
|
+
"HelpCentreSubCategories": {
|
|
1683
|
+
"name": "HelpCentreSubCategories",
|
|
1684
|
+
"source": "templates/HelpCentreSubCategories/HelpCentreSubCategories.tsx",
|
|
1685
|
+
"props": {
|
|
1686
|
+
"items": {
|
|
1687
|
+
"type": "HelpCentreSubCategoryItem[]",
|
|
1688
|
+
"required": true,
|
|
1689
|
+
"description": "FAQ question cards for this category (at least 1 item)",
|
|
1690
|
+
"items": {
|
|
1691
|
+
"href": {
|
|
1692
|
+
"type": "string",
|
|
1693
|
+
"required": false,
|
|
1694
|
+
"description": "Destination URL — renders the card as a link"
|
|
1695
|
+
},
|
|
1696
|
+
"id": {
|
|
1697
|
+
"type": "string",
|
|
1698
|
+
"required": false,
|
|
1699
|
+
"description": "Stable identifier for the question (e.g. used as the React key)"
|
|
1700
|
+
},
|
|
1701
|
+
"onClick": {
|
|
1702
|
+
"type": "(() => void)",
|
|
1703
|
+
"required": false,
|
|
1704
|
+
"description": "Click handler — renders the card as a button when no `href` is given"
|
|
1705
|
+
},
|
|
1706
|
+
"question": {
|
|
1707
|
+
"type": "string",
|
|
1708
|
+
"required": true,
|
|
1709
|
+
"description": "The FAQ question shown on the card"
|
|
1710
|
+
}
|
|
1711
|
+
}
|
|
1712
|
+
},
|
|
1713
|
+
"noResultsText": {
|
|
1714
|
+
"type": "string",
|
|
1715
|
+
"required": false,
|
|
1716
|
+
"description": "Message shown when a search query matches no items. `{query}` is replaced with the current search text. Default: `No results found for \"{query}\"`",
|
|
1717
|
+
"default": "No results found for \"{query}\""
|
|
1718
|
+
},
|
|
1719
|
+
"onSearchChange": {
|
|
1720
|
+
"type": "((value: string) => void)",
|
|
1721
|
+
"required": false,
|
|
1722
|
+
"description": "Called whenever the search input value changes"
|
|
1723
|
+
},
|
|
1724
|
+
"searchAriaLabel": {
|
|
1725
|
+
"type": "string",
|
|
1726
|
+
"required": false,
|
|
1727
|
+
"description": "Accessible label for the search field (default: matches `searchPlaceholder`)"
|
|
1728
|
+
},
|
|
1729
|
+
"searchPlaceholder": {
|
|
1730
|
+
"type": "string",
|
|
1731
|
+
"required": false,
|
|
1732
|
+
"description": "Placeholder text for the search field (default: \"Search\")",
|
|
1733
|
+
"default": "Search"
|
|
1734
|
+
},
|
|
1735
|
+
"title": {
|
|
1736
|
+
"type": "string",
|
|
1737
|
+
"required": true,
|
|
1738
|
+
"description": "Large H1 category title shown above the search field (e.g. \"Account\")"
|
|
1739
|
+
}
|
|
1740
|
+
}
|
|
1741
|
+
},
|
|
1742
|
+
"Hero": {
|
|
1743
|
+
"name": "Hero",
|
|
1744
|
+
"source": "templates/Hero/Hero.tsx",
|
|
1745
|
+
"props": {
|
|
1746
|
+
"backgroundImageSrc": {
|
|
1747
|
+
"type": "string",
|
|
1748
|
+
"required": false,
|
|
1749
|
+
"description": "Background image URL. Used as the full-bleed background behind the overlay on all three variants."
|
|
1750
|
+
},
|
|
1751
|
+
"description": {
|
|
1752
|
+
"type": "string",
|
|
1753
|
+
"required": false,
|
|
1754
|
+
"description": "Body copy below the title"
|
|
1755
|
+
},
|
|
1756
|
+
"floatingImage": {
|
|
1757
|
+
"type": "ReactNode",
|
|
1758
|
+
"required": false,
|
|
1759
|
+
"description": "Smaller floating image shown below the productImage in the Showcase variant. Accepts a ReactNode or image URL string."
|
|
1760
|
+
},
|
|
1761
|
+
"heroImage": {
|
|
1762
|
+
"type": "ReactNode",
|
|
1763
|
+
"required": false,
|
|
1764
|
+
"description": "Right-side hero image for the Split variant. Accepts a ReactNode (e.g. <img>) or an image URL string."
|
|
1765
|
+
},
|
|
1766
|
+
"primaryButton": {
|
|
1767
|
+
"type": "HeroButtonProps",
|
|
1768
|
+
"required": false,
|
|
1769
|
+
"description": "Primary CTA button (coral). Shown on all variants."
|
|
1770
|
+
},
|
|
1771
|
+
"productImage": {
|
|
1772
|
+
"type": "ReactNode",
|
|
1773
|
+
"required": false,
|
|
1774
|
+
"description": "Large product image shown centered below the CTA buttons in the Showcase variant. Accepts a ReactNode or image URL string."
|
|
1775
|
+
},
|
|
1776
|
+
"secondaryButton": {
|
|
1777
|
+
"type": "HeroButtonProps",
|
|
1778
|
+
"required": false,
|
|
1779
|
+
"description": "Secondary CTA button (white outline). Shown on all variants."
|
|
1780
|
+
},
|
|
1781
|
+
"subtitle": {
|
|
1782
|
+
"type": "string",
|
|
1783
|
+
"required": false,
|
|
1784
|
+
"description": "Optional eyebrow / subtitle above the title"
|
|
1785
|
+
},
|
|
1786
|
+
"title": {
|
|
1787
|
+
"type": "string",
|
|
1788
|
+
"required": true,
|
|
1789
|
+
"description": "Main heading"
|
|
1790
|
+
},
|
|
1791
|
+
"variant": {
|
|
1792
|
+
"type": "HeroVariant",
|
|
1793
|
+
"required": true,
|
|
1794
|
+
"description": "Layout variant: - \"split\" — dark bg, left-aligned text, right-side hero image, 100vh - \"centered\" — full background image, center-aligned text, 100vh - \"showcase\" — dark bg + full-bleed bg image, center-aligned text, large product image below buttons, smaller floating image below that."
|
|
1795
|
+
}
|
|
1796
|
+
}
|
|
1797
|
+
},
|
|
1798
|
+
"ImageBanner": {
|
|
1799
|
+
"name": "ImageBanner",
|
|
1800
|
+
"source": "templates/ImageBanner/ImageBanner.tsx",
|
|
1801
|
+
"props": {
|
|
1802
|
+
"className": {
|
|
1803
|
+
"type": "string",
|
|
1804
|
+
"required": false,
|
|
1805
|
+
"description": "Optional extra CSS class on the root element"
|
|
1806
|
+
},
|
|
1807
|
+
"ctaHref": {
|
|
1808
|
+
"type": "string",
|
|
1809
|
+
"required": false,
|
|
1810
|
+
"description": "CTA link href"
|
|
1811
|
+
},
|
|
1812
|
+
"ctaLabel": {
|
|
1813
|
+
"type": "string",
|
|
1814
|
+
"required": false,
|
|
1815
|
+
"description": "CTA link label",
|
|
1816
|
+
"default": "Trader's Hub"
|
|
1817
|
+
},
|
|
1818
|
+
"description": {
|
|
1819
|
+
"type": "string",
|
|
1820
|
+
"required": false,
|
|
1821
|
+
"description": "Supporting body copy beneath the title",
|
|
1822
|
+
"default": "Connect with traders around the world to exchange insights, explore portfolios, and gain valuable expertise."
|
|
1823
|
+
},
|
|
1824
|
+
"imageAlt": {
|
|
1825
|
+
"type": "string",
|
|
1826
|
+
"required": false,
|
|
1827
|
+
"description": "Accessible alt text for the image",
|
|
1828
|
+
"default": ""
|
|
1829
|
+
},
|
|
1830
|
+
"imageUrl": {
|
|
1831
|
+
"type": "string",
|
|
1832
|
+
"required": false,
|
|
1833
|
+
"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."
|
|
1834
|
+
},
|
|
1835
|
+
"onCtaClick": {
|
|
1836
|
+
"type": "(() => void)",
|
|
1837
|
+
"required": false,
|
|
1838
|
+
"description": "Callback fired when the CTA link is clicked"
|
|
1839
|
+
},
|
|
1840
|
+
"title": {
|
|
1841
|
+
"type": "string",
|
|
1842
|
+
"required": false,
|
|
1843
|
+
"description": "Section headline",
|
|
1844
|
+
"default": "Join our global community"
|
|
1845
|
+
},
|
|
1846
|
+
"variant": {
|
|
1847
|
+
"type": "\"split\" | \"full-bg\"",
|
|
1848
|
+
"required": false,
|
|
1849
|
+
"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.",
|
|
1850
|
+
"default": "split"
|
|
1851
|
+
}
|
|
1852
|
+
}
|
|
1853
|
+
},
|
|
1854
|
+
"Link": {
|
|
1855
|
+
"name": "Link",
|
|
1856
|
+
"source": "components/Link/Link.tsx",
|
|
1857
|
+
"props": {
|
|
1858
|
+
"colorScheme": {
|
|
1859
|
+
"type": "LinkColorScheme",
|
|
1860
|
+
"required": false,
|
|
1861
|
+
"description": "Color scheme — coral (brand), black, or white (for dark backgrounds)",
|
|
1862
|
+
"default": "coral"
|
|
1863
|
+
},
|
|
1864
|
+
"disabled": {
|
|
1865
|
+
"type": "boolean",
|
|
1866
|
+
"required": false,
|
|
1867
|
+
"description": "Disabled state — prevents interaction and reduces opacity",
|
|
1868
|
+
"default": false
|
|
1869
|
+
},
|
|
1870
|
+
"icon": {
|
|
1871
|
+
"type": "ReactNode",
|
|
1872
|
+
"required": false,
|
|
1873
|
+
"description": "Optional left icon. When provided, the chevron is hidden and the label underlines on hover/active."
|
|
1874
|
+
},
|
|
1875
|
+
"label": {
|
|
1876
|
+
"type": "string",
|
|
1877
|
+
"required": false,
|
|
1878
|
+
"description": "Link label text"
|
|
1879
|
+
},
|
|
1880
|
+
"showChevron": {
|
|
1881
|
+
"type": "boolean",
|
|
1882
|
+
"required": false,
|
|
1883
|
+
"description": "Show trailing chevron arrow. Active only when no icon is provided.",
|
|
1884
|
+
"default": true
|
|
1885
|
+
}
|
|
1886
|
+
}
|
|
1887
|
+
},
|
|
1888
|
+
"LogoMarquee": {
|
|
1889
|
+
"name": "LogoMarquee",
|
|
1890
|
+
"source": "templates/LogoMarquee/LogoMarquee.tsx",
|
|
1891
|
+
"props": {
|
|
1892
|
+
"body": {
|
|
1893
|
+
"type": "string",
|
|
1894
|
+
"required": false,
|
|
1895
|
+
"defaultExpression": "TEXT_CONTENT.body"
|
|
1896
|
+
},
|
|
1897
|
+
"col1Logos": {
|
|
1898
|
+
"type": "LogoItem[]",
|
|
1899
|
+
"required": false,
|
|
1900
|
+
"defaultExpression": "COL_ONE_LOGOS"
|
|
1901
|
+
},
|
|
1902
|
+
"col2Logos": {
|
|
1903
|
+
"type": "LogoItem[]",
|
|
1904
|
+
"required": false,
|
|
1905
|
+
"defaultExpression": "COL_TWO_LOGOS"
|
|
1906
|
+
},
|
|
1907
|
+
"ctaHref": {
|
|
1908
|
+
"type": "string",
|
|
1909
|
+
"required": false,
|
|
1910
|
+
"defaultExpression": "TEXT_CONTENT.ctaHref"
|
|
1911
|
+
},
|
|
1912
|
+
"ctaLabel": {
|
|
1913
|
+
"type": "string",
|
|
1914
|
+
"required": false,
|
|
1915
|
+
"defaultExpression": "TEXT_CONTENT.ctaLabel"
|
|
1916
|
+
},
|
|
1917
|
+
"disclaimer": {
|
|
1918
|
+
"type": "string",
|
|
1919
|
+
"required": false,
|
|
1920
|
+
"defaultExpression": "TEXT_CONTENT.disclaimer"
|
|
1921
|
+
},
|
|
1922
|
+
"headline": {
|
|
1923
|
+
"type": "string",
|
|
1924
|
+
"required": false,
|
|
1925
|
+
"defaultExpression": "TEXT_CONTENT.headline"
|
|
1926
|
+
}
|
|
1927
|
+
}
|
|
1928
|
+
},
|
|
1929
|
+
"Navbar": {
|
|
1930
|
+
"name": "Navbar",
|
|
1931
|
+
"source": "components/Navbar/Navbar.tsx",
|
|
1932
|
+
"props": {
|
|
1933
|
+
"activeLanguageCode": {
|
|
1934
|
+
"type": "string",
|
|
1935
|
+
"required": false,
|
|
1936
|
+
"description": "Highlights the active language in the dropdown (matched by `LanguageItem.code`)"
|
|
1937
|
+
},
|
|
1938
|
+
"ctaHref": {
|
|
1939
|
+
"type": "string",
|
|
1940
|
+
"required": false,
|
|
1941
|
+
"description": "Destination for the CTA button"
|
|
1942
|
+
},
|
|
1943
|
+
"ctaLabel": {
|
|
1944
|
+
"type": "string",
|
|
1945
|
+
"required": false,
|
|
1946
|
+
"description": "Label for the primary \"Open account\" button",
|
|
1947
|
+
"default": "Open account"
|
|
1948
|
+
},
|
|
1949
|
+
"languageItems": {
|
|
1950
|
+
"type": "LanguageItem[]",
|
|
1951
|
+
"required": false,
|
|
1952
|
+
"description": "Languages for the hover-triggered dropdown grid. When provided, a dropdown is shown instead of calling `onLanguageClick`."
|
|
1953
|
+
},
|
|
1954
|
+
"languageLabel": {
|
|
1955
|
+
"type": "string",
|
|
1956
|
+
"required": false,
|
|
1957
|
+
"description": "Language label rendered next to the globe icon, e.g. \"EN\""
|
|
1958
|
+
},
|
|
1959
|
+
"loginHref": {
|
|
1960
|
+
"type": "string",
|
|
1961
|
+
"required": false,
|
|
1962
|
+
"description": "Destination for the Log in button"
|
|
1963
|
+
},
|
|
1964
|
+
"loginLabel": {
|
|
1965
|
+
"type": "string",
|
|
1966
|
+
"required": false,
|
|
1967
|
+
"description": "Label for the \"Log in\" outlined button",
|
|
1968
|
+
"default": "Log in"
|
|
1969
|
+
},
|
|
1970
|
+
"logoHref": {
|
|
1971
|
+
"type": "string",
|
|
1972
|
+
"required": false,
|
|
1973
|
+
"description": "Wraps the logo in an anchor tag",
|
|
1974
|
+
"default": "/"
|
|
1975
|
+
},
|
|
1976
|
+
"logoSrc": {
|
|
1977
|
+
"type": "string",
|
|
1978
|
+
"required": true,
|
|
1979
|
+
"description": "Logo image URL used when `theme=\"dark\"` (light-coloured logo)"
|
|
1980
|
+
},
|
|
1981
|
+
"logoSrcDark": {
|
|
1982
|
+
"type": "string",
|
|
1983
|
+
"required": false,
|
|
1984
|
+
"description": "Logo image URL used when `theme=\"light\"` (dark-coloured logo). Falls back to `logoSrc` when omitted."
|
|
1985
|
+
},
|
|
1986
|
+
"navItems": {
|
|
1987
|
+
"type": "NavItem[]",
|
|
1988
|
+
"required": false,
|
|
1989
|
+
"description": "Navigation items — each may be a plain link, external link, or dropdown trigger",
|
|
1990
|
+
"default": []
|
|
1991
|
+
},
|
|
1992
|
+
"onLanguageClick": {
|
|
1993
|
+
"type": "(() => void)",
|
|
1994
|
+
"required": false,
|
|
1995
|
+
"description": "Called when the language button is clicked (used when `languageItems` is NOT provided)"
|
|
1996
|
+
},
|
|
1997
|
+
"onLanguageSelect": {
|
|
1998
|
+
"type": "((code: string) => void)",
|
|
1999
|
+
"required": false,
|
|
2000
|
+
"description": "Called when a language is picked from the dropdown"
|
|
2001
|
+
},
|
|
2002
|
+
"theme": {
|
|
2003
|
+
"type": "\"light\" | \"dark\"",
|
|
2004
|
+
"required": false,
|
|
2005
|
+
"description": "`dark` — hero beneath has a dark / image background; pill uses white/24 tint, text is white. `light` — hero beneath has a white background; pill uses white/88 tint, text is slate.",
|
|
2006
|
+
"default": "dark"
|
|
2007
|
+
}
|
|
2008
|
+
}
|
|
2009
|
+
},
|
|
2010
|
+
"Pagination": {
|
|
2011
|
+
"name": "Pagination",
|
|
2012
|
+
"source": "components/Pagination/Pagination.tsx",
|
|
2013
|
+
"props": {
|
|
2014
|
+
"className": {
|
|
2015
|
+
"type": "string",
|
|
2016
|
+
"required": false,
|
|
2017
|
+
"description": "Optional extra class name for the root element"
|
|
2018
|
+
},
|
|
2019
|
+
"currentPage": {
|
|
2020
|
+
"type": "number",
|
|
2021
|
+
"required": true,
|
|
2022
|
+
"description": "The currently active page (1-based)"
|
|
2023
|
+
},
|
|
2024
|
+
"onPageChange": {
|
|
2025
|
+
"type": "(page: number) => void",
|
|
2026
|
+
"required": true,
|
|
2027
|
+
"description": "Callback fired when the user navigates to a different page"
|
|
2028
|
+
},
|
|
2029
|
+
"totalPages": {
|
|
2030
|
+
"type": "number",
|
|
2031
|
+
"required": true,
|
|
2032
|
+
"description": "Total number of pages"
|
|
2033
|
+
}
|
|
2034
|
+
}
|
|
2035
|
+
},
|
|
2036
|
+
"Stats": {
|
|
2037
|
+
"name": "Stats",
|
|
2038
|
+
"source": "templates/Stats/StatsV2.tsx",
|
|
2039
|
+
"props": {
|
|
2040
|
+
"description": {
|
|
2041
|
+
"type": "string",
|
|
2042
|
+
"required": false,
|
|
2043
|
+
"description": "Optional supporting copy below the heading"
|
|
2044
|
+
},
|
|
2045
|
+
"leftAwards": {
|
|
2046
|
+
"type": "StatsAward[]",
|
|
2047
|
+
"required": false,
|
|
2048
|
+
"description": "Award badges shown in the left column on desktop and as the first group on the mobile grid. Visually top-aligned on desktop.",
|
|
2049
|
+
"default": []
|
|
2050
|
+
},
|
|
2051
|
+
"rightAwards": {
|
|
2052
|
+
"type": "StatsAward[]",
|
|
2053
|
+
"required": false,
|
|
2054
|
+
"description": "Award badges shown in the right column on desktop and as the second group on the mobile grid. Bottom-aligned on desktop.",
|
|
2055
|
+
"default": []
|
|
2056
|
+
},
|
|
2057
|
+
"stats": {
|
|
2058
|
+
"type": "StatItem[]",
|
|
2059
|
+
"required": true,
|
|
2060
|
+
"description": "Ordered list of stats displayed in the centre carousel card. The carousel auto-rotates and never stops; provide ≥ 2 items to enable the animation.",
|
|
2061
|
+
"items": {
|
|
2062
|
+
"label": {
|
|
2063
|
+
"type": "string",
|
|
2064
|
+
"required": true,
|
|
2065
|
+
"description": "Descriptive label below the value, e.g. \"customers worldwide\""
|
|
2066
|
+
},
|
|
2067
|
+
"value": {
|
|
2068
|
+
"type": "string",
|
|
2069
|
+
"required": true,
|
|
2070
|
+
"description": "Numeric or short display value, e.g. \"2.5M+\""
|
|
2071
|
+
}
|
|
2072
|
+
}
|
|
2073
|
+
},
|
|
2074
|
+
"title": {
|
|
2075
|
+
"type": "string",
|
|
2076
|
+
"required": true,
|
|
2077
|
+
"description": "Section heading (H2)"
|
|
2078
|
+
}
|
|
2079
|
+
}
|
|
2080
|
+
},
|
|
2081
|
+
"StatsSimple": {
|
|
2082
|
+
"name": "StatsSimple",
|
|
2083
|
+
"source": "templates/Stats/StatsSimple.tsx",
|
|
2084
|
+
"props": {
|
|
2085
|
+
"stats": {
|
|
2086
|
+
"type": "StatItem[]",
|
|
2087
|
+
"required": true,
|
|
2088
|
+
"description": "Ordered list of stat items to display in the horizontal grid.",
|
|
2089
|
+
"items": {
|
|
2090
|
+
"label": {
|
|
2091
|
+
"type": "string",
|
|
2092
|
+
"required": true,
|
|
2093
|
+
"description": "Descriptive label below the value, e.g. \"customers worldwide\""
|
|
2094
|
+
},
|
|
2095
|
+
"value": {
|
|
2096
|
+
"type": "string",
|
|
2097
|
+
"required": true,
|
|
2098
|
+
"description": "Numeric or short display value, e.g. \"2.5M+\""
|
|
2099
|
+
}
|
|
2100
|
+
}
|
|
2101
|
+
}
|
|
2102
|
+
}
|
|
2103
|
+
},
|
|
2104
|
+
"Steps": {
|
|
2105
|
+
"name": "Steps",
|
|
2106
|
+
"source": "templates/Steps/Steps.tsx",
|
|
2107
|
+
"props": {
|
|
2108
|
+
"image": {
|
|
2109
|
+
"type": "string",
|
|
2110
|
+
"required": false,
|
|
2111
|
+
"description": "Image source URL"
|
|
2112
|
+
},
|
|
2113
|
+
"imageAlt": {
|
|
2114
|
+
"type": "string",
|
|
2115
|
+
"required": false,
|
|
2116
|
+
"description": "Accessible alt text for the image",
|
|
2117
|
+
"default": ""
|
|
2118
|
+
},
|
|
2119
|
+
"imagePosition": {
|
|
2120
|
+
"type": "StepsImagePosition",
|
|
2121
|
+
"required": false,
|
|
2122
|
+
"description": "Which side the image sits on (default: \"left\"). On mobile the image always stacks above the content.",
|
|
2123
|
+
"default": "left"
|
|
2124
|
+
},
|
|
2125
|
+
"steps": {
|
|
2126
|
+
"type": "StepItem[]",
|
|
2127
|
+
"required": true,
|
|
2128
|
+
"description": "Ordered list of steps",
|
|
2129
|
+
"items": {
|
|
2130
|
+
"description": {
|
|
2131
|
+
"type": "string",
|
|
2132
|
+
"required": true,
|
|
2133
|
+
"description": "Step body copy"
|
|
2134
|
+
},
|
|
2135
|
+
"title": {
|
|
2136
|
+
"type": "string",
|
|
2137
|
+
"required": true,
|
|
2138
|
+
"description": "Step title"
|
|
2139
|
+
}
|
|
2140
|
+
}
|
|
2141
|
+
},
|
|
2142
|
+
"title": {
|
|
2143
|
+
"type": "string",
|
|
2144
|
+
"required": true,
|
|
2145
|
+
"description": "Section headline (H2)"
|
|
2146
|
+
}
|
|
2147
|
+
}
|
|
2148
|
+
},
|
|
2149
|
+
"StickyMarketCards": {
|
|
2150
|
+
"name": "StickyMarketCards",
|
|
2151
|
+
"source": "templates/StickyMarketCards/StickyMarketCards.tsx",
|
|
2152
|
+
"props": {
|
|
2153
|
+
"items": {
|
|
2154
|
+
"type": "StickyMarketCardItem[]",
|
|
2155
|
+
"required": true,
|
|
2156
|
+
"description": "Ordered list of cards (first item = back of stack, last = front).",
|
|
2157
|
+
"items": {
|
|
2158
|
+
"description": {
|
|
2159
|
+
"type": "string",
|
|
2160
|
+
"required": true,
|
|
2161
|
+
"description": "Body copy below the title"
|
|
2162
|
+
},
|
|
2163
|
+
"imageUrl": {
|
|
2164
|
+
"type": "string",
|
|
2165
|
+
"required": false,
|
|
2166
|
+
"description": "URL of the card's hero image."
|
|
2167
|
+
},
|
|
2168
|
+
"theme": {
|
|
2169
|
+
"type": "StickyMarketCardTheme",
|
|
2170
|
+
"required": false,
|
|
2171
|
+
"description": "Background / text colour theme. light → slate-75 bg + dark text coral → coral-500 bg + white text dark → slate-1200 bg + white text"
|
|
2172
|
+
},
|
|
2173
|
+
"title": {
|
|
2174
|
+
"type": "string",
|
|
2175
|
+
"required": true,
|
|
2176
|
+
"description": "Card heading"
|
|
2177
|
+
}
|
|
2178
|
+
}
|
|
2179
|
+
},
|
|
2180
|
+
"sectionDescription": {
|
|
2181
|
+
"type": "string",
|
|
2182
|
+
"required": false,
|
|
2183
|
+
"description": "Optional section description"
|
|
2184
|
+
},
|
|
2185
|
+
"sectionTitle": {
|
|
2186
|
+
"type": "string",
|
|
2187
|
+
"required": true,
|
|
2188
|
+
"description": "Section heading rendered as H2"
|
|
2189
|
+
}
|
|
2190
|
+
}
|
|
2191
|
+
},
|
|
2192
|
+
"StickyStackedCards": {
|
|
2193
|
+
"name": "StickyStackedCards",
|
|
2194
|
+
"source": "templates/StickyStackedCards/StickyStackedCards.tsx",
|
|
2195
|
+
"props": {
|
|
2196
|
+
"header": {
|
|
2197
|
+
"type": "string",
|
|
2198
|
+
"required": true,
|
|
2199
|
+
"description": "Section heading rendered as H2"
|
|
2200
|
+
},
|
|
2201
|
+
"items": {
|
|
2202
|
+
"type": "StickyCardItem[]",
|
|
2203
|
+
"required": true,
|
|
2204
|
+
"description": "Ordered list of cards. On desktop each card is position:sticky and slides over the previous one. On mobile they render as a plain vertical stack.",
|
|
2205
|
+
"items": {
|
|
2206
|
+
"description": {
|
|
2207
|
+
"type": "string",
|
|
2208
|
+
"required": true,
|
|
2209
|
+
"description": "Body copy below the title"
|
|
2210
|
+
},
|
|
2211
|
+
"imageUrl": {
|
|
2212
|
+
"type": "string",
|
|
2213
|
+
"required": true,
|
|
2214
|
+
"description": "URL of the card's hero image (webp, png, jpg, etc.)"
|
|
2215
|
+
},
|
|
2216
|
+
"theme": {
|
|
2217
|
+
"type": "StickyCardTheme",
|
|
2218
|
+
"required": false,
|
|
2219
|
+
"description": "Background / text colour theme. light → slate-75 bg + dark text coral → coral-500 bg + white text dark → slate-1200 bg + white text"
|
|
2220
|
+
},
|
|
2221
|
+
"title": {
|
|
2222
|
+
"type": "string",
|
|
2223
|
+
"required": true,
|
|
2224
|
+
"description": "Card heading"
|
|
2225
|
+
}
|
|
2226
|
+
}
|
|
2227
|
+
}
|
|
2228
|
+
}
|
|
2229
|
+
},
|
|
2230
|
+
"Table": {
|
|
2231
|
+
"name": "Table",
|
|
2232
|
+
"source": "templates/Table/Table.tsx",
|
|
2233
|
+
"props": {
|
|
2234
|
+
"columns": {
|
|
2235
|
+
"type": "TableColumnDef[]",
|
|
2236
|
+
"required": true,
|
|
2237
|
+
"description": "Column definitions (order matters)",
|
|
2238
|
+
"items": {
|
|
2239
|
+
"header": {
|
|
2240
|
+
"type": "string | string[]",
|
|
2241
|
+
"required": true,
|
|
2242
|
+
"description": "Header label text. Pass an array for multi-line headers (e.g. [\"Contract\", \"size\"])."
|
|
2243
|
+
},
|
|
2244
|
+
"key": {
|
|
2245
|
+
"type": "string",
|
|
2246
|
+
"required": true,
|
|
2247
|
+
"description": "Unique key matching the row data field"
|
|
2248
|
+
},
|
|
2249
|
+
"tooltip": {
|
|
2250
|
+
"type": "{ heading: string; description: string; }",
|
|
2251
|
+
"required": false,
|
|
2252
|
+
"description": "Tooltip shown on header hover"
|
|
2253
|
+
},
|
|
2254
|
+
"width": {
|
|
2255
|
+
"type": "TableColumnWidth",
|
|
2256
|
+
"required": false,
|
|
2257
|
+
"description": "Column width variant: main → first/instrument column (wider, sticky, icon support) normal → default column big → wide column (e.g. Trading hours)"
|
|
2258
|
+
}
|
|
2259
|
+
}
|
|
2260
|
+
},
|
|
2261
|
+
"infoText": {
|
|
2262
|
+
"type": "string",
|
|
2263
|
+
"required": false,
|
|
2264
|
+
"description": "Optional info text shown next to pagination"
|
|
2265
|
+
},
|
|
2266
|
+
"mainColumnKey": {
|
|
2267
|
+
"type": "string",
|
|
2268
|
+
"required": false,
|
|
2269
|
+
"description": "Key of the main (instrument) column. Defaults to the first column with width \"main\", or the first column."
|
|
2270
|
+
},
|
|
2271
|
+
"pageSize": {
|
|
2272
|
+
"type": "number",
|
|
2273
|
+
"required": false,
|
|
2274
|
+
"description": "Rows displayed per page (default: 10)",
|
|
2275
|
+
"default": 10
|
|
2276
|
+
},
|
|
2277
|
+
"rows": {
|
|
2278
|
+
"type": "TableRowData[]",
|
|
2279
|
+
"required": true,
|
|
2280
|
+
"description": "Row data"
|
|
2281
|
+
},
|
|
2282
|
+
"searchPlaceholder": {
|
|
2283
|
+
"type": "string",
|
|
2284
|
+
"required": false,
|
|
2285
|
+
"description": "Search input placeholder (default: \"Search\")",
|
|
2286
|
+
"default": "Search"
|
|
2287
|
+
},
|
|
2288
|
+
"sectionTitle": {
|
|
2289
|
+
"type": "string",
|
|
2290
|
+
"required": false,
|
|
2291
|
+
"description": "Optional section title rendered above the table"
|
|
2292
|
+
}
|
|
2293
|
+
}
|
|
2294
|
+
},
|
|
2295
|
+
"Tabs": {
|
|
2296
|
+
"name": "Tabs",
|
|
2297
|
+
"source": "components/Tabs/Tabs.tsx",
|
|
2298
|
+
"props": {
|
|
2299
|
+
"activeId": {
|
|
2300
|
+
"type": "string",
|
|
2301
|
+
"required": true,
|
|
2302
|
+
"description": "The currently active tab ID"
|
|
2303
|
+
},
|
|
2304
|
+
"className": {
|
|
2305
|
+
"type": "string",
|
|
2306
|
+
"required": false,
|
|
2307
|
+
"description": "Optional CSS class name"
|
|
2308
|
+
},
|
|
2309
|
+
"items": {
|
|
2310
|
+
"type": "TabItem[]",
|
|
2311
|
+
"required": true,
|
|
2312
|
+
"description": "Array of tab items to display",
|
|
2313
|
+
"items": {
|
|
2314
|
+
"id": {
|
|
2315
|
+
"type": "string",
|
|
2316
|
+
"required": true,
|
|
2317
|
+
"description": "Unique identifier for the tab"
|
|
2318
|
+
},
|
|
2319
|
+
"label": {
|
|
2320
|
+
"type": "string",
|
|
2321
|
+
"required": true,
|
|
2322
|
+
"description": "Display label for the tab"
|
|
2323
|
+
}
|
|
2324
|
+
}
|
|
2325
|
+
},
|
|
2326
|
+
"onChange": {
|
|
2327
|
+
"type": "(id: string) => void",
|
|
2328
|
+
"required": true,
|
|
2329
|
+
"description": "Callback fired when a tab is clicked"
|
|
2330
|
+
}
|
|
2331
|
+
}
|
|
2332
|
+
},
|
|
2333
|
+
"Tag": {
|
|
2334
|
+
"name": "Tag",
|
|
2335
|
+
"source": "components/Tag/Tag.tsx",
|
|
2336
|
+
"props": {
|
|
2337
|
+
"fontWeight": {
|
|
2338
|
+
"type": "TagFontWeight",
|
|
2339
|
+
"required": false,
|
|
2340
|
+
"default": "regular"
|
|
2341
|
+
},
|
|
2342
|
+
"icon": {
|
|
2343
|
+
"type": "ReactNode",
|
|
2344
|
+
"required": false
|
|
2345
|
+
},
|
|
2346
|
+
"label": {
|
|
2347
|
+
"type": "string",
|
|
2348
|
+
"required": false
|
|
2349
|
+
},
|
|
2350
|
+
"size": {
|
|
2351
|
+
"type": "TagSize",
|
|
2352
|
+
"required": false,
|
|
2353
|
+
"default": "sm"
|
|
2354
|
+
},
|
|
2355
|
+
"variant": {
|
|
2356
|
+
"type": "TagVariant",
|
|
2357
|
+
"required": false,
|
|
2358
|
+
"default": "fill"
|
|
2359
|
+
}
|
|
2360
|
+
}
|
|
2361
|
+
},
|
|
2362
|
+
"Testimonial": {
|
|
2363
|
+
"name": "Testimonial",
|
|
2364
|
+
"source": "templates/Testimonial/Testimonial.tsx",
|
|
2365
|
+
"props": {
|
|
2366
|
+
"className": {
|
|
2367
|
+
"type": "string",
|
|
2368
|
+
"required": false,
|
|
2369
|
+
"description": "Optional CSS class name applied to the outer section"
|
|
2370
|
+
},
|
|
2371
|
+
"items": {
|
|
2372
|
+
"type": "TestimonialItem[]",
|
|
2373
|
+
"required": true,
|
|
2374
|
+
"description": "Array of testimonial items to display in the carousel",
|
|
2375
|
+
"items": {
|
|
2376
|
+
"authorLocation": {
|
|
2377
|
+
"type": "string",
|
|
2378
|
+
"required": false,
|
|
2379
|
+
"description": "Author location or subtitle (e.g. \"Sri Lanka\")"
|
|
2380
|
+
},
|
|
2381
|
+
"authorName": {
|
|
2382
|
+
"type": "string",
|
|
2383
|
+
"required": true,
|
|
2384
|
+
"description": "Author name or label (e.g. \"Deriv partner\")"
|
|
2385
|
+
},
|
|
2386
|
+
"avatarUrl": {
|
|
2387
|
+
"type": "string",
|
|
2388
|
+
"required": false,
|
|
2389
|
+
"description": "Optional author avatar image URL"
|
|
2390
|
+
},
|
|
2391
|
+
"quote": {
|
|
2392
|
+
"type": "string",
|
|
2393
|
+
"required": true,
|
|
2394
|
+
"description": "The testimonial quote text"
|
|
2395
|
+
}
|
|
2396
|
+
}
|
|
2397
|
+
},
|
|
2398
|
+
"title": {
|
|
2399
|
+
"type": "string",
|
|
2400
|
+
"required": false,
|
|
2401
|
+
"description": "Section heading"
|
|
2402
|
+
}
|
|
2403
|
+
}
|
|
2404
|
+
},
|
|
2405
|
+
"TextScroll": {
|
|
2406
|
+
"name": "TextScroll",
|
|
2407
|
+
"source": "templates/TextScroll/TextScroll.tsx",
|
|
2408
|
+
"props": {
|
|
2409
|
+
"className": {
|
|
2410
|
+
"type": "string",
|
|
2411
|
+
"required": false,
|
|
2412
|
+
"description": "Additional class names forwarded to the section root"
|
|
2413
|
+
},
|
|
2414
|
+
"text": {
|
|
2415
|
+
"type": "string",
|
|
2416
|
+
"required": true,
|
|
2417
|
+
"description": "The large body copy that animates word-by-word on scroll"
|
|
2418
|
+
}
|
|
2419
|
+
}
|
|
2420
|
+
}
|
|
2421
|
+
},
|
|
2422
|
+
"aliases": {
|
|
2423
|
+
"Leaders": {
|
|
2424
|
+
"aliasOf": "AvatarGrid",
|
|
2425
|
+
"deprecated": "Use AvatarGrid instead"
|
|
2426
|
+
},
|
|
2427
|
+
"PeopleGrid": {
|
|
2428
|
+
"aliasOf": "AvatarGrid",
|
|
2429
|
+
"deprecated": "Use AvatarGrid instead"
|
|
2430
|
+
}
|
|
2431
|
+
}
|
|
2432
|
+
}
|