@pagopa/mui-italia
Version:
[Material-UI](https://mui.com/core/) theme inspired by [Bootstrap Italia](https://italia.github.io/bootstrap-italia/).
68 lines (67 loc) • 5.61 kB
JavaScript
"use strict";
"use client";
Object.defineProperty(exports, "__esModule", { value: true });
exports.Walkthrough = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const material_1 = require("@mui/material");
const material_2 = require("@mui/material");
const ArrowForward_1 = tslib_1.__importDefault(require("./ArrowForward"));
const Walkthrough = ({ title, items }) => {
const theme = (0, material_1.useTheme)();
const isTablet = (0, material_1.useMediaQuery)(theme.breakpoints.up("md"));
const containerPadding = {
xs: theme.spacing(2),
sm: theme.spacing(3),
md: 0,
};
return ((0, jsx_runtime_1.jsx)(material_2.Box, Object.assign({ bgcolor: "#FAFAFA" }, { children: (0, jsx_runtime_1.jsx)(material_2.Container, Object.assign({ maxWidth: "xl", sx: {
py: {
xs: 4,
sm: 4,
md: 8,
},
}, disableGutters: isTablet ? false : true }, { children: (0, jsx_runtime_1.jsxs)(material_2.Stack, Object.assign({ alignContent: "center", spacing: { xs: 4, md: 8 } }, { children: [(0, jsx_runtime_1.jsx)(material_2.Typography, Object.assign({ variant: "h4", textAlign: "center" }, { children: title })), (0, jsx_runtime_1.jsx)(material_2.Box, Object.assign({ sx: {
display: "grid",
gap: 3,
gridTemplateColumns: {
xs: "repeat(6, minmax(0, 1fr))",
md: "repeat(12, minmax(0, 1fr))",
},
} }, { children: (0, jsx_runtime_1.jsx)(material_2.Box, Object.assign({ gridColumn: {
xs: "span 6",
md: "2 / span 10",
} }, { children: (0, jsx_runtime_1.jsx)(material_2.Stack, Object.assign({ direction: "row", alignItems: "flex-start", justifyContent: { xs: "flex-start", md: "center" }, spacing: { xs: 4, lg: 8 }, sx: {
overflowX: { xs: "scroll", md: "hidden" },
overflowY: "hidden",
scrollSnapType: "x mandatory",
scrollPadding: containerPadding,
paddingLeft: containerPadding,
scrollbarWidth: "none",
"&::-webkit-scrollbar": {
display: "none",
},
"&::after": {
content: '""',
paddingLeft: containerPadding,
},
} }, { children: items.map(({ icon, title: itemTitle, subtitle, isSequential = true }, index) => ((0, jsx_runtime_1.jsxs)(material_2.Stack, Object.assign({ alignContent: "center", justifyContent: "flex-start", spacing: 1, sx: {
minWidth: { xs: "80%", sm: "40%", md: "auto" },
flex: 1,
scrollSnapAlign: "start",
} }, { children: [isSequential ? ((0, jsx_runtime_1.jsxs)(material_2.Typography, Object.assign({ variant: "caption", color: "primary.dark", alignSelf: "flex-start" }, { children: [(index + 1).toString().padStart(2, "0"), " "] }))) : ((0, jsx_runtime_1.jsx)(material_2.Box, { mt: 2.5 })), (0, jsx_runtime_1.jsxs)(material_2.Stack, Object.assign({ direction: "row", justifyContent: "space-between", color: "primary.dark" }, { children: [(0, jsx_runtime_1.jsx)(material_2.Box, Object.assign({ alignSelf: "flex-start", sx: {
svg: {
height: theme.spacing(8),
width: theme.spacing(8),
},
} }, { children: icon })), index < items.length - 1 &&
isSequential &&
(typeof items[index + 1].isSequential ===
"undefined" ||
items[index + 1].isSequential) && ((0, jsx_runtime_1.jsx)(material_2.Box, Object.assign({ sx: {
display: "flex",
width: theme.spacing(8),
height: theme.spacing(8),
}, alignItems: "center", justifyContent: "flex-end" }, { children: (0, jsx_runtime_1.jsx)(ArrowForward_1.default, {}) })))] })), (0, jsx_runtime_1.jsxs)(material_2.Stack, Object.assign({ spacing: 1 }, { children: [(0, jsx_runtime_1.jsx)(material_2.Typography, Object.assign({ variant: "h6" }, { children: itemTitle })), (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [subtitle && typeof subtitle === "string" && ((0, jsx_runtime_1.jsx)(material_2.Typography, Object.assign({ variant: "body2" }, { children: subtitle }))), subtitle && typeof subtitle !== "string" && subtitle] })] }))] }), index))) })) })) }))] })) })) })));
};
exports.Walkthrough = Walkthrough;