diff --git a/src/components.d.ts b/src/components.d.ts
index 89ecacca85a5c7ed536212956839ae86512d2c36..05350742cc948f06de03393d43274cde309d1971 100644
--- a/src/components.d.ts
+++ b/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>;
diff --git a/src/components/hy-tabs-item/hy-tabs-item.scss b/src/components/hy-tabs-item/hy-tabs-item.scss
new file mode 100644
index 0000000000000000000000000000000000000000..5d4e87f30f6362b8597dbe54a44aadaffa915763
--- /dev/null
+++ b/src/components/hy-tabs-item/hy-tabs-item.scss
@@ -0,0 +1,3 @@
+:host {
+ display: block;
+}
diff --git a/src/components/hy-tabs-item/hy-tabs-item.tsx b/src/components/hy-tabs-item/hy-tabs-item.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..dd206b337cdbb9a664625e0a1d7a000ca410d41a
--- /dev/null
+++ b/src/components/hy-tabs-item/hy-tabs-item.tsx
@@ -0,0 +1,20 @@
+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>
+ );
+ }
+}
diff --git a/src/components/hy-tabs-item/readme.md b/src/components/hy-tabs-item/readme.md
new file mode 100644
index 0000000000000000000000000000000000000000..6bfeaaf3ee96fd2d5c4a40d9c775306469aaad9e
--- /dev/null
+++ b/src/components/hy-tabs-item/readme.md
@@ -0,0 +1,13 @@
+# hy-tabs-item
+
+<!-- Auto Generated Below -->
+
+## Properties
+
+| Property | Attribute | Description | Type | Default |
+| ---------- | ----------- | ----------- | -------- | ----------- |
+| `tabTitle` | `tab-title` | | `string` | `undefined` |
+
+---
+
+Helsinki University Design System
diff --git a/src/components/hy-tabs/hy-tabs.scss b/src/components/hy-tabs/hy-tabs.scss
new file mode 100644
index 0000000000000000000000000000000000000000..1b4066c833692178adfe93dc4519132aec7e48a4
--- /dev/null
+++ b/src/components/hy-tabs/hy-tabs.scss
@@ -0,0 +1,170 @@
+: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;
+ }
+}
diff --git a/src/components/hy-tabs/hy-tabs.tsx b/src/components/hy-tabs/hy-tabs.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..620bce61ea0c7c4af483f41561d47596e8cd1d78
--- /dev/null
+++ b/src/components/hy-tabs/hy-tabs.tsx
@@ -0,0 +1,321 @@
+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>
+ );
+ }
+}
diff --git a/src/components/hy-tabs/readme.md b/src/components/hy-tabs/readme.md
new file mode 100644
index 0000000000000000000000000000000000000000..a44b7a525147022f09654e7ddb6432068dc0e6b4
--- /dev/null
+++ b/src/components/hy-tabs/readme.md
@@ -0,0 +1,28 @@
+# 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
diff --git a/src/components/icon/readme.md b/src/components/icon/readme.md
index 2c3987cc2925e20fecab80740e32c1598937172e..3c1937f7e6e12131ccfaf394e37887e0792a2869 100644
--- a/src/components/icon/readme.md
+++ b/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
```
diff --git a/src/global/_colors.scss b/src/global/_colors.scss
index f860e0058b810a89331fe5c8b6e39ce5cd93984c..e0b53e7264f4574b2d34e66a8789839513a9f625 100644
--- a/src/global/_colors.scss
+++ b/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;
diff --git a/src/index.html b/src/index.html
index 20ff06d0af42fc18046b847797bfc20540a08ce8..78b8c652c071fdd0300efce43f65115d0e2c2add 100644
--- a/src/index.html
+++ b/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> <\/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>
diff --git a/tsconfig.json b/tsconfig.json
index 751e368d3e6ed526c6abeb0b141da3b361940d09..0789b5364aca50460789841a4f9a7a9b372fbac2 100644
--- a/tsconfig.json
+++ b/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"]
}