Fixed some indentations, small accordion fix, standalonelink shadowdom fix...

Fixed some indentations, small accordion fix, standalonelink shadowdom fix that should make docs working aswell

src/components/accordion-container/accordion-container.scss

@@ -4,4 +4,5 @@
 
 .hy-accordion-container {
   width: 100%;
+  margin-bottom: 2rem;
 }

src/components/accordion-item/accordion-item.scss

@@ -61,6 +61,10 @@
     transition: all .35s ease-in;
     width: 100%;
 
+    &:hover {
+      cursor: pointer;
+    }
+
     @include breakpoint($medium) {
       font-size: 26px;
       letter-spacing: -0.82px;
@@ -80,6 +84,7 @@
 
   .hy-accordion--heading__icon {
     margin-right: .95rem;
+    z-index: -1;
 
     svg {
       fill: var(--brand-main);

src/components/cta-liftup-image-text/cta-liftup-image-text.scss

 :host {
   display: block;
-  height: 100.5%;
 }
 
 .hy-cta-liftup-image-text {
@@ -28,31 +27,10 @@
   }
 
   &__image-container {
-    display: flex;
-    justify-content: stretch;
-    min-height: 10rem;
-    position: relative;
-    width: 100%;
+    flex: 1;
 
     @include breakpoint($wide) {
-      width: 50%;
-    }
-
-    &--left {
-      @include breakpoint($wide) {
-        margin-right: 103px;
-      }
-    }
-    &--right {
-      @include breakpoint($wide) {
-        margin-left: 103px;
-      }
-    }
-
-    > img {
-      align-self: flex-start;
-      object-fit: contain;
-      width: 100%;
+      flex: 50%;
     }
   }
 
@@ -60,9 +38,10 @@
     background: var(--grayscale-white);
     border-image: none;
     display: flex;
+    flex: 1;
     flex-direction: column;
     justify-content: center;
-    width: 100%;
+
     -webkit-border-image: none;
     -moz-border-image: none;
     -o-border-image: none;
@@ -84,17 +63,28 @@
     @include breakpoint($wide) {
       border-image: none;
       border-left: none;
+      flex: 50%;
       margin-left: 0;
       margin-top: 0;
       padding-top: 0;
       padding-left: 0;
-      width: 50%;
       z-index: 0;
       -webkit-border-image: none;
       -moz-border-image: none;
       -o-border-image: none;
     }
 
+    &--left {
+      @include breakpoint($wide) {
+        padding-right: 103px;
+      }
+    }
+    &--right {
+      @include breakpoint($wide) {
+        padding-left: 103px;
+      }
+    }
+
     &__title {
       color: var(--brand-main-nearly-black);
       font-family: "Open Sans SemiBold";
@@ -129,4 +119,9 @@
       margin-top: 24px;
     }
   }
+}
+
+.hy-cta-liftup-image-text::after {
+  content: "";
+  clear: both;
 }
\ No newline at end of file

src/components/cta-liftup-image-text/cta-liftup-image-text.tsx

@@ -6,44 +6,56 @@ import { Component, ComponentInterface, Prop, h } from '@stencil/core';
   shadow: true,
 })
 export class CtaLiftupImageText implements ComponentInterface {
-    @Prop() imageRight: boolean = false;
-    @Prop() imageUrl: string = null;
-    @Prop() imageAlt: string = "";
-    @Prop() textTitle?: string;
-    @Prop() textDescription: string = null;
-    @Prop() mainUrl?: string;
-    @Prop() mainUrlTitle?: string;
-    @Prop() mainUrlAriaLabel?: string;
-    @Prop() mainUrlIsExternal: boolean = false;
-    @Prop() standaloneUrl?: string;
-    @Prop() standaloneUrlTitle?: string;
-    @Prop() standaloneUrlAriaLabel?: string;
-    @Prop() standaloneUrlIsExternal: boolean = false;
-    @Prop() standaloneUrl2?: string;
-    @Prop() standaloneUrlTitle2?: string;
-    @Prop() standaloneUrlAriaLabel2?: string;
-    @Prop() standaloneUrlIsExternal2: boolean = false;
+  @Prop() imageRight: boolean = false;
+  @Prop() imageUrl: string = null;
+  @Prop() imageAlt: string = "";
+  @Prop() textTitle?: string;
+  @Prop() textDescription: string = null;
+  @Prop() mainUrl?: string;
+  @Prop() mainUrlTitle?: string;
+  @Prop() mainUrlAriaLabel?: string;
+  @Prop() mainUrlIsExternal: boolean = false;
+  @Prop() standaloneUrl?: string;
+  @Prop() standaloneUrlTitle?: string;
+  @Prop() standaloneUrlAriaLabel?: string;
+  @Prop() standaloneUrlIsExternal: boolean = false;
+  @Prop() standaloneUrl2?: string;
+  @Prop() standaloneUrlTitle2?: string;
+  @Prop() standaloneUrlAriaLabel2?: string;
+  @Prop() standaloneUrlIsExternal2: boolean = false;
 
   render() {
     const classAttributes = [
-        "hy-cta-liftup-image-text",
-        this.imageRight ? "hy-cta-liftup-image-text--right-image" : null
-        ].join(" ");
-    const contentClassAttributes = ["hy-cta-liftup-image-text__text-container"].join(" ");
+      "hy-cta-liftup-image-text",
+      this.imageRight ? "hy-cta-liftup-image-text--right-image" : null
+    ].join(" ");
+    const contentClassAttributes = [
+      "hy-cta-liftup-image-text__text-container",
+      this.imageRight ? "hy-cta-liftup-image-text__text-container--left" : "hy-cta-liftup-image-text__text-container--right"
+    ].join(" ");
     const imageRightClassAttributes = [
-        "hy-cta-liftup-image-text__image-container",
-        "hy-cta-liftup-image-text__image-container--right"].join(" ");
-      const imageLeftClassAttributes = [
-          "hy-cta-liftup-image-text__image-container",
-          "hy-cta-liftup-image-text__image-container--left"].join(" ");
+      "hy-cta-liftup-image-text__image-container",
+      "hy-cta-liftup-image-text__image-container--right"
+    ].join(" ");
+    const imageLeftClassAttributes = [
+      "hy-cta-liftup-image-text__image-container"
+    ].join(" ");
 
     const imageLeft = !this.imageRight;
+    const aspectRatioWidth = 4;
+    const aspectRatioHeight = 3;
 
     return (
       <div class={classAttributes}>
         { imageLeft &&
           <div class={imageLeftClassAttributes}>
-            <img aria-hidden="true" src={this.imageUrl} alt={this.imageAlt} />
+            <hy-image
+              image-url={this.imageUrl}
+              image-alt={this.imageAlt}
+              aspect-ratio-width={aspectRatioWidth}
+              aspect-ratio-height={aspectRatioHeight}
+              caption="">
+            </hy-image>
           </div>
         }
         <div class={contentClassAttributes}>
@@ -51,41 +63,47 @@ export class CtaLiftupImageText implements ComponentInterface {
           <div class="hy-cta-liftup-image-text__text-container__description">{ this.textDescription }</div>
           {this.mainUrl &&
             <div class="hy-cta-liftup-image-text__text-container__link">
-                <hy-cta-link-button link-content={this.mainUrlTitle}
-                                    aria-label={this.mainUrlAriaLabel}
-                                    url={this.mainUrl}
-                                    is-external={this.mainUrlIsExternal}
-                />
+              <hy-cta-link-button
+                link-content={this.mainUrlTitle}
+                aria-label={this.mainUrlAriaLabel}
+                url={this.mainUrl}
+                is-external={this.mainUrlIsExternal}
+              />
             </div>
           }
           {this.standaloneUrl &&
             <div class="hy-cta-liftup-image-text__text-container__standalonelink">
-                <hy-standalone-link
-                    link-content={this.standaloneUrlTitle}
-                    aria-label={this.standaloneUrlAriaLabel}
-                    url={this.standaloneUrl}
-                    is-external={this.standaloneUrlIsExternal}
-                />
+              <hy-standalone-link
+                link-content={this.standaloneUrlTitle}
+                aria-label={this.standaloneUrlAriaLabel}
+                url={this.standaloneUrl}
+                is-external={this.standaloneUrlIsExternal}
+              />
             </div>
           }
           {this.standaloneUrl2 &&
             <div class="hy-cta-liftup-image-text__text-container__standalonelink">
-                <hy-standalone-link
-                    link-content={this.standaloneUrlTitle2}
-                    aria-label={this.standaloneUrlAriaLabel2}
-                    url={this.standaloneUrl2}
-                    is-external={this.standaloneUrlIsExternal2}
-                />
+              <hy-standalone-link
+                link-content={this.standaloneUrlTitle2}
+                aria-label={this.standaloneUrlAriaLabel2}
+                url={this.standaloneUrl2}
+                is-external={this.standaloneUrlIsExternal2}
+              />
             </div>
           }
         </div>
         { this.imageRight &&
           <div class={imageRightClassAttributes}>
-            <img aria-hidden="true" src={this.imageUrl} alt={this.imageAlt} />
+            <hy-image
+              image-url={this.imageUrl}
+              image-alt={this.imageAlt}
+              aspect-ratio-width={aspectRatioWidth}
+              aspect-ratio-height={aspectRatioHeight}
+              caption="">
+            </hy-image>
           </div>
         }
       </div>
     );
   }
-
 }

src/components/cta-liftup-image-text/readme.md

@@ -32,12 +32,14 @@
 
 ### Depends on
 
+- [hy-image](../image)
 - [hy-cta-link-button](../cta-link-button)
 - [hy-standalone-link](../standalone-link)
 
 ### Graph
 ```mermaid
 graph TD;
+  hy-cta-liftup-image-text --> hy-image
   hy-cta-liftup-image-text --> hy-cta-link-button
   hy-cta-liftup-image-text --> hy-standalone-link
   hy-cta-link-button --> hy-icon

src/components/image/readme.md

@@ -37,6 +37,19 @@ Defaults to 16/9 aspect ratio if none is provided. Caption is optional.
 | `imageUrl`          | `image-url`           |             | `string` | `undefined` |
 
 
+## Dependencies
+
+### Used by
+
+ - [hy-cta-liftup-image-text](../cta-liftup-image-text)
+
+### Graph
+```mermaid
+graph TD;
+  hy-cta-liftup-image-text --> hy-image
+  style hy-image fill:#f9f,stroke:#333,stroke-width:4px
+```
+
 ----------------------------------------------
 
 Helsinki University Design System

src/components/standalone-link/standalone-link.tsx

@@ -3,45 +3,44 @@ import { Component, ComponentInterface, Prop, h } from '@stencil/core';
 @Component({
   tag: 'hy-standalone-link',
   styleUrl: 'standalone-link.scss',
-  shadow: true,
+  shadow: false,
 })
 export class StandaloneLink implements ComponentInterface {
-    @Prop() linkContent: string = '';
-    @Prop() url?: string;
-    @Prop() ariaLabel?: string;
-    @Prop() isExternal: boolean = false;
-    @Prop() isEnabled: boolean = true;
+  @Prop() linkContent: string = '';
+  @Prop() url?: string;
+  @Prop() ariaLabel?: string;
+  @Prop() isExternal: boolean = false;
+  @Prop() isEnabled: boolean = true;
 
   render() {
-      const containerClassAttributes = ["hy-standalone-link-container"].join(" ");
-      const classAttributes = ["hy-standalone-link",
-          this.isEnabled ? "enabled" : "disabled"
-      ];
+    const containerClassAttributes = ["hy-standalone-link-container"].join(" ");
+    const classAttributes = ["hy-standalone-link",
+      this.isEnabled ? "enabled" : "disabled"
+    ];
 
-      const textClassAttributes = ["hy-standalone-link__text"].join(" ");
-      const iconClassAttributes = [
-          "hy-standalone-link__link-icon",
-          this.isExternal ? "hy-standalone-link__link-icon--external" : null
-      ].join(" ");
+    const textClassAttributes = ["hy-standalone-link__text"].join(" ");
+    const iconClassAttributes = [
+      "hy-standalone-link__link-icon",
+      this.isExternal ? "hy-standalone-link__link-icon--external" : null
+    ].join(" ");
 
-      const target = this.isExternal ? "_blank" : "_self";
-      return (
-          <span class={containerClassAttributes}>
-            <a
-                aria-label={this.ariaLabel}
-                class={classAttributes.join(" ")}
-                href={this.url}
-                target={target}
-            >
-              <span class={textClassAttributes}>
-                {this.linkContent}
-              </span>
-              <span class={iconClassAttributes}>
-                <hy-icon icon={'hy-icon-arrow-right'} size={16} />
-              </span>
-            </a>
+    const target = this.isExternal ? "_blank" : "_self";
+    return (
+      <span class={containerClassAttributes}>
+        <a
+          aria-label={this.ariaLabel}
+          class={classAttributes.join(" ")}
+          href={this.url}
+          target={target}
+        >
+          <span class={textClassAttributes}>
+            {this.linkContent}
           </span>
-      );
+          <span class={iconClassAttributes}>
+            <hy-icon icon={'hy-icon-arrow-right'} size={16} />
+          </span>
+        </a>
+      </span>
+    );
   }
-
 }

src/index.html

@@ -57,10 +57,36 @@
     </hy-cta-link-button>
 
 
+    <hy-heading heading="h2" section="subsection">This is subsection heading with 2 hy-image</hy-heading>
+    <hy-grid-row>
+      <hy-grid-item columnsSm="12" columns="6" columnsLg="6">
+        <hy-image
+                image-url="https://www.thoughtco.com/thmb/RcIcuFN8dnv51kK7v5KJ2crJaXg=/768x0/filters:no_upscale():max_bytes(150000):strip_icc():format(webp)/wu-tao-chishang-lunch-box-151892250-5b310f7dfa6bcc003663ad19.jpg"
+                image-alt="Test image"
+                aspect-ratio-width=4
+                aspect-ratio-height=3
+                caption="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+        >
+        </hy-image>
+      </hy-grid-item>
+      <hy-grid-item columnsSm="12" columns="6" columnsLg="6">
+        <hy-image
+                image-url="https://www.thoughtco.com/thmb/RcIcuFN8dnv51kK7v5KJ2crJaXg=/768x0/filters:no_upscale():max_bytes(150000):strip_icc():format(webp)/wu-tao-chishang-lunch-box-151892250-5b310f7dfa6bcc003663ad19.jpg"
+                image-alt="Test image"
+                aspect-ratio-width=4
+                aspect-ratio-height=3
+                caption="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+        >
+        </hy-image>
+      </hy-grid-item>
+    </hy-grid-row>
+
+    <hy-heading heading="h2" section="subsection">This is subsection with CTA Liftups with long text</hy-heading>
     <hy-cta-liftup-image-text
-            image-url="https://www.helsinki.fi/sites/default/files/styles/16_9_huge/public/coronavirus_1920x1080px_4.jpg?itok=dOgb6pfs"
+            image-url="https://www.thoughtco.com/thmb/RcIcuFN8dnv51kK7v5KJ2crJaXg=/768x0/filters:no_upscale():max_bytes(150000):strip_icc():format(webp)/wu-tao-chishang-lunch-box-151892250-5b310f7dfa6bcc003663ad19.jpg"
             text-title="Text title 2"
-            text-description="Text description Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+            text-description="Text description Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ac orci nisl. Nam at arcu eget enim interdum rhoncus eu nec turpis. Duis in est id nunc dictum lobortis. Nullam magna lectus, hendrerit tempus pharetra at, cursus sit amet orci. Aenean in pulvinar mi. Nulla facilisi. Etiam elementum malesuada ante, quis facilisis arcu varius consectetur. Phasellus eu nisl elementum, laoreet sem condimentum, hendrerit urna. Ut eu lorem et nunc consectetur bibendum. Nulla sed orci urna. Vivamus ac lectus ex. Nam sit amet tincidunt leo. In sed nunc eu odio semper maximus vel suscipit ligula. In hac habitasse platea dictumst."
 
             main-url="https://www.google.com"
             main-url-title="Standalone link"
@@ -74,6 +100,7 @@
     >
     </hy-cta-liftup-image-text>
 
+    <hy-heading heading="h2" section="subsection">This is subsection with CTA Liftups.</hy-heading>
     <hy-cta-liftup-image-text
             image-right="true"
             image-url="https://www.helsinki.fi/sites/default/files/styles/16_9_huge/public/hy_yhteishaku2020_nostokuva_herokuva_uusi_3.jpg?itok=Oae0xaQR"