@pagopa/mui-italia
Version:
[Material-UI](https://mui.com/core/) theme inspired by [Bootstrap Italia](https://italia.github.io/bootstrap-italia/).
102 lines (101 loc) • 4.79 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.Message = exports.Title = exports.Cta = exports.BadgeChip = exports.CloseButton = exports.BlueBar = exports.Inner = exports.Root = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const Close_1 = tslib_1.__importDefault(require("@mui/icons-material/Close"));
const material_1 = require("@mui/material");
const ButtonNaked_1 = require("../ButtonNaked");
const colors_1 = require("../../theme/colors");
const resolveColor = (theme, value) => typeof value === 'function' ? value(theme) : value;
exports.Root = (0, material_1.styled)(material_1.Box, {
shouldForwardProp: (prop) => prop !== 'colorStyle',
})(({ theme, colorStyle }) => ({
backgroundColor: resolveColor(theme, colorStyle.background),
border: `1px solid ${resolveColor(theme, colorStyle.border)}`,
borderRadius: theme.spacing(1),
}));
exports.Inner = (0, material_1.styled)(material_1.Box)(({ theme }) => ({
padding: theme.spacing(2),
}));
exports.BlueBar = (0, material_1.styled)(material_1.Box)(({ theme }) => ({
width: 4,
borderRadius: theme.spacing(0.5),
backgroundColor: colors_1.blue[500],
marginRight: theme.spacing(2),
alignSelf: 'stretch',
}));
function CloseButton({ onClose, ariaLabel, }) {
return ((0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ onClick: onClose, size: "small", sx: { color: colors_1.neutral.black }, "aria-label": ariaLabel }, { children: (0, jsx_runtime_1.jsx)(Close_1.default, { fontSize: "small" }) })));
}
exports.CloseButton = CloseButton;
function BadgeChip({ text }) {
return ((0, jsx_runtime_1.jsx)(material_1.Chip, { label: text, size: "small", sx: {
fontWeight: 600,
alignSelf: 'flex-start',
'&.MuiChip-root': {
backgroundColor: colors_1.turquoise[50],
color: colors_1.turquoise[850],
},
'& .MuiChip-label': {
fontSize: '12px',
whiteSpace: 'normal',
overflowWrap: 'anywhere',
wordBreak: 'break-word',
},
} }));
}
exports.BadgeChip = BadgeChip;
function Cta({ kind, cta, alignSelf, variant, id, ariaLabelledBy, sx, }) {
var _a, _b;
const isLink = 'href' in cta;
let target;
let rel;
if (isLink) {
target = (_a = cta.target) !== null && _a !== void 0 ? _a : '_self';
if (target === '_blank') {
rel = (_b = cta.rel) !== null && _b !== void 0 ? _b : 'noopener noreferrer';
}
else {
rel = cta.rel;
}
}
const commonProps = {
id,
'aria-labelledby': ariaLabelledBy,
onClick: 'onClick' in cta ? cta.onClick : undefined,
component: (isLink ? 'a' : 'button'),
href: isLink ? cta.href : undefined,
target: isLink ? target : undefined,
rel: isLink ? rel : undefined,
};
if (kind === 'contained') {
return ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({}, commonProps, { variant: "contained", sx: Object.assign({ borderRadius: '8px', textTransform: 'none', fontWeight: 600, backgroundColor: colors_1.blue[500], fontSize: '14px', px: 2, whiteSpace: 'nowrap', alignSelf }, sx) }, { children: cta.label })));
}
return ((0, jsx_runtime_1.jsx)(ButtonNaked_1.ButtonNaked, Object.assign({}, commonProps, { sx: Object.assign({ p: 0, minWidth: 'auto', fontWeight: 600, fontSize: variant === 'tertiary' ? '16px' : '14px', color: colors_1.blue[500], textDecoration: 'none', alignSelf }, sx) }, { children: cta.label })));
}
exports.Cta = Cta;
function Title({ text, textAlign, variant, fontSizeOverride, id, }) {
const defaultFontSize = variant === 'tertiary' ? '16px' : '24px';
const fontSize = fontSizeOverride !== null && fontSizeOverride !== void 0 ? fontSizeOverride : defaultFontSize;
return ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ id: id, component: "h6", color: colors_1.neutral.black, sx: {
fontWeight: 700,
fontSize,
lineHeight: 1.2,
textAlign,
// prevents long unbroken strings from overflowing the banner.
overflowWrap: 'anywhere',
wordBreak: 'break-word',
} }, { children: text })));
}
exports.Title = Title;
function Message({ text, textAlign, variant, }) {
return ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2", sx: {
color: colors_1.neutral[700],
textAlign,
fontSize: variant === 'tertiary' ? '14px' : undefined,
overflowWrap: 'anywhere',
wordBreak: 'break-word',
} }, { children: text })));
}
exports.Message = Message;