resolving conflicts

.eslintrc.js → .eslintrc.cjs

@@ -17,5 +17,7 @@ module.exports = {
     'import/extensions': ['error', {
       js: 'always',
     }],
+    'max-len': ['error', { "code": 200 }],
+    'function-paren-newline': 'off',
   },
 };

.github/workflows/run-tests.yaml

@@ -13,5 +13,6 @@ jobs:
         node-version: '16' #required for npm 8 or later.
     - run: npm install
     - run: npm run lint
+    - run: npm test
       env:
         CI: true

.mocharc.json

@@ -0,0 +1,3 @@
+{
+  "recursive": true
+}

blocks/agent-search/builders/tags.js

@@ -28,6 +28,7 @@ export const addSelectionTag = (wrapper, filter, value) => {
   `;
   wrapper.querySelector('.selection-tags-list').append(li);
 };
+
 /**
  * Builds the Container for the search bar selections.
  *

blocks/header/header.css

@@ -23,7 +23,7 @@ body.light-nav {
       / 1fr min-content;
   align-items: start;
   overflow-y: scroll;
-  z-index: 50;
+  z-index: 1000;
 }
 
 .header.block nav[aria-expanded="true"] {
@@ -259,6 +259,7 @@ body.light-nav {
 }
 
 .header.block nav .nav-hamburger .open {
+  display: block;
   position: absolute;
   top: 0;
   left: 0;
@@ -444,7 +445,7 @@ body.light-nav {
     right: 0;
     height: 5px;
     background-color: var(--white);
-    z-index: 10;
+    z-index: 1010;
   }
 
   .header.block nav[aria-expanded="true"] .nav-sections > ul > li > ul {

blocks/hero/hero.css

@@ -59,6 +59,21 @@ main .section.full-width > .hero-wrapper {
   height: 100%;
 }
 
+/* video included */
+.hero .hero-video {
+  position: absolute;
+  inset: 0;
+  margin: auto;
+  height: 100%;
+  width: 100%;
+  object-fit: cover;
+  object-position: center;
+}
+
+.hero .hero-video.hide {
+  display: none;
+}
+
 .hero.block > div {
   padding: 0 16px;
   width: 100%;
@@ -101,6 +116,7 @@ main .section.full-width > .hero-wrapper {
 .hero.block > div .content h2,
 .hero.block > div .content p {
   color: var(--white);
+  z-index: 1;
 }
 
 .hero.block > .row > .headline {

blocks/hero/hero.js

@@ -1,9 +1,21 @@
 import {
   preloadHeroImage,
 } from '../../scripts/scripts.js';
-
 import buildSearch from './search/search.js';
 
+const decorateVideo = (parent, src) => {
+  const video = document.createElement('video');
+  video.classList.add('hero-video');
+  video.loop = true;
+  const source = document.createElement('source');
+  source.src = src;
+  source.type = 'video/mp4';
+  video.appendChild(source);
+  parent.appendChild(video);
+  video.muted = true;
+  video.play();
+};
+
 async function getPictures(block) {
   let pictures = block.querySelectorAll('picture');
   if (!pictures.length) {
@@ -32,6 +44,21 @@ function rotateImage(images) {
 }
 
 export default async function decorate(block) {
+  // check if it has a video
+  const video = block.querySelector('a[href*=".mp4"]');
+  const videoWrapper = video && video.closest('div');
+  videoWrapper.classList.add('video-wrapper');
+  const videoLink = videoWrapper?.firstElementChild;
+  // transform link into a video tag
+  if (videoLink) {
+    const parent = videoLink.parentElement;
+    const videoHref = videoLink.href;
+    videoLink.remove();
+    setTimeout(() => {
+      decorateVideo(parent, videoHref);
+    }, 3000);
+  }
+
   const pictures = await getPictures(block);
   preloadHeroImage(pictures[0]);
   pictures[0].classList.add('active');
@@ -80,6 +107,7 @@ export default async function decorate(block) {
 
   const wrapper = document.createElement('div');
   wrapper.append(images);
+  if (videoWrapper) wrapper.append(videoWrapper);
   // don't add contentWrapper if it's empty
   if (contentWrapper.innerHTML !== '') wrapper.append(contentWrapper);
   if (headlineWrapper.hasChildNodes()) {

blocks/hero/search/agent.css

@@ -13,9 +13,6 @@
 
 .hero.block .agent-search .selection-tags {
   position: absolute;
-}
-
-.hero.block .agent-search .selection-tags {
   padding: 0;
 }