import React from 'react'; import PropTypes from 'prop-types'; import { isNil } from 'ramda'; import { cx } from 'ramda-extension'; import Box from '../Box'; import Link from '../Link'; const Tab = ({ className, label, isActive, isDone, isDisabled, isInvalid, stepNumber, href, ...otherProps }) => { const WrapperComponent = isDisabled || isNil(href) ? 'span' : Link; return ( <WrapperComponent className={cx( 'tab-link', { ['tab-link--active']: isActive, ['tab-link--done']: isDone, ['tab-link--disabled']: isDisabled, ['tab-link--invalid']: isInvalid, ['tab-link--wizard']: !isNil(stepNumber), }, className, )} {...(isDisabled ? {} : { href })} {...otherProps} > {!isNil(stepNumber) && ( <span className="tab-link__number">{stepNumber}</span> )} {label && ( <Box as="span" className="tab-link__label"> {label} </Box> )} </WrapperComponent> ); }; Tab.propTypes = { /** Class name for root. */ className: PropTypes.string, href: PropTypes.string, /** If `true`, tab link is in active state. */ isActive: PropTypes.bool, /** If `true`, tab link is disabled for any pointer events. */ isDisabled: PropTypes.bool, /** If `true`, tab link is in done state, applied in step wizard. */ isDone: PropTypes.bool, isInvalid: PropTypes.bool, /** Label for tab link. */ label: PropTypes.oneOfType([PropTypes.string, PropTypes.object]).isRequired, /** Step number presents numbered position in step wizard. */ stepNumber: PropTypes.number, }; export default Tab;