tabs-basic-component

packages/kaizen-basic-components/molecules/tabs/_m-tabs.css

@@ -0,0 +1,90 @@
+%m-tabs {
+  &--hidden {
+    display: none;
+  }
+
+  &__border {
+    position: absolute;
+    z-index: 1;
+    bottom: 0;
+    display: block;
+    width: 100%;
+    height: 2px;
+    content: "";
+    background-color: var(--color-border);
+  }
+
+  &__inner {
+    position: relative;
+    display: flex;
+    overflow-x: auto;
+    overflow-y: hidden;
+    flex-wrap: nowrap;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    border: 0;
+  }
+
+  &__item {
+    flex: 0 0 auto;
+    margin-right: 19px;
+
+    &--last {
+      margin-right: 0;
+    }
+  }
+
+  &__link {
+    position: relative;
+    display: block;
+    padding: 18px 29px;
+    text-decoration: none;
+    color: var(--color-text);
+    border: 0;
+    border-radius: 0;
+    background-color: var(--color-primary-3);
+    font-size: var(--font-size--base);
+    line-height: var(--line-height--xxxxs);
+
+    &--hover {
+      color: var(--color-primary);
+      border: 0;
+
+      @db l {
+        background-color: var(--color-primary-3);
+      }
+    }
+
+    &--focus {
+      outline: none;
+    }
+
+    &--active {
+      z-index: 2;
+    }
+  }
+
+  &__link-border {
+    position: absolute;
+    bottom: 1px;
+    left: 0;
+    display: block;
+    width: 100%;
+    height: 2px;
+    content: "";
+    transition: all 0.5s ease;
+    background: linear-gradient(to left, var(--color-border) 50%, var(--color-primary-2) 50%);
+    background-position: right bottom;
+    background-size: 200% 100%;
+
+    &--active {
+      background-position: left bottom;
+    }
+  }
+
+  &__content {
+    visibility: visible;
+    overflow-y: auto;
+  }
+}

packages/kaizen-basic-components/molecules/tabs/_variables.css

@@ -0,0 +1,106 @@
+/* Variables just for example. */
+
+:root {
+  --color-primary: #0e4e95;
+  --color-primary-2: #126ae1;
+  --color-primary-3: #f3f7fa;
+  --color-primary-4: #566069;
+  --color-primary-5: #29b9e8;
+  --color-secondary: #43b0b1;
+  --color-secondary-2: #56ccf2;
+  --color-secondary-3: #f26f21;
+  --color-secondary-4: #c52254;
+  --color-secondary-5: #f2f2f2;
+
+  /* Not pallet colors */
+  --color-secondary-6: #008dbf;
+  --color-secondary-7: #e4e4e4;
+  --color-black: #000;
+  --color-white: #fff;
+  --color-border: var(--color-secondary-7);
+
+  /* Disabled colors */
+  --color-primary-disabled: #a1d7d8;
+  --color-secondary-disabled: #88b4f0;
+  --color-bg: var(--color-white);
+  --color-text: var(--color-primary-4);
+  --color-disabled: var(--color-primary-4); /* old #8ca6c7 */
+  --color-disabled-bg: var(--color-secondary-5); /* old #f3f6f9 */
+  --window-height: 100vh;
+  --base-root-font-mobile: 4.278vw; /* Mobile design width is 375px, so everything below should be scaled proportionally */
+  --root-font-size--default: 100%;
+  --root-font-size--medium: calc(16 * (1vw / 14.4));
+  --root-font-size--large: calc(16 * (1vw / 14.4)); /* 16 on 1440 and 21.3 on 1920 */
+  /* font-sizes */
+  --font-size--xxxxxl: 48px;
+  --font-size--xxxxl: 40px;
+  --font-size--xxxl: 36px;
+  --font-size--xxl: 30px;
+  --font-size--xl: 24px;
+  --font-size--m: 20px;
+  --font-size--l: 18px;
+  --font-size--base: 16px;
+  --font-size--s: 14px;
+  --font-size--xs: 13px;
+  --font-size--xxs: 12px;
+  --font-size--xxxs: 11px;
+  /* font families */
+  --font-family--base: "Ubuntu", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
+  /* font-weight */
+  --font-weight--base: var(--font-weight--regular);
+  --font-weight--regular: 400;
+  --font-weight--medium: 500;
+  --font-weight--bold: 700;
+  /* line height */
+  --line-height--xxxxl: 2.25;
+  --line-height--xxxl: 2;
+  --line-height--xxl: 1.75;
+  --line-height--xl: 1.7;
+  --line-height--l: 1.6;
+  --line-height--base: 1.5;
+  --line-height--s: 1.385;
+  --line-height--xs: 1.333;
+  --line-height--xxs: 1.25;
+  --line-height--xxxm: 1.14;
+  --line-height--xxxs: 1.1667;
+  --line-height--xxxxs: 1;
+  /* letter-spacing */
+  --letter-spacing--xl: 1.4px;
+  --letter-spacing--l: 0.05rem; /* 0.8px */
+  --letter-spacing--s: 0.04063rem; /* 0.65px */
+  /* site sizes */
+  --site-max-width: 1920px; /* 1920px */
+  --content-max-width: 1264px; /* 1216px + 48 padding */
+  --content-max-width--mobile: 768px;
+  --content-max-width--w: 1488px;
+  --content-max-width--ls: 1056px; /* 1008px + 48 padding */
+  --content-max-width--s: 53rem; /* 800px + 48 padding */
+  --content-max-width--xs: 46.5rem;
+  --mobile-header-height: 64px;
+  --desktop-sticky-main-menu-height: 59px;
+  /* container */
+  --container-padding: 24px;
+  /* z-index */
+  --z-index-header: 500;
+  --z-index-header-bottom: 510;
+  --z-index-header-top: 515;
+  --z-index-sticky: 520;
+  --z-index-modal: 600;
+  --z-index-selects: 700;
+  --z-index-dialog-overlay: 799;
+  --z-index-dialog: 800;
+  /* transitions */
+  --transition-duration: 0.3s;
+  --transition-timing-function: ease;
+  --transition-hover: var(--transition-duration) var(--transition-timing-function);
+  --transition-collapse: var(--transition-duration) var(--transition-timing-function);
+  /* border-radius */
+  --border-radius-circle: 50%;
+  --border-radius-xl: 8px;
+  --border-radius-base: 4px;
+  --border-radius-s: 3px;
+  --border-radius-xs: 2px;
+  /* other */
+  --input-height: 48px;
+  --input-secondary-height: 48px;
+}

packages/kaizen-basic-components/molecules/tabs/m-tabs.html.twig

@@ -0,0 +1,22 @@
+<div class="m-tabs {{ modifier_class }}" data-tabs>
+  <ul class="m-tabs__inner">
+    {% for tab in tabs %}
+      {# <li> - Is important for the functionality #}
+      <li class="m-tabs__item">
+        <a class="m-tabs__link" {{ tab.active }} href="#{{ tab.id }}">
+          {{ tab.tabName }}
+        </a>
+      </li>
+    {% endfor %}
+  </ul>
+</div>
+<div class="m-tabs__content-wrapper">
+  {% for tab in tabs %}
+    <h3  class="m-tabs__header">
+      {{ tab.tabName }}
+    </h3>
+    <div class="m-tabs__content" id="{{ tab.id }}">
+      <div>{{ tab.tabContent }}</div>
+    </div>
+  {% endfor %}
+</div>

packages/kaizen-basic-components/molecules/tabs/m-tabs.js

@@ -0,0 +1,24 @@
+/**
+ * @file
+ * This is component script template.
+ */
+import Tabby from 'tabbyjs/dist/js/tabby.polyfills';
+
+const generateUniqueId = (tab) => {
+  const tabId = tab.getAttribute('id');
+  return tabId || Date.now() + Math.floor(Math.random() * 10000);
+};
+
+export default ({ className = 'm-tabs', context = document } = {}) => {
+  context
+    .querySelectorAll(`.${className}:not(.tabs-processed)`)
+    .forEach((tab) => {
+      const uniqueId = generateUniqueId(tab);
+      tab.setAttribute('data-tabs', uniqueId);
+      // eslint-disable-next-line no-unused-vars
+      const tabs = new Tabby(`[data-tabs="${uniqueId}"]`);
+      // uncomment next line if need to share tabs instance to control it outside.
+      // tab.tabbyInstance = tabs;
+      tab.classList.add('tabs-processed');
+    });
+};

packages/kaizen-basic-components/molecules/tabs/m-tabs.json

@@ -0,0 +1,20 @@
+{
+  "tabs": [
+    {
+      "id": "m-tabs-tab1",
+      "active": "data-tabby-default",
+      "tabName": "Gravida volutpat.",
+      "tabContent": "Dis alias, qui do nostra, eum? Hac architecto magni, reprehenderit."
+    },
+    {
+      "id": "m-tabs-tab2",
+      "tabName": "Odio rhoncus.",
+      "tabContent": "Iste debitis tincidunt quos platea ab fugiat hendrerit proident mi."
+    },
+    {
+      "id": "m-tabs-tab3",
+      "tabName": "Arcu eget ut.",
+      "tabContent": "Ullamco ridiculus blanditiis? Donec, nihil posuere, tempore, minus! Numquam possimus."
+    }
+  ]
+}

packages/kaizen-basic-components/molecules/tabs/m-tabs.md

@@ -0,0 +1,3 @@
+# Molecule / Tabs
+
+Tabs component

packages/kaizen-basic-components/molecules/tabs/m-tabs.stories.js

@@ -0,0 +1,33 @@
+import './_variables.css';
+import './tabs.css';
+import { useEffect } from '@storybook/client-api';
+import componentNotes from './m-tabs.md';
+import tabs from './m-tabs';
+
+const template = require('./m-tabs.html.twig');
+const data = require('./m-tabs.json');
+
+// Uncomment next 2 lines if your templates contains {{ attibutes.addClass(...)
+// }} or similar logic. import drupalAttribute from 'drupal-attribute';
+// data.attributes = new drupalAttribute();
+
+const component = {
+  title: 'molecules/tabs',
+};
+
+if (componentNotes.length) {
+  component.parameters = { notes: componentNotes };
+}
+
+export default component;
+
+export const basic = (args = {}) => {
+  data.tabs = args.tabs ? args.tabs : data.tabs;
+  useEffect(() => {
+    tabs();
+  }, []);
+  return template({
+    ...data,
+    ...args,
+  });
+};

packages/kaizen-basic-components/molecules/tabs/package.json

@@ -0,0 +1,9 @@
+{
+  "name": "@themetest/components",
+  "version": "1.0.0",
+  "main": "index.js",
+  "license": "MIT",
+  "dependencies": {
+    "tabbyjs": "^12.0.3"
+  }
+}

packages/kaizen-basic-components/molecules/tabs/tabs.css

@@ -0,0 +1,58 @@
+@import "_m-tabs";
+
+.m-tabs {
+  &::after {
+    @extend %m-tabs__border;
+  }
+
+  &__inner {
+    @extend %m-tabs__inner;
+  }
+
+  &__item {
+    @extend %m-tabs__item;
+
+    &--last {
+      @extend %m-tabs__item--last;
+    }
+  }
+
+  &__link {
+    &[role=tab] {
+      @extend %m-tabs__link;
+
+      &::before {
+        @extend %m-tabs__link-border;
+      }
+
+      &:hover:not([aria-selected=true]) {
+        @extend %m-tabs__link--hover;
+      }
+
+      &:focus {
+        @extend %m-tabs__link--focus;
+      }
+
+      &[aria-selected=true] {
+        @extend %m-tabs__link--hover;
+        @extend %m-tabs__link--active;
+
+        &::before {
+          @extend %m-tabs__link-border--active;
+        }
+      }
+    }
+  }
+
+  &__content {
+    @extend %m-tabs__content;
+  }
+
+  &__header {
+    @extend %m-tabs__header;
+  }
+
+  [hidden] {
+    @extend %m-tabs--hidden;
+  }
+}