@pagopa/mui-italia
Version:
[Material-UI](https://mui.com/core/) theme inspired by [Bootstrap Italia](https://italia.github.io/bootstrap-italia/).
22 lines (21 loc) • 2.58 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.Primary = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const material_1 = require("@mui/material");
const shared_1 = require("../shared");
function Primary({ model, view, title, message, cta, onClose, closeAriaLabel, titleId, }) {
const showCta = !!cta;
const showBadge = view.variant === 'primary' && Boolean(model.badgeText);
return ((0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ direction: "row", alignItems: "stretch" }, { children: [(0, jsx_runtime_1.jsx)(shared_1.BlueBar, {}), (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ direction: "row", justifyContent: "space-between", width: "100%", gap: 2 }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ direction: "column", flex: 1, gap: 1, minWidth: 0 }, { children: [showBadge && model.badgeText && (0, jsx_runtime_1.jsx)(shared_1.BadgeChip, { text: model.badgeText }), (0, jsx_runtime_1.jsx)(shared_1.Title, { id: titleId, text: title, textAlign: model.textAlign, variant: view.variant, fontSizeOverride: view.isHorizontal ? undefined : '18px' }), message && (0, jsx_runtime_1.jsx)(shared_1.Message, { text: message, textAlign: model.textAlign, variant: view.variant }), showCta && ((0, jsx_runtime_1.jsx)(shared_1.Cta, { id: cta.id, kind: model.ctaKind, cta: cta, ariaLabelledBy: `${titleId} ${cta.id}`, alignSelf: "flex-start", variant: view.variant, sx: { mt: 1 } }))] })), (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ direction: "column", alignItems: "flex-end", gap: 2, flexShrink: 0 }, { children: [onClose && (0, jsx_runtime_1.jsx)(shared_1.CloseButton, { onClose: onClose, ariaLabel: closeAriaLabel }), model.illustrationNode && ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ sx: {
width: `${view.primaryIllustrationSizePx}px`,
height: `${view.primaryIllustrationSizePx}px`,
display: 'flex',
alignItems: view.isHorizontal ? 'flex-end' : 'flex-start',
justifyContent: 'flex-end',
mt: view.isHorizontal ? 'auto' : 0,
'& svg': { width: '100%', height: '100%' },
'& img': { width: '100%', height: '100%', objectFit: 'contain' },
} }, { children: model.illustrationNode })))] }))] }))] })));
}
exports.Primary = Primary;