(mon-pix): BEM refacto

1024pix · Jun 19, 2024 · 09d36a1 · 09d36a1
1 parent e161dc1
commit 09d36a1
Show file tree

Hide file tree

Showing 3 changed files with 127 additions and 94 deletions.
diff --git a/mon-pix/app/components/certification-instructions/steps.hbs b/mon-pix/app/components/certification-instructions/steps.hbs
@@ -1,34 +1,32 @@
-<h2 class="certification-instructions__title">{{this.title}}</h2>
+<h2 class="instructions-step__title">{{this.title}}</h2>
 
-<div class="certification-instructions__content">
-  {{#if (eq this.pageId 1)}}
-    <CertificationInstructions::StepOne />
-  {{/if}}
-  {{#if (eq this.pageId 2)}}
-    <CertificationInstructions::StepTwo />
-  {{/if}}
-  {{#if (eq this.pageId 3)}}
-    <CertificationInstructions::StepThree />
-  {{/if}}
-  {{#if (eq this.pageId 4)}}
-    <CertificationInstructions::StepFour />
-  {{/if}}
-  {{#if (eq this.pageId 5)}}
-    <CertificationInstructions::StepFive @enableNextButton={{this.enableNextButton}} />
-  {{/if}}
-</div>
+{{#if (eq this.pageId 1)}}
+  <CertificationInstructions::StepOne />
+{{/if}}
+{{#if (eq this.pageId 2)}}
+  <CertificationInstructions::StepTwo />
+{{/if}}
+{{#if (eq this.pageId 3)}}
+  <CertificationInstructions::StepThree />
+{{/if}}
+{{#if (eq this.pageId 4)}}
+  <CertificationInstructions::StepFour />
+{{/if}}
+{{#if (eq this.pageId 5)}}
+  <CertificationInstructions::StepFive @enableNextButton={{this.enableNextButton}} />
+{{/if}}
 
-<footer class="certification-instructions__footer">
-  <div class="certification-instructions-footer__dots">
+<footer class="instructions-footer">
+  <div>
     {{#each this.paging as |page-class|}}
       <img
-        class="certification-instructions-footer-dots__dot {{page-class}}"
+        class="instructions-footer__dot {{page-class}}"
         src="/images/illustrations/certification-instructions-steps/ellipse.svg"
         alt=""
       />
     {{/each}}
   </div>
-  <div class="certification-instructions-footer__buttons">
+  <div class="instructions-footer__buttons">
     {{#if this.showPreviousButton}}
       <PixButton
         @size="large"

diff --git a/mon-pix/app/styles/pages/_certification-instructions.scss b/mon-pix/app/styles/pages/_certification-instructions.scss
@@ -2,116 +2,151 @@
   min-height: 100vh;
   padding: 32px 80px;
   background: $pix-primary-certif-gradient;
+}
 
-  &__title {
-    @extend %pix-title-m;
-  }
-
-  &__text {
-    &--bold {
-      font-weight: var(--pix-font-bold);
-    }
-
-    &--light {
-      font-size: 0.875rem;
-    }
-  }
-
-  &__content {
-    display: flex;
-    gap: var(--pix-spacing-8x);
+.instructions-header {
+  display: flex;
+  gap: 16px;
+  align-items: center;
+  justify-content: start;
+  margin-bottom: 80px;
+  font-size: 1.125rem;
 
-    &:last-child {
-      flex-direction: column;
-    }
+  &__logo {
+    max-width: 60px;
   }
 
-  &__question {
-    &--bold {
-      @extend %pix-title-xs;
-
-      font-weight: 700;
-      line-height: 2.1;
-    }
+  &__separator {
+    width: 1px;
+    height: 32px;
+    background-color: var(--pix-neutral-0);
   }
 
-  &__header {
-    display: flex;
-    gap: 16px;
-    align-items: center;
-    justify-content: start;
-    margin-bottom: 110px;
-    font-size: 1.125rem;
+  &__title {
+    color: var(--pix-neutral-0);
   }
+}
 
-  &__card {
+.instructions-step {
     display: flex;
     flex-direction: column;
     gap: var(--pix-spacing-8x);
     max-width: 846px;
     margin: auto;
     padding: 24px;
     border-radius: 24px;
+
+  &__title {
+    @extend %pix-title-m;
   }
+}
 
-  &__footer {
+.instructions-footer {
+  display: flex;
+  flex-flow: column wrap;
+  gap: var(--pix-spacing-8x);
+  align-items: center;
+  justify-content: start;
+
+  &__buttons {
     display: flex;
-    flex-flow: column wrap;
-    gap: var(--pix-spacing-8x);
-    align-items: center;
-    justify-content: start;
+    gap: 32px;
   }
 }
 
-.certification-instructions-header {
-  &__logo {
-    max-width: 60px;
+.instructions-content {
+  display: flex;
+  flex-direction: column;
+
+  &__title {
+    &--bold {
+      @extend %pix-title-xs;
+
+      padding-bottom: var(--pix-spacing-3x);
+      font-weight: 700;
+      line-height: 2.1;
+    }
   }
 
-  &__separator {
-    width: 1px;
-    height: 32px;
-    background-color: var(--pix-neutral-0);
+  &__text {
+    &--light {
+      font-size: 0.875rem;
+    }
   }
 
-  &__title {
-    color: var(--pix-neutral-0);
+  &__paragraph {
+    padding-bottom: var(--pix-spacing-4x);
+
+    &:last-child {
+      padding-bottom: 0;
+    }
+  }
+
+  &__image {
+    min-width: 120px;
+    min-height: 120px;
   }
-}
 
-.certification-instructions-content {
   &__images {
     display: flex;
     flex-direction: column;
     justify-content: space-between;
+    padding-top: var(--pix-spacing-4x);
   }
+}
 
-  &__size {
-    min-width: 120px;
-    min-height: 120px;
-  }
+.instructions-content-with-images {
+  display: flex;
+  gap: var(--pix-spacing-8x);
+
+  &__legend {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+
+    &--bold {
+      @extend %pix-title-xs;
+
+      font-weight: 700;
+      line-height: 2.1;
+    }
 
-  &__list {
-    li {
-      margin-left: var(--pix-spacing-4x);
-      list-style: disc;
+    p {
+      display: flex;
+      flex-direction: column;
+      text-align: center;
     }
   }
 }
 
-.certification-instructions-content-images {
-  &__image-text {
-    text-align: center;
+.instructions-content-step-two {
+  display: flex;
+  flex-direction: column;
+
+  &__paragraph {
+    padding-bottom: var(--pix-spacing-8x);
   }
 }
 
-.certification-instructions-footer {
-  &__buttons {
-    display: flex;
-    gap: 32px;
+.instructions-content-list {
+  padding-bottom: var(--pix-spacing-4x);
+
+  li {
+    margin-left: var(--pix-spacing-4x);
+    list-style: disc;
+  }
+}
+
+.instructions-description-list {
+  display: flex;
+  flex-direction: column;
+  padding-bottom: var(--pix-spacing-3x);
+
+  &__first-description {
+    margin-bottom: var(--pix-spacing-8x);
   }
 }
 
-.certification-instructions-footer-dots__dot.active {
+.instructions-footer__dot.active {
     filter: brightness(0) saturate(100%) invert(17%) sepia(28%) saturate(7283%) hue-rotate(246deg) brightness(90%) contrast(94%);
 }
diff --git a/mon-pix/app/templates/authenticated/certifications/information.hbs b/mon-pix/app/templates/authenticated/certifications/information.hbs
@@ -1,11 +1,11 @@
 {{page-title (t "pages.certification-instructions.title")}}
 <main class="certification-instructions">
-  <header class="certification-instructions__header">
-    <img class="certification-instructions-header__logo" src="/images/pix-logo-blanc.svg" alt="" />
-    <span class="certification-instructions-header__separator"></span>
-    <h1 class="certification-instructions-header__title">{{t "pages.certification-instructions.title"}}</h1>
+  <header class="instructions-header">
+    <img class="instructions-header__logo" src="/images/pix-logo-blanc.svg" alt="" />
+    <span class="instructions-header__separator"></span>
+    <h1 class="instructions-header__title">{{t "pages.certification-instructions.title"}}</h1>
   </header>
-  <PixBlock @shadow="heavy" class="certification-instructions__card">
+  <PixBlock @shadow="heavy" class="instructions-step">
     <CertificationInstructions::Steps @candidateId={{this.model.id}} />
   </PixBlock>
 </main>