@beydesign/storybook 0.4.9 → 0.4.11
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/stories/EntityCard/EntityCard.js +17 -9
- package/dist/stories/EntityCard/EntityCard.stories.js +1 -1
- package/dist/stories/EntityCard/types.d.ts +1 -1
- package/dist/stories/Navigation/Drawer/DrawerBody.js +14 -1
- package/dist/stories/Navigation/Drawer/types.d.ts +2 -1
- package/dist/stories/Navigation/MobileNavBar.js +19 -1
- package/dist/stories/Navigation/types.d.ts +2 -1
- package/dist/stories/UI/ButtonCard.js +8 -5
- package/package.json +1 -1
|
@@ -16,7 +16,7 @@ const WIDTH_BY_VIEW = {
|
|
|
16
16
|
/** Default image aspect ratio per view variant. */
|
|
17
17
|
const ASPECT_RATIO_BY_VIEW = {
|
|
18
18
|
avatar: '203 / 264',
|
|
19
|
-
agent: '
|
|
19
|
+
agent: '264 / 268',
|
|
20
20
|
video: '16 / 9',
|
|
21
21
|
};
|
|
22
22
|
/** Hook the root's hover/focus rules use to reveal the action buttons. */
|
|
@@ -29,6 +29,7 @@ const spin = keyframes `
|
|
|
29
29
|
const Spinner = () => (_jsx(Box, { display: 'flex', sx: { animation: `${spin} 1.5s linear infinite` }, children: _jsx(ArrowsClockwise, { size: 24, color: 'var(--color-text-text-white)' }) }));
|
|
30
30
|
export const EntityCard = ({ view = 'avatar', name, image, description = '', showDescription = false, date, aspectRatio, processing = false, processingText = 'Please wait', error = false, errorText = 'Something went wrong', onPreview, previewButtonText, previewIcon = 'Play', showStatusBadge = false, statusBadgeText = '', statusBadgeColor = BadgeColor.Green, menuItems = [], showMenu = false, width, testId, }) => {
|
|
31
31
|
const [hovered, setHovered] = useState(false);
|
|
32
|
+
const [menuOpen, setMenuOpen] = useState(false);
|
|
32
33
|
const [imageError, setImageError] = useState(false);
|
|
33
34
|
const isVideo = view === 'video';
|
|
34
35
|
const cardWidth = width ?? WIDTH_BY_VIEW[view];
|
|
@@ -38,6 +39,7 @@ export const EntityCard = ({ view = 'avatar', name, image, description = '', sho
|
|
|
38
39
|
const isProcessing = processing && !error;
|
|
39
40
|
const canPreview = !!onPreview && !isProcessing && !error;
|
|
40
41
|
const showActions = canPreview || hasMenu;
|
|
42
|
+
const active = hovered || menuOpen;
|
|
41
43
|
const showBadge = showStatusBadge && !!statusBadgeText && !error;
|
|
42
44
|
const showImage = !!image && !imageError && !error;
|
|
43
45
|
const resolvedTestId = testId ?? `${entityKey}-${isVideo ? 'video' : 'entity'}-card`;
|
|
@@ -45,7 +47,7 @@ export const EntityCard = ({ view = 'avatar', name, image, description = '', sho
|
|
|
45
47
|
event.stopPropagation();
|
|
46
48
|
onPreview?.();
|
|
47
49
|
};
|
|
48
|
-
return (_jsxs(Box, { width: cardWidth, display: 'flex', flexDirection: 'column', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', padding: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)', bgcolor:
|
|
50
|
+
return (_jsxs(Box, { width: cardWidth, display: 'flex', flexDirection: 'column', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', padding: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)', bgcolor: active
|
|
49
51
|
? 'var(--color-background-bg-card-highlight-hover)'
|
|
50
52
|
: 'var(--color-background-bg-card-highlight)', border: '1px solid var(--color-border-border-subtle)', boxSizing: 'border-box', overflow: 'hidden', onMouseEnter: () => setHovered(true), onMouseLeave: () => setHovered(false), role: canPreview ? 'button' : undefined, tabIndex: canPreview ? 0 : undefined, "aria-label": canPreview ? (previewButtonText ?? name) : undefined, onClick: canPreview ? onPreview : undefined, onKeyDown: canPreview
|
|
51
53
|
? (event) => {
|
|
@@ -61,7 +63,9 @@ export const EntityCard = ({ view = 'avatar', name, image, description = '', sho
|
|
|
61
63
|
opacity: 1,
|
|
62
64
|
pointerEvents: 'auto',
|
|
63
65
|
},
|
|
64
|
-
}, "data-testid": resolvedTestId, children: [_jsxs(Box, { position: 'relative', width: '100%', borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)', overflow: 'hidden', sx: { aspectRatio: imageAspectRatio }, children: [error ? (_jsx(Box, { width: '100%', height: '100%', bgcolor: 'var(--color-background-bg-badge-accent-red)', display: 'flex', justifyContent: 'center', alignItems: 'center', role: 'img', "aria-label": errorText, title: errorText, children: _jsx(Warning, { size: 50, color: 'var(--color-foreground-fg-error)' }) })) : showImage ? (_jsx("img", { src: image, alt: name, width: '100%', height: '100%', style: { objectFit: 'cover', height: '100%', width: '100%' }, onError: () => setImageError(true) })) : (_jsx(Box, { position: 'relative', width: '100%', height: '100%', overflow: 'hidden', bgcolor:
|
|
66
|
+
}, "data-testid": resolvedTestId, children: [_jsxs(Box, { position: 'relative', width: '100%', borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)', overflow: 'hidden', sx: { aspectRatio: imageAspectRatio }, children: [error ? (_jsx(Box, { width: '100%', height: '100%', bgcolor: 'var(--color-background-bg-badge-accent-red)', display: 'flex', justifyContent: 'center', alignItems: 'center', role: 'img', "aria-label": errorText, title: errorText, children: _jsx(Warning, { size: 50, color: 'var(--color-foreground-fg-error)' }) })) : showImage ? (_jsx("img", { src: image, alt: name, width: '100%', height: '100%', style: { objectFit: 'cover', height: '100%', width: '100%' }, onError: () => setImageError(true) })) : (_jsx(Box, { position: 'relative', width: '100%', height: '100%', overflow: 'hidden', bgcolor: view === 'agent'
|
|
67
|
+
? 'var(--color-background-bg-component-disabled)'
|
|
68
|
+
: 'var(--color-background-bg-button-disabled)', children: _jsx(Box, { position: 'absolute', bottom: 0, left: '50%', sx: {
|
|
65
69
|
transform: 'translateX(-50%)',
|
|
66
70
|
color: 'var(--color-border-border-subtle)',
|
|
67
71
|
aspectRatio: '206 / 224',
|
|
@@ -70,18 +74,22 @@ export const EntityCard = ({ view = 'avatar', name, image, description = '', sho
|
|
|
70
74
|
: { width: '206px', height: '224px' }),
|
|
71
75
|
}, children: _jsx(AvatarSilhouette, {}) }) })), _jsx(Box, { position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)', sx: {
|
|
72
76
|
backgroundImage: 'linear-gradient(180deg, rgba(21, 0, 73, 0) 0%, rgba(72, 29, 180, 0.152) 16.76%, rgba(32, 13, 82, 0.36) 100%)',
|
|
73
|
-
opacity:
|
|
77
|
+
opacity: active && !isProcessing && !error ? 1 : 0,
|
|
74
78
|
transition: 'opacity 0.15s ease-in-out',
|
|
75
79
|
pointerEvents: 'none',
|
|
76
80
|
} }), isProcessing && (_jsxs(Box, { position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', bgcolor: 'var(--color-background-bg-overlay-2)', sx: { zIndex: 1 }, children: [_jsx(Spinner, {}), _jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.SemiBold, color: 'var(--color-text-text-white)', children: processingText })] })), showBadge && (_jsx(Box, { position: 'absolute', top: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', left: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', sx: { zIndex: 2 }, children: _jsx(Badge, { text: statusBadgeText, color: statusBadgeColor, size: BadgeSize.md, showIcon: true, icon: 'Circle', iconWeight: 'fill', iconSize: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)' }) })), showActions && (_jsxs(Box, { className: ACTIONS_CLASS, position: 'absolute', top: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', right: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', display: 'flex', flexDirection: 'row', alignItems: 'center', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', sx: {
|
|
77
81
|
zIndex: 4,
|
|
78
82
|
transition: 'opacity 0.15s ease-in-out',
|
|
79
|
-
|
|
80
|
-
opacity:
|
|
81
|
-
|
|
82
|
-
|
|
83
|
+
...(menuOpen
|
|
84
|
+
? { opacity: 1, pointerEvents: 'auto' }
|
|
85
|
+
: {
|
|
86
|
+
'@media (hover: hover)': {
|
|
87
|
+
opacity: 0,
|
|
88
|
+
pointerEvents: 'none',
|
|
89
|
+
},
|
|
90
|
+
}),
|
|
83
91
|
}, children: [canPreview &&
|
|
84
|
-
(previewButtonText ? (_jsx(MainButton, { text: previewButtonText, showLeadingIcon: true, leadingIcon: previewIcon, iconWeight: 'fill', hierarchy: ButtonHierarchy.SecondaryTransparent, size: ButtonSize.
|
|
92
|
+
(previewButtonText ? (_jsx(MainButton, { text: previewButtonText, showLeadingIcon: true, leadingIcon: previewIcon, iconWeight: 'fill', hierarchy: ButtonHierarchy.SecondaryTransparent, size: ButtonSize.xxs, onClick: handlePreviewButtonClick, testId: `${entityKey}-preview-button` })) : (_jsx(MainButton, { displayIcon: previewIcon, displayIconMode: ButtonDisplayMode.Only, hierarchy: ButtonHierarchy.SecondaryTransparent, size: ButtonSize.xxs, onClick: handlePreviewButtonClick, testId: `${entityKey}-preview-button` }))), hasMenu && (_jsx(Box, { onClick: (event) => event.stopPropagation(), children: _jsx(Menu, { items: menuItems, testKey: entityKey, size: ButtonSize.xxs, onOpenChange: setMenuOpen }) }))] })), isVideo ? (_jsxs(Box, { position: 'absolute', left: 0, right: 0, bottom: 0, display: 'flex', flexDirection: 'row', alignItems: 'flex-end', justifyContent: 'space-between', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', padding: 'var(--spacing-tokens-size-in-px-spacing-spacing-3xl) var(--spacing-tokens-size-in-px-spacing-spacing-lg) var(--spacing-tokens-size-in-px-spacing-spacing-lg)', sx: {
|
|
85
93
|
zIndex: 2,
|
|
86
94
|
pointerEvents: 'none',
|
|
87
95
|
backgroundImage: 'linear-gradient(rgba(45, 38, 55, 0) 0%, rgba(45, 38, 55, 0.16) 34%, rgba(45, 38, 55, 0.64) 100%)',
|
|
@@ -51,7 +51,7 @@ const meta = {
|
|
|
51
51
|
description: 'Aspect ratio of the image — overrides the per-view default',
|
|
52
52
|
table: {
|
|
53
53
|
type: { summary: 'string' },
|
|
54
|
-
defaultValue: { summary: '203 / 264 ·
|
|
54
|
+
defaultValue: { summary: '203 / 264 · 264 / 268 · 16 / 9' },
|
|
55
55
|
},
|
|
56
56
|
},
|
|
57
57
|
processing: {
|
|
@@ -23,7 +23,7 @@ export interface EntityCardProps {
|
|
|
23
23
|
showDescription?: boolean;
|
|
24
24
|
/** Secondary text shown to the right of the name (`video` view, e.g. formatted created date) */
|
|
25
25
|
date?: string;
|
|
26
|
-
/** Aspect ratio of the image — overrides the per-view default (`203 / 264` avatar, `
|
|
26
|
+
/** Aspect ratio of the image — overrides the per-view default (`203 / 264` avatar, `264 / 268` agent, `16 / 9` video) */
|
|
27
27
|
aspectRatio?: string;
|
|
28
28
|
/** Show the processing overlay (spinner + label) over the image */
|
|
29
29
|
processing?: boolean;
|
|
@@ -15,6 +15,19 @@ const LogoHeader = styled.div `
|
|
|
15
15
|
min-height: 38px;
|
|
16
16
|
margin-bottom: 40px;
|
|
17
17
|
`;
|
|
18
|
+
const LogoButton = styled.button `
|
|
19
|
+
display: flex;
|
|
20
|
+
align-items: center;
|
|
21
|
+
padding: 0;
|
|
22
|
+
border: none;
|
|
23
|
+
background: none;
|
|
24
|
+
cursor: pointer;
|
|
25
|
+
&:focus-visible {
|
|
26
|
+
outline: 2px solid var(--color-border-border-component-active);
|
|
27
|
+
outline-offset: 2px;
|
|
28
|
+
border-radius: var(--spacing-tokens-size-in-px-radius-radius-xs, 4px);
|
|
29
|
+
}
|
|
30
|
+
`;
|
|
18
31
|
const Nav = styled.nav `
|
|
19
32
|
display: flex;
|
|
20
33
|
flex-direction: column;
|
|
@@ -69,5 +82,5 @@ export const DrawerBody = ({ navItems, activeKey, size = DrawerSize.Expanded, cr
|
|
|
69
82
|
item.onClick?.();
|
|
70
83
|
}
|
|
71
84
|
};
|
|
72
|
-
return (_jsxs(_Fragment, { children: [_jsx(LogoHeader, { "$collapsed": isCollapsed, children: _jsx(Logo, { variant: isCollapsed ? LogoVariant.Icon : LogoVariant.Horizontal, color: logo?.color ?? 'var(--color-foreground-fg-brand-logo)', gradient: logo?.gradient, svgUrl: logo?.svgUrl }) }), _jsxs(Nav, { children: [_jsx(NavTop, { children: navItems.map((item) => (_jsx(DrawerNavItem, { text: item.text, icon: item.icon, state: resolveState(item, activeKey), size: size, hierarchy: item.hierarchy ?? DrawerNavItemHierarchy.First, showBadge: item.showBadge, badgeText: item.badgeText, showSubNavCaret: Boolean(item.subNav && onSubNavOpen), onClick: () => handleItemClick(item) }, item.key ?? item.text))) }), (credits || creditsLoading || profile || profileLoading) && (_jsxs(Footer, { children: [(credits || creditsLoading) && (_jsx(FooterSlot, { children: creditsLoading ? (_jsx(DrawerCreditsCardSkeleton, { size: size })) : (_jsx(DrawerCreditsCard, { ...credits, size: size })) })), (profile || profileLoading) && (_jsx(FooterSlot, { children: profileLoading ? (_jsx(DrawerProfileSkeleton, { size: size })) : (profile && _jsx(DrawerProfile, { ...profile, size: size })) }))] }))] })] }));
|
|
85
|
+
return (_jsxs(_Fragment, { children: [_jsx(LogoHeader, { "$collapsed": isCollapsed, children: logo?.onClick ? (_jsx(LogoButton, { type: "button", onClick: logo.onClick, "aria-label": "Go to home", children: _jsx(Logo, { variant: isCollapsed ? LogoVariant.Icon : LogoVariant.Horizontal, color: logo?.color ?? 'var(--color-foreground-fg-brand-logo)', gradient: logo?.gradient, svgUrl: logo?.svgUrl }) })) : (_jsx(Logo, { variant: isCollapsed ? LogoVariant.Icon : LogoVariant.Horizontal, color: logo?.color ?? 'var(--color-foreground-fg-brand-logo)', gradient: logo?.gradient, svgUrl: logo?.svgUrl })) }), _jsxs(Nav, { children: [_jsx(NavTop, { children: navItems.map((item) => (_jsx(DrawerNavItem, { text: item.text, icon: item.icon, state: resolveState(item, activeKey), size: size, hierarchy: item.hierarchy ?? DrawerNavItemHierarchy.First, showBadge: item.showBadge, badgeText: item.badgeText, showSubNavCaret: Boolean(item.subNav && onSubNavOpen), onClick: () => handleItemClick(item) }, item.key ?? item.text))) }), (credits || creditsLoading || profile || profileLoading) && (_jsxs(Footer, { children: [(credits || creditsLoading) && (_jsx(FooterSlot, { children: creditsLoading ? (_jsx(DrawerCreditsCardSkeleton, { size: size })) : (_jsx(DrawerCreditsCard, { ...credits, size: size })) })), (profile || profileLoading) && (_jsx(FooterSlot, { children: profileLoading ? (_jsx(DrawerProfileSkeleton, { size: size })) : (profile && _jsx(DrawerProfile, { ...profile, size: size })) }))] }))] })] }));
|
|
73
86
|
};
|
|
@@ -172,11 +172,12 @@ export interface DrawerProps {
|
|
|
172
172
|
profile?: Omit<DrawerProfileProps, 'size' | 'className' | 'style'>;
|
|
173
173
|
/** Render the profile footer as a loading skeleton instead of its content. */
|
|
174
174
|
profileLoading?: boolean;
|
|
175
|
-
/** Logo appearance overrides. */
|
|
175
|
+
/** Logo appearance overrides. `onClick` makes the logo an activatable button. */
|
|
176
176
|
logo?: {
|
|
177
177
|
color?: string;
|
|
178
178
|
gradient?: string;
|
|
179
179
|
svgUrl?: string;
|
|
180
|
+
onClick?: () => void;
|
|
180
181
|
};
|
|
181
182
|
className?: string;
|
|
182
183
|
style?: CSSProperties;
|
|
@@ -25,9 +25,27 @@ const NavIconButton = ({ icon, ariaLabel, onClick, }) => (_jsx(Box, { component:
|
|
|
25
25
|
}) }));
|
|
26
26
|
export const MobileNavBar = ({ onSearchClick, drawerProps, showSearch = true, logoProps, style, className, }) => {
|
|
27
27
|
const [open, setOpen] = useState(false);
|
|
28
|
+
const { onClick: onLogoClick, ...logoStyleProps } = logoProps ?? {};
|
|
28
29
|
const handleMenuClick = () => {
|
|
29
30
|
if (drawerProps)
|
|
30
31
|
setOpen(true);
|
|
31
32
|
};
|
|
32
|
-
return (_jsxs(_Fragment, { children: [_jsxs(Box, { className: className, sx: style, boxSizing: 'border-box', display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', width: '100%', height: '60px', paddingX: 'var(--spacing-tokens-size-in-px-spacing-spacing-xl)', borderBottom: '1px solid var(--color-border-border-component)', bgcolor: 'var(--color-background-bg-page)', children: [_jsx(Box, {
|
|
33
|
+
return (_jsxs(_Fragment, { children: [_jsxs(Box, { className: className, sx: style, boxSizing: 'border-box', display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', width: '100%', height: '60px', paddingX: 'var(--spacing-tokens-size-in-px-spacing-spacing-xl)', borderBottom: '1px solid var(--color-border-border-component)', bgcolor: 'var(--color-background-bg-page)', children: [_jsx(Box, { ...(onLogoClick
|
|
34
|
+
? {
|
|
35
|
+
component: 'button',
|
|
36
|
+
type: 'button',
|
|
37
|
+
onClick: onLogoClick,
|
|
38
|
+
'aria-label': 'Go to home',
|
|
39
|
+
}
|
|
40
|
+
: {}), display: 'flex', alignItems: 'center', sx: {
|
|
41
|
+
padding: 0,
|
|
42
|
+
border: 'none',
|
|
43
|
+
background: 'none',
|
|
44
|
+
cursor: onLogoClick ? 'pointer' : 'default',
|
|
45
|
+
'& svg': { display: 'block', height: '20px', width: 'auto' },
|
|
46
|
+
'&:focus-visible': {
|
|
47
|
+
outline: '2px solid var(--color-border-border-component-active)',
|
|
48
|
+
outlineOffset: '2px',
|
|
49
|
+
},
|
|
50
|
+
}, children: _jsx(Logo, { color: 'var(--color-foreground-fg-brand-logo)', ...logoStyleProps }) }), _jsxs(Box, { display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'flex-end', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', children: [showSearch && (_jsx(NavIconButton, { icon: 'MagnifyingGlass', ariaLabel: 'Search', onClick: onSearchClick })), _jsx(NavIconButton, { icon: 'List', ariaLabel: 'Open menu', onClick: handleMenuClick })] })] }), drawerProps && (_jsx(MobileNav, { open: open, onOpenChange: setOpen, navItems: drawerProps.navItems, activeKey: drawerProps.activeKey, credits: drawerProps.credits, creditsLoading: drawerProps.creditsLoading, profile: drawerProps.profile, profileLoading: drawerProps.profileLoading, logo: drawerProps.logo }))] }));
|
|
33
51
|
};
|
|
@@ -221,11 +221,12 @@ export interface MobileNavBarProps {
|
|
|
221
221
|
drawerProps?: DrawerProps;
|
|
222
222
|
/** Whether to show the search button */
|
|
223
223
|
showSearch?: boolean;
|
|
224
|
-
/** Logo customization props */
|
|
224
|
+
/** Logo customization props. `onClick` makes the logo an activatable button. */
|
|
225
225
|
logoProps?: {
|
|
226
226
|
gradient?: string;
|
|
227
227
|
color?: string;
|
|
228
228
|
svgUrl?: string;
|
|
229
|
+
onClick?: () => void;
|
|
229
230
|
};
|
|
230
231
|
/** The style object to apply to the component */
|
|
231
232
|
style?: SxProps<Theme>;
|
|
@@ -11,10 +11,10 @@ import { getIconComponent } from '../../utils';
|
|
|
11
11
|
export const ButtonCard = ({ title, description, icon = 'UserFocus', iconColor = 'var(--color-foreground-fg-accent-yellow)', iconBackgroundColor = 'var(--color-background-bg-badge-accent-yellow)', onClick, showActionButton = false, actionButtonText = 'Contact Us', onActionClick, disabled = false, width = '294px', style, testId, }) => {
|
|
12
12
|
const cardKey = title?.toLowerCase()?.replace(/\s+/g, '-');
|
|
13
13
|
const isInteractive = !disabled && !!onClick;
|
|
14
|
-
return (_jsxs(Box, { width: width, display: 'flex', alignItems: 'flex-start', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', paddingX: 'var(--spacing-tokens-size-in-px-spacing-spacing-xl)',
|
|
15
|
-
xs: 'var(--spacing-tokens-size-in-px-spacing-spacing-
|
|
16
|
-
sm: 'var(--spacing-tokens-size-in-px-spacing-spacing-
|
|
17
|
-
}, borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', bgcolor: 'var(--color-background-bg-component)', boxSizing: 'border-box', position: 'relative', onClick: isInteractive ? onClick : undefined, style: style, "data-testid": testId ?? `${cardKey}-button-card`, sx: {
|
|
14
|
+
return (_jsxs(Box, { width: width, display: 'flex', alignItems: 'flex-start', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', paddingX: 'var(--spacing-tokens-size-in-px-spacing-spacing-xl)', paddingTop: {
|
|
15
|
+
xs: 'var(--spacing-tokens-size-in-px-spacing-spacing-2xl)',
|
|
16
|
+
sm: 'var(--spacing-tokens-size-in-px-spacing-spacing-3xl)',
|
|
17
|
+
}, paddingBottom: 'var(--spacing-tokens-size-in-px-spacing-spacing-xl)', borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', bgcolor: 'var(--color-background-bg-component)', boxSizing: 'border-box', position: 'relative', onClick: isInteractive ? onClick : undefined, style: style, "data-testid": testId ?? `${cardKey}-button-card`, sx: {
|
|
18
18
|
opacity: disabled ? 0.5 : 1,
|
|
19
19
|
cursor: isInteractive ? 'pointer' : 'default',
|
|
20
20
|
pointerEvents: disabled ? 'none' : 'auto',
|
|
@@ -31,7 +31,10 @@ export const ButtonCard = ({ title, description, icon = 'UserFocus', iconColor =
|
|
|
31
31
|
// each side); Figma sizes the tile at a fixed 34×34. The 24px icon
|
|
32
32
|
// must not shrink to fit the 18px content box — like Figma it stays
|
|
33
33
|
// 24px and overflows the nominal padding, centered in the tile.
|
|
34
|
-
boxSizing: 'border-box', sx: { '& svg': { flexShrink: 0 } }, children: getIconComponent(icon, { size: 24, color: iconColor }) }), _jsxs(Box, { display: 'flex', flex: '1 0 0', minWidth: 0, flexDirection: 'column', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs)', alignItems: 'flex-start', sx: { wordBreak: 'break-word' }, children: [_jsx(Typography, { size: TypographySize.HeadingS, weight: TypographyWeight.Bold, color: 'var(--color-text-text-title)', textStyle: { textAlign: 'left' }, children: title }), description && (_jsx(Typography, { size: TypographySize.TextXS, weight: TypographyWeight.Regular, color: 'var(--color-text-text-paragraph)', textStyle: { textAlign: 'left' }, children: description }))] })] }), showActionButton && (_jsx(Box, { position: 'absolute', top: '
|
|
34
|
+
boxSizing: 'border-box', sx: { '& svg': { flexShrink: 0 } }, children: getIconComponent(icon, { size: 24, color: iconColor }) }), _jsxs(Box, { display: 'flex', flex: '1 0 0', minWidth: 0, flexDirection: 'column', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs)', alignItems: 'flex-start', sx: { wordBreak: 'break-word' }, children: [_jsx(Typography, { size: TypographySize.HeadingS, weight: TypographyWeight.Bold, color: 'var(--color-text-text-title)', textStyle: { textAlign: 'left' }, children: title }), description && (_jsx(Typography, { size: TypographySize.TextXS, weight: TypographyWeight.Regular, color: 'var(--color-text-text-paragraph)', textStyle: { textAlign: 'left' }, children: description }))] })] }), showActionButton && (_jsx(Box, { position: 'absolute', top: '4px', right: '8px', children: _jsx(MainButton, { text: actionButtonText, hierarchy: ButtonHierarchy.TertiaryColor, size: ButtonSize.xxs, style: {
|
|
35
|
+
minHeight: 'unset',
|
|
36
|
+
padding: '0 var(--spacing-tokens-size-in-px-spacing-spacing-xxs)',
|
|
37
|
+
}, onClick: (e) => {
|
|
35
38
|
e.stopPropagation();
|
|
36
39
|
onActionClick?.();
|
|
37
40
|
}, testId: `${cardKey}-action-button` }) }))] }));
|