Merge branch 'development'

305063f6 · Markus Kaarto · d1c48f4a · 595b3801 · 305063f6 · 305063f6
Commit 305063f6 authored 4 years ago by Markus Kaarto
--- a/.gitlab-ci.yml
+++ b/.gitlab-ci.yml
 ---
 ## /* vim: set tabstop=2 softtabstop=2 shiftwidth=2 expandtab smarttab autoindent: */
 default:
-  image: "node:12.16.1"
+  image: 'node:12.16.1'
  cache:
    paths:
-      - "node_modules/"
+      - 'node_modules/'
 stages:
  - build
@@ -20,9 +20,9 @@ build:
      when: always
  artifacts:
    paths:
-      - "node_modules/"
+      - 'node_modules/'
-      - "dist/"
+      - 'dist/'
-      - "www/"
+      - 'www/'
    untracked: true
  script:
    - yarn "install" --immutable
@@ -36,7 +36,7 @@ test:
      when: on_success
  script:
    - yarn "test"
 deploy_npm:
  stage: deploy
  rules:

--- a/.prettierrc
+++ b/.prettierrc
+{
+  "trailingComma": "none",
+  "tabWidth": 2,
+  "semi": true,
+  "singleQuote": true,
+  "bracketSpacing": false,
+  "printWidth": 120
+}
--- a/json.d.ts
+++ b/json.d.ts
-/**
- * This is an autogenerated file created by the Stencil compiler.
- * DO NOT MODIFY IT MANUALLY
- */
-export interface JsonDocs {
-    components: JsonDocsComponent[];
-    timestamp: string;
-    compiler: {
-        name: string;
-        version: string;
-        typescriptVersion: string;
-    };
-}
-export interface JsonDocsComponent {
-    dirPath?: string;
-    fileName?: string;
-    filePath?: string;
-    readmePath?: string;
-    usagesDir?: string;
-    encapsulation: 'shadow' | 'scoped' | 'none';
-    tag: string;
-    readme: string;
-    docs: string;
-    docsTags: JsonDocsTag[];
-    usage: JsonDocsUsage;
-    props: JsonDocsProp[];
-    methods: JsonDocsMethod[];
-    events: JsonDocsEvent[];
-    listeners: JsonDocsListener[];
-    styles: JsonDocsStyle[];
-    slots: JsonDocsSlot[];
-    parts: JsonDocsPart[];
-    dependents: string[];
-    dependencies: string[];
-    dependencyGraph: JsonDocsDependencyGraph;
-    deprecation?: string;
-}
-export interface JsonDocsDependencyGraph {
-    [tagName: string]: string[];
-}
-export interface JsonDocsTag {
-    name: string;
-    text?: string;
-}
-export interface JsonDocsValue {
-    value?: string;
-    type: string;
-}
-export interface JsonDocsUsage {
-    [key: string]: string;
-}
-export interface JsonDocsProp {
-    name: string;
-    type: string;
-    mutable: boolean;
-    attr?: string;
-    reflectToAttr: boolean;
-    docs: string;
-    docsTags: JsonDocsTag[];
-    default: string;
-    deprecation?: string;
-    values: JsonDocsValue[];
-    optional: boolean;
-    required: boolean;
-}
-export interface JsonDocsMethod {
-    name: string;
-    docs: string;
-    docsTags: JsonDocsTag[];
-    deprecation?: string;
-    signature: string;
-    returns: JsonDocsMethodReturn;
-    parameters: JsonDocMethodParameter[];
-}
-export interface JsonDocsMethodReturn {
-    type: string;
-    docs: string;
-}
-export interface JsonDocMethodParameter {
-    name: string;
-    type: string;
-    docs: string;
-}
-export interface JsonDocsEvent {
-    event: string;
-    bubbles: boolean;
-    cancelable: boolean;
-    composed: boolean;
-    docs: string;
-    docsTags: JsonDocsTag[];
-    deprecation?: string;
-    detail: string;
-}
-export interface JsonDocsStyle {
-    name: string;
-    docs: string;
-    annotation: string;
-}
-export interface JsonDocsListener {
-    event: string;
-    target?: string;
-    capture: boolean;
-    passive: boolean;
-}
-export interface JsonDocsSlot {
-    name: string;
-    docs: string;
-}
-export interface JsonDocsPart {
-    name: string;
-    docs: string;
-}
-export interface StyleDoc {
-    name: string;
-    docs: string;
-    annotation: 'prop';
-}
-declare const _default: JsonDocs;
-export default _default;
--- a/json.json
+++ b/json.json
--- a/package.json
+++ b/package.json
@@ -34,7 +34,10 @@
    "jest-axe": "^3.4.0",
    "jest-cli": "26.0.1",
    "puppeteer": "3.1.0",
-    "stylelint-config-recommended": "^3.0.0"
+    "stylelint-config-recommended": "^3.0.0",
+    "husky": "4.2.5",
+    "prettier": "2.0.5",
+    "pretty-quick": "2.0.1"
  },
  "license": "MIT",
  "dependencies": {
@@ -50,5 +53,10 @@
  },
  "browserslist": [
    "last 2 versions"
-  ]
+  ],
+  "husky": {
+    "hooks": {
+      "pre-commit": "pretty-quick --staged"
+    }
+  }
 }
--- a/src/components.d.ts
+++ b/src/components.d.ts
--- a/src/components/accordion-item/accordion-item.scss
+++ b/src/components/accordion-item/accordion-item.scss
@@ -4,15 +4,15 @@
 .hy-accordion__item {
  margin-bottom: 1rem;
-  transition: all .25s ease-in-out;
+  transition: all 0.25s ease-in-out;
  &__is-open {
    $border-color: var(--grayscale-dark);
    @include border-without-corners($border-color, 2px);
    margin-left: -1rem;
    margin-right: -1rem;
-    transition: all .25s ease-in-out;
+    transition: all 0.25s ease-in-out;
    @include breakpoint($medium) {
      margin-left: -2rem;
@@ -22,7 +22,7 @@
    .hy-accordion--heading {
      margin: 0 auto;
      width: calc(100% - 2.25rem);
-      transition: all .25s ease-in-out;
+      transition: all 0.25s ease-in-out;
      @include breakpoint($medium) {
        width: calc(100% - 4.25rem);
@@ -31,7 +31,7 @@
      .hy-accordion--heading__icon {
        transform: rotateX(180deg);
      }
-    } 
+    }
  }
 }
@@ -40,7 +40,7 @@
  letter-spacing: -0.69px;
  line-height: 28px;
  margin: 0 auto;
-  transition: all .25s ease-in-out;
+  transition: all 0.25s ease-in-out;
  width: 100%;
  .hy-accordion__button {
@@ -57,8 +57,8 @@
    font-weight: 600;
    height: 100%;
    justify-content: flex-start;
-    padding: .75rem 1.75rem .75rem 1.25rem;
+    padding: 0.75rem 1.75rem 0.75rem 1.25rem;
-    transition: all .35s ease-in;
+    transition: all 0.35s ease-in;
    width: 100%;
    &:hover {
@@ -71,19 +71,19 @@
      line-height: 32px;
    }
-    &[aria-expanded=true] {
+    &[aria-expanded='true'] {
      background: none;
      border-bottom: 1px solid var(--grayscale-medium-dark);
      border-left: 0;
      border-right: 0;
      border-top: 0;
-      padding: .85rem 1rem 1rem 1rem;
+      padding: 0.85rem 1rem 1rem 1rem;
-      transition: all .35s ease-in;
+      transition: all 0.35s ease-in;
    }
  }
  .hy-accordion--heading__icon {
-    margin-right: .95rem;
+    margin-right: 0.95rem;
    z-index: -1;
    svg {
@@ -97,7 +97,7 @@
  height: 0;
  overflow: hidden;
  padding: 0;
-  transition: all .25s ease-in-out;
+  transition: all 0.25s ease-in-out;
  &--inner-wrapper {
    display: block;

--- a/src/components/button/button.scss
+++ b/src/components/button/button.scss
@@ -96,7 +96,7 @@
  }
  // decorative bottom border/shadow
  &::after {
-    content: "";
+    content: '';
    display: block;
    border-bottom: 2px solid var(--additional-skyblue);
    position: absolute;
@@ -128,7 +128,7 @@
  }
 }
-hy-button[icon-right="hy-icon-arrow-right"] {
+hy-button[icon-right='hy-icon-arrow-right'] {
  .primary {
    .hy-button__text {
      margin: 12px 0 12px 16px;
@@ -156,7 +156,7 @@ hy-button[icon-right="hy-icon-arrow-right"] {
  }
 }
-hy-button[icon="hy-icon-arrow-left"] {
+hy-button[icon='hy-icon-arrow-left'] {
  .primary {
    .hy-button__text {
      margin: 12px 16px 12px 0;

--- a/src/components/button/button.spec.ts
+++ b/src/components/button/button.spec.ts
-import { Button } from "./button";
+import {Button} from './button';
-import { newSpecPage } from "@stencil/core/testing";
+import {newSpecPage} from '@stencil/core/testing';
-it("should render correctly without attributes", async () => {
+it('should render correctly without attributes', async () => {
  const page = await newSpecPage({
    components: [Button],
-    html: `<hy-button>Hello tests!</hy-button>`,
+    html: `<hy-button>Hello tests!</hy-button>`
  });
  expect(page.root).toEqualHtml(`
  <hy-button>
@@ -17,43 +17,43 @@ it("should render correctly without attributes", async () => {
  `);
 });
-it("should have classname matching the variant", async () => {
+it('should have classname matching the variant', async () => {
  const page = await newSpecPage({
    components: [Button],
-    html: `<hy-button variant="secondary">Hello icons!<hy-button>`,
+    html: `<hy-button variant="secondary">Hello icons!<hy-button>`
  });
-  const button = page.doc.querySelector("button.secondary");
+  const button = page.doc.querySelector('button.secondary');
  expect(button).toBeTruthy();
 });
-it("should have classname matching the state", async () => {
+it('should have classname matching the state', async () => {
  const page = await newSpecPage({
    components: [Button],
-    html: `<hy-button disabled>I am disabled!<hy-button>`,
+    html: `<hy-button disabled>I am disabled!<hy-button>`
  });
-  const button = page.doc.querySelector("button");
+  const button = page.doc.querySelector('button');
-  expect(button).toHaveAttribute("disabled");
+  expect(button).toHaveAttribute('disabled');
 });
-it("should display an arrow element", async () => {
+it('should display an arrow element', async () => {
  const page = await newSpecPage({
    components: [Button],
    html: `<hy-button
      icon="hy-icon-arrow-left"
-      >Hello icons!<hy-button>`,
+      >Hello icons!<hy-button>`
  });
-  const icon = page.doc.querySelector("span.hy-button__icon");
+  const icon = page.doc.querySelector('span.hy-button__icon');
-  expect(icon).toHaveClass("hy-button__icon");
+  expect(icon).toHaveClass('hy-button__icon');
 });
-it("supports icons on both sides", async () => {
+it('supports icons on both sides', async () => {
  const page = await newSpecPage({
    components: [Button],
    html: `<hy-button
      variant="secondary"
      icon="hy-icon-arrow-left"
-      icon-right="hy-icon-arrow-right">Hello icons!<hy-button>`,
+      icon-right="hy-icon-arrow-right">Hello icons!<hy-button>`
  });
-  const icons = page.doc.querySelectorAll("span.hy-button__icon");
+  const icons = page.doc.querySelectorAll('span.hy-button__icon');
  expect(icons.length).toBe(2);
 });
--- a/src/components/button/button.tsx
+++ b/src/components/button/button.tsx
-import { Component, h, Prop, Host } from "@stencil/core";
+import {Component, h, Prop, Host} from '@stencil/core';
-import { ButtonVariants } from "../../utils/utils";
+import {ButtonVariants} from '../../utils/utils';
-import colors from "../../global/colors";
+import colors from '../../global/colors';
 const fillcolors = {
  primary: colors.brandMain,
-  secondary: "white",
+  secondary: 'white'
 };
 @Component({
-  tag: "hy-button",
+  tag: 'hy-button',
-  styleUrl: "button.scss",
+  styleUrl: 'button.scss',
-  shadow: false,
+  shadow: false
 })
 export class Button {
  /**
   * The element variant. Defaults to primary
   */
-  @Prop() variant: ButtonVariants = "primary";
+  @Prop() variant: ButtonVariants = 'primary';
  /**
   *  deprecated, use disabled boolean value
   *  */
-  @Prop() state: "enabled" | "disabled" = "enabled";
+  @Prop() state: 'enabled' | 'disabled' = 'enabled';
  /**
   * Size (height) of the button. Normal: 44px, large: 48px
   */
-  @Prop() size: "normal" | "large" = "normal";
+  @Prop() size: 'normal' | 'large' = 'normal';
  /**
   * Use this to programmatically disable the button, matches the native button functionality
   */
@@ -32,7 +32,7 @@ export class Button {
  /**
   *  Set this on if an anchor tag is required instead of a button.
   */
-  @Prop() url?: string = "";
+  @Prop() url?: string = '';
  /**
   * Aria label for the element
   */
@@ -50,35 +50,26 @@ export class Button {
   */
  @Prop() iconRight?: string;
  render() {
-    const classAttributes = [
+    const classAttributes = ['hy-button', this.variant, this.state, 'size-' + this.size];
-      "hy-button",
-      this.variant,
-      this.state,
-      "size-" + this.size,
-    ];
    const iconFillColor = fillcolors[this.variant];
-    const target = this.isExternal ? "_blank" : "_self";
+    const target = this.isExternal ? '_blank' : '_self';
    return this.url ? (
      <Host icon-right="hy-icon-arrow-right" aria-label={this.ariaLabel}>
-        <div style={{ display: "flex" }}>
+        <div style={{display: 'flex'}}>
-          <a class={classAttributes.join(" ")} href={this.url} target={target}>
+          <a class={classAttributes.join(' ')} href={this.url} target={target}>
            <span class="hy-button__text">
              <slot />
            </span>
            <span class="hy-button__icon">
-              <hy-icon
+              <hy-icon icon="hy-icon-arrow-right" fill={iconFillColor} size={13} />
-                icon="hy-icon-arrow-right"
-                fill={iconFillColor}
-                size={13}
-              />
            </span>
          </a>
        </div>
      </Host>
    ) : (
      <Host aria-label={this.ariaLabel}>
-        <button class={classAttributes.join(" ")} disabled={this.disabled}>
+        <button class={classAttributes.join(' ')} disabled={this.disabled}>
          {!!this.icon && (
            <span class="hy-button__icon hy-button__icon--left">
              <hy-icon icon={this.icon} fill={iconFillColor} size={13} />

--- a/src/components/button/readme.md
+++ b/src/components/button/readme.md
@@ -121,7 +121,6 @@ Well, it's a button.
 <!-- Auto Generated Below -->
 ## Properties
 | Property     | Attribute     | Description                                                                              | Type                       | Default     |
@@ -131,11 +130,10 @@ Well, it's a button.
 | `icon`       | `icon`        | Icon to use on the left side                                                             | `string`                   | `undefined` |
 | `iconRight`  | `icon-right`  | Icon to use on the right side                                                            | `string`                   | `undefined` |
 | `isExternal` | `is-external` | Use only with url property. Sets the                                                     | `boolean`                  | `false`     |
-| `size`       | `size`        | Size (height) of the button. Normal: 44px, large: 48px                                   | `"large" \| "normal"`      | `"normal"`  |
+| `size`       | `size`        | Size (height) of the button. Normal: 44px, large: 48px                                   | `"large" \| "normal"`      | `'normal'`  |
-| `state`      | `state`       | deprecated, use disabled boolean value                                                   | `"disabled" \| "enabled"`  | `"enabled"` |
+| `state`      | `state`       | deprecated, use disabled boolean value                                                   | `"disabled" \| "enabled"`  | `'enabled'` |
-| `url`        | `url`         | Set this on if an anchor tag is required instead of a button.                            | `string`                   | `""`        |
+| `url`        | `url`         | Set this on if an anchor tag is required instead of a button.                            | `string`                   | `''`        |
-| `variant`    | `variant`     | The element variant. Defaults to primary                                                 | `"primary" \| "secondary"` | `"primary"` |
+| `variant`    | `variant`     | The element variant. Defaults to primary                                                 | `"primary" \| "secondary"` | `'primary'` |
 ## Dependencies
@@ -144,12 +142,13 @@ Well, it's a button.
 - [hy-icon](../icon)
 ### Graph
 ```mermaid
 graph TD;
  hy-button --> hy-icon
  style hy-button fill:#f9f,stroke:#333,stroke-width:4px
 ```
----------------------------------------------
+---
 Helsinki University Design System
--- a/src/components/color-box/color-box.spec.tsx
+++ b/src/components/color-box/color-box.spec.tsx
-import { newSpecPage } from '@stencil/core/testing';
+import {newSpecPage} from '@stencil/core/testing';
-import { ColorBox } from './color-box';
+import {ColorBox} from './color-box';
 describe('color-box', () => {
  it('renders', async () => {
    const page = await newSpecPage({
      components: [ColorBox],
-      html: `<color-box></color-box>`,
+      html: `<color-box></color-box>`
    });
    expect(page.root).toEqualHtml(`
      <color-box>

--- a/src/components/color-box/color-box.tsx
+++ b/src/components/color-box/color-box.tsx
-import { Component, ComponentInterface, Host, h } from '@stencil/core';
+import {Component, ComponentInterface, Host, h} from '@stencil/core';
 @Component({
  tag: 'color-box',
  styleUrl: 'color-box.css',
-  shadow: true,
+  shadow: true
 })
 export class ColorBox implements ComponentInterface {
  render() {
    return (
      <Host>
@@ -14,5 +13,4 @@ export class ColorBox implements ComponentInterface {
      </Host>
    );
  }
 }
--- a/src/components/color-box/readme.md
+++ b/src/components/color-box/readme.md
 # color-box
 <!-- Auto Generated Below -->
+---
----------------------------------------------
 Helsinki University Design System
--- a/src/components/cta-liftup-image-text/cta-liftup-image-text.scss
+++ b/src/components/cta-liftup-image-text/cta-liftup-image-text.scss
@@ -18,11 +18,7 @@ The general formula of the column width for a known gutter width:
 Padding between image and display edge: Margin width + 1/2 column width.
 Padding between text block and display edge: Margin width + 1 column width.
 */
-@mixin calcComponentMargins(
+@mixin calcComponentMargins($gutterWidth, $marginWidth, $fullWidth: 100%) {
-  $gutterWidth,
-  $marginWidth,
-  $fullWidth: 100%
-) {
  &.hy-cta-liftup-image-text {
    padding-left: calc(((#{$fullWidth} - #{$gutterWidth} * 11) / 12) / 2);
    padding-right: calc(((#{$fullWidth} - #{$gutterWidth} * 11) / 12));
@@ -36,11 +32,7 @@ The general formula of the column width for a known gutter width:
 Padding between image and display edge: Margin width + 1/2 column width.
 Padding between text block and display edge: Margin width + 1 column width.
 */
-@mixin calcComponentMarginsReversed(
+@mixin calcComponentMarginsReversed($gutterWidth, $marginWidth, $fullWidth: 100%) {
-  $gutterWidth,
-  $marginWidth,
-  $fullWidth: 100%
-) {
  &.hy-cta-liftup-image-text {
    padding-right: calc(((#{$fullWidth} - #{$gutterWidth} * 11) / 12) / 2);
    padding-left: calc(((#{$fullWidth} - #{$gutterWidth} * 11) / 12));
@@ -82,7 +74,7 @@ The general formula of the column width for a known gutter width:
    @include breakpoint($extrawide) {
      @include calcComponentMarginsReversed($margin-narrow, $gutter-extrawide);
    }
-    }
+  }
  &__image-container {
    flex: 1;
@@ -116,7 +108,8 @@ The general formula of the column width for a known gutter width:
      padding-left: 50px;
      position: relative;
      z-index: 99;
-      -webkit-border-image: -webkit-linear-gradient(to bottom, var(--grayscale-medium-dark), rgba(0, 0, 0, 0)) 1 0 0 100%;
+      -webkit-border-image: -webkit-linear-gradient(to bottom, var(--grayscale-medium-dark), rgba(0, 0, 0, 0)) 1 0 0
+        100%;
      -moz-border-image: linear-gradient(to bottom, var(--grayscale-medium-dark), rgba(0, 0, 0, 0)) 1 0 0 100%;
      -o-border-image: linear-gradient(to bottom, var(--grayscale-medium-dark), rgba(0, 0, 0, 0)) 1 0 0 100%;
    }
@@ -141,19 +134,19 @@ The general formula of the column width for a known gutter width:
    &--left {
      // Padding between text block and display edge: Margin width + 1 column width.
      @include breakpoint($medium) {
-        padding-right: calc(#{$margin-narrow} + ((100% - #{$gutter-narrow} * 11 ) / 12));
+        padding-right: calc(#{$margin-narrow} + ((100% - #{$gutter-narrow} * 11) / 12));
      }
      @include breakpoint($extrawide) {
-        padding-right: calc(#{$margin-narrow} + ((100% - #{$gutter-extrawide} * 11 ) / 12));
+        padding-right: calc(#{$margin-narrow} + ((100% - #{$gutter-extrawide} * 11) / 12));
      }
    }
    &--right {
      // Padding between text block and display edge: Margin width + 1 column width.
      @include breakpoint($medium) {
-        padding-left: calc(#{$margin-narrow} + ((100% - #{$gutter-narrow} * 11 ) / 12));
+        padding-left: calc(#{$margin-narrow} + ((100% - #{$gutter-narrow} * 11) / 12));
      }
      @include breakpoint($extrawide) {
-        padding-left: calc(#{$margin-narrow} + ((100% - #{$gutter-extrawide} * 11 ) / 12));
+        padding-left: calc(#{$margin-narrow} + ((100% - #{$gutter-extrawide} * 11) / 12));
      }
    }
@@ -199,6 +192,6 @@ The general formula of the column width for a known gutter width:
 }
 .hy-cta-liftup-image-text::after {
-  content: "";
+  content: '';
  clear: both;
 }
\ No newline at end of file
--- a/src/components/cta-liftup-image-text/cta-liftup-image-text.tsx
+++ b/src/components/cta-liftup-image-text/cta-liftup-image-text.tsx
-import { Component, ComponentInterface, Prop, h } from '@stencil/core';
+import {Component, ComponentInterface, Prop, h} from '@stencil/core';
 @Component({
  tag: 'hy-cta-liftup-image-text',
  styleUrl: 'cta-liftup-image-text.scss',
-  shadow: true,
+  shadow: true
 })
 export class CtaLiftupImageText implements ComponentInterface {
  @Prop() imageRight: boolean = false;
  @Prop() imageUrl: string = null;
-  @Prop() imageAlt: string = "";
+  @Prop() imageAlt: string = '';
  @Prop() textTitle?: string;
  @Prop() textDescription: string = null;
  @Prop() mainUrl?: string;
@@ -26,20 +26,20 @@ export class CtaLiftupImageText implements ComponentInterface {
  render() {
    const classAttributes = [
-      "hy-cta-liftup-image-text",
+      'hy-cta-liftup-image-text',
-      this.imageRight ? "hy-cta-liftup-image-text--right-image" : null
+      this.imageRight ? 'hy-cta-liftup-image-text--right-image' : null
-    ].join(" ");
+    ].join(' ');
    const contentClassAttributes = [
-      "hy-cta-liftup-image-text__text-container",
+      '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"
+      this.imageRight
-    ].join(" ");
+        ? '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',
-      "hy-cta-liftup-image-text__image-container--right"
+      'hy-cta-liftup-image-text__image-container--right'
-    ].join(" ");
+    ].join(' ');
-    const imageLeftClassAttributes = [
+    const imageLeftClassAttributes = ['hy-cta-liftup-image-text__image-container'].join(' ');
-      "hy-cta-liftup-image-text__image-container"
-    ].join(" ");
    const imageLeft = !this.imageRight;
    const aspectRatioWidth = 4;
@@ -47,21 +47,21 @@ export class CtaLiftupImageText implements ComponentInterface {
    return (
      <div class={classAttributes}>
-        { imageLeft &&
+        {imageLeft && (
          <div class={imageLeftClassAttributes}>
            <hy-image
              image-url={this.imageUrl}
              image-alt={this.imageAlt}
              aspect-ratio-width={aspectRatioWidth}
              aspect-ratio-height={aspectRatioHeight}
-              caption="">
+              caption=""
-            </hy-image>
+            ></hy-image>
          </div>
-        }
+        )}
        <div class={contentClassAttributes}>
-          <div class="hy-cta-liftup-image-text__text-container__title">{ this.textTitle }</div>
+          <div class="hy-cta-liftup-image-text__text-container__title">{this.textTitle}</div>
-          <div class="hy-cta-liftup-image-text__text-container__description">{ this.textDescription }</div>
+          <div class="hy-cta-liftup-image-text__text-container__description">{this.textDescription}</div>
-          {this.mainUrl &&
+          {this.mainUrl && (
            <div class="hy-cta-liftup-image-text__text-container__link">
              <hy-cta-link-button
                link-content={this.mainUrlTitle}
@@ -70,8 +70,8 @@ export class CtaLiftupImageText implements ComponentInterface {
                is-external={this.mainUrlIsExternal}
              />
            </div>
-          }
+          )}
-          {this.standaloneUrl &&
+          {this.standaloneUrl && (
            <div class="hy-cta-liftup-image-text__text-container__standalonelink">
              <hy-standalone-link
                link-content={this.standaloneUrlTitle}
@@ -80,8 +80,8 @@ export class CtaLiftupImageText implements ComponentInterface {
                is-external={this.standaloneUrlIsExternal}
              />
            </div>
-          }
+          )}
-          {this.standaloneUrl2 &&
+          {this.standaloneUrl2 && (
            <div class="hy-cta-liftup-image-text__text-container__standalonelink">
              <hy-standalone-link
                link-content={this.standaloneUrlTitle2}
@@ -90,19 +90,19 @@ export class CtaLiftupImageText implements ComponentInterface {
                is-external={this.standaloneUrlIsExternal2}
              />
            </div>
-          }
+          )}
        </div>
-        { this.imageRight &&
+        {this.imageRight && (
          <div class={imageRightClassAttributes}>
            <hy-image
              image-url={this.imageUrl}
              image-alt={this.imageAlt}
              aspect-ratio-width={aspectRatioWidth}
              aspect-ratio-height={aspectRatioHeight}
-              caption="">
+              caption=""
-            </hy-image>
+            ></hy-image>
          </div>
-        }
+        )}
      </div>
    );
  }

--- a/src/components/cta-liftup-image-text/readme.md
+++ b/src/components/cta-liftup-image-text/readme.md
 # hy-cta-liftup-image-text
 <!-- Auto Generated Below -->
 ## Properties
 | Property                   | Attribute                      | Description | Type      | Default     |
@@ -27,7 +24,6 @@
 | `textDescription`          | `text-description`             |             | `string`  | `null`      |
 | `textTitle`                | `text-title`                   |             | `string`  | `undefined` |
 ## Dependencies
 ### Depends on
@@ -37,6 +33,7 @@
 - [hy-standalone-link](../standalone-link)
 ### Graph
 ```mermaid
 graph TD;
  hy-cta-liftup-image-text --> hy-image
@@ -47,6 +44,6 @@ graph TD;
  style hy-cta-liftup-image-text fill:#f9f,stroke:#333,stroke-width:4px
 ```
----------------------------------------------
+---
 Helsinki University Design System
--- a/src/components/cta-link-button/cta-link-button.tsx
+++ b/src/components/cta-link-button/cta-link-button.tsx
-import { Component, ComponentInterface, Prop, h } from "@stencil/core";
+import {Component, ComponentInterface, Prop, h} from '@stencil/core';
 @Component({
-  tag: "hy-cta-link-button",
+  tag: 'hy-cta-link-button',
-  styleUrl: "cta-link-button.scss",
+  styleUrl: 'cta-link-button.scss',
-  shadow: true,
+  shadow: true
 })
 export class CtaLinkButton implements ComponentInterface {
  /**
   * deprecated, use slot
   */
-  @Prop() linkContent: string = "";
+  @Prop() linkContent: string = '';
  @Prop() url?: string;
  @Prop() ariaLabel?: string;
  @Prop() isExternal: boolean = false;
  render() {
-    const containerClassAttributes = ["hy-cta-link-button-container"].join(" ");
+    const containerClassAttributes = ['hy-cta-link-button-container'].join(' ');
-    const classAttributes = ["hy-cta-link-button"];
+    const classAttributes = ['hy-cta-link-button'];
-    const textClassAttributes = ["hy-cta-link-button__text"].join(" ");
+    const textClassAttributes = ['hy-cta-link-button__text'].join(' ');
-    const iconClassAttributes = ["hy-cta-link-button__link-icon"].join(" ");
+    const iconClassAttributes = ['hy-cta-link-button__link-icon'].join(' ');
-    const target = this.isExternal ? "_blank" : "_self";
+    const target = this.isExternal ? '_blank' : '_self';
    return (
      <span class={containerClassAttributes}>
-        <a
+        <a aria-label={this.ariaLabel} class={classAttributes.join(' ')} href={this.url} target={target}>
-          aria-label={this.ariaLabel}
+          <span class={textClassAttributes}>{this.linkContent.length === 0 ? <slot /> : this.linkContent}</span>
-          class={classAttributes.join(" ")}
-          href={this.url}
-          target={target}
-        >
-          <span class={textClassAttributes}>
-            {this.linkContent.length === 0 ? <slot /> : this.linkContent}
-          </span>
          <span class={iconClassAttributes}>
-            <hy-icon icon={"hy-icon-arrow-right"} size={13} />
+            <hy-icon icon={'hy-icon-arrow-right'} size={13} />
          </span>
        </a>
      </span>

--- a/src/components/cta-link-button/readme.md
+++ b/src/components/cta-link-button/readme.md
 # hy-cta-link-button
 <!-- Auto Generated Below -->
 ## Properties
 | Property      | Attribute      | Description          | Type      | Default     |
 | ------------- | -------------- | -------------------- | --------- | ----------- |
 | `ariaLabel`   | `aria-label`   |                      | `string`  | `undefined` |
 | `isExternal`  | `is-external`  |                      | `boolean` | `false`     |
-| `linkContent` | `link-content` | deprecated, use slot | `string`  | `""`        |
+| `linkContent` | `link-content` | deprecated, use slot | `string`  | `''`        |
 | `url`         | `url`          |                      | `string`  | `undefined` |
 ## Dependencies
 ### Used by
- - [hy-cta-liftup-image-text](../cta-liftup-image-text)
+- [hy-cta-liftup-image-text](../cta-liftup-image-text)
 ### Depends on
 - [hy-icon](../icon)
 ### Graph
 ```mermaid
 graph TD;
  hy-cta-link-button --> hy-icon
@@ -33,6 +30,6 @@ graph TD;
  style hy-cta-link-button fill:#f9f,stroke:#333,stroke-width:4px
 ```
----------------------------------------------
+---
 Helsinki University Design System
--- a/src/components/hy-badge/hy-badge.spec.tsx
+++ b/src/components/hy-badge/hy-badge.spec.tsx
-import { newSpecPage } from "@stencil/core/testing";
+import {newSpecPage} from '@stencil/core/testing';
-import { HyBadge } from "./hy-badge";
+import {HyBadge} from './hy-badge';
-describe("hy-badge", () => {
+describe('hy-badge', () => {
-  it("renders", async () => {
+  it('renders', async () => {
    const page = await newSpecPage({
      components: [HyBadge],
-      html: `<hy-badge></hy-badge>`,
+      html: `<hy-badge></hy-badge>`
    });
    expect(page.root).toEqualHtml(`
      <hy-badge>