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 @@
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%;
......@@ -111,7 +112,9 @@
a {
@include breakpoint($extrawide) {
@include font-size(24px, 32px);
align-items: flex-start;
background-color: var(--grayscale-background-box);
flex-direction: column;
letter-spacing: -0.75px;
margin-bottom: 4px;
padding-left: 32px;
......@@ -131,6 +134,14 @@
border: none;
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 {
position: absolute;
......@@ -154,6 +165,8 @@
a {
@include breakpoint($extrawide) {
@include font-size(15px, 22px);
align-items: center;
flex-direction: row;
letter-spacing: -0.47px;
padding-left: 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 {
label: string;
url: string;
description: string;
menuLinkId: string;
items: Array<DesktopLinks>;
shortcuts: Array<ShortcutLinks>;
}
import {ColorVariant} from '../../../utils/utils';
......@@ -109,69 +118,89 @@ export class HyDesktopMenuLinks {
render() {
return (
<nav role={'navigation'} class="hy-site-header__menu-desktop">
<ul>
{this.firstLevelLinksList.map((firstLevelLink) => {
return (
<li>
{firstLevelLink}
<div class="hy-desktop-menu-panel" onMouseLeave={() => this.closeDesktopMenuPanel()}>
<div class="hy-desktop-menu-panel__desktop-menu">
{this._dataDesktopLinks &&
this._dataDesktopLinks.map((link) => {
return (
<ul class={'desktop-menu first'} menu-link-id={link.menuLinkId}>
<li class={'first'}>
<a aria-current={link.label} href={link.url} class="" menu-link-id={link.menuLinkId}>
<span class="heading-icon-first">
<hy-icon icon={'hy-icon-arrow-right'} size={40} />
</span>
<span class="hy-menu-item__label">{link.label}</span>
</a>
{link.items && (
<ul class="second" menu-link-id={link.menuLinkId}>
{link.items.map((subitem) => {
return (
<li class={'second'}>
<a
aria-current={subitem.label}
href={subitem.url}
class=""
menu-link-id={subitem.menuLinkId}
>
<span class="heading-icon-second">
<hy-icon icon={'hy-icon-caret-right'} size={12} />
</span>
<span class="hy-menu-item__label">{subitem.label}</span>
</a>
</li>
);
})}
</ul>
)}
</li>
</ul>
);
})}
</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>
</li>
);
})}
</ul>
</nav>
<div class="hy-site-header__menu-desktop">
{this.firstLevelLinksList}
<div class="hy-desktop-menu-panel" onMouseLeave={() => this.closeDesktopMenuPanel()}>
<div class="hy-desktop-menu-panel__desktop-menu">
<nav role={'navigation'}>
{this._dataDesktopLinks &&
this._dataDesktopLinks.map((link) => {
console.log(link.label);
console.log(link.shortcuts);
return (
<div class="hy-desktop-menu-panel__wrapper">
<ul class={'desktop-menu first'} menu-link-id={link.menuLinkId}>
<li class={'first'}>
<a aria-current={link.label} href={link.url} class="" menu-link-id={link.menuLinkId}>
<span class="heading-icon-first">
<hy-icon icon={'hy-icon-arrow-right'} size={40} />
</span>
<span class="hy-menu-item__label">{link.label}</span>
<span class="hy-menu-item__description">{link.description}</span>
</a>
{link.items && (
<ul class="second" menu-link-id={link.menuLinkId}>
{link.items.map((subitem) => {
return (
<li class={'second'}>
<a
aria-current={subitem.label}
href={subitem.url}
class=""
menu-link-id={subitem.menuLinkId}
>
<span class="heading-icon-second">
<hy-icon icon={'hy-icon-caret-right'} size={12} />
</span>
<span class="hy-menu-item__label">{subitem.label}</span>
</a>
</li>
);
})}
</ul>
)}
</li>
</ul>
{link.shortcuts.length > 0 && (
<div class="shortcuts-panel">
<span class="shortcut-panel__title">{'Shortcuts'}</span>
{link.shortcuts.map((shortcut_item) => {
let target = shortcut_item.shortcut_is_external ? '_blank' : '_self';
return (
<div class="shortcut-item">
<a
aria-current={shortcut_item.shortcut_aria_label}
href={shortcut_item.shortcut_url}
class="shortcut-item__link"
target={target}
aria-label={shortcut_item.shortcut_aria_label}
>
<span class="shortcut-item__label">{shortcut_item.shortcut_title}</span>
</a>
</div>
);
})}
</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