From f7254e046df545aea266e2d1be52f6ec5352ed15 Mon Sep 17 00:00:00 2001
From: Lakshmishri <lakshmi.shri.v.a@gmail.com>
Date: Wed, 11 Sep 2024 09:51:06 +0200
Subject: [PATCH] KAW-7936 wire up title component

---
 blocks/title/title.css | 62 ++++++++++++++++++++++++++++++++++++++++++
 blocks/title/title.js  | 31 +++++++++++++++++++++
 scripts/helpers.js     | 54 ++++++++++++++++++++++++++++++++++++
 styles/styles.css      | 11 ++++----
 4 files changed, 153 insertions(+), 5 deletions(-)
 create mode 100644 blocks/title/title.css
 create mode 100644 blocks/title/title.js

diff --git a/blocks/title/title.css b/blocks/title/title.css
new file mode 100644
index 0000000..210af2d
--- /dev/null
+++ b/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;
+    }
+}
\ No newline at end of file
diff --git a/blocks/title/title.js b/blocks/title/title.js
new file mode 100644
index 0000000..46d4122
--- /dev/null
+++ b/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);
+  }
+}
diff --git a/scripts/helpers.js b/scripts/helpers.js
index 999bb65..99494cb 100644
--- a/scripts/helpers.js
+++ b/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;
+      }
+    }
+  }
+};
diff --git a/styles/styles.css b/styles/styles.css
index 2620f91..2ea9594 100644
--- a/styles/styles.css
+++ b/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;