@itcenteratunihelsinki/huds-lib 0.5.32 → 0.5.36

package/dist/collection/components/link-box/link-box.css

@@ -57,165 +57,56 @@
 }
 
 :host {
+  height: 100%;
+}
+
+.hy-link-box-container {
   background: var(--grayscale-background-box);
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  margin-bottom: 32px;
-  margin-right: 0;
-  max-width: 100%;
   position: relative;
   width: 100%;
-}
-
-@media (min-width: 30rem) {
-  :host {
-    margin-right: var(--gutter-narrow);
-  }
-}
-
-@media (min-width: 60rem) {
-  :host {
-    margin-right: var(--gutter-wide);
-  }
-}
-
-@media (min-width: 75.0625rem) {
-  :host {
-    margin-right: var(--gutter-extrawide);
-  }
-}
-
-:host(.big) {
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-}
-
-@media (min-width: 30rem) {
-  :host(.big) {
-    -webkit-box-flex: 1;
-    -ms-flex-positive: 1;
-    flex-grow: 1;
-    max-width: calc(((100% - var(--gutter-narrow) * 11) / 12) * 6 + var(--gutter-narrow) * 5);
-    width: calc(((100% - var(--gutter-narrow) * 11) / 12) * 6 + var(--gutter-narrow) * 5);
-  }
-}
-
-@media (min-width: 60rem) {
-  :host(.big) {
-    max-width: calc(((100% - var(--gutter-wide) * 11) / 12) * 4 + var(--gutter-wide) * 3);
-    width: calc(((100% - var(--gutter-wide) * 11) / 12) * 4 + var(--gutter-wide) * 3);
-  }
-}
-
-@media (min-width: 75.0625rem) {
-  :host(.big) {
-    max-width: calc(((100% - var(--gutter-extrawide) * 11) / 12) * 4 + var(--gutter-extrawide) * 3);
-    width: calc(((100% - var(--gutter-extrawide) * 11) / 12) * 4 + var(--gutter-extrawide) * 3);
-  }
-}
-
-:host(.small) {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
+  -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;
+  height: 100%;
+  position: relative;
 }
 
-@media (min-width: 30rem) {
-  :host(.small) {
-    -webkit-box-flex: 1;
-    -ms-flex-positive: 1;
-    flex-grow: 1;
-    max-width: calc(((100% - var(--gutter-narrow) * 11) / 12) * 6 + var(--gutter-narrow) * 5);
-    width: calc(((100% - var(--gutter-narrow) * 11) / 12) * 6 + var(--gutter-narrow) * 5);
-  }
-}
-
-@media (min-width: 60rem) {
-  :host(.small) {
-    max-width: calc(((100% - var(--gutter-wide) * 11) / 12) * 3 + var(--gutter-wide) * 2);
-    width: calc(((100% - var(--gutter-wide) * 11) / 12) * 3 + var(--gutter-wide) * 2);
-  }
-}
-
-@media (min-width: 75.0625rem) {
-  :host(.small) {
-    max-width: calc(((100% - var(--gutter-extrawide) * 11) / 12) * 3 + var(--gutter-extrawide) * 2);
-    width: calc(((100% - var(--gutter-extrawide) * 11) / 12) * 3 + var(--gutter-extrawide) * 2);
-  }
-}
-
-@media (min-width: 60rem) {
-  :host(.content.big:nth-of-type(3n + 0)) {
-    display: -webkit-box;
-    display: -ms-flexbox;
-    display: flex;
-    margin-right: 0;
-  }
-}
-
-:host(:nth-of-type(2n + 0)) {
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  margin-right: 0;
-}
-
-@media (min-width: 30rem) {
-  :host(:nth-of-type(2n + 0)) {
-    margin-right: 0;
-  }
-}
-
-@media (min-width: 60rem) {
-  :host(:nth-of-type(2n + 0)) {
-    margin-right: var(--gutter-wide);
-  }
-}
-
-@media (min-width: 75.0625rem) {
-  :host(:nth-of-type(2n + 0)) {
-    margin-right: var(--gutter-extrawide);
-  }
+.hy-link-box-container:focus-within {
+  outline: auto;
 }
 
-:host(.small:nth-of-type(4n + 0)) {
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-}
-
-@media (min-width: 30rem) {
-  :host(.small:nth-of-type(4n + 0)) {
-    margin-right: 0;
-  }
+.hy-link-box-container:hover {
+  cursor: pointer;
 }
 
-:host(:last-of-type) {
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  margin-right: 0;
+.hy-link-box-container:hover .hy-link-box__text-container__title {
+  color: var(--brand-main);
+  text-decoration: underline;
 }
 
-.hy-link-box-container {
-  position: relative;
-  width: 100%;
+.hy-link-box-container:hover .hy-cta-link {
+  text-decoration: underline;
 }
 
-.hy-link-box-container:hover {
-  cursor: pointer;
+.hy-link-box-container:hover .hy-cta-link .hy-cta-link__icon {
+  background-color: var(--brand-main);
 }
 
 .hy-link-box__image-container {
+  margin: 0;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-pack: stretch;
   -ms-flex-pack: stretch;
   justify-content: stretch;
-  margin-bottom: 0;
   min-height: 10rem;
   position: relative;
 }
@@ -239,258 +130,106 @@
   width: 100%;
 }
 
-.hy-link-box__landing .hy-link-box__text-container {
-  margin-bottom: 60px;
-  padding: 0 12px;
-}
-
-@media (min-width: 30rem) {
-  .hy-link-box__landing .hy-link-box__text-container {
-    padding: 0 16px;
-  }
-}
-
-@media (min-width: 60rem) {
-  .hy-link-box__landing .hy-link-box__text-container {
-    padding: 0 12px;
-  }
+.hy-link-box__image-container.is-image-missing svg {
+  position: absolute;
+  top: 50%;
+  -webkit-transform: translate(-50%, -50%);
+  transform: translate(-50%, -50%);
+  left: 50%;
+  width: 85px;
+  height: auto;
+  fill: #d2d2d2;
 }
 
-@media (min-width: 1601px) {
-  .hy-link-box__landing .hy-link-box__text-container {
-    padding: 0 16px;
-  }
+.hy-link-box__text-container {
+  padding: 16px;
 }
 
-.hy-link-box__landing .hy-link-box__text-container__title {
-  font-size: 1.375rem;
+.hy-link-box__text-container__title {
+  font-size: 1.3125rem;
   line-height: 28px;
   font-weight: 700;
   color: var(--brand-main-nearly-black);
   font-family: var(--main-font-family);
-  letter-spacing: -0.6px;
+  letter-spacing: -0.42px;
   -webkit-hyphens: auto;
   -ms-hyphens: auto;
   hyphens: auto;
-  margin-bottom: 8px;
-  margin-top: 20px;
   word-break: break-word;
+  margin: 0 0 16px;
 }
 
-.hy-link-box__landing .hy-link-box__text-container__title__image {
-  margin-top: 16px;
-}
-
-@media (min-width: 30rem) {
-  .hy-link-box__landing .hy-link-box__text-container__title {
-    font-size: 1.5rem;
-    line-height: 30px;
-    color: var(--grayscale-black);
-    letter-spacing: -0.7px;
-  }
-}
-
-@media (min-width: 60rem) {
-  .hy-link-box__landing .hy-link-box__text-container__title {
-    margin-top: 24px;
-  }
-  .hy-link-box__landing .hy-link-box__text-container__title__image {
-    margin-top: 18px;
-  }
-}
-
-@media (min-width: 75.0625rem) {
-  .hy-link-box__landing .hy-link-box__text-container__title__common {
-    font-size: 1.5rem;
-    line-height: 30px;
-    letter-spacing: -0.7px;
-  }
-  .hy-link-box__landing .hy-link-box__text-container__title__large {
-    font-size: 1.75rem;
-    line-height: 36px;
-    letter-spacing: -0.8px;
-    margin-bottom: 12px;
-    margin-top: 32px;
-  }
-  .hy-link-box__landing .hy-link-box__text-container__title__large.image {
-    margin-top: 20px;
-  }
-}
-
-@media (min-width: 1601px) {
-  .hy-link-box__landing .hy-link-box__text-container__title {
-    font-size: 1.75rem;
-    line-height: 36px;
-    letter-spacing: -0.8px;
-    margin-bottom: 12px;
-    margin-top: 32px;
-  }
-  .hy-link-box__landing .hy-link-box__text-container__title__image {
-    margin-top: 20px;
-  }
-}
-
-.hy-link-box__landing .hy-link-box__text-container__description {
-  font-size: 0.875rem;
-  line-height: 18px;
-  color: var(--grayscale-dark);
-  font-family: var(--main-font-family);
-  letter-spacing: -0.2px;
-  margin-bottom: 12px;
-}
-
-@media (min-width: 75.0625rem) {
-  .hy-link-box__landing .hy-link-box__text-container__description__common {
-    font-size: 0.875rem;
-    line-height: 18px;
-    letter-spacing: -0.2px;
-  }
-  .hy-link-box__landing .hy-link-box__text-container__description__large {
-    font-size: 1rem;
-    line-height: 22px;
-    letter-spacing: -0.2px;
-  }
-}
-
-@media (min-width: 1601px) {
-  .hy-link-box__landing .hy-link-box__text-container__description {
-    font-size: 1rem;
-    line-height: 22px;
-    letter-spacing: -0.2px;
-  }
-}
-
-.hy-link-box__content .hy-link-box__text-container {
-  margin-bottom: 60px;
-  padding: 0 12px;
-}
-
-@media (min-width: 30rem) {
-  .hy-link-box__content .hy-link-box__text-container {
-    padding: 0 16px;
-  }
-}
-
-@media (min-width: 60rem) {
-  .hy-link-box__content .hy-link-box__text-container {
-    padding: 0 12px;
+@media screen and (min-width: 1024px) {
+  .hy-link-box__text-container__title {
+    font-size: 1.5625rem;
+    line-height: 32px;
+    letter-spacing: -0.5px;
   }
 }
 
-.hy-link-box__content .hy-link-box__text-container__title {
-  font-size: 1.125rem;
+.hy-link-box__text-container__description {
+  font-size: 0.9375rem;
   line-height: 22px;
-  font-weight: 700;
-  color: var(--brand-main-nearly-black);
+  color: var(--grayscale-black);
   font-family: var(--main-font-family);
-  letter-spacing: -0.5px;
-  -webkit-hyphens: auto;
-  -ms-hyphens: auto;
-  hyphens: auto;
-  margin-bottom: 8px;
-  margin-top: 24px;
-  word-break: break-word;
-}
-
-.hy-link-box__content .hy-link-box__text-container__title__image {
-  margin-top: 20px;
+  margin: 0;
 }
 
-@media (min-width: 60rem) {
-  .hy-link-box__content .hy-link-box__text-container__title__image {
-    margin-top: 16px;
-  }
-}
-
-@media (min-width: 75.0625rem) {
-  .hy-link-box__content .hy-link-box__text-container__title__common {
-    font-size: 1.125rem;
-    line-height: 22px;
-    letter-spacing: -0.5px;
-  }
-  .hy-link-box__content .hy-link-box__text-container__title__large {
-    font-size: 1.25rem;
-    line-height: 24px;
-    letter-spacing: -0.6px;
-    margin-bottom: 12px;
-    margin-top: 32px;
-  }
-  .hy-link-box__content .hy-link-box__text-container__title__large__image {
-    margin-top: 20px;
+@media screen and (min-width: 1024px) {
+  .hy-link-box__text-container__description {
+    font-size: 1.0625rem;
+    line-height: 26px;
   }
 }
 
-@media (min-width: 1601px) {
-  .hy-link-box__content .hy-link-box__text-container__title {
-    font-size: 1.25rem;
-    line-height: 24px;
-    letter-spacing: -0.6px;
-    margin-bottom: 12px;
-    margin-top: 32px;
-  }
-  .hy-link-box__content .hy-link-box__text-container__title__image {
-    margin-top: 20px;
-  }
-}
-
-.hy-link-box__content .hy-link-box__text-container__description {
-  font-size: 0.875rem;
-  line-height: 18px;
-  color: var(--grayscale-dark);
-  font-family: var(--main-font-family);
-  letter-spacing: -0.2px;
-  margin-bottom: 10px;
-}
-
-.hy-link-box .hy-link-box__text-container__title__hover {
+.hy-cta-link {
+  font-weight: 600;
+  font-size: 1rem;
+  line-height: 24px;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
   color: var(--brand-main);
-  text-decoration: underline;
+  display: inline-grid;
+  font-family: var(--main-font-family);
+  gap: 16px;
+  grid-auto-flow: column;
+  letter-spacing: -0.5px;
+  overflow: hidden;
+  text-decoration: none;
+  margin: 0 -8px 24px 0;
+  align-self: flex-end;
 }
 
-.hy-icon-wrapper {
-  background-color: var(--brand-main-light);
-  bottom: 12px;
-  overflow: hidden;
+.hy-cta-link span[aria-hidden=true] {
   position: absolute;
-  right: -6px;
-  z-index: 10;
+  inset: 0;
 }
 
-.hy-icon-wrapper__hover {
-  background-color: var(--brand-main);
+.hy-cta-link:focus {
+  outline: none;
 }
 
-.hy-link-box-link {
-  display: block;
+.hy-cta-link__icon {
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  background-color: var(--brand-main-light);
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  height: 40px;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  width: 40px;
 }
 
-.hy-link-box-link svg {
-  background-color: transparent;
-  -webkit-box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.05);
-  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.05);
+.hy-cta-link__icon svg {
   fill: var(--grayscale-white);
-  height: 32px;
-  padding: 6px;
-  width: 32px;
 }
 
-.hy-link-box-link__external {
+.hy-cta-link__icon--external svg {
   -webkit-transform: rotate(-45deg);
   transform: rotate(-45deg);
-}
-
-@media (min-width: 75.0625rem) {
-  .hy-link-box-link__landing.large svg {
-    height: 40px;
-    padding: 8px;
-    width: 40px;
-  }
-}
-
-@media (min-width: 1601px) {
-  .hy-link-box-link__landing svg {
-    height: 40px;
-    padding: 8px;
-    width: 40px;
-  }
 }

package/dist/collection/components/link-box/link-box.js

@@ -1,8 +1,5 @@
-import { Component, Element, Prop, h, Listen, Watch } from '@stencil/core';
+import { Component, Element, Prop, h, Watch } from '@stencil/core';
 import { LinkBoxVariants } from '../../utils/utils';
-let keys = {
-  enter: 'Enter',
-};
 export class LinkBox {
   constructor() {
     this.variant = LinkBoxVariants.default;
@@ -10,6 +7,7 @@ export class LinkBox {
     this.imageAlt = null;
     this.disableLazy = false;
     this.useSlot = false;
+    this.showLogo = false;
     this.textDescription = null;
     this.isExternal = false;
     this.headerstyle = 'common';
@@ -28,43 +26,6 @@ export class LinkBox {
       }
     }
   }
-  handleClick(event) {
-    this.openLink(event.currentTarget);
-  }
-  handleKeyDown(event) {
-    const key = event.code;
-    if (key == keys.enter) {
-      this.openLink(event.currentTarget);
-    }
-  }
-  openLink(linkbox) {
-    let card = linkbox.shadowRoot.querySelector('.hy-link-box-container');
-    window.open(card.dataset.location, card.dataset.target);
-  }
-  handleMouseEnter(event) {
-    this.manageHoverEffect(event.currentTarget);
-  }
-  handleMouseLeave(event) {
-    this.manageHoverEffect(event.currentTarget, false);
-  }
-  handleOnFocusIn(event) {
-    this.manageHoverEffect(event.currentTarget);
-  }
-  handleOnFocusOut(event) {
-    this.manageHoverEffect(event.currentTarget, false);
-  }
-  manageHoverEffect(linkbox, hoverOn = true) {
-    let title = linkbox.shadowRoot.querySelector('h3.hy-link-box__text-container__title');
-    let boxLink = linkbox.shadowRoot.querySelector('.hy-icon-wrapper');
-    if (hoverOn) {
-      title.classList.add('hy-link-box__text-container__title__hover');
-      boxLink.classList.add('hy-icon-wrapper__hover');
-    }
-    else {
-      title.classList.remove('hy-link-box__text-container__title__hover');
-      boxLink.classList.remove('hy-icon-wrapper__hover');
-    }
-  }
   render() {
     const classContainerAttributes = ['hy-link-box-container'].join(' ');
     const classAttributes = [
@@ -75,13 +36,6 @@ export class LinkBox {
       `hy-link-box__${this.headerstyle}`,
       this.imageUrl ? 'hy-link-box--with-image' : null,
     ].join(' ');
-    const classLinkAttributes = [
-      'hy-link-box-link',
-      `hy-link-box-link__${this.variant}`,
-      `hy-link-box-link__${this.headerstyle}`,
-      this.headerstyle,
-      this.isExternal ? 'hy-link-box-link__external' : null,
-    ].join(' ');
     const classTextContainer = ['hy-link-box__text-container', this.imageUrl ? 'hy-link-box--with-image' : null].join(' ');
     const classTitle = [
       'hy-link-box__text-container__title',
@@ -103,20 +57,24 @@ export class LinkBox {
       '--aspectRatio': `${aspect}%`,
     };
     return [
-      h("article", { class: classContainerAttributes, tabindex: "0", "data-target": target, "data-location": this.url },
-        h("div", { class: classAttributes, "aria-label": this.scLabel },
+      h("article", { class: classContainerAttributes },
+        h("div", { class: classAttributes },
           this.imageUrl &&
-            (this._sourceSet ? (h("div", { class: "hy-link-box__image-container", style: aspectRatio },
+            (this._sourceSet ? (h("figure", { class: "hy-link-box__image-container", style: aspectRatio },
               h("picture", null,
                 this._sourceSet.map((item) => (h("source", { srcSet: item.src, media: item.media, type: item.type, sizes: item.sizes ? item.sizes : '' }))),
-                h("img", { loading: this.disableLazy ? 'eager' : 'lazy', "aria-hidden": "true", src: this.imageUrl, alt: this.imageAlt })))) : (h("div", { class: "hy-link-box__image-container", style: aspectRatio },
+                h("img", { loading: this.disableLazy ? 'eager' : 'lazy', "aria-hidden": "true", src: this.imageUrl, alt: this.imageAlt })))) : (h("figure", { class: "hy-link-box__image-container", style: aspectRatio },
               h("img", { loading: this.disableLazy ? 'eager' : 'lazy', "aria-hidden": "true", src: this.imageUrl, alt: this.imageAlt })))),
+          !this.imageUrl && this.showLogo && (h("div", { "aria-hidden": "true", class: "hy-link-box__image-container is-image-missing" },
+            h("hy-icon", { class: { 'hy-site-logo__icon': true }, icon: 'hy-icon-hy-logo' }))),
           h("div", { class: classTextContainer },
-            h("h3", { class: classTitle, innerHTML: this.textTitle }),
-            this.textDescription && h("div", { class: classDescription }, this.textDescription))),
-        h("span", { class: 'hy-icon-wrapper' },
-          h("a", { class: classLinkAttributes, href: this.url, target: target, "aria-label": this.scLabel, tabindex: "-1" },
-            h("hy-icon", { icon: 'hy-icon-arrow-to-right', size: 32 })))),
+            h("h3", { class: classTitle }, this.textTitle),
+            this.textDescription && (h("p", { class: classDescription }, this.textDescription.length >= 140 ? this.textDescription.slice(0, 139) + '...' : this.textDescription)))),
+        h("a", { "aria-label": this.scLabel || `${this.readMoreLabel} - ${this.textTitle}`, title: this.scLabel || `${this.readMoreLabel} - ${this.textTitle}`, href: this.url, target: target, class: `hy-cta-link hy-cta-link--default` },
+          h("span", { "aria-hidden": "true" }),
+          h("span", null, this.readMoreLabel),
+          h("span", { class: `hy-cta-link__icon ${this.isExternal ? 'hy-cta-link__icon--external' : ''}` },
+            h("hy-icon", { icon: 'hy-icon-arrow-to-right', size: 24 })))),
     ];
   }
   static get is() { return "hy-link-box"; }
@@ -223,6 +181,24 @@ export class LinkBox {
       "reflect": false,
       "defaultValue": "false"
     },
+    "showLogo": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "show-logo",
+      "reflect": false,
+      "defaultValue": "false"
+    },
     "textTitle": {
       "type": "string",
       "mutable": false,
@@ -310,6 +286,23 @@ export class LinkBox {
       "attribute": "sc-label",
       "reflect": false
     },
+    "readMoreLabel": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "read-more-label",
+      "reflect": false
+    },
     "headerstyle": {
       "type": "string",
       "mutable": false,
@@ -355,41 +348,4 @@ export class LinkBox {
       "propName": "sourceSet",
       "methodName": "srcSetWatcher"
     }]; }
-  static get listeners() { return [{
-      "name": "click",
-      "method": "handleClick",
-      "target": undefined,
-      "capture": false,
-      "passive": false
-    }, {
-      "name": "keydown",
-      "method": "handleKeyDown",
-      "target": undefined,
-      "capture": false,
-      "passive": false
-    }, {
-      "name": "mouseenter",
-      "method": "handleMouseEnter",
-      "target": undefined,
-      "capture": false,
-      "passive": true
-    }, {
-      "name": "mouseleave",
-      "method": "handleMouseLeave",
-      "target": undefined,
-      "capture": false,
-      "passive": true
-    }, {
-      "name": "focusin",
-      "method": "handleOnFocusIn",
-      "target": undefined,
-      "capture": false,
-      "passive": false
-    }, {
-      "name": "focusout",
-      "method": "handleOnFocusOut",
-      "target": undefined,
-      "capture": false,
-      "passive": false
-    }]; }
 }