Merge pull request #164 from hlxsites/feature/hero-banner-issues

Hero banner refactor to support all content

blocks/herobanner/herobanner.css

@@ -1,80 +1,40 @@
-.hero-banner {
-    position: relative;
-    width: 100%;
-    height: 480px;
-    opacity: 1;
-    transition-duration: 0ms;
-    background-size: cover;
+.module.split-bg::before {
+    background-image: url('../../icons/about-pattern.png');
 }
 
-.hero-banner.right-content .arrow {
-    position: absolute;
-    zoom: 1;
-    background: url('//1769030.fs1.hubspotusercontent-na1.net/hubfs/1769030/aldevron_template/about-pattern.png') 0 50% no-repeat;
-    background-size: cover;
-    height: 100%;
-    right: 0;
-    top: 0;
-    width: 50%;
-}
-
-.hero-banner picture * {
-    height: 100%;
-}
-
-.hero-banner .content {
-    position: absolute;
-    right: 140px;
-    z-index: 30;
-    top: 30px;
-    width: 25%;
-    text-align: left;
-    padding: 70px 40px 40px 5px;
-    margin: auto;
-}
-
-.hero-banner .content .title, .hero-banner .content .description {
+.herobanner .content .title, .hero-banner .content .description, p {
     color: #fff;
     font: normal 16px/1.45 'Proxima Nova A',Helvetica,sans-serif;
-    letter-spacing: 1px;
-    padding: 0 0 15px;
-}
-
-.hero-banner .content .title {
-    font-family: Brown-Ald,Helvetica,Arial,sans-serif;
-    font-weight: 700;
-    font-size: 30px;
-    letter-spacing: -.02em;
-    line-height: normal;
-    margin: 0;
-    padding: 0 0 0.5em;
-}
-
-.hero-banner .content .description {
-    font: normal 16px/1.45 'Proxima Nova A',Helvetica,sans-serif;
-    font-size: 14px;
-    font-weight: 400;
-    line-height: 23.2px;
-    text-align: left;
-    padding: 0.6em 0;
+    padding: 15px 0;
 }
 
-.hero-banner .content .button {
-    font-weight: 400;
-    line-height: 18px;
-    font-size: 18px;
-    border: 1px solid #fff;
-    font-family: Brown-Ald,Helvetica,Arial,sans-serif;
-    transition: background .3s;
+.herobanner h1, .herobanner h2, .herobanner h3, .herobanner h4, .herobanner h5, .herobanner h6 {
+    color: #fff;
+    padding: 0 0 15px;
 }
 
-.content .button {
+.herobanner .content .button {
     background: transparent;
     border: 1px solid #fff;
     color: #fff;
 }
 
 
-button{
+.herobanner button{
     font: normal 16px/1.45 'Proxima Nova A',Helvetica,sans-serif;
 }
+
+@media (max-width: 1024px) {
+    .herobanner h1, .herobanner h2, .herobanner h3, .herobanner h4, .herobanner h5, .herobanner h6 {
+        padding: 0;
+    }
+}
+
+@media (max-width: 767px) {
+    .module.wide-section .outer {
+        background-image: url('../../icons/about-pattern.png');
+        background-position: 100% 50%;
+        background-repeat: no-repeat;
+        background-size: auto 130%;
+    }
+}

blocks/herobanner/herobanner.js

@@ -1,39 +1,16 @@
 export default function decorate(block) {
-  const clonedBlock = block.cloneNode(true);
-  const paras = block.querySelectorAll('p');
-  const pictureElement = clonedBlock.querySelector('picture');
+  const imageContaner = block.children[0];
   const moduleDiv = document.createElement('div');
   moduleDiv.classList.add('module', 'mmg-rich-columns', 'padding-all', 'custom-bg', 'bg', 'wide-section', 'split-bg', 'style-standard');
-  moduleDiv.style.backgroundColor = '#fff';
-  moduleDiv.style.backgroundImage = `url(${pictureElement.querySelector('img').src})`;
+  moduleDiv.style.backgroundImage = `url(${imageContaner.querySelector('img').src})`;
+  const contentContainer = block.children[1];
   const outDiv = document.createElement('div');
   outDiv.classList.add('outer');
   const contentDiv = document.createElement('div');
   contentDiv.classList.add('content');
   outDiv.append(contentDiv);
-  const colWithCtaDiv = document.createElement('div');
-  colWithCtaDiv.classList.add('col', 'with-cta');
-  contentDiv.append(colWithCtaDiv);
-  const textDiv = document.createElement('div');
-  textDiv.classList.add('text');
-  colWithCtaDiv.append(textDiv);
-  const h2 = document.createElement('h2');
-  h2.classList.add('title');
-  h2.textContent = paras[0].textContent;
-  textDiv.append(h2);
-  const p = document.createElement('p');
-  const span = document.createElement('span');
-  textDiv.append(p);
-  p.append(span);
-  const text1 = paras[1];
-  span.textContent = text1.textContent;
-  const p2 = document.createElement('p');
-  p2.classList.add('actions');
-  const anchorTag = block.querySelector('p.button-container a');
-  anchorTag.removeAttribute('title');
-  p2.append(anchorTag);
-  textDiv.append(p2);
-  moduleDiv.append(outDiv);
+  contentDiv.appendChild(contentContainer);
+  moduleDiv.appendChild(outDiv);
   block.textContent = '';
-  block.append(moduleDiv);
+  block.appendChild(moduleDiv);
 }

scripts/aem.js

@@ -411,7 +411,6 @@ function capitalizeWords(str) {
  */
 function decorateButtons(element) {
   element.querySelectorAll('a').forEach((a) => {
-    a.title = a.title || a.textContent;
     if (a.href !== a.textContent) {
       const up = a.parentElement;
       const twoup = a.parentElement.parentElement;

styles/styles_2020.css

@@ -242,7 +242,6 @@
 }
 
 .module.split-bg::before {
-  background: url('//1769030.fs1.hubspotusercontent-na1.net/hubfs/1769030/aldevron_template/about-pattern.png') 0 50% no-repeat;
   background-size: auto 100%;
   content: "";
   height: 100%;
@@ -906,11 +905,6 @@
       content: none
   }
 
-  .module.split-bg .outer {
-      background: url('//1769030.fs1.hubspotusercontent-na1.net/hubfs/1769030/aldevron_template/about-pattern.png') 100% 50% no-repeat;
-      background-size: auto 130%
-  }
-
   .module.custom-bg.split-bg::after {
       display: block;
       height: auto;