@deriv-web-design/ui 0.1.15 → 0.1.18
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 +110 -0
- package/components.manifest.json +53 -3
- package/dist/index.css +111 -0
- package/dist/index.css.map +1 -1
- package/dist/index.d.mts +98 -5
- package/dist/index.d.ts +98 -5
- package/dist/index.js +206 -28
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +234 -62
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
package/dist/index.d.mts
CHANGED
|
@@ -31,15 +31,17 @@ interface LinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
|
|
|
31
31
|
colorScheme?: LinkColorScheme;
|
|
32
32
|
/** Link label text */
|
|
33
33
|
label?: string;
|
|
34
|
-
/** Optional
|
|
34
|
+
/** Optional icon. When provided, the chevron is hidden and the label underlines on hover/active. */
|
|
35
35
|
icon?: ReactNode;
|
|
36
|
+
/** Which side the `icon` sits on. Only takes effect when `icon` is provided. */
|
|
37
|
+
iconPosition?: "left" | "right";
|
|
36
38
|
/** Show trailing chevron arrow. Active only when no icon is provided. */
|
|
37
39
|
showChevron?: boolean;
|
|
38
40
|
/** Disabled state — prevents interaction and reduces opacity */
|
|
39
41
|
disabled?: boolean;
|
|
40
42
|
}
|
|
41
43
|
|
|
42
|
-
declare const Link: ({ colorScheme, label, icon, showChevron, disabled, children, className, onClick, ...props }: LinkProps) => react_jsx_runtime.JSX.Element;
|
|
44
|
+
declare const Link: ({ colorScheme, label, icon, iconPosition, showChevron, disabled, children, className, onClick, ...props }: LinkProps) => react_jsx_runtime.JSX.Element;
|
|
43
45
|
|
|
44
46
|
type ChipSize = "sm" | "md" | "lg";
|
|
45
47
|
interface ChipProps extends ButtonHTMLAttributes<HTMLButtonElement> {
|
|
@@ -748,6 +750,16 @@ interface FeatureScrollItem {
|
|
|
748
750
|
mediaType?: "lottie" | "image";
|
|
749
751
|
/** URL to the .lottie file or any image asset (png, jpg, svg, webp…) */
|
|
750
752
|
mediaUrl: string;
|
|
753
|
+
/**
|
|
754
|
+
* Still frame painted while an animation's player and engine are loading.
|
|
755
|
+
*
|
|
756
|
+
* Only used when the item resolves to `"lottie"`. The WebAssembly engine is
|
|
757
|
+
* ~630 KB compressed and one engine serves every animation on the page, so
|
|
758
|
+
* on a cold visit over a slow connection the first animated band can sit
|
|
759
|
+
* empty for seconds. A poster turns that into a progressive load instead of
|
|
760
|
+
* a hole in the layout. Ignored once the animation is playing.
|
|
761
|
+
*/
|
|
762
|
+
posterUrl?: string;
|
|
751
763
|
}
|
|
752
764
|
interface FeatureScrollProps extends HTMLAttributes<HTMLElement> {
|
|
753
765
|
/** Section heading rendered as an H2 */
|
|
@@ -762,10 +774,27 @@ interface FeatureScrollProps extends HTMLAttributes<HTMLElement> {
|
|
|
762
774
|
* @default "media-right"
|
|
763
775
|
*/
|
|
764
776
|
variant?: "media-left" | "media-right";
|
|
777
|
+
/**
|
|
778
|
+
* `rootMargin` for the observer that decides when an animation's player may
|
|
779
|
+
* load and play. Forwarded to `DotLottieInView`.
|
|
780
|
+
*
|
|
781
|
+
* The default starts the work only once a band is actually on screen, which
|
|
782
|
+
* is the safe choice: the engine is large, and fetching it earlier competes
|
|
783
|
+
* with whatever the visitor is currently looking at — including the LCP
|
|
784
|
+
* image. Widen it (e.g. `"600px 0px"`) on pages where the animated band sits
|
|
785
|
+
* well below the fold and you would rather it were ready on arrival.
|
|
786
|
+
* @default "0px"
|
|
787
|
+
*/
|
|
788
|
+
mediaRootMargin?: string;
|
|
789
|
+
/**
|
|
790
|
+
* `threshold` for that same observer. Forwarded to `DotLottieInView`.
|
|
791
|
+
* @default 0.2
|
|
792
|
+
*/
|
|
793
|
+
mediaThreshold?: number | number[];
|
|
765
794
|
}
|
|
766
795
|
|
|
767
796
|
declare const FEATURE_SCROLL_DATA: FeatureScrollItem[];
|
|
768
|
-
declare const FeatureScroll: ({ header, items, variant, className, ...props }: FeatureScrollProps) => react_jsx_runtime.JSX.Element;
|
|
797
|
+
declare const FeatureScroll: ({ header, items, variant, className, mediaRootMargin, mediaThreshold, ...props }: FeatureScrollProps) => react_jsx_runtime.JSX.Element;
|
|
769
798
|
|
|
770
799
|
type FeatureSplitImagePosition = "left" | "right";
|
|
771
800
|
interface FeatureSplitProps {
|
|
@@ -797,13 +826,29 @@ type DotLottieInViewProps = Omit<ComponentProps<typeof DotLottieReact>, "autopla
|
|
|
797
826
|
enabled?: boolean;
|
|
798
827
|
rootMargin?: string;
|
|
799
828
|
threshold?: number | number[];
|
|
829
|
+
/**
|
|
830
|
+
* Painted in place of the player until the animation is ready, and as the
|
|
831
|
+
* Suspense fallback while the player chunk loads.
|
|
832
|
+
*
|
|
833
|
+
* Worth supplying on anything a visitor meets early on a slow connection:
|
|
834
|
+
* the WebAssembly engine is ~630 KB compressed and one engine serves every
|
|
835
|
+
* animation on the page, so the first animated band on a cold visit can sit
|
|
836
|
+
* empty for seconds. A still frame makes that a progressive load rather than
|
|
837
|
+
* a hole in the layout. A `ReactNode` rather than a URL so the consumer can
|
|
838
|
+
* pass a properly sized, responsive `<img>` rather than a bare `src`.
|
|
839
|
+
*/
|
|
840
|
+
poster?: ReactNode;
|
|
800
841
|
};
|
|
801
842
|
/**
|
|
802
843
|
* Plays a .lottie once when it scrolls into view. Stops and resets when it leaves view.
|
|
803
844
|
* When it enters view again, it plays once more. Set `enabled={false}` to force stop
|
|
804
845
|
* (e.g. hidden slides) without relying on geometry alone.
|
|
846
|
+
*
|
|
847
|
+
* The player itself is fetched lazily, the first time this instance is both
|
|
848
|
+
* enabled and in view — so a page with no animation never downloads it, and a
|
|
849
|
+
* below-the-fold band does not pay for it during initial load.
|
|
805
850
|
*/
|
|
806
|
-
declare function DotLottieInView({ enabled, rootMargin, threshold, className, style, ...dotProps }: DotLottieInViewProps): react_jsx_runtime.JSX.Element;
|
|
851
|
+
declare function DotLottieInView({ enabled, rootMargin, threshold, className, style, poster, ...dotProps }: DotLottieInViewProps): react_jsx_runtime.JSX.Element;
|
|
807
852
|
|
|
808
853
|
/** Visual colour theme for each card — matches the Figma palette. */
|
|
809
854
|
type StickyCardTheme = "light" | "coral" | "dark";
|
|
@@ -2287,4 +2332,52 @@ interface MasterPartnerProps {
|
|
|
2287
2332
|
*/
|
|
2288
2333
|
declare const MasterPartner: ({ title, description, note, closingText, ctaLabel, ctaHref, onCtaClick, image, imageAlt, steps, }: MasterPartnerProps) => react_jsx_runtime.JSX.Element;
|
|
2289
2334
|
|
|
2290
|
-
|
|
2335
|
+
type ResourceBannerHeadingLevel = "h2" | "h3" | "h4";
|
|
2336
|
+
interface ResourceBannerLink {
|
|
2337
|
+
/** Unique key for the link (falls back to array index) */
|
|
2338
|
+
id?: string | number;
|
|
2339
|
+
/** Link label text */
|
|
2340
|
+
label: string;
|
|
2341
|
+
/** Destination URL */
|
|
2342
|
+
href: string;
|
|
2343
|
+
/**
|
|
2344
|
+
* Opens in a new tab and shows the external-link icon.
|
|
2345
|
+
* The reference section (deriv.com/fraud-prevention) sets this on every link.
|
|
2346
|
+
* @default true
|
|
2347
|
+
*/
|
|
2348
|
+
external?: boolean;
|
|
2349
|
+
}
|
|
2350
|
+
interface ResourceBannerProps extends HTMLAttributes<HTMLElement> {
|
|
2351
|
+
/** Heading text */
|
|
2352
|
+
title?: string;
|
|
2353
|
+
/** Supporting paragraph below the heading */
|
|
2354
|
+
description?: string;
|
|
2355
|
+
/**
|
|
2356
|
+
* Resource links, rendered as a vertical stack on every breakpoint.
|
|
2357
|
+
* Any number is supported — there is no fixed maximum.
|
|
2358
|
+
*/
|
|
2359
|
+
links?: ResourceBannerLink[];
|
|
2360
|
+
/**
|
|
2361
|
+
* Heading tag to render. Use a lower level when the surrounding page
|
|
2362
|
+
* already owns the heading hierarchy.
|
|
2363
|
+
* @default "h2"
|
|
2364
|
+
*/
|
|
2365
|
+
headingLevel?: ResourceBannerHeadingLevel;
|
|
2366
|
+
}
|
|
2367
|
+
|
|
2368
|
+
/**
|
|
2369
|
+
* Real deriv.com copy, exported for consumers who want to reproduce the
|
|
2370
|
+
* exact reference section (deriv.com/fraud-prevention → `.section_fraud_resources`).
|
|
2371
|
+
*
|
|
2372
|
+
* Opt-in only — the component's defaults and the Storybook stories both use
|
|
2373
|
+
* generic placeholder copy (design-system Rule 6). Import this when you want
|
|
2374
|
+
* the reference content specifically; don't treat it as the template's content.
|
|
2375
|
+
*/
|
|
2376
|
+
declare const RESOURCE_BANNER_DERIV_CONTENT: {
|
|
2377
|
+
title: string;
|
|
2378
|
+
description: string;
|
|
2379
|
+
links: ResourceBannerLink[];
|
|
2380
|
+
};
|
|
2381
|
+
declare const ResourceBanner: ({ title, description, links, headingLevel: HeadingTag, className, ...props }: ResourceBannerProps) => react_jsx_runtime.JSX.Element;
|
|
2382
|
+
|
|
2383
|
+
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, type CalculationToken, 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, DEFAULT_CULTURE_CARDS, DEFAULT_EXCHANGE_RATE_WS_URL, DEFAULT_SYMBOLS_ENDPOINT, DayNightTransition, type DayNightTransitionProps, DotLottieInView, type DotLottieInViewProps, DownloadBadge, type DownloadBadgeColorScheme, type DownloadBadgePlatform, type DownloadBadgeProps, DownloadBanner, type DownloadBannerProps, type DownloadBannerStyle, DynamicTable, type DynamicTableColumnDef, type DynamicTableProps, type DynamicTableRowData, type DynamicTableVariant, FEATURE_AWARDS_TEXT_CONTENT, FEATURE_BLOG_CATEGORIES_TEXT_CONTENT, FEATURE_BLOG_TEXT_CONTENT, FEATURE_OFFICES_TEXT_CONTENT, FEATURE_SCROLL_DATA, FaqAccordion, type FaqAccordionColorScheme, type FaqAccordionProps, type FaqItem, FeatureAwards, type FeatureAwardsProps, FeatureBlog, type FeatureBlogAuthor, FeatureBlogCategories, type FeatureBlogCategoriesProps, type FeatureBlogCategoryPost, type FeatureBlogCategoryTab, type FeatureBlogContentBlock, type FeatureBlogContentBlockType, FeatureBlogPage, type FeatureBlogPageProps, type FeatureBlogPost, type FeatureBlogProps, type FeatureBlogSharePlatform, FeatureBullets, type FeatureBulletsProps, type FeatureCardIconItem, type FeatureCardItem, FeatureCards, FeatureCardsIcon, type FeatureCardsIconProps, type FeatureCardsProps, type FeatureOffice, type FeatureOfficeRegion, FeatureOffices, type FeatureOfficesProps, 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, type FormulaBlock, 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, IMAGE_BANNER_CHIPS_DEFAULT_IMAGE, ImageBanner, type ImageBannerProps, type ImageBannerVariant, type LanguageItem, type LeaderItem, Leaders, type LeadersProps, Link, type LinkColorScheme, type LinkProps, type LogoItem, LogoMarquee, type LogoMarqueeProps, MasterPartner, type MasterPartnerNote, type MasterPartnerProps, type MasterPartnerStep, type NavDropdownColumn, type NavDropdownFeature, type NavDropdownItem, type NavItem, Navbar, type NavbarProps, PARALLAX_BANNER_TEXT_CONTENT, Pagination, type PaginationProps, ParallaxBanner, type ParallaxBannerCultureCard, type ParallaxBannerProps, type PartnerPayoutItem, PartnersPayout, type PartnersPayoutProps, PeopleGrid, type PeopleGridProps, type PersonItem, RESOURCE_BANNER_DERIV_CONTENT, ResourceBanner, type ResourceBannerHeadingLevel, type ResourceBannerLink, type ResourceBannerProps, 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, type SwapCalculationMode, 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, type TierAccent, type TierItem, Tiers, type TiersProps, TradingCalculator, TradingCalculatorHowTo, type TradingCalculatorHowToProps, type TradingCalculatorHowToVariant, type TradingCalculatorProps, type TradingCalculatorResults, type TradingCalculatorVariant, type TradingSymbolSpec, dayNightTransitionV2Preset };
|
package/dist/index.d.ts
CHANGED
|
@@ -31,15 +31,17 @@ interface LinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
|
|
|
31
31
|
colorScheme?: LinkColorScheme;
|
|
32
32
|
/** Link label text */
|
|
33
33
|
label?: string;
|
|
34
|
-
/** Optional
|
|
34
|
+
/** Optional icon. When provided, the chevron is hidden and the label underlines on hover/active. */
|
|
35
35
|
icon?: ReactNode;
|
|
36
|
+
/** Which side the `icon` sits on. Only takes effect when `icon` is provided. */
|
|
37
|
+
iconPosition?: "left" | "right";
|
|
36
38
|
/** Show trailing chevron arrow. Active only when no icon is provided. */
|
|
37
39
|
showChevron?: boolean;
|
|
38
40
|
/** Disabled state — prevents interaction and reduces opacity */
|
|
39
41
|
disabled?: boolean;
|
|
40
42
|
}
|
|
41
43
|
|
|
42
|
-
declare const Link: ({ colorScheme, label, icon, showChevron, disabled, children, className, onClick, ...props }: LinkProps) => react_jsx_runtime.JSX.Element;
|
|
44
|
+
declare const Link: ({ colorScheme, label, icon, iconPosition, showChevron, disabled, children, className, onClick, ...props }: LinkProps) => react_jsx_runtime.JSX.Element;
|
|
43
45
|
|
|
44
46
|
type ChipSize = "sm" | "md" | "lg";
|
|
45
47
|
interface ChipProps extends ButtonHTMLAttributes<HTMLButtonElement> {
|
|
@@ -748,6 +750,16 @@ interface FeatureScrollItem {
|
|
|
748
750
|
mediaType?: "lottie" | "image";
|
|
749
751
|
/** URL to the .lottie file or any image asset (png, jpg, svg, webp…) */
|
|
750
752
|
mediaUrl: string;
|
|
753
|
+
/**
|
|
754
|
+
* Still frame painted while an animation's player and engine are loading.
|
|
755
|
+
*
|
|
756
|
+
* Only used when the item resolves to `"lottie"`. The WebAssembly engine is
|
|
757
|
+
* ~630 KB compressed and one engine serves every animation on the page, so
|
|
758
|
+
* on a cold visit over a slow connection the first animated band can sit
|
|
759
|
+
* empty for seconds. A poster turns that into a progressive load instead of
|
|
760
|
+
* a hole in the layout. Ignored once the animation is playing.
|
|
761
|
+
*/
|
|
762
|
+
posterUrl?: string;
|
|
751
763
|
}
|
|
752
764
|
interface FeatureScrollProps extends HTMLAttributes<HTMLElement> {
|
|
753
765
|
/** Section heading rendered as an H2 */
|
|
@@ -762,10 +774,27 @@ interface FeatureScrollProps extends HTMLAttributes<HTMLElement> {
|
|
|
762
774
|
* @default "media-right"
|
|
763
775
|
*/
|
|
764
776
|
variant?: "media-left" | "media-right";
|
|
777
|
+
/**
|
|
778
|
+
* `rootMargin` for the observer that decides when an animation's player may
|
|
779
|
+
* load and play. Forwarded to `DotLottieInView`.
|
|
780
|
+
*
|
|
781
|
+
* The default starts the work only once a band is actually on screen, which
|
|
782
|
+
* is the safe choice: the engine is large, and fetching it earlier competes
|
|
783
|
+
* with whatever the visitor is currently looking at — including the LCP
|
|
784
|
+
* image. Widen it (e.g. `"600px 0px"`) on pages where the animated band sits
|
|
785
|
+
* well below the fold and you would rather it were ready on arrival.
|
|
786
|
+
* @default "0px"
|
|
787
|
+
*/
|
|
788
|
+
mediaRootMargin?: string;
|
|
789
|
+
/**
|
|
790
|
+
* `threshold` for that same observer. Forwarded to `DotLottieInView`.
|
|
791
|
+
* @default 0.2
|
|
792
|
+
*/
|
|
793
|
+
mediaThreshold?: number | number[];
|
|
765
794
|
}
|
|
766
795
|
|
|
767
796
|
declare const FEATURE_SCROLL_DATA: FeatureScrollItem[];
|
|
768
|
-
declare const FeatureScroll: ({ header, items, variant, className, ...props }: FeatureScrollProps) => react_jsx_runtime.JSX.Element;
|
|
797
|
+
declare const FeatureScroll: ({ header, items, variant, className, mediaRootMargin, mediaThreshold, ...props }: FeatureScrollProps) => react_jsx_runtime.JSX.Element;
|
|
769
798
|
|
|
770
799
|
type FeatureSplitImagePosition = "left" | "right";
|
|
771
800
|
interface FeatureSplitProps {
|
|
@@ -797,13 +826,29 @@ type DotLottieInViewProps = Omit<ComponentProps<typeof DotLottieReact>, "autopla
|
|
|
797
826
|
enabled?: boolean;
|
|
798
827
|
rootMargin?: string;
|
|
799
828
|
threshold?: number | number[];
|
|
829
|
+
/**
|
|
830
|
+
* Painted in place of the player until the animation is ready, and as the
|
|
831
|
+
* Suspense fallback while the player chunk loads.
|
|
832
|
+
*
|
|
833
|
+
* Worth supplying on anything a visitor meets early on a slow connection:
|
|
834
|
+
* the WebAssembly engine is ~630 KB compressed and one engine serves every
|
|
835
|
+
* animation on the page, so the first animated band on a cold visit can sit
|
|
836
|
+
* empty for seconds. A still frame makes that a progressive load rather than
|
|
837
|
+
* a hole in the layout. A `ReactNode` rather than a URL so the consumer can
|
|
838
|
+
* pass a properly sized, responsive `<img>` rather than a bare `src`.
|
|
839
|
+
*/
|
|
840
|
+
poster?: ReactNode;
|
|
800
841
|
};
|
|
801
842
|
/**
|
|
802
843
|
* Plays a .lottie once when it scrolls into view. Stops and resets when it leaves view.
|
|
803
844
|
* When it enters view again, it plays once more. Set `enabled={false}` to force stop
|
|
804
845
|
* (e.g. hidden slides) without relying on geometry alone.
|
|
846
|
+
*
|
|
847
|
+
* The player itself is fetched lazily, the first time this instance is both
|
|
848
|
+
* enabled and in view — so a page with no animation never downloads it, and a
|
|
849
|
+
* below-the-fold band does not pay for it during initial load.
|
|
805
850
|
*/
|
|
806
|
-
declare function DotLottieInView({ enabled, rootMargin, threshold, className, style, ...dotProps }: DotLottieInViewProps): react_jsx_runtime.JSX.Element;
|
|
851
|
+
declare function DotLottieInView({ enabled, rootMargin, threshold, className, style, poster, ...dotProps }: DotLottieInViewProps): react_jsx_runtime.JSX.Element;
|
|
807
852
|
|
|
808
853
|
/** Visual colour theme for each card — matches the Figma palette. */
|
|
809
854
|
type StickyCardTheme = "light" | "coral" | "dark";
|
|
@@ -2287,4 +2332,52 @@ interface MasterPartnerProps {
|
|
|
2287
2332
|
*/
|
|
2288
2333
|
declare const MasterPartner: ({ title, description, note, closingText, ctaLabel, ctaHref, onCtaClick, image, imageAlt, steps, }: MasterPartnerProps) => react_jsx_runtime.JSX.Element;
|
|
2289
2334
|
|
|
2290
|
-
|
|
2335
|
+
type ResourceBannerHeadingLevel = "h2" | "h3" | "h4";
|
|
2336
|
+
interface ResourceBannerLink {
|
|
2337
|
+
/** Unique key for the link (falls back to array index) */
|
|
2338
|
+
id?: string | number;
|
|
2339
|
+
/** Link label text */
|
|
2340
|
+
label: string;
|
|
2341
|
+
/** Destination URL */
|
|
2342
|
+
href: string;
|
|
2343
|
+
/**
|
|
2344
|
+
* Opens in a new tab and shows the external-link icon.
|
|
2345
|
+
* The reference section (deriv.com/fraud-prevention) sets this on every link.
|
|
2346
|
+
* @default true
|
|
2347
|
+
*/
|
|
2348
|
+
external?: boolean;
|
|
2349
|
+
}
|
|
2350
|
+
interface ResourceBannerProps extends HTMLAttributes<HTMLElement> {
|
|
2351
|
+
/** Heading text */
|
|
2352
|
+
title?: string;
|
|
2353
|
+
/** Supporting paragraph below the heading */
|
|
2354
|
+
description?: string;
|
|
2355
|
+
/**
|
|
2356
|
+
* Resource links, rendered as a vertical stack on every breakpoint.
|
|
2357
|
+
* Any number is supported — there is no fixed maximum.
|
|
2358
|
+
*/
|
|
2359
|
+
links?: ResourceBannerLink[];
|
|
2360
|
+
/**
|
|
2361
|
+
* Heading tag to render. Use a lower level when the surrounding page
|
|
2362
|
+
* already owns the heading hierarchy.
|
|
2363
|
+
* @default "h2"
|
|
2364
|
+
*/
|
|
2365
|
+
headingLevel?: ResourceBannerHeadingLevel;
|
|
2366
|
+
}
|
|
2367
|
+
|
|
2368
|
+
/**
|
|
2369
|
+
* Real deriv.com copy, exported for consumers who want to reproduce the
|
|
2370
|
+
* exact reference section (deriv.com/fraud-prevention → `.section_fraud_resources`).
|
|
2371
|
+
*
|
|
2372
|
+
* Opt-in only — the component's defaults and the Storybook stories both use
|
|
2373
|
+
* generic placeholder copy (design-system Rule 6). Import this when you want
|
|
2374
|
+
* the reference content specifically; don't treat it as the template's content.
|
|
2375
|
+
*/
|
|
2376
|
+
declare const RESOURCE_BANNER_DERIV_CONTENT: {
|
|
2377
|
+
title: string;
|
|
2378
|
+
description: string;
|
|
2379
|
+
links: ResourceBannerLink[];
|
|
2380
|
+
};
|
|
2381
|
+
declare const ResourceBanner: ({ title, description, links, headingLevel: HeadingTag, className, ...props }: ResourceBannerProps) => react_jsx_runtime.JSX.Element;
|
|
2382
|
+
|
|
2383
|
+
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, type CalculationToken, 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, DEFAULT_CULTURE_CARDS, DEFAULT_EXCHANGE_RATE_WS_URL, DEFAULT_SYMBOLS_ENDPOINT, DayNightTransition, type DayNightTransitionProps, DotLottieInView, type DotLottieInViewProps, DownloadBadge, type DownloadBadgeColorScheme, type DownloadBadgePlatform, type DownloadBadgeProps, DownloadBanner, type DownloadBannerProps, type DownloadBannerStyle, DynamicTable, type DynamicTableColumnDef, type DynamicTableProps, type DynamicTableRowData, type DynamicTableVariant, FEATURE_AWARDS_TEXT_CONTENT, FEATURE_BLOG_CATEGORIES_TEXT_CONTENT, FEATURE_BLOG_TEXT_CONTENT, FEATURE_OFFICES_TEXT_CONTENT, FEATURE_SCROLL_DATA, FaqAccordion, type FaqAccordionColorScheme, type FaqAccordionProps, type FaqItem, FeatureAwards, type FeatureAwardsProps, FeatureBlog, type FeatureBlogAuthor, FeatureBlogCategories, type FeatureBlogCategoriesProps, type FeatureBlogCategoryPost, type FeatureBlogCategoryTab, type FeatureBlogContentBlock, type FeatureBlogContentBlockType, FeatureBlogPage, type FeatureBlogPageProps, type FeatureBlogPost, type FeatureBlogProps, type FeatureBlogSharePlatform, FeatureBullets, type FeatureBulletsProps, type FeatureCardIconItem, type FeatureCardItem, FeatureCards, FeatureCardsIcon, type FeatureCardsIconProps, type FeatureCardsProps, type FeatureOffice, type FeatureOfficeRegion, FeatureOffices, type FeatureOfficesProps, 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, type FormulaBlock, 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, IMAGE_BANNER_CHIPS_DEFAULT_IMAGE, ImageBanner, type ImageBannerProps, type ImageBannerVariant, type LanguageItem, type LeaderItem, Leaders, type LeadersProps, Link, type LinkColorScheme, type LinkProps, type LogoItem, LogoMarquee, type LogoMarqueeProps, MasterPartner, type MasterPartnerNote, type MasterPartnerProps, type MasterPartnerStep, type NavDropdownColumn, type NavDropdownFeature, type NavDropdownItem, type NavItem, Navbar, type NavbarProps, PARALLAX_BANNER_TEXT_CONTENT, Pagination, type PaginationProps, ParallaxBanner, type ParallaxBannerCultureCard, type ParallaxBannerProps, type PartnerPayoutItem, PartnersPayout, type PartnersPayoutProps, PeopleGrid, type PeopleGridProps, type PersonItem, RESOURCE_BANNER_DERIV_CONTENT, ResourceBanner, type ResourceBannerHeadingLevel, type ResourceBannerLink, type ResourceBannerProps, 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, type SwapCalculationMode, 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, type TierAccent, type TierItem, Tiers, type TiersProps, TradingCalculator, TradingCalculatorHowTo, type TradingCalculatorHowToProps, type TradingCalculatorHowToVariant, type TradingCalculatorProps, type TradingCalculatorResults, type TradingCalculatorVariant, type TradingSymbolSpec, dayNightTransitionV2Preset };
|