Merge branch 'main' into bug/timeline-issues

blocks/embed/embed.css

@@ -26,7 +26,6 @@
 
 .embed iframe {
   border: 1px solid var(--text-color);
-  border-radius: .5rem;
 }
 
 .embed img {

blocks/herobanner/herobanner.css

@@ -2,7 +2,7 @@
     background-image: url('../../icons/about-pattern.png');
 }
 
-.herobanner .content .title, .hero-banner .content .description, p {
+.herobanner .content .title, .hero-banner .content .description, .hero-banner p {
     color: #fff;
     font: normal 16px/1.45 'Proxima Nova A',Helvetica,sans-serif;
     padding: 15px 0;

blocks/hubspotmeetings/hubspotmeetings.css

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

blocks/hubspotmeetings/hubspotmeetings.js

@@ -0,0 +1,18 @@
+import { passFormMeetingConfig } from '../../scripts/aem.js';
+
+function generateRandomId() {
+  return `id-${Math.random().toString(36).substr(2, 9)}-${Date.now().toString(36)}`;
+}
+
+export default function decorate(block) {
+  const anchor = block.querySelector('a');
+  const link = anchor.href || anchor.innerTet.trim();
+  const blockId = generateRandomId();
+  const hsCalendarBlock = document.createElement('div');
+  hsCalendarBlock.id = blockId;
+  hsCalendarBlock.style.width = '100%';
+  hsCalendarBlock.style.minHeight = '400px';
+  block.innerHTML = '';
+  block.appendChild(hsCalendarBlock);
+  passFormMeetingConfig({ blockId, link });
+}

blocks/recent-posts/recent-posts.css

@@ -0,0 +1,28 @@
+.grey-article-outer {
+    background-color: #ededed;
+    padding: 80px 0;
+}
+
+.grey-article-outer > div {
+    max-width: 980px;
+    margin: 0 auto;
+}
+
+.recent-posts  {
+    text-align: left;
+}
+
+.recent-posts .post .image img {
+    width: 100%;
+    height: auto;
+}
+
+@media (max-width: 767px) {
+    .grey-article-outer {
+        padding: 60px 0;
+    }
+
+    .recent-posts .content .col {
+        width: 100%;
+    }
+}

blocks/recent-posts/recent-posts.js

@@ -0,0 +1,84 @@
+import {
+  div, a, img, p, h3,
+} from '../../scripts/dom-builder.js';
+
+import { readBlockConfig } from '../../scripts/aem.js';
+
+async function fetchPostData() {
+  try {
+    const response = await fetch('/query-index.json');
+    const jsonData = await response.json();
+    return jsonData.data;
+  } catch (error) {
+    return [];
+  }
+}
+
+function truncateText(text, maxLength) {
+  if (text.length <= maxLength) {
+    return text;
+  }
+  return `${text.slice(0, maxLength)}...`;
+}
+
+function createRecentPosts(results) {
+  const lists = div({ class: 'posts' });
+  results.forEach((post) => {
+    const showcaseBanner = div({ class: 'post' });
+    const articleCardImage = a({ class: 'image', href: post.path }, img({
+      src: post.image, alt: post.title, width: '100%', height: 'auto',
+    }));
+    const articleCardBody = div({ class: 'text' });
+    const articleHeading = h3({ class: 'entry-title' }, a({ href: post.path }, post.title));
+    const articleDescription = p({ class: 'intro' }, truncateText(post.description, 180));
+    articleCardBody.appendChild(articleHeading);
+    articleCardBody.appendChild(articleDescription);
+    showcaseBanner.appendChild(articleCardImage);
+    showcaseBanner.appendChild(articleCardBody);
+    lists.append(showcaseBanner);
+  });
+  return lists;
+}
+
+export default async function decorate(block) {
+  const blockData = readBlockConfig(block);
+  const postData = await fetchPostData();
+  let topic = '';
+  if (blockData.topic) {
+    topic = blockData.topic;
+  }
+  const wrapper = div({ class: 'content flex cols2' });
+  const blogTitles = block.children[0].cloneNode(true);
+  if (block.children[1]) {
+    topic = block.children[1].children[1].innerText.trim();
+  }
+  if (blogTitles.children[0]) {
+    const title = blogTitles.children[0];
+    const blogsContainer = div({ class: 'col recent-posts' });
+    let sortedResults = [];
+    const filteredResults = postData.filter((item) => item.path.includes('/news/') && (topic ? JSON.parse(item.tags).filter((tag) => tag.toLowerCase() === topic.toLowerCase()).length > 0 : true));
+    if (filteredResults.length) {
+      sortedResults = filteredResults.sort((ar1, ar2) => ar2.date - ar1.date);
+    }
+    const postElement = createRecentPosts(sortedResults.slice(0, 3));
+    blogsContainer.appendChild(title);
+    blogsContainer.appendChild(postElement);
+    wrapper.appendChild(blogsContainer);
+  }
+  const newsTitles = block.children[0].cloneNode(true);
+  if (newsTitles.children[1]) {
+    const title = newsTitles.children[1];
+    const blogsContainer = div({ class: 'col recent-posts' });
+    let sortedResults = [];
+    const filteredResults = postData.filter((item) => item.path.includes('/blog/') && (topic ? JSON.parse(item.tags).filter((tag) => tag.toLowerCase() === topic.toLowerCase()).length > 0 : true));
+    if (filteredResults.length) {
+      sortedResults = filteredResults.sort((ar1, ar2) => ar2.date - ar1.date);
+    }
+    const postElement = createRecentPosts(sortedResults.slice(0, 3));
+    blogsContainer.appendChild(title);
+    blogsContainer.appendChild(postElement);
+    wrapper.appendChild(blogsContainer);
+  }
+  block.innerText = '';
+  block.appendChild(wrapper);
+}

blocks/sidebar-customerquote/sidebar-customerquote.css

@@ -1,16 +1,27 @@
 /* customer quotes css */
+.sidebar-customerquote {
+  background-color: #fff;
+  border-radius: 4px;
+  box-shadow: 0 2px 11px rgba(0,0,0,10%);
+  display: block;
+  padding: 7%;
+}
 
-.quote-box {
+.quote-wrapper{
   background: #f5f5f5;
   padding: 30px;
   padding-bottom: 15px;
   border-radius: 4px;
   background-clip: padding-box;
   position: relative;
-  margin-bottom: 30px;
+  color: #666;
 }
 
-.quote-box::after {
+.sidebar-customerquote:not(:first-child) {
+  margin-top: 25px;
+}
+
+.quote-wrapper.bottom-icon::after {
   content: "";
   display: block;
   width: 0;
@@ -24,45 +35,26 @@
   left: 50%;
 }
 
-.quote {
-  border: 0;
-  padding: 0;
-  font-size: 16px;
-  color: #666;
-  margin: 0;
-}
-
-.details {
+.quote-wrapper .details {
   font-size: 13px;
-}
-
-.name {
   display: block;
   font-weight: normal;
   font-family: Montserrat, sans-serif;
+  padding-top: 8px;
+  color: rgba(26, 25, 25);
 }
 
-.quote-box .title {
+.quote-wrapper .title {
   display: block;
   color: #b3b3b3;
   margin-bottom: 0;
   font-weight: normal;
   font-size: 13px;
 }
 
-.quote-box .fa {
-  font-size: 18px;
-  position: absolute;
-  right: 30px;
-  bottom: 30px;
-}
-
-.img-rounded {
-  border-radius: 6px;
-}
-
 .testimonial-headshot {
   text-align: center;
+  margin-top: 30px;
 }
 
 .testimonial-headshot img {

blocks/sidebar-customerquote/sidebar-customerquote.js

@@ -1,43 +1,14 @@
 export default function decorate(block) {
-  const clonedBlock = block.cloneNode(true);
-  const pictureElement = clonedBlock.querySelector('picture');
-  const moduleDiv = document.createElement('div');
-  moduleDiv.classList.add('hs_cos_wrapper', 'hs_cos_wrapper_widget', 'hs_cos_wrapper_type_module', 'module-1');
-  moduleDiv.setAttribute('data-hs-cos-type', 'module');
-  moduleDiv.setAttribute('data-hs-cos-general-type', 'widget');
-  const quoteboxDiv = document.createElement('div');
-  quoteboxDiv.classList.add('quote-box');
-  const blockquoteDiv = document.createElement('blockquote');
-  blockquoteDiv.classList.add('quote');
-  blockquoteDiv.textContent = clonedBlock.querySelector('blockquote > p').textContent;
-  quoteboxDiv.append(blockquoteDiv);
-  const para = document.createElement('p');
-  para.classList.add('details');
-  const spanInside = document.createElement('span');
-  spanInside.classList.add('name');
-  spanInside.textContent = clonedBlock.querySelector('blockquote + p').textContent;
-  para.append(spanInside);
-  const spanTitle = document.createElement('span');
-  spanTitle.classList.add('title');
-  spanTitle.textContent = clonedBlock.querySelector('blockquote + p + p').textContent;
-  para.append(spanTitle);
-  quoteboxDiv.append(para);
-  const spanIconWrapper = document.createElement('span');
-  spanIconWrapper.classList.add('accentColor1', 'fa');
-  const spanIcon = document.createElement('i');
-  spanIcon.classList.add('fa', 'fa-quote-right');
-  spanIconWrapper.append(spanIcon);
-  quoteboxDiv.append(spanIconWrapper);
-  const imageWrapper = document.createElement('div');
-  imageWrapper.classList.add('testimonial-headshot', 'text-center');
-  const image = document.createElement('img');
-  image.setAttribute('width', `${pictureElement.querySelector('img').width}`);
-  image.setAttribute('height', `${pictureElement.querySelector('img').height}`);
-  image.setAttribute('alt', `${pictureElement.querySelector('img').alt}`);
-  image.setAttribute('src', `${pictureElement.querySelector('img').src}`);
-  imageWrapper.append(image);
-  moduleDiv.append(quoteboxDiv);
-  moduleDiv.append(imageWrapper);
+  const quoteWrapper = document.createElement('div');
+  quoteWrapper.classList.add('quote-wrapper');
+  [...block.children].forEach((element) => { quoteWrapper.append(element); });
+  quoteWrapper.children[1].classList.add('details');
+  quoteWrapper.children[2].classList.add('title');
   block.textContent = '';
-  block.append(moduleDiv);
+  block.append(quoteWrapper);
+  if (quoteWrapper.children[3] && quoteWrapper.children[3].querySelector('picture')) {
+    quoteWrapper.children[3].classList.add('testimonial-headshot');
+    quoteWrapper.classList.add('bottom-icon');
+    block.appendChild(quoteWrapper.children[3]);
+  }
 }

scripts/aem.js

@@ -22,6 +22,7 @@
  * for instance the href of a link, or a search term
  */
 const formConfigData = [];
+const formMeetingConfig = [];
 function sampleRUM(checkpoint, data = {}) {
   sampleRUM.defer = sampleRUM.defer || [];
   const defer = (fnname) => {
@@ -269,6 +270,33 @@ function passFormConfig(config) {
   formConfigData.push(config);
 }
 
+function passFormMeetingConfig(config) {
+  formMeetingConfig.push(config);
+}
+
+function loadHSScript() {
+  if (!document.querySelector('script[src="https://static.hsappstatic.net/MeetingsEmbed/ex/MeetingsEmbedCode.js"]')) {
+    const scriptTag = document.createElement('script');
+    scriptTag.src = 'https://static.hsappstatic.net/MeetingsEmbed/ex/MeetingsEmbedCode.js';
+    scriptTag.async = true;
+    document.head.appendChild(scriptTag);
+  }
+}
+
+function getFormMeetingConfig() {
+  return formMeetingConfig.length;
+}
+
+function loadFormDelayed() {
+  loadHSScript();
+  formMeetingConfig.forEach((block) => {
+    const hsCalendarBlock = document.getElementById(block.blockId);
+    if (hsCalendarBlock) {
+      hsCalendarBlock.innerHTML = `<div class="meetings-iframe-container" data-src="${block.link}">&nbsp;</div>`;
+    }
+  });
+}
+
 function isForm() {
   return formConfigData.length;
 }
@@ -426,6 +454,7 @@ function decorateButtons(element) {
           && twoup.tagName === 'P'
         ) {
           a.className = 'button primary';
+          a.setAttribute('target', '_blank');
           twoup.classList.add('button-container');
         }
         if (
@@ -755,4 +784,7 @@ export {
   isForm,
   buildForm,
   extractTableData,
+  passFormMeetingConfig,
+  loadFormDelayed,
+  getFormMeetingConfig,
 };

scripts/delayed.js

@@ -1,5 +1,7 @@
 // eslint-disable-next-line import/no-cycle
-import { sampleRUM, buildForm, isForm } from './aem.js';
+import {
+  sampleRUM, buildForm, isForm, loadFormDelayed, getFormMeetingConfig,
+} from './aem.js';
 
 // Core Web Vitals RUM collection
 sampleRUM('cwv');
@@ -57,3 +59,7 @@ function loadHubSpot() {
 if (isForm()) {
   loadHubSpot();
 }
+
+if (getFormMeetingConfig()) {
+  loadFormDelayed();
+}