There are no notes for this item.
| Prop | Required? | Type | Default | Description |
|---|---|---|---|---|
| percent | Yes | number | Percent of progress made |
<div id="reactMount" data-tpl="progressbar">
<div class="progress-bar" role="progressbar" aria-valuenow="35" aria-valuemin="0" aria-valuemax="100" tabindex="0">
<div class="progress-bar-inner" style="width:35%;"></div>
</div>
</div>
<script>
window.currentProps = {
"package": {
"name": "department-of-veteran-affairs/jean-pants",
"version": "0.1.0"
},
"assetPath": "/design-system/",
"isProduction": true,
"componentSourcePath": "ProgressBar.jsx",
"percent": 35
}
</script>
import React from 'react';
import ProgressBar from './ProgressBar';
export default function ProgressBarExample(props) {
return (
<ProgressBar
percent={props.percent}/>
);
}
package:
name: department-of-veteran-affairs/jean-pants
version: 0.1.0
assetPath: /design-system/
isProduction: true
componentSourcePath: ProgressBar.jsx
percent: 35
import React from 'react';
import PropTypes from 'prop-types';
export default function ProgressBar({ percent }) {
return (
<div className="progress-bar" role="progressbar" aria-valuenow={percent} aria-valuemin="0" aria-valuemax="100" tabIndex="0">
<div className="progress-bar-inner" style={{ width: `${percent}%` }}/>
</div>
);
}
ProgressBar.propTypes = {
/**
* Percent of progress made
*/
percent: PropTypes.number.isRequired,
};
import React from 'react';
import { shallow } from 'enzyme';
import { expect } from 'chai';
import { axeCheck } from '../../../../lib/testing/helpers';
import ProgressBar from './ProgressBar.jsx';
describe('<ProgressBar/>', () => {
it('should render', () => {
const tree = shallow(<ProgressBar percent={35}/>);
expect(tree.find('.progress-bar-inner')).to.have.length(1);
});
it('should pass aXe check', () => {
return axeCheck(<ProgressBar percent={35}/>);
});
});