[pf-589] Add explanation link in profilv2

Include design adjustments and acceptance test
1024pix · May 13, 2019 · 105cee6 · 105cee6
1 parent b5873bf
commit 105cee6
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 18 deletions.
diff --git a/mon-pix/app/styles/components/_rounded-panel.scss b/mon-pix/app/styles/components/_rounded-panel.scss
@@ -46,7 +46,7 @@
   flex-direction: column;
   justify-content: space-between;
   width: 100%;
-  padding-bottom: 32px;
+  padding-bottom: 18px;
   border-bottom: 1px dashed $silver-grey;
 
   @include device-is('tablet') {
@@ -106,23 +106,10 @@
 
 // Text styles
 .rounded-panel-title {
-  font-weight: $font-light;
-  font-family: $font-open-sans;
-  color: $nero;
-  font-size: 1.8rem;
-  letter-spacing: 0.03rem;
-  line-height: 1.8rem;
-  text-transform: uppercase;
-
-  @include device-is('tablet') {
-    font-size: 1.3rem;
-  }
-}
-
-.rounded-panel-subtitle {
   font-weight: $font-light;
   font-family: $font-open-sans;
   color: $black;
   font-size: 3.2rem;
   line-height: 4.5rem;
+  margin-bottom: 26px;
 }
diff --git a/mon-pix/app/styles/pages/_profilv2.scss b/mon-pix/app/styles/pages/_profilv2.scss
@@ -19,3 +19,16 @@
     justify-content: flex-end;
   }
 }
+
+.profilv2-panel-header-information {
+  font-weight: $font-light;
+  font-family: $font-roboto;
+  color: $black;
+  font-size: 1.8rem;
+  line-height: 2.1rem;
+
+  &__link {
+    cursor: pointer;
+    color: $pix-blue;
+  }
+}
diff --git a/mon-pix/app/templates/profilv2.hbs b/mon-pix/app/templates/profilv2.hbs
@@ -8,11 +8,16 @@
     <div class="rounded-panel-header-with-components">
       <div class="rounded-panel-header__left-wrapper">
         <h1 class="rounded-panel-header-text__content rounded-panel-title">
-          votre profil
+          Vous avez 16 compétences à tester.<br>On se concentre et c'est partix !
         </h1>
 
-        <h2 class="rounded-panel-header-text__content rounded-panel-subtitle">
-          Vous avez 16 compétences à tester.<br>On se concentre et c'est partix !
+        <h2 class="rounded-panel-header-text__content profilv2-panel-header-information">
+          Le profil Pix évolue.
+          <a class="profilv2-panel-header-information__link"
+             href="https://pix.fr/actualites/votre-profil-evolue"
+             target="Actualité Pix">
+            Découvrez ce qui change.
+          </a>
         </h2>
       </div>
 

diff --git a/mon-pix/tests/acceptance/profilv2-test.js b/mon-pix/tests/acceptance/profilv2-test.js
@@ -46,6 +46,18 @@ describe('Acceptance | Profil v2 | Afficher profil v2', function() {
       expect(currentURL()).to.equal('/compte');
     });
 
+    it('should contains references to pix.fr/actualites/votre-profil-evolue', async function() {
+      // when
+      await visit('/profilv2');
+
+      // then
+      expect(document.querySelector('.profilv2-panel-header-information__link'))
+        .to.have.attr('href', 'https://pix.fr/actualites/votre-profil-evolue');
+
+      expect(document.querySelector('.profilv2-panel-header-information__link'))
+        .to.have.attr('target', 'Actualité Pix');
+    });
+
     it('should display pixscore', async function() {
       await visit('/profilv2');