Progress

Progress Pills

Default

Code Example

import React from 'react'
import ProgressPills from '../_progress_pills'

const ProgressPillsDefault = (props) => {
    return (
        <>
            <ProgressPills
                active={2}
                aria={{ label: '2 out of 3 steps complete' }}
                steps={3}
                {...props}
            />
        </>
    )
}

export default ProgressPillsDefault

Status

Code Example

import React from 'react'
import ProgressPills from '../_progress_pills'

const ProgressPillsStatus = (props) => {
    return (
        <>
            <ProgressPills
                active={2}
                aria={{ label: '2 out of 3 steps complete' }}
                steps={3}
                title="Status:"
                value="Orientation"
                {...props}
            />
        </>
    )
}

export default ProgressPillsStatus

Progress Simple

Default

Code Example

import React from 'react'
import { ProgressSimple } from '../..'

const ProgressSimpleDefault = () => {
  return (
    <div>
      <ProgressSimple percent={45} />
    </div>
  )
}

export default ProgressSimpleDefault

Setting Values

Code Example

import React from 'react'
import { ProgressSimple } from '../..'

const ProgressSimpleValue = () => {
  return (
    <div>
      <ProgressSimple
          align="left"
          percent={68}
      />
      <br />
      <ProgressSimple
          max="10"
          value="2"
      />
    </div>
  )
}

export default ProgressSimpleValue

Progress Bar Width

Code Example

import React from 'react'
import { ProgressSimple } from '../..'

const ProgressSimpleValue = () => {
  return (
    <div>
      <ProgressSimple
          percent={40}
          width="100px"
      />
    </div>
  )
}

export default ProgressSimpleValue

Variants

Progress Simple can pass colors - primary, green, red, and yellow. Variants names are default, positive, negative, and warning, respectively.

Code Example

import React from 'react'
import { ProgressSimple } from '../..'

const ProgressSimpleVariants = () => {
  return (
    <div>
      <ProgressSimple percent={64.5} />

      <br />

      <ProgressSimple
          percent={90}
          variant="positive"
      />

      <br />

      <ProgressSimple
          percent={10}
          variant="negative"
      />

      <br />

      <ProgressSimple
          percent={40}
          variant="warning"
      />
    </div>
  )
}

export default ProgressSimpleVariants

Muted

Code Example

import React from 'react'
import { ProgressSimple } from '../..'

const ProgressSimpleMuted = () => {
  return (
    <div>
      <ProgressSimple
          muted
          percent={68}
      />
    </div>
  )
}

export default ProgressSimpleMuted

Align

Code Example

import React from 'react'
import { ProgressSimple } from '../..'

const ProgressSimpleAlign = () => {
  return (
    <div>
      <ProgressSimple
          align="left"
          percent={45}
          width="100px"
      />
      <br />
      <ProgressSimple
          align="center"
          percent={45}
          width="100px"
      />
      <br />
      <ProgressSimple
          align="right"
          percent={45}
          width="100px"
      />
    </div>
  )
}

export default ProgressSimpleAlign

Progress Step

Default

Code Example

import React from 'react'

import ProgressStep from '../_progress_step.tsx'
import ProgressStepItem from '../_progress_step_item.tsx'

const ProgressStepDefault = (props) => (
  <div>
    <ProgressStep
        icon
        {...props}
    >
      <ProgressStepItem status="complete" />
      <ProgressStepItem status="active" />
      <ProgressStepItem status="inactive" />
    </ProgressStep>

    <br />
    <br />

    <ProgressStep {...props}>
      <ProgressStepItem status="complete">{'Step 1'}</ProgressStepItem>
      <ProgressStepItem status="active">{'Step 2'}</ProgressStepItem>
      <ProgressStepItem status="inactive">{'Step 3'}</ProgressStepItem>
    </ProgressStep>

    <br />
    <br />
  </div>
)

export default ProgressStepDefault

Vertical

Code Example

import React from 'react'

import ProgressStep from '../_progress_step.tsx'
import ProgressStepItem from '../_progress_step_item.tsx'

const ProgressStepVertical = (props) => (
  <div>
    <ProgressStep
        icon
        orientation="vertical"
        {...props}
    >
      <ProgressStepItem status="complete" />
      <ProgressStepItem status="active" />
      <ProgressStepItem status="inactive" />
    </ProgressStep>

    <br />

    <ProgressStep
        orientation="vertical"
        {...props}
    >
      <ProgressStepItem status="complete" />
      <ProgressStepItem status="active" />
      <ProgressStepItem status="inactive" />
    </ProgressStep>

    <br />

    <ProgressStep
        orientation="vertical"
        {...props}
    >
      <ProgressStepItem status="complete">
        {'Child'}
      </ProgressStepItem>
      <ProgressStepItem status="active">
        {'Child'}
      </ProgressStepItem>
      <ProgressStepItem status="inactive">
        {'Child'}
      </ProgressStepItem>
    </ProgressStep>
  </div>
)

export default ProgressStepVertical

Tracker

Code Example

import React from 'react'

import ProgressStep from '../_progress_step.tsx'
import ProgressStepItem from '../_progress_step_item'

import Caption from '../../pb_caption/_caption'

const ProgressStepTracker = (props) => (
  <div>
    <br />
    <ProgressStep
        icon
        variant="tracker"
        {...props}
    >
      <ProgressStepItem status="complete">
        <Caption>{'Ordered'}</Caption>
      </ProgressStepItem>
      <ProgressStepItem status="active">
        <Caption>{'Shipped'}</Caption>
      </ProgressStepItem>
      <ProgressStepItem status="inactive">
        <Caption>{'Delivered'}</Caption>
      </ProgressStepItem>
    </ProgressStep>

    <br />
    <ProgressStep
        icon
        variant="tracker"
        {...props}
    >
      <ProgressStepItem status="complete" />
      <ProgressStepItem status="complete" />
      <ProgressStepItem status="hidden" />
      <ProgressStepItem status="active" />
      <ProgressStepItem status="inactive" />
    </ProgressStep>
  </div>
)

export default ProgressStepTracker

Using State

Code Example

import React, { useState } from 'react'

import ProgressStep from '../_progress_step.tsx'
import ProgressStepItem from '../_progress_step_item'

import Caption from '../../pb_caption/_caption'
import Button from '../../pb_button/_button'

const ProgressStepTrackerClickEvents = (props) => {
  const [warning, setWarning] = useState(false)
  const showWarning = warning == true
  const WarningIcon = (
    <ProgressStepItem
        icon="exclamation-triangle"
        key={Math.random()}
        status="active"
    >
      <Caption>{'Shipped'}</Caption>
    </ProgressStepItem>
  )
  const CheckedIcon = (
    <ProgressStepItem
        key={Math.random()}
        status="active"
    >
      <Caption>{'Shipped'}</Caption>
    </ProgressStepItem>
  )
  return (
    <div>
      <Button onClick={() => setWarning(!warning)}>{'Toggle State'}</Button>
      <br />
      <br />
      <br />
      <ProgressStep
          icon
          variant="tracker"
          {...props}
      >
        <ProgressStepItem status="complete">
          <Caption>{'Ordered'}</Caption>
        </ProgressStepItem>
        {showWarning ? WarningIcon : CheckedIcon}
        <ProgressStepItem status="inactive">
          <Caption>{'Delivered'}</Caption>
        </ProgressStepItem>
      </ProgressStep>
    </div>
  )
}

export default ProgressStepTrackerClickEvents