@itcenteratunihelsinki/huds-lib 0.5.30 → 0.5.34

package/dist/collection/components/button/button.js

@@ -38,11 +38,29 @@ export class Button {
      * Use only with url property. Sets the
      */
     this.isExternal = false;
+    this.attrs = '';
   }
   render() {
     const classAttributes = ['hy-button', this.variant, this.state, 'size-' + this.size, this.buttonClasses];
     const iconFillColor = fillcolors[this.variant];
     const target = this.isExternal ? '_blank' : '_self';
+    let props = {};
+    if (this.attrs && this.attrs.length > 2) {
+      let attrString = JSON.parse(this.attrs);
+      let attrArray = attrString.split('" ');
+      attrArray.map((item) => {
+        let parts = item.split('=');
+        let key = parts[0];
+        let value = parts[1];
+        key = key.replaceAll('"', ' ');
+        key = key.trim();
+        if (key !== 'class') {
+          value = value.replaceAll('"', ' ');
+          value = value.trim();
+          props[key] = value;
+        }
+      });
+    }
     return this.url ? (h(Host, { "icon-right": "hy-icon-arrow-right", "aria-label": this.ariaLabel },
       h("div", { style: { display: 'flex' } },
         h("a", { class: classAttributes.join(' '), href: this.url, target: target },
@@ -50,7 +68,7 @@ export class Button {
             h("slot", null)),
           h("span", { class: "hy-button__icon" },
             h("hy-icon", { icon: "hy-icon-arrow-right", fill: iconFillColor, size: 13 })))))) : (h(Host, { "aria-label": this.ariaLabel },
-      h("button", { type: this.buttonType, class: classAttributes.join(' '), disabled: this.disabled },
+      h("button", Object.assign({ type: this.buttonType, class: classAttributes.join(' '), disabled: this.disabled }, props),
         !!this.icon && (h("span", { class: "hy-button__icon hy-button__icon--left" },
           h("hy-icon", { icon: this.icon, fill: iconFillColor, size: 13 }))),
         h("span", { class: "hy-button__text" },
@@ -265,6 +283,24 @@ export class Button {
       },
       "attribute": "icon-right",
       "reflect": false
+    },
+    "attrs": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "attrs",
+      "reflect": false,
+      "defaultValue": "''"
     }
   }; }
 }

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;
-  }
 }