@beydesign/storybook 0.4.8 → 0.4.10

package/dist/stories/EntityCard/EntityCard.js

@@ -29,6 +29,7 @@ const spin = keyframes `
 const Spinner = () => (_jsx(Box, { display: 'flex', sx: { animation: `${spin} 1.5s linear infinite` }, children: _jsx(ArrowsClockwise, { size: 24, color: 'var(--color-text-text-white)' }) }));
 export const EntityCard = ({ view = 'avatar', name, image, description = '', showDescription = false, date, aspectRatio, processing = false, processingText = 'Please wait', error = false, errorText = 'Something went wrong', onPreview, previewButtonText, previewIcon = 'Play', showStatusBadge = false, statusBadgeText = '', statusBadgeColor = BadgeColor.Green, menuItems = [], showMenu = false, width, testId, }) => {
     const [hovered, setHovered] = useState(false);
+    const [menuOpen, setMenuOpen] = useState(false);
     const [imageError, setImageError] = useState(false);
     const isVideo = view === 'video';
     const cardWidth = width ?? WIDTH_BY_VIEW[view];
@@ -38,6 +39,7 @@ export const EntityCard = ({ view = 'avatar', name, image, description = '', sho
     const isProcessing = processing && !error;
     const canPreview = !!onPreview && !isProcessing && !error;
     const showActions = canPreview || hasMenu;
+    const active = hovered || menuOpen;
     const showBadge = showStatusBadge && !!statusBadgeText && !error;
     const showImage = !!image && !imageError && !error;
     const resolvedTestId = testId ?? `${entityKey}-${isVideo ? 'video' : 'entity'}-card`;
@@ -45,7 +47,7 @@ export const EntityCard = ({ view = 'avatar', name, image, description = '', sho
         event.stopPropagation();
         onPreview?.();
     };
-    return (_jsxs(Box, { width: cardWidth, display: 'flex', flexDirection: 'column', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', padding: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)', bgcolor: hovered
+    return (_jsxs(Box, { width: cardWidth, display: 'flex', flexDirection: 'column', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', padding: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)', bgcolor: active
             ? 'var(--color-background-bg-card-highlight-hover)'
             : '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), role: canPreview ? 'button' : undefined, tabIndex: canPreview ? 0 : undefined, "aria-label": canPreview ? (previewButtonText ?? name) : undefined, onClick: canPreview ? onPreview : undefined, onKeyDown: canPreview
             ? (event) => {
@@ -70,18 +72,22 @@ export const EntityCard = ({ view = 'avatar', name, image, description = '', sho
                                     : { width: '206px', height: '224px' }),
                             }, 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: {
                             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%)',
-                            opacity: hovered && !isProcessing && !error ? 1 : 0,
+                            opacity: active && !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 })] })), 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: {
                             zIndex: 4,
                             transition: 'opacity 0.15s ease-in-out',
-                            '@media (hover: hover)': {
-                                opacity: 0,
-                                pointerEvents: 'none',
-                            },
+                            ...(menuOpen
+                                ? { opacity: 1, pointerEvents: 'auto' }
+                                : {
+                                    '@media (hover: hover)': {
+                                        opacity: 0,
+                                        pointerEvents: 'none',
+                                    },
+                                }),
                         }, children: [canPreview &&
-                                (previewButtonText ? (_jsx(MainButton, { text: previewButtonText, showLeadingIcon: true, leadingIcon: previewIcon, iconWeight: 'fill', hierarchy: ButtonHierarchy.SecondaryTransparent, size: ButtonSize.sm, onClick: handlePreviewButtonClick, testId: `${entityKey}-preview-button` })) : (_jsx(MainButton, { displayIcon: previewIcon, displayIconMode: ButtonDisplayMode.Only, hierarchy: ButtonHierarchy.SecondaryTransparent, size: ButtonSize.sm, onClick: handlePreviewButtonClick, testId: `${entityKey}-preview-button` }))), hasMenu && (_jsx(Box, { onClick: (event) => event.stopPropagation(), children: _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: {
+                                (previewButtonText ? (_jsx(MainButton, { text: previewButtonText, showLeadingIcon: true, leadingIcon: previewIcon, iconWeight: 'fill', hierarchy: ButtonHierarchy.SecondaryTransparent, size: ButtonSize.sm, onClick: handlePreviewButtonClick, testId: `${entityKey}-preview-button` })) : (_jsx(MainButton, { displayIcon: previewIcon, displayIconMode: ButtonDisplayMode.Only, hierarchy: ButtonHierarchy.SecondaryTransparent, size: ButtonSize.sm, onClick: handlePreviewButtonClick, testId: `${entityKey}-preview-button` }))), hasMenu && (_jsx(Box, { onClick: (event) => event.stopPropagation(), children: _jsx(Menu, { items: menuItems, testKey: entityKey, size: ButtonSize.sm, onOpenChange: setMenuOpen }) }))] })), 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',
                             backgroundImage: 'linear-gradient(rgba(45, 38, 55, 0) 0%, rgba(45, 38, 55, 0.16) 34%, rgba(45, 38, 55, 0.64) 100%)',

package/dist/stories/Navigation/Drawer/DrawerBody.js

@@ -15,6 +15,19 @@ const LogoHeader = styled.div `
   min-height: 38px;
   margin-bottom: 40px;
 `;
+const LogoButton = styled.button `
+  display: flex;
+  align-items: center;
+  padding: 0;
+  border: none;
+  background: none;
+  cursor: pointer;
+  &:focus-visible {
+    outline: 2px solid var(--color-border-border-component-active);
+    outline-offset: 2px;
+    border-radius: var(--spacing-tokens-size-in-px-radius-radius-xs, 4px);
+  }
+`;
 const Nav = styled.nav `
   display: flex;
   flex-direction: column;
@@ -69,5 +82,5 @@ export const DrawerBody = ({ navItems, activeKey, size = DrawerSize.Expanded, cr
             item.onClick?.();
         }
     };
-    return (_jsxs(_Fragment, { children: [_jsx(LogoHeader, { "$collapsed": isCollapsed, children: _jsx(Logo, { variant: isCollapsed ? LogoVariant.Icon : LogoVariant.Horizontal, color: logo?.color ?? 'var(--color-foreground-fg-brand-logo)', gradient: logo?.gradient, svgUrl: logo?.svgUrl }) }), _jsxs(Nav, { children: [_jsx(NavTop, { children: navItems.map((item) => (_jsx(DrawerNavItem, { text: item.text, icon: item.icon, state: resolveState(item, activeKey), size: size, hierarchy: item.hierarchy ?? DrawerNavItemHierarchy.First, showBadge: item.showBadge, badgeText: item.badgeText, showSubNavCaret: Boolean(item.subNav && onSubNavOpen), onClick: () => handleItemClick(item) }, item.key ?? item.text))) }), (credits || creditsLoading || profile || profileLoading) && (_jsxs(Footer, { children: [(credits || creditsLoading) && (_jsx(FooterSlot, { children: creditsLoading ? (_jsx(DrawerCreditsCardSkeleton, { size: size })) : (_jsx(DrawerCreditsCard, { ...credits, size: size })) })), (profile || profileLoading) && (_jsx(FooterSlot, { children: profileLoading ? (_jsx(DrawerProfileSkeleton, { size: size })) : (profile && _jsx(DrawerProfile, { ...profile, size: size })) }))] }))] })] }));
+    return (_jsxs(_Fragment, { children: [_jsx(LogoHeader, { "$collapsed": isCollapsed, children: logo?.onClick ? (_jsx(LogoButton, { type: "button", onClick: logo.onClick, "aria-label": "Go to home", children: _jsx(Logo, { variant: isCollapsed ? LogoVariant.Icon : LogoVariant.Horizontal, color: logo?.color ?? 'var(--color-foreground-fg-brand-logo)', gradient: logo?.gradient, svgUrl: logo?.svgUrl }) })) : (_jsx(Logo, { variant: isCollapsed ? LogoVariant.Icon : LogoVariant.Horizontal, color: logo?.color ?? 'var(--color-foreground-fg-brand-logo)', gradient: logo?.gradient, svgUrl: logo?.svgUrl })) }), _jsxs(Nav, { children: [_jsx(NavTop, { children: navItems.map((item) => (_jsx(DrawerNavItem, { text: item.text, icon: item.icon, state: resolveState(item, activeKey), size: size, hierarchy: item.hierarchy ?? DrawerNavItemHierarchy.First, showBadge: item.showBadge, badgeText: item.badgeText, showSubNavCaret: Boolean(item.subNav && onSubNavOpen), onClick: () => handleItemClick(item) }, item.key ?? item.text))) }), (credits || creditsLoading || profile || profileLoading) && (_jsxs(Footer, { children: [(credits || creditsLoading) && (_jsx(FooterSlot, { children: creditsLoading ? (_jsx(DrawerCreditsCardSkeleton, { size: size })) : (_jsx(DrawerCreditsCard, { ...credits, size: size })) })), (profile || profileLoading) && (_jsx(FooterSlot, { children: profileLoading ? (_jsx(DrawerProfileSkeleton, { size: size })) : (profile && _jsx(DrawerProfile, { ...profile, size: size })) }))] }))] })] }));
 };

package/dist/stories/Navigation/Drawer/types.d.ts

@@ -172,11 +172,12 @@ export interface DrawerProps {
     profile?: Omit<DrawerProfileProps, 'size' | 'className' | 'style'>;
     /** Render the profile footer as a loading skeleton instead of its content. */
     profileLoading?: boolean;
-    /** Logo appearance overrides. */
+    /** Logo appearance overrides. `onClick` makes the logo an activatable button. */
     logo?: {
         color?: string;
         gradient?: string;
         svgUrl?: string;
+        onClick?: () => void;
     };
     className?: string;
     style?: CSSProperties;

package/dist/stories/Navigation/MobileNavBar.js

@@ -25,9 +25,27 @@ const NavIconButton = ({ icon, ariaLabel, onClick, }) => (_jsx(Box, { component:
     }) }));
 export const MobileNavBar = ({ onSearchClick, drawerProps, showSearch = true, logoProps, style, className, }) => {
     const [open, setOpen] = useState(false);
+    const { onClick: onLogoClick, ...logoStyleProps } = logoProps ?? {};
     const handleMenuClick = () => {
         if (drawerProps)
             setOpen(true);
     };
-    return (_jsxs(_Fragment, { children: [_jsxs(Box, { className: className, sx: style, boxSizing: 'border-box', display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', width: '100%', height: '60px', paddingX: 'var(--spacing-tokens-size-in-px-spacing-spacing-xl)', borderBottom: '1px solid var(--color-border-border-component)', bgcolor: 'var(--color-background-bg-page)', children: [_jsx(Box, { display: 'flex', alignItems: 'center', sx: { '& svg': { display: 'block', height: '20px', width: 'auto' } }, children: _jsx(Logo, { color: 'var(--color-foreground-fg-brand-logo)', ...logoProps }) }), _jsxs(Box, { display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'flex-end', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', children: [showSearch && (_jsx(NavIconButton, { icon: 'MagnifyingGlass', ariaLabel: 'Search', onClick: onSearchClick })), _jsx(NavIconButton, { icon: 'List', ariaLabel: 'Open menu', onClick: handleMenuClick })] })] }), drawerProps && (_jsx(MobileNav, { open: open, onOpenChange: setOpen, navItems: drawerProps.navItems, activeKey: drawerProps.activeKey, credits: drawerProps.credits, creditsLoading: drawerProps.creditsLoading, profile: drawerProps.profile, profileLoading: drawerProps.profileLoading, logo: drawerProps.logo }))] }));
+    return (_jsxs(_Fragment, { children: [_jsxs(Box, { className: className, sx: style, boxSizing: 'border-box', display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', width: '100%', height: '60px', paddingX: 'var(--spacing-tokens-size-in-px-spacing-spacing-xl)', borderBottom: '1px solid var(--color-border-border-component)', bgcolor: 'var(--color-background-bg-page)', children: [_jsx(Box, { ...(onLogoClick
+                            ? {
+                                component: 'button',
+                                type: 'button',
+                                onClick: onLogoClick,
+                                'aria-label': 'Go to home',
+                            }
+                            : {}), display: 'flex', alignItems: 'center', sx: {
+                            padding: 0,
+                            border: 'none',
+                            background: 'none',
+                            cursor: onLogoClick ? 'pointer' : 'default',
+                            '& svg': { display: 'block', height: '20px', width: 'auto' },
+                            '&:focus-visible': {
+                                outline: '2px solid var(--color-border-border-component-active)',
+                                outlineOffset: '2px',
+                            },
+                        }, children: _jsx(Logo, { color: 'var(--color-foreground-fg-brand-logo)', ...logoStyleProps }) }), _jsxs(Box, { display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'flex-end', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', children: [showSearch && (_jsx(NavIconButton, { icon: 'MagnifyingGlass', ariaLabel: 'Search', onClick: onSearchClick })), _jsx(NavIconButton, { icon: 'List', ariaLabel: 'Open menu', onClick: handleMenuClick })] })] }), drawerProps && (_jsx(MobileNav, { open: open, onOpenChange: setOpen, navItems: drawerProps.navItems, activeKey: drawerProps.activeKey, credits: drawerProps.credits, creditsLoading: drawerProps.creditsLoading, profile: drawerProps.profile, profileLoading: drawerProps.profileLoading, logo: drawerProps.logo }))] }));
 };

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

@@ -221,11 +221,12 @@ export interface MobileNavBarProps {
     drawerProps?: DrawerProps;
     /** Whether to show the search button */
     showSearch?: boolean;
-    /** Logo customization props */
+    /** Logo customization props. `onClick` makes the logo an activatable button. */
     logoProps?: {
         gradient?: string;
         color?: string;
         svgUrl?: string;
+        onClick?: () => void;
     };
     /** The style object to apply to the component */
     style?: SxProps<Theme>;

package/dist/stories/UI/PromoBanner.js

@@ -70,19 +70,19 @@ const LEFT_COLUMNS = [
     {
         offset: 0,
         images: [AVATARS.laura, AVATARS.jerome, AVATARS.yuruo],
-        marqueeImages: [AVATARS.laura, AVATARS.jerome, AVATARS.yuruo],
+        marqueeImages: [AVATARS.jerome, AVATARS.laura, AVATARS.yuruo],
     },
 ];
 const RIGHT_COLUMNS = [
     {
         offset: -20,
-        images: [AVATARS.laura, AVATARS.yuruo, AVATARS.jerome],
-        marqueeImages: [AVATARS.yuruo, AVATARS.laura, AVATARS.jerome],
+        images: [AVATARS.laura, AVATARS.micheal, AVATARS.jerome],
+        marqueeImages: [AVATARS.micheal, AVATARS.laura, AVATARS.jerome],
     },
     {
         offset: 0,
         images: [AVATARS.fjolla, AVATARS.yuruo, AVATARS.nelly],
-        marqueeImages: [AVATARS.fjolla, AVATARS.yuruo, AVATARS.nelly],
+        marqueeImages: [AVATARS.yuruo, AVATARS.fjolla, AVATARS.nelly],
     },
 ];
 export const PromoBanner = ({ title = 'Real-time AI avatars for every conversation.', description = 'Trusted by developers, startups, educators, and enterprises to build engaging AI experiences at scale:', features = [

package/package.json

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