@beydesign/storybook 0.0.26 → 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
|
@@ -25,11 +25,12 @@ const StyledSidebar = styled.div `
|
|
|
25
25
|
overflow-x: hidden;
|
|
26
26
|
overflow-y: scroll;
|
|
27
27
|
position: relative;
|
|
28
|
-
padding: 24px
|
|
28
|
+
padding: 16px 0px 24px 0px;
|
|
29
29
|
`;
|
|
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;
|
|
@@ -37,6 +38,7 @@ const LogoContainer = styled.div `
|
|
|
37
38
|
justify-content: ${({ $size }) => $size === SidebarSize.Expanded ? 'flex-start' : 'center'};
|
|
38
39
|
padding: ${({ $size }) => ($size === SidebarSize.Expanded ? '0 24px' : '0')};
|
|
39
40
|
margin-bottom: 32px;
|
|
41
|
+
min-height: 38px;
|
|
40
42
|
height: 38px;
|
|
41
43
|
`;
|
|
42
44
|
const ToggleButtonWrapper = styled.div `
|
|
@@ -53,7 +55,6 @@ const NavItemsContainer = styled.div `
|
|
|
53
55
|
display: flex;
|
|
54
56
|
flex-direction: column;
|
|
55
57
|
gap: 8px;
|
|
56
|
-
padding: 0 16px;
|
|
57
58
|
flex: 1;
|
|
58
59
|
`;
|
|
59
60
|
const NavSection = styled.div `
|
|
@@ -63,9 +64,9 @@ const NavSection = styled.div `
|
|
|
63
64
|
`;
|
|
64
65
|
const SectionTitle = styled.div `
|
|
65
66
|
color: var(--colors-light-text-text-subtle);
|
|
66
|
-
opacity: 0.5;
|
|
67
67
|
padding: ${({ $size }) => $size === SidebarSize.Expanded ? '8px 12px' : '8px 0'};
|
|
68
68
|
display: ${({ $size }) => $size === SidebarSize.Collapsed ? 'flex' : 'block'};
|
|
69
|
+
opacity: ${({ $size }) => ($size === SidebarSize.Collapsed ? 0 : 0.5)};
|
|
69
70
|
justify-content: ${({ $size }) => $size === SidebarSize.Collapsed ? 'center' : 'flex-start'};
|
|
70
71
|
`;
|
|
71
72
|
const Separator = styled.div `
|
|
@@ -76,7 +77,6 @@ const Separator = styled.div `
|
|
|
76
77
|
opacity: 0.05;
|
|
77
78
|
`;
|
|
78
79
|
const BottomContainer = styled.div `
|
|
79
|
-
padding: 0 16px;
|
|
80
80
|
margin-top: 16px;
|
|
81
81
|
`;
|
|
82
82
|
// Wrapper component to handle links
|
|
@@ -89,9 +89,11 @@ const NavItemWrapper = ({ item, isCollapsed, }) => {
|
|
|
89
89
|
item.onClick();
|
|
90
90
|
}
|
|
91
91
|
};
|
|
92
|
-
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 }));
|
|
93
93
|
};
|
|
94
|
-
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
|
+
}, }) => {
|
|
95
97
|
const [sidebarSize, setSidebarSize] = useState(size);
|
|
96
98
|
const handleToggle = () => {
|
|
97
99
|
const newSize = sidebarSize === SidebarSize.Expanded
|
|
@@ -103,12 +105,14 @@ export const Sidebar = ({ size = SidebarSize.Expanded, className = '', navSectio
|
|
|
103
105
|
}
|
|
104
106
|
};
|
|
105
107
|
const isCollapsed = sidebarSize === SidebarSize.Collapsed;
|
|
106
|
-
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
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
?
|
|
111
|
-
|
|
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: {
|
|
112
116
|
boxShadow: '2px 4px 8px 0px #1D142814',
|
|
113
117
|
} })) : (_jsx(MainButton, { size: ButtonSize.xxs, text: "Collapse", hierarchy: ButtonHierarchy.Tetriary, displayIconMode: ButtonDisplayMode.Only, displayIcon: "CaretLeft", onClick: handleToggle, style: {
|
|
114
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
|
-
};
|