@beydesign/storybook 0.0.22 → 0.0.23
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/stories/NavItem.js
CHANGED
|
@@ -16,7 +16,7 @@ const StyledNavItem = styled.div `
|
|
|
16
16
|
flex-direction: row;
|
|
17
17
|
align-items: center;
|
|
18
18
|
gap: 12px;
|
|
19
|
-
padding: ${({ $size }) => $size === NavItemSize.Collapsed ? '
|
|
19
|
+
padding: ${({ $size }) => $size === NavItemSize.Collapsed ? '0px 28px 0px 0px' : '0px 60px 0px 0px'};
|
|
20
20
|
border-radius: 8px;
|
|
21
21
|
cursor: ${({ $state }) => $state === NavItemState.Disabled ? 'not-allowed' : 'pointer'};
|
|
22
22
|
opacity: ${({ $state }) => ($state === NavItemState.Disabled ? 0.5 : 1)};
|
package/dist/stories/Sidebar.js
CHANGED
|
@@ -32,6 +32,15 @@ const LogoContainer = styled.div `
|
|
|
32
32
|
justify-content: ${({ $size }) => $size === SidebarSize.Expanded ? 'flex-start' : 'center'};
|
|
33
33
|
padding: ${({ $size }) => ($size === SidebarSize.Expanded ? '0 24px' : '0')};
|
|
34
34
|
margin-bottom: 32px;
|
|
35
|
+
height: 38px;
|
|
36
|
+
position: relative;
|
|
37
|
+
`;
|
|
38
|
+
const ToggleButtonWrapper = styled.div `
|
|
39
|
+
position: absolute;
|
|
40
|
+
top: 0.2rem;
|
|
41
|
+
right: -1rem;
|
|
42
|
+
z-index: 10;
|
|
43
|
+
transform: translateZ(0);
|
|
35
44
|
`;
|
|
36
45
|
const NavItemsContainer = styled.div `
|
|
37
46
|
display: flex;
|
|
@@ -86,17 +95,11 @@ export const Sidebar = ({ size = SidebarSize.Expanded, className = '', navSectio
|
|
|
86
95
|
}
|
|
87
96
|
};
|
|
88
97
|
const isCollapsed = sidebarSize === SidebarSize.Collapsed;
|
|
89
|
-
return (_jsxs(StyledSidebar, { "$size": sidebarSize, className: className, children: [_jsxs(LogoContainer, { "$size": sidebarSize, children: [_jsx(Logo, { variant: isCollapsed ? LogoVariant.Icon : LogoVariant.Horizontal, color: logoProps.color, gradient: logoProps.gradient }), isCollapsed ? (_jsx(MainButton, { text: "Expand", size: ButtonSize.xxs, displayIconMode: ButtonDisplayMode.Only, displayIcon: "CaretRight", onClick: handleToggle, shape: ButtonShape.Circle, hierarchy: ButtonHierarchy.Tetriary, style: {
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
} })) : (_jsx(MainButton, { size: ButtonSize.xxs, text: "Collapse", hierarchy: ButtonHierarchy.Tetriary, displayIconMode: ButtonDisplayMode.Only, displayIcon: "CaretLeft", onClick: handleToggle, style: {
|
|
95
|
-
boxShadow: '2px 4px 8px 0px #1D142814',
|
|
96
|
-
position: 'absolute',
|
|
97
|
-
top: '24px',
|
|
98
|
-
right: '16px',
|
|
99
|
-
}, shape: ButtonShape.Circle }))] }), _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}`)))] }), section.showSeparator && sectionIndex < navSections.length - 1 && (_jsx(Separator, {}))] }, `section-${sectionIndex}`))) }), _jsx(BottomContainer, { children: _jsxs(Box, { display: "flex", flexDirection: "column", gap: "16px", children: [credits && (_jsx(CreditsCard, { size: isCollapsed
|
|
98
|
+
return (_jsxs(StyledSidebar, { "$size": sidebarSize, className: className, children: [_jsxs(LogoContainer, { "$size": sidebarSize, children: [_jsx(Logo, { variant: isCollapsed ? LogoVariant.Icon : LogoVariant.Horizontal, color: logoProps.color, gradient: logoProps.gradient }), _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: {
|
|
99
|
+
boxShadow: '2px 4px 8px 0px #1D142814',
|
|
100
|
+
} })) : (_jsx(MainButton, { size: ButtonSize.xxs, text: "Collapse", hierarchy: ButtonHierarchy.Tetriary, displayIconMode: ButtonDisplayMode.Only, displayIcon: "CaretLeft", onClick: handleToggle, style: {
|
|
101
|
+
boxShadow: '2px 4px 8px 0px #1D142814',
|
|
102
|
+
}, shape: ButtonShape.Circle })) })] }), _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}`)))] }), section.showSeparator && sectionIndex < navSections.length - 1 && (_jsx(Separator, {}))] }, `section-${sectionIndex}`))) }), _jsx(BottomContainer, { children: _jsxs(Box, { display: "flex", flexDirection: "column", gap: "16px", children: [credits && (_jsx(CreditsCard, { size: isCollapsed
|
|
100
103
|
? CreditsCardSize.Collapsed
|
|
101
104
|
: 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}`)))] }) })] }));
|
|
102
105
|
};
|
|
@@ -2,7 +2,7 @@ import { Sidebar } from './Sidebar';
|
|
|
2
2
|
import { SidebarSize } from './types/sidebar';
|
|
3
3
|
import { NavItemState } from './types/nav-item';
|
|
4
4
|
const meta = {
|
|
5
|
-
title: 'Components/Sidebar',
|
|
5
|
+
title: 'Design System/Components/Sidebar',
|
|
6
6
|
component: Sidebar,
|
|
7
7
|
parameters: {
|
|
8
8
|
layout: 'fullscreen',
|