From f7edd6fd560dde08ee91538158edf7f40ae23a27 Mon Sep 17 00:00:00 2001 From: Megan Thomas Date: Wed, 27 Mar 2024 17:37:40 -0700 Subject: [PATCH 01/11] MWPW-144549 CTA alignment for Text, Icon, and Media Blocks --- libs/blocks/icon-block/icon-block.css | 16 ++++++++++++++ libs/blocks/media/media.css | 32 +++++++++++++++++++++++++++ libs/blocks/text/text.css | 23 ++++++++++++++++++- 3 files changed, 70 insertions(+), 1 deletion(-) diff --git a/libs/blocks/icon-block/icon-block.css b/libs/blocks/icon-block/icon-block.css index 2b50032e0c..e1fe8f3d03 100644 --- a/libs/blocks/icon-block/icon-block.css +++ b/libs/blocks/icon-block/icon-block.css @@ -250,6 +250,10 @@ margin-bottom: 0; } +.section[class*="-up"] .icon-block .action-area { + align-self: end; +} + .icon-block.full-width .foreground .text-content .action-area { justify-content: center; } @@ -298,6 +302,12 @@ margin: unset; } +.section[class*="-up"] .icon-block, +.section[class*="-up"] .icon-block .foreground { + display: flex; + align-self: stretch; +} + [class*="-up"] .icon-block.bio.inline .foreground { max-width: unset; width: unset; @@ -326,6 +336,12 @@ line-height: var(--type-body-m-lh); } +.section[class*="-up"] .icon-block:not(.inline) .foreground > div, +.section[class*="-up"] .icon-block.inline .foreground .second-column { + display: grid; + grid-template-rows: auto auto 1fr; +} + @media screen and (min-width: 600px) and (max-width: 1200px) { .icon-block .foreground .icon-area { max-width: 234px; diff --git a/libs/blocks/media/media.css b/libs/blocks/media/media.css index 0ae3ca5ed8..4943f31597 100644 --- a/libs/blocks/media/media.css +++ b/libs/blocks/media/media.css @@ -254,6 +254,34 @@ div[class*="-up"] .media .foreground > .media-row { height: var(--icon-size-xxl); } +/* Text Alignment */ +.section[class*="-up"] .media, +.section[class*="-up"] .media .foreground { + display: flex; + align-self: stretch; +} + +.section[class*="-up"] .media .foreground > div.media-row { + display: grid; + grid-template-rows: auto 1fr; +} + +.section[class*="-up"] .media .foreground .text { + display: grid; + grid-template-rows: auto auto 1fr; + align-self: stretch; +} + +.section[class*="-up"] .media [class^="heading"], +.section[class*="-up"] .media p, +.section[class*="-up"] .media [class^="body-"] { + margin-bottom: 0; +} + +.section[class*="-up"] .media .action-area { + align-self: end; +} + @media screen and (min-width: 600px) { .media > .foreground .media-row { gap: var(--spacing-m); @@ -318,6 +346,10 @@ div[class*="-up"] .media .foreground > .media-row { .media .icon-stack-area { grid-template-columns: repeat(2, 1fr); } + + .section[class*="-up"] .media .foreground > div.media-row { + gap: 0; + } } @media screen and (min-width: 1200px) { diff --git a/libs/blocks/text/text.css b/libs/blocks/text/text.css index 4fd3abcfa5..81596a12d0 100644 --- a/libs/blocks/text/text.css +++ b/libs/blocks/text/text.css @@ -191,9 +191,30 @@ display: none; } +/* Text Alignment */ +.section[class*="-up"] .text-block, +.section[class*="-up"] .text-block .foreground { + display: flex; + align-self: stretch; +} + +.section[class*="-up"] .text-block .foreground > div { + display: grid; + grid-template-rows: auto auto 1fr; +} + +.section[class*="-up"] .text-block [class^="heading"], +.section[class*="-up"] .text-block p, +.section[class*="-up"] .text-block [class^="body-"] { + margin-bottom: 0; +} + +.section[class*="-up"] .text-block .action-area { + align-self: end; +} + /* Tablet up */ @media screen and (min-width: 600px) { - .inset.text-block .foreground::before { display: none; } From 597e26d708212cbc47a2bc370397c01b8ef29f5b Mon Sep 17 00:00:00 2001 From: Megan Thomas Date: Wed, 3 Apr 2024 15:24:44 -0700 Subject: [PATCH 02/11] redo in flex --- libs/blocks/icon-block/icon-block.css | 41 +++++++++++++++++------- libs/blocks/icon-block/icon-block.js | 12 +++++++ libs/blocks/media/media.css | 46 ++++++++++++++++++--------- libs/blocks/media/media.js | 9 ++++++ libs/blocks/text/text.css | 34 ++++++++++++++------ libs/blocks/text/text.js | 8 ++++- 6 files changed, 112 insertions(+), 38 deletions(-) diff --git a/libs/blocks/icon-block/icon-block.css b/libs/blocks/icon-block/icon-block.css index e1fe8f3d03..492399b10f 100644 --- a/libs/blocks/icon-block/icon-block.css +++ b/libs/blocks/icon-block/icon-block.css @@ -40,7 +40,8 @@ .icon-block .foreground .text-content { display: flex; - flex-wrap: wrap; + /* flex-wrap: wrap; */ + flex-direction: column; /* new */ align-content: center; width: 100%; } @@ -104,10 +105,6 @@ margin-bottom: 0; } -.icon-block.inline .body-s.action-area { - padding-top: 24px; -} - .icon-block.inline .icon-area, .icon-block.inline .icon-area picture img { min-width: var(--icon-size-xxl); @@ -167,6 +164,11 @@ margin: var(--spacing-s) auto var(--spacing-xs) auto; } +.section[class*="-up"] .icon-block .second-column { + display: flex; + flex-direction: column; +} + .icon-block.bio.center .foreground .second-column { margin-top: var(--spacing-s); } @@ -250,6 +252,10 @@ margin-bottom: 0; } +.icon-block .action-area-container .action-area { + width: 100%; +} + .section[class*="-up"] .icon-block .action-area { align-self: end; } @@ -302,10 +308,10 @@ margin: unset; } -.section[class*="-up"] .icon-block, .section[class*="-up"] .icon-block .foreground { display: flex; align-self: stretch; + width: 100%; } [class*="-up"] .icon-block.bio.inline .foreground { @@ -336,10 +342,21 @@ line-height: var(--type-body-m-lh); } -.section[class*="-up"] .icon-block:not(.inline) .foreground > div, -.section[class*="-up"] .icon-block.inline .foreground .second-column { - display: grid; - grid-template-rows: auto auto 1fr; +.section[class*="-up"] .icon-block { + display: flex; + align-self: stretch; +} + +.icon-block .action-area-container { + margin-top: var(--spacing-s); +} + +.section[class*="-up"] .icon-block .action-area-container { + display: flex; + align-items: flex-end; + justify-content: flex-end; + flex-direction: column; + width: 100%; } @media screen and (min-width: 600px) and (max-width: 1200px) { @@ -444,8 +461,8 @@ } .icon-block.vertical .foreground .text-content { - flex-grow: 1; - flex-basis: 0; + /* flex-grow: 1; + flex-basis: 0; */ margin-bottom: 0; } diff --git a/libs/blocks/icon-block/icon-block.js b/libs/blocks/icon-block/icon-block.js index 713f2a4012..206219039f 100644 --- a/libs/blocks/icon-block/icon-block.js +++ b/libs/blocks/icon-block/icon-block.js @@ -14,6 +14,7 @@ * Icon Block - v5.1 */ +import action from '../../utils/action.js'; import { decorateBlockText, getBlockSize } from '../../utils/decorate.js'; import { createTag } from '../../utils/utils.js'; @@ -75,6 +76,17 @@ function decorateContent(el) { if (secondColumn.children.length === 1) el.classList.add('items-center'); el.querySelector('.foreground .text-content').append(secondColumn); } + const ctas = el.querySelectorAll('.action-area'); + if (ctas.length) { + const div = createTag('div', { class: 'action-area-container' }); + const lastCta = ctas[ctas.length - 1]; + const secondLastCta = ctas[ctas.length - 2]; + lastCta.insertAdjacentElement('afterend', div); + if (secondLastCta && lastCta.previousElementSibling === secondLastCta) { + div.append(secondLastCta); + } + div.append(lastCta); + } } } diff --git a/libs/blocks/media/media.css b/libs/blocks/media/media.css index 4943f31597..70f04c90f7 100644 --- a/libs/blocks/media/media.css +++ b/libs/blocks/media/media.css @@ -70,6 +70,7 @@ display: flex; gap: var(--spacing-s); align-items: flex-start; + width: 100%; } .media .text .icon-area { @@ -255,31 +256,46 @@ div[class*="-up"] .media .foreground > .media-row { } /* Text Alignment */ -.section[class*="-up"] .media, -.section[class*="-up"] .media .foreground { +.section[class*="-up"] .media:not(.media-reverse-mobile) { display: flex; align-self: stretch; } -.section[class*="-up"] .media .foreground > div.media-row { - display: grid; - grid-template-rows: auto 1fr; +.section[class*="-up"] .media:not(.media-reverse-mobile) .foreground { + display: flex; + align-self: stretch; + width: 100% } -.section[class*="-up"] .media .foreground .text { - display: grid; - grid-template-rows: auto auto 1fr; - align-self: stretch; +.section[class*="-up"] .media:not(.media-reverse-mobile) .foreground > div.media-row { + display: flex; + flex-direction: column; + width: 100%; +} + +.section[class*="-up"] .media:not(.media-reverse-mobile) .foreground .text { + display: flex; + flex-direction: column; + height: 100%; } -.section[class*="-up"] .media [class^="heading"], -.section[class*="-up"] .media p, -.section[class*="-up"] .media [class^="body-"] { +.section[class*="-up"] .media:not(.media-reverse-mobile) [class*="heading-"], +.section[class*="-up"] .media:not(.media-reverse-mobile) p:not([class*="detail-"]):not(.subcopy-link), +.section[class*="-up"] .media:not(.media-reverse-mobile) [class*="body-"] { margin-bottom: 0; } -.section[class*="-up"] .media .action-area { - align-self: end; +.section[class*="-up"] .media.merch.bio:not(.media-reverse-mobile) [class*="body-"]:first-child:not(.action-area, .icon-stack-area) { + margin-top: 0; + margin-bottom: revert; +} + +.section[class*="-up"] .media:not(.media-reverse-mobile) .action-area-container { + display: flex; + flex-direction: column; + justify-content: flex-end; + width: 100%; + height: 100%; } @media screen and (min-width: 600px) { @@ -347,7 +363,7 @@ div[class*="-up"] .media .foreground > .media-row { grid-template-columns: repeat(2, 1fr); } - .section[class*="-up"] .media .foreground > div.media-row { + .section[class*="-up"] .media:not(.media-reverse-mobile) .foreground > div.media-row { gap: 0; } } diff --git a/libs/blocks/media/media.js b/libs/blocks/media/media.js index 63553f4a1a..5ff77bc902 100644 --- a/libs/blocks/media/media.js +++ b/libs/blocks/media/media.js @@ -87,6 +87,15 @@ export default function init(el) { link.className = 'body-xxs'; }); } + const lastCta = el.querySelector('.action-area:last-of-type'); + if (lastCta) { + const div = createTag('div', { class: 'action-area-container' }); + lastCta.insertAdjacentElement('afterend', div); + if (lastCta.previousElementSibling.className.includes('icon-stack-area')) { + div.append(lastCta.previousElementSibling); + } + div.append(lastCta); + } container.append(row); }); diff --git a/libs/blocks/text/text.css b/libs/blocks/text/text.css index 81596a12d0..1030ec19a9 100644 --- a/libs/blocks/text/text.css +++ b/libs/blocks/text/text.css @@ -16,6 +16,7 @@ .text-block [class^="detail"] { margin: 0 0 var(--spacing-xxs) 0; } +.text-block .action-area-container, .text-block p.action-area { margin-top: var(--spacing-s); } .text-block div > *:last-child { margin-bottom: 0; } @@ -62,6 +63,10 @@ align-items: center; } +.text-block .action-area-container .action-area { + width: 100%; +} + .text-block hr { border-color: #e1e1e1; border-style: solid; @@ -192,25 +197,34 @@ } /* Text Alignment */ -.section[class*="-up"] .text-block, -.section[class*="-up"] .text-block .foreground { +.section[class*="-up"] .text-block:not(.legal, .link-farm) { display: flex; align-self: stretch; } -.section[class*="-up"] .text-block .foreground > div { - display: grid; - grid-template-rows: auto auto 1fr; +.section[class*="-up"] .text-block:not(.legal, .link-farm) .foreground { + display: flex; + align-self: stretch; + width: 100%; } -.section[class*="-up"] .text-block [class^="heading"], -.section[class*="-up"] .text-block p, -.section[class*="-up"] .text-block [class^="body-"] { +.section[class*="-up"] .text-block:not(.legal, .link-farm) .foreground > div { + display: flex; + flex-direction: column; + width: 100%; +} + +.section[class*="-up"] .text-block:not(.legal, .link-farm) [class^="heading"], +.section[class*="-up"] .text-block:not(.legal, .link-farm) p:not([class^="detail-"]), +.section[class*="-up"] .text-block:not(.legal, .link-farm) [class^="body-"] { margin-bottom: 0; } -.section[class*="-up"] .text-block .action-area { - align-self: end; +.section[class*="-up"] .text-block:not(.legal, .link-farm) .action-area-container { + display: flex; + align-items: flex-end; + width: 100%; + height: 100%; } /* Tablet up */ diff --git a/libs/blocks/text/text.js b/libs/blocks/text/text.js index 315215d3ba..b10d50f2ed 100644 --- a/libs/blocks/text/text.js +++ b/libs/blocks/text/text.js @@ -1,3 +1,4 @@ +import action from '../../utils/action.js'; import { decorateBlockBg, decorateBlockText, getBlockSize, decorateTextOverrides } from '../../utils/decorate.js'; import { createTag, loadStyle, getConfig } from '../../utils/utils.js'; @@ -109,5 +110,10 @@ export default function init(el) { if (hasLinkFarm) decorateLinkFarms(el); el.classList.add(...helperClasses); decorateTextOverrides(el); - if (!hasLinkFarm) decorateMultiViewport(el); + const actionArea = el.querySelector('.action-area:last-of-type'); + if (actionArea) { + const div = createTag('div', { class: 'action-area-container' }); + actionArea.insertAdjacentElement('afterend', div); + div.append(actionArea); + } } From 1625d98b40bba819b39f1fac73b013f35d0f7da1 Mon Sep 17 00:00:00 2001 From: Megan Thomas Date: Wed, 3 Apr 2024 17:51:37 -0700 Subject: [PATCH 03/11] tests and renaming --- libs/blocks/icon-block/icon-block.css | 6 ++--- libs/blocks/icon-block/icon-block.js | 2 +- libs/blocks/media/media.css | 2 +- libs/blocks/media/media.js | 2 +- libs/blocks/text/text.css | 6 ++--- libs/blocks/text/text.js | 4 ++-- test/blocks/icon-block/icon-block.test.js | 10 ++++++++ test/blocks/icon-block/mocks/body.html | 6 ++--- test/blocks/media/media.test.js | 15 ++++++++++++ test/blocks/media/mocks/body.html | 29 +++++++++++++++++++++++ test/blocks/text/mocks/body.html | 12 ++++++++++ test/blocks/text/text.test.js | 14 +++++++++-- 12 files changed, 92 insertions(+), 16 deletions(-) diff --git a/libs/blocks/icon-block/icon-block.css b/libs/blocks/icon-block/icon-block.css index 492399b10f..8598099060 100644 --- a/libs/blocks/icon-block/icon-block.css +++ b/libs/blocks/icon-block/icon-block.css @@ -252,7 +252,7 @@ margin-bottom: 0; } -.icon-block .action-area-container .action-area { +.icon-block .cta-container .action-area { width: 100%; } @@ -347,11 +347,11 @@ align-self: stretch; } -.icon-block .action-area-container { +.icon-block .cta-container { margin-top: var(--spacing-s); } -.section[class*="-up"] .icon-block .action-area-container { +.section[class*="-up"] .icon-block .cta-container { display: flex; align-items: flex-end; justify-content: flex-end; diff --git a/libs/blocks/icon-block/icon-block.js b/libs/blocks/icon-block/icon-block.js index 206219039f..16ad1ac7d3 100644 --- a/libs/blocks/icon-block/icon-block.js +++ b/libs/blocks/icon-block/icon-block.js @@ -78,7 +78,7 @@ function decorateContent(el) { } const ctas = el.querySelectorAll('.action-area'); if (ctas.length) { - const div = createTag('div', { class: 'action-area-container' }); + const div = createTag('div', { class: 'cta-container' }); const lastCta = ctas[ctas.length - 1]; const secondLastCta = ctas[ctas.length - 2]; lastCta.insertAdjacentElement('afterend', div); diff --git a/libs/blocks/media/media.css b/libs/blocks/media/media.css index 70f04c90f7..09d0602faa 100644 --- a/libs/blocks/media/media.css +++ b/libs/blocks/media/media.css @@ -290,7 +290,7 @@ div[class*="-up"] .media .foreground > .media-row { margin-bottom: revert; } -.section[class*="-up"] .media:not(.media-reverse-mobile) .action-area-container { +.section[class*="-up"] .media:not(.media-reverse-mobile) .cta-container { display: flex; flex-direction: column; justify-content: flex-end; diff --git a/libs/blocks/media/media.js b/libs/blocks/media/media.js index 5ff77bc902..fc7b43c7db 100644 --- a/libs/blocks/media/media.js +++ b/libs/blocks/media/media.js @@ -89,7 +89,7 @@ export default function init(el) { } const lastCta = el.querySelector('.action-area:last-of-type'); if (lastCta) { - const div = createTag('div', { class: 'action-area-container' }); + const div = createTag('div', { class: 'cta-container' }); lastCta.insertAdjacentElement('afterend', div); if (lastCta.previousElementSibling.className.includes('icon-stack-area')) { div.append(lastCta.previousElementSibling); diff --git a/libs/blocks/text/text.css b/libs/blocks/text/text.css index 1030ec19a9..f27314a3c3 100644 --- a/libs/blocks/text/text.css +++ b/libs/blocks/text/text.css @@ -16,7 +16,7 @@ .text-block [class^="detail"] { margin: 0 0 var(--spacing-xxs) 0; } -.text-block .action-area-container, +.text-block .cta-container, .text-block p.action-area { margin-top: var(--spacing-s); } .text-block div > *:last-child { margin-bottom: 0; } @@ -63,7 +63,7 @@ align-items: center; } -.text-block .action-area-container .action-area { +.text-block .cta-container .action-area { width: 100%; } @@ -220,7 +220,7 @@ margin-bottom: 0; } -.section[class*="-up"] .text-block:not(.legal, .link-farm) .action-area-container { +.section[class*="-up"] .text-block:not(.legal, .link-farm) .cta-container { display: flex; align-items: flex-end; width: 100%; diff --git a/libs/blocks/text/text.js b/libs/blocks/text/text.js index b10d50f2ed..d79e4ec638 100644 --- a/libs/blocks/text/text.js +++ b/libs/blocks/text/text.js @@ -1,4 +1,3 @@ -import action from '../../utils/action.js'; import { decorateBlockBg, decorateBlockText, getBlockSize, decorateTextOverrides } from '../../utils/decorate.js'; import { createTag, loadStyle, getConfig } from '../../utils/utils.js'; @@ -110,9 +109,10 @@ export default function init(el) { if (hasLinkFarm) decorateLinkFarms(el); el.classList.add(...helperClasses); decorateTextOverrides(el); + if (!hasLinkFarm) decorateMultiViewport(el); const actionArea = el.querySelector('.action-area:last-of-type'); if (actionArea) { - const div = createTag('div', { class: 'action-area-container' }); + const div = createTag('div', { class: 'cta-container' }); actionArea.insertAdjacentElement('afterend', div); div.append(actionArea); } diff --git a/test/blocks/icon-block/icon-block.test.js b/test/blocks/icon-block/icon-block.test.js index 4f0f8241f2..5a1a42ba1b 100644 --- a/test/blocks/icon-block/icon-block.test.js +++ b/test/blocks/icon-block/icon-block.test.js @@ -43,4 +43,14 @@ describe('icon blocks', () => { expect(heading).to.not.exist; }); }); + describe('cta container', () => { + it('is added around the only action area', () => { + expect(document.querySelector('.cta-container #one-cta')).to.exist; + }); + it('is added around adjacent action areas', () => { + const parent = document.querySelector('#adjacent-cta-1').parentElement; + expect(parent.className.includes('cta-container')).to.be.true; + expect(parent.querySelector('#adjacent-cta-2')).to.exist; + }); + }); }); diff --git a/test/blocks/icon-block/mocks/body.html b/test/blocks/icon-block/mocks/body.html index 5061440e60..d3526ba7c5 100644 --- a/test/blocks/icon-block/mocks/body.html +++ b/test/blocks/icon-block/mocks/body.html @@ -25,8 +25,8 @@

Heading XL Bold Icon Block

Heading L Bold Icon Block

Body M Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.

-

Learn more

-

Body M BOLD Text link

+

Learn more

+

Body M BOLD Text link

@@ -42,7 +42,7 @@

Heading L Bold Icon Block

Heading M Bold 2-up Lorem ipsum sit amet

Body M Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.

-

Learn more Body XS Text link

+

Learn more Body XS Text link

diff --git a/test/blocks/media/media.test.js b/test/blocks/media/media.test.js index efd8d890a8..7e6bd5ad08 100644 --- a/test/blocks/media/media.test.js +++ b/test/blocks/media/media.test.js @@ -28,6 +28,10 @@ describe('media', () => { const blueButton = actionArea.querySelector('.con-button.blue'); expect(blueButton).to.exist; }); + it('has a cta container', () => { + const ctaArea = medias[0].querySelector('.cta-container .action-area'); + expect(ctaArea).to.exist; + }); }); describe('dark media large', () => { it('has a heading-xl', () => { @@ -54,6 +58,10 @@ describe('media', () => { const links = medias[4].querySelectorAll('h3.heading-xs ~ p.subcopy-link > a'); expect(links.length).to.greaterThanOrEqual(2); }); + it('does not have cta container around mid-body action area', () => { + const actionArea = medias[4].querySelector('.action-area'); + expect(actionArea.parentElement.className.includes('cta-container')).to.be.false; + }); }); describe('media with qr-code', () => { it('does have qr-code image', () => { @@ -104,4 +112,11 @@ describe('media', () => { expect(iconStack).to.exist; }); }); + describe('with merch variant', () => { + it('has a cta container around the icon stack and action area', () => { + const cta = medias[7].querySelector('.cta-container'); + expect(cta.querySelector('.icon-stack-area')).to.exist; + expect(cta.querySelector('.action-area')).to.exist; + }); + }); }); diff --git a/test/blocks/media/mocks/body.html b/test/blocks/media/mocks/body.html index 63345703a0..695436456d 100644 --- a/test/blocks/media/mocks/body.html +++ b/test/blocks/media/mocks/body.html @@ -141,4 +141,33 @@

Heading M 24/30 Media

+
+
+
+ + + +
+
+

Detail M 12/15

+

Heading XS 18/22 Media (merch, small)

+

Body S 16/24 Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.

+ +

Learn More Watch the Video

+
+
+
diff --git a/test/blocks/text/mocks/body.html b/test/blocks/text/mocks/body.html index 210bd8587f..f6ae6bb7ac 100644 --- a/test/blocks/text/mocks/body.html +++ b/test/blocks/text/mocks/body.html @@ -185,3 +185,15 @@

Tablet, Desktop

+ +
+
+
+

Text

+

Section Metadata - Two-Up

+

Learn about

+

Kick things off with hundreds of premium and free presets you can access with your Lightroom subscription.

+

Learn about Body XS 14/21 Text link

+
+
+
diff --git a/test/blocks/text/text.test.js b/test/blocks/text/text.test.js index de4f16ee13..bd1fe62cc0 100644 --- a/test/blocks/text/text.test.js +++ b/test/blocks/text/text.test.js @@ -1,7 +1,8 @@ import { readFile } from '@web/test-runner-commands'; import { expect } from '@esm-bundle/chai'; -document.body.innerHTML = await readFile({ path: './mocks/body.html' }); +const bodyMock = await readFile({ path: './mocks/body.html' }); +document.body.innerHTML = bodyMock; const { default: init } = await import('../../../libs/blocks/text/text.js'); describe('text block', () => { @@ -62,11 +63,20 @@ describe('text block', () => { }); }); }); - describe('two content rows', () => { it('has viewport classes', () => { const mobileEl = document.querySelector('.text-block .mobile-up'); expect(mobileEl).to.exist; }); }); + describe('cta container', () => { + it('is added around the last action area', () => { + const actionArea = document.querySelector('#has-container'); + expect(actionArea.parentElement.className.includes('cta-container')).to.be.true; + }); + it('is not added around action areas that are not last', () => { + const actionArea = document.querySelector('#no-container'); + expect(actionArea.parentElement.className.includes('cta-container')).to.be.false; + }); + }); }); From a3c263a898287df14a8c4f1f10917e5ad3f6ff41 Mon Sep 17 00:00:00 2001 From: Megan Thomas Date: Wed, 3 Apr 2024 17:55:56 -0700 Subject: [PATCH 04/11] icon cleanup --- libs/blocks/icon-block/icon-block.css | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/libs/blocks/icon-block/icon-block.css b/libs/blocks/icon-block/icon-block.css index 8598099060..7e1e8f506d 100644 --- a/libs/blocks/icon-block/icon-block.css +++ b/libs/blocks/icon-block/icon-block.css @@ -40,8 +40,7 @@ .icon-block .foreground .text-content { display: flex; - /* flex-wrap: wrap; */ - flex-direction: column; /* new */ + flex-direction: column; align-content: center; width: 100%; } @@ -461,8 +460,6 @@ } .icon-block.vertical .foreground .text-content { - /* flex-grow: 1; - flex-basis: 0; */ margin-bottom: 0; } From 2be1a8a8f770e1763d5596422e0cc7de835e5a5f Mon Sep 17 00:00:00 2001 From: Megan Thomas Date: Wed, 3 Apr 2024 17:57:50 -0700 Subject: [PATCH 05/11] test cleanup --- test/blocks/text/text.test.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/test/blocks/text/text.test.js b/test/blocks/text/text.test.js index bd1fe62cc0..1db68d1d13 100644 --- a/test/blocks/text/text.test.js +++ b/test/blocks/text/text.test.js @@ -1,8 +1,7 @@ import { readFile } from '@web/test-runner-commands'; import { expect } from '@esm-bundle/chai'; -const bodyMock = await readFile({ path: './mocks/body.html' }); -document.body.innerHTML = bodyMock; +document.body.innerHTML = await readFile({ path: './mocks/body.html' }); const { default: init } = await import('../../../libs/blocks/text/text.js'); describe('text block', () => { From 5c13efe31eeaadce59135622881686e69525bf59 Mon Sep 17 00:00:00 2001 From: Megan Thomas Date: Wed, 3 Apr 2024 18:02:58 -0700 Subject: [PATCH 06/11] lint cleanup --- libs/blocks/icon-block/icon-block.js | 1 - 1 file changed, 1 deletion(-) diff --git a/libs/blocks/icon-block/icon-block.js b/libs/blocks/icon-block/icon-block.js index 16ad1ac7d3..0f03f5a2e3 100644 --- a/libs/blocks/icon-block/icon-block.js +++ b/libs/blocks/icon-block/icon-block.js @@ -14,7 +14,6 @@ * Icon Block - v5.1 */ -import action from '../../utils/action.js'; import { decorateBlockText, getBlockSize } from '../../utils/decorate.js'; import { createTag } from '../../utils/utils.js'; From 17b1c3afa8c94c28ac1bece2cf4b0b62c8b977c5 Mon Sep 17 00:00:00 2001 From: Megan Thomas Date: Wed, 10 Apr 2024 15:33:32 -0700 Subject: [PATCH 07/11] cr rename ctas --- libs/blocks/icon-block/icon-block.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/libs/blocks/icon-block/icon-block.js b/libs/blocks/icon-block/icon-block.js index 0f03f5a2e3..2ebce4f6a4 100644 --- a/libs/blocks/icon-block/icon-block.js +++ b/libs/blocks/icon-block/icon-block.js @@ -75,11 +75,11 @@ function decorateContent(el) { if (secondColumn.children.length === 1) el.classList.add('items-center'); el.querySelector('.foreground .text-content').append(secondColumn); } - const ctas = el.querySelectorAll('.action-area'); - if (ctas.length) { + const actionAreas = el.querySelectorAll('.action-area'); + if (actionAreas.length) { const div = createTag('div', { class: 'cta-container' }); - const lastCta = ctas[ctas.length - 1]; - const secondLastCta = ctas[ctas.length - 2]; + const lastCta = actionAreas[actionAreas.length - 1]; + const secondLastCta = actionAreas[actionAreas.length - 2]; lastCta.insertAdjacentElement('afterend', div); if (secondLastCta && lastCta.previousElementSibling === secondLastCta) { div.append(secondLastCta); From ee76fd5a26aeec562bd2f72e3f9ba31b52e92d99 Mon Sep 17 00:00:00 2001 From: Megan Thomas Date: Wed, 10 Apr 2024 16:03:50 -0700 Subject: [PATCH 08/11] supplemental text and consistent variable names --- libs/blocks/icon-block/icon-block.css | 12 ++++++++---- libs/blocks/icon-block/icon-block.js | 14 ++++++-------- libs/blocks/media/media.js | 12 ++++++------ libs/blocks/text/text.js | 9 +++++---- 4 files changed, 25 insertions(+), 22 deletions(-) diff --git a/libs/blocks/icon-block/icon-block.css b/libs/blocks/icon-block/icon-block.css index 7e1e8f506d..d15469b265 100644 --- a/libs/blocks/icon-block/icon-block.css +++ b/libs/blocks/icon-block/icon-block.css @@ -104,6 +104,10 @@ margin-bottom: 0; } +.icon-block.inline .body-s.action-area { + padding-top: 24px; +} + .icon-block.inline .icon-area, .icon-block.inline .icon-area picture img { min-width: var(--icon-size-xxl); @@ -255,10 +259,6 @@ width: 100%; } -.section[class*="-up"] .icon-block .action-area { - align-self: end; -} - .icon-block.full-width .foreground .text-content .action-area { justify-content: center; } @@ -350,6 +350,10 @@ margin-top: var(--spacing-s); } +.icon-block.inline .cta-container .body-s.action-area { + padding-top: 0; +} + .section[class*="-up"] .icon-block .cta-container { display: flex; align-items: flex-end; diff --git a/libs/blocks/icon-block/icon-block.js b/libs/blocks/icon-block/icon-block.js index 2ebce4f6a4..b7163a1f3d 100644 --- a/libs/blocks/icon-block/icon-block.js +++ b/libs/blocks/icon-block/icon-block.js @@ -75,16 +75,14 @@ function decorateContent(el) { if (secondColumn.children.length === 1) el.classList.add('items-center'); el.querySelector('.foreground .text-content').append(secondColumn); } - const actionAreas = el.querySelectorAll('.action-area'); - if (actionAreas.length) { + const lastActionArea = el.querySelector('.action-area:last-of-type'); + if (lastActionArea) { const div = createTag('div', { class: 'cta-container' }); - const lastCta = actionAreas[actionAreas.length - 1]; - const secondLastCta = actionAreas[actionAreas.length - 2]; - lastCta.insertAdjacentElement('afterend', div); - if (secondLastCta && lastCta.previousElementSibling === secondLastCta) { - div.append(secondLastCta); + lastActionArea.insertAdjacentElement('afterend', div); + if (lastActionArea.previousElementSibling.className.includes('action-area')) { + div.append(lastActionArea.previousElementSibling); } - div.append(lastCta); + div.append(lastActionArea); } } } diff --git a/libs/blocks/media/media.js b/libs/blocks/media/media.js index fc7b43c7db..8c8ea3d3c2 100644 --- a/libs/blocks/media/media.js +++ b/libs/blocks/media/media.js @@ -87,14 +87,14 @@ export default function init(el) { link.className = 'body-xxs'; }); } - const lastCta = el.querySelector('.action-area:last-of-type'); - if (lastCta) { + const lastActionArea = el.querySelector('.action-area:last-of-type'); + if (lastActionArea) { const div = createTag('div', { class: 'cta-container' }); - lastCta.insertAdjacentElement('afterend', div); - if (lastCta.previousElementSibling.className.includes('icon-stack-area')) { - div.append(lastCta.previousElementSibling); + lastActionArea.insertAdjacentElement('afterend', div); + if (lastActionArea.previousElementSibling.className.includes('icon-stack-area')) { + div.append(lastActionArea.previousElementSibling); } - div.append(lastCta); + div.append(lastActionArea); } container.append(row); }); diff --git a/libs/blocks/text/text.js b/libs/blocks/text/text.js index d79e4ec638..c6f14eeea3 100644 --- a/libs/blocks/text/text.js +++ b/libs/blocks/text/text.js @@ -110,10 +110,11 @@ export default function init(el) { el.classList.add(...helperClasses); decorateTextOverrides(el); if (!hasLinkFarm) decorateMultiViewport(el); - const actionArea = el.querySelector('.action-area:last-of-type'); - if (actionArea) { + + const lastActionArea = el.querySelector('.action-area:last-of-type'); + if (lastActionArea) { const div = createTag('div', { class: 'cta-container' }); - actionArea.insertAdjacentElement('afterend', div); - div.append(actionArea); + lastActionArea.insertAdjacentElement('afterend', div); + div.append(lastActionArea); } } From 9be1f585a33f42741cb0f84d081c456520034ab6 Mon Sep 17 00:00:00 2001 From: Megan Thomas Date: Mon, 15 Apr 2024 13:55:44 -0700 Subject: [PATCH 09/11] qa - fix icon block mobile padding --- libs/blocks/icon-block/icon-block.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/libs/blocks/icon-block/icon-block.css b/libs/blocks/icon-block/icon-block.css index d15469b265..ba45632eb2 100644 --- a/libs/blocks/icon-block/icon-block.css +++ b/libs/blocks/icon-block/icon-block.css @@ -36,6 +36,7 @@ .icon-block .foreground { position: relative; text-align: center; + width: 100%; } .icon-block .foreground .text-content { @@ -310,7 +311,6 @@ .section[class*="-up"] .icon-block .foreground { display: flex; align-self: stretch; - width: 100%; } [class*="-up"] .icon-block.bio.inline .foreground { From adf35f848de0589910ec709970b3d4c91c28b2c7 Mon Sep 17 00:00:00 2001 From: Megan Thomas Date: Mon, 15 Apr 2024 14:03:54 -0700 Subject: [PATCH 10/11] qa - exclude qr code --- libs/blocks/media/media.css | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/libs/blocks/media/media.css b/libs/blocks/media/media.css index 09d0602faa..71e2670a01 100644 --- a/libs/blocks/media/media.css +++ b/libs/blocks/media/media.css @@ -256,41 +256,41 @@ div[class*="-up"] .media .foreground > .media-row { } /* Text Alignment */ -.section[class*="-up"] .media:not(.media-reverse-mobile) { +.section[class*="-up"] .media:not(.media-reverse-mobile, .qr-code) { display: flex; align-self: stretch; } -.section[class*="-up"] .media:not(.media-reverse-mobile) .foreground { +.section[class*="-up"] .media:not(.media-reverse-mobile, .qr-code) .foreground { display: flex; align-self: stretch; width: 100% } -.section[class*="-up"] .media:not(.media-reverse-mobile) .foreground > div.media-row { +.section[class*="-up"] .media:not(.media-reverse-mobile, .qr-code) .foreground > div.media-row { display: flex; flex-direction: column; width: 100%; } -.section[class*="-up"] .media:not(.media-reverse-mobile) .foreground .text { +.section[class*="-up"] .media:not(.media-reverse-mobile, .qr-code) .foreground .text { display: flex; flex-direction: column; height: 100%; } -.section[class*="-up"] .media:not(.media-reverse-mobile) [class*="heading-"], -.section[class*="-up"] .media:not(.media-reverse-mobile) p:not([class*="detail-"]):not(.subcopy-link), -.section[class*="-up"] .media:not(.media-reverse-mobile) [class*="body-"] { +.section[class*="-up"] .media:not(.media-reverse-mobile, .qr-code) [class*="heading-"], +.section[class*="-up"] .media:not(.media-reverse-mobile, .qr-code) p:not([class*="detail-"]):not(.subcopy-link), +.section[class*="-up"] .media:not(.media-reverse-mobile, .qr-code) [class*="body-"] { margin-bottom: 0; } -.section[class*="-up"] .media.merch.bio:not(.media-reverse-mobile) [class*="body-"]:first-child:not(.action-area, .icon-stack-area) { +.section[class*="-up"] .media.merch.bio:not(.media-reverse-mobile, .qr-code) [class*="body-"]:first-child:not(.action-area, .icon-stack-area) { margin-top: 0; margin-bottom: revert; } -.section[class*="-up"] .media:not(.media-reverse-mobile) .cta-container { +.section[class*="-up"] .media:not(.media-reverse-mobile, .qr-code) .cta-container { display: flex; flex-direction: column; justify-content: flex-end; From 2b21ca954fd28fe187516418ee7671f1f88a6eb3 Mon Sep 17 00:00:00 2001 From: Megan Thomas Date: Wed, 17 Apr 2024 11:26:22 -0700 Subject: [PATCH 11/11] icon bio cta --- libs/blocks/icon-block/icon-block.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/libs/blocks/icon-block/icon-block.css b/libs/blocks/icon-block/icon-block.css index ba45632eb2..22d9eae5ef 100644 --- a/libs/blocks/icon-block/icon-block.css +++ b/libs/blocks/icon-block/icon-block.css @@ -252,6 +252,10 @@ margin-bottom: var(--spacing-s); } +.icon-block.bio .cta-container { + margin-top: 0; +} + .icon-block .foreground .text-content p.body-m.action-area { margin-bottom: 0; }