@itcenteratunihelsinki/huds-lib 0.8.43 → 0.8.45

package/dist/collection/components/icon/icons.js

@@ -1,9 +1,9 @@
-import { h } from '@stencil/core';
+import { h } from "@stencil/core";
 export const IconArrowLeft = (props) => {
-  return (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: props.width || 30, height: props.height || 29, viewBox: "0 0 30 29", fill: props.fill || 'black' }, h("polygon", { points: "29.207 13.783 14.756 .717 14.055 0 11.402 3.118 10.732 3.835 19.665 11.974 0 11.974 0 17.026 19.756 17.026 11.494 24.447 10.823 25.071 11.402 25.882 13.476 28.189 14.055 29 30 14.594", transform: "rotate(-180 15 14.5)" })));
+  return (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: props.width || 30, height: props.height || 29, viewBox: "0 0 30 29", fill: props.fill || "black" }, h("polygon", { points: "29.207 13.783 14.756 .717 14.055 0 11.402 3.118 10.732 3.835 19.665 11.974 0 11.974 0 17.026 19.756 17.026 11.494 24.447 10.823 25.071 11.402 25.882 13.476 28.189 14.055 29 30 14.594", transform: "rotate(-180 15 14.5)" })));
 };
 export const IconArrowRight = (props) => {
-  return (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: props.width || 30, height: props.height || 29, viewBox: "0 0 30 29", fill: props.fill || 'black' }, h("polygon", { points: "29.207 13.783 14.756 .717 14.055 0 11.402 3.118 10.732 3.835 19.665 11.974 0 11.974 0 17.026 19.756 17.026 11.494 24.447 10.823 25.071 11.402 25.882 13.476 28.189 14.055 29 30 14.594" })));
+  return (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: props.width || 30, height: props.height || 29, viewBox: "0 0 30 29", fill: props.fill || "black" }, h("polygon", { points: "29.207 13.783 14.756 .717 14.055 0 11.402 3.118 10.732 3.835 19.665 11.974 0 11.974 0 17.026 19.756 17.026 11.494 24.447 10.823 25.071 11.402 25.882 13.476 28.189 14.055 29 30 14.594" })));
 };
 export const IconArrowToRight = (props) => {
   return (h("svg", Object.assign({ viewBox: "0 0 1000 1000" }, props), h("path", { d: "M993.6,482.3L518.2,6.4c-4.6-4.6-11-6.9-17.4-6.3c-6.4,0.6-12.3,4-15.9,9.4l-73.5,107.7\n        c-5.9,8.6-4.8,20.2,2.6,27.6l265,265.3H21.7c-12,0-21.7,9.7-21.7,21.7v128.2c0,12,9.7,21.7,21.7,21.7H687L414,855.2\n        c-7.4,7.4-8.5,19-2.6,27.6l73.5,107.7c3.6,5.3,9.5,8.8,15.9,9.4c0.7,0.1,1.3,0.1,2,0.1c5.7,0,11.3-2.3,15.4-6.4l475.4-475.9\n        c4.8-4.8,6.9-11.4,6.2-17.7c0.1-0.8,0.1-1.5,0.1-2.3C1000,491.9,997.7,486.4,993.6,482.3z" })));
@@ -11,132 +11,132 @@ export const IconArrowToRight = (props) => {
 export const IconQuote = (props) => {
   return (h("svg", Object.assign({ viewBox: "0 0 1000 660" }, props), h("path", { id: "Quote-icon", d: "M222.8,660C330.3,422.9,407.2,212.5,453.5,29L433.8,0H131.1C104,186.2,60.3,406.2,0,660H222.8z M769.3,660\n\t  C876.8,422.9,953.7,212.5,1000,29l0,0L981.7,0H678.9c-29.7,202-74.7,422-135,660l0,0H769.3z" })));
 };
-export { default as AddToTodoList } from './AddToTodoList';
-export { default as Alert } from './Alert';
-export { default as ArrowDown } from './ArrowDown';
-export { default as ArrowUp } from './ArrowUp';
-export { default as Archive } from './Archive';
-export { default as Arrow } from './Arrow';
-export { default as AvatarGroup } from './AvatarGroup';
-export { default as Avatar } from './Avatar';
-export { default as Bachelor } from './Bachelor';
-export { default as BulletList } from './BulletList';
-export { default as Camera } from './Camera';
-export { default as CaretDown } from './CaretDown';
-export { default as CaretLeft } from './CaretLeft';
-export { default as CaretRight } from './CaretRight';
-export { default as CaretUp } from './CaretUp';
-export { default as Chat } from './Chat';
-export { default as CodeFork } from './CodeFork';
-export { default as Cogs } from './Cogs';
-export { default as Contentlink } from './Contentlink';
-export { default as Customlink } from './Customlink';
-export { default as Date } from './Date';
-export { default as Discover } from './Discover';
-export { default as Done } from './Done';
-export { default as Dot } from './Dot';
-export { default as DotArrowRight } from './DotArrowRight';
-export { default as Download } from './Download';
-export { default as Drag } from './Drag';
-export { default as Dragbutton } from './Dragbutton';
-export { default as DropDown } from './DropDown';
-export { default as EditEvent } from './EditEvent';
-export { default as Edit } from './Edit';
-export { default as Embed } from './Embed';
-export { default as Euro } from './Euro';
-export { default as Events } from './Events';
-export { default as ExternalLink } from './ExternalLink';
-export { default as EyeSlash } from './EyeSlash';
-export { default as Facebook } from './Facebook';
-export { default as Favorites } from './Favorites';
-export { default as Feed } from './Feed';
-export { default as FileText } from './FileText';
-export { default as FullScreen } from './FullScreen';
-export { default as Globe } from './Globe';
-export { default as GooglePlus } from './GooglePlus';
-export { default as Grid } from './Grid';
-export { default as Hamburger } from './Hamburger';
-export { default as Heart } from './Heart';
-export { default as HeartSupport } from './HeartSupport';
-export { default as Helsinginyliopisto } from './Helsinginyliopisto';
-export { default as Home } from './Home';
-export { default as HorizontalResize } from './HorizontalResize';
-export { default as HyLogo } from './HyLogo';
-export { default as IdNumber } from './IdNumber';
-export { default as ImageGallery } from './ImageGallery';
-export { default as Image } from './Image';
-export { default as Images } from './Images';
-export { default as InfoStroke } from './InfoStroke';
-export { default as Info } from './Info';
-export { default as Instagram } from './Instagram';
-export { default as LeikiList } from './LeikiList';
-export { default as LinkArrow1 } from './LinkArrow1';
-export { default as LinkArrowDown } from './LinkArrowDown';
-export { default as LinkArrowLeft } from './LinkArrowLeft';
-export { default as LinkArrowOffsite } from './LinkArrowOffsite';
-export { default as LinkArrowUp } from './LinkArrowUp';
-export { default as LinkArrow } from './LinkArrow';
-export { default as Linkedin } from './Linkedin';
-export { default as ListAsBlocks } from './ListAsBlocks';
-export { default as List } from './List';
-export { default as Listoflinks } from './Listoflinks';
-export { default as ListStyleGrid } from './ListStyleGrid';
-export { default as ListStyleList } from './ListStyleList';
-export { default as Location } from './Location';
-export { default as Log } from './Log';
-export { default as Login } from './Login';
-export { default as Logout } from './Logout';
-export { default as MagnifyMinus } from './MagnifyMinus';
-export { default as MagnifyPlus } from './MagnifyPlus';
-export { default as Mail } from './Mail';
-export { default as Master } from './Master';
-export { default as Minus } from './Minus';
-export { default as Mobile } from './Mobile';
-export { default as Modify } from './Modify';
-export { default as NaviTriangle } from './NaviTriangle';
-export { default as NewGroup } from './NewGroup';
-export { default as NewPerson } from './NewPerson';
-export { default as Notification } from './Notification';
-export { default as OpinderLogoNew } from './OpinderLogoNew';
-export { default as OpinderLogo } from './OpinderLogo';
-export { default as Pdf } from './Pdf';
-export { default as People } from './People';
-export { default as PermissionAll } from './PermissionAll';
-export { default as PermissionGroup } from './PermissionGroup';
-export { default as PermissionPrivate } from './PermissionPrivate';
-export { default as PersonOutline } from './PersonOutline';
-export { default as Person } from './Person';
-export { default as Phone } from './Phone';
-export { default as Play } from './Play';
-export { default as Plus } from './Plus';
-export { default as Preview } from './Preview';
-export { default as Profile } from './Profile';
-export { default as Question } from './Question';
-export { default as Remove } from './Remove';
-export { default as Retweet } from './Retweet';
-export { default as RotateLeft } from './RotateLeft';
-export { default as RotateRight } from './RotateRight';
-export { default as Search } from './Search';
-export { default as Share } from './Share';
-export { default as SlimHamburgerMenu } from './SlimHamburgerMenu';
-export { default as SocialMedia } from './SocialMedia';
-export { default as SomeFacebook } from './SomeFacebook';
-export { default as SomeInstagram } from './SomeInstagram';
-export { default as SomeTwitter } from './SomeTwitter';
-export { default as SomeTwitterRetweet } from './Retweet';
-export { default as SomeTwitterLike } from './TwitterLike';
-export { default as SomeYoutube } from './SomeYoutube';
-export { default as SomeLinkedin } from './SomeLinkedin';
-export { default as Spinner } from './Spinner';
-export { default as SquareChecked } from './SquareChecked';
-export { default as Square } from './Square';
-export { default as Time } from './Time';
-export { default as TodoList } from './TodoList';
-export { default as Tour } from './Tour';
-export { default as Twitter } from './Twitter';
-export { default as UnitsAndFaculties } from './UnitsAndFaculties';
-export { default as Url } from './Url';
-export { default as Video } from './Video';
-export { default as Warning } from './Warning';
-export { default as Wrench } from './Wrench';
-export { default as Youtube } from './Youtube';
+export { default as AddToTodoList } from "./AddToTodoList";
+export { default as Alert } from "./Alert";
+export { default as ArrowDown } from "./ArrowDown";
+export { default as ArrowUp } from "./ArrowUp";
+export { default as Archive } from "./Archive";
+export { default as Arrow } from "./Arrow";
+export { default as AvatarGroup } from "./AvatarGroup";
+export { default as Avatar } from "./Avatar";
+export { default as Bachelor } from "./Bachelor";
+export { default as BulletList } from "./BulletList";
+export { default as Camera } from "./Camera";
+export { default as CaretDown } from "./CaretDown";
+export { default as CaretLeft } from "./CaretLeft";
+export { default as CaretRight } from "./CaretRight";
+export { default as CaretUp } from "./CaretUp";
+export { default as Chat } from "./Chat";
+export { default as CodeFork } from "./CodeFork";
+export { default as Cogs } from "./Cogs";
+export { default as Contentlink } from "./Contentlink";
+export { default as Customlink } from "./Customlink";
+export { default as Date } from "./Date";
+export { default as Discover } from "./Discover";
+export { default as Done } from "./Done";
+export { default as Dot } from "./Dot";
+export { default as DotArrowRight } from "./DotArrowRight";
+export { default as Download } from "./Download";
+export { default as Drag } from "./Drag";
+export { default as Dragbutton } from "./Dragbutton";
+export { default as DropDown } from "./DropDown";
+export { default as EditEvent } from "./EditEvent";
+export { default as Edit } from "./Edit";
+export { default as Embed } from "./Embed";
+export { default as Euro } from "./Euro";
+export { default as Events } from "./Events";
+export { default as ExternalLink } from "./ExternalLink";
+export { default as EyeSlash } from "./EyeSlash";
+export { default as Facebook } from "./Facebook";
+export { default as Favorites } from "./Favorites";
+export { default as Feed } from "./Feed";
+export { default as FileText } from "./FileText";
+export { default as FullScreen } from "./FullScreen";
+export { default as Globe } from "./Globe";
+export { default as GooglePlus } from "./GooglePlus";
+export { default as Grid } from "./Grid";
+export { default as Hamburger } from "./Hamburger";
+export { default as Heart } from "./Heart";
+export { default as HeartSupport } from "./HeartSupport";
+export { default as Helsinginyliopisto } from "./Helsinginyliopisto";
+export { default as Home } from "./Home";
+export { default as HorizontalResize } from "./HorizontalResize";
+export { default as HyLogo } from "./HyLogo";
+export { default as IdNumber } from "./IdNumber";
+export { default as ImageGallery } from "./ImageGallery";
+export { default as Image } from "./Image";
+export { default as Images } from "./Images";
+export { default as InfoStroke } from "./InfoStroke";
+export { default as Info } from "./Info";
+export { default as Instagram } from "./Instagram";
+export { default as LeikiList } from "./LeikiList";
+export { default as LinkArrow1 } from "./LinkArrow1";
+export { default as LinkArrowDown } from "./LinkArrowDown";
+export { default as LinkArrowLeft } from "./LinkArrowLeft";
+export { default as LinkArrowOffsite } from "./LinkArrowOffsite";
+export { default as LinkArrowUp } from "./LinkArrowUp";
+export { default as LinkArrow } from "./LinkArrow";
+export { default as Linkedin } from "./Linkedin";
+export { default as ListAsBlocks } from "./ListAsBlocks";
+export { default as List } from "./List";
+export { default as Listoflinks } from "./Listoflinks";
+export { default as ListStyleGrid } from "./ListStyleGrid";
+export { default as ListStyleList } from "./ListStyleList";
+export { default as Location } from "./Location";
+export { default as Log } from "./Log";
+export { default as Login } from "./Login";
+export { default as Logout } from "./Logout";
+export { default as MagnifyMinus } from "./MagnifyMinus";
+export { default as MagnifyPlus } from "./MagnifyPlus";
+export { default as Mail } from "./Mail";
+export { default as Master } from "./Master";
+export { default as Minus } from "./Minus";
+export { default as Mobile } from "./Mobile";
+export { default as Modify } from "./Modify";
+export { default as NaviTriangle } from "./NaviTriangle";
+export { default as NewGroup } from "./NewGroup";
+export { default as NewPerson } from "./NewPerson";
+export { default as Notification } from "./Notification";
+export { default as OpinderLogoNew } from "./OpinderLogoNew";
+export { default as OpinderLogo } from "./OpinderLogo";
+export { default as Pdf } from "./Pdf";
+export { default as People } from "./People";
+export { default as PermissionAll } from "./PermissionAll";
+export { default as PermissionGroup } from "./PermissionGroup";
+export { default as PermissionPrivate } from "./PermissionPrivate";
+export { default as PersonOutline } from "./PersonOutline";
+export { default as Person } from "./Person";
+export { default as Phone } from "./Phone";
+export { default as Play } from "./Play";
+export { default as Plus } from "./Plus";
+export { default as Preview } from "./Preview";
+export { default as Profile } from "./Profile";
+export { default as Question } from "./Question";
+export { default as Remove } from "./Remove";
+export { default as Retweet } from "./Retweet";
+export { default as RotateLeft } from "./RotateLeft";
+export { default as RotateRight } from "./RotateRight";
+export { default as Search } from "./Search";
+export { default as Share } from "./Share";
+export { default as SlimHamburgerMenu } from "./SlimHamburgerMenu";
+export { default as SocialMedia } from "./SocialMedia";
+export { default as SomeFacebook } from "./SomeFacebook";
+export { default as SomeInstagram } from "./SomeInstagram";
+export { default as SomeTwitter } from "./SomeTwitter";
+export { default as SomeTwitterRetweet } from "./Retweet";
+export { default as SomeTwitterLike } from "./TwitterLike";
+export { default as SomeYoutube } from "./SomeYoutube";
+export { default as SomeLinkedin } from "./SomeLinkedin";
+export { default as Spinner } from "./Spinner";
+export { default as SquareChecked } from "./SquareChecked";
+export { default as Square } from "./Square";
+export { default as Time } from "./Time";
+export { default as TodoList } from "./TodoList";
+export { default as Tour } from "./Tour";
+export { default as Twitter } from "./Twitter";
+export { default as UnitsAndFaculties } from "./UnitsAndFaculties";
+export { default as Url } from "./Url";
+export { default as Video } from "./Video";
+export { default as Warning } from "./Warning";
+export { default as Wrench } from "./Wrench";
+export { default as Youtube } from "./Youtube";

package/dist/collection/components/image/image.js

@@ -1,4 +1,4 @@
-import { h } from '@stencil/core';
+import { h } from "@stencil/core";
 export class Image {
   constructor() {
     this.imageUrl = null;
@@ -10,7 +10,7 @@ export class Image {
     this.sourceSet = undefined;
   }
   srcSetWatcher(data) {
-    this._sourceSet = typeof data === 'string' ? JSON.parse(data) : data;
+    this._sourceSet = typeof data === "string" ? JSON.parse(data) : data;
   }
   componentWillLoad() {
     this.srcSetWatcher(this.sourceSet);
@@ -20,17 +20,17 @@ export class Image {
     if (this.aspectRatioWidth !== 0 && this.aspectRatioWidth !== 0) {
       const aspect = (this.aspectRatioHeight / this.aspectRatioWidth) * 100;
       aspectRatio = {
-        '--aspectRatio': `${aspect}%`,
+        "--aspectRatio": `${aspect}%`,
       };
     }
-    const classAttributes = ['hy-image', this.caption ? 'hy-image--with-caption' : null].join(' ');
+    const classAttributes = ["hy-image", this.caption ? "hy-image--with-caption" : null].join(" ");
     const containerClasses = [
-      'hy-image__image-container',
-      aspectRatio !== null ? 'hy-image--with-aspect' : 'hy-image--no-aspect',
-    ].join(' ');
+      "hy-image__image-container",
+      aspectRatio !== null ? "hy-image--with-aspect" : "hy-image--no-aspect",
+    ].join(" ");
     return [
-      h("div", { class: classAttributes }, h("div", { class: containerClasses, style: aspectRatio !== null ? aspectRatio : '' }, this.imageUrl &&
-        (this._sourceSet ? (h("picture", null, this._sourceSet.map(({ src, media, type, sizes }) => (h("source", { srcSet: src, media: media, type: type, sizes: sizes || '' }))), h("img", { loading: this.disableLazy ? 'eager' : 'lazy', alt: this.imageAlt, class: "hy-image__image", src: this.imageUrl }))) : (h("img", { loading: this.disableLazy ? 'eager' : 'lazy', alt: this.imageAlt, class: "hy-image__image", src: this.imageUrl })))), this.caption && h("div", { class: "hy-image__caption" }, this.caption)),
+      h("div", { class: classAttributes }, h("div", { class: containerClasses, style: aspectRatio !== null ? aspectRatio : "" }, this.imageUrl &&
+        (this._sourceSet ? (h("picture", null, this._sourceSet.map(({ src, media, type, sizes }) => (h("source", { srcSet: src, media: media, type: type, sizes: sizes || "" }))), h("img", { loading: this.disableLazy ? "eager" : "lazy", alt: this.imageAlt, class: "hy-image__image", src: this.imageUrl }))) : (h("img", { loading: this.disableLazy ? "eager" : "lazy", alt: this.imageAlt, class: "hy-image__image", src: this.imageUrl })))), this.caption && h("div", { class: "hy-image__caption" }, this.caption)),
       h("hy-box", { mb: "1.75, 1.75, 2, 2.5" }),
     ];
   }
@@ -164,7 +164,7 @@ export class Image {
           "references": {
             "ImageSrcSet": {
               "location": "local",
-              "path": "/builds/julkiset-sivut/design-system-lib/src/components/image/image.tsx"
+              "path": "/Users/tuukkaturu/hy/hy-ds/design-system-lib/core/src/components/image/image.tsx"
             }
           }
         },

package/dist/collection/components/ingress/ingress.js

@@ -1,18 +1,18 @@
-import { h, Host } from '@stencil/core';
+import { h, Host } from "@stencil/core";
 export class Ingress {
   constructor() {
-    this.headerstyle = 'common';
+    this.headerstyle = "common";
   }
   componentDidLoad() {
-    let hyMainDiv = this.el.closest('.hy-main');
+    let hyMainDiv = this.el.closest(".hy-main");
     if (hyMainDiv) {
-      if (!hyMainDiv.classList.contains('with-sidebar')) {
-        this.headerstyle = 'large';
+      if (!hyMainDiv.classList.contains("with-sidebar")) {
+        this.headerstyle = "large";
       }
     }
   }
   render() {
-    const classAttributes = ['hy-ingress', `hy-ingress__${this.headerstyle}`].join(' ');
+    const classAttributes = ["hy-ingress", `hy-ingress__${this.headerstyle}`].join(" ");
     return (h(Host, null, h("p", { class: classAttributes }, h("slot", null))));
   }
   static get is() { return "hy-ingress"; }
@@ -44,7 +44,7 @@ export class Ingress {
         },
         "attribute": "headerstyle",
         "reflect": false,
-        "defaultValue": "'common'"
+        "defaultValue": "\"common\""
       }
     };
   }

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

@@ -1,17 +1,17 @@
-import { Host, h } from '@stencil/core';
-import { LinkVariants } from '../../utils/utils';
+import { Host, h } from "@stencil/core";
+import { LinkVariants } from "../../utils/utils";
 export class Link {
   constructor() {
     this.variant = LinkVariants.default;
-    this.linkContent = '';
+    this.linkContent = "";
     this.url = undefined;
     this.scLabel = undefined;
     this.isExternal = false;
   }
   render() {
-    const classAttributes = ['hy-link', this.variant];
-    const target = this.isExternal ? '_blank' : '_self';
-    return (h(Host, null, h("a", { "aria-label": this.scLabel, class: classAttributes.join(' '), href: this.url, target: target }, this.linkContent)));
+    const classAttributes = ["hy-link", this.variant];
+    const target = this.isExternal ? "_blank" : "_self";
+    return (h(Host, null, h("a", { "aria-label": this.scLabel, class: classAttributes.join(" "), href: this.url, target: target }, this.linkContent)));
   }
   static get is() { return "hy-link"; }
   static get originalStyleUrls() {
@@ -65,7 +65,7 @@ export class Link {
         },
         "attribute": "link-content",
         "reflect": false,
-        "defaultValue": "''"
+        "defaultValue": "\"\""
       },
       "url": {
         "type": "string",

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

@@ -1,5 +1,5 @@
-import { h } from '@stencil/core';
-import { LinkBoxVariants } from '../../utils/utils';
+import { h } from "@stencil/core";
+import { LinkBoxVariants } from "../../utils/utils";
 export class LinkBox {
   constructor() {
     this.variant = LinkBoxVariants.default;
@@ -14,56 +14,56 @@ export class LinkBox {
     this.isExternal = false;
     this.scLabel = undefined;
     this.readMoreLabel = undefined;
-    this.headerstyle = 'common';
+    this.headerstyle = "common";
     this.sourceSet = undefined;
   }
   srcSetWatcher(data) {
-    this._sourceSet = typeof data === 'string' ? JSON.parse(data) : data;
+    this._sourceSet = typeof data === "string" ? JSON.parse(data) : data;
   }
   componentWillLoad() {
     this.srcSetWatcher(this.sourceSet);
   }
   componentDidLoad() {
-    let hyMainDiv = this.el.closest('.hy-main');
+    let hyMainDiv = this.el.closest(".hy-main");
     if (hyMainDiv) {
-      if (!hyMainDiv.classList.contains('with-sidebar')) {
-        this.headerstyle = 'large';
+      if (!hyMainDiv.classList.contains("with-sidebar")) {
+        this.headerstyle = "large";
       }
     }
   }
   render() {
-    const classContainerAttributes = ['hy-link-box-container'].join(' ');
+    const classContainerAttributes = ["hy-link-box-container"].join(" ");
     const classAttributes = [
-      'hy-link-box',
+      "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(' ');
+      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",
       `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(' ');
+      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",
       `hy-link-box__text-container__description__${this.variant}`,
       `hy-link-box__text-container__description__${this.headerstyle}`,
-    ].join(' ');
-    const target = this.isExternal ? '_blank' : '_self';
+    ].join(" ");
+    const target = this.isExternal ? "_blank" : "_self";
     const aspectRatioWidth = 16;
     const aspectRatioHeight = 10;
     const aspect = (aspectRatioHeight / aspectRatioWidth) * 100;
     const aspectRatio = {
-      '--aspectRatio': `${aspect}%`,
+      "--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 })))),
+        (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"; }
@@ -313,7 +313,7 @@ export class LinkBox {
         },
         "attribute": "headerstyle",
         "reflect": false,
-        "defaultValue": "'common'"
+        "defaultValue": "\"common\""
       },
       "sourceSet": {
         "type": "string",
@@ -324,7 +324,7 @@ export class LinkBox {
           "references": {
             "ImageSrcSet": {
               "location": "local",
-              "path": "/builds/julkiset-sivut/design-system-lib/src/components/link-box/link-box.tsx"
+              "path": "/Users/tuukkaturu/hy/hy-ds/design-system-lib/core/src/components/link-box/link-box.tsx"
             }
           }
         },

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

@@ -1,9 +1,9 @@
-import { h, Host } from '@stencil/core';
-import { LinkBoxVariants } from '../../utils/utils';
-import { jsonParserWorker } from '../../global/globalScript';
+import { h, Host } from "@stencil/core";
+import { LinkBoxVariants } from "../../utils/utils";
+import { jsonParserWorker } from "../../global/globalScript";
 export class LinkBoxList {
   constructor() {
-    this.headerstyle = 'common';
+    this.headerstyle = "common";
     this.variant = LinkBoxVariants.default;
     this.readMoreLabel = undefined;
     this.dataItems = undefined;
@@ -12,20 +12,20 @@ export class LinkBoxList {
     this._dataItems = await jsonParserWorker(this.dataItems);
   }
   componentDidLoad() {
-    let hyMainDiv = this.el.closest('.hy-main');
+    let hyMainDiv = this.el.closest(".hy-main");
     if (hyMainDiv) {
-      if (!hyMainDiv.classList.contains('with-sidebar')) {
-        this.headerstyle = 'large';
+      if (!hyMainDiv.classList.contains("with-sidebar")) {
+        this.headerstyle = "large";
       }
     }
   }
   render() {
     const classAttributes = [
-      'hy-link-box-list',
+      "hy-link-box-list",
       this.variant,
       `hy-link-box-list__${this.variant}`,
       `hy-link-box-list__${this.headerstyle}`,
-    ].join(' ');
+    ].join(" ");
     /*
     - Logic:
     - 3 items: big
@@ -36,7 +36,7 @@ export class LinkBoxList {
     - 8 items: small
     - 9 items: big
     * */
-    const classItemAttributes = [this.variant, `hy-link-box__${this.variant}`].join(' ');
+    const classItemAttributes = [this.variant, `hy-link-box__${this.variant}`].join(" ");
     return (h(Host, null, h("ul", { class: classAttributes }, this._dataItems.map((x) => {
       return (h("li", null, h("hy-link-box", { class: classItemAttributes, variant: this.variant, "source-set": x.imageSets, "image-url": x.imageUrl, "image-alt": x.imageAlt, "text-title": x.heading, "text-description": x.description, "show-logo": x.showLogo, url: x.boxUrl, "is-external": x.isExternal, "sc-label": x.ariaLabel, "read-more-label": this.readMoreLabel })));
     })), h("hy-box", { mb: "1.75, 1.75, 2, 2.5" })));
@@ -70,7 +70,7 @@ export class LinkBoxList {
         },
         "attribute": "headerstyle",
         "reflect": false,
-        "defaultValue": "'common'"
+        "defaultValue": "\"common\""
       },
       "variant": {
         "type": "string",
@@ -121,7 +121,7 @@ export class LinkBoxList {
           "references": {
             "LinkBox": {
               "location": "local",
-              "path": "/builds/julkiset-sivut/design-system-lib/src/components/link-box-list/link-box-list.tsx"
+              "path": "/Users/tuukkaturu/hy/hy-ds/design-system-lib/core/src/components/link-box-list/link-box-list.tsx"
             }
           }
         },