@itcenteratunihelsinki/huds-lib 0.5.36 → 0.5.39

package/dist/collection/components/footer/hy-footer-info/hy-footer-info.css

@@ -250,4 +250,59 @@
 
 .hy-footer-info .hy-accordion__content--inner-wrapper {
   width: 100%;
+}
+
+.hy-footer-info.luomus {
+  background-color: var(--grayscale-black);
+  color: var(--grayscale-white);
+  padding-top: 40px;
+}
+
+.hy-footer-info.luomus .hy-footer-info__logo {
+  font-size: 1.125rem;
+  line-height: 16px;
+  font-family: var(--main-font-family);
+  font-weight: bold;
+  letter-spacing: -0.9px;
+}
+
+.hy-footer-info.luomus .hy-footer-info__logo .hy-site-logo__label {
+  min-width: 100%;
+  max-width: 100%;
+}
+
+.hy-footer-info.luomus .hy-footer-info__branding {
+  padding: 22px 0 62px;
+}
+
+.hy-footer-info.luomus .hy-footer-info__branding a img {
+  height: 32px;
+  width: 148px;
+}
+
+.hy-footer-info.luomus .luomus-footer-content {
+  color: var(--grayscale-white);
+  margin: 8px 0;
+}
+
+.hy-footer-info.luomus .luomus-footer-content__link {
+  font-size: 1.125rem;
+  line-height: 24px;
+  font-weight: 700;
+  color: var(--grayscale-white);
+  font-family: var(--main-font-family);
+  font-style: normal;
+  letter-spacing: -0.36px;
+  text-decoration: none;
+}
+
+.hy-footer-info.luomus .luomus-footer-content__description {
+  font-size: 1rem;
+  line-height: 22px;
+  font-weight: 400;
+  color: var(--grayscale-white);
+  font-family: var(--main-font-family);
+  font-style: normal;
+  letter-spacing: -0.1px;
+  padding-bottom: 32px;
 }

package/dist/collection/components/footer/hy-footer-info/hy-footer-info.js

@@ -1,13 +1,15 @@
 import { Component, Element, h, Host, Prop, State } from '@stencil/core';
 import ResizeObserver from 'resize-observer-polyfill';
-import { CtaLinkButtonVariants, FooterLinkItemColor, FooterLinkVariants, HeadingSectionVariants, HeadingVarians, } from '../../../utils/utils';
+import { ColorVariant, CtaLinkButtonVariants, FooterLinkItemColor, FooterLinkVariants, FooterVariant, HeadingSectionVariants, HeadingVarians, } from '../../../utils/utils';
 import { jsonParserWorker } from '../../../global/globalScript';
 export class HyFooterInfo {
   constructor() {
     this.linkIsExternal = false;
+    this.isLuomusGroup = false;
   }
   async componentWillLoad() {
     this._dataFooterInfoLinks = await jsonParserWorker(this.dataFooterInfoLinks);
+    this._dataLuomusFooterContent = await jsonParserWorker(this.luomusFooterContent);
   }
   componentDidLoad() {
     this.ro = new ResizeObserver((entries) => {
@@ -24,23 +26,40 @@ export class HyFooterInfo {
     this.isMobile = size <= 479 ? true : false;
   }
   render() {
-    const classAttributes = ['hy-footer-info'].join(' ');
     const links = this._dataFooterInfoLinks;
+    const luomusFooterContentItems = this._dataLuomusFooterContent;
     const variant = this.isGroup ? FooterLinkVariants.group : FooterLinkVariants.campus;
     const section = this.isGroup ? HeadingSectionVariants.groupFooterInfo : HeadingSectionVariants.defaultFooterInfo;
     const footerLinkItemClass = this.isGroup ? 'group' : 'campus';
     const scLabel = this.linkScLabel && this.linkScLabel.length > 0 ? this.linkScLabel : this.linkText;
-    return (h(Host, { class: classAttributes },
+    const logoColor = ColorVariant.white;
+    const linksColor = this.isLuomusGroup ? FooterLinkItemColor.white : FooterLinkItemColor.black;
+    return (h(Host, { class: {
+        'hy-footer-info': true,
+        luomus: this.isLuomusGroup,
+      } },
       h("div", { class: {
           'hy-footer-info__content': true,
           'is-group': this.isGroup,
         } },
-        h("hy-heading", { heading: HeadingVarians.h2, section: section }, this.textTitle),
-        h("div", { class: {
+        !this.isLuomusGroup && (h("hy-heading", { heading: HeadingVarians.h2, section: section }, this.textTitle)),
+        this.isLuomusGroup && (h("div", { class: "hy-footer-info__logo" },
+          h("hy-site-logo", { type: FooterVariant.footer, isGroup: this.isGroup, size: 56, color: logoColor, url: this.logoUrl, label: this.logoLabel }))),
+        this.isLuomusGroup && (h("div", { class: 'hy-footer-info__branding' },
+          h("a", { href: this.groupLogoUrl },
+            h("img", { src: this.groupLogoUrl, alt: 'Luomus logo' })))),
+        !this.isLuomusGroup && (h("div", { class: {
             'hy-footer-info__ingress': true,
             'is-group': this.isGroup,
-          }, innerHTML: this.textDescription }),
-        this.linkUrl && (h("hy-cta-button", { "link-content": this.linkText, "sc-label": scLabel, "is-external": this.linkIsExternal, url: this.linkUrl, variant: CtaLinkButtonVariants.onWhiteBkgd }))),
+          }, innerHTML: this.textDescription })),
+        !this.isLuomusGroup && this.linkUrl && (h("hy-cta-button", { "link-content": this.linkText, "sc-label": scLabel, "is-external": this.linkIsExternal, url: this.linkUrl, variant: CtaLinkButtonVariants.onWhiteBkgd })),
+        this.isLuomusGroup &&
+          luomusFooterContentItems &&
+          luomusFooterContentItems.map((item) => {
+            return (h("div", { class: "luomus-footer-content" },
+              h("a", { href: item.url, class: "luomus-footer-content__link" }, item.heading),
+              item.content && h("div", { class: "luomus-footer-content__description", innerHTML: item.content })));
+          })),
       this.isMobile && this.isGroup === false ? (h("div", { class: {
           'hy-footer-info__links': true,
           'is-group': this.isGroup,
@@ -48,14 +67,14 @@ export class HyFooterInfo {
         h("hy-accordion-container", { accordionid: 'test' }, links &&
           links.map((link) => {
             return (h("hy-accordion-item", { accordiontitle: link.label },
-              h("hy-footer-link-item", { class: footerLinkItemClass, variant: variant, color: FooterLinkItemColor.black, label: link.label, url: link.url, "main-link": link.mainlink, items: link.items, isMobile: this.isMobile })));
+              h("hy-footer-link-item", { class: footerLinkItemClass, variant: variant, color: linksColor, label: link.label, url: link.url, "main-link": link.mainlink, items: link.items, isMobile: this.isMobile })));
           })))) : (h("div", { class: {
           'hy-footer-info__links': true,
           'is-group': this.isGroup,
         } }, links &&
         links.map((link) => {
           const external_link = link.isExternal === 'external';
-          return (h("hy-footer-link-item", { class: footerLinkItemClass, variant: variant, color: FooterLinkItemColor.black, label: link.label, url: link.url, "is-external": external_link, "main-link": link.mainlink, items: link.items, isMobile: this.isMobile }));
+          return (h("hy-footer-link-item", { class: footerLinkItemClass, variant: variant, color: linksColor, label: link.label, url: link.url, "is-external": external_link, "main-link": link.mainlink, items: link.items, isMobile: this.isMobile }));
         })))));
   }
   static get is() { return "hy-footer-info"; }
@@ -169,6 +188,57 @@ export class HyFooterInfo {
       "attribute": "link-sc-label",
       "reflect": false
     },
+    "logoUrl": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Logo url"
+      },
+      "attribute": "logo-url",
+      "reflect": false
+    },
+    "logoLabel": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Logo label"
+      },
+      "attribute": "logo-label",
+      "reflect": false
+    },
+    "groupLogoUrl": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Luomus group Logo url for footer"
+      },
+      "attribute": "group-logo-url",
+      "reflect": false
+    },
     "isGroup": {
       "type": "boolean",
       "mutable": false,
@@ -186,6 +256,24 @@ export class HyFooterInfo {
       "attribute": "is-group",
       "reflect": 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"
+    },
     "dataFooterInfoLinks": {
       "type": "string",
       "mutable": false,
@@ -206,6 +294,27 @@ export class HyFooterInfo {
       },
       "attribute": "data-footer-info-links",
       "reflect": false
+    },
+    "luomusFooterContent": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "LuomusFooterContent[] | string",
+        "resolved": "LuomusFooterContent[] | string",
+        "references": {
+          "LuomusFooterContent": {
+            "location": "local"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "luomus-footer-content",
+      "reflect": false
     }
   }; }
   static get states() { return {

package/dist/collection/components/footer/hy-footer-link-item/hy-footer-link-item.css

@@ -143,26 +143,32 @@ hy-footer-link-item.group[main-link] {
   }
 }
 
-.hy-footer-link-item__color-white {
-  font-size: 0.875rem;
-  line-height: 18px;
-  font-weight: 600;
-  border-bottom: 1px solid var(--grayscale-white);
-  color: var(--grayscale-white);
-  letter-spacing: -0.5px;
-  padding: 15px 20px 15px 0;
+.hy-footer-link-item__main {
+  border: 0;
+  padding: 0;
+  margin-right: -32px;
 }
 
-.hy-footer-link-item__color-white .hy-footer-link-item__icon svg {
-  fill: var(--grayscale-white);
+.hy-footer-link-item__main .hy-heading__container > h3.hy-heading {
+  font-size: 1.125rem;
+  line-height: 22px;
+  letter-spacing: -0.45px;
+  padding: 0 0 1px 0 !important;
 }
 
-.hy-footer-link-item__color-white:hover {
-  color: var(--grayscale-medium) !important;
+@media (min-width: 30rem) {
+  .hy-footer-link-item__main .hy-heading__container > h3.hy-heading {
+    font-size: 1.375rem;
+    line-height: 28px;
+    letter-spacing: -0.44px;
+  }
 }
 
-.hy-footer-link-item__color-white:hover svg {
-  fill: var(--grayscale-medium);
+.hy-footer-link-item__main .hy-heading__container > h3.hy-heading .hy-footer-link-item__link {
+  color: var(--grayscale-black);
+  font-family: var(--main-font-family);
+  text-decoration: none;
+  margin-bottom: 12px;
 }
 
 .hy-footer-link-item__color-black {
@@ -182,41 +188,35 @@ hy-footer-link-item.group[main-link] {
   width: 12px;
 }
 
-.hy-footer-link-item__color-blacka:hover {
+.hy-footer-link-item__color-black .hy-heading__container > h3.hy-headinga.hy-footer-link-item__link:hover {
   color: var(--brand-main) !important;
   text-decoration: underline;
 }
 
-.hy-footer-link-item__color-blacka:hover svg {
+.hy-footer-link-item__color-black .hy-heading__container > h3.hy-headinga.hy-footer-link-item__link:hover svg {
   fill: var(--brand-main);
 }
 
-.hy-footer-link-item__main {
-  border: 0;
-  padding: 0;
-  margin-right: -32px;
+.hy-footer-link-item__color-white {
+  font-size: 0.875rem;
+  line-height: 18px;
+  font-weight: 600;
+  border-bottom: 1px solid var(--grayscale-white);
+  color: var(--grayscale-white);
+  letter-spacing: -0.5px;
+  padding: 15px 20px 15px 0;
 }
 
-.hy-footer-link-item__main .hy-heading__container > h3.hy-heading {
-  font-size: 1.125rem;
-  line-height: 22px;
-  letter-spacing: -0.45px;
-  padding: 0 0 1px 0 !important;
+.hy-footer-link-item__color-white .hy-footer-link-item__icon svg {
+  fill: var(--grayscale-white);
 }
 
-@media (min-width: 30rem) {
-  .hy-footer-link-item__main .hy-heading__container > h3.hy-heading {
-    font-size: 1.375rem;
-    line-height: 28px;
-    letter-spacing: -0.44px;
-  }
+.hy-footer-link-item__color-white .hy-heading__container > h3.hy-heading .hy-footer-link-item__link:hover {
+  color: var(--grayscale-medium) !important;
 }
 
-.hy-footer-link-item__main .hy-heading__container > h3.hy-heading .hy-footer-link-item__link {
-  color: var(--grayscale-black);
-  font-family: var(--main-font-family);
-  text-decoration: none;
-  margin-bottom: 12px;
+.hy-footer-link-item__color-white .hy-heading__container > h3.hy-heading .hy-footer-link-item__link:hover svg {
+  fill: var(--grayscale-medium);
 }
 
 .hy-footer-link-item__icon {
@@ -225,8 +225,4 @@ hy-footer-link-item.group[main-link] {
   top: 50%;
   -webkit-transform: translateY(-50%);
   transform: translateY(-50%);
-}
-
-.hy-footer-link-item:hover h3 a {
-  color: var(--brand-main) !important;
 }

package/dist/collection/components/hy-hero/hy-hero.css

@@ -211,7 +211,7 @@
   position: relative;
 }
 
-h1.hy-hero__title {
+h2.hy-hero__title {
   -webkit-hyphens: auto;
   -ms-hyphens: auto;
   hyphens: auto;
@@ -227,19 +227,19 @@ h1.hy-hero__title {
   width: auto;
 }
 
-.hy-hero--blue h1.hy-hero__title {
+.hy-hero--blue h2.hy-hero__title {
   color: var(--grayscale-white) !important;
 }
 
-.hy-hero--black h1.hy-hero__title {
+.hy-hero--black h2.hy-hero__title {
   color: var(--grayscale-white) !important;
 }
 
-.hy-hero--white h1.hy-hero__title {
+.hy-hero--white h2.hy-hero__title {
   color: var(--grayscale-black) !important;
 }
 
-h1.hy-hero__title.hy-heading__hero {
+h2.hy-hero__title.hy-heading__hero {
   font-size: 2rem;
   line-height: 38px;
   font-weight: 700;
@@ -250,7 +250,7 @@ h1.hy-hero__title.hy-heading__hero {
 }
 
 @media (min-width: 1024px) {
-  h1.hy-hero__title.hy-heading__hero {
+  h2.hy-hero__title.hy-heading__hero {
     font-size: 2.875rem;
     line-height: 54px;
     letter-spacing: -1.15px;
@@ -258,7 +258,7 @@ h1.hy-hero__title.hy-heading__hero {
 }
 
 @media (min-width: 1601px) {
-  h1.hy-hero__title.hy-heading__hero {
+  h2.hy-hero__title.hy-heading__hero {
     font-size: 3.25rem;
     line-height: 60px;
     letter-spacing: -1.3px;

package/dist/collection/components/hy-hero/hy-hero.js

@@ -90,7 +90,7 @@ export class HyHero {
             h("div", { class: `hy-hero__content-container` },
               h("div", { class: `hy-hero__content` },
                 h("div", { class: `hy-hero__title-container` },
-                  h("h1", { innerHTML: this.heading, class: heroTitleClasses })),
+                  h("h2", { innerHTML: this.heading, class: heroTitleClasses })),
                 this.description && h("p", { class: `hy-hero__description` }, this.description),
                 this.url && (h("div", { class: `hy-hero__actions` },
                   h("hy-cta-button", { "link-content": this.urlTitle, "sc-label": this.scLabel, url: this.url, "is-external": this.isExternal, variant: variant }))))))),
@@ -106,7 +106,7 @@ export class HyHero {
           h("div", { class: `hy-hero__content-container` },
             h("div", { class: `hy-hero__content` },
               h("div", { class: `hy-hero__title-container` },
-                h("h1", { innerHTML: this.heading, class: heroTitleClasses })),
+                h("h2", { innerHTML: this.heading, class: heroTitleClasses })),
               this.description && h("p", { class: `hy-hero__description` }, this.description),
               this.url && (h("div", { class: `hy-hero__actions` },
                 h("hy-cta-button", { "link-content": this.urlTitle, "sc-label": this.scLabel, url: this.url, "is-external": this.isExternal, variant: variant }))))))),

package/dist/collection/components/hy-introduction/hy-introduction.js

@@ -6,6 +6,7 @@ export class HyIntroduction {
     this.reversed = false;
     this.limitContentWidth = false;
     this.textDescription = null;
+    this.imageAlt = '';
     this.isExternal = false;
     this.headerstyle = 'common';
   }
@@ -51,8 +52,8 @@ export class HyIntroduction {
                     h("hy-icon", { icon: 'hy-icon-arrow-right', size: 24 })))))),
             this.imageUrl &&
               (this.sourceSet ? (h("div", { class: "hy-introduction__image" },
-                h("hy-image", { "source-set": this.sourceSet, "image-url": this.imageUrl, aspectRatioWidth: 16, aspectRatioHeight: 10 }))) : (h("div", { class: "hy-introduction__image" },
-                h("hy-image", { "image-url": this.imageUrl, aspectRatioWidth: 16, aspectRatioHeight: 10 }))))))),
+                h("hy-image", { "source-set": this.sourceSet, "image-url": this.imageUrl, aspectRatioWidth: 16, aspectRatioHeight: 10, "image-alt": this.imageAlt }))) : (h("div", { class: "hy-introduction__image" },
+                h("hy-image", { "image-url": this.imageUrl, aspectRatioWidth: 16, aspectRatioHeight: 10, "image-alt": this.imageAlt }))))))),
       h("hy-box", { mb: "1.75, 1.75, 2, 2.5" })));
   }
   static get is() { return "hy-introduction"; }
@@ -225,6 +226,24 @@ export class HyIntroduction {
       "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": "''"
+    },
     "isExternal": {
       "type": "boolean",
       "mutable": false,

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;