@pagopa/mui-italia
Version:
[Material-UI](https://mui.com/core/) theme inspired by [Bootstrap Italia](https://italia.github.io/bootstrap-italia/).
82 lines (81 loc) • 3.94 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.Default = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const material_1 = require("@mui/material");
const ProductAvatar_1 = require("./ProductAvatar");
const productMockImages = {
"prod-io": {
url: "https://dev.selfcare.pagopa.it/resources/products/prod-io/logo.svg",
background: "#0073E6",
title: "App Io",
},
"prod-io-premium": {
url: "https://dev.selfcare.pagopa.it/resources/products/prod-io-premium/logo.svg",
background: "#0073E6",
title: "App Io Premium",
},
"prod-ciban": {
url: "https://dev.selfcare.pagopa.it/resources/products/prod-ciban/logo.svg",
background: "#008CA8",
title: "Check-IBAN",
},
"prod-pn": {
url: "https://dev.selfcare.pagopa.it/resources/products/prod-pn/logo.svg",
background: "#0066CC",
title: "Piattaforma Notifiche",
},
"prod-interop": {
url: "https://dev.selfcare.pagopa.it/resources/products/prod-interop/logo.svg",
background: undefined,
title: "PDND",
},
"prod-cgn": {
url: "https://dev.selfcare.pagopa.it/resources/products/prod-cgn/logo.png",
background: undefined,
title: "Carta Giovani",
},
"prod-pagopa": {
url: "https://dev.selfcare.pagopa.it/resources/products/prod-pagopa/logo.svg",
background: "#0066CC",
title: "Pagamenti pagoPA",
},
};
/* 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/ProductAvatar",
component: ProductAvatar_1.ProductAvatar,
decorators: [
(Story) => ((0, jsx_runtime_1.jsx)("div", Object.assign({ style: {
padding: "1em",
backgroundColor: "#F5F5F5",
} }, { children: (0, jsx_runtime_1.jsx)(Story, {}) }))),
],
};
const Default = () => {
const [randomIndex, setRandomIndex] = (0, react_1.useState)(0);
const item = Object.keys(productMockImages)[randomIndex];
const url = productMockImages[item].url;
const bgColor = productMockImages[item].background;
const altText = productMockImages[item].title + " logo";
const getRandomProduct = () => {
const randomNumber = randomValueFromArray(Object.keys(productMockImages));
setRandomIndex(randomNumber);
};
return ((0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ gap: 2, alignItems: "flex-start" }, { children: [(0, jsx_runtime_1.jsx)(ProductAvatar_1.ProductAvatar, { logoUrl: url, logoBgColor: bgColor, logoAltText: altText, size: "small" }), (0, jsx_runtime_1.jsx)(ProductAvatar_1.ProductAvatar, { logoUrl: url, logoBgColor: bgColor, logoAltText: altText }), (0, jsx_runtime_1.jsx)(ProductAvatar_1.ProductAvatar, { logoUrl: url, logoBgColor: bgColor, logoAltText: altText, size: "large" }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "overline" }, { children: "Product:" })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h6" }, { children: productMockImages[item].title }))] }), (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "contained", onClick: getRandomProduct }, { children: "Get random product" }))] })));
};
exports.Default = Default;