diff --git a/libs/blocks/text/text.js b/libs/blocks/text/text.js index c6f14eeea3..5886a8f23b 100644 --- a/libs/blocks/text/text.js +++ b/libs/blocks/text/text.js @@ -1,5 +1,5 @@ import { decorateBlockBg, decorateBlockText, getBlockSize, decorateTextOverrides } from '../../utils/decorate.js'; -import { createTag, loadStyle, getConfig } from '../../utils/utils.js'; +import { createTag, loadStyle, getConfig, loadBlock } from '../../utils/utils.js'; // size: [heading, body, ...detail] const blockTypeSizes = { @@ -76,7 +76,7 @@ function decorateLinkFarms(el) { }); } -export default function init(el) { +export default async function init(el) { el.classList.add('text-block', 'con-block'); let rows = el.querySelectorAll(':scope > div'); if (rows.length > 1) { @@ -117,4 +117,11 @@ export default function init(el) { lastActionArea.insertAdjacentElement('afterend', div); div.append(lastActionArea); } + + const mnemonicList = el.querySelector('.mnemonic-list'); + const foreground = mnemonicList?.closest('.foreground'); + if (foreground) { + mnemonicList.querySelectorAll('p').forEach((product) => product.removeAttribute('class')); + await loadBlock(mnemonicList); + } } diff --git a/test/blocks/text/mocks/body.html b/test/blocks/text/mocks/body.html index f6ae6bb7ac..3c10028ad6 100644 --- a/test/blocks/text/mocks/body.html +++ b/test/blocks/text/mocks/body.html @@ -197,3 +197,26 @@

Text

+ +
+
+
+
+

Get 20+ creative cloud for less than the price of 3 apps.

+

The 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.

+
+
+
+

Includes:

+

Acrobat

+

Photoshop

+

Premiere Pro

+

Illustrator

+

Adobe Express

+

Lightroom

+
+
+
+
+
+
diff --git a/test/blocks/text/text.test.js b/test/blocks/text/text.test.js index 1db68d1d13..b2b8590edd 100644 --- a/test/blocks/text/text.test.js +++ b/test/blocks/text/text.test.js @@ -1,5 +1,12 @@ import { readFile } from '@web/test-runner-commands'; import { expect } from '@esm-bundle/chai'; +import { setConfig } from '../../../libs/utils/utils.js'; + +const conf = { + codeRoot: '/libs', + contentRoot: `${window.location.origin}`, +}; +setConfig(conf); document.body.innerHTML = await readFile({ path: './mocks/body.html' }); const { default: init } = await import('../../../libs/blocks/text/text.js'); @@ -78,4 +85,16 @@ describe('text block', () => { expect(actionArea.parentElement.className.includes('cta-container')).to.be.false; }); }); + describe('text block with mnemonics list', () => { + it('renders mnemonics list', async () => { + const textBlockWithMnemonics = document.querySelector('#mnemonics'); + await init(textBlockWithMnemonics); + const mnemonicsList = textBlockWithMnemonics.querySelector('.mnemonic-list'); + const productList = mnemonicsList?.querySelector('.product-list'); + const productItems = productList?.querySelectorAll('.product-item'); + expect(mnemonicsList).to.exist; + expect(productList).to.exist; + expect(productItems.length).to.equal(7); + }); + }); });