From cb82e94b53267a0b092d9b5a22837a3ec7a48f5d Mon Sep 17 00:00:00 2001 From: Attiya Ishaque Date: Tue, 23 May 2023 17:21:29 +0500 Subject: [PATCH] refactor: BEM convention for modules (#907) --- src/forgot-password/ForgotPasswordPage.jsx | 2 +- src/register/ConfigurableRegistrationForm.jsx | 2 +- src/register/RegistrationPage.jsx | 2 +- .../registrationFields/EmailField.jsx | 8 +- src/register/registrationFields/HonorCode.jsx | 2 +- .../registrationFields/TermsOfService.jsx | 2 +- .../registrationFields/UsernameField.jsx | 14 +-- src/register/tests/RegistrationPage.test.jsx | 16 +-- src/sass/_forgot_password.scss | 3 + src/sass/_registration.scss | 86 +++++++++++++- src/sass/_style.scss | 111 +----------------- 11 files changed, 113 insertions(+), 135 deletions(-) create mode 100644 src/sass/_forgot_password.scss diff --git a/src/forgot-password/ForgotPasswordPage.jsx b/src/forgot-password/ForgotPasswordPage.jsx index d93f4ade..b7790c6b 100644 --- a/src/forgot-password/ForgotPasswordPage.jsx +++ b/src/forgot-password/ForgotPasswordPage.jsx @@ -133,7 +133,7 @@ const ForgotPasswordPage = (props) => { name="submit-forget-password" type="submit" variant="brand" - className="forgot-password-button-width" + className="forgot-password--button" state={submitState} labels={{ default: formatMessage(messages['forgot.password.page.submit.button']), diff --git a/src/register/ConfigurableRegistrationForm.jsx b/src/register/ConfigurableRegistrationForm.jsx index 36bc66a9..3de9af4b 100644 --- a/src/register/ConfigurableRegistrationForm.jsx +++ b/src/register/ConfigurableRegistrationForm.jsx @@ -171,7 +171,7 @@ const ConfigurableRegistrationForm = (props) => { name: 'marketingEmailsOptIn', }} value={formFields.marketingEmailsOptIn} - className="opt-checkbox" + className="form-field--checkbox" onChangeHandler={handleOnChange} handleBlur={handleOnBlur} handleFocus={handleOnFocus} diff --git a/src/register/RegistrationPage.jsx b/src/register/RegistrationPage.jsx index 24c832d5..e2316373 100644 --- a/src/register/RegistrationPage.jsx +++ b/src/register/RegistrationPage.jsx @@ -604,7 +604,7 @@ const RegistrationPage = (props) => { name="register-user" type="submit" variant="brand" - className="register-stateful-button-width mt-4 mb-4" + className="register-button mt-4 mb-4" state={submitState} labels={{ default: formatMessage(messages['create.account.for.free.button']), diff --git a/src/register/registrationFields/EmailField.jsx b/src/register/registrationFields/EmailField.jsx index 938f75f2..19f6d6ff 100644 --- a/src/register/registrationFields/EmailField.jsx +++ b/src/register/registrationFields/EmailField.jsx @@ -19,8 +19,8 @@ const EmailField = (props) => { const renderEmailFeedback = () => { if (emailSuggestion.type === 'error') { return ( - - + + {formatMessage(messages['did.you.mean.alert.text'])}{' '} { onClick={handleSuggestionClick} > {emailSuggestion.suggestion} - ? + ? ); @@ -39,7 +39,7 @@ const EmailField = (props) => { {emailSuggestion.suggestion} diff --git a/src/register/registrationFields/HonorCode.jsx b/src/register/registrationFields/HonorCode.jsx index 3383dac2..ad18e8a1 100644 --- a/src/register/registrationFields/HonorCode.jsx +++ b/src/register/registrationFields/HonorCode.jsx @@ -48,7 +48,7 @@ const HonorCode = (props) => { return (
{ return (
{ let iconButton = null; const suggestedUsernames = () => (
- {formatMessage(messages['registration.username.suggestion.label'])} -
+ {formatMessage(messages['registration.username.suggestion.label'])} +
{usernameSuggestions.map((username, index) => (
); if (usernameSuggestions.length > 0 && errorMessage && props.value === ' ') { - className = 'suggested-username-with-error'; - iconButton = handleUsernameSuggestionClose()} variant="black" size="sm" className="suggested-username-close-button" />; + className = 'username-suggestions__error'; + iconButton = handleUsernameSuggestionClose()} variant="black" size="sm" className="username-suggestions__close__button" />; suggestedUsernameDiv = suggestedUsernames(); } else if (usernameSuggestions.length > 0 && props.value === ' ') { - className = 'suggested-username'; - iconButton = handleUsernameSuggestionClose()} variant="black" size="sm" className="suggested-username-close-button" />; + className = 'username-suggestions'; + iconButton = handleUsernameSuggestionClose()} variant="black" size="sm" className="username-suggestions__close__button" />; suggestedUsernameDiv = suggestedUsernames(); } else if (usernameSuggestions.length > 0 && errorMessage) { suggestedUsernameDiv = suggestedUsernames(); diff --git a/src/register/tests/RegistrationPage.test.jsx b/src/register/tests/RegistrationPage.test.jsx index c4886560..aaabf7d5 100644 --- a/src/register/tests/RegistrationPage.test.jsx +++ b/src/register/tests/RegistrationPage.test.jsx @@ -353,7 +353,7 @@ describe('RegistrationPage', () => { registrationPage.find('input#email').simulate('change', { target: { value: 'john@yopmail.com', name: 'email' } }); registrationPage.find('input#email').simulate('blur'); - registrationPage.find('.email-warning-alert-link').first().simulate('click'); + registrationPage.find('.email-suggestion-alert-warning').first().simulate('click'); expect(registrationPage.find('input#email').props().value).toEqual('john@hotmail.com'); }); @@ -407,7 +407,7 @@ describe('RegistrationPage', () => { registrationPage.find('input#email').simulate('blur'); const receievedMessage = 'Did you mean ahtesham@hotmail.com?'; - expect(registrationPage.find('.alert-text').text()).toEqual(receievedMessage); + expect(registrationPage.find('.email-suggestion__text').text()).toEqual(receievedMessage); }); it('should call backend validation api for password validation', () => { @@ -559,7 +559,7 @@ describe('RegistrationPage', () => { }); const registrationPage = mount(reduxWrapper()); - expect(registrationPage.find('div.opt-checkbox').length).toEqual(1); + expect(registrationPage.find('div.form-field--checkbox').length).toEqual(1); mergeConfig({ MARKETING_EMAILS_OPT_IN: '', @@ -657,7 +657,7 @@ describe('RegistrationPage', () => { }); const registrationPage = mount(reduxWrapper()); - expect(registrationPage.find('button.username-suggestion').length).toEqual(3); + expect(registrationPage.find('button.username-suggestions--chip').length).toEqual(3); }); it('should show username suggestions when full name is populated', () => { @@ -676,7 +676,7 @@ describe('RegistrationPage', () => { const registrationPage = mount(reduxWrapper()); registrationPage.find('input#name').simulate('change', { target: { value: 'test name', name: 'name' } }); - expect(registrationPage.find('button.username-suggestion').length).toEqual(3); + expect(registrationPage.find('button.username-suggestions--chip').length).toEqual(3); }); it('should click on username suggestions when full name is populated', () => { @@ -694,7 +694,7 @@ describe('RegistrationPage', () => { const registrationPage = mount(reduxWrapper()); registrationPage.find('input#name').simulate('change', { target: { value: 'test name', name: 'name' } }); - registrationPage.find('.username-suggestion').first().simulate('click'); + registrationPage.find('.username-suggestions--chip').first().simulate('click'); expect(registrationPage.find('input#username').props().value).toEqual('test_1'); }); @@ -714,7 +714,7 @@ describe('RegistrationPage', () => { const registrationPage = mount(reduxWrapper()); registrationPage.find('input#name').simulate('change', { target: { value: 'test name', name: 'name' } }); - registrationPage.find('button.suggested-username-close-button').at(0).simulate('click'); + registrationPage.find('button.username-suggestions__close__button').at(0).simulate('click'); expect(store.dispatch).toHaveBeenCalledWith(clearUsernameSuggestions()); }); @@ -1032,7 +1032,7 @@ describe('RegistrationPage', () => { expect(registrationPage.find('input#username').props().value).toEqual('john_doe'); expect(registrationPage.find('input#email').props().value).toEqual('john.doe@yopmail.com'); expect(registrationPage.find('input#password').props().value).toEqual('password1'); - expect(registrationPage.find('.email-warning-alert-link').first().text()).toEqual('john.doe@hotmail.com'); + expect(registrationPage.find('.email-suggestion-alert-warning').first().text()).toEqual('john.doe@hotmail.com'); }); it('should set country in component state when form is translated used i18n', () => { diff --git a/src/sass/_forgot_password.scss b/src/sass/_forgot_password.scss new file mode 100644 index 00000000..4ff2d4fa --- /dev/null +++ b/src/sass/_forgot_password.scss @@ -0,0 +1,3 @@ +.forgot-password--button { + min-width: 6rem; +} diff --git a/src/sass/_registration.scss b/src/sass/_registration.scss index 63baf2c8..06e86177 100644 --- a/src/sass/_registration.scss +++ b/src/sass/_registration.scss @@ -1,7 +1,91 @@ -.register-stateful-button-width { +.register-button { min-width: 14.4rem; } .pgn__form-autosuggest__wrapper > .pgn__form-group { margin-bottom: 0 !important; } + +.email-suggestion-alert-error { + padding: 0.5rem 1rem; + + .email-suggestion__close { + float: right; + + &:hover { + cursor: pointer; + } + } + + .email-suggestion__text { + font-size: 0.75rem; + line-height: 1.25rem; + } + + .alert-link { + color: $primary !important; + + &:hover { + text-decoration: underline; + color: $info-700 !important; + } + } +} + +.email-suggestion-alert-warning { + color: $info-500 !important; + + &:hover { + text-decoration: underline; + color: $info-700 !important; + } +} + +.form-field--checkbox { + .pgn__form-label { + font-size: 0.75rem; + line-height: 1.25rem; + } + margin-left: 3px; +} + +.username-suggestions--chip { + padding: 1px 0.5rem; + margin: 0.25rem; + border-radius: 0.375rem; + line-height: 24px; + font-size: 12px; + font-weight: normal; + color: $primary-700; +} + +.username-suggestion--label { + font-size: 0.75rem; + line-height: 1.25rem; + margin-right: 0.25rem; +} + +.username-suggestions { + position: relative; + margin-top: -8.7%; + margin-left: 15px; +} + +.username-suggestions__close__button { + right: 1rem; + position: absolute; +} + +.username-suggestions__error { + position: relative; + margin-top: -13.7%; + margin-bottom: 11%; + margin-left: 15px; +} + +.username-suggestions--field--scrollable{ + width: 21rem; + white-space: nowrap; + overflow-x: auto; + display: inline-flex; +} diff --git a/src/sass/_style.scss b/src/sass/_style.scss index 1492ebc7..effd5ecb 100644 --- a/src/sass/_style.scss +++ b/src/sass/_style.scss @@ -5,6 +5,7 @@ @import "_reset_password.scss"; @import "_progressive_profiling_page.scss"; @import "_login_page.scss"; +@import "_forgot_password.scss"; // // ---------------------------- // #COLORS @@ -322,27 +323,6 @@ select.form-control { } } -#forgotpassword-success-alert { - .alert-link { - color: $gray-700 !important; - } -} - -.username-suggestion { - padding: 1px 0.5rem; - margin: 0.25rem; - border-radius: 0.375rem; - line-height: 24px; - font-size: 12px; - font-weight: normal; - color: $primary-700; -} - -.username-suggestion-label { - font-size: 0.75rem; - line-height: 1.25rem; - margin-right: 0.25rem; -} .yellow-border { border: 2px solid $accent-b; @@ -361,58 +341,6 @@ select.form-control { text-decoration: none; } -.dropdown-item:active { - background-color: $light-300; -} - -.dropdown-container { - box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15), 0px 2px 8px rgba(0, 0, 0, 0.15); - border-radius: 4px; - max-height: 200px; - font-size: 1rem; - font-weight: normal; - line-height: 1.25rem; - overflow-y: scroll; - position: absolute; - background-color: $white; - width: 464px; - z-index: 100 !important; -} - -.email-error-alert { - padding: 0.5rem 1rem; - - .alert-close { - float: right; - - &:hover { - cursor: pointer; - } - } - - .alert-text { - font-size: 0.75rem; - line-height: 1.25rem; - } - - .alert-link { - color: $primary !important; - - &:hover { - text-decoration: underline; - color: $info-700 !important; - } - } -} - -.email-warning-alert-link { - color: $info-500 !important; - - &:hover { - text-decoration: underline; - color: $info-700 !important; - } -} #forgot-password { &:hover { @@ -485,14 +413,6 @@ select.form-control { } } -@media (max-width: 464px) { - .dropdown-container { - width: auto; - left: 0; - right: 0; - position: relative; - } -} .alert { p:last-child { @@ -534,35 +454,6 @@ select.form-control { color: $primary-700 } -.opt-checkbox { - .pgn__form-label { - font-size: 0.75rem; - line-height: 1.25rem; - } - margin-left: 3px; -} -.suggested-username { - position: relative; - margin-top: -8.7%; - margin-left: 15px; -} -.suggested-username-close-button { - right: 1rem; - position: absolute; -} -.suggested-username-with-error { - position: relative; - margin-top: -13.7%; - margin-bottom: 11%; - margin-left: 15px; -} -.scroll-suggested-username { - width: 21rem; - white-space: nowrap; - overflow-x: auto; - display: inline-flex; -} - .pgn__form-control-decorator-trailing { right: 0 !important; }