@itcenteratunihelsinki/huds-lib 0.5.12 → 0.5.16

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

@@ -56,100 +56,34 @@
   --breakpoint-wide: 60rem;
 }
 
-:host(.hy-menu-item) {
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-}
-
-a {
-  font-size: 0.75rem;
-  line-height: 12px;
-  font-weight: 400;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  color: var(--brand-main-nearly-black);
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
+.menu-language__link {
+  font-size: 1rem;
+  line-height: 24px;
+  font-weight: 600;
+  color: var(--brand-main-light);
   font-family: var(--main-font-family);
   letter-spacing: -0.5px;
-  margin-left: 8px;
-  position: relative;
+  overflow: hidden;
   text-decoration: none;
-  text-transform: uppercase;
-}
-
-@media (min-width: 60rem) {
-  a {
-    font-size: 0.875rem;
-    line-height: 20px;
-    font-weight: 600;
-    color: var(--brand-main-light);
-    letter-spacing: -0.5px;
-    margin-left: 20px;
-    padding: 8px 12px;
-    text-transform: none;
-  }
-  a:hover {
-    background-color: var(--grayscale-background-box);
-    color: var(--brand-main);
-  }
+  padding: 12px 12px;
+  display: block;
 }
 
-@media (min-width: 1601px) {
-  a {
-    font-size: 1rem;
-    line-height: 20px;
-    letter-spacing: -0.53px;
-    padding: 12px 12px;
-  }
+.menu-language__link:hover {
+  background-color: var(--grayscale-background-box);
+  color: var(--brand-main);
 }
 
-a:focus {
-  outline: solid 2px var(--additional-yellow);
-  outline-offset: 2px;
-}
-
-a.is-active {
-  font-weight: 700;
+.menu-language__link.is-active {
   color: var(--grayscale-black);
+  border: 2px solid var(--grayscale-black);
 }
 
-@media (min-width: 60rem) {
-  a.is-active {
-    font-weight: 600;
-    border: 2px solid var(--grayscale-black);
-  }
-}
-
-a.is-active .hy-menu-language-item__label:after {
-  content: " ";
-  border-bottom: 2px solid var(--grayscale-black);
-  bottom: -6px;
-  left: 0;
-  position: absolute;
-  -webkit-transform: scaleX(-1) scaleY(-1);
-  transform: scaleX(-1) scaleY(-1);
-  width: 100%;
-}
-
-@media (min-width: 60rem) {
-  a.is-active .hy-menu-language-item__label:after {
-    border: none;
-  }
-}
-
-a.is-disabled {
+.menu-language__link.is-disabled {
   color: var(--link-disabled);
 }
 
-a.is-disabled:hover {
+.menu-language__link.is-disabled:hover {
   background-color: transparent;
   color: var(--link-disabled);
-}
-
-a:not(.is-mobile) {
-  margin: 0;
 }

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

@@ -1,22 +1,16 @@
-import { Component, h, Prop, Host } from '@stencil/core';
+import { Component, h, Prop } from '@stencil/core';
 export class SiteLanguage {
   constructor() {
     this.isActive = false;
     this.isDisabled = false;
-    this.isMobile = false;
   }
   render() {
-    return (h(Host, { class: {
-        'is-active': this.isActive,
-        'is-disabled': this.isDisabled,
-        'hy-menu-language-item': true,
-      } },
+    return (h("li", { class: `menu-language__links-item` },
       h("a", { href: this.url, class: {
           'is-active': this.isActive,
           'is-disabled': this.isDisabled,
-          'is-mobile': this.isMobile,
-        } },
-        h("span", { class: 'hy-menu-language-item__label' }, this.isMobile ? this.abbr : this.label))));
+          'menu-language__link': true,
+        } }, this.label)));
   }
   static get is() { return "hy-menu-language-item"; }
   static get encapsulation() { return "shadow"; }
@@ -80,24 +74,6 @@ export class SiteLanguage {
       "reflect": false,
       "defaultValue": "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"
-    },
     "label": {
       "type": "string",
       "mutable": false,

package/dist/collection/components/navigation/menu-level-container/menu-level-container.css

@@ -78,6 +78,7 @@
   -webkit-transform: translateX(0);
   transform: translateX(0);
   visibility: visible !important;
+  padding-bottom: 96px;
 }
 
 .hy-menu-level-container--mobile.hy-menu-level-container--level-0 {

package/dist/collection/components/navigation/menu-level-container/menu-level-container.js

@@ -100,7 +100,8 @@ export class MenuLevelContainer {
           classAttributes = [...classAttributes, this.menuIsOpen ? 'is-open' : null];
           return (h(Host, { "aria-expanded": this.menuIsOpen.toString(), class: classAttributes.join(' '), tabindex: '-1' },
             h("hy-menu-item", { label: this.headingItem.label, url: this.headingItem.url, isHeading: true, isActive: this.headingItem.isActive, "menu-type": 'mobile', depth: this.menuLevel }),
-            h("slot", null)));
+            h("slot", null),
+            h("slot", { name: "shortcuts" })));
         }
       case MenuType.sidenav:
         if (this.depth === 0) {

package/dist/collection/components/navigation/menu-mobile-breadcrumb/menu-mobile-breadcrumb.css

@@ -57,25 +57,23 @@
 }
 
 .hy-menu-mobile-breadcrumb {
+  font-size: 0.9375rem;
+  line-height: 22px;
+  font-weight: 400;
+  color: var(--brand-main-light);
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
   background-color: transparent;
   border: 0 none;
   cursor: pointer;
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
   font-family: var(--main-font-family);
-  margin-left: 16px;
-  padding: 12px 0;
   text-decoration: none;
-}
-
-@media (min-width: 30rem) {
-  .hy-menu-mobile-breadcrumb {
-    margin-left: 28px;
-  }
+  padding: 11px 0;
+  text-align: left;
 }
 
 .hy-menu-mobile-breadcrumb:focus {
@@ -83,26 +81,10 @@
   outline-offset: 2px;
 }
 
-.hy-menu-mobile-breadcrumb svg {
-  fill: var(--brand-main-light);
-}
-
-.hy-menu-mobile-breadcrumb__label {
-  font-size: 1rem;
-  line-height: 20px;
-  font-weight: 400;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  color: var(--brand-main-light);
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  letter-spacing: -0.5px;
-  margin-left: 6px;
-  text-align: left;
+.hy-menu-mobile-breadcrumb hy-icon {
+  margin-right: 8px;
 }
 
-.hy-menu-mobile-breadcrumb__label__slash {
-  padding-left: 5px;
+.hy-menu-mobile-breadcrumb hy-icon svg {
+  fill: var(--grayscale-black);
 }

package/dist/collection/components/navigation/menu-mobile-breadcrumb/menu-mobile-breadcrumb.js

@@ -9,15 +9,9 @@ export class MenuMobileBreadcrumb {
   }
   render() {
     return this.isFirst ? (h("a", { "aria-label": `${this.labelBack}: ${this.labelFrontPage}`, class: 'hy-menu-mobile-breadcrumb', href: this.logoUrl },
-      h("hy-icon", { icon: 'hy-icon-caret-left', size: 12 }),
       h("span", { class: 'hy-menu-mobile-breadcrumb__label' }, this.label))) : (h("button", { "aria-label": `${this.labelBack}: ${this.label}`, class: 'hy-menu-mobile-breadcrumb', onClick: () => this.handleClick() },
-      h("hy-icon", { icon: 'hy-icon-caret-left', size: 12 }),
-      h("span", { class: 'hy-menu-mobile-breadcrumb__label' },
-        this.label,
-        h("span", { class: 'hy-menu-mobile-breadcrumb__label__slash', "aria-hidden": 'true' },
-          ' ',
-          "/",
-          ' '))));
+      h("hy-icon", { icon: 'hy-icon-caret-left', size: 10 }),
+      h("span", { class: 'hy-menu-mobile-breadcrumb__label' }, this.label)));
   }
   static get is() { return "hy-menu-mobile-breadcrumb"; }
   static get originalStyleUrls() { return {

package/dist/collection/components/navigation/mobile-menu-shortcuts/mobile-menu-shortcuts.css

@@ -0,0 +1,140 @@
+:root {
+  --brand-main: #0e688b;
+  --brand-main-soft: #b1e7ff;
+  --brand-main-bright: #48c5f8;
+  --brand-main-light: #107eab;
+  --brand-main-active: #005379;
+  --brand-main-dark: #003146;
+  --brand-main-nearly-black: #000222;
+  --link-blue: #0479a4;
+  --link-disabled: #767676;
+  --grayscale-white: #fff;
+  --grayscale-slightly-gray: #fefefe;
+  --grayscale-light: #f8f8f8;
+  --grayscale-medium: #d2d2d2;
+  --grayscale-background-box: #f5f5f5;
+  --grayscale-tabs-border: #e6e6e6;
+  --grayscale-background-arrow: #dfdfdf;
+  --grayscale-medium-dark: #979797;
+  --grayscale-dark: #555555;
+  --grayscale-dark-text: #222222;
+  --grayscale-black: #000000;
+  --additional-red-light: #e5053a;
+  --additional-red-dark: #a31621;
+  --additional-purple-light: #420039;
+  --additional-yellow: #f9a21a;
+  --additional-skyblue: #48c5f8;
+  --additional-orange: #d14600;
+  --additional-green-light: #96ba3c;
+  --additional-green-dark: #006400;
+  --hover-gray: #eaeaea;
+}
+
+* {
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+:root {
+  --gutter-mobile: 16px;
+  --gutter-narrow: 24px;
+  --gutter-medium: 24px;
+  --gutter-wide: 24px;
+  --gutter-extrawide: 32px;
+}
+
+/**
+ * Mixin for fluid type.
+ * Example usage: @include fluid-type(font-size, 320px, 1600px, 32px, 80px);
+ */
+
+:root {
+  --breakpoint-extrawide: 75.0625rem;
+  --breakpoint-max-width: 75.0625rem;
+  --breakpoint-medium: 48rem;
+  --breakpoint-narrow: 30rem;
+  --breakpoint-wide: 60rem;
+}
+
+:host(.hy-mobile-menu-shortcuts) {
+  margin-top: 24px;
+}
+
+:host(.hy-mobile-menu-shortcuts) > h2 {
+  font-size: 1rem;
+  line-height: 20px;
+  font-weight: 700;
+  color: var(--grayscale-black);
+  font-family: var(--main-font-family);
+  letter-spacing: -0.32px;
+  margin: 0 15px 8px;
+}
+
+:host(.hy-mobile-menu-shortcuts.is-hidden) {
+  visibility: hidden !important;
+}
+
+:host(.hy-mobile-menu-shortcuts.is-hidden):focus {
+  outline: none;
+}
+
+.hy-mobile-menu-shortcuts__links {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: grid;
+  gap: 4px;
+}
+
+.hy-mobile-menu-shortcuts__link {
+  font-size: 1rem;
+  line-height: 20px;
+  font-weight: 600;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  color: var(--brand-main);
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  font-family: var(--main-font-family);
+  letter-spacing: -0.5px;
+  text-decoration: none;
+  width: 100%;
+  padding: 12px 16px;
+}
+
+.hy-mobile-menu-shortcuts__link:focus {
+  outline: solid 2px var(--additional-yellow);
+  outline-offset: -2px;
+}
+
+.hy-mobile-menu-shortcuts__link:hover {
+  text-decoration: underline;
+}
+
+.hy-mobile-menu-shortcuts__link > hy-icon {
+  -ms-flex-item-align: start;
+  align-self: flex-start;
+  margin-top: 10px;
+  -webkit-transform: translateY(-50%);
+  transform: translateY(-50%);
+}
+
+.hy-mobile-menu-shortcuts__link > hy-icon + span {
+  margin-left: 10px;
+}
+
+.hy-mobile-menu-shortcuts__link span 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);
+}
+
+.hy-mobile-menu-shortcuts__link span hy-icon svg {
+  fill: var(--brand-main);
+}

package/dist/collection/components/navigation/mobile-menu-shortcuts/mobile-menu-shortcuts.js

@@ -0,0 +1,68 @@
+import { Component, h, Host, Prop } from '@stencil/core';
+import { jsonParserWorker } from '../../../global/globalScript';
+export class HyMobileMenuShortcuts {
+  async componentWillLoad() {
+    this._dataShortcutLinks = await jsonParserWorker(this.dataShortcutLinks);
+  }
+  render() {
+    return (h(Host, { class: "hy-mobile-menu-shortcuts" },
+      h("h2", null, this.shortcutsLabel),
+      h("ul", { class: "hy-mobile-menu-shortcuts__links" }, this._dataShortcutLinks.map(({ title, url, is_external, aria_label }) => {
+        let target = is_external ? '_blank' : '_self';
+        return (h("li", { class: "hy-mobile-menu-shortcuts__links-item" },
+          h("a", { "aria-current": aria_label, href: url, class: "hy-mobile-menu-shortcuts__link", target: target, "aria-label": aria_label },
+            h("hy-icon", { icon: 'hy-icon-caret-right', size: 10 }),
+            h("span", null,
+              title,
+              is_external && h("hy-icon", { icon: 'hy-icon-arrow-right', size: 12 })))));
+      }))));
+  }
+  static get is() { return "hy-mobile-menu-shortcuts"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["mobile-menu-shortcuts.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["mobile-menu-shortcuts.css"]
+  }; }
+  static get properties() { return {
+    "shortcutsLabel": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "shortcuts-label",
+      "reflect": false
+    },
+    "dataShortcutLinks": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "ShortcutLinks[] | string",
+        "resolved": "ShortcutLinks[] | string",
+        "references": {
+          "ShortcutLinks": {
+            "location": "local"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "data-shortcut-links",
+      "reflect": false
+    }
+  }; }
+}