@beydesign/storybook 0.5.0 → 0.5.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.
|
@@ -26,7 +26,8 @@ const StyledSocialButton = styled.button `
|
|
|
26
26
|
? '100%'
|
|
27
27
|
: 'auto'
|
|
28
28
|
: 'var(--spacing-tokens-size-in-px-spacing-spacing-6xl)'};
|
|
29
|
-
|
|
29
|
+
/* Figma specs 9px; spacing-md (8px) is the nearest token */
|
|
30
|
+
padding: 0 var(--spacing-tokens-size-in-px-spacing-spacing-md);
|
|
30
31
|
border: none;
|
|
31
32
|
border-radius: var(--spacing-tokens-size-in-px-radius-radius-md);
|
|
32
33
|
background: var(--color-background-bg-card-highlight);
|
|
@@ -2,10 +2,25 @@ import React from 'react';
|
|
|
2
2
|
interface SocialIconProps {
|
|
3
3
|
size?: number;
|
|
4
4
|
}
|
|
5
|
-
/**
|
|
5
|
+
/**
|
|
6
|
+
* Full-color Google "G" logo.
|
|
7
|
+
*
|
|
8
|
+
* Vector data exported from Figma (node 2707:49504). The four segments are
|
|
9
|
+
* positioned so the glyph spans the full 24×24 box, exactly as in the design.
|
|
10
|
+
*/
|
|
6
11
|
export declare const GoogleIcon: React.FC<SocialIconProps>;
|
|
7
|
-
/**
|
|
12
|
+
/**
|
|
13
|
+
* Full-color Microsoft logo (four squares).
|
|
14
|
+
*
|
|
15
|
+
* Geometry and colors taken from Figma (node 2609:109007): 9×9 squares inset
|
|
16
|
+
* 2px from the 24×24 box with a 2px gutter between them.
|
|
17
|
+
*/
|
|
8
18
|
export declare const MicrosoftIcon: React.FC<SocialIconProps>;
|
|
9
|
-
/**
|
|
19
|
+
/**
|
|
20
|
+
* Monochrome Apple logo — uses currentColor so it follows the button text color (theme-aware).
|
|
21
|
+
*
|
|
22
|
+
* Vector data exported from Figma (node 2609:109006); the glyph spans the full
|
|
23
|
+
* 24px height and is inset 2px from the left edge, matching the design.
|
|
24
|
+
*/
|
|
10
25
|
export declare const AppleIcon: React.FC<SocialIconProps>;
|
|
11
26
|
export {};
|
|
@@ -1,7 +1,22 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
/**
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
2
|
+
/**
|
|
3
|
+
* Full-color Google "G" logo.
|
|
4
|
+
*
|
|
5
|
+
* Vector data exported from Figma (node 2707:49504). The four segments are
|
|
6
|
+
* positioned so the glyph spans the full 24×24 box, exactly as in the design.
|
|
7
|
+
*/
|
|
8
|
+
export const GoogleIcon = ({ size = 24 }) => (_jsxs("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", focusable: "false", children: [_jsx("g", { transform: "translate(12.24 9.8376)", children: _jsx("path", { fill: "#4285F4", d: "M11.526 2.43836C11.526 1.62263 11.4599 0.802499 11.3188 0H0V4.62098H6.48173C6.21276 6.11133 5.34853 7.42973 4.08305 8.2675V11.2658H7.95004C10.2209 9.17582 11.526 6.08929 11.526 2.43836Z" }) }), _jsx("g", { transform: "translate(1.5168 14.2992)", children: _jsx("path", { fill: "#34A853", d: "M10.7235 9.70053C13.96 9.70053 16.6893 8.63788 18.6779 6.8036L14.811 3.80525C13.7351 4.5372 12.3461 4.95168 10.7279 4.95168C7.59728 4.95168 4.94286 2.83961 3.99045 0H0V3.09094C2.03711 7.14312 6.1863 9.70053 10.7235 9.70053Z" }) }), _jsx("g", { transform: "translate(0.24 6.6144)", children: _jsx("path", { fill: "#FBBC04", d: "M5.26254 7.68547C4.75988 6.19511 4.75988 4.5813 5.26254 3.09094V0H1.2765C-0.425501 3.39078 -0.425501 7.38563 1.2765 10.7764L5.26254 7.68547Z" }) }), _jsx("g", { transform: "translate(1.5168 0)", children: _jsx("path", { fill: "#EA4335", d: "M10.7235 4.74966C12.4343 4.7232 14.0878 5.36697 15.3268 6.54867L18.7529 3.12262C16.5835 1.0855 13.7042 -0.034466 10.7235 0.000808666C6.18629 0.000808666 2.03711 2.55822 0 6.61481L3.98604 9.70575C4.93404 6.86173 7.59287 4.74966 10.7235 4.74966Z" }) })] }));
|
|
9
|
+
/**
|
|
10
|
+
* Full-color Microsoft logo (four squares).
|
|
11
|
+
*
|
|
12
|
+
* Geometry and colors taken from Figma (node 2609:109007): 9×9 squares inset
|
|
13
|
+
* 2px from the 24×24 box with a 2px gutter between them.
|
|
14
|
+
*/
|
|
15
|
+
export const MicrosoftIcon = ({ size = 24 }) => (_jsxs("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", focusable: "false", children: [_jsx("rect", { x: "2", y: "2", width: "9", height: "9", fill: "#F25325" }), _jsx("rect", { x: "13", y: "2", width: "9", height: "9", fill: "#80BC06" }), _jsx("rect", { x: "2", y: "13", width: "9", height: "9", fill: "#05A6F0" }), _jsx("rect", { x: "13", y: "13", width: "9", height: "9", fill: "#FEBA08" })] }));
|
|
16
|
+
/**
|
|
17
|
+
* Monochrome Apple logo — uses currentColor so it follows the button text color (theme-aware).
|
|
18
|
+
*
|
|
19
|
+
* Vector data exported from Figma (node 2609:109006); the glyph spans the full
|
|
20
|
+
* 24px height and is inset 2px from the left edge, matching the design.
|
|
21
|
+
*/
|
|
22
|
+
export const AppleIcon = ({ size = 24 }) => (_jsx("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", focusable: "false", children: _jsx("g", { transform: "translate(2 0)", children: _jsx("path", { fill: "currentColor", d: "M19.792 18.7033C19.429 19.5418 18.9994 20.3136 18.5016 21.0232C17.8231 21.9906 17.2676 22.6602 16.8395 23.0321C16.1758 23.6424 15.4647 23.955 14.7032 23.9728C14.1566 23.9728 13.4973 23.8172 12.73 23.5017C11.9601 23.1876 11.2525 23.0321 10.6056 23.0321C9.92709 23.0321 9.19941 23.1876 8.42106 23.5017C7.64153 23.8172 7.01355 23.9817 6.53342 23.9979C5.80322 24.0291 5.07539 23.7076 4.3489 23.0321C3.88521 22.6276 3.30523 21.9343 2.61043 20.9521C1.86498 19.9033 1.25211 18.687 0.771975 17.3004C0.25777 15.8026 0 14.3523 0 12.9482C0 11.3398 0.347544 9.95259 1.04367 8.79011C1.59076 7.85636 2.31859 7.11979 3.22953 6.57906C4.14046 6.03834 5.12473 5.76279 6.18469 5.74516C6.76467 5.74516 7.52524 5.92457 8.4704 6.27715C9.41288 6.63091 10.0181 6.81032 10.2834 6.81032C10.4817 6.81032 11.154 6.60054 12.2937 6.18234C13.3714 5.7945 14.281 5.63391 15.0262 5.69717C17.0454 5.86012 18.5624 6.6561 19.5712 8.09013C17.7654 9.18432 16.8721 10.7169 16.8898 12.6829C16.9061 14.2142 17.4617 15.4886 18.5535 16.5004C19.0483 16.97 19.6009 17.333 20.2156 17.5907C20.0823 17.9774 19.9416 18.3477 19.792 18.7033ZM15.161 0.480137C15.161 1.68041 14.7225 2.8011 13.8484 3.83841C12.7937 5.07155 11.5179 5.78413 10.1343 5.67168C10.1167 5.52769 10.1065 5.37614 10.1065 5.21688C10.1065 4.06462 10.6081 2.83147 11.4989 1.82321C11.9436 1.3127 12.5092 0.888228 13.1951 0.549615C13.8796 0.216055 14.5269 0.031589 15.1358 0C15.1536 0.160458 15.161 0.320926 15.161 0.480137Z" }) }) }));
|
|
@@ -192,10 +192,10 @@ export const PromoBanner = ({ title = 'Real-time AI avatars for every conversati
|
|
|
192
192
|
width: 'fit-content',
|
|
193
193
|
'& button': { width: '100%' },
|
|
194
194
|
},
|
|
195
|
-
}, children: [promoCode && (_jsxs(Box, { position: "relative", display: "flex", children: [_jsx(MainButton, { text: promoCode, size: ButtonSize.
|
|
195
|
+
}, children: [promoCode && (_jsxs(Box, { position: "relative", display: "flex", children: [_jsx(MainButton, { text: promoCode, size: ButtonSize.xxs, hierarchy: ButtonHierarchy.SecondaryColor, showTrailingIcon: true, trailingIcon: copied ? 'Check' : 'Copy', trailingIconSlot: actionsMotion ? (_jsx(DissolveIcon, { icon: copied ? 'Check' : 'Copy', size: 20, color: "currentColor" })) : undefined, onClick: handleCopyPromoCode, style: {
|
|
196
196
|
border: '1px dashed var(--color-border-border-secondary-action)',
|
|
197
197
|
height: '100%',
|
|
198
|
-
}, testId: testId ? `${testId}-promo-code` : undefined }), promoCodeLabel && (_jsx(Box, { position: "absolute", top: "-13px", left: "-8px", borderRadius: "var(--spacing-tokens-size-in-px-radius-radius-xs)",
|
|
198
|
+
}, testId: testId ? `${testId}-promo-code` : undefined }), promoCodeLabel && (_jsx(Box, { position: "absolute", top: "-13px", left: "-8px", display: "flex", alignItems: "center", borderRadius: "var(--spacing-tokens-size-in-px-radius-radius-xs)", paddingX: "var(--spacing-tokens-size-in-px-spacing-spacing-sm)", paddingTop: "calc(var(--spacing-tokens-size-in-px-spacing-spacing-xxs) + 1px)", paddingBottom: "var(--spacing-tokens-size-in-px-spacing-spacing-xxs)", whiteSpace: "nowrap", zIndex: 1, sx: {
|
|
199
199
|
// On copy the pill morphs from the violet "promo code"
|
|
200
200
|
// badge into the DS success badge, easing the colour so the
|
|
201
201
|
// state change feels intentional rather than an instant swap.
|
|
@@ -215,5 +215,5 @@ export const PromoBanner = ({ title = 'Real-time AI avatars for every conversati
|
|
|
215
215
|
// pin the label to the matching on-colour text token.
|
|
216
216
|
color: copied
|
|
217
217
|
? 'var(--color-text-text-success-on-color)'
|
|
218
|
-
: 'var(--color-text-text-dark)', children: copied ? 'COPIED!' : promoCodeLabel }) }))] })), resolvedCtaText && (_jsx(MainButton, { text: resolvedCtaText, size: ButtonSize.
|
|
218
|
+
: 'var(--color-text-text-dark)', children: copied ? 'COPIED!' : promoCodeLabel }) }))] })), resolvedCtaText && (_jsx(MainButton, { text: resolvedCtaText, size: ButtonSize.xxs, 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)] }));
|
|
219
219
|
};
|