Merge pull request #111 from emulsify-ds/69-tabs

feat(69): tabs

src/components/lists/_list.scss

@@ -1,7 +1,7 @@
 ul {
   @include list-reset;
 
-  line-height: var(--line-heights-normal);
+  line-height: var(--line-height-normal);
   margin-bottom: var(--spacing-lg);
   padding-left: var(--spacing-lg);
   list-style-type: disc;
@@ -10,7 +10,7 @@ ul {
 ol {
   @include list-reset;
 
-  line-height: var(--line-heights-normal);
+  line-height: var(--line-height-normal);
   margin-bottom: var(--spacing-lg);
   padding-left: var(--spacing-lg);
   list-style-type: decimal;

src/components/tabs/_tab.scss

@@ -0,0 +1,32 @@
+.tabs__link,
+.tabs__link--local-tasks {
+  background-color: var(--tabs-color-bg-default);
+  border-bottom: var(--size-md) solid var(--tabs-color-bg-default);
+  color: var(--tabs-color-text-default);
+  display: block;
+  font-family: var(--font-family-body);
+  font-size: var(--font-size-h5);
+  font-weight: var(--font-weight-primary-bold);
+  padding: var(--spacing-md) var(--spacing-xl);
+  text-align: center;
+  text-decoration: none;
+  transition: color 0.3s;
+
+  @include large {
+    display: inline-block;
+    position: relative;
+    top: var(--spacing-md);
+    width: auto;
+  }
+
+  &:hover {
+    background-color: var(--tabs-color-bg-hover);
+    color: var(--tabs-color-text-hover);
+  }
+
+  &.is-active {
+    background-color: var(--tabs-color-bg-active);
+    border-color: var(--tabs-color-text-active);
+    color: var(--tabs-color-text-active);
+  }
+}

src/components/tabs/_tab.twig

@@ -0,0 +1,38 @@
+{#
+/**
+ * @file
+ * Theme override for a local task link.
+ *
+ * Available variables:
+ * - attributes: HTML attributes for the wrapper element.
+ * - is_active: Whether the task item is an active tab.
+ * - link: A rendered link element.
+ *
+ * Note: This template renders the content for each task item in
+ * menu-local-tasks.html.twig.
+ *
+ * @see template_preprocess_menu_local_task()
+ */
+#}
+{%
+  set link_classes = [
+    is_active ? 'is-active' : '',
+    'tabs__link--local-tasks'
+  ]
+%}
+
+{# if Storybook atoms example, add ul wrapper #}
+{% if example %}
+<ul class="tabs__nav">
+{% endif %}
+<li{{ attributes }}>
+  {# Detect if Drupal #}
+  {% if attributes %}
+    {{ link(link['#title'], link['#url'], { 'class' : link_classes }) }}
+  {% else %}
+    <a href="{{ tab_link }}" class="tabs__link tabs__link--local-tasks{% if key == 0 %} is-active{% endif %}">{{ tab_text }}</a>
+  {% endif %}
+</li>
+{% if example %}
+</ul>
+{% endif %}

src/components/tabs/_tabs.scss

@@ -0,0 +1,37 @@
+/* Tab Navigation */
+.tabs__nav {
+  @include list-reset;
+
+  border-bottom: 1px solid var(--tabs-color-border-bottom);
+  padding-bottom: var(--spacing-md);
+
+  @include large {
+    display: flex;
+  }
+}
+
+/* Tab Content (hidden only in full #tabs js version) */
+.tabs__tab {
+  display: none;
+
+  &.is-active {
+    display: block;
+  }
+}
+
+.tabs__content {
+  padding: 1.5rem;
+}
+
+/* No-js fallback */
+.tabs.no-js {
+  .tabs__tab.is-active {
+    display: block;
+  }
+}
+
+/* Drupal Local Tasks variant */
+.tabs__nav--local-tasks {
+  margin: var(--spacing-lg) 0 var(--spacing-md);
+  padding: 0;
+}

src/components/tabs/tabs.js

@@ -0,0 +1,59 @@
+Drupal.behaviors.tabs = {
+  attach(context) {
+    const el = context.querySelectorAll('.tabs');
+    const tabNavigationLinks = context.querySelectorAll('.tabs__link');
+    const tabContentContainers = context.querySelectorAll('.tabs__tab');
+    let activeIndex = 0;
+
+    /**
+     * goToTab
+     *
+     * @description Goes to a specific tab based on index. Returns nothing.
+     * @param {number} index The index of the tab to go to
+     */
+    function goToTab(index) {
+      if (
+        index !== activeIndex &&
+        index >= 0 &&
+        index <= tabNavigationLinks.length
+      ) {
+        tabNavigationLinks[Number(activeIndex)].classList.remove('is-active');
+        tabNavigationLinks[Number(index)].classList.add('is-active');
+        tabContentContainers[Number(activeIndex)].classList.remove('is-active');
+        tabContentContainers[Number(index)].classList.add('is-active');
+        activeIndex = index;
+      }
+    }
+
+    /**
+     * handleClick
+     *
+     * @description Handles click event listeners on each of the links in the
+     *   tab navigation. Returns nothing.
+     * @param {HTMLElement} link The link to listen for events on
+     * @param {number} index The index of that link
+     */
+    function handleClick(link, index) {
+      link.addEventListener('click', (e) => {
+        e.preventDefault();
+        goToTab(index);
+      });
+    }
+
+    /**
+     * init
+     *
+     * @description Initializes the component by removing the no-js class from
+     *   the component, and attaching event listeners to each of the nav items.
+     *   Returns nothing.
+     */
+    for (let e = 0; e < el.length; e += 1) {
+      el[Number(e)].classList.remove('no-js');
+    }
+
+    for (let i = 0; i < tabNavigationLinks.length; i += 1) {
+      const link = tabNavigationLinks[Number(i)];
+      handleClick(link, i);
+    }
+  },
+};

src/components/tabs/tabs.stories.js

@@ -0,0 +1,12 @@
+import tabsTwig from './tabs.twig';
+
+import tabData from './tabs.yml';
+
+import './tabs';
+
+/**
+ * Storybook Definition.
+ */
+export default { title: 'Components/Tabs' };
+
+export const tabs = () => tabsTwig(tabData);

src/components/tabs/tabs.twig

@@ -0,0 +1,45 @@
+{#
+/**
+ * @file
+ * Theme override to display primary and secondary local tasks.
+ *
+ * Available variables:
+ * - primary: HTML list items representing primary tasks.
+ * - secondary: HTML list items representing primary tasks.
+ *
+ * Each item in these variables (primary and secondary) can be individually
+ * themed in menu-local-task.html.twig.
+ */
+#}
+
+{# Drupal Specific #}
+{% if primary %}
+  <h2 class="visually-hidden">{{ 'Primary tabs'|t }}</h2>
+  <ul class="tabs__nav tabs__nav--local-tasks">{{ primary }}</ul>
+{% endif %}
+{% if secondary %}
+  <h2 class="visually-hidden">{{ 'Secondary tabs'|t }}</h2>
+  <ul>{{ secondary }}</ul>
+{% endif %}
+
+{# Component Library Specific (javascript version) #}
+{% if not primary %}
+{{ attach_library('emulsify/tabs') }}
+  <div id="tabs" class="tabs no-js">
+    <ul class="tabs__nav">
+      {% for key, tab in tabs %}
+        {% include "@components/tabs/_tab.twig" with {
+          tab_link: "#tab-" ~ key,
+          tab_text: tab.tab_text,
+        } %}
+      {% endfor %}
+    </ul>
+    {% for key, tab in tabs %}
+      <div class="tabs__tab{% if key == 0 %} is-active{% endif %}">
+        <div id="tab-{{ key }}" class="tabs__content">
+          <p>{{ tab.tab_content }}</p>
+        </div>
+      </div>
+    {% endfor %}
+  </div>
+{% endif %}

src/components/tabs/tabs.yml

@@ -0,0 +1,7 @@
+tabs:
+  - tab_text: 'Tab 1'
+    tab_content: 'Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.'
+  - tab_text: 'Tab 2'
+    tab_content: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.'
+  - tab_text: 'Tab 3'
+    tab_content: 'Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.'

src/components/tokens/_tokens.scss

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 27 Sep 2023 15:20:31 GMT
+ * Generated on Fri, 29 Sep 2023 21:08:29 GMT
  */
 
 :root {
@@ -11,18 +11,13 @@
   --text-field-border-width: 1px;
   --text-field-radius: 0.625rem;
   --text-field-border: [object Object];
+  --tabs-color-bg-default: #ffffff;
   --tabs-color-bg-active: #ffffff;
-  --tabs-color-bg-hover: #a9afb1;
-  --tabs-color-bg-inactive: #d4d7d8;
-  --tabs-color-text-default: #192125;
-  --tabs-color-text-hover: #192125;
-  --tabs-border: [object Object];
-  --tabs-padding-x: 1rem;
-  --tabs-padding-x-hover: 1rem;
-  --tabs-padding-x-focus: 1rem;
-  --tabs-padding-y: 0.5rem;
-  --tabs-padding-y-hover: 0.5rem;
-  --tabs-padding-y-focus: 0.5rem;
+  --tabs-color-bg-hover: #ffffff;
+  --tabs-color-text-default: #00202e;
+  --tabs-color-text-active: #0080b7;
+  --tabs-color-text-hover: #33b2e9;
+  --tabs-color-border-bottom: #a9afb1;
   --tab-label: [object Object];
   --table-color-cell-bg: #ffffff;
   --table-color-cell-bg-stripe: #9ce1ff;

src/tokens/figma.tokens.json

@@ -2073,6 +2073,10 @@
             "value": "{color.link}",
             "type": "color"
           }
+        },
+        "border-bottom": {
+          "value": "{color.grays.300}",
+          "type": "color"
         }
       }
     },

src/tokens/transformed.tokens.json

@@ -40,61 +40,36 @@
   "tabs": {
     "color": {
       "bg": {
-        "active": {
+        "default": {
           "value": "#ffffff",
           "type": "color"
         },
-        "hover": {
-          "value": "#a9afb1",
+        "active": {
+          "value": "#ffffff",
           "type": "color"
         },
-        "inactive": {
-          "value": "#d4d7d8",
+        "hover": {
+          "value": "#ffffff",
           "type": "color"
         }
       },
       "text": {
         "default": {
-          "value": "#192125",
+          "value": "#00202e",
+          "type": "color"
+        },
+        "active": {
+          "value": "#0080b7",
           "type": "color"
         },
         "hover": {
-          "value": "#192125",
+          "value": "#33b2e9",
           "type": "color"
         }
-      }
-    },
-    "border": {
-      "value": {
-        "color": "#a9afb1",
-        "width": 1
       },
-      "type": "border"
-    },
-    "padding": {
-      "x": {
-        "value": 16,
-        "type": "spacing"
-      },
-      "x-hover": {
-        "value": 16,
-        "type": "spacing"
-      },
-      "x-focus": {
-        "value": 16,
-        "type": "spacing"
-      },
-      "y": {
-        "value": 8,
-        "type": "spacing"
-      },
-      "y-hover": {
-        "value": 8,
-        "type": "spacing"
-      },
-      "y-focus": {
-        "value": 8,
-        "type": "spacing"
+      "border-bottom": {
+        "value": "#a9afb1",
+        "type": "color"
       }
     }
   },