@cimpress/react-components
Version:
React components to support the MCP styleguide
97 lines • 3.78 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.AlwaysShowTabGroups = exports.Default = void 0;
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 TabMenu_1 = require("../TabMenu");
const meta = {
title: 'Components/TabMenu',
component: TabMenu_1.TabMenu,
};
exports.default = meta;
exports.Default = {
args: {
tabs: [
{
id: 'tab1',
title: 'Tab 1',
description: 'This is the first tab',
body: 'Sit Lorem voluptate ut ex Lorem velit do cillum incididunt non sint reprehenderit nisi quis.',
icon: IconCog_1.default,
},
{
id: 'tab2',
title: 'Tab 2',
description: 'This is the second tab',
body: 'Sit Lorem voluptate ut ex Lorem velit do cillum incididunt non sint reprehenderit nisi quis.',
icon: IconBagsCategory_1.default,
},
{
id: 'tab3',
title: 'Tab 3',
description: 'This is the third tab',
body: 'Sit Lorem voluptate ut ex Lorem velit do cillum incididunt non sint reprehenderit nisi quis.',
icon: IconAnalyticsGraph_1.default,
},
{
id: 'tab4',
title: 'Tab 4',
description: 'This if the fourth tab',
body: 'Sit Lorem voluptate ut ex Lorem velit do cillum incididunt non sint reprehenderit nisi quis.',
icon: IconCog_1.default,
},
{
id: 'tab5',
title: 'Tab 5',
description: 'This is the fifth tab',
body: 'Sit Lorem voluptate ut ex Lorem velit do cillum incididunt non sint reprehenderit nisi quis.',
icon: IconBagsCategory_1.default,
},
{
id: 'tab6',
title: 'Tab 6',
description: 'This is the sixth tab',
body: 'Sit Lorem voluptate ut ex Lorem velit do cillum incididunt non sint reprehenderit nisi quis.',
icon: IconAnalyticsGraph_1.default,
},
],
tabGroups: [
{
label: 'First Subgroup',
tabIds: ['tab1', 'tab2'],
},
{
label: 'Second Subgroup',
tabIds: ['tab3', 'tab4', 'tab5'],
},
{
label: 'Third Subgroup',
tabIds: ['tab6'],
},
],
},
};
/** Tab groups are hidden by default when there is only one tab group. */
exports.AlwaysShowTabGroups = {
args: {
tabs: [
{
id: 'tab1',
title: 'Tab 1',
body: 'Sit Lorem voluptate ut ex Lorem velit do cillum incididunt non sint reprehenderit nisi quis.',
},
{
id: 'tab2',
title: 'Tab 2',
body: 'Sit Lorem voluptate ut ex Lorem velit do cillum incididunt non sint reprehenderit nisi quis.',
},
],
tabGroups: [{ label: 'Tab Group', tabIds: ['tab1', 'tab2'] }],
alwaysShowTabGroups: true,
},
};
//# sourceMappingURL=TabMenu.stories.js.map