@cimpress/react-components
Version:
React components to support the MCP styleguide
152 lines • 6.72 kB
JavaScript
;
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const react_1 = __importStar(require("react"));
const react_components_1 = require("@cimpress/react-components");
const IconCog_1 = __importDefault(require("@cimpress-technology/react-streamline-icons/lib/IconCog"));
const IconBagsCategory_1 = __importDefault(require("@cimpress-technology/react-streamline-icons/lib/IconBagsCategory"));
const IconAnalyticsGraph_1 = __importDefault(require("@cimpress-technology/react-streamline-icons/lib/IconAnalyticsGraph"));
const TabCardDemo = () => {
const [activeTabId, setActiveTabId] = (0, react_1.useState)();
const onTabClick = (event, tabId) => setActiveTabId(tabId);
const generateTabBody = tabNumber => {
const loremIpsumStrings = [
`Lorem ipsum dolor sit amet,
consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Tellus orci ac auctor augue mauris augue neque gravida in.
Tristique senectus et netus et malesuada fames ac turpis.
Nunc non blandit massa enim nec.
Venenatis urna cursus eget nunc scelerisque viverra mauris.
Etiam erat velit scelerisque in dictum non.
Ridiculus mus mauris vitae ultricies leo integer.
Facilisis gravida neque convallis a cras.
Sociis natoque penatibus et magnis dis parturient.
Enim tortor at auctor urna nunc id cursus metus aliquam.
Congue eu consequat ac felis donec et.
In nisl nisi scelerisque eu ultrices vitae auctor.
Posuere sollicitudin aliquam ultrices sagittis orci a. Eget gravida cum sociis natoque penatibus.
In nisl nisi scelerisque eu ultrices vitae auctor eu.`,
`Auctor eu augue ut lectus arcu bibendum at varius vel.
Et netus et malesuada fames ac turpis.
Nibh sed pulvinar proin gravida hendrerit lectus a.
Eleifend mi in nulla posuere sollicitudin aliquam.
Vestibulum lectus mauris ultrices eros in cursus turpis.
Tortor pretium viverra suspendisse potenti nullam ac tortor.
Nam aliquam sem et tortor consequat id porta.
Cursus eget nunc scelerisque viverra.
Orci porta non pulvinar neque.
Risus pretium quam vulputate dignissim suspendisse in est.
Elementum curabitur vitae nunc sed velit.
Dolor morbi non arcu risus quis varius.
Odio ut enim blandit volutpat maecenas volutpat blandit.
Eu facilisis sed odio morbi quis commodo odio aenean.
Id diam vel quam elementum pulvinar.
Egestas sed tempus urna et pharetra pharetra massa massa.
Ut sem nulla pharetra diam sit amet nisl suscipit.
Dolor sed viverra ipsum nunc aliquet bibendum enim facilisis gravida.`,
`Porttitor massa id neque aliquam vestibulum morbi blandit cursus.
Amet porttitor eget dolor morbi non arcu risus quis varius.
Id cursus metus aliquam eleifend mi in.
Montes nascetur ridiculus mus mauris vitae ultricies leo.
Elementum pulvinar etiam non quam lacus suspendisse.
Maecenas sed enim ut sem viverra aliquet eget sit.
Suspendisse interdum consectetur libero id faucibus.
Consequat mauris nunc congue nisi vitae suscipit tellus.
Aliquam ut porttitor leo a diam sollicitudin.
Viverra accumsan in nisl nisi scelerisque.
Odio eu feugiat pretium nibh ipsum consequat nisl.
Aenean et tortor at risus viverra adipiscing at in.`,
];
return (react_1.default.createElement("div", null,
react_1.default.createElement("h2", null,
"Body of Tab ",
tabNumber),
react_1.default.createElement("p", null, loremIpsumStrings[tabNumber % 3])));
};
const tabs = [
{
id: 'tab1',
title: 'Tab 1',
description: 'This is the first tab',
body: generateTabBody(1),
icon: IconCog_1.default,
},
{
id: 'tab2',
title: 'Tab 2',
description: 'This is the second tab',
body: generateTabBody(2),
icon: IconBagsCategory_1.default,
},
{
id: 'tab3',
title: 'Tab 3',
description: 'This is the third tab',
body: generateTabBody(3),
icon: IconAnalyticsGraph_1.default,
},
{
id: 'tab4',
title: 'Tab 4',
description: 'This if the fourth tab',
body: generateTabBody(4),
icon: IconCog_1.default,
},
{
id: 'tab5',
title: 'Tab 5',
description: 'This is the fifth tab',
body: generateTabBody(5),
icon: IconBagsCategory_1.default,
},
{
id: 'tab6',
title: 'Tab 6',
description: 'This is the sixth tab',
body: generateTabBody(6),
icon: IconAnalyticsGraph_1.default,
},
];
const tabGroups = [
{
label: 'First Subgroup',
tabIds: ['tab1', 'tab2'],
},
{
label: 'Second Subgroup',
tabIds: ['tab3', 'tab4', 'tab5'],
},
{
label: 'Third Subgroup',
tabIds: ['tab6'],
},
];
return react_1.default.createElement(react_components_1.TabMenu, { activeTabId: activeTabId, tabs: tabs, tabGroups: tabGroups, onTabClick: onTabClick });
};
exports.default = TabCardDemo;
//# sourceMappingURL=tabMenu.js.map