@beydesign/storybook 0.0.75 → 0.0.76
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/UI/Badge.js
CHANGED
|
@@ -3,7 +3,7 @@ import { BadgeColor, BadgeSize } from './types';
|
|
|
3
3
|
import { Box } from '@mui/material';
|
|
4
4
|
import { Typography, TypographySize, TypographyWeight } from '../Typography';
|
|
5
5
|
import { getIconComponent } from '../../utils';
|
|
6
|
-
export const Badge = ({ color = BadgeColor.Default, size = BadgeSize.md, text, style: customStyle, icon = 'Cactus', showIcon = false, fill = true, }) => {
|
|
6
|
+
export const Badge = ({ color = BadgeColor.Default, size = BadgeSize.md, text, style: customStyle, icon = 'Cactus', showIcon = false, fill = true, iconWeight = 'regular', iconSize, iconColor, }) => {
|
|
7
7
|
const getBackgroundColor = (color) => {
|
|
8
8
|
switch (color) {
|
|
9
9
|
case BadgeColor.Default:
|
|
@@ -110,9 +110,9 @@ export const Badge = ({ color = BadgeColor.Default, size = BadgeSize.md, text, s
|
|
|
110
110
|
const border = getBorder(color);
|
|
111
111
|
const padding = getPadding(size);
|
|
112
112
|
const iconProps = {
|
|
113
|
-
size: getIconSize(size),
|
|
114
|
-
color: getTextColor(),
|
|
115
|
-
weight:
|
|
113
|
+
size: iconSize || getIconSize(size),
|
|
114
|
+
color: iconColor || getTextColor(),
|
|
115
|
+
weight: iconWeight,
|
|
116
116
|
};
|
|
117
117
|
return (_jsxs(Box, { display: "flex", alignItems: "center", justifyContent: "center", bgcolor: fill ? backgroundColor : 'transparent', border: fill ? border : 'none', borderRadius: fill ? 'var(--spacing-tokens-size-in-px-radius-radius-full)' : 'none', padding: padding, margin: 0, gap: "4px", sx: customStyle, children: [showIcon && icon && getIconComponent(icon, iconProps), text && (_jsx(Typography, { text: text, size: getTypographySize(size), weight: TypographyWeight.Medium, color: getTextColor() }))] }));
|
|
118
118
|
};
|
|
@@ -41,6 +41,12 @@ export type BadgeProps = {
|
|
|
41
41
|
icon?: IconName;
|
|
42
42
|
/** Whether to fill the icon */
|
|
43
43
|
fill?: boolean;
|
|
44
|
+
/** Custom icon weight (regular, bold, duotone, fill, light, thin) */
|
|
45
|
+
iconWeight?: 'regular' | 'bold' | 'duotone' | 'fill' | 'light' | 'thin';
|
|
46
|
+
/** Custom icon size (overrides the default size based on badge size) */
|
|
47
|
+
iconSize?: string | number;
|
|
48
|
+
/** Custom icon color (overrides the default color based on badge color) */
|
|
49
|
+
iconColor?: string;
|
|
44
50
|
};
|
|
45
51
|
/**
|
|
46
52
|
* Avatar size variants
|