Sha256: 27ab6e8cd065e27d6477a50e994b72470c89cae691fb4ed52cd461ec997e85a4

Contents?: true

Size: 1.42 KB

Versions: 1

Compression:

Stored size: 1.42 KB

Contents

/* @flow */

import React from 'react'
import { Body, Title } from '../'
import classnames from 'classnames'
import { spacing } from '../utilities/spacing.js'

type ProgressPillsProps = {
  active?: Number,
  steps?: Number,
  title?: String,
  value?: String,
  dark?: Boolean,
}

const showSteps = (steps, active, dark) => {
  const items = []

  for (let step = 1; step <= steps; step++) {
    items.push(ProgressPill({ step, active, dark }))
  }

  return items
}

const ProgressPill = ({ active, dark, step }: ProgressPillProps) => (
  <div
      className={`pb_progress_pill${step <= active ? '_active' : '_inactive'}${
      dark ? '_dark' : null
    }`}
      key={step}
  />
)

const ProgressPills = (props: ProgressPillsProps) => {
  const {
    active = 0,
    steps = 3,
    title = null,
    value = null,
    dark = false,
  } = props
  const darkClass = dark ? '_dark' : ''

  return (
    <div className={classnames(`pb_progress_pills_kit${darkClass}`, spacing(props))}>
      <If condition={title}>
        <div className="progress_pills_status">
          <Title
              dark={dark}
              size={4}
              tag="h4"
              text={title}
          />
          <Body
              color="light"
              dark={dark}
              text={value}
          />
        </div>
      </If>

      <div className="progress_pills">{showSteps(steps, active, dark)}</div>
    </div>
  )
}

export default ProgressPills

Version data entries

1 entries across 1 versions & 1 rubygems

Version Path
playbook_ui-4.17.0 app/pb_kits/playbook/pb_progress_pills/_progress_pills.jsx