From 95d6ad6eac6599ad64769815b3aebfc7059c9ecd Mon Sep 17 00:00:00 2001 From: Megan Thomas Date: Wed, 24 Apr 2024 14:27:47 -0700 Subject: [PATCH 1/3] MWPW-144549 CTA alignment for Text, Icon, and Media Blocks (#2098) * MWPW-144549 CTA alignment for Text, Icon, and Media Blocks * redo in flex * tests and renaming * icon cleanup * test cleanup * lint cleanup * cr rename ctas * supplemental text and consistent variable names * qa - fix icon block mobile padding * qa - exclude qr code * icon bio cta --------- Co-authored-by: Robert Bogos <146744221+robert-bogos@users.noreply.github.com> Co-authored-by: Elan Bartholomew <79870969+elan-tbx@users.noreply.github.com> --- libs/blocks/icon-block/icon-block.css | 44 +++++++++++++++++++-- libs/blocks/icon-block/icon-block.js | 9 +++++ libs/blocks/media/media.css | 48 +++++++++++++++++++++++ libs/blocks/media/media.js | 9 +++++ libs/blocks/text/text.css | 37 ++++++++++++++++- libs/blocks/text/text.js | 7 ++++ 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 | 11 +++++- 12 files changed, 229 insertions(+), 8 deletions(-) diff --git a/libs/blocks/icon-block/icon-block.css b/libs/blocks/icon-block/icon-block.css index 2b50032e0c..22d9eae5ef 100644 --- a/libs/blocks/icon-block/icon-block.css +++ b/libs/blocks/icon-block/icon-block.css @@ -36,11 +36,12 @@ .icon-block .foreground { position: relative; text-align: center; + width: 100%; } .icon-block .foreground .text-content { display: flex; - flex-wrap: wrap; + flex-direction: column; align-content: center; width: 100%; } @@ -167,6 +168,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); } @@ -246,10 +252,18 @@ 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; } +.icon-block .cta-container .action-area { + width: 100%; +} + .icon-block.full-width .foreground .text-content .action-area { justify-content: center; } @@ -298,6 +312,11 @@ margin: unset; } +.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 +345,27 @@ line-height: var(--type-body-m-lh); } +.section[class*="-up"] .icon-block { + display: flex; + align-self: stretch; +} + +.icon-block .cta-container { + 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; + justify-content: flex-end; + flex-direction: column; + width: 100%; +} + @media screen and (min-width: 600px) and (max-width: 1200px) { .icon-block .foreground .icon-area { max-width: 234px; @@ -428,8 +468,6 @@ } .icon-block.vertical .foreground .text-content { - 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..b7163a1f3d 100644 --- a/libs/blocks/icon-block/icon-block.js +++ b/libs/blocks/icon-block/icon-block.js @@ -75,6 +75,15 @@ function decorateContent(el) { if (secondColumn.children.length === 1) el.classList.add('items-center'); el.querySelector('.foreground .text-content').append(secondColumn); } + const lastActionArea = el.querySelector('.action-area:last-of-type'); + if (lastActionArea) { + const div = createTag('div', { class: 'cta-container' }); + lastActionArea.insertAdjacentElement('afterend', div); + if (lastActionArea.previousElementSibling.className.includes('action-area')) { + div.append(lastActionArea.previousElementSibling); + } + div.append(lastActionArea); + } } } diff --git a/libs/blocks/media/media.css b/libs/blocks/media/media.css index 0ae3ca5ed8..71e2670a01 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 { @@ -254,6 +255,49 @@ div[class*="-up"] .media .foreground > .media-row { height: var(--icon-size-xxl); } +/* Text Alignment */ +.section[class*="-up"] .media:not(.media-reverse-mobile, .qr-code) { + display: flex; + align-self: stretch; +} + +.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, .qr-code) .foreground > div.media-row { + display: flex; + flex-direction: column; + width: 100%; +} + +.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, .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, .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, .qr-code) .cta-container { + display: flex; + flex-direction: column; + justify-content: flex-end; + width: 100%; + height: 100%; +} + @media screen and (min-width: 600px) { .media > .foreground .media-row { gap: var(--spacing-m); @@ -318,6 +362,10 @@ div[class*="-up"] .media .foreground > .media-row { .media .icon-stack-area { grid-template-columns: repeat(2, 1fr); } + + .section[class*="-up"] .media:not(.media-reverse-mobile) .foreground > div.media-row { + gap: 0; + } } @media screen and (min-width: 1200px) { diff --git a/libs/blocks/media/media.js b/libs/blocks/media/media.js index 63553f4a1a..8c8ea3d3c2 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 lastActionArea = el.querySelector('.action-area:last-of-type'); + if (lastActionArea) { + const div = createTag('div', { class: 'cta-container' }); + lastActionArea.insertAdjacentElement('afterend', div); + if (lastActionArea.previousElementSibling.className.includes('icon-stack-area')) { + div.append(lastActionArea.previousElementSibling); + } + div.append(lastActionArea); + } container.append(row); }); diff --git a/libs/blocks/text/text.css b/libs/blocks/text/text.css index 4fd3abcfa5..f27314a3c3 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 .cta-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 .cta-container .action-area { + width: 100%; +} + .text-block hr { border-color: #e1e1e1; border-style: solid; @@ -191,9 +196,39 @@ display: none; } +/* Text Alignment */ +.section[class*="-up"] .text-block:not(.legal, .link-farm) { + display: flex; + align-self: stretch; +} + +.section[class*="-up"] .text-block:not(.legal, .link-farm) .foreground { + display: flex; + align-self: stretch; + width: 100%; +} + +.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:not(.legal, .link-farm) .cta-container { + display: flex; + align-items: flex-end; + width: 100%; + height: 100%; +} + /* Tablet up */ @media screen and (min-width: 600px) { - .inset.text-block .foreground::before { display: none; } diff --git a/libs/blocks/text/text.js b/libs/blocks/text/text.js index 315215d3ba..c6f14eeea3 100644 --- a/libs/blocks/text/text.js +++ b/libs/blocks/text/text.js @@ -110,4 +110,11 @@ export default function init(el) { el.classList.add(...helperClasses); decorateTextOverrides(el); if (!hasLinkFarm) decorateMultiViewport(el); + + const lastActionArea = el.querySelector('.action-area:last-of-type'); + if (lastActionArea) { + const div = createTag('div', { class: 'cta-container' }); + lastActionArea.insertAdjacentElement('afterend', div); + div.append(lastActionArea); + } } 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 9b662fedd5..9d79e7e2ae 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..1db68d1d13 100644 --- a/test/blocks/text/text.test.js +++ b/test/blocks/text/text.test.js @@ -62,11 +62,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 8c8834fdaf4e8cb766348ce0d8e46cd15c0bd35f Mon Sep 17 00:00:00 2001 From: Robert Bogos <146744221+robert-bogos@users.noreply.github.com> Date: Thu, 25 Apr 2024 14:25:12 +0300 Subject: [PATCH 2/3] MWPW-146999: kodiak CVE 25883 (#2183) * updated eslint-plugin-compat * added TODOs * hotfix --- libs/blocks/caas-marquee/caas-marquee.js | 4 + .../utilities/getUserEntitlements.js | 2 + package-lock.json | 201 +++++++++--------- package.json | 2 +- 4 files changed, 110 insertions(+), 99 deletions(-) diff --git a/libs/blocks/caas-marquee/caas-marquee.js b/libs/blocks/caas-marquee/caas-marquee.js index cf5467a9f2..966dceb204 100644 --- a/libs/blocks/caas-marquee/caas-marquee.js +++ b/libs/blocks/caas-marquee/caas-marquee.js @@ -361,6 +361,8 @@ async function getAllMarquees(promoId, origin) { /* eslint-disable object-curly-newline */ const response = await fetch(`${endPoint}?${payload}`, { + // TODO: refactor to not use AbortSignal.timeout() as it's not supported for Safari 14 + /* eslint-disable-next-line */ signal: AbortSignal.timeout(REQUEST_TIMEOUT), }).catch((error) => fetchExceptionHandler('getAllMarquees', error)); @@ -384,6 +386,8 @@ async function getMarqueeId() { 'x-api-key': 'ChimeraAcom', }, body: `{"endpoint":"acom-banner-recom-v1","contentType":"application/json","payload":{"data":{"visitedLinks": ${JSON.stringify(visitedLinks)}, "segment": ${JSON.stringify(segments)}}}}`, + // TODO: refactor to not use AbortSignal.timeout() as it's not supported for Safari 14 + /* eslint-disable-next-line */ signal: AbortSignal.timeout(REQUEST_TIMEOUT), }).catch((error) => fetchExceptionHandler('getMarqueeId', error)); diff --git a/libs/blocks/global-navigation/utilities/getUserEntitlements.js b/libs/blocks/global-navigation/utilities/getUserEntitlements.js index 568ad23bf5..1166146179 100644 --- a/libs/blocks/global-navigation/utilities/getUserEntitlements.js +++ b/libs/blocks/global-navigation/utilities/getUserEntitlements.js @@ -105,6 +105,8 @@ const getSubscriptions = async ({ queryParams }, format) => { method: 'GET', cache: 'no-cache', credentials: 'same-origin', + // TODO: refactor to not use AbortSignal.timeout() as it's not supported for Safari 14 + /* eslint-disable-next-line */ signal: AbortSignal.timeout(API_WAIT_TIMEOUT), headers: { Authorization: `Bearer ${window.adobeIMS.getAccessToken().token}`, diff --git a/package-lock.json b/package-lock.json index 85c7bdf168..f7dafc9b83 100644 --- a/package-lock.json +++ b/package-lock.json @@ -26,7 +26,7 @@ "eslint-config-airbnb-base": "15.0.0", "eslint-nibble": "^8.1.0", "eslint-plugin-chai-friendly": "^0.7.2", - "eslint-plugin-compat": "^4.0.2", + "eslint-plugin-compat": "^4.2.0", "eslint-plugin-ecmalist": "^1.0.8", "eslint-plugin-import": "2.25.4", "eslint-plugin-react-hooks": "^4.6.0", @@ -3157,18 +3157,18 @@ } }, "node_modules/ast-metadata-inferer": { - "version": "0.7.0", - "resolved": "https://registry.npmjs.org/ast-metadata-inferer/-/ast-metadata-inferer-0.7.0.tgz", - "integrity": "sha512-OkMLzd8xelb3gmnp6ToFvvsHLtS6CbagTkFQvQ+ZYFe3/AIl9iKikNR9G7pY3GfOR/2Xc222hwBjzI7HLkE76Q==", + "version": "0.8.0", + "resolved": "https://registry.npmjs.org/ast-metadata-inferer/-/ast-metadata-inferer-0.8.0.tgz", + "integrity": "sha512-jOMKcHht9LxYIEQu+RVd22vtgrPaVCtDRQ/16IGmurdzxvYbDd5ynxjnyrzLnieG96eTcAyaoj/wN/4/1FyyeA==", "dev": true, "dependencies": { - "@mdn/browser-compat-data": "^3.3.14" + "@mdn/browser-compat-data": "^5.2.34" } }, "node_modules/ast-metadata-inferer/node_modules/@mdn/browser-compat-data": { - "version": "3.3.14", - "resolved": "https://registry.npmjs.org/@mdn/browser-compat-data/-/browser-compat-data-3.3.14.tgz", - "integrity": "sha512-n2RC9d6XatVbWFdHLimzzUJxJ1KY8LdjqrW6YvGPiRmsHkhOUx74/Ct10x5Yo7bC/Jvqx7cDEW8IMPv/+vwEzA==", + "version": "5.5.22", + "resolved": "https://registry.npmjs.org/@mdn/browser-compat-data/-/browser-compat-data-5.5.22.tgz", + "integrity": "sha512-2v+HeCb1J4tAi4M9zMR1AtxMBA08q8HMDXbJ1H64sFpXhTU/8W2kBBjTL9TkUQiHaJDFFU6kAFBlsfslP253WA==", "dev": true }, "node_modules/astral-regex": { @@ -3402,9 +3402,9 @@ } }, "node_modules/browserslist": { - "version": "4.21.4", - "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.21.4.tgz", - "integrity": "sha512-CBHJJdDmgjl3daYjN5Cp5kbTf1mUhZoS+beLklHIvkOWscs83YAhLlF3Wsh/lciQYAcbBJgTOD44VtG31ZM4Hw==", + "version": "4.23.0", + "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.23.0.tgz", + "integrity": "sha512-QW8HiM1shhT2GuzkvklfjcKDiWFXHOeFCIA/huJPwHsslwcydgk7X+z2zXpEijP98UCY7HbubZt5J2Zgvf0CaQ==", "dev": true, "funding": [ { @@ -3414,13 +3414,17 @@ { "type": "tidelift", "url": "https://tidelift.com/funding/github/npm/browserslist" + }, + { + "type": "github", + "url": "https://github.com/sponsors/ai" } ], "dependencies": { - "caniuse-lite": "^1.0.30001400", - "electron-to-chromium": "^1.4.251", - "node-releases": "^2.0.6", - "update-browserslist-db": "^1.0.9" + "caniuse-lite": "^1.0.30001587", + "electron-to-chromium": "^1.4.668", + "node-releases": "^2.0.14", + "update-browserslist-db": "^1.0.13" }, "bin": { "browserslist": "cli.js" @@ -3575,9 +3579,9 @@ } }, "node_modules/caniuse-lite": { - "version": "1.0.30001406", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001406.tgz", - "integrity": "sha512-bWTlaXUy/rq0BBtYShc/jArYfBPjEV95euvZ8JVtO43oQExEN/WquoqpufFjNu4kSpi5cy5kMbNvzztWDfv1Jg==", + "version": "1.0.30001612", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001612.tgz", + "integrity": "sha512-lFgnZ07UhaCcsSZgWW0K5j4e69dK1u/ltrL9lTUiFOwNHs12S3UMIEYgBV0Z6C6hRDev7iRnMzzYmKabYdXF9g==", "dev": true, "funding": [ { @@ -3587,6 +3591,10 @@ { "type": "tidelift", "url": "https://tidelift.com/funding/github/npm/caniuse-lite" + }, + { + "type": "github", + "url": "https://github.com/sponsors/ai" } ] }, @@ -3970,17 +3978,6 @@ "node": ">= 0.8" } }, - "node_modules/core-js": { - "version": "3.27.2", - "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.27.2.tgz", - "integrity": "sha512-9ashVQskuh5AZEZ1JdQWp1GqSoC1e1G87MzRqg2gIfVAQ7Qn9K+uFj8EcniUFA4P2NLZfV+TOlX1SzoKfo+s7w==", - "dev": true, - "hasInstallScript": true, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/core-js" - } - }, "node_modules/core-js-compat": { "version": "3.25.2", "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.25.2.tgz", @@ -4482,9 +4479,9 @@ } }, "node_modules/electron-to-chromium": { - "version": "1.4.254", - "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.254.tgz", - "integrity": "sha512-Sh/7YsHqQYkA6ZHuHMy24e6TE4eX6KZVsZb9E/DvU1nQRIrH4BflO/4k+83tfdYvDl+MObvlqHPRICzEdC9c6Q==", + "version": "1.4.746", + "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.746.tgz", + "integrity": "sha512-jeWaIta2rIG2FzHaYIhSuVWqC6KJYo7oSBX4Jv7g+aVujKztfvdpf+n6MGwZdC5hQXbax4nntykLH2juIQrfPg==", "dev": true }, "node_modules/emoji-regex": { @@ -4896,27 +4893,32 @@ } }, "node_modules/eslint-plugin-compat": { - "version": "4.0.2", - "resolved": "https://registry.npmjs.org/eslint-plugin-compat/-/eslint-plugin-compat-4.0.2.tgz", - "integrity": "sha512-xqvoO54CLTVaEYGMzhu35Wzwk/As7rCvz/2dqwnFiWi0OJccEtGIn+5qq3zqIu9nboXlpdBN579fZcItC73Ycg==", + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/eslint-plugin-compat/-/eslint-plugin-compat-4.2.0.tgz", + "integrity": "sha512-RDKSYD0maWy5r7zb5cWQS+uSPc26mgOzdORJ8hxILmWM7S/Ncwky7BcAtXVY5iRbKjBdHsWU8Yg7hfoZjtkv7w==", "dev": true, "dependencies": { - "@mdn/browser-compat-data": "^4.1.5", - "ast-metadata-inferer": "^0.7.0", - "browserslist": "^4.16.8", - "caniuse-lite": "^1.0.30001304", - "core-js": "^3.16.2", + "@mdn/browser-compat-data": "^5.3.13", + "ast-metadata-inferer": "^0.8.0", + "browserslist": "^4.21.10", + "caniuse-lite": "^1.0.30001524", "find-up": "^5.0.0", - "lodash.memoize": "4.1.2", - "semver": "7.3.5" + "lodash.memoize": "^4.1.2", + "semver": "^7.5.4" }, "engines": { - "node": ">=9.x" + "node": ">=14.x" }, "peerDependencies": { "eslint": "^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0" } }, + "node_modules/eslint-plugin-compat/node_modules/@mdn/browser-compat-data": { + "version": "5.5.22", + "resolved": "https://registry.npmjs.org/@mdn/browser-compat-data/-/browser-compat-data-5.5.22.tgz", + "integrity": "sha512-2v+HeCb1J4tAi4M9zMR1AtxMBA08q8HMDXbJ1H64sFpXhTU/8W2kBBjTL9TkUQiHaJDFFU6kAFBlsfslP253WA==", + "dev": true + }, "node_modules/eslint-plugin-compat/node_modules/find-up": { "version": "5.0.0", "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz", @@ -4988,9 +4990,9 @@ } }, "node_modules/eslint-plugin-compat/node_modules/semver": { - "version": "7.3.5", - "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.5.tgz", - "integrity": "sha512-PoeGJYh8HK4BTO/a9Tf6ZG3veo/A7ZVsYrSA6J8ny9nb3B1VrpkuN+z9OE5wfE5p6H4LchYZsegiQgbJD94ZFQ==", + "version": "7.6.0", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.0.tgz", + "integrity": "sha512-EnwXhrlwXMk9gKu5/flx5sv/an57AkRplG3hTK68W7FRDN+k+OWBj65M7719OkA82XLBxrcX0KSHj+X5COhOVg==", "dev": true, "dependencies": { "lru-cache": "^6.0.0" @@ -8082,9 +8084,9 @@ } }, "node_modules/node-releases": { - "version": "2.0.6", - "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.6.tgz", - "integrity": "sha512-PiVXnNuFm5+iYkLBNeq5211hvO38y63T0i2KKh2KnUs3RpzJ+JtODFjkD8yjLwnDkTYF1eKXheUwdssR+NRZdg==", + "version": "2.0.14", + "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.14.tgz", + "integrity": "sha512-y10wOWt8yZpqXmOgRo77WaHEmhYQYGNA6y421PKsKYWEK8aW+cqAphborZDhqfyKrbZEN92CN1X2KbafY2s7Yw==", "dev": true }, "node_modules/normalize-package-data": { @@ -11292,9 +11294,9 @@ } }, "node_modules/update-browserslist-db": { - "version": "1.0.9", - "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.9.tgz", - "integrity": "sha512-/xsqn21EGVdXI3EXSum1Yckj3ZVZugqyOZQ/CxYPBD/R+ko9NSUScf8tFF4dOKY+2pvSSJA/S+5B8s4Zr4kyvg==", + "version": "1.0.13", + "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.13.tgz", + "integrity": "sha512-xebP81SNcPuNpPP3uzeW1NYXxI3rxyJzF3pD6sH4jE7o/IX+WtSpwnVU+qIsDPyk0d3hmFQ7mjqc6AtV604hbg==", "dev": true, "funding": [ { @@ -11304,6 +11306,10 @@ { "type": "tidelift", "url": "https://tidelift.com/funding/github/npm/browserslist" + }, + { + "type": "github", + "url": "https://github.com/sponsors/ai" } ], "dependencies": { @@ -11311,7 +11317,7 @@ "picocolors": "^1.0.0" }, "bin": { - "browserslist-lint": "cli.js" + "update-browserslist-db": "cli.js" }, "peerDependencies": { "browserslist": ">= 4.21.0" @@ -13979,18 +13985,18 @@ "dev": true }, "ast-metadata-inferer": { - "version": "0.7.0", - "resolved": "https://registry.npmjs.org/ast-metadata-inferer/-/ast-metadata-inferer-0.7.0.tgz", - "integrity": "sha512-OkMLzd8xelb3gmnp6ToFvvsHLtS6CbagTkFQvQ+ZYFe3/AIl9iKikNR9G7pY3GfOR/2Xc222hwBjzI7HLkE76Q==", + "version": "0.8.0", + "resolved": "https://registry.npmjs.org/ast-metadata-inferer/-/ast-metadata-inferer-0.8.0.tgz", + "integrity": "sha512-jOMKcHht9LxYIEQu+RVd22vtgrPaVCtDRQ/16IGmurdzxvYbDd5ynxjnyrzLnieG96eTcAyaoj/wN/4/1FyyeA==", "dev": true, "requires": { - "@mdn/browser-compat-data": "^3.3.14" + "@mdn/browser-compat-data": "^5.2.34" }, "dependencies": { "@mdn/browser-compat-data": { - "version": "3.3.14", - "resolved": "https://registry.npmjs.org/@mdn/browser-compat-data/-/browser-compat-data-3.3.14.tgz", - "integrity": "sha512-n2RC9d6XatVbWFdHLimzzUJxJ1KY8LdjqrW6YvGPiRmsHkhOUx74/Ct10x5Yo7bC/Jvqx7cDEW8IMPv/+vwEzA==", + "version": "5.5.22", + "resolved": "https://registry.npmjs.org/@mdn/browser-compat-data/-/browser-compat-data-5.5.22.tgz", + "integrity": "sha512-2v+HeCb1J4tAi4M9zMR1AtxMBA08q8HMDXbJ1H64sFpXhTU/8W2kBBjTL9TkUQiHaJDFFU6kAFBlsfslP253WA==", "dev": true } } @@ -14165,15 +14171,15 @@ } }, "browserslist": { - "version": "4.21.4", - "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.21.4.tgz", - "integrity": "sha512-CBHJJdDmgjl3daYjN5Cp5kbTf1mUhZoS+beLklHIvkOWscs83YAhLlF3Wsh/lciQYAcbBJgTOD44VtG31ZM4Hw==", + "version": "4.23.0", + "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.23.0.tgz", + "integrity": "sha512-QW8HiM1shhT2GuzkvklfjcKDiWFXHOeFCIA/huJPwHsslwcydgk7X+z2zXpEijP98UCY7HbubZt5J2Zgvf0CaQ==", "dev": true, "requires": { - "caniuse-lite": "^1.0.30001400", - "electron-to-chromium": "^1.4.251", - "node-releases": "^2.0.6", - "update-browserslist-db": "^1.0.9" + "caniuse-lite": "^1.0.30001587", + "electron-to-chromium": "^1.4.668", + "node-releases": "^2.0.14", + "update-browserslist-db": "^1.0.13" } }, "buffer": { @@ -14274,9 +14280,9 @@ } }, "caniuse-lite": { - "version": "1.0.30001406", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001406.tgz", - "integrity": "sha512-bWTlaXUy/rq0BBtYShc/jArYfBPjEV95euvZ8JVtO43oQExEN/WquoqpufFjNu4kSpi5cy5kMbNvzztWDfv1Jg==", + "version": "1.0.30001612", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001612.tgz", + "integrity": "sha512-lFgnZ07UhaCcsSZgWW0K5j4e69dK1u/ltrL9lTUiFOwNHs12S3UMIEYgBV0Z6C6hRDev7iRnMzzYmKabYdXF9g==", "dev": true }, "chai": { @@ -14577,12 +14583,6 @@ } } }, - "core-js": { - "version": "3.27.2", - "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.27.2.tgz", - "integrity": "sha512-9ashVQskuh5AZEZ1JdQWp1GqSoC1e1G87MzRqg2gIfVAQ7Qn9K+uFj8EcniUFA4P2NLZfV+TOlX1SzoKfo+s7w==", - "dev": true - }, "core-js-compat": { "version": "3.25.2", "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.25.2.tgz", @@ -14951,9 +14951,9 @@ } }, "electron-to-chromium": { - "version": "1.4.254", - "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.254.tgz", - "integrity": "sha512-Sh/7YsHqQYkA6ZHuHMy24e6TE4eX6KZVsZb9E/DvU1nQRIrH4BflO/4k+83tfdYvDl+MObvlqHPRICzEdC9c6Q==", + "version": "1.4.746", + "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.746.tgz", + "integrity": "sha512-jeWaIta2rIG2FzHaYIhSuVWqC6KJYo7oSBX4Jv7g+aVujKztfvdpf+n6MGwZdC5hQXbax4nntykLH2juIQrfPg==", "dev": true }, "emoji-regex": { @@ -15368,21 +15368,26 @@ "requires": {} }, "eslint-plugin-compat": { - "version": "4.0.2", - "resolved": "https://registry.npmjs.org/eslint-plugin-compat/-/eslint-plugin-compat-4.0.2.tgz", - "integrity": "sha512-xqvoO54CLTVaEYGMzhu35Wzwk/As7rCvz/2dqwnFiWi0OJccEtGIn+5qq3zqIu9nboXlpdBN579fZcItC73Ycg==", + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/eslint-plugin-compat/-/eslint-plugin-compat-4.2.0.tgz", + "integrity": "sha512-RDKSYD0maWy5r7zb5cWQS+uSPc26mgOzdORJ8hxILmWM7S/Ncwky7BcAtXVY5iRbKjBdHsWU8Yg7hfoZjtkv7w==", "dev": true, "requires": { - "@mdn/browser-compat-data": "^4.1.5", - "ast-metadata-inferer": "^0.7.0", - "browserslist": "^4.16.8", - "caniuse-lite": "^1.0.30001304", - "core-js": "^3.16.2", + "@mdn/browser-compat-data": "^5.3.13", + "ast-metadata-inferer": "^0.8.0", + "browserslist": "^4.21.10", + "caniuse-lite": "^1.0.30001524", "find-up": "^5.0.0", - "lodash.memoize": "4.1.2", - "semver": "7.3.5" + "lodash.memoize": "^4.1.2", + "semver": "^7.5.4" }, "dependencies": { + "@mdn/browser-compat-data": { + "version": "5.5.22", + "resolved": "https://registry.npmjs.org/@mdn/browser-compat-data/-/browser-compat-data-5.5.22.tgz", + "integrity": "sha512-2v+HeCb1J4tAi4M9zMR1AtxMBA08q8HMDXbJ1H64sFpXhTU/8W2kBBjTL9TkUQiHaJDFFU6kAFBlsfslP253WA==", + "dev": true + }, "find-up": { "version": "5.0.0", "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz", @@ -15427,9 +15432,9 @@ "dev": true }, "semver": { - "version": "7.3.5", - "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.5.tgz", - "integrity": "sha512-PoeGJYh8HK4BTO/a9Tf6ZG3veo/A7ZVsYrSA6J8ny9nb3B1VrpkuN+z9OE5wfE5p6H4LchYZsegiQgbJD94ZFQ==", + "version": "7.6.0", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.0.tgz", + "integrity": "sha512-EnwXhrlwXMk9gKu5/flx5sv/an57AkRplG3hTK68W7FRDN+k+OWBj65M7719OkA82XLBxrcX0KSHj+X5COhOVg==", "dev": true, "requires": { "lru-cache": "^6.0.0" @@ -17680,9 +17685,9 @@ } }, "node-releases": { - "version": "2.0.6", - "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.6.tgz", - "integrity": "sha512-PiVXnNuFm5+iYkLBNeq5211hvO38y63T0i2KKh2KnUs3RpzJ+JtODFjkD8yjLwnDkTYF1eKXheUwdssR+NRZdg==", + "version": "2.0.14", + "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.14.tgz", + "integrity": "sha512-y10wOWt8yZpqXmOgRo77WaHEmhYQYGNA6y421PKsKYWEK8aW+cqAphborZDhqfyKrbZEN92CN1X2KbafY2s7Yw==", "dev": true }, "normalize-package-data": { @@ -20026,9 +20031,9 @@ "dev": true }, "update-browserslist-db": { - "version": "1.0.9", - "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.9.tgz", - "integrity": "sha512-/xsqn21EGVdXI3EXSum1Yckj3ZVZugqyOZQ/CxYPBD/R+ko9NSUScf8tFF4dOKY+2pvSSJA/S+5B8s4Zr4kyvg==", + "version": "1.0.13", + "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.13.tgz", + "integrity": "sha512-xebP81SNcPuNpPP3uzeW1NYXxI3rxyJzF3pD6sH4jE7o/IX+WtSpwnVU+qIsDPyk0d3hmFQ7mjqc6AtV604hbg==", "dev": true, "requires": { "escalade": "^3.1.1", diff --git a/package.json b/package.json index b594d626cc..ce3f7c824f 100644 --- a/package.json +++ b/package.json @@ -45,7 +45,7 @@ "eslint-config-airbnb-base": "15.0.0", "eslint-nibble": "^8.1.0", "eslint-plugin-chai-friendly": "^0.7.2", - "eslint-plugin-compat": "^4.0.2", + "eslint-plugin-compat": "^4.2.0", "eslint-plugin-ecmalist": "^1.0.8", "eslint-plugin-import": "2.25.4", "eslint-plugin-react-hooks": "^4.6.0", From 13320310c0a7474144744e346bbd9fe71fc1be75 Mon Sep 17 00:00:00 2001 From: Ruchika Sinha <69535463+Ruchika4@users.noreply.github.com> Date: Thu, 25 Apr 2024 10:16:46 -0700 Subject: [PATCH 3/3] Revert "MWPW-144549 CTA alignment for Text, Icon, and Media Blocks" (#2207) Revert "MWPW-144549 CTA alignment for Text, Icon, and Media Blocks (#2098)" This reverts commit 95d6ad6eac6599ad64769815b3aebfc7059c9ecd. --- libs/blocks/icon-block/icon-block.css | 44 ++------------------- libs/blocks/icon-block/icon-block.js | 9 ----- libs/blocks/media/media.css | 48 ----------------------- libs/blocks/media/media.js | 9 ----- libs/blocks/text/text.css | 37 +---------------- libs/blocks/text/text.js | 7 ---- 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 | 11 +----- 12 files changed, 8 insertions(+), 229 deletions(-) diff --git a/libs/blocks/icon-block/icon-block.css b/libs/blocks/icon-block/icon-block.css index 22d9eae5ef..2b50032e0c 100644 --- a/libs/blocks/icon-block/icon-block.css +++ b/libs/blocks/icon-block/icon-block.css @@ -36,12 +36,11 @@ .icon-block .foreground { position: relative; text-align: center; - width: 100%; } .icon-block .foreground .text-content { display: flex; - flex-direction: column; + flex-wrap: wrap; align-content: center; width: 100%; } @@ -168,11 +167,6 @@ 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); } @@ -252,18 +246,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; } -.icon-block .cta-container .action-area { - width: 100%; -} - .icon-block.full-width .foreground .text-content .action-area { justify-content: center; } @@ -312,11 +298,6 @@ margin: unset; } -.section[class*="-up"] .icon-block .foreground { - display: flex; - align-self: stretch; -} - [class*="-up"] .icon-block.bio.inline .foreground { max-width: unset; width: unset; @@ -345,27 +326,6 @@ line-height: var(--type-body-m-lh); } -.section[class*="-up"] .icon-block { - display: flex; - align-self: stretch; -} - -.icon-block .cta-container { - 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; - justify-content: flex-end; - flex-direction: column; - width: 100%; -} - @media screen and (min-width: 600px) and (max-width: 1200px) { .icon-block .foreground .icon-area { max-width: 234px; @@ -468,6 +428,8 @@ } .icon-block.vertical .foreground .text-content { + 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 b7163a1f3d..713f2a4012 100644 --- a/libs/blocks/icon-block/icon-block.js +++ b/libs/blocks/icon-block/icon-block.js @@ -75,15 +75,6 @@ function decorateContent(el) { if (secondColumn.children.length === 1) el.classList.add('items-center'); el.querySelector('.foreground .text-content').append(secondColumn); } - const lastActionArea = el.querySelector('.action-area:last-of-type'); - if (lastActionArea) { - const div = createTag('div', { class: 'cta-container' }); - lastActionArea.insertAdjacentElement('afterend', div); - if (lastActionArea.previousElementSibling.className.includes('action-area')) { - div.append(lastActionArea.previousElementSibling); - } - div.append(lastActionArea); - } } } diff --git a/libs/blocks/media/media.css b/libs/blocks/media/media.css index 71e2670a01..0ae3ca5ed8 100644 --- a/libs/blocks/media/media.css +++ b/libs/blocks/media/media.css @@ -70,7 +70,6 @@ display: flex; gap: var(--spacing-s); align-items: flex-start; - width: 100%; } .media .text .icon-area { @@ -255,49 +254,6 @@ div[class*="-up"] .media .foreground > .media-row { height: var(--icon-size-xxl); } -/* Text Alignment */ -.section[class*="-up"] .media:not(.media-reverse-mobile, .qr-code) { - display: flex; - align-self: stretch; -} - -.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, .qr-code) .foreground > div.media-row { - display: flex; - flex-direction: column; - width: 100%; -} - -.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, .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, .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, .qr-code) .cta-container { - display: flex; - flex-direction: column; - justify-content: flex-end; - width: 100%; - height: 100%; -} - @media screen and (min-width: 600px) { .media > .foreground .media-row { gap: var(--spacing-m); @@ -362,10 +318,6 @@ div[class*="-up"] .media .foreground > .media-row { .media .icon-stack-area { grid-template-columns: repeat(2, 1fr); } - - .section[class*="-up"] .media:not(.media-reverse-mobile) .foreground > div.media-row { - gap: 0; - } } @media screen and (min-width: 1200px) { diff --git a/libs/blocks/media/media.js b/libs/blocks/media/media.js index 8c8ea3d3c2..63553f4a1a 100644 --- a/libs/blocks/media/media.js +++ b/libs/blocks/media/media.js @@ -87,15 +87,6 @@ export default function init(el) { link.className = 'body-xxs'; }); } - const lastActionArea = el.querySelector('.action-area:last-of-type'); - if (lastActionArea) { - const div = createTag('div', { class: 'cta-container' }); - lastActionArea.insertAdjacentElement('afterend', div); - if (lastActionArea.previousElementSibling.className.includes('icon-stack-area')) { - div.append(lastActionArea.previousElementSibling); - } - div.append(lastActionArea); - } container.append(row); }); diff --git a/libs/blocks/text/text.css b/libs/blocks/text/text.css index f27314a3c3..4fd3abcfa5 100644 --- a/libs/blocks/text/text.css +++ b/libs/blocks/text/text.css @@ -16,7 +16,6 @@ .text-block [class^="detail"] { margin: 0 0 var(--spacing-xxs) 0; } -.text-block .cta-container, .text-block p.action-area { margin-top: var(--spacing-s); } .text-block div > *:last-child { margin-bottom: 0; } @@ -63,10 +62,6 @@ align-items: center; } -.text-block .cta-container .action-area { - width: 100%; -} - .text-block hr { border-color: #e1e1e1; border-style: solid; @@ -196,39 +191,9 @@ display: none; } -/* Text Alignment */ -.section[class*="-up"] .text-block:not(.legal, .link-farm) { - display: flex; - align-self: stretch; -} - -.section[class*="-up"] .text-block:not(.legal, .link-farm) .foreground { - display: flex; - align-self: stretch; - width: 100%; -} - -.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:not(.legal, .link-farm) .cta-container { - display: flex; - align-items: flex-end; - width: 100%; - height: 100%; -} - /* Tablet up */ @media screen and (min-width: 600px) { + .inset.text-block .foreground::before { display: none; } diff --git a/libs/blocks/text/text.js b/libs/blocks/text/text.js index c6f14eeea3..315215d3ba 100644 --- a/libs/blocks/text/text.js +++ b/libs/blocks/text/text.js @@ -110,11 +110,4 @@ export default function init(el) { el.classList.add(...helperClasses); decorateTextOverrides(el); if (!hasLinkFarm) decorateMultiViewport(el); - - const lastActionArea = el.querySelector('.action-area:last-of-type'); - if (lastActionArea) { - const div = createTag('div', { class: 'cta-container' }); - lastActionArea.insertAdjacentElement('afterend', div); - div.append(lastActionArea); - } } diff --git a/test/blocks/icon-block/icon-block.test.js b/test/blocks/icon-block/icon-block.test.js index 5a1a42ba1b..4f0f8241f2 100644 --- a/test/blocks/icon-block/icon-block.test.js +++ b/test/blocks/icon-block/icon-block.test.js @@ -43,14 +43,4 @@ 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 d3526ba7c5..5061440e60 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 9d79e7e2ae..9b662fedd5 100644 --- a/test/blocks/media/media.test.js +++ b/test/blocks/media/media.test.js @@ -28,10 +28,6 @@ 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', () => { @@ -58,10 +54,6 @@ 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', () => { @@ -112,11 +104,4 @@ 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 695436456d..63345703a0 100644 --- a/test/blocks/media/mocks/body.html +++ b/test/blocks/media/mocks/body.html @@ -141,33 +141,4 @@

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 f6ae6bb7ac..210bd8587f 100644 --- a/test/blocks/text/mocks/body.html +++ b/test/blocks/text/mocks/body.html @@ -185,15 +185,3 @@

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 1db68d1d13..de4f16ee13 100644 --- a/test/blocks/text/text.test.js +++ b/test/blocks/text/text.test.js @@ -62,20 +62,11 @@ 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; - }); - }); });