fix: update username suggestions placement (#1037)

Co-authored-by: Shahbaz Shabbir <shbzshbr@gmail.com>

package-lock.json

@@ -11,7 +11,7 @@
       "dependencies": {
         "@edx/brand": "npm:@edx/brand-openedx@1.2.0",
         "@edx/frontend-component-cookie-policy-banner": "2.2.2",
-        "@edx/frontend-platform": "4.0.2",
+        "@edx/frontend-platform": "4.2.0",
         "@edx/paragon": "20.30.1",
         "@fortawesome/fontawesome-svg-core": "6.2.1",
         "@fortawesome/free-brands-svg-icons": "6.2.1",
@@ -3501,9 +3501,9 @@
       }
     },
     "node_modules/@edx/frontend-platform": {
-      "version": "4.0.2",
+      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/@edx/frontend-platform/-/frontend-platform-4.0.2.tgz",
+      "resolved": "https://registry.npmjs.org/@edx/frontend-platform/-/frontend-platform-4.2.0.tgz",
-      "integrity": "sha512-Ee4ElMiozydlGv/71fMlxZntOPt23Pe69lcD9beWWDtH1Qe+vGGzBxfWnA3iH1X1zGDD23HxQYvm1bgafmuEDw==",
+      "integrity": "sha512-iDoFeccENQKBjqUgdjl5KSwBrjNEj8YW6Ual+6twcHHJUBg3yRoBEphwHIoRREcMgQjhdKVAdWj8eleh4JsEKA==",
       "dependencies": {
         "@cospired/i18n-iso-languages": "2.2.0",
         "@formatjs/intl-pluralrules": "4.3.3",
@@ -3526,13 +3526,14 @@
         "universal-cookie": "4.0.4"
       },
       "bin": {
+        "intl-imports.js": "i18n/scripts/intl-imports.js",
         "transifex-utils.js": "i18n/scripts/transifex-utils.js"
       },
       "peerDependencies": {
         "@edx/paragon": ">= 10.0.0 < 21.0.0",
         "prop-types": "^15.7.2",
-        "react": "^16.9.0",
+        "react": "^16.9.0 || ^17.0.0",
-        "react-dom": "^16.9.0",
+        "react-dom": "^16.9.0 || ^17.0.0",
         "react-redux": "^7.1.1",
         "react-router-dom": "^5.0.1",
         "redux": "^4.0.4"

package.json

@@ -34,7 +34,7 @@
   "dependencies": {
     "@edx/brand": "npm:@edx/brand-openedx@1.2.0",
     "@edx/frontend-component-cookie-policy-banner": "2.2.2",
-    "@edx/frontend-platform": "4.0.2",
+    "@edx/frontend-platform": "4.2.0",
     "@edx/paragon": "20.30.1",
     "@fortawesome/fontawesome-svg-core": "6.2.1",
     "@fortawesome/free-brands-svg-icons": "6.2.1",

src/register/registrationFields/UsernameField.jsx

@@ -42,8 +42,8 @@ const UsernameField = (props) => {
     iconButton = <IconButton src={Close} iconAs={Icon} alt="Close" onClick={() => handleUsernameSuggestionClose()} variant="black" size="sm" className="suggested-username-close-button" />;
     suggestedUsernameDiv = suggestedUsernames();
   } else if (usernameSuggestions.length > 0 && props.value === ' ') {
-    className = 'suggested-username';
+    className = 'username-suggestions d-flex align-items-center';
-    iconButton = <IconButton src={Close} iconAs={Icon} alt="Close" onClick={() => handleUsernameSuggestionClose()} variant="black" size="sm" className="suggested-username-close-button" />;
+    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

@@ -660,7 +660,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());
     });
 

src/sass/_registration.scss

@@ -1,3 +1,109 @@
 .register-stateful-button-width {
   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: -2.5rem;
+  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-scroll-suggested--form-field {
+  width: 20rem;
+  white-space: nowrap;
+  overflow-x: auto;
+  display: inline-flex;
+}
+
+@media (max-width: 372px) {
+  .username-scroll-suggested--form-field {
+    width: 11rem !important;
+  }
+  .username-suggestions__close__button {
+    right: 0.5rem;
+  }
+}
+
+@media (max-width: map-get($grid-breakpoints, "sm")) {
+  .username-scroll-suggested--form-field {
+    width: 15rem;
+  }
+  .username-suggestions__close__button {
+    right: 0.5rem;
+  }
+}