@beydesign/storybook 0.4.12 → 0.5.1
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/App.js +1 -1
- package/dist/stories/Buttons/SocialButton.js +2 -1
- package/dist/stories/Buttons/SocialIcons.d.ts +18 -3
- package/dist/stories/Buttons/SocialIcons.js +21 -6
- package/dist/stories/EntityCard/EntityCard.js +35 -12
- package/dist/stories/EntityCard/EntityCard.stories.js +8 -37
- package/dist/stories/EntityCard/types.d.ts +4 -12
- package/dist/stories/UI/PromoBanner.js +3 -3
- package/package.json +1 -1
package/dist/App.js
CHANGED
|
@@ -148,7 +148,7 @@ function App() {
|
|
|
148
148
|
gap: '16px',
|
|
149
149
|
}, children: avatars
|
|
150
150
|
.slice(0, 4)
|
|
151
|
-
.map((avatar) => loading ? (_jsx(EntityCardSkeleton, { view: "agent" }, `agent-${avatar.id}`)) : (_jsx(EntityCard, { view: "agent", name: `${avatar.name} Customer Support`, image: avatar.image,
|
|
151
|
+
.map((avatar) => loading ? (_jsx(EntityCardSkeleton, { view: "agent" }, `agent-${avatar.id}`)) : (_jsx(EntityCard, { view: "agent", name: `${avatar.name} Customer Support`, image: avatar.image, stockAgent: true, onPreview: () => console.log('Join', avatar.name), previewButtonText: "Join", previewIcon: "VideoCamera", showMenu: true, menuItems: agentMenuItems }, `agent-${avatar.id}`))) }), _jsx("h2", { style: {
|
|
152
152
|
fontFamily: 'Figtree, sans-serif',
|
|
153
153
|
color: 'var(--color-text-text-title)',
|
|
154
154
|
margin: '40px 0 4px',
|
|
@@ -26,7 +26,8 @@ const StyledSocialButton = styled.button `
|
|
|
26
26
|
? '100%'
|
|
27
27
|
: 'auto'
|
|
28
28
|
: 'var(--spacing-tokens-size-in-px-spacing-spacing-6xl)'};
|
|
29
|
-
|
|
29
|
+
/* Figma specs 9px; spacing-md (8px) is the nearest token */
|
|
30
|
+
padding: 0 var(--spacing-tokens-size-in-px-spacing-spacing-md);
|
|
30
31
|
border: none;
|
|
31
32
|
border-radius: var(--spacing-tokens-size-in-px-radius-radius-md);
|
|
32
33
|
background: var(--color-background-bg-card-highlight);
|
|
@@ -2,10 +2,25 @@ import React from 'react';
|
|
|
2
2
|
interface SocialIconProps {
|
|
3
3
|
size?: number;
|
|
4
4
|
}
|
|
5
|
-
/**
|
|
5
|
+
/**
|
|
6
|
+
* Full-color Google "G" logo.
|
|
7
|
+
*
|
|
8
|
+
* Vector data exported from Figma (node 2707:49504). The four segments are
|
|
9
|
+
* positioned so the glyph spans the full 24×24 box, exactly as in the design.
|
|
10
|
+
*/
|
|
6
11
|
export declare const GoogleIcon: React.FC<SocialIconProps>;
|
|
7
|
-
/**
|
|
12
|
+
/**
|
|
13
|
+
* Full-color Microsoft logo (four squares).
|
|
14
|
+
*
|
|
15
|
+
* Geometry and colors taken from Figma (node 2609:109007): 9×9 squares inset
|
|
16
|
+
* 2px from the 24×24 box with a 2px gutter between them.
|
|
17
|
+
*/
|
|
8
18
|
export declare const MicrosoftIcon: React.FC<SocialIconProps>;
|
|
9
|
-
/**
|
|
19
|
+
/**
|
|
20
|
+
* Monochrome Apple logo — uses currentColor so it follows the button text color (theme-aware).
|
|
21
|
+
*
|
|
22
|
+
* Vector data exported from Figma (node 2609:109006); the glyph spans the full
|
|
23
|
+
* 24px height and is inset 2px from the left edge, matching the design.
|
|
24
|
+
*/
|
|
10
25
|
export declare const AppleIcon: React.FC<SocialIconProps>;
|
|
11
26
|
export {};
|
|
@@ -1,7 +1,22 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
/**
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
2
|
+
/**
|
|
3
|
+
* Full-color Google "G" logo.
|
|
4
|
+
*
|
|
5
|
+
* Vector data exported from Figma (node 2707:49504). The four segments are
|
|
6
|
+
* positioned so the glyph spans the full 24×24 box, exactly as in the design.
|
|
7
|
+
*/
|
|
8
|
+
export const GoogleIcon = ({ size = 24 }) => (_jsxs("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", focusable: "false", children: [_jsx("g", { transform: "translate(12.24 9.8376)", children: _jsx("path", { fill: "#4285F4", d: "M11.526 2.43836C11.526 1.62263 11.4599 0.802499 11.3188 0H0V4.62098H6.48173C6.21276 6.11133 5.34853 7.42973 4.08305 8.2675V11.2658H7.95004C10.2209 9.17582 11.526 6.08929 11.526 2.43836Z" }) }), _jsx("g", { transform: "translate(1.5168 14.2992)", children: _jsx("path", { fill: "#34A853", d: "M10.7235 9.70053C13.96 9.70053 16.6893 8.63788 18.6779 6.8036L14.811 3.80525C13.7351 4.5372 12.3461 4.95168 10.7279 4.95168C7.59728 4.95168 4.94286 2.83961 3.99045 0H0V3.09094C2.03711 7.14312 6.1863 9.70053 10.7235 9.70053Z" }) }), _jsx("g", { transform: "translate(0.24 6.6144)", children: _jsx("path", { fill: "#FBBC04", d: "M5.26254 7.68547C4.75988 6.19511 4.75988 4.5813 5.26254 3.09094V0H1.2765C-0.425501 3.39078 -0.425501 7.38563 1.2765 10.7764L5.26254 7.68547Z" }) }), _jsx("g", { transform: "translate(1.5168 0)", children: _jsx("path", { fill: "#EA4335", d: "M10.7235 4.74966C12.4343 4.7232 14.0878 5.36697 15.3268 6.54867L18.7529 3.12262C16.5835 1.0855 13.7042 -0.034466 10.7235 0.000808666C6.18629 0.000808666 2.03711 2.55822 0 6.61481L3.98604 9.70575C4.93404 6.86173 7.59287 4.74966 10.7235 4.74966Z" }) })] }));
|
|
9
|
+
/**
|
|
10
|
+
* Full-color Microsoft logo (four squares).
|
|
11
|
+
*
|
|
12
|
+
* Geometry and colors taken from Figma (node 2609:109007): 9×9 squares inset
|
|
13
|
+
* 2px from the 24×24 box with a 2px gutter between them.
|
|
14
|
+
*/
|
|
15
|
+
export const MicrosoftIcon = ({ size = 24 }) => (_jsxs("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", focusable: "false", children: [_jsx("rect", { x: "2", y: "2", width: "9", height: "9", fill: "#F25325" }), _jsx("rect", { x: "13", y: "2", width: "9", height: "9", fill: "#80BC06" }), _jsx("rect", { x: "2", y: "13", width: "9", height: "9", fill: "#05A6F0" }), _jsx("rect", { x: "13", y: "13", width: "9", height: "9", fill: "#FEBA08" })] }));
|
|
16
|
+
/**
|
|
17
|
+
* Monochrome Apple logo — uses currentColor so it follows the button text color (theme-aware).
|
|
18
|
+
*
|
|
19
|
+
* Vector data exported from Figma (node 2609:109006); the glyph spans the full
|
|
20
|
+
* 24px height and is inset 2px from the left edge, matching the design.
|
|
21
|
+
*/
|
|
22
|
+
export const AppleIcon = ({ size = 24 }) => (_jsx("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", focusable: "false", children: _jsx("g", { transform: "translate(2 0)", children: _jsx("path", { fill: "currentColor", d: "M19.792 18.7033C19.429 19.5418 18.9994 20.3136 18.5016 21.0232C17.8231 21.9906 17.2676 22.6602 16.8395 23.0321C16.1758 23.6424 15.4647 23.955 14.7032 23.9728C14.1566 23.9728 13.4973 23.8172 12.73 23.5017C11.9601 23.1876 11.2525 23.0321 10.6056 23.0321C9.92709 23.0321 9.19941 23.1876 8.42106 23.5017C7.64153 23.8172 7.01355 23.9817 6.53342 23.9979C5.80322 24.0291 5.07539 23.7076 4.3489 23.0321C3.88521 22.6276 3.30523 21.9343 2.61043 20.9521C1.86498 19.9033 1.25211 18.687 0.771975 17.3004C0.25777 15.8026 0 14.3523 0 12.9482C0 11.3398 0.347544 9.95259 1.04367 8.79011C1.59076 7.85636 2.31859 7.11979 3.22953 6.57906C4.14046 6.03834 5.12473 5.76279 6.18469 5.74516C6.76467 5.74516 7.52524 5.92457 8.4704 6.27715C9.41288 6.63091 10.0181 6.81032 10.2834 6.81032C10.4817 6.81032 11.154 6.60054 12.2937 6.18234C13.3714 5.7945 14.281 5.63391 15.0262 5.69717C17.0454 5.86012 18.5624 6.6561 19.5712 8.09013C17.7654 9.18432 16.8721 10.7169 16.8898 12.6829C16.9061 14.2142 17.4617 15.4886 18.5535 16.5004C19.0483 16.97 19.6009 17.333 20.2156 17.5907C20.0823 17.9774 19.9416 18.3477 19.792 18.7033ZM15.161 0.480137C15.161 1.68041 14.7225 2.8011 13.8484 3.83841C12.7937 5.07155 11.5179 5.78413 10.1343 5.67168C10.1167 5.52769 10.1065 5.37614 10.1065 5.21688C10.1065 4.06462 10.6081 2.83147 11.4989 1.82321C11.9436 1.3127 12.5092 0.888228 13.1951 0.549615C13.8796 0.216055 14.5269 0.031589 15.1358 0C15.1536 0.160458 15.161 0.320926 15.161 0.480137Z" }) }) }));
|
|
@@ -19,6 +19,24 @@ const ASPECT_RATIO_BY_VIEW = {
|
|
|
19
19
|
agent: '264 / 268',
|
|
20
20
|
video: '16 / 9',
|
|
21
21
|
};
|
|
22
|
+
/** Empty-state label per view variant, shown over the silhouette when there is no image. */
|
|
23
|
+
const EMPTY_TEXT_BY_VIEW = {
|
|
24
|
+
avatar: 'Avatar is not available',
|
|
25
|
+
agent: 'Agent is not available',
|
|
26
|
+
video: 'Video is not available',
|
|
27
|
+
};
|
|
28
|
+
/**
|
|
29
|
+
* Height of the empty-state silhouette (avatar/agent views). The empty-state
|
|
30
|
+
* label sits on the silhouette's vertical midpoint, i.e. half of this up from
|
|
31
|
+
* the bottom of the media area.
|
|
32
|
+
*/
|
|
33
|
+
const SILHOUETTE_HEIGHT = 224;
|
|
34
|
+
/** Copy for the stock-agent badge — the card's only badge. */
|
|
35
|
+
const STOCK_AGENT_BADGE_TEXT = 'Stock Agent';
|
|
36
|
+
/** Label shown beneath the spinner while the entity is processing. */
|
|
37
|
+
const PROCESSING_TEXT = 'Processing...';
|
|
38
|
+
/** Accessible label for the error state, on the warning icon. */
|
|
39
|
+
const ERROR_TEXT = 'Something went wrong';
|
|
22
40
|
/** Hook the root's hover/focus rules use to reveal the action buttons. */
|
|
23
41
|
const ACTIONS_CLASS = 'EntityCard-actions';
|
|
24
42
|
const spin = keyframes `
|
|
@@ -27,11 +45,12 @@ const spin = keyframes `
|
|
|
27
45
|
`;
|
|
28
46
|
/** A continuously rotating refresh icon, matching the AgentCard processing spinner. */
|
|
29
47
|
const Spinner = () => (_jsx(Box, { display: 'flex', sx: { animation: `${spin} 1.5s linear infinite` }, children: _jsx(ArrowsClockwise, { size: 24, color: 'var(--color-text-text-white)' }) }));
|
|
30
|
-
export const EntityCard = ({ view = 'avatar', name, image, description = '', showDescription = false, date, aspectRatio, processing = false,
|
|
48
|
+
export const EntityCard = ({ view = 'avatar', name, image, description = '', showDescription = false, date, aspectRatio, processing = false, error = false, onPreview, previewButtonText, previewIcon = 'Play', previewButtonClassName, stockAgent = false, menuItems = [], showMenu = false, width, testId, }) => {
|
|
31
49
|
const [hovered, setHovered] = useState(false);
|
|
32
50
|
const [menuOpen, setMenuOpen] = useState(false);
|
|
33
51
|
const [imageError, setImageError] = useState(false);
|
|
34
52
|
const isVideo = view === 'video';
|
|
53
|
+
const isAgent = view === 'agent';
|
|
35
54
|
const cardWidth = width ?? WIDTH_BY_VIEW[view];
|
|
36
55
|
const imageAspectRatio = aspectRatio ?? ASPECT_RATIO_BY_VIEW[view];
|
|
37
56
|
const entityKey = name?.toLowerCase()?.replace(/\s+/g, '-');
|
|
@@ -40,8 +59,9 @@ export const EntityCard = ({ view = 'avatar', name, image, description = '', sho
|
|
|
40
59
|
const canPreview = !!onPreview && !isProcessing && !error;
|
|
41
60
|
const showActions = canPreview || hasMenu;
|
|
42
61
|
const active = hovered || menuOpen;
|
|
43
|
-
const showBadge =
|
|
62
|
+
const showBadge = isAgent && stockAgent && !error;
|
|
44
63
|
const showImage = !!image && !imageError && !error;
|
|
64
|
+
const emptyText = EMPTY_TEXT_BY_VIEW[view];
|
|
45
65
|
const resolvedTestId = testId ?? `${entityKey}-${isVideo ? 'video' : 'entity'}-card`;
|
|
46
66
|
const handlePreviewButtonClick = (event) => {
|
|
47
67
|
event.stopPropagation();
|
|
@@ -63,21 +83,24 @@ export const EntityCard = ({ view = 'avatar', name, image, description = '', sho
|
|
|
63
83
|
opacity: 1,
|
|
64
84
|
pointerEvents: 'auto',
|
|
65
85
|
},
|
|
66
|
-
}, "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":
|
|
86
|
+
}, "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": ERROR_TEXT, title: ERROR_TEXT, 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) })) : (_jsxs(Box, { position: 'relative', width: '100%', height: '100%', overflow: 'hidden', bgcolor: view === 'agent'
|
|
67
87
|
? 'var(--color-background-bg-component-disabled)'
|
|
68
|
-
: 'var(--color-background-bg-button-disabled)', children: _jsx(Box, { position: 'absolute', bottom: 0, left: '50%', sx: {
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
88
|
+
: 'var(--color-background-bg-button-disabled)', children: [_jsx(Box, { position: 'absolute', bottom: 0, left: '50%', sx: {
|
|
89
|
+
transform: 'translateX(-50%)',
|
|
90
|
+
color: 'var(--color-border-border-subtle)',
|
|
91
|
+
aspectRatio: '206 / 224',
|
|
92
|
+
...(isVideo
|
|
93
|
+
? { height: '100%', maxWidth: '100%' }
|
|
94
|
+
: { width: '206px', height: `${SILHOUETTE_HEIGHT}px` }),
|
|
95
|
+
}, children: _jsx(AvatarSilhouette, {}) }), !!emptyText && (_jsx(Box, { position: 'absolute', left: 0, right: 0, bottom: isVideo ? '50%' : `${SILHOUETTE_HEIGHT / 2}px`, display: 'flex', justifyContent: 'center', padding: '0 var(--spacing-tokens-size-in-px-spacing-spacing-lg)', boxSizing: 'border-box', children: _jsx(Typography, { text: emptyText, size: TypographySize.HeadingXS, weight: TypographyWeight.SemiBold, color: 'var(--color-text-text-subtle)', textStyle: {
|
|
96
|
+
textAlign: 'center',
|
|
97
|
+
wordBreak: 'break-word',
|
|
98
|
+
} }) }))] })), _jsx(Box, { position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)', sx: {
|
|
76
99
|
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%)',
|
|
77
100
|
opacity: active && !isProcessing && !error ? 1 : 0,
|
|
78
101
|
transition: 'opacity 0.15s ease-in-out',
|
|
79
102
|
pointerEvents: 'none',
|
|
80
|
-
} }), 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:
|
|
103
|
+
} }), 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: PROCESSING_TEXT })] })), 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: STOCK_AGENT_BADGE_TEXT, color: BadgeColor.Violet, size: BadgeSize.md, testId: `${entityKey}-stock-agent-badge` }) })), 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: {
|
|
81
104
|
zIndex: 4,
|
|
82
105
|
transition: 'opacity 0.15s ease-in-out',
|
|
83
106
|
...(menuOpen
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import { EntityCard } from './EntityCard';
|
|
2
|
-
import { BadgeColor } from '../UI';
|
|
3
2
|
const meta = {
|
|
4
3
|
title: 'Design System/Components/EntityCard/EntityCard',
|
|
5
4
|
component: EntityCard,
|
|
@@ -59,27 +58,11 @@ const meta = {
|
|
|
59
58
|
description: 'Show the processing overlay (spinner + label)',
|
|
60
59
|
table: { type: { summary: 'boolean' } },
|
|
61
60
|
},
|
|
62
|
-
processingText: {
|
|
63
|
-
control: 'text',
|
|
64
|
-
description: 'Processing overlay label',
|
|
65
|
-
table: {
|
|
66
|
-
type: { summary: 'string' },
|
|
67
|
-
defaultValue: { summary: 'Please wait' },
|
|
68
|
-
},
|
|
69
|
-
},
|
|
70
61
|
error: {
|
|
71
62
|
control: 'boolean',
|
|
72
63
|
description: 'Show the error state (tinted media area + warning icon)',
|
|
73
64
|
table: { type: { summary: 'boolean' } },
|
|
74
65
|
},
|
|
75
|
-
errorText: {
|
|
76
|
-
control: 'text',
|
|
77
|
-
description: "Accessible label for the error state (the warning icon's aria-label/title)",
|
|
78
|
-
table: {
|
|
79
|
-
type: { summary: 'string' },
|
|
80
|
-
defaultValue: { summary: 'Something went wrong' },
|
|
81
|
-
},
|
|
82
|
-
},
|
|
83
66
|
showMenu: {
|
|
84
67
|
control: 'boolean',
|
|
85
68
|
description: 'Whether to show the menu on hover',
|
|
@@ -102,23 +85,12 @@ const meta = {
|
|
|
102
85
|
defaultValue: { summary: 'Play' },
|
|
103
86
|
},
|
|
104
87
|
},
|
|
105
|
-
|
|
88
|
+
stockAgent: {
|
|
106
89
|
control: 'boolean',
|
|
107
|
-
description: '
|
|
108
|
-
table: { type: { summary: 'boolean' } },
|
|
109
|
-
},
|
|
110
|
-
statusBadgeText: {
|
|
111
|
-
control: 'text',
|
|
112
|
-
description: 'Status badge text (e.g. "Active")',
|
|
113
|
-
table: { type: { summary: 'string' } },
|
|
114
|
-
},
|
|
115
|
-
statusBadgeColor: {
|
|
116
|
-
control: 'select',
|
|
117
|
-
options: Object.values(BadgeColor),
|
|
118
|
-
description: 'Status badge color',
|
|
90
|
+
description: 'Marks the entity as a stock agent — renders the "Stock Agent" badge (top-left). `agent` view only',
|
|
119
91
|
table: {
|
|
120
|
-
type: { summary: '
|
|
121
|
-
defaultValue: { summary:
|
|
92
|
+
type: { summary: 'boolean' },
|
|
93
|
+
defaultValue: { summary: 'false' },
|
|
122
94
|
},
|
|
123
95
|
},
|
|
124
96
|
menuItems: {
|
|
@@ -158,8 +130,7 @@ export const AgentView = {
|
|
|
158
130
|
onPreview: () => { },
|
|
159
131
|
previewButtonText: 'Join',
|
|
160
132
|
previewIcon: 'VideoCamera',
|
|
161
|
-
|
|
162
|
-
statusBadgeText: 'Active',
|
|
133
|
+
stockAgent: true,
|
|
163
134
|
showMenu: true,
|
|
164
135
|
menuItems: [
|
|
165
136
|
{ label: 'Conversation Link', icon: 'ShareNetwork', onClick: () => { } },
|
|
@@ -177,7 +148,7 @@ export const AgentView = {
|
|
|
177
148
|
},
|
|
178
149
|
docs: {
|
|
179
150
|
description: {
|
|
180
|
-
story: 'The agent view — wider, square image,
|
|
151
|
+
story: 'The agent view — wider, square image, the "Stock Agent" badge, and a labelled "Join" action. Hover to reveal the action row.',
|
|
181
152
|
},
|
|
182
153
|
},
|
|
183
154
|
},
|
|
@@ -213,13 +184,13 @@ export const NoActions = {
|
|
|
213
184
|
export const NoImage = {
|
|
214
185
|
args: {
|
|
215
186
|
...Default.args,
|
|
216
|
-
name: '
|
|
187
|
+
name: 'Nelly Customer Support',
|
|
217
188
|
image: undefined,
|
|
218
189
|
},
|
|
219
190
|
parameters: {
|
|
220
191
|
docs: {
|
|
221
192
|
description: {
|
|
222
|
-
story: 'Fallback placeholder shown when no image is provided or it fails to load.',
|
|
193
|
+
story: 'Fallback placeholder shown when no image is provided or it fails to load — the avatar silhouette plus an "Avatar is not available" label sitting on the silhouette\'s midpoint. The `video` view reads "Video is not available".',
|
|
223
194
|
},
|
|
224
195
|
},
|
|
225
196
|
},
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import { MenuItemProps
|
|
1
|
+
import { MenuItemProps } from '../UI';
|
|
2
2
|
import { IconName } from '../../utils';
|
|
3
3
|
/**
|
|
4
4
|
* Entity card view variants.
|
|
5
5
|
* - `avatar`: portrait avatar tile (icon-only preview action)
|
|
6
|
-
* - `agent`: wider, square agent tile (labelled action +
|
|
6
|
+
* - `agent`: wider, square agent tile (labelled action + stock-agent badge)
|
|
7
7
|
* - `video`: landscape media tile (name + date footer, optional processing overlay)
|
|
8
8
|
*/
|
|
9
9
|
export type EntityCardView = 'avatar' | 'agent' | 'video';
|
|
@@ -27,12 +27,8 @@ export interface EntityCardProps {
|
|
|
27
27
|
aspectRatio?: string;
|
|
28
28
|
/** Show the processing overlay (spinner + label) over the image */
|
|
29
29
|
processing?: boolean;
|
|
30
|
-
/** Processing overlay label. Defaults to "Please wait" */
|
|
31
|
-
processingText?: string;
|
|
32
30
|
/** Show the error state (tinted media area + warning icon) in place of the image */
|
|
33
31
|
error?: boolean;
|
|
34
|
-
/** Accessible label for the error state — exposed as the warning icon's aria-label/title. Defaults to "Something went wrong" */
|
|
35
|
-
errorText?: string;
|
|
36
32
|
/** Preview handler — renders the action button on hover */
|
|
37
33
|
onPreview?: () => void;
|
|
38
34
|
/** Label for the action button; when set it renders text + icon, otherwise icon-only */
|
|
@@ -41,12 +37,8 @@ export interface EntityCardProps {
|
|
|
41
37
|
previewIcon?: IconName;
|
|
42
38
|
/** Extra class names merged onto the action button — used by analytics click triggers */
|
|
43
39
|
previewButtonClassName?: string;
|
|
44
|
-
/**
|
|
45
|
-
|
|
46
|
-
/** Status badge text (e.g. "Active") */
|
|
47
|
-
statusBadgeText?: string;
|
|
48
|
-
/** Status badge color (defaults to Green) */
|
|
49
|
-
statusBadgeColor?: BadgeColor;
|
|
40
|
+
/** Marks the entity as a stock agent — renders the "Stock Agent" badge (top-left). `agent` view only */
|
|
41
|
+
stockAgent?: boolean;
|
|
50
42
|
/** Menu items for the dropdown — renders the menu button on hover */
|
|
51
43
|
menuItems?: MenuItemProps[];
|
|
52
44
|
/** Whether to show the menu */
|
|
@@ -192,10 +192,10 @@ export const PromoBanner = ({ title = 'Real-time AI avatars for every conversati
|
|
|
192
192
|
width: 'fit-content',
|
|
193
193
|
'& button': { width: '100%' },
|
|
194
194
|
},
|
|
195
|
-
}, children: [promoCode && (_jsxs(Box, { position: "relative", display: "flex", children: [_jsx(MainButton, { text: promoCode, size: ButtonSize.
|
|
195
|
+
}, children: [promoCode && (_jsxs(Box, { position: "relative", display: "flex", children: [_jsx(MainButton, { text: promoCode, size: ButtonSize.xxs, hierarchy: ButtonHierarchy.SecondaryColor, showTrailingIcon: true, trailingIcon: copied ? 'Check' : 'Copy', trailingIconSlot: actionsMotion ? (_jsx(DissolveIcon, { icon: copied ? 'Check' : 'Copy', size: 20, color: "currentColor" })) : undefined, onClick: handleCopyPromoCode, style: {
|
|
196
196
|
border: '1px dashed var(--color-border-border-secondary-action)',
|
|
197
197
|
height: '100%',
|
|
198
|
-
}, testId: testId ? `${testId}-promo-code` : undefined }), promoCodeLabel && (_jsx(Box, { position: "absolute", top: "-13px", left: "-8px", borderRadius: "var(--spacing-tokens-size-in-px-radius-radius-xs)",
|
|
198
|
+
}, testId: testId ? `${testId}-promo-code` : undefined }), promoCodeLabel && (_jsx(Box, { position: "absolute", top: "-13px", left: "-8px", display: "flex", alignItems: "center", borderRadius: "var(--spacing-tokens-size-in-px-radius-radius-xs)", paddingX: "var(--spacing-tokens-size-in-px-spacing-spacing-sm)", paddingTop: "calc(var(--spacing-tokens-size-in-px-spacing-spacing-xxs) + 1px)", paddingBottom: "var(--spacing-tokens-size-in-px-spacing-spacing-xxs)", whiteSpace: "nowrap", zIndex: 1, sx: {
|
|
199
199
|
// On copy the pill morphs from the violet "promo code"
|
|
200
200
|
// badge into the DS success badge, easing the colour so the
|
|
201
201
|
// state change feels intentional rather than an instant swap.
|
|
@@ -215,5 +215,5 @@ export const PromoBanner = ({ title = 'Real-time AI avatars for every conversati
|
|
|
215
215
|
// pin the label to the matching on-colour text token.
|
|
216
216
|
color: copied
|
|
217
217
|
? 'var(--color-text-text-success-on-color)'
|
|
218
|
-
: 'var(--color-text-text-dark)', children: copied ? 'COPIED!' : promoCodeLabel }) }))] })), resolvedCtaText && (_jsx(MainButton, { text: resolvedCtaText, size: ButtonSize.
|
|
218
|
+
: 'var(--color-text-text-dark)', children: copied ? 'COPIED!' : promoCodeLabel }) }))] })), resolvedCtaText && (_jsx(MainButton, { text: resolvedCtaText, size: ButtonSize.xxs, hierarchy: ButtonHierarchy.Primary, onClick: onCtaClick, loading: ctaLoading, disabled: ctaDisabled, testId: testId ? `${testId}-cta` : undefined }))] })), !isMobile && footerText && (_jsx(Typography, { size: TypographySize.TextXS, weight: TypographyWeight.Regular, color: "var(--color-text-text-title)", textStyle: { width: '100%' }, children: footerText }))] }), renderAvatarMatrix(RIGHT_COLUMNS)] }));
|
|
219
219
|
};
|