@beydesign/storybook 0.6.0 → 0.6.1

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.1",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",