new formatting

Netcentric · Sep 1, 2023 · 37d515e · 37d515e
1 parent a1cc1a1
commit 37d515e
Show file tree

Hide file tree

Showing 2 changed files with 60 additions and 24 deletions.
diff --git a/blocks/v2-columns/v2-columns.css b/blocks/v2-columns/v2-columns.css
@@ -4,6 +4,10 @@
   align-items: center;
 }
 
+.v2-columns.image-last {
+  flex-direction: column-reverse;
+}
+
 .v2-columns__image,
 .v2-columns-content {
   max-width: 343px;
@@ -17,14 +21,14 @@
   padding: 40px 0;
 }
 
-.v2-columns-content .v2-columns-content__eyebrow {
+.v2-columns-content .v2-columns-content__pretitle {
   font-family: var(--ff-accents-regular);
   font-size: var(--accent-2-font-size);
   line-height: var(--accent-2-line-height);
   margin: 0;
 }
 
-.v2-columns-content .v2-columns-content__headline {
+.v2-columns-content .v2-columns-content__heading {
   font-size: var(--headline-1-font-size);
   line-height: var(--headline-1-line-height);
   letter-spacing: var(--headline-1-letter-spacing);
@@ -40,6 +44,10 @@
   margin: 0;
 }
 
+.v2-columns-content a.button:last-of-type {
+  margin: 0 0 10px;
+}
+
 @media (min-width: 744px) {
   .v2-columns {
     flex-direction: row;
@@ -48,17 +56,29 @@
     column-gap: 56px;
   }
 
+  .v2-columns.image-last {
+    flex-direction: row-reverse;
+  }
+
+  .v2-columns.info {
+    flex-direction: column;
+  }
+
   .v2-columns-content,
   .v2-columns__image {
     width: 50%;
     padding: 0;
   }
 
-  .v2-columns-content .v2-columns-content__headline {
+  .v2-columns-content .v2-columns-content__heading {
     margin: 24px 0 12px;
   }
 
   .v2-columns-content .v2-columns-content__body {
     margin: 0 0 24px;
   }
+
+  .v2-columns-content a.button:last-of-type {
+    margin: 10px 0 0;
+  }
 }
diff --git a/blocks/v2-columns/v2-columns.js b/blocks/v2-columns/v2-columns.js
@@ -1,30 +1,46 @@
-import { readBlockConfig } from '../../scripts/lib-franklin.js';
-import { getTextLabel, createElement } from '../../scripts/common.js';
-
-const ctaText = getTextLabel('learn more');
+import { createElement } from '../../scripts/common.js';
 
 export default async function decorate(block) {
+  const blockName = 'v2-columns';
+  const columnsImage = createElement('div', { classes: `${blockName}__image` });
+  const columnsText = createElement('div', { classes: `${blockName}-content` });
+
+  const columns = [...block.querySelector(':scope > div').children];
+
+  const imageFirst = columns[0].querySelector('picture');
+  block.classList.add(`image-${imageFirst ? 'first' : 'last'}`);
+
   const picture = block.querySelector('picture');
-  const blockConfig = readBlockConfig(block);
-  const [, eyebrow, headline, body, link] = Object.values(blockConfig);
-
-  const columnsImage = createElement('div', { classes: 'v2-columns__image' });
-  const columnsText = createElement('div', { classes: 'v2-columns-content' });
-
-  const eyebrowElmt = createElement('p', { classes: 'v2-columns-content__eyebrow' });
-  eyebrowElmt.textContent = eyebrow;
-  const headlineElmt = createElement('h2', { classes: 'v2-columns-content__headline' });
-  headlineElmt.textContent = headline;
-  const bodyElmt = createElement('p', { classes: 'v2-columns-content__body' });
-  bodyElmt.textContent = body;
-  const ctaElmt = createElement('a', {
-    classes: ['button', 'button--large', 'button--primary'],
-    props: { type: 'button', href: link },
+
+  const allTextElmts = block.querySelectorAll('p');
+  const bodyElmts = [];
+
+  allTextElmts.forEach((e) => {
+    const nextElmt = e.nextElementSibling;
+
+    const isButton = [...e.classList].includes('button-container');
+    const isPretitle = nextElmt?.tagName.toLowerCase()[0] === 'h';
+
+    if (!isPretitle && !isButton) bodyElmts.push(e);
   });
-  ctaElmt.textContent = ctaText;
+  bodyElmts.forEach((e) => e.classList.add(`${blockName}-content__body`));
+
+  const buttons = [...block.querySelectorAll('a')];
+  buttons.forEach((btn) => btn.classList.add('button', 'button--large', 'button--primary'));
+
+  const headings = [...block.querySelectorAll('h1, h2, h3, h4, h5, h6')];
+  headings.forEach((heading) => heading.classList.add(`${blockName}-content__heading`));
+
+  const pretitleText = headings[0].previousElementSibling;
+
+  if (pretitleText) {
+    const pretitle = createElement('span', { classes: `${blockName}-content__pretitle` });
+    pretitle.textContent = pretitleText.textContent;
+    columnsText.append(pretitle);
+  }
 
   columnsImage.appendChild(picture);
-  columnsText.append(eyebrowElmt, headlineElmt, bodyElmt, ctaElmt);
+  columnsText.append(...headings, ...bodyElmts, ...buttons);
 
   block.textContent = '';
   block.append(columnsImage, columnsText);