From adb35eb68d6519d9bcee04378b426d231834199c Mon Sep 17 00:00:00 2001 From: Elan Bartholomew <79870969+elan-tbx@users.noreply.github.com> Date: Thu, 29 Aug 2024 08:21:07 -0600 Subject: [PATCH] MWPW-151936 - Aside Tiger Team Enhancements (a new hope) (#2782) * MWPW-151936 Aside Tiger Team Enhancements * fix standard tests * update tests * simplify icon area * set approved desktop column spans * css updates based on feedback * account for notifications * additional fixes for notification asides * additional tweaks to account for promobar and notification edge cases * remove unnecessary async/await declarations * remove additional unnecessary async/awaits * adjustments to styles based on QA review * add base min-height for mobile, use variables --------- Co-authored-by: Megan Thomas --- libs/blocks/aside/aside.css | 330 +++++++++----- libs/blocks/aside/aside.js | 29 +- libs/styles/iconography.css | 71 ++- test/blocks/aside/aside-legacy.test.js | 116 +++++ test/blocks/aside/aside.test.js | 259 ++++++----- test/blocks/aside/mocks/body.html | 587 ------------------------- test/blocks/aside/mocks/split.html | 114 +++++ test/blocks/aside/mocks/standard.html | 97 ++++ 8 files changed, 766 insertions(+), 837 deletions(-) create mode 100644 test/blocks/aside/aside-legacy.test.js create mode 100644 test/blocks/aside/mocks/split.html create mode 100644 test/blocks/aside/mocks/standard.html diff --git a/libs/blocks/aside/aside.css b/libs/blocks/aside/aside.css index c0ad710b34..7feb805ada 100644 --- a/libs/blocks/aside/aside.css +++ b/libs/blocks/aside/aside.css @@ -1,4 +1,6 @@ .aside { + --min-height: 160px; + display: flex; width: 100%; position: relative; @@ -16,6 +18,40 @@ margin: 0; } +.aside [class^="heading-"]:only-of-type, +.aside [class^="heading-"]:last-of-type { + margin-bottom: var(--spacing-xs); +} + +.aside:is(.promobar, .notification.extra-small, .notification.small) [class^="heading-"]:is(:only-of-type, :last-of-type) { + margin-bottom: 0; +} + +.aside [class^="body-"] { + margin-bottom: var(--spacing-s); +} + +.aside:not(.notification, .promobar) { + min-height: var(--min-height); +} + +.aside.promobar [class^="body-"], +.aside.notification.extra-small [class^="body-"] { + margin-bottom: 0; +} + +.aside [class^="detail-"] { + margin-bottom: var(--spacing-xs); +} + +.aside .title-l { + font-size: var(--type-body-m-size); + line-height: var(--type-body-m-lh); + font-weight: bold; + text-transform: none; + margin-bottom: var(--spacing-xs); +} + .aside.split picture { display: flex; } @@ -38,15 +74,9 @@ align-items: center; justify-content: center; flex-direction: column; - gap: var(--spacing-l); -} - -.aside:not(.notification):not(.inline) .foreground > :first-child { - padding: var(--spacing-xxxl) 0 0; -} - -.aside:not(.notification):not(.inline) .foreground > :last-child { - margin-bottom: var(--spacing-xxxl); + gap: var(--spacing-m); + padding: var(--spacing-xl) 0; + box-sizing: border-box; } .aside .foreground.container .text { @@ -57,7 +87,16 @@ .aside.split .foreground.container .text { margin: 0; max-width: var(--grid-container-width); - padding: var(--spacing-xxxl) 0 var(--spacing-l) 0; +} + +.aside.media-top-mobile .foreground .image, +.aside.media-top-mobile .split-image { + order: -1; +} + +.aside.media-bottom-mobile .foreground .image, +.aside.media-bottom-mobile .split-image { + order: 1; } .aside.simple .foreground.container .text { @@ -85,13 +124,9 @@ flex-basis: 100%; } -.aside.inline .foreground.container .image, -.aside.inline .foreground.container .text { - padding: 0; -} - -.aside.split.large .foreground.container .text { - padding: var(--spacing-l) 0 var(--spacing-xxxl) 0; +.aside.split .icon-stack-area li { + width: fit-content; + min-width: calc(50% - 6px); } .aside.split .icon-stack-area li, @@ -110,18 +145,11 @@ width: 100%; } -.aside .foreground.container .text .heading-xl { - margin: 0 0 var(--spacing-xs); -} - -.aside .foreground.container .text .body-m, -.aside .foreground.container .text .body-s { - margin-bottom: var(--spacing-s); -} - .aside .foreground.container .text .supplemental-text { - padding-top: var(--spacing-s); + margin-top: var(--spacing-s); margin-bottom: 0; + font-size: var(--type-body-s-size); + line-height: var(--type-body-s-lh); } .aside.promobar .promo-text .action-area { @@ -143,10 +171,14 @@ align-items: center; } -.aside .foreground.container .icon-area { - height: 56px; - max-width: 234px; +.aside:not(.notification) .foreground.container .icon-area { + max-height: 80px; + display: flex; + align-items: center; + gap: var(--spacing-xs); + line-height: 0; margin-bottom: var(--spacing-s); + font-weight: bold; } .aside .foreground.container a.icon-area { @@ -154,6 +186,15 @@ margin-bottom: 0; } +.aside.center .foreground.container .icon-area { + justify-content: center; +} + +.aside .avatar-area, +.aside .lockup-area { + margin-bottom: var(--spacing-s); +} + .aside.split .split-image img, .aside.split .split-image video { position: relative; @@ -196,9 +237,16 @@ align-items: center; } +.aside.split .icon-stack-area li picture { + flex-shrink: 0; +} + +.aside:not(.notification) .foreground.container .icon-area picture { + height: 100%; +} + .aside .foreground.container .icon-area img { - max-width: 234px; - height: var(--icon-size-l); + max-height: 100%; width: auto; object-fit: cover; object-position: left top; @@ -216,6 +264,11 @@ flex-direction: column-reverse; } +.aside.split.large.aside.media-top-mobile, +.aside.split.large.aside.media-bottom-mobile { + flex-direction: column; +} + .aside.split .foreground.container { width: 100%; max-width: 100%; @@ -236,10 +289,6 @@ display: none; } -.aside.split .icon-stack-area li picture { - flex-shrink: 0; -} - .aside.notification .text [class^="heading-"] + .action-area { margin-top: var(--spacing-xs); } @@ -248,6 +297,11 @@ display: block; } +.aside.rounded-corners .foreground .image img, +.aside.rounded-corners .foreground .image video { + border-radius: 16px; +} + .aside .foreground.container .image video, .aside .foreground.container .image picture, .aside .foreground.container .image picture img { @@ -322,6 +376,7 @@ .aside.promobar .foreground.container .icon-area img { height: var(--icon-size-m); + max-width: 234px; } .aside.notification.extra-small .foreground.container a:last-child { @@ -359,6 +414,7 @@ .aside.notification .foreground.container .icon-area img { max-height: 40px; + max-width: 234px; height: auto; } @@ -443,6 +499,10 @@ padding: 0; } +.aside.no-media:not(.notification) .foreground.container { + gap: 0; +} + .aside.notification.large.center .foreground.container, .aside.notification.large .foreground.container.no-image { max-width: 800px; @@ -466,7 +526,6 @@ .aside.split .icon-stack-area { display: flex; flex-flow: row wrap; - flex-direction: column; gap: 12px; margin: -8px 0 var(--spacing-s); width: 100%; @@ -490,10 +549,6 @@ justify-content: center; } -.aside:not(.notification) .foreground.container .text .detail-m { - margin-bottom: var(--spacing-xs); -} - .aside.split .image.format { display: flex; } @@ -502,16 +557,6 @@ display: none; } -.aside.center:not(.notification) .foreground.container .text .icon-area { - height: var(--icon-size-xxl); -} - -.aside.center:not(.notification) .foreground.container .text .icon-area img { - height: var(--icon-size-xxl); - max-width: 300px; - width: auto; -} - .aside.promobar .foreground.container > :first-child { padding: var(--spacing-xs) 0; } @@ -611,47 +656,47 @@ stroke: var(--color-white); } -@media screen and (max-width: 600px) { - .aside.no-media:not(.notification) .foreground.container { - gap: 0; +.aside.promobar.popup .mobile-up.hide-block ~ .promo-close { + display: none; +} + +@media screen and (min-width: 600px) { + .aside { + --min-height-small: 420px; + --min-height-medium: 560px; + --min-height-large: 700px; } - .aside.split.no-media:not(.notification) .foreground.container .text { - padding: var(--spacing-xxxl) 0; + .aside.small:not(.notification, .promobar) { + min-height: var(--min-height-small); } - .aside.promobar.popup .mobile-up.hide-block ~ .promo-close { - display: none; + .aside.medium:not(.notification, .promobar) { + min-height: var(--min-height-medium); } -} -@media screen and (min-width: 600px) { - .aside.small { - min-height: 420px; + .aside.large:not(.notification, .promobar) { + min-height: var(--min-height-large); } - .aside.medium { - min-height: 560px; + .aside.media-top-mobile .foreground .image, + .aside.media-top-mobile .split-image { + order: unset; } - .aside.large { - min-height: 700px; + .aside.media-bottom-mobile .foreground .image, + .aside.media-bottom-mobile .split-image { + order: unset; + } + + .aside.promobar.popup .mobile-up.hide-block ~ .promo-close { + display: unset; } .aside .foreground.container { align-items: center; flex-direction: row; margin: 0 auto; - padding: var(--spacing-m) 0; - gap: var(--spacing-xl); - } - - .aside:not(.notification):not(.inline) .foreground.container > :first-child { - padding: 0; - } - - .aside:not(.notification):not(.inline):not(.center) .foreground.container > :last-child { - margin-bottom: 0; } .aside .foreground.container .image { @@ -674,7 +719,6 @@ .aside .foreground.container .text { margin-bottom: 0; - padding-right: var(--spacing-s); } .aside.split-right .foreground.container .text { @@ -687,15 +731,6 @@ padding-right: 0; } - .aside.split .split-image { - overflow: hidden; - position: absolute; - left: 0; - right: 0; - top: 0; - bottom: 0; - } - .aside.split .tablet-wide img, .aside.split .tablet-wide video { aspect-ratio: var(--aspect-ratio-wide); @@ -718,8 +753,7 @@ .aside .split-image .modal-img-link, .aside.split .split-image img, .aside.split .split-image video { - width: 60.5vw; - max-width: 56%; + width: 50vw; position: absolute; right: 0; object-fit: cover; @@ -767,8 +801,7 @@ } .aside.split .foreground.container .text { - flex: 0 0 31vw; - padding: var(--spacing-xxl) 0; + flex: 0 0 41.67%; max-width: 100%; margin: 0; } @@ -795,7 +828,7 @@ flex-grow: 1; } - .aside.notification.small .foreground.container .text .body-m { + .aside.notification.small [class^="body-"] { margin: 0; } @@ -879,10 +912,6 @@ height: 40px; } - .aside.center:not(.notification) .foreground.container .text .icon-area img { - max-width: 234px; - } - .aside.medium.split.bio .foreground.container .text .icon-area, .aside.large.split.bio .foreground.container .text .icon-area { height: var(--icon-size-xxl); @@ -922,16 +951,84 @@ } } -@media (min-width: 600px) and (max-width: 1200px) { +@media (min-width: 600px) and (max-width: 1199px) { .aside.promobar.popup .tablet-up.hide-block ~ .promo-close { display: none; } + + .aside.media-top-tablet .foreground.container, + .aside.media-bottom-tablet .foreground.container { + justify-content: center; + flex-direction: column; + gap: var(--spacing-l); + padding: var(--spacing-xl) 0; + } + + .aside.media-top-tablet .foreground.container .text, + .aside.media-bottom-tablet .foreground.container .text { + padding-right: 0; + } + + .aside.media-top-tablet .foreground .image, + .aside.split.media-top-tablet .split-image { + order: -1; + } + + .aside.media-bottom-tablet .foreground .image, + .aside.split.media-bottom-tablet .split-image { + order: 100; + } + + .aside.large.media-top-tablet, + .aside.large.media-bottom-tablet { + min-height: auto; + } + + .aside.split.large.media-top-tablet .foreground.container .text, + .aside.split.large.media-bottom-tablet .foreground.container .text { + padding: 0; + flex: 0 0 100%; + } + + .aside.split.media-top-tablet .split-image, + .aside.split.media-bottom-tablet .split-image { + position: relative; + } + + .aside.split.media-top-tablet .split-image img, + .aside.split.media-bottom-tablet .split-image img { + position: relative; + width: 100%; + max-width: 100%; + } + + .aside.split.media-top-tablet .text .icon-stack-area, + .aside.split.media-bottom-tablet .text .icon-stack-area { + width: 83.33%; + } + + .aside.split.media-top-tablet .icon-stack-area li, + .aside.split.media-bottom-tablet .icon-stack-area li { + width: calc(50% - 6px); + } } @media screen and (min-width: 1200px) { - .aside .foreground.container { + .aside.small { min-height: 420px; + } + + .aside.medium { + min-height: 560px; + } + + .aside.large { + min-height: 700px; + } + + .aside .foreground.container { width: var(--grid-container-width); + gap: var(--grid-column-width); } .aside .foreground.container > div { @@ -939,16 +1036,12 @@ padding-left: 0; } - .aside .foreground.container .text { - padding: var(--spacing-xxl) 0; + .aside:not(.notification) .foreground.container .text { + flex: 1 0 calc(var(--grid-column-width) * 6); } - .aside .foreground.container .icon-area { - max-width: 400px; - } - - .aside .foreground.container .text .heading-xl { - margin: 0 0 var(--spacing-xs); + .aside:not(.notification) .foreground.container .image { + flex: 1 0 calc(var(--grid-column-width) * 5); } .aside.inline .foreground.container .text { @@ -961,7 +1054,7 @@ } .aside.split .foreground.container .text { - flex: 0 0 300px; + flex: 0 0 29%; } .aside.split .foreground.container .image { @@ -970,6 +1063,12 @@ object-fit: cover; } + .aside .split-image .modal-img-link, + .aside.split .split-image img, + .aside.split .split-image video { + width: 60.5vw; + } + .aside.split .split-image img, .aside.split .split-image video { max-width: 1396px; @@ -999,14 +1098,8 @@ flex: 0 0 calc(36% - var(--spacing-s)); } - .aside.split.icon-stack .foreground.container .text, - .aside.split.bio .foreground.container .text { - padding: var(--spacing-xxl) 0; - } - .aside.split .icon-stack-area li { - max-width: calc(50% - 6px); - min-width: calc(50% - 6px); + width: calc(50% - 6px); } .aside.split .icon-stack-area { @@ -1023,10 +1116,6 @@ height: var(--icon-size-m); } - .aside.center:not(.notification) .foreground.container .text .icon-area img { - max-width: 400px; - } - .aside.center:not(.notification) .foreground.container .text { max-width: 50%; } @@ -1092,6 +1181,7 @@ .aside.promobar .promo-text .action-area { gap: var(--spacing-s); + flex-wrap: nowrap; } .aside.promobar .promo-text.mobile-up, @@ -1139,3 +1229,9 @@ margin-top: 0; } } + +@media screen and (min-width: 1440px) { + .aside.split .foreground.container .text { + flex: 0 0 calc(500px - 10.5vw); + } +} diff --git a/libs/blocks/aside/aside.js b/libs/blocks/aside/aside.js index dde3602f8c..59975b58f6 100644 --- a/libs/blocks/aside/aside.js +++ b/libs/blocks/aside/aside.js @@ -14,8 +14,8 @@ * Aside - v5.1 */ -import { decorateBlockText, decorateIconStack, applyHoverPlay, decorateBlockBg } from '../../utils/decorate.js'; -import { createTag } from '../../utils/utils.js'; +import { decorateBlockText, decorateIconStack, applyHoverPlay, decorateBlockBg, decorateTextOverrides } from '../../utils/decorate.js'; +import { createTag, getConfig, loadStyle } from '../../utils/utils.js'; // standard/default aside uses same text sizes as the split const variants = ['split', 'inline', 'notification']; @@ -163,6 +163,12 @@ function decoratePromobar(el) { return foreground; } +function loadIconography() { + const { miloLibs, codeRoot } = getConfig(); + const base = miloLibs || codeRoot; + return new Promise((resolve) => { loadStyle(`${base}/styles/iconography.css`, resolve); }); +} + function decorateLayout(el) { const elems = el.querySelectorAll(':scope > div'); if (elems.length > 1) { @@ -182,11 +188,16 @@ function decorateLayout(el) { } const picture = text?.querySelector('p picture'); const iconArea = picture ? (picture.closest('p') || createTag('p', null, picture)) : null; - iconArea?.classList.add('icon-area'); + if (iconArea) { + const iconVariant = el.className.match(/-(avatar|lockup)/); + const iconClass = iconVariant ? `${iconVariant[1]}-area` : 'icon-area'; + if (iconVariant) loadIconography(); + iconArea.classList.add(iconClass); + } const foregroundImage = foreground.querySelector(':scope > div:not(.text) img')?.closest('div'); const bgImage = el.querySelector(':scope > div:not(.text):not(.foreground) img')?.closest('div'); - const foregroundMedia = foreground.querySelector(':scope > div:not(.text) video, :scope > div:not(.text) a[href*=".mp4"]')?.closest('div'); - const bgMedia = el.querySelector(':scope > div:not(.text):not(.foreground) video, :scope > div:not(.text):not(.foreground) a[href*=".mp4"]')?.closest('div'); + const foregroundMedia = foreground.querySelector(':scope > div:not(.text) video, :scope > div:not(.text) a:is([href*=".mp4"], [href*="tv.adobe.com"])')?.closest('div'); + const bgMedia = el.querySelector(':scope > div:not(.text):not(.foreground) video, :scope > div:not(.text):not(.foreground) a:is([href*=".mp4"], [href*="tv.adobe.com"])')?.closest('div'); const image = foregroundImage ?? bgImage; const asideMedia = foregroundMedia ?? bgMedia ?? image; const isSplit = el.classList.contains('split'); @@ -202,10 +213,7 @@ function decorateLayout(el) { } else if (!iconArea) { foreground?.classList.add('no-image'); } - if (el.classList.contains('split') - && (el.classList.contains('medium') || el.classList.contains('large'))) { - decorateIconStack(el); - } + if (el.classList.contains('split')) decorateIconStack(el); return foreground; } @@ -216,4 +224,7 @@ export default function init(el) { decorateBlockText(blockText, blockData); decorateStaticLinks(el); formatPromoButton(el); + decorateTextOverrides(el); + // Override Detail with Title L style if class exists - Temporary solution until Spectrum 2 + if (el.classList.contains('l-title')) el.querySelector('[class*="detail-"]')?.classList.add('title-l'); } diff --git a/libs/styles/iconography.css b/libs/styles/iconography.css index acee064c00..83ca16ac01 100644 --- a/libs/styles/iconography.css +++ b/libs/styles/iconography.css @@ -1,28 +1,40 @@ -/* iconograph.css +/* iconography.css This is consonant shared design patterns dealing w/ groups of media and associated text - lockup -(coming soon...) - avatar */ :root { - /* lockup sizes */ - --type-lockup-all-weight: 700; - --type-lockup-xxl-size: 55px; - --type-lockup-xxl-ls: -0.01em; - --type-lockup-xl-size: 44px; - --type-lockup-xl-ls: -0.01em; - --type-lockup-l-size: 38px; - --type-lockup-l-ls: -0.01em; - --type-lockup-m-size: 27px; - --type-lockup-m-ls: -0.02em; - --type-lockup-s-size: 22px; - --type-lockup-s-ls: -0.02em; - --type-lockup-xs-size: 16px; - --type-lockup-xs-ls: 0; - --type-lockup-xxs-size: 11px; - --type-lockup-xxs-ls: -0.01em; + /* lockup sizes */ + --type-lockup-all-weight: 700; + --type-lockup-xxl-size: 55px; + --type-lockup-xxl-ls: -0.01em; + --type-lockup-xl-size: 44px; + --type-lockup-xl-ls: -0.01em; + --type-lockup-l-size: 38px; + --type-lockup-l-ls: -0.01em; + --type-lockup-m-size: 27px; + --type-lockup-m-ls: -0.02em; + --type-lockup-s-size: 22px; + --type-lockup-s-ls: -0.02em; + --type-lockup-xs-size: 16px; + --type-lockup-xs-ls: 0; + --type-lockup-xxs-size: 11px; + --type-lockup-xxs-ls: -0.01em; + + /* avatar sizes */ + --avatar-size-xxl: 64px; + --avatar-size-xl: 56px; + --avatar-size-l: 40px; +} + +@media (min-width: 1200px) { + :root { + --avatar-size-xxl: 80px; + --avatar-size-xl: 64px; + --avatar-size-l: 56px; + } } /* Lockup */ @@ -90,3 +102,26 @@ dealing w/ groups of media and associated text .l-lockup .lockup-area img { height: var(--icon-size-l); } .xl-lockup .lockup-area img { height: var(--icon-size-xl); } .xxl-lockup .lockup-area img { height: var(--icon-size-xxl); } + +.avatar-area { + line-height: 0; + margin-bottom: var(--spacing-s); +} + +.l-avatar .avatar-area img { + border-radius: 50%; + height: var(--avatar-size-l); + width: var(--avatar-size-l); +} + +.xl-avatar .avatar-area img { + border-radius: 50%; + height: var(--avatar-size-xl); + width: var(--avatar-size-xl); +} + +.xxl-avatar .avatar-area img { + border-radius: 50%; + height: var(--avatar-size-xxl); + width: var(--avatar-size-xxl); +} diff --git a/test/blocks/aside/aside-legacy.test.js b/test/blocks/aside/aside-legacy.test.js new file mode 100644 index 0000000000..66e017582b --- /dev/null +++ b/test/blocks/aside/aside-legacy.test.js @@ -0,0 +1,116 @@ +import { readFile } from '@web/test-runner-commands'; +import { expect } from '@esm-bundle/chai'; + +document.body.innerHTML = await readFile({ path: './mocks/body.html' }); +const { default: init } = await import('../../../libs/blocks/aside/aside.js'); + +const types = ['simple', 'split', 'inline', 'notification', 'promobar']; + +describe('aside', () => { + const asides = document.querySelectorAll('.aside'); + asides.forEach((aside) => { + init(aside); + + const typeIndex = types.findIndex((v) => aside.classList.contains(v)); + const type = typeIndex >= 0 ? types[typeIndex] : 'default'; + + describe(`aside ${type}`, () => { + const isInline = type === 'inline'; + + if (type !== 'notification') { + it('has a heading', () => { + const heading = aside.querySelector('[class^=heading-]'); + expect(heading).to.exist; + }); + + it('icon has a wrapper', () => { + const icon = aside.querySelector('.text picture, .promo-text picture'); + if (icon) { + expect(icon.closest('.icon-area')).to.exist; + } + }); + + it('has a body', () => { + const body = aside.querySelector('[class^=body-]'); + expect(body).to.exist; + }); + + it('button has a wrapper', () => { + const button = aside.querySelector('.text .con-button, .promo-text .con-button'); + if (button) { + expect(button.closest('p')).to.exist; + } + }); + + if (aside.classList.contains('icon-stack')) { + it('Has icon stack area', () => { + const iconStack = aside.querySelector('ul.icon-stack-area'); + expect(iconStack).to.exist; + }); + } + + if (aside.classList.contains('aspect-ratio')) { + it('Has aspect ratio set', () => { + let aspectRatios = ''; + if (aside.classList.contains('aspect-ratio-three')) { + aspectRatios = aside.querySelector('.mobile-square.tablet-standard.desktop-wide'); + expect(aspectRatios).to.exist; + } else if (aside.classList.contains('aspect-ratio-two')) { + aspectRatios = aside.querySelector('.mobile-standard.tablet-wide'); + expect(aspectRatios).to.exist; + } else if (aside.classList.contains('aspect-ratio-one')) { + aspectRatios = aside.querySelector('.mobile-standard'); + expect(aspectRatios).to.exist; + } + }); + } + } + + if (type === 'default' || type === isInline) { + it('has an image', () => { + const image = aside.querySelector('.image'); + expect(image).to.exist; + }); + } + + if (type === types[1]) { + it('has a background image or video', () => { + const body = aside.querySelector('.split-image'); + expect(body).to.exist; + }); + } + + if (type === 'promobar') { + it('has viewport content', () => { + const viewportContent = aside.querySelectorAll('.promo-text'); + expect(viewportContent.length).to.equal(3); + }); + + if (aside.classList.contains('popup')) { + it('has promo close button', () => { + const closeBtn = aside.querySelector('.promo-close'); + expect(closeBtn).to.exist; + }); + + if (aside.classList.contains('mobile-promo-only')) { + it('has empty tablet block hidden', () => { + const tabletBlock = aside.querySelector('.tablet-up.hide-block'); + expect(tabletBlock).to.exist; + }); + + it('has empty desktop block hidden', () => { + const desktopBlock = aside.querySelector('.tablet-up.hide-block'); + expect(desktopBlock).to.exist; + }); + } + + it('close button click closes the popup', () => { + const closeBtn = aside.querySelector('.promo-close'); + closeBtn.click(); + expect(aside.closest('.section').classList.contains('close-sticky-section')).to.be.true; + }); + } + } + }); + }); +}); diff --git a/test/blocks/aside/aside.test.js b/test/blocks/aside/aside.test.js index 66e017582b..d0793c430b 100644 --- a/test/blocks/aside/aside.test.js +++ b/test/blocks/aside/aside.test.js @@ -1,116 +1,163 @@ import { readFile } from '@web/test-runner-commands'; import { expect } from '@esm-bundle/chai'; +import { waitForElement } from '../../helpers/waitfor.js'; +import { setConfig } from '../../../libs/utils/utils.js'; -document.body.innerHTML = await readFile({ path: './mocks/body.html' }); const { default: init } = await import('../../../libs/blocks/aside/aside.js'); +const standardBody = await readFile({ path: './mocks/standard.html' }); +const splitBody = await readFile({ path: './mocks/split.html' }); +const conf = { miloLibs: 'http://localhost:2000/libs' }; -const types = ['simple', 'split', 'inline', 'notification', 'promobar']; +setConfig(conf); describe('aside', () => { - const asides = document.querySelectorAll('.aside'); - asides.forEach((aside) => { - init(aside); - - const typeIndex = types.findIndex((v) => aside.classList.contains(v)); - const type = typeIndex >= 0 ? types[typeIndex] : 'default'; - - describe(`aside ${type}`, () => { - const isInline = type === 'inline'; - - if (type !== 'notification') { - it('has a heading', () => { - const heading = aside.querySelector('[class^=heading-]'); - expect(heading).to.exist; - }); - - it('icon has a wrapper', () => { - const icon = aside.querySelector('.text picture, .promo-text picture'); - if (icon) { - expect(icon.closest('.icon-area')).to.exist; - } - }); - - it('has a body', () => { - const body = aside.querySelector('[class^=body-]'); - expect(body).to.exist; - }); - - it('button has a wrapper', () => { - const button = aside.querySelector('.text .con-button, .promo-text .con-button'); - if (button) { - expect(button.closest('p')).to.exist; - } - }); - - if (aside.classList.contains('icon-stack')) { - it('Has icon stack area', () => { - const iconStack = aside.querySelector('ul.icon-stack-area'); - expect(iconStack).to.exist; - }); - } - - if (aside.classList.contains('aspect-ratio')) { - it('Has aspect ratio set', () => { - let aspectRatios = ''; - if (aside.classList.contains('aspect-ratio-three')) { - aspectRatios = aside.querySelector('.mobile-square.tablet-standard.desktop-wide'); - expect(aspectRatios).to.exist; - } else if (aside.classList.contains('aspect-ratio-two')) { - aspectRatios = aside.querySelector('.mobile-standard.tablet-wide'); - expect(aspectRatios).to.exist; - } else if (aside.classList.contains('aspect-ratio-one')) { - aspectRatios = aside.querySelector('.mobile-standard'); - expect(aspectRatios).to.exist; - } - }); - } - } - - if (type === 'default' || type === isInline) { - it('has an image', () => { - const image = aside.querySelector('.image'); - expect(image).to.exist; - }); - } - - if (type === types[1]) { - it('has a background image or video', () => { - const body = aside.querySelector('.split-image'); - expect(body).to.exist; - }); - } - - if (type === 'promobar') { - it('has viewport content', () => { - const viewportContent = aside.querySelectorAll('.promo-text'); - expect(viewportContent.length).to.equal(3); - }); - - if (aside.classList.contains('popup')) { - it('has promo close button', () => { - const closeBtn = aside.querySelector('.promo-close'); - expect(closeBtn).to.exist; - }); - - if (aside.classList.contains('mobile-promo-only')) { - it('has empty tablet block hidden', () => { - const tabletBlock = aside.querySelector('.tablet-up.hide-block'); - expect(tabletBlock).to.exist; - }); - - it('has empty desktop block hidden', () => { - const desktopBlock = aside.querySelector('.tablet-up.hide-block'); - expect(desktopBlock).to.exist; - }); - } - - it('close button click closes the popup', () => { - const closeBtn = aside.querySelector('.promo-close'); - closeBtn.click(); - expect(aside.closest('.section').classList.contains('close-sticky-section')).to.be.true; - }); - } - } + describe('standard', () => { + before(() => { + document.body.innerHTML = standardBody; + const blocks = document.querySelectorAll('.aside'); + blocks.forEach((el) => init(el)); + }); + + it('allows a background color', async () => { + const el = await waitForElement('#test-default'); + expect(window.getComputedStyle(el)?.backgroundColor).to.equal('rgb(238, 238, 238)'); + }); + + it('allows a background image', async () => { + const el = await waitForElement('#test-default-2 .background img'); + expect(el).to.exist; + }); + + it('allows an icon image', async () => { + const el = await waitForElement('#test-default .icon-area img'); + expect(el).to.exist; + }); + + it('has Detail M by default', async () => { + const el = await waitForElement('#test-default .detail-m'); + expect(el).to.exist; + }); + + it('has Heading XL by default', async () => { + const el = await waitForElement('#test-default .heading-xl'); + expect(el).to.exist; + }); + + it('has Body S by default', async () => { + const el = await waitForElement('#test-default p.body-s'); + expect(el).to.exist; + }); + + it('allows a cta', async () => { + const el = await waitForElement('#test-default .action-area .con-button'); + expect(el).to.exist; + }); + + it('allows supplemental text', async () => { + const el = await waitForElement('#test-default .supplemental-text'); + expect(el).to.exist; + }); + + it('allows a foreground image', async () => { + const el = await waitForElement('#test-default .foreground .image img'); + expect(el).to.exist; + }); + + it('allows text overrides', async () => { + const el = await waitForElement('#test-text-overrides'); + expect(el.querySelector('.detail-l')).to.exist; + expect(el.querySelector('.heading-l')).to.exist; + expect(el.querySelector('p.body-m')).to.exist; + }); + + it('allows Title L to override Detail', async () => { + const el = await waitForElement('#test-title .detail-m.title-l'); + expect(el).to.exist; + }); + + it('allows an avatar', async () => { + const el = await waitForElement('#test-avatar .avatar-area img'); + expect(el).to.exist; + }); + + it('allows a product lockup', async () => { + const el = await waitForElement('#test-lockup .lockup-area img'); + expect(el).to.exist; + }); + }); + + describe('split', () => { + before(() => { + document.body.innerHTML = splitBody; + const blocks = document.querySelectorAll('.aside'); + blocks.forEach((el) => init(el)); + }); + + it('allows a background color', async () => { + const el = await waitForElement('#test-default'); + expect(window.getComputedStyle(el)?.backgroundColor).to.equal('rgb(30, 30, 30)'); + }); + + it('allows an icon image', async () => { + const el = await waitForElement('#test-default .icon-area img'); + expect(el).to.exist; + }); + + it('has Detail M by default', async () => { + const el = await waitForElement('#test-default .detail-m'); + expect(el).to.exist; + }); + + it('has Heading XL by default', async () => { + const el = await waitForElement('#test-default .heading-xl'); + expect(el).to.exist; + }); + + it('has Body S by default', async () => { + const el = await waitForElement('#test-default p.body-s'); + expect(el).to.exist; + }); + + it('allows icon stack', async () => { + const el = await waitForElement('#test-default .icon-stack-area'); + expect(el).to.exist; + }); + + it('allows a cta', async () => { + const el = await waitForElement('#test-default .action-area .con-button'); + expect(el).to.exist; + }); + + it('allows supplemental text', async () => { + const el = await waitForElement('#test-default .supplemental-text'); + expect(el).to.exist; + }); + + it('allows a split image', async () => { + const el = await waitForElement('#test-default .split-image img'); + expect(el).to.exist; + }); + + it('allows text overrides', async () => { + const el = await waitForElement('#test-text-overrides'); + expect(el.querySelector('.detail-l')).to.exist; + expect(el.querySelector('.heading-l')).to.exist; + expect(el.querySelector('p.body-m')).to.exist; + }); + + it('allows Title L to override Detail', async () => { + const el = await waitForElement('#test-title .detail-m.title-l'); + expect(el).to.exist; + }); + + it('allows an avatar', async () => { + const el = await waitForElement('#test-avatar .avatar-area img'); + expect(el).to.exist; + }); + + it('allows a product lockup', async () => { + const el = await waitForElement('#test-lockup .lockup-area img'); + expect(el).to.exist; }); }); }); diff --git a/test/blocks/aside/mocks/body.html b/test/blocks/aside/mocks/body.html index 3ac00c2d9b..b41014fd38 100644 --- a/test/blocks/aside/mocks/body.html +++ b/test/blocks/aside/mocks/body.html @@ -3,88 +3,6 @@ data-section-status="loaded">

Aside

-

Standard - Small

-
-
-
#f9f9f9
-
#f9f9f9
-
-
-
-

{{icon-illustrator}}

-

Detail M Bold

-

Heading XL Aside standard small two lines

-

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

-

Learn More

-
-
- - - - -
-
-
-

Standard - Medium

-
-
-
Vital Ocean
-
-
-
-

{{icon-illustrator}}

-

Detail M Bold

-

Heading XL Aside - standard medium three lines Lorem ipsum dolor sit amet.

-

Body S Regular. 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 - ullamco laboris nisi ut.

-

Learn More Sign Up

-
-
- - - - -
-
-
-

Standard - Large

-
-
-
- - - - -
-
-
-
-

{{icon-illustrator}}

-

Detail M Bold

-

- Heading XL Aside standard large five lines Lorem ipsum dolor sit amet, consectetur adipiscing - elit, sed do eismod tempor incididunt.

-

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 ullamco - laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in - voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat. -

-

Learn More Sign Up

-
-
- - - - -
-
-

Simple - Small

@@ -100,511 +18,6 @@

Heading XL Aside Standard S

-

Split - Small

-
-
-
- - - - -
-
-
-
-

Detail M Bold

-

Heading XL Aside split ipsum.

-

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

-

Learn More

-
-
-
-

Split – Medium - Half

-
-
-
- - - - -
-
-
-
-

Detail M Bold

-

Heading XL Lorem ipsum dolor - sit, consectetur adipiscing elit.

-

Body S Regular. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor - incididunt ut labore et dolore magna. At vero eos et accusamus et iusto odio dignissimos ducimus - qui blanditiis.

-

Learn More

-
-
-
-

Split – Large - Right

-
-
-
- - - - -
-
-
-
-

Detail M Bold

-

- Heading XL Lorem ipsum dolor sit, consectetur adipiscing elit, sed do eiusmod incididunt ut. -

-

Body S Regular. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor - incididunt ut labore et dolore magna. At vero eos et accusamus et iusto odio dignissimos ducimus - qui blanditiis praesentium voluptatum deleniti atque.

-

Learn More

-
-
-
-
-
-
#eeeeee
-
-
-
-

- - - - - - -

-

DETAIL M BOLD

-

Heading XL Aside Standard Small

-

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

- -

Learn More Learn More

-
-
- - - - - - -
-
-
-
-
-
#d3d3d3
-
-
-
-

- - - - - - -

-

DETAIL M BOLD

-

Heading XL Aside Standard Small

-

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

-

Learn More Learn More

-
-
- -
-
-
-
-
-
- -
-
- -
-
-
-
-

Detail M Bold

-

Heading XL Lorem ipsum dolor sit, - consectetur adipiscing elit.

-

Body S Regular. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt - ut labore et dolore magna. At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis.

-

Learn More Learn More

-
-
-
-
-
-
-
- -
-
- -
-
- -
-
-
-
-

Detail M Bold

-

Heading XL Lorem ipsum dolor sit, - consectetur adipiscing elit.

-

Body S Regular. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt - ut labore et dolore magna. At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis.

-

Learn More Learn More

-
-
-
-
-
-
-
- -
-
-
-
-

Detail M Bold

-

Heading XL Lorem ipsum dolor sit, - consectetur adipiscing elit.

-

Body S Regular. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt - ut labore et dolore magna. At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis.

-

Learn More Learn More

-
-
-
-
-
-
-
#d3d3d3
-
-
-
-

- - - -

-
-

Detail M Bold

-

Heading XL - Lorem ipsum dolor sit, consectetur adipiscing elit, sed do eiusmod incididunt ut.

-

Body S Regular. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt - ut labore et dolore magna. At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis - praesentium voluptatum deleniti atque.

-

Learn More Learn More

-
-
-

- - - - - - -

-

format: square standard wide

-
-
-
-
-
-
#d3d3d3
-
-
-
-

- - - -

-
-

Detail M Bold

-

Heading XL - Lorem ipsum dolor sit, consectetur adipiscing elit, sed do eiusmod incididunt ut.

-

Body S Regular. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt - ut labore et dolore magna. At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis - praesentium voluptatum deleniti atque.

-

Learn More Learn More

-
-
-

- - - - - - -

-

format: standard wide

-
-
-
-
-
-
#d3d3d3
-
-
-
-

- - - -

-
-

Detail M Bold

-

Heading XL - Lorem ipsum dolor sit, consectetur adipiscing elit, sed do eiusmod incididunt ut.

-

Body S Regular. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt - ut labore et dolore magna. At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis - praesentium voluptatum deleniti atque.

-

Learn More Learn More

-
-
-

- - - - - - -

-

format: standard

-
-
-
-
-
-
#d3d3d3
-
-
-
-

- - - -

-
-

Detail M Bold

-

Heading XL - Lorem ipsum dolor sit, consectetur adipiscing elit, sed do eiusmod incididunt ut.

-

Body S Regular. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt - ut labore et dolore magna. At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis - praesentium voluptatum deleniti atque.

-

Learn More Learn More

-
-
-

- - - - - - -

-

format:

-
-
-
-
-
-
#eeeeee
-
-
-
-

- - - - - - -

-

DETAIL M BOLD

-

- Heading XL Aside standard large five lines Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do - eismod tempor incididunt.

-

Body S Regular. 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 ullamco laboris nisi ut - aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum - dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat.

-

Learn More Text - Link

-

Supplemental text for large

-
-
- - - - - - -
-
-

Inline

diff --git a/test/blocks/aside/mocks/split.html b/test/blocks/aside/mocks/split.html new file mode 100644 index 0000000000..11f3e609d4 --- /dev/null +++ b/test/blocks/aside/mocks/split.html @@ -0,0 +1,114 @@ +
+
+
#1e1e1e
+
+
+
+

+ + + +

+

Detail

+

Heading – Aside (split, medium)

+

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

+ +

Learn More Learn More Text Link

+

Body CTA supplemental text (optional)

+
+
+ + + +
+
+
+
+
+
#1e1e1e
+
+
+
+

+ + + +

+

Detail

+

Heading – Aside (split, l-heading, m-body, l-detail)

+

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

+

Learn More Learn More Text Link

+

Body CTA supplemental text (optional)

+
+
+ + + +
+
+
+
+
+
+

Title

+

Heading – Aside (split, l-title)

+

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

+

Learn More Learn More Text Link

+

Body CTA supplemental text (optional)

+
+
+ + + +
+
+
+
+
+
+

+ + + +

+

Detail

+

Heading – Aside (split, l-avatar)

+

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

+

Learn More Learn More Text Link

+

Body CTA supplemental text (optional)

+
+
+ + + +
+
+
+
+
+
+

Adobe

+

Detail

+

Heading – Aside (split, l-avatar)

+

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

+

Learn More Learn More Text Link

+

Body CTA supplemental text (optional)

+
+
+ + + +
+
+
diff --git a/test/blocks/aside/mocks/standard.html b/test/blocks/aside/mocks/standard.html new file mode 100644 index 0000000000..51b171413e --- /dev/null +++ b/test/blocks/aside/mocks/standard.html @@ -0,0 +1,97 @@ +
+
+
#eeeeee
+
+
+
+

+ + + +

+

Detail

+

Heading – Aside

+

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

+

Learn More Text Link

+

Body CTA supplemental text (optional)

+
+
+ + + +
+
+
+
+
+
+ + + +
+
+
+
+

Detail

+

Heading – Aside

+

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

+

Learn More Text Link

+
+
+
+
+
+
+

Detail

+

Heading – Aside (center, l-heading, m-body, l-detail)

+

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

+

Learn More Text Link

+
+
+
+
+
+
+

Title

+

Heading – Aside (center, l-title)

+

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

+

Learn More Text Link

+
+
+
+
+
+
+

+ + + +

+

Detail

+

Heading – Aside (l-avatar)

+

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

+

Learn More Text Link

+
+
+ + + +
+
+
+
+
+
+

Adobe

+

Detail

+

Heading – Aside

+

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

+

Learn More Text Link

+
+
+ + + +
+
+