Merge pull request #173 from hlxsites/hero-headline

Hero headline
hlxsites · Jan 17, 2024 · 927eab2 · 927eab2
2 parents fd9a8ba + f389372
commit 927eab2
Show file tree

Hide file tree

Showing 2 changed files with 64 additions and 1 deletion.
diff --git a/blocks/hero/hero.css b/blocks/hero/hero.css
@@ -82,6 +82,30 @@ main .section.full-width > .hero-wrapper {
   color: var(--white);
 }
 
+.hero.block > .row > .headline {
+  color: var(--white);
+  font-size: var(--body-font-size-m);
+  line-height: 23px;
+  padding-left: 16px;
+}
+
+.hero.block > .row > .headline > .title {
+  letter-spacing: 1.38px;
+  text-transform: uppercase;
+  margin-bottom: 5px;
+}
+
+.hero.block > .row > .headline > .desc {
+  letter-spacing: 1.38px;
+  margin-bottom: 5px;
+}
+
+.hero.block > .row > .headline a {
+  background-color: transparent;
+  border: 1px solid var(--white);
+  color: var(--white);
+}
+
 @media screen and (min-width: 600px) {
   .hero.block {
     height: 620px;
@@ -113,5 +137,18 @@ main .section.full-width > .hero-wrapper {
   .hero.block > div {
     margin-top: 100px;
   }
-}
 
+  .hero.block > .row {
+    display: flex;
+  }
+
+  .hero.block > .row > .content {
+    flex: 2;
+  }
+
+  .hero.block > .row > .headline {
+    flex: 1;
+    margin-top: 150px;
+    margin-left: 20px;
+  }
+}
diff --git a/blocks/hero/hero.js b/blocks/hero/hero.js
@@ -56,8 +56,34 @@ export default async function decorate(block) {
     }
   }
 
+  const headline = block.querySelectorAll('div.hero > div > div');
+  const validInnerHtml = new Set(['headline', 'description', 'cta']);
+  const filteredList = Array.from(headline)
+    .filter((node) => validInnerHtml.has(node.innerHTML.trim().toLowerCase()));
+
+  const headlineWrapper = document.createElement('div');
+  if (filteredList.length) {
+    headlineWrapper.classList.add('headline');
+    filteredList.forEach((div) => {
+      const nextElement = div.nextElementSibling;
+      if (div.innerHTML.toLowerCase() === 'headline') nextElement.classList.add('title');
+      else if (div.innerHTML.toLowerCase() === 'description') nextElement.classList.add('desc');
+      else if (div.innerHTML.toLowerCase() === 'cta') {
+        const button = document.createElement('p');
+        button.innerHTML = nextElement.innerHTML;
+        button.classList.add('button-container');
+        div.parentNode.replaceChild(button, nextElement);
+      }
+      headlineWrapper.append(nextElement);
+    });
+  }
+
   const wrapper = document.createElement('div');
   wrapper.append(images, contentWrapper);
+  if (headlineWrapper.hasChildNodes()) {
+    wrapper.classList.add('row');
+    wrapper.append(headlineWrapper);
+  }
   block.replaceChildren(wrapper);
 
   if (pictures.length > 1) {