Merge branch 'main' into 23-card-block

blocks/accordion/accordion.js

@@ -1,4 +1,4 @@
-import { createElement } from '../../scripts/scripts.js';
+import { createElement } from '../../scripts/common.js';
 import fragmentBlock from '../fragment/fragment.js';
 
 /* Function checks if the content of the provied element is just a link to other doc */
@@ -19,13 +19,13 @@ export default async function decorate(block) {
       ':scope > div:nth-child(2)',
     );
 
-    const headerButton = createElement('button', 'accordion-header-button');
-    const headerEl = createElement('h2', 'accordion-header');
-    const plusEl = createElement('div', 'accordion-close');
+    const headerButton = createElement('button', { classes: 'accordion-header-button' });
+    const headerEl = createElement('h2', { classes: 'accordion-header' });
+    const plusEl = createElement('div', { classes: 'accordion-close' });
     headerEl.innerHTML = accordionHeader?.innerHTML;
     headerButton.append(headerEl, plusEl);
 
-    const contentEl = createElement('div', ['accordion-content', 'accordion-content-close']);
+    const contentEl = createElement('div', { classes: ['accordion-content', 'accordion-content-close'] });
 
     if (isContentLink(accordionContent)) {
       await fragmentBlock(accordionContent);
@@ -51,7 +51,7 @@ export default async function decorate(block) {
 
     contentEl.innerHTML = accordionContent.innerHTML;
 
-    const accordionEl = createElement('div', ['accordion-item', 'accordion-item-close']);
+    const accordionEl = createElement('div', { classes: ['accordion-item', 'accordion-item-close'] });
     accordionEl.append(headerButton);
     accordionEl.append(contentEl);
 

blocks/breadcrumb/breadcrumb.js

@@ -1,7 +1,7 @@
-import { createElement } from '../../scripts/scripts.js';
+import { createElement } from '../../scripts/common.js';
 
 export default function decorate(block) {
-  const breadcrumbItems = createElement('ul', 'breadcrumb-list');
+  const breadcrumbItems = createElement('ul', { classes: 'breadcrumb-list' });
 
   const articleUrl = (window.location.href).split('/').pop();
   const articleName = articleUrl.replaceAll('-', ' ').toLowerCase();

blocks/cards/cards.js

@@ -1,5 +1,5 @@
 import { createOptimizedPicture } from '../../scripts/lib-franklin.js';
-import { createElement } from '../../scripts/scripts.js';
+import { createElement } from '../../scripts/common.js';
 
 const updateListElements = (ul, isDarkVar = false, isCTABlock = false) => {
   const lis = [...ul.children];
@@ -17,7 +17,9 @@ const updateListElements = (ul, isDarkVar = false, isCTABlock = false) => {
       const { length } = buttons;
       if (length === 0) return;
       const tempLink = [...buttons].at(-1).firstChild;
-      const newLink = createElement('a', '', { href: tempLink.href, title: tempLink.title });
+      const newLink = createElement('a', '', {
+        props: { href: tempLink.href, title: tempLink.title },
+      });
 
       buttons[length - 1].remove();
       newLink.innerHTML = li.innerHTML;

blocks/carousel/carousel.js

@@ -1,6 +1,7 @@
 import {
-  createElement, isVideoLink, selectVideoLink, wrapImageWithVideoLink, addVideoShowHandler,
-} from '../../scripts/scripts.js';
+  isVideoLink, selectVideoLink, wrapImageWithVideoLink, addVideoShowHandler,
+} from '../../scripts/video-helper.js';
+import { createElement } from '../../scripts/common.js';
 
 const debounceDelay = 30;
 
@@ -86,12 +87,12 @@ function createDesktopControls(ul) {
     ul.scrollBy({ top: 0, left, behavior: 'smooth' });
   }
 
-  const desktopControls = createElement('ul', 'desktop-controls');
+  const desktopControls = createElement('ul', { classes: 'desktop-controls' });
   const leftButtonContainer = createElement('li');
-  const leftButton = createElement('button', [], { type: 'button' });
+  const leftButton = createElement('button', { props: { type: 'button' } });
   leftButton.textContent = 'Left';
   const rightButtonContainer = createElement('li');
-  const rightButton = createElement('button', [], { type: 'button' });
+  const rightButton = createElement('button', { props: { type: 'button' } });
   rightButton.textContent = 'Right';
   leftButtonContainer.append(leftButton);
   rightButtonContainer.append(rightButton);
@@ -110,11 +111,11 @@ function createDesktopControls(ul) {
 
 function createDotControls(ul) {
   // create carousel controls for mobile
-  const dotControls = createElement('ul', ['mobile-controls']);
+  const dotControls = createElement('ul', { classes: 'mobile-controls' });
   [...ul.children].forEach((item, j) => {
     const control = createElement('li');
     if (!j) control.className = 'active';
-    const button = createElement('button', '', { type: 'button' });
+    const button = createElement('button', { props: { type: 'button' } });
     button.textContent = j + 1;
     control.append(button);
     control.firstElementChild.addEventListener('click', () => {
@@ -156,7 +157,7 @@ function replaceBlockClasses(block) {
 
 export default function decorate(block) {
   replaceBlockClasses(block);
-  const ul = createElement('ul', ['items']);
+  const ul = createElement('ul', { classes: ['items'] });
 
   // We support two formats:
   // 1. Each slide in a row (can be splitted into columns)
@@ -170,14 +171,14 @@ export default function decorate(block) {
       column.classList.add('carousel-item-column');
     });
 
-    const listItem = createElement('li', ['carousel-item']);
+    const listItem = createElement('li', { classes: ['carousel-item'] });
     listItem.append(...row.children);
     ul.append(listItem);
   });
 
   [...ul.children].forEach((li) => {
     // Add wrapper around the content
-    const container = createElement('div', ['carousel-content-wrapper']);
+    const container = createElement('div', { classes: ['carousel-content-wrapper'] });
 
     container.innerHTML = li.innerHTML;
     li.innerHTML = '';
@@ -215,12 +216,12 @@ export default function decorate(block) {
       const [header, subheader] = [...column.querySelectorAll('h1, h2, h3, h4, h5, h6')].sort((h1, h2) => h1.tagName[1] - h2.tagName[1]);
 
       if (header) {
-        const newHeader = createElement('h2', 'carousel-item-header');
+        const newHeader = createElement('h2', { classes: 'carousel-item-header' });
         newHeader.innerHTML = header.innerHTML;
         header.replaceWith(newHeader);
       }
       if (subheader) {
-        const newSubheader = createElement('h3', 'carousel-item-subheader');
+        const newSubheader = createElement('h3', { classes: 'carousel-item-subheader' });
         newSubheader.innerHTML = subheader.innerHTML;
         subheader.replaceWith(newSubheader);
       }
@@ -240,7 +241,7 @@ export default function decorate(block) {
       // warpping all paragraphs and headers
       const textElements = column.querySelectorAll('p, h2, h3');
       if (textElements.length) {
-        const textWrapper = createElement('div', 'carousel-item-text');
+        const textWrapper = createElement('div', { classes: 'carousel-item-text' });
         textWrapper.append(...textElements);
         column.append(textWrapper);
       }

blocks/columns/columns.js

@@ -1,14 +1,14 @@
 import {
   addVideoShowHandler,
-  createElement,
-  getAllElWithChildren,
   isVideoLink,
   selectVideoLink,
   wrapImageWithVideoLink,
-} from '../../scripts/scripts.js';
+} from '../../scripts/video-helper.js';
+import { createElement } from '../../scripts/common.js';
+import { getAllElWithChildren } from '../../scripts/scripts.js';
 
 const decorateUnderline = (col) => {
-  const hr = createElement('hr', 'column-underline');
+  const hr = createElement('hr', { classes: 'column-underline' });
   const u = col.querySelector('u');
   if (!u) {
     const strong = col.firstElementChild.querySelector('strong');

blocks/cookie-preference-center/cookie-preference-center.js

@@ -1,7 +1,7 @@
-import { createElement } from '../../scripts/scripts.js';
+import { createElement } from '../../scripts/common.js';
 
 export default function decorate(block) {
-  const button = createElement('button', 'cta', { onclick: 'OneTrust.ToggleInfoDisplay();' });
+  const button = createElement('button', { classes: 'cta', props: { onclick: 'OneTrust.ToggleInfoDisplay();' } });
   button.textContent = block.textContent;
 
   block.textContent = '';

blocks/download-specs/download-specs.js

@@ -1,24 +1,24 @@
-import { createElement } from '../../scripts/scripts.js';
+import { createElement } from '../../scripts/common.js';
 
 export default function decorate(block) {
   const children = [...block.children];
 
-  const downloadSpecsSection = createElement('div', 'download-specs-section');
+  const downloadSpecsSection = createElement('div', { classes: 'download-specs-section' });
   const specsTitle = children.shift().querySelector('h3');
-  const downloadSpecsList = createElement('ul', 'download-specs-list');
+  const downloadSpecsList = createElement('ul', { classes: 'download-specs-list' });
 
   children.forEach((e, idx) => {
-    const downloadItem = createElement('li', ['download-specs-item', `download-specs-item-${idx + 1}`]);
+    const downloadItem = createElement('li', { classes: ['download-specs-item', `download-specs-item-${idx + 1}`] });
 
-    const anchorElement = createElement('a', 'anchor-element');
+    const anchorElement = createElement('a', { classes: 'anchor-element' });
     const linkUrl = e.querySelector('a').getAttribute('href');
     anchorElement.setAttribute('href', linkUrl);
     anchorElement.setAttribute('target', '_blank');
 
-    const img = createElement('img', 'download-specs-icon');
+    const img = createElement('img', { classes: 'download-specs-icon' });
     img.src = '/icons/pdficon.png';
 
-    const pElement = createElement('p', 'p-element');
+    const pElement = createElement('p', { classes: 'p-element' });
     const text = e.querySelector('div').innerText;
     pElement.textContent = text;
 

blocks/download/download.js

@@ -1,12 +1,12 @@
-import { createElement } from '../../scripts/scripts.js';
+import { createElement } from '../../scripts/common.js';
 
 const buildRegularDownloadBlock = (block) => {
   const children = [...block.children];
 
-  const downloadList = createElement('ul', 'download-list');
+  const downloadList = createElement('ul', { classes: 'download-list' });
 
   children.forEach((e, idx) => {
-    const downloadItem = createElement('li', ['download-item', `download-item-${idx + 1}`]);
+    const downloadItem = createElement('li', { classes: ['download-item', `download-item-${idx + 1}`] });
 
     const image = e.querySelector('picture').innerHTML;
 
@@ -52,10 +52,10 @@ const buildRegularDownloadBlock = (block) => {
 
 const buildNewDownloadBlock = (block) => {
   const children = [...block.children];
-  const downloadNewList = createElement('ul', 'download-new-list');
+  const downloadNewList = createElement('ul', { classes: 'download-new-list' });
 
   children.forEach((e, idx) => {
-    const downloadItem = createElement('li', ['download-new-item', `download-new-item-${idx + 1}`]);
+    const downloadItem = createElement('li', { classes: ['download-new-item', `download-new-item-${idx + 1}`] });
     const allTexts = e.querySelectorAll('li');
     const linkUrl = e.querySelector('a').getAttribute('href');
 

blocks/eloqua-form/eloqua-form.js

@@ -1,4 +1,5 @@
-import { createElement, loadScriptIfNotLoadedYet } from '../../scripts/scripts.js';
+import { loadScriptIfNotLoadedYet } from '../../scripts/scripts.js';
+import { createElement } from '../../scripts/common.js';
 
 // Every eloqua form has it's own JS, CSS and HTML.
 // Once the form is loaded all the JS and CSS are added to the body.
@@ -40,7 +41,7 @@ const loadFormScripts = async (elqForm) => {
 
       // the script element added by innerHTML is NOT executed
       // the workaround is to create the new script tag, copy attibutes and content
-      const newScript = createElement('script', '', { type: 'text/javascript' });
+      const newScript = createElement('script', { props: { type: 'text/javascript' } });
 
       newScript.innerHTML = script.innerHTML;
       document.body.append(newScript);
@@ -131,7 +132,7 @@ const addForm = async (block) => {
   }
 
   const text = await data.text();
-  const formWrapper = createElement('div', 'eloqua-form-container');
+  const formWrapper = createElement('div', { classes: 'eloqua-form-container' });
   formWrapper.innerHTML = text;
   block.innerHTML = '';
   block.append(formWrapper);

blocks/embed/embed.js

@@ -1,7 +1,7 @@
 import {
   selectVideoLink, addPlayIcon, showVideoModal, isLowResolutionVideoUrl, createIframe,
   createLowResolutionBanner,
-} from '../../scripts/scripts.js';
+} from '../../scripts/video-helper.js';
 
 export default function decorate(block) {
   const isAutoplay = block.classList.contains('autoplay');