@deriv-web-design/ui 0.0.28 → 0.0.29
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/dist/index.css +173 -3
- package/dist/index.css.map +1 -1
- package/dist/index.d.mts +34 -1
- package/dist/index.d.ts +34 -1
- package/dist/index.js +54 -0
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +53 -0
- package/dist/index.mjs.map +1 -1
- package/package.json +7 -7
package/dist/index.d.mts
CHANGED
|
@@ -1296,4 +1296,37 @@ interface ArticleSectionProps {
|
|
|
1296
1296
|
|
|
1297
1297
|
declare const ArticleSection: ({ variant, sectionTitle, linkText, onLinkClick, featured, articles, className, }: ArticleSectionProps) => react_jsx_runtime.JSX.Element;
|
|
1298
1298
|
|
|
1299
|
-
|
|
1299
|
+
type SpotlightHeroTone = "coral" | "emerald" | "blue" | "slate";
|
|
1300
|
+
interface SpotlightHeroProps {
|
|
1301
|
+
/** Small kicker label above the title (e.g. "TODAY'S PICKS") */
|
|
1302
|
+
eyebrow?: string;
|
|
1303
|
+
/** Main headline */
|
|
1304
|
+
title: string;
|
|
1305
|
+
/** Supporting paragraph below the title */
|
|
1306
|
+
summary?: string;
|
|
1307
|
+
/** Meta text shown beside the arrow in the footer (e.g. a date) */
|
|
1308
|
+
meta?: string;
|
|
1309
|
+
/**
|
|
1310
|
+
* Decorative icon tiled as a faded grid watermark on the right.
|
|
1311
|
+
* Pass a single inline SVG / element — it is repeated automatically.
|
|
1312
|
+
*/
|
|
1313
|
+
icon?: ReactNode;
|
|
1314
|
+
/** Tile size of the icon pattern in px (default 132 — larger = bigger icons) */
|
|
1315
|
+
patternSize?: number;
|
|
1316
|
+
/** Opacity of the watermark pattern, 0–1 (default 0.12) */
|
|
1317
|
+
patternOpacity?: number;
|
|
1318
|
+
/** Accent / glow colour theme (default "coral") */
|
|
1319
|
+
tone?: SpotlightHeroTone;
|
|
1320
|
+
/** Render the whole hero as a link */
|
|
1321
|
+
href?: string;
|
|
1322
|
+
/** Click handler for the whole hero */
|
|
1323
|
+
onClick?: () => void;
|
|
1324
|
+
/** Accessible label for the call-to-action arrow (default "Read more") */
|
|
1325
|
+
ctaLabel?: string;
|
|
1326
|
+
/** Additional CSS class */
|
|
1327
|
+
className?: string;
|
|
1328
|
+
}
|
|
1329
|
+
|
|
1330
|
+
declare const SpotlightHero: ({ eyebrow, title, summary, meta, icon, patternSize, patternOpacity, tone, href, onClick, ctaLabel, className, }: SpotlightHeroProps) => react_jsx_runtime.JSX.Element;
|
|
1331
|
+
|
|
1332
|
+
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, 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, CTABanner, type CTABannerProps, Card, type CardPrimaryStyle, type CardProps, type CardTag, type CardThumbnailType, Chip, ChipDropdown, type ChipDropdownOption, type ChipDropdownProps, type ChipProps, type ChipSize, DayNightTransition, type DayNightTransitionProps, DotLottieInView, type DotLottieInViewProps, DownloadBadge, type DownloadBadgeColorScheme, type DownloadBadgePlatform, type DownloadBadgeProps, DownloadBanner, type DownloadBannerProps, type DownloadBannerStyle, FEATURE_SCROLL_DATA, FaqAccordion, type FaqAccordionColorScheme, type FaqAccordionProps, type FaqItem, FeatureBullets, type FeatureBulletsProps, type FeatureCardIconItem, type FeatureCardItem, FeatureCards, FeatureCardsIcon, type FeatureCardsIconProps, type FeatureCardsProps, FeatureScroll, type FeatureScrollItem, type FeatureScrollProps, Footer, type FooterAiSummaryItem, type FooterAiSummaryProps, type FooterAppBadge, type FooterDerivGoProps, type FooterLinkItem, type FooterNavSection, type FooterProps, type FooterSocialLink, Header, type HeaderButtonProps, type HeaderProps, type HeaderVariant, 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, SpotlightHero, type SpotlightHeroProps, type SpotlightHeroTone, 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
|
@@ -1296,4 +1296,37 @@ interface ArticleSectionProps {
|
|
|
1296
1296
|
|
|
1297
1297
|
declare const ArticleSection: ({ variant, sectionTitle, linkText, onLinkClick, featured, articles, className, }: ArticleSectionProps) => react_jsx_runtime.JSX.Element;
|
|
1298
1298
|
|
|
1299
|
-
|
|
1299
|
+
type SpotlightHeroTone = "coral" | "emerald" | "blue" | "slate";
|
|
1300
|
+
interface SpotlightHeroProps {
|
|
1301
|
+
/** Small kicker label above the title (e.g. "TODAY'S PICKS") */
|
|
1302
|
+
eyebrow?: string;
|
|
1303
|
+
/** Main headline */
|
|
1304
|
+
title: string;
|
|
1305
|
+
/** Supporting paragraph below the title */
|
|
1306
|
+
summary?: string;
|
|
1307
|
+
/** Meta text shown beside the arrow in the footer (e.g. a date) */
|
|
1308
|
+
meta?: string;
|
|
1309
|
+
/**
|
|
1310
|
+
* Decorative icon tiled as a faded grid watermark on the right.
|
|
1311
|
+
* Pass a single inline SVG / element — it is repeated automatically.
|
|
1312
|
+
*/
|
|
1313
|
+
icon?: ReactNode;
|
|
1314
|
+
/** Tile size of the icon pattern in px (default 132 — larger = bigger icons) */
|
|
1315
|
+
patternSize?: number;
|
|
1316
|
+
/** Opacity of the watermark pattern, 0–1 (default 0.12) */
|
|
1317
|
+
patternOpacity?: number;
|
|
1318
|
+
/** Accent / glow colour theme (default "coral") */
|
|
1319
|
+
tone?: SpotlightHeroTone;
|
|
1320
|
+
/** Render the whole hero as a link */
|
|
1321
|
+
href?: string;
|
|
1322
|
+
/** Click handler for the whole hero */
|
|
1323
|
+
onClick?: () => void;
|
|
1324
|
+
/** Accessible label for the call-to-action arrow (default "Read more") */
|
|
1325
|
+
ctaLabel?: string;
|
|
1326
|
+
/** Additional CSS class */
|
|
1327
|
+
className?: string;
|
|
1328
|
+
}
|
|
1329
|
+
|
|
1330
|
+
declare const SpotlightHero: ({ eyebrow, title, summary, meta, icon, patternSize, patternOpacity, tone, href, onClick, ctaLabel, className, }: SpotlightHeroProps) => react_jsx_runtime.JSX.Element;
|
|
1331
|
+
|
|
1332
|
+
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, 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, CTABanner, type CTABannerProps, Card, type CardPrimaryStyle, type CardProps, type CardTag, type CardThumbnailType, Chip, ChipDropdown, type ChipDropdownOption, type ChipDropdownProps, type ChipProps, type ChipSize, DayNightTransition, type DayNightTransitionProps, DotLottieInView, type DotLottieInViewProps, DownloadBadge, type DownloadBadgeColorScheme, type DownloadBadgePlatform, type DownloadBadgeProps, DownloadBanner, type DownloadBannerProps, type DownloadBannerStyle, FEATURE_SCROLL_DATA, FaqAccordion, type FaqAccordionColorScheme, type FaqAccordionProps, type FaqItem, FeatureBullets, type FeatureBulletsProps, type FeatureCardIconItem, type FeatureCardItem, FeatureCards, FeatureCardsIcon, type FeatureCardsIconProps, type FeatureCardsProps, FeatureScroll, type FeatureScrollItem, type FeatureScrollProps, Footer, type FooterAiSummaryItem, type FooterAiSummaryProps, type FooterAppBadge, type FooterDerivGoProps, type FooterLinkItem, type FooterNavSection, type FooterProps, type FooterSocialLink, Header, type HeaderButtonProps, type HeaderProps, type HeaderVariant, 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, SpotlightHero, type SpotlightHeroProps, type SpotlightHeroTone, 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.js
CHANGED
|
@@ -56,6 +56,7 @@ __export(index_exports, {
|
|
|
56
56
|
PeopleGrid: () => PeopleGrid,
|
|
57
57
|
STEPS_DATA: () => STEPS_DATA,
|
|
58
58
|
SearchField: () => SearchField,
|
|
59
|
+
SpotlightHero: () => SpotlightHero,
|
|
59
60
|
Stats: () => Stats,
|
|
60
61
|
StatsSimple: () => StatsSimple,
|
|
61
62
|
Steps: () => Steps,
|
|
@@ -5591,6 +5592,58 @@ var ArticleSection = ({
|
|
|
5591
5592
|
] })
|
|
5592
5593
|
] });
|
|
5593
5594
|
};
|
|
5595
|
+
|
|
5596
|
+
// templates/SpotlightHero/SpotlightHero.tsx
|
|
5597
|
+
var import_jsx_runtime45 = require("react/jsx-runtime");
|
|
5598
|
+
var ArrowIcon = () => /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("svg", { width: "1em", height: "1em", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
|
|
5599
|
+
"path",
|
|
5600
|
+
{
|
|
5601
|
+
d: "M4 12h15M13 6l6 6-6 6",
|
|
5602
|
+
stroke: "currentColor",
|
|
5603
|
+
strokeWidth: "2",
|
|
5604
|
+
strokeLinecap: "round",
|
|
5605
|
+
strokeLinejoin: "round"
|
|
5606
|
+
}
|
|
5607
|
+
) });
|
|
5608
|
+
var SpotlightHero = ({
|
|
5609
|
+
eyebrow,
|
|
5610
|
+
title,
|
|
5611
|
+
summary,
|
|
5612
|
+
meta,
|
|
5613
|
+
icon,
|
|
5614
|
+
patternSize = 132,
|
|
5615
|
+
patternOpacity = 0.12,
|
|
5616
|
+
tone = "coral",
|
|
5617
|
+
href,
|
|
5618
|
+
onClick,
|
|
5619
|
+
ctaLabel = "Read more",
|
|
5620
|
+
className
|
|
5621
|
+
}) => {
|
|
5622
|
+
const Root = href ? "a" : "div";
|
|
5623
|
+
const interactive = Boolean(href || onClick);
|
|
5624
|
+
const tileCount = Math.ceil(1600 / patternSize) * Math.ceil(720 / patternSize);
|
|
5625
|
+
const style = {
|
|
5626
|
+
"--sh-tile": `${patternSize}px`,
|
|
5627
|
+
"--sh-pattern-opacity": String(patternOpacity)
|
|
5628
|
+
};
|
|
5629
|
+
const classes = ["sh-root", `sh-${tone}`, interactive ? "sh-interactive" : "", className ?? ""].filter(Boolean).join(" ");
|
|
5630
|
+
return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(Root, { className: classes, href, onClick, style, children: [
|
|
5631
|
+
/* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: "sh-glow", "aria-hidden": "true" }),
|
|
5632
|
+
icon && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: "sh-pattern", "aria-hidden": "true", children: Array.from({ length: tileCount }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: "sh-patternIcon", children: icon }, i)) }),
|
|
5633
|
+
/* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: "sh-content", children: [
|
|
5634
|
+
eyebrow && /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: "sh-eyebrow", children: [
|
|
5635
|
+
/* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: "sh-eyebrowLine", "aria-hidden": "true" }),
|
|
5636
|
+
/* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: "sh-eyebrowText", children: eyebrow })
|
|
5637
|
+
] }),
|
|
5638
|
+
/* @__PURE__ */ (0, import_jsx_runtime45.jsx)("h2", { className: "sh-title", children: title }),
|
|
5639
|
+
summary && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("p", { className: "sh-summary", children: summary }),
|
|
5640
|
+
(meta || interactive) && /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: "sh-footer", children: [
|
|
5641
|
+
/* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: "sh-arrow", "aria-label": interactive ? ctaLabel : void 0, children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(ArrowIcon, {}) }),
|
|
5642
|
+
meta && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: "sh-meta", children: meta })
|
|
5643
|
+
] })
|
|
5644
|
+
] })
|
|
5645
|
+
] });
|
|
5646
|
+
};
|
|
5594
5647
|
// Annotate the CommonJS export names for ESM import in node:
|
|
5595
5648
|
0 && (module.exports = {
|
|
5596
5649
|
AVATAR_DATA,
|
|
@@ -5629,6 +5682,7 @@ var ArticleSection = ({
|
|
|
5629
5682
|
PeopleGrid,
|
|
5630
5683
|
STEPS_DATA,
|
|
5631
5684
|
SearchField,
|
|
5685
|
+
SpotlightHero,
|
|
5632
5686
|
Stats,
|
|
5633
5687
|
StatsSimple,
|
|
5634
5688
|
Steps,
|