@pagopa/mui-italia
Version:
[Material-UI](https://mui.com/core/) theme inspired by [Bootstrap Italia](https://italia.github.io/bootstrap-italia/).
149 lines (148 loc) • 5.51 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.WithParentName = exports.NoWrap = exports.Default = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const material_1 = require("@mui/material");
const _theme_1 = require("../../theme/index");
const PartyAccountItem_1 = require("../PartyAccountItem");
const cdnPath = "https://assets.cdn.io.italia.it/logos/organizations/";
const partyMockImages = [
{
image: `${cdnPath}81000410688.png`,
name: "Comune di San Valentino in Abruzzo Citeriore",
},
{
image: `${cdnPath}1199250158.png`,
name: "Comune di Milano",
role: "Referente amministrativo",
},
{
image: `${cdnPath}2438750586.png`,
name: "Comune di Roma",
role: "Referente amministrativo",
},
{
image: `${cdnPath}162210348.png`,
name: "Comune di Parma",
role: "Referente amministrativo",
},
{
image: `${cdnPath}82003830161.png`,
name: "Comune di Sotto il Monte Giovanni XXIII",
role: "Referente amministrativo",
},
{
image: `${cdnPath}172960361.png`,
name: "Comune di Castelfranco Emilia",
role: "Referente amministrativo",
},
{
image: `${cdnPath}82001510492.png`,
name: "Comune di Campo nell'Elba",
role: "Referente amministrativo",
},
{
image: `${cdnPath}117100537.png`,
name: "Comune di Castiglione della Pescaia",
role: "Referente amministrativo",
},
{
image: `${cdnPath}142680669.png`,
name: "Comune di Pescasseroli",
},
{
image: `${cdnPath}189800204.png`,
name: "Comune di Mantova",
role: "Referente amministrativo",
},
{
image: `${cdnPath}82002590105.png`,
name: "Comune di Ne",
role: "Referente amministrativo",
},
{
image: `${cdnPath}74260845.png`,
name: "Comune di Agrigento",
role: "Referente amministrativo",
},
{
image: `${cdnPath}80001950403.png`,
name: "Comune di Castrocaro Terme e Terra del Sole",
role: "Referente amministrativo",
},
{
image: undefined,
name: "Ente senza stemma",
role: "Referente amministrativo",
},
{
image: `${cdnPath}339370272.png`,
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`,
role: `Operatore - Operatore API Operatore - Operatore API`,
},
{
image: `${cdnPath}172960361.png`,
name: "Amministrazione Comunale",
role: "Referente amministrativo",
parentName: "Comune di Castelfranco Emilia",
},
];
const itemWithParentName = {
image: `${cdnPath}172960361.png`,
name: "Amministrazione Comunale",
role: "Referente amministrativo",
parentName: "Comune di Castelfranco Emilia",
};
const componentMaxWidth = 500;
/* Generate random value without repeating values
Source of this snippet: https://akashmittal.com/javascript-random-array-element-no-repeat/ */
const alreadyPicked = [];
const randomValueFromArray = (array) => {
if (alreadyPicked.length === 0) {
for (const [i] of array.entries()) {
alreadyPicked.push(i);
}
}
const randomValueIndex = Math.floor(Math.random() * alreadyPicked.length);
const indexOfItemInMyArray = alreadyPicked[randomValueIndex];
alreadyPicked.splice(randomValueIndex, 1);
return array.indexOf(array[indexOfItemInMyArray]);
};
exports.default = {
title: "Components/PartyAccountItem",
component: PartyAccountItem_1.PartyAccountItem,
decorators: [
(Story) => ((0, jsx_runtime_1.jsx)("div", Object.assign({ style: {
padding: "1em",
backgroundColor: "#F5F5F5",
} }, { children: (0, jsx_runtime_1.jsx)(Story, {}) }))),
],
parameters: {
chromatic: {
viewports: _theme_1.breakpointsChromaticValues.filter((resolution) => resolution <= componentMaxWidth),
},
},
};
const Template = (args) => {
const [randomIndex, setRandomIndex] = (0, react_1.useState)(0);
const item = partyMockImages[randomIndex];
const getRandomParty = () => {
const randomNumber = randomValueFromArray(partyMockImages);
setRandomIndex(randomNumber);
};
return ((0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ gap: 2, alignItems: "flex-start", sx: { maxWidth: componentMaxWidth } }, { children: [(0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "contained", onClick: getRandomParty }, { children: "Get random Party" })), (0, jsx_runtime_1.jsx)(PartyAccountItem_1.PartyAccountItem, Object.assign({}, args, { image: item.image, partyName: item.name, partyRole: item.role, parentPartyName: item.parentName }))] })));
};
exports.Default = Template.bind({});
exports.Default.args = {
noWrap: false,
};
exports.NoWrap = Template.bind({});
exports.NoWrap.args = {
noWrap: true,
};
const WithParentName = () => ((0, jsx_runtime_1.jsx)(PartyAccountItem_1.PartyAccountItem, { image: itemWithParentName.image, partyName: itemWithParentName.name, partyRole: itemWithParentName.role, parentPartyName: itemWithParentName.parentName }));
exports.WithParentName = WithParentName;