@appearhere/bloom/components/ProgressSteps/Step.js

Appear Here's pattern library and styleguide

import PropTypes from 'prop-types';
import React from 'react';
import cx from 'classnames';

import LeftRight from '../LeftRight/LeftRight';
import Circle from '../Animate/Circle';
import Icon from '../Icon/Icon';
import m from '../../globals/modifiers.css';
import defaultCss from './ProgressSteps.css';

const Step = (props) => {
  const {
    step,
    completed,
    title,
    children,
    css,
    icon,
    ...rest,
  } = props;

  const leftClassName = cx(
    m.valignt,
    defaultCss.stepIconContainer,
    css.stepIconContainer,
    completed ? defaultCss.stepIconContainerCompleted : null,
    completed ? css.stepIconContainerCompleted : null,
  );

  const rightClassName = cx(
    m.valignt,
    defaultCss.stepContent,
    css.stepContent,
    completed ? defaultCss.stepContentCompleted : null,
    completed ? css.stepContentCompleted : null,
  );

  const stepIconClassName = cx(
    defaultCss.stepIcon,
    css.stepIcon,
    completed ? defaultCss.stepIconCompleted : null,
    completed ? css.stepIconCompleted : null,
  );

  const stepTitleClassName = cx(
    defaultCss.stepTitle,
    css.stepTitle,
    completed ? defaultCss.stepTitleCompleted : null,
    completed ? css.stepTitleCompleted : null,
  );

  const stepBodyClassName = cx(
    defaultCss.stepBody,
    css.stepBody,
    completed ? defaultCss.stepBodyCompleted : null,
    completed ? css.stepBodyCompleted : null,
  );

  return (
    <LeftRight
      { ...rest }
      className={ cx(defaultCss.step, css.step) }
      leftClassName={ leftClassName }
      rightClassName={ rightClassName }
      leftChildren={ icon ? (
        <Icon
          className={ defaultCss.icon }
          name={ icon }
        />
      ) : (
        <Circle
          circleClassName={ css.stepIconCircle }
          className={ stepIconClassName }
          completed={ completed }
        >
          { step }
        </Circle>
      ) }
      rightChildren={
        <div>
          <dt className={ stepTitleClassName }>{ title }</dt>
          <dd className={ stepBodyClassName }>{ children }</dd>
        </div>
      }
      primarySide="right"
    />
  );
};

Step.propTypes = {
  completed: PropTypes.bool,
  title: PropTypes.node,
  children: PropTypes.node,
  css: PropTypes.shape({
    stepIconContainer: PropTypes.string,
    stepIconContainerCompleted: PropTypes.string,
    stepIcon: PropTypes.string,
    stepIconCompleted: PropTypes.string,
    stepTitle: PropTypes.string,
    stepTitleCompleted: PropTypes.string,
    stepBody: PropTypes.string,
    stepBodyCompleted: PropTypes.string,
  }),
  step: PropTypes.node,
  icon: PropTypes.string,
};

Step.defaultProps = {
  css: {
    stepIconContainer: '',
    stepIconContainerCompleted: '',
    stepIcon: '',
    stepIconCompleted: '',
    stepTitle: '',
    stepTitleCompleted: '',
    stepBody: '',
    stepBodyCompleted: '',
  },
};

export default Step;