@beydesign/storybook 0.6.1 → 0.6.2

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

@@ -44,7 +44,7 @@ const fileIconMap = {
 };
 // Default icon for unknown file types
 const defaultIcon = FileCode;
-export const FileUpload = ({ disabled, sx, acceptedFileTypes = '.pdf,.doc,.docx,.txt', maxFileSizeMB = 10, onFileSelect, }) => {
+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
@@ -134,5 +134,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/package.json

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