Merge pull request #24 from Netcentric/KAW-7936-Title-component

KAW-7936 wire up title component

blocks/title/title.css

@@ -0,0 +1,62 @@
+.title {
+    padding-top: 40px;
+    padding-bottom: 60px;
+    max-width: 616px;
+    display: flex;
+    flex-flow: column;
+    gap: 12px;
+}
+
+.heading {
+    margin: 0;
+
+    strong {
+        font-weight: normal;
+        color: var(--text-red);
+    }
+}
+
+.title.line {
+    padding-top: 80px;
+    padding-bottom: 40px;
+    align-items: center;
+}
+
+.vertical-line-wrapper {
+    height: 80px;
+    width: 2px;
+    align-items: flex-end;
+    display: flex;
+}
+
+.vertical-line {
+    height: 20px;
+    width: 2px;
+    background-color: var(--text-red);
+}
+
+.vertical-line.animate {
+    height: 80px;
+    transition: height 5s ease-in-out;
+}
+
+@media (width >= 768px) {
+    .title {
+        max-width: 784px;
+        padding-top: 60px;
+        padding-bottom: 60px;
+    }
+
+    .title.line {
+        padding-top: 120px;
+        padding-bottom: 60px;
+    }
+}
+
+@media (width >= 1024px) {
+    .title {
+        max-width: 924px;
+        padding-top: 80px;
+        padding-bottom: 120px;
+    }
+}

blocks/title/title.js

@@ -0,0 +1,31 @@
+import { unwrapDivs, adjustPretitle } from '../../scripts/helpers.js';
+
+export default async function decorate(block) {
+  unwrapDivs(block);
+  adjustPretitle(block);
+
+  const headings = block.querySelectorAll('h1, h2, h3, h4, h5, h6');
+  [...headings].forEach((heading) => heading.classList.add('heading'));
+
+  const isLineVariant = block.classList.contains('line');
+
+  if (isLineVariant) {
+    const lineEle = document.createElement('div');
+    lineEle.classList.add('vertical-line-wrapper');
+    const innerEle = document.createElement('div');
+    innerEle.classList.add('vertical-line');
+    lineEle.appendChild(innerEle);
+    block.prepend(lineEle);
+
+    const observer = new IntersectionObserver((entries) => {
+      entries.forEach((entry) => {
+        if (entry.isIntersecting) {
+          innerEle.classList.add('animate');
+        } else {
+          innerEle.classList.remove('animate');
+        }
+      });
+    });
+    observer.observe(block);
+  }
+}

scripts/helpers.js

@@ -69,3 +69,57 @@ export function addTitleAttributeToIconLink(element) {
     element.setAttribute('title', iconElement.getAttribute('data-icon-name'));
   }
 }
+
+export const adjustPretitle = (element) => {
+  const headingSelector = 'h1, h2, h3, h4, h5, h6';
+
+  [...element.querySelectorAll(headingSelector)].forEach((heading) => {
+    const isNextElHeading = heading.nextElementSibling?.matches(headingSelector);
+
+    if (!isNextElHeading) {
+      return;
+    }
+
+    const currentLevel = Number(heading.tagName[1]);
+    const nextElLevel = Number(heading.nextElementSibling.tagName[1]);
+
+    if (currentLevel > nextElLevel) {
+      const pretitle = document.createElement('span');
+      pretitle.classList.add('pretitle');
+      pretitle.append(...heading.childNodes);
+
+      heading.replaceWith(pretitle);
+    }
+  });
+};
+
+export const unwrapDivs = (element, options = {}) => {
+  const stack = [element];
+  const { ignoreDataAlign = false } = options;
+
+  while (stack.length > 0) {
+    const currentElement = stack.pop();
+
+    let i = 0;
+    while (i < currentElement.children.length) {
+      const node = currentElement.children[i];
+      const attributesLength = [...node.attributes].filter((el) => {
+        if (ignoreDataAlign) {
+          return !(el.name.startsWith('data-align') || el.name.startsWith('data-valign'));
+        }
+
+        return el;
+      }).length;
+
+      if (node.tagName === 'DIV' && attributesLength === 0) {
+        while (node.firstChild) {
+          currentElement.insertBefore(node.firstChild, node);
+        }
+        node.remove();
+      } else {
+        stack.push(node);
+        i += 1;
+      }
+    }
+  }
+};

styles/styles.css

@@ -45,6 +45,7 @@
   --error: #b81f2d;
 
   /* old variables */
+  --text-red: var(--action-default);
   --link-color: var(--action-default);
   --link-hover-color: var(--action-hover);
   --c-primary-white: var(--white);
@@ -108,7 +109,7 @@ h6,
 
 h1,
 .h1 {
-  font-size: 2.25rem;
+  font-size: 2.875rem;
   font-style: normal;
   font-weight: 500;
   line-height: 140%;
@@ -160,15 +161,15 @@ h6,
   letter-spacing: 0.15px;
 }
 
-@media (width >= 768px) {
+@media (width >= 1025px) {
   h1,
   .h1 {
-    font-size: 2.5rem;
+    font-size: 3.75rem;
   }
 
   h2,
   .h2 {
-    font-size: 2.25rem;
+    font-size: 2.5rem;
   }
 
   h3,
@@ -192,7 +193,7 @@ h6,
   }
 }
 
-@media (width >= 1024px) {
+@media (width >= 1440px) {
   h1,
   .h1 {
     font-size: 4.375rem;