From c2f4696943309cacc9cf40976951d18895286d40 Mon Sep 17 00:00:00 2001 From: Ryan Parrish Date: Wed, 18 Sep 2024 03:16:43 -0600 Subject: [PATCH] MWPW-157024 - Editorial card authoring refinement for the 'open' variant. (#2853) * updated authoring experience for 'open' card so they support 3 rows and expects no background * pass false as defat func bool && early return * fixed test 404 and example for open 3 rows --- libs/blocks/editorial-card/editorial-card.js | 49 +++++++++++++------- test/blocks/editorial-card/mocks/body.html | 48 +++++++++++++++---- 2 files changed, 69 insertions(+), 28 deletions(-) diff --git a/libs/blocks/editorial-card/editorial-card.js b/libs/blocks/editorial-card/editorial-card.js index 166b5c1211..931b17e8e8 100644 --- a/libs/blocks/editorial-card/editorial-card.js +++ b/libs/blocks/editorial-card/editorial-card.js @@ -57,14 +57,15 @@ const decorateForeground = async (el, rows) => { }); }; -const decorateBgRow = (el, background) => { - decorateBlockBg(el, background); +const decorateBgRow = (el, background, remove = false) => { const rows = background.querySelectorAll(':scope > div'); const bgRowsEmpty = [...rows].every((row) => row.innerHTML.trim() === ''); - if (bgRowsEmpty) { + if (bgRowsEmpty || remove) { el.classList.add('no-bg'); background.remove(); + return; } + decorateBlockBg(el, background); }; function handleClickableCard(el) { @@ -80,38 +81,50 @@ function handleClickableCard(el) { const init = async (el) => { el.classList.add('con-block'); - if (el.className.includes('open')) { - el.classList.add('no-border', 'l-rounded-corners-image', 'static-links-copy'); - } - if (el.className.includes('rounded-corners')) { - loadStyle(`${base}/styles/rounded-corners.css`); - } + const hasOpenClass = el.className.includes('open'); + if (hasOpenClass) el.classList.add('no-border', 'l-rounded-corners-image', 'static-links-copy'); + if (el.className.includes('rounded-corners')) loadStyle(`${base}/styles/rounded-corners.css`); if (![...el.classList].some((c) => c.endsWith('-lockup'))) el.classList.add('m-lockup'); let rows = el.querySelectorAll(':scope > div'); const [head, middle, ...tail] = rows; if (rows.length === 4) el.classList.add('equal-height'); if (rows.length >= 1) { - const count = rows.length >= 3 ? 'three-plus' : rows.length; + const count = rows.length >= 4 ? 'four-plus' : rows.length; switch (count) { - case 'three-plus': - // 3+ rows (0:bg, 1:media, 2:copy, ...3:static, last:card-footer) - decorateBgRow(el, head); + case 'four-plus': + // 4+ rows (0:bg, 1:media, 2:copy, ...3:static, last:card-footer) + // 4+ rows.open (0:bg[removed], 1:media, 2:copy, ...3:static, last:card-footer) + decorateBgRow(el, head, hasOpenClass); rows = tail; - await decorateForeground(el, rows); decorateMedia(el, middle); + await decorateForeground(el, rows); + break; + case 3: + // 3 rows (0:bg, 1:media, last:copy) + // 3 rows.open (0:media, 1:copy, last:card-footer) + if (hasOpenClass) { + el.classList.add('no-bg'); + rows = [middle, tail[0]]; + decorateMedia(el, head); + } else { + rows = tail; + decorateBgRow(el, head); + decorateMedia(el, middle); + } + await decorateForeground(el, rows); break; case 2: // 2 rows (0:media, 1:copy) - rows = middle; - await decorateForeground(el, [rows]); + rows = [middle]; decorateMedia(el, head); el.classList.add('no-bg'); + await decorateForeground(el, rows); break; case 1: // 1 row (0:copy) - rows = head; - await decorateForeground(el, [rows]); + rows = [head]; el.classList.add('no-bg', 'no-media'); + await decorateForeground(el, rows); break; default: } diff --git a/test/blocks/editorial-card/mocks/body.html b/test/blocks/editorial-card/mocks/body.html index 9ed3c148d5..e27494c07b 100644 --- a/test/blocks/editorial-card/mocks/body.html +++ b/test/blocks/editorial-card/mocks/body.html @@ -25,8 +25,8 @@

2 Row - [media, copy]

-
@@ -45,10 +45,7 @@

3 Row - [bg, media, copy]

- - - - +
@@ -89,12 +86,12 @@

Variants: open, click w/ lockup content

- +
- +
https://main--milo--adobecom.hlx.page/media_13a2002b9279a0df970ee999ad8dd54c4b2a7244d.mp4#_hoverplay
@@ -102,7 +99,38 @@

Variants: open, click w/ lockup content

- + + Lockup +

+

per-breakpoint media - mobile image, tablet image, desktop video

+

Open
'no-border', 'l-rounded-corners-image', 'static-links-copy', 'underline-links-footer'

+ +

Editorial Card (static links copy) Static link

+

TODO: the footer should have its own footer-static-links variant

+
+
+
+
Learn More Watch the Video another link
+
+
+
+
+
+ + + +
+
+ + + +
+
https://main--milo--adobecom.hlx.page/media_13a2002b9279a0df970ee999ad8dd54c4b2a7244d.mp4#_hoverplay
+
+
+
+

+ Lockup

per-breakpoint media - mobile image, tablet image, desktop video

@@ -125,7 +153,7 @@

Empty footer row and extra static row

- +