@beydesign/storybook 0.2.17 → 0.2.19

package/dist/stories/Buttons/MainButton.js

@@ -51,7 +51,9 @@ const StyledButton = styled.button `
         case ButtonHierarchy.WhiteText:
             if (props.$state === ButtonState.Disabled || props.$disabled)
                 return 'var(--color-background-bg-button-disabled)';
-            return 'var(--color-background-bg-overlay-1)';
+            // Figma "White-text" fill is the Primary/Black/40 primitive
+            // (rgba(0,0,0,0.4)) — a dark scrim over media, not an overlay token.
+            return 'var(--primitives-white-primary-black-40)';
         default:
             return 'var(--color-background-bg-brand-primary)';
     }
@@ -183,7 +185,8 @@ const StyledButton = styled.button `
         case ButtonHierarchy.TertiaryColor:
             return 'var(--color-background-bg-card-highlight-hover)';
         case ButtonHierarchy.WhiteText:
-            return 'var(--color-background-bg-overlay-2)';
+            // Darken the black-40 scrim one step on hover (no black-50 exists).
+            return 'var(--primitives-white-primary-black-60)';
         default:
             return 'var(--color-background-bg-brand-primary-hover)';
     }

package/dist/stories/UI/SelectAvatarCard.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { SelectAvatarCardProps } from './types';
+/**
+ * SelectAvatarCard — a media card for the currently selected avatar. Mirrors the
+ * Figma "Selected Avatar" component with its Filled (Default + Hover), Empty and
+ * Error states. In the Filled state the Change action is always visible and the
+ * Preview action is revealed on hover.
+ */
+export declare const SelectAvatarCard: React.FC<SelectAvatarCardProps>;

package/dist/stories/UI/SelectAvatarCard.js

@@ -0,0 +1,61 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Box } from '@mui/material';
+import { SelectAvatarCardState } from './types';
+import { Typography, TypographySize, TypographyWeight } from '../Typography';
+import { MainButton, ButtonHierarchy, ButtonSize, ButtonShape, } from '../Buttons';
+import { getIconComponent } from '../../utils';
+// Scrim behind the avatar name, matching the Figma "name section" gradient
+// (transparent at the top, fading to ~64% #2d2637 at the bottom).
+const NAME_GRADIENT = 'linear-gradient(180deg, rgba(45, 38, 55, 0) 0%, rgba(45, 38, 55, 0.047) 11%, rgba(45, 38, 55, 0.094) 20%, rgba(45, 38, 55, 0.16) 34%, rgba(45, 38, 55, 0.64) 100%)';
+/**
+ * SelectAvatarCard — a media card for the currently selected avatar. Mirrors the
+ * Figma "Selected Avatar" component with its Filled (Default + Hover), Empty and
+ * Error states. In the Filled state the Change action is always visible and the
+ * Preview action is revealed on hover.
+ */
+export const SelectAvatarCard = ({ state = SelectAvatarCardState.Filled, showHeader = true, headerTitle = 'Selected Avatar', avatarImage, avatarName, showChangeButton = true, changeButtonText = 'Change', onChange, showPreviewButton = true, previewButtonText = 'Preview', onPreview, selectButtonText = 'Select Avatar', onSelect, width = '552px', height = '344px', style, testId, }) => {
+    const isFilled = state === SelectAvatarCardState.Filled;
+    const isEmpty = state === SelectAvatarCardState.Empty;
+    const isError = state === SelectAvatarCardState.Error;
+    const mediaBackground = isEmpty
+        ? 'var(--color-background-bg-element)'
+        : isError
+            ? 'var(--color-background-bg-button-disabled)'
+            : 'transparent';
+    return (_jsxs(Box, { display: "flex", flexDirection: "column", gap: "var(--spacing-tokens-size-in-px-spacing-spacing-md)", width: width, height: height, boxSizing: "border-box", padding: "var(--spacing-tokens-size-in-px-spacing-spacing-xl)", borderRadius: "var(--spacing-tokens-size-in-px-spacing-spacing-md)", bgcolor: "var(--color-background-bg-page-contrast)", sx: {
+            border: '1px solid var(--color-border-border-subtle)',
+            boxShadow: '0px 2px 4px 0px var(--global-shadows-shadow-xs-color)',
+            // Reveal the Preview pill when the card is hovered.
+            '&:hover .select-avatar-card__preview': {
+                opacity: 1,
+                visibility: 'visible',
+            },
+            ...style,
+        }, "data-testid": testId ?? 'select-avatar-card', children: [showHeader && (_jsx(Box, { display: "flex", alignItems: "center", width: "100%", children: _jsx(Typography, { size: TypographySize.HeadingXS, weight: TypographyWeight.SemiBold, color: "var(--color-text-text-title)", textStyle: { flex: '1 0 0', minWidth: 0, wordBreak: 'break-word' }, children: headerTitle }) })), _jsxs(Box, { position: "relative", flex: "1 0 0", minHeight: 0, width: "100%", overflow: "hidden", borderRadius: "var(--spacing-tokens-size-in-px-radius-radius-sm)", bgcolor: mediaBackground, children: [isFilled && (_jsxs(_Fragment, { children: [avatarImage && (_jsx(Box, { component: "img", src: avatarImage, alt: avatarName ?? '', position: "absolute", sx: {
+                                    inset: 0,
+                                    width: '100%',
+                                    height: '100%',
+                                    objectFit: 'cover',
+                                    pointerEvents: 'none',
+                                } })), _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", alignItems: "flex-start", justifyContent: "flex-end", gap: "10px", children: [showPreviewButton && (_jsx(Box, { className: "select-avatar-card__preview", sx: {
+                                            opacity: 0,
+                                            visibility: 'hidden',
+                                            transition: 'opacity 0.15s ease-in-out',
+                                        }, children: _jsx(MainButton, { text: previewButtonText, size: ButtonSize.md, hierarchy: ButtonHierarchy.SecondaryTransparent, showLeadingIcon: true, leadingIcon: "Play", onClick: onPreview, testId: testId ? `${testId}-preview` : undefined }) })), showChangeButton && (_jsx(MainButton, { text: changeButtonText, size: ButtonSize.md, hierarchy: ButtonHierarchy.WhiteText, showLeadingIcon: true, leadingIcon: "ArrowsLeftRight", onClick: onChange, testId: testId ? `${testId}-change` : undefined }))] }), avatarName && (_jsx(Box, { position: "absolute", left: 0, right: 0, bottom: 0, display: "flex", alignItems: "center", padding: "24px 12px 12px", sx: { background: NAME_GRADIENT }, children: _jsx(Typography, { size: TypographySize.HeadingXS, weight: TypographyWeight.SemiBold, color: "var(--color-text-text-white)", textStyle: {
+                                        flex: '1 0 0',
+                                        minWidth: 0,
+                                        wordBreak: 'break-word',
+                                    }, children: avatarName }) }))] })), isEmpty && (_jsx(Box, { position: "absolute", sx: {
+                            top: '50%',
+                            left: '50%',
+                            transform: 'translate(-50%, -50%)',
+                        }, children: _jsx(MainButton, { text: selectButtonText, hierarchy: ButtonHierarchy.PrimaryLemon, size: ButtonSize.xs, shape: ButtonShape.Square, onClick: onSelect, testId: testId ? `${testId}-select` : undefined }) })), isError && (_jsx(Box, { position: "absolute", display: "flex", alignItems: "center", justifyContent: "center", sx: {
+                            top: '50%',
+                            left: '50%',
+                            transform: 'translate(-50%, -50%)',
+                        }, children: getIconComponent('Warning', {
+                            size: 182,
+                            weight: 'regular',
+                            color: 'var(--color-foreground-fg-disabled)',
+                        }) }))] })] }));
+};

package/dist/stories/UI/SelectAvatarCard.stories.d.ts

@@ -0,0 +1,21 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { SelectAvatarCard } from './SelectAvatarCard';
+declare const meta: Meta<typeof SelectAvatarCard>;
+export default meta;
+type Story = StoryObj<typeof SelectAvatarCard>;
+/**
+ * An avatar is selected. The Change action is always visible; hover the card to
+ * reveal the Preview action.
+ */
+export declare const Default: Story;
+/** No avatar picked yet — a centered call to action to select one. */
+export declare const Empty: Story;
+/** The preview could not be loaded — a centered warning icon. */
+export declare const Error: Story;
+/** The Filled card without its header, e.g. when embedded under another label. */
+export declare const WithoutHeader: Story;
+/**
+ * All four states side by side, matching the Figma frame. Hover the first card
+ * to reveal its Preview action.
+ */
+export declare const AllStates: Story;

package/dist/stories/UI/SelectAvatarCard.stories.js

@@ -0,0 +1,85 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { SelectAvatarCard } from './SelectAvatarCard';
+import { SelectAvatarCardState } from './types';
+import { BANNER_AVATARS } from './bannerAvatars';
+const SAMPLE_AVATAR = BANNER_AVATARS.nelly;
+const meta = {
+    title: 'Design System/Components/UI/SelectAvatarCard',
+    component: SelectAvatarCard,
+    parameters: {
+        layout: 'centered',
+        design: {
+            type: 'figspec',
+            url: 'https://www.figma.com/design/mIhjz2yJjcpLlIqw6oUivt/Beyond-Presence?node-id=4644-15058',
+        },
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        state: {
+            control: 'select',
+            options: Object.values(SelectAvatarCardState),
+            description: 'Visual state of the card',
+        },
+        showHeader: { control: 'boolean' },
+        headerTitle: { control: 'text' },
+        avatarImage: { control: 'text', description: 'Preview image URL (Filled)' },
+        avatarName: { control: 'text', description: 'Avatar name (Filled)' },
+        showChangeButton: { control: 'boolean' },
+        changeButtonText: { control: 'text' },
+        showPreviewButton: {
+            control: 'boolean',
+            description: 'Reveal the Preview action on hover (Filled)',
+        },
+        previewButtonText: { control: 'text' },
+        selectButtonText: { control: 'text' },
+        width: { control: 'text', table: { defaultValue: { summary: '552px' } } },
+        height: { control: 'text', table: { defaultValue: { summary: '344px' } } },
+        onChange: { action: 'change clicked' },
+        onPreview: { action: 'preview clicked' },
+        onSelect: { action: 'select clicked' },
+    },
+};
+export default meta;
+/**
+ * An avatar is selected. The Change action is always visible; hover the card to
+ * reveal the Preview action.
+ */
+export const Default = {
+    args: {
+        state: SelectAvatarCardState.Filled,
+        avatarImage: SAMPLE_AVATAR,
+        avatarName: 'Anna',
+    },
+};
+/** No avatar picked yet — a centered call to action to select one. */
+export const Empty = {
+    args: {
+        state: SelectAvatarCardState.Empty,
+    },
+};
+/** The preview could not be loaded — a centered warning icon. */
+export const Error = {
+    args: {
+        state: SelectAvatarCardState.Error,
+    },
+};
+/** The Filled card without its header, e.g. when embedded under another label. */
+export const WithoutHeader = {
+    args: {
+        ...Default.args,
+        showHeader: false,
+    },
+};
+/**
+ * All four states side by side, matching the Figma frame. Hover the first card
+ * to reveal its Preview action.
+ */
+export const AllStates = {
+    parameters: { layout: 'padded' },
+    render: () => (_jsxs("div", { style: {
+            display: 'flex',
+            flexWrap: 'wrap',
+            gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-lg)',
+            alignItems: 'flex-start',
+        }, children: [_jsx(SelectAvatarCard, { state: SelectAvatarCardState.Filled, avatarImage: SAMPLE_AVATAR, avatarName: "Anna", onChange: () => { }, onPreview: () => { } }), _jsx(SelectAvatarCard, { state: SelectAvatarCardState.Empty, onSelect: () => { } }), _jsx(SelectAvatarCard, { state: SelectAvatarCardState.Error })] })),
+};

package/dist/stories/UI/TabMenu.js

@@ -32,25 +32,43 @@ export const TabMenu = ({ tabs, activeTab = 0, onTabChange, size = TabMenuSize.m
     const tabRefs = useRef([]);
     const [indicator, setIndicator] = useState(null);
     useLayoutEffect(() => {
+        const container = containerRef.current;
+        if (!container)
+            return;
         const measure = () => {
-            const container = containerRef.current;
             const tab = tabRefs.current[activeTab];
-            if (!container || !tab)
+            if (!tab)
                 return;
-            const containerRect = container.getBoundingClientRect();
-            const tabRect = tab.getBoundingClientRect();
+            // Use offset* rather than getBoundingClientRect deltas: they are relative
+            // to the container's padding box, which is exactly the origin an absolutely
+            // positioned child (the indicator) is laid out from. Bounding-rect deltas
+            // would include the container's border and push the highlight 1px off.
             setIndicator({
-                left: tabRect.left - containerRect.left,
-                top: tabRect.top - containerRect.top,
-                width: tabRect.width,
-                height: tabRect.height,
+                left: tab.offsetLeft,
+                top: tab.offsetTop,
+                width: tab.offsetWidth,
+                height: tab.offsetHeight,
             });
         };
         measure();
-        window.addEventListener('resize', measure);
-        return () => window.removeEventListener('resize', measure);
+        // Re-measure whenever the container or a tab changes size (e.g. responsive
+        // reflow) so the highlight tracks the active tab.
+        const resizeObserver = new ResizeObserver(measure);
+        resizeObserver.observe(container);
+        tabRefs.current.forEach((tab) => tab && resizeObserver.observe(tab));
+        // Text metrics — and therefore tab widths — change when the fallback font is
+        // swapped for Figtree, so re-measure once web fonts have finished loading.
+        let cancelled = false;
+        document.fonts?.ready.then(() => {
+            if (!cancelled)
+                measure();
+        });
+        return () => {
+            cancelled = true;
+            resizeObserver.disconnect();
+        };
     }, [activeTab, size, showDividers, tabs]);
-    return (_jsxs(Box, { ref: containerRef, "data-testid": testId, position: 'relative', display: 'inline-flex', flexDirection: 'row', alignItems: 'center', gap: tokens.containerGap, padding: tokens.containerPadding, bgcolor: 'var(--color-background-bg-component)', border: '1px solid var(--color-border-border-component)', borderRadius: 'var(--spacing-tokens-size-in-px-radius-radius-md)', sx: style, children: [indicator && (_jsx(Box, { "aria-hidden": true, position: 'absolute', bgcolor: 'var(--color-background-bg-brand-transparent)', borderRadius: tokens.tabRadius, sx: {
+    return (_jsxs(Box, { ref: containerRef, "data-testid": testId, position: 'relative', display: 'inline-flex', flexDirection: 'row', alignItems: 'center', gap: tokens.containerGap, padding: tokens.containerPadding, bgcolor: 'var(--color-background-bg-component)', border: '1px solid var(--color-border-border-component)', borderRadius: 'var(--spacing-tokens-size-in-px-radius-radius-md)', sx: { boxSizing: 'border-box', ...style }, children: [indicator && (_jsx(Box, { "aria-hidden": true, position: 'absolute', bgcolor: 'var(--color-background-bg-brand-transparent)', borderRadius: tokens.tabRadius, sx: {
                     left: 0,
                     top: 0,
                     width: indicator.width,
@@ -67,6 +85,7 @@ export const TabMenu = ({ tabs, activeTab = 0, onTabChange, size = TabMenuSize.m
                 return (_jsxs(React.Fragment, { children: [showDividers && index > 0 && (_jsx(Box, { width: '1px', height: tokens.dividerHeight, bgcolor: 'var(--color-border-border-divider)', flexShrink: 0, sx: { zIndex: 1 } })), _jsx(Box, { ref: (el) => {
                                 tabRefs.current[index] = el;
                             }, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', position: 'relative', flexShrink: 0, height: tokens.tabHeight, paddingX: 'var(--spacing-tokens-size-in-px-spacing-spacing-4xl)', paddingY: tokens.tabPaddingY, borderRadius: tokens.tabRadius, onClick: onTabChange ? () => onTabChange(index) : undefined, sx: {
+                                boxSizing: 'border-box',
                                 zIndex: 1,
                                 cursor: onTabChange ? 'pointer' : 'default',
                                 '&:hover': onTabChange && !isActive

package/dist/stories/UI/index.d.ts

@@ -10,6 +10,7 @@ export * from './Menu';
 export * from './Popover';
 export * from './ProgressIndicator';
 export * from './PromoBanner';
+export * from './SelectAvatarCard';
 export * from './SkeletonLoader';
 export * from './Topbar';
 export * from './types';

package/dist/stories/UI/index.js

@@ -10,6 +10,7 @@ export * from './Menu';
 export * from './Popover';
 export * from './ProgressIndicator';
 export * from './PromoBanner';
+export * from './SelectAvatarCard';
 export * from './SkeletonLoader';
 export * from './Topbar';
 export * from './types';

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

@@ -500,6 +500,59 @@ export interface TabMenuProps {
     /** Test ID of the tab menu. */
     testId?: string;
 }
+/**
+ * Visual state of the {@link SelectAvatarCard}.
+ * - `Filled`: an avatar is selected — shows the preview image, its name and the
+ *   Change action (Preview appears on hover).
+ * - `Empty`: no avatar yet — shows a centered "Select Avatar" button.
+ * - `Error`: the preview failed to load — shows a centered warning icon.
+ */
+export declare enum SelectAvatarCardState {
+    Filled = "Filled",
+    Empty = "Empty",
+    Error = "Error"
+}
+/**
+ * SelectAvatarCard component props — a media card that shows the currently
+ * selected avatar (with Change / Preview actions), an empty state prompting the
+ * user to pick one, or an error state.
+ */
+export interface SelectAvatarCardProps {
+    /** Visual state of the card. Defaults to `Filled`. */
+    state?: SelectAvatarCardState;
+    /** Show the card header. Defaults to `true`. */
+    showHeader?: boolean;
+    /** Header title. Defaults to "Selected Avatar". */
+    headerTitle?: string;
+    /** Avatar preview image URL (used in the `Filled` state). */
+    avatarImage?: string;
+    /** Avatar name shown over the bottom gradient (used in the `Filled` state). */
+    avatarName?: string;
+    /** Show the Change action in the `Filled` state. Defaults to `true`. */
+    showChangeButton?: boolean;
+    /** Change button label. Defaults to "Change". */
+    changeButtonText?: string;
+    /** Called when the Change button is clicked. */
+    onChange?: () => void;
+    /** Reveal the Preview action on hover in the `Filled` state. Defaults to `true`. */
+    showPreviewButton?: boolean;
+    /** Preview button label. Defaults to "Preview". */
+    previewButtonText?: string;
+    /** Called when the Preview button is clicked. */
+    onPreview?: () => void;
+    /** Empty-state button label. Defaults to "Select Avatar". */
+    selectButtonText?: string;
+    /** Called when the empty-state Select Avatar button is clicked. */
+    onSelect?: () => void;
+    /** Width of the card. Defaults to "552px". */
+    width?: string | number;
+    /** Height of the card. Defaults to "344px". */
+    height?: string | number;
+    /** Custom style. */
+    style?: SxProps<Theme>;
+    /** Test id. */
+    testId?: string;
+}
 /**
  * Button card component props — a compact, clickable card with a leading icon,
  * title, description and an optional corner action button.

package/dist/stories/UI/types.js

@@ -118,3 +118,16 @@ export var TabMenuSize;
     TabMenuSize["md"] = "md";
     TabMenuSize["sm"] = "sm";
 })(TabMenuSize || (TabMenuSize = {}));
+/**
+ * Visual state of the {@link SelectAvatarCard}.
+ * - `Filled`: an avatar is selected — shows the preview image, its name and the
+ *   Change action (Preview appears on hover).
+ * - `Empty`: no avatar yet — shows a centered "Select Avatar" button.
+ * - `Error`: the preview failed to load — shows a centered warning icon.
+ */
+export var SelectAvatarCardState;
+(function (SelectAvatarCardState) {
+    SelectAvatarCardState["Filled"] = "Filled";
+    SelectAvatarCardState["Empty"] = "Empty";
+    SelectAvatarCardState["Error"] = "Error";
+})(SelectAvatarCardState || (SelectAvatarCardState = {}));

package/package.json

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