@beydesign/storybook 0.4.6 → 0.4.7
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/EntityCard/AvatarSilhouette.d.ts +8 -0
- package/dist/stories/EntityCard/AvatarSilhouette.js +8 -0
- package/dist/stories/EntityCard/EntityCard.js +13 -5
- package/dist/stories/EntityCard/EntityCard.stories.js +3 -3
- package/dist/stories/EntityCard/types.d.ts +2 -2
- package/package.json +1 -1
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
/**
|
|
3
|
+
* The avatar bust silhouette shown as the empty-state placeholder (no image),
|
|
4
|
+
* mirroring the Figma "Empty" state. Fills its container and is anchored to the
|
|
5
|
+
* bottom, so the shoulders bleed off the card edge. Uses `currentColor` so the
|
|
6
|
+
* fill can be driven by a design token from the parent.
|
|
7
|
+
*/
|
|
8
|
+
export declare const AvatarSilhouette: React.FC;
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
/**
|
|
3
|
+
* The avatar bust silhouette shown as the empty-state placeholder (no image),
|
|
4
|
+
* mirroring the Figma "Empty" state. Fills its container and is anchored to the
|
|
5
|
+
* bottom, so the shoulders bleed off the card edge. Uses `currentColor` so the
|
|
6
|
+
* fill can be driven by a design token from the parent.
|
|
7
|
+
*/
|
|
8
|
+
export const AvatarSilhouette = () => (_jsx("svg", { viewBox: '0 0 206 224', width: '100%', height: '100%', preserveAspectRatio: 'none', fill: 'none', xmlns: 'http://www.w3.org/2000/svg', style: { display: 'block' }, "aria-hidden": 'true', focusable: 'false', children: _jsx("path", { d: 'M99.3964 0.0456982C113.077 -0.455929 125.202 3.14652 135.525 12.1236C148.651 23.5376 147.776 38.5586 145.834 54.3326C145.588 56.3287 145.199 58.4767 144.991 60.4808C149.483 60.7505 150.277 64.6019 149.882 68.4009C149.333 73.6891 147.427 80.6122 143.514 84.4206C142.672 85.1879 140.346 86.2549 140.073 86.8043C139.095 88.7733 138.467 91.5773 137.716 93.6661C135.881 98.7729 133.492 103.4 129.918 107.52C128.811 108.796 127.72 109.764 126.634 110.938C125.107 116.921 126.767 127.746 129.952 133.133C134.695 141.159 144.185 143.686 152.658 146.232C158.101 147.813 163.51 149.514 168.878 151.329C178.708 154.699 189.396 158.77 194.713 168.238C197.991 174.074 199.3 179.931 200.599 186.435C201.789 192.393 202.659 198.373 203.549 204.377C204.13 208.372 204.663 212.376 205.146 216.386C205.449 218.83 205.845 221.556 206 224H0L0.0225427 223.877C0.483937 221.262 0.77993 216.99 1.11962 214.171C1.77914 208.761 2.57988 203.368 3.5213 198C4.96167 189.348 6.76585 179.033 10.363 171.015C12.2654 166.773 15.904 162.193 19.855 159.538C29.5517 153.12 41.2795 150.131 52.2751 146.656C59.2908 144.439 66.4763 142.872 72.352 138.147C79.5078 132.395 81.5098 119.718 79.8167 111.052L79.7425 110.962C78.8337 109.888 77.6063 108.78 76.5931 107.611C73.4593 103.966 71.0023 99.7957 69.3371 95.2959C68.78 93.7779 68.2501 92.2503 67.7476 90.7137C66.0041 85.3616 66.4977 87.0427 62.1073 84.1196C56.9385 80.6782 51.0027 60.6731 61.2827 60.467C61.0959 57.2634 60.4807 53.6568 60.1419 50.3502C58.9309 38.5311 59.2264 24.9218 67.4846 15.453C70.7115 11.7529 73.9771 10.0768 78.4209 8.59052C79.0166 8.39123 81.4647 5.42845 82.4273 5.1527C87.3821 1.81482 93.4351 0.264287 99.3964 0.0456982Z', fill: 'currentColor' }) }));
|
|
@@ -2,7 +2,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
|
2
2
|
import { useState } from 'react';
|
|
3
3
|
import { Box } from '@mui/material';
|
|
4
4
|
import { keyframes } from '@emotion/react';
|
|
5
|
-
import {
|
|
5
|
+
import { ArrowsClockwise, Warning } from '@phosphor-icons/react';
|
|
6
|
+
import { AvatarSilhouette } from './AvatarSilhouette';
|
|
6
7
|
import { Typography, TypographySize, TypographyWeight } from '../Typography';
|
|
7
8
|
import { Menu, Badge, BadgeColor, BadgeSize } from '../UI';
|
|
8
9
|
import { MainButton, ButtonHierarchy, ButtonSize, ButtonDisplayMode, } from '../Buttons';
|
|
@@ -37,8 +38,8 @@ export const EntityCard = ({ view = 'avatar', name, image, description = '', sho
|
|
|
37
38
|
const isProcessing = processing && !error;
|
|
38
39
|
const canPreview = !!onPreview && !isProcessing && !error;
|
|
39
40
|
const showActions = canPreview || hasMenu;
|
|
40
|
-
const showBadge = showStatusBadge && !!statusBadgeText;
|
|
41
|
-
const showImage = !!image && !imageError;
|
|
41
|
+
const showBadge = showStatusBadge && !!statusBadgeText && !error;
|
|
42
|
+
const showImage = !!image && !imageError && !error;
|
|
42
43
|
const resolvedTestId = testId ?? `${entityKey}-${isVideo ? 'video' : 'entity'}-card`;
|
|
43
44
|
const handlePreviewButtonClick = (event) => {
|
|
44
45
|
event.stopPropagation();
|
|
@@ -60,12 +61,19 @@ export const EntityCard = ({ view = 'avatar', name, image, description = '', sho
|
|
|
60
61
|
opacity: 1,
|
|
61
62
|
pointerEvents: 'auto',
|
|
62
63
|
},
|
|
63
|
-
}, "data-testid": resolvedTestId, children: [_jsxs(Box, { position: 'relative', width: '100%', borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)', overflow: 'hidden', sx: { aspectRatio: imageAspectRatio }, children: [
|
|
64
|
+
}, "data-testid": resolvedTestId, children: [_jsxs(Box, { position: 'relative', width: '100%', borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)', overflow: 'hidden', sx: { aspectRatio: imageAspectRatio }, children: [error ? (_jsx(Box, { width: '100%', height: '100%', bgcolor: 'var(--color-background-bg-badge-accent-red)', display: 'flex', justifyContent: 'center', alignItems: 'center', role: 'img', "aria-label": errorText, title: errorText, children: _jsx(Warning, { size: 50, color: 'var(--color-foreground-fg-error)' }) })) : showImage ? (_jsx("img", { src: image, alt: name, width: '100%', height: '100%', style: { objectFit: 'cover', height: '100%', width: '100%' }, onError: () => setImageError(true) })) : (_jsx(Box, { position: 'relative', width: '100%', height: '100%', overflow: 'hidden', bgcolor: 'var(--color-background-bg-button-disabled)', children: _jsx(Box, { position: 'absolute', bottom: 0, left: '50%', sx: {
|
|
65
|
+
transform: 'translateX(-50%)',
|
|
66
|
+
color: 'var(--color-border-border-subtle)',
|
|
67
|
+
aspectRatio: '206 / 224',
|
|
68
|
+
...(isVideo
|
|
69
|
+
? { height: '100%', maxWidth: '100%' }
|
|
70
|
+
: { width: '206px', height: '224px' }),
|
|
71
|
+
}, children: _jsx(AvatarSilhouette, {}) }) })), _jsx(Box, { position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)', sx: {
|
|
64
72
|
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%)',
|
|
65
73
|
opacity: hovered && !isProcessing && !error ? 1 : 0,
|
|
66
74
|
transition: 'opacity 0.15s ease-in-out',
|
|
67
75
|
pointerEvents: 'none',
|
|
68
|
-
} }), 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 })] })),
|
|
76
|
+
} }), 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 })] })), 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, { className: ACTIONS_CLASS, 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: {
|
|
69
77
|
zIndex: 4,
|
|
70
78
|
transition: 'opacity 0.15s ease-in-out',
|
|
71
79
|
'@media (hover: hover)': {
|
|
@@ -69,12 +69,12 @@ const meta = {
|
|
|
69
69
|
},
|
|
70
70
|
error: {
|
|
71
71
|
control: 'boolean',
|
|
72
|
-
description: 'Show the error
|
|
72
|
+
description: 'Show the error state (tinted media area + warning icon)',
|
|
73
73
|
table: { type: { summary: 'boolean' } },
|
|
74
74
|
},
|
|
75
75
|
errorText: {
|
|
76
76
|
control: 'text',
|
|
77
|
-
description: '
|
|
77
|
+
description: "Accessible label for the error state (the warning icon's aria-label/title)",
|
|
78
78
|
table: {
|
|
79
79
|
type: { summary: 'string' },
|
|
80
80
|
defaultValue: { summary: 'Something went wrong' },
|
|
@@ -303,7 +303,7 @@ export const ErrorState = {
|
|
|
303
303
|
parameters: {
|
|
304
304
|
docs: {
|
|
305
305
|
description: {
|
|
306
|
-
story: '
|
|
306
|
+
story: 'The media area is replaced by a tinted error surface with a warning icon; the name stays visible and the preview action is suppressed. The menu stays accessible so the item can still be retried or removed. Works across every view.',
|
|
307
307
|
},
|
|
308
308
|
},
|
|
309
309
|
},
|
|
@@ -29,9 +29,9 @@ export interface EntityCardProps {
|
|
|
29
29
|
processing?: boolean;
|
|
30
30
|
/** Processing overlay label. Defaults to "Please wait" */
|
|
31
31
|
processingText?: string;
|
|
32
|
-
/** Show the error
|
|
32
|
+
/** Show the error state (tinted media area + warning icon) in place of the image */
|
|
33
33
|
error?: boolean;
|
|
34
|
-
/**
|
|
34
|
+
/** Accessible label for the error state — exposed as the warning icon's aria-label/title. Defaults to "Something went wrong" */
|
|
35
35
|
errorText?: string;
|
|
36
36
|
/** Preview handler — renders the action button on hover */
|
|
37
37
|
onPreview?: () => void;
|