@beydesign/storybook 0.2.5 → 0.2.7

package/dist/stories/Form/TextInput.js

@@ -4,7 +4,7 @@ import { Box } from '@mui/material';
 import { Typography, TypographySize, TypographyWeight } from '../Typography';
 import { HintBubble, HintBubbleSize } from '../UI';
 import { getIconComponent } from '../../utils';
-export const TextInput = ({ label, value, onChange, placeholder, type = 'text', hintText, errorText, disabled, trailingText, style, hintBubbleText, hintBubbleProps, required, labelTrailingElement, labelContainerStyle, showPasswordToggle = true, fullWidth = false, }) => {
+export const TextInput = ({ label, value, onChange, placeholder, type = 'text', hintText, errorText, disabled, trailingText, style, hintBubbleText, hintBubbleProps, required, labelTrailingElement, labelContainerStyle, showPasswordToggle = true, fullWidth = false, leadingIcon, }) => {
     const [focused, setFocused] = useState(false);
     const [showPassword, setShowPassword] = useState(false);
     const isPassword = type === 'password';
@@ -30,7 +30,13 @@ export const TextInput = ({ label, value, onChange, placeholder, type = 'text',
                                 ? '1px solid var(--color-border-border-error)'
                                 : focused
                                     ? '1px solid var(--color-border-border-component-active)'
-                                    : 'transparent'}`, children: [_jsx("input", { type: inputType, value: value, onChange: (e) => onChange(e.target.value), placeholder: placeholder, disabled: disabled, style: {
+                                    : 'transparent'}`, children: [leadingIcon &&
+                                    getIconComponent(leadingIcon, {
+                                        width: '20px',
+                                        height: '20px',
+                                        color: iconColor,
+                                        'aria-hidden': 'true',
+                                    }), _jsx("input", { type: inputType, value: value, onChange: (e) => onChange(e.target.value), placeholder: placeholder, disabled: disabled, style: {
                                         border: 'none',
                                         outline: 'none',
                                         width: '100%',

package/dist/stories/Form/TextInput.stories.d.ts

@@ -157,11 +157,21 @@ declare const meta: {
                 };
             };
         };
+        leadingIcon: {
+            control: "text";
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
     };
 };
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Default: Story;
+export declare const WithLeadingIcon: Story;
 export declare const Password: Story;
 export declare const PasswordWithoutToggle: Story;
 export declare const Email: Story;

package/dist/stories/Form/TextInput.stories.js

@@ -122,6 +122,13 @@ const meta = {
                 defaultValue: { summary: 'false' },
             },
         },
+        leadingIcon: {
+            control: 'text',
+            description: 'Icon rendered before the input value (e.g. a search glass). Accepts a Phosphor icon name.',
+            table: {
+                type: { summary: 'IconName' },
+            },
+        },
     },
 };
 export default meta;
@@ -133,6 +140,14 @@ export const Default = {
         hintBubbleText: 'This is a hint bubble',
     },
 };
+export const WithLeadingIcon = {
+    args: {
+        value: '',
+        placeholder: 'Search',
+        leadingIcon: 'MagnifyingGlass',
+        onChange: () => { },
+    },
+};
 export const Password = {
     args: {
         label: 'Password',

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

@@ -85,6 +85,8 @@ export type TextInputProps = {
      * min-width. Use for side-by-side fields in a flex row. Defaults to `false`.
      */
     fullWidth?: boolean;
+    /** Icon rendered before the input value (e.g. a search glass). */
+    leadingIcon?: IconName;
 };
 /**
  * Toggle position variants

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

@@ -0,0 +1,3 @@
+import React from 'react';
+import { MobileNavBarProps } from './types';
+export declare const MobileNavBar: React.FC<MobileNavBarProps>;

package/dist/stories/Navigation/MobileNavBar.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Box, Drawer as MuiDrawer } from '@mui/material';
+import { Logo } from '../UI';
+import { Drawer } from '../Drawer';
+import { getIconComponent } from '../../utils';
+const shadowXs = 'var(--global-shadows-shadow-xs-offset-x) ' +
+    'var(--global-shadows-shadow-xs-offset-y) ' +
+    'var(--global-shadows-shadow-xs-blur) ' +
+    'var(--global-shadows-shadow-xs-spread) ' +
+    'var(--global-shadows-shadow-xs-color)';
+const NavIconButton = ({ icon, ariaLabel, onClick, }) => (_jsx(Box, { component: 'button', type: 'button', onClick: onClick, "aria-label": ariaLabel, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0, padding: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', border: '1px solid var(--color-border-border-component)', borderRadius: 'var(--spacing-tokens-size-in-px-radius-radius-xs)', sx: {
+        backgroundColor: 'transparent',
+        cursor: 'pointer',
+        boxShadow: shadowXs,
+        '&:focus-visible': {
+            outline: '2px solid var(--color-border-border-component-active)',
+            outlineOffset: '2px',
+        },
+    }, children: getIconComponent(icon, {
+        width: '20px',
+        height: '20px',
+        color: 'var(--color-foreground-fg-secondary)',
+        'aria-hidden': 'true',
+    }) }));
+export const MobileNavBar = ({ onSearchClick, drawerProps, showSearch = true, logoProps, style, className, }) => {
+    const [open, setOpen] = useState(false);
+    const handleMenuClick = () => {
+        if (drawerProps)
+            setOpen(true);
+    };
+    const closeDrawer = () => setOpen(false);
+    const navItems = drawerProps?.navItems.map((item) => ({
+        ...item,
+        onClick: () => {
+            item.onClick?.();
+            closeDrawer();
+        },
+    }));
+    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 && navItems && (_jsx(MuiDrawer, { anchor: 'left', open: open, onClose: closeDrawer, PaperProps: {
+                    sx: { backgroundColor: 'transparent', boxShadow: 'none' },
+                }, children: _jsx(Drawer, { ...drawerProps, navItems: navItems, showToggle: false }) }))] }));
+};

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

@@ -0,0 +1,8 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { MobileNavBar } from './MobileNavBar';
+declare const meta: Meta<typeof MobileNavBar>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const WithoutDrawer: Story;
+export declare const MenuOnly: Story;

package/dist/stories/Navigation/MobileNavBar.stories.js

@@ -0,0 +1,75 @@
+import { MobileNavBar } from './MobileNavBar';
+const navItems = [
+    { key: 'home', text: 'Home', icon: 'House' },
+    { key: 'avatars', text: 'Avatars', icon: 'UserFocus' },
+    { key: 'agents', text: 'My Agents', icon: 'Headset' },
+    { key: 'ttv', text: 'Text-to-Video', icon: 'VideoCamera' },
+    { key: 'kb', text: 'Knowledge Base', icon: 'Book' },
+    { key: 'conversations', text: 'Conversations', icon: 'ChatTeardropDots' },
+    { key: 'analytics', text: 'Analytics', icon: 'ChartBar' },
+    { key: 'api', text: 'API keys', icon: 'Key' },
+    { key: 'developers', text: 'Developers', icon: 'BracketsCurly' },
+];
+const drawerProps = {
+    navItems,
+    activeKey: 'kb',
+    credits: { usedCredits: 500, maxCredits: 2000 },
+    profile: {
+        name: 'Emma Novak',
+        email: 'emma@example.com',
+    },
+};
+const meta = {
+    title: 'Design System/Components/Navigation/MobileNavBar',
+    component: MobileNavBar,
+    parameters: {
+        layout: 'fullscreen',
+        design: {
+            type: 'figspec',
+            url: 'https://www.figma.com/design/mIhjz2yJjcpLlIqw6oUivt/Beyond-Presence?node-id=7079-12927',
+        },
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        onSearchClick: {
+            description: 'Callback fired when the search button is clicked',
+            table: { type: { summary: 'function' } },
+        },
+        drawerProps: {
+            control: false,
+            description: 'Drawer config. When provided, the menu button opens the navigation drawer as an overlay.',
+            table: { type: { summary: 'DrawerProps' } },
+        },
+        showSearch: {
+            control: 'boolean',
+            description: 'Whether to show the search button',
+            table: {
+                type: { summary: 'boolean' },
+                defaultValue: { summary: 'true' },
+            },
+        },
+        logoProps: {
+            control: 'object',
+            description: 'Logo customization props',
+            table: { type: { summary: 'object' } },
+        },
+    },
+};
+export default meta;
+export const Default = {
+    args: {
+        showSearch: true,
+        drawerProps,
+    },
+};
+export const WithoutDrawer = {
+    args: {
+        showSearch: true,
+    },
+};
+export const MenuOnly = {
+    args: {
+        showSearch: false,
+        drawerProps,
+    },
+};

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

@@ -1,4 +1,5 @@
 export * from './Header';
+export * from './MobileNavBar';
 export * from './NavItem';
 export * from './Sidebar';
 export * from './types';

package/dist/stories/Navigation/index.js

@@ -1,4 +1,5 @@
 export * from './Header';
+export * from './MobileNavBar';
 export * from './NavItem';
 export * from './Sidebar';
 export * from './types';

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

@@ -2,6 +2,7 @@ import { SxProps, Theme } from '@mui/material';
 import { IconName } from '../../utils';
 import { AvatarProps } from '../UI';
 import { CreditsCardProps } from '../Credits';
+import { DrawerProps } from '../Drawer';
 /**
  * Header component props
  */
@@ -184,3 +185,27 @@ export interface ProcessHeaderProps {
     /** The class name to apply to the component */
     className?: string;
 }
+/**
+ * Mobile navigation bar props
+ */
+export interface MobileNavBarProps {
+    /** Callback fired when the search button is clicked */
+    onSearchClick?: () => void;
+    /**
+     * Drawer configuration. When provided, clicking the menu button slides the
+     * navigation drawer in as an overlay.
+     */
+    drawerProps?: DrawerProps;
+    /** Whether to show the search button */
+    showSearch?: boolean;
+    /** Logo customization props */
+    logoProps?: {
+        gradient?: string;
+        color?: string;
+        svgUrl?: string;
+    };
+    /** The style object to apply to the component */
+    style?: SxProps<Theme>;
+    /** The class name to apply to the component */
+    className?: string;
+}

package/package.json

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