@itcenteratunihelsinki/huds-lib 0.5.12 → 0.5.16

package/dist/collection/components/navigation/menu-item/menu-item.css

@@ -61,13 +61,7 @@
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
-  margin-bottom: 5px;
-}
-
-@media (min-width: 30rem) {
-  :host(.hy-menu-item--mobile) {
-    margin-bottom: 6px;
-  }
+  margin-bottom: 4px;
 }
 
 :host(.hy-menu-item--mobile.hy-menu-item--alternative) {
@@ -116,19 +110,19 @@
 :host(.hy-menu-item) a {
   font-size: 1rem;
   line-height: 20px;
-  font-weight: 400;
+  font-weight: 600;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  color: var(--brand-main-nearly-black);
+  color: var(--brand-main);
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   font-family: var(--main-font-family);
   letter-spacing: -0.5px;
-  padding: 24px 16px;
   text-decoration: none;
   width: 100%;
+  padding: 12px 16px;
 }
 
 :host(.hy-menu-item) a:focus {
@@ -136,19 +130,30 @@
   outline-offset: -2px;
 }
 
-:host(.hy-menu-item) a.hy-menu-item--mobile {
-  background: -webkit-gradient(linear, right top, left top, from(var(--grayscale-background-box)), to(var(--grayscale-light)));
-  background: linear-gradient(270deg, var(--grayscale-background-box) 0%, var(--grayscale-light) 100%);
-  color: var(--link-blue);
-  padding: 14px 12px 14px 20px;
+:host(.hy-menu-item) a .hy-menu-item__label hy-icon {
+  display: -webkit-inline-box !important;
+  display: -ms-inline-flexbox !important;
+  display: inline-flex !important;
+  margin-left: 6px;
+  margin-right: 0;
+  -webkit-transform: rotate(-45deg);
+  transform: rotate(-45deg);
+}
+
+:host(.hy-menu-item) a .hy-menu-item__label hy-icon svg {
+  fill: var(--brand-main);
 }
 
 :host(.hy-menu-item) a.hy-menu-item--mobile.first {
+  font-size: 1.3125rem;
+  line-height: 28px;
   font-weight: 700;
+  color: var(--brand-main-light);
+  letter-spacing: -0.42px;
+  padding: 16px 0 16px 16px;
 }
 
 :host(.hy-menu-item) a.hy-menu-item--mobile.is-active {
-  font-weight: 600;
   color: var(--grayscale-black);
   position: relative;
 }
@@ -164,32 +169,23 @@
   transform: translate(-50%, -50%);
 }
 
-:host(.hy-menu-item) a.hy-menu-item--mobile.is-heading {
-  font-size: 1.5rem;
-  line-height: 28px;
+:host(.hy-menu-item) a.hy-menu-item--mobile.in-active-trail {
   font-weight: 700;
-  letter-spacing: -0.6px;
-  position: relative;
-  text-transform: uppercase;
+  color: var(--grayscale-black);
 }
 
-:host(.hy-menu-item) a.hy-menu-item--mobile.is-heading:not(.is-active):not(.is-active-trail) {
-  color: var(--brand-main-light);
-  margin-top: 8px;
-  padding-bottom: 12px;
-  padding-right: 8px;
-  padding-top: 12px;
+:host(.hy-menu-item) a.hy-menu-item--mobile.in-active-trail:before {
+  border-left-width: 3px;
+  height: 55%;
 }
 
-:host(.hy-menu-item) a.hy-menu-item--mobile.is-heading:not(.is-active):not(.is-active-trail):before {
-  background-color: var(--brand-main-light);
-  content: "";
-  display: block;
-  height: 3px;
-  left: 0;
-  position: absolute;
-  right: 0;
-  top: -8px;
+:host(.hy-menu-item) a.hy-menu-item--mobile.is-heading {
+  font-size: 1.3125rem;
+  line-height: 28px;
+  font-weight: 700;
+  color: var(--brand-main-light);
+  letter-spacing: -0.42px;
+  padding: 16px;
 }
 
 :host(.hy-menu-item) a.hy-menu-item--mobile.is-heading.is-active, :host(.hy-menu-item) a.hy-menu-item--mobile.is-heading.in-active-trail {
@@ -197,16 +193,25 @@
   background: transparent;
   border-bottom: 0;
   color: var(--grayscale-black);
-  margin-top: -12px;
-  padding-bottom: 24px;
-  padding-top: 24px;
 }
 
 :host(.hy-menu-item) a.hy-menu-item--mobile.is-heading.is-active:before, :host(.hy-menu-item) a.hy-menu-item--mobile.is-heading.in-active-trail:before {
-  border-left-width: 5px;
+  border-left-width: 3px;
   height: 55%;
 }
 
+:host(.hy-menu-item) a.hy-menu-item--mobile > hy-icon {
+  -ms-flex-item-align: start;
+  align-self: flex-start;
+  margin-top: 10px;
+  -webkit-transform: translateY(-50%);
+  transform: translateY(-50%);
+}
+
+:host(.hy-menu-item) a.hy-menu-item--mobile hy-icon + .hy-menu-item__label {
+  margin-left: 10px;
+}
+
 :host(.hy-menu-item) a.is-heading {
   display: inherit;
 }
@@ -306,24 +311,38 @@
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  background: -webkit-gradient(linear, right top, left top, from(var(--grayscale-background-box)), to(var(--grayscale-light)));
-  background: linear-gradient(270deg, var(--grayscale-background-box) 0%, var(--grayscale-light) 100%);
+  background: transparent;
+  border: 0;
   border-bottom: 0;
-  border-left: 1px solid var(--brand-main-light);
   border-right: 0;
   border-top: 0;
   cursor: pointer;
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
   -webkit-box-pack: center;
   -ms-flex-pack: center;
   justify-content: center;
-  margin-left: 6px;
   padding: 0;
-  width: 54px;
+  width: 44px;
+  position: relative;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+}
+
+.hy-menu-item__button:before {
+  background-color: var(--grayscale-medium);
+  width: 1px;
+  height: 32px;
+  content: "";
+  display: inline-block;
+  -webkit-transform: translateY(-50%);
+  transform: translateY(-50%);
+  top: 50%;
+  left: 0;
+  position: absolute;
 }
 
 .hy-menu-item__button svg {
-  fill: var(--brand-main-light);
+  fill: var(--grayscale-black);
 }

package/dist/collection/components/navigation/menu-item/menu-item.js

@@ -8,6 +8,7 @@ export class MenuItem {
     this.isHeading = false;
     this.isParent = false;
     this.isDemo = false;
+    this.isExternal = false;
     //@Prop() depth: number = 0;
     this.menuItemAlternative = false;
     this.menuLinkId = '';
@@ -116,11 +117,15 @@ export class MenuItem {
               'is-heading': this.isHeading,
               'hy-menu-item--mobile': true,
               'is-demo': this.isDemo,
+              'is-external': this.isExternal,
               first: this.depth == 1,
             } },
-            h("span", { class: 'hy-menu-item__label' }, this.label)),
+            this.depth !== 1 && !this.isHeading && h("hy-icon", { icon: 'hy-icon-caret-right', size: 10 }),
+            h("span", { class: 'hy-menu-item__label' },
+              this.label,
+              this.isExternal && h("hy-icon", { icon: 'hy-icon-arrow-right', size: 12 }))),
           this.hasChildren && (h("button", { "aria-haspopup": 'true', "aria-label": `Open submenu for ${this.label}`, onClick: () => this.handleClick(), class: 'hy-menu-item__button' },
-            h("hy-icon", { icon: 'hy-icon-caret-right', size: 14 }))),
+            h("hy-icon", { icon: 'hy-icon-caret-right', size: 16 }))),
           this.hasChildren && h("slot", null)));
       case MenuType.sidenav:
         let classAttributes = [
@@ -257,6 +262,24 @@ export class MenuItem {
       "reflect": false,
       "defaultValue": "false"
     },
+    "isExternal": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "is-external",
+      "reflect": false,
+      "defaultValue": "false"
+    },
     "menuItemAlternative": {
       "type": "boolean",
       "mutable": false,

package/dist/collection/components/navigation/menu-language/menu-language.css

@@ -56,153 +56,116 @@
   --breakpoint-wide: 60rem;
 }
 
-:host(.menu--language) {
+.menu-language {
+  position: relative;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
-  -webkit-box-orient: horizontal;
-  -webkit-box-direction: normal;
-  -ms-flex-flow: row;
-  flex-flow: row;
-  height: 44px;
-  position: absolute;
-  right: 16px;
-  top: 0;
-}
-
-@media (min-width: 30rem) {
-  :host(.menu--language) {
-    right: 28px;
-  }
-}
-
-@media (min-width: 30rem) {
-  :host(.menu--language:not([is-mobile])) {
-    height: 100%;
-    position: relative;
-    right: auto;
-    top: auto;
-  }
-}
-
-@media (min-width: 60rem) {
-  :host(.menu--language__is-open)::after {
-    content: " ";
-    height: 4px;
-    background-color: var(--grayscale-black);
-    display: block;
-    width: 100%;
-    position: absolute;
-    bottom: 0;
-  }
+  height: 100%;
 }
 
-.menu--language__toggle {
+.menu-language__toggle {
+  font-size: 1rem;
+  line-height: 16px;
+  font-weight: 700;
+  color: var(--grayscale-black);
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  border: 0 none;
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-orient: horizontal;
-  -webkit-box-direction: normal;
-  -ms-flex-flow: row;
-  flex-flow: row;
+  background-color: transparent;
+  border: 0;
+  display: inline-grid;
   font-family: var(--main-font-family);
-  margin: 0 -4px;
-  padding: 0;
+  gap: 4px;
+  grid-template-columns: repeat(2, auto);
+  letter-spacing: -0.7px;
+  margin: 0;
+  padding: 14px 10px;
   text-transform: uppercase;
+  height: 100%;
 }
 
-.menu--language__toggle:focus {
-  outline: solid 2px var(--additional-yellow);
-  outline-offset: 2px;
+@media (min-width: 75.0625rem) {
+  .menu-language__toggle {
+    font-size: 0.75rem;
+    line-height: 24px;
+    font-weight: 400;
+    color: var(--brand-main-nearly-black);
+    letter-spacing: -0.5px;
+    grid-template-columns: repeat(3, auto);
+    padding: 0;
+  }
 }
 
-.menu--language__toggle.is-open .menu--language__toggle__caret {
-  -webkit-transform: rotate(180deg);
-  transform: rotate(180deg);
+@media (min-width: 1601px) {
+  .menu-language__toggle {
+    font-size: 0.875rem;
+    line-height: 24px;
+  }
 }
 
-.menu--language__toggle > * {
-  padding: 0 4px;
+.menu-language__toggle:hover {
+  color: var(--brand-main);
+  cursor: pointer;
 }
 
-.menu--language__toggle span {
-  padding: 0;
+.menu-language__toggle:hover svg {
+  fill: var(--brand-main);
 }
 
-.menu--language__toggle:not(.group) {
-  font-size: 0.875rem;
-  line-height: 24px;
-  font-weight: 600;
-  background: var(--grayscale-white);
-  color: var(--brand-main-nearly-black);
-  letter-spacing: -0.4px;
+.menu-language__toggle:focus {
+  outline: solid 2px var(--additional-yellow);
+  outline-offset: 2px;
 }
 
-.menu--language__toggle:not(.group):hover {
-  color: var(--brand-main);
-  cursor: pointer;
+.menu-language__toggle hy-icon:first-of-type {
+  display: none !important;
 }
 
-.menu--language__toggle:not(.group):hover span {
-  color: var(--brand-main);
+@media (min-width: 75.0625rem) {
+  .menu-language__toggle hy-icon:first-of-type {
+    display: -webkit-inline-box !important;
+    display: -ms-inline-flexbox !important;
+    display: inline-flex !important;
+  }
 }
 
-.menu--language__toggle:not(.group):hover svg {
-  fill: var(--brand-main);
+.menu-language__toggle[aria-expanded=true] {
+  position: relative;
 }
 
-@media (min-width: 75.0625rem) {
-  .menu--language__toggle:not(.group) {
-    font-size: 0.75rem;
-    line-height: 12px;
-    font-weight: 400;
-    letter-spacing: -0.6px;
-  }
+.menu-language__toggle[aria-expanded=true]:after {
+  content: "";
+  position: absolute;
+  height: 4px;
+  right: 0;
+  bottom: -1px;
+  left: 0;
+  background-color: var(--grayscale-black);
 }
 
-@media (min-width: 1601px) {
-  .menu--language__toggle:not(.group) {
-    font-size: 0.875rem;
-    line-height: 24px;
-    letter-spacing: -0.5px;
-  }
+.menu-language__toggle[aria-expanded=true] span + hy-icon {
+  -webkit-transform: rotate(180deg);
+  transform: rotate(180deg);
 }
 
-.menu--language__toggle.group {
-  background: var(--grayscale-black);
+.is-group .menu-language__toggle {
   color: var(--grayscale-white);
-  font-size: 0.875rem;
-  line-height: 24px;
-  font-weight: 600;
-  letter-spacing: -0.5px;
 }
 
-.menu--language__toggle.group:hover {
+.is-group .menu-language__toggle:hover {
   color: var(--grayscale-medium);
   cursor: pointer;
 }
 
-.menu--language__toggle.group:hover span {
-  color: var(--grayscale-medium);
-}
-
-.menu--language__toggle.group:hover svg {
+.is-group .menu-language__toggle:hover svg {
   fill: var(--grayscale-medium);
 }
 
-.menu--language__dropdown {
-  display: none;
-  visibility: hidden;
-}
-
-.menu--language__dropdown.is-open {
+.menu-language__dropdown {
   background-color: var(--grayscale-white);
   border-radius: 0 0 5px 5px;
   -webkit-box-shadow: 0 10px 10px rgba(0, 0, 0, 0.2);
@@ -215,9 +178,9 @@
   -ms-flex-flow: column;
   flex-flow: column;
   justify-items: center;
-  left: -15px;
+  right: -15px;
   margin: 0;
-  padding: 15px;
+  padding: 8px;
   position: absolute;
   text-transform: uppercase;
   visibility: visible;
@@ -225,45 +188,24 @@
   width: -moz-max-content;
   width: max-content;
   z-index: 100;
+  min-width: 160px;
 }
 
-@media (min-width: 60rem) {
-  .menu--language__dropdown.is-open {
-    left: -20px;
-    min-width: 160px;
-    padding: 6px 8px;
-  }
-}
-
-@media (min-width: 1601px) {
-  .menu--language__dropdown.is-open {
-    padding: 8px;
-  }
-}
-
-.menu--language__dropdown.is-open a {
-  font-size: 1rem;
-  line-height: 20px;
-  margin-left: 0;
-}
-
-@media (min-width: 60rem) {
-  .menu--language__globe-icon:not(.group) svg {
-    height: 16px;
-    width: 16px;
-  }
+.menu-language__dropdown[aria-hidden=true] {
+  display: none;
 }
 
 @media (min-width: 75.0625rem) {
-  .menu--language__globe-icon:not(.group) svg {
-    height: 12px;
-    width: 12px;
+  .menu-language__dropdown {
+    left: -15px;
+    right: 0;
   }
 }
 
-@media (min-width: 1601px) {
-  .menu--language__globe-icon:not(.group) svg {
-    height: 16px;
-    width: 16px;
-  }
+.menu-language__links {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  display: grid;
+  gap: 4px;
 }

package/dist/collection/components/navigation/menu-language/menu-language.js

@@ -1,8 +1,7 @@
-import { Component, h, Prop, Host, Element, Listen, State, Event } from '@stencil/core';
+import { Component, h, Prop, Element, Listen, State, Event } from '@stencil/core';
 import { jsonParserWorker } from '../../../global/globalScript';
 export class MenuLanguage {
   constructor() {
-    this.isMobile = false;
     this.isGroup = false;
     this.isMenuOpen = false;
   }
@@ -39,7 +38,7 @@ export class MenuLanguage {
     event.stopPropagation();
   }
   adjustPosition(languageMenuSelector, target) {
-    const languagePanel = languageMenuSelector.shadowRoot.querySelectorAll(`.menu--language__dropdown`)[0];
+    const languagePanel = languageMenuSelector.shadowRoot.querySelectorAll(`.menu-language__dropdown`)[0];
     let headerHeight = '0';
     let hyHeader = this.isGroup
       ? target.closest('.hy-site-header__content-top')
@@ -60,30 +59,27 @@ export class MenuLanguage {
     const white = 'var(--grayscale-white)';
     const svgColor = this.isGroup ? white : black;
     const globeIconSize = this.isGroup ? 16 : 14;
-    return this.isMobile ? (h(Host, { class: 'menu--language' }, this._dataMenuLanguage.map((item) => {
-      return (h("hy-menu-language-item", { "lang-code": item.langCode, url: item.url, label: item.label, abbr: item.abbr, "is-active": item.isActive, "is-disabled": item.isDisabled, "is-mobile": this.isMobile }));
-    }))) : (h(Host, { class: {
-        'menu--language': true,
-        'menu--language__is-open': this.isMenuOpen,
+    return (h("div", { class: {
+        'menu-language': true,
+        'is-open': this.isMenuOpen,
+        'is-group': this.isGroup,
       } },
       h("button", { class: {
-          'menu--language__toggle': true,
-          'is-open': this.isMenuOpen,
-          group: this.isGroup,
-        }, "aria-label": this.isMenuOpen ? this._labels['close'] : this._labels['open'] },
-        h("hy-icon", { class: { 'menu--language__globe-icon': true, group: this.isGroup }, icon: 'hy-icon-globe', size: globeIconSize, fill: svgColor }),
-        h("span", { class: { group: this.isGroup } }, this._dataMenuLanguage.map((item) => {
-          if (item.isActive) {
-            return item.langCode;
+          'menu-language__toggle': true,
+        }, "aria-label": this.isMenuOpen ? this._labels['close'] : this._labels['open'], "aria-expanded": `${this.isMenuOpen}` },
+        h("hy-icon", { icon: 'hy-icon-globe', size: globeIconSize, fill: svgColor }),
+        h("span", null, this._dataMenuLanguage.map(({ isActive, langCode }) => {
+          if (isActive) {
+            return langCode;
           }
         })),
-        h("hy-icon", { class: 'menu--language__toggle__caret', icon: 'hy-icon-caret-down', size: 8, fill: svgColor })),
+        h("hy-icon", { icon: 'hy-icon-caret-down', size: 8, fill: svgColor })),
       h("div", { class: {
-          'menu--language__dropdown': true,
-          'is-open': this.isMenuOpen,
-        } }, this._dataMenuLanguage.map((item) => {
-        return (h("hy-menu-language-item", { "lang-code": item.langCode, url: item.url, label: item.label, abbr: item.abbr, "is-active": item.isActive, "is-disabled": item.isDisabled, "is-mobile": this.isMobile }));
-      }))));
+          'menu-language__dropdown': true,
+        }, "aria-hidden": `${!this.isMenuOpen}` },
+        h("ul", { class: "menu-language__links" }, this._dataMenuLanguage.map((item) => {
+          return (h("hy-menu-language-item", { "lang-code": item.langCode, url: item.url, label: item.label, abbr: item.abbr, "is-active": item.isActive, "is-disabled": item.isDisabled }));
+        })))));
   }
   static get is() { return "hy-menu-language"; }
   static get encapsulation() { return "shadow"; }
@@ -115,24 +111,6 @@ export class MenuLanguage {
       "attribute": "data-menu-language",
       "reflect": false
     },
-    "isMobile": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "is-mobile",
-      "reflect": false,
-      "defaultValue": "false"
-    },
     "isGroup": {
       "type": "boolean",
       "mutable": false,