@pagopa/mui-italia
Version:
[Material-UI](https://mui.com/core/) theme inspired by [Bootstrap Italia](https://italia.github.io/bootstrap-italia/).
153 lines (152 loc) • 5.67 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.WithParentName = exports.WithTag = exports.Selected = exports.Disabled = 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 PartyAccountItemButton_1 = require("../PartyAccountItemButton");
const Tag_1 = require("../Tag");
const cdnPath = "https://assets.cdn.io.italia.it/logos/organizations/";
const partyMockImages = [
{
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}81000410688.png`,
name: "Comune di San Valentino in Abruzzo Citeriore",
},
{
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: undefined,
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",
};
/* Tag Element */
const tag = (0, jsx_runtime_1.jsx)(Tag_1.Tag, { color: "warning", value: "Da completare" });
const componentMaxWidth = 400;
/* 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/PartyAccountItemButton",
component: PartyAccountItemButton_1.PartyAccountItemButton,
parameters: {
layout: "padded",
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)(PartyAccountItemButton_1.PartyAccountItemButton, Object.assign({}, args, { image: item.image, partyName: item.name, partyRole: item.role, parentPartyName: item.parentName }))] })));
};
exports.Default = Template.bind({});
exports.Disabled = Template.bind({});
exports.Disabled.args = {
disabled: true,
endSlot: tag,
};
exports.Selected = Template.bind({});
exports.Selected.args = {
selectedItem: true,
};
exports.WithTag = Template.bind({});
exports.WithTag.args = {
endSlot: tag,
};
const WithParentName = () => ((0, jsx_runtime_1.jsx)(PartyAccountItemButton_1.PartyAccountItemButton, { image: itemWithParentName.image, partyName: itemWithParentName.name, partyRole: itemWithParentName.role, parentPartyName: itemWithParentName.parentName }));
exports.WithParentName = WithParentName;