@cimpress/react-components
Version:
React components to support the MCP styleguide
229 lines • 10.1 kB
JavaScript
"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.default = StepperDocs;
const react_1 = __importDefault(require("react"));
const react_components_1 = require("@cimpress/react-components");
const stepper_1 = __importDefault(require("!raw-loader!./stepper"));
const stepper_2 = __importDefault(require("./stepper"));
const TabbedComponentDoc_1 = __importDefault(require("../../shared/TabbedComponentDoc"));
function StepperDocs() {
// stepper proptypes
const stepperProps = [
{
name: 'activeStep',
type: 'number or string',
default: '',
description: `Tells the stepper which step should be active.
Pass the index of the step which should be active.
If sub- steps are used, pass the active step in the format <MajorStep>.< SubStep > `,
},
{
name: 'partial',
type: 'boolean',
default: 'false',
description: `Tells the stepper that the currently active step is only partially complete - will display a half-filled circle.
Avoid using unless you have a compelling UX reason.`,
},
{
name: 'status',
type: 'string',
default: 'success',
description: 'Tells the stepper which validation state to use for the active step',
},
{
name: 'small',
type: 'boolean',
default: 'false',
description: 'Condenses stepper padding for small steppers. Additional children of Step components will not be shown on small steppers.',
},
{
name: 'vertical',
type: 'boolean',
default: 'false',
description: 'Stepper will be displayed vertically.',
},
{
name: 'children',
type: 'array of nodes',
default: '',
description: (react_1.default.createElement("span", null,
"Children of the stepper should be ",
react_1.default.createElement("code", null, "<Step>"),
" elements.")),
},
];
// stepGroup PropTypes
const stepGroupProps = [
{
name: 'contents',
type: 'node',
default: '',
description: 'Additional information about the step to render below the step indicator',
},
{
name: 'children',
type: 'node',
default: '',
description: (react_1.default.createElement("span", null,
"Children of the StepGroup should be ",
react_1.default.createElement("code", null, "<Step>"),
" elements. They will render nested.")),
},
{
name: 'onClick',
type: 'function',
default: '',
description: (react_1.default.createElement("span", null,
react_1.default.createElement("p", null, "Function to call when a step is clicked on. If no function is provided, steps will not appear clickable."),
react_1.default.createElement("p", null,
"Signature: ",
react_1.default.createElement("code", null,
"(index: string, name: string) ",
'=>',
" void")),
react_1.default.createElement("p", null,
react_1.default.createElement("code", null, "index:"),
" The index of the clicked step"),
react_1.default.createElement("p", null,
react_1.default.createElement("code", null, "name:"),
" the name prop of the clicked step"))),
},
{
name: 'name',
type: 'string',
default: '',
description: 'Name for the step. Provided to the onClick function when it is called.',
},
{
name: 'tip',
type: 'node',
default: '',
description: 'If provided, content for a tooltip to appear when a user hovers over the step',
},
{
name: 'icon',
type: 'node',
default: '',
description: "An element that will replace the step's indicator.",
},
{
name: 'tipDirection',
type: 'string',
default: 'top',
description: 'Direction for the tooltip (see tooltip documentation)',
},
{
name: 'overrideStatus',
type: 'string',
default: '',
description: (react_1.default.createElement("div", null,
react_1.default.createElement("p", null, "Sets the color of the parent-step regardless of whether it's completed, active, etc. This prop is not passed to sub-steps. If any sub-steps have an overrideStatus set, the most severe overrideStatus will take precedence over this value."),
react_1.default.createElement("p", null,
"Use one of ",
react_1.default.createElement("code", null, "success"),
", ",
react_1.default.createElement("code", null, "warning"),
", ",
react_1.default.createElement("code", null, "danger"),
", or ",
react_1.default.createElement("code", null, "none"),
"."))),
},
];
// step PropTypes
const stepProps = [
{
name: 'onClick',
type: 'function',
default: '',
description: (react_1.default.createElement("span", null,
react_1.default.createElement("p", null, "Function to call when a step is clicked on. If no function is provided, steps will not appear clickable."),
react_1.default.createElement("p", null,
"Signature: ",
react_1.default.createElement("code", null,
"(index: string, name: string) ",
'=>',
" void")),
react_1.default.createElement("p", null,
react_1.default.createElement("code", null, "index:"),
" The index of the clicked step"),
react_1.default.createElement("p", null,
react_1.default.createElement("code", null, "name:"),
" the name prop of the clicked step"))),
},
{
name: 'name',
type: 'string',
default: '',
description: 'Name for the step. Provided to the onClick function when it is called.',
},
{
name: 'overrideStatus',
type: 'string',
default: '',
description: (react_1.default.createElement("div", null,
react_1.default.createElement("p", null, "Sets the color of the step regardless of whether it's completed, active, etc."),
react_1.default.createElement("p", null,
"Use one of ",
react_1.default.createElement("code", null, "success"),
", ",
react_1.default.createElement("code", null, "warning"),
", ",
react_1.default.createElement("code", null, "danger"),
", or ",
react_1.default.createElement("code", null, "none"),
"."))),
},
{
name: 'tip',
type: 'node',
default: '',
description: 'If provided, content for a tooltip to appear when a user hovers over the step',
},
{
name: 'icon',
type: 'node',
default: '',
description: "An element that will replace the step's indicator.",
},
{
name: 'tipDirection',
type: 'string',
default: 'top',
description: 'Direction for the tooltip (see tooltip documentation)',
},
{
name: 'children',
type: 'node',
default: '',
description: 'Additional information about the step to render below the step indicator',
},
{
name: 'overrideStatus',
type: 'string',
default: '',
description: (react_1.default.createElement("div", null,
react_1.default.createElement("p", null, "Sets the color of the parent-step regardless of whether it's completed, active, etc. This prop is not passed to sub-steps. If any sub-steps have an overrideStatus set, the most severe overrideStatus will take precedence over this value."),
react_1.default.createElement("p", null,
"Use one of ",
react_1.default.createElement("code", null, "success"),
", ",
react_1.default.createElement("code", null, "warning"),
", ",
react_1.default.createElement("code", null, "danger"),
", or ",
react_1.default.createElement("code", null, "none"),
"."))),
},
];
return (react_1.default.createElement("div", null,
react_1.default.createElement(TabbedComponentDoc_1.default, { name: "Stepper", propInfos: stepperProps }),
react_1.default.createElement(TabbedComponentDoc_1.default, { name: "StepGroup", propInfos: stepGroupProps, includeTabs: false }),
react_1.default.createElement(TabbedComponentDoc_1.default, { name: "Step", propInfos: stepProps, includeTabs: false },
react_1.default.createElement(stepper_2.default, null),
react_1.default.createElement(react_components_1.CodeExample, { code: stepper_1.default }))));
}
//# sourceMappingURL=index.js.map