Added tabs block, added transition

blocks/hero-horizontal-tabs/hero-horizontal-tabs.css

@@ -31,11 +31,11 @@ main .hero-horizontal-tabs.block {
 }
 
 main div.tab-item {
-  display: none;
+  animation: fade-out 0ms linear forwards;
 }
 
 main div.tab-item.active {
-  display: block;
+  animation: fade-in 0.15s linear forwards;
 }
 
 main .hero-horiz-tabs-text {

blocks/hero-horizontal-tabs/hero-horizontal-tabs.js

@@ -11,63 +11,7 @@
  */
 
 import { getNamedValueFromTable } from '../../scripts/scripts.js';
-
-export function createTabs(block, text) {
-  const ul = block.querySelector('ul');
-  if (!ul) return null;
-
-  const tabs = [...ul.querySelectorAll('li')].map((li) => {
-    const title = li.textContent;
-    const name = title.toLowerCase().trim();
-    return {
-      title,
-      name,
-      tabButton: li,
-    };
-  });
-
-  const panel = document.createElement('div');
-  panel.classList.add('hero-horiz-tabs-panel');
-  if (text) panel.appendChild(text);
-
-  const nav = document.createElement('nav');
-  nav.classList.add('hero-horiz-tabs-nav');
-
-  nav.replaceChildren(ul);
-  panel.appendChild(nav);
-  block.replaceChildren(panel);
-
-  // search referenced sections and move them inside the tab-container
-  const wrapper = block.parentElement;
-  const container = wrapper.parentElement;
-  const sections = document.querySelectorAll('[data-tab]');
-
-  // move the tab's sections before the tab riders.
-  [...sections].forEach((tabContent) => {
-    const name = tabContent.dataset.tab.toLowerCase().trim();
-
-    const tab = tabs.find((t) => t.name === name);
-    if (tab) {
-      const sectionWrapper = document.createElement('div');
-
-      // copy the classes from the section to the wrapper
-      [...tabContent.classList].forEach((c) => {
-        sectionWrapper.classList.add(c);
-      });
-
-      const tabDiv = document.createElement('div');
-      tabDiv.classList.add('tab-item');
-      tabDiv.append(...tabContent.children);
-      sectionWrapper.append(tabDiv);
-      container.insertBefore(sectionWrapper, wrapper);
-
-      // remove it from the dom
-      tabContent.remove();
-      tab.content = tabDiv;
-    }
-  });
-  return tabs;
-}
+import { createTabs, addTabs } from '../../scripts/blocks-utils.js';
 
 function getImage(block) {
   const div = getNamedValueFromTable(block, 'Image');
@@ -93,44 +37,7 @@ export default function decorate(block) {
   const container = wrapper.parentElement;
   container.insertBefore(wrapper, container.firstElementChild);
 
-  tabs.forEach((tab, index) => {
-    const button = document.createElement('button');
-    const { tabButton, title, name } = tab;
-    button.textContent = title.split(',');
-    button.classList.add('tab');
-
-    tabButton.replaceChildren(button);
-
-    tabButton.addEventListener('click', () => {
-      const activeButton = block.querySelector('button.active');
-
-      if (activeButton !== tabButton) {
-        activeButton.classList.remove('active');
-        // remove active class from parent li
-        activeButton.parentElement.classList.remove('active');
-        button.classList.add('active');
-        // add active class to parent li
-        tabButton.classList.add('active');
-
-        tabs.forEach((t) => {
-          if (name === t.name) {
-            t.content.classList.add('active');
-          } else {
-            t.content.classList.remove('active');
-          }
-        });
-      }
-    });
-
-    if (index === 0) {
-      button.classList.add('active');
-      // add active class to parent li
-      tabButton.classList.add('active');
-      if (tab.content) {
-        tab.content.classList.add('active');
-      }
-    }
-  });
+  addTabs(tabs, block);
 
   if (image) {
     block.append(image);

blocks/network-item/network-item.css

@@ -155,9 +155,9 @@ div.network-item div.our-hr a::after,
 div.network-item.image div.text-content-wrapper div.website a::after,
 div.network-item.video div.text-content-wrapper div.website a::after{
     content: url("../../icons/angle-right-blue.svg");
-    position:relative;
+    position: relative;
+    top: 0.1rem;
     left: 0.3rem;
-    top: 0.5rem;
 }
 
 @media screen and (max-width: 62rem) {

blocks/tabs/tabs.css

@@ -0,0 +1,81 @@
+.tabs {
+    --tabs-per-row: 3;
+}
+
+main .tabs {
+    position: relative;
+    margin-bottom: 3rem;
+    padding-left: 0;
+}
+
+main div.tab-item:not(.active) {
+    animation: fade-out 0ms linear forwards;
+
+}
+
+main div.tab-item.active {
+    animation: fade-in 0.15s linear forwards;
+}
+
+main .tabs nav ul {
+    list-style: none;
+    display: flex;
+    text-wrap: nowrap;
+    flex-wrap: wrap;
+    border-bottom: 1px solid var(--transparent-grey-light-color);
+}
+
+main .tabs nav ul li {
+    margin-bottom: 0;
+}
+
+main .tabs nav ul li button {
+    width: 6rem;
+    height: 2.5rem;
+    padding: 0.5rem 0;
+    text-align: center;
+    background-color: #f0f5f7;
+    font-weight: var(--font-weight-medium);
+    font-size: var(--body-font-size-m);
+    color: var(--transparent-grey-color-2);
+    border-radius: 0;
+    min-width: auto;
+}
+
+main .tabs nav ul li.active button {
+    color: var(--white);
+    background-color: var(--link-color);
+}
+
+main .tabs nav ul li:hover:not(.active) button {
+    background-color: #cfdfe5;
+}
+
+@media screen and (max-width: 62rem) {
+    main .tabs nav ul {
+        border-bottom: 0;
+    }
+
+    main .tabs nav ul li {
+        width: calc(100% / var(--tabs-per-row));
+        min-width: fit-content;
+    }
+
+    main .tabs nav ul li button {
+        border: 1px solid var(--transparent-grey-light-color);
+        width: 100%;
+    }
+
+    /* 3 === var(--tabs-per-row) */
+    main .tabs nav ul li:nth-child(-n+3) button {
+        border-bottom: none;
+    }
+
+    main .tabs nav ul li:nth-child(1n):not(:nth-child(3n), :last-child) button {
+        border-right: none;
+    }
+
+    main .tabs nav ul li:last-child {
+        width: calc(100% / var(--tabs-per-row) + 1px);
+    }
+}

blocks/tabs/tabs.js

@@ -0,0 +1,12 @@
+import { createTabs, addTabs } from '../../scripts/blocks-utils.js';
+
+export default function decorate(block) {
+  const tabs = createTabs(block);
+  const wrapper = block.parentElement;
+  const container = wrapper.parentElement;
+  container.insertBefore(wrapper, container.firstElementChild);
+
+  addTabs(tabs, block);
+
+  return block;
+}

scripts/blocks-utils.js

@@ -0,0 +1,97 @@
+export function createTabs(block, text) {
+  const ul = block.querySelector('ul');
+  if (!ul) return null;
+
+  const tabs = [...ul.querySelectorAll('li')].map((li) => {
+    const title = li.textContent;
+    const name = title.toLowerCase().trim();
+    return {
+      title,
+      name,
+      tabButton: li,
+    };
+  });
+
+  const panel = document.createElement('div');
+  panel.classList.add('hero-horiz-tabs-panel');
+  if (text) panel.appendChild(text);
+
+  const nav = document.createElement('nav');
+  nav.classList.add('hero-horiz-tabs-nav');
+
+  nav.replaceChildren(ul);
+  panel.appendChild(nav);
+  block.replaceChildren(panel);
+
+  // search referenced sections and move them inside the tab-container
+  const wrapper = block.parentElement;
+  const container = wrapper.parentElement;
+  const sections = document.querySelectorAll('[data-tab]');
+
+  // move the tab's sections before the tab riders.
+  [...sections].forEach((tabContent) => {
+    const name = tabContent.dataset.tab.toLowerCase().trim();
+
+    const tab = tabs.find((t) => t.name === name);
+    if (tab) {
+      const sectionWrapper = document.createElement('div');
+
+      // copy the classes from the section to the wrapper
+      [...tabContent.classList].forEach((c) => {
+        sectionWrapper.classList.add(c);
+      });
+
+      const tabDiv = document.createElement('div');
+      tabDiv.classList.add('tab-item');
+      tabDiv.append(...tabContent.children);
+      sectionWrapper.append(tabDiv);
+      container.insertBefore(sectionWrapper, wrapper);
+
+      // remove it from the dom
+      tabContent.remove();
+      tab.content = tabDiv;
+    }
+  });
+  return tabs;
+}
+
+export function addTabs(tabs, block) {
+  tabs.forEach((tab, index) => {
+    const button = document.createElement('button');
+    const { tabButton, title, name } = tab;
+    button.textContent = title.split(',');
+    button.classList.add('tab');
+
+    tabButton.replaceChildren(button);
+
+    tabButton.addEventListener('click', () => {
+      const activeButton = block.querySelector('button.active');
+
+      if (activeButton !== tabButton) {
+        activeButton.classList.remove('active');
+        // remove active class from parent li
+        activeButton.parentElement.classList.remove('active');
+        button.classList.add('active');
+        // add active class to parent li
+        tabButton.classList.add('active');
+
+        tabs.forEach((t) => {
+          if (name === t.name) {
+            t.content.classList.add('active');
+          } else {
+            t.content.classList.remove('active');
+          }
+        });
+      }
+    });
+
+    if (index === 0) {
+      button.classList.add('active');
+      // add active class to parent li
+      tabButton.classList.add('active');
+      if (tab.content) {
+        tab.content.classList.add('active');
+      }
+    }
+  });
+}