@pagopa/mui-italia
Version:
[Material-UI](https://mui.com/core/) theme inspired by [Bootstrap Italia](https://italia.github.io/bootstrap-italia/).
78 lines (77 loc) • 3.56 kB
JavaScript
;
'use client';
Object.defineProperty(exports, "__esModule", { value: true });
exports.MIAlert = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const ButtonNaked_1 = require("../ButtonNaked");
const material_1 = require("@mui/material");
const Alert_1 = tslib_1.__importDefault(require("@mui/material/Alert"));
const utils_1 = require("./utils");
const StyledAlert = (0, material_1.styled)(Alert_1.default)(({ theme, severity = 'success' }) => {
const severityPalette = theme.palette[severity];
return {
border: '1px solid',
borderRadius: 8,
padding: theme.spacing(2),
alignItems: 'flex-start',
borderColor: severityPalette.main,
backgroundColor: severityPalette[100],
[theme.breakpoints.down('sm')]: {
alignItems: 'flex-start',
},
'& .MuiAlert-icon': {
opacity: 1,
alignItems: 'center',
marginRight: theme.spacing(1),
color: severityPalette[850],
},
'& .MuiAlert-message': {
padding: 0,
overflow: 'inherit',
lineHeight: '22px',
fontWeight: theme.typography.fontWeightRegular,
flex: 1,
width: '100%',
display: 'flex',
flexDirection: 'column',
overflowWrap: 'anywhere',
wordBreak: 'break-word',
color: severityPalette[850],
},
};
});
const MIAlert = (_a) => {
var { severity = 'success', title, description, action } = _a, rest = tslib_1.__rest(_a, ["severity", "title", "description", "action"]);
const theme = (0, material_1.useTheme)();
const isMobile = (0, material_1.useMediaQuery)(theme.breakpoints.down('sm'));
return ((0, jsx_runtime_1.jsx)(StyledAlert, Object.assign({ severity: severity, icon: (0, utils_1.getIcon)(severity) }, rest, { children: (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ direction: isMobile ? 'column' : 'row', flex: 1 }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ direction: "column", flex: 1, minWidth: 0, gap: title ? '4px' : 0 }, { children: [title && (0, jsx_runtime_1.jsx)(material_1.AlertTitle, Object.assign({ color: (0, utils_1.getColor)(theme, severity) }, { children: title })), description] })), action && (0, jsx_runtime_1.jsx)(MIAlertCta, { cta: action, severity: severity, isMobile: isMobile })] })) })));
};
exports.MIAlert = MIAlert;
const MIAlertCta = ({ cta, severity = 'success', isMobile }) => {
var _a, _b;
const isLink = 'href' in cta;
let target;
let rel;
if (isLink) {
target = (_a = cta.target) !== null && _a !== void 0 ? _a : '_self';
rel = target === '_blank' ? (_b = cta.rel) !== null && _b !== void 0 ? _b : 'noopener noreferrer' : cta.rel;
}
const commonProps = {
onClick: !isLink ? cta.onClick : undefined,
component: (isLink ? 'a' : 'button'),
href: isLink ? cta.href : undefined,
target,
rel,
};
return ((0, jsx_runtime_1.jsx)(ButtonNaked_1.ButtonNaked, Object.assign({}, commonProps, { sx: (theme) => ({
pt: isMobile ? 2 : 0,
minWidth: 'auto',
fontWeight: 600,
fontSize: '16px',
textDecoration: 'none',
alignSelf: isMobile ? 'flex-start' : 'center',
paddingLeft: isMobile ? theme.spacing(0) : theme.spacing(8),
color: theme.palette[severity][850],
}) }, { children: cta.label })));
};