There are no notes for this item.
| Prop | Required? | Type | Default | Description |
|---|---|---|---|---|
| onButtonClick | No | func | ||
| buttonText | Yes | string | ||
| buttonClass | Yes | string | ||
| beforeText | No | string | ||
| afterText | No | string | ||
| disabled | No | bool | ||
| submitButton | No | bool |
<div id="reactMount" data-tpl="progressbutton"><button type="button" class="usa-button-primary null" id="42-continueButton"><span class="button-icon">« </span>Progress Button<span class="button-icon"> »</span></button></div>
<script>
window.currentProps = {
"package": {
"name": "department-of-veteran-affairs/jean-pants",
"version": "0.1.0"
},
"assetPath": "/design-system/",
"isProduction": true,
"componentSourcePath": "./ProgressButton.jsx",
"buttonText": "Progress Button",
"buttonClass": "usa-button-primary",
"beforeText": "«",
"afterText": "»",
"disabled": "PropTypes.bool",
"submitButton": "PropTypes.bool"
}
</script>
import React from 'react';
import ProgressButton from './ProgressButton';
export default function ProgressButtonExample(props) {
return (
<ProgressButton
buttonText={props.buttonText}
buttonClass={props.buttonClass}
beforeText={props.beforeText}
afterText={props.afterText}
disabled={false}
submitButton={false}/>
);
}
package:
name: department-of-veteran-affairs/jean-pants
version: 0.1.0
assetPath: /design-system/
isProduction: true
componentSourcePath: ./ProgressButton.jsx
buttonText: Progress Button
buttonClass: usa-button-primary
beforeText: «
afterText: »
disabled: PropTypes.bool
submitButton: PropTypes.bool
import PropTypes from 'prop-types';
import React from 'react';
import _ from 'lodash';
/**
* A component for the continue button to navigate through panels of questions.
*/
class ProgressButton extends React.Component {
componentWillMount() {
this.id = _.uniqueId();
}
render() {
const beforeText = (this.props.beforeText) ? (<span className="button-icon">{this.props.beforeText} </span>) : '';
const afterText = (this.props.afterText) ? (<span className="button-icon"> {this.props.afterText}</span>) : '';
return (
<button
type={this.props.submitButton ? 'submit' : 'button'}
disabled={this.props.disabled}
className={`${this.props.buttonClass} ${this.props.disabled ? 'usa-button-disabled' : null}`}
id={`${this.id}-continueButton`}
onClick={this.props.onButtonClick}>{beforeText}{this.props.buttonText}{afterText}
</button>
);
}
}
ProgressButton.propTypes = {
// function that changes the path to the next panel or submit.
onButtonClick: PropTypes.func,
// what is the button's label
buttonText: PropTypes.string.isRequired,
// what CSS class(es) does the button have
buttonClass: PropTypes.string.isRequired,
// Stores the value for the icon that will appear before the button text.
beforeText: PropTypes.string,
// Stores the value for the icon that will appear after the button text.
afterText: PropTypes.string,
// is the button disabled or not
disabled: PropTypes.bool,
// is this a submit button or not
submitButton: PropTypes.bool
};
export default ProgressButton;
import React from 'react';
import ReactTestUtils from 'react-dom/test-utils';
import { shallow } from 'enzyme';
import chaiAsPromised from 'chai-as-promised';
import chai, { expect } from 'chai';
import { axeCheck } from '../../../../../lib/testing/helpers';
import ProgressButton from './ProgressButton.jsx';
chai.use(chaiAsPromised);
describe('<ProgressButton>', () => {
it('should render with button text', () => {
const tree = shallow(<ProgressButton
buttonText="Button text" buttonClass="usa-button-primary"
disabled={false}/>);
expect(tree.text()).to.equal('Button text');
expect(tree).to.have.length.of(1);
});
it('calls handle() on click', () => {
let progressButton;
const updatePromise = new Promise((resolve, _reject) => {
progressButton = ReactTestUtils.renderIntoDocument(<ProgressButton
buttonText="Button text"
buttonClass="usa-button-primary"
disabled={false}
onButtonClick={() => { resolve(true); }}/>);
});
const button = ReactTestUtils.findRenderedDOMComponentWithTag(progressButton, 'button');
ReactTestUtils.Simulate.click(button);
return expect(updatePromise).to.eventually.eql(true);
});
it('should pass aXe check when enabled', () => {
return axeCheck(<ProgressButton
buttonText="Button text" buttonClass="usa-button-primary"
disabled={false}/>);
});
it('should pass aXe check when disabled', () => {
return axeCheck(<ProgressButton
buttonText="Button text" buttonClass="usa-button-primary"
disabled/>);
});
});