@cimpress/react-components
Version:
React components to support the MCP styleguide
75 lines • 3.46 kB
JavaScript
import React from 'react';
import { CodeExample } from '@cimpress/react-components';
import TabMenuCode from '!raw-loader!./tabMenu.jsx';
import TabMenuDemo from './tabMenu.jsx';
import ComponentDoc from '../../shared/TabbedComponentDoc';
const TabMenuDocs = () => {
const propInfos = [
{
name: 'activeTabId',
type: 'string',
default: 'The first tab',
description: 'The id of the currently active tab.',
},
{
name: 'tabs',
type: 'array (required)',
default: '',
description: (React.createElement("p", null,
"The list of tabs to include in the menu. Tabs have the following shape: ",
React.createElement("br", null),
React.createElement("code", null, "{id: string (required), title: node (required), description: node, icon: node, body: node}"),
React.createElement("br", null),
"The body is the content display when a tab is active.",
React.createElement("br", null),
"To conform with UX best practices, icons and descriptions for tabs will be ignored if any tab is missing an icon or description, respectively.")),
},
{
name: 'tabGroups',
type: 'array',
default: '',
description: (React.createElement("p", null,
"Used for grouping sets of tabs together by tab id. Tab Groups have the following shape: ",
React.createElement("br", null),
React.createElement("code", null, "{label: string (required), tabIds: array (required)}"),
React.createElement("br", null),
"To conform with UX best practices, the tab groups prop will be ignored if there is only one tab group or if there are any tabs that were not included in a tab group.")),
},
{
name: 'onTabClick',
type: 'func',
default: '',
description: (React.createElement("div", null,
React.createElement("p", null, "If provided, a callback function to be called when a tab has been click."),
React.createElement("p", null,
"Signature: ",
React.createElement("code", null,
"function(event: object, tabId: string) ",
'=>',
" void")),
React.createElement("p", null,
React.createElement("code", null, "event:"),
" The click event"),
React.createElement("p", null,
React.createElement("code", null, "tabId:"),
" The clicked tab by id"))),
},
{
name: 'bodyStyle',
type: 'object',
default: '{}',
description: 'Inline styles applied to the body of the Tab Menu.',
},
{
name: 'tabStyle',
type: 'object',
default: '{}',
description: 'Inline styles applied to the tab container of the Tab Menu.',
},
];
return (React.createElement(ComponentDoc, { name: "Tab Menu", propInfos: propInfos },
React.createElement(TabMenuDemo, null),
React.createElement(CodeExample, { code: TabMenuCode })));
};
export default TabMenuDocs;
//# sourceMappingURL=index.js.map