Skip to content
Snippets Groups Projects
Commit 40c69cfd authored by Tuukka Turu's avatar Tuukka Turu
Browse files

Merge branch 'NXSTAGE-1493-header' of... 

Merge branch 'NXSTAGE-1493-header' of version.helsinki.fi:julkiset-sivut/design-system-lib into NXSTAGE-1493-header
parents 8c79efc2 58c42d82
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
+ 4
− 0
View file @ 40c69cfd
......@@ -58,6 +58,10 @@
padding: 0 9px;
}
&.toggle {
text-decoration: none;
}
&__label {
position: relative;
width: min-content;
......
src/components/site-header/hy-desktop-menu-links/hy-desktop-menu-links.tsx
+ 108
− 94
View file @ 40c69cfd
......@@ -10,6 +10,7 @@ export interface DesktopLinks {
labelExtra: string;
url: string;
description: string;
toggleOff: string;
menuLinkId: string;
isExternal: string;
isActive: string;
......@@ -390,6 +391,7 @@ export class HyDesktopMenuLinks {
items,
url,
description,
toggleOff,
label,
labelExtra,
isExternal,
......@@ -407,106 +409,118 @@ export class HyDesktopMenuLinks {
].join(' ');
let target = isExternal ? '_blank' : '_self';
menuLinkItems.push(
<li>
<button
type="button"
class={classAttributes}
link-id={id}
onMouseDown={(e) => this.handleDesktopMenuClick(e, id)}
onFocus={(e) => this.handleDesktopMenuFocus(e, id)}
onMouseEnter={(e) => this.handleDesktopMenuEnter(e, id)}
onMouseMove={(e) => this.handleDesktopMenuMove(e, id)}
aria-expanded="false"
>
<span class={classAttributesLabel}>{label}</span>
<hy-icon icon={'hy-icon-caret-down'} size={32} />
</button>
<div class="hy-desktop-menu-panel" aria-hidden="true">
<div class="hy-desktop-menu-panel__desktop-menu">
<div class="hy-desktop-menu-panel__desktop-menu__menu-items">
<a
aria-current={label}
href={url}
target={target}
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} />
</span>
{labelExtra ? <span class="label">{labelExtra}</span> : <span class="label">{label}</span>}
{description && <span class="description">{description}</span>}
</a>
<ul class={'hy-desktop-menu-panel__desktop-menu__second-level-menu'} menu-link-id={id}>
{items.map(({label, url, isExternal}) => {
let subitemTarget = isExternal ? '_blank' : '_self';
return (
<li>
<a href={url} target={subitemTarget}>
<span class="heading-icon">
<hy-icon icon={'hy-icon-caret-right'} size={12} />
</span>
<span class="label">{label}</span>
{isExternal && (
<span class="external-icon">
<hy-icon icon={'hy-icon-arrow-right'} size={12} />
</span>
)}
</a>
</li>
);
})}
</ul>
</div>
{shortcuts.length > 0 && (
<ul class="shortcuts-panel">
<h2 class="shortcuts-panel__title">{shortcutsTitle}</h2>
{shortcuts.map(
({shortcut_title, shortcut_url, shortcut_is_external, shortcut_aria_label}, index) => {
let target = shortcut_is_external ? '_blank' : '_self';
let shortcutClass = [
'shortcuts-panel__shortcut-item',
index == 0 ? 'shortcuts-panel__shortcut-item__first' : '',
].join(' ');
if (toggleOff == 'true') {
//console.log('toggleOff if true: show as a link: ' + label);
menuLinkItems.push(
<li onMouseEnter={(e) => this.handleDesktopMenuClose(e)}>
<a aria-current={label} href={url} target={target} class="desktop-menu-link toggle" menu-link-id={id}>
{labelExtra ? <span class="label">{labelExtra}</span> : <span class="label">{label}</span>}
</a>
</li>
);
} else {
//console.log('toggleOff is false: show as a dropdown: ' + label);
menuLinkItems.push(
<li>
<button
type="button"
class={classAttributes}
link-id={id}
onMouseDown={(e) => this.handleDesktopMenuClick(e, id)}
onFocus={(e) => this.handleDesktopMenuFocus(e, id)}
onMouseEnter={(e) => this.handleDesktopMenuEnter(e, id)}
onMouseMove={(e) => this.handleDesktopMenuMove(e, id)}
aria-expanded="false"
>
<span class={classAttributesLabel}>{label}</span>
<hy-icon icon={'hy-icon-caret-down'} size={32} />
</button>
<div class="hy-desktop-menu-panel" aria-hidden="true">
<div class="hy-desktop-menu-panel__desktop-menu">
<div class="hy-desktop-menu-panel__desktop-menu__menu-items">
<a
aria-current={label}
href={url}
target={target}
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} />
</span>
{labelExtra ? <span class="label">{labelExtra}</span> : <span class="label">{label}</span>}
{description && <span class="description">{description}</span>}
</a>
<ul class={'hy-desktop-menu-panel__desktop-menu__second-level-menu'} menu-link-id={id}>
{items.map(({label, url, isExternal}) => {
let subitemTarget = isExternal ? '_blank' : '_self';
return (
<li class={shortcutClass}>
<a
aria-current={shortcut_aria_label}
href={shortcut_url}
class="shortcut-item__link"
target={target}
aria-label={shortcut_aria_label}
>
<span class="label">{shortcut_title}</span>
<span class="icon">
<hy-icon icon={'hy-icon-arrow-right'} size={24} />
<li>
<a href={url} target={subitemTarget}>
<span class="heading-icon">
<hy-icon icon={'hy-icon-caret-right'} size={12} />
</span>
<span class="label">{label}</span>
{isExternal && (
<span class="external-icon">
<hy-icon icon={'hy-icon-arrow-right'} size={12} />
</span>
)}
</a>
</li>
);
}
)}
</ul>
)}
})}
</ul>
</div>
{shortcuts.length > 0 && (
<ul class="shortcuts-panel">
<h2 class="shortcuts-panel__title">{shortcutsTitle}</h2>
{shortcuts.map(
({shortcut_title, shortcut_url, shortcut_is_external, shortcut_aria_label}, index) => {
let target = shortcut_is_external ? '_blank' : '_self';
let shortcutClass = [
'shortcuts-panel__shortcut-item',
index == 0 ? 'shortcuts-panel__shortcut-item__first' : '',
].join(' ');
return (
<li class={shortcutClass}>
<a
aria-current={shortcut_aria_label}
href={shortcut_url}
class="shortcut-item__link"
target={target}
aria-label={shortcut_aria_label}
>
<span class="label">{shortcut_title}</span>
<span class="icon">
<hy-icon icon={'hy-icon-arrow-right'} size={24} />
</span>
</a>
</li>
);
}
)}
</ul>
)}
</div>
<button
onClick={(e) => this.handleDesktopMenuClose(e)}
class={{
'hy-desktop-menu-panel__panel-toggle': true,
}}
aria-label="Close menu"
>
<span class="hy-desktop-menu-panel__panel-toggle__label">
<span class="hy-desktop-menu-panel__panel-toggle__label__title">{closeButtonTitle}</span>
<hy-icon icon={'hy-icon-remove'} size={20} fill={ColorVariant.black} />
</span>
</button>
</div>
<button
onClick={(e) => this.handleDesktopMenuClose(e)}
class={{
'hy-desktop-menu-panel__panel-toggle': true,
}}
aria-label="Close menu"
>
<span class="hy-desktop-menu-panel__panel-toggle__label">
<span class="hy-desktop-menu-panel__panel-toggle__label__title">{closeButtonTitle}</span>
<hy-icon icon={'hy-icon-remove'} size={20} fill={ColorVariant.black} />
</span>
</button>
</div>
</li>
);
</li>
);
}
}
);
}
......
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