@beydesign/storybook 0.0.27 → 0.0.28
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.
|
@@ -37,9 +37,5 @@ export const CreditsCard = ({ size = CreditsCardSize.Expanded, className, maxCre
|
|
|
37
37
|
if (onUpgradeClick) {
|
|
38
38
|
onUpgradeClick();
|
|
39
39
|
}
|
|
40
|
-
} }) })] }), _jsx(CreditRow, { style: { justifyContent: 'end' }, children: _jsx(Box, { display: "flex", flexDirection: "row", children: _jsx(Typography, { text: creditInfoText, size: TypographySize.TextXS, weight: TypographyWeight.Regular, color: "var(--colors-light-text-text-subtle)" }) }) })] })), isCollapsed && maxCredits !== undefined && usedCredits !== undefined && (
|
|
41
|
-
if (onUpgradeClick) {
|
|
42
|
-
onUpgradeClick();
|
|
43
|
-
}
|
|
44
|
-
} }) }) })] }))] }));
|
|
40
|
+
} }) })] }), _jsx(CreditRow, { style: { justifyContent: 'end' }, children: _jsx(Box, { display: "flex", flexDirection: "row", children: _jsx(Typography, { text: creditInfoText, size: TypographySize.TextXS, weight: TypographyWeight.Regular, color: "var(--colors-light-text-text-subtle)" }) }) })] })), isCollapsed && maxCredits !== undefined && usedCredits !== undefined && (_jsx(_Fragment, { children: _jsx(CreditRow, { "$collapsed": true, children: _jsx(Box, { display: "flex", flexDirection: "row", gap: "2px", children: _jsx(Typography, { text: `${usedCredits}`, size: TypographySize.TextM, weight: TypographyWeight.Medium, color: "var(--colors-light-text-text-title)" }) }) }) }))] }));
|
|
45
41
|
};
|
package/dist/stories/NavItem.js
CHANGED
|
@@ -21,7 +21,7 @@ const StyledNavItem = styled.div `
|
|
|
21
21
|
cursor: ${({ $state }) => $state === NavItemState.Disabled ? 'not-allowed' : 'pointer'};
|
|
22
22
|
opacity: ${({ $state }) => ($state === NavItemState.Disabled ? 0.5 : 1)};
|
|
23
23
|
transition: color 0.2s ease;
|
|
24
|
-
justify-content: ${({ $size }) => $size === NavItemSize.Collapsed ? '
|
|
24
|
+
justify-content: ${({ $size }) => $size === NavItemSize.Collapsed ? 'space-between' : 'flex-start'};
|
|
25
25
|
|
|
26
26
|
&:hover {
|
|
27
27
|
.nav-item-icon {
|
package/dist/stories/Sidebar.js
CHANGED
|
@@ -30,6 +30,7 @@ const StyledSidebar = styled.div `
|
|
|
30
30
|
const SidebarContainer = styled.div `
|
|
31
31
|
position: relative;
|
|
32
32
|
height: 100%;
|
|
33
|
+
background: linear-gradient(180deg, #ffffff 77.85%, #f4edff 115.17%);
|
|
33
34
|
`;
|
|
34
35
|
const LogoContainer = styled.div `
|
|
35
36
|
display: flex;
|
|
@@ -54,7 +55,6 @@ const NavItemsContainer = styled.div `
|
|
|
54
55
|
display: flex;
|
|
55
56
|
flex-direction: column;
|
|
56
57
|
gap: 8px;
|
|
57
|
-
padding: 0 16px;
|
|
58
58
|
flex: 1;
|
|
59
59
|
`;
|
|
60
60
|
const NavSection = styled.div `
|
|
@@ -64,9 +64,9 @@ const NavSection = styled.div `
|
|
|
64
64
|
`;
|
|
65
65
|
const SectionTitle = styled.div `
|
|
66
66
|
color: var(--colors-light-text-text-subtle);
|
|
67
|
-
opacity: 0.5;
|
|
68
67
|
padding: ${({ $size }) => $size === SidebarSize.Expanded ? '8px 12px' : '8px 0'};
|
|
69
68
|
display: ${({ $size }) => $size === SidebarSize.Collapsed ? 'flex' : 'block'};
|
|
69
|
+
opacity: ${({ $size }) => ($size === SidebarSize.Collapsed ? 0 : 0.5)};
|
|
70
70
|
justify-content: ${({ $size }) => $size === SidebarSize.Collapsed ? 'center' : 'flex-start'};
|
|
71
71
|
`;
|
|
72
72
|
const Separator = styled.div `
|
|
@@ -77,7 +77,6 @@ const Separator = styled.div `
|
|
|
77
77
|
opacity: 0.05;
|
|
78
78
|
`;
|
|
79
79
|
const BottomContainer = styled.div `
|
|
80
|
-
padding: 0 16px;
|
|
81
80
|
margin-top: 16px;
|
|
82
81
|
`;
|
|
83
82
|
// Wrapper component to handle links
|
|
@@ -90,9 +89,11 @@ const NavItemWrapper = ({ item, isCollapsed, }) => {
|
|
|
90
89
|
item.onClick();
|
|
91
90
|
}
|
|
92
91
|
};
|
|
93
|
-
return (_jsx(NavItem, { text: item.text, icon: item.icon, state: item.state || NavItemState.Default, size: isCollapsed ? NavItemSize.Collapsed : NavItemSize.Expanded, showBadge: item.showBadge, onClick: handleClick }));
|
|
92
|
+
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 }));
|
|
94
93
|
};
|
|
95
|
-
export const Sidebar = ({ size = SidebarSize.Expanded, className = '', navSections, bottomNavItems = [], credits, onToggle, logoProps = {
|
|
94
|
+
export const Sidebar = ({ size = SidebarSize.Expanded, className = '', navSections, bottomNavItems = [], credits, onToggle, logoProps = {
|
|
95
|
+
color: 'var(--primitives-desktop-primary-brand-violet-950)',
|
|
96
|
+
}, }) => {
|
|
96
97
|
const [sidebarSize, setSidebarSize] = useState(size);
|
|
97
98
|
const handleToggle = () => {
|
|
98
99
|
const newSize = sidebarSize === SidebarSize.Expanded
|
|
@@ -104,12 +105,14 @@ export const Sidebar = ({ size = SidebarSize.Expanded, className = '', navSectio
|
|
|
104
105
|
}
|
|
105
106
|
};
|
|
106
107
|
const isCollapsed = sidebarSize === SidebarSize.Collapsed;
|
|
107
|
-
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
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
?
|
|
112
|
-
|
|
108
|
+
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)", className: isCollapsed ? 'hidden' : '' }) })), section.items.map((item, itemIndex) => (_jsx(NavItemWrapper, { item: item, isCollapsed: isCollapsed }, `${item.text}-${itemIndex}`)))] }), sectionIndex < navSections.length - 1 &&
|
|
109
|
+
section.showSeparator && _jsx(Separator, {})] }, `section-${sectionIndex}`))) }), _jsx(BottomContainer, { children: _jsxs(Box, { display: "flex", flexDirection: "column", gap: "16px", children: [credits && (_jsx(Box, { sx: {
|
|
110
|
+
display: 'flex',
|
|
111
|
+
justifyContent: 'center',
|
|
112
|
+
padding: isCollapsed ? '8px' : '0px 12px',
|
|
113
|
+
}, children: _jsx(CreditsCard, { size: isCollapsed
|
|
114
|
+
? CreditsCardSize.Collapsed
|
|
115
|
+
: 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: {
|
|
113
116
|
boxShadow: '2px 4px 8px 0px #1D142814',
|
|
114
117
|
} })) : (_jsx(MainButton, { size: ButtonSize.xxs, text: "Collapse", hierarchy: ButtonHierarchy.Tetriary, displayIconMode: ButtonDisplayMode.Only, displayIcon: "CaretLeft", onClick: handleToggle, style: {
|
|
115
118
|
boxShadow: '2px 4px 8px 0px #1D142814',
|
|
@@ -3,7 +3,7 @@ import { Sidebar } from './Sidebar';
|
|
|
3
3
|
declare const meta: Meta<typeof Sidebar>;
|
|
4
4
|
export default meta;
|
|
5
5
|
type Story = StoryObj<typeof Sidebar>;
|
|
6
|
+
export declare const InBoxContainer: Story;
|
|
6
7
|
export declare const Expanded: Story;
|
|
7
8
|
export declare const Collapsed: Story;
|
|
8
9
|
export declare const WithoutCredits: Story;
|
|
9
|
-
export declare const InBoxContainer: Story;
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { Sidebar } from './Sidebar';
|
|
3
3
|
import { SidebarSize } from './types/sidebar';
|
|
4
4
|
import { NavItemState } from './types/nav-item';
|
|
5
|
-
import { Box } from '@mui/material';
|
|
5
|
+
import { Box, Stack, Typography } from '@mui/material';
|
|
6
6
|
const meta = {
|
|
7
7
|
title: 'Design System/Components/Sidebar',
|
|
8
8
|
component: Sidebar,
|
|
@@ -113,6 +113,18 @@ const defaultBottomNavItems = [
|
|
|
113
113
|
link: '#/feedback',
|
|
114
114
|
},
|
|
115
115
|
];
|
|
116
|
+
export const InBoxContainer = {
|
|
117
|
+
render: (args) => (_jsxs(Stack, { direction: 'row', height: '100%', width: '100%', children: [_jsx(Box, { height: '100%', display: 'flex', flexDirection: 'column', justifyContent: 'space-between', sx: {
|
|
118
|
+
border: '1px solid var(--colors-light-border-border-default)',
|
|
119
|
+
borderRadius: '8px',
|
|
120
|
+
boxShadow: '0 4px 12px rgba(0, 0, 0, 0.1)',
|
|
121
|
+
maxWidth: '280px',
|
|
122
|
+
}, children: _jsx(Sidebar, { ...args, size: SidebarSize.Expanded, navSections: defaultNavSections.slice(0, 3), bottomNavItems: defaultBottomNavItems, credits: {
|
|
123
|
+
maxCredits: 50,
|
|
124
|
+
usedCredits: 10,
|
|
125
|
+
creditInfoText: '1 Credit = 1 min video',
|
|
126
|
+
} }) }), _jsx(Box, { sx: { height: '100dvh', width: 'calc(100dvw)', overflow: 'hidden' }, children: _jsx(Typography, { children: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos." }) })] })),
|
|
127
|
+
};
|
|
116
128
|
export const Expanded = {
|
|
117
129
|
args: {
|
|
118
130
|
size: SidebarSize.Expanded,
|
|
@@ -144,15 +156,3 @@ export const WithoutCredits = {
|
|
|
144
156
|
bottomNavItems: defaultBottomNavItems,
|
|
145
157
|
},
|
|
146
158
|
};
|
|
147
|
-
export const InBoxContainer = {
|
|
148
|
-
render: (args) => (_jsx(Box, { height: '100%', display: 'flex', flexDirection: 'column', justifyContent: 'space-between', sx: {
|
|
149
|
-
border: '1px solid var(--colors-light-border-border-default)',
|
|
150
|
-
borderRadius: '8px',
|
|
151
|
-
boxShadow: '0 4px 12px rgba(0, 0, 0, 0.1)',
|
|
152
|
-
maxWidth: '280px',
|
|
153
|
-
}, children: _jsx(Sidebar, { ...args, size: SidebarSize.Expanded, navSections: defaultNavSections.slice(0, 3), bottomNavItems: defaultBottomNavItems, credits: {
|
|
154
|
-
maxCredits: 50,
|
|
155
|
-
usedCredits: 10,
|
|
156
|
-
creditInfoText: '1 Credit = 1 min video',
|
|
157
|
-
} }) })),
|
|
158
|
-
};
|