@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) • 1.9 kB
JavaScript
"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/Icons",
};
const IconBox = ({ name, icon }) => ((0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ spacing: 2, sx: {
backgroundColor: "background.paper",
borderRadius: 2,
p: 1,
pt: 2,
display: "flex",
flexDirection: "column",
alignItems: "center",
} }, { children: [icon, name && (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ sx: { fontSize: 12 } }, { children: name }))] })));
const Overview = () => ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ sx: {
display: "grid",
gridTemplateColumns: "repeat(auto-fill, minmax(100px, 1fr))",
gap: 2,
} }, { children: [(0, jsx_runtime_1.jsx)(IconBox, { name: "MediumIcon", icon: (0, jsx_runtime_1.jsx)(_1.MediumIcon, {}) }), (0, jsx_runtime_1.jsx)(IconBox, { name: "SpidIcon", icon: (0, jsx_runtime_1.jsx)(_1.SpidIcon, {}) }), (0, jsx_runtime_1.jsx)(IconBox, { name: "CieIcon", icon: (0, jsx_runtime_1.jsx)(_1.CieIcon, {}) }), (0, jsx_runtime_1.jsx)(IconBox, { name: "CheckIbanIcon", icon: (0, jsx_runtime_1.jsx)(_1.CheckIbanIcon, {}) }), (0, jsx_runtime_1.jsx)(IconBox, { name: "PNIcon", icon: (0, jsx_runtime_1.jsx)(_1.PNIcon, {}) }), (0, jsx_runtime_1.jsx)(IconBox, { name: "InteropIcon", icon: (0, jsx_runtime_1.jsx)(_1.InteropIcon, {}) })] })));
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, {}) }))),
];