@beydesign/storybook 0.6.0 → 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/dist/stories/Navigation/Drawer/DrawerCreditsCard.js

@@ -57,10 +57,15 @@ const UpgradeLink = styled.button `
   color: var(--color-text-text-title);
   transition: color 0.2s ease-in-out;
 
-  &:hover {
+  &:hover:not(:disabled) {
     color: var(--color-text-text-clicable);
     text-decoration: underline;
   }
+
+  &:disabled {
+    color: var(--color-text-text-inactive);
+    cursor: not-allowed;
+  }
 `;
 const InfoButton = styled.button `
   appearance: none;
@@ -97,10 +102,12 @@ const CollapsedBox = styled.span `
   justify-content: center;
   width: 36px;
   height: 36px;
-  color: var(--color-foreground-fg-brand-primary);
+  color: ${({ $disabled }) => $disabled
+    ? 'var(--color-foreground-fg-disabled)'
+    : 'var(--color-foreground-fg-brand-primary)'};
   background-color: var(--color-background-bg-brand-transparent);
   border-radius: var(--spacing-tokens-size-in-px-spacing-spacing-md, 8px);
-  cursor: pointer;
+  cursor: ${({ $disabled }) => ($disabled ? 'not-allowed' : 'pointer')};
 `;
 /** Dark popover body shown when hovering the collapsed credits box. */
 const PopoverBody = styled.div `
@@ -120,6 +127,14 @@ const PopoverButton = styled.button `
   background-color: var(--color-background-bg-brand-primary);
   color: var(--color-text-text-on-accent-color);
   box-shadow: ${SHADOW_XS};
+
+  &:disabled {
+    border-color: var(--color-background-bg-button-disabled);
+    background-color: var(--color-background-bg-button-disabled);
+    color: var(--color-text-text-inactive);
+    box-shadow: none;
+    cursor: not-allowed;
+  }
 `;
 const PopoverGroup = styled.div `
   display: flex;
@@ -133,11 +148,15 @@ const InfoLines = ({ lines }) => (_jsx("div", { style: { display: 'flex', flexDi
  * conversion rates. When collapsed it shrinks to the gem glyph and reveals the
  * full details (and an upgrade action) in a hover popover. Fully theme-aware.
  */
-export const DrawerCreditsCard = ({ size = DrawerSize.Expanded, usedCredits = 0, maxCredits = 0, upgradeLabel = 'Upgrade Plan', creditsCaption, icon, infoLines = DEFAULT_INFO_LINES, onUpgradeClick, className, style, testId, }) => {
+export const DrawerCreditsCard = ({ size = DrawerSize.Expanded, usedCredits = 0, maxCredits = 0, upgradeLabel = 'Upgrade Plan', creditsCaption, icon, infoLines = DEFAULT_INFO_LINES, onUpgradeClick, disabled = false, className, style, testId, }) => {
+    const handleUpgradeClick = () => {
+        if (!disabled)
+            onUpgradeClick?.();
+    };
     const caption = creditsCaption ?? `${usedCredits} credits used of ${maxCredits}`;
     const glyph = icon ? (getIconComponent(icon, { size: 20 })) : (_jsx(GemIcon, { size: 20 }));
     if (size === DrawerSize.Collapsed) {
-        return (_jsx(Popover, { placement: "right", content: _jsxs(PopoverBody, { children: [_jsx(PopoverButton, { type: "button", onClick: () => onUpgradeClick?.(), children: _jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.SemiBold, color: "var(--color-text-text-on-accent-color)", children: upgradeLabel }) }), _jsxs(PopoverGroup, { children: [_jsx(CreditsBar, { used: usedCredits, max: maxCredits }), _jsx(Typography, { size: TypographySize.TextXS, weight: TypographyWeight.Regular, color: "var(--color-text-text-white)", children: caption })] }), _jsx(InfoLines, { lines: infoLines })] }), children: _jsx(CollapsedBox, { className: className, style: style, "data-testid": testId, onClick: () => onUpgradeClick?.(), children: glyph }) }));
+        return (_jsx(Popover, { placement: "right", content: _jsxs(PopoverBody, { children: [_jsx(PopoverButton, { type: "button", onClick: handleUpgradeClick, disabled: disabled, children: _jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.SemiBold, color: "inherit", children: upgradeLabel }) }), _jsxs(PopoverGroup, { children: [_jsx(CreditsBar, { used: usedCredits, max: maxCredits }), _jsx(Typography, { size: TypographySize.TextXS, weight: TypographyWeight.Regular, color: "var(--color-text-text-white)", children: caption })] }), _jsx(InfoLines, { lines: infoLines })] }), children: _jsx(CollapsedBox, { "$disabled": disabled, className: className, style: style, "data-testid": testId, onClick: handleUpgradeClick, children: glyph }) }));
     }
-    return (_jsxs(Card, { className: className, style: style, "data-testid": testId, children: [_jsxs(HeaderRow, { children: [_jsxs(HeaderLeft, { children: [_jsx(GemBox, { children: glyph }), _jsx(UpgradeLink, { type: "button", onClick: () => onUpgradeClick?.(), children: _jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.SemiBold, color: "inherit", children: upgradeLabel }) })] }), _jsx(Popover, { placement: "top", content: _jsx(InfoLines, { lines: infoLines }), children: _jsx(InfoButton, { type: "button", "aria-label": "Credit rate information", children: getIconComponent('WarningCircle', { size: 20 }) }) })] }), _jsx(CreditsBar, { used: usedCredits, max: maxCredits }), _jsx(Typography, { size: TypographySize.TextXS, weight: TypographyWeight.Regular, color: "var(--color-text-text-label)", children: caption })] }));
+    return (_jsxs(Card, { className: className, style: style, "data-testid": testId, children: [_jsxs(HeaderRow, { children: [_jsxs(HeaderLeft, { children: [_jsx(GemBox, { children: glyph }), _jsx(UpgradeLink, { type: "button", onClick: handleUpgradeClick, disabled: disabled, children: _jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.SemiBold, color: "inherit", children: upgradeLabel }) })] }), _jsx(Popover, { placement: "top", content: _jsx(InfoLines, { lines: infoLines }), children: _jsx(InfoButton, { type: "button", "aria-label": "Credit rate information", children: getIconComponent('WarningCircle', { size: 20 }) }) })] }), _jsx(CreditsBar, { used: usedCredits, max: maxCredits }), _jsx(Typography, { size: TypographySize.TextXS, weight: TypographyWeight.Regular, color: "var(--color-text-text-label)", children: caption })] }));
 };

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

@@ -6,3 +6,5 @@ type Story = StoryObj<typeof DrawerCreditsCard>;
 export declare const Default: Story;
 export declare const NearLimit: Story;
 export declare const Collapsed: Story;
+export declare const Disabled: Story;
+export declare const CollapsedDisabled: Story;

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

@@ -21,6 +21,10 @@ const meta = {
         usedCredits: { control: 'number' },
         maxCredits: { control: 'number' },
         upgradeLabel: { control: 'text' },
+        disabled: {
+            control: 'boolean',
+            table: { defaultValue: { summary: 'false' } },
+        },
     },
     args: {
         size: DrawerSize.Expanded,
@@ -43,3 +47,9 @@ export const NearLimit = {
 export const Collapsed = {
     args: { size: DrawerSize.Collapsed },
 };
+export const Disabled = {
+    args: { disabled: true },
+};
+export const CollapsedDisabled = {
+    args: { size: DrawerSize.Collapsed, disabled: true },
+};

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

@@ -60,6 +60,11 @@ export interface DrawerCreditsCardProps {
     infoLines?: string[];
     /** Fired when the title or upgrade button is clicked. */
     onUpgradeClick?: () => void;
+    /**
+     * Disables the upgrade action — the title link, and when collapsed both the
+     * gem box and the popover button. The info tooltip stays available.
+     */
+    disabled?: boolean;
     className?: string;
     style?: CSSProperties;
     testId?: string;

package/package.json

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