Andal.LND/frontend-app-authn
6
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add 3:1 contrast to all form text field.

Browse Source 
VAN-381
This commit is contained in:
Adeel Khan
2021-03-16 03:28:09 +05:00
parent 3fa3f257ba
commit 211eb787b4
13 changed files with 87 additions and 140 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/common-components/AuthnValidationFormGroup.jsx
View File

@@ -61,7 +61,6 @@ const AuthnCustomValidationFormGroup = (props) => {
id: props.for,
type: props.type,
value: props.value,
className: props.inputFieldStyle,
'aria-invalid': props.ariaInvalid,
};
inputProps.onChange = (e) => onChangeHandler(e, onChange);
@@ -71,7 +70,7 @@ const AuthnCustomValidationFormGroup = (props) => {
if (props.type === 'select') {
inputProps.options = props.selectOptions;
inputProps.className = props.value === '' ? 'text-muted border-gray-600' : null;
inputProps.className = props.value === '' ? 'text-muted' : null;
}
if (props.type === 'checkbox') {
inputProps.checked = props.isChecked;
@@ -115,7 +114,6 @@ AuthnCustomValidationFormGroup.defaultProps = {
invalid: false,
ariaInvalid: false,
invalidMessage: '',
inputFieldStyle: '',
helpText: '',
className: '',
onClick: null,
@@ -140,7 +138,6 @@ AuthnCustomValidationFormGroup.propTypes = {
invalidMessage: PropTypes.string,
helpText: PropTypes.string,
className: PropTypes.string,
inputFieldStyle: PropTypes.string,
isChecked: PropTypes.bool,
optionalFieldCheckbox: PropTypes.bool,
onClick: PropTypes.func,

8
src/common-components/tests/AuthnValidationFormGroup.test.jsx
View File

@@ -15,14 +15,14 @@ describe('AuthnCustomValidationFormGroup', () => {
it('should show label in place of placeholder when field is empty', () => {
const validationFormGroup = mount(<AuthnCustomValidationFormGroup {...props} />);
expect(validationFormGroup.find('label').prop('className')).toEqual('pt-10 focus-out form-label');
expect(validationFormGroup.find('label').prop('className')).toEqual('pgn__form-label pt-10 focus-out');
});
it('should show label on top of field when field is focused in', () => {
const validationFormGroup = mount(<AuthnCustomValidationFormGroup {...props} />);
validationFormGroup.find('input').simulate('focus');
expect(validationFormGroup.find('label').prop('className')).toEqual('pt-10 h6 form-label');
expect(validationFormGroup.find('label').prop('className')).toEqual('pgn__form-label pt-10 h6');
});
it('should keep label hidden for checkbox field', () => {
@@ -32,7 +32,7 @@ describe('AuthnCustomValidationFormGroup', () => {
optionalFieldCheckbox: true,
};
const validationFormGroup = mount(<AuthnCustomValidationFormGroup {...props} />);
expect(validationFormGroup.find('label').prop('className')).toEqual('sr-only form-label');
expect(validationFormGroup.find('label').prop('className')).toEqual('pgn__form-label sr-only');
});
it('should keep label hidden when input field is not empty', () => {
@@ -41,6 +41,6 @@ describe('AuthnCustomValidationFormGroup', () => {
value: 'test',
};
const validationFormGroup = mount(<AuthnCustomValidationFormGroup {...props} />);
expect(validationFormGroup.find('label').prop('className')).toEqual('sr-only form-label');
expect(validationFormGroup.find('label').prop('className')).toEqual('pgn__form-label sr-only');
});
});