@beydesign/storybook 0.6.1 → 0.7.0

package/dist/stories/Form/FileUpload/FileUpload.js

@@ -44,7 +44,13 @@ const fileIconMap = {
 };
 // Default icon for unknown file types
 const defaultIcon = FileCode;
-export const FileUpload = ({ disabled, sx, acceptedFileTypes = '.pdf,.doc,.docx,.txt', maxFileSizeMB = 10, onFileSelect, }) => {
+/**
+ * Figma draws the upload glyph in a 28px frame with the stroke inside it.
+ * Deriving the box from padding puts the CSS border outside, leaving it 2px
+ * oversized, so pin the frame and let border-box absorb the stroke.
+ */
+const ICON_BOX_SIZE = 28;
+export const FileUpload = ({ disabled, sx, acceptedFileTypes = '.pdf,.doc,.docx,.txt', maxFileSizeMB = 10, onFileSelect, hintText, showFileTypeIcons = true, }) => {
     const [isDragging, setIsDragging] = useState(false);
     const fileInputRef = useRef(null);
     // Function to get the icons to display based on acceptedFileTypes
@@ -124,7 +130,7 @@ export const FileUpload = ({ disabled, sx, acceptedFileTypes = '.pdf,.doc,.docx,
             ? 'var(--color-background-bg-component-disabled)'
             : isDragging
                 ? 'var(--color-background-bg-component-hover)'
-                : 'var(--color-background-bg-element)', sx: { cursor: disabled ? 'not-allowed' : 'pointer', ...sx }, onClick: handleClick, onDragOver: handleDragOver, onDragLeave: handleDragLeave, onDrop: handleDrop, children: [_jsx("input", { type: "file", ref: fileInputRef, style: { display: 'none' }, accept: acceptedFileTypes, onChange: handleInputChange, disabled: disabled }), _jsx(Box, { display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs)', border: `1px solid ${disabled
+                : 'var(--color-background-bg-element)', sx: { cursor: disabled ? 'not-allowed' : 'pointer', ...sx }, onClick: handleClick, onDragOver: handleDragOver, onDragLeave: handleDragLeave, onDrop: handleDrop, children: [_jsx("input", { type: "file", ref: fileInputRef, style: { display: 'none' }, accept: acceptedFileTypes, onChange: handleInputChange, disabled: disabled }), _jsx(Box, { display: 'flex', alignItems: 'center', justifyContent: 'center', width: ICON_BOX_SIZE, height: ICON_BOX_SIZE, boxSizing: 'border-box', border: `1px solid ${disabled
                     ? 'var(--color-border-border-disabled)'
                     : 'var(--color-border-border-component)'}`, borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)', bgcolor: disabled
                     ? 'var(--color-background-bg-button-disabled)'
@@ -134,5 +140,7 @@ export const FileUpload = ({ disabled, sx, acceptedFileTypes = '.pdf,.doc,.docx,
                             ? 'var(--color-text-text-inactive)'
                             : 'var(--color-text-text-clicable)', textStyle: { cursor: disabled ? 'not-allowed' : 'pointer' }, children: "Click to upload" }), _jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Regular, color: disabled
                             ? 'var(--color-text-text-disabled)'
-                            : 'var(--color-text-text-paragraph)', children: "or drag and drop" }), _jsxs(Box, { display: 'flex', flexDirection: 'row', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs)', children: [fileIcons.map((Icon, index) => (_jsx(Icon, { ...iconProps }, index))), fileIcons.length === 0 && _jsx(FileCode, { ...iconProps })] })] })] }));
+                            : 'var(--color-text-text-paragraph)', children: "or drag and drop" }), showFileTypeIcons && (_jsxs(Box, { display: 'flex', flexDirection: 'row', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs)', children: [fileIcons.map((Icon, index) => (_jsx(Icon, { ...iconProps }, index))), fileIcons.length === 0 && _jsx(FileCode, { ...iconProps })] }))] }), hintText && (_jsx(Typography, { size: TypographySize.TextXS, weight: TypographyWeight.Regular, color: disabled
+                    ? 'var(--color-text-text-disabled)'
+                    : 'var(--color-text-text-paragraph)', children: hintText }))] }));
 };

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

@@ -5,3 +5,4 @@ export default meta;
 type Story = StoryObj<typeof FileUpload>;
 export declare const Default: Story;
 export declare const Disabled: Story;
+export declare const WithHintText: Story;

package/dist/stories/Form/FileUpload/FileUpload.stories.js

@@ -31,6 +31,19 @@ const meta = {
             description: 'Callback function when a file is selected',
             table: { type: { summary: 'function' } },
         },
+        hintText: {
+            control: 'text',
+            description: 'Supporting line rendered under the label',
+            table: { type: { summary: 'string' } },
+        },
+        showFileTypeIcons: {
+            control: 'boolean',
+            description: 'Whether to render the per-extension file icons',
+            table: {
+                type: { summary: 'boolean' },
+                defaultValue: { summary: 'true' },
+            },
+        },
         sx: {
             control: 'object',
             description: 'Style of the file upload',
@@ -49,3 +62,12 @@ export const Disabled = {
         disabled: true,
     },
 };
+export const WithHintText = {
+    args: {
+        acceptedFileTypes: '.mp4,.mov',
+        maxFileSizeMB: 500,
+        hintText: 'MP4 or MOV, up to 500MB',
+        showFileTypeIcons: false,
+        sx: { width: '537px', aspectRatio: '537 / 293' },
+    },
+};

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

@@ -150,6 +150,16 @@ export interface FileUploadProps {
     maxFileSizeMB?: number;
     /** Callback function when a file is selected */
     onFileSelect?: (file: File) => void;
+    /**
+     * Supporting line rendered under the label, e.g. "MP4 or MOV, up to 500MB".
+     * Figma centres it inside the drop area as part of the label cluster.
+     */
+    hintText?: string;
+    /**
+     * Whether to render the per-extension file icons beside the label.
+     * Defaults to true; turn it off when `hintText` states the formats instead.
+     */
+    showFileTypeIcons?: boolean;
     /** Style of the file upload */
     sx?: SxProps<Theme>;
 }

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

@@ -6,5 +6,4 @@ export * from './MobileNavBar';
 export * from './NavItem';
 export * from './Sidebar';
 export * from './types';
-export * from './ProcessHeader';
 export * from './ComplexHeader';

package/dist/stories/Navigation/index.js

@@ -6,5 +6,4 @@ export * from './MobileNavBar';
 export * from './NavItem';
 export * from './Sidebar';
 export * from './types';
-export * from './ProcessHeader';
 export * from './ComplexHeader';

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

@@ -168,24 +168,6 @@ export interface SidebarProps {
         color?: string;
     };
 }
-export interface ProcessHeaderProps {
-    /** The title of the process */
-    title: string;
-    /** The subtitle of the process */
-    subtitle: string;
-    /** The current step of the process */
-    currentStep: number;
-    /** The total steps of the process */
-    totalSteps: number;
-    /** The text to display in the header right */
-    headerRightText?: string;
-    /** The callback to handle the cancel button click */
-    onCancelClick?: () => void;
-    /** The style object to apply to the component */
-    sx?: SxProps<Theme>;
-    /** The class name to apply to the component */
-    className?: string;
-}
 /**
  * Props for the {@link MobileNav} overlay — the single navigation panel used
  * below the mobile breakpoint, which holds the `Drawer` and any `subNav` as

package/dist/stories/UI/Badge.js

@@ -3,6 +3,18 @@ import { BadgeColor, BadgeSize } from './types';
 import { Box } from '@mui/material';
 import { Typography, TypographySize, TypographyWeight } from '../Typography';
 import { getIconComponent } from '../../utils';
+/**
+ * Figma sizes a badge by its height, with the label centred inside and the
+ * 1px stroke drawn within that box. A CSS border sits outside instead, so
+ * deriving the height from vertical padding leaves every badge 2px taller
+ * than the design. Pin the height and let border-box absorb the stroke —
+ * the same fix MainButton applies to text buttons.
+ */
+const BADGE_HEIGHT = {
+    [BadgeSize.lg]: 32,
+    [BadgeSize.md]: 28,
+    [BadgeSize.xs]: 24,
+};
 export const Badge = ({ color = BadgeColor.Default, size = BadgeSize.md, text, children, style: customStyle, icon = 'Cactus', showIcon = false, fill = true, iconWeight = 'regular', iconSize, iconColor, testId, }) => {
     const getBackgroundColor = (color) => {
         switch (color) {
@@ -82,14 +94,14 @@ export const Badge = ({ color = BadgeColor.Default, size = BadgeSize.md, text, c
                 return '1px solid rgba(0, 0, 0, 0.3)';
         }
     };
-    const getPadding = (size) => {
+    const getPaddingX = (size) => {
         switch (size) {
             case BadgeSize.lg:
-                return 'var(--spacing-tokens-size-in-px-spacing-spacing-sm) var(--spacing-tokens-size-in-px-spacing-spacing-lg)';
+                return 'var(--spacing-tokens-size-in-px-spacing-spacing-lg)';
             case BadgeSize.md:
-                return 'var(--spacing-tokens-size-in-px-spacing-spacing-xs) 10px';
+                return '10px';
             case BadgeSize.xs:
-                return 'var(--spacing-tokens-size-in-px-spacing-spacing-xs) var(--spacing-tokens-size-in-px-spacing-spacing-md)';
+                return 'var(--spacing-tokens-size-in-px-spacing-spacing-md)';
         }
     };
     const getIconSize = (size) => {
@@ -114,11 +126,14 @@ export const Badge = ({ color = BadgeColor.Default, size = BadgeSize.md, text, c
     };
     const backgroundColor = getBackgroundColor(color);
     const border = getBorder(color);
-    const padding = getPadding(size);
+    // Figma measures padding from the frame edge with the stroke drawn inside
+    // it, so subtract the border to keep the label the same distance in.
+    const figmaPaddingX = getPaddingX(size);
+    const paddingX = fill ? `calc(${figmaPaddingX} - 1px)` : figmaPaddingX;
     const iconProps = {
         size: iconSize || getIconSize(size),
         color: iconColor || getTextColor(),
         weight: iconWeight,
     };
-    return (_jsxs(Box, { display: "flex", alignItems: "center", justifyContent: "center", bgcolor: fill ? backgroundColor : 'transparent', border: fill ? border : 'none', borderRadius: fill ? 'var(--spacing-tokens-size-in-px-radius-radius-full)' : 'none', padding: padding, margin: 0, gap: "4px", sx: customStyle, "data-testid": testId, children: [showIcon && icon && getIconComponent(icon, iconProps), text && (_jsx(Typography, { size: getTypographySize(size), weight: TypographyWeight.Medium, color: getTextColor(), children: text })), children] }));
+    return (_jsxs(Box, { display: "flex", alignItems: "center", justifyContent: "center", bgcolor: fill ? backgroundColor : 'transparent', border: fill ? border : 'none', borderRadius: fill ? 'var(--spacing-tokens-size-in-px-radius-radius-full)' : 'none', height: BADGE_HEIGHT[size], boxSizing: "border-box", paddingX: paddingX, margin: 0, gap: "4px", sx: customStyle, "data-testid": testId, children: [showIcon && icon && getIconComponent(icon, iconProps), text && (_jsx(Typography, { size: getTypographySize(size), weight: TypographyWeight.Medium, color: getTextColor(), children: text })), children] }));
 };

package/dist/stories/UI/CheckIcon.js

@@ -28,6 +28,7 @@ const FRAME_MAP = {
     [CheckIconSize.sm]: 20,
     [CheckIconSize.md]: 24,
     [CheckIconSize.lg]: 28,
+    [CheckIconSize.xl]: 32,
 };
 /**
  * Figma draws the glyph on a grid of 32 units per frame, with the ink inset

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

@@ -237,7 +237,8 @@ export declare enum CheckIconSize {
     xs = "xs",
     sm = "sm",
     md = "md",
-    lg = "lg"
+    lg = "lg",
+    xl = "xl"
 }
 /**
  * Check icon type variants.

package/dist/stories/UI/types.js

@@ -90,6 +90,7 @@ export var CheckIconSize;
     CheckIconSize["sm"] = "sm";
     CheckIconSize["md"] = "md";
     CheckIconSize["lg"] = "lg";
+    CheckIconSize["xl"] = "xl";
 })(CheckIconSize || (CheckIconSize = {}));
 /**
  * Check icon type variants.

package/package.json

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

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

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

package/dist/stories/Navigation/ProcessHeader.js

@@ -1,11 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box } from '@mui/material';
-import { Badge, BadgeColor, BadgeSize } from '../UI';
-import { Typography, TypographySize, TypographyWeight } from '../Typography';
-import { ButtonHierarchy, ButtonSize, MainButton } from '../Buttons';
-export const ProcessHeader = ({ title, currentStep, subtitle, totalSteps, headerRightText, onCancelClick, sx, className, }) => {
-    const stepChecks = () => {
-        return (currentStep && totalSteps && currentStep >= 1 && currentStep <= totalSteps);
-    };
-    return (_jsxs(Box, { display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', paddingX: 'var(--spacing-tokens-size-in-px-spacing-spacing-3xl)', paddingY: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', sx: sx, className: className, children: [_jsxs(Box, { display: 'flex', flexDirection: 'row', alignItems: 'center', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-lg)', children: [_jsxs(Box, { display: 'flex', flexDirection: 'row', alignItems: 'center', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-lg)', children: [headerRightText && (_jsx(Badge, { text: headerRightText, size: BadgeSize.lg, color: BadgeColor.Green })), stepChecks() && (_jsx(Badge, { text: `Step ${currentStep} of ${totalSteps}`, size: BadgeSize.lg, color: BadgeColor.Violet }))] }), _jsxs(Box, { display: 'flex', flexDirection: 'row', alignItems: 'center', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', children: [title && (_jsx(Typography, { size: TypographySize.TextM, weight: TypographyWeight.SemiBold, children: `${title}.` })), subtitle && (_jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Regular, children: subtitle }))] })] }), onCancelClick && (_jsx(MainButton, { text: 'Cancel Process', onClick: onCancelClick, size: ButtonSize.md, hierarchy: ButtonHierarchy.TertiaryColor, trailingIcon: 'X', showTrailingIcon: true }))] }));
-};

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

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

package/dist/stories/Navigation/ProcessHeader.stories.js

@@ -1,76 +0,0 @@
-import { ProcessHeader } from './ProcessHeader';
-import styles from './Header.module.css';
-const meta = {
-    title: 'Design System/Components/Navigation/ProcessHeader',
-    component: ProcessHeader,
-    parameters: {
-        layout: 'centered',
-        design: {
-            type: 'figspec',
-            url: 'https://www.figma.com/design/Ze4bBHgBQYinBDZr1COHuk/Agents?node-id=1928-68769&t=ff7acatvxaY98hGj-1',
-        },
-    },
-    tags: ['autodocs'],
-    argTypes: {
-        title: {
-            control: 'text',
-            description: 'Title of the header',
-            table: {
-                type: { summary: 'string' },
-            },
-        },
-        subtitle: {
-            control: 'text',
-            description: 'Subtitle of the header',
-            table: {
-                type: { summary: 'string' },
-            },
-        },
-        currentStep: {
-            control: 'number',
-            description: 'Current step of the process',
-            table: {
-                type: { summary: 'number' },
-            },
-        },
-        totalSteps: {
-            control: 'number',
-            description: 'Total steps of the process',
-            table: {
-                type: { summary: 'number' },
-            },
-        },
-        headerRightText: {
-            control: 'text',
-            description: 'Text to display in the header right',
-            table: {
-                type: { summary: 'string' },
-            },
-        },
-        onCancelClick: {
-            description: 'Callback to handle the cancel button click',
-            table: {
-                type: { summary: 'function' },
-            },
-        },
-        sx: {
-            control: 'object',
-            description: 'Style object to apply to the component',
-            table: {
-                type: { summary: 'object' },
-            },
-        },
-    },
-};
-export default meta;
-export const Default = {
-    args: {
-        title: 'Train Agent',
-        subtitle: 'Please fill in the necessary information for your agent & upload knowledge files.',
-        currentStep: 3,
-        totalSteps: 3,
-        headerRightText: 'New Agent',
-        onCancelClick: () => { },
-        className: styles['responsive-width'],
-    },
-};