@pagopa/mui-italia
Version:
[Material-UI](https://mui.com/core/) theme inspired by [Bootstrap Italia](https://italia.github.io/bootstrap-italia/).
31 lines (30 loc) • 3.88 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.Overview = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const material_1 = require("@mui/material");
const _1 = require("./");
exports.default = {
title: "Assets/Illustrations",
parameters: { controls: { sort: "size" } },
};
const IllusBox = ({ name, illustration }) => ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ sx: {
backgroundColor: "background.paper",
borderRadius: 2,
p: 3,
display: "flex",
flexDirection: "column",
alignItems: "center",
} }, { children: [illustration, name && ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ sx: { pt: 3 }, variant: "body1" }, { children: name })))] })));
const Overview = () => ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ sx: {
display: "grid",
gridTemplateColumns: "repeat(auto-fit, minmax(250px, 1fr))",
gap: 2,
} }, { children: [(0, jsx_runtime_1.jsx)(IllusBox, { name: "<IllusCompleted />", illustration: (0, jsx_runtime_1.jsx)(_1.IllusCompleted, {}) }), (0, jsx_runtime_1.jsx)(IllusBox, { name: "<IllusError />", illustration: (0, jsx_runtime_1.jsx)(_1.IllusError, {}) }), (0, jsx_runtime_1.jsx)(IllusBox, { name: "<IllusUploadFile />", illustration: (0, jsx_runtime_1.jsx)(_1.IllusUploadFile, {}) }), (0, jsx_runtime_1.jsx)(IllusBox, { name: "<IllusSms />", illustration: (0, jsx_runtime_1.jsx)(_1.IllusSms, {}) }), (0, jsx_runtime_1.jsx)(IllusBox, { name: "<IllusEmailValidation />", illustration: (0, jsx_runtime_1.jsx)(_1.IllusEmailValidation, {}) }), (0, jsx_runtime_1.jsx)(IllusBox, { name: "<IllusEmail />", illustration: (0, jsx_runtime_1.jsx)(_1.IllusEmail, {}) }), (0, jsx_runtime_1.jsx)(IllusBox, { name: "<IllusPiggyBank />", illustration: (0, jsx_runtime_1.jsx)(_1.IllusPiggyBank, {}) }), (0, jsx_runtime_1.jsx)(IllusBox, { name: "<IllusLogin />", illustration: (0, jsx_runtime_1.jsx)(_1.IllusLogin, {}) }), (0, jsx_runtime_1.jsx)(IllusBox, { name: "<IllusSimplify />", illustration: (0, jsx_runtime_1.jsx)(_1.IllusSimplify, {}) }), (0, jsx_runtime_1.jsx)(IllusBox, { name: "<IllusSafeDeposit />", illustration: (0, jsx_runtime_1.jsx)(_1.IllusSafeDeposit, {}) }), (0, jsx_runtime_1.jsx)(IllusBox, { name: "<IllusQuick />", illustration: (0, jsx_runtime_1.jsx)(_1.IllusQuick, {}) }), (0, jsx_runtime_1.jsx)(IllusBox, { name: "<IllusSharingInfo />", illustration: (0, jsx_runtime_1.jsx)(_1.IllusSharingInfo, {}) }), (0, jsx_runtime_1.jsx)(IllusBox, { name: "<IllusRepository />", illustration: (0, jsx_runtime_1.jsx)(_1.IllusRepository, {}) }), (0, jsx_runtime_1.jsx)(IllusBox, { name: "<IllusHistoryDoc />", illustration: (0, jsx_runtime_1.jsx)(_1.IllusHistoryDoc, {}) }), (0, jsx_runtime_1.jsx)(IllusBox, { name: "<IllusDataSecurity />", illustration: (0, jsx_runtime_1.jsx)(_1.IllusDataSecurity, {}) }), (0, jsx_runtime_1.jsx)(IllusBox, { name: "<IllusPaymentCompleted />", illustration: (0, jsx_runtime_1.jsx)(_1.IllusPaymentCompleted, {}) }), (0, jsx_runtime_1.jsx)(IllusBox, { name: "<IllusInProgress />", illustration: (0, jsx_runtime_1.jsx)(_1.IllusInProgress, {}) }), (0, jsx_runtime_1.jsx)(IllusBox, { name: "<IllusUmbrella />", illustration: (0, jsx_runtime_1.jsx)(_1.IllusUmbrella, {}) }), (0, jsx_runtime_1.jsx)(IllusBox, { name: "<IllusAlarmClock />", illustration: (0, jsx_runtime_1.jsx)(_1.IllusAlarmClock, {}) }), (0, jsx_runtime_1.jsx)(IllusBox, { name: "<IllusUserDenied />", illustration: (0, jsx_runtime_1.jsx)(_1.IllusUserUnauthorized, {}) })] })));
exports.Overview = Overview;
exports.Overview.parameters = {
controls: { hideNoControlsWarning: true },
};
exports.Overview.decorators = [
(Story) => ((0, jsx_runtime_1.jsx)("div", Object.assign({ style: { padding: "16px", backgroundColor: "#F5F5F5" } }, { children: (0, jsx_runtime_1.jsx)(Story, {}) }))),
];