@pagopa/mui-italia
Version:
[Material-UI](https://mui.com/core/) theme inspired by [Bootstrap Italia](https://italia.github.io/bootstrap-italia/).
14 lines (13 loc) • 1.82 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.Tertiary = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const material_1 = require("@mui/material");
const colors_1 = require("../../../theme/colors");
const shared_1 = require("../shared");
function Tertiary({ model, view, title, message, cta, onClose, closeAriaLabel, titleId, }) {
const showCta = !!cta;
const isHorizontal = view.isHorizontal;
return ((0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ direction: "row", justifyContent: "space-between", width: "100%", gap: 2, alignItems: "flex-start" }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ direction: isHorizontal ? 'row' : 'column', flex: 1, alignItems: isHorizontal ? 'flex-start' : 'center', gap: `${view.contentGapPx}px`, minWidth: 0 }, { children: [model.topIcon && ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ sx: { color: colors_1.blue[200], mt: isHorizontal ? 0.25 : 0 } }, { children: model.topIcon }))), (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ direction: "column", flex: 1, gap: 1, alignItems: isHorizontal ? 'flex-start' : 'center' }, { children: [(0, jsx_runtime_1.jsx)(shared_1.Title, { id: titleId, text: title, textAlign: model.textAlign, variant: view.variant }), 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: isHorizontal ? 'flex-start' : 'center', variant: view.variant, sx: { mt: 0.5 } }))] }))] })), onClose && (0, jsx_runtime_1.jsx)(shared_1.CloseButton, { onClose: onClose, ariaLabel: closeAriaLabel })] })));
}
exports.Tertiary = Tertiary;