@pagopa/mui-italia
Version:
[Material-UI](https://mui.com/core/) theme inspired by [Bootstrap Italia](https://italia.github.io/bootstrap-italia/).
66 lines (65 loc) • 3.67 kB
JavaScript
;
'use client';
Object.defineProperty(exports, "__esModule", { value: true });
exports.Tag = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const ReportProblemRounded_1 = tslib_1.__importDefault(require("@mui/icons-material/ReportProblemRounded"));
const ReportRounded_1 = tslib_1.__importDefault(require("@mui/icons-material/ReportRounded"));
const CheckCircleRounded_1 = tslib_1.__importDefault(require("@mui/icons-material/CheckCircleRounded"));
const InfoRounded_1 = tslib_1.__importDefault(require("@mui/icons-material/InfoRounded"));
const system_1 = require("@mui/system");
const _theme_1 = require("../../theme/index");
const colors_1 = require("../../theme/foundations/colors");
/* Transform HTML component into MUI Styled Component
in order to accept `sx` prop */
const StyledTag = (0, system_1.styled)('span')({
fontSize: (0, _theme_1.pxToRem)(12),
fontWeight: 600,
userSelect: 'none',
padding: `${(0, _theme_1.pxToRem)(4)} ${(0, _theme_1.pxToRem)(8)}`,
backgroundColor: _theme_1.theme.palette.common.white,
color: _theme_1.theme.palette.grey[700],
fontFamily: _theme_1.theme.typography.fontFamily,
borderRadius: (0, _theme_1.pxToRem)(6),
border: `1px solid ${_theme_1.theme.palette.grey[100]}`,
display: 'inline-flex',
alignItems: 'center',
gap: _theme_1.theme.spacing(1),
lineHeight: (0, _theme_1.pxToRem)(18),
textTransform: 'uppercase',
});
const fontSize = (0, _theme_1.pxToRem)(14);
const Icon = ({ variant, icon, ariaLabel, }) => {
const CustomIcon = icon;
if (variant === 'info') {
return ((0, jsx_runtime_1.jsx)(InfoRounded_1.default, { sx: { color: colors_1.colors.info[700], fontSize }, "aria-hidden": "false", "aria-label": ariaLabel || 'Stato: informativo' }));
}
if (variant === 'warning') {
return ((0, jsx_runtime_1.jsx)(ReportProblemRounded_1.default, { sx: { color: colors_1.colors.warning[700], fontSize }, "aria-hidden": "false", "aria-label": ariaLabel || 'Stato: avviso' }));
}
if (variant === 'error') {
return ((0, jsx_runtime_1.jsx)(ReportRounded_1.default, { sx: { color: colors_1.colors.error[600], fontSize }, "aria-hidden": "false", "aria-label": ariaLabel || 'Stato: errore' }));
}
if (variant === 'success') {
return ((0, jsx_runtime_1.jsx)(CheckCircleRounded_1.default, { sx: { color: colors_1.colors.success[700], fontSize }, "aria-hidden": "false", "aria-label": ariaLabel || 'Stato: confermato' }));
}
if (variant === 'default' && CustomIcon) {
return ((0, jsx_runtime_1.jsx)(CustomIcon, { sx: { color: colors_1.colors.blue[500], fontSize }, "aria-hidden": "false", "aria-label": ariaLabel || 'Stato: standard' }));
}
if (variant === 'only-icon' && CustomIcon) {
return ((0, jsx_runtime_1.jsx)(CustomIcon, { sx: { fill: colors_1.colors.neutral.grey[700], fontSize }, "aria-hidden": ariaLabel ? 'false' : undefined, "aria-label": ariaLabel }));
}
return null;
};
// here we cannot use destructured object because TagProps is a Discriminated Union of Interfaces
const Tag = (props) => {
const { variant = 'default' } = props;
const hasIcon = 'icon' in props && props.icon;
const hasValue = 'value' in props && props.value;
if (variant === 'only-icon' && hasIcon) {
return (0, jsx_runtime_1.jsx)(Icon, { variant: variant, icon: props.icon });
}
return ((0, jsx_runtime_1.jsxs)(StyledTag, Object.assign({}, props, { children: [(0, jsx_runtime_1.jsx)(Icon, { variant: variant, icon: hasIcon ? props.icon : undefined }), hasValue && props.value] })));
};
exports.Tag = Tag;