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

…s-and-seperator
hlxsites · Oct 27, 2023 · aa969e6 · aa969e6
2 parents 2730603 + c446dc3
commit aa969e6
Show file tree

Hide file tree

Showing 17 changed files with 191 additions and 33 deletions.
diff --git a/blocks/accordion/accordion.css b/blocks/accordion/accordion.css
@@ -25,11 +25,11 @@ main .accordion.faq-accordion .faq-question {
 }
 
 main .accordion.faq-accordion .faq-question:hover {
-    color: #ec8f2d;
+    color: var(--primary-color);
 }
 
 main .accordion.faq-accordion .faq-question.active {
-    color: #ec8f2d;
+    color: var(--primary-color);
 }
 
 main .accordion.faq-accordion .faq-question::before {
@@ -87,7 +87,7 @@ main .accordion.faq-accordion .faq-answer ul {
 }
 
 main .accordion.faq-accordion .faq-answer ul li::before {
-    color: #ec8f2d;
+    color: var(--primary-color);
     content: "\25A0";
     font-family: Arial;
     font-size: 1em;

diff --git a/blocks/footer/footer.css b/blocks/footer/footer.css
@@ -27,7 +27,10 @@
 
 @media (max-width: 767px){
   .footer-wrapper div#footer-black div {
-    display: block;
+    display: flex;
+    flex-direction: column;
+    text-align: left;
+    align-items: flex-start;
   }
 }
 
@@ -39,7 +42,7 @@
   .footer-wrapper div#footer-orange .outer{
     grid-template-columns: 1fr;
   }
-  
+
   .footer-wrapper div#footer-orange .outer .social-icons{
     display: flex;
     justify-content: flex-end;

diff --git a/blocks/header/header.js b/blocks/header/header.js
@@ -116,14 +116,19 @@ function addClassesToMenuItems(element, depth) {
     const item = childItems[i];
     // Add class to the immediate child element
     item.classList.add('hs-menu-item', `hs-menu-depth-${depth}`);
+    const strong = item.querySelector('strong');
+    const link = item.querySelector('a');
+    if (strong) {
+      link.setAttribute('href', '#');
+      link.addEventListener('click', (event) => {
+        event.preventDefault();
+      });
+    }
 
     const em = item.querySelector('em');
-
     // Check if the href matches the current domain
-    const link = item.querySelector('a');
     if (em) {
       link.setAttribute('target', '_blank');
-      item.appendChild(link);
     }
     if (link && link.href === window.location.href) {
       item.classList.add('active');
@@ -146,6 +151,8 @@ function addClassesToMenuItems(element, depth) {
         });
       }
       item.prepend(spanElement);
+      item.appendChild(link);
+      item.appendChild(childElement);
       const nextDepth = depth + 1;
       addClassesToMenuItems(childElement, nextDepth);
     }

diff --git a/blocks/sidebar-button-image/sidebar-button-image.css b/blocks/sidebar-button-image/sidebar-button-image.css
@@ -0,0 +1,9 @@
+.sidebar-button-image {
+  padding: 7%;
+  margin-top: 25px;
+  background-color: transparent;
+  border: none;
+  box-shadow: 0 2px 15px rgba(0 0 0 / 10%);
+  border-radius: 4px;
+  display: block;
+}
diff --git a/blocks/sidebar-button-image/sidebar-button-image.js b/blocks/sidebar-button-image/sidebar-button-image.js
@@ -0,0 +1,11 @@
+export default function decorate(block) {
+  const link = block.querySelector('a');
+  const image = block.querySelector('picture');
+  if (link && image) { // Corrected the logical operator from '&' to '&&'
+    link.innerText = '';
+    link.className = 'cta_button cta_button_img';
+    link.appendChild(image.cloneNode(true)); // Use cloneNode to append a copy of the image
+  }
+  block.innerText = '';
+  block.appendChild(link);
+}
diff --git a/blocks/sidebar-form/sidebar-form.css b/blocks/sidebar-form/sidebar-form.css
@@ -0,0 +1,9 @@
+.sidebar-form {
+  padding: 7%;
+  margin-top: 25px;
+  background-color: transparent;
+  border: none;
+  box-shadow: 0 2px 15px rgba(0 0 0 / 10%);
+  border-radius: 4px;
+  display: block;
+}
diff --git a/blocks/sidebar-form/sidebar-form.js b/blocks/sidebar-form/sidebar-form.js
@@ -0,0 +1,33 @@
+function embedHubSpotForm(formFields) {
+  const script = document.createElement('script');
+  script.type = 'text/javascript';
+  script.src = '/scripts/v2.js';
+  script.charset = 'utf-8';
+  script.setAttribute('async', '');
+  script.onload = () => {
+    window.hbspt.forms.create(formFields);
+  };
+  document.head.appendChild(script);
+}
+
+export default function decorate(block) {
+  const formDetails = {};
+  const tableRows = block.querySelectorAll('tr');
+  tableRows.forEach((row) => {
+    const cells = row.children;
+    if (cells.length >= 2) {
+      const key = cells[0].innerText.trim();
+      const value = cells[1].innerText.trim();
+      formDetails[key] = key === 'target' ? `#${value}` : value;
+    }
+  });
+  // Add a delay of 4 seconds (4000 milliseconds) before loading the form
+  setTimeout(() => {
+    embedHubSpotForm(formDetails);
+  }, 3000);
+
+  const form = document.createElement('div');
+  form.id = formDetails.target.replace('#', '');
+  block.textContent = '';
+  block.appendChild(form);
+}
diff --git a/blocks/table/table.css b/blocks/table/table.css
@@ -11,10 +11,10 @@ table td {
 }
 
 .heading-top tr:first-child td {
-    background-color: var(--primary-color); /* Specify your desired background color here */
+    background-color: var(--primary-color);
 }
 
-.heading-left tr td:first-child {
+.left-heading {
     background-color: var(--primary-color);
     text-align: left;
 }

diff --git a/blocks/table/table.js b/blocks/table/table.js
@@ -7,6 +7,23 @@ function removeClassesFromChildTables(table) {
 }
 
 export default function decorate(block) {
+  const getHeadingLeftClass = block.classList.contains('heading-left');
+  if (getHeadingLeftClass !== null && getHeadingLeftClass !== undefined) {
+    const tds = block.querySelectorAll('tr td:first-child');
+    let index = 0;
+    while (index < tds.length) {
+      const td = tds[index];
+      td.classList.add('left-heading');
+      const rowspan = td.getAttribute('rowspan');
+      if (rowspan !== null && rowspan > 1) {
+        const rowspanCount = parseInt(rowspan, 10);
+        index += rowspanCount;
+      } else {
+        index += 1;
+      }
+    }
+  }
+
   const tableRows = block.querySelectorAll('.table[data-block-name="table"] tr');
   tableRows.forEach((row) => {
     const cells = row.querySelectorAll('td');

diff --git a/scripts/scripts.js b/scripts/scripts.js
@@ -45,10 +45,10 @@ async function loadFonts() {
 }
 
 const TEMPLATE_LIST = [
-  'Default',
-  'Plasmids',
-  'Proteins',
-  'mRNA',
+  'default',
+  'plasmids',
+  'proteins',
+  'mrna',
 ];
 
 /**

diff --git a/scripts/v2.js b/scripts/v2.js
diff --git a/styles/Typo.css b/styles/Typo.css
@@ -142,7 +142,7 @@ th {
 }
 
 th {
-    background-color: #ec8f2d;
+    background-color: var(--primary-color);
     color: #fff;
 }
 
@@ -247,7 +247,7 @@ body {
 
 a {
     background: transparent;
-    color: #ec8f2d;
+    color: var(--primary-color);
     text-decoration: none;
 }
 
@@ -318,7 +318,7 @@ h2+h4 {
 #main h1,
 #main h2,
 #main h3 {
-    border-left: 3px solid #ec8f2d;
+    border-left: 3px solid var(--primary-color);
     line-height: 1.1;
     margin: 1em 0 0.5em;
     padding: 0 0 0 10px;
@@ -443,7 +443,7 @@ ol li {
 }
 
 #content ul li::before {
-    color: #ec8f2d;
+    color: var(--primary-color);
     content: "\25A0";
     font-size: 1em;
     left: 0;
@@ -584,14 +584,14 @@ input[type="search"]:focus,
 input[type="tel"]:focus,
 input[type="text"]:focus
 {
-    border-color: #ec8f2d;
+    border-color: var(--primary-color);
     outline: none
 }
 
 select,select:focus,
 textarea:focus  {
     padding: .4em .6em;
-    border-color: #ec8f2d;
+    border-color: var(--primary-color);
     outline: none
 }
 
@@ -604,7 +604,7 @@ button,
 input[type="button"],
 input[type="reset"],
 input[type="submit"] {
-    background-color: #ec8f2d;
+    background-color: var(--primary-color);
     border-radius: 5px;
     box-sizing: border-box;
     color: #fff;
@@ -634,7 +634,7 @@ input[type="button"]:hover,
 input[type="reset"]:hover,
 input[type="submit"]:hover {
     background-color: #fff;
-    color: #ec8f2d;
+    color: var(--primary-color);
     text-decoration: none
 }
 
@@ -1074,4 +1074,10 @@ form.hs-form .hs-input[type="checkbox"] {
     color: red;
     font-size: .9em;
     line-height: normal
-}
+}
+
+.clearfix::after {
+    content: "";
+    display: table;
+    clear: both;
+}
diff --git a/styles/lazy-styles.css b/styles/lazy-styles.css
@@ -3,6 +3,7 @@
     font-family: Helvetica;
     font-style: normal;
     font-weight: 400;
+    font-display: swap;
     src: url("//1769030.fs1.hubspotusercontent-na1.net/hubfs/1769030/aldevron_template/fonts/helvetica/1459830/b109e194-c563-4a1e-aa7b-0ab12434b83e.eot#iefix");
     src: local("Helvetica Regular"), url("//1769030.fs1.hubspotusercontent-na1.net/hubfs/1769030/aldevron_template/fonts/helvetica/1459830/b109e194-c563-4a1e-aa7b-0ab12434b83e.eot#iefix") format("eot"),
         url("../fonts/helvetica/3515325d-15bc-419d-968e-43418f451aaa.woff2") format("woff2"),
@@ -14,6 +15,7 @@
     font-family: Helvetica;
     font-style: italic;
     font-weight: 400;
+    font-display: swap;
     src: url("//1769030.fs1.hubspotusercontent-na1.net/hubfs/1769030/aldevron_template/fonts/helvetica/1459832/2f5c8674-96c6-4e6f-af67-8154b447387b.eot#iefix");
     src: local("Helvetica Oblique"),
         url("//1769030.fs1.hubspotusercontent-na1.net/hubfs/1769030/aldevron_template/fonts/helvetica/1459832/2f5c8674-96c6-4e6f-af67-8154b447387b.eot#iefix") format("eot"),
@@ -26,6 +28,7 @@
     font-family: Helvetica;
     font-style: normal;
     font-weight: 700;
+    font-display: swap;
     src: url("//1769030.fs1.hubspotusercontent-na1.net/hubfs/1769030/aldevron_template/fonts/helvetica/1459834/0d0cf487-b97e-4a3b-811b-a5ff4d2f3a8f.eot#iefix");
     src: local("Helvetica Bold"), url("//1769030.fs1.hubspotusercontent-na1.net/hubfs/1769030/aldevron_template/fonts/helvetica/1459834/0d0cf487-b97e-4a3b-811b-a5ff4d2f3a8f.eot#iefix") format("eot"),
         url("//1769030.fs1.hubspotusercontent-na1.net/hubfs/1769030/aldevron_template/fonts/helvetica/1459834/2044ee80-fba8-4c91-87df-4995217f48fa.woff2") format("woff2"),
@@ -37,6 +40,7 @@
     font-family: "Proxima Nova A";
     font-style: normal;
     font-weight: 400;
+    font-display: swap;
     src: url("//1769030.fs1.hubspotusercontent-na1.net/hubfs/1769030/aldevron_template/fonts/proxima/reg/96676c88-bae1-468a-acf5-fa74fdb2b736.eot#iefix");
     src: url("//1769030.fs1.hubspotusercontent-na1.net/hubfs/1769030/aldevron_template/fonts/proxima/reg/96676c88-bae1-468a-acf5-fa74fdb2b736.eot#iefix") format("eot"),
         url("../fonts/proxima/reg/a7333c48-140e-4bcb-a574-a2dcfcd4a621.woff2") format("woff2"),
@@ -48,6 +52,7 @@
     font-family: "Proxima Nova A";
     font-style: italic;
     font-weight: 400;
+    font-display: swap;
     src: url("//1769030.fs1.hubspotusercontent-na1.net/hubfs/1769030/aldevron_template/fonts/proxima/italic/926e8ba2-1161-42b7-a850-c56765e872fd.eot#iefix");
     src: url("//1769030.fs1.hubspotusercontent-na1.net/hubfs/1769030/aldevron_template/fonts/proxima/italic/926e8ba2-1161-42b7-a850-c56765e872fd.eot#iefix") format("eot"),
         url("../fonts/proxima/italic/09a1d106-4ddc-4781-bbaa-ca99d410f96c.woff2") format("woff2"),
@@ -59,6 +64,7 @@
     font-family: "Proxima Nova A";
     font-style: normal;
     font-weight: 700;
+    font-display: swap;
     src: url("//1769030.fs1.hubspotusercontent-na1.net/hubfs/1769030/aldevron_template/fonts/proxima/bold/cb0a2948-31e1-4f3e-8df8-f8fed5125537.eot#iefix");
     src: url("//1769030.fs1.hubspotusercontent-na1.net/hubfs/1769030/aldevron_template/fonts/proxima/bold/cb0a2948-31e1-4f3e-8df8-f8fed5125537.eot#iefix") format("eot"),
         url("../fonts/proxima/bold/8666e3e0-713e-463a-8bb9-2d3c6b8050b1.woff2") format("woff2"),
@@ -70,6 +76,7 @@
     font-family: Brown-Ald;
     font-style: normal;
     font-weight: 300;
+    font-display: swap;
     src: url("../fonts/brown/lineto-brown-light.eot");
     src: url("../fonts/brown/lineto-brown-light.eot#iefix") format("embedded-opentype"),
         url("../fonts/brown/lineto-brown-light.woff") format("woff"),
@@ -80,6 +87,7 @@
     font-family: Brown-Ald;
     font-style: normal;
     font-weight: 400;
+    font-display: swap;
     src: url("../fonts/brown/lineto-brown-regular.eot");
     src: url("../fonts/brown/lineto-brown-regular.eot#iefix") format("embedded-opentype"),
         url("../fonts/brown/lineto-brown-regular.woff") format("woff"),
@@ -90,6 +98,7 @@
     font-family: Brown-Ald;
     font-style: normal;
     font-weight: 700;
+    font-display: swap;
     src: url("../fonts/brown/lineto-brown-bold.eot");
     src: url("../fonts/brown/lineto-brown-bold.eot#iefix") format("embedded-opentype"),
         url("../fonts/brown/lineto-brown-bold.woff") format("woff"),
@@ -100,6 +109,7 @@
     font-family: ald-icons;
     font-style: normal;
     font-weight: 400;
+    font-display: swap;
     src: url("../fonts/ald-icons.eot?dgljk");
     src: url("../fonts/ald-icons.eot?dgljk#iefix") format("embedded-opentype"),
         url("../fonts/ald-icons.ttf?dgljk") format("truetype"),

diff --git a/styles/responsive.css b/styles/responsive.css
@@ -134,7 +134,7 @@
     }
 
     #cart .cart-num {
-        background: #ec8f2d;
+        background: var(--primary-color);
         border-radius: 50%;
         color: #fff;
         font-size: 10px;