KAW-7941-NBA-component

blocks/nba/nba.css

@@ -0,0 +1,54 @@
+.nba {
+  --row-gap: 40px;
+
+  justify-content: center;
+  align-items: center;
+  padding: 60px 20px;
+}
+
+.nba-text-wrapper {
+  --row-gap: 16px;
+
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+}
+
+.nba-button-wrapper {
+  --row-gap: 24px;
+
+  width: 100%;
+}
+
+.nba .nba-button-wrapper:not(:first-child) {
+  padding-top: 0;
+}
+
+.nba-button-wrapper .icon-arrow-right {
+  height: 24px;
+  width: 24px;
+}
+
+.nba ,
+.nba-button-wrapper,
+.nba-text-wrapper {
+  display: flex;
+  flex-flow: column;
+  gap: var(--row-gap)
+}
+
+.heading {
+  margin-bottom: 0;
+}
+
+@media (width >= 768px) {
+  .nba {
+    padding-top: 80px;
+    padding-bottom: 80px;
+  }
+
+  .nba .nba-button-wrapper {
+    width: auto;
+    flex-flow: row;
+  }
+}

blocks/nba/nba.js

@@ -0,0 +1,33 @@
+import { unwrapDivs } from '../../scripts/helpers.js';
+
+export default async function decorate(block) {
+  const textWrapper = document.createElement('div');
+  textWrapper.classList.add('nba-text-wrapper');
+
+  const headings = block.querySelectorAll('h1, h2, h3, h4, h5, h6');
+  [...headings].forEach((heading) => {
+    heading.classList.add('heading');
+    textWrapper.append(heading);
+  });
+
+  block.querySelectorAll('p').forEach((textEle) => {
+    if (!textEle.children.length) {
+      textWrapper.append(textEle);
+    }
+  });
+  block.prepend(textWrapper);
+
+  const buttonWrapper = document.createElement('div');
+  buttonWrapper.classList.add('nba-button-wrapper');
+  block.querySelectorAll('a').forEach((button, index) => {
+    const buttonClass = index < 1 ? 'primary' : 'secondary';
+    button.classList.add('button', buttonClass);
+    if (button.parentElement.classList.contains('button-container')) {
+      button.parentElement.remove();
+    }
+    buttonWrapper.append(button);
+  });
+  block.append(buttonWrapper);
+
+  unwrapDivs(block);
+}

scripts/helpers.js

@@ -93,25 +93,18 @@ export const adjustPretitle = (element) => {
   });
 };
 
-export const unwrapDivs = (element, options = {}) => {
+export const unwrapDivs = (element) => {
   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;
+      const attributesLength = [...node.attributes].filter((el) => el).length;
 
-      if (node.tagName === 'DIV' && attributesLength === 0) {
+      if (node && attributesLength === 0) {
         while (node.firstChild) {
           currentElement.insertBefore(node.firstChild, node);
         }

styles/styles.css

@@ -57,6 +57,7 @@
 
 .dark {
   background-color: var(--black);
+  color: var(--white);
 }
 
 :root .dark {
@@ -436,8 +437,8 @@ button.secondary.small {
 
 .dark a.button.primary:hover,
 .dark button.primary:hover {
-  color: #ed1c24;
-  border-color: #ed1c24;
+  color: #ae2d27;
+  border-color: #ae2d27;
 }
 
 .dark a.button.primary:focus,