@beydesign/storybook 0.0.24 → 0.0.26

package/dist/stories/Sidebar.js

@@ -33,6 +33,7 @@ const SidebarContainer = styled.div `
 `;
 const LogoContainer = styled.div `
   display: flex;
+  align-items: center;
   justify-content: ${({ $size }) => $size === SidebarSize.Expanded ? 'flex-start' : 'center'};
   padding: ${({ $size }) => ($size === SidebarSize.Expanded ? '0 24px' : '0')};
   margin-bottom: 32px;
@@ -40,9 +41,9 @@ const LogoContainer = styled.div `
 `;
 const ToggleButtonWrapper = styled.div `
   position: absolute;
-  top: 62px;
-  right: -12px;
-  z-index: 1000;
+  top: 1.5rem;
+  right: -1rem;
+  z-index: 1;
   pointer-events: auto;
   visibility: visible;
   filter: drop-shadow(0px 2px 4px rgba(29, 20, 40, 0.08));
@@ -64,7 +65,8 @@ const SectionTitle = styled.div `
   color: var(--colors-light-text-text-subtle);
   opacity: 0.5;
   padding: ${({ $size }) => $size === SidebarSize.Expanded ? '8px 12px' : '8px 0'};
-  display: ${({ $size }) => $size === SidebarSize.Collapsed ? 'none' : 'block'};
+  display: ${({ $size }) => $size === SidebarSize.Collapsed ? 'flex' : 'block'};
+  justify-content: ${({ $size }) => $size === SidebarSize.Collapsed ? 'center' : 'flex-start'};
 `;
 const Separator = styled.div `
   height: 0.31px;
@@ -101,7 +103,9 @@ export const Sidebar = ({ size = SidebarSize.Expanded, className = '', navSectio
         }
     };
     const isCollapsed = sidebarSize === SidebarSize.Collapsed;
-    return (_jsxs(SidebarContainer, { className: className, children: [_jsxs(StyledSidebar, { "$size": sidebarSize, children: [_jsx(LogoContainer, { "$size": sidebarSize, children: _jsx(Logo, { variant: isCollapsed ? LogoVariant.Icon : LogoVariant.Horizontal, color: logoProps.color, gradient: logoProps.gradient }) }), _jsx(NavItemsContainer, { children: navSections.map((section, sectionIndex) => (_jsxs(React.Fragment, { children: [_jsxs(NavSection, { children: [section.title && (_jsx(SectionTitle, { "$size": sidebarSize, children: _jsx(Typography, { text: section.title, size: TypographySize.TextS, weight: TypographyWeight.Regular, color: "var(--primitives-desktop-primary-gray-700)" }) })), section.items.map((item, itemIndex) => (_jsx(NavItemWrapper, { item: item, isCollapsed: isCollapsed }, `${item.text}-${itemIndex}`)))] }), sectionIndex < navSections.length - 1 &&
+    return (_jsxs(SidebarContainer, { className: className, children: [_jsxs(StyledSidebar, { "$size": sidebarSize, children: [_jsx(LogoContainer, { "$size": sidebarSize, children: _jsx(Logo, { variant: isCollapsed ? LogoVariant.Icon : LogoVariant.Horizontal, color: logoProps.color, gradient: logoProps.gradient }) }), _jsx(NavItemsContainer, { children: navSections.map((section, sectionIndex) => (_jsxs(React.Fragment, { children: [_jsxs(NavSection, { children: [section.title && (_jsx(SectionTitle, { "$size": sidebarSize, children: _jsx(Typography, { text: isCollapsed && section.title
+                                                    ? section.title.split(' ').slice(-1)[0]
+                                                    : section.title, size: TypographySize.TextS, weight: TypographyWeight.Regular, color: "var(--primitives-desktop-primary-gray-700)" }) })), section.items.map((item, itemIndex) => (_jsx(NavItemWrapper, { item: item, isCollapsed: isCollapsed }, `${item.text}-${itemIndex}`)))] }), sectionIndex < navSections.length - 1 &&
                                     section.showSeparator && _jsx(Separator, {})] }, `section-${sectionIndex}`))) }), _jsx(BottomContainer, { children: _jsxs(Box, { display: "flex", flexDirection: "column", gap: "16px", children: [credits && (_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: {

package/dist/stories/Sidebar.stories.d.ts

@@ -7,4 +7,3 @@ export declare const Expanded: Story;
 export declare const Collapsed: Story;
 export declare const WithoutCredits: Story;
 export declare const InBoxContainer: Story;
-export declare const CustomSections: Story;

package/dist/stories/Sidebar.stories.js

@@ -156,93 +156,3 @@ export const InBoxContainer = {
                 creditInfoText: '1 Credit = 1 min video',
             } }) })),
 };
-export const CustomSections = {
-    args: {
-        size: SidebarSize.Expanded,
-        navSections: [
-            {
-                title: 'Main Navigation',
-                items: [
-                    {
-                        text: 'Dashboard',
-                        icon: 'ChartPie',
-                        state: NavItemState.Default,
-                        link: '#/dashboard',
-                    },
-                    {
-                        text: 'Projects',
-                        icon: 'FolderOpen',
-                        state: NavItemState.Active,
-                        link: '#/projects',
-                    },
-                    {
-                        text: 'Calendar',
-                        icon: 'Calendar',
-                        state: NavItemState.Default,
-                        link: '#/calendar',
-                    },
-                ],
-                showSeparator: true,
-            },
-            {
-                title: 'Content',
-                items: [
-                    {
-                        text: 'Media Library',
-                        icon: 'Image',
-                        state: NavItemState.Default,
-                        link: '#/media',
-                    },
-                    {
-                        text: 'Documents',
-                        icon: 'File',
-                        state: NavItemState.Default,
-                        link: '#/documents',
-                    },
-                ],
-                showSeparator: true,
-            },
-            {
-                title: 'Settings',
-                items: [
-                    {
-                        text: 'Account Settings',
-                        icon: 'Gear',
-                        state: NavItemState.Default,
-                        link: '#/settings/account',
-                    },
-                    {
-                        text: 'Team Members',
-                        icon: 'Users',
-                        state: NavItemState.Default,
-                        link: '#/settings/team',
-                    },
-                    {
-                        text: 'Notifications',
-                        icon: 'Bell',
-                        state: NavItemState.Default,
-                        showBadge: true,
-                        link: '#/settings/notifications',
-                    },
-                ],
-            },
-        ],
-        bottomNavItems: [
-            {
-                text: 'Help Center',
-                icon: 'Question',
-                link: '#/help',
-            },
-            {
-                text: 'Log Out',
-                icon: 'SignOut',
-                onClick: () => alert('Logging out...'),
-            },
-        ],
-        credits: {
-            maxCredits: 100,
-            usedCredits: 45,
-            creditInfoText: '1 Credit = 1 resource',
-        },
-    },
-};

package/package.json

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