There are no notes for this item.
| Prop | Required? | Type | Default | Description |
|---|---|---|---|---|
| current | Yes | number | The current segment in progress | |
| total | Yes | number | The total number of segments in the progress bar |
<div id="reactMount" data-tpl="segmentedprogressbar">
<div class="progress-bar-segmented" role="progressbar" aria-valuenow="4" aria-valuemin="0" aria-valuemax="6" tabindex="0">
<div class="progress-segment progress-segment-complete"></div>
<div class="progress-segment progress-segment-complete"></div>
<div class="progress-segment progress-segment-complete"></div>
<div class="progress-segment progress-segment-complete"></div>
<div class="progress-segment "></div>
<div class="progress-segment "></div>
</div>
</div>
<script>
window.currentProps = {
"package": {
"name": "department-of-veteran-affairs/jean-pants",
"version": "0.1.0"
},
"assetPath": "/design-system/",
"isProduction": true,
"componentSourcePath": "SegmentedProgressBar.jsx",
"id": "default",
"current": 4,
"total": 6
}
</script>
import React from 'react';
import SegmentedProgressBar from './SegmentedProgressBar';
export default function SegmentedProgressBarExample(props) {
return (
<SegmentedProgressBar
current={props.current}
total={props.total}/>
);
}
package:
name: department-of-veteran-affairs/jean-pants
version: 0.1.0
assetPath: /design-system/
isProduction: true
componentSourcePath: SegmentedProgressBar.jsx
id: default
current: 4
total: 6
import React from 'react';
import PropTypes from 'prop-types';
import _ from 'lodash';
/**
* Create a segmented progress bar for multi-page forms.
*
* @param {number} current - The index of the current chapter
* @param {number} total - The total number of chapters in the form
*/
export default function SegmentedProgressBar({ current, total }) {
return (
<div className="progress-bar-segmented" role="progressbar" aria-valuenow={current} aria-valuemin="0" aria-valuemax={total} tabIndex="0">
{_.range(total).map(step => (
<div key={step} className={`progress-segment ${current > step ? 'progress-segment-complete' : ''}`}/>
))}
</div>
);
}
SegmentedProgressBar.propTypes = {
/**
* The current segment in progress
*/
current: PropTypes.number.isRequired,
/**
* The total number of segments in the progress bar
*/
total: PropTypes.number.isRequired
};
import React from 'react';
import { shallow } from 'enzyme';
import { expect } from 'chai';
import { axeCheck } from '../../../../lib/testing/helpers';
import SegmentedProgressBar from './SegmentedProgressBar.jsx';
describe('<SegmentedProgressBar/>', () => {
it('should render', () => {
const tree = shallow(<SegmentedProgressBar current={2} total={5}/>);
expect(tree.find('.progress-segment')).to.have.length(5);
});
it('should pass aXe check', () => {
return axeCheck(<SegmentedProgressBar current={2} total={5}/>);
});
});