From 7a838f1494e73ae480b6f4fa067c91ba1024d977 Mon Sep 17 00:00:00 2001
From: planctus <davidepuntoferrante@gmail.com>
Date: Thu, 1 Aug 2024 11:01:58 +0300
Subject: [PATCH] feat(mega-menu): Fixing styles in EU, adding demo in site
 header - FRONT-4541 (#3526)

---
 .../__snapshots__/mega-menu.test.js.snap      | 16 +++----
 .../components/mega-menu/mega-menu.html.twig  |  2 +-
 .../site-header/eu-site-header.story.js       | 20 ++++++--
 .../components/mega-menu/mega-menu.scss       | 47 ++++++++++++-------
 .../site-header/site-header-ec.scss           |  4 ++
 .../site-header/site-header-eu.scss           | 40 +++++++++++++---
 src/themes/ec/variables/_mega-menu.scss       |  2 +
 src/themes/eu/variables/_mega-menu.scss       | 21 +++++----
 src/themes/eu/variables/_menu.scss            |  2 +-
 .../site-wide/site-header/docs/code.mdx       |  4 +-
 .../site-wide/site-header/docs/code.mdx       |  2 +-
 11 files changed, 110 insertions(+), 50 deletions(-)

diff --git a/src/implementations/twig/components/mega-menu/__snapshots__/mega-menu.test.js.snap b/src/implementations/twig/components/mega-menu/__snapshots__/mega-menu.test.js.snap
index 25ca65eb841..1292939894e 100644
--- a/src/implementations/twig/components/mega-menu/__snapshots__/mega-menu.test.js.snap
+++ b/src/implementations/twig/components/mega-menu/__snapshots__/mega-menu.test.js.snap
@@ -65,7 +65,7 @@ exports[`Mega Menu Default renders correctly 1`] = `
           class="ecl-mega-menu__inner-header"
         >
           <button
-            class="ecl-button ecl-button--ghost ecl-mega-menu__back"
+            class="ecl-button ecl-button--tertiary ecl-mega-menu__back"
             data-ecl-mega-menu-back=""
             type="submit"
           >
@@ -1137,7 +1137,7 @@ exports[`Mega Menu Default renders correctly with external items in the first le
           class="ecl-mega-menu__inner-header"
         >
           <button
-            class="ecl-button ecl-button--ghost ecl-mega-menu__back"
+            class="ecl-button ecl-button--tertiary ecl-mega-menu__back"
             data-ecl-mega-menu-back=""
             type="submit"
           >
@@ -2211,7 +2211,7 @@ exports[`Mega Menu Default renders correctly with extra attributes 1`] = `
           class="ecl-mega-menu__inner-header"
         >
           <button
-            class="ecl-button ecl-button--ghost ecl-mega-menu__back"
+            class="ecl-button ecl-button--tertiary ecl-mega-menu__back"
             data-ecl-mega-menu-back=""
             type="submit"
           >
@@ -3283,7 +3283,7 @@ exports[`Mega Menu Default renders correctly with extra attributes for the featu
           class="ecl-mega-menu__inner-header"
         >
           <button
-            class="ecl-button ecl-button--ghost ecl-mega-menu__back"
+            class="ecl-button ecl-button--tertiary ecl-mega-menu__back"
             data-ecl-mega-menu-back=""
             type="submit"
           >
@@ -4356,7 +4356,7 @@ exports[`Mega Menu Default renders correctly with extra attributes for the fist
           class="ecl-mega-menu__inner-header"
         >
           <button
-            class="ecl-button ecl-button--ghost ecl-mega-menu__back"
+            class="ecl-button ecl-button--tertiary ecl-mega-menu__back"
             data-ecl-mega-menu-back=""
             type="submit"
           >
@@ -5429,7 +5429,7 @@ exports[`Mega Menu Default renders correctly with extra attributes for the secon
           class="ecl-mega-menu__inner-header"
         >
           <button
-            class="ecl-button ecl-button--ghost ecl-mega-menu__back"
+            class="ecl-button ecl-button--tertiary ecl-mega-menu__back"
             data-ecl-mega-menu-back=""
             type="submit"
           >
@@ -6502,7 +6502,7 @@ exports[`Mega Menu Default renders correctly with extra attributes for the see a
           class="ecl-mega-menu__inner-header"
         >
           <button
-            class="ecl-button ecl-button--ghost ecl-mega-menu__back"
+            class="ecl-button ecl-button--tertiary ecl-mega-menu__back"
             data-ecl-mega-menu-back=""
             type="submit"
           >
@@ -7574,7 +7574,7 @@ exports[`Mega Menu Default renders correctly with extra class names 1`] = `
           class="ecl-mega-menu__inner-header"
         >
           <button
-            class="ecl-button ecl-button--ghost ecl-mega-menu__back"
+            class="ecl-button ecl-button--tertiary ecl-mega-menu__back"
             data-ecl-mega-menu-back=""
             type="submit"
           >
diff --git a/src/implementations/twig/components/mega-menu/mega-menu.html.twig b/src/implementations/twig/components/mega-menu/mega-menu.html.twig
index 1a803a9d857..1f1b897f737 100644
--- a/src/implementations/twig/components/mega-menu/mega-menu.html.twig
+++ b/src/implementations/twig/components/mega-menu/mega-menu.html.twig
@@ -130,7 +130,7 @@
         {%- if _back_label is not empty -%}
           {% include '@ecl/button/button.html.twig' with {
             type: 'submit',
-            variant: 'ghost',
+            variant: 'tertiary',
             label: _back_label,
             icon: {
               path: _icon_path,
diff --git a/src/implementations/twig/components/site-header/eu-site-header.story.js b/src/implementations/twig/components/site-header/eu-site-header.story.js
index 4d71365968e..97fa2bf95ff 100644
--- a/src/implementations/twig/components/site-header/eu-site-header.story.js
+++ b/src/implementations/twig/components/site-header/eu-site-header.story.js
@@ -6,6 +6,7 @@ import withCode from '@ecl/storybook-addon-code';
 import dataFullEU from '@ecl/specs-component-site-header/demo/data--eu';
 import enLogoDesktopEU from '@ecl/resources-eu-logo/dist/standard-version/positive/logo-eu--en.svg';
 import enLogoMobileEU from '@ecl/resources-eu-logo/dist/condensed-version/positive/logo-eu--en.svg';
+import enDataMegaMenu from '@ecl/specs-component-mega-menu/demo/data';
 import enDataMenu from '@ecl/specs-component-menu/demo/data--eu';
 import siteHeader from './site-header.html.twig';
 import notes from './README.md';
@@ -14,6 +15,7 @@ import notes from './README.md';
 const dataFull = { ...dataFullEU };
 const clonedDataFull = { ...dataFull };
 const enMenu = { ...enDataMenu };
+const enMegaMenu = { ...enDataMegaMenu };
 
 // Core
 const dataCore = JSON.parse(JSON.stringify(dataFull));
@@ -47,7 +49,7 @@ const getArgs = (data) => {
     defaultArgs.show_banner_top = false;
   }
   if (data.has_menu) {
-    defaultArgs.show_menu = true;
+    defaultArgs.show_menu = 'menu';
   }
   if (data.cta_link) {
     defaultArgs.show_cta_link = false;
@@ -111,8 +113,9 @@ const getArgTypes = (data) => {
   if (data.has_menu) {
     argTypes.show_menu = {
       name: 'menu',
-      type: { name: 'boolean' },
-      description: 'Show the menu',
+      control: { type: 'radio' },
+      description: 'Show the menu, the mega menu or none of the two',
+      options: ['none', 'menu', 'mega-menu'],
       table: {
         category: 'Optional',
       },
@@ -216,10 +219,17 @@ const prepareData = (data, args) => {
     data.login_toggle = clonedDataFull.login_toggle;
   }
 
-  if (!args.show_menu) {
+  if (args.show_menu === 'none' && (data.menu || data.mega_menu)) {
     delete data.menu;
-  } else if (args.show_menu && !data.menu) {
+    delete data.mega_menu;
+  }
+  if (args.show_menu === 'menu' && !data.menu) {
     data.menu = enMenu;
+    delete data.mega_menu;
+  }
+  if (args.show_menu === 'mega-menu' && !data.mega_menu) {
+    data.mega_menu = enMegaMenu;
+    delete data.menu;
   }
 
   if (!args.show_language_selector) {
diff --git a/src/implementations/vanilla/components/mega-menu/mega-menu.scss b/src/implementations/vanilla/components/mega-menu/mega-menu.scss
index b2ef90a9aa6..1b85f50b03c 100644
--- a/src/implementations/vanilla/components/mega-menu/mega-menu.scss
+++ b/src/implementations/vanilla/components/mega-menu/mega-menu.scss
@@ -48,7 +48,6 @@ $mega-menu: null !default;
 .ecl-mega-menu__open {
   align-items: center;
   align-self: center;
-  border-radius: map.get($mega-menu, 'global', 'border-radius');
   box-sizing: border-box;
   cursor: pointer;
   color: currentcolor;
@@ -222,7 +221,6 @@ $mega-menu: null !default;
 }
 
 .ecl-mega-menu__back {
-  border-radius: map.get($mega-menu, 'global', 'border-radius');
   cursor: pointer;
   color: currentcolor;
   display: none;
@@ -362,6 +360,7 @@ $mega-menu: null !default;
   background: transparent;
   border-bottom: 1px solid
     map.get($mega-menu, 'desktop', 'sublink-current-background');
+  border-radius: 0;
   box-sizing: border-box;
   color: map.get($mega-menu, 'mobile', 'item-color');
   display: inline-flex;
@@ -376,6 +375,7 @@ $mega-menu: null !default;
 
   &:hover {
     background: transparent;
+    box-shadow: none;
     border-color: map.get($mega-menu, 'desktop', 'sublink-current-background');
     color: map.get($mega-menu, 'mobile', 'item-color-hover');
   }
@@ -391,6 +391,7 @@ $mega-menu: null !default;
   &:focus-visible {
     background: transparent;
     border-color: transparent;
+    border-radius: 0px;
     color: var(--c-d);
     outline-color: var(--c-p);
     outline-offset: -2px;
@@ -412,12 +413,16 @@ $mega-menu: null !default;
   }
 }
 
-.ecl-mega-menu--rtl .ecl-icon--flip-horizontal {
-  transform: rotate(0);
-}
-
 .ecl-mega-menu__featured-list__item .ecl-link {
   border-bottom: 1px solid map.get($mega-menu, 'mobile', 'featured-link-border');
+
+  &:hover {
+    border-color: map.get($mega-menu, 'mobile', 'featured-link-border');
+  }
+}
+
+.ecl-mega-menu--rtl .ecl-icon--flip-horizontal {
+  transform: rotate(0);
 }
 
 .ecl-mega-menu__sublink.ecl-mega-menu__parent-link {
@@ -478,6 +483,10 @@ $mega-menu: null !default;
     text-underline-offset: var(--s-2xs);
   }
 
+  &:focus-visible {
+    border-radius: 0;
+  }
+
   .ecl-mega-menu__info-content + & {
     margin-top: var(--s-xs);
   }
@@ -538,10 +547,11 @@ $mega-menu: null !default;
     }
 
     .ecl-mega-menu__link {
-      background: var(--c-br);
+      background: map.get($mega-menu, 'desktop', 'item-background');
       box-sizing: border-box;
       box-shadow: none;
       border-bottom: none;
+      border-radius: 0;
       color: map.get($mega-menu, 'desktop', 'item-color');
       display: inline-flex;
       font: var(--f-m);
@@ -572,7 +582,7 @@ $mega-menu: null !default;
         color: map.get($mega-menu, 'desktop', 'item-color-focus');
         outline-color: map.get($theme, 'color', 'white');
         outline-offset: -8px;
-        outline-width: 2px;
+        outline-width: map.get($mega-menu, 'desktop', 'outline-width');
       }
     }
 
@@ -589,7 +599,6 @@ $mega-menu: null !default;
     .ecl-mega-menu__item--has-children,
     .ecl-mega-menu__item--has-container {
       .ecl-mega-menu__link .ecl-icon {
-        margin-top: var(--s-2xs);
         height: calc(var(--s-xs) + 2px);
         transform: rotate(180deg);
         width: calc(var(--s-xs) + 2px);
@@ -792,6 +801,7 @@ $mega-menu: null !default;
   box-sizing: border-box;
   border-bottom: 1.5px solid
     map.get($mega-menu, 'desktop', 'sublink-current-background');
+  border-radius: 0;
   color: map.get($mega-menu, 'mobile', 'item-color');
   padding: map.get($mega-menu, 'mobile', 'subitem-padding');
   position: relative;
@@ -824,6 +834,7 @@ $mega-menu: null !default;
   &:hover {
     background: transparent;
     border-color: map.get($mega-menu, 'desktop', 'sublink-current-background');
+    box-shadow: none;
     color: map.get($mega-menu, 'mobile', 'item-color-hover');
   }
 
@@ -1075,10 +1086,6 @@ $mega-menu: null !default;
       display: flex;
     }
 
-    .ecl-mega-menu__link {
-      text-align: center;
-    }
-
     .ecl-mega-menu__item.ecl-mega-menu__item--expanded
       > .ecl-mega-menu__wrapper
       > .ecl-container,
@@ -1148,9 +1155,9 @@ $mega-menu: null !default;
 
         .ecl-link {
           border-bottom: 1px solid transparent;
-          margin: 0 0 0 var(--s-s);
-          padding: calc(var(--s-xs) + 2px) 0;
-          outline-offset: 0;
+          margin: calc(var(--s-xs) + 2px) 0 calc(var(--s-xs) + 2px) var(--s-s);
+          padding: 0;
+          outline-offset: 2px;
 
           .ecl-link__icon {
             margin-inline-start: var(--s-xs);
@@ -1248,6 +1255,14 @@ $mega-menu: null !default;
         width: 100%;
       }
 
+      &:hover {
+        background-color: map.get(
+          $mega-menu,
+          'desktop',
+          'sublink-current-background'
+        );
+      }
+
       &:focus-visible {
         border-color: transparent;
         color: var(--c-d);
diff --git a/src/implementations/vanilla/components/site-header/site-header-ec.scss b/src/implementations/vanilla/components/site-header/site-header-ec.scss
index eb7bee2268a..d4a8542d963 100644
--- a/src/implementations/vanilla/components/site-header/site-header-ec.scss
+++ b/src/implementations/vanilla/components/site-header/site-header-ec.scss
@@ -385,6 +385,10 @@ $menu-top: calc(44px + 2 * var(--s-xs));
     padding-top: var(--s-2xl);
   }
 
+  .ecl-site-header__header {
+    box-shadow: none;
+  }
+
   .ecl-site-header__site-name {
     align-self: center;
     flex-grow: 1;
diff --git a/src/implementations/vanilla/components/site-header/site-header-eu.scss b/src/implementations/vanilla/components/site-header/site-header-eu.scss
index d1207652a1e..a922e627cf9 100644
--- a/src/implementations/vanilla/components/site-header/site-header-eu.scss
+++ b/src/implementations/vanilla/components/site-header/site-header-eu.scss
@@ -19,7 +19,6 @@ $language-list: null !default;
 
 .ecl-site-header {
   background-color: map.get($site-header, 'background-color');
-  box-shadow: var(--sh-4);
   margin: 0;
   position: relative;
   z-index: map.get($theme, 'z-index', 'modal');
@@ -35,6 +34,11 @@ $language-list: null !default;
     position: absolute;
     right: 0;
     width: calc(44px + var(--s-m) * 2);
+
+    &.ecl-mega-menu--rtl {
+      left: 0;
+      right: auto;
+    }
   }
 
   .ecl-site-header__cta {
@@ -54,10 +58,6 @@ $language-list: null !default;
     margin-bottom: var(--s-m);
   }
 
-  .ecl-mega-menu__open {
-    right: -8px;
-  }
-
   &.ecl-site-header-with-logo-s .ecl-menu__open,
   &.ecl-site-header-with-logo-s .ecl-mega-menu__open {
     top: 8px;
@@ -83,23 +83,42 @@ $language-list: null !default;
   .ecl-menu[aria-expanded='true'] .ecl-menu__open,
   .ecl-mega-menu[aria-expanded='true'] .ecl-mega-menu__open {
     align-items: center;
-    background-color: transparent;
     border: 1px solid transparent;
     box-sizing: border-box;
     color: currentcolor;
     height: 44px;
     padding: calc(var(--s-xs) + 1px) 0;
     position: relative;
+    z-index: 54;
 
     &:hover {
-      background-color: var(--c-p-10);
       border-color: var(--c-d);
       border-width: 1px;
     }
   }
+
+  .ecl-menu__open .ecl-icon:last-of-type {
+    height: 1.5rem;
+    width: 1.5rem;
+  }
+
+  .ecl-mega-menu__open {
+    margin-inline-start: var(--s-m);
+  }
+
+  .ecl-menu[aria-expanded='true'] .ecl-menu__open,
+  .ecl-mega-menu[aria-expanded='true'] .ecl-mega-menu__open {
+    background-color: var(--c-p-20);
+  }
   /* stylelint-enable no-descending-specificity */
 }
 
+.ecl-site-header__header {
+  box-shadow: var(--sh-4);
+  position: relative;
+  z-index: 54;
+}
+
 .ecl-site-header__container {
   display: flex;
   flex-direction: column;
@@ -257,6 +276,7 @@ $language-list: null !default;
 
 .ecl-site-header__banner {
   background: map.get($site-header, 'gradient-background');
+  box-shadow: var(--sh-4);
 }
 
 .ecl-site-header__site-name {
@@ -337,6 +357,10 @@ $language-list: null !default;
       }
     }
 
+    &.ecl-site-header--has-menu .ecl-site-header__header {
+      box-shadow: none;
+    }
+
     .ecl-menu {
       background: map.get($site-header, 'gradient-background');
       min-height: auto;
@@ -361,6 +385,8 @@ $language-list: null !default;
   }
 
   .ecl-site-header__banner {
+    box-shadow: none;
+
     .ecl-container {
       display: flex;
       position: relative;
diff --git a/src/themes/ec/variables/_mega-menu.scss b/src/themes/ec/variables/_mega-menu.scss
index 3e366d70573..c45f4c0e2ec 100644
--- a/src/themes/ec/variables/_mega-menu.scss
+++ b/src/themes/ec/variables/_mega-menu.scss
@@ -37,6 +37,7 @@ $mega-menu: (
     subitem-padding: var(--s-m) var(--s-m) var(--s-m) var(--s-l),
   ),
   desktop: (
+    item-background: var(--c-br),
     menu-background: var(--c-br),
     menu-border: none,
     item-background-focus: var(--c-br),
@@ -53,6 +54,7 @@ $mega-menu: (
     mega-border: none,
     mega-shadow: none,
     overlay-background: var(--c-n-40),
+    outline-width: 2px,
     see-all-divider: var(--c-n-100),
     sublink-padding: calc(var(--s-xs) + 2px) var(--s-l) calc(var(--s-xs) + 2px)
       var(--s-m),
diff --git a/src/themes/eu/variables/_mega-menu.scss b/src/themes/eu/variables/_mega-menu.scss
index 76790e05cdd..5b9701604c3 100644
--- a/src/themes/eu/variables/_mega-menu.scss
+++ b/src/themes/eu/variables/_mega-menu.scss
@@ -5,7 +5,7 @@
 $mega-menu: (
   global: (
     border-radius: 0,
-    greysh-background: var(--c-p-10),
+    greysh-background: var(--c-in-5),
     shadow: none,
   ),
   mobile: (
@@ -13,15 +13,15 @@ $mega-menu: (
     banner-shadow: map.get($shadow, '4'),
     menu-background: transparent,
     color: var(--c-d),
-    content-background: map.get($color, 'white'),
+    content-background: transparent,
     featured-background: var(--c-p-5),
     featured-link-border: var(--c-d-20),
-    overlay-background: var(--c-p-10),
+    overlay-background: map.get($color, 'white'),
     open-padding: var(--s-xs) 0,
     hide-header: true,
-    open-background-active: var(--c-p-80),
-    header-background: var(--c-p-10),
-    header-background-hover: var(--c-p-20),
+    open-background-active: var(--c-p-20),
+    header-background: var(--c-in-5),
+    header-background-hover: var(--c-p-10),
     header-font: var(--f-m),
     header-color: var(--c-p),
     header-color-hover: var(--c-d),
@@ -40,8 +40,9 @@ $mega-menu: (
   desktop: (
     menu-background: linear-gradient(90deg, var(--c-p-140), var(--c-p)),
     menu-border: none,
-    item-background-focus: var(--c-br),
-    item-background-hover: var(--c-p-40),
+    item-background: transparent,
+    item-background-focus: transparent,
+    item-background-hover: var(--c-p-20),
     item-color: map.get($color, 'white'),
     item-color-hover: var(--c-d),
     item-color-focus: map.get($color, 'white'),
@@ -53,12 +54,14 @@ $mega-menu: (
     link-line-height: map.get($line-height, 'm'),
     mega-border: none,
     mega-shadow: none,
+    outline-width: 1px,
+    overlay-background: var(--c-p-5),
     see-all-divider: var(--c-p-40),
     sublink-padding: calc(var(--s-xs) + 2px) var(--s-l) calc(var(--s-xs) + 2px)
       var(--s-m),
     sublink-level2-padding: calc(var(--s-xs) + 2px) var(--s-2xl)
       calc(var(--s-xs) + 2px) var(--s-s),
-    sublink-current-background: var(--c-p-10),
+    sublink-current-background: var(--c-in-5),
   ),
 );
 // stylelint-enable length-zero-no-unit
diff --git a/src/themes/eu/variables/_menu.scss b/src/themes/eu/variables/_menu.scss
index 17fc962646d..1da3ed68c37 100644
--- a/src/themes/eu/variables/_menu.scss
+++ b/src/themes/eu/variables/_menu.scss
@@ -17,7 +17,7 @@ $menu: (
     overlay-background: rgba(38, 43, 56, 0.7),
     open-padding: var(--s-xs) 0,
     open-outline-color: map.get($color, 'white'),
-    open-background-active: var(--c-p-5),
+    open-background-active: var(--c-p-10),
     header-background: linear-gradient(90deg, var(--c-p-140), var(--c-p)),
     header-background-hover: transparent,
     header-font: var(--f-xl),
diff --git a/src/website/src/pages/ec/components/site-wide/site-header/docs/code.mdx b/src/website/src/pages/ec/components/site-wide/site-header/docs/code.mdx
index 88f42905967..049f3b2b0a2 100644
--- a/src/website/src/pages/ec/components/site-wide/site-header/docs/code.mdx
+++ b/src/website/src/pages/ec/components/site-wide/site-header/docs/code.mdx
@@ -19,7 +19,7 @@ import {
   selectedStory="core"
   showFrame
   disableAutoResize
-  frameHeight="700"
+  frameHeight="1800"
 >
   <Html markup={siteHeaderCore} />
 </Playground>
@@ -32,7 +32,7 @@ import {
   selectedStory="standardised"
   showFrame
   disableAutoResize={true}
-  frameHeight="2000"
+  frameHeight="1800"
 >
   <Html markup={siteHeaderStandardised} />
 </Playground>
diff --git a/src/website/src/pages/eu/components/site-wide/site-header/docs/code.mdx b/src/website/src/pages/eu/components/site-wide/site-header/docs/code.mdx
index 3cf2b93b32c..ef50a149876 100644
--- a/src/website/src/pages/eu/components/site-wide/site-header/docs/code.mdx
+++ b/src/website/src/pages/eu/components/site-wide/site-header/docs/code.mdx
@@ -15,7 +15,7 @@ import { siteHeaderCore, siteHeaderHarmonised } from '../demo';
   selectedStory="core"
   showFrame
   disableAutoResize
-  frameHeight="700"
+  frameHeight="1800"
 >
   <Html markup={siteHeaderCore} />
 </Playground>