@pagopa/mui-italia
Version:
[Material-UI](https://mui.com/core/) theme inspired by [Bootstrap Italia](https://italia.github.io/bootstrap-italia/).
184 lines (183 loc) • 10.1 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.WithProductSelectionWithPartySelectionWithChipWithParentName = exports.WithProductSelectionWithPartySelectionWithChipAndIconFunction = exports.WithProductSelectionWithPartySelectionWithChip = exports.WithPartySelectionWithChip = exports.WithPartySelectionAndIcon = exports.WithPartySelection = exports.WithoutProductSelectionWithChipAndIcon = exports.WithoutProductSelectionWithChip = exports.WithoutProductSelection = exports.WithProductSelectionWithChip = exports.WithProductSelection = exports.DefaultWithoutPartiesWithChipAndIcon = exports.DefaultWithoutPartiesWithChip = exports.OnlyIconAndChip = exports.DefaultOnlyIcon = exports.DefaultWithoutPartiesAndIcon = exports.DefaultWithoutParties = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const _theme_1 = require("../../theme/index");
const HeaderProduct_1 = require("../HeaderProduct");
const LogoIOApp_1 = require("../../assets/LogoIOApp");
exports.default = {
title: "Components/HeaderProduct (WIP)",
component: HeaderProduct_1.HeaderProduct,
decorators: [
(Story) => ((0, jsx_runtime_1.jsx)("div", Object.assign({ style: { padding: 0, backgroundColor: "#F5F5F5" } }, { children: (0, jsx_runtime_1.jsx)(Story, {}) }))),
],
parameters: {
controls: { hideNoControlsWarning: true },
chromatic: {
viewports: _theme_1.breakpointsChromaticValues,
},
},
};
const productsList = [
{
id: "0",
title: `Area Riservata`,
productUrl: "#area-riservata",
linkType: "external",
},
{
id: "1",
title: `Piattaforma Notifiche`,
productUrl: "#piattaforma-notifiche",
linkType: "external",
},
{
id: "2",
title: `App IO`,
productUrl: "#app-io",
linkType: "internal",
icon: (0, jsx_runtime_1.jsx)(LogoIOApp_1.LogoIOApp, { size: 32, title: "io", color: "default" }),
},
{
id: "3",
title: `Interoperabilità`,
productUrl: "#interoperabilità",
linkType: "internal",
},
{
id: "4",
title: ``,
productUrl: "#no-title",
linkType: "external",
icon: (0, jsx_runtime_1.jsx)(LogoIOApp_1.LogoIOApp, { size: 32, title: "io", color: "default" }),
},
];
const cdnPath = "https://assets.cdn.io.italia.it/logos/organizations/";
const partyList = [
{
id: "0",
name: `Commissario straordinario per la realizzazione di
approdi temporanei e di interventi complementari per la
salvaguardia di Venezia e della sua laguna e ulteriori
interventi per la salvaguardia della laguna di Venezia`,
productRole: "Referente amministrativo",
logoUrl: `${cdnPath}1199250158.png`,
},
{
id: "1",
logoUrl: `${cdnPath}2438750586.png`,
name: "Comune di Roma",
productRole: "Referente amministrativo",
},
{
id: "2",
logoUrl: `${cdnPath}162210348.png`,
name: "Comune di Parma",
productRole: "Referente amministrativo",
},
{
id: "3",
logoUrl: `${cdnPath}82003830161.png`,
name: "Comune di Sotto il Monte Giovanni XXIII",
productRole: "Referente amministrativo",
},
{
id: "4",
logoUrl: `${cdnPath}172960361.png`,
name: "Comune di Castelfranco Emilia",
productRole: "Referente amministrativo",
},
{
id: "5",
logoUrl: `${cdnPath}82001510492.png`,
name: "Comune di Campo nell'Elba",
productRole: "Referente amministrativo",
},
{
id: "6",
logoUrl: `${cdnPath}117100537.png`,
name: "Comune di Castiglione della Pescaia",
productRole: "Referente amministrativo",
},
{
id: "7",
logoUrl: `${cdnPath}142680669.png`,
name: "Comune di Pescasseroli",
},
{
id: "8",
logoUrl: `${cdnPath}81000410688.png`,
name: "Comune di San Valentino in Abruzzo Citeriore",
},
{
id: "9",
logoUrl: `${cdnPath}189800204.png`,
name: "Comune di Mantova",
productRole: "Referente amministrativo",
},
{
id: "10",
logoUrl: `${cdnPath}82002590105.png`,
name: "Comune di Ne",
productRole: "Referente amministrativo",
},
{
id: "11",
logoUrl: `${cdnPath}74260845.png`,
name: "Comune di Agrigento",
productRole: "Referente amministrativo",
},
{
id: "12",
logoUrl: `${cdnPath}80001950403.png`,
name: "Comune di Castrocaro Terme e Terra del Sole",
productRole: "Referente amministrativo",
},
{
id: "13",
logoUrl: undefined,
name: "Ente senza stemma",
productRole: "Referente amministrativo",
},
{
id: "14",
logoUrl: `${cdnPath}172960361.png`,
name: "Amministrazione Comunale",
productRole: "Referente amministrativo",
parentName: "Comune di Castelfranco Emilia",
},
];
const DefaultWithoutParties = () => (0, jsx_runtime_1.jsx)(HeaderProduct_1.HeaderProduct, { productsList: [productsList[0]] });
exports.DefaultWithoutParties = DefaultWithoutParties;
const DefaultWithoutPartiesAndIcon = () => (0, jsx_runtime_1.jsx)(HeaderProduct_1.HeaderProduct, { productsList: [productsList[2]] });
exports.DefaultWithoutPartiesAndIcon = DefaultWithoutPartiesAndIcon;
const DefaultOnlyIcon = () => ((0, jsx_runtime_1.jsx)(HeaderProduct_1.HeaderProduct, { productsList: [productsList[4]] }));
exports.DefaultOnlyIcon = DefaultOnlyIcon;
const OnlyIconAndChip = () => ((0, jsx_runtime_1.jsx)(HeaderProduct_1.HeaderProduct, { chipLabel: "beta", productsList: [productsList[4]] }));
exports.OnlyIconAndChip = OnlyIconAndChip;
const DefaultWithoutPartiesWithChip = () => (0, jsx_runtime_1.jsx)(HeaderProduct_1.HeaderProduct, { chipLabel: "Beta", productsList: [productsList[0]] });
exports.DefaultWithoutPartiesWithChip = DefaultWithoutPartiesWithChip;
const DefaultWithoutPartiesWithChipAndIcon = () => (0, jsx_runtime_1.jsx)(HeaderProduct_1.HeaderProduct, { chipLabel: "Beta", productsList: [productsList[2]] });
exports.DefaultWithoutPartiesWithChipAndIcon = DefaultWithoutPartiesWithChipAndIcon;
const WithProductSelection = () => ((0, jsx_runtime_1.jsx)(HeaderProduct_1.HeaderProduct, { productId: "1", productsList: productsList, onSelectedProduct: (p) => console.log("Selected Item:", p.title), partyList: [partyList[0]] }));
exports.WithProductSelection = WithProductSelection;
const WithProductSelectionWithChip = () => ((0, jsx_runtime_1.jsx)(HeaderProduct_1.HeaderProduct, { chipLabel: "Beta", productId: "1", productsList: productsList, onSelectedProduct: (p) => console.log("Selected Item:", p.title), partyList: [partyList[0]] }));
exports.WithProductSelectionWithChip = WithProductSelectionWithChip;
const WithoutProductSelection = () => ((0, jsx_runtime_1.jsx)(HeaderProduct_1.HeaderProduct, { productsList: [productsList[0]], partyList: [partyList[0]] }));
exports.WithoutProductSelection = WithoutProductSelection;
const WithoutProductSelectionWithChip = () => ((0, jsx_runtime_1.jsx)(HeaderProduct_1.HeaderProduct, { chipLabel: "Beta", productsList: [productsList[0]], partyList: [partyList[0]] }));
exports.WithoutProductSelectionWithChip = WithoutProductSelectionWithChip;
const WithoutProductSelectionWithChipAndIcon = () => ((0, jsx_runtime_1.jsx)(HeaderProduct_1.HeaderProduct, { chipLabel: "Beta", productsList: [productsList[2]], partyList: [partyList[0]] }));
exports.WithoutProductSelectionWithChipAndIcon = WithoutProductSelectionWithChipAndIcon;
const WithPartySelection = () => ((0, jsx_runtime_1.jsx)(HeaderProduct_1.HeaderProduct, { productsList: [productsList[0]], partyList: partyList, onSelectedParty: (e) => console.log("Selected Item:", e.name) }));
exports.WithPartySelection = WithPartySelection;
const WithPartySelectionAndIcon = () => ((0, jsx_runtime_1.jsx)(HeaderProduct_1.HeaderProduct, { productsList: [productsList[2]], partyList: partyList, onSelectedParty: (e) => console.log("Selected Item:", e.name) }));
exports.WithPartySelectionAndIcon = WithPartySelectionAndIcon;
const WithPartySelectionWithChip = () => ((0, jsx_runtime_1.jsx)(HeaderProduct_1.HeaderProduct, { chipLabel: "Beta", productsList: [productsList[0]], partyList: partyList, onSelectedParty: (e) => console.log("Selected Item:", e.name) }));
exports.WithPartySelectionWithChip = WithPartySelectionWithChip;
const WithProductSelectionWithPartySelectionWithChip = () => ((0, jsx_runtime_1.jsx)(HeaderProduct_1.HeaderProduct, { borderBottom: 3, borderColor: _theme_1.theme.palette.warning.main, chipColor: "warning", chipLabel: "Collaudo", productsList: productsList, partyList: partyList, onSelectedParty: (e) => console.log("Selected Item:", e.name) }));
exports.WithProductSelectionWithPartySelectionWithChip = WithProductSelectionWithPartySelectionWithChip;
const WithProductSelectionWithPartySelectionWithChipAndIconFunction = () => ((0, jsx_runtime_1.jsx)(HeaderProduct_1.HeaderProduct, { borderBottom: 3, borderColor: _theme_1.theme.palette.warning.main, chipColor: "warning", chipLabel: "Collaudo", productsList: productsList, partyList: partyList, onSelectedProduct: (e) => console.log("Selected Product: ", e.title), onSelectedParty: (e) => console.log("Selected Item:", e.name) }));
exports.WithProductSelectionWithPartySelectionWithChipAndIconFunction = WithProductSelectionWithPartySelectionWithChipAndIconFunction;
const WithProductSelectionWithPartySelectionWithChipWithParentName = () => ((0, jsx_runtime_1.jsx)(HeaderProduct_1.HeaderProduct, { borderBottom: 3, borderColor: _theme_1.theme.palette.warning.main, chipColor: "warning", chipLabel: "Collaudo", productsList: productsList, partyList: partyList, partyId: "14", onSelectedParty: (e) => console.log("Selected Item:", e.name) }));
exports.WithProductSelectionWithPartySelectionWithChipWithParentName = WithProductSelectionWithPartySelectionWithChipWithParentName;