@itcenteratunihelsinki/huds-lib 0.5.21 → 0.5.25

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

@@ -0,0 +1,199 @@
+import { Component, Host, h, Prop, State, Fragment } from '@stencil/core';
+export class PersonProfile {
+  constructor() {
+    this.isFullAboutTextHidden = false;
+  }
+  componentWillLoad() {
+    this.viewportSize = window.innerWidth;
+  }
+  toggleShowFullAboutText() {
+    this.isFullAboutTextHidden = !this.isFullAboutTextHidden;
+  }
+  render() {
+    const { name, job_title, additional_information, image_url, contact_information, organization_units, about, research, person_content, } = JSON.parse(this.personDataJson);
+    const { organizations, research_organizations } = organization_units.items;
+    const aboutDescriptionTextDestructured = about.description
+      .split('\n')
+      .filter((n) => n)
+      .map((item) => item.replace(/(<([^>]+)>)/gi, ''));
+    const aboutDescriptionLength = aboutDescriptionTextDestructured.join(' ').length;
+    let trimmedAboutDescription = '';
+    if (aboutDescriptionLength > 650) {
+      if (this.isFullAboutTextHidden) {
+        const ellipsisTextArray = (aboutDescriptionTextDestructured.join('\n') + '...').split('\n');
+        trimmedAboutDescription = ellipsisTextArray
+          .map((item) => {
+          return `<p>${item}</p>`;
+        })
+          .join('');
+      }
+      else {
+        const ellipsisTextArray = (aboutDescriptionTextDestructured.join('\n').substring(0, 647) + '...').split('\n');
+        trimmedAboutDescription = ellipsisTextArray
+          .map((item) => {
+          return `<p>${item}</p>`;
+        })
+          .join('');
+      }
+    }
+    window.addEventListener('resize', () => {
+      this.viewportSize = window.innerWidth;
+    });
+    return (h(Host, null,
+      h("section", { class: "hy-profile-page" },
+        h("a", { href: this.peopleFinderReturnLink, class: "hy-profile-page__back-button" },
+          h("hy-icon", { icon: 'hy-icon-arrow-left', size: 24 }),
+          h("span", null, "Back to people finder")),
+        h("section", { class: "hy-profile-page__section" },
+          h("div", { class: "hy-profile-page__person-information" },
+            h("div", null,
+              h("h1", { class: "hy-profile-page__name" }, name),
+              job_title && h("p", { class: "hy-profile-page__job-title" }, job_title),
+              additional_information && (h("p", { class: "hy-profile-page__additional-information" }, additional_information))),
+            image_url ? (h("img", { src: image_url, alt: "", class: "hy-profile-page__image" })) : (h("div", { class: "hy-profile-page__image", "aria-hidden": "true" }))),
+          contact_information && (h("div", { class: "hy-profile-page__contact-information" },
+            contact_information.label && h("h2", null, contact_information.label),
+            contact_information.items && (h("hy-person-profile-listing", { items: contact_information.items, col: "col-4", withoutIcons: true, textSpacingTight: true }))))),
+        (organizations.items.length > 0 || Object.keys(research_organizations.items).length > 0) && (h("section", { class: "hy-profile-page__section" },
+          organization_units.label && h("h2", null, organization_units.label),
+          organizations.items.length > 0 && (h("section", { class: "hy-profile-page__organization-units-section" },
+            h("h3", null, organizations.label),
+            h("ul", { class: "hy-profile-page__organizations" },
+              h("li", null, organizations.items.map(({ name }, index) => {
+                return (h("span", null,
+                  index !== 0 && h("hy-icon", { icon: 'hy-icon-caret-right', size: 10 }),
+                  h("span", null, name[organization_units.lang])));
+              }))))),
+          Object.keys(research_organizations.items).length > 0 && (h("section", { class: "hy-profile-page__organization-units-section" },
+            h("h3", null, research_organizations.label),
+            h("ul", { class: "hy-profile-page__research-organizations" }, Object.values(research_organizations.items).map(([...item]) => (h("li", null, item.map(({ name }, index) => {
+              return (h(Fragment, null, index !== 0 ? (h("ul", null,
+                h("li", null,
+                  h("span", null,
+                    h("hy-icon", { icon: 'hy-icon-caret-right', size: 10 }),
+                    h("span", null, name[organization_units.lang]))))) : (h("span", null, name[organization_units.lang]))));
+            }))))))))),
+        about && aboutDescriptionLength !== 0 && (h("section", { class: "hy-profile-page__section" },
+          h("h2", null, about.label),
+          about.description && (h("div", { class: "hy-profile-page__person-about-text", innerHTML: !this.isFullAboutTextHidden && aboutDescriptionLength > 650
+              ? trimmedAboutDescription
+              : about.description })),
+          aboutDescriptionLength > 650 && (h("button", { class: "hy-profile-page__person-about-text-toggle", onClick: () => this.toggleShowFullAboutText(), "aria-expanded": `${this.isFullAboutTextHidden ? 'true' : 'false'}` }, this.isFullAboutTextHidden ? this.hideFullAboutText : this.showFullAboutText)))),
+        (research || person_content) && (h("section", { class: "hy-profile-page__section" },
+          research.label && h("h2", null, research.label),
+          research.items && (h("hy-person-profile-listing", { items: research.items, col: "col-1", inline: true })),
+          h("div", { class: "hy-profile-page__loader", role: "presentation" },
+            h("div", null),
+            h("div", null),
+            h("div", null),
+            h("div", null)),
+          this.viewportSize < 768 ? (h("div", { class: "hy-profile-page__person-content-container" },
+            h("hy-accordion-container", { accordionid: "accordion-container-person-content" },
+              person_content.publications && (h("hy-accordion-item", { accordiontitle: person_content.publications.label })),
+              person_content.projects && (h("hy-accordion-item", { accordiontitle: person_content.projects.label })),
+              person_content.activities && (h("hy-accordion-item", { accordiontitle: person_content.activities.label }))))) : (h("div", { class: "hy-profile-page__person-content-container" },
+            h("hy-tabs", { "tab-id": "tabs-container-person-content" },
+              person_content.publications && (h("hy-tabs-item", { "tab-title": person_content.publications.label })),
+              person_content.projects && h("hy-tabs-item", { "tab-title": person_content.projects.label }),
+              person_content.activities && (h("hy-tabs-item", { "tab-title": person_content.activities.label }))))))))));
+  }
+  static get is() { return "hy-person-profile"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["person-profile.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["person-profile.css"]
+  }; }
+  static get properties() { return {
+    "personDataJson": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "person-data-json",
+      "reflect": false
+    },
+    "showFullAboutText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "show-full-about-text",
+      "reflect": false
+    },
+    "hideFullAboutText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "hide-full-about-text",
+      "reflect": false
+    },
+    "organizationItemsLabelText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "organization-items-label-text",
+      "reflect": false
+    },
+    "peopleFinderReturnLink": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "people-finder-return-link",
+      "reflect": false
+    }
+  }; }
+  static get states() { return {
+    "isFullAboutTextHidden": {},
+    "viewportSize": {}
+  }; }
+}

package/dist/collection/components/site-header/hy-desktop-menu-links/hy-desktop-menu-links.css

@@ -101,9 +101,6 @@
   font-size: 0.875rem;
   line-height: 16px;
   font-weight: 700;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
   background-color: transparent;
   border: none;
   color: var(--brand-main-nearly-black);
@@ -117,27 +114,40 @@
   flex-direction: row;
   font-family: var(--main-font-family);
   height: 100%;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  justify-content: center;
   letter-spacing: -0.7px;
-  padding: 26px 10px;
+  padding: 39px 10px 13px;
   text-transform: uppercase;
-  width: -webkit-min-content;
-  width: -moz-min-content;
-  width: min-content;
   text-decoration: none;
+  text-align: left;
 }
 
 .is-group .hy-desktop-menu__button {
+  padding: 26px 10px;
   width: auto;
 }
 
+.hy-desktop-menu__button.is-long > span {
+  max-width: 116px;
+}
+
+@media (min-width: 1601px) {
+  .hy-desktop-menu__button.is-long > span {
+    max-width: none;
+  }
+}
+
 @media (min-width: 1601px) {
   .hy-desktop-menu__button {
     font-size: 1rem;
     line-height: 16px;
     width: auto;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;
+    -webkit-box-pack: center;
+    -ms-flex-pack: center;
+    justify-content: center;
+    padding: 26px 10px;
   }
 }
 

package/dist/collection/components/site-header/hy-desktop-menu-links/hy-desktop-menu-links.js

@@ -285,13 +285,14 @@ export class HyDesktopMenuLinks {
     if (links) {
       links.map(({ menuLinkId: id, shortcuts, items, url, description, toggleOff, label, labelExtra, isExternal, isActive, shortcutsTitle, closeButtonTitle, }) => {
         let target = isExternal ? '_blank' : '_self';
+        const isLabelLong = label.split(' ').length - 1 >= 2 ? true : false;
         if (toggleOff) {
           menuLinkItems.push(h("li", { onMouseEnter: (e) => this.handleDesktopMenuClose(e), class: `hy-desktop-menu__item ${isActive === 'true' ? 'is-active-trail' : ''}` },
-            h("a", { "aria-current": label, href: url, target: target, class: "hy-desktop-menu__button", "menu-link-id": id }, labelExtra ? h("span", { class: "label" }, labelExtra) : h("span", { class: "label" }, label))));
+            h("a", { "aria-current": label, href: url, target: target, class: `hy-desktop-menu__button ${isLabelLong && !this.isGroup ? 'is-long' : ''}`, "menu-link-id": id }, labelExtra ? h("span", { class: "label" }, labelExtra) : h("span", { class: "label" }, label))));
         }
         else {
           menuLinkItems.push(h("li", { class: "hy-desktop-menu__item" },
-            h("button", { tabindex: "0", type: "button", class: `hy-desktop-menu__button ${isActive === 'true' ? 'is-active-trail' : ''}`, "link-id": id, onClick: (e) => this.handleDesktopMenuClick(e, id), onKeyDown: (e) => this.handleKeyDown(e, id), onMouseEnter: (e) => this.handleDesktopMenuEnter(e, id), onMouseLeave: () => this.handleDesktopMenuLeave(), "aria-expanded": "false" },
+            h("button", { tabindex: "0", type: "button", class: `hy-desktop-menu__button ${isActive === 'true' ? 'is-active-trail' : ''} ${isLabelLong && !this.isGroup ? 'is-long' : ''}`, "link-id": id, onClick: (e) => this.handleDesktopMenuClick(e, id), onKeyDown: (e) => this.handleKeyDown(e, id), onMouseEnter: (e) => this.handleDesktopMenuEnter(e, id), onMouseLeave: () => this.handleDesktopMenuLeave(), "aria-expanded": "false" },
               h("span", null, label),
               h("hy-icon", { icon: 'hy-icon-caret-down', size: 32 })),
             h("section", { class: `hy-desktop-menu__panel ${this.isDropdown ? 'is-dropdown' : ''}`, "aria-hidden": "true" },

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

@@ -212,6 +212,18 @@
   }
 }
 
+.hy-site-header__branding > a img {
+  height: 100%;
+  max-height: 48px;
+}
+
+@media (min-width: 75.0625rem) {
+  .hy-site-header__branding > a img {
+    -webkit-transform: translateY(-10px);
+    transform: translateY(-10px);
+  }
+}
+
 @media (min-width: 75.0625rem) {
   .is-group:not(.is-research-group) > .hy-site-header__branding {
     margin-right: 42px;

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

@@ -7,6 +7,7 @@ export class SiteHeader {
     this.isGroup = false;
     this.researchGroupLabel = '';
     this.groupType = '';
+    this.groupLogoUrl = '';
     this.showSearchLabel = true;
     this.noSearch = false;
     this.menuLabel = 'Menu';
@@ -200,7 +201,7 @@ export class SiteHeader {
             h("section", { class: `hy-site-header__container ${this.isGroup ? 'is-group' : ''} ${this.groupType === 'research_group_menu' ? 'is-research-group' : ''}` },
               h("div", { class: 'hy-site-header__branding' },
                 this.isGroup && this.groupType == 'research_group_menu' && h("p", null, this.researchGroupLabel),
-                this.isGroup ? (h("a", { href: this.logoUrl }, this.logoLabel)) : (h("hy-site-logo", { size: logoSize, color: logoColor, url: this.logoUrl, label: this.logoLabel }))),
+                this.isGroup ? (h("a", { href: this.logoUrl }, this.groupType == 'generic_site_group_menu' && this.groupLogoUrl ? (h("img", { src: this.groupLogoUrl, alt: `${this.logoLabel} logo` })) : (this.logoLabel))) : (h("hy-site-logo", { size: logoSize, color: logoColor, url: this.logoUrl, label: this.logoLabel }))),
               this.groupType != 'research_group_menu' && (h("hy-desktop-menu-links", { "data-desktop-links": this.dataDesktopLinks, isGroup: this.isGroup, isDropdown: this.isDesktopMenuDropdown })),
               !this.isGroup && (h("div", { class: "hy-site-header__actions" },
                 h("hy-menu-language", { "data-menu-language": this.dataMenuLanguage, labels: this.languageLabels }),
@@ -227,7 +228,7 @@ export class SiteHeader {
           h("section", { class: "hy-site-header__container" },
             h("div", { class: 'hy-site-header__branding' },
               this.groupType == 'research_group_menu' && h("p", null, this.researchGroupLabel),
-              this.isGroup ? (h("a", { href: this.logoUrl }, this.logoLabel)) : (h("hy-site-logo", { size: logoSize, color: logoColor, url: this.logoUrl, label: this.logoLabel }))),
+              this.isGroup ? (h("a", { href: this.logoUrl }, this.groupType == 'generic_site_group_menu' && this.groupLogoUrl ? (h("img", { src: this.groupLogoUrl, alt: `${this.logoLabel} logo` })) : (this.logoLabel))) : (h("hy-site-logo", { size: logoSize, color: logoColor, url: this.logoUrl, label: this.logoLabel }))),
             h("div", { class: "hy-site-header__actions" },
               !this.isGroup && (h("hy-menu-language", { "data-menu-language": this.dataMenuLanguage, labels: this.languageLabels })),
               !this.isGroup && !this.noSearch && (h("hy-site-search", { size: 24, color: ColorVariant.black, "show-label": this.showSearchLabel, labels: this.searchLabels, "search-labels": this.dataSiteSearchLabels, "search-tools": this.dataSearchTools })),
@@ -306,6 +307,24 @@ export class SiteHeader {
       "reflect": false,
       "defaultValue": "''"
     },
+    "groupLogoUrl": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "group-logo-url",
+      "reflect": false,
+      "defaultValue": "''"
+    },
     "dataMenuLanguage": {
       "type": "string",
       "mutable": false,

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

@@ -103,6 +103,28 @@
   }
 }
 
+@media (min-width: 75.0625rem) {
+  .hy-site-header__branding .hy-site-logo__label {
+    min-width: -webkit-min-content;
+    min-width: -moz-min-content;
+    min-width: min-content;
+    max-width: 90px;
+    white-space: initial;
+  }
+}
+
+@media (min-width: 1601px) {
+  .hy-site-header__branding .hy-site-logo__label {
+    min-width: -webkit-min-content;
+    min-width: -moz-min-content;
+    min-width: min-content;
+    max-width: -webkit-max-content;
+    max-width: -moz-max-content;
+    max-width: max-content;
+    white-space: nowrap;
+  }
+}
+
 @media (min-width: 30rem) {
   .hy-site-logo__label {
     font-size: 0.9375rem;

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

@@ -98,25 +98,25 @@
   }
 }
 
-.button--search:hover {
+.button--search:hover:not([disabled]) {
   color: var(--brand-main);
   cursor: pointer;
 }
 
-.button--search:hover svg {
+.button--search:hover:not([disabled]) svg {
   fill: var(--brand-main);
 }
 
-.button--search:focus {
+.button--search:focus:not([disabled]) {
   outline: solid 2px var(--additional-yellow);
   outline-offset: 2px;
 }
 
-.button--search[aria-expanded=true] {
+.button--search.is-active, .button--search[aria-expanded=true] {
   position: relative;
 }
 
-.button--search[aria-expanded=true]:after {
+.button--search.is-active:after, .button--search[aria-expanded=true]:after {
   content: "";
   position: absolute;
   height: 4px;
@@ -130,12 +130,12 @@
   color: var(--grayscale-white);
 }
 
-.is-group .button--search:hover {
+.is-group .button--search:hover:not([disabled]) {
   color: var(--grayscale-medium);
   cursor: pointer;
 }
 
-.is-group .button--search:hover svg {
+.is-group .button--search:hover:not([disabled]) svg {
   fill: var(--grayscale-medium);
 }
 
@@ -346,15 +346,15 @@
   }
 }
 
-.site-search__panel__panel-toggle:focus, .site-search__panel__panel-toggle:hover {
+.site-search__panel__panel-toggle:focus:not([disabled]), .site-search__panel__panel-toggle:hover:not([disabled]) {
   cursor: pointer;
 }
 
-.site-search__panel__panel-toggle:focus span, .site-search__panel__panel-toggle:hover span {
+.site-search__panel__panel-toggle:focus:not([disabled]) span, .site-search__panel__panel-toggle:hover:not([disabled]) span {
   color: var(--brand-main);
 }
 
-.site-search__panel__panel-toggle:focus svg, .site-search__panel__panel-toggle:hover svg {
+.site-search__panel__panel-toggle:focus:not([disabled]) svg, .site-search__panel__panel-toggle:hover:not([disabled]) svg {
   fill: var(--brand-main);
 }
 

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

@@ -64,7 +64,11 @@ export class SiteSearch {
       // Remove hidden class from cludo suggestions
       let cludoSayt = document.querySelectorAll('stencil-cludo-sayt')[0];
       if (cludoSayt) {
+        const cludoSearchContentFormElement = this.el.shadowRoot.querySelector('#cludo-search-content-form');
         cludoSayt.classList.remove('hidden');
+        cludoSearchContentFormElement.append(cludoSayt);
+        cludoSayt.shadowRoot.querySelector('#cludo-reli-flexi-wrapper').style.position = 'relative';
+        cludoSayt.shadowRoot.querySelector('#cludo-reli-flexi').style.position = 'relative';
       }
       // Without setTimeout it will not focus the input because it hasn't rendered yet.
       setTimeout(() => {
@@ -128,6 +132,8 @@ export class SiteSearch {
     }
   }
   render() {
+    const currentPageUrlPathName = window.location.pathname;
+    const searchPagePathNames = ['/fi/haku', '/en/search', '/sv/sök'];
     return (h("div", { class: {
         'site-search': true,
         'site-search__is-open': this.isSearchPanelOpen,
@@ -137,7 +143,8 @@ export class SiteSearch {
           'button--search': true,
           'is-open--menu': this.isAlternative,
           'is-open': this.isSearchPanelOpen,
-        }, onClick: (e) => this.handleSearchPanelToggle(e) },
+          'is-active': searchPagePathNames.some((item) => item === currentPageUrlPathName),
+        }, onClick: (e) => this.handleSearchPanelToggle(e), disabled: searchPagePathNames.some((item) => item === currentPageUrlPathName) ? true : false },
         this.showLabel ? (h("span", { class: { 'button--search__label': true, 'button--search__label__group': this.isGroup } }, this._labels['label'])) : (''),
         h("hy-icon", { icon: 'hy-icon-search', size: this.size, fill: this.color })),
       h("div", { class: {