Skip to content
Snippets Groups Projects
Commit 3b01b6a4 authored by shamalainen's avatar shamalainen
Browse files

Merge branch 'NXSTAGE-1000-upper-navigation' of... 

Merge branch 'NXSTAGE-1000-upper-navigation' of version.helsinki.fi:julkiset-sivut/design-system-lib into NXSTAGE-1000-upper-navigation
parents 07fa263d ae6b3e70
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
src/components/site-header/hy-desktop-menu-links/hy-desktop-menu-links.scss
+ 141
− 129
View file @ 3b01b6a4
...@@ -3,16 +3,18 @@ ...@@ -3,16 +3,18 @@
} }
.hy-site-header { .hy-site-header {
// ul - menu items first level and panels that consist of menu items second level and shortcut items per panel.
&__menu-desktop-container { &__menu-desktop-container {
align-items: center; align-items: center;
display: flex; display: flex;
flex-flow: row; flex-flow: row;
list-style: none; list-style: none;
width: 100%; width: 100%;
}
&__menu-desktop { // First level menu items
.desktop-menu-link { .desktop-menu-link {
background-color: transparent;
border: none;
color: var(--brand-main-nearly-black); color: var(--brand-main-nearly-black);
cursor: pointer; cursor: pointer;
font-family: var(--main-font-family); font-family: var(--main-font-family);
...@@ -32,10 +34,7 @@ ...@@ -32,10 +34,7 @@
padding: 10px; padding: 10px;
} }
&__heading__icon { // Underline if link is in active trail.
display: none;
}
&--is-active-trail { &--is-active-trail {
@include breakpoint($extrawide) { @include breakpoint($extrawide) {
border-bottom: 4px solid var(--brand-main-nearly-black); border-bottom: 4px solid var(--brand-main-nearly-black);
...@@ -46,6 +45,12 @@ ...@@ -46,6 +45,12 @@
padding-bottom: 12px; padding-bottom: 12px;
} }
} }
&__heading__icon {
display: none;
}
// On hover: change background and show heading icon.
&--is-active { &--is-active {
background-color: var(--grayscale-background-box); background-color: var(--grayscale-background-box);
padding: 35px 10px; padding: 35px 10px;
...@@ -68,61 +73,60 @@ ...@@ -68,61 +73,60 @@
} }
} }
} }
}
}
.hy-desktop-menu-panel { // Panel with second level menu items and shortcuts.
display: none; .hy-desktop-menu-panel {
display: none;
&--is-active { &--is-active {
background-color: var(--grayscale-white); background-color: var(--grayscale-white);
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: center; justify-content: center;
opacity: 1; opacity: 1;
position: absolute; position: absolute;
left: 0; left: 0;
top: 104px; top: 104px;
width: 100%; width: 100%;
z-index: 510; z-index: 510;
} }
&__desktop-menu { &__panel-toggle {
position: relative; background-color: transparent;
left: 120px; border: none;
width: 50%; position: absolute;
right: 10px;
top: 10px;
ul { &__label {
list-style: none; @include font-size(18px, 22px);
margin: 0; @include font-weight($bold);
padding: 0; color: var(--grayscale-black);
display: flex;
font-family: var(--main-font-family);
letter-spacing: -0.56px;
margin-bottom: 18px;
text-transform: uppercase;
&__title {
padding-right: 5px;
}
}
}
li { &__desktop-menu {
a { position: relative;
// first level link inside panel
&__first-level-menu-item {
@include font-weight($bold); @include font-weight($bold);
align-items: center; //align-items: center;
color: var(--brand-main-nearly-black); color: var(--brand-main-nearly-black);
display: flex; display: flex;
flex-direction: row; //flex-direction: row;
font-family: var(--main-font-family); font-family: var(--main-font-family);
text-decoration: none; text-decoration: none;
width: 100%; width: 100%;
&:focus {
outline: solid 2px var(--additional-yellow);
outline-offset: -2px;
}
.hy-menu-item__label {
@include breakpoint($extrawide) {
padding-top: 12px;
padding-bottom: 12px;
}
}
}
}
li.first {
a {
@include breakpoint($extrawide) { @include breakpoint($extrawide) {
@include font-size(24px, 32px); @include font-size(24px, 32px);
align-items: flex-start; align-items: flex-start;
...@@ -130,9 +134,7 @@ ...@@ -130,9 +134,7 @@
flex-direction: column; flex-direction: column;
letter-spacing: -0.75px; letter-spacing: -0.75px;
margin-bottom: 4px; margin-bottom: 4px;
padding-left: 32px; padding: 17px 32px 12px 32px;
padding-right: 32px;
padding-top: 5px;
position: relative; position: relative;
text-transform: none; text-transform: none;
} }
...@@ -143,28 +145,27 @@ ...@@ -143,28 +145,27 @@
padding-top: 19px; padding-top: 19px;
} }
.hy-menu-item__label { .label {
border: none; border: none;
margin-left: 14px; margin-left: 14px;
} }
.hy-menu-item__description { .description {
@include font-size(16px, 24px); @include font-size(16px, 24px);
@include font-weight($semibold); @include font-weight($semibold);
color: var(--grayscale-dark); color: var(--grayscale-dark);
letter-spacing: 0; letter-spacing: 0;
margin-left: 14px; margin-left: 14px;
margin-bottom: 28px; margin-bottom: 28px;
margin-top: 8px;
} }
span.heading-icon-first { span.heading-icon {
position: absolute; position: absolute;
top: 12px; top: 12px;
left: -6px; left: -6px;
@include breakpoint($fullhd) { @include breakpoint($fullhd) {
top: 27px; top: 27px;
} }
svg { svg {
background-color: var(--brand-main-light); background-color: var(--brand-main-light);
fill: var(--grayscale-white); fill: var(--grayscale-white);
...@@ -172,35 +173,61 @@ ...@@ -172,35 +173,61 @@
} }
} }
} }
}
li.second { // menu item links
a { &__second-level-menu {
@include breakpoint($extrawide) { background-color: var(--grayscale-background-box);
@include font-size(15px, 22px); list-style: none;
align-items: center; margin: 0;
flex-direction: row; padding: 0;
letter-spacing: -0.47px;
padding-left: 24px; li {
padding-right: 24px; a {
text-transform: none; @include font-weight($bold);
} align-items: center;
color: var(--brand-main-nearly-black);
display: flex;
flex-direction: row;
font-family: var(--main-font-family);
text-decoration: none;
width: 100%;
@include breakpoint($fullhd) { @include breakpoint($extrawide) {
@include font-size(18px, 22px); @include font-size(15px, 22px);
letter-spacing: -0.56px; align-items: center;
} flex-direction: row;
letter-spacing: -0.47px;
padding-left: 24px;
padding-right: 24px;
text-transform: none;
}
.hy-menu-item__label { @include breakpoint($fullhd) {
border: none; @include font-size(18px, 22px);
margin-left: 12px; letter-spacing: -0.56px;
} }
span.heading-icon-second { &:focus {
svg { outline: solid 2px var(--additional-yellow);
fill: var(--brand-main-light); outline-offset: -2px;
@include breakpoint($extrawide) { }
padding: 1px 0;
.label {
@include breakpoint($extrawide) {
border: none;
margin-left: 12px;
padding-top: 12px;
padding-bottom: 12px;
}
}
span.heading-icon {
svg {
fill: var(--brand-main-light);
@include breakpoint($extrawide) {
padding: 1px 0;
}
}
} }
} }
} }
...@@ -208,59 +235,44 @@ ...@@ -208,59 +235,44 @@
} }
} }
ul.second { // Shortcuts
background-color: var(--grayscale-background-box); .shortcuts-panel {
} list-style: none;
ul.desktop-menu {
display: none;
&--is-active {
display: block;
}
}
}
&__panel-toggle {
position: absolute;
right: 10px;
top: 10px;
}
.shortcuts-panel {
&__title {
@include font-size(18px, 22px);
@include font-weight($bold);
//border-bottom: 1px solid var(--grayscale-medium-dark);
color: var(--grayscale-black);
font-family: var(--main-font-family);
letter-spacing: -0.56px;
margin-bottom: 18px;
text-transform: uppercase;
}
&__shortcut-item {
border-bottom: 1px solid var(--grayscale-medium-dark);
&__first {
border-top: 1px solid var(--grayscale-medium-dark);
}
a { &__title {
@include font-size(16px, 22px); @include font-size(18px, 22px);
@include font-weight($semibold); @include font-weight($bold);
color: var(--grayscale-black); color: var(--grayscale-black);
display: flex;
flex-direction: row;
font-family: var(--main-font-family); font-family: var(--main-font-family);
letter-spacing: -0.5px; letter-spacing: -0.56px;
padding: 19px 0; margin-bottom: 18px;
text-decoration: none; text-transform: uppercase;
} }
span.shortcut-item__icon { &__shortcut-item {
position: absolute; border-bottom: 1px solid var(--grayscale-medium-dark);
right: 0; &__first {
border-top: 1px solid var(--grayscale-medium-dark);
}
svg { a {
padding: 4px; @include font-size(16px, 22px);
@include font-weight($semibold);
color: var(--grayscale-black);
display: flex;
flex-direction: row;
font-family: var(--main-font-family);
letter-spacing: -0.5px;
padding: 19px 0;
text-decoration: none;
.icon {
position: absolute;
right: 0;
svg {
padding: 4px;
}
}
} }
} }
} }
......
src/components/site-header/hy-desktop-menu-links/hy-desktop-menu-links.tsx
+ 30
− 15
View file @ 3b01b6a4
...@@ -61,10 +61,12 @@ export class HyDesktopMenuLinks { ...@@ -61,10 +61,12 @@ export class HyDesktopMenuLinks {
} }
handleDesktopMenuToggle(id) { handleDesktopMenuToggle(id) {
console.log(id);
const menuItems = this.el.shadowRoot.querySelectorAll(`.desktop-menu-link`); const menuItems = this.el.shadowRoot.querySelectorAll(`.desktop-menu-link`);
const menuPanelItems = this.el.shadowRoot.querySelectorAll('.hy-desktop-menu-panel'); const menuPanelItems = this.el.shadowRoot.querySelectorAll('.hy-desktop-menu-panel'); // all panels
const activeMenuItem = this.el.shadowRoot.querySelector(`.desktop-menu-link[link-id="${id}"]`); const activeMenuItem = this.el.shadowRoot.querySelector(`.desktop-menu-link[link-id="${id}"]`);
const activeMenuItemSibling = activeMenuItem.nextElementSibling; const activeMenuItemSibling = activeMenuItem.nextElementSibling; // current panel
// Reset elements by removing the active classes. // Reset elements by removing the active classes.
menuItems.forEach((item) => { menuItems.forEach((item) => {
...@@ -88,12 +90,16 @@ export class HyDesktopMenuLinks { ...@@ -88,12 +90,16 @@ export class HyDesktopMenuLinks {
let menuLinkItems = []; let menuLinkItems = [];
links.map(({menuLinkId: id, shortcuts, items, url, description, label}) => { links.map(({menuLinkId: id, shortcuts, items, url, description, label, isActive}) => {
let classAttributes = ['desktop-menu-link', isActive === 'true' ? 'desktop-menu-link--is-active-trail' : ''].join(
' '
);
menuLinkItems.push( menuLinkItems.push(
<li> <li>
<button <button
type="button" type="button"
class="desktop-menu-link" class={classAttributes}
link-id={id} link-id={id}
onMouseOver={() => this.handleDesktopMenuToggle(id)} onMouseOver={() => this.handleDesktopMenuToggle(id)}
onFocus={() => this.handleDesktopMenuToggle(id)} onFocus={() => this.handleDesktopMenuToggle(id)}
...@@ -106,18 +112,27 @@ export class HyDesktopMenuLinks { ...@@ -106,18 +112,27 @@ export class HyDesktopMenuLinks {
</button> </button>
<div class="hy-desktop-menu-panel" onMouseLeave={() => this.handleDesktopMenuClose()} aria-hidden="true"> <div class="hy-desktop-menu-panel" onMouseLeave={() => this.handleDesktopMenuClose()} aria-hidden="true">
<div class="hy-desktop-menu-panel__desktop-menu"> <div class="hy-desktop-menu-panel__desktop-menu">
<a aria-current={label} href={url} class="" menu-link-id={id}> <a
<span class="heading-icon-first"> aria-current={label}
href={url}
class="hy-desktop-menu-panel__desktop-menu__first-level-menu-item"
menu-link-id={id}
>
<span class="heading-icon">
<hy-icon icon={'hy-icon-arrow-right'} size={40} /> <hy-icon icon={'hy-icon-arrow-right'} size={40} />
</span> </span>
<span class="hy-menu-item__label">{label}</span> <span class="label">{label}</span>
<span class="hy-menu-item__description">{description}</span> {description && <span class="description">{description}</span>}
</a> </a>
<ul class={'desktop-menu first'} menu-link-id={id}> <ul class={'hy-desktop-menu-panel__desktop-menu__second-level-menu'} menu-link-id={id}>
{items.map(({label, url, description}) => ( {items.map(({label, url}) => (
<li> <li>
<a href={url}>{label}</a> <a href={url}>
<span>{description}</span> <span class="heading-icon">
<hy-icon icon={'hy-icon-caret-right'} size={12} />
</span>
<span class="label">{label}</span>
</a>
</li> </li>
))} ))}
</ul> </ul>
...@@ -141,8 +156,8 @@ export class HyDesktopMenuLinks { ...@@ -141,8 +156,8 @@ export class HyDesktopMenuLinks {
target={target} target={target}
aria-label={shortcut_aria_label} aria-label={shortcut_aria_label}
> >
<span class="shortcut-item__label">{shortcut_title}</span> <span class="label">{shortcut_title}</span>
<span class="shortcut-item__icon"> <span class="icon">
<hy-icon icon={'hy-icon-arrow-right'} size={24} /> <hy-icon icon={'hy-icon-arrow-right'} size={24} />
</span> </span>
</a> </a>
...@@ -160,7 +175,7 @@ export class HyDesktopMenuLinks { ...@@ -160,7 +175,7 @@ export class HyDesktopMenuLinks {
aria-label="Close menu" aria-label="Close menu"
> >
<span class="hy-desktop-menu-panel__panel-toggle__label"> <span class="hy-desktop-menu-panel__panel-toggle__label">
CLOSE <span class="hy-desktop-menu-panel__panel-toggle__label__title">CLOSE</span>
<hy-icon icon={'hy-icon-remove'} size={20} fill={ColorVariant.black} /> <hy-icon icon={'hy-icon-remove'} size={20} fill={ColorVariant.black} />
</span> </span>
</button> </button>
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment