refactor: BEM convention for modules (#907)

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']),

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}

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']),

src/register/registrationFields/EmailField.jsx

@@ -19,8 +19,8 @@ const EmailField = (props) => {
   const renderEmailFeedback = () => {
     if (emailSuggestion.type === 'error') {
       return (
-        <Alert variant="danger" className="email-error-alert mt-1" icon={Error}>
-          <span className="alert-text">
+        <Alert variant="danger" className="email-suggestion-alert-error mt-1" icon={Error}>
+          <span className="email-suggestion__text">
             {formatMessage(messages['did.you.mean.alert.text'])}{' '}
             <Alert.Link
               href="#"
@@ -28,7 +28,7 @@ const EmailField = (props) => {
               onClick={handleSuggestionClick}
             >
               {emailSuggestion.suggestion}
-            </Alert.Link>?<Icon src={Close} className="alert-close" onClick={handleOnClose} tabIndex="0" />
+            </Alert.Link>?<Icon src={Close} className="email-suggestion__close" onClick={handleOnClose} tabIndex="0" />
           </span>
         </Alert>
       );
@@ -39,7 +39,7 @@ const EmailField = (props) => {
         <Alert.Link
           href="#"
           name="email"
-          className="email-warning-alert-link"
+          className="email-suggestion-alert-warning"
           onClick={handleSuggestionClick}
         >
           {emailSuggestion.suggestion}

src/register/registrationFields/HonorCode.jsx

@@ -48,7 +48,7 @@ const HonorCode = (props) => {
   return (
     <div id="honor-code" className="micro text-muted">
       <Form.Checkbox
-        className="opt-checkbox mt-1"
+        className="form-field--checkbox mt-1"
         id="honor-code"
         checked={value}
         name="honor_code"

src/register/registrationFields/TermsOfService.jsx

@@ -16,7 +16,7 @@ const TermsOfService = (props) => {
   return (
     <div id="terms-of-service" className="micro text-muted">
       <Form.Checkbox
-        className="opt-checkbox mt-1"
+        className="form-field--checkbox mt-1"
         id="tos"
         checked={value}
         name="terms_of_service"

src/register/registrationFields/UsernameField.jsx

@@ -18,14 +18,14 @@ const UsernameField = (props) => {
   let iconButton = null;
   const suggestedUsernames = () => (
     <div className={className}>
-      <span className="text-gray username-suggestion-label">{formatMessage(messages['registration.username.suggestion.label'])}</span>
-      <div className="scroll-suggested-username">
+      <span className="text-gray username-suggestion--label">{formatMessage(messages['registration.username.suggestion.label'])}</span>
+      <div className="username-scroll-suggested--form-field">
         {usernameSuggestions.map((username, index) => (
           <Button
             type="button"
             name="username"
             variant="outline-dark"
-            className="username-suggestion data-hj-suppress"
+            className="username-suggestions--chip data-hj-suppress"
             autoComplete={props.autoComplete}
             key={`suggestion-${index.toString()}`}
             onClick={(e) => handleSuggestionClick(e, 'username', username)}
@@ -38,12 +38,12 @@ const UsernameField = (props) => {
     </div>
   );
   if (usernameSuggestions.length > 0 && errorMessage && props.value === ' ') {
-    className = 'suggested-username-with-error';
-    iconButton = <IconButton src={Close} iconAs={Icon} alt="Close" onClick={() => handleUsernameSuggestionClose()} variant="black" size="sm" className="suggested-username-close-button" />;
+    className = 'username-suggestions__error';
+    iconButton = <IconButton src={Close} iconAs={Icon} alt="Close" onClick={() => handleUsernameSuggestionClose()} variant="black" size="sm" className="username-suggestions__close__button" />;
     suggestedUsernameDiv = suggestedUsernames();
   } else if (usernameSuggestions.length > 0 && props.value === ' ') {
-    className = 'suggested-username';
-    iconButton = <IconButton src={Close} iconAs={Icon} alt="Close" onClick={() => handleUsernameSuggestionClose()} variant="black" size="sm" className="suggested-username-close-button" />;
+    className = 'username-suggestions';
+    iconButton = <IconButton src={Close} iconAs={Icon} alt="Close" onClick={() => handleUsernameSuggestionClose()} variant="black" size="sm" className="username-suggestions__close__button" />;
     suggestedUsernameDiv = suggestedUsernames();
   } else if (usernameSuggestions.length > 0 && errorMessage) {
     suggestedUsernameDiv = suggestedUsernames();

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(<IntlRegistrationPage {...props} />));
-      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(<IntlRegistrationPage {...props} />));
-      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(<IntlRegistrationPage {...props} />));
       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(<IntlRegistrationPage {...props} />));
       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(<IntlRegistrationPage {...props} />));
       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', () => {

src/sass/_forgot_password.scss

@@ -0,0 +1,3 @@
+.forgot-password--button {
+  min-width: 6rem;
+}

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;
+}

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;
 }