From a04a6f2f2d2c4e18b2128a82046382c188d5d199 Mon Sep 17 00:00:00 2001 From: Ruchika Sinha <69535463+Ruchika4@users.noreply.github.com> Date: Wed, 13 Dec 2023 13:12:18 -0800 Subject: [PATCH 01/10] MWPW-140345 --- libs/blocks/media/media.js | 10 ++-------- 1 file changed, 2 insertions(+), 8 deletions(-) diff --git a/libs/blocks/media/media.js b/libs/blocks/media/media.js index 457205f072..e7ec20f246 100644 --- a/libs/blocks/media/media.js +++ b/libs/blocks/media/media.js @@ -1,7 +1,7 @@ /* media - consonant v6 */ import { decorateBlockBg, decorateBlockText, getBlockSize, decorateTextOverrides, applyHoverPlay } from '../../utils/decorate.js'; -import { createTag, loadStyle, getConfig } from '../../utils/utils.js'; +import { createTag } from '../../utils/utils.js'; const blockTypeSizes = { small: ['xs', 's', 'm'], @@ -20,12 +20,6 @@ function decorateAvatar(el) { } export default function init(el) { - const { miloLibs, codeRoot } = getConfig(); - const regex = /rounded-corners/g; - const base = miloLibs || codeRoot; - if ([...el.classList].some((c) => regex.test(c))) { - loadStyle(`${base}/styles/rounded-corners.css`); - } el.classList.add('con-block'); let rows = el.querySelectorAll(':scope > div'); if (rows.length > 1) { @@ -72,7 +66,7 @@ export default function init(el) { // qr code if (row.closest('.qr-code')) { - const imgQRCode = row.querySelector('.text > p.body-s > picture > img'); + const imgQRCode = row.querySelector('.text img'); if (imgQRCode) { imgQRCode.classList.add('qr-code-img'); } From 9d02874899e0e4ef6b5545a8f6feb23fb39e69f3 Mon Sep 17 00:00:00 2001 From: Ruchika Sinha <69535463+Ruchika4@users.noreply.github.com> Date: Wed, 13 Dec 2023 13:13:01 -0800 Subject: [PATCH 02/10] MWPW-140345 --- libs/blocks/media/media.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/libs/blocks/media/media.css b/libs/blocks/media/media.css index bb39890a08..c02803c486 100644 --- a/libs/blocks/media/media.css +++ b/libs/blocks/media/media.css @@ -341,8 +341,8 @@ div[class*="-up"] .media .foreground > .media-row { .media.qr-code img.qr-code-img { display: flex; - width: 150px; - height: 170px; + width: 140px; + height: 140px; } .media.qr-code .qr-button-container { From 03c55f28bb6a88460c6fff849f569b80ff464d21 Mon Sep 17 00:00:00 2001 From: Ruchika Sinha <69535463+Ruchika4@users.noreply.github.com> Date: Wed, 13 Dec 2023 13:14:11 -0800 Subject: [PATCH 03/10] MWPW-140345 --- test/blocks/media/media.test.js | 26 ++++++++++++++++++++++---- 1 file changed, 22 insertions(+), 4 deletions(-) diff --git a/test/blocks/media/media.test.js b/test/blocks/media/media.test.js index db2ba7ec6e..9f681d2bda 100644 --- a/test/blocks/media/media.test.js +++ b/test/blocks/media/media.test.js @@ -1,4 +1,4 @@ -import { readFile } from '@web/test-runner-commands'; +import { readFile, setViewport } from '@web/test-runner-commands'; import { expect } from '@esm-bundle/chai'; document.body.innerHTML = await readFile({ path: './mocks/body.html' }); @@ -57,15 +57,33 @@ describe('media', () => { describe('media with qr-code', () => { it('does have qr-code image', () => { const qrCodeImg = medias[5].querySelector('img.qr-code-img'); - expect(qrCodeImg).to.exist; + expect(window.getComputedStyle(qrCodeImg).getPropertyValue('visibility') === 'hidden'); }); it('does have CTA for google-play', () => { const googlePlayCta = medias[5].querySelector('a.google-play'); - expect(googlePlayCta).to.exist; + expect(window.getComputedStyle(googlePlayCta).getPropertyValue('visibility') !== 'hidden'); }); it('does have CTA for app-store', () => { const appStoreCta = medias[5].querySelector('a.app-store'); - expect(appStoreCta).to.exist; + expect(window.getComputedStyle(appStoreCta).getPropertyValue('visibility') !== 'hidden'); + }); + it('mobile view has google-play and app-store CTA and no qr code image', async () => { + await setViewport({ width: 600, height: 100 }); + const qrCodeImg = medias[5].querySelector('img.qr-code-img'); + const googlePlayCta = medias[5].querySelector('a.google-play'); + const appStoreCta = medias[5].querySelector('a.app-store'); + expect(window.getComputedStyle(qrCodeImg).getPropertyValue('visibility') !== 'hidden'); + expect(window.getComputedStyle(googlePlayCta).getPropertyValue('visibility') === 'hidden'); + expect(window.getComputedStyle(appStoreCta).getPropertyValue('visibility') === 'hidden'); + }); + it('tablet view has google-play and app-store CTA and no qr code image', async () => { + await setViewport({ width: 1199, height: 100 }); + const qrCodeImg = medias[5].querySelector('img.qr-code-img'); + const googlePlayCta = medias[5].querySelector('a.google-play'); + const appStoreCta = medias[5].querySelector('a.app-store'); + expect(window.getComputedStyle(qrCodeImg).getPropertyValue('visibility') !== 'hidden'); + expect(window.getComputedStyle(googlePlayCta).getPropertyValue('visibility') === 'hidden'); + expect(window.getComputedStyle(appStoreCta).getPropertyValue('visibility') === 'hidden'); }); }); describe('with bio variant', () => { From 62188e54dac5a3cc51a93d9c2d542d07e30d4979 Mon Sep 17 00:00:00 2001 From: Ruchika Sinha <69535463+Ruchika4@users.noreply.github.com> Date: Wed, 13 Dec 2023 13:17:02 -0800 Subject: [PATCH 04/10] Update media.js --- libs/blocks/media/media.js | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/libs/blocks/media/media.js b/libs/blocks/media/media.js index e7ec20f246..c35ffccf58 100644 --- a/libs/blocks/media/media.js +++ b/libs/blocks/media/media.js @@ -1,7 +1,7 @@ /* media - consonant v6 */ import { decorateBlockBg, decorateBlockText, getBlockSize, decorateTextOverrides, applyHoverPlay } from '../../utils/decorate.js'; -import { createTag } from '../../utils/utils.js'; +import { createTag, loadStyle, getConfig } from '../../utils/utils.js'; const blockTypeSizes = { small: ['xs', 's', 'm'], @@ -20,6 +20,12 @@ function decorateAvatar(el) { } export default function init(el) { + const { miloLibs, codeRoot } = getConfig(); + const regex = /rounded-corners/g; + const base = miloLibs || codeRoot; + if ([...el.classList].some((c) => regex.test(c))) { + loadStyle(`${base}/styles/rounded-corners.css`); + } el.classList.add('con-block'); let rows = el.querySelectorAll(':scope > div'); if (rows.length > 1) { From 2827d1b3fa1bc6fa0f85667defb84698cabb3e7f Mon Sep 17 00:00:00 2001 From: Ruchika Sinha <69535463+Ruchika4@users.noreply.github.com> Date: Thu, 14 Dec 2023 13:02:11 -0800 Subject: [PATCH 05/10] Update media.css --- libs/blocks/media/media.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/libs/blocks/media/media.css b/libs/blocks/media/media.css index c02803c486..de44444ddc 100644 --- a/libs/blocks/media/media.css +++ b/libs/blocks/media/media.css @@ -110,7 +110,7 @@ div[class*="-up"] .media .foreground > .media-row { .media ul { padding-left: 20px; margin-top: var(--spacing-xs); - margin-bottom: var(--spacing-xs); + margin-bottom: var(--spacing-s); } .media ul > li::before { From 13ced1aec5fdd0b3bbb9a27607e76b314ee0ea44 Mon Sep 17 00:00:00 2001 From: Ruchika Sinha <69535463+Ruchika4@users.noreply.github.com> Date: Thu, 14 Dec 2023 13:10:39 -0800 Subject: [PATCH 06/10] Update unit test --- test/blocks/media/media.test.js | 40 ++++++++++++++++++++------------- 1 file changed, 25 insertions(+), 15 deletions(-) diff --git a/test/blocks/media/media.test.js b/test/blocks/media/media.test.js index 9f681d2bda..4ebc51d089 100644 --- a/test/blocks/media/media.test.js +++ b/test/blocks/media/media.test.js @@ -1,6 +1,7 @@ import { readFile, setViewport } from '@web/test-runner-commands'; import { expect } from '@esm-bundle/chai'; +document.head.innerHTML = ""; document.body.innerHTML = await readFile({ path: './mocks/body.html' }); const { default: init } = await import('../../../libs/blocks/media/media.js'); describe('media', () => { @@ -57,33 +58,42 @@ describe('media', () => { describe('media with qr-code', () => { it('does have qr-code image', () => { const qrCodeImg = medias[5].querySelector('img.qr-code-img'); - expect(window.getComputedStyle(qrCodeImg).getPropertyValue('visibility') === 'hidden'); + expect(qrCodeImg).to.exist; }); it('does have CTA for google-play', () => { const googlePlayCta = medias[5].querySelector('a.google-play'); - expect(window.getComputedStyle(googlePlayCta).getPropertyValue('visibility') !== 'hidden'); + expect(googlePlayCta).to.exist; }); it('does have CTA for app-store', () => { const appStoreCta = medias[5].querySelector('a.app-store'); - expect(window.getComputedStyle(appStoreCta).getPropertyValue('visibility') !== 'hidden'); + expect(appStoreCta).to.exist; }); - it('mobile view has google-play and app-store CTA and no qr code image', async () => { + it('desktop view has visibile qr code image and no google-play and app-store CTA', async () => { + await setViewport({ width: 1200, height: 100 }); + const qrCodeImg = medias[5].querySelector('img.qr-code-img'); + const qrCTA = medias[5].querySelectorAll('.qr-button-container'); + expect(window.getComputedStyle(qrCodeImg).getPropertyValue('display')).not.to.be.equal('none'); + qrCTA.forEach(async (cta) => { + expect(window.getComputedStyle(cta).getPropertyValue('display')).to.be.equal('none'); + }); + }); + it('mobile view has visibile google-play and app-store CTA and no qr code image', async () => { await setViewport({ width: 600, height: 100 }); const qrCodeImg = medias[5].querySelector('img.qr-code-img'); - const googlePlayCta = medias[5].querySelector('a.google-play'); - const appStoreCta = medias[5].querySelector('a.app-store'); - expect(window.getComputedStyle(qrCodeImg).getPropertyValue('visibility') !== 'hidden'); - expect(window.getComputedStyle(googlePlayCta).getPropertyValue('visibility') === 'hidden'); - expect(window.getComputedStyle(appStoreCta).getPropertyValue('visibility') === 'hidden'); + const qrCTA = medias[5].querySelectorAll('.qr-button-container'); + expect(window.getComputedStyle(qrCodeImg).getPropertyValue('display')).to.be.equal('none'); + qrCTA.forEach(async (cta) => { + expect(window.getComputedStyle(cta).getPropertyValue('display')).not.to.be.equal('none'); + }); }); - it('tablet view has google-play and app-store CTA and no qr code image', async () => { + it('tablet view has visibile google-play and app-store CTA and no qr code image', async () => { await setViewport({ width: 1199, height: 100 }); const qrCodeImg = medias[5].querySelector('img.qr-code-img'); - const googlePlayCta = medias[5].querySelector('a.google-play'); - const appStoreCta = medias[5].querySelector('a.app-store'); - expect(window.getComputedStyle(qrCodeImg).getPropertyValue('visibility') !== 'hidden'); - expect(window.getComputedStyle(googlePlayCta).getPropertyValue('visibility') === 'hidden'); - expect(window.getComputedStyle(appStoreCta).getPropertyValue('visibility') === 'hidden'); + const qrCTA = medias[5].querySelectorAll('.qr-button-container'); + expect(window.getComputedStyle(qrCodeImg).getPropertyValue('display')).to.be.equal('none'); + qrCTA.forEach(async (cta) => { + expect(window.getComputedStyle(cta).getPropertyValue('display')).not.to.be.equal('none'); + }); }); }); describe('with bio variant', () => { From 3f8b403eb0d14da669c0e93a1f818d7e9e77981f Mon Sep 17 00:00:00 2001 From: Ruchika Sinha <69535463+Ruchika4@users.noreply.github.com> Date: Thu, 14 Dec 2023 13:48:53 -0800 Subject: [PATCH 07/10] Update qr block css --- libs/blocks/media/media.css | 2 ++ 1 file changed, 2 insertions(+) diff --git a/libs/blocks/media/media.css b/libs/blocks/media/media.css index de44444ddc..e9710ec7f6 100644 --- a/libs/blocks/media/media.css +++ b/libs/blocks/media/media.css @@ -170,6 +170,7 @@ div[class*="-up"] .media .foreground > .media-row { padding-bottom: 0; padding-top: 0; display: inline-flex; + margin-top: var(--spacing-xxs); } .media.qr-code .google-play { @@ -343,6 +344,7 @@ div[class*="-up"] .media .foreground > .media-row { display: flex; width: 140px; height: 140px; + margin-top: var(--spacing-s); } .media.qr-code .qr-button-container { From faca2a4d779829869fb45c7ae4fa664daf837961 Mon Sep 17 00:00:00 2001 From: Ruchika Sinha <69535463+Ruchika4@users.noreply.github.com> Date: Thu, 14 Dec 2023 13:54:06 -0800 Subject: [PATCH 08/10] Update media.css --- libs/blocks/media/media.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/libs/blocks/media/media.css b/libs/blocks/media/media.css index e9710ec7f6..5b941aca15 100644 --- a/libs/blocks/media/media.css +++ b/libs/blocks/media/media.css @@ -110,7 +110,7 @@ div[class*="-up"] .media .foreground > .media-row { .media ul { padding-left: 20px; margin-top: var(--spacing-xs); - margin-bottom: var(--spacing-s); + margin-bottom: var(--spacing-xs); } .media ul > li::before { From b070d98c32c8aa3699496d98d00001d7cb82cb2f Mon Sep 17 00:00:00 2001 From: Ruchika Sinha <69535463+Ruchika4@users.noreply.github.com> Date: Tue, 2 Jan 2024 09:13:53 -0800 Subject: [PATCH 09/10] Update media.test.js --- test/blocks/media/media.test.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/test/blocks/media/media.test.js b/test/blocks/media/media.test.js index 4ebc51d089..47ffacd93e 100644 --- a/test/blocks/media/media.test.js +++ b/test/blocks/media/media.test.js @@ -73,7 +73,7 @@ describe('media', () => { const qrCodeImg = medias[5].querySelector('img.qr-code-img'); const qrCTA = medias[5].querySelectorAll('.qr-button-container'); expect(window.getComputedStyle(qrCodeImg).getPropertyValue('display')).not.to.be.equal('none'); - qrCTA.forEach(async (cta) => { + qrCTA.forEach((cta) => { expect(window.getComputedStyle(cta).getPropertyValue('display')).to.be.equal('none'); }); }); @@ -82,7 +82,7 @@ describe('media', () => { const qrCodeImg = medias[5].querySelector('img.qr-code-img'); const qrCTA = medias[5].querySelectorAll('.qr-button-container'); expect(window.getComputedStyle(qrCodeImg).getPropertyValue('display')).to.be.equal('none'); - qrCTA.forEach(async (cta) => { + qrCTA.forEach((cta) => { expect(window.getComputedStyle(cta).getPropertyValue('display')).not.to.be.equal('none'); }); }); @@ -91,7 +91,7 @@ describe('media', () => { const qrCodeImg = medias[5].querySelector('img.qr-code-img'); const qrCTA = medias[5].querySelectorAll('.qr-button-container'); expect(window.getComputedStyle(qrCodeImg).getPropertyValue('display')).to.be.equal('none'); - qrCTA.forEach(async (cta) => { + qrCTA.forEach((cta) => { expect(window.getComputedStyle(cta).getPropertyValue('display')).not.to.be.equal('none'); }); }); From 132c6e9763ff78c5f4d53770f5960e208289800a Mon Sep 17 00:00:00 2001 From: Ruchika Sinha <69535463+Ruchika4@users.noreply.github.com> Date: Fri, 5 Jan 2024 13:29:21 -0800 Subject: [PATCH 10/10] Update media.test.js --- test/blocks/media/media.test.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/test/blocks/media/media.test.js b/test/blocks/media/media.test.js index 47ffacd93e..28abd3c1b9 100644 --- a/test/blocks/media/media.test.js +++ b/test/blocks/media/media.test.js @@ -72,27 +72,27 @@ describe('media', () => { await setViewport({ width: 1200, height: 100 }); const qrCodeImg = medias[5].querySelector('img.qr-code-img'); const qrCTA = medias[5].querySelectorAll('.qr-button-container'); - expect(window.getComputedStyle(qrCodeImg).getPropertyValue('display')).not.to.be.equal('none'); + expect(window.getComputedStyle(qrCodeImg).getPropertyValue('display')).not.to.equal('none'); qrCTA.forEach((cta) => { - expect(window.getComputedStyle(cta).getPropertyValue('display')).to.be.equal('none'); + expect(window.getComputedStyle(cta).getPropertyValue('display')).to.equal('none'); }); }); it('mobile view has visibile google-play and app-store CTA and no qr code image', async () => { await setViewport({ width: 600, height: 100 }); const qrCodeImg = medias[5].querySelector('img.qr-code-img'); const qrCTA = medias[5].querySelectorAll('.qr-button-container'); - expect(window.getComputedStyle(qrCodeImg).getPropertyValue('display')).to.be.equal('none'); + expect(window.getComputedStyle(qrCodeImg).getPropertyValue('display')).to.equal('none'); qrCTA.forEach((cta) => { - expect(window.getComputedStyle(cta).getPropertyValue('display')).not.to.be.equal('none'); + expect(window.getComputedStyle(cta).getPropertyValue('display')).not.to.equal('none'); }); }); it('tablet view has visibile google-play and app-store CTA and no qr code image', async () => { await setViewport({ width: 1199, height: 100 }); const qrCodeImg = medias[5].querySelector('img.qr-code-img'); const qrCTA = medias[5].querySelectorAll('.qr-button-container'); - expect(window.getComputedStyle(qrCodeImg).getPropertyValue('display')).to.be.equal('none'); + expect(window.getComputedStyle(qrCodeImg).getPropertyValue('display')).to.equal('none'); qrCTA.forEach((cta) => { - expect(window.getComputedStyle(cta).getPropertyValue('display')).not.to.be.equal('none'); + expect(window.getComputedStyle(cta).getPropertyValue('display')).not.to.equal('none'); }); }); });