@beydesign/storybook 0.0.58 → 0.0.69
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.
|
@@ -62,7 +62,7 @@ export const AgentCard = ({ title, description = '', date = '', showDate = false
|
|
|
62
62
|
.spin-animation {
|
|
63
63
|
animation: spin 1.5s linear infinite;
|
|
64
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: {
|
|
65
|
+
` }), _jsxs(Box, { display: 'flex', justifyContent: 'center', alignItems: 'center', position: 'relative', sx: { aspectRatio: 1 }, height: '268px', 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: {
|
|
66
66
|
position: 'absolute',
|
|
67
67
|
right: '8px',
|
|
68
68
|
bottom: '8px',
|
|
@@ -2,5 +2,5 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
|
2
2
|
import { Box } from '@mui/material';
|
|
3
3
|
import { SkeletonLoader } from '../UI';
|
|
4
4
|
export const AgentCardSkeleton = ({ width = 'auto', showDate = false, showBadges = false, showDescription = false, style, }) => {
|
|
5
|
-
return (_jsxs(Box, { width: width, display: "flex", flexDirection: "column", borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)', padding: "var(--spacing-tokens-size-in-px-spacing-spacing-xl)", gap: "var(--spacing-tokens-size-in-px-spacing-spacing-lg)", bgcolor: "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)`, style: style, children: [_jsx(Box, { width: "100%", sx: { aspectRatio: 1 }, borderRadius: "var(--spacing-tokens-size-in-px-spacing-spacing-sm)", overflow: "hidden", children: _jsx(SkeletonLoader, {}) }), _jsx(SkeletonLoader, { width: "70%", height: "24px", borderRadius: "var(--spacing-tokens-size-in-px-spacing-spacing-xs)" }), showDate && (_jsx(SkeletonLoader, { width: "100%", height: "20px", borderRadius: "var(--spacing-tokens-size-in-px-spacing-spacing-xs)" })), showBadges && (_jsxs(Box, { display: "flex", flexDirection: "row", gap: "var(--spacing-tokens-size-in-px-spacing-spacing-md)", children: [_jsx(SkeletonLoader, { width: "60px", height: "24px", borderRadius: "var(--spacing-tokens-size-in-px-spacing-spacing-xs)" }), _jsx(SkeletonLoader, { width: "80px", height: "24px", borderRadius: "var(--spacing-tokens-size-in-px-spacing-spacing-xs)" })] })), showDescription && (_jsxs(Box, { display: "flex", flexDirection: "column", gap: "var(--spacing-tokens-size-in-px-spacing-spacing-sm)", children: [_jsx(SkeletonLoader, { width: "100%", height: "16px", borderRadius: "var(--spacing-tokens-size-in-px-spacing-spacing-xs)" }), _jsx(SkeletonLoader, { width: "80%", height: "16px", borderRadius: "var(--spacing-tokens-size-in-px-spacing-spacing-xs)" })] }))] }));
|
|
5
|
+
return (_jsxs(Box, { width: width, display: "flex", flexDirection: "column", borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)', padding: "var(--spacing-tokens-size-in-px-spacing-spacing-xl)", gap: "var(--spacing-tokens-size-in-px-spacing-spacing-lg)", bgcolor: "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)`, style: style, children: [_jsx(Box, { width: "100%", height: "268px", sx: { aspectRatio: 1 }, borderRadius: "var(--spacing-tokens-size-in-px-spacing-spacing-sm)", overflow: "hidden", children: _jsx(SkeletonLoader, {}) }), _jsx(SkeletonLoader, { width: "70%", height: "24px", borderRadius: "var(--spacing-tokens-size-in-px-spacing-spacing-xs)" }), showDate && (_jsx(SkeletonLoader, { width: "100%", height: "20px", borderRadius: "var(--spacing-tokens-size-in-px-spacing-spacing-xs)" })), showBadges && (_jsxs(Box, { display: "flex", flexDirection: "row", gap: "var(--spacing-tokens-size-in-px-spacing-spacing-md)", children: [_jsx(SkeletonLoader, { width: "60px", height: "24px", borderRadius: "var(--spacing-tokens-size-in-px-spacing-spacing-xs)" }), _jsx(SkeletonLoader, { width: "80px", height: "24px", borderRadius: "var(--spacing-tokens-size-in-px-spacing-spacing-xs)" })] })), showDescription && (_jsxs(Box, { display: "flex", flexDirection: "column", gap: "var(--spacing-tokens-size-in-px-spacing-spacing-sm)", children: [_jsx(SkeletonLoader, { width: "100%", height: "16px", borderRadius: "var(--spacing-tokens-size-in-px-spacing-spacing-xs)" }), _jsx(SkeletonLoader, { width: "80%", height: "16px", borderRadius: "var(--spacing-tokens-size-in-px-spacing-spacing-xs)" })] }))] }));
|
|
6
6
|
};
|
|
@@ -17,6 +17,7 @@ export const CreateNewCard = ({ text, onClick, }) => {
|
|
|
17
17
|
},
|
|
18
18
|
position: 'relative',
|
|
19
19
|
overflow: 'hidden',
|
|
20
|
+
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)`,
|
|
20
21
|
}, onClick: onClick, children: _jsxs(Box, { display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', height: '100%', padding: '24px', sx: { gap: '16px' }, children: [_jsx(Typography, { text: text, size: TypographySize.HeadingXS, weight: TypographyWeight.SemiBold, color: 'var(--colors-light-background-bg-brand)' }), _jsx(Box, { display: 'flex', width: '48px', height: '48px', borderRadius: '50%', sx: {
|
|
21
22
|
alignItems: 'center',
|
|
22
23
|
justifyContent: 'center',
|