There are no notes for this item.
| Prop | Required? | Type | Default | Description |
|---|---|---|---|---|
| onChange | Yes | func | Handler for when the checkbox is changed | |
| checked | Yes | bool | If the checkbox is checked or not |
<div id="reactMount" data-tpl="privacyagreement">
<div>
<div class="form-checkbox"><input type="checkbox" autocomplete="false" checked="" id="errorable-checkbox-44" name="privacyAgreement" /><label name="privacyAgreement-label" for="errorable-checkbox-44"><span>I have read and accept the <a target="_blank" href="/privacy/">privacy policy</a></span><span class="form-required-span">*</span></label></div>
</div>
</div>
<script>
window.currentProps = {
"package": {
"name": "department-of-veteran-affairs/jean-pants",
"version": "0.1.0"
},
"assetPath": "/design-system/",
"isProduction": true,
"componentSourcePath": "./PrivacyAgreement.jsx",
"checked": true
}
</script>
import React from 'react';
import PrivacyAgreement from './PrivacyAgreement';
export default function PrivacyAgreementExample(props) {
return (
<PrivacyAgreement
onChange={(e) => {e.target.checked}}
{...props}/>
);
}
package:
name: department-of-veteran-affairs/jean-pants
version: 0.1.0
assetPath: /design-system/
isProduction: true
componentSourcePath: ./PrivacyAgreement.jsx
checked: true
import PropTypes from 'prop-types';
import React from 'react';
import ErrorableCheckbox from '../form/controls/ErrorableCheckbox/ErrorableCheckbox';
export default function PrivacyAgreement({ onChange, checked, showError }) {
return (
<div>
<ErrorableCheckbox
required
checked={checked}
onValueChange={onChange}
name="privacyAgreement"
errorMessage={
showError && !checked
? 'You must accept the privacy policy before continuing'
: undefined
}
label={
<span>
I have read and accept the{' '}
<a target="_blank" href="/privacy/">
privacy policy
</a>
</span>
}/>
</div>
);
}
PrivacyAgreement.propTypes = {
/**
* Handler for when the checkbox is changed
*/
onChange: PropTypes.func.isRequired,
/**
* If the checkbox is checked or not
*/
checked: PropTypes.bool.isRequired
};
import React from 'react';
import { expect } from 'chai';
import { mount } from 'enzyme';
import { axeCheck } from '../../../lib/testing/helpers';
import PrivacyAgreement from './PrivacyAgreement.jsx';
describe('<PrivacyAgreement/>', () => {
let wrapper;
beforeEach(() => {
wrapper = mount(
<PrivacyAgreement
checked
onChange={e => {
e.target.checked;
}}/>
);
});
it('should render', () => {
expect(wrapper.text()).to.eql('I have read and accept the privacy policy*');
});
it('should pass aXe check', () => {
return axeCheck(<PrivacyAgreement checked onChange={() => {}}/>);
});
it('ErrorableCheckbox should be checked if props.checked = true', () => {
const checkBox = wrapper.find('[type="checkbox"]').props();
expect(checkBox.checked).to.be.true;
expect(checkBox.onChange).to.be.a('function');
});
it('should show errorMessage when its passed as a prop', () => {
wrapper.setProps({ checked: false, showError: true });
const checkBox = wrapper.find('ErrorableCheckbox');
expect(checkBox.prop('errorMessage')).to.eql(
'You must accept the privacy policy before continuing'
);
// should have error classes
expect(checkBox.find('.usa-input-error')).to.have.lengthOf(1);
expect(checkBox.find('.usa-input-error-label')).to.have.lengthOf(1);
expect(checkBox.find('.usa-input-error-message')).to.have.lengthOf(1);
return axeCheck(
<PrivacyAgreement showError checked={false} onChange={() => {}}/>
);
});
it('no error styles when errorMessage undefined', () => {
// No error classes.
const checkBox = wrapper.find('ErrorableCheckbox');
expect(checkBox.find('.usa-input-error')).to.have.lengthOf(0);
expect(checkBox.find('.usa-input-error-label')).to.have.lengthOf(0);
expect(checkBox.find('.usa-input-error-message')).to.have.lengthOf(0);
});
});