@cimpress/react-components
Version:
React components to support the MCP styleguide
80 lines • 4.04 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const react_1 = __importDefault(require("react"));
const react_components_1 = require("@cimpress/react-components");
const tabMenu_jsx_1 = __importDefault(require("!raw-loader!./tabMenu.jsx"));
const tabMenu_jsx_2 = __importDefault(require("./tabMenu.jsx"));
const TabbedComponentDoc_1 = __importDefault(require("../../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_1.default.createElement("p", null,
"The list of tabs to include in the menu. Tabs have the following shape: ",
react_1.default.createElement("br", null),
react_1.default.createElement("code", null, "{id: string (required), title: node (required), description: node, icon: node, body: node}"),
react_1.default.createElement("br", null),
"The body is the content display when a tab is active.",
react_1.default.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_1.default.createElement("p", null,
"Used for grouping sets of tabs together by tab id. Tab Groups have the following shape: ",
react_1.default.createElement("br", null),
react_1.default.createElement("code", null, "{label: string (required), tabIds: array (required)}"),
react_1.default.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_1.default.createElement("div", null,
react_1.default.createElement("p", null, "If provided, a callback function to be called when a tab has been click."),
react_1.default.createElement("p", null,
"Signature: ",
react_1.default.createElement("code", null,
"function(event: object, tabId: string) ",
'=>',
" void")),
react_1.default.createElement("p", null,
react_1.default.createElement("code", null, "event:"),
" The click event"),
react_1.default.createElement("p", null,
react_1.default.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_1.default.createElement(TabbedComponentDoc_1.default, { name: "Tab Menu", propInfos: propInfos },
react_1.default.createElement(tabMenu_jsx_2.default, null),
react_1.default.createElement(react_components_1.CodeExample, { code: tabMenu_jsx_1.default })));
};
exports.default = TabMenuDocs;
//# sourceMappingURL=index.js.map