From 0c375cc50c0dced34c4c06fc513ffe916acfeaf1 Mon Sep 17 00:00:00 2001
From: Blue <ahtesham-quraish@users.noreply.github.com>
Date: Mon, 22 May 2023 10:47:53 +0500
Subject: [PATCH] refactor: BEM convention for common components (#914)

Description:
Need to apply BEM comvention for common components

VAN-1425
---
 src/common-components/EnterpriseSSO.jsx       |  4 +-
 src/common-components/FormGroup.jsx           |  2 +-
 .../InstitutionLogistration.jsx               |  4 +-
 src/common-components/PasswordField.jsx       |  2 +-
 src/common-components/SocialAuthProviders.jsx |  4 +-
 .../SocialAuthProviders.test.jsx.snap         |  8 ++--
 .../ProgressiveProfiling.jsx                  |  6 +--
 .../tests/ProgressiveProfiling.test.jsx       |  2 +-
 src/recommendations/RecommendationCard.jsx    |  2 +-
 src/recommendations/RecommendationsList.jsx   |  4 +-
 src/sass/_login_page.scss                     |  3 ++
 src/sass/_progressive_profiling_page.scss     | 26 ++++++++++
 src/sass/_recommendations_page.scss           |  6 +--
 src/sass/_style.scss                          | 47 +++++--------------
 14 files changed, 64 insertions(+), 56 deletions(-)
 create mode 100644 src/sass/_login_page.scss
 create mode 100644 src/sass/_progressive_profiling_page.scss

diff --git a/src/common-components/EnterpriseSSO.jsx b/src/common-components/EnterpriseSSO.jsx
index a3361a38..4bfc5ae3 100644
--- a/src/common-components/EnterpriseSSO.jsx
+++ b/src/common-components/EnterpriseSSO.jsx
@@ -48,13 +48,13 @@ const EnterpriseSSO = (props) => {
               >
                 {tpaProvider.iconImage ? (
                   <div aria-hidden="true">
-                    <img className="icon-image" src={tpaProvider.iconImage} alt={`icon ${tpaProvider.name}`} />
+                    <img className="btn-tpa__image-icon" src={tpaProvider.iconImage} alt={`icon ${tpaProvider.name}`} />
                     <span className="pl-2" aria-hidden="true">{ tpaProvider.name }</span>
                   </div>
                 )
                   : (
                     <>
-                      <div className="font-container" aria-hidden="true">
+                      <div className="btn-tpa__font-container" aria-hidden="true">
                         {SUPPORTED_ICON_CLASSES.includes(tpaProvider.iconClass) ? (
                           <FontAwesomeIcon icon={['fab', tpaProvider.iconClass]} />)
                           : (
diff --git a/src/common-components/FormGroup.jsx b/src/common-components/FormGroup.jsx
index 0c597238..9aa91ad2 100644
--- a/src/common-components/FormGroup.jsx
+++ b/src/common-components/FormGroup.jsx
@@ -27,7 +27,7 @@ const FormGroup = (props) => {
         readOnly={props.readOnly}
         type={props.type}
         aria-invalid={props.errorMessage !== ''}
-        className="form-field"
+        className="form-group__form-field"
         autoComplete={props.autoComplete}
         spellCheck={props.spellCheck}
         name={props.name}
diff --git a/src/common-components/InstitutionLogistration.jsx b/src/common-components/InstitutionLogistration.jsx
index 41c56890..ae5863f1 100644
--- a/src/common-components/InstitutionLogistration.jsx
+++ b/src/common-components/InstitutionLogistration.jsx
@@ -42,7 +42,7 @@ const InstitutionLogistration = props => {
     <>
       <div className="d-flex justify-content-left mb-4 mt-2">
         <div className="flex-column">
-          <h4 className="mb-2 font-weight-bold institute-heading">
+          <h4 className="mb-2 font-weight-bold institutions__heading">
             {headingTitle}
           </h4>
           <p className="mb-2">
@@ -57,7 +57,7 @@ const InstitutionLogistration = props => {
               <tr key={provider} className="pgn__data-table-row">
                 <td>
                   <Hyperlink
-                    className="btn nav-item p-0 mb-1 secondary-provider-link"
+                    className="btn nav-item p-0 mb-1 institutions--provider-link"
                     destination={lmsBaseUrl + provider.loginUrl}
                   >
                     {provider.name}
diff --git a/src/common-components/PasswordField.jsx b/src/common-components/PasswordField.jsx
index 7334680d..efc69635 100644
--- a/src/common-components/PasswordField.jsx
+++ b/src/common-components/PasswordField.jsx
@@ -59,7 +59,7 @@ const PasswordField = (props) => {
       <OverlayTrigger key="tooltip" placement={placement} overlay={tooltip} show={showTooltip}>
         <Form.Control
           as="input"
-          className="form-field"
+          className="form-group__form-field"
           type={isPasswordHidden ? 'password' : 'text'}
           name={props.name}
           value={props.value}
diff --git a/src/common-components/SocialAuthProviders.jsx b/src/common-components/SocialAuthProviders.jsx
index 1ff73f1f..39bc92b2 100644
--- a/src/common-components/SocialAuthProviders.jsx
+++ b/src/common-components/SocialAuthProviders.jsx
@@ -32,11 +32,11 @@ const SocialAuthProviders = (props) => {
     >
       {provider.iconImage ? (
         <div aria-hidden="true">
-          <img className="icon-image" src={provider.iconImage} alt={`icon ${provider.name}`} />
+          <img className="btn-tpa__image-icon" src={provider.iconImage} alt={`icon ${provider.name}`} />
         </div>
       )
         : (
-          <div className="font-container" aria-hidden="true">
+          <div className="btn-tpa__font-container" aria-hidden="true">
             {SUPPORTED_ICON_CLASSES.includes(provider.iconClass) ? (
               <FontAwesomeIcon icon={['fab', provider.iconClass]} />)
               : (
diff --git a/src/common-components/tests/__snapshots__/SocialAuthProviders.test.jsx.snap b/src/common-components/tests/__snapshots__/SocialAuthProviders.test.jsx.snap
index 3176a864..e1696c4c 100644
--- a/src/common-components/tests/__snapshots__/SocialAuthProviders.test.jsx.snap
+++ b/src/common-components/tests/__snapshots__/SocialAuthProviders.test.jsx.snap
@@ -10,7 +10,7 @@ exports[`SocialAuthProviders should match social auth provider with default icon
 >
   <div
     aria-hidden="true"
-    className="font-container"
+    className="btn-tpa__font-container"
   >
     <span
       className="pgn__icon h-75"
@@ -57,7 +57,7 @@ exports[`SocialAuthProviders should match social auth provider with iconClass sn
 >
   <div
     aria-hidden="true"
-    className="font-container"
+    className="btn-tpa__font-container"
   >
     <svg
       aria-hidden="true"
@@ -106,7 +106,7 @@ Array [
     >
       <img
         alt="icon Apple"
-        className="icon-image"
+        className="btn-tpa__image-icon"
         src="https://edx.devstack.lms/logo.png"
       />
     </div>
@@ -135,7 +135,7 @@ Array [
     >
       <img
         alt="icon Facebook"
-        className="icon-image"
+        className="btn-tpa__image-icon"
         src="https://edx.devstack.lms/facebook-logo.png"
       />
     </div>
diff --git a/src/progressive-profiling/ProgressiveProfiling.jsx b/src/progressive-profiling/ProgressiveProfiling.jsx
index 3126d939..ce4b5c37 100644
--- a/src/progressive-profiling/ProgressiveProfiling.jsx
+++ b/src/progressive-profiling/ProgressiveProfiling.jsx
@@ -177,7 +177,7 @@ const ProgressiveProfiling = (props) => {
       ) : null}
       <div className="mw-xs m-4 pp-page-content">
         <div>
-          <h2 className="pp-page-heading text-primary">{formatMessage(messages['progressive.profiling.page.heading'])}</h2>
+          <h2 className="pp-page__heading text-primary">{formatMessage(messages['progressive.profiling.page.heading'])}</h2>
         </div>
         <hr className="border-light-700 mb-4" />
         {showError ? (
@@ -189,7 +189,7 @@ const ProgressiveProfiling = (props) => {
         <Form>
           {formFields}
           {(getConfig().AUTHN_PROGRESSIVE_PROFILING_SUPPORT_LINK) && (
-            <span className="progressive-profiling-support">
+            <span className="pp-page__support-link">
               <Hyperlink
                 isInline
                 variant="muted"
@@ -206,7 +206,7 @@ const ProgressiveProfiling = (props) => {
             <StatefulButton
               type="submit"
               variant="brand"
-              className="login-button-width"
+              className="pp-page__button-width"
               state={submitState}
               labels={{
                 default: showRecommendationsPage ? formatMessage(messages['optional.fields.next.button']) : formatMessage(messages['optional.fields.submit.button']),
diff --git a/src/progressive-profiling/tests/ProgressiveProfiling.test.jsx b/src/progressive-profiling/tests/ProgressiveProfiling.test.jsx
index fd6c2d58..a2f7d488 100644
--- a/src/progressive-profiling/tests/ProgressiveProfiling.test.jsx
+++ b/src/progressive-profiling/tests/ProgressiveProfiling.test.jsx
@@ -162,7 +162,7 @@ describe('ProgressiveProfilingTests', () => {
   it('should send analytic event for support link click', async () => {
     const progressiveProfilingPage = await getProgressiveProfilingPage();
 
-    progressiveProfilingPage.find('.progressive-profiling-support a[target="_blank"]').simulate('click');
+    progressiveProfilingPage.find('.pp-page__support-link a[target="_blank"]').simulate('click');
     expect(sendTrackEvent).toHaveBeenCalledWith('edx.bi.welcome.page.support.link.clicked');
   });
 
diff --git a/src/recommendations/RecommendationCard.jsx b/src/recommendations/RecommendationCard.jsx
index b80b154f..2dab3b64 100644
--- a/src/recommendations/RecommendationCard.jsx
+++ b/src/recommendations/RecommendationCard.jsx
@@ -55,7 +55,7 @@ const RecommendationCard = (props) => {
             subtitle={getOwners()}
           />
           <Card.Section />
-          <Card.Footer textElement={<small className="footer-text">Course</small>} />
+          <Card.Footer textElement={<small className="pgn__card__footer-text">Course</small>} />
         </Card>
       </Hyperlink>
     </div>
diff --git a/src/recommendations/RecommendationsList.jsx b/src/recommendations/RecommendationsList.jsx
index 61f49ce2..9b0b76f8 100644
--- a/src/recommendations/RecommendationsList.jsx
+++ b/src/recommendations/RecommendationsList.jsx
@@ -10,10 +10,10 @@ const RecommendationsList = (props) => {
 
   return (
     <Container id="course-recommendations" size="lg" className="recommendations-container">
-      <h2 className="text-sm-center mb-4 text-left recommendations-heading">
+      <h2 className="text-sm-center mb-4 text-left recommendations-container__heading">
         {title}
       </h2>
-      <div className="d-flex card-list">
+      <div className="d-flex recommendations-container__card-list">
         {
           recommendations.map((recommendation, idx) => (
             <RecommendationCard
diff --git a/src/sass/_login_page.scss b/src/sass/_login_page.scss
new file mode 100644
index 00000000..68f738df
--- /dev/null
+++ b/src/sass/_login_page.scss
@@ -0,0 +1,3 @@
+.login-button-width {
+    min-width: 6rem;
+}
diff --git a/src/sass/_progressive_profiling_page.scss b/src/sass/_progressive_profiling_page.scss
new file mode 100644
index 00000000..5d9c877d
--- /dev/null
+++ b/src/sass/_progressive_profiling_page.scss
@@ -0,0 +1,26 @@
+.pp-page__button-width{
+    min-width: 6rem;
+}
+.pp-page__support-link {
+    font-size: 0.875rem;
+    font-weight: 400;
+}
+  
+.pp-page__heading {
+    line-height: 1.75rem;
+    font-size: 1.375rem;
+    margin-bottom: 0.5rem;
+    font-weight: 700;
+  
+    @include media-breakpoint-down('md') {
+      line-height: 1.5rem;
+      font-size: 1.125rem;
+    }
+}
+@media (max-width: 464px) {
+    .pp-page__support-link {
+      font-size: 0.688rem;
+      font-weight: normal;
+      line-height: 0.938rem;
+    }
+}
diff --git a/src/sass/_recommendations_page.scss b/src/sass/_recommendations_page.scss
index e65b9c0f..9ae2e085 100644
--- a/src/sass/_recommendations_page.scss
+++ b/src/sass/_recommendations_page.scss
@@ -1,4 +1,4 @@
-.card-list {
+.recommendations-container__card-list {
   padding-left: 0.0625rem;
   padding-bottom: 0.125rem;
   @include media-breakpoint-down(xl) {
@@ -6,7 +6,7 @@
     overflow-y: hidden;
   }
 }
-.recommendations-heading {
+.recommendations-container__heading {
   overflow-wrap: break-word;
 }
 
@@ -59,7 +59,7 @@
     position: absolute;
     padding-bottom: 1rem !important;
   }
-  .footer-text{
+  .pgn__card__footer-text{
     font-weight: 400;
     font-size: 	0.75rem;
     line-height: 1.25rem;
diff --git a/src/sass/_style.scss b/src/sass/_style.scss
index 6af1fc84..1492ebc7 100644
--- a/src/sass/_style.scss
+++ b/src/sass/_style.scss
@@ -3,6 +3,8 @@
 @import "_registration.scss";
 @import "_recommendations_page.scss";
 @import "_reset_password.scss";
+@import "_progressive_profiling_page.scss";
+@import "_login_page.scss";
 //
 // ----------------------------
 // #COLORS
@@ -45,8 +47,8 @@ $elevation-level-2-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.15);
   min-width: 464px !important;
 }
 
-.login-button-width {
-  min-width: 6rem;
+.stateful-button-width {
+  width: 12rem;
 }
 
 .tpa-skeleton {
@@ -106,7 +108,7 @@ $elevation-level-2-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.15);
   height: 36px;
   color: $font-blue;
 
-  .icon-image {
+  .btn-tpa__image-icon{
     background-color: transparent;
     max-height: 24px;
     max-width: 24px;
@@ -121,14 +123,14 @@ $elevation-level-2-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.15);
   padding-left: 1rem;
   width: 14rem;
 
-  .icon-image {
+  .btn-tpa__image-icon {
     background-color: transparent;
     max-height: 24px;
     max-width: 24px;
   }
 }
 
-.font-container {
+.btn-tpa__font-container {
   background-color: $font-blue;
   color: $white;
   font-size: 11px;
@@ -157,7 +159,7 @@ $elevation-level-2-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.15);
   border-color: $google-blue;
   background-color: $google-blue;
 
-  .icon-image {
+  .ibtn-tpa__image-icon {
     margin-left: -6px;
     max-height: 34px;
     max-width: 34px;
@@ -178,7 +180,7 @@ $elevation-level-2-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.15);
   background-color: $apple-black;
   font-size: 16px;
 
-  .icon-image {
+  .ibtn-tpa__image-icon {
     max-height: 1.8em;
     max-width: 2.0em;
   }
@@ -346,7 +348,7 @@ select.form-control {
   border: 2px solid $accent-b;
 }
 
-.institute-heading {
+.institutions__heading {
   color: $primary-700;
 }
 
@@ -434,12 +436,12 @@ select.form-control {
   font-size: 0.75rem;
 }
 
-.form-field .form-control:focus ~ .pgn__form-control-floating-label .pgn__form-control-floating-label-content {
+.form-group__form-field .form-control:focus ~ .pgn__form-control-floating-label .pgn__form-control-floating-label-content {
     font-size: 16px;
     color: $primary-700;
 }
 
-.form-field .form-control:not([value='']):not(:focus) ~
+.form-group__form-field .form-control:not([value='']):not(:focus) ~
   .pgn__form-control-floating-label .pgn__form-control-floating-label-content {
   font-size: 16px;
 }
@@ -453,23 +455,6 @@ select.form-control {
   line-height: 1.25rem;
 }
 
-.progressive-profiling-support {
-  font-size: 0.875rem;
-  font-weight: 400;
-}
-
-.pp-page-heading {
-  line-height: 1.75rem;
-  font-size: 1.375rem;
-  margin-bottom: 0.5rem;
-  font-weight: 700;
-
-  @include media-breakpoint-down('md') {
-    line-height: 1.5rem;
-    font-size: 1.125rem;
-  }
-}
-
 @media (min-width: 1024px) {
   .mw-500 {
     width: 500px;
@@ -536,19 +521,13 @@ select.form-control {
       min-width: unset !important;
     }
   }
-
-  .progressive-profiling-support {
-    font-size: 0.688rem;
-    font-weight: normal;
-    line-height: 0.938rem;
-  }
 }
 
 .table-striped tbody tr:nth-of-type(odd) {
   background-color: $light-200;
 }
 
-.secondary-provider-link {
+.institutions--provider-link {
   font-weight: normal;
   font-size: 0.875rem;
   line-height: 1.5rem;