@beydesign/storybook 0.0.49 → 0.0.50
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/Agent/AgentCard.js +11 -12
- package/package.json +1 -1
|
@@ -43,16 +43,7 @@ export const AgentCard = ({ title, description = '', date = '', showDate = false
|
|
|
43
43
|
// Render loading state or placeholder
|
|
44
44
|
const renderImageContent = () => {
|
|
45
45
|
if (isLoading) {
|
|
46
|
-
return (
|
|
47
|
-
@keyframes spin {
|
|
48
|
-
0% {
|
|
49
|
-
transform: rotate(0deg);
|
|
50
|
-
}
|
|
51
|
-
100% {
|
|
52
|
-
transform: rotate(360deg);
|
|
53
|
-
}
|
|
54
|
-
}
|
|
55
|
-
` })] }));
|
|
46
|
+
return (_jsx(Box, { width: '100%', height: '100%', bgcolor: 'var(--colors-light-background-bg-element)', display: 'flex', justifyContent: 'center', alignItems: 'center', children: _jsxs(Box, { display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', children: [_jsx(ArrowsClockwise, { size: 24, color: 'var(--colors-light-text-text-subtle)', className: "spin-animation" }), _jsx(Typography, { text: "Loading preview...", size: TypographySize.TextS, weight: TypographyWeight.Regular, color: 'var(--colors-light-text-text-subtle)' })] }) }));
|
|
56
47
|
}
|
|
57
48
|
if (imageError || !agentImage) {
|
|
58
49
|
return (_jsx(Box, { width: '100%', height: '100%', bgcolor: 'var(--colors-light-background-bg-element)', borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)', border: '2px solid var(--colors-light-border-border-component)', boxSizing: 'border-box', display: 'flex', justifyContent: 'center', alignItems: 'center', children: _jsx(Typography, { text: "No Preview Available", size: TypographySize.HeadingXS, weight: TypographyWeight.SemiBold }) }));
|
|
@@ -63,7 +54,15 @@ export const AgentCard = ({ title, description = '', date = '', showDate = false
|
|
|
63
54
|
? 'var(--colors-light-background-bg-error-subtle)'
|
|
64
55
|
: isDraft
|
|
65
56
|
? 'var(--colors-light-background-bg-element)'
|
|
66
|
-
: 'var(--colors-light-background-bg-component)', boxShadow: `var(--global-shadows-shadow-xs-offset-x) var(--global-shadows-shadow-xs-offset-y) var(--global-shadows-shadow-xs-blur) var(--global-shadows-shadow-xs-spread) var(--global-shadows-shadow-xs-color)`, children: [
|
|
57
|
+
: 'var(--colors-light-background-bg-component)', boxShadow: `var(--global-shadows-shadow-xs-offset-x) var(--global-shadows-shadow-xs-offset-y) var(--global-shadows-shadow-xs-blur) var(--global-shadows-shadow-xs-spread) var(--global-shadows-shadow-xs-color)`, children: [_jsx("style", { children: `
|
|
58
|
+
@keyframes spin {
|
|
59
|
+
0% { transform: rotate(0deg); }
|
|
60
|
+
100% { transform: rotate(360deg); }
|
|
61
|
+
}
|
|
62
|
+
.spin-animation {
|
|
63
|
+
animation: spin 1.5s linear infinite;
|
|
64
|
+
}
|
|
65
|
+
` }), _jsxs(Box, { display: 'flex', justifyContent: 'center', alignItems: 'center', position: 'relative', sx: { aspectRatio: 1 }, borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)', overflow: 'hidden', onMouseEnter: () => setHovered(true), onMouseLeave: () => setHovered(false), children: [renderImageContent(), showTimeBadge && time && (_jsx(Badge, { text: time, size: BadgeSize.md, fill: true, style: {
|
|
67
66
|
position: 'absolute',
|
|
68
67
|
right: '8px',
|
|
69
68
|
bottom: '8px',
|
|
@@ -78,5 +77,5 @@ export const AgentCard = ({ title, description = '', date = '', showDate = false
|
|
|
78
77
|
position: 'absolute',
|
|
79
78
|
right: '8px',
|
|
80
79
|
top: '8px',
|
|
81
|
-
} })), isReady && hovered && onPreview && active && (_jsx(Box, { position: 'absolute', top: '0', left: '0', width: '100%', height: '100%', bgcolor: 'var(--colors-light-background-bg-component-hover)', sx: { zIndex: 1 }, display: 'flex', justifyContent: 'center', alignItems: 'center', children: _jsx(MainButton, { text: previewButtonText, onClick: onPreview, showTrailingIcon: true, trailingIcon: "Play", hierarchy: ButtonHierarchy.SecondaryTransparent, size: ButtonSize.sm, style: { border: 'none' } }) })), isProcessing && (_jsxs(Box, { position: 'absolute', top: '0', left: '0', width: '100%', height: '100%', bgcolor: 'var(--colors-light-background-bg-component-hover)', style: { zIndex: 1 }, display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', children: [_jsx(ArrowsClockwise, { size: 24, color: 'var(--primitives-desktop-primary-white-100)',
|
|
80
|
+
} })), isReady && hovered && onPreview && active && (_jsx(Box, { position: 'absolute', top: '0', left: '0', width: '100%', height: '100%', bgcolor: 'var(--colors-light-background-bg-component-hover)', sx: { zIndex: 1 }, display: 'flex', justifyContent: 'center', alignItems: 'center', children: _jsx(MainButton, { text: previewButtonText, onClick: onPreview, showTrailingIcon: true, trailingIcon: "Play", hierarchy: ButtonHierarchy.SecondaryTransparent, size: ButtonSize.sm, style: { border: 'none' } }) })), isProcessing && (_jsxs(Box, { position: 'absolute', top: '0', left: '0', width: '100%', height: '100%', bgcolor: 'var(--colors-light-background-bg-component-hover)', style: { zIndex: 1 }, display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', children: [_jsx(ArrowsClockwise, { size: 24, color: 'var(--primitives-desktop-primary-white-100)', className: "spin-animation" }), _jsx(Typography, { text: processingText, size: TypographySize.TextS, weight: TypographyWeight.SemiBold, color: 'var(--primitives-desktop-primary-white-100)' }), showProgressIndicator && (_jsx(ProgressIndicator, { mode: ProgressIndicatorMode.Percentage, currentValue: progressValue, maxValue: 100, textColor: 'var(--primitives-desktop-primary-white-100)' }))] })), isError && (_jsxs(Box, { position: 'absolute', top: '0', left: '0', width: '100%', height: '100%', bgcolor: 'var(--colors-light-background-bg-error-solid)', style: { zIndex: 1, opacity: 0.7 }, display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', children: [_jsx(Warning, { size: 74, color: 'var(--primitives-desktop-primary-white-100)' }), _jsx(Typography, { text: "Something went wrong", size: TypographySize.TextS, weight: TypographyWeight.SemiBold, color: 'var(--primitives-desktop-primary-white-100)' })] }))] }), _jsx(Typography, { text: title, size: TypographySize.HeadingXS, weight: TypographyWeight.SemiBold }), (showDate || showActiveToggle) && (_jsxs(Box, { display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', children: [showDate && (_jsx(Typography, { text: date, size: TypographySize.TextS, weight: TypographyWeight.Regular, color: 'var(--colors-light-text-text-subtle)', style: { flex: 1 } })), showActiveToggle && (_jsx(Toggle, { checked: active, onChange: (checked) => onActiveToggleChange?.(checked), disabled: activeToggleDisabled, text: "Active", togglePosition: TogglePosition.Right, style: { flex: 1 } }))] })), showBadges && (_jsx(Box, { display: 'flex', flexDirection: 'row', flexWrap: 'wrap', alignItems: 'center', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-lg)', children: badges.map((badge, index) => (_jsx(Badge, { text: badge, size: BadgeSize.lg, fill: true }, `badge-${index}-${badge}`))) })), showDescription && (_jsx(Typography, { text: description, size: TypographySize.TextS, weight: TypographyWeight.Regular, color: 'var(--colors-light-text-text-paragraph)' }))] }));
|
|
82
81
|
};
|