Modal functionality #76

common/modal/modal.css

@@ -4,10 +4,32 @@
   left: 0;
   width: 100vw;
   height: 100vh;
-  background: white;
+  background: var(--background-color);
+  color: var(--text-color);
   z-index: 1051;
-  transition: opacity 0.15s linear, visibility 0.15s linear;
+  transition: opacity var(--duration-small) var(--easing-entrance),
+    visibility var(--duration-small) var(--easing-entrance);
   opacity: 1;
+
+  --background-color: var(--c-white);
+  --top-bar-height: 64px;
+  --text-color: var(--c-black);
+}
+
+@supports (height: 1svh) {
+  .modal-background {
+    height: 100svh;
+  }
+}
+
+.modal-black {
+  --background-color: var(--c-black);
+  --text-color: var(--c-white);
+  --color-icon: var(--c-white);
+}
+
+.modal-grey {
+  --background-color: var(--c-grey-50);
 }
 
 .modal-hidden {
@@ -29,6 +51,63 @@
   background-color: var(--c-grey-1);
 }
 
+.modal-content--wide {
+  margin: 0;
+  overflow: auto;
+  height: calc(100% - var(--top-bar-height));
+  padding: 16px;
+  background-color: var(--background-color);
+}
+
+.modal-top-bar {
+  display: flex;
+  justify-content: center;
+}
+
+.modal-top-bar-content {
+  display: flex;
+  justify-content: space-between;
+  margin: 0 16px;
+  gap: 10px;
+  height: var(--top-bar-height);
+  align-items: center;
+  width: 100%;
+}
+
+.modal-top-bar-heading {
+  font-family: var(--ff-volvo-novum);
+  font-size: var(--f-heading-5-font-size);
+  line-height: var(--f-heading-5-line-height);
+  margin: 0;
+}
+
+.modal-top-bar .modal-close-button {
+  padding: 0;
+  margin: 0;
+  border: 0;
+  background: inherit;
+  display: flex;
+  border-radius: 1px;
+  min-height: 44px;
+  min-width: 44px;
+  justify-content: center;
+  align-items: center;
+}
+
+.modal-top-bar .modal-close-button:focus {
+  outline: 0;
+}
+
+.modal-top-bar .modal-close-button:focus-visible {
+  outline: 2px solid var(--light-border-focus);
+  outline-offset: 5px;
+}
+
+.modal-top-bar svg {
+  height: 24px;
+  width: 24px;
+}
+
 .modal-content .modal-video {
   width: 100%;
   height: 100%;
@@ -38,7 +117,7 @@
 .modal-before-banner {
   display: flex;
   justify-content: center;
-  background: white;
+  background: var(--background-color);
 }
 
 .modal-before-banner button.modal-close-button {
@@ -52,24 +131,35 @@
 }
 
 @media (min-width: 768px) {
-  .modal-content {
+  :root:not(.redesign-v2) .modal-content {
     margin: 100px auto;
     width: 726px;
   }
 }
 
 @media (min-width: 992px) {
-  .modal-content {
+  :root:not(.redesign-v2) .modal-content {
     width: 930px;
   }
 }
 
 @media (min-width: 1300px) {
-  .modal-content {
+  :root:not(.redesign-v2) .modal-content {
     width: 1170px;
   }
 }
 
+@media (min-width: 744px) {
+  .modal-top-bar-content {
+    margin: 0 32px;
+  }
+}
+
+@media (min-width: 1200px) {
+  .modal-top-bar-content {
+    max-width: 1170px;
+  }
+}
 
 /* adjustments for soundcloud variant of modal, e.g. https://www.volvotrucks.us/trucks/powertrain/i-torque/ */
 .modal-content .modal-soundcloud {
@@ -81,7 +171,7 @@
   gap: 2%;
 }
 
-.modal-content:has(.modal-soundcloud)  {
+.modal-content:has(.modal-soundcloud) {
   aspect-ratio: unset;
 }
 

common/modal/modal.js

@@ -1,3 +1,4 @@
+import { createElement, getTextLabel } from '../../scripts/common.js';
 import { loadCSS } from '../../scripts/lib-franklin.js';
 // eslint-disable-next-line import/no-cycle
 import { createIframe, isLowResolutionVideoUrl } from '../../scripts/video-helper.js';
@@ -7,11 +8,31 @@ const styles$ = new Promise((r) => {
 });
 
 const HIDE_MODAL_CLASS = 'modal-hidden';
+let currentModalClasses = null;
+
+const createModalTopBar = (parentEl) => {
+  const topBar = document.createRange().createContextualFragment(`
+    <div class="modal-top-bar">
+      <div class="modal-top-bar-content">
+        <h2 class="modal-top-bar-heading"></h2>
+        <button class="modal-close-button" aria-label=${getTextLabel('close')}>
+          <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path fill-rule="evenodd" clip-rule="evenodd" d="M4.97979 4.97979C5.17505 4.78453 5.49163 4.78453 5.6869 4.97979L16 15.2929L26.3131 4.97979C26.5084 4.78453 26.825 4.78453 27.0202 4.97979C27.2155 5.17505 27.2155 5.49163 27.0202 5.6869L16.7071 16L27.0202 26.3131C27.2155 26.5084 27.2155 26.825 27.0202 27.0202C26.825 27.2155 26.5084 27.2155 26.3131 27.0202L16 16.7071L5.6869 27.0202C5.49163 27.2155 5.17505 27.2155 4.97979 27.0202C4.78453 26.825 4.78453 26.5084 4.97979 26.3131L15.2929 16L4.97979 5.6869C4.78453 5.49163 4.78453 5.17505 4.97979 4.97979Z" fill="var(--color-icon, #000)"/>
+          </svg>
+        </button>
+      </div>
+    </div>
+  `);
+
+  parentEl.prepend(...topBar.children);
+  // eslint-disable-next-line no-use-before-define
+  parentEl.querySelector('.modal-close-button').addEventListener('click', () => hideModal());
+  parentEl.querySelector('.modal-top-bar').addEventListener('click', (event) => event.stopPropagation());
+};
 
 const createModal = () => {
-  const modalBackground = document.createElement('div');
+  const modalBackground = createElement('div', { classes: ['modal-background', HIDE_MODAL_CLASS] });
 
-  modalBackground.classList.add('modal-background', HIDE_MODAL_CLASS);
   modalBackground.addEventListener('click', () => {
     // eslint-disable-next-line no-use-before-define
     hideModal();
@@ -24,8 +45,8 @@ const createModal = () => {
     }
   };
 
-  const modalContent = document.createElement('div');
-  modalContent.classList.add('modal-content');
+  const modalContent = createElement('div', { classes: ['modal-content'] });
+  createModalTopBar(modalBackground);
   modalBackground.appendChild(modalContent);
   // preventing initial animation when added to DOM
   modalBackground.style = 'display: none';
@@ -36,25 +57,56 @@ const createModal = () => {
     event.stopPropagation();
   });
 
-  async function showModal(newUrl, beforeBanner, beforeIframe) {
+  const clearModalContent = () => {
+    modalContent.innerHTML = '';
+    modalContent.className = 'modal-content';
+    modalBackground.querySelector('.modal-top-bar-heading').textContent = '';
+  };
+
+  const handleNewContent = (newContent) => {
+    clearModalContent();
+
+    const firstSection = newContent[0];
+
+    // checking if the first section contains one heading only
+    if (
+      firstSection.children.length === 1
+      && firstSection.children[0].children.length === 1
+      && /^H[1-6]$/.test(newContent[0].children[0].children[0].tagName)
+    ) {
+      const headingContent = firstSection.children[0].children[0].textContent;
+
+      modalBackground.querySelector('.modal-top-bar-heading').textContent = headingContent;
+      firstSection.style.display = 'none';
+    }
+
+    modalContent.classList.add('modal-content--wide');
+    modalContent.append(...newContent);
+  };
+
+  async function showModal(newContent, { beforeBanner, beforeIframe, modalClasses = [] }) {
     await styles$;
     modalBackground.style = '';
+    modalBackground.classList.add(...modalClasses);
+    currentModalClasses = modalClasses;
     window.addEventListener('keydown', keyDownAction);
 
-    if (newUrl) {
+    if (newContent && (typeof newContent !== 'string')) {
+      handleNewContent(newContent);
+    } else if (newContent) {
       let videoOrIframe = null;
-      if (isLowResolutionVideoUrl(newUrl)) {
+      if (isLowResolutionVideoUrl(newContent)) {
         // We can't use the iframe for videos, because if the Content-Type
         // `application/octet-stream` is returned instead of `video/mp4`, the
         // file is downloaded instead of displayed. So we use the video element instead.
         videoOrIframe = document.createElement('video');
-        videoOrIframe.setAttribute('src', newUrl);
+        videoOrIframe.setAttribute('src', newContent);
         videoOrIframe.setAttribute('controls', '');
         videoOrIframe.setAttribute('autoplay', '');
         videoOrIframe.classList.add('modal-video');
         modalContent.append(videoOrIframe);
       } else {
-        videoOrIframe = createIframe(newUrl, { parentEl: modalContent, classes: 'modal-video' });
+        videoOrIframe = createIframe(newContent, { parentEl: modalContent, classes: 'modal-video' });
       }
 
       if (beforeBanner) {
@@ -82,6 +134,7 @@ const createModal = () => {
 
     modalContent.classList.add('modal-content-fade-in');
     modalBackground.classList.remove(HIDE_MODAL_CLASS);
+    modalBackground.querySelector('.modal-top-bar .modal-close-button').focus();
 
     // disable page scrolling
     document.body.classList.add('disable-scroll');
@@ -92,9 +145,14 @@ const createModal = () => {
     modalContent.classList.remove('modal-content-fade-in');
     window.removeEventListener('keydown', keyDownAction);
     document.body.classList.remove('disable-scroll');
-    modalContent.querySelector('iframe, video').remove();
+    modalContent.querySelector('iframe, video')?.remove();
     modalContent.querySelector('.modal-before-banner')?.remove();
     modalContent.querySelector('.modal-before-iframe')?.remove();
+
+    if (currentModalClasses) {
+      modalBackground.classList.remove(currentModalClasses);
+      currentModalClasses = null;
+    }
   }
 
   return {

placeholder.json

@@ -1,7 +1,7 @@
 {
-  "total": 30,
+  "total": 36,
   "offset": 0,
-  "limit": 30,
+  "limit": 36,
   "data": [
     {
       "Key": "Low resolution video message",
@@ -54,19 +54,19 @@
     {
       "Key": "vinlabel",
       "Text": "Enter your 17-digit VIN (Vehicle Identification Number)"
-    }, 
+    },
     {
       "Key": "submit",
       "Text": "Submit"
-    }, 
+    },
     {
       "Key": "vinformat",
       "Text": "The VIN entered is not valid for Volvo Trucks, Nova Bus, or Prevost vehicles"
-    }, 
+    },
     {
       "Key": "result text",
       "Text": "${count} recalls available for \"${vin}\" VIN"
-    }, 
+    },
     {
       "Key": "recalls",
       "Text": "Recalls"
@@ -86,7 +86,7 @@
     {
       "Key": "remedy_description",
       "Text": "Remedy"
-    }, 
+    },
     {
       "Key": "published_info",
       "Text": "Information last updated"
@@ -102,11 +102,11 @@
     {
       "Key": "recall-incomplete",
       "Text": "Recall Incomplete"
-    }, 
+    },
     {
       "Key": "recall-incomplete-no-remedy",
       "Text": "Recall In Complete, remedy not available"
-    }, 
+    },
     {
       "Key": "loading recalls",
       "Text": " Loading Recalls ....."
@@ -118,7 +118,7 @@
     {
       "Key": "mfr_notes",
       "Text": "Next Steps"
-    }, 
+    },
     {
       "Key": "mfr_recall_number",
       "Text": "Brand Recall Number"
@@ -142,6 +142,10 @@
     {
       "Key": "vinformat-length",
       "Text": "Please fill out this field"
+    },
+    {
+      "Key": "Close",
+      "Text": "Close"
     }
   ],
   ":type": "sheet"