Skip to content
Snippets Groups Projects
Commit f5d8d825 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 a7151b01 d3a36678
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
+ 13
− 0
View file @ f5d8d825
...@@ -90,6 +90,7 @@ ...@@ -90,6 +90,7 @@
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;
font-family: var(--main-font-family); font-family: var(--main-font-family);
text-decoration: none; text-decoration: none;
width: 100%; width: 100%;
...@@ -111,7 +112,9 @@ ...@@ -111,7 +112,9 @@
a { a {
@include breakpoint($extrawide) { @include breakpoint($extrawide) {
@include font-size(24px, 32px); @include font-size(24px, 32px);
align-items: flex-start;
background-color: var(--grayscale-background-box); background-color: var(--grayscale-background-box);
flex-direction: column;
letter-spacing: -0.75px; letter-spacing: -0.75px;
margin-bottom: 4px; margin-bottom: 4px;
padding-left: 32px; padding-left: 32px;
...@@ -131,6 +134,14 @@ ...@@ -131,6 +134,14 @@
border: none; border: none;
margin-left: 14px; margin-left: 14px;
} }
.hy-menu-item__description {
@include font-size(16px, 24px);
@include font-weight($semibold);
color: var(--grayscale-dark);
letter-spacing: 0;
margin-left: 14px;
margin-bottom: 28px;
}
span.heading-icon-first { span.heading-icon-first {
position: absolute; position: absolute;
...@@ -154,6 +165,8 @@ ...@@ -154,6 +165,8 @@
a { a {
@include breakpoint($extrawide) { @include breakpoint($extrawide) {
@include font-size(15px, 22px); @include font-size(15px, 22px);
align-items: center;
flex-direction: row;
letter-spacing: -0.47px; letter-spacing: -0.47px;
padding-left: 24px; padding-left: 24px;
padding-right: 24px; padding-right: 24px;
......
src/components/site-header/hy-desktop-menu-links/hy-desktop-menu-links.tsx
+ 92
− 63
View file @ f5d8d825
export interface ShortcutLinks {
shortcut_title: string;
shortcut_url: string;
shortcut_is_external: string;
shortcut_aria_label: string;
}
export interface DesktopLinks { export interface DesktopLinks {
label: string; label: string;
url: string; url: string;
description: string;
menuLinkId: string; menuLinkId: string;
items: Array<DesktopLinks>; items: Array<DesktopLinks>;
shortcuts: Array<ShortcutLinks>;
} }
import {ColorVariant} from '../../../utils/utils'; import {ColorVariant} from '../../../utils/utils';
...@@ -109,69 +118,89 @@ export class HyDesktopMenuLinks { ...@@ -109,69 +118,89 @@ export class HyDesktopMenuLinks {
render() { render() {
return ( return (
<nav role={'navigation'} class="hy-site-header__menu-desktop"> <div class="hy-site-header__menu-desktop">
<ul> {this.firstLevelLinksList}
{this.firstLevelLinksList.map((firstLevelLink) => { <div class="hy-desktop-menu-panel" onMouseLeave={() => this.closeDesktopMenuPanel()}>
return ( <div class="hy-desktop-menu-panel__desktop-menu">
<li> <nav role={'navigation'}>
{firstLevelLink} {this._dataDesktopLinks &&
<div class="hy-desktop-menu-panel" onMouseLeave={() => this.closeDesktopMenuPanel()}> this._dataDesktopLinks.map((link) => {
<div class="hy-desktop-menu-panel__desktop-menu"> console.log(link.label);
{this._dataDesktopLinks && console.log(link.shortcuts);
this._dataDesktopLinks.map((link) => { return (
return ( <div class="hy-desktop-menu-panel__wrapper">
<ul class={'desktop-menu first'} menu-link-id={link.menuLinkId}> <ul class={'desktop-menu first'} menu-link-id={link.menuLinkId}>
<li class={'first'}> <li class={'first'}>
<a aria-current={link.label} href={link.url} class="" menu-link-id={link.menuLinkId}> <a aria-current={link.label} href={link.url} class="" menu-link-id={link.menuLinkId}>
<span class="heading-icon-first"> <span class="heading-icon-first">
<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">{link.label}</span> <span class="hy-menu-item__label">{link.label}</span>
</a> <span class="hy-menu-item__description">{link.description}</span>
{link.items && ( </a>
<ul class="second" menu-link-id={link.menuLinkId}> {link.items && (
{link.items.map((subitem) => { <ul class="second" menu-link-id={link.menuLinkId}>
return ( {link.items.map((subitem) => {
<li class={'second'}> return (
<a <li class={'second'}>
aria-current={subitem.label} <a
href={subitem.url} aria-current={subitem.label}
class="" href={subitem.url}
menu-link-id={subitem.menuLinkId} class=""
> menu-link-id={subitem.menuLinkId}
<span class="heading-icon-second"> >
<hy-icon icon={'hy-icon-caret-right'} size={12} /> <span class="heading-icon-second">
</span> <hy-icon icon={'hy-icon-caret-right'} size={12} />
<span class="hy-menu-item__label">{subitem.label}</span> </span>
</a> <span class="hy-menu-item__label">{subitem.label}</span>
</li> </a>
); </li>
})} );
</ul> })}
)} </ul>
</li> )}
</ul> </li>
); </ul>
})} {link.shortcuts.length > 0 && (
</div> <div class="shortcuts-panel">
<button <span class="shortcut-panel__title">{'Shortcuts'}</span>
onClick={() => this.closeDesktopMenuPanel()} {link.shortcuts.map((shortcut_item) => {
class={{ let target = shortcut_item.shortcut_is_external ? '_blank' : '_self';
'hy-desktop-menu-panel__panel-toggle': true, return (
}} <div class="shortcut-item">
aria-label="close" <a
> aria-current={shortcut_item.shortcut_aria_label}
<span class="hy-desktop-menu-panel__panel-toggle__label"> href={shortcut_item.shortcut_url}
CLOSE class="shortcut-item__link"
<hy-icon icon={'hy-icon-remove'} size={20} fill={ColorVariant.black} /> target={target}
</span> aria-label={shortcut_item.shortcut_aria_label}
</button> >
</div> <span class="shortcut-item__label">{shortcut_item.shortcut_title}</span>
</li> </a>
); </div>
})} );
</ul> })}
</nav> </div>
)}
</div>
);
})}
</nav>
</div>
<button
onClick={() => this.closeDesktopMenuPanel()}
class={{
'hy-desktop-menu-panel__panel-toggle': true,
}}
aria-label="close"
>
<span class="hy-desktop-menu-panel__panel-toggle__label">
CLOSE
<hy-icon icon={'hy-icon-remove'} size={20} fill={ColorVariant.black} />
</span>
</button>
</div>
</div>
); );
} }
} }
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