Merge pull request #15 from aemsites/action

feat: action columns variant

Author: fkakatie

blocks/columns/columns.css

@@ -106,6 +106,36 @@
   }
 }
 
+/* action variant */
+.columns.action .action-wrapper .button {
+  width: 100%;
+}
+
+.columns.action .body-wrapper h1::after,
+.columns.action .body-wrapper h2::after,
+.columns.action .body-wrapper h3::after,
+.columns.action .body-wrapper h4::after,
+.columns.action .body-wrapper h5::after,
+.columns.action .body-wrapper h6::after {
+  content: none;
+}
+
+@media (width >= 600px) {
+  .columns.action > div {
+    display: flex;
+  }
+
+  .columns.action .action-wrapper {
+    flex: 0 0 max-content;
+    align-self: self-end;
+  }
+
+  .columns.action .action-wrapper .button {
+    width: unset;
+    min-width: 200px;
+  }
+}
+
 /* portrait variant */
 .columns.portrait .media-wrapper {
   min-height: unset;

blocks/columns/columns.js

@@ -24,6 +24,29 @@ function optimizeImages(block) {
   });
 }
 
+/**
+ * Marks body-only blocks whose last column is links-only with `action` and `action-wrapper`.
+ * @param {Element} block The columns block element
+ */
+function detectAction(block) {
+  const rows = [...block.children];
+  if (!rows.length) return;
+  const matches = rows.every((row) => {
+    const cols = [...row.children];
+    if (cols.some((col) => col.classList.contains('media-wrapper'))) return false;
+    const last = cols[cols.length - 1];
+    return [...last.children].every(
+      (el) => el.tagName === 'P' && el.children.length === 1 && el.firstElementChild.tagName === 'A',
+    );
+  });
+  if (!matches) return;
+  block.classList.add('action');
+  rows.forEach((row) => {
+    const last = row.children[row.children.length - 1];
+    last.classList.replace('body-wrapper', 'action-wrapper');
+  });
+}
+
 /** @param {Element} block */
 export default function decorate(block) {
   [...block.children].forEach((row) => {
@@ -35,6 +58,8 @@ export default function decorate(block) {
     if (row.querySelector('.media-wrapper')) row.dataset.row = 'media';
   });
 
+  detectAction(block);
+
   const colCount = getColCount(block);
   if (colCount && ![...block.classList].some((c) => c.startsWith('cols-'))) {
     block.classList.add(`cols-${colCount}`);

styles/styles.css

@@ -531,6 +531,38 @@ main > .section.dark:has(+ .section.dark) {
   margin-bottom: 0;
 }
 
+main .section.dark a.button.primary,
+main .section.dark button.button.primary {
+  border-color: var(--color-bg);
+  background-color: var(--color-bg);
+  color: var(--color-text);
+}
+
+main .section.dark a.button.primary:hover,
+main .section.dark a.button.primary:focus-visible,
+main .section.dark button.button.primary:hover,
+main .section.dark button.button.primary:focus-visible {
+  border-color: var(--color-bg-light);
+  background-color: var(--color-bg-light);
+  color: var(--color-muted);
+}
+
+main .section.dark a.button.secondary,
+main .section.dark button.button.secondary {
+  border-color: var(--color-bg);
+  background-color: transparent;
+  color: var(--color-bg);
+}
+
+main .section.dark a.button.secondary:hover,
+main .section.dark a.button.secondary:focus-visible,
+main .section.dark button.button.secondary:hover,
+main .section.dark button.button.secondary:focus-visible {
+  border-color: var(--color-bg-light);
+  background-color: transparent;
+  color: var(--color-bg-light);
+}
+
 @media (width >= 900px) {
   main .section.light,
   main .section.dark {

tools/import/transform-page.js

@@ -341,7 +341,7 @@ function carouselBlock($car) {
   return `<div class="carousel">${rows.join("")}</div>`;
 }
 
-// teaser--banner -> default content (heading/text/CTA) for a dedicated dark section
+// teaser--banner -> columns block (heading+text | CTA) for a dedicated dark section
 function bannerSectionContent($t) {
   const h = $t.find(".teaserHeading").first().text().trim();
   const seen = new Set();
@@ -351,9 +351,11 @@ function bannerSectionContent($t) {
     if (t && !/^\d{4}-\d{2}-\d{2}$/.test(t) && !seen.has(t)) { seen.add(t); ps.push(t); }
   });
   const cta = teaserCTA($t);
-  const parts = [`<h2>${h}</h2>`, ...ps.map((p) => `<p>${p}</p>`)];
-  if (cta && cta.text) parts.push(`<p><a href="${cta.href}">${cta.text}</a></p>`);
-  return parts.join("");
+  const textCol = [`<h2>${h}</h2>`, ...ps.map((p) => `<p>${p}</p>`)].join("");
+  if (cta && cta.text) {
+    return `<div class="columns"><div><div>${textCol}</div><div><p><a href="${cta.href}">${cta.text}</a></p></div></div></div>`;
+  }
+  return textCol;
 }
 
 // multimedia / media-youtube slider -> default content: