Merge branch 'NXSTAGE-705-tabs' into 'development'

Nxstage 705 tabs

See merge request julkiset-sivut/design-system-lib!71

src/components.d.ts

@@ -396,6 +396,13 @@ export namespace Components {
     showLabel: boolean;
     size: number;
   }
+  interface HyTabs {
+    tabId?: string;
+    tabListLabel: string;
+  }
+  interface HyTabsItem {
+    tabTitle?: string;
+  }
   interface HyTinyText {}
   interface HyTwoColumns {
     reversed: boolean;
@@ -651,6 +658,16 @@ declare global {
     prototype: HTMLHySiteSearchElement;
     new (): HTMLHySiteSearchElement;
   };
+  interface HTMLHyTabsElement extends Components.HyTabs, HTMLStencilElement {}
+  var HTMLHyTabsElement: {
+    prototype: HTMLHyTabsElement;
+    new (): HTMLHyTabsElement;
+  };
+  interface HTMLHyTabsItemElement extends Components.HyTabsItem, HTMLStencilElement {}
+  var HTMLHyTabsItemElement: {
+    prototype: HTMLHyTabsItemElement;
+    new (): HTMLHyTabsItemElement;
+  };
   interface HTMLHyTinyTextElement extends Components.HyTinyText, HTMLStencilElement {}
   var HTMLHyTinyTextElement: {
     prototype: HTMLHyTinyTextElement;
@@ -716,6 +733,8 @@ declare global {
     'hy-site-header': HTMLHySiteHeaderElement;
     'hy-site-logo': HTMLHySiteLogoElement;
     'hy-site-search': HTMLHySiteSearchElement;
+    'hy-tabs': HTMLHyTabsElement;
+    'hy-tabs-item': HTMLHyTabsItemElement;
     'hy-tiny-text': HTMLHyTinyTextElement;
     'hy-two-columns': HTMLHyTwoColumnsElement;
     'hy-user-login-form': HTMLHyUserLoginFormElement;
@@ -1087,6 +1106,13 @@ declare namespace LocalJSX {
     showLabel?: boolean;
     size?: number;
   }
+  interface HyTabs {
+    tabId?: string;
+    tabListLabel?: string;
+  }
+  interface HyTabsItem {
+    tabTitle?: string;
+  }
   interface HyTinyText {}
   interface HyTwoColumns {
     reversed?: boolean;
@@ -1145,6 +1171,8 @@ declare namespace LocalJSX {
     'hy-site-header': HySiteHeader;
     'hy-site-logo': HySiteLogo;
     'hy-site-search': HySiteSearch;
+    'hy-tabs': HyTabs;
+    'hy-tabs-item': HyTabsItem;
     'hy-tiny-text': HyTinyText;
     'hy-two-columns': HyTwoColumns;
     'hy-user-login-form': HyUserLoginForm;
@@ -1207,6 +1235,8 @@ declare module '@stencil/core' {
       'hy-site-header': LocalJSX.HySiteHeader & JSXBase.HTMLAttributes<HTMLHySiteHeaderElement>;
       'hy-site-logo': LocalJSX.HySiteLogo & JSXBase.HTMLAttributes<HTMLHySiteLogoElement>;
       'hy-site-search': LocalJSX.HySiteSearch & JSXBase.HTMLAttributes<HTMLHySiteSearchElement>;
+      'hy-tabs': LocalJSX.HyTabs & JSXBase.HTMLAttributes<HTMLHyTabsElement>;
+      'hy-tabs-item': LocalJSX.HyTabsItem & JSXBase.HTMLAttributes<HTMLHyTabsItemElement>;
       'hy-tiny-text': LocalJSX.HyTinyText & JSXBase.HTMLAttributes<HTMLHyTinyTextElement>;
       'hy-two-columns': LocalJSX.HyTwoColumns & JSXBase.HTMLAttributes<HTMLHyTwoColumnsElement>;
       'hy-user-login-form': LocalJSX.HyUserLoginForm & JSXBase.HTMLAttributes<HTMLHyUserLoginFormElement>;

src/components/hy-tabs-item/hy-tabs-item.scss

+:host {
+  display: block;
+}

src/components/hy-tabs-item/hy-tabs-item.tsx

+import {Component, h, Prop} from '@stencil/core';
+
+@Component({
+  tag: 'hy-tabs-item',
+  styleUrl: 'hy-tabs-item.scss',
+  shadow: false,
+})
+export class HyTabsItem {
+  @Prop() tabTitle?: string;
+
+  render() {
+    const id = this.tabTitle.toLowerCase().replace(/\W/g, '-');
+
+    return (
+      <div tabindex="0" role="tabpanel" id={`${id}-tab`} aria-labelledby={id} hidden>
+        <slot></slot>
+      </div>
+    );
+  }
+}

src/components/hy-tabs-item/readme.md

+# hy-tabs-item
+
+<!-- Auto Generated Below -->
+
+## Properties
+
+| Property   | Attribute   | Description | Type     | Default     |
+| ---------- | ----------- | ----------- | -------- | ----------- |
+| `tabTitle` | `tab-title` |             | `string` | `undefined` |
+
+---
+
+Helsinki University Design System

src/components/hy-tabs/hy-tabs.scss

+:host {
+  display: block;
+}
+
+.hy-tabs__container {
+  .hy-tablist-container {
+    border-bottom: 1px solid var(--grayscale-tabs-border);
+    position: relative;
+  }
+
+  .hy-tab-scroll {
+    background-color: var(--brand-main-light);
+    border-radius: 50%;
+    border: 0;
+    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
+    padding: 0;
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    z-index: 3;
+
+    &.is-hidden {
+      display: none;
+      visibility: hidden;
+    }
+    &.is-disabled {
+      background-color: var(--grayscale-medium);
+
+      &:hover {
+        cursor: none;
+      }
+    }
+
+    &:focus,
+    &:hover {
+      outline: none;
+      cursor: pointer;
+    }
+
+    svg {
+      fill: var(--grayscale-white);
+      height: 16px;
+      margin: 8px;
+      position: relative;
+      width: 16px;
+
+      @include breakpoint($narrow) {
+        height: 18px;
+        margin: 9px; //36x36
+        width: 18px;
+      }
+
+      @include breakpoint($wide) {
+        height: 24px;
+        margin: 10px; //44x44
+        width: 24px;
+      }
+    }
+
+    &__left {
+      left: 0;
+
+      svg {
+        left: -1.5px;
+      }
+    }
+
+    &__right {
+      right: 0;
+
+      svg {
+        left: 1.5px;
+      }
+    }
+  }
+
+  [role='tablist'] {
+    display: flex;
+    flex-direction: row;
+    margin: 0 0 -0.1em;
+    overflow: scroll;
+    position: relative;
+    white-space: nowrap;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  }
+
+  [role='tab'] {
+    @include font-size(14px, 16px);
+
+    align-items: center;
+    background-color: var(--grayscale-background-box);
+    border: 0;
+    color: var(--grayscale-black);
+    display: flex;
+    flex-direction: row;
+    flex-shrink: 0;
+    font-family: var(--main-font-family);
+    font-weight: 600;
+    justify-content: center;
+    letter-spacing: -0.44px;
+    margin: 0 8px 0 0;
+    max-width: calc(100% / 12 * 3);
+    min-height: 44px;
+    min-width: 100px;
+    padding: 8px;
+    position: relative;
+    white-space: normal;
+
+    span.tab-title {
+      padding: 8px;
+    }
+
+    @include breakpoint($narrow) {
+      @include font-size(18px, 24px);
+      letter-spacing: -0.56px;
+      padding: 8px 12px;
+
+      span.tab-title {
+        padding: 8px 12px;
+      }
+    }
+    @include breakpoint($medium) {
+      padding: 8px 16px;
+
+      span.tab-title {
+        padding: 8px 16px;
+      }
+    }
+    @include breakpoint($overwide) {
+      margin-right: 12px;
+    }
+  }
+
+  [role='tab'][aria-selected='true'] {
+    background: var(--grayscale-white);
+    border: 1px solid var(--grayscale-tabs-border);
+    border-bottom-width: 0;
+    box-shadow: inset 0 1px 0 0 var(--grayscale-medium), inset -1px 1px 0 0 var(--grayscale-medium),
+      inset 1px 1px 0 0 var(--grayscale-medium), 0 -4px 8px -4px rgba(0, 0, 0, 0.1);
+    font-weight: bold;
+    margin-bottom: -1px;
+    padding-bottom: 9px;
+  }
+
+  [role='tab']:hover,
+  [role='tab']:focus,
+  [role='tab']:active {
+    border-radius: 0;
+    color: inherit;
+    cursor: pointer;
+    text-decoration: none;
+  }
+
+  [role='tab']:hover::before,
+  [role='tab']:focus::before {
+  }
+
+  [role='tabpanel'] {
+    padding: 1.5em 0.5em 0.7em;
+    position: relative;
+    z-index: 2;
+  }
+
+  [role='tabpanel']:focus {
+    outline: 0;
+  }
+}

src/components/hy-tabs/hy-tabs.tsx

+import {Component, ComponentInterface, h, Prop, State, Listen, Element} from '@stencil/core';
+// For easy reference
+let keys = {
+  end: 35,
+  home: 36,
+  left: 37,
+  up: 38,
+  right: 39,
+  down: 40,
+  delete: 46,
+};
+
+// Add or substract depending on key pressed
+let direction = {
+  37: -1,
+  38: -1,
+  39: 1,
+  40: 1,
+};
+let checkTimeout;
+let focusTimeout;
+
+@Component({
+  tag: 'hy-tabs',
+  styleUrl: 'hy-tabs.scss',
+  shadow: false,
+})
+export class HyTabs implements ComponentInterface {
+  @Prop() tabId?: string;
+  @Prop() tabListLabel: string = '';
+  @State() focusTimeoutCleared: boolean = true;
+  @State() tabButtonTitles: object[];
+  @State() tabPanelsState: NodeListOf<Element>[];
+  @State() tabButtons: NodeListOf<Element>[];
+  @State() tabList: NodeListOf<Element>[];
+  @Element() el: HTMLElement;
+
+  componentWillLoad() {
+    const tabItems = this.el.querySelectorAll('hy-tabs-item');
+    if (tabItems) {
+      this.tabButtonTitles = Array.from(tabItems).map((panel) => {
+        return {
+          title: panel.getAttribute('tab-title'),
+          id: panel.getAttribute('tab-title').toLowerCase().replace(/\W/g, '-'),
+        };
+      });
+    }
+  }
+
+  componentDidLoad() {
+    const tabContainer = this.el.children[0];
+    if (tabContainer) {
+      this.generateArrays(tabContainer);
+
+      const leftButton = this.el.querySelectorAll('.hy-tab-scroll__left')[0];
+      const rightButton = this.el.querySelectorAll('.hy-tab-scroll__right')[0];
+      const tabList = this.tabList as any;
+      this.checkScrollHidden(tabList, leftButton, rightButton);
+
+      if (tabList.offSetWidth <= document.body.scrollWidth) {
+        leftButton.classList.add('is-hidden');
+        rightButton.classList.add('is-hidden');
+      }
+
+      const oneTabWidth = 250;
+      rightButton.addEventListener('click', (e) => {
+        e.preventDefault();
+        rightButton.classList.add('is-disabled');
+        tabList.scrollBy({
+          top: 0,
+          left: +oneTabWidth,
+          behavior: 'smooth',
+        });
+        checkTimeout = window.setTimeout(() => {
+          this.checkScrollHidden(tabList, leftButton, rightButton);
+          rightButton.classList.remove('is-disabled');
+        }, 250);
+      });
+
+      leftButton.addEventListener('click', (e) => {
+        e.preventDefault();
+        leftButton.classList.add('is-disabled');
+        tabList.scrollBy({
+          top: 0,
+          left: -oneTabWidth,
+          behavior: 'smooth',
+        });
+        checkTimeout = window.setTimeout(() => {
+          this.checkScrollHidden(tabList, leftButton, rightButton);
+          leftButton.classList.remove('is-disabled');
+        }, 250);
+      });
+    }
+  }
+
+  generateArrays(tc) {
+    this.tabList = tc.querySelectorAll('[role="tablist"]')[0] as any;
+    this.tabButtons = tc.querySelectorAll('[role="tab"]') as any;
+    this.tabPanelsState = [tc.querySelectorAll('[role="tabpanel"]')] as any;
+
+    if (this.tabButtons.length > 0) {
+      this.addListeners(this.tabButtons, 1);
+      this.activateTab(this.tabButtons[0], true);
+    }
+  }
+
+  addListeners(tabs, index) {
+    if (tabs.length > 1) {
+      for (let i = 0; i < tabs.length; ++i) {
+        tabs[index].addEventListener('click', this.clickEventListener);
+        tabs[index].addEventListener('keydown', this.keydownEventListener);
+        //tabs[index].addEventListener('keyup', this.keyupEventListener);
+        tabs[index].index = index;
+      }
+    }
+  }
+
+  checkScrollHidden(tablist, leftButton, rightButton) {
+    if (tablist.scrollLeft === 0) {
+      leftButton.classList.add('is-hidden');
+    } else {
+      leftButton.classList.remove('is-hidden');
+    }
+    if (tablist.scrollLeft + tablist.clientWidth >= tablist.scrollWidth - 1) {
+      rightButton.classList.add('is-hidden');
+    } else {
+      rightButton.classList.remove('is-hidden');
+    }
+    window.clearTimeout(checkTimeout);
+  }
+
+  // When a tab is clicked, activateTab is fired to activate it
+  @Listen('click')
+  clickEventListener(event) {
+    if (event) {
+      const target = event.target;
+      const tabs = this.tabButtonTitles;
+      if (tabs) {
+        tabs.forEach((tab) => {
+          const id = Object.values(tab)[1];
+          if (id === target.id) {
+            this.activateTab(target, true);
+          }
+        });
+        event.stopPropagation();
+        event.stopImmediatePropagation();
+      }
+    }
+  }
+
+  @Listen('keydown')
+  keydownEventListener(event) {
+    const key = event.keyCode;
+    const tabs = this.tabButtonTitles as any;
+    switch (key) {
+      case keys.end:
+        event.preventDefault();
+        // Activate last tab
+        this.activateTab(tabs[tabs.length - 1], true);
+        break;
+      case keys.home:
+        event.preventDefault();
+        // Activate first tab
+        this.activateTab(tabs[0], true);
+        break;
+
+      // Up and down are in keydown
+      // because we need to prevent page scroll >:)
+      case keys.up:
+      case keys.down:
+        if (this.focusTimeoutCleared) {
+          this.determineOrientation(event);
+        }
+        break;
+    }
+  }
+
+  @Listen('keydown')
+  keyupEventListener(event) {
+    const key = event.keyCode;
+
+    switch (key) {
+      case keys.left:
+      case keys.right:
+        if (this.focusTimeoutCleared) {
+          this.determineOrientation(event);
+        }
+        break;
+    }
+    event.stopPropagation();
+    event.stopImmediatePropagation();
+  }
+
+  determineOrientation(event) {
+    const leftButton = this.el.querySelectorAll('.hy-tab-scroll__left')[0];
+    const rightButton = this.el.querySelectorAll('.hy-tab-scroll__right')[0];
+    const tabList = this.tabList as any;
+
+    this.checkScrollHidden(tabList, leftButton, rightButton);
+
+    const key = event.keyCode;
+    const vertical = tabList.getAttribute('aria-orientation') == 'vertical';
+    let proceed = false;
+    if (vertical) {
+      if (key === keys.up || key === keys.down) {
+        event.preventDefault();
+        proceed = true;
+      }
+    } else {
+      if (key === keys.left || key === keys.right) {
+        proceed = true;
+      }
+    }
+
+    if (proceed) {
+      this.switchTabOnArrowPress(event);
+    }
+  }
+
+  switchTabOnArrowPress(event) {
+    const pressed = event.keyCode;
+
+    if (direction[pressed]) {
+      const target = event.target;
+      const tabs = this.tabButtons as any;
+
+      for (let i = 0; i < tabs.length; i++) {
+        if (tabs[i].id === target.id) {
+          if (i > 0) {
+            if (direction[pressed] === -1) {
+              tabs[i - 1].focus();
+              this.focusEventHandler(tabs[i - 1]);
+              break;
+            }
+          }
+          if (i < tabs.length - 1) {
+            if (direction[pressed] === 1) {
+              tabs[i + 1].focus();
+              this.focusEventHandler(tabs[i + 1]);
+              break;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  // Activates any given tab panel
+  activateTab(tab, setFocus) {
+    setFocus = setFocus || true;
+    // Deactivate all other tabs
+    this.deactivateTabs(this.tabButtons);
+    // Remove tabindex attribute
+    tab.removeAttribute('tabindex');
+    tab.setAttribute('aria-selected', 'true');
+    const controls = tab.getAttribute('aria-controls');
+    this.el.querySelector(`#${controls}`).removeAttribute('hidden');
+
+    if (setFocus) {
+      tab.focus();
+    }
+    window.clearTimeout(focusTimeout);
+    this.focusTimeoutCleared = true;
+  }
+
+  // Deactivate all tabs and tab panels
+  deactivateTabs(tabs) {
+    for (let t = 0; t < tabs.length; t++) {
+      tabs[t].setAttribute('tabindex', '-1');
+      tabs[t].setAttribute('aria-selected', 'false');
+      tabs[t].removeEventListener('focus', this.focusEventHandler);
+    }
+    const panels = this.tabPanelsState[0];
+    for (let p = 0; p < panels.length; p++) {
+      panels[p].setAttribute('hidden', 'hidden');
+    }
+  }
+
+  @Listen('focus')
+  focusEventHandler(tab) {
+    const target = tab;
+    this.focusTimeoutCleared = false;
+    focusTimeout = window.setTimeout(() => {
+      const focused = document.activeElement;
+      if (target === focused) {
+        this.activateTab(target, false);
+      }
+    }, 300);
+  }
+
+  render() {
+    const classComponentAttributes = ['hy-tabs__container'].join(' ');
+    const id = this.tabId.toLowerCase().replace(/\W/g, '-');
+
+    return (
+      <div id={id} class={classComponentAttributes}>
+        <div class="hy-tablist-container">
+          <button class="hy-tab-scroll hy-tab-scroll__left is-hidden" aria-hidden="true">
+            <hy-icon icon={'hy-icon-caret-left'} size={16} />
+          </button>
+          <div role="tablist" aria-label={this.tabListLabel}>
+            {this.tabButtonTitles &&
+              this.tabButtonTitles.map((item) => {
+                const title = Object.values(item)[0];
+                const id = title.toLowerCase().replace(/\W/g, '-');
+                return (
+                  <button role="tab" aria-selected="false" aria-controls={`${id}-tab`} id={id}>
+                    {title}
+                  </button>
+                );
+              })}
+          </div>
+          <button class="hy-tab-scroll hy-tab-scroll__right" aria-hidden="true">
+            <hy-icon icon={'hy-icon-caret-right'} size={16} />
+          </button>
+        </div>
+        <slot></slot>
+      </div>
+    );
+  }
+}

src/components/hy-tabs/readme.md

+# hy-tabs
+
+<!-- Auto Generated Below -->
+
+## Properties
+
+| Property       | Attribute        | Description | Type     | Default     |
+| -------------- | ---------------- | ----------- | -------- | ----------- |
+| `tabId`        | `tab-id`         |             | `string` | `undefined` |
+| `tabListLabel` | `tab-list-label` |             | `string` | `''`        |
+
+## Dependencies
+
+### Depends on
+
+- [hy-icon](../icon)
+
+### Graph
+
+```mermaid
+graph TD;
+  hy-tabs --> hy-icon
+  style hy-tabs fill:#f9f,stroke:#333,stroke-width:4px
+```
+
+---
+
+Helsinki University Design System

src/components/icon/readme.md

@@ -28,6 +28,7 @@
 - [hy-site-header](../site-header)
 - [hy-site-logo](../site-header/site-logo)
 - [hy-site-search](../site-header/site-search)
+- [hy-tabs](../hy-tabs)
 
 ### Graph
 
@@ -47,6 +48,7 @@ graph TD;
   hy-site-header --> hy-icon
   hy-site-logo --> hy-icon
   hy-site-search --> hy-icon
+  hy-tabs --> hy-icon
   style hy-icon fill:#f9f,stroke:#333,stroke-width:4px
 ```
 

src/global/_colors.scss

@@ -8,6 +8,7 @@
   --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;

src/index.html

@@ -13,83 +13,171 @@
   <body class="full-width" style="padding: 0; margin: 0;">
     <hy-main has-sidebar="false">
       <div class="layout-content">
-        <hy-introduction
-          reversed
-          text-title="This is an introduction"
-          text-description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pellentesque pretium leo quis efficitur. Praesent lorem sapien, pharetra ac suscipit non, bibendum sed nisi. Suspendisse semper felis quam, ut congue dui interdum at. Phasellus et porta libero, nec lobortis odio. Mauris ut elementum risus. Ut sed consectetur tellus. Duis pellentesque, ante in tempus pellentesque, elit nisi volutpat erat, in semper leo metus nec purus. Mauris eu finibus diam. Vestibulum eget ex et magna euismod porttitor. Pellentesque non tellus ornare, volutpat metus sit amet, ornare est. Morbi et ornare ipsum. Pellentesque condimentum magna est, vel luctus velit iaculis quis. Ut eu mi non augue dictum porta. Aliquam erat volutpat. Praesent volutpat, turpis nec mattis condimentum, mi lectus varius tellus, mattis tempus lorem justo et neque."
-          url="https://www.google.com"
-          url-title="Check this link"
-          sc-label="label for link"
-          image-url="https://www.helsinki.fi/sites/default/files/styles/16_9_huge/public/kukkataedit_ja_-sedaet-6_0.jpg"
-        ></hy-introduction>
-
-        <hy-banner
-          text-title="Check upcoming conferences"
-          text-description="Take advantage of our curated list of high profile conferences near Helsinki and in the Nordics."
-          url="#this-is-an-accordion-item-2--title"
-          url-title="Show list of conferences"
-          sc-label="List of conferences"
-        >
-        </hy-banner>
-        <section>
-          <a href="#this-is-an-accordion-item-2--title">Click here to go to Accordion Item 2</a>
-        </section>
-
-        <hy-banner
-          text-title="Check upcoming conferences"
-          text-description="Take advantage of our curated list of high profile conferences near Helsinki and in the Nordics."
-          url="#this-is-an-accordion-item-2--title"
-          url-title="Show list of conferences"
-          sc-label="List of conferences"
-        >
-        </hy-banner>
-
-        <hy-accordion-container accordionId="example-accordion">
-          <hy-accordion-item accordiontitle="This is an accordion item 1">
-            <hy-paragraph-text>Accordion content</hy-paragraph-text>
-          </hy-accordion-item>
-          <hy-accordion-item accordiontitle="This is an accordion item 2">
-            <hy-paragraph-text>Accordion content</hy-paragraph-text>
-          </hy-accordion-item>
-          <hy-accordion-item accordiontitle="This is an accordion item 3">
-            <hy-paragraph-text>Accordion content</hy-paragraph-text>
-          </hy-accordion-item>
-        </hy-accordion-container>
-
         <hy-main-content-wrapper>
           <hy-heading heading="h2" section="contentsection">
-            A process illustrated with steps
+            Tabs, ohh so many tabs
+          </hy-heading>
+          <hy-tabs tab-id="example-tabs-1">
+            <hy-tabs-item tab-title="Tab with text content">
+              <hy-paragraph-text>
+                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.
+              </hy-paragraph-text>
+            </hy-tabs-item>
+            <hy-tabs-item tab-title="For partner universities">Tab Content</hy-tabs-item>
+            <hy-tabs-item tab-title="For foundations">Tab Content TWO Here Tab Content TWO Here</hy-tabs-item>
+            <hy-tabs-item tab-title="For alumni">
+              <hy-accordion-container accordionId="example-accordion">
+                <hy-accordion-item accordiontitle="This is a accordion item 1">
+                  <hy-paragraph-text>Accordion content</hy-paragraph-text>
+                </hy-accordion-item>
+                <hy-accordion-item accordiontitle="This is a accordion item 2">
+                  <hy-paragraph-text>Accordion content</hy-paragraph-text>
+                </hy-accordion-item>
+                <hy-accordion-item accordiontitle="This is a accordion item 3">
+                  <hy-paragraph-text>Accordion content</hy-paragraph-text>
+                </hy-accordion-item>
+              </hy-accordion-container>
+            </hy-tabs-item>
+            <hy-tabs-item tab-title="Support us">Tab Content FOUR Here</hy-tabs-item>
+            <hy-tabs-item tab-title="Contact us">
+              <hy-introduction
+                variant="blue"
+                text-title="This is an introduction"
+                text-description="Highly cited researchers at the University of Helsinki, Centres of Excellence selected by the Academy of Finland and projects funded by the European Research Council."
+                url="https://www.google.com"
+                url-title="Check this link"
+                sc-label="label for link"
+                image-url="https://www.helsinki.fi/sites/default/files/styles/16_9_huge/public/kukkataedit_ja_-sedaet-6_0.jpg"
+              ></hy-introduction>
+            </hy-tabs-item>
+            <hy-tabs-item tab-title="One more">
+              <hy-paragraph-text>
+                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.
+              </hy-paragraph-text>
+              <hy-paragraph-text>
+                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.
+              </hy-paragraph-text>
+            </hy-tabs-item>
+            <hy-tabs-item tab-title="Tab with text content 7">
+              <hy-paragraph-text>
+                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.
+              </hy-paragraph-text>
+              <hy-adjacent-image-text
+                image-url="https://www.helsinki.fi/sites/default/files/styles/16_9_huge/public/coronavirus_1920x1080px_4.jpg?itok=dOgb6pfs"
+                text-title="Text title 2"
+                text-description="Text description Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+                main-url="https://www.google.com"
+                main-url-title="Standalone link"
+                main-url-aria-label="Standalone link internal"
+                main-url-is-external="false"
+                main-url-2="https://www.google.com"
+                main-url-title-2="CTA standalone URL example"
+                main-url-aria-label-2=""
+                main-url-is-external-2="false"
+              >
+              </hy-adjacent-image-text>
+            </hy-tabs-item>
+            <hy-tabs-item tab-title="Just a tab">
+              <hy-heading heading="h2">This is another heading</hy-heading>
+              <hy-paragraph-text>
+                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.
+              </hy-paragraph-text>
+            </hy-tabs-item>
+            <hy-tabs-item tab-title="Tab with text content last one">
+              <hy-heading heading="h3">This is a heading</hy-heading>
+              <hy-paragraph-text>
+                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. 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. 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.
+              </hy-paragraph-text>
+            </hy-tabs-item>
+          </hy-tabs>
+
+          <hy-heading heading="h2" section="contentsection">
+            MORE TABS
           </hy-heading>
-          <hy-large-process-flow
-            data-items='[
-        {"phaseTitle":"First phase title",
-         "boxes": [
-         {"heading": "Hanc ego cum teneam sententiam",
-          "description":"Certe, inquam, pertinax non quo quaerimus, non possim accommodare torquatos nostros? quos tu paulo ante cum teneam sententiam, quid est consecutus? laudem et expedita distinctio nam libero tempore, cum teneam sententiam, quid percipit aut quid et inter mediocrem animadversionem atque in liberos atque insitam in.",
-          "links":[{"label":"Link to  another page", "url": "https://helsinki.fi"}]},
-        {"heading": "Hanc ego cum teneam sententiam",
-          "description":"Certe, inquam, pertinax non quo quaerimus, non possim accommodare torquatos nostros? quos tu paulo ante cum teneam sententiam, quid est consecutus? laudem et expedita distinctio nam libero tempore, cum teneam sententiam, quid percipit aut quid et inter mediocrem animadversionem atque in liberos atque insitam in.",
-          "links":[{"label":"Link to  another page", "url": "https://helsinki.fi"},
-                   {"label":"Link to  another page", "url": "https://helsinki.fi"}]},
-         {"heading": "Hanc ego cum teneam sententiam",
-          "description":"Certe, inquam, pertinax non quo quaerimus, non possim accommodare torquatos nostros? quos tu paulo ante cum teneam sententiam, quid est consecutus? laudem et expedita distinctio nam libero tempore, cum teneam sententiam, quid percipit aut quid et inter mediocrem animadversionem atque in liberos atque insitam in."},
-         {"heading": "Hanc ego cum teneam sententiam",
-          "description":"Certe, inquam, pertinax non quo quaerimus, non possim accommodare torquatos nostros? quos tu paulo ante cum teneam sententiam, quid est consecutus? laudem et expedita distinctio nam libero tempore, cum teneam sententiam, quid percipit aut quid et inter mediocrem animadversionem atque in liberos atque insitam in.",
-          "links":[{"label":"Link to  another page", "url": "https://helsinki.fi"},
-                   {"label":"Link to  another page", "url": "https://helsinki.fi"}]}
-         ]
-        },
-        {"phaseTitle":"Second phase title",
-         "boxes": [
-         {"heading": "Hanc ego cum teneam sententiam",
-          "description":"<pre>\r\n<u>Certe<\/u>, <strong>inquam<\/strong>, pertinax non quo quaerimus, non possim accommodare torquatos nostros? quos tu paulo ante cum teneam sententiam, quid est consecutus? laudem et expedita distinctio nam libero tempore, cum teneam sententiam, quid percipit aut quid et inter mediocrem \r\nanimadversionem atque in liberos atque insitam<\/pre>\r\n\r\n<p>&nbsp;<\/p>\r\n\r\n<h4>atque<\/h4>\r\n",
-          "links":[{"label":"Link to  another page", "url": "https://helsinki.fi"},
-                   {"label":"Link to  another page", "url": "https://helsinki.fi"}]}
-         ]
-        }
-      ]'
-          >
-          </hy-large-process-flow>
+          <hy-tabs tab-id="example-tabs-2">
+            <hy-tabs-item tab-title="More tabs 1">
+              <hy-paragraph-text>
+                MORE TABSLorem 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.
+              </hy-paragraph-text>
+            </hy-tabs-item>
+            <hy-tabs-item tab-title="More tabs 2">MORE TABS Tab Content</hy-tabs-item>
+            <hy-tabs-item tab-title="More tabs Item 2">MORE TABSTab Content TWO Here Tab Content TWO Here</hy-tabs-item>
+            <hy-tabs-item tab-title="More tabs Accordion in tabs">
+              <hy-accordion-container accordionId="example-accordion">
+                <hy-accordion-item accordiontitle="MORE TABS ACCORDION">
+                  <hy-paragraph-text>Accordion content</hy-paragraph-text>
+                </hy-accordion-item>
+                <hy-accordion-item accordiontitle="This is a accordion item 2">
+                  <hy-paragraph-text>Accordion content</hy-paragraph-text>
+                </hy-accordion-item>
+                <hy-accordion-item accordiontitle="This is a accordion item 3">
+                  <hy-paragraph-text>Accordion content</hy-paragraph-text>
+                </hy-accordion-item>
+              </hy-accordion-container>
+            </hy-tabs-item>
+          </hy-tabs>
+          <hy-tabs tab-id="example-3" tab-list-label="Example tabs 3">
+            <hy-tabs-item tab-title="Third tab">
+              Hello
+            </hy-tabs-item>
+            <hy-tabs-item tab-title="Third tab second">
+              Bye
+            </hy-tabs-item>
+          </hy-tabs>
         </hy-main-content-wrapper>
       </div>
     </hy-main>

tsconfig.json

@@ -4,10 +4,7 @@
     "allowUnreachableCode": false,
     "declaration": false,
     "experimentalDecorators": true,
-    "lib": [
-      "dom",
-      "es2017"
-    ],
+    "lib": ["dom", "es2017", "dom.iterable"],
     "moduleResolution": "node",
     "module": "esnext",
     "target": "es2017",
@@ -16,11 +13,6 @@
     "jsx": "react",
     "jsxFactory": "h"
   },
-  "include": [
-    "src",
-    "types/jsx.d.ts"
-  ],
-  "exclude": [
-    "node_modules"
-  ]
+  "include": ["src", "types/jsx.d.ts"],
+  "exclude": ["node_modules"]
 }