@itcenteratunihelsinki/huds-lib 0.5.37 → 0.5.40

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

@@ -239,7 +239,7 @@
 }
 
 @media (min-width: 30rem) {
-  .hy-footer-info__links.is-group {
+  .hy-footer-info__links.is-group:not(.luomus) {
     -webkit-box-orient: horizontal;
     -webkit-box-direction: normal;
     -ms-flex-direction: row;
@@ -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,38 +26,57 @@ 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,
+          luomus: this.isLuomusGroup,
         } },
         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,
+          luomus: this.isLuomusGroup,
         } }, 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", { "is-luomus-group": this.isLuomusGroup, 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 +190,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 +258,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 +296,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

@@ -84,14 +84,14 @@ hy-footer-link-item[main-link] {
   }
 }
 
-hy-footer-link-item.group[main-link] {
+hy-footer-link-item.group[main-link]:not([is-luomus-group]) {
   -ms-flex-preferred-size: 100%;
   flex-basis: 100%;
   margin-top: 1rem;
 }
 
 @media (min-width: 30rem) {
-  hy-footer-link-item.group[main-link] {
+  hy-footer-link-item.group[main-link]:not([is-luomus-group]) {
     -ms-flex-preferred-size: 50%;
     flex-basis: 50%;
     margin: 0;
@@ -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/footer/hy-footer-link-item/hy-footer-link-item.js

@@ -6,6 +6,7 @@ export class HyFooterLinkItem {
     this.mainLink = false;
     this.color = FooterLinkItemColor.black;
     this.variant = FooterLinkVariants.base;
+    this.isLuomusGroup = false;
   }
   render() {
     const containerClassAttributes = [
@@ -18,23 +19,34 @@ export class HyFooterLinkItem {
       this.mainLink && 'hy-footer-link-item__main',
       `hy-footer-link-item__color-${this.color}`,
     ].join(' ');
+    const headingClassAttributes = [
+      'hy-footer-link-item',
+      'hy-footer-link-item__heading',
+      this.mainLink && 'hy-footer-link-item__main',
+      `hy-footer-link-item__heading__color-${this.color}`,
+    ].join(' ');
+    const linkClassAttributes = [
+      'hy-footer-link-item',
+      `hy-footer-link-item__color-${this.color}`,
+      this.isLuomusGroup ? `luomus` : '',
+    ].join(' ');
     if (this.items) {
       if (this.isMobile && this.variant !== FooterLinkVariants.group) {
         return (h("div", { class: containerClassAttributes }, this.items.map((item) => {
           const target = item.isExternal === 'external' ? '_blank' : '_self';
-          return (h("a", { class: `hy-footer-link-item hy-footer-link-item__color-${this.color}`, href: item.url, target: target, style: { color: this.color } },
+          return (h("a", { class: linkClassAttributes, href: item.url, target: target, style: { color: this.color } },
             item.label,
             h("hy-icon", { class: 'hy-footer-link-item__icon', icon: 'hy-icon-arrow-right', size: 16 })));
         })));
       }
       else {
         return (h("div", { class: containerClassAttributes },
-          h("hy-heading", { class: classAttributes, heading: HeadingVarians.h3 },
+          h("hy-heading", { class: headingClassAttributes, heading: HeadingVarians.h3 },
             this.url.length > 0 && (h("a", { class: 'hy-footer-link-item__link', href: this.url, style: { color: this.color } }, this.label)),
             this.url.length == 0 && h("div", { class: 'hy-footer-link-item__link' }, this.label)),
           this.items.map((item) => {
             const target = item.isExternal === 'external' ? '_blank' : '_self';
-            return (h("a", { class: `hy-footer-link-item hy-footer-link-item__color-${this.color}`, href: item.url, target: target, style: { color: this.color } },
+            return (h("a", { class: linkClassAttributes, href: item.url, target: target, style: { color: this.color } },
               item.label,
               h("hy-icon", { class: 'hy-footer-link-item__icon', icon: 'hy-icon-arrow-right', size: 16 })));
           })));
@@ -206,6 +218,24 @@ export class HyFooterLinkItem {
       "attribute": "variant",
       "reflect": false,
       "defaultValue": "FooterLinkVariants.base"
+    },
+    "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"
     }
   }; }
 }

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,