From d201f3460e68d27cd44fd20e17b2abc9b1cde80a Mon Sep 17 00:00:00 2001 From: Ryan Clayton Date: Wed, 3 Jan 2024 09:43:29 -0700 Subject: [PATCH 1/8] Revert "MWPW-137523 - Allow dark quiet marquees" (#1693) Revert "MWPW-137523 - Allow dark quiet marquees (#1654)" This reverts commit 921efe5aa02f7039b9c49bfde82b959a4a8c9076. --- libs/blocks/marquee/marquee.css | 172 ++++++++++++++++++++------------ libs/blocks/marquee/marquee.js | 3 +- 2 files changed, 109 insertions(+), 66 deletions(-) diff --git a/libs/blocks/marquee/marquee.css b/libs/blocks/marquee/marquee.css index 0d5b79ee32..dc30cd4f70 100644 --- a/libs/blocks/marquee/marquee.css +++ b/libs/blocks/marquee/marquee.css @@ -8,7 +8,7 @@ min-height: 560px; } -.marquee:is(.small, .inline, .large.compact) { +.marquee.small, .marquee.quiet, .marquee.inline, .marquee.large.compact { min-height: 360px; } @@ -17,28 +17,30 @@ margin-bottom: 0; } -.marquee:is(.light, .mobile-light, .quiet, .inline) { +.marquee.light, .marquee.mobile-light, .marquee.quiet, .marquee.inline { color: var(--text-color); } -.marquee:is(.mobile-dark, .quiet.dark) { +.marquee.mobile-dark { color: var(--color-white); } -.marquee .icon-area :is(picture, a) { +.marquee .icon-area picture, +.marquee .icon-area a { display: contents; } -.marquee:is(.mobile-dark, .quiet.dark) a:is(:not(.con-button), :not(.con-button):hover) { - color: var(--link-color-dark); -} - .marquee.mobile-light a:not(.con-button) { color: var(--link-color); } -.marquee.static-links a:not(.con-button), -.static-links .marquee a:not(.con-button), +.marquee.mobile-dark a:not(.con-button), +.marquee.mobile-dark a:not(.con-button):hover { + color: var(--link-color-dark); +} + +.marquee.static-links:not(.mobile-dark) a:not(.con-button), +.static-links .marquee:not(.mobile-dark) a:not(.con-button), .marquee.static-links a:not(.con-button):hover, .static-links .marquee a:not(.con-button):hover { color: inherit; @@ -93,7 +95,8 @@ margin: 0 auto; } -.marquee .media :is(img, video) { +.marquee .media img, +.marquee .media video { display: block; width: 100%; height: auto; @@ -125,11 +128,8 @@ left: 0; } -.marquee:is(.center, .centered) :is(.foreground, .action-area) { - justify-content: center; -} - -.marquee .background :is(.tablet-only, .desktop-only) { +.marquee .background .tablet-only, +.marquee .background .desktop-only { display: none; } @@ -173,6 +173,10 @@ display: block; } +.marquee:is(.center, .centered) .icon-area img { + margin: 0 auto; +} + .marquee.large .icon-area img { height: 64px; } @@ -204,14 +208,24 @@ padding: 0; } -.marquee .text :is(.detail-l, .heading-xl, .heading-xxl) { +.marquee .text .detail-l, +.marquee .text .heading-xl, +.marquee .text .heading-xxl { margin-bottom: var(--spacing-xs); } -.marquee:is(.center, .centered) { +.marquee.center, +.marquee.centered { text-align: center; } +.marquee.center .foreground, +.marquee.center .action-area, +.marquee.centered .foreground, +.marquee.centered .action-area { + justify-content: center; +} + /* Split */ .marquee.split { flex-direction: column; @@ -223,14 +237,16 @@ margin: 0; } -.marquee.split .media :is(img, video) { +.marquee.split .media img, +.marquee.split .media video { width: 100%; height: 100%; object-fit: cover; max-height: 360px; } -.marquee:is(.split, .small.split) .foreground { +.marquee.split .foreground, +.marquee.small.split .foreground { padding: var(--spacing-m) 0; } @@ -318,11 +334,8 @@ gap: var(--spacing-s); } - .marquee:is(.split, .split.small, .split.large) .media :is(img, video) { - max-height: initial; - } - - .marquee .background :is(.mobile-only, .desktop-only) { + .marquee .background .mobile-only, + .marquee .background .desktop-only { display: none; } @@ -345,12 +358,30 @@ .marquee.tablet-dark { color: var(--color-white); } + + .marquee.split.large .text { + margin: 0; + } + + .marquee.quiet .foreground .text { + max-width: 600px; + } + + .marquee.center .foreground .text, + .marquee.centered .foreground .text { + margin: 0 auto; + } + + .marquee.quiet.large .foreground .text { + max-width: 800px; + } .marquee.tablet-light a:not(.con-button) { color: var(--link-color); } - .marquee.tablet-dark a:is(:not(.con-button), :not(.con-button):hover) { + .marquee.tablet-dark a:not(.con-button), + .marquee.tablet-dark a:not(.con-button):hover { color: var(--link-color-dark); } @@ -381,7 +412,7 @@ text-decoration: none; } -.marquee .media { + .marquee .media { width: var(--grid-container-width); /* 10 grid / 83% */ } @@ -396,22 +427,6 @@ flex-direction: row; padding: var(--spacing-xl) 0; } - - .marquee:is(.center, .centered) .foreground .text { - margin: 0 auto; - } - - .marquee.split.large .text { - margin: 0; - } - - .marquee.quiet .foreground .text { - max-width: 600px; - } - - .marquee.quiet.large .foreground .text { - max-width: 800px; - } .marquee.split .foreground.container .text { max-width: calc(50% - var(--grid-column-width)); @@ -452,8 +467,18 @@ .marquee.split.row-reversed .foreground.container { justify-content: flex-end; } + + .marquee.split .media img, + .marquee.split.small .media img, + .marquee.split.large .media img, + .marquee.split .media video, + .marquee.split.small .media video, + .marquee.split.large .media video{ + max-height: initial; + } - .marquee.split .media.bleed :is(picture, video) { + .marquee.split .media.bleed picture, + .marquee.split .media.bleed video { height: 100%; object-fit: fill; } @@ -478,13 +503,8 @@ min-height: 360px; } - .marquee .media :is(img, video) { - width: 100%; - max-width: initial; - min-height: 150px; - } - - .marquee .background :is(.mobile-only, .tablet-only) { + .marquee .background .mobile-only, + .marquee .background .tablet-only { display: none; } @@ -507,8 +527,9 @@ .marquee.desktop-light a:not(.con-button) { color: var(--link-color); } - - .marquee.desktop-dark a:is(:not(.con-button), :not(.con-button):hover) { + + .marquee.desktop-dark a:not(.con-button), + .marquee.desktop-dark a:not(.con-button):hover { color: var(--link-color-dark); } @@ -550,11 +571,30 @@ gap: 100px; /* 1 column */ } - :is(.marquee, .marquee.small, .marquee.large) .text { + .marquee.small .foreground, + .marquee.split .foreground.container { + padding: 0; + } + + .marquee.quiet .foreground, + .marquee.inline .foreground, + .marquee.split .foreground { + justify-content: initial; + } + + html[dir="rtl"] .marquee .foreground { + flex-direction: row-reverse; + } + + .marquee .text, + .marquee.small .text, + .marquee.large .text { order: unset; } - :is(.marquee, .marquee.small, .marquee.large) .media { + .marquee .media, + .marquee.small .media, + .marquee.large .media { order: unset; } @@ -566,17 +606,18 @@ max-width: 600px; } - .marquee.small .foreground, - .marquee.split .foreground.container { - padding: 0; - } - - .marquee:is(.quiet, .inline, .split) .foreground { - justify-content: initial; + .marquee.quiet.center .foreground, + .marquee.inline.center .foreground, + .marquee.quiet.centered .foreground, + .marquee.inline.centered .foreground { + justify-content: center; } - .marquee:is(.quiet, .inline):is(.center, .centered) .foreground { - justify-content: center; + .marquee .media img, + .marquee .media video { + width: 100%; + max-width: initial; + min-height: 150px; } .marquee.small .text { @@ -653,7 +694,8 @@ right: auto; } - .marquee.split:is(.one-third, .one-third.large) .foreground.container .text { + .marquee.split.one-third .foreground.container .text, + .marquee.split.one-third.large .foreground.container .text { max-width: calc(33.3334% - var(--grid-column-width)); } diff --git a/libs/blocks/marquee/marquee.js b/libs/blocks/marquee/marquee.js index 24302f0f57..38a9127775 100644 --- a/libs/blocks/marquee/marquee.js +++ b/libs/blocks/marquee/marquee.js @@ -65,7 +65,8 @@ const decorateImage = (media) => { }; export default function init(el) { - if (!['light', 'quiet'].some((s) => el.classList.contains(s))) el.classList.add('dark'); + const isLight = el.classList.contains('light'); + if (!isLight) el.classList.add('dark'); const children = el.querySelectorAll(':scope > div'); const foreground = children[children.length - 1]; if (children.length > 1) { From 112c01c0847bf3fb27e5e4be731d5240be8e1545 Mon Sep 17 00:00:00 2001 From: Ruchika Sinha <69535463+Ruchika4@users.noreply.github.com> Date: Wed, 3 Jan 2024 09:13:21 -0800 Subject: [PATCH 2/8] MWPW-140052-Word break css for korean (#1675) * Update styles.css * update css to support language based korean sites too --- libs/styles/styles.css | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/libs/styles/styles.css b/libs/styles/styles.css index 7e2d9c3ffc..254b5c48d1 100644 --- a/libs/styles/styles.css +++ b/libs/styles/styles.css @@ -132,8 +132,11 @@ --font-size-multiplier: 1.25; } -:root:lang(ko-KR) { +:root:lang(ko-KR), +:root:lang(ko) { --body-font-family: adobe-clean-han-korean, 'Adobe Clean', adobe-clean, 'Trebuchet MS', sans-serif; + + word-break: keep-all; } :root:lang(ja-JP), From 4062a67c204f506ceafd753a565c987061cdeca3 Mon Sep 17 00:00:00 2001 From: Jacky Sun <67350368+JackySun9@users.noreply.github.com> Date: Wed, 3 Jan 2024 12:22:24 -0800 Subject: [PATCH 3/8] [MWPW-140706] Quiz options should use Adobe Clean and [MWPW-140499] fix multiple merch card width issue on result page (#1694) * MWPW-140499: fix multiple merch card width issue on result page (#1660) fix multiple merch card width issue on result page Co-authored-by: xiasun * MWPW-140706: Quiz options should use Adobe Clean (#1682) --------- Co-authored-by: xiasun Co-authored-by: Erich Champion --- libs/blocks/quiz-results/quiz-results.css | 2 +- libs/blocks/quiz/quiz.css | 2 ++ 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/libs/blocks/quiz-results/quiz-results.css b/libs/blocks/quiz-results/quiz-results.css index 7a414a4490..ae9ed62410 100644 --- a/libs/blocks/quiz-results/quiz-results.css +++ b/libs/blocks/quiz-results/quiz-results.css @@ -20,7 +20,7 @@ justify-content: center; width: 100%; max-width: 100%; - grid-template-columns: repeat(auto-fit,minmax(300px,max-content)); + grid-template-columns: repeat(auto-fit,300px); gap: 32px; padding-bottom: 32px; } diff --git a/libs/blocks/quiz/quiz.css b/libs/blocks/quiz/quiz.css index 44aca3fefe..a95c9ae8e7 100644 --- a/libs/blocks/quiz/quiz.css +++ b/libs/blocks/quiz/quiz.css @@ -68,6 +68,7 @@ border-radius: 0.5rem; cursor: pointer; display: flex; + font-family: inherit; margin: 0 0 16px; padding: 0; user-select: none; @@ -180,6 +181,7 @@ html[dir="rtl"] .quiz-option-icon { border: 2px solid var(--color-white); border-radius: 30px; cursor: pointer; + font-family: inherit; font-size: 14px; font-weight: 700; min-height: 32px; From e28b79ffc0be54ff40c0b98080563ab0284ca656 Mon Sep 17 00:00:00 2001 From: Rares Munteanu Date: Thu, 4 Jan 2024 11:37:07 +0100 Subject: [PATCH 4/8] [MWPW-140788] Ensure correct Gnav Promo element order (#1691) * [MWPW-140788] Ensure correct Gnav Promo element order * [MWPW-140788] Unit tests for Gnav Promo elem order --- .github/PULL_REQUEST_TEMPLATE/gnav.md | 7 +++---- .../global-navigation/utilities/menu/menu.js | 9 +++------ .../global-navigation.test.js | 20 +++++++++++++++++++ 3 files changed, 26 insertions(+), 10 deletions(-) diff --git a/.github/PULL_REQUEST_TEMPLATE/gnav.md b/.github/PULL_REQUEST_TEMPLATE/gnav.md index e9fcbce3bf..bfe33a9ba3 100644 --- a/.github/PULL_REQUEST_TEMPLATE/gnav.md +++ b/.github/PULL_REQUEST_TEMPLATE/gnav.md @@ -27,11 +27,10 @@ Resolves: [MWPW-111111](https://jira.corp.adobe.com/browse/MWPW-111111) - Before: https://main--homepage--adobecom.hlx.page/homepage/index-loggedout?martech=off - After: https://main--homepage--adobecom.hlx.page/homepage/index-loggedout?martech=off&milolibs=--milo-- -**Milo:** -- Before: https://main--milo--adobecom.hlx.page/ch_de/drafts/ramuntea/gnav-refactor?martech=off -- After: https://--milo--.hlx.page/ch_de/drafts/ramuntea/gnav-refactor?martech=off - **Blog:** - Before: https://main--blog--adobecom.hlx.page/ - After: https://main--blog--adobecom.hlx.page/?milolibs=--milo-- +**Milo:** +- Before: https://main--milo--adobecom.hlx.page/ch_de/drafts/ramuntea/gnav-refactor?martech=off +- After: https://--milo--.hlx.page/ch_de/drafts/ramuntea/gnav-refactor?martech=off diff --git a/libs/blocks/global-navigation/utilities/menu/menu.js b/libs/blocks/global-navigation/utilities/menu/menu.js index 4fc91367b5..240fe4831b 100644 --- a/libs/blocks/global-navigation/utilities/menu/menu.js +++ b/libs/blocks/global-navigation/utilities/menu/menu.js @@ -135,12 +135,9 @@ const decoratePromo = (elem, index) => { const imageElem = elem.querySelector('picture'); if (!isImageOnly) { - const cachedImageElem = imageElem && elem.removeChild(imageElem.closest(`${selectors.gnavPromo} > div`)); - const innerContainer = toFragment`
`; - - innerContainer.append(...elem.children); - elem.appendChild(innerContainer); - if (cachedImageElem) elem.appendChild(cachedImageElem); + const content = [...elem.querySelectorAll(':scope > div')] + .find((section) => !(section.querySelector('picture') instanceof HTMLElement)); + content?.classList.add('feds-promo-content'); } decorateElements({ elem, className: 'feds-promo-link', index }); diff --git a/test/blocks/global-navigation/global-navigation.test.js b/test/blocks/global-navigation/global-navigation.test.js index 433d35d206..2a9e75904f 100644 --- a/test/blocks/global-navigation/global-navigation.test.js +++ b/test/blocks/global-navigation/global-navigation.test.js @@ -562,6 +562,26 @@ describe('global navigation', () => { await createFullGlobalNavigation(); expect(document.querySelector(`${selectors.promo}${selectors.promo}--dark ${selectors.cta}`)).to.exist; }); + + it('should render promo elements in initial order', async () => { + // Initial template order is text, then image + await createFullGlobalNavigation(); + + const imgAfterTxt = document.querySelector('.feds-promo-content + .feds-promo-image'); + expect(imgAfterTxt).to.exist; + + // Switch original order to be image, then text + const template = toFragment`
`; + template.innerHTML = globalNavigationMock; + const templatePromo = template.querySelector('.gnav-promo'); + const templatePromoContent = templatePromo.firstElementChild; + templatePromoContent.remove(); + templatePromo.append(templatePromoContent); + await createFullGlobalNavigation({ globalNavigation: template.innerHTML }); + + const txtAfterImg = document.querySelector('.feds-promo-image + .feds-promo-content'); + expect(txtAfterImg).to.exist; + }); }); describe('small desktop', () => { From a13ad404b8cfba1be1046ed281cd7f5f0d69736d Mon Sep 17 00:00:00 2001 From: Okan Sahin <39759830+mokimo@users.noreply.github.com> Date: Thu, 4 Jan 2024 15:36:50 +0100 Subject: [PATCH 5/8] Fix broken gnav test (#1699) * Fix broken gnav test * Cleanup --- test/blocks/gnav/gnav.test.js | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/test/blocks/gnav/gnav.test.js b/test/blocks/gnav/gnav.test.js index 3be4c8bc33..ee6e178737 100644 --- a/test/blocks/gnav/gnav.test.js +++ b/test/blocks/gnav/gnav.test.js @@ -25,7 +25,7 @@ describe('Gnav', () => { client_id: 'milo', scope: 'gnav', }; - window.adobeIMS = { getAccessToken: () => false }; + window.adobeIMS = { getAccessToken: () => false, isSignedInUser: () => false }; }); after(() => { @@ -172,6 +172,11 @@ describe('Gnav', () => { describe('Localized Gnav', () => { before(async () => { + window.adobeid = { + client_id: 'milo', + scope: 'gnav', + }; + window.adobeIMS = { getAccessToken: () => false, isSignedInUser: () => false }; // Load Localized Gnav await loadDefaultHtml(); document.head.getElementsByTagName('meta')[0].setAttribute('content', '/test/blocks/gnav/mocks/simple-gnav'); @@ -187,6 +192,8 @@ describe('Localized Gnav', () => { setConfig(config); await loadDefaultHtml(); gnav = await mod.default(document.querySelector('header')); + delete window.adobeid; + delete window.adobeIMS; }); it('Test Gnav Localized Links', async () => { From 89c5bd73da63ad8a2308de0068915556a9b78c75 Mon Sep 17 00:00:00 2001 From: Ryan Parrish Date: Thu, 4 Jan 2024 12:49:51 -0700 Subject: [PATCH 6/8] MWPW-140877 - Quiz Marquee style updates (#1701) * fixed quiz-marquee styles - aside.notification to inline on mobile, cards alignment on center * no margin on nested aside body-m * width update * added same card width style to quiz-results --- libs/blocks/quiz-marquee/quiz-marquee.css | 11 ++++++++++- libs/blocks/quiz-results/quiz-results.css | 2 +- 2 files changed, 11 insertions(+), 2 deletions(-) diff --git a/libs/blocks/quiz-marquee/quiz-marquee.css b/libs/blocks/quiz-marquee/quiz-marquee.css index 002e2c5422..bba0158ef5 100644 --- a/libs/blocks/quiz-marquee/quiz-marquee.css +++ b/libs/blocks/quiz-marquee/quiz-marquee.css @@ -104,6 +104,7 @@ .quiz-marquee .aside.notification.small .foreground.container .text { align-items: flex-start; + flex-flow: row nowrap; } .quiz-marquee .aside.notification.small .foreground.container .text .icon-area { @@ -112,6 +113,10 @@ margin-right: var(--spacing-xxs); } +.quiz-marquee .aside.notification.small .foreground.container .text .body-m { + margin: 0; +} + .quiz-marquee .nested.icon-bullet { display: grid; gap: var(--spacing-xxs); @@ -126,7 +131,11 @@ display: grid; gap: var(--spacing-m); width: 100%; - grid-template-columns: repeat(auto-fit, minmax(275px, max-content)); + grid-template-columns: repeat(auto-fit, 378px); +} + +.quiz-marquee.center .commerce-card { + justify-content: center; } /* CLS */ diff --git a/libs/blocks/quiz-results/quiz-results.css b/libs/blocks/quiz-results/quiz-results.css index ae9ed62410..e97a5ae3c6 100644 --- a/libs/blocks/quiz-results/quiz-results.css +++ b/libs/blocks/quiz-results/quiz-results.css @@ -20,7 +20,7 @@ justify-content: center; width: 100%; max-width: 100%; - grid-template-columns: repeat(auto-fit,300px); + grid-template-columns: repeat(auto-fit, 378px); gap: 32px; padding-bottom: 32px; } From 38723f95fbf895f95cfc47dfaa76217301ede7e0 Mon Sep 17 00:00:00 2001 From: Nicolas Peltier <1032754+npeltier@users.noreply.github.com> Date: Fri, 5 Jan 2024 10:03:33 +0100 Subject: [PATCH 7/8] [#1641] add parent option to createTag (#1698) - add options parameter to createTag signature, with only one parent option for now, as discussed in https://github.com/orgs/adobecom/discussions/1641, - add unit test for create Tag --- libs/utils/utils.js | 3 ++- test/utils/utils.test.js | 15 +++++++++++++++ 2 files changed, 17 insertions(+), 1 deletion(-) diff --git a/libs/utils/utils.js b/libs/utils/utils.js index 3748c140bc..645b9855ba 100644 --- a/libs/utils/utils.js +++ b/libs/utils/utils.js @@ -239,7 +239,7 @@ export function isInTextNode(node) { return node.parentElement.firstChild.nodeType === Node.TEXT_NODE; } -export function createTag(tag, attributes, html) { +export function createTag(tag, attributes, html, options = {}) { const el = document.createElement(tag); if (html) { if (html instanceof HTMLElement @@ -257,6 +257,7 @@ export function createTag(tag, attributes, html) { el.setAttribute(key, val); }); } + options.parent?.append(el); return el; } diff --git a/test/utils/utils.test.js b/test/utils/utils.test.js index e0eac39bec..548adc0066 100644 --- a/test/utils/utils.test.js +++ b/test/utils/utils.test.js @@ -3,6 +3,7 @@ import { expect } from '@esm-bundle/chai'; import sinon from 'sinon'; import { waitFor, waitForElement } from '../helpers/waitfor.js'; import { mockFetch } from '../helpers/generalHelpers.js'; +import { createTag } from '../../libs/utils/utils.js'; const utils = {}; @@ -572,6 +573,20 @@ describe('Utils', () => { }); }); + describe('createTag', async () => { + /** + * create tag creates a tag from first parameter tag name, + * second parameter is requested attributes map in created tag, + * third parameter is the innerHTML of the tag, can be either node or text, + * fourth parameter is an object of creation options: + * - @parent parent element to append the tag to. + */ + createTag('var', { class: 'foo' }, 'bar', { parent: document.body }); + const varTag = document.querySelector('body > var.foo'); + expect(varTag).to.exist; + expect(varTag.textContent).to.equal('bar'); + }); + describe('personalization', async () => { const MANIFEST_JSON = { info: { total: 2, offset: 0, limit: 2, data: [{ key: 'manifest-type', value: 'Personalization' }, { key: 'manifest-override-name', value: '' }, { key: 'name', value: '1' }] }, placeholders: { total: 0, offset: 0, limit: 0, data: [] }, experiences: { total: 1, offset: 0, limit: 1, data: [{ action: 'insertContentAfter', selector: '.marquee', 'page filter (optional)': '/products/special-offers', chrome: 'https://main--milo--adobecom.hlx.page/drafts/mariia/fragments/personalizationtext' }] }, ':version': 3, ':names': ['info', 'placeholders', 'experiences'], ':type': 'multi-sheet', From 66f6042d7214cb86e0883b6b6c71630cd0afd982 Mon Sep 17 00:00:00 2001 From: Ruchika Sinha <69535463+Ruchika4@users.noreply.github.com> Date: Fri, 5 Jan 2024 13:35:15 -0800 Subject: [PATCH 8/8] MWPW-140345-Fix issues in media QR block variant (#1658) * MWPW-140345 * MWPW-140345 * MWPW-140345 * Update media.js * Update media.css * Update unit test * Update qr block css * Update media.css * Update media.test.js * Update media.test.js --- libs/blocks/media/media.css | 6 ++++-- libs/blocks/media/media.js | 2 +- test/blocks/media/media.test.js | 30 +++++++++++++++++++++++++++++- 3 files changed, 34 insertions(+), 4 deletions(-) diff --git a/libs/blocks/media/media.css b/libs/blocks/media/media.css index bb39890a08..5b941aca15 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 { @@ -341,8 +342,9 @@ div[class*="-up"] .media .foreground > .media-row { .media.qr-code img.qr-code-img { display: flex; - width: 150px; - height: 170px; + width: 140px; + height: 140px; + margin-top: var(--spacing-s); } .media.qr-code .qr-button-container { diff --git a/libs/blocks/media/media.js b/libs/blocks/media/media.js index 24822ea0fd..93de7c2405 100644 --- a/libs/blocks/media/media.js +++ b/libs/blocks/media/media.js @@ -72,7 +72,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'); } diff --git a/test/blocks/media/media.test.js b/test/blocks/media/media.test.js index db2ba7ec6e..28abd3c1b9 100644 --- a/test/blocks/media/media.test.js +++ b/test/blocks/media/media.test.js @@ -1,6 +1,7 @@ -import { readFile } from '@web/test-runner-commands'; +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', () => { @@ -67,6 +68,33 @@ describe('media', () => { const appStoreCta = medias[5].querySelector('a.app-store'); expect(appStoreCta).to.exist; }); + 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.equal('none'); + qrCTA.forEach((cta) => { + 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.equal('none'); + qrCTA.forEach((cta) => { + 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.equal('none'); + qrCTA.forEach((cta) => { + expect(window.getComputedStyle(cta).getPropertyValue('display')).not.to.equal('none'); + }); + }); }); describe('with bio variant', () => { it('has a bio avatar and icon-stack area', () => {