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 @@
}
.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 {
align-items: center;
display: flex;
flex-flow: row;
list-style: none;
width: 100%;
}
&__menu-desktop {
// First level menu items
.desktop-menu-link {
background-color: transparent;
border: none;
color: var(--brand-main-nearly-black);
cursor: pointer;
font-family: var(--main-font-family);
......@@ -32,10 +34,7 @@
padding: 10px;
}
&__heading__icon {
display: none;
}
// Underline if link is in active trail.
&--is-active-trail {
@include breakpoint($extrawide) {
border-bottom: 4px solid var(--brand-main-nearly-black);
......@@ -46,6 +45,12 @@
padding-bottom: 12px;
}
}
&__heading__icon {
display: none;
}
// On hover: change background and show heading icon.
&--is-active {
background-color: var(--grayscale-background-box);
padding: 35px 10px;
......@@ -68,61 +73,60 @@
}
}
}
}
}
.hy-desktop-menu-panel {
display: none;
// Panel with second level menu items and shortcuts.
.hy-desktop-menu-panel {
display: none;
&--is-active {
background-color: var(--grayscale-white);
display: flex;
flex-direction: row;
justify-content: center;
opacity: 1;
position: absolute;
left: 0;
top: 104px;
width: 100%;
z-index: 510;
}
&--is-active {
background-color: var(--grayscale-white);
display: flex;
flex-direction: row;
justify-content: center;
opacity: 1;
position: absolute;
left: 0;
top: 104px;
width: 100%;
z-index: 510;
}
&__desktop-menu {
position: relative;
left: 120px;
width: 50%;
&__panel-toggle {
background-color: transparent;
border: none;
position: absolute;
right: 10px;
top: 10px;
ul {
list-style: none;
margin: 0;
padding: 0;
&__label {
@include font-size(18px, 22px);
@include font-weight($bold);
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 {
a {
&__desktop-menu {
position: relative;
// first level link inside panel
&__first-level-menu-item {
@include font-weight($bold);
align-items: center;
//align-items: center;
color: var(--brand-main-nearly-black);
display: flex;
flex-direction: row;
//flex-direction: row;
font-family: var(--main-font-family);
text-decoration: none;
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 font-size(24px, 32px);
align-items: flex-start;
......@@ -130,9 +134,7 @@
flex-direction: column;
letter-spacing: -0.75px;
margin-bottom: 4px;
padding-left: 32px;
padding-right: 32px;
padding-top: 5px;
padding: 17px 32px 12px 32px;
position: relative;
text-transform: none;
}
......@@ -143,28 +145,27 @@
padding-top: 19px;
}
.hy-menu-item__label {
.label {
border: none;
margin-left: 14px;
}
.hy-menu-item__description {
.description {
@include font-size(16px, 24px);
@include font-weight($semibold);
color: var(--grayscale-dark);
letter-spacing: 0;
margin-left: 14px;
margin-bottom: 28px;
margin-top: 8px;
}
span.heading-icon-first {
span.heading-icon {
position: absolute;
top: 12px;
left: -6px;
@include breakpoint($fullhd) {
top: 27px;
}
svg {
background-color: var(--brand-main-light);
fill: var(--grayscale-white);
......@@ -172,35 +173,61 @@
}
}
}
}
li.second {
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;
text-transform: none;
}
// menu item links
&__second-level-menu {
background-color: var(--grayscale-background-box);
list-style: none;
margin: 0;
padding: 0;
li {
a {
@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 font-size(18px, 22px);
letter-spacing: -0.56px;
}
@include breakpoint($extrawide) {
@include font-size(15px, 22px);
align-items: center;
flex-direction: row;
letter-spacing: -0.47px;
padding-left: 24px;
padding-right: 24px;
text-transform: none;
}
.hy-menu-item__label {
border: none;
margin-left: 12px;
}
@include breakpoint($fullhd) {
@include font-size(18px, 22px);
letter-spacing: -0.56px;
}
span.heading-icon-second {
svg {
fill: var(--brand-main-light);
@include breakpoint($extrawide) {
padding: 1px 0;
&:focus {
outline: solid 2px var(--additional-yellow);
outline-offset: -2px;
}
.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 @@
}
}
ul.second {
background-color: var(--grayscale-background-box);
}
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);
}
// Shortcuts
.shortcuts-panel {
list-style: none;
a {
@include font-size(16px, 22px);
@include font-weight($semibold);
&__title {
@include font-size(18px, 22px);
@include font-weight($bold);
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;
letter-spacing: -0.56px;
margin-bottom: 18px;
text-transform: uppercase;
}
span.shortcut-item__icon {
position: absolute;
right: 0;
&__shortcut-item {
border-bottom: 1px solid var(--grayscale-medium-dark);
&__first {
border-top: 1px solid var(--grayscale-medium-dark);
}
svg {
padding: 4px;
a {
@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 {
}
handleDesktopMenuToggle(id) {
console.log(id);
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 activeMenuItemSibling = activeMenuItem.nextElementSibling;
const activeMenuItemSibling = activeMenuItem.nextElementSibling; // current panel
// Reset elements by removing the active classes.
menuItems.forEach((item) => {
......@@ -88,12 +90,16 @@ export class HyDesktopMenuLinks {
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(
<li>
<button
type="button"
class="desktop-menu-link"
class={classAttributes}
link-id={id}
onMouseOver={() => this.handleDesktopMenuToggle(id)}
onFocus={() => this.handleDesktopMenuToggle(id)}
......@@ -106,18 +112,27 @@ export class HyDesktopMenuLinks {
</button>
<div class="hy-desktop-menu-panel" onMouseLeave={() => this.handleDesktopMenuClose()} aria-hidden="true">
<div class="hy-desktop-menu-panel__desktop-menu">
<a aria-current={label} href={url} class="" menu-link-id={id}>
<span class="heading-icon-first">
<a
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} />
</span>
<span class="hy-menu-item__label">{label}</span>
<span class="hy-menu-item__description">{description}</span>
<span class="label">{label}</span>
{description && <span class="description">{description}</span>}
</a>
<ul class={'desktop-menu first'} menu-link-id={id}>
{items.map(({label, url, description}) => (
<ul class={'hy-desktop-menu-panel__desktop-menu__second-level-menu'} menu-link-id={id}>
{items.map(({label, url}) => (
<li>
<a href={url}>{label}</a>
<span>{description}</span>
<a href={url}>
<span class="heading-icon">
<hy-icon icon={'hy-icon-caret-right'} size={12} />
</span>
<span class="label">{label}</span>
</a>
</li>
))}
</ul>
......@@ -141,8 +156,8 @@ export class HyDesktopMenuLinks {
target={target}
aria-label={shortcut_aria_label}
>
<span class="shortcut-item__label">{shortcut_title}</span>
<span class="shortcut-item__icon">
<span class="label">{shortcut_title}</span>
<span class="icon">
<hy-icon icon={'hy-icon-arrow-right'} size={24} />
</span>
</a>
......@@ -160,7 +175,7 @@ export class HyDesktopMenuLinks {
aria-label="Close menu"
>
<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} />
</span>
</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