From 89ce59af8f329c14ea5ad8716ca6bd7b97faac11 Mon Sep 17 00:00:00 2001
From: druid <druid@druids-MBP-2.lan>
Date: Wed, 18 Nov 2020 20:57:28 +0200
Subject: [PATCH] nav desktop structure
---
src/components.d.ts | 10 ---
src/components/icon/readme.md | 2 -
.../hy-desktop-menu-links.scss | 30 +++++++
.../hy-desktop-menu-links.tsx | 84 +++++++++++--------
.../hy-desktop-menu-panel.scss | 26 ------
.../hy-desktop-menu-panel.tsx | 60 -------------
.../hy-desktop-menu-panel/readme.md | 26 ------
src/components/site-header/readme.md | 3 -
src/components/site-header/site-header.tsx | 7 +-
9 files changed, 82 insertions(+), 166 deletions(-)
delete mode 100644 src/components/site-header/hy-desktop-menu-panel/hy-desktop-menu-panel.scss
delete mode 100644 src/components/site-header/hy-desktop-menu-panel/hy-desktop-menu-panel.tsx
delete mode 100644 src/components/site-header/hy-desktop-menu-panel/readme.md
diff --git a/src/components.d.ts b/src/components.d.ts
index 46deb148..f883a020 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -204,7 +204,6 @@ export namespace Components {
interface HyDesktopMenuLinks {
dataDesktopLinks: DesktopLinks[] | string;
}
- interface HyDesktopMenuPanel {}
interface HyDocsContainer {}
interface HyFooter {}
interface HyFooterAction {
@@ -671,11 +670,6 @@ declare global {
prototype: HTMLHyDesktopMenuLinksElement;
new (): HTMLHyDesktopMenuLinksElement;
};
- interface HTMLHyDesktopMenuPanelElement extends Components.HyDesktopMenuPanel, HTMLStencilElement {}
- var HTMLHyDesktopMenuPanelElement: {
- prototype: HTMLHyDesktopMenuPanelElement;
- new (): HTMLHyDesktopMenuPanelElement;
- };
interface HTMLHyDocsContainerElement extends Components.HyDocsContainer, HTMLStencilElement {}
var HTMLHyDocsContainerElement: {
prototype: HTMLHyDocsContainerElement;
@@ -941,7 +935,6 @@ declare global {
'hy-cta-button': HTMLHyCtaButtonElement;
'hy-cta-link': HTMLHyCtaLinkElement;
'hy-desktop-menu-links': HTMLHyDesktopMenuLinksElement;
- 'hy-desktop-menu-panel': HTMLHyDesktopMenuPanelElement;
'hy-docs-container': HTMLHyDocsContainerElement;
'hy-footer': HTMLHyFooterElement;
'hy-footer-action': HTMLHyFooterActionElement;
@@ -1155,7 +1148,6 @@ declare namespace LocalJSX {
interface HyDesktopMenuLinks {
dataDesktopLinks?: DesktopLinks[] | string;
}
- interface HyDesktopMenuPanel {}
interface HyDocsContainer {}
interface HyFooter {}
interface HyFooterAction {
@@ -1571,7 +1563,6 @@ declare namespace LocalJSX {
'hy-cta-button': HyCtaButton;
'hy-cta-link': HyCtaLink;
'hy-desktop-menu-links': HyDesktopMenuLinks;
- 'hy-desktop-menu-panel': HyDesktopMenuPanel;
'hy-docs-container': HyDocsContainer;
'hy-footer': HyFooter;
'hy-footer-action': HyFooterAction;
@@ -1642,7 +1633,6 @@ declare module '@stencil/core' {
'hy-cta-button': LocalJSX.HyCtaButton & JSXBase.HTMLAttributes<HTMLHyCtaButtonElement>;
'hy-cta-link': LocalJSX.HyCtaLink & JSXBase.HTMLAttributes<HTMLHyCtaLinkElement>;
'hy-desktop-menu-links': LocalJSX.HyDesktopMenuLinks & JSXBase.HTMLAttributes<HTMLHyDesktopMenuLinksElement>;
- 'hy-desktop-menu-panel': LocalJSX.HyDesktopMenuPanel & JSXBase.HTMLAttributes<HTMLHyDesktopMenuPanelElement>;
'hy-docs-container': LocalJSX.HyDocsContainer & JSXBase.HTMLAttributes<HTMLHyDocsContainerElement>;
'hy-footer': LocalJSX.HyFooter & JSXBase.HTMLAttributes<HTMLHyFooterElement>;
'hy-footer-action': LocalJSX.HyFooterAction & JSXBase.HTMLAttributes<HTMLHyFooterActionElement>;
diff --git a/src/components/icon/readme.md b/src/components/icon/readme.md
index 2289e926..80ed4364 100644
--- a/src/components/icon/readme.md
+++ b/src/components/icon/readme.md
@@ -20,7 +20,6 @@
- [hy-cta-button](../cta-button)
- [hy-cta-link](../cta-link)
- [hy-desktop-menu-links](../site-header/hy-desktop-menu-links)
-- [hy-desktop-menu-panel](../site-header/hy-desktop-menu-panel)
- [hy-footer-action](../footer/hy-footer-action)
- [hy-footer-base](../footer/hy-footer-base)
- [hy-footer-link-item](../footer/hy-footer-link-item)
@@ -47,7 +46,6 @@ graph TD;
hy-cta-button --> hy-icon
hy-cta-link --> hy-icon
hy-desktop-menu-links --> hy-icon
- hy-desktop-menu-panel --> hy-icon
hy-footer-action --> hy-icon
hy-footer-base --> hy-icon
hy-footer-link-item --> hy-icon
diff --git a/src/components/site-header/hy-desktop-menu-links/hy-desktop-menu-links.scss b/src/components/site-header/hy-desktop-menu-links/hy-desktop-menu-links.scss
index ecb1cabc..4c6ad304 100644
--- a/src/components/site-header/hy-desktop-menu-links/hy-desktop-menu-links.scss
+++ b/src/components/site-header/hy-desktop-menu-links/hy-desktop-menu-links.scss
@@ -57,3 +57,33 @@
}
}
}
+
+.hy-desktop-menu-panel {
+ display: none;
+
+ &--is-active {
+ border: 1px solid red;
+ background-color: var(--grayscale-white);
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ opacity: 1;
+ position: absolute;
+ left: 0;
+ top: 90px;
+ width: 100%;
+ z-index: 510;
+ }
+
+ &__desktop-menu {
+ position: relative;
+ left: 300px;
+ width: 50%;
+ }
+
+ &__panel-toggle {
+ position: absolute;
+ right: 10px;
+ top: 10px;
+ }
+}
diff --git a/src/components/site-header/hy-desktop-menu-links/hy-desktop-menu-links.tsx b/src/components/site-header/hy-desktop-menu-links/hy-desktop-menu-links.tsx
index a3861267..23c4c40e 100644
--- a/src/components/site-header/hy-desktop-menu-links/hy-desktop-menu-links.tsx
+++ b/src/components/site-header/hy-desktop-menu-links/hy-desktop-menu-links.tsx
@@ -4,6 +4,7 @@ export interface DesktopLinks {
menuLinkId: string;
}
+import {ColorVariant} from '../../../utils/utils';
import {Component, h, Element, Listen, Prop, State, Watch} from '@stencil/core';
@Component({
@@ -29,19 +30,16 @@ export class HyDesktopMenuLinks {
}
closeDesktopMenuPanel() {
- let hySiteHeader = document.querySelectorAll('hy-site-header')[0];
-
// Remove is-active from desktop menu links.
- let hyDesktopMenuLinks = hySiteHeader.shadowRoot.querySelector('hy-desktop-menu-links');
- let desktopMenuItems = hyDesktopMenuLinks.shadowRoot.querySelectorAll('.desktop-menu-link');
+ let desktopMenuItems = this.el.shadowRoot.querySelectorAll('.desktop-menu-link');
desktopMenuItems.forEach((item) => {
(item as HTMLElement).classList.remove('desktop-menu-link--is-active');
});
// Close desktop menu panel.
- let hyDesktopPanel = hySiteHeader.shadowRoot.querySelector('hy-desktop-menu-panel');
+ let hyDesktopPanel = this.el.shadowRoot.querySelectorAll('.hy-desktop-menu-panel')[0];
if (hyDesktopPanel) {
- //hide panel, remove class is-active
+ // Hide panel, remove class is-active.
(hyDesktopPanel as HTMLElement).classList.remove('hy-desktop-menu-panel--is-active');
let parentMenu = document.querySelectorAll('hy-menu-level-container[menu-level="2"]');
@@ -63,6 +61,7 @@ export class HyDesktopMenuLinks {
//Show desktop menu panel
handleMenuDesktopHover(id) {
+ // Set is-active class for the desktop menu selected link to highlight it.
let desktopMenuItems = this.el.shadowRoot.querySelectorAll('.desktop-menu-link');
desktopMenuItems.forEach((item) => {
(item as HTMLElement).classList.remove('desktop-menu-link--is-active');
@@ -70,35 +69,29 @@ export class HyDesktopMenuLinks {
let desktopMenuActivatedItems = this.el.shadowRoot.querySelectorAll('.desktop-menu-link[link-id="' + id + '"]');
(desktopMenuActivatedItems[0] as HTMLElement).classList.add('desktop-menu-link--is-active');
- let hySiteHeader = document.querySelectorAll('hy-site-header')[0];
- if (hySiteHeader) {
- let hyDesktopPanel = hySiteHeader.shadowRoot.querySelector('hy-desktop-menu-panel');
-
- if (hyDesktopPanel) {
- //show panel, add class is-active
- (hyDesktopPanel as HTMLElement).classList.add('hy-desktop-menu-panel--is-active');
-
- //@todo show proper subtree on panel based on given menu-link-id
- // Hide all menu-item that have other menu-link-id attribute value.
- let menuItems = document.querySelectorAll('hy-site-header hy-menu-item');
- menuItems.forEach((item) => {
- (item as HTMLElement).classList.remove('hy-menu-item--is-active');
+ let hyDesktopPanel = this.el.shadowRoot.querySelectorAll('.hy-desktop-menu-panel')[0];
+ if (hyDesktopPanel) {
+ // Show panel, add class is-active.
+ (hyDesktopPanel as HTMLElement).classList.add('hy-desktop-menu-panel--is-active');
+
+ //@todo show proper subtree on panel based on given menu-link-id
+ // Hide all menu-item that have other menu-link-id attribute value.
+ let menuItems = document.querySelectorAll('hy-site-header hy-menu-item');
+ menuItems.forEach((item) => {
+ (item as HTMLElement).classList.remove('hy-menu-item--is-active');
+ });
+
+ let menuActivatedItems = document.querySelectorAll('hy-site-header hy-menu-item[menu-link-id="' + id + '"]');
+ (menuActivatedItems[0] as HTMLElement).classList.add('hy-menu-item--is-active');
+
+ let parentMenu = (menuActivatedItems[0] as HTMLElement).querySelector('hy-menu-level-container[menu-level="2"]');
+ if (parentMenu && parentMenu.children) {
+ (parentMenu as HTMLElement).classList.remove('hy-menu-level-container--mobile');
+ (parentMenu as HTMLElement).classList.add('hy-menu-level-container--desktop');
+ const items = Array.from(parentMenu.children);
+ items.forEach((item) => {
+ item.classList.add('hy-menu-item--is-active');
});
-
- let menuActivatedItems = document.querySelectorAll('hy-site-header hy-menu-item[menu-link-id="' + id + '"]');
- (menuActivatedItems[0] as HTMLElement).classList.add('hy-menu-item--is-active');
-
- let parentMenu = (menuActivatedItems[0] as HTMLElement).querySelector(
- 'hy-menu-level-container[menu-level="2"]'
- );
- if (parentMenu && parentMenu.children) {
- (parentMenu as HTMLElement).classList.remove('hy-menu-level-container--mobile');
- (parentMenu as HTMLElement).classList.add('hy-menu-level-container--desktop');
- const items = Array.from(parentMenu.children);
- items.forEach((item) => {
- item.classList.add('hy-menu-item--is-active');
- });
- }
}
}
}
@@ -126,6 +119,27 @@ export class HyDesktopMenuLinks {
}
render() {
- return <div class={'hy-site-header__menu-desktop'}>{this.firstLevelLinksList}</div>;
+ return (
+ <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">
+ <slot></slot>
+ </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>
+ );
}
}
diff --git a/src/components/site-header/hy-desktop-menu-panel/hy-desktop-menu-panel.scss b/src/components/site-header/hy-desktop-menu-panel/hy-desktop-menu-panel.scss
deleted file mode 100644
index aed2a965..00000000
--- a/src/components/site-header/hy-desktop-menu-panel/hy-desktop-menu-panel.scss
+++ /dev/null
@@ -1,26 +0,0 @@
-:host {
- display: none;
-}
-:host(.hy-desktop-menu-panel--is-active) {
- display: block;
-}
-
-.hy-desktop-menu-panel {
- flex-direction: row;
- justify-content: center;
- position: relative;
- top: 10px;
- width: 100%;
-
- &__desktop-menu {
- position: relative;
- left: 300px;
- width: 50%;
- }
-
- &__panel-toggle {
- position: absolute;
- right: 10px;
- top: 10px;
- }
-}
diff --git a/src/components/site-header/hy-desktop-menu-panel/hy-desktop-menu-panel.tsx b/src/components/site-header/hy-desktop-menu-panel/hy-desktop-menu-panel.tsx
deleted file mode 100644
index ff73abc1..00000000
--- a/src/components/site-header/hy-desktop-menu-panel/hy-desktop-menu-panel.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-import {Component, h} from '@stencil/core';
-import {ColorVariant} from '../../../utils/utils';
-
-@Component({
- tag: 'hy-desktop-menu-panel',
- styleUrl: 'hy-desktop-menu-panel.scss',
- shadow: true,
-})
-export class HyDesktopMenuPanel {
- closeDesktopMenuPanel() {
- let hySiteHeader = document.querySelectorAll('hy-site-header')[0];
-
- // Remove is-active from desktop menu links.
- let hyDesktopMenuLinks = hySiteHeader.shadowRoot.querySelector('hy-desktop-menu-links');
- let desktopMenuItems = hyDesktopMenuLinks.shadowRoot.querySelectorAll('.desktop-menu-link');
- desktopMenuItems.forEach((item) => {
- (item as HTMLElement).classList.remove('desktop-menu-link--is-active');
- });
-
- // Close desktop menu panel.
- let hyDesktopPanel = hySiteHeader.shadowRoot.querySelector('hy-desktop-menu-panel');
- if (hyDesktopPanel) {
- //hide panel, remove class is-active
- (hyDesktopPanel as HTMLElement).classList.remove('hy-desktop-menu-panel--is-active');
-
- let parentMenu = document.querySelectorAll('hy-menu-level-container[menu-level="2"]');
- if (parentMenu) {
- const items = Array.from(parentMenu);
- items.forEach((item) => {
- item.classList.add('hy-menu-level-container--mobile');
- item.classList.remove('hy-menu-level-container--desktop');
- });
- }
- }
- }
-
- render() {
- const classAttributes = ['hy-desktop-menu-panel'].join(' ');
-
- return (
- <div class={classAttributes} onMouseLeave={() => this.closeDesktopMenuPanel()}>
- <div class="hy-desktop-menu-panel__desktop-menu">
- <slot></slot>
- </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>
- );
- }
-}
diff --git a/src/components/site-header/hy-desktop-menu-panel/readme.md b/src/components/site-header/hy-desktop-menu-panel/readme.md
deleted file mode 100644
index 51da121c..00000000
--- a/src/components/site-header/hy-desktop-menu-panel/readme.md
+++ /dev/null
@@ -1,26 +0,0 @@
-# hy-desktop-menu-panel
-
-<!-- Auto Generated Below -->
-
-## Dependencies
-
-### Used by
-
-- [hy-site-header](..)
-
-### Depends on
-
-- [hy-icon](../../icon)
-
-### Graph
-
-```mermaid
-graph TD;
- hy-desktop-menu-panel --> hy-icon
- hy-site-header --> hy-desktop-menu-panel
- style hy-desktop-menu-panel fill:#f9f,stroke:#333,stroke-width:4px
-```
-
----
-
-Helsinki University Design System
diff --git a/src/components/site-header/readme.md b/src/components/site-header/readme.md
index 119c5f02..ca762fc5 100644
--- a/src/components/site-header/readme.md
+++ b/src/components/site-header/readme.md
@@ -25,7 +25,6 @@
- [hy-menu-language](../navigation/menu-language)
- [hy-site-search](site-search)
- [hy-icon](../icon)
-- [hy-desktop-menu-panel](hy-desktop-menu-panel)
### Graph
@@ -36,13 +35,11 @@ graph TD;
hy-site-header --> hy-menu-language
hy-site-header --> hy-site-search
hy-site-header --> hy-icon
- hy-site-header --> hy-desktop-menu-panel
hy-site-logo --> hy-icon
hy-desktop-menu-links --> hy-icon
hy-menu-language --> hy-menu-language-item
hy-menu-language --> hy-icon
hy-site-search --> hy-icon
- hy-desktop-menu-panel --> hy-icon
style hy-site-header fill:#f9f,stroke:#333,stroke-width:4px
```
diff --git a/src/components/site-header/site-header.tsx b/src/components/site-header/site-header.tsx
index a3f5fc81..89390f5b 100644
--- a/src/components/site-header/site-header.tsx
+++ b/src/components/site-header/site-header.tsx
@@ -128,7 +128,9 @@ export class SiteHeader {
<hy-site-logo size={logoSize} color={logoColor} url={this.logoUrl} label={this.logoLabel} />
</div>
- <hy-desktop-menu-links data-desktop-links={this.dataDesktopLinks}></hy-desktop-menu-links>
+ <hy-desktop-menu-links data-desktop-links={this.dataDesktopLinks}>
+ <slot name={'menu'} />
+ </hy-desktop-menu-links>
<div class={'menu--secondary'}>
<hy-menu-language
@@ -154,9 +156,6 @@ export class SiteHeader {
})}
</div>
</header>,
- <hy-desktop-menu-panel>
- <slot name={'menu'} />
- </hy-desktop-menu-panel>,
];
case MenuType.tablet:
return (
--
GitLab