diff --git a/libs/blocks/graybox/graybox.css b/libs/blocks/graybox/graybox.css index 4d3cac4ad8..53d8a0b23b 100644 --- a/libs/blocks/graybox/graybox.css +++ b/libs/blocks/graybox/graybox.css @@ -26,7 +26,7 @@ width: calc(100% - 15.5px); height: 100%; border: var(--gb-page-outline-border); - z-index: var(--above-all); + z-index: calc(var(--above-all) + 1); pointer-events: none; } @@ -39,25 +39,35 @@ position: fixed; } -.gb-graybox-body .gb-no-click::before { +.gb-no-click::after { content: ""; height: 100%; - pointer-events: all; + pointer-events: none; position: absolute; width: 100%; z-index: var(--above-all); + left: 0; + top: 0; } .gb-no-change { position: relative; } -.gb-overlay { - position: relative; +.gb-page-overlay { + background-color: var(--gb-overlay-color); + content: ""; + display: block; + height: 100%; + left: 0; + pointer-events: none; + position: fixed; + top: 0; + width: 100%; + z-index: calc(var(--above-all) - 1); } -.gb-graybox-body .gb-no-change::before, -.gb-graybox-body.gb-overlay::before { +.gb-no-change::before { background-color: var(--gb-overlay-color); content: ""; display: block; @@ -70,14 +80,10 @@ z-index: calc(var(--above-all) - 1); } -body.gb-overlay::before { - position: fixed; -} - /* The elements that should appear above the overlay */ .gb-graybox-body .gb-changed { position: relative; - z-index: var(--above-all); + z-index: calc(var(--above-all) - 1); } .graybox-container { @@ -208,40 +214,44 @@ body.gb-overlay::before { position: absolute; pointer-events: none; width: 859px; - height: 1205px; + min-height: 1189px; } .dialog-modal.graybox-modal.mobile { + min-width: 417px; width: 417px; + min-height: 863px; border-radius: 66px; background: var(--gb-modal-bg); overflow-y: hidden; } .dialog-modal.graybox-modal.tablet { - width: 858px; + min-width: 858px; border-radius: 66px; background: var(--gb-modal-bg); border-top-right-radius: 60px 78px; border-bottom-right-radius: 51px 69px; border-bottom-left-radius: 55px 84px; overflow-y: hidden; + zoom: 0.8; + min-height: 1187px; } .dialog-modal.graybox-modal.mobile iframe { width: 391px; - height: 852px; + min-height: 852px; padding-left: 16px; margin-left: 4px; } .dialog-modal.graybox-modal.tablet iframe { - width: 808px; - height: 1194px; + width: 814px; + height: 1067px; padding-left: 26px; - margin-left: 6px; - margin-top: 62px; - margin-bottom: -62px; + padding-top: 57px; + margin-left: 5px; + margin-top: 8px; } .dialog-modal.graybox-modal button.dialog-close { @@ -253,9 +263,9 @@ body.gb-overlay::before { z-index: calc(var(--above-all) - 1); } -@media (max-height: 910px) { +@media (max-height: 910px), (max-width: 420px) { body.gb-phone-preview::after { - content: "Expand window height to see full preview"; + content: "Expand window to see full preview"; position: fixed; right: 10px; bottom: 2px; @@ -268,9 +278,9 @@ body.gb-overlay::before { } } -@media (max-height: 1255px) { +@media (max-height: 1040px), (max-width: 710px) { body.gb-tablet-preview::after { - content: "Expand window height to see full preview"; + content: "Expand window to see full preview"; position: fixed; right: 10px; bottom: 2px; diff --git a/libs/blocks/graybox/graybox.js b/libs/blocks/graybox/graybox.js index 236aa04ffc..3143405ded 100644 --- a/libs/blocks/graybox/graybox.js +++ b/libs/blocks/graybox/graybox.js @@ -13,8 +13,7 @@ const CLASS = { NO_BORDER: 'gb-no-border', NO_CHANGE: 'gb-no-change', NO_CLICK: 'gb-no-click', - NO_OVERLAY: 'gb-no-overlay', - OVERLAY: 'gb-overlay', + PAGE_OVERLAY: 'gb-page-overlay', PHONE_PREVIEW: 'gb-phone-preview', TABLET_PREVIEW: 'gb-tablet-preview', }; @@ -51,11 +50,11 @@ const isMobileDevice = () => /Android|webOS|iPhone|iPad|iPod/i.test(navigator.us const getTableValues = (el) => [...el.childNodes].reduce((rdx, row) => { if (!row.children) return rdx; - const key = row.children[0].textContent?.trim().toLowerCase(); + const key = row.children[0]?.textContent?.trim().toLowerCase(); const content = row.children[1]; let text = content?.textContent.trim(); /* c8 ignore next 3 */ - if (key !== 'title' && key !== 'desc') { + if (key !== 'title' && key !== 'desc' && text) { text = text.toLowerCase(); } if (key && content) { @@ -76,9 +75,9 @@ const decorateFooter = (footer, options) => { if (footerOptions?.includes(OPTION.CHANGED)) { footer.classList.add(CLASS.CHANGED); } else { - footer.classList.add(CLASS.OVERLAY); + footer.classList.add(CLASS.NO_CHANGE); } - if (footerOptions?.includes(OPTION.NO_CLICK)) { + if (footerOptions?.includes(OPTION.NO_CLICK) || footerOptions?.includes(CLASS.NO_CLICK)) { footer.classList.add(CLASS.NO_CLICK); } }; @@ -108,15 +107,15 @@ const checkFooter = (options) => { const checkGnav = (options, globalNoClick) => { const gnav = document.querySelector('.global-navigation'); if (gnav) { - gnav.style.zIndex = '1002'; + gnav.style.zIndex = '9000'; const gnavOptions = getOptions(options.gnav?.text, METADATA.GNAV); if (!(gnavOptions?.includes(OPTION.CHANGED))) { - gnav.classList.add(CLASS.OVERLAY); + gnav.classList.add(CLASS.NO_CHANGE); if (globalNoClick) { gnav.classList.add(CLASS.NO_CLICK); } } - if (gnavOptions?.includes(OPTION.NO_CLICK)) { + if (gnavOptions?.includes(OPTION.NO_CLICK) || gnavOptions?.includes(CLASS.NO_CLICK)) { gnav.classList.add(CLASS.NO_CLICK); } } @@ -128,7 +127,7 @@ const checkNoClick = (grayboxEl, noClickOnGray) => { return; } /* c8 ignore next 6 */ - if (document.body.classList.contains(CLASS.OVERLAY)) { + if (document.body.classList.contains(CLASS.NO_CHANGE)) { document.body.classList.add(CLASS.NO_CLICK); } else { document.querySelectorAll(`.${CLASS.NO_CHANGE}`) @@ -153,9 +152,13 @@ function setUserAgent(window, userAgent) { } } +// eslint-disable-next-line no-promise-executor-return +const sleep = (delay) => new Promise((resolve) => setTimeout(resolve, delay)); + const openDeviceModal = async (e) => { if (deviceModal) { closeModal(deviceModal); + await sleep(300); deviceModal = null; } @@ -239,6 +242,57 @@ const createGrayboxMenu = (options, { isOpen = false } = {}) => { } }; +const addPageOverlayDiv = () => { + const overlayDiv = createTag('div', { class: CLASS.PAGE_OVERLAY }); + document.body.insertBefore(overlayDiv, document.body.firstChild); +}; + +const setupChangedEls = (globalNoClick) => { + const changedElSel = `.${CLASS.CHANGED}:not(main > div), main > div.${CLASS.CHANGED} > div:not(.${CLASS.NO_CHANGE})`; + const changedSectionSel = `main > div.${CLASS.CHANGED}`; + const gbChangedEls = [...document.querySelectorAll(changedElSel)]; + [...gbChangedEls, ...document.querySelectorAll(changedSectionSel)].forEach((el) => { + if (!el.style.backgroundColor) el.style.backgroundColor = 'white'; + }); + if (globalNoClick) { + const blockEls = document.querySelectorAll('main > div > div'); + blockEls.forEach((el) => { + if (!gbChangedEls.includes(el)) { + el.classList.add(CLASS.NO_CLICK); + } + }); + } +}; + +const grayboxThePage = (grayboxEl, grayboxMenuOff) => () => { + document.body.classList.add(CLASS.GRAYBOX_BODY); + const globalNoClick = grayboxEl.classList.contains(CLASS.NO_CLICK) + || grayboxEl.classList.contains(OPTION.NO_CLICK); + + const hasGrayboxChangedEl = !!document.querySelector(`.${CLASS.CHANGED}`); + if (hasGrayboxChangedEl) { + // If there is at least one element with the 'gb-changed' class + // a whole page overlay is set on all elements without the 'gb-changed' class + addPageOverlayDiv(); + setupChangedEls(globalNoClick); + } else if (globalNoClick) { + document.querySelectorAll(`.${CLASS.NO_CHANGE}`) + .forEach((el) => el.classList.add(CLASS.NO_CLICK)); + } + + const options = getTableValues(grayboxEl); + checkGnav(options, globalNoClick); + checkFooter(options); + checkNoClick(grayboxEl, globalNoClick); + + /* c8 ignore next 3 */ + if (grayboxMenuOff) { + document.body.classList.add(CLASS.NO_BORDER); + } else { + createGrayboxMenu(options, { isOpen: true }); + } +}; + export default function init(grayboxEl) { const url = new URL(window.location.href); @@ -256,30 +310,11 @@ export default function init(grayboxEl) { } setMetadata({ selector: 'georouting', val: 'off' }); + const grayboxMenuOff = url.searchParams.get('graybox') === 'menu-off'; - const options = getTableValues(grayboxEl); - const grayboxThePage = () => { - document.body.classList.add(CLASS.GRAYBOX_BODY); - const hasGrayboxChanged = !!document.querySelector(`.${CLASS.CHANGED}`); - if (hasGrayboxChanged) { - document.body.classList.add(CLASS.OVERLAY); - - document.querySelectorAll(`.${CLASS.CHANGED}`).forEach((el) => { - el.classList.add(CLASS.NO_OVERLAY); - if (!el.style.backgroundColor) el.style.backgroundColor = 'white'; - }); - } - const globalNoClick = grayboxEl.classList.contains(OPTION.NO_CLICK); - checkGnav(options, globalNoClick); - checkFooter(options); - checkNoClick(grayboxEl, globalNoClick); - /* c8 ignore next 3 */ - if (url.searchParams.get('graybox') === 'menu-off') { - document.body.classList.add(CLASS.NO_BORDER); - } else { - createGrayboxMenu(options, { isOpen: true }); - } - }; - - document.addEventListener(MILO_EVENTS.DEFERRED, grayboxThePage, { once: true }); + document.addEventListener( + MILO_EVENTS.DEFERRED, + grayboxThePage(grayboxEl, grayboxMenuOff), + { once: true }, + ); } diff --git a/libs/features/personalization/personalization.js b/libs/features/personalization/personalization.js index ff55ca81a9..7762907071 100644 --- a/libs/features/personalization/personalization.js +++ b/libs/features/personalization/personalization.js @@ -29,7 +29,7 @@ const PERSONALIZATION_KEYS = Object.keys(PERSONALIZATION_TAGS); const CLASS_EL_DELETE = 'p13n-deleted'; const CLASS_EL_REPLACE = 'p13n-replaced'; -const COLUMN_NOT_OPERATOR = 'not'; +const COLUMN_NOT_OPERATOR = 'not '; const TARGET_EXP_PREFIX = 'target-'; const INLINE_HASH = '_inline'; const PAGE_URL = new URL(window.location.href); diff --git a/test/blocks/graybox/globalnoclick.test.js b/test/blocks/graybox/globalnoclick.test.js new file mode 100644 index 0000000000..e78a158628 --- /dev/null +++ b/test/blocks/graybox/globalnoclick.test.js @@ -0,0 +1,58 @@ +import { readFile } from '@web/test-runner-commands'; +import { expect } from '@esm-bundle/chai'; +import { loadStyle, MILO_EVENTS } from '../../../libs/utils/utils.js'; + +const { default: init } = await import('../../../libs/blocks/graybox/graybox.js'); +await loadStyle('../../../libs/blocks/graybox/graybox.css'); + +const CLASS = { + CHANGED: 'gb-changed', + NO_CHANGE: 'gb-no-change', +}; + +describe('Graybox Global No Click With Changed Els', () => { + before(async () => { + document.body.innerHTML = await readFile({ path: './mocks/noclick-changed-els.html' }); + await init(document.querySelector('.graybox')); + document.dispatchEvent(new Event(MILO_EVENTS.DEFERRED)); + }); + + it('Stops all grayed elements from being clickable', async () => { + const changedElSel = `.${CLASS.CHANGED}:not(main > div), main > div.${CLASS.CHANGED} > div:not(.${CLASS.NO_CHANGE})`; + const changedEls = [...document.querySelectorAll(changedElSel)]; + const allBlockEls = document.querySelectorAll('main > div > div'); + allBlockEls.forEach((el) => { + // skip the graybox block + if (el.classList.contains('graybox')) return; + + if (!changedEls.includes(el)) { + expect(el.classList.contains('gb-no-click')).to.be.true; + } else { + expect(el.classList.contains('gb-no-click')).to.be.false; + } + }); + }); +}); + +describe('Graybox Global No Click With Not Changed Els Marked', () => { + before(async () => { + document.body.innerHTML = await readFile({ path: './mocks/noclick-no-change.html' }); + await init(document.querySelector('.graybox')); + document.dispatchEvent(new Event(MILO_EVENTS.DEFERRED)); + }); + + it('Stops all grayed elements from being clickable', async () => { + const notChangedEls = [...document.querySelectorAll(`.${CLASS.NO_CHANGE}`)]; + const allBlockAndSectionEls = document.querySelectorAll('main > div > div, main > div'); + allBlockAndSectionEls.forEach((el) => { + // skip the graybox block + if (el.classList.contains('graybox')) return; + + if (notChangedEls.includes(el)) { + expect(el.classList.contains('gb-no-click')).to.be.true; + } else { + expect(el.classList.contains('gb-no-click')).to.be.false; + } + }); + }); +}); diff --git a/test/blocks/graybox/graybox.test.js b/test/blocks/graybox/graybox.test.js index d7cc4c8808..3bd997c4e7 100644 --- a/test/blocks/graybox/graybox.test.js +++ b/test/blocks/graybox/graybox.test.js @@ -56,22 +56,21 @@ describe('Graybox', () => { }); it('Puts an overlay on the entire page', async () => { - expect(document.body.classList.contains('gb-overlay')).to.be.true; - const beforeStyle = window.getComputedStyle(document.body, '::before'); + const overlayDiv = document.querySelector('body > .gb-page-overlay'); + expect(overlayDiv).to.exist; + const beforeStyle = window.getComputedStyle(overlayDiv); expect(beforeStyle.backgroundColor).to.equal('rgba(0, 0, 0, 0.45)'); }); it('Does not put an overlay on gb-changed blocks', async () => { const gbChangedEl = document.querySelector('.gb-changed'); const gbChangedElStyle = window.getComputedStyle(gbChangedEl); - expect(gbChangedEl?.classList.contains('gb-no-overlay')).to.be.true; expect(gbChangedElStyle.backgroundColor).to.equal('rgb(255, 255, 255)'); }); it('Does not put an overlay on gb-no-change sections', async () => { - const gbChangedSection = document.querySelector('.section.gb-changed'); + const gbChangedSection = document.querySelector('main > div.gb-changed'); const gbChangedSectionStyle = window.getComputedStyle(gbChangedSection); - expect(gbChangedSection?.classList.contains('gb-no-overlay')).to.be.true; expect(gbChangedSectionStyle.backgroundColor).to.equal('rgb(255, 255, 255)'); }); @@ -83,7 +82,7 @@ describe('Graybox', () => { it('Can use gb-no-click to disable clicks', async () => { const noClickEl = document.querySelector('.gb-no-click'); - const noClickElStyle = window.getComputedStyle(noClickEl, '::before'); - expect(noClickElStyle.pointerEvents).to.equal('all'); + const noClickElStyle = window.getComputedStyle(noClickEl, '::after'); + expect(noClickElStyle.pointerEvents).to.equal('none'); }); }); diff --git a/test/blocks/graybox/mocks/graybox.html b/test/blocks/graybox/mocks/graybox.html index 38ff28cc80..a60088e661 100644 --- a/test/blocks/graybox/mocks/graybox.html +++ b/test/blocks/graybox/mocks/graybox.html @@ -1,4 +1,3 @@ -
@@ -9,7 +8,8 @@
desc
-
Chuck Norris once roundhouse kicked someone so hard that his foot broke the speed of light, went back in time, and killed Amelia Earhart while she was flying over the Pacific Ocean
+
Chuck Norris once roundhouse kicked someone so hard that his foot broke the speed of + light, went back in time, and killed Amelia Earhart while she was flying over the Pacific Ocean
@@ -23,7 +23,8 @@

Marquee standard small dark

-

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.

+

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.

Call to action

@@ -34,13 +35,19 @@

Marquee standard small dark

Random text outside of the marquee block.

-

That's what's so funny! I switched glasses when your back was turned! Ha ha! You fool! You fell victim to one of the classic blunders - The most famous of which is "never get involved in a land war in Asia" - but only slightly less well-known is this: "Never go against a Sicilian when death is on the line"! Ha ha ha ha ha ha ha! Ha ha ha ha ha ha ha! Ha ha ha...

+

That's what's so funny! I switched glasses when your back was turned! Ha ha! You fool! You fell victim to one + of the classic blunders - The most famous of which is "never get involved in a land war in Asia" - but only + slightly less well-known is this: "Never go against a Sicilian when death is on the line"! Ha ha ha ha ha ha ha! + Ha ha ha ha ha ha ha! Ha ha ha...

-

You're the Dread Pirate Roberts, admit it. How may do you think you could handle? You mean you wish to surrender to me? Very well, I accept. But how can you be sure? Will this do? You truly love each other and so you might have been truly happy. Not one couple in a century has that chance, no matter what the story books say.

+

You're the Dread Pirate Roberts, admit it. How may do you think you could handle? You mean you wish to + surrender to me? Very well, I accept. But how can you be sure? Will this do? You truly love each other and so + you might have been truly happy. Not one couple in a century has that chance, no matter what the story books + say.

@@ -51,16 +58,23 @@

Marquee standard small dark

-

“3D is a crucial part of how we explore the brand in a digital workflow. Adobe Substance 3D Stager takes the barrier of entry out of 3D design by enabling us to skip physical mockups and look at feedback faster. We’ve been able to bring digital design entirely in-house.”

+

“3D is a crucial part of how we explore the brand in a digital workflow. Adobe Substance 3D Stager takes + the barrier of entry out of 3D design by enabling us to skip physical mockups and look at feedback faster. + We’ve been able to bring digital design entirely in-house.”

Benny Lee

Global Manager of Experiential Design, Coca-Cola Company

-

The ability to destroy a planet is insignificant next to the power of the Force. Don't try to frighten us with your sorcerer's ways, Lord Vader. Your sad devotion to that ancient religion has not helped you conjure up the stolen data tapes, or given you clairvoyance enough to find the Rebel's hidden fort. I find your lack of faith disturbing. Enough of this! Vader, release him! As you wish.

-

Did you hear that? They've shut down the main reactor. We'll be destroyed for sure. This is madness! We're doomed! There'll be no escape for the Princess this time. What's that? Artoo! Artoo-Detoo, where are you? At last! Where have you been? They're heading in this direction.

+

The ability to destroy a planet is insignificant next to the power of the Force. Don't try to frighten us with + your sorcerer's ways, Lord Vader. Your sad devotion to that ancient religion has not helped you conjure up the + stolen data tapes, or given you clairvoyance enough to find the Rebel's hidden fort. I find your lack of faith + disturbing. Enough of this! Vader, release him! As you wish.

+

Did you hear that? They've shut down the main reactor. We'll be destroyed for sure. This is madness! We're + doomed! There'll be no escape for the Princess this time. What's that? Artoo! Artoo-Detoo, where are you? At + last! Where have you been? They're heading in this direction.

-
+

This Section is graybox-changed

@@ -78,48 +92,55 @@

Marquee standard small dark

This text block has gb-no-chage inside of a gb-changed section.
-
-
-
-

How to compress a PDF online

-

Note that there is no JSONLD schema saved and the image (svg in this case) is part of the header

-

https://main--milo--adobecom.hlx.page/assets/img/compress-pdf-how-to-400x240.svg

+
+
+
+

How to compress a PDF online

+

Note that there is no JSONLD schema saved and the image (svg in this case) is part of the header

+

https://main--milo--adobecom.hlx.page/assets/img/compress-pdf-how-to-400x240.svg +

+
-
-
-
-
    -
  • Click the Select a file button above or drag and drop files into the drop zone.
    • -
  • Select the PDF file you want to make smaller.
    • -
  • After uploading, Acrobat will automatically reduce the PDF size.
    • -
  • Download your compressed PDF file or sign in to share it.
    • -
+
+
+
    +
  • Click the Select a file button above or drag and drop files into the drop zone. +
    • +
  • Select the PDF file you want to make smaller.
    • +
  • After uploading, Acrobat will automatically reduce the PDF size.
    • +
  • Download your compressed PDF file or sign in to share it.
    • +
+
-
-
-
-
style
-
gb-changed
+
+
+
style
+
gb-changed
+
-
-
-
-
-
-

“This was our opportunity to be one of the first teams to delve into Adobe Experience Platform, and we wanted to show people just how powerful it can be.”

-

Ron Nagy

-

Sr. Evangelist, Adobe@Adobe

+
+
+
+
+

“This was our opportunity to be one of the first teams to delve into Adobe Experience Platform, and we + wanted to show people just how powerful it can be.”

+

Ron Nagy

+

Sr. Evangelist, Adobe@Adobe

+
-
-
-
-
-

Text - This is graybox-changed!

-

Kick things off with hundreds of premium and free presets you can access with your Lightroom subscription.

-

Learn more Explore the premium collection

+
+
+
+

Text - This is graybox-changed!

+

Kick things off with hundreds of premium and free presets you can access with your Lightroom + subscription.

+

Learn more Explore the premium + collection

+
diff --git a/test/blocks/graybox/mocks/noclick-changed-els.html b/test/blocks/graybox/mocks/noclick-changed-els.html new file mode 100644 index 0000000000..314c2f2e8d --- /dev/null +++ b/test/blocks/graybox/mocks/noclick-changed-els.html @@ -0,0 +1,150 @@ + +
+
+
+
+
title
+
Project Review - 3/7/24
+
+
+
desc
+
Chuck Norris once roundhouse kicked someone so hard that his foot broke the speed of + light, went back in time, and killed Amelia Earhart while she was flying over the Pacific Ocean
+
+
+
+
+
+ + + +
+
+
+
+

Marquee standard small dark

+

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.

+

Call to action

+
+
+ + + +
+
+
+

Random text outside of the marquee block.

+

That's what's so funny! I switched glasses when your back was turned! Ha ha! You fool! You fell victim to one + of the classic blunders - The most famous of which is "never get involved in a land war in Asia" - but only + slightly less well-known is this: "Never go against a Sicilian when death is on the line"! Ha ha ha ha ha ha ha! + Ha ha ha ha ha ha ha! Ha ha ha...

+

+ + + +

+

You're the Dread Pirate Roberts, admit it. How may do you think you could handle? You mean you wish to + surrender to me? Very well, I accept. But how can you be sure? Will this do? You truly love each other and so + you might have been truly happy. Not one couple in a century has that chance, no matter what the story books + say.

+
+
+
+ + + +
+
+
+
+

“3D is a crucial part of how we explore the brand in a digital workflow. Adobe Substance 3D Stager takes + the barrier of entry out of 3D design by enabling us to skip physical mockups and look at feedback faster. + We’ve been able to bring digital design entirely in-house.”

+

Benny Lee

+

Global Manager of Experiential Design, Coca-Cola Company

+
+
+
+

The ability to destroy a planet is insignificant next to the power of the Force. Don't try to frighten us with + your sorcerer's ways, Lord Vader. Your sad devotion to that ancient religion has not helped you conjure up the + stolen data tapes, or given you clairvoyance enough to find the Rebel's hidden fort. I find your lack of faith + disturbing. Enough of this! Vader, release him! As you wish.

+

Did you hear that? They've shut down the main reactor. We'll be destroyed for sure. This is madness! We're + doomed! There'll be no escape for the Princess this time. What's that? Artoo! Artoo-Detoo, where are you? At + last! Where have you been? They're heading in this direction.

+
+
+

This Section is graybox-changed

+
+
+
+

+ + + +

+

Body S Regular 2-line 36 CC

+
+
+
+
+
+
This text block has gb-no-chage inside of a gb-changed section.
+
+
+
+
+

How to compress a PDF online

+

Note that there is no JSONLD schema saved and the image (svg in this case) is part of the header

+

https://main--milo--adobecom.hlx.page/assets/img/compress-pdf-how-to-400x240.svg +

+
+
+
+
+
    +
  • Click the Select a file button above or drag and drop files into the drop zone. +
    • +
  • Select the PDF file you want to make smaller.
    • +
  • After uploading, Acrobat will automatically reduce the PDF size.
    • +
  • Download your compressed PDF file or sign in to share it.
    • +
+
+
+
+
+
+
style
+
gb-changed
+
+
+
+
+
+
+
+

“This was our opportunity to be one of the first teams to delve into Adobe Experience Platform, and we + wanted to show people just how powerful it can be.”

+

Ron Nagy

+

Sr. Evangelist, Adobe@Adobe

+
+
+
+
+
+
+

Text - This is graybox-changed!

+

Kick things off with hundreds of premium and free presets you can access with your Lightroom + subscription.

+

Learn more Explore the premium + collection

+
+
+
+
+
+
+
+ diff --git a/test/blocks/graybox/mocks/noclick-no-change.html b/test/blocks/graybox/mocks/noclick-no-change.html new file mode 100644 index 0000000000..b851d5038d --- /dev/null +++ b/test/blocks/graybox/mocks/noclick-no-change.html @@ -0,0 +1,139 @@ + +
+
+
+
+
+
+
+
+
+
+
+ + + +
+
+
+
+

Marquee standard small dark

+

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.

+

Call to action

+
+
+ + + +
+
+
+

Random text outside of the marquee block.

+

That's what's so funny! I switched glasses when your back was turned! Ha ha! You fool! You fell victim to one + of the classic blunders - The most famous of which is "never get involved in a land war in Asia" - but only + slightly less well-known is this: "Never go against a Sicilian when death is on the line"! Ha ha ha ha ha ha ha! + Ha ha ha ha ha ha ha! Ha ha ha...

+

+ + + +

+

You're the Dread Pirate Roberts, admit it. How may do you think you could handle? You mean you wish to + surrender to me? Very well, I accept. But how can you be sure? Will this do? You truly love each other and so + you might have been truly happy. Not one couple in a century has that chance, no matter what the story books + say.

+
+
+
+ + + +
+
+
+
+

“3D is a crucial part of how we explore the brand in a digital workflow. Adobe Substance 3D Stager takes + the barrier of entry out of 3D design by enabling us to skip physical mockups and look at feedback faster. + We’ve been able to bring digital design entirely in-house.”

+

Benny Lee

+

Global Manager of Experiential Design, Coca-Cola Company

+
+
+
+

The ability to destroy a planet is insignificant next to the power of the Force. Don't try to frighten us with + your sorcerer's ways, Lord Vader. Your sad devotion to that ancient religion has not helped you conjure up the + stolen data tapes, or given you clairvoyance enough to find the Rebel's hidden fort. I find your lack of faith + disturbing. Enough of this! Vader, release him! As you wish.

+

Did you hear that? They've shut down the main reactor. We'll be destroyed for sure. This is madness! We're + doomed! There'll be no escape for the Princess this time. What's that? Artoo! Artoo-Detoo, where are you? At + last! Where have you been? They're heading in this direction.

+
+
+

This Section is graybox-changed

+
+
+
+

+ + + +

+

Body S Regular 2-line 36 CC

+
+
+
+
+
+
This text block has not been changed.
+
+
+
+
+

How to compress a PDF online

+

Note that there is no JSONLD schema saved and the image (svg in this case) is part of the header

+

https://main--milo--adobecom.hlx.page/assets/img/compress-pdf-how-to-400x240.svg +

+
+
+
+
+
    +
  • Click the Select a file button above or drag and drop files into the drop zone. +
    • +
  • Select the PDF file you want to make smaller.
    • +
  • After uploading, Acrobat will automatically reduce the PDF size.
    • +
  • Download your compressed PDF file or sign in to share it.
    • +
+
+
+
+
+
+
+
+
+

“This was our opportunity to be one of the first teams to delve into Adobe Experience Platform, and we + wanted to show people just how powerful it can be.”

+

Ron Nagy

+

Sr. Evangelist, Adobe@Adobe

+
+
+
+
+
+
+

Text - This is graybox-changed!

+

Kick things off with hundreds of premium and free presets you can access with your Lightroom + subscription.

+

Learn more Explore the premium + collection

+
+
+
+
+
+
+ +