@itcenteratunihelsinki/huds-lib 0.5.37 → 0.5.40

package/dist/collection/components/hy-list-item/hy-list-item.css

@@ -178,6 +178,176 @@
   }
 }
 
+.hy-list-item__position {
+  background: radial-gradient(circle, var(--grayscale-light) 0%, var(--grayscale-background-box) 100%);
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -ms-flex-direction: column;
+  flex-direction: column;
+}
+
+@media (min-width: 30rem) {
+  .hy-list-item__position {
+    -webkit-box-orient: horizontal;
+    -webkit-box-direction: normal;
+    -ms-flex-direction: row;
+    flex-direction: row;
+  }
+}
+
+.hy-list-item__position__info-container {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-box-pack: justify;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  margin: 0;
+  padding: 12px;
+  position: relative;
+}
+
+@media (min-width: 60rem) {
+  .hy-list-item__position__info-container {
+    padding: 12px 16px;
+  }
+}
+
+@media (min-width: 1601px) {
+  .hy-list-item__position__info-container {
+    padding: 20px 24px;
+  }
+}
+
+.hy-list-item__position__info-container__header {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: normal;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  color: var(--brand-main);
+  font-family: var(--main-font-family);
+  font-size: 14px;
+  font-weight: 600;
+  letter-spacing: -0.2px;
+  line-height: 14px;
+  margin-bottom: 14px;
+}
+
+.hy-list-item__position__info-container__header .icon {
+  margin-right: 0.75rem;
+}
+
+.hy-list-item__position__info-container__header .icon svg {
+  fill: var(--brand-main);
+}
+
+@media (min-width: 75.0625rem) {
+  .hy-list-item__position__info-container__large {
+    padding: 20px 24px;
+  }
+}
+
+.hy-list-item__position__info-container__data {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -ms-flex-direction: column;
+  flex-direction: column;
+}
+
+.hy-list-item__position__info-container__title {
+  font-size: 1.125rem;
+  line-height: 20px;
+  font-weight: 700;
+  font-family: var(--main-font-family);
+  color: var(--grayscale-black);
+  margin-bottom: 12px;
+  letter-spacing: -0.45px;
+  line-height: 22px;
+}
+
+@media (min-width: 30rem) {
+  .hy-list-item__position__info-container__title {
+    letter-spacing: -0.5px;
+  }
+}
+
+.hy-list-item__position__info-container__description {
+  font-size: 0.875rem;
+  color: var(--grayscale-dark-text);
+  display: none;
+  font-family: var(--main-font-family);
+  letter-spacing: 0.8px;
+  margin-bottom: 14px;
+  line-height: 20px;
+}
+
+@media (min-width: 30rem) {
+  .hy-list-item__position__info-container__description {
+    display: block;
+  }
+}
+
+.hy-list-item__position__info-container__outgoing-link {
+  -webkit-box-align: end;
+  -ms-flex-align: end;
+  align-items: flex-end;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: normal;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-box-pack: start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+  position: relative;
+  padding: 0 24px 24px 12px;
+}
+
+@media (min-width: 30rem) {
+  .hy-list-item__position__info-container__outgoing-link {
+    -webkit-box-pack: center;
+    -ms-flex-pack: center;
+    justify-content: center;
+    padding: 0 24px 24px 0;
+  }
+}
+
+.hy-list-item__position__info-container__outgoing-link .label {
+  color: var(--link-blue);
+  font-family: var(--main-font-family);
+  font-size: 16px;
+  font-weight: 600;
+  letter-spacing: -0.3px;
+  line-height: 20px;
+}
+
+.hy-list-item__position__info-container__outgoing-link .icon {
+  margin-right: 4px;
+  margin-bottom: 2px;
+}
+
+.hy-list-item__position__info-container__outgoing-link .icon svg {
+  fill: var(--link-blue);
+}
+
 .hy-list-item__degree {
   background: radial-gradient(circle, var(--grayscale-light) 0%, var(--grayscale-background-box) 100%);
   -webkit-box-orient: vertical;

package/dist/collection/components/hy-list-item/hy-list-item.js

@@ -12,6 +12,8 @@ export class HyListItem {
     this.disableLazy = false;
     this.outGoingUrlLabel = 'Go to programme page';
     this.headerstyle = 'common';
+    this.truncateDescription = false;
+    this.truncateLimit = 140;
     this._imageMinHeight = 0;
     this._imageMinWidth = 0;
   }
@@ -142,7 +144,31 @@ export class HyListItem {
     const classInfoContainerLinkIcon = [`hy-list-item__${this.variant}__info-container__link__icon`].join(' ');
     const classInfoContainerLink = [`hy-list-item__${this.variant}__info-container__link`].join(' ');
     const target = this.isExternal ? '_blank' : '_self';
+    function truncate(str, n) {
+      return str.length > n ? str.substr(0, n - 1) + '...' : str;
+    }
     switch (this.variant) {
+      case ListItemVariants.position: {
+        const classInfoContainerOutgoingLink = [
+          `hy-list-item__${this.variant}__info-container__outgoing-link`,
+          `hy-list-item__${this.variant}__info-container__outgoing-link__${this.headerstyle}`,
+        ].join(' ');
+        return (h("article", null,
+          h("a", { class: classAttributes, href: this.url, target: target, "aria-label": this.scLabel },
+            h("div", { class: classInfoContainerAttributes },
+              h("div", { class: classInfoContainerHeader },
+                h("div", { class: "icon" },
+                  h("hy-icon", { icon: 'hy-icon-units-and-faculties', size: 18 })),
+                this.itemType),
+              h("div", { class: classInfoContainerTitle }, this.itemTitle),
+              this.itemDescription && (h("div", { class: classInfoContainerDescription, innerHTML: this.truncateDescription
+                  ? truncate(this.itemDescription, this.truncateLimit)
+                  : this.itemDescription }))),
+            h("div", { class: classInfoContainerOutgoingLink },
+              h("span", { class: "icon" },
+                h("hy-icon", { icon: 'hy-icon-done', size: 14 })),
+              h("span", { class: "label" }, this.outGoingUrlLabel)))));
+      }
       case ListItemVariants.degreeProgramme: {
         const classImageContainerAttributes = [`hy-list-item__${this.variant}__image-container`].join(' ');
         const classImageContainerImage = [`hy-list-item__${this.variant}__image-container__image`].join(' ');
@@ -256,7 +282,7 @@ export class HyListItem {
       "mutable": false,
       "complexType": {
         "original": "ListItemVariants",
-        "resolved": "ListItemVariants.default | ListItemVariants.degreeProgramme",
+        "resolved": "ListItemVariants.default | ListItemVariants.degreeProgramme | ListItemVariants.position",
         "references": {
           "ListItemVariants": {
             "location": "import",
@@ -561,6 +587,42 @@ export class HyListItem {
       },
       "attribute": "source-set",
       "reflect": false
+    },
+    "truncateDescription": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "truncate-description",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "truncateLimit": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "truncate-limit",
+      "reflect": false,
+      "defaultValue": "140"
     }
   }; }
   static get states() { return {

package/dist/collection/components/hy-opening-hours/hy-opening-hours.js

@@ -28,7 +28,7 @@ export class HyOpeningHours {
         h("div", { class: "open-hours__content__top" },
           h("span", { class: "open-hours__content__top-label" }, this.listLabel),
           h("span", { class: "open-hours__content__top-label" }, this.buildingLabel),
-          h("span", { class: "open-hours__content__top-label" }, this.customerServiceLabel)),
+          this.customerServiceLabel && (h("span", { class: "open-hours__content__top-label" }, this.customerServiceLabel))),
         h("div", { class: "open-hours__content" },
           h("slot", null)),
         this.customLink && (h("div", { class: "open-hours__links" },

package/dist/collection/components/hy-opening-hours-content/hy-opening-hours-content.js

@@ -3,6 +3,7 @@ export class HyOpeningHoursContent {
   constructor() {
     this.multiple = false;
     this.selfServiceLabel = null;
+    this.venueType = 'libraries';
   }
   dataItemsWatcher(data) {
     this._dataItems = typeof data === 'string' ? JSON.parse(data) : data;
@@ -30,7 +31,7 @@ export class HyOpeningHoursContent {
         return (h("div", { class: itemClasses },
           h("span", { class: "open-hours__list-item--office" }, item.today ? item.today : item.dateLibrary),
           h("span", { class: "open-hours__list-item--hours" }, item.building),
-          h("span", { class: "open-hours__list-item--service" }, "-")));
+          this.venueType !== 'luomus' && h("span", { class: "open-hours__list-item--service" }, "-")));
       })));
   }
   static get is() { return "hy-opening-hours-content"; }
@@ -77,6 +78,24 @@ export class HyOpeningHoursContent {
       "reflect": false,
       "defaultValue": "null"
     },
+    "venueType": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "venue-type",
+      "reflect": false,
+      "defaultValue": "'libraries'"
+    },
     "dataItems": {
       "type": "string",
       "mutable": false,

package/dist/collection/components/hy-prominent-image/hy-prominent-image.js

@@ -1,6 +1,7 @@
 import { Component, Element, Host, h, Prop } from '@stencil/core';
 export class HyProminentImage {
   constructor() {
+    this.imageAlt = '';
     this.headerstyle = 'common';
   }
   componentDidLoad() {
@@ -21,7 +22,7 @@ export class HyProminentImage {
     return (h(Host, null,
       h("div", { class: prominentImageClass },
         h("div", { class: "hy-prominent-image__image" },
-          h("hy-image", { "source-set": this.sourceSet, "image-url": this.imageUrl, aspectRatioWidth: 2, aspectRatioHeight: 1 })),
+          h("hy-image", { "source-set": this.sourceSet, "image-url": this.imageUrl, "image-alt": this.imageAlt, aspectRatioWidth: 2, aspectRatioHeight: 1 })),
         this.textTitle && h("div", { class: prominentImageText }, this.textTitle))));
   }
   static get is() { return "hy-prominent-image"; }
@@ -67,6 +68,24 @@ export class HyProminentImage {
       "attribute": "image-url",
       "reflect": false
     },
+    "imageAlt": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "image-alt",
+      "reflect": false,
+      "defaultValue": "''"
+    },
     "headerstyle": {
       "type": "string",
       "mutable": false,

package/dist/collection/components/icon/icon.js

@@ -26,6 +26,7 @@ const iconNames = {
   'hy-icon-globe': (p) => h(icons.Globe, Object.assign({}, p)),
   'hy-icon-hamburger': (p) => h(icons.Hamburger, Object.assign({}, p)),
   'hy-icon-home': (p) => h(icons.Home, Object.assign({}, p)),
+  'hy-icon-helsingin-yliopisto': (p) => h(icons.Helsinginyliopisto, Object.assign({}, p)),
   'hy-icon-email': (p) => h(icons.Mail, Object.assign({}, p)),
   'hy-icon-embed': (p) => h(icons.Embed, Object.assign({}, p)),
   'hy-icon-events': (p) => h(icons.Events, Object.assign({}, p)),

package/dist/collection/components/site-header/site-header.js

@@ -5,6 +5,7 @@ import { jsonParserWorker } from '../../global/globalScript';
 export class SiteHeader {
   constructor() {
     this.isGroup = false;
+    this.isLuomusGroup = false;
     this.researchGroupLabel = '';
     this.groupType = '';
     this.groupLogoUrl = '';
@@ -116,7 +117,8 @@ export class SiteHeader {
     }
     else {
       // Scroll Up
-      if (topOffset < this.el.offsetTop + this.navbarHeight) {
+      if (topOffset <= this.el.offsetTop + this.navbarHeight ||
+        (topOffset <= 10 && this.el.offsetTop + this.navbarHeight == 0)) {
         hySiteHeader.classList.remove('hy-site-header--sticky-active');
         hySiteHeader.classList.remove('hy-site-header--sticky-visible');
         hySiteHeader.classList.remove('hy-site-header--sticky-hidden');
@@ -188,8 +190,8 @@ export class SiteHeader {
             this.isGroup && (h("section", { class: `hy-site-header__content-top ${this.isTopMenuOpen ? 'is-open' : ''}` },
               h("div", { class: "hy-site-header__container" },
                 h("div", { class: "hy-site-header__branding" },
-                  h("hy-site-logo", { "is-group": true, size: logoSizeGroup, color: logoColorGroup, url: this.siteUrl, label: this.siteLabel })),
-                h("hy-menu-main-group", { tabindex: "0", "is-mobile": false, "menu-label": (_a = this.groupPages['university_main_menu']) !== null && _a !== void 0 ? _a : null, "data-main-menu": this.dataMainMenuLinks }),
+                  h("hy-site-logo", { "is-group": true, "is-luomus-group": this.isLuomusGroup, size: logoSizeGroup, color: logoColorGroup, url: this.siteUrl, label: this.siteLabel })),
+                this.dataMainMenuLinks.length > 2 && (h("hy-menu-main-group", { tabindex: "0", "is-mobile": false, "menu-label": (_a = this.groupPages['university_main_menu']) !== null && _a !== void 0 ? _a : null, "data-main-menu": this.dataMainMenuLinks })),
                 h("div", { class: "hy-site-header__actions" },
                   h("hy-menu-language", { "data-menu-language": this.dataMenuLanguage, labels: this.languageLabels, isGroup: true }),
                   !this.noSearch && (h("hy-site-search", { class: 'menu--secondary__item group', size: 18, color: logoColorGroup, "is-group": true, "show-label": this.showSearchLabel, labels: this.searchLabels, "search-labels": this.dataSiteSearchLabels, "search-tools": this.dataSearchTools })),
@@ -220,11 +222,11 @@ export class SiteHeader {
           this.isGroup && (h("section", { class: `hy-site-header__content-top ${this.isTopMenuOpen ? 'is-open' : ''}` },
             h("div", { class: "hy-site-header__container" },
               h("div", { class: "hy-site-header__branding" },
-                h("hy-site-logo", { "is-group": true, size: logoSizeGroup, color: logoColorGroup, url: this.siteUrl, label: this.siteLabel })),
+                h("hy-site-logo", { "is-group": true, "is-luomus-group": this.isLuomusGroup, size: logoSizeGroup, color: logoColorGroup, url: this.siteUrl, label: this.siteLabel })),
               h("div", { class: "hy-site-header__actions" },
                 h("hy-menu-language", { "data-menu-language": this.dataMenuLanguage, labels: this.languageLabels, isGroup: true }),
                 !this.noSearch && (h("hy-site-search", { class: 'menu--secondary__item group', size: 18, color: logoColorGroup, "is-group": true, "show-label": this.showSearchLabel, labels: this.searchLabels, "search-labels": this.dataSiteSearchLabels, "search-tools": this.dataSearchTools })),
-                h("hy-menu-main-group", { "site-label": this.siteLabel, "site-url": this.siteUrl, "logo-label": this.logoLabel, "logo-url": this.logoUrl, "is-mobile": true, donate: this.donateLink, "data-main-menu": this.dataMainMenuLinks }))))),
+                this.dataMainMenuLinks.length > 2 && (h("hy-menu-main-group", { "site-label": this.siteLabel, "site-url": this.siteUrl, "logo-label": this.logoLabel, "logo-url": this.logoUrl, "is-mobile": true, donate: this.donateLink, "data-main-menu": this.dataMainMenuLinks })))))),
           h("section", { class: "hy-site-header__container" },
             h("div", { class: 'hy-site-header__branding' },
               this.groupType == 'research_group_menu' && h("p", null, this.researchGroupLabel),
@@ -271,6 +273,24 @@ export class SiteHeader {
       "reflect": false,
       "defaultValue": "false"
     },
+    "isLuomusGroup": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "is-luomus-group",
+      "reflect": false,
+      "defaultValue": "false"
+    },
     "researchGroupLabel": {
       "type": "string",
       "mutable": false,

package/dist/collection/components/site-header/site-logo/site-logo.css

@@ -64,7 +64,8 @@
   --site-logo-color: var(--brand-main-nearly-black);
 }
 
-.hy-site-logo a {
+.hy-site-logo a,
+.hy-site-logo div.luomus-group {
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
@@ -74,7 +75,8 @@
   text-decoration: none;
 }
 
-.hy-site-logo a:focus {
+.hy-site-logo a:focus,
+.hy-site-logo div.luomus-group:focus {
   outline: solid 2px var(--additional-yellow);
   outline-offset: 2px;
 }
@@ -211,16 +213,16 @@
   fill: var(--brand-main);
 }
 
-.hy-site-logo__header__group:hover {
+.hy-site-logo__header__group:not(.luomus):hover {
   color: var(--grayscale-medium);
 }
 
-.hy-site-logo__header__group:hover a,
-.hy-site-logo__header__group:hover span {
+.hy-site-logo__header__group:not(.luomus):hover a,
+.hy-site-logo__header__group:not(.luomus):hover span {
   color: var(--grayscale-medium) !important;
 }
 
-.hy-site-logo__header__group:hover svg {
+.hy-site-logo__header__group:not(.luomus):hover svg {
   fill: var(--grayscale-medium);
 }
 

package/dist/collection/components/site-header/site-logo/site-logo.js

@@ -5,19 +5,25 @@ export class SiteLogo {
     this.type = FooterVariant.header;
     this.color = ColorVariant.black;
     this.isGroup = false;
+    this.isLuomusGroup = false;
     this.size = SiteLogoSize.big;
   }
   render() {
     const isGroupClass = this.isGroup ? 'group' : 'page';
+    // const isLuomusGroupClass = this.isLuomusGroup ? 'luomus' : 'regular';
     const classAttributes = [
       'hy-site-logo',
       `hy-site-logo__${this.type}__${isGroupClass}`,
       `hy-site-logo__${this.type}`,
+      'luomus',
     ].join(' ');
     return this.url ? (h(Host, { class: classAttributes },
-      h("a", { href: this.url },
+      !this.isLuomusGroup && (h("a", { href: this.url },
         h("hy-icon", { class: { 'hy-site-logo__icon': true, group: this.isGroup }, icon: 'hy-icon-hy-logo', size: this.size, fill: this.color }),
-        h("span", { class: { 'hy-site-logo__label': true, group: this.isGroup }, style: { color: this.color } }, this.label)))) : this.label ? (h(Host, { class: classAttributes },
+        h("span", { class: { 'hy-site-logo__label': true, group: this.isGroup }, style: { color: this.color } }, this.label))),
+      this.isLuomusGroup && (h("div", { class: "luomus-group" },
+        h("hy-icon", { class: { 'hy-site-logo__icon': true, group: this.isGroup }, icon: 'hy-icon-hy-logo', size: this.size, fill: this.color }),
+        h("span", { class: { 'hy-site-logo__label': true, group: this.isGroup }, style: { color: this.color } }, this.label))))) : this.label ? (h(Host, { class: classAttributes },
       h("hy-icon", { class: { 'hy-site-logo__icon': true, group: this.isGroup }, icon: 'hy-icon-hy-logo', size: this.size, fill: this.color }),
       h("span", { class: { 'hy-site-logo__label': true, group: this.isGroup }, style: { color: this.color } }, this.label))) : ('');
   }
@@ -93,6 +99,24 @@ export class SiteLogo {
       "reflect": false,
       "defaultValue": "false"
     },
+    "isLuomusGroup": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "is-luomus-group",
+      "reflect": false,
+      "defaultValue": "false"
+    },
     "label": {
       "type": "string",
       "mutable": false,

package/dist/collection/utils/utils.js

@@ -108,6 +108,7 @@ export var ListItemVariants;
 (function (ListItemVariants) {
   ListItemVariants["default"] = "default";
   ListItemVariants["degreeProgramme"] = "degree";
+  ListItemVariants["position"] = "position";
 })(ListItemVariants || (ListItemVariants = {}));
 export var PaginationItemVariants;
 (function (PaginationItemVariants) {