Contents

/* @flow */

import React from 'react'
import classnames from 'classnames'
import { buildCss } from '../utilities/props'
import { Icon } from '..'

type ProgressStepItemProps = {
  className?: string,
  status?: "complete" | "active" | "inactive" | "hidden",
  children?: React.Node,
  icon?: string,
}

const ProgressStepItem = ({
  className,
  status = 'inactive',
  children,
  icon = 'check',
}: ProgressStepItemProps, ref: React.ElementRef<"li">) => {
  const progressStepItem = buildCss('pb_progress_step_item', status)

  return (
    <li
        className={classnames(progressStepItem, className)}
        ref={ref}
    >
      <div className="box">
        <div className="circle">
          <Icon icon={icon} />
        </div>
        <div className="content">{children}</div>
      </div>
    </li>
  )
}
export default ProgressStepItem

Version data entries

2 entries across 2 versions & 1 rubygems

Version	Path
playbook_ui-7.16.0.pre.alpha5	app/pb_kits/playbook/pb_progress_step/_progress_step_item.jsx
playbook_ui-7.16.0.pre.alpha4	app/pb_kits/playbook/pb_progress_step/_progress_step_item.jsx