@beydesign/storybook 0.3.0 → 0.3.1
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.
|
@@ -35,7 +35,7 @@ export const PromoBanner = ({ title = 'Real-time AI avatars for every conversati
|
|
|
35
35
|
'API-first',
|
|
36
36
|
'Enterprise-ready',
|
|
37
37
|
'GDPR Compliant',
|
|
38
|
-
], promoCode, promoCodeLabel = 'YOUR PROMO CODE', onCopyPromoCode, ctaText, onCtaClick, footerText, mobileTitle, mobileDescription, mobileCtaText, showImages = true, background = DEFAULT_BACKGROUND, style: customStyle, testId, }) => {
|
|
38
|
+
], promoCode, promoCodeLabel = 'YOUR PROMO CODE', onCopyPromoCode, ctaText, onCtaClick, ctaLoading, ctaDisabled, footerText, mobileTitle, mobileDescription, mobileCtaText, showImages = true, background = DEFAULT_BACKGROUND, style: customStyle, testId, }) => {
|
|
39
39
|
// Below 640px the banner renders the Figma mobile variant, swapping to any
|
|
40
40
|
// provided mobile* copy and falling back to the desktop content otherwise.
|
|
41
41
|
const isMobile = useMediaQuery(MOBILE_QUERY);
|
|
@@ -86,5 +86,5 @@ export const PromoBanner = ({ title = 'Real-time AI avatars for every conversati
|
|
|
86
86
|
}, testId: testId ? `${testId}-promo-code` : undefined }), promoCodeLabel && (_jsx(Box, { position: "absolute", top: "-13px", left: "-8px", bgcolor: "var(--color-background-bg-icon-badge)", borderRadius: "var(--spacing-tokens-size-in-px-radius-radius-xs)", padding: "var(--spacing-tokens-size-in-px-spacing-spacing-xxs) var(--spacing-tokens-size-in-px-spacing-spacing-sm)", whiteSpace: "nowrap", zIndex: 1, children: _jsx(Typography, { size: TypographySize.Text2XS, weight: TypographyWeight.SemiBold,
|
|
87
87
|
// Invariant violet label (bg-icon-badge) -> pin to the
|
|
88
88
|
// invariant dark text so it stays legible in both themes.
|
|
89
|
-
color: "var(--color-text-text-dark)", children: promoCodeLabel }) }))] })), resolvedCtaText && (_jsx(MainButton, { text: resolvedCtaText, size: ButtonSize.md, hierarchy: ButtonHierarchy.Primary, onClick: onCtaClick, testId: testId ? `${testId}-cta` : undefined }))] })), !isMobile && footerText && (_jsx(Typography, { size: TypographySize.TextXS, weight: TypographyWeight.Regular, color: "var(--color-text-text-title)", textStyle: { width: '100%' }, children: footerText }))] }), renderAvatarMatrix(RIGHT_COLUMNS)] }));
|
|
89
|
+
color: "var(--color-text-text-dark)", children: promoCodeLabel }) }))] })), resolvedCtaText && (_jsx(MainButton, { text: resolvedCtaText, size: ButtonSize.md, hierarchy: ButtonHierarchy.Primary, onClick: onCtaClick, loading: ctaLoading, disabled: ctaDisabled, testId: testId ? `${testId}-cta` : undefined }))] })), !isMobile && footerText && (_jsx(Typography, { size: TypographySize.TextXS, weight: TypographyWeight.Regular, color: "var(--color-text-text-title)", textStyle: { width: '100%' }, children: footerText }))] }), renderAvatarMatrix(RIGHT_COLUMNS)] }));
|
|
90
90
|
};
|
|
@@ -360,6 +360,10 @@ export interface PromoBannerProps {
|
|
|
360
360
|
ctaText?: string;
|
|
361
361
|
/** Called when the call-to-action button is clicked */
|
|
362
362
|
onCtaClick?: () => void;
|
|
363
|
+
/** Whether the call-to-action button shows a loading spinner */
|
|
364
|
+
ctaLoading?: boolean;
|
|
365
|
+
/** Whether the call-to-action button is disabled */
|
|
366
|
+
ctaDisabled?: boolean;
|
|
363
367
|
/** Footer note shown below the actions (desktop only) */
|
|
364
368
|
footerText?: string;
|
|
365
369
|
/** Title override used on the mobile variant (falls back to `title`) */
|