Added network-item block, modified horizontal tabs hero

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

@@ -4,11 +4,12 @@ main .hero-horizontal-tabs-wrapper {
 
 main .hero-horizontal-tabs.block {
   display: flex;
-  flex-direction: column;
+  flex-direction: column-reverse;
+  margin-bottom: 5rem;
 }
 
-main .hero-horiz-tabs-panel {
-  position: relative;
+main div.tab-item.hidden {
+  display: none;
 }
 
 main .hero-horiz-tabs-text {
@@ -55,36 +56,36 @@ main .hero-horiz-tabs-img picture > img {
   min-width: 100%;
 }
 
-main .hero-horizontal-tabs nav {
-  position: absolute;
-  bottom: 0;
-  left: 1rem;
+main .hero-horizontal-tabs ul {
+  list-style: none;
   display: flex;
+  align-items: flex-end;
 }
 
-main .hero-horizontal-tabs nav a {
+main .hero-horizontal-tabs ul button {
   background-color: var(--transparent-blue-light-color);
   padding: 11px 16px;
-  color: var(--link-color);
+  color: var(--light-black);
   border-left: 1px solid #d9dfe2;
   font-size: var(--body-font-size-s);
-  font-weight: var(--font-weight-bold);
+  font-weight: var(--font-weight-medium);
+  border-radius: 0;
 }
 
-main .hero-horizontal-tabs nav a:hover {
+main .hero-horizontal-tabs ul button:hover {
   text-decoration: none;
   background-color: white;
   color: var(--primary);
 }
 
-main .hero-horizontal-tabs nav a.current {
+main .hero-horizontal-tabs ul button.current {
   background-color: white;
   color: var(--primary);
 }
 
 @media (min-width:62rem) {
   main .hero-horizontal-tabs.block {
-    flex-direction: row;
+    flex-direction: column-reverse;
     max-width: 872px;
   }
 
@@ -107,13 +108,11 @@ main .hero-horizontal-tabs nav a.current {
     height: 400px;
   }
 
-  main .hero-horizontal-tabs nav {
-    position: absolute;
-    bottom: 0;
-    left: 0;
+  main .hero-horizontal-tabs ul {
+    position: relative;
   }
 
-  main .hero-horizontal-tabs nav a {
+  main .hero-horizontal-tabs ul button {
     font-size: var(--body-font-size-l);
     font-weight: var(--font-weight-regular);
     padding: 16px 32px 18px;

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

@@ -1,47 +1,121 @@
 import { getNamedValueFromTable } from '../../scripts/scripts.js';
 
-function normalizeURL(url) {
-  if (url.endsWith('/')) {
-    return url;
+export function createTabs($block) {
+  const $ul = $block.querySelector('ul');
+  if (!$ul) {
+    return null;
   }
-  return url.concat('/');
-}
+  /** @type TabInfo[] */
+  const tabs = [...$ul.querySelectorAll('li')].map(($li) => {
+    const title = $li.textContent;
+    const name = title.toLowerCase().trim();
+    return {
+      title,
+      name,
+      $tab: $li,
+    };
+  });
+  const panel = document.createElement('div');
+  panel.classList.add('hero-horiz-tabs-panel');
+  panel.appendChild($ul);
+  // move $ul below section div
+  $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();
+    /** @type TabInfo */
+    const tab = tabs.find((t) => t.name === name);
+    if (tab) {
+      const sectionWrapper = document.createElement('div');
 
-function getImage(block) {
-  const div = getNamedValueFromTable(block, 'Image');
-  div.classList.add('hero-horiz-tabs-img');
-  return div;
-}
 
-export function getTabs(block, curLocation) {
-  const tabs = document.createElement('nav');
-  const div = getNamedValueFromTable(block, 'tabs');
+      [...$tabContent.classList].forEach((c) => {
+        sectionWrapper.classList.add(c);
+      });
 
-  div.querySelectorAll('ul > li > a').forEach((a) => {
-    if (normalizeURL(a.href) === normalizeURL(curLocation.href)) {
-      a.classList.add('current');
+      sectionWrapper.classList.add();
+      const $el = document.createElement('div');
+      $el.classList.add('tab-item');
+      $el.append(...$tabContent.children);
+      $el.classList.add('hidden');
+      sectionWrapper.append($el);
+      $container.insertBefore(sectionWrapper, $wrapper);
+      $tabContent.remove();
+      tab.$content = $el;
     }
-    tabs.appendChild(a);
   });
   return tabs;
 }
 
+function getImage(block) {
+  const div = getNamedValueFromTable(block, 'Image');
+  if (!div) return null;
+  div.classList.add('hero-horiz-tabs-img');
+  return div;
+}
+
 function getText(block) {
   const div = getNamedValueFromTable(block, 'Contents');
+  if (!div) return null;
   div.classList.add('hero-horiz-tabs-text');
   return div;
 }
 
-export default async function decorate(block, curLocation = window.location) {
-  const text = getText(block);
-  const image = getImage(block);
-  const tabs = getTabs(block, curLocation);
+export default function decorate($block) {
+  const image = getImage($block);
+  const text = getText($block);
+  const tabs = createTabs($block);
+
+  // move the tab riders in front
+  const $wrapper = $block.parentElement;
+  const $container = $wrapper.parentElement;
+  $container.insertBefore($wrapper, $container.firstElementChild);
+
+  tabs.forEach((tab, index) => {
+    const $button = document.createElement('button');
+    const { $tab, title, name } = tab;
+    $button.textContent = title.split(',');
+    $button.classList.add('tab');
+
+    $tab.replaceChildren($button);
 
-  const leftDiv = document.createElement('div');
-  leftDiv.classList.add('hero-horiz-tabs-panel');
-  leftDiv.append(text);
-  leftDiv.append(tabs);
+    $tab.addEventListener('click', () => {
+      const $activeButton = $block.querySelector('button.active');
+
+      if ($activeButton !== $tab) {
+        $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
+        $tab.classList.add('active');
+
+        tabs.forEach((t) => {
+          if (name === t.name) {
+            t.$content.classList.remove('hidden');
+          } else {
+            t.$content.classList.add('hidden');
+          }
+        });
+      }
+    });
+
+    if (index === 0) {
+      $button.classList.add('active');
+      // add active class to parent li
+      $tab.classList.add('active');
+      tab.$content.classList.remove('hidden');
+      tab.$content.classList.add('active');
+    }
+  });
 
-  block.replaceChildren(leftDiv);
-  block.append(image);
+  if (text) $block.append(text);
+  if (image) $block.append(image);
 }

blocks/horizontal-list/horizontal-list.css

@@ -0,0 +1,64 @@
+/* Horizontal List */
+.horizontal-list ul {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+}
+
+.horizontal-list.careers-tags ul {
+    font-size: var(--body-font-size-xs);
+}
+
+.horizontal-list li {
+    display: inline-block;
+    margin-right: 1rem;
+    text-align: center;
+}
+
+.horizontal-list li::before {
+    display: inline-block;
+    content: '';
+    background: inherit;
+    background-color: var(--text-color);
+    height: 12px;
+    width: 12px;
+    margin-right: 4px;
+    border-radius: 50%;
+}
+
+.horizontal-list.careers-tags li.blue {
+    color: #009CBD;/*oral care*/
+}
+
+.horizontal-list.careers-tags li.yellow {
+    color: #D9AB41; /*safety mobility*/
+}
+
+.horizontal-list.careers-tags li.orange {
+    color: #F87C56; /*health beauty*/
+}
+
+.horizontal-list.careers-tags li.green {
+    color: #00A499; /*living environment*/
+}
+
+.horizontal-list.careers-tags li.green::before {
+    background-color: #00A499; /*living environment*/
+}
+
+.horizontal-list.careers-tags li.blue::before {
+    background-color: #009CBD; /*oral care*/
+}
+
+.horizontal-list.careers-tags li.yellow::before {
+    background-color: #D9AB41; /*safety mobility*/
+}
+
+.horizontal-list.careers-tags li.orange::before {
+    background-color: #F87C56; /*health beauty*/
+}
+
+.horizontal-list li:last-child {
+    margin-right: 0;
+}

blocks/horizontal-list/horizontal-list.js

@@ -0,0 +1,24 @@
+export default function decorate(block) {
+    const list = block.children[0].children[0].children[0];
+
+    addCareerColors(block, list);
+
+    block.replaceChildren(list);
+};
+
+function addCareerColors(block, list) {
+    if (block.classList.contains('careers-tags')) {
+        const listItems = [...list.children];
+        listItems.forEach((x) => {
+            if (x.innerText === 'Oral Care') {
+                x.classList.add('blue');
+            } else if (x.innerText === 'Safety & Mobility') {
+                x.classList.add('yellow');
+            } else if (x.innerText === 'Living Environment') {
+                x.classList.add('green');
+            } else if (x.innerText === 'Health & Beauty') {
+                x.classList.add('orange');
+            }
+        });
+    }
+}

blocks/link/link.css

@@ -10,3 +10,10 @@
   left: 0.3rem;
   top: 0.05rem;
 }
+
+.link.block.arrow a::after {
+  content: url("../../icons/angle-right-blue.svg");
+  position:relative;
+  left: 0.3rem;
+  top: 0.5rem;
+}