@beydesign/storybook 0.0.74 → 0.0.75
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.
|
@@ -4,6 +4,6 @@ import { Box } from '@mui/material';
|
|
|
4
4
|
import { Typography, TypographySize, TypographyWeight } from '../Typography';
|
|
5
5
|
import { Badge } from './Badge';
|
|
6
6
|
import { ButtonHierarchy, ButtonSize, MainButton } from '../Buttons';
|
|
7
|
-
export const Topbar = ({ title, badgeText, newButtonText, onNewButtonClick, className, style, }) => {
|
|
8
|
-
return (_jsxs(Box, { display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', paddingX: 'var(--spacing-tokens-size-in-px-spacing-spacing-xl)', paddingY: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', className: className, sx: style, minWidth: '400px', children: [_jsx(Typography, { text: title, size: TypographySize.HeadingS, weight: TypographyWeight.SemiBold, trailingElement: badgeText && (_jsx(Badge, { text: badgeText, size: BadgeSize.xs, color: BadgeColor.Violet, style: { marginBottom: '10px' } })), style: { gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)' } }), _jsx(MainButton, { size: ButtonSize.lg, text: newButtonText, onClick: onNewButtonClick, hierarchy: ButtonHierarchy.Primary, trailingIcon: 'Plus', showTrailingIcon: true })] }));
|
|
7
|
+
export const Topbar = ({ title, badgeText, newButtonText, onNewButtonClick, newButtonHidden, className, style, }) => {
|
|
8
|
+
return (_jsxs(Box, { display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', paddingX: 'var(--spacing-tokens-size-in-px-spacing-spacing-xl)', paddingY: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', className: className, sx: style, minWidth: '400px', children: [_jsx(Typography, { text: title, size: TypographySize.HeadingS, weight: TypographyWeight.SemiBold, trailingElement: badgeText && (_jsx(Badge, { text: badgeText, size: BadgeSize.xs, color: BadgeColor.Violet, style: { marginBottom: '10px' } })), style: { gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)' } }), !newButtonHidden && (_jsx(MainButton, { size: ButtonSize.lg, text: newButtonText, onClick: onNewButtonClick, hierarchy: ButtonHierarchy.Primary, trailingIcon: 'Plus', showTrailingIcon: true }))] }));
|
|
9
9
|
};
|
|
@@ -209,8 +209,10 @@ export interface TopbarProps {
|
|
|
209
209
|
title: string;
|
|
210
210
|
/** Badge */
|
|
211
211
|
badgeText?: string;
|
|
212
|
-
/** New button */
|
|
212
|
+
/** New button text */
|
|
213
213
|
newButtonText?: string;
|
|
214
|
+
/** New button hidden */
|
|
215
|
+
newButtonHidden?: boolean;
|
|
214
216
|
/** On click of new button */
|
|
215
217
|
onNewButtonClick?: () => void;
|
|
216
218
|
/** Style */
|