MWPW-159201: Create custom marquee for Catalog page to improve performance

libs/blocks/catalog-marquee/catalog-marquee.css

@@ -0,0 +1,158 @@
+.catalog-marquee {
+  position: relative;
+  display: flex;
+  min-height: 360px;
+  color: var(--text-color);
+}
+
+.catalog-marquee .foreground {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-m);
+  padding: var(--spacing-xl) 0;
+}
+
+.catalog-marquee .mnemonic-list {
+  margin: 0 0 var(--spacing-s);
+}
+
+.catalog-marquee .mnemonic-list .product-list {
+  justify-content: flex-start;
+  text-align: start;
+}
+
+.catalog-marquee .action-area {
+  display: flex;
+  margin: 0;
+  margin-top: var(--spacing-s);
+  gap: var(--spacing-s);
+  flex-wrap: wrap;
+  align-items: center;
+}
+
+.catalog-marquee .background img {
+  object-fit: cover;
+  height: 100%;
+  width: 100%;
+}
+
+.catalog-marquee .background .tablet-only,
+.catalog-marquee .background .desktop-only {
+  display: none;
+}
+
+.catalog-marquee .background picture {
+  display: block;
+  position: absolute;
+  inset: 0;
+  line-height: 0;
+}
+
+.catalog-marquee .background .expand-background {
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+}
+
+.catalog-marquee .text p {
+  margin: 0 0 var(--spacing-s);
+}
+
+.catalog-marquee .text p:last-of-type {
+  margin-bottom: 0;
+}
+
+.catalog-marquee .text .detail-m {
+  margin-bottom: var(--spacing-xs);
+}
+
+.catalog-marquee .text .heading-l {
+  margin-bottom: var(--spacing-xs);
+}
+
+@media screen and (min-width: 600px) {
+  .catalog-marquee {
+    text-align: center;
+  }
+
+  .catalog-marquee .mnemonic-list .product-list {
+    justify-content: center;
+    text-align: center;
+  }
+
+  .catalog-marquee .foreground,
+  .catalog-marquee .action-area {
+    justify-content: center;
+  }
+
+  .catalog-marquee .action-area {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: var(--spacing-s);
+  }
+
+  .catalog-marquee .background .mobile-only,
+  .catalog-marquee .background .desktop-only {
+    display: none;
+  }
+
+  .catalog-marquee .background .tablet-only {
+    display: block;
+  }
+
+  .catalog-marquee .foreground .text {
+    margin: 0 auto;
+  }
+}
+
+@media screen and (min-width: 1200px) {
+  .catalog-marquee {
+    min-height: 360px;
+  }
+
+  .catalog-marquee .text {
+    padding: var(--spacing-l) 0;
+  }
+
+  .catalog-marquee .background .mobile-only,
+  .catalog-marquee .background .tablet-only {
+    display: none;
+  }
+
+  .catalog-marquee .background .desktop-only {
+    display: block;
+  }
+
+  .catalog-marquee .foreground {
+    flex-direction: row;
+    align-items: center;
+    padding: 0;
+    gap: 100px; /* 1 column */
+  }
+
+  html[dir="rtl"] .catalog-marquee .foreground {
+    flex-direction: row-reverse;
+  }
+
+  .catalog-marquee .foreground .text {
+    max-width: var(--grid-container-width);
+  }
+}
+
+/* stylelint-disable no-descending-specificity */
+.catalog-marquee.static-links a:not(.con-button),
+.catalog-marquee.static-links a:not(.con-button):hover,
+.static-links .catalog-marquee a:not(.con-button),
+.static-links .catalog-marquee a:not(.con-button):hover {
+  color: inherit;
+}
+
+/* hide download/upgrade links except the last one */
+.catalog-marquee a[is="checkout-link"].download:not(:last-of-type),
+.catalog-marquee a[is="checkout-link"].upgrade:not(:last-of-type) {
+  display: none;
+}

libs/blocks/catalog-marquee/catalog-marquee.js

@@ -0,0 +1,72 @@
+import { decorateButtons, decorateBlockBg, loadCDT } from '../../utils/decorate.js';
+import { createTag, getConfig, loadStyle } from '../../utils/utils.js';
+
+export function decorateText(el) {
+  const headings = el.querySelectorAll('h1, h2, h3, h4, h5, h6');
+  const heading = headings[headings.length - 1];
+  heading.classList.add('heading-l');
+  heading.nextElementSibling?.classList.add('body-m');
+  heading.previousElementSibling?.classList.add('detail-m');
+}
+
+export function extendButtonsClass(text) {
+  text.querySelectorAll('.con-button').forEach((button) => {
+    button.classList.add('button-justified-mobile');
+  });
+}
+
+export function decorateFeatures(paragraphs, parentEl, lastChild) {
+  if (!paragraphs?.length || !parentEl || !lastChild) return;
+  const mnemonicList = createTag('div', { class: 'mnemonic-list' });
+  const productList = createTag('div', { class: 'product-list' });
+  [...paragraphs].forEach((paragraph) => {
+    const title = paragraph.querySelector('strong');
+    const picture = paragraph.querySelector('picture');
+    const product = createTag('div', { class: 'product-item' });
+    if (picture) product.appendChild(picture);
+    if (title) product.appendChild(title);
+    productList.appendChild(product);
+    paragraph.replaceWith(productList);
+  });
+  mnemonicList.appendChild(productList);
+  parentEl.insertBefore(mnemonicList, lastChild);
+}
+
+export function appendFeatures(el, foreground, text, promiseArr) {
+  if (!el || !foreground || !text || !promiseArr) return;
+  const paragraphs = Array.from(foreground.querySelectorAll(':scope p:not([class])'));
+  const actionArea = text.querySelector('.action-area');
+  const headingsIndexes = paragraphs.flatMap((elem, i) => (elem.querySelector('strong') && !elem.querySelector('picture') ? i : []));
+  if (!headingsIndexes.length) return;
+  if (headingsIndexes.length === 1) {
+    decorateFeatures(paragraphs, text, actionArea);
+  } else {
+    const mnemonics = paragraphs.splice(...headingsIndexes);
+    const businessFeatures = paragraphs;
+    decorateFeatures(mnemonics, text, actionArea);
+    decorateFeatures(businessFeatures, text, actionArea);
+  }
+  promiseArr.push(loadStyle(`${getConfig().base}/blocks/mnemonic-list/mnemonic-list.css`));
+}
+
+export default async function init(el) {
+  const children = el.querySelectorAll(':scope > div');
+  const foreground = children[children.length - 1];
+  if (children.length > 1) {
+    children[0].classList.add('background');
+    decorateBlockBg(el, children[0], { useHandleFocalpoint: true });
+  }
+  foreground.classList.add('foreground', 'container');
+  const headline = foreground.querySelector('h1, h2, h3, h4, h5, h6');
+  const text = headline.closest('div');
+  text.classList.add('text');
+  decorateText(text);
+  decorateButtons(text, 'button-l');
+  extendButtonsClass(text);
+  const promiseArr = [];
+  appendFeatures(el, foreground, text, promiseArr);
+  if (el.classList.contains('countdown-timer')) {
+    promiseArr.push(loadCDT(text, el.classList));
+  }
+  await Promise.all(promiseArr);
+}

libs/utils/utils.js

@@ -24,6 +24,7 @@ const MILO_BLOCKS = [
   'card-horizontal',
   'card-metadata',
   'carousel',
+  'catalog-marquee',
   'chart',
   'columns',
   'editorial-card',

nala/blocks/catalog-marquee/catalog-marquee.page.js

@@ -0,0 +1,69 @@
+export default class CatalogMarquee {
+  constructor(page) {
+    this.page = page;
+    this.catalogMarquee = page.locator('.catalog-marquee');
+
+    // Background
+    this.background = this.catalogMarquee.locator('.background');
+    this.backgroundImage = this.background.locator('img').nth(2);
+
+    // Foreground
+    this.foreground = this.catalogMarquee.locator('.foreground.container');
+    this.text = this.foreground.locator('.text');
+    this.textH2 = this.text.locator('h2');
+    this.bodyM = this.text.locator('.body-m');
+
+    // Mnemonic list
+    this.mnemonicsList = this.text.locator('.mnemonic-list').nth(0);
+    this.mnemonics = this.mnemonicsList.locator('.product-list');
+    this.mnemonicItems = this.mnemonics.locator('.product-item');
+    this.mnemonicsHeading = this.mnemonics.locator('.product-item strong').nth(0);
+
+    this.acrobatText = this.mnemonics.locator('.product-item strong').nth(1);
+    this.photoshopText = this.mnemonics.locator('.product-item strong').nth(2);
+    this.premiereProText = this.mnemonics.locator('.product-item strong').nth(3);
+    this.illustratorText = this.mnemonics.locator('.product-item strong').nth(4);
+    this.expressText = this.mnemonics.locator('.product-item strong').nth(5);
+
+    this.acrobatImg = this.mnemonics.locator('.product-item img').nth(0);
+    this.photoshopImg = this.mnemonics.locator('.product-item img').nth(1);
+    this.premiereProImg = this.mnemonics.locator('.product-item img').nth(2);
+    this.illustratorImg = this.mnemonics.locator('.product-item img').nth(3);
+    this.expressImg = this.mnemonics.locator('.product-item img').nth(4);
+
+    // Business features
+    this.businessFeaturesList = this.text.locator('.mnemonic-list').nth(1);
+    this.businessFeatures = this.businessFeaturesList.locator('.product-list');
+    this.businessItems = this.businessFeatures.locator('.product-item');
+    this.businessFeaturessHeading = this.businessFeatures.locator('.product-item strong').nth(0);
+
+    this.dashboardText = this.businessFeatures.locator('.product-item strong').nth(1);
+    this.feedbackText = this.businessFeatures.locator('.product-item strong').nth(2);
+    this.filesText = this.businessFeatures.locator('.product-item strong').nth(3);
+    this.assetsText = this.businessFeatures.locator('.product-item strong').nth(4);
+
+    this.dashboardImg = this.businessFeatures.locator('.product-item img').nth(0);
+    this.feedbackImg = this.businessFeatures.locator('.product-item img').nth(1);
+    this.filesImg = this.businessFeatures.locator('.product-item img').nth(2);
+    this.assetsImg = this.businessFeatures.locator('.product-item img').nth(3);
+
+    // Action area
+    this.actionArea = this.text.locator('.action-area');
+    this.outlineButtonL = this.actionArea.locator('.con-button.outline.button-l');
+    this.blueButtonL = this.actionArea.locator('.con-button.blue.button-l');
+
+    this.attributes = {
+      backgroundImg: {
+        loading: 'lazy',
+        width: '750',
+        height: '141',
+      },
+      acrobatImg: { alt: 'Acrobat Pro Product Icon' },
+      photoshopImg: { alt: 'Photoshop Product Icon' },
+      premiereProImg: { alt: 'Premiere Pro Product Iconn' },
+      illustratorImg: { alt: 'Illustrator Product Icon' },
+      expressImg: { alt: 'Express Product Icon' },
+      checkmarkImg: { alt: 'Checkmark icon' },
+    };
+  }
+}

nala/blocks/catalog-marquee/catalog-marquee.spec.js

@@ -0,0 +1,34 @@
+module.exports = {
+  name: 'Catalog Marquee Block',
+  features: [
+    {
+      tcid: '0',
+      name: 'Catalog Marquee',
+      path: '/drafts/nala/blocks/catalog-marquee/catalog-marquee',
+      data: {
+        h2Text: 'Get 20+ creative cloud for less than the price of 3 apps.',
+        bodyText: 'All Apps plan includes 20+ apps and services plus 20,000 fonts, storage, templates, and tutorials for less than the price of acrobat, photoshop, and premiere pro sold separately.',
+        mnemonics: {
+          count: 6,
+          heading: 'Includes:',
+          acrobat: 'Acrobat',
+          photoshop: 'Photoshop',
+          premierePro: 'Premiere pro',
+          illustrator: 'Illustrator',
+          express: 'Express',
+        },
+        businessFeatures: {
+          count: 5,
+          heading: 'Business features:',
+          dashboard: 'Easy-to-use admin dashboard',
+          feedback: 'Instant feedback',
+          files: 'Shared creative files',
+          assets: 'Protective creative assets',
+        },
+        outlineButtonText: 'Free trial',
+        blueButtonText: 'Buy now',
+      },
+      tags: '@catalog-marquee @smoke @regression @milo',
+    },
+  ],
+};