feat(tabs): create tabs component

Co-authored-by: CubLion <Alex.Ghiu@ing.com>
Co-authored-by: erikkroes <Erik.Kroes@ing.com>

Author: 3 people

README.md

@@ -0,0 +1,4 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

packages/tabs/CHANGELOG.md

@@ -0,0 +1,51 @@
+# Tabs
+
+`lion-tabs` implements Tabs view to allow users to quickly move between a small number of equally important views
+
+## How to use
+
+### Installation
+
+```sh
+npm i --save @lion/tabs;
+```
+
+### Usage
+
+```js
+import '@lion/tabs/lion-tabs.js';
+```
+
+```html
+<lion-tabs>
+  <button slot="tab">Info</button>
+  <p slot="panel">
+    Lorem ipsum dolor sit, amet consectetur adipisicing elit. Laboriosam sequi odit cumque, enim aut
+    assumenda itaque quis voluptas est quos fugiat unde labore reiciendis saepe, iure, optio
+    officiis obcaecati quibusdam.
+  </p>
+  <div slot="tab">About</div>
+  <p slot="panel">
+    Lorem ipsum dolor sit, amet consectetur adipisicing elit. Laboriosam sequi odit cumque, enim aut
+    assumenda itaque quis voluptas est quos fugiat unde labore reiciendis saepe, iure, optio
+    officiis obcaecati quibusdam.
+  </p>
+</lion-tabs>
+```
+
+Rationales:
+
+- **No separate active/focus state when using keyboard**
+
+  We will immediately switch content as all our content comes from light dom (e.g. no latency)
+
+  See Note at <https://www.w3.org/TR/wai-aria-practices/#keyboard-interaction-19>
+
+  > It is recommended that tabs activate automatically when they receive focus as long as their
+  > associated tab panels are displayed without noticeable latency. This typically requires tab
+  > panel content to be preloaded.
+
+- **Panels are not focusable**
+
+  Focusable elements should have a means to interact with them. Tab panels themselves do not offer any interactiveness.
+  If there is a button or a form inside the tab panel then these elements get focused directly.

packages/tabs/README.md

@@ -0,0 +1 @@
+export { LionTabs } from './src/LionTabs.js';

packages/tabs/index.js

@@ -0,0 +1,3 @@
+import { LionTabs } from './src/LionTabs.js';
+
+customElements.define('lion-tabs', LionTabs);

packages/tabs/lion-tabs.js

@@ -0,0 +1,42 @@
+{
+  "name": "@lion/tabs",
+  "version": "0.0.0",
+  "description": "Allows users to quickly move between a small number of equally important views.",
+  "author": "ing-bank",
+  "homepage": "https://github.com/ing-bank/lion/",
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ing-bank/lion.git",
+    "directory": "packages/tabs"
+  },
+  "scripts": {
+    "prepublishOnly": "../../scripts/npm-prepublish.js"
+  },
+  "keywords": [
+    "lion",
+    "web-components",
+    "tabs"
+  ],
+  "main": "index.js",
+  "module": "index.js",
+  "files": [
+    "docs",
+    "src",
+    "stories",
+    "test",
+    "translations",
+    "*.js"
+  ],
+  "dependencies": {
+    "@lion/core": "^0.2.1"
+  },
+  "devDependencies": {
+    "@open-wc/demoing-storybook": "^0.2.0",
+    "@open-wc/testing": "^2.3.4",
+    "sinon": "^7.2.2"
+  }
+}

packages/tabs/package.json

@@ -0,0 +1,235 @@
+import { LitElement, css, html } from '@lion/core';
+
+const uuid = () =>
+  Math.random()
+    .toString(36)
+    .substr(2, 10);
+
+const setupPanel = ({ element, uid }) => {
+  element.setAttribute('id', `panel-${uid}`);
+  element.setAttribute('role', 'tabpanel');
+  element.setAttribute('aria-labelledby', `button-${uid}`);
+};
+
+const selectPanel = element => {
+  element.setAttribute('selected', true);
+};
+
+const deselectPanel = element => {
+  element.removeAttribute('selected');
+};
+
+const setupButton = ({ element, uid, clickHandler, keydownHandler }) => {
+  element.setAttribute('id', `button-${uid}`);
+  element.setAttribute('role', 'tab');
+  element.setAttribute('aria-controls', `panel-${uid}`);
+  element.addEventListener('click', clickHandler);
+  element.addEventListener('keyup', keydownHandler);
+};
+
+const cleanButton = (element, clickHandler, keydownHandler) => {
+  element.removeAttribute('id');
+  element.removeAttribute('role');
+  element.removeAttribute('aria-controls');
+  element.removeEventListener('click', clickHandler);
+  element.removeEventListener('keyup', keydownHandler);
+};
+
+const selectButton = element => {
+  element.focus();
+  element.setAttribute('selected', true);
+  element.setAttribute('aria-selected', true);
+  element.setAttribute('tabindex', 0);
+};
+
+const deselectButton = element => {
+  element.removeAttribute('selected');
+  element.setAttribute('aria-selected', false);
+  element.setAttribute('tabindex', -1);
+};
+
+export class LionTabs extends LitElement {
+  static get properties() {
+    return {
+      /**
+       * index number of the selected tab
+       */
+      selectedIndex: {
+        type: Number,
+        value: 0,
+      },
+    };
+  }
+
+  static get styles() {
+    return [
+      css`
+        .tabs__tab-group {
+          display: flex;
+        }
+
+        .tabs__tab-group ::slotted([slot='tab'][selected]) {
+          font-weight: bold;
+        }
+
+        .tabs__panels ::slotted([slot='panel']) {
+          visibility: hidden;
+          display: none;
+        }
+
+        .tabs__panels ::slotted([slot='panel'][selected]) {
+          visibility: visible;
+          display: block;
+        }
+
+        .tabs__panels {
+          display: block;
+        }
+      `,
+    ];
+  }
+
+  render() {
+    return html`
+      <div class="tabs__tab-group" role="tablist">
+        <slot name="tab"></slot>
+      </div>
+      <div class="tabs__panels">
+        <slot name="panel"></slot>
+      </div>
+    `;
+  }
+
+  constructor() {
+    super();
+    this.selectedIndex = 0;
+  }
+
+  firstUpdated() {
+    super.firstUpdated();
+    this.__setupSlots();
+  }
+
+  __setupSlots() {
+    const tabSlot = this.shadowRoot.querySelector('slot[name=tab]');
+    const handleSlotChange = () => {
+      this.__cleanStore();
+      this.__setupStore();
+      this.__updateSelected();
+    };
+    tabSlot.addEventListener('slotchange', handleSlotChange);
+  }
+
+  __setupStore() {
+    this.__store = [];
+    const buttons = this.querySelectorAll('[slot="tab"]');
+    const panels = this.querySelectorAll('[slot="panel"]');
+    if (buttons.length !== panels.length) {
+      // eslint-disable-next-line no-console
+      console.warn(
+        `The amount of tabs (${buttons.length}) doesn't match the amount of panels (${panels.length}).`,
+      );
+    }
+
+    buttons.forEach((button, index) => {
+      const uid = uuid();
+      const panel = panels[index];
+      const entry = {
+        uid,
+        button,
+        panel,
+        clickHandler: this.__createButtonClickHandler(index),
+        keydownHandler: this.__handleButtonKeydown.bind(this),
+      };
+      setupPanel({ element: entry.panel, ...entry });
+      setupButton({ element: entry.button, ...entry });
+      deselectPanel(entry.panel);
+      deselectButton(entry.button);
+      this.__store.push(entry);
+    });
+  }
+
+  __cleanStore() {
+    if (!this.__store) {
+      return;
+    }
+    this.__store.forEach(entry => {
+      cleanButton(entry.button, entry.clickHandler, entry.keydownHandler);
+    });
+  }
+
+  __createButtonClickHandler(index) {
+    return () => {
+      this.selectedIndex = index;
+    };
+  }
+
+  __handleButtonKeydown(e) {
+    switch (e.key) {
+      case 'ArrowDown':
+      case 'ArrowRight':
+        e.preventDefault();
+        if (this.selectedIndex + 1 >= this._pairCount) {
+          this.selectedIndex = 0;
+        } else {
+          this.selectedIndex += 1;
+        }
+        break;
+      case 'ArrowUp':
+      case 'ArrowLeft':
+        e.preventDefault();
+        if (this.selectedIndex <= 0) {
+          this.selectedIndex = this._pairCount - 1;
+        } else {
+          this.selectedIndex -= 1;
+        }
+        break;
+      case 'Home':
+        e.preventDefault();
+        this.selectedIndex = 0;
+        break;
+      case 'End':
+        e.preventDefault();
+        this.selectedIndex = this._pairCount - 1;
+        break;
+      /* no default */
+    }
+  }
+
+  set selectedIndex(value) {
+    const stale = this.__selectedIndex;
+    this.__selectedIndex = value;
+    this.__updateSelected();
+    this.dispatchEvent(new Event('selected-changed'));
+    this.requestUpdate('selectedIndex', stale);
+  }
+
+  get selectedIndex() {
+    return this.__selectedIndex;
+  }
+
+  get _pairCount() {
+    return this.__store.length;
+  }
+
+  __updateSelected() {
+    if (!(this.__store && this.__store[this.selectedIndex])) {
+      return;
+    }
+    const previousButton = this.querySelector('[slot="tab"][selected]');
+    const previousPanel = this.querySelector('[slot="panel"][selected]');
+    if (previousButton) {
+      deselectButton(previousButton);
+    }
+    if (previousPanel) {
+      deselectPanel(previousPanel);
+    }
+    const { button: currentButton, panel: currentPanel } = this.__store[this.selectedIndex];
+    if (currentButton) {
+      selectButton(currentButton);
+    }
+    if (currentPanel) {
+      selectPanel(currentPanel);
+    }
+  }
+}