@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
package/dist/index.d.mts
CHANGED
|
@@ -1318,4 +1318,201 @@ interface ArticleSectionProps {
|
|
|
1318
1318
|
|
|
1319
1319
|
declare const ArticleSection: ({ variant, sectionTitle, linkText, onLinkClick, featured, articles, className, }: ArticleSectionProps) => react_jsx_runtime.JSX.Element;
|
|
1320
1320
|
|
|
1321
|
-
|
|
1321
|
+
interface CoralBannerButton {
|
|
1322
|
+
/** Button label */
|
|
1323
|
+
label: string;
|
|
1324
|
+
/** Link href — rendered as an `<a>` wrapping the button when provided */
|
|
1325
|
+
href?: string;
|
|
1326
|
+
/** Click handler (used when no `href` is provided) */
|
|
1327
|
+
onClick?: () => void;
|
|
1328
|
+
}
|
|
1329
|
+
interface CoralBannerSlide {
|
|
1330
|
+
/** Unique key for the slide (falls back to array index) */
|
|
1331
|
+
id?: string | number;
|
|
1332
|
+
/**
|
|
1333
|
+
* Headline. Use `"\n"` to force a manual line break
|
|
1334
|
+
* (matches the reference banner's two-line "Join 3M+ / global traders" layout).
|
|
1335
|
+
*/
|
|
1336
|
+
title: string;
|
|
1337
|
+
/** Supporting paragraph below the title */
|
|
1338
|
+
description?: string;
|
|
1339
|
+
/** Primary CTA — rendered as a solid black pill button */
|
|
1340
|
+
primaryButton?: CoralBannerButton;
|
|
1341
|
+
/** Optional secondary CTA — rendered as a white pill button */
|
|
1342
|
+
secondaryButton?: CoralBannerButton;
|
|
1343
|
+
}
|
|
1344
|
+
interface CoralBannerProps extends HTMLAttributes<HTMLElement> {
|
|
1345
|
+
/**
|
|
1346
|
+
* `static` — renders a single, non-interactive slide (no arrows/dots/autoplay).
|
|
1347
|
+
* `carousel` — renders `slides` in a swipeable, auto-advancing slider
|
|
1348
|
+
* (horizontal slide transition, dot pagination, prev/next arrows),
|
|
1349
|
+
* matching the banner used on deriv.com and deriv.com/markets/forex.
|
|
1350
|
+
*/
|
|
1351
|
+
variant?: "static" | "carousel";
|
|
1352
|
+
/** Slide content. `static` variant renders only `slides[0]`. */
|
|
1353
|
+
slides?: CoralBannerSlide[];
|
|
1354
|
+
/** Auto-advance slides (carousel only) */
|
|
1355
|
+
autoplay?: boolean;
|
|
1356
|
+
/** Milliseconds between auto-advances (carousel only). Reference site uses `2000`. */
|
|
1357
|
+
autoplayDelay?: number;
|
|
1358
|
+
/** Slide transition duration in ms. Reference site uses `330`. */
|
|
1359
|
+
transitionDuration?: number;
|
|
1360
|
+
/** Loop back to the first slide after the last (carousel only) */
|
|
1361
|
+
infinite?: boolean;
|
|
1362
|
+
/** Show the prev/next arrow controls (carousel only, 2+ slides) */
|
|
1363
|
+
showArrows?: boolean;
|
|
1364
|
+
/** Show the dot pagination (carousel only, 2+ slides) */
|
|
1365
|
+
showDots?: boolean;
|
|
1366
|
+
}
|
|
1367
|
+
|
|
1368
|
+
/**
|
|
1369
|
+
* Real deriv.com copy, exported for consumers who want to reproduce the
|
|
1370
|
+
* exact reference banner (deriv.com homepage / deriv.com/markets/forex footer promo).
|
|
1371
|
+
*/
|
|
1372
|
+
declare const CORAL_BANNER_DERIV_SLIDES: CoralBannerSlide[];
|
|
1373
|
+
declare const CoralBanner: ({ variant, slides, autoplay, autoplayDelay, transitionDuration, infinite, showArrows, showDots, className, ...props }: CoralBannerProps) => react_jsx_runtime.JSX.Element;
|
|
1374
|
+
|
|
1375
|
+
interface AwardItem {
|
|
1376
|
+
/** Main award name, e.g. "Best Trade Execution Award (MEA)" */
|
|
1377
|
+
title: string;
|
|
1378
|
+
/** Issuing body and year, e.g. "UF Awards 2025" */
|
|
1379
|
+
subtitle: string;
|
|
1380
|
+
}
|
|
1381
|
+
interface FeatureAwardsProps extends HTMLAttributes<HTMLElement> {
|
|
1382
|
+
/** Section heading. Defaults to "Our awards". */
|
|
1383
|
+
title?: string;
|
|
1384
|
+
/** Ordered list of awards to display. Defaults to `DEFAULT_AWARDS`. */
|
|
1385
|
+
awards?: AwardItem[];
|
|
1386
|
+
/**
|
|
1387
|
+
* Seconds for one full auto-scroll loop on mobile (< 768px) —
|
|
1388
|
+
* lower is faster. Mobile always auto-scrolls; this only tunes
|
|
1389
|
+
* the speed. Defaults to `32`.
|
|
1390
|
+
*/
|
|
1391
|
+
autoScrollDuration?: number;
|
|
1392
|
+
/** Extra class name merged onto the root `<section>`. */
|
|
1393
|
+
className?: string;
|
|
1394
|
+
}
|
|
1395
|
+
|
|
1396
|
+
declare const FEATURE_AWARDS_TEXT_CONTENT: {
|
|
1397
|
+
title: string;
|
|
1398
|
+
};
|
|
1399
|
+
declare const DEFAULT_AWARDS: AwardItem[];
|
|
1400
|
+
declare const FeatureAwards: ({ title, awards, autoScrollDuration, className, ...props }: FeatureAwardsProps) => react_jsx_runtime.JSX.Element | null;
|
|
1401
|
+
|
|
1402
|
+
interface HelpCentreCategoryItem {
|
|
1403
|
+
/** Stable identifier for the category (e.g. used for anchors or filtering) */
|
|
1404
|
+
id?: string;
|
|
1405
|
+
/** Category label shown under the icon */
|
|
1406
|
+
title: string;
|
|
1407
|
+
/** Icon shown above the title — an image URL or a custom ReactNode (e.g. inline SVG) */
|
|
1408
|
+
icon?: string | ReactNode;
|
|
1409
|
+
/** Alt text when `icon` is an image URL (default: "") */
|
|
1410
|
+
iconAlt?: string;
|
|
1411
|
+
/** Destination URL — renders the tile as a link */
|
|
1412
|
+
href?: string;
|
|
1413
|
+
/** Click handler — renders the tile as a button when no `href` is given */
|
|
1414
|
+
onClick?: () => void;
|
|
1415
|
+
}
|
|
1416
|
+
interface HelpCentreCategoriesProps {
|
|
1417
|
+
/** Optional H2 heading above the grid */
|
|
1418
|
+
sectionTitle?: string;
|
|
1419
|
+
/** Optional copy under the heading */
|
|
1420
|
+
sectionDescription?: string;
|
|
1421
|
+
/** Category tiles */
|
|
1422
|
+
categories: HelpCentreCategoryItem[];
|
|
1423
|
+
}
|
|
1424
|
+
|
|
1425
|
+
declare const HelpCentreCategories: ({ sectionTitle, sectionDescription, categories, }: HelpCentreCategoriesProps) => react_jsx_runtime.JSX.Element;
|
|
1426
|
+
|
|
1427
|
+
interface HelpCentreSubCategoryItem {
|
|
1428
|
+
/** Stable identifier for the question (e.g. used as the React key) */
|
|
1429
|
+
id?: string;
|
|
1430
|
+
/** The FAQ question shown on the card */
|
|
1431
|
+
question: string;
|
|
1432
|
+
/** Destination URL — renders the card as a link */
|
|
1433
|
+
href?: string;
|
|
1434
|
+
/** Click handler — renders the card as a button when no `href` is given */
|
|
1435
|
+
onClick?: () => void;
|
|
1436
|
+
}
|
|
1437
|
+
interface HelpCentreSubCategoriesProps {
|
|
1438
|
+
/** Large H1 category title shown above the search field (e.g. "Account") */
|
|
1439
|
+
title: string;
|
|
1440
|
+
/** Placeholder text for the search field (default: "Search") */
|
|
1441
|
+
searchPlaceholder?: string;
|
|
1442
|
+
/** Accessible label for the search field (default: matches `searchPlaceholder`) */
|
|
1443
|
+
searchAriaLabel?: string;
|
|
1444
|
+
/** FAQ question cards for this category (at least 1 item) */
|
|
1445
|
+
items: HelpCentreSubCategoryItem[];
|
|
1446
|
+
/**
|
|
1447
|
+
* Message shown when a search query matches no items. `{query}` is
|
|
1448
|
+
* replaced with the current search text. Default: `No results found for "{query}"`
|
|
1449
|
+
*/
|
|
1450
|
+
noResultsText?: string;
|
|
1451
|
+
/** Called whenever the search input value changes */
|
|
1452
|
+
onSearchChange?: (value: string) => void;
|
|
1453
|
+
}
|
|
1454
|
+
|
|
1455
|
+
declare const HelpCentreSubCategories: ({ title, searchPlaceholder, searchAriaLabel, items, noResultsText, onSearchChange, }: HelpCentreSubCategoriesProps) => react_jsx_runtime.JSX.Element;
|
|
1456
|
+
|
|
1457
|
+
type HelpCenterContentBlockType = "heading" | "paragraph" | "list";
|
|
1458
|
+
interface HelpCenterContentBlock {
|
|
1459
|
+
/** Block kind — "heading" and "paragraph" use `text`, "list" uses `items` */
|
|
1460
|
+
type: HelpCenterContentBlockType;
|
|
1461
|
+
/** Text content for "heading" / "paragraph" blocks */
|
|
1462
|
+
text?: string;
|
|
1463
|
+
/** Heading level for "heading" blocks (default: 2 — the page title itself is always the `<h1>`) */
|
|
1464
|
+
level?: 2 | 3;
|
|
1465
|
+
/** List entries for "list" blocks */
|
|
1466
|
+
items?: string[];
|
|
1467
|
+
/** Render a "list" block as `<ol>` instead of `<ul>` (default: false) */
|
|
1468
|
+
ordered?: boolean;
|
|
1469
|
+
}
|
|
1470
|
+
interface HelpCenterQuestionItem {
|
|
1471
|
+
/** Stable identifier for the question — used as the React key and for active-state matching */
|
|
1472
|
+
id: string;
|
|
1473
|
+
/** The FAQ question shown in the sidebar table / mobile sheet */
|
|
1474
|
+
question: string;
|
|
1475
|
+
/** Destination URL — renders the row as a link (real multi-page navigation) */
|
|
1476
|
+
href?: string;
|
|
1477
|
+
/** Click handler, called in addition to selecting the row */
|
|
1478
|
+
onClick?: () => void;
|
|
1479
|
+
/** Optional per-question title, used to swap the main content column in-place when no `href` is given */
|
|
1480
|
+
contentTitle?: string;
|
|
1481
|
+
/** Optional per-question content blocks, used to swap the main content column in-place when no `href` is given */
|
|
1482
|
+
content?: HelpCenterContentBlock[];
|
|
1483
|
+
}
|
|
1484
|
+
interface HelpCenterPageProps {
|
|
1485
|
+
/** Category name shown above the question table and on the mobile dropdown trigger (e.g. "Account") */
|
|
1486
|
+
categoryTitle: string;
|
|
1487
|
+
/** Every question belonging to this category, rendered as a single-select table/list */
|
|
1488
|
+
questions: HelpCenterQuestionItem[];
|
|
1489
|
+
/** Controlled id of the currently selected/highlighted question */
|
|
1490
|
+
activeQuestionId?: string;
|
|
1491
|
+
/** Initial selected question id for uncontrolled usage (default: first item in `questions`) */
|
|
1492
|
+
defaultActiveQuestionId?: string;
|
|
1493
|
+
/** Called whenever a different question is selected (click on a row without `href`, or via keyboard) */
|
|
1494
|
+
onQuestionSelect?: (id: string) => void;
|
|
1495
|
+
/** Main content column heading (CMS-supplied answer title, rendered as the page's `<h1>`) */
|
|
1496
|
+
contentTitle: string;
|
|
1497
|
+
/** Main content column body (CMS-supplied rich content, rendered from plain data blocks) */
|
|
1498
|
+
content: HelpCenterContentBlock[];
|
|
1499
|
+
/** Placeholder text for the top search field (default: "Search") */
|
|
1500
|
+
searchPlaceholder?: string;
|
|
1501
|
+
/** Accessible label for the search field (defaults to `searchPlaceholder`) */
|
|
1502
|
+
searchAriaLabel?: string;
|
|
1503
|
+
/** Called on every keystroke in the search field with the current value */
|
|
1504
|
+
onSearchChange?: (value: string) => void;
|
|
1505
|
+
/**
|
|
1506
|
+
* Message shown when a search query matches no questions. `{query}` is
|
|
1507
|
+
* replaced with the current search text. Default: `No results found for "{query}"`
|
|
1508
|
+
*/
|
|
1509
|
+
searchNoResultsText?: string;
|
|
1510
|
+
/** Title of the mobile "browse questions" bottom sheet (default: "Articles in this section") */
|
|
1511
|
+
articlesSheetTitle?: string;
|
|
1512
|
+
/** Additional CSS class on the outer section */
|
|
1513
|
+
className?: string;
|
|
1514
|
+
}
|
|
1515
|
+
|
|
1516
|
+
declare const HelpCenterPage: ({ categoryTitle, questions, activeQuestionId, defaultActiveQuestionId, onQuestionSelect, contentTitle, content, searchPlaceholder, searchAriaLabel, onSearchChange, searchNoResultsText, articlesSheetTitle, className, }: HelpCenterPageProps) => react_jsx_runtime.JSX.Element;
|
|
1517
|
+
|
|
1518
|
+
export { AVATAR_DATA, Accordion, type AccordionProps, ArticleHero, type ArticleHeroArticle, type ArticleHeroColumn, type ArticleHeroProps, ArticleSection, type ArticleSectionItem, type ArticleSectionProps, type ArticleSectionVariant, AvatarGrid, type AvatarGridProps, type AvatarItem, type AvatarPosition, type AwardItem, BottomSheet, type BottomSheetAction, type BottomSheetProps, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, type BreadcrumbSize, Button, type ButtonColorScheme, type ButtonIconPosition, type ButtonProps, type ButtonVariant, COL_ONE_LOGOS, COL_TWO_LOGOS, CORAL_BANNER_DERIV_SLIDES, CTABanner, type CTABannerProps, Card, type CardPrimaryStyle, type CardProps, type CardTag, type CardThumbnailType, Chip, ChipDropdown, type ChipDropdownOption, type ChipDropdownProps, type ChipProps, type ChipSize, CoralBanner, type CoralBannerButton, type CoralBannerProps, type CoralBannerSlide, DEFAULT_AWARDS, DayNightTransition, type DayNightTransitionProps, DotLottieInView, type DotLottieInViewProps, DownloadBadge, type DownloadBadgeColorScheme, type DownloadBadgePlatform, type DownloadBadgeProps, DownloadBanner, type DownloadBannerProps, type DownloadBannerStyle, FEATURE_AWARDS_TEXT_CONTENT, FEATURE_SCROLL_DATA, FaqAccordion, type FaqAccordionColorScheme, type FaqAccordionProps, type FaqItem, FeatureAwards, type FeatureAwardsProps, FeatureBullets, type FeatureBulletsProps, type FeatureCardIconItem, type FeatureCardItem, FeatureCards, FeatureCardsIcon, type FeatureCardsIconProps, type FeatureCardsProps, FeatureScroll, type FeatureScrollItem, type FeatureScrollProps, FeatureSplit, type FeatureSplitImagePosition, type FeatureSplitProps, Footer, type FooterAiSummaryItem, type FooterAiSummaryProps, type FooterAppBadge, type FooterDerivGoProps, type FooterLinkItem, type FooterNavSection, type FooterProps, type FooterSocialLink, Header, type HeaderButtonProps, type HeaderProps, type HeaderVariant, type HelpCenterContentBlock, type HelpCenterContentBlockType, HelpCenterPage, type HelpCenterPageProps, type HelpCenterQuestionItem, HelpCentreCategories, type HelpCentreCategoriesProps, type HelpCentreCategoryItem, HelpCentreSubCategories, type HelpCentreSubCategoriesProps, type HelpCentreSubCategoryItem, Hero, type HeroButtonProps, type HeroProps, type HeroVariant, ImageBanner, type ImageBannerProps, type LanguageItem, type LeaderItem, Leaders, type LeadersProps, Link, type LinkColorScheme, type LinkProps, type LogoItem, LogoMarquee, type LogoMarqueeProps, type NavDropdownColumn, type NavDropdownFeature, type NavDropdownItem, type NavItem, Navbar, type NavbarProps, Pagination, type PaginationProps, PeopleGrid, type PeopleGridProps, type PersonItem, STEPS_DATA, SearchField, type SearchFieldProps, type SearchFieldStatus, type StatItem, Stats, type StatsAward, type StatsProps, StatsSimple, type StatsSimpleProps, type StepItem, Steps, type StepsImagePosition, type StepsProps, type StickyCardItem, type StickyCardTheme, type StickyMarketCardItem, type StickyMarketCardTheme, StickyMarketCards, type StickyMarketCardsProps, StickyStackedCards, type StickyStackedCardsProps, TEXT_CONTENT, type TabItem, Table, type TableColumnDef, type TableColumnWidth, type TableProps, type TableRowData, Tabs, type TabsProps, Tag, type TagFontWeight, type TagProps, type TagSize, type TagVariant, Testimonial, type TestimonialItem, type TestimonialProps, TextField, type TextFieldProps, type TextFieldStatus, type TextFieldVariant, TextScroll, type TextScrollProps, dayNightTransitionV2Preset };
|
package/dist/index.d.ts
CHANGED
|
@@ -1318,4 +1318,201 @@ interface ArticleSectionProps {
|
|
|
1318
1318
|
|
|
1319
1319
|
declare const ArticleSection: ({ variant, sectionTitle, linkText, onLinkClick, featured, articles, className, }: ArticleSectionProps) => react_jsx_runtime.JSX.Element;
|
|
1320
1320
|
|
|
1321
|
-
|
|
1321
|
+
interface CoralBannerButton {
|
|
1322
|
+
/** Button label */
|
|
1323
|
+
label: string;
|
|
1324
|
+
/** Link href — rendered as an `<a>` wrapping the button when provided */
|
|
1325
|
+
href?: string;
|
|
1326
|
+
/** Click handler (used when no `href` is provided) */
|
|
1327
|
+
onClick?: () => void;
|
|
1328
|
+
}
|
|
1329
|
+
interface CoralBannerSlide {
|
|
1330
|
+
/** Unique key for the slide (falls back to array index) */
|
|
1331
|
+
id?: string | number;
|
|
1332
|
+
/**
|
|
1333
|
+
* Headline. Use `"\n"` to force a manual line break
|
|
1334
|
+
* (matches the reference banner's two-line "Join 3M+ / global traders" layout).
|
|
1335
|
+
*/
|
|
1336
|
+
title: string;
|
|
1337
|
+
/** Supporting paragraph below the title */
|
|
1338
|
+
description?: string;
|
|
1339
|
+
/** Primary CTA — rendered as a solid black pill button */
|
|
1340
|
+
primaryButton?: CoralBannerButton;
|
|
1341
|
+
/** Optional secondary CTA — rendered as a white pill button */
|
|
1342
|
+
secondaryButton?: CoralBannerButton;
|
|
1343
|
+
}
|
|
1344
|
+
interface CoralBannerProps extends HTMLAttributes<HTMLElement> {
|
|
1345
|
+
/**
|
|
1346
|
+
* `static` — renders a single, non-interactive slide (no arrows/dots/autoplay).
|
|
1347
|
+
* `carousel` — renders `slides` in a swipeable, auto-advancing slider
|
|
1348
|
+
* (horizontal slide transition, dot pagination, prev/next arrows),
|
|
1349
|
+
* matching the banner used on deriv.com and deriv.com/markets/forex.
|
|
1350
|
+
*/
|
|
1351
|
+
variant?: "static" | "carousel";
|
|
1352
|
+
/** Slide content. `static` variant renders only `slides[0]`. */
|
|
1353
|
+
slides?: CoralBannerSlide[];
|
|
1354
|
+
/** Auto-advance slides (carousel only) */
|
|
1355
|
+
autoplay?: boolean;
|
|
1356
|
+
/** Milliseconds between auto-advances (carousel only). Reference site uses `2000`. */
|
|
1357
|
+
autoplayDelay?: number;
|
|
1358
|
+
/** Slide transition duration in ms. Reference site uses `330`. */
|
|
1359
|
+
transitionDuration?: number;
|
|
1360
|
+
/** Loop back to the first slide after the last (carousel only) */
|
|
1361
|
+
infinite?: boolean;
|
|
1362
|
+
/** Show the prev/next arrow controls (carousel only, 2+ slides) */
|
|
1363
|
+
showArrows?: boolean;
|
|
1364
|
+
/** Show the dot pagination (carousel only, 2+ slides) */
|
|
1365
|
+
showDots?: boolean;
|
|
1366
|
+
}
|
|
1367
|
+
|
|
1368
|
+
/**
|
|
1369
|
+
* Real deriv.com copy, exported for consumers who want to reproduce the
|
|
1370
|
+
* exact reference banner (deriv.com homepage / deriv.com/markets/forex footer promo).
|
|
1371
|
+
*/
|
|
1372
|
+
declare const CORAL_BANNER_DERIV_SLIDES: CoralBannerSlide[];
|
|
1373
|
+
declare const CoralBanner: ({ variant, slides, autoplay, autoplayDelay, transitionDuration, infinite, showArrows, showDots, className, ...props }: CoralBannerProps) => react_jsx_runtime.JSX.Element;
|
|
1374
|
+
|
|
1375
|
+
interface AwardItem {
|
|
1376
|
+
/** Main award name, e.g. "Best Trade Execution Award (MEA)" */
|
|
1377
|
+
title: string;
|
|
1378
|
+
/** Issuing body and year, e.g. "UF Awards 2025" */
|
|
1379
|
+
subtitle: string;
|
|
1380
|
+
}
|
|
1381
|
+
interface FeatureAwardsProps extends HTMLAttributes<HTMLElement> {
|
|
1382
|
+
/** Section heading. Defaults to "Our awards". */
|
|
1383
|
+
title?: string;
|
|
1384
|
+
/** Ordered list of awards to display. Defaults to `DEFAULT_AWARDS`. */
|
|
1385
|
+
awards?: AwardItem[];
|
|
1386
|
+
/**
|
|
1387
|
+
* Seconds for one full auto-scroll loop on mobile (< 768px) —
|
|
1388
|
+
* lower is faster. Mobile always auto-scrolls; this only tunes
|
|
1389
|
+
* the speed. Defaults to `32`.
|
|
1390
|
+
*/
|
|
1391
|
+
autoScrollDuration?: number;
|
|
1392
|
+
/** Extra class name merged onto the root `<section>`. */
|
|
1393
|
+
className?: string;
|
|
1394
|
+
}
|
|
1395
|
+
|
|
1396
|
+
declare const FEATURE_AWARDS_TEXT_CONTENT: {
|
|
1397
|
+
title: string;
|
|
1398
|
+
};
|
|
1399
|
+
declare const DEFAULT_AWARDS: AwardItem[];
|
|
1400
|
+
declare const FeatureAwards: ({ title, awards, autoScrollDuration, className, ...props }: FeatureAwardsProps) => react_jsx_runtime.JSX.Element | null;
|
|
1401
|
+
|
|
1402
|
+
interface HelpCentreCategoryItem {
|
|
1403
|
+
/** Stable identifier for the category (e.g. used for anchors or filtering) */
|
|
1404
|
+
id?: string;
|
|
1405
|
+
/** Category label shown under the icon */
|
|
1406
|
+
title: string;
|
|
1407
|
+
/** Icon shown above the title — an image URL or a custom ReactNode (e.g. inline SVG) */
|
|
1408
|
+
icon?: string | ReactNode;
|
|
1409
|
+
/** Alt text when `icon` is an image URL (default: "") */
|
|
1410
|
+
iconAlt?: string;
|
|
1411
|
+
/** Destination URL — renders the tile as a link */
|
|
1412
|
+
href?: string;
|
|
1413
|
+
/** Click handler — renders the tile as a button when no `href` is given */
|
|
1414
|
+
onClick?: () => void;
|
|
1415
|
+
}
|
|
1416
|
+
interface HelpCentreCategoriesProps {
|
|
1417
|
+
/** Optional H2 heading above the grid */
|
|
1418
|
+
sectionTitle?: string;
|
|
1419
|
+
/** Optional copy under the heading */
|
|
1420
|
+
sectionDescription?: string;
|
|
1421
|
+
/** Category tiles */
|
|
1422
|
+
categories: HelpCentreCategoryItem[];
|
|
1423
|
+
}
|
|
1424
|
+
|
|
1425
|
+
declare const HelpCentreCategories: ({ sectionTitle, sectionDescription, categories, }: HelpCentreCategoriesProps) => react_jsx_runtime.JSX.Element;
|
|
1426
|
+
|
|
1427
|
+
interface HelpCentreSubCategoryItem {
|
|
1428
|
+
/** Stable identifier for the question (e.g. used as the React key) */
|
|
1429
|
+
id?: string;
|
|
1430
|
+
/** The FAQ question shown on the card */
|
|
1431
|
+
question: string;
|
|
1432
|
+
/** Destination URL — renders the card as a link */
|
|
1433
|
+
href?: string;
|
|
1434
|
+
/** Click handler — renders the card as a button when no `href` is given */
|
|
1435
|
+
onClick?: () => void;
|
|
1436
|
+
}
|
|
1437
|
+
interface HelpCentreSubCategoriesProps {
|
|
1438
|
+
/** Large H1 category title shown above the search field (e.g. "Account") */
|
|
1439
|
+
title: string;
|
|
1440
|
+
/** Placeholder text for the search field (default: "Search") */
|
|
1441
|
+
searchPlaceholder?: string;
|
|
1442
|
+
/** Accessible label for the search field (default: matches `searchPlaceholder`) */
|
|
1443
|
+
searchAriaLabel?: string;
|
|
1444
|
+
/** FAQ question cards for this category (at least 1 item) */
|
|
1445
|
+
items: HelpCentreSubCategoryItem[];
|
|
1446
|
+
/**
|
|
1447
|
+
* Message shown when a search query matches no items. `{query}` is
|
|
1448
|
+
* replaced with the current search text. Default: `No results found for "{query}"`
|
|
1449
|
+
*/
|
|
1450
|
+
noResultsText?: string;
|
|
1451
|
+
/** Called whenever the search input value changes */
|
|
1452
|
+
onSearchChange?: (value: string) => void;
|
|
1453
|
+
}
|
|
1454
|
+
|
|
1455
|
+
declare const HelpCentreSubCategories: ({ title, searchPlaceholder, searchAriaLabel, items, noResultsText, onSearchChange, }: HelpCentreSubCategoriesProps) => react_jsx_runtime.JSX.Element;
|
|
1456
|
+
|
|
1457
|
+
type HelpCenterContentBlockType = "heading" | "paragraph" | "list";
|
|
1458
|
+
interface HelpCenterContentBlock {
|
|
1459
|
+
/** Block kind — "heading" and "paragraph" use `text`, "list" uses `items` */
|
|
1460
|
+
type: HelpCenterContentBlockType;
|
|
1461
|
+
/** Text content for "heading" / "paragraph" blocks */
|
|
1462
|
+
text?: string;
|
|
1463
|
+
/** Heading level for "heading" blocks (default: 2 — the page title itself is always the `<h1>`) */
|
|
1464
|
+
level?: 2 | 3;
|
|
1465
|
+
/** List entries for "list" blocks */
|
|
1466
|
+
items?: string[];
|
|
1467
|
+
/** Render a "list" block as `<ol>` instead of `<ul>` (default: false) */
|
|
1468
|
+
ordered?: boolean;
|
|
1469
|
+
}
|
|
1470
|
+
interface HelpCenterQuestionItem {
|
|
1471
|
+
/** Stable identifier for the question — used as the React key and for active-state matching */
|
|
1472
|
+
id: string;
|
|
1473
|
+
/** The FAQ question shown in the sidebar table / mobile sheet */
|
|
1474
|
+
question: string;
|
|
1475
|
+
/** Destination URL — renders the row as a link (real multi-page navigation) */
|
|
1476
|
+
href?: string;
|
|
1477
|
+
/** Click handler, called in addition to selecting the row */
|
|
1478
|
+
onClick?: () => void;
|
|
1479
|
+
/** Optional per-question title, used to swap the main content column in-place when no `href` is given */
|
|
1480
|
+
contentTitle?: string;
|
|
1481
|
+
/** Optional per-question content blocks, used to swap the main content column in-place when no `href` is given */
|
|
1482
|
+
content?: HelpCenterContentBlock[];
|
|
1483
|
+
}
|
|
1484
|
+
interface HelpCenterPageProps {
|
|
1485
|
+
/** Category name shown above the question table and on the mobile dropdown trigger (e.g. "Account") */
|
|
1486
|
+
categoryTitle: string;
|
|
1487
|
+
/** Every question belonging to this category, rendered as a single-select table/list */
|
|
1488
|
+
questions: HelpCenterQuestionItem[];
|
|
1489
|
+
/** Controlled id of the currently selected/highlighted question */
|
|
1490
|
+
activeQuestionId?: string;
|
|
1491
|
+
/** Initial selected question id for uncontrolled usage (default: first item in `questions`) */
|
|
1492
|
+
defaultActiveQuestionId?: string;
|
|
1493
|
+
/** Called whenever a different question is selected (click on a row without `href`, or via keyboard) */
|
|
1494
|
+
onQuestionSelect?: (id: string) => void;
|
|
1495
|
+
/** Main content column heading (CMS-supplied answer title, rendered as the page's `<h1>`) */
|
|
1496
|
+
contentTitle: string;
|
|
1497
|
+
/** Main content column body (CMS-supplied rich content, rendered from plain data blocks) */
|
|
1498
|
+
content: HelpCenterContentBlock[];
|
|
1499
|
+
/** Placeholder text for the top search field (default: "Search") */
|
|
1500
|
+
searchPlaceholder?: string;
|
|
1501
|
+
/** Accessible label for the search field (defaults to `searchPlaceholder`) */
|
|
1502
|
+
searchAriaLabel?: string;
|
|
1503
|
+
/** Called on every keystroke in the search field with the current value */
|
|
1504
|
+
onSearchChange?: (value: string) => void;
|
|
1505
|
+
/**
|
|
1506
|
+
* Message shown when a search query matches no questions. `{query}` is
|
|
1507
|
+
* replaced with the current search text. Default: `No results found for "{query}"`
|
|
1508
|
+
*/
|
|
1509
|
+
searchNoResultsText?: string;
|
|
1510
|
+
/** Title of the mobile "browse questions" bottom sheet (default: "Articles in this section") */
|
|
1511
|
+
articlesSheetTitle?: string;
|
|
1512
|
+
/** Additional CSS class on the outer section */
|
|
1513
|
+
className?: string;
|
|
1514
|
+
}
|
|
1515
|
+
|
|
1516
|
+
declare const HelpCenterPage: ({ categoryTitle, questions, activeQuestionId, defaultActiveQuestionId, onQuestionSelect, contentTitle, content, searchPlaceholder, searchAriaLabel, onSearchChange, searchNoResultsText, articlesSheetTitle, className, }: HelpCenterPageProps) => react_jsx_runtime.JSX.Element;
|
|
1517
|
+
|
|
1518
|
+
export { AVATAR_DATA, Accordion, type AccordionProps, ArticleHero, type ArticleHeroArticle, type ArticleHeroColumn, type ArticleHeroProps, ArticleSection, type ArticleSectionItem, type ArticleSectionProps, type ArticleSectionVariant, AvatarGrid, type AvatarGridProps, type AvatarItem, type AvatarPosition, type AwardItem, BottomSheet, type BottomSheetAction, type BottomSheetProps, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, type BreadcrumbSize, Button, type ButtonColorScheme, type ButtonIconPosition, type ButtonProps, type ButtonVariant, COL_ONE_LOGOS, COL_TWO_LOGOS, CORAL_BANNER_DERIV_SLIDES, CTABanner, type CTABannerProps, Card, type CardPrimaryStyle, type CardProps, type CardTag, type CardThumbnailType, Chip, ChipDropdown, type ChipDropdownOption, type ChipDropdownProps, type ChipProps, type ChipSize, CoralBanner, type CoralBannerButton, type CoralBannerProps, type CoralBannerSlide, DEFAULT_AWARDS, DayNightTransition, type DayNightTransitionProps, DotLottieInView, type DotLottieInViewProps, DownloadBadge, type DownloadBadgeColorScheme, type DownloadBadgePlatform, type DownloadBadgeProps, DownloadBanner, type DownloadBannerProps, type DownloadBannerStyle, FEATURE_AWARDS_TEXT_CONTENT, FEATURE_SCROLL_DATA, FaqAccordion, type FaqAccordionColorScheme, type FaqAccordionProps, type FaqItem, FeatureAwards, type FeatureAwardsProps, FeatureBullets, type FeatureBulletsProps, type FeatureCardIconItem, type FeatureCardItem, FeatureCards, FeatureCardsIcon, type FeatureCardsIconProps, type FeatureCardsProps, FeatureScroll, type FeatureScrollItem, type FeatureScrollProps, FeatureSplit, type FeatureSplitImagePosition, type FeatureSplitProps, Footer, type FooterAiSummaryItem, type FooterAiSummaryProps, type FooterAppBadge, type FooterDerivGoProps, type FooterLinkItem, type FooterNavSection, type FooterProps, type FooterSocialLink, Header, type HeaderButtonProps, type HeaderProps, type HeaderVariant, type HelpCenterContentBlock, type HelpCenterContentBlockType, HelpCenterPage, type HelpCenterPageProps, type HelpCenterQuestionItem, HelpCentreCategories, type HelpCentreCategoriesProps, type HelpCentreCategoryItem, HelpCentreSubCategories, type HelpCentreSubCategoriesProps, type HelpCentreSubCategoryItem, Hero, type HeroButtonProps, type HeroProps, type HeroVariant, ImageBanner, type ImageBannerProps, type LanguageItem, type LeaderItem, Leaders, type LeadersProps, Link, type LinkColorScheme, type LinkProps, type LogoItem, LogoMarquee, type LogoMarqueeProps, type NavDropdownColumn, type NavDropdownFeature, type NavDropdownItem, type NavItem, Navbar, type NavbarProps, Pagination, type PaginationProps, PeopleGrid, type PeopleGridProps, type PersonItem, STEPS_DATA, SearchField, type SearchFieldProps, type SearchFieldStatus, type StatItem, Stats, type StatsAward, type StatsProps, StatsSimple, type StatsSimpleProps, type StepItem, Steps, type StepsImagePosition, type StepsProps, type StickyCardItem, type StickyCardTheme, type StickyMarketCardItem, type StickyMarketCardTheme, StickyMarketCards, type StickyMarketCardsProps, StickyStackedCards, type StickyStackedCardsProps, TEXT_CONTENT, type TabItem, Table, type TableColumnDef, type TableColumnWidth, type TableProps, type TableRowData, Tabs, type TabsProps, Tag, type TagFontWeight, type TagProps, type TagSize, type TagVariant, Testimonial, type TestimonialItem, type TestimonialProps, TextField, type TextFieldProps, type TextFieldStatus, type TextFieldVariant, TextScroll, type TextScrollProps, dayNightTransitionV2Preset };
|