Skip to content

Commit

Permalink
feat(mega-menu): Fixing styles in EU, adding demo in site header - FR…
Browse files Browse the repository at this point in the history 
…ONT-4541 (#3526)
  • Loading branch information
@planctus
planctus authored Aug 1, 2024
1 parent db49de7 commit 7a838f1
Show file tree
Hide file tree
Showing 11 changed files with 110 additions and 50 deletions.
16 changes: 8 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 @@ -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"
>
Expand Down Expand Up @@ -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"
>
Expand Down Expand Up @@ -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"
>
Expand Down Expand Up @@ -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"
>
Expand Down Expand Up @@ -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"
>
Expand Down Expand Up @@ -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"
>
Expand Down Expand Up @@ -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"
>
Expand Down Expand Up @@ -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"
>
Expand Down
2 changes: 1 addition & 1 deletion src/implementations/twig/components/mega-menu/mega-menu.html.twig
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
20 changes: 15 additions & 5 deletions src/implementations/twig/components/site-header/eu-site-header.story.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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));
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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',
},
Expand Down Expand Up @@ -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) {
Expand Down
47 changes: 31 additions & 16 deletions src/implementations/vanilla/components/mega-menu/mega-menu.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand All @@ -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');
}
Expand All @@ -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;
Expand All @@ -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 {
Expand Down Expand Up @@ -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);
}
Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -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');
}
}

Expand All @@ -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);
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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');
}

Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -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);
Expand Down
4 changes: 4 additions & 0 deletions src/implementations/vanilla/components/site-header/site-header-ec.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
Loading

1 comment on commit 7a838f1

@github-actions
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🚀 Deployed on https://v4-dev--europa-component-library.netlify.app

Please sign in to comment.