MWPW-147351: Added styles for delayed modal and media block inside (#…

…2258)

* added styles for delayed modals

* removed the gap

* rewrote to grid

libs/blocks/media/media.css

@@ -439,3 +439,100 @@ div[class*="-up"] .media .foreground > .media-row {
     height: 120px;
   }
 }
+
+/* In the delayed modal used for promotions */
+.media.in-modal > .container.foreground {
+  width: 250px;
+}
+
+@media (min-width: 430px) and (orientation: portrait) {
+  .media.in-modal > .container.foreground {
+    width: 320px;
+  }
+}
+
+@media (min-width: 430px) and (orientation: landscape) {
+  .media.in-modal > .container.foreground {
+    width: 540px;
+  }
+}
+
+@media (min-width: 768px) {
+  .media.in-modal:not(.full-bleed-image) > .container.foreground {
+    width: 500px;
+  }
+}
+
+@media (min-width: 829px) {
+  .media.in-modal:not(.full-bleed-image) > .container.foreground {
+    width: 700px;
+  }
+}
+
+@media (min-width: 1366px) {
+  .media.in-modal > .container.foreground {
+    width: 800px;
+  }
+}
+
+.media.in-modal > .container.foreground > .media-row {
+  display: grid;
+  gap: 0;
+}
+
+.media.in-modal.full-bleed-image {
+  padding: 0;
+}
+
+.media.in-modal.full-bleed-image > .container.foreground {
+  width: 100%;
+}
+
+@media (orientation: portrait) {
+  .media.in-modal > .container.foreground > .media-row {
+    grid-template-rows: 1fr auto;
+  }
+
+  .media.in-modal.media-reverse-mobile > .container.foreground > .media-row div:first-child {
+    grid-area: 2 / 1 / 3 / 2;
+  }
+
+  .media.in-modal.media-reverse-mobile > .container.foreground > .media-row div:nth-child(2) {
+    grid-area: 1 / 1 / 2 / 2;
+  }
+}
+
+@media (orientation: landscape) {
+  .media.in-modal > .container.foreground > .media-row {
+    grid-template-columns: 1fr 1fr;
+  }
+
+  .media.in-modal > .container.foreground > .media-row div:first-child {
+    grid-area: 1 / 1 / 2 / 2;
+  }
+
+  .media.in-modal > .container.foreground > .media-row div:nth-child(2) {
+    grid-area: 1 / 2 / 2 / 3;
+  }
+}
+
+.media.in-modal > .container.foreground > .media-row > .text {
+  width: auto;
+  box-sizing: border-box;
+  -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
+  -moz-box-sizing: border-box;    /* Firefox, other Gecko */
+}
+
+.media.in-modal.full-bleed-image > .container.foreground > .media-row > .text {
+  padding: var(--spacing-s);
+}
+
+.media.in-modal.full-bleed-image > .container.foreground > .media-row > .image {
+  height: 100%;
+}
+
+.media.in-modal.full-bleed-image > .container.foreground > .media-row > .image img {
+  height: 100%;
+  width: 100%;
+  object-fit: cover;
+}

libs/blocks/modal/modal.css

@@ -25,6 +25,48 @@
   z-index: 103;
 }
 
+.dialog-modal.delayed-modal {
+  width: 300px;
+  max-width: none;
+  border-radius: var(--l-rounded-corners);
+}
+
+@media (min-width: 430px) and (orientation: portrait) {
+  .dialog-modal.delayed-modal {
+    width: 370px;
+  }
+}
+
+@media (min-width: 430px) and (orientation: landscape) {
+  .dialog-modal.delayed-modal {
+    width: 600px;
+  }
+}
+
+@media (min-width: 576px) and (orientation: portrait) {
+  .dialog-modal.delayed-modal {
+    width: 516px;
+  }
+}
+
+@media (min-width: 768px) {
+  .dialog-modal.delayed-modal {
+    width: 600px;
+  }
+}
+
+@media (min-width: 829px) {
+  .dialog-modal.delayed-modal {
+    width: 800px;
+  }
+}
+
+@media (min-width: 1366px) {
+  .dialog-modal.delayed-modal {
+    width: 900px;
+  }
+}
+
 .dialog-modal.upgrade-flow-modal {
   height: 100%;
   width: 100%;

libs/blocks/modal/modal.js

@@ -10,6 +10,8 @@ const CLOSE_ICON = `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="2
   </g>
 </svg>`;
 
+let isDelayedModal = false;
+
 export function findDetails(hash, el) {
   const id = hash.replace('#', '');
   const a = el || document.querySelector(`a[data-modal-hash="${hash}"]`);
@@ -53,6 +55,7 @@ export function closeModal(modal) {
 
   const hashId = window.location.hash.replace('#', '');
   if (hashId === modal.id) window.history.pushState('', document.title, `${window.location.pathname}${window.location.search}`);
+  isDelayedModal = false;
 }
 
 function isElementInView(element) {
@@ -96,6 +99,16 @@ export async function getModal(details, custom) {
 
   if (custom) getCustomModal(custom, dialog);
   if (details) await getPathModal(details.path, dialog);
+  if (isDelayedModal) {
+    dialog.classList.add('delayed-modal');
+    const mediaBlock = dialog.querySelector('div.media');
+    if (mediaBlock) {
+      mediaBlock.classList.add('in-modal');
+      const { miloLibs, codeRoot } = getConfig();
+      const base = miloLibs || codeRoot;
+      loadStyle(`${base}/styles/rounded-corners.css`);
+    }
+  }
 
   const localeModal = id?.includes('locale-modal') ? 'localeModal' : 'milo';
   const analyticsEventName = window.location.hash ? window.location.hash.replace('#', '') : localeModal;
@@ -195,6 +208,7 @@ export function getHashParams(hashStr) {
 export function delayedModal(el) {
   const { hash, delay } = getHashParams(el?.dataset.modalHash);
   if (!delay || !hash) return false;
+  isDelayedModal = true;
   el.classList.add('hide-block');
   const modalOpenEvent = new Event(`${hash}:modalOpen`);
   const pagesModalWasShownOn = window.sessionStorage.getItem(`shown:${hash}`);

test/blocks/modals/modals.test.js

@@ -197,18 +197,22 @@ describe('Modals', () => {
 
   it('shows the modal with a delay, and remembers it was shown on this page', async () => {
     window.sessionStorage.removeItem('shown:#delayed-modal');
-    const el = document.createElement('a');
-    el.setAttribute('data-modal-hash', '#delayed-modal:delay=1');
-    expect(delayedModal(el)).to.be.true;
+    const anchor = document.createElement('a');
+    anchor.setAttribute('data-modal-path', '/fragments/promos/fragments/cc-all-apps-promo-full-bleed-image');
+    anchor.setAttribute('data-modal-hash', '#delayed-modal:delay=1');
+    document.body.appendChild(anchor);
+    expect(delayedModal(anchor)).to.be.true;
     await delay(1000);
-    expect(el.classList.contains('hide-block')).to.be.true;
-    const modal = waitForElement('#delayed-modal');
+    expect(anchor.classList.contains('hide-block')).to.be.true;
+    const modal = await waitForElement('#delayed-modal');
     expect(modal).to.be.not.null;
+    expect(document.querySelector('#delayed-modal').classList.contains('delayed-modal'));
     expect(window.sessionStorage.getItem('shown:#delayed-modal').includes(window.location.pathname)).to.be.true;
     // eslint-disable-next-line no-underscore-dangle
     expect(window._satellite.track.called).to.be.true;
     window.sessionStorage.removeItem('shown:#delayed-modal');
-    el.remove();
+    modal.remove();
+    anchor.remove();
   });
 
   it('does not show the modal if it was shown on this page', async () => {