UNPKG

@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
"use strict"; 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, {}) }))), ];