@pagopa/mui-italia
Version:
[Material-UI](https://mui.com/core/) theme inspired by [Bootstrap Italia](https://italia.github.io/bootstrap-italia/).
90 lines (89 loc) • 5.15 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.Default = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const lab_1 = require("@mui/lab");
const material_1 = require("@mui/material");
const _theme_1 = require("../../theme/index");
/* Icons */
const AttachFileRounded_1 = tslib_1.__importDefault(require("@mui/icons-material/AttachFileRounded"));
const ButtonNaked_1 = require("../ButtonNaked");
const TimelineNotification_1 = require("../TimelineNotification");
exports.default = {
title: "Components/TimelineNotification",
component: lab_1.Timeline,
parameters: {
controls: { sort: "size" },
chromatic: {
viewports: _theme_1.breakpointsChromaticValues,
},
},
backgrounds: [{ name: "dark background", value: "#000", default: true }],
};
// Mock Data
const notificationStatusHistory = [
{
statusLabel: "Pagata",
state: "success",
activeFrom: "2022-02-22T11:22:00.957Z",
},
{
minor: true,
statusLabel: "In inoltro",
title: "Minor event with multiple destinataries",
description: "Description",
activeFrom: "2022-02-22T11:22:12.971Z",
fiscalCode: "MRARSS08S05I480N - Mario Rossi",
},
{
statusLabel: "In inoltro",
state: "warning",
description: "Lorem ipsum dolor bla bla",
activeFrom: "2022-02-22T11:22:12.971Z",
},
{
statusLabel: "Perfezionata per visione",
state: "success",
activeFrom: "2022-02-22T08:12:29.991Z",
},
{
minor: true,
statusLabel: "In inoltro",
title: "Minor event with single destinatary",
description: "Description",
activeFrom: "2022-02-22T11:22:12.971Z",
},
{
statusLabel: "Destinatario irreperibile",
state: "error",
activeFrom: "2022-02-09T11:24:33.061Z",
},
];
function getMonthString(dateString) {
const date = new Date(dateString);
return date
.toLocaleString("default", { month: "long" })
.toUpperCase()
.substring(0, 3);
}
function getDay(dateString) {
const date = new Date(dateString);
return `0${date.getDate()}`.slice(-2);
}
function getTime(dateString) {
const date = new Date(dateString);
return `${date.getHours()}:${date.getMinutes()}`;
}
const Default = () => ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ sx: {
maxWidth: 450,
backgroundColor: "background.paper",
borderRadius: 2,
} }, { children: (0, jsx_runtime_1.jsx)(TimelineNotification_1.TimelineNotification, { children: notificationStatusHistory.map((item, i) => ((0, jsx_runtime_1.jsxs)(TimelineNotification_1.TimelineNotificationItem, { children: [(0, jsx_runtime_1.jsxs)(TimelineNotification_1.TimelineNotificationOppositeContent, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "sidenav", component: "div" }, { children: getDay(item.activeFrom) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ color: "text.secondary", variant: "caption", component: "div" }, { children: getMonthString(item.activeFrom) }))] }), (0, jsx_runtime_1.jsxs)(TimelineNotification_1.TimelineNotificationSeparator, { children: [(0, jsx_runtime_1.jsx)(lab_1.TimelineConnector, {}), (0, jsx_runtime_1.jsx)(TimelineNotification_1.TimelineNotificationDot, { variant: i === 0 ? "outlined" : undefined, size: item.minor ? "small" : "default" }), (0, jsx_runtime_1.jsx)(lab_1.TimelineConnector, {})] }), (0, jsx_runtime_1.jsxs)(TimelineNotification_1.TimelineNotificationContent, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "caption", color: "text.secondary", component: "div" }, { children: getTime(item.activeFrom) })), item.state && ((0, jsx_runtime_1.jsx)(material_1.Chip, { size: "small", label: item.statusLabel, color: item.state })), item.title && ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ color: "text.primary", variant: "caption-semibold", component: "div" }, { children: item.title }))), item.description && ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ color: "text.primary", variant: "caption", component: "div" }, { children: item.description }))), item.minor && item.fiscalCode && ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ color: "text.secondary", variant: "caption", component: "div" }, { children: item.fiscalCode }))), !item.minor && ((0, jsx_runtime_1.jsx)(ButtonNaked_1.ButtonNaked, Object.assign({ href: "#", target: "_blank", variant: "naked", color: "primary", weight: "light", startIcon: (0, jsx_runtime_1.jsx)(AttachFileRounded_1.default, {}) }, { children: "Attestato opponibile a Terzi" })))] })] }, item.activeFrom))) }) })));
exports.Default = Default;
exports.Default.parameters = {
controls: { hideNoControlsWarning: true },
};
exports.Default.decorators = [
(Story) => ((0, jsx_runtime_1.jsx)("div", Object.assign({ style: { padding: "1em", backgroundColor: "#F5F5F5" } }, { children: (0, jsx_runtime_1.jsx)(Story, {}) }))),
];