@cimpress/react-components
Version:
React components to support the MCP styleguide
223 lines • 9.25 kB
JavaScript
import React from 'react';
import { CodeExample } from '@cimpress/react-components';
import StepperCode from '!raw-loader!./stepper';
import StepperDemo from './stepper';
import ComponentDoc from '../../shared/TabbedComponentDoc';
export default 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.createElement("span", null,
"Children of the stepper should be ",
React.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.createElement("span", null,
"Children of the StepGroup should be ",
React.createElement("code", null, "<Step>"),
" elements. They will render nested.")),
},
{
name: 'onClick',
type: 'function',
default: '',
description: (React.createElement("span", null,
React.createElement("p", null, "Function to call when a step is clicked on. If no function is provided, steps will not appear clickable."),
React.createElement("p", null,
"Signature: ",
React.createElement("code", null,
"(index: string, name: string) ",
'=>',
" void")),
React.createElement("p", null,
React.createElement("code", null, "index:"),
" The index of the clicked step"),
React.createElement("p", null,
React.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.createElement("div", null,
React.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.createElement("p", null,
"Use one of ",
React.createElement("code", null, "success"),
", ",
React.createElement("code", null, "warning"),
", ",
React.createElement("code", null, "danger"),
", or ",
React.createElement("code", null, "none"),
"."))),
},
];
// step PropTypes
const stepProps = [
{
name: 'onClick',
type: 'function',
default: '',
description: (React.createElement("span", null,
React.createElement("p", null, "Function to call when a step is clicked on. If no function is provided, steps will not appear clickable."),
React.createElement("p", null,
"Signature: ",
React.createElement("code", null,
"(index: string, name: string) ",
'=>',
" void")),
React.createElement("p", null,
React.createElement("code", null, "index:"),
" The index of the clicked step"),
React.createElement("p", null,
React.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.createElement("div", null,
React.createElement("p", null, "Sets the color of the step regardless of whether it's completed, active, etc."),
React.createElement("p", null,
"Use one of ",
React.createElement("code", null, "success"),
", ",
React.createElement("code", null, "warning"),
", ",
React.createElement("code", null, "danger"),
", or ",
React.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.createElement("div", null,
React.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.createElement("p", null,
"Use one of ",
React.createElement("code", null, "success"),
", ",
React.createElement("code", null, "warning"),
", ",
React.createElement("code", null, "danger"),
", or ",
React.createElement("code", null, "none"),
"."))),
},
];
return (React.createElement("div", null,
React.createElement(ComponentDoc, { name: "Stepper", propInfos: stepperProps }),
React.createElement(ComponentDoc, { name: "StepGroup", propInfos: stepGroupProps, includeTabs: false }),
React.createElement(ComponentDoc, { name: "Step", propInfos: stepProps, includeTabs: false },
React.createElement(StepperDemo, null),
React.createElement(CodeExample, { code: StepperCode }))));
}
//# sourceMappingURL=index.js.map