@teamsnap/teamsnap-ui
Version:
a CSS component library for TeamSnap
48 lines (47 loc) • 1.71 kB
TypeScript
/**
* @name StepNav
*
* @description
* A component to render a 'wizard' like StepNav. This uses the <TextLink /> component for the nav links.
* See the Teamsnap patterns library for more information. https://teamsnap-ui-patterns.netlify.com/patterns/components/step-nav.html
*
* @example
* <StepNav
* title='Test Title'
* steps={[
* { name: 'Step One', icon: 'home', linkProps: { onClick: (e) => { e.preventDefault(); console.warn('STEP 1 Click')}} },
* { name: 'Step Two', icon: 'roster', linkProps: { location: '/some-link-href' } },
* { name: 'Step Four', icon: 'messages' }
* ]} />
*
*/
import * as React from "react";
import * as PropTypes from "prop-types";
declare class StepNav extends React.PureComponent<PropTypes.InferProps<typeof StepNav.propTypes>, any> {
static propTypes: {
steps: PropTypes.Validator<PropTypes.InferProps<{
name: PropTypes.Validator<string>;
icon: PropTypes.Validator<string>;
isActive: PropTypes.Requireable<boolean>;
linkProps: PropTypes.Requireable<object>;
}>[]>;
title: PropTypes.Requireable<string>;
isSmall: PropTypes.Requireable<boolean>;
className: PropTypes.Requireable<string>;
mods: PropTypes.Requireable<string>;
style: PropTypes.Requireable<object>;
otherProps: PropTypes.Requireable<object>;
};
static defaultProps: {
title: any;
isSmall: boolean;
className: string;
mods: any;
style: {};
otherProps: {};
};
renderTitle: () => JSX.Element;
renderStep: (step: any) => JSX.Element;
render(): JSX.Element;
}
export default StepNav;