diff --git a/src/components/ProgressIndicator/ProgressIndicator-story.js b/src/components/ProgressIndicator/ProgressIndicator-story.js index e928671f889b..7dd9af744c89 100644 --- a/src/components/ProgressIndicator/ProgressIndicator-story.js +++ b/src/components/ProgressIndicator/ProgressIndicator-story.js @@ -7,10 +7,11 @@ import React from 'react'; import { storiesOf } from '@storybook/react'; - import { withKnobs, number } from '@storybook/addon-knobs'; import { ProgressIndicator, ProgressStep } from '../ProgressIndicator'; import ProgressIndicatorSkeleton from '../ProgressIndicator/ProgressIndicator.Skeleton'; +import Tooltip from '../Tooltip'; +import { componentsX } from '../../internal/FeatureFlags'; storiesOf('Progress Indicator', module) .addDecorator(withKnobs) @@ -18,26 +19,55 @@ storiesOf('Progress Indicator', module) 'Default', () => ( + currentIndex={number('Current progress (currentIndex)', 1)}> ( + +

Overflow tooltip content.

+
+ )} /> ( + +

+ Lorem ipsum dolor, sit amet consectetur adipisicing elit. Animi + consequuntur hic ratione aliquid cupiditate, nesciunt saepe iste + blanditiis cumque maxime tenetur veniam est illo deserunt sint + quae pariatur. Laboriosam, consequatur. +

+
+ )} />
), diff --git a/src/components/ProgressIndicator/ProgressIndicator.js b/src/components/ProgressIndicator/ProgressIndicator.js index c20e3ccfac01..acdfc4e9d02a 100644 --- a/src/components/ProgressIndicator/ProgressIndicator.js +++ b/src/components/ProgressIndicator/ProgressIndicator.js @@ -9,49 +9,96 @@ import PropTypes from 'prop-types'; import React, { Component } from 'react'; import classnames from 'classnames'; import { settings } from 'carbon-components'; +// TODO: import { CheckmarkOutline16 } from '@carbon/icons-react'; +import CheckmarkOutline16 from '@carbon/icons-react/lib/checkmark--outline/16'; +// TODO: import { Warning16 } from '@carbon/icons-react'; +import Warning16 from '@carbon/icons-react/lib/warning/16'; +import { componentsX } from '../../internal/FeatureFlags'; const { prefix } = settings; - +const defaultRenderLabel = props =>

; export const ProgressStep = ({ ...props }) => { - const { label, description, className, current, complete } = props; + const { + label, + description, + className, + current, + complete, + invalid, + secondaryLabel, + disabled, + renderLabel: ProgressStepLabel, + } = props; const classes = classnames({ [`${prefix}--progress-step`]: true, [`${prefix}--progress-step--current`]: current, [`${prefix}--progress-step--complete`]: complete, [`${prefix}--progress-step--incomplete`]: !complete && !current, + [`${prefix}--progress-step--disabled`]: disabled, [className]: className, }); - const currentSvg = current && ( - - - - {description} - - ); - - const completeSvg = complete && ( - - {description} - - - - - - ); - - const incompleteSvg = !complete && ( - - {description} - - - ); + const currentSvg = + current && + (componentsX ? ( + + + + ) : ( + + + + {description} + + )); + + const completeSvg = + complete && + (componentsX ? ( + + ) : ( + + {description} + + + + + + )); + const incompleteSvg = (() => { + if (complete) { + return null; + } + if (componentsX) { + if (invalid) { + return ; + } + return ( + + + + ); + } + return ( + + {description} + + + ); + })(); return (

  • {currentSvg || completeSvg || incompleteSvg} -

    {label}

    + + {label} + + {componentsX && + secondaryLabel !== null && + secondaryLabel !== undefined ? ( +

    {secondaryLabel}

    + ) : null}
  • ); @@ -82,6 +129,41 @@ ProgressStep.propTypes = { * Provide a description for the */ description: PropTypes.string, + + /** + * Specify whether the step is invalid + */ + invalid: PropTypes.bool, + + /** + * Provide an optional secondary label + */ + secondaryLabel: PropTypes.string, + + /* + * An optional parameter to allow for overflow content to be rendered in a + * tooltip. + */ + renderLabel: PropTypes.function, + + /** + * Provide the props that describe a progress step tooltip + */ + overflowTooltipProps: PropTypes.object, + + /** + * Specify whether the step is disabled + */ + disabled: PropTypes.bool, + + /** + * The ID of the tooltip content. + */ + tooltipId: PropTypes.string, +}; + +ProgressStep.defaultProps = { + renderLabel: defaultRenderLabel, }; export class ProgressIndicator extends Component { @@ -125,11 +207,13 @@ export class ProgressIndicator extends Component { return React.cloneElement(child, { current: true, }); - } else if (index < this.state.currentIndex) { + } + if (index < this.state.currentIndex) { return React.cloneElement(child, { complete: true, }); - } else if (index > this.state.currentIndex) { + } + if (index > this.state.currentIndex) { return React.cloneElement(child, { complete: false, });