@itcenteratunihelsinki/huds-lib 0.5.22 → 0.5.23

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

@@ -50,7 +50,7 @@ export class Menu {
       },
     ];
   }
-  componentWillLoad() {
+  async componentWillLoad() {
     this.breadcrumbs = [];
   }
   componentWillUpdate() {
@@ -90,13 +90,11 @@ export class Menu {
             h("div", { id: 'menu-bc-container', class: {
                 'hy-mobile-menu__breadcrumbs': true,
                 'is-empty': this.breadcrumbs.length === 0,
-              } },
-              h("hy-menu-language", { "is-mobile": true, "data-menu-language": this.dataMenuLanguage }),
-              this.breadcrumbs.length ? ([
-                this.breadcrumbs.map((breadcrumb) => {
-                  return (h("hy-menu-mobile-breadcrumb", { "label-back": this.menuButtonBreadcrumbReturn, "label-front-page": this.labelFrontPage, label: breadcrumb.label, bid: breadcrumb.bid }));
-                }),
-              ]) : (h("hy-menu-mobile-breadcrumb", { "label-back": this.menuButtonBreadcrumbReturn, "label-front-page": this.menuButtonBreadcrumbHome, label: this.menuButtonBreadcrumbHome, "is-first": true, "logo-url": this.logoUrl }))),
+              } }, this.breadcrumbs.length ? ([
+              this.breadcrumbs.map((breadcrumb) => {
+                return (h("hy-menu-mobile-breadcrumb", { "label-back": this.menuButtonBreadcrumbReturn, "label-front-page": this.labelFrontPage, label: breadcrumb.label, bid: breadcrumb.bid }));
+              }),
+            ]) : (h("hy-menu-mobile-breadcrumb", { "label-back": this.menuButtonBreadcrumbReturn, "label-front-page": this.menuButtonBreadcrumbHome, label: this.menuButtonBreadcrumbHome, "is-first": true, "logo-url": this.logoUrl }))),
             h("button", { class: `hy-mobile-menu__menu-close-button`, "aria-label": "Close menu", disabled: true, "aria-hidden": "true" },
               h("span", null, "Close"),
               h("hy-icon", { icon: 'hy-icon-remove', size: 16 }))),
@@ -370,6 +368,23 @@ export class Menu {
       },
       "attribute": "menu-button-breadcrumb-logourl",
       "reflect": false
+    },
+    "dataSiteHeaderLabels": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "data-site-header-labels",
+      "reflect": false
     }
   }; }
   static get states() { return {

package/dist/collection/components/paragraph-text/paragraph-text.css

@@ -414,9 +414,6 @@
   color: var(--link-blue);
   font-family: var(--main-font-family);
   font-weight: 600;
-  display: -webkit-inline-box;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
 }
 
 @media (min-width: 30rem) {
@@ -439,19 +436,24 @@
 }
 
 .hy-paragraph-text a[target=_blank]:after {
-  display: block;
-  content: url("data:image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 30 29' fill='rgb(4,121,165)'> <polygon points='29.207 13.783 14.756 .717 14.055 0 11.402 3.118 10.732 3.835 19.665 11.974 0 11.974 0 17.026 19.756 17.026 11.494 24.447 10.823 25.071 11.402 25.882 13.476 28.189 14.055 29 30 14.594' /> </svg>");
+  display: inline-block;
+  vertical-align: middle;
+  width: 12px;
+  height: 12px;
   margin-left: 3px;
+  background-size: contain;
+  content: "";
+  background-image: url("data:image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 30 29' fill='rgb(4,121,165)'> <polygon points='29.207 13.783 14.756 .717 14.055 0 11.402 3.118 10.732 3.835 19.665 11.974 0 11.974 0 17.026 19.756 17.026 11.494 24.447 10.823 25.071 11.402 25.882 13.476 28.189 14.055 29 30 14.594' /> </svg>");
   -webkit-transform: rotate(315deg);
   transform: rotate(315deg);
 }
 
 .hy-paragraph-text a[target=_blank]:after:hover {
-  content: url("data:image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 30 29' fill='pink'> <polygon points='29.207 13.783 14.756 .717 14.055 0 11.402 3.118 10.732 3.835 19.665 11.974 0 11.974 0 17.026 19.756 17.026 11.494 24.447 10.823 25.071 11.402 25.882 13.476 28.189 14.055 29 30 14.594' /> </svg>");
+  background-image: url("data:image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 30 29' fill='pink'> <polygon points='29.207 13.783 14.756 .717 14.055 0 11.402 3.118 10.732 3.835 19.665 11.974 0 11.974 0 17.026 19.756 17.026 11.494 24.447 10.823 25.071 11.402 25.882 13.476 28.189 14.055 29 30 14.594' /> </svg>");
 }
 
 .hy-paragraph-text a[target=_blank]:hover:after {
-  content: url("data:image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 30 29' fill='rgb(14,104,139)'> <polygon points='29.207 13.783 14.756 .717 14.055 0 11.402 3.118 10.732 3.835 19.665 11.974 0 11.974 0 17.026 19.756 17.026 11.494 24.447 10.823 25.071 11.402 25.882 13.476 28.189 14.055 29 30 14.594' /> </svg>");
+  background-image: url("data:image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 30 29' fill='rgb(14,104,139)'> <polygon points='29.207 13.783 14.756 .717 14.055 0 11.402 3.118 10.732 3.835 19.665 11.974 0 11.974 0 17.026 19.756 17.026 11.494 24.447 10.823 25.071 11.402 25.882 13.476 28.189 14.055 29 30 14.594' /> </svg>");
 }
 
 .hy-paragraph-text p {

package/dist/collection/components/person-profile/person-profile-listing/person-profile-listing.css

@@ -0,0 +1,188 @@
+: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;
+}
+
+.hy-person-profile-listing {
+  font-family: var(--main-font-family);
+  padding: 0;
+  margin: 0;
+  list-style: none;
+  display: grid;
+  gap: 24px;
+}
+
+@media (min-width: 48rem) {
+  .hy-person-profile-listing {
+    gap: 32px 24px;
+  }
+}
+
+@media (min-width: 120.0625rem) {
+  .hy-person-profile-listing.col-2 {
+    grid-template-columns: repeat(2, 50%);
+  }
+}
+
+.hy-person-profile-listing.col-4 {
+  gap: 32px 24px;
+}
+
+@media (min-width: 48rem) {
+  .hy-person-profile-listing.col-4 {
+    grid-template-columns: repeat(2, 50%);
+  }
+}
+
+@media (min-width: 60rem) {
+  .hy-person-profile-listing.col-4 {
+    grid-template-columns: repeat(3, calc(100% / 3));
+  }
+}
+
+@media (min-width: 120.0625rem) {
+  .hy-person-profile-listing.col-4 {
+    grid-template-columns: repeat(4, 25%);
+  }
+}
+
+.hy-person-profile-listing__label {
+  font-size: 0.9375rem;
+  line-height: 18px;
+  font-weight: 700;
+  letter-spacing: -0.28px;
+  color: var(--grayscale-black);
+  margin: 0 0 8px;
+}
+
+@media (min-width: 48rem) {
+  .hy-person-profile-listing__label {
+    font-size: 1.0625rem;
+    line-height: 20px;
+    letter-spacing: -0.32px;
+  }
+}
+
+.hy-person-profile-listing__items {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  display: grid;
+  gap: 8px;
+}
+
+.is-inline .hy-person-profile-listing__items {
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  gap: 0;
+}
+
+.text-tight .hy-person-profile-listing__items {
+  gap: 0;
+}
+
+.hy-person-profile-listing__item {
+  font-size: 0.9375rem;
+  line-height: 22px;
+  font-weight: 400;
+  color: var(--grayscale-black);
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+}
+
+@media (min-width: 48rem) {
+  .hy-person-profile-listing__item {
+    font-size: 1.0625rem;
+    line-height: 26px;
+  }
+}
+
+.hy-person-profile-listing__item a {
+  text-decoration: none;
+  color: var(--link-blue);
+}
+
+.hy-person-profile-listing__item a:hover {
+  text-decoration: underline;
+}
+
+.hy-person-profile-listing__item hy-icon {
+  display: none !important;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  height: 28px;
+  width: 28px;
+}
+
+@media (min-width: 48rem) {
+  .hy-person-profile-listing__item hy-icon {
+    display: -webkit-inline-box !important;
+    display: -ms-inline-flexbox !important;
+    display: inline-flex !important;
+  }
+}
+
+.without-icons .hy-person-profile-listing__item hy-icon {
+  display: none !important;
+}

package/dist/collection/components/person-profile/person-profile-listing/person-profile.listing.js

@@ -0,0 +1,124 @@
+import { Component, Host, h, Prop } from '@stencil/core';
+export class PersonProfile {
+  constructor() {
+    this.col = 'col-2';
+  }
+  render() {
+    return (h(Host, null,
+      h("ul", { class: `hy-person-profile-listing ${this.col} ${this.inline ? 'is-inline' : ''} ${this.withoutIcons ? 'without-icons' : ''} ${this.textSpacingTight ? 'text-tight' : ''}` }, this.items.map(({ label, items }) => {
+        if (items.filter(({ label, url }) => label !== '' && url !== '').length > 0) {
+          return (h("li", null,
+            h("h3", { class: "hy-person-profile-listing__label" }, label),
+            h("ul", { class: "hy-person-profile-listing__items" }, items.map(({ label, url }, index) => {
+              if (url) {
+                return (h("li", { class: "hy-person-profile-listing__item" },
+                  h("a", { href: url },
+                    index !== 0 && h("hy-icon", { icon: 'hy-icon-caret-right', size: 10 }),
+                    h("span", null, label))));
+              }
+              return (h("li", { class: "hy-person-profile-listing__item" },
+                index !== 0 && h("hy-icon", { icon: 'hy-icon-caret-right', size: 10 }),
+                h("span", null, label)));
+            }))));
+        }
+      }))));
+  }
+  static get is() { return "hy-person-profile-listing"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["person-profile-listing.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["person-profile-listing.css"]
+  }; }
+  static get properties() { return {
+    "items": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "personProfileListingItems",
+        "resolved": "[{ label: string; items: string[]; }]",
+        "references": {
+          "personProfileListingItems": {
+            "location": "local"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      }
+    },
+    "col": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'col-1' | 'col-2' | 'col-4'",
+        "resolved": "\"col-1\" | \"col-2\" | \"col-4\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "col",
+      "reflect": false,
+      "defaultValue": "'col-2'"
+    },
+    "inline": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "inline",
+      "reflect": false
+    },
+    "withoutIcons": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "without-icons",
+      "reflect": false
+    },
+    "textSpacingTight": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "text-spacing-tight",
+      "reflect": false
+    }
+  }; }
+}