@beydesign/storybook 0.2.20 → 0.2.22
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.
|
@@ -111,11 +111,11 @@ export const Dropdown = ({ disabled = false, placeholder = 'Select an option', l
|
|
|
111
111
|
}
|
|
112
112
|
return Array.isArray(props.value) && props.value.includes(option);
|
|
113
113
|
};
|
|
114
|
-
return (_jsx(ClickAwayListener, { onClickAway: () => setOpen(false), children: _jsxs(Box, { display: 'flex', flexDirection: 'column', justifyContent: 'center', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', position: 'relative', width: "100%", minWidth: '300px', children: [label && (_jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Regular, textStyle: { textAlign: 'left' }, required: required, children: label })), _jsxs(Box, { ref: anchorRef, display: 'flex', flexDirection: 'row', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-lg)', padding: 'var(--spacing-tokens-size-in-px-spacing-spacing-lg)', alignItems: 'center', justifyContent: 'space-between', border: `1px solid ${open
|
|
114
|
+
return (_jsx(ClickAwayListener, { onClickAway: () => setOpen(false), children: _jsxs(Box, { display: 'flex', flexDirection: 'column', justifyContent: 'center', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', position: 'relative', width: "100%", minWidth: '300px', children: [label && (_jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Regular, textStyle: { textAlign: 'left' }, required: required, children: label })), _jsxs(Box, { ref: anchorRef, display: 'flex', flexDirection: 'row', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-lg)', height: '40px', padding: '0 var(--spacing-tokens-size-in-px-spacing-spacing-lg)', alignItems: 'center', justifyContent: 'space-between', border: `1px solid ${open
|
|
115
115
|
? 'var(--color-border-border-component-active)'
|
|
116
116
|
: 'var(--color-border-border-component)'}`, borderRadius: '4px', bgcolor: disabled
|
|
117
117
|
? 'var(--color-background-bg-component-disabled)'
|
|
118
|
-
: 'var(--color-background-bg-component)', position: 'relative', onClick: () => !disabled && setOpen((prev) => !prev), onKeyDown: handleKeyDown, tabIndex: disabled ? -1 : 0, "aria-haspopup": "listbox", "aria-expanded": open, "aria-disabled": disabled, role: "combobox", children: [_jsx(Box, { display: "flex", alignItems: "center", flexShrink: 0, children: showLeadingIcon &&
|
|
118
|
+
: 'var(--color-background-bg-component)', position: 'relative', onClick: () => !disabled && setOpen((prev) => !prev), onKeyDown: handleKeyDown, tabIndex: disabled ? -1 : 0, "aria-haspopup": "listbox", "aria-expanded": open, "aria-disabled": disabled, role: "combobox", sx: { boxSizing: 'border-box' }, children: [_jsx(Box, { display: "flex", alignItems: "center", flexShrink: 0, children: showLeadingIcon &&
|
|
119
119
|
getIconComponent(leadingIcon, {
|
|
120
120
|
width: '24px',
|
|
121
121
|
height: '24px',
|
|
@@ -156,19 +156,17 @@ export const Dropdown = ({ disabled = false, placeholder = 'Select an option', l
|
|
|
156
156
|
'aria-hidden': 'true',
|
|
157
157
|
})] })] }), _jsx(Popper, { open: open, anchorEl: anchorRef.current, placement: "bottom-start", style: { width: anchorRef.current?.offsetWidth, zIndex: 1300 }, children: _jsx(Box, { ref: optionsContainerRef, bgcolor: 'var(--color-background-bg-component)', borderRadius: '4px', width: '100%', maxHeight: '200px', overflow: 'auto', boxShadow: '0px 4px 8px rgba(0, 0, 0, 0.1)', mt: '4px', role: "listbox", sx: {
|
|
158
158
|
border: '1px solid var(--color-border-border-component)',
|
|
159
|
-
}, children: options.length === 0 ? (_jsx(Box, { display: 'flex', flexDirection: 'row', paddingX: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', paddingY: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)', children: _jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Regular, children: "No options found" }) })) : (options.map((option, index) => (_jsxs(Box, { display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-
|
|
159
|
+
}, children: options.length === 0 ? (_jsx(Box, { display: 'flex', flexDirection: 'row', paddingX: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', paddingY: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)', children: _jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Regular, children: "No options found" }) })) : (options.map((option, index) => (_jsxs(Box, { display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', height: '40px', padding: '0 var(--spacing-tokens-size-in-px-spacing-spacing-lg)', onClick: () => handleOptionSelect(option), onMouseEnter: () => setHighlightedIndex(index), sx: {
|
|
160
160
|
cursor: 'pointer',
|
|
161
161
|
backgroundColor: highlightedIndex === index
|
|
162
|
-
? 'var(--color-background-bg-
|
|
163
|
-
:
|
|
164
|
-
? 'var(--color-background-bg-element)'
|
|
165
|
-
: 'transparent',
|
|
162
|
+
? 'var(--color-background-bg-secondary-action-hover)'
|
|
163
|
+
: 'transparent',
|
|
166
164
|
'&:hover': {
|
|
167
|
-
backgroundColor: 'var(--color-background-bg-
|
|
165
|
+
backgroundColor: 'var(--color-background-bg-secondary-action-hover)',
|
|
168
166
|
},
|
|
169
167
|
width: '100%',
|
|
170
168
|
boxSizing: 'border-box',
|
|
171
|
-
}, role: "option", "aria-selected": isOptionSelected(option), children: [_jsxs(Box, { display: 'flex', flexDirection: 'row', alignItems: 'center', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs)', width: "calc(100% -
|
|
169
|
+
}, role: "option", "aria-selected": isOptionSelected(option), children: [_jsxs(Box, { display: 'flex', flexDirection: 'row', alignItems: 'center', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs)', width: "calc(100% - 28px)", overflow: "hidden", children: [showCheckboxes && (_jsx(Box, { flexShrink: 0, children: _jsx(Checkbox, { checked: isOptionSelected(option), onChange: () => handleOptionSelect(option), style: { margin: 0, padding: 0 } }) })), _jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Regular, color: "var(--color-text-text-title)", textStyle: {
|
|
172
170
|
overflow: 'hidden',
|
|
173
171
|
textOverflow: 'ellipsis',
|
|
174
172
|
whiteSpace: 'nowrap',
|
|
@@ -176,8 +174,8 @@ export const Dropdown = ({ disabled = false, placeholder = 'Select an option', l
|
|
|
176
174
|
}, children: option })] }), _jsx(Box, { flexShrink: 0, display: "flex", alignItems: "center", children: showTicks &&
|
|
177
175
|
isOptionSelected(option) &&
|
|
178
176
|
getIconComponent('Check', {
|
|
179
|
-
width: '
|
|
180
|
-
height: '
|
|
177
|
+
width: '20px',
|
|
178
|
+
height: '20px',
|
|
181
179
|
color: 'var(--color-foreground-fg-brand-primary)',
|
|
182
180
|
}) })] }, option)))) }) })] }) }));
|
|
183
181
|
};
|
|
@@ -28,10 +28,7 @@ export const VideoCard = ({ name, image, date, aspectRatio = '16 / 9', processin
|
|
|
28
28
|
const showImage = !!image && !imageError;
|
|
29
29
|
return (_jsx(Box, { width: width ?? '340px', display: 'flex', flexDirection: 'column', padding: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)', bgcolor: hovered
|
|
30
30
|
? 'var(--color-background-bg-card-highlight-hover)'
|
|
31
|
-
: '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), sx: { transition: 'background-color 0.15s ease-in-out' }, "data-testid": testId ?? `${entityKey}-video-card`, children: _jsxs(Box, { position: 'relative', width: '100%', borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)', overflow: 'hidden',
|
|
32
|
-
aspectRatio,
|
|
33
|
-
cursor: canPreview ? 'pointer' : 'default',
|
|
34
|
-
}, children: [showImage ? (_jsx("img", { src: image, alt: name, width: '100%', height: '100%', style: { objectFit: 'cover', height: '100%', width: '100%' }, onError: () => setImageError(true) })) : (_jsx(Box, { width: '100%', height: '100%', bgcolor: 'var(--color-background-bg-element)', display: 'flex', justifyContent: 'center', alignItems: 'center', children: _jsx(FilmSlate, { size: 64, weight: 'thin', color: 'var(--color-text-text-subtle)' }) })), _jsx(Box, { position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, sx: {
|
|
31
|
+
: '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), sx: { transition: 'background-color 0.15s ease-in-out' }, "data-testid": testId ?? `${entityKey}-video-card`, children: _jsxs(Box, { position: 'relative', width: '100%', borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)', overflow: 'hidden', sx: { aspectRatio }, children: [showImage ? (_jsx("img", { src: image, alt: name, width: '100%', height: '100%', style: { objectFit: 'cover', height: '100%', width: '100%' }, onError: () => setImageError(true) })) : (_jsx(Box, { width: '100%', height: '100%', bgcolor: 'var(--color-background-bg-element)', display: 'flex', justifyContent: 'center', alignItems: 'center', children: _jsx(FilmSlate, { size: 64, weight: 'thin', color: 'var(--color-text-text-subtle)' }) })), _jsx(Box, { position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, sx: {
|
|
35
32
|
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%)',
|
|
36
33
|
opacity: hovered && !processing ? 1 : 0,
|
|
37
34
|
transition: 'opacity 0.15s ease-in-out',
|