feat(site-header): Update EU site name styles - FRONT-3636 (#2547)

* feat(site-header): Update EU site name styles - FRONT-3636 * Fix EU mobile icon spacing * Review container mobile spacing * Fix container mobile spacing Co-authored-by: planctus <davidepuntoferrante@gmail.com> Co-authored-by: Romain Emery <emery.romain@gmail.com>
ec-europa · Jun 13, 2022 · bca19b5 · bca19b5
1 parent 5209e29
commit bca19b5
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 16 deletions.
diff --git a/src/implementations/twig/components/site-header/__snapshots__/site-header.test.js.snap b/src/implementations/twig/components/site-header/__snapshots__/site-header.test.js.snap
@@ -88,7 +88,7 @@ exports[`Site Header EC renders correctly 1`] = `
               >
                 <svg
                   aria-hidden="true"
-                  class="ecl-icon ecl-icon--s"
+                  class="ecl-icon ecl-icon--s ecl-site-header__icon"
                   focusable="false"
                 >
                   <use
@@ -823,7 +823,7 @@ exports[`Site Header EC renders correctly when logged in 1`] = `
               >
                 <svg
                   aria-hidden="true"
-                  class="ecl-icon ecl-icon--s"
+                  class="ecl-icon ecl-icon--s ecl-site-header__icon"
                   focusable="false"
                 >
                   <use
@@ -1528,7 +1528,7 @@ exports[`Site Header EC renders correctly with extra attributes 1`] = `
               >
                 <svg
                   aria-hidden="true"
-                  class="ecl-icon ecl-icon--s"
+                  class="ecl-icon ecl-icon--s ecl-site-header__icon"
                   focusable="false"
                 >
                   <use
@@ -2231,7 +2231,7 @@ exports[`Site Header EC renders correctly with extra class names 1`] = `
               >
                 <svg
                   aria-hidden="true"
-                  class="ecl-icon ecl-icon--s"
+                  class="ecl-icon ecl-icon--s ecl-site-header__icon"
                   focusable="false"
                 >
                   <use
@@ -2940,7 +2940,7 @@ exports[`Site Header EU renders correctly 1`] = `
               >
                 <svg
                   aria-hidden="true"
-                  class="ecl-icon ecl-icon--s"
+                  class="ecl-icon ecl-icon--s ecl-site-header__icon"
                   focusable="false"
                 >
                   <use

diff --git a/src/implementations/twig/components/site-header/site-header.html.twig b/src/implementations/twig/components/site-header/site-header.html.twig
@@ -335,7 +335,8 @@
                 extra_attributes: [
                 { name: 'aria-hidden', value: true }
                 ],
-              }
+              },
+              extra_classes: 'ecl-site-header__icon',
             } only -%}
             {{- _search_toggle.label -}}
             </a>

diff --git a/src/implementations/vanilla/components/site-header/site-header-eu.scss b/src/implementations/vanilla/components/site-header/site-header-eu.scss
@@ -172,10 +172,15 @@ $_search-width-xl: 31.5rem;
   margin-top: map.get(theme.$spacing, 'm');
 }
 
+.ecl-site-header__icon {
+  margin-bottom: map.get(theme.$spacing, '2xs');
+}
+
 .ecl-site-header__language-icon {
   align-items: center;
   display: flex;
   justify-content: center;
+  margin-bottom: map.get(theme.$spacing, '2xs');
   position: relative;
 
   .ecl-site-header__icon {
@@ -228,11 +233,6 @@ $_search-width-xl: 31.5rem;
     flex-grow: 0;
   }
 
-  .ecl-site-header__container {
-    padding-bottom: map.get(theme.$spacing, 's');
-    padding-top: map.get(theme.$spacing, 's');
-  }
-
   .ecl-site-header__logo-image-mobile {
     height: $_logo-height-sm;
     max-height: 100%;
@@ -254,7 +254,7 @@ $_search-width-xl: 31.5rem;
 @include breakpoints.up('l') {
   .ecl-site-header {
     .ecl-site-header__cta {
-      align-self: start;
+      align-self: center;
       margin: map.get(theme.$spacing, 'xs') 0;
 
       &:only-child {
@@ -273,10 +273,6 @@ $_search-width-xl: 31.5rem;
     }
   }
 
-  .ecl-site-header__header {
-    box-shadow: 0 0 6px rgb(9 49 142 / 0.2);
-  }
-
   .ecl-site-header__banner {
     background: transparent;
     display: block;
@@ -285,13 +281,25 @@ $_search-width-xl: 31.5rem;
 
     .ecl-container {
       display: flex;
+      position: relative;
+
+      &:not(:empty)::before {
+        border-top: 2px solid map.get(theme.$color, 'blue-20');
+        content: '';
+        left: map.get(theme.$spacing, 'm');
+        position: absolute;
+        right: map.get(theme.$spacing, 'm');
+        top: -1px;
+      }
     }
   }
 
   .ecl-site-header__site-name {
     align-self: center;
     color: map.get(theme.$color, 'grey-80');
     flex-grow: 1;
+    font: map.get(theme.$font, '4xl');
+    font-weight: map.get(theme.$font-weight, 'bold');
     margin-inline-end: 0;
     padding: map.get(theme.$spacing, 'm') 0;
   }
@@ -343,8 +351,11 @@ $_search-width-xl: 31.5rem;
 
   .ecl-site-header__login-toggle,
   .ecl-site-header__language-icon {
+    margin-bottom: 0;
+
     .ecl-site-header__icon {
       height: map.get(theme.$icon, 'm');
+      margin-bottom: 0;
       margin-inline-end: map.get(theme.$spacing, 'xs');
       width: map.get(theme.$icon, 'm');
     }