@cimpress/react-components
Version:
React components to support the MCP styleguide
91 lines • 3.37 kB
JavaScript
import IconCog from '@cimpress-technology/react-streamline-icons/lib/IconCog';
import IconBagsCategory from '@cimpress-technology/react-streamline-icons/lib/IconBagsCategory';
import IconAnalyticsGraph from '@cimpress-technology/react-streamline-icons/lib/IconAnalyticsGraph';
import { TabMenu } from '../TabMenu';
const meta = {
title: 'Components/TabMenu',
component: TabMenu,
};
export default meta;
export const 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,
},
{
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,
},
{
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,
},
{
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,
},
{
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,
},
{
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,
},
],
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. */
export const 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