refactor: BEM convention for common components (#914)

Description: Need to apply BEM comvention for common components VAN-1425
2023-05-22 10:47:53 +05:00
parent 50072887d0
commit 0c375cc50c
14 changed files with 64 additions and 56 deletions
--- 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]} />)
                          : (
--- 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}
--- 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}
--- 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}
--- 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]} />)
              : (
--- 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>
--- 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']),
--- 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');
  });

--- 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>
--- 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
--- a/src/sass/_login_page.scss
+++ b/src/sass/_login_page.scss
@@ -0,0 +1,3 @@
+.login-button-width {
+    min-width: 6rem;
+}
--- a/src/sass/_progressive_profiling_page.scss
+++ 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;
+    }
+}
--- 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;
--- 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;