@beydesign/storybook 0.0.86 → 0.0.88

package/dist/stories/Buttons/MainButton.js

@@ -24,6 +24,10 @@ const StyledButton = styled.button `
             if (props.$state === ButtonState.Disabled || props.$disabled)
                 return 'var(--colors-light-background-bg-button-disabled)';
             return 'var(--colors-light-background-bg-brand)';
+        case ButtonHierarchy.PrimaryLemon:
+            if (props.$state === ButtonState.Disabled || props.$disabled)
+                return 'var(--colors-light-background-bg-element)';
+            return 'var(--primitives-desktop-primary-brand-lemon-400)';
         case ButtonHierarchy.Secondary:
             if (props.$state === ButtonState.Disabled || props.$disabled)
                 return 'var(--colors-light-background-bg-component-disabled)';
@@ -59,6 +63,10 @@ const StyledButton = styled.button `
             if (props.$state === ButtonState.Disabled || props.$disabled)
                 return 'var(--colors-light-text-text-white)';
             return 'var(--colors-light-text-text-white)';
+        case ButtonHierarchy.PrimaryLemon:
+            if (props.$state === ButtonState.Disabled || props.$disabled)
+                return 'var(--colors-light-text-text-subtle)';
+            return 'var(--colors-light-text-text-title)';
         case ButtonHierarchy.Secondary:
             if (props.$state === ButtonState.Disabled || props.$disabled)
                 return 'var(--colors-light-text-text-disabled)';
@@ -95,6 +103,10 @@ const StyledButton = styled.button `
             if (props.$state === ButtonState.Disabled || props.$disabled)
                 return 'var(--colors-light-border-border-component)';
             return 'var(--colors-light-background-bg-brand)';
+        case ButtonHierarchy.PrimaryLemon:
+            if (props.$state === ButtonState.Disabled || props.$disabled)
+                return 'var(--colors-light-border-border-component)';
+            return 'var(--primitives-desktop-primary-brand-lemon-400)';
         case ButtonHierarchy.Secondary:
             if (props.$state === ButtonState.Disabled || props.$disabled)
                 return 'var(--colors-light-border-border-component)';
@@ -141,6 +153,8 @@ const StyledButton = styled.button `
     switch (props.$hierarchy) {
         case ButtonHierarchy.Primary:
             return 'var(--colors-light-background-bg-brand-hover)';
+        case ButtonHierarchy.PrimaryLemon:
+            return 'var(--primitives-desktop-primary-brand-lemon-500)';
         case ButtonHierarchy.Secondary:
             return 'var(--colors-light-background-bg-card-highlight-hover)';
         case ButtonHierarchy.SecondaryColor:
@@ -162,6 +176,8 @@ const StyledButton = styled.button `
     switch (props.$hierarchy) {
         case ButtonHierarchy.Primary:
             return 'var(--colors-light-background-bg-brand-hover)';
+        case ButtonHierarchy.PrimaryLemon:
+            return 'var(--primitives-desktop-primary-brand-lemon-500)';
         case ButtonHierarchy.Secondary:
             return 'var(--colors-light-background-bg-card-highlight-hover)';
         case ButtonHierarchy.SecondaryColor:

package/dist/stories/Buttons/MainButton.stories.d.ts

@@ -4,6 +4,7 @@ declare const meta: Meta<typeof MainButton>;
 export default meta;
 type Story = StoryObj<typeof MainButton>;
 export declare const Primary: Story;
+export declare const PrimaryLemon: Story;
 export declare const Secondary: Story;
 export declare const SecondaryColor: Story;
 export declare const SecondaryTransparent: Story;

package/dist/stories/Buttons/MainButton.stories.js

@@ -32,6 +32,7 @@ const meta = {
             control: 'select',
             options: [
                 'Primary',
+                'Primary-lemon',
                 'Secondary',
                 'Secondary-color',
                 'Secondary-transparent',
@@ -144,6 +145,12 @@ export const Primary = {
         trailingIcon: 'Circle',
     },
 };
+export const PrimaryLemon = {
+    args: {
+        ...Primary.args,
+        hierarchy: ButtonHierarchy.PrimaryLemon,
+    },
+};
 export const Secondary = {
     args: {
         ...Primary.args,

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

@@ -18,6 +18,7 @@ export declare enum ButtonSize {
  */
 export declare enum ButtonHierarchy {
     Primary = "Primary",
+    PrimaryLemon = "Primary-lemon",
     Secondary = "Secondary",
     SecondaryColor = "Secondary-color",
     SecondaryTransparent = "Secondary-transparent",

package/dist/stories/Buttons/types.js

@@ -16,6 +16,7 @@ export var ButtonSize;
 export var ButtonHierarchy;
 (function (ButtonHierarchy) {
     ButtonHierarchy["Primary"] = "Primary";
+    ButtonHierarchy["PrimaryLemon"] = "Primary-lemon";
     ButtonHierarchy["Secondary"] = "Secondary";
     ButtonHierarchy["SecondaryColor"] = "Secondary-color";
     ButtonHierarchy["SecondaryTransparent"] = "Secondary-transparent";

package/dist/stories/Credits/CreditsCard.js

@@ -52,7 +52,7 @@ export const CreditsCard = ({ size = CreditsCardSize.Expanded, className, maxCre
                                     if (onUpgradeClick) {
                                         onUpgradeClick();
                                     }
-                                } })] }), case1 && (_jsx(CreditRow, { children: _jsx(Box, { display: "flex", flexDirection: "row", children: _jsx(TextWrapper, { children: _jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Medium, color: "var(--colors-light-text-text-title)", children: `Overused: ${overUsedCredits}` }) }) }) })), _jsx(CreditRow, { style: { justifyContent: 'end' }, children: _jsx(Box, { display: "flex", flexDirection: "row", children: _jsx(TextWrapper, { children: _jsx(Typography, { size: TypographySize.TextXS, weight: TypographyWeight.Regular, color: "var(--colors-light-text-text-subtle)", children: creditInfoText }) }) }) })] })), isCollapsed && maxCredits !== undefined && usedCredits !== undefined && (_jsxs(Box, { display: "flex", flexDirection: "column", gap: "var(--spacing-tokens-size-in-px-spacing-spacing-md)", alignItems: "center", justifyContent: "center", children: [case2 && (_jsx(CreditRow, { "$collapsed": true, children: _jsxs(Box, { display: "flex", flexDirection: "row", gap: "2px", children: [_jsx(TextWrapper, { children: _jsx(Typography, { size: TypographySize.TextM, weight: TypographyWeight.Medium, color: "var(--colors-light-text-text-title)", children: `${usedCredits}/` }) }), _jsx(TextWrapper, { children: _jsx(Typography, { size: TypographySize.TextM, weight: TypographyWeight.Medium, color: "var(--colors-light-text-text-paragraph)", children: `${maxCredits}` }) })] }) })), case3 && (_jsx(TextWrapper, { children: _jsx(Typography, { size: TypographySize.TextM, weight: TypographyWeight.Medium, color: "var(--colors-light-text-text-title)", textStyle: { textOverflow: 'ellipsis' }, title: "Credits Limit Reached", children: "Credits..." }) })), case1 && (_jsx(TextWrapper, { children: _jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Medium, color: "var(--colors-light-text-text-title)", children: `${overUsedCredits}` }) })), _jsx(Box, { onClick: (e) => e.stopPropagation(), children: _jsx(MainButton, { text: "Upgrade", hierarchy: ButtonHierarchy.TetriaryColor, size: ButtonSize.md, style: { padding: '0' }, onClick: () => {
+                                } })] }), case1 && (_jsx(CreditRow, { children: _jsx(Box, { display: "flex", flexDirection: "row", children: _jsx(TextWrapper, { children: _jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Medium, color: "var(--colors-light-text-text-title)", children: `Overused: ${overUsedCredits}` }) }) }) })), _jsx(CreditRow, { style: { justifyContent: 'end' }, children: _jsx(Box, { display: "flex", flexDirection: "row", children: _jsx(TextWrapper, { children: _jsx(Typography, { size: TypographySize.TextXS, weight: TypographyWeight.Regular, color: "var(--colors-light-text-text-subtle)", children: creditInfoText }) }) }) })] })), isCollapsed && maxCredits !== undefined && usedCredits !== undefined && (_jsxs(Box, { display: "flex", flexDirection: "column", gap: "var(--spacing-tokens-size-in-px-spacing-spacing-md)", alignItems: "center", justifyContent: "center", children: [case2 && (_jsx(CreditRow, { "$collapsed": true, children: _jsxs(Box, { display: "flex", flexDirection: "row", gap: "2px", children: [_jsx(TextWrapper, { children: _jsx(Typography, { size: TypographySize.TextM, weight: TypographyWeight.Medium, color: "var(--colors-light-text-text-title)", children: `${usedCredits}/` }) }), _jsx(TextWrapper, { children: _jsx(Typography, { size: TypographySize.TextM, weight: TypographyWeight.Medium, color: "var(--colors-light-text-text-paragraph)", children: `${maxCredits}` }) })] }) })), case3 && (_jsx(TextWrapper, { children: _jsx(Typography, { size: TypographySize.TextM, weight: TypographyWeight.Medium, color: "var(--colors-light-text-text-title)", textStyle: { textOverflow: 'ellipsis' }, title: "Credits Limit Reached", children: "Cred..." }) })), case1 && (_jsx(TextWrapper, { children: _jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Medium, color: "var(--colors-light-text-text-title)", children: `${overUsedCredits}` }) })), _jsx(Box, { onClick: (e) => e.stopPropagation(), children: _jsx(MainButton, { text: "Upgrade", hierarchy: ButtonHierarchy.TetriaryColor, size: ButtonSize.md, style: { padding: '0' }, onClick: () => {
                                 if (onUpgradeClick) {
                                     onUpgradeClick();
                                 }

package/dist/stories/Navigation/Sidebar.js

@@ -90,9 +90,7 @@ const NavItemWrapper = ({ item, isCollapsed, }) => {
     };
     return (_jsx(NavItem, { text: item.text, icon: item.icon, state: item.state || NavItemState.Default, size: isCollapsed ? NavItemSize.Collapsed : NavItemSize.Expanded, showBadge: isCollapsed ? false : item.showBadge, onClick: handleClick }));
 };
-export const Sidebar = ({ size = SidebarSize.Expanded, className = '', navSections, bottomNavItems = [], credits, onToggle, logoProps = {
-    color: 'var(--primitives-desktop-primary-brand-violet-950)',
-}, }) => {
+export const Sidebar = ({ size = SidebarSize.Expanded, className = '', navSections, bottomNavItems = [], credits, onToggle, logoProps = { color: 'var(--primitives-desktop-primary-brand-violet-950)' }, }) => {
     const [sidebarSize, setSidebarSize] = useState(size);
     const handleToggle = () => {
         const newSize = sidebarSize === SidebarSize.Expanded
@@ -113,7 +111,7 @@ export const Sidebar = ({ size = SidebarSize.Expanded, className = '', navSectio
                                         padding: isCollapsed ? '8px' : '0px 12px',
                                     }, children: _jsx(CreditsCard, { size: isCollapsed
                                             ? CreditsCardSize.Collapsed
-                                            : CreditsCardSize.Expanded, maxCredits: credits.maxCredits, usedCredits: credits.usedCredits, creditInfoText: credits.creditInfoText, onUpgradeClick: credits.onUpgradeClick }) })), bottomNavItems.map((item, index) => (_jsx(NavItemWrapper, { item: item, isCollapsed: isCollapsed }, `bottom-${item.text}-${index}`)))] }) })] }), _jsx(ToggleButtonWrapper, { children: isCollapsed ? (_jsx(MainButton, { text: "Expand", size: ButtonSize.xxs, displayIconMode: ButtonDisplayMode.Only, displayIcon: "CaretRight", onClick: handleToggle, shape: ButtonShape.Circle, hierarchy: ButtonHierarchy.Tetriary, style: {
+                                            : CreditsCardSize.Expanded, maxCredits: credits.maxCredits, usedCredits: credits.usedCredits, creditInfoText: credits.creditInfoText, onUpgradeClick: credits.onUpgradeClick, overUsageEnabled: credits.overUsageEnabled, overUsedCredits: credits.overUsedCredits }) })), bottomNavItems.map((item, index) => (_jsx(NavItemWrapper, { item: item, isCollapsed: isCollapsed }, `bottom-${item.text}-${index}`)))] }) })] }), _jsx(ToggleButtonWrapper, { children: isCollapsed ? (_jsx(MainButton, { text: "Expand", size: ButtonSize.xxs, displayIconMode: ButtonDisplayMode.Only, displayIcon: "CaretRight", onClick: handleToggle, shape: ButtonShape.Circle, hierarchy: ButtonHierarchy.Tetriary, style: {
                         boxShadow: '2px 4px 8px 0px #1D142814',
                     } })) : (_jsx(MainButton, { size: ButtonSize.xxs, text: "Collapse", hierarchy: ButtonHierarchy.Tetriary, displayIconMode: ButtonDisplayMode.Only, displayIcon: "CaretLeft", onClick: handleToggle, style: {
                         boxShadow: '2px 4px 8px 0px #1D142814',

package/dist/stories/Navigation/Sidebar.stories.js

@@ -120,8 +120,10 @@ export const InBoxContainer = {
                     maxWidth: '280px',
                 }, children: _jsx(Sidebar, { ...args, size: SidebarSize.Expanded, navSections: defaultNavSections.slice(0, 3), bottomNavItems: defaultBottomNavItems, credits: {
                         maxCredits: 50,
-                        usedCredits: 10,
+                        usedCredits: 130,
                         creditInfoText: '1 Credit = 1 min video',
+                        overUsageEnabled: true,
+                        overUsedCredits: 20,
                     } }) }), _jsx(Box, { sx: { height: '100dvh', width: 'calc(100dvw)', overflow: 'hidden' }, children: _jsx(Typography, { children: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos." }) })] })),
 };
 export const Expanded = {
@@ -143,8 +145,10 @@ export const Collapsed = {
         bottomNavItems: defaultBottomNavItems,
         credits: {
             maxCredits: 50,
-            usedCredits: 10,
+            usedCredits: 102,
             creditInfoText: '1 Credit = 1 min video',
+            overUsageEnabled: true,
+            overUsedCredits: 20,
         },
     },
 };

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

@@ -153,6 +153,8 @@ export interface SidebarProps {
         usedCredits: number;
         creditInfoText?: string;
         onUpgradeClick?: () => void;
+        overUsageEnabled?: boolean;
+        overUsedCredits?: number;
     };
     /**
      * Optional callback when sidebar is toggled

package/package.json

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