Sha256: 79c7791957630b7fb67b4f724045d267a17f7aff49f93ab25b76b04fca298630
Contents?: true
Size: 1.18 KB
Versions: 4
Compression:
Stored size: 1.18 KB
Contents
/* @flow */
/*eslint-disable react/no-multi-comp, flowtype/space-before-type-colon */
import React from 'react'
import { Body,Title } from '../'
type ProgressPillsProps = {
active?: Number,
steps?: Number,
title?: String,
value?: String,
dark?: Boolean,
}
const showSteps = (steps, active, dark) => {
let 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}></div>)
const ProgressPills = ({ active = 0, steps = 3, title = null, value = null, dark=false } : ProgressPillsProps) => {
const darkClass = dark ? "_dark" : ""
return(
<div className={`pb_progress_pills_kit${darkClass}`}>
{title ?
<div className="progress_pills_status">
<Title text={title} size={4} tag="h4" dark={dark}/>
<Body color="light" text={value} dark={dark}/>
</div> : null}
<div className="progress_pills">
{showSteps(steps, active, dark)}
</div>
</div>
)}
export default ProgressPills
Version data entries
4 entries across 4 versions & 1 rubygems