Skip to content

Commit

Permalink
fix(mega-menu): Setting opacity: 1 on the container when opened - FRO…
Browse files Browse the repository at this point in the history 
…NT-4641 (#3660)

* fix(mega-menu): SEtting opacity: 1 on the container when opened - FRONT-4641

* feat(mega-menu): Adding minimal demo content for the container option - FRONT-4641

* feat(mega-menu): Resetting opacity when closing the dropdown - FRONT-4641
  • Loading branch information
@planctus
planctus committed Oct 17, 2024
1 parent d0304ce commit 6f64729
Show file tree
Hide file tree
Showing 3 changed files with 103 additions and 13 deletions.
104 changes: 96 additions & 8 deletions src/implementations/twig/components/mega-menu/__snapshots__/mega-menu.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1127,7 +1127,18 @@ exports[`Mega Menu Default renders correctly 1`] = `
<div
class="ecl-mega-menu__mega-container-scrollable"
>
<div />
<div
class="ecl"
>
<h2
class="ecl-u-mt-none ecl-u-mt-l-l"
>
Minimal demo content for the container option
</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer placerat magna quis ultricies hendrerit. Suspendisse fermentum elit id hendrerit suscipit.
</p>
</div>
</div>
</div>
</div>
Expand Down Expand Up @@ -2280,7 +2291,18 @@ exports[`Mega Menu Default renders correctly with external items in the first le
<div
class="ecl-mega-menu__mega-container-scrollable"
>
<div />
<div
class="ecl"
>
<h2
class="ecl-u-mt-none ecl-u-mt-l-l"
>
Minimal demo content for the container option
</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer placerat magna quis ultricies hendrerit. Suspendisse fermentum elit id hendrerit suscipit.
</p>
</div>
</div>
</div>
</div>
Expand Down Expand Up @@ -3435,7 +3457,18 @@ exports[`Mega Menu Default renders correctly with extra attributes 1`] = `
<div
class="ecl-mega-menu__mega-container-scrollable"
>
<div />
<div
class="ecl"
>
<h2
class="ecl-u-mt-none ecl-u-mt-l-l"
>
Minimal demo content for the container option
</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer placerat magna quis ultricies hendrerit. Suspendisse fermentum elit id hendrerit suscipit.
</p>
</div>
</div>
</div>
</div>
Expand Down Expand Up @@ -4589,7 +4622,18 @@ exports[`Mega Menu Default renders correctly with extra attributes for the featu
<div
class="ecl-mega-menu__mega-container-scrollable"
>
<div />
<div
class="ecl"
>
<h2
class="ecl-u-mt-none ecl-u-mt-l-l"
>
Minimal demo content for the container option
</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer placerat magna quis ultricies hendrerit. Suspendisse fermentum elit id hendrerit suscipit.
</p>
</div>
</div>
</div>
</div>
Expand Down Expand Up @@ -5743,7 +5787,18 @@ exports[`Mega Menu Default renders correctly with extra attributes for the fist
<div
class="ecl-mega-menu__mega-container-scrollable"
>
<div />
<div
class="ecl"
>
<h2
class="ecl-u-mt-none ecl-u-mt-l-l"
>
Minimal demo content for the container option
</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer placerat magna quis ultricies hendrerit. Suspendisse fermentum elit id hendrerit suscipit.
</p>
</div>
</div>
</div>
</div>
Expand Down Expand Up @@ -6897,7 +6952,18 @@ exports[`Mega Menu Default renders correctly with extra attributes for the secon
<div
class="ecl-mega-menu__mega-container-scrollable"
>
<div />
<div
class="ecl"
>
<h2
class="ecl-u-mt-none ecl-u-mt-l-l"
>
Minimal demo content for the container option
</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer placerat magna quis ultricies hendrerit. Suspendisse fermentum elit id hendrerit suscipit.
</p>
</div>
</div>
</div>
</div>
Expand Down Expand Up @@ -8051,7 +8117,18 @@ exports[`Mega Menu Default renders correctly with extra attributes for the see a
<div
class="ecl-mega-menu__mega-container-scrollable"
>
<div />
<div
class="ecl"
>
<h2
class="ecl-u-mt-none ecl-u-mt-l-l"
>
Minimal demo content for the container option
</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer placerat magna quis ultricies hendrerit. Suspendisse fermentum elit id hendrerit suscipit.
</p>
</div>
</div>
</div>
</div>
Expand Down Expand Up @@ -9204,7 +9281,18 @@ exports[`Mega Menu Default renders correctly with extra class names 1`] = `
<div
class="ecl-mega-menu__mega-container-scrollable"
>
<div />
<div
class="ecl"
>
<h2
class="ecl-u-mt-none ecl-u-mt-l-l"
>
Minimal demo content for the container option
</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer placerat magna quis ultricies hendrerit. Suspendisse fermentum elit id hendrerit suscipit.
</p>
</div>
</div>
</div>
</div>
Expand Down
7 changes: 3 additions & 4 deletions src/implementations/vanilla/components/mega-menu/mega-menu.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -708,6 +708,7 @@ export class MegaMenu {
);
if (container) {
container.firstElementChild.style.height = `${viewportHeight - mainTop}px`;
mainPanel.style.opacity = 1;
return;
}
}
Expand Down Expand Up @@ -1574,13 +1575,11 @@ export class MegaMenu {
this.inner.classList.remove('ecl-mega-menu__inner--expanded');

// Reset heights
const megaMenus = queryAll(
'.ecl-mega-menu__item > .ecl-mega-menu__wrapper > .ecl-container > [data-ecl-mega-menu-mega]',
this.element,
);
const megaMenus = queryAll('[data-ecl-mega-menu-mega]', this.element);
megaMenus.forEach((mega) => {
mega.style.height = '';
mega.style.top = '';
mega.style.opacity = '';
});

if (this.wrappers) {
Expand Down
5 changes: 4 additions & 1 deletion src/specs/components/mega-menu/demo/data.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -171,7 +171,10 @@ module.exports = {
{
label: 'Engage',
path: exampleLink,
container: `<div></div>`,
container: `<div class="ecl">
<h2 class="ecl-u-mt-none ecl-u-mt-l-l">Minimal demo content for the container option</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer placerat magna quis ultricies hendrerit. Suspendisse fermentum elit id hendrerit suscipit.</p>
</div>`,
},
{
label: 'Contact',
Expand Down

0 comments on commit 6f64729

Please sign in to comment.