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

Update optional fields to use updated paragon components (#237)

Browse Source
This commit is contained in:
Zainab Amir
2021-04-09 18:11:46 +05:00
committed by Waheed Ahmed
parent 07ba88e761
commit f3721b5db2
8 changed files with 109 additions and 149 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
package-lock.json generated
View File

@@ -3924,9 +3924,9 @@
}
},
"@edx/paragon": {
"version": "13.16.1",
"resolved": "https://registry.npmjs.org/@edx/paragon/-/paragon-13.16.1.tgz",
"integrity": "sha512-8GxeS0OQLKJKrkqUa6HRk+wi/96IvhuY6JjjQYIf4+SA6TXLu57SwvtsQN6sLuB3PTxnW64WQF3MepvpNo9VpQ==",
"version": "13.17.5",
"resolved": "https://registry.npmjs.org/@edx/paragon/-/paragon-13.17.5.tgz",
"integrity": "sha512-ZLgZU/8kQBfHT3gd1s3w6AQZIOfufqMU4hItB4dSaqVcCX8ECmtE/AAMdwasTNxyhGCzfITuVe8xB9wYOnU/Xw==",
"requires": {
"@fortawesome/fontawesome-svg-core": "^1.2.30",
"@fortawesome/free-solid-svg-icons": "^5.14.0",
@@ -20980,9 +20980,9 @@
}
},
"react-popper": {
"version": "2.2.4",
"resolved": "https://registry.npmjs.org/react-popper/-/react-popper-2.2.4.tgz",
"integrity": "sha512-NacOu4zWupdQjVXq02XpTD3yFPSfg5a7fex0wa3uGKVkFK7UN6LvVxgcb+xYr56UCuWiNPMH20tntdVdJRwYew==",
"version": "2.2.5",
"resolved": "https://registry.npmjs.org/react-popper/-/react-popper-2.2.5.tgz",
"integrity": "sha512-kxGkS80eQGtLl18+uig1UIf9MKixFSyPxglsgLBxlYnyDf65BiY9B3nZSc6C9XUNDgStROB0fMQlTEz1KxGddw==",
"requires": {
"react-fast-compare": "^3.0.1",
"warning": "^4.0.2"

2
package.json
View File

@@ -38,7 +38,7 @@
"@edx/frontend-component-cookie-policy-banner": "2.1.12",
"@edx/frontend-component-header": "2.2.5",
"@edx/frontend-platform": "1.8.4",
"@edx/paragon": "13.16.1",
"@edx/paragon": "13.17.5",
"@fortawesome/fontawesome-svg-core": "1.2.32",
"@fortawesome/free-brands-svg-icons": "5.15.1",
"@fortawesome/free-regular-svg-icons": "5.15.1",

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 focus-out 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');
});
});

9
src/forgot-password/tests/__snapshots__/ForgotPasswordPage.test.jsx.snap
View File

@@ -24,8 +24,7 @@ exports[`ForgotPasswordPage should match default section snapshot 1`] = `
className="form-group mb-0 w-100"
>
<label
className="pt-10 focus-out form-label"
htmlFor="forgot-password-input"
className="pgn__form-label pt-10 focus-out"
>
Email
</label>
@@ -147,8 +146,7 @@ exports[`ForgotPasswordPage should match forbidden section snapshot 1`] = `
className="form-group mb-0 w-100"
>
<label
className="pt-10 focus-out form-label"
htmlFor="forgot-password-input"
className="pgn__form-label pt-10 focus-out"
>
Email
</label>
@@ -255,8 +253,7 @@ exports[`ForgotPasswordPage should match pending section snapshot 1`] = `
className="form-group mb-0 w-100"
>
<label
className="pt-10 focus-out form-label"
htmlFor="forgot-password-input"
className="pgn__form-label pt-10 focus-out"
>
Email
</label>

30
src/login/tests/__snapshots__/LoginPage.test.jsx.snap
View File

@@ -37,8 +37,7 @@ exports[`LoginPage should match TPA provider snapshot 1`] = `
className="form-group"
>
<label
className="pt-10 focus-out form-label"
htmlFor="email"
className="pgn__form-label pt-10 focus-out"
>
Email
</label>
@@ -63,8 +62,7 @@ exports[`LoginPage should match TPA provider snapshot 1`] = `
className="form-group"
>
<label
className="pt-10 focus-out form-label"
htmlFor="password"
className="pgn__form-label pt-10 focus-out"
>
Password
</label>
@@ -234,8 +232,7 @@ exports[`LoginPage should match default section snapshot 1`] = `
className="form-group"
>
<label
className="pt-10 focus-out form-label"
htmlFor="email"
className="pgn__form-label pt-10 focus-out"
>
Email
</label>
@@ -260,8 +257,7 @@ exports[`LoginPage should match default section snapshot 1`] = `
className="form-group"
>
<label
className="pt-10 focus-out form-label"
htmlFor="password"
className="pgn__form-label pt-10 focus-out"
>
Password
</label>
@@ -430,8 +426,7 @@ exports[`LoginPage should match forget password alert message snapshot 1`] = `
className="form-group"
>
<label
className="pt-10 focus-out form-label"
htmlFor="email"
className="pgn__form-label pt-10 focus-out"
>
Email
</label>
@@ -456,8 +451,7 @@ exports[`LoginPage should match forget password alert message snapshot 1`] = `
className="form-group"
>
<label
className="pt-10 focus-out form-label"
htmlFor="password"
className="pgn__form-label pt-10 focus-out"
>
Password
</label>
@@ -586,8 +580,7 @@ exports[`LoginPage should match pending button state snapshot 1`] = `
className="form-group"
>
<label
className="pt-10 focus-out form-label"
htmlFor="email"
className="pgn__form-label pt-10 focus-out"
>
Email
</label>
@@ -612,8 +605,7 @@ exports[`LoginPage should match pending button state snapshot 1`] = `
className="form-group"
>
<label
className="pt-10 focus-out form-label"
htmlFor="password"
className="pgn__form-label pt-10 focus-out"
>
Password
</label>
@@ -779,8 +771,7 @@ exports[`LoginPage should show error message 1`] = `
className="form-group"
>
<label
className="pt-10 focus-out form-label"
htmlFor="email"
className="pgn__form-label pt-10 focus-out"
>
Email
</label>
@@ -805,8 +796,7 @@ exports[`LoginPage should show error message 1`] = `
className="form-group"
>
<label
className="pt-10 focus-out form-label"
htmlFor="password"
className="pgn__form-label pt-10 focus-out"
>
Password
</label>

119
src/register/OptionalFields.jsx
View File

@@ -2,87 +2,86 @@ import React from 'react';
import PropTypes from 'prop-types';
import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
import { Form, Icon } from '@edx/paragon';
import { ExpandMore } from '@edx/paragon/icons';
import { EDUCATION_LEVELS, GENDER_OPTIONS, YEAR_OF_BIRTH_OPTIONS } from './data/constants';
import messages from './messages';
import { AuthnValidationFormGroup } from '../common-components';
const OptionalFields = (props) => {
const {
intl, optionalFields, onChangeHandler, values,
} = props;
const getOptions = () => ({
yearOfBirthOptions: [{
value: '',
label: intl.formatMessage(messages['registration.year.of.birth.label']),
}].concat(YEAR_OF_BIRTH_OPTIONS),
educationLevelOptions: EDUCATION_LEVELS.map(key => ({
value: key,
label: intl.formatMessage(messages[`registration.field.education.levels.${key || 'label'}`]),
})),
genderOptions: GENDER_OPTIONS.map(key => ({
value: key,
label: intl.formatMessage(messages[`registration.field.gender.options.${key || 'label'}`]),
})),
yearOfBirthOptions: YEAR_OF_BIRTH_OPTIONS.map(({ value, label }) => (
<option key={value} value={value}>{label}</option>
)),
educationLevelOptions: EDUCATION_LEVELS.map(key => (
<option key={key} value={key}>{intl.formatMessage(messages[`registration.field.education.levels.${key || 'label'}`])}</option>
)),
genderOptions: GENDER_OPTIONS.map(key => (
<option key={key} value={key}>{intl.formatMessage(messages[`registration.field.gender.options.${key || 'label'}`])}</option>
)),
});
return (
<>
<div className="mt-3">
{optionalFields.includes('gender') && (
<AuthnValidationFormGroup
label={intl.formatMessage(messages['registration.field.gender.options.label'])}
for="gender"
name="gender"
type="select"
key="gender"
value={values.gender}
className="mb-20 data-hj-suppress"
onChange={(e) => onChangeHandler('gender', e.target.value)}
selectOptions={getOptions().genderOptions}
/>
<Form.Group controlId="gender">
<Form.Control
as="select"
name="gender"
value={values.gender}
onChange={(e) => onChangeHandler('gender', e.target.value)}
trailingElement={<Icon src={ExpandMore} />}
floatingLabel={intl.formatMessage(messages['registration.field.gender.options.label'])}
>
{getOptions().genderOptions}
</Form.Control>
</Form.Group>
)}
{optionalFields.includes('yearOfBirth') && (
<AuthnValidationFormGroup
label={intl.formatMessage(messages['registration.year.of.birth.label'])}
for="yearOfBirth"
name="yearOfBirth"
type="select"
key="yearOfBirth"
value={values.yearOfBirth}
className="mb-20 data-hj-suppress"
onChange={(e) => onChangeHandler('yearOfBirth', e.target.value)}
selectOptions={getOptions().yearOfBirthOptions}
/>
<Form.Group controlId="yearOfBirth">
<Form.Control
as="select"
name="yearOfBirth"
value={values.yearOfBirth}
onChange={(e) => onChangeHandler('yearOfBirth', e.target.value)}
trailingElement={<Icon src={ExpandMore} />}
floatingLabel={intl.formatMessage(messages['registration.year.of.birth.label'])}
>
<option value="">{intl.formatMessage(messages['registration.year.of.birth.label'])}</option>
{getOptions().yearOfBirthOptions}
</Form.Control>
</Form.Group>
)}
{optionalFields.includes('levelOfEducation') && (
<AuthnValidationFormGroup
label={intl.formatMessage(messages['registration.field.education.levels.label'])}
for="levelOfEducation"
name="levelOfEducation"
type="select"
key="levelOfEducation"
value={values.levelOfEducation}
className="mb-20 data-hj-suppress"
onChange={(e) => onChangeHandler('levelOfEducation', e.target.value)}
selectOptions={getOptions().educationLevelOptions}
/>
<Form.Group controlId="levelOfEducation">
<Form.Control
as="select"
name="levelOfEducation"
value={values.levelOfEducation}
onChange={(e) => onChangeHandler('levelOfEducation', e.target.value)}
trailingElement={<Icon src={ExpandMore} />}
floatingLabel={intl.formatMessage(messages['registration.field.education.levels.label'])}
>
{getOptions().educationLevelOptions}
</Form.Control>
</Form.Group>
)}
{optionalFields.includes('goals') && (
<AuthnValidationFormGroup
label={intl.formatMessage(messages['registration.goals.label'])}
for="goals"
name="goals"
type="textarea"
key="goals"
value={values.goals}
className="mb-20"
onChange={(e) => onChangeHandler('goals', e.target.value)}
inputFieldStyle="border-gray-600"
/>
<Form.Group controlId="goals">
<Form.Control
as="textarea"
name="goals"
value={values.goals}
onChange={(e) => onChangeHandler('goals', e.target.value)}
floatingLabel={intl.formatMessage(messages['registration.goals.label'])}
/>
</Form.Group>
)}
</>
</div>
);
};

54
src/register/tests/__snapshots__/RegistrationPage.test.jsx.snap
View File

@@ -36,8 +36,7 @@ exports[`RegistrationPageTests should match TPA provider snapshot 1`] = `
className="form-group"
>
<label
className="pt-10 focus-out form-label"
htmlFor="name"
className="pgn__form-label pt-10 focus-out"
>
Full name (required)
</label>
@@ -62,8 +61,7 @@ exports[`RegistrationPageTests should match TPA provider snapshot 1`] = `
className="form-group data-hj-suppress"
>
<label
className="pt-10 focus-out form-label"
htmlFor="username"
className="pgn__form-label pt-10 focus-out"
>
Public username (required)
</label>
@@ -88,8 +86,7 @@ exports[`RegistrationPageTests should match TPA provider snapshot 1`] = `
className="form-group data-hj-suppress"
>
<label
className="pt-10 focus-out form-label"
htmlFor="email"
className="pgn__form-label pt-10 focus-out"
>
Email (required)
</label>
@@ -114,8 +111,7 @@ exports[`RegistrationPageTests should match TPA provider snapshot 1`] = `
className="form-group"
>
<label
className="pt-10 focus-out form-label"
htmlFor="password"
className="pgn__form-label pt-10 focus-out"
>
Password (required)
</label>
@@ -140,8 +136,7 @@ exports[`RegistrationPageTests should match TPA provider snapshot 1`] = `
className="form-group mb-0 data-hj-suppress"
>
<label
className="sr-only form-label"
htmlFor="country"
className="pgn__form-label sr-only"
>
Country or region of residence (required)
</label>
@@ -1471,8 +1466,7 @@ exports[`RegistrationPageTests should match TPA provider snapshot 1`] = `
className="form-group custom-control pt-10 mb-0"
>
<label
className="sr-only form-label"
htmlFor="optional"
className="pgn__form-label sr-only"
>
Support education research by providing additional information. (Optional)
</label>
@@ -1604,8 +1598,7 @@ exports[`RegistrationPageTests should match default section snapshot 1`] = `
className="form-group"
>
<label
className="pt-10 focus-out form-label"
htmlFor="name"
className="pgn__form-label pt-10 focus-out"
>
Full name (required)
</label>
@@ -1630,8 +1623,7 @@ exports[`RegistrationPageTests should match default section snapshot 1`] = `
className="form-group data-hj-suppress"
>
<label
className="pt-10 focus-out form-label"
htmlFor="username"
className="pgn__form-label pt-10 focus-out"
>
Public username (required)
</label>
@@ -1656,8 +1648,7 @@ exports[`RegistrationPageTests should match default section snapshot 1`] = `
className="form-group data-hj-suppress"
>
<label
className="pt-10 focus-out form-label"
htmlFor="email"
className="pgn__form-label pt-10 focus-out"
>
Email (required)
</label>
@@ -1682,8 +1673,7 @@ exports[`RegistrationPageTests should match default section snapshot 1`] = `
className="form-group"
>
<label
className="pt-10 focus-out form-label"
htmlFor="password"
className="pgn__form-label pt-10 focus-out"
>
Password (required)
</label>
@@ -1708,8 +1698,7 @@ exports[`RegistrationPageTests should match default section snapshot 1`] = `
className="form-group mb-0 data-hj-suppress"
>
<label
className="sr-only form-label"
htmlFor="country"
className="pgn__form-label sr-only"
>
Country or region of residence (required)
</label>
@@ -3039,8 +3028,7 @@ exports[`RegistrationPageTests should match default section snapshot 1`] = `
className="form-group custom-control pt-10 mb-0"
>
<label
className="sr-only form-label"
htmlFor="optional"
className="pgn__form-label sr-only"
>
Support education research by providing additional information. (Optional)
</label>
@@ -3128,8 +3116,7 @@ exports[`RegistrationPageTests should match pending button state snapshot 1`] =
className="form-group"
>
<label
className="pt-10 focus-out form-label"
htmlFor="name"
className="pgn__form-label pt-10 focus-out"
>
Full name (required)
</label>
@@ -3154,8 +3141,7 @@ exports[`RegistrationPageTests should match pending button state snapshot 1`] =
className="form-group data-hj-suppress"
>
<label
className="pt-10 focus-out form-label"
htmlFor="username"
className="pgn__form-label pt-10 focus-out"
>
Public username (required)
</label>
@@ -3180,8 +3166,7 @@ exports[`RegistrationPageTests should match pending button state snapshot 1`] =
className="form-group data-hj-suppress"
>
<label
className="pt-10 focus-out form-label"
htmlFor="email"
className="pgn__form-label pt-10 focus-out"
>
Email (required)
</label>
@@ -3206,8 +3191,7 @@ exports[`RegistrationPageTests should match pending button state snapshot 1`] =
className="form-group"
>
<label
className="pt-10 focus-out form-label"
htmlFor="password"
className="pgn__form-label pt-10 focus-out"
>
Password (required)
</label>
@@ -3232,8 +3216,7 @@ exports[`RegistrationPageTests should match pending button state snapshot 1`] =
className="form-group mb-0 data-hj-suppress"
>
<label
className="sr-only form-label"
htmlFor="country"
className="pgn__form-label sr-only"
>
Country or region of residence (required)
</label>
@@ -4563,8 +4546,7 @@ exports[`RegistrationPageTests should match pending button state snapshot 1`] =
className="form-group custom-control pt-10 mb-0"
>
<label
className="sr-only form-label"
htmlFor="optional"
className="pgn__form-label sr-only"
>
Support education research by providing additional information. (Optional)
</label>

24
src/reset-password/tests/__snapshots__/ResetPasswordPage.test.jsx.snap
View File

@@ -25,8 +25,7 @@ exports[`ResetPasswordPage should match invalid token message section snapshot 1
className="form-group w-100"
>
<label
className="pt-10 focus-out form-label"
htmlFor="reset-password-input"
className="pgn__form-label pt-10 focus-out"
>
New password
</label>
@@ -51,8 +50,7 @@ exports[`ResetPasswordPage should match invalid token message section snapshot 1
className="form-group w-100"
>
<label
className="pt-10 focus-out form-label"
htmlFor="confirm-password-input"
className="pgn__form-label pt-10 focus-out"
>
Confirm password
</label>
@@ -126,8 +124,7 @@ exports[`ResetPasswordPage should match pending reset message section snapshot 1
className="form-group w-100"
>
<label
className="pt-10 focus-out form-label"
htmlFor="reset-password-input"
className="pgn__form-label pt-10 focus-out"
>
New password
</label>
@@ -152,8 +149,7 @@ exports[`ResetPasswordPage should match pending reset message section snapshot 1
className="form-group w-100"
>
<label
className="pt-10 focus-out form-label"
htmlFor="confirm-password-input"
className="pgn__form-label pt-10 focus-out"
>
Confirm password
</label>
@@ -248,8 +244,7 @@ exports[`ResetPasswordPage should match reset password default section snapshot
className="form-group w-100"
>
<label
className="pt-10 focus-out form-label"
htmlFor="reset-password-input"
className="pgn__form-label pt-10 focus-out"
>
New password
</label>
@@ -274,8 +269,7 @@ exports[`ResetPasswordPage should match reset password default section snapshot
className="form-group w-100"
>
<label
className="pt-10 focus-out form-label"
htmlFor="confirm-password-input"
className="pgn__form-label pt-10 focus-out"
>
Confirm password
</label>
@@ -387,8 +381,7 @@ exports[`ResetPasswordPage show spinner component during token validation 1`] =
className="form-group w-100"
>
<label
className="pt-10 focus-out form-label"
htmlFor="reset-password-input"
className="pgn__form-label pt-10 focus-out"
>
New password
</label>
@@ -413,8 +406,7 @@ exports[`ResetPasswordPage show spinner component during token validation 1`] =
className="form-group w-100"
>
<label
className="pt-10 focus-out form-label"
htmlFor="confirm-password-input"
className="pgn__form-label pt-10 focus-out"
>
Confirm password
</label>