@beydesign/storybook 0.0.52 → 0.0.54
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.
|
@@ -10,7 +10,7 @@ const StyledNavItem = styled.div `
|
|
|
10
10
|
flex-direction: row;
|
|
11
11
|
align-items: center;
|
|
12
12
|
gap: 12px;
|
|
13
|
-
padding: ${({ $size }) => $size === NavItemSize.Collapsed ? '
|
|
13
|
+
padding: ${({ $size }) => $size === NavItemSize.Collapsed ? '8px 28px' : '8px 60px 8px 28px'};
|
|
14
14
|
border-radius: 8px;
|
|
15
15
|
cursor: ${({ $state }) => $state === NavItemState.Disabled ? 'not-allowed' : 'pointer'};
|
|
16
16
|
opacity: ${({ $state }) => ($state === NavItemState.Disabled ? 0.5 : 1)};
|
|
@@ -36,7 +36,7 @@ const IconWrapper = styled.span `
|
|
|
36
36
|
display: inline-flex;
|
|
37
37
|
color: ${({ $state }) => $state === NavItemState.Active
|
|
38
38
|
? 'var(--colors-light-background-bg-brand)'
|
|
39
|
-
: 'var(--
|
|
39
|
+
: 'var(--colors-light-text-text-paragraph)'};
|
|
40
40
|
transition: color 0.3s ease-in-out;
|
|
41
41
|
`;
|
|
42
42
|
const TextWrapper = styled.span `
|
|
@@ -52,11 +52,15 @@ export const NavItem = ({ text, icon, state = NavItemState.Default, size = NavIt
|
|
|
52
52
|
const isCollapsed = size === NavItemSize.Collapsed;
|
|
53
53
|
return (_jsxs(StyledNavItem, { "$state": state, "$size": size, onClick: handleClick, className: className, title: isCollapsed ? text : undefined, children: [_jsx("svg", { width: "5", height: "36", viewBox: "0 0 5 36", fill: state === NavItemState.Active
|
|
54
54
|
? 'var(--colors-light-background-bg-brand)'
|
|
55
|
-
: 'transparent', xmlns: "http://www.w3.org/2000/svg", style: {
|
|
55
|
+
: 'transparent', xmlns: "http://www.w3.org/2000/svg", style: {
|
|
56
|
+
transition: 'fill 0.3s ease-in-out',
|
|
57
|
+
position: 'absolute',
|
|
58
|
+
left: '0',
|
|
59
|
+
}, children: _jsx("path", { d: "M0 0C2.76142 0 5 2.23858 5 5V31C5 33.7614 2.76142 36 0 36V0Z" }) }), _jsxs(Box, { display: "flex", alignItems: "center", gap: "8px", sx: { transition: 'gap 0.3s ease-in-out' }, children: [_jsx(IconWrapper, { className: "nav-item-icon", "$state": state, children: getIconComponent(icon, {
|
|
56
60
|
size: 20,
|
|
57
61
|
}) }), !isCollapsed && (_jsx(TextWrapper, { className: "nav-item-text", children: _jsx(Typography, { text: text, size: TypographySize.TextS, weight: state === NavItemState.Active
|
|
58
|
-
? TypographyWeight.
|
|
59
|
-
: TypographyWeight.
|
|
62
|
+
? TypographyWeight.SemiBold
|
|
63
|
+
: TypographyWeight.Medium, className: "nav-item-text", color: state === NavItemState.Active
|
|
60
64
|
? 'var(--colors-light-background-bg-brand)'
|
|
61
|
-
: 'var(--colors-light-text-text-
|
|
65
|
+
: 'var(--colors-light-text-text-paragraph)' }) })), showBadge && !isCollapsed && (_jsx(Badge, { size: BadgeSize.xs, icon: "ClockCountdown", showIcon: true, text: "Coming Soon", color: BadgeColor.Default }))] })] }));
|
|
62
66
|
};
|
|
@@ -7,5 +7,5 @@ export const ProcessHeader = ({ title, currentStep, subtitle, totalSteps, header
|
|
|
7
7
|
const stepChecks = () => {
|
|
8
8
|
return (currentStep && totalSteps && currentStep >= 1 && currentStep <= totalSteps);
|
|
9
9
|
};
|
|
10
|
-
return (_jsxs(Box, { display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', paddingX: 'var(--spacing-tokens-size-in-px-spacing-spacing-3xl)', paddingY: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', sx: sx, className: className, children: [_jsxs(Box, { display: 'flex', flexDirection: 'row', alignItems: 'center', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-lg)', children: [_jsxs(Box, { display: 'flex', flexDirection: 'row', alignItems: 'center', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-lg)', children: [headerRightText && (_jsx(Badge, { text: headerRightText, size: BadgeSize.lg, color: BadgeColor.Green })), stepChecks() && (_jsx(Badge, { text: `Step ${currentStep} of ${totalSteps}`, size: BadgeSize.lg, color: BadgeColor.Violet }))] }), _jsxs(Box, { display: 'flex', flexDirection: 'row', alignItems: 'center', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', children: [title && (_jsx(Typography, { text: `${title}.`, size: TypographySize.TextM, weight: TypographyWeight.SemiBold })), subtitle && (_jsx(Typography, { text: subtitle, size: TypographySize.TextS, weight: TypographyWeight.Regular }))] })] }), onCancelClick && (_jsx(MainButton, { text: 'Cancel Process', onClick: onCancelClick, size: ButtonSize.
|
|
10
|
+
return (_jsxs(Box, { display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', paddingX: 'var(--spacing-tokens-size-in-px-spacing-spacing-3xl)', paddingY: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', sx: sx, className: className, children: [_jsxs(Box, { display: 'flex', flexDirection: 'row', alignItems: 'center', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-lg)', children: [_jsxs(Box, { display: 'flex', flexDirection: 'row', alignItems: 'center', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-lg)', children: [headerRightText && (_jsx(Badge, { text: headerRightText, size: BadgeSize.lg, color: BadgeColor.Green })), stepChecks() && (_jsx(Badge, { text: `Step ${currentStep} of ${totalSteps}`, size: BadgeSize.lg, color: BadgeColor.Violet }))] }), _jsxs(Box, { display: 'flex', flexDirection: 'row', alignItems: 'center', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', children: [title && (_jsx(Typography, { text: `${title}.`, size: TypographySize.TextM, weight: TypographyWeight.SemiBold })), subtitle && (_jsx(Typography, { text: subtitle, size: TypographySize.TextS, weight: TypographyWeight.Regular }))] })] }), onCancelClick && (_jsx(MainButton, { text: 'Cancel Process', onClick: onCancelClick, size: ButtonSize.md, hierarchy: ButtonHierarchy.TetriaryColor, trailingIcon: 'X', showTrailingIcon: true }))] }));
|
|
11
11
|
};
|
|
@@ -14,7 +14,7 @@ const StyledSidebar = styled.div `
|
|
|
14
14
|
background-color: var(--colors-light-background-bg-surface);
|
|
15
15
|
border-right: 1px solid var(--colors-light-border-border-default);
|
|
16
16
|
height: 100vh;
|
|
17
|
-
width: ${({ $size }) => ($size === SidebarSize.Expanded ? '
|
|
17
|
+
width: ${({ $size }) => ($size === SidebarSize.Expanded ? '280px' : '80px')};
|
|
18
18
|
transition: width 0.3s ease-in-out;
|
|
19
19
|
overflow-x: hidden;
|
|
20
20
|
overflow-y: scroll;
|
|
@@ -29,7 +29,7 @@ const SidebarContainer = styled.div `
|
|
|
29
29
|
const LogoContainer = styled.div `
|
|
30
30
|
display: flex;
|
|
31
31
|
align-items: center;
|
|
32
|
-
justify-content:
|
|
32
|
+
justify-content: left;
|
|
33
33
|
margin-bottom: 32px;
|
|
34
34
|
min-height: 38px;
|
|
35
35
|
height: 38px;
|
|
@@ -60,7 +60,7 @@ const NavSection = styled.div `
|
|
|
60
60
|
`;
|
|
61
61
|
const SectionTitle = styled.div `
|
|
62
62
|
color: var(--colors-light-text-text-subtle);
|
|
63
|
-
padding: ${({ $size }) => $size === SidebarSize.Expanded ? '
|
|
63
|
+
padding: ${({ $size }) => $size === SidebarSize.Expanded ? '0px 28px' : '0px'};
|
|
64
64
|
display: ${({ $size }) => $size === SidebarSize.Collapsed ? 'flex' : 'block'};
|
|
65
65
|
opacity: ${({ $size }) => ($size === SidebarSize.Collapsed ? 0 : 0.5)};
|
|
66
66
|
justify-content: ${({ $size }) => $size === SidebarSize.Collapsed ? 'center' : 'flex-start'};
|
|
@@ -104,7 +104,7 @@ export const Sidebar = ({ size = SidebarSize.Expanded, className = '', navSectio
|
|
|
104
104
|
}
|
|
105
105
|
};
|
|
106
106
|
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: section.title, size: TypographySize.TextS, weight: TypographyWeight.
|
|
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: section.title, size: TypographySize.TextS, weight: TypographyWeight.Medium, color: "var(--colors-light-text-text-paragraph)", className: isCollapsed ? 'hidden' : '' }) })), section.items.map((item, itemIndex) => (_jsx(NavItemWrapper, { item: item, isCollapsed: isCollapsed }, `${item.text}-${itemIndex}`)))] }), sectionIndex < navSections.length - 1 &&
|
|
108
108
|
section.showSeparator && _jsx(Separator, { "$size": sidebarSize })] }, `section-${sectionIndex}`))) }), _jsx(BottomContainer, { children: _jsxs(Box, { display: "flex", flexDirection: "column", gap: "16px", children: [credits && (_jsx(Box, { sx: {
|
|
109
109
|
display: 'flex',
|
|
110
110
|
justifyContent: 'center',
|