fix(site-header): fix call to action link on EU - FRONT-3414 (#2262)

* fix cta on EU * fix css Co-authored-by: Alexis Gaillard <a@bypopcorn.com>
ec-europa · Nov 23, 2021 · 80b3cef · 80b3cef · github-actions · Nov 23, 2021
1 parent 80ea371
commit 80b3cef
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 18 deletions.
diff --git a/...mplementations/twig/components/site-header-standardised/site-header-standardised.story.js b/...mplementations/twig/components/site-header-standardised/site-header-standardised.story.js
@@ -36,8 +36,8 @@ const getArgs = (data) => {
   };
   if (system === 'ec') {
     args.banner_top = true;
-    args.cta_link = false;
   }
+  args.cta_link = false;
 
   return args;
 };
@@ -80,19 +80,19 @@ const getArgTypes = () => {
         defaultValue: { summary: '{}' },
       },
     };
-    argTypes.cta_link = {
-      name: 'call to action',
-      type: { name: 'boolean' },
-      description: 'Call to action link (optional)',
-      table: {
-        type: { summary: 'boolean' },
-        defaultValue: { summary: false },
-      },
-      control: {
-        type: 'boolean',
-      },
-    };
   }
+  argTypes.cta_link = {
+    name: 'call to action',
+    type: { name: 'boolean' },
+    description: 'Call to action link (optional)',
+    table: {
+      type: { summary: 'boolean' },
+      defaultValue: { summary: false },
+    },
+    control: {
+      type: 'boolean',
+    },
+  };
   argTypes.menu = {
     type: 'boolean',
     description: 'Toggle menu visibility',

diff --git a/...lementations/vanilla/components/site-header-standardised/site-header-standardised-ec.scss b/...lementations/vanilla/components/site-header-standardised/site-header-standardised-ec.scss
@@ -28,15 +28,16 @@ $_search-width-xl: 31.5rem;
     bottom: 0;
     padding: 0;
     position: absolute;
-    width: 100%;
+    right: 0;
+    width: 50%;
   }
 
   .ecl-menu__open,
   .ecl-menu__closed {
     margin-bottom: 3px;
   }
 
-  .ecl-link--cta {
+  .ecl-standardised-menu__cta {
     margin-top: map.get(theme.$spacing, 's');
     width: max-content;
   }
@@ -238,14 +239,15 @@ $_search-width-xl: 31.5rem;
 
 @include breakpoints.up('l') {
   .ecl-site-header-standardised {
-    .ecl-link--cta {
+    .ecl-standardised-menu__cta {
       align-self: start;
-      margin: map.get(theme.$spacing, 'l') 0;
+      margin: map.get(theme.$spacing, 'm') 0;
     }
 
     .ecl-menu {
       background-color: map.get(theme.$color, 'blue-100');
       position: static;
+      width: 100%;
     }
   }
 

diff --git a/...lementations/vanilla/components/site-header-standardised/site-header-standardised-eu.scss b/...lementations/vanilla/components/site-header-standardised/site-header-standardised-eu.scss
@@ -26,7 +26,8 @@ $_search-width-xl: 31.5rem;
     bottom: 0;
     padding: 0;
     position: absolute;
-    width: 100%;
+    right: 0;
+    width: 50%;
   }
 
   .ecl-menu__open,
@@ -37,6 +38,11 @@ $_search-width-xl: 31.5rem;
   &:not([data-ecl-has-menu='true']) {
     box-shadow: 0 0 6px 0 rgba(9, 49, 142, 0.2);
   }
+
+  .ecl-standardised-menu__cta {
+    margin-bottom: map.get(theme.$spacing, 'xs');
+    width: max-content;
+  }
 }
 
 .ecl-site-header-standardised__container {
@@ -236,13 +242,19 @@ $_search-width-xl: 31.5rem;
 
 @include breakpoints.up('l') {
   .ecl-site-header-standardised {
+    .ecl-standardised-menu__cta {
+      align-self: start;
+      margin: map.get(theme.$spacing, 'xs') 0;
+    }
+
     .ecl-menu {
       background: linear-gradient(
         90deg,
         map.get(theme.$color, 'blue-140'),
         map.get(theme.$color, 'blue-100')
       );
       position: static;
+      width: 100%;
     }
   }