@beydesign/storybook 0.0.48 → 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.
|
@@ -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
|
};
|
|
@@ -34,6 +34,8 @@ export type TextAreaProps = {
|
|
|
34
34
|
required?: boolean;
|
|
35
35
|
/** Text area label trailing element */
|
|
36
36
|
labelTrailingElement?: React.ReactNode;
|
|
37
|
+
/** Text area label container style */
|
|
38
|
+
labelContainerStyle?: SxProps<Theme>;
|
|
37
39
|
};
|
|
38
40
|
/**
|
|
39
41
|
* Text input component props
|
|
@@ -65,6 +67,8 @@ export type TextInputProps = {
|
|
|
65
67
|
required?: boolean;
|
|
66
68
|
/** Text input label trailing element */
|
|
67
69
|
labelTrailingElement?: React.ReactNode;
|
|
70
|
+
/** Text input label container style */
|
|
71
|
+
labelContainerStyle?: SxProps<Theme>;
|
|
68
72
|
};
|
|
69
73
|
/**
|
|
70
74
|
* Toggle position variants
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { TypographySize, TypographyWeight } from './types';
|
|
3
3
|
import { Box } from '@mui/material';
|
|
4
|
-
export const Typography = ({ text, color, size = TypographySize.HeadingL, weight = TypographyWeight.Bold, className, required = false, style, trailingElement = null, }) => {
|
|
4
|
+
export const Typography = ({ text, color, size = TypographySize.HeadingL, weight = TypographyWeight.Bold, className, required = false, style, trailingElement = null, textStyle, }) => {
|
|
5
5
|
const getTypographySizeToken = () => {
|
|
6
6
|
let sizeLc = size?.toLowerCase() || '';
|
|
7
7
|
if (sizeLc.includes('heading')) {
|
|
@@ -52,11 +52,11 @@ export const Typography = ({ text, color, size = TypographySize.HeadingL, weight
|
|
|
52
52
|
textTransform: getTextTransform(),
|
|
53
53
|
textDecoration: textDecoration,
|
|
54
54
|
color: color || 'var(--global-text-text-title)',
|
|
55
|
-
...
|
|
55
|
+
...textStyle,
|
|
56
56
|
}, children: [text, required && _jsx("span", { style: { color: requiredColor }, children: "*" })] }));
|
|
57
57
|
};
|
|
58
58
|
if (!trailingElement) {
|
|
59
59
|
return _jsx(Label, {});
|
|
60
60
|
}
|
|
61
|
-
return (_jsxs(Box, { display: "flex", flexDirection: "row", alignItems: "center", justifyContent: "flex-start", gap: "var(--spacing-tokens-size-in-px-spacing-spacing-xs)", children: [_jsx(Label, {}), trailingElement] }));
|
|
61
|
+
return (_jsxs(Box, { display: "flex", flexDirection: "row", alignItems: "center", justifyContent: "flex-start", gap: "var(--spacing-tokens-size-in-px-spacing-spacing-xs)", sx: style, children: [_jsx(Label, {}), trailingElement] }));
|
|
62
62
|
};
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { Theme, SxProps } from '@mui/material';
|
|
1
2
|
/**
|
|
2
3
|
* Typography size variants
|
|
3
4
|
*/
|
|
@@ -37,8 +38,10 @@ export interface TypographyProps {
|
|
|
37
38
|
color?: string;
|
|
38
39
|
/** CSS class name for additional styling */
|
|
39
40
|
className?: string;
|
|
40
|
-
/** Style object for
|
|
41
|
-
style?:
|
|
41
|
+
/** Style object for the container */
|
|
42
|
+
style?: SxProps<Theme>;
|
|
43
|
+
/** Style object for the text */
|
|
44
|
+
textStyle?: React.CSSProperties;
|
|
42
45
|
/** Whether the typography is required */
|
|
43
46
|
required?: boolean;
|
|
44
47
|
/** Whether the typography has a trailing element */
|