Added network-item block, modified horizontal tabs hero

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

@@ -1,14 +1,39 @@
+/*
+ * Copyright 2023 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
 main .hero-horizontal-tabs-wrapper {
   background-color: var(--primary);
 }
 
+main .hero-horiz-tabs-panel {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  padding-right: 6rem;
+}
+
+main .hero-horiz-tabs-nav {
+  margin-left: 1rem;
+}
+
 main .hero-horizontal-tabs.block {
   display: flex;
   flex-direction: column;
+  margin-bottom: 5rem;
 }
 
-main .hero-horiz-tabs-panel {
-  position: relative;
+main div.tab-item.hidden {
+  display: none;
 }
 
 main .hero-horiz-tabs-text {
@@ -48,40 +73,46 @@ main .hero-horiz-tabs-img picture {
   height: 240px;
 }
 
+main .hero-horizontal-tabs.block.no-image {
+  padding-top: 25%;
+}
+
 main .hero-horiz-tabs-img picture > img {
   object-fit: cover;
   object-position: center;
   max-height: 100%;
   min-width: 100%;
 }
 
-main .hero-horizontal-tabs nav {
-  position: absolute;
-  bottom: 0;
-  left: 1rem;
+main .hero-horizontal-tabs nav ul {
+  list-style: none;
   display: flex;
+  align-items: flex-end;
 }
 
-main .hero-horizontal-tabs nav a {
+main .hero-horizontal-tabs nav 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;
+  min-width: auto;
 }
 
-main .hero-horizontal-tabs nav a:hover {
+main .hero-horizontal-tabs nav button:hover {
   text-decoration: none;
   background-color: white;
   color: var(--primary);
 }
 
-main .hero-horizontal-tabs nav a.current {
+main .hero-horizontal-tabs nav button.current {
   background-color: white;
   color: var(--primary);
 }
 
+
 @media (min-width:62rem) {
   main .hero-horizontal-tabs.block {
     flex-direction: row;
@@ -94,6 +125,10 @@ main .hero-horizontal-tabs nav a.current {
     min-width: 436px;
   }
 
+  main .hero-horiz-tabs-nav {
+    margin-left: 0;
+  }
+
   main .hero-horiz-tabs-text > h6 {
     font-size: var(--heading-font-size-xxs);
   }
@@ -109,15 +144,20 @@ main .hero-horizontal-tabs nav a.current {
 
   main .hero-horizontal-tabs nav {
     position: absolute;
-    bottom: 0;
     left: 0;
+    bottom: 0;
   }
 
-  main .hero-horizontal-tabs nav a {
+  main .hero-horizontal-tabs nav button {
     font-size: var(--body-font-size-l);
     font-weight: var(--font-weight-regular);
     padding: 16px 32px 18px;
   }
+
+  main .hero-horizontal-tabs.block.no-image {
+    height: 400px;
+    padding-top: 0;
+  }
 }
 
 @media (min-width:77rem) {
@@ -148,4 +188,9 @@ main .hero-horizontal-tabs nav a.current {
     width: 897px;
     height: 520px;
   }
+
+  main .hero-horizontal-tabs.block.no-image {
+    height: 520px;
+    padding-top: 0;
+  }
 }

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

@@ -1,47 +1,141 @@
+/*
+ * Copyright 2023 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
 import { getNamedValueFromTable } from '../../scripts/scripts.js';
 
-function normalizeURL(url) {
-  if (url.endsWith('/')) {
-    return url;
-  }
-  return url.concat('/');
-}
+export function createTabs(block, text) {
+  const ul = block.querySelector('ul');
+  if (!ul) return null;
 
-function getImage(block) {
-  const div = getNamedValueFromTable(block, 'Image');
-  div.classList.add('hero-horiz-tabs-img');
-  return div;
-}
+  const tabs = [...ul.querySelectorAll('li')].map((li) => {
+    const title = li.textContent;
+    const name = title.toLowerCase().trim();
+    return {
+      title,
+      name,
+      $tab: li,
+    };
+  });
 
-export function getTabs(block, curLocation) {
-  const tabs = document.createElement('nav');
-  const div = getNamedValueFromTable(block, 'tabs');
+  const panel = document.createElement('div');
+  panel.classList.add('hero-horiz-tabs-panel');
+  if (text) panel.appendChild(text);
 
-  div.querySelectorAll('ul > li > a').forEach((a) => {
-    if (normalizeURL(a.href) === normalizeURL(curLocation.href)) {
-      a.classList.add('current');
+  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);
+      });
+
+      sectionWrapper.classList.add();
+      const tabDiv = document.createElement('div');
+      tabDiv.classList.add('tab-item');
+      tabDiv.append(...tabContent.children);
+      tabDiv.classList.add('hidden');
+      sectionWrapper.append(tabDiv);
+      container.insertBefore(sectionWrapper, wrapper);
+
+      // remove it from the dom
+      tabContent.remove();
+      tab.$content = tabDiv;
     }
-    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);
+export default function decorate(block) {
   const image = getImage(block);
-  const tabs = getTabs(block, curLocation);
+  const text = getText(block);
+  const tabs = createTabs(block, text);
+
+  // 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');
 
-  const leftDiv = document.createElement('div');
-  leftDiv.classList.add('hero-horiz-tabs-panel');
-  leftDiv.append(text);
-  leftDiv.append(tabs);
+    $tab.replaceChildren(button);
 
-  block.replaceChildren(leftDiv);
-  block.append(image);
+    $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');
+      if (tab.$content) tab.$content.classList.remove('hidden');
+    }
+  });
+
+  if (image) {
+    block.append(image);
+  } else {
+    block.classList.add('no-image');
+  }
 }

blocks/horizontal-list/horizontal-list.css

@@ -0,0 +1,43 @@
+/*
+ * Copyright 2023 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+.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: 0.75rem;
+    width: 0.75rem;
+    margin-right: 0.25rem;
+    border-radius: 50%;
+}
+
+.horizontal-list li:last-child {
+    margin-right: 0;
+}

blocks/horizontal-list/horizontal-list.js

@@ -0,0 +1,17 @@
+/*
+ * Copyright 2023 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+export default function decorate(block) {
+  const list = block.children[0].children[0].children[0];
+
+  block.replaceChildren(list);
+}

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;
+}