Merge branch 'main' of github.com:hlxsites/aldevron into feature/form…

…s-and-seperator

blocks/contactus/contactus.css

@@ -0,0 +1 @@
+/* Only comments */

blocks/contactus/contactus.js

@@ -0,0 +1,27 @@
+export default function decorate() {
+  const contactUsClass = document.getElementsByClassName('contactus block');
+  contactUsClass[0].setAttribute('id', 'section-support');
+  contactUsClass[0].children[0].setAttribute('class', 'outer');
+  contactUsClass[0].children[0].children[0].setAttribute('class', 'text');
+  const contactUsDiv = contactUsClass[0].children[0].children[0];
+  const pTags = contactUsDiv.getElementsByTagName('p');
+  let innerElements = '';
+  let phone = '';
+  for (let i = 0; i < pTags.length; i += 1) {
+    if (i === 0) {
+      const ContactUsTitle = pTags[i].outerHTML.replace(/<p>/g, '<h2>');
+      innerElements += ContactUsTitle.replace(/<\/p>/g, '</h2>');
+    } else if (i === 1) {
+      innerElements += pTags[i].outerHTML;
+    } else if (i === 3) {
+      phone = pTags[2].outerHTML.replace(/<p>/g, `<a class='phone' href="tel:' ${pTags[2].innerHTML.trim()} '">`);
+      phone.replace(/<\/p>/g, '</a>');
+      pTags[i].innerHTML = `<div class="buttons">' ${
+        phone + pTags[i].innerHTML
+      } '</div>`;
+      const button = pTags[i].outerHTML.replace(/<p>/g, '');
+      innerElements += button.replace(/<\/p>/g, '');
+    }
+  }
+  contactUsDiv.innerHTML = innerElements;
+}

blocks/imageshyperlink/imageshyperlink.css

@@ -0,0 +1 @@
+/* image hyderplink css */

blocks/imageshyperlink/imageshyperlink.js

@@ -0,0 +1,26 @@
+/**
+ * loads and decorates the footer
+ * @param {Element} block The footer block element
+ */
+export default async function decorate(block) {
+  const anchorEl = document.createElement('a');
+  const refAnchorEl = block.querySelector('a');
+  const pic = block.querySelector('picture');
+  if (refAnchorEl) {
+    if (refAnchorEl.hasAttribute('href')) {
+      anchorEl.setAttribute('href', refAnchorEl.getAttribute('href'));
+    }
+    if (refAnchorEl.hasAttribute('title')) {
+      anchorEl.setAttribute('title', refAnchorEl.getAttribute('title'));
+    }
+    if (refAnchorEl.hasAttribute('alt')) {
+      anchorEl.setAttribute('alt', refAnchorEl.getAttribute('alt'));
+    }
+    anchorEl.appendChild(pic);
+    block.textContent = '';
+    block.append(anchorEl);
+  } else {
+    block.textContent = '';
+    block.append(pic);
+  }
+}

blocks/table/table.css

@@ -0,0 +1,24 @@
+.bg-primary {
+    background-color: var(--primary-color);
+}
+
+.bg-transparent {
+    background-color: transparent!important;
+}
+
+table td {
+    text-align: center;
+}
+
+.heading-top tr:first-child td {
+    background-color: var(--primary-color); /* Specify your desired background color here */
+}
+
+.heading-left tr td:first-child {
+    background-color: var(--primary-color);
+    text-align: left;
+}
+
+.table-plain tr:nth-child(2n) {
+    background-color: #fff;
+}

blocks/table/table.js

@@ -0,0 +1,26 @@
+function removeClassesFromChildTables(table) {
+  table.classList.add('no-margin');
+  const tdElements = table.querySelectorAll('td');
+  tdElements.forEach((td) => {
+    td.classList.add('bg-transparent');
+  });
+}
+
+export default function decorate(block) {
+  const tableRows = block.querySelectorAll('.table[data-block-name="table"] tr');
+  tableRows.forEach((row) => {
+    const cells = row.querySelectorAll('td');
+    cells.forEach((cell) => {
+      if (cell.innerText.trim() === '') {
+        cell.classList.add('bg-transparent');
+      }
+    });
+  });
+  const parentTable = block.querySelector('.table[data-block-name="table"] table');
+  const childTable = parentTable.querySelector('table');
+  if (childTable) {
+    const { classList } = childTable.parentElement;
+    classList.add('no-padding', 'no-margin');
+    removeClassesFromChildTables(childTable);
+  }
+}

blocks/tabs/tabs.css

@@ -0,0 +1,8 @@
+.mmg-tabs {
+    padding: 20px 0;
+}
+
+.tabpanel table tr:first-child td {
+    background-color: var(--primary-color)!important; /* Specify your desired background color here */
+    color: var(--text-color);
+}

blocks/tabs/tabs.js

@@ -0,0 +1,51 @@
+function removeActiveClasses(content) {
+  const contentElements = content.querySelectorAll('.tabpanel');
+  [...contentElements].forEach((element) => {
+    element.classList.remove('active');
+  });
+  const listElements = content.querySelectorAll('button');
+  [...listElements].forEach((element) => {
+    element.classList.remove('active');
+  });
+}
+
+function activeFirstElements(content) {
+  const contentElement = content.querySelector('.tabpanel');
+  contentElement.classList.add('active');
+  const listElement = content.querySelector('button');
+  listElement.classList.add('active');
+}
+
+export default function decorate(block) {
+  const tabComponent = document.createElement('div');
+  tabComponent.className = 'mmg-tabs';
+  tabComponent.classList.add('outer');
+  const ul = document.createElement('div');
+  ul.className = 'tablist';
+  const tabContent = document.createElement('div');
+  tabContent.className = 'tabpanels';
+
+  // Iterate through block's children and create tabs
+  [...block.children].forEach((row) => {
+    const itemContent = row.children[1];
+    itemContent.className = 'tabpanel';
+    const li = document.createElement('button');
+    li.className = 'tab';
+    li.appendChild(row.children[0]);
+
+    li.addEventListener('click', () => {
+      removeActiveClasses(tabComponent);
+      li.classList.add('active');
+      itemContent.classList.add('active');
+    });
+    ul.appendChild(li);
+    tabContent.appendChild(itemContent);
+  });
+
+  // Set the first tab as active by default
+  block.textContent = '';
+  tabComponent.appendChild(ul);
+  tabComponent.appendChild(tabContent);
+  block.appendChild(tabComponent);
+  activeFirstElements(tabComponent);
+}

scripts/scripts.js

@@ -11,6 +11,8 @@ import {
   waitForLCP,
   loadBlocks,
   loadCSS,
+  toClassName,
+  getMetadata,
 } from './aem.js';
 
 const LCP_BLOCKS = ['forms']; // add your LCP blocks to the list
@@ -42,6 +44,34 @@ async function loadFonts() {
   }
 }
 
+const TEMPLATE_LIST = [
+  'Default',
+  'Plasmids',
+  'Proteins',
+  'mRNA',
+];
+
+/**
+ * Run template specific decoration code.
+ * @param {Element} main The container element
+ */
+async function decorateTemplates(main) {
+  try {
+    const template = toClassName(getMetadata('template'));
+    const templates = TEMPLATE_LIST;
+    if (templates.includes(template)) {
+      const mod = await import(`../templates/${template}/${template}.js`);
+      loadCSS(`${window.hlx.codeBasePath}/templates/${template}/${template}.css`);
+      if (mod.default) {
+        await mod.default(main);
+      }
+    }
+  } catch (error) {
+    // eslint-disable-next-line no-console
+    console.error('Auto Blocking failed', error);
+  }
+}
+
 /**
  * Builds all synthetic blocks in a container element.
  * @param {Element} main The container element
@@ -79,6 +109,7 @@ async function loadEager(doc) {
   const main = doc.querySelector('main');
   if (main) {
     decorateMain(main);
+    await decorateTemplates(main);
     document.body.classList.add('appear');
     await waitForLCP(LCP_BLOCKS);
   }

styles/Typo.css

@@ -1,4 +1,8 @@
-/* eslint-disable */
+:root {
+    --primary-color: #ec8f2d; /* Default primary color */
+    --text-color: #fff;
+}
+
 .img-colorbox-popup::after,
 [class*=" icon-"],
 [class^="icon-"] {

styles/template.css

@@ -2,6 +2,14 @@ body {
     padding-top: 100px
 }
 
+.no-padding {
+    padding: 0!important;
+}
+
+.no-margin {
+    margin: 0!important;
+}
+
 .outer {
     box-sizing: border-box;
     margin: 0 auto;

templates/Default/Default.css

@@ -0,0 +1 @@
+/* Default template css */

templates/Default/Default.js

@@ -0,0 +1 @@
+// Default template

templates/Plasmids/Plasmids.css

@@ -0,0 +1 @@
+/* Plasmids */

templates/Plasmids/Plasmids.js

@@ -0,0 +1 @@
+// Plasmids

templates/Proteins/Proteins.css

@@ -0,0 +1 @@
+/* Proteins */

templates/Proteins/Proteins.js

@@ -0,0 +1 @@
+// Proteins

templates/mRNA/mRNA.css

@@ -0,0 +1 @@
+/* mRNA */

templates/mRNA/mRNA.js

@@ -0,0 +1 @@
+// mRNA