@itcenteratunihelsinki/huds-lib 0.8.57 → 0.8.59

package/dist/collection/components/hy-key-highlight/test/hy-key-highlight.spec.js

@@ -0,0 +1,23 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { HyKeyHighlight } from "../hy-key-highlight";
+describe("hy-key-highlight", () => {
+  it("renders", async () => {
+    const page = await newSpecPage({
+      components: [HyKeyHighlight],
+      html: `<hy-key-highlight></hy-key-highlight>`,
+    });
+    expect(page.root).toEqualHtml(`
+      <hy-key-highlight>
+        <mock:shadow-root>
+          <div class="big hy-key-highlight">
+            <div class="hy-key-highlight__title__container">
+              <div class="hy-key-highlight__title"></div>
+            </div>
+            <div class="hy-key-highlight__description"></div>
+          </div>
+        </mock:shadow-root>
+      </hy-key-highlight>
+    `);
+  });
+});
+//# sourceMappingURL=hy-key-highlight.spec.js.map

package/dist/collection/components/hy-key-highlight/test/hy-key-highlight.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hy-key-highlight.spec.js","sourceRoot":"","sources":["../../../../src/components/hy-key-highlight/test/hy-key-highlight.spec.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,WAAW,EAAC,MAAM,uBAAuB,CAAC;AAClD,OAAO,EAAC,cAAc,EAAC,MAAM,qBAAqB,CAAC;AAEnD,QAAQ,CAAC,kBAAkB,EAAE,GAAG,EAAE;EAChC,EAAE,CAAC,SAAS,EAAE,KAAK,IAAI,EAAE;IACvB,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,cAAc,CAAC;MAC5B,IAAI,EAAE,uCAAuC;KAC9C,CAAC,CAAC;IACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;KAW7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import {newSpecPage} from \"@stencil/core/testing\";\nimport {HyKeyHighlight} from \"../hy-key-highlight\";\n\ndescribe(\"hy-key-highlight\", () => {\n  it(\"renders\", async () => {\n    const page = await newSpecPage({\n      components: [HyKeyHighlight],\n      html: `<hy-key-highlight></hy-key-highlight>`,\n    });\n    expect(page.root).toEqualHtml(`\n      <hy-key-highlight>\n        <mock:shadow-root>\n          <div class=\"big hy-key-highlight\">\n            <div class=\"hy-key-highlight__title__container\">\n              <div class=\"hy-key-highlight__title\"></div>\n            </div>\n            <div class=\"hy-key-highlight__description\"></div>\n          </div>\n        </mock:shadow-root>\n      </hy-key-highlight>\n    `);\n  });\n});\n"]}

package/dist/collection/components/hy-link/link.e2e.js

@@ -0,0 +1,17 @@
+import { newE2EPage } from "@stencil/core/testing";
+//import { AxePuppeteer } from "axe-puppeteer";
+//import { Page } from "puppeteer";
+describe("link element", () => {
+  it("link passes axe a11y tests", async () => {
+    const page = await newE2EPage();
+    await page.setContent(`<hy-link href='#'>Hello</hy-link>`);
+    /*
+    const results = await new AxePuppeteer((page as any) as Page)
+      .include("hy-link")
+      .analyze();
+    expect(results.violations).toHaveLength(0);
+    */
+    await page.close();
+  });
+});
+//# sourceMappingURL=link.e2e.js.map

package/dist/collection/components/hy-link/link.e2e.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"link.e2e.js","sourceRoot":"","sources":["../../../src/components/hy-link/link.e2e.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAC,MAAM,uBAAuB,CAAC;AACjD,+CAA+C;AAC/C,mCAAmC;AAEnC,QAAQ,CAAC,cAAc,EAAE,GAAG,EAAE;EAC5B,EAAE,CAAC,4BAA4B,EAAE,KAAK,IAAI,EAAE;IAC1C,MAAM,IAAI,GAAG,MAAM,UAAU,EAAE,CAAC;IAChC,MAAM,IAAI,CAAC,UAAU,CAAC,mCAAmC,CAAC,CAAC;IAC3D;;;;;MAKE;IACF,MAAM,IAAI,CAAC,KAAK,EAAE,CAAC;EACrB,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import {newE2EPage} from \"@stencil/core/testing\";\n//import { AxePuppeteer } from \"axe-puppeteer\";\n//import { Page } from \"puppeteer\";\n\ndescribe(\"link element\", () => {\n  it(\"link passes axe a11y tests\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(`<hy-link href='#'>Hello</hy-link>`);\n    /*\n    const results = await new AxePuppeteer((page as any) as Page)\n      .include(\"hy-link\")\n      .analyze();\n    expect(results.violations).toHaveLength(0);\n    */\n    await page.close();\n  });\n});\n"]}

package/dist/collection/components/hy-link/link.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"link.js","sourceRoot":"","sources":["../../../src/components/hy-link/link.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAC,MAAM,eAAe,CAAC;AACvD,OAAO,EAAC,YAAY,EAAC,MAAM,mBAAmB,CAAC;AAO/C,MAAM,OAAO,IAAI;;mBACiB,YAAY,CAAC,OAAO;uBACtB,EAAE;;;sBAGF,KAAK;;EAEnC,MAAM;IACJ,MAAM,eAAe,GAAG,CAAC,SAAS,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;IAClD,MAAM,MAAM,GAAG,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC;IAEpD,OAAO,CACL,EAAC,IAAI;MACH,uBAAe,IAAI,CAAC,OAAO,EAAE,KAAK,EAAE,eAAe,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,GAAG,EAAE,MAAM,EAAE,MAAM,IAC1F,IAAI,CAAC,WAAW,CACf,CACC,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, Host, Prop, h} from \"@stencil/core\";\nimport {LinkVariants} from \"../../utils/utils\";\n\n@Component({\n  tag: \"hy-link\",\n  styleUrl: \"link.scss\",\n  shadow: false,\n})\nexport class Link {\n  @Prop() variant: LinkVariants = LinkVariants.default;\n  @Prop() linkContent: string = \"\";\n  @Prop() url?: string;\n  @Prop() scLabel?: string;\n  @Prop() isExternal: boolean = false;\n\n  render() {\n    const classAttributes = [\"hy-link\", this.variant];\n    const target = this.isExternal ? \"_blank\" : \"_self\";\n\n    return (\n      <Host>\n        <a aria-label={this.scLabel} class={classAttributes.join(\" \")} href={this.url} target={target}>\n          {this.linkContent}\n        </a>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/hy-link/link.spec.js

@@ -0,0 +1,7 @@
+import { Link } from "./link";
+describe("hy-link", () => {
+  it("builds", () => {
+    expect(new Link()).toBeTruthy();
+  });
+});
+//# sourceMappingURL=link.spec.js.map

package/dist/collection/components/hy-link/link.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"link.spec.js","sourceRoot":"","sources":["../../../src/components/hy-link/link.spec.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,IAAI,EAAC,MAAM,QAAQ,CAAC;AAE5B,QAAQ,CAAC,SAAS,EAAE,GAAG,EAAE;EACvB,EAAE,CAAC,QAAQ,EAAE,GAAG,EAAE;IAChB,MAAM,CAAC,IAAI,IAAI,EAAE,CAAC,CAAC,UAAU,EAAE,CAAC;EAClC,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import {Link} from \"./link\";\n\ndescribe(\"hy-link\", () => {\n  it(\"builds\", () => {\n    expect(new Link()).toBeTruthy();\n  });\n});\n"]}

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

@@ -0,0 +1,234 @@
+:root {
+  --brand-main: #0e688b;
+  --brand-main-soft: #b1e7ff;
+  --brand-main-bright: #48c5f8;
+  --brand-main-light: #107eab;
+  --brand-main-active: #005379;
+  --brand-main-dark: #003146;
+  --brand-main-nearly-black: #000222;
+  --link-blue: #0479a4;
+  --link-disabled: #767676;
+  --grayscale-white: #fff;
+  --grayscale-slightly-gray: #fefefe;
+  --grayscale-light: #f8f8f8;
+  --grayscale-medium: #d2d2d2;
+  --grayscale-background-box: #f5f5f5;
+  --grayscale-tabs-border: #e6e6e6;
+  --grayscale-background-arrow: #dfdfdf;
+  --grayscale-medium-dark: #979797;
+  --grayscale-dark: #555555;
+  --grayscale-dark-text: #222222;
+  --grayscale-black: #000000;
+  --additional-red-light: #e5053a;
+  --additional-red-dark: #a31621;
+  --additional-purple-light: #420039;
+  --additional-yellow-light: #f9a21a;
+  --additional-yellow: #c47f1b;
+  --additional-skyblue: #48c5f8;
+  --additional-orange: #d14600;
+  --additional-green-light: #96ba3c;
+  --additional-green-dark: #006400;
+  --hover-gray: #eaeaea;
+}
+
+* {
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+:root {
+  --gutter-mobile: 16px;
+  --gutter-narrow: 24px;
+  --gutter-medium: 24px;
+  --gutter-wide: 24px;
+  --gutter-extrawide: 32px;
+}
+
+/**
+ * Mixin for fluid type.
+ * Example usage: @include fluid-type(font-size, 320px, 1600px, 32px, 80px);
+ */
+
+:root {
+  --breakpoint-extrawide: 75.0625rem;
+  --breakpoint-max-width: 75.0625rem;
+  --breakpoint-medium: 48rem;
+  --breakpoint-narrow: 30rem;
+  --breakpoint-wide: 60rem;
+}
+
+:host {
+  height: 100%;
+}
+
+.hy-link-box-container {
+  background: var(--grayscale-background-box);
+  width: 100%;
+  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;
+}
+
+.hy-link-box-container:focus-within {
+  outline: auto;
+}
+
+.hy-link-box-container:hover {
+  cursor: pointer;
+}
+
+.hy-link-box-container:hover .hy-link-box__text-container__title {
+  color: var(--brand-main);
+  text-decoration: underline;
+}
+
+.hy-link-box-container:hover .hy-cta-link {
+  text-decoration: underline;
+}
+
+.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;
+  min-height: 10rem;
+  position: relative;
+}
+
+.hy-link-box__image-container:before {
+  content: "";
+  display: block;
+  padding-top: 62.5%;
+  width: 100%;
+}
+
+.hy-link-box__image-container img {
+  bottom: 0;
+  height: 100%;
+  left: 0;
+  -o-object-fit: cover;
+  object-fit: cover;
+  position: absolute;
+  right: 0;
+  top: 0;
+  width: 100%;
+}
+
+.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;
+}
+
+.hy-link-box__text-container {
+  padding: 16px;
+}
+
+.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.42px;
+  -ms-hyphens: auto;
+  hyphens: auto;
+  word-break: break-word;
+  margin: 0 0 16px;
+}
+
+@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__text-container__description {
+  font-size: 0.9375rem;
+  line-height: 22px;
+  color: var(--grayscale-black);
+  font-family: var(--main-font-family);
+  margin: 0;
+}
+
+@media screen and (min-width: 1024px) {
+  .hy-link-box__text-container__description {
+    font-size: 1.0625rem;
+    line-height: 26px;
+  }
+}
+
+.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);
+  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-cta-link span[aria-hidden=true] {
+  position: absolute;
+  inset: 0;
+}
+
+.hy-cta-link:focus {
+  outline: none;
+}
+
+.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-cta-link__icon svg {
+  fill: var(--grayscale-white);
+}
+
+.hy-cta-link__icon--external svg {
+  -webkit-transform: rotate(-45deg);
+  transform: rotate(-45deg);
+}

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

@@ -0,0 +1,349 @@
+import { h } from "@stencil/core";
+import { LinkBoxVariants } from "../../utils/utils";
+export class LinkBox {
+  constructor() {
+    this.variant = LinkBoxVariants.default;
+    this.imageUrl = null;
+    this.imageAlt = null;
+    this.disableLazy = false;
+    this.useSlot = false;
+    this.showLogo = false;
+    this.textTitle = undefined;
+    this.textDescription = null;
+    this.url = undefined;
+    this.isExternal = false;
+    this.scLabel = undefined;
+    this.readMoreLabel = undefined;
+    this.headerstyle = "common";
+    this.sourceSet = undefined;
+  }
+  srcSetWatcher(data) {
+    this._sourceSet = typeof data === "string" ? JSON.parse(data) : data;
+  }
+  componentWillLoad() {
+    this.srcSetWatcher(this.sourceSet);
+  }
+  componentDidLoad() {
+    let hyMainDiv = this.el.closest(".hy-main");
+    if (hyMainDiv) {
+      if (!hyMainDiv.classList.contains("with-sidebar")) {
+        this.headerstyle = "large";
+      }
+    }
+  }
+  render() {
+    const classContainerAttributes = ["hy-link-box-container"].join(" ");
+    const classAttributes = [
+      "hy-link-box",
+      this.variant,
+      `hy-link-box__${this.variant}`,
+      this.headerstyle,
+      `hy-link-box__${this.headerstyle}`,
+      this.imageUrl ? "hy-link-box--with-image" : 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",
+      `hy-link-box__text-container__title__${this.variant}`,
+      `hy-link-box__text-container__title__${this.headerstyle}`,
+      this.imageUrl ? "hy-link-box__text-container__title__image" : "",
+      this.imageUrl ? "image" : "",
+    ].join(" ");
+    const classDescription = [
+      "hy-link-box__text-container__description",
+      `hy-link-box__text-container__description__${this.variant}`,
+      `hy-link-box__text-container__description__${this.headerstyle}`,
+    ].join(" ");
+    const target = this.isExternal ? "_blank" : "_self";
+    const aspectRatioWidth = 16;
+    const aspectRatioHeight = 10;
+    const aspect = (aspectRatioHeight / aspectRatioWidth) * 100;
+    const aspectRatio = {
+      "--aspectRatio": `${aspect}%`,
+    };
+    return [
+      h("article", { class: classContainerAttributes }, h("div", { class: classAttributes }, this.imageUrl &&
+        (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("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 }, this.textTitle), this.textDescription && (h("p", { class: classDescription }, this.textDescription.length >= 141 ? this.textDescription.slice(0, 140) + "..." : 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"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["link-box.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["link-box.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "variant": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "LinkBoxVariants",
+          "resolved": "LinkBoxVariants.default | LinkBoxVariants.landingPage",
+          "references": {
+            "LinkBoxVariants": {
+              "location": "import",
+              "path": "../../utils/utils"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "variant",
+        "reflect": false,
+        "defaultValue": "LinkBoxVariants.default"
+      },
+      "imageUrl": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "image-url",
+        "reflect": false,
+        "defaultValue": "null"
+      },
+      "imageAlt": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "image-alt",
+        "reflect": false,
+        "defaultValue": "null"
+      },
+      "disableLazy": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "disable-lazy",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "useSlot": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "use-slot",
+        "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,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "text-title",
+        "reflect": false
+      },
+      "textDescription": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "text-description",
+        "reflect": false,
+        "defaultValue": "null"
+      },
+      "url": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "url",
+        "reflect": false
+      },
+      "isExternal": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "is-external",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "scLabel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "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,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "headerstyle",
+        "reflect": false,
+        "defaultValue": "\"common\""
+      },
+      "sourceSet": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "ImageSrcSet[] | string",
+          "resolved": "ImageSrcSet[] | string",
+          "references": {
+            "ImageSrcSet": {
+              "location": "local",
+              "path": "/Users/tuukkaturu/hy/hy-ds/design-system-lib/core/src/components/hy-link-box/link-box.tsx"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "source-set",
+        "reflect": false
+      }
+    };
+  }
+  static get elementRef() { return "el"; }
+  static get watchers() {
+    return [{
+        "propName": "sourceSet",
+        "methodName": "srcSetWatcher"
+      }];
+  }
+}
+//# sourceMappingURL=link-box.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"link-box.js","sourceRoot":"","sources":["../../../src/components/hy-link-box/link-box.tsx"],"names":[],"mappings":"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","sourcesContent":["export interface ImageSrcSet {\n  src: any;\n  media: string;\n  type: string;\n  sizes: string | null;\n}\n\nimport {Component, ComponentInterface, Element, Prop, h, Watch} from \"@stencil/core\";\nimport {LinkBoxVariants} from \"../../utils/utils\";\n\n@Component({\n  tag: \"hy-link-box\",\n  styleUrl: \"link-box.scss\",\n  shadow: false,\n})\nexport class LinkBox implements ComponentInterface {\n  @Prop() variant: LinkBoxVariants = LinkBoxVariants.default;\n  @Prop() imageUrl: string = null;\n  @Prop() imageAlt: string = null;\n  @Prop() disableLazy: boolean = false;\n  @Prop() useSlot: boolean = false;\n  @Prop() showLogo: boolean = false;\n  @Prop() textTitle?: string;\n  @Prop() textDescription: string = null;\n  @Prop() url?: string;\n  @Prop() isExternal: boolean = false;\n  @Prop() scLabel?: string;\n  @Prop() readMoreLabel: string;\n  @Prop() headerstyle: string = \"common\";\n  private _sourceSet: ImageSrcSet[];\n  @Prop() sourceSet: ImageSrcSet[] | string;\n  @Element() el: HTMLElement;\n\n  @Watch(\"sourceSet\") srcSetWatcher(data: ImageSrcSet[] | string) {\n    this._sourceSet = typeof data === \"string\" ? JSON.parse(data) : data;\n  }\n\n  componentWillLoad() {\n    this.srcSetWatcher(this.sourceSet);\n  }\n\n  componentDidLoad() {\n    let hyMainDiv = this.el.closest(\".hy-main\");\n    if (hyMainDiv) {\n      if (!hyMainDiv.classList.contains(\"with-sidebar\")) {\n        this.headerstyle = \"large\";\n      }\n    }\n  }\n\n  render() {\n    const classContainerAttributes = [\"hy-link-box-container\"].join(\" \");\n    const classAttributes = [\n      \"hy-link-box\",\n      this.variant,\n      `hy-link-box__${this.variant}`,\n      this.headerstyle,\n      `hy-link-box__${this.headerstyle}`,\n      this.imageUrl ? \"hy-link-box--with-image\" : null,\n    ].join(\" \");\n\n    const classTextContainer = [\"hy-link-box__text-container\", this.imageUrl ? \"hy-link-box--with-image\" : null].join(\n      \" \"\n    );\n\n    const classTitle = [\n      \"hy-link-box__text-container__title\",\n      `hy-link-box__text-container__title__${this.variant}`,\n      `hy-link-box__text-container__title__${this.headerstyle}`,\n      this.imageUrl ? \"hy-link-box__text-container__title__image\" : \"\",\n      this.imageUrl ? \"image\" : \"\",\n    ].join(\" \");\n\n    const classDescription = [\n      \"hy-link-box__text-container__description\",\n      `hy-link-box__text-container__description__${this.variant}`,\n      `hy-link-box__text-container__description__${this.headerstyle}`,\n    ].join(\" \");\n\n    const target = this.isExternal ? \"_blank\" : \"_self\";\n\n    const aspectRatioWidth = 16;\n    const aspectRatioHeight = 10;\n    const aspect = (aspectRatioHeight / aspectRatioWidth) * 100;\n    const aspectRatio = {\n      \"--aspectRatio\": `${aspect}%` as \"aspectRatio\",\n    };\n\n    return [\n      <article class={classContainerAttributes}>\n        <div class={classAttributes}>\n          {this.imageUrl &&\n            (this._sourceSet ? (\n              <figure class=\"hy-link-box__image-container\" style={aspectRatio}>\n                <picture>\n                  {this._sourceSet.map((item) => (\n                    <source\n                      srcSet={item.src}\n                      media={item.media}\n                      type={item.type}\n                      sizes={item.sizes ? item.sizes : \"\"}\n                    />\n                  ))}\n                  <img\n                    loading={this.disableLazy ? \"eager\" : \"lazy\"}\n                    aria-hidden=\"true\"\n                    src={this.imageUrl}\n                    alt={this.imageAlt}\n                  />\n                </picture>\n              </figure>\n            ) : (\n              <figure class=\"hy-link-box__image-container\" style={aspectRatio}>\n                <img\n                  loading={this.disableLazy ? \"eager\" : \"lazy\"}\n                  aria-hidden=\"true\"\n                  src={this.imageUrl}\n                  alt={this.imageAlt}\n                />\n              </figure>\n            ))}\n          {!this.imageUrl && this.showLogo && (\n            <div aria-hidden=\"true\" class=\"hy-link-box__image-container is-image-missing\">\n              <hy-icon class={{\"hy-site-logo__icon\": true}} icon={\"hy-icon-hy-logo\"} />\n            </div>\n          )}\n          <div class={classTextContainer}>\n            <h3 class={classTitle}>{this.textTitle}</h3>\n            {this.textDescription && (\n              <p class={classDescription}>\n                {this.textDescription.length >= 141 ? this.textDescription.slice(0, 140) + \"...\" : this.textDescription}\n              </p>\n            )}\n          </div>\n        </div>\n        <a\n          aria-label={this.scLabel || `${this.readMoreLabel} - ${this.textTitle}`}\n          title={this.scLabel || `${this.readMoreLabel} - ${this.textTitle}`}\n          href={this.url}\n          target={target}\n          class={`hy-cta-link hy-cta-link--default`}\n        >\n          <span aria-hidden=\"true\"></span>\n          <span>{this.readMoreLabel}</span>\n          <span class={`hy-cta-link__icon ${this.isExternal ? \"hy-cta-link__icon--external\" : \"\"}`}>\n            <hy-icon icon={\"hy-icon-arrow-to-right\"} size={24} />\n          </span>\n        </a>\n      </article>,\n    ];\n  }\n}\n"]}

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

@@ -0,0 +1,7 @@
+import { LinkBox } from "./link-box";
+describe("hy-link-box", () => {
+  it("builds", () => {
+    expect(new LinkBox()).toBeTruthy();
+  });
+});
+//# sourceMappingURL=link-box.spec.js.map