@beydesign/storybook 0.4.0 → 0.4.2

package/dist/stories/EntityCard/EntityCard.js

@@ -32,7 +32,7 @@ export const EntityCard = ({ view = 'avatar', name, image, description = '', sho
     const imageAspectRatio = aspectRatio ?? ASPECT_RATIO_BY_VIEW[view];
     const entityKey = name?.toLowerCase()?.replace(/\s+/g, '-');
     const hasMenu = showMenu && menuItems.length > 0;
-    const isProcessing = isVideo && processing && !error;
+    const isProcessing = processing && !error;
     const canPreview = !!onPreview && !isProcessing && !error;
     const showActions = hovered && (canPreview || hasMenu);
     const showBadge = showStatusBadge && !!statusBadgeText;
@@ -45,7 +45,7 @@ export const EntityCard = ({ view = 'avatar', name, image, description = '', sho
                             opacity: hovered && !isProcessing && !error ? 1 : 0,
                             transition: 'opacity 0.15s ease-in-out',
                             pointerEvents: 'none',
-                        } }), 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 })] })), error && (_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-error-solid)', sx: { zIndex: 3, opacity: 0.7 }, children: [_jsx(Warning, { size: 74, color: 'var(--color-text-text-white)' }), _jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.SemiBold, color: 'var(--color-text-text-white)', children: errorText })] })), 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)', iconColor: 'var(--color-foreground-fg-accent-success)' }) })), showActions && (_jsxs(Box, { 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: { zIndex: 4 }, children: [canPreview &&
+                        } }), 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 })] })), error && (_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-error-solid)', sx: { zIndex: 3, opacity: 0.7 }, children: [_jsx(Warning, { size: 74, color: 'var(--color-text-text-white)' }), _jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.SemiBold, color: 'var(--color-text-text-white)', children: errorText })] })), 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, { 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: { zIndex: 4 }, children: [canPreview &&
                                 (previewButtonText ? (_jsx(MainButton, { text: previewButtonText, showLeadingIcon: true, leadingIcon: previewIcon, iconWeight: 'fill', hierarchy: ButtonHierarchy.SecondaryTransparent, size: ButtonSize.sm, onClick: onPreview, testId: `${entityKey}-preview-button` })) : (_jsx(MainButton, { displayIcon: previewIcon, displayIconMode: ButtonDisplayMode.Only, hierarchy: ButtonHierarchy.SecondaryTransparent, size: ButtonSize.sm, onClick: onPreview, testId: `${entityKey}-preview-button` }))), hasMenu && (_jsx(Menu, { items: menuItems, testKey: entityKey, size: ButtonSize.sm }))] })), 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: {
                             zIndex: 2,
                             pointerEvents: 'none',

package/dist/stories/EntityCard/EntityCard.stories.d.ts

@@ -13,3 +13,4 @@ export declare const VideoProcessing: Story;
 export declare const VideoNoImage: Story;
 export declare const ErrorState: Story;
 export declare const VideoError: Story;
+export declare const Processing: Story;

package/dist/stories/EntityCard/EntityCard.stories.js

@@ -56,7 +56,7 @@ const meta = {
         },
         processing: {
             control: 'boolean',
-            description: 'Show the processing overlay (spinner + label) — video view',
+            description: 'Show the processing overlay (spinner + label)',
             table: { type: { summary: 'boolean' } },
         },
         processingText: {
@@ -326,3 +326,17 @@ export const VideoError = {
         },
     },
 };
+export const Processing = {
+    args: {
+        ...Default.args,
+        name: 'Nelly',
+        processing: true,
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'A processing overlay (spinner + label) covers the image while the preview action is suppressed. The menu stays accessible. Works across every view.',
+            },
+        },
+    },
+};

package/dist/stories/EntityCard/types.d.ts

@@ -25,7 +25,7 @@ export interface EntityCardProps {
     date?: string;
     /** Aspect ratio of the image — overrides the per-view default (`203 / 264` avatar, `1 / 1` agent, `16 / 9` video) */
     aspectRatio?: string;
-    /** Show the processing overlay (spinner + label) over the image (`video` view) */
+    /** Show the processing overlay (spinner + label) over the image */
     processing?: boolean;
     /** Processing overlay label. Defaults to "Please wait" */
     processingText?: string;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@beydesign/storybook",
   "private": false,
-  "version": "0.4.0",
+  "version": "0.4.2",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",