Merge branch 'main' into sidebar-customerquote

blocks/accordion/accordion.css

@@ -101,6 +101,24 @@ main .accordion.faq-accordion .faq-answer.active {
     display: block;
 }
 
+main .expand_collapse {
+    text-align: right;
+    max-width: 980px;
+    margin: 10px auto 0;
+}
+
+main .expand_collapse .collapse-btn, .expand_collapse.expanded .expand-btn {
+    display: none;
+}
+
+main .expand-btn, .collapse-btn {
+    color: #fff;
+    background-color: #e46b29;
+    padding: 4px 10px;
+    display: inline-block;
+    text-decoration: none;
+}
+
 /* Tablet */
 @media only screen and (min-width: 768px) {
     main .accordion {

blocks/accordion/accordion.js

@@ -1,32 +1,66 @@
 export default function decorate(block) {
+  const divCta = document.querySelector('div .cta');
+  if (divCta) {
+    const expandCollapse = document.createElement('div');
+    expandCollapse.classList.add('expand_collapse');
+    const expandBtn = document.createElement('a');
+    expandBtn.classList.add('expand-btn');
+    expandBtn.setAttribute('href', '#');
+    expandBtn.textContent = 'Expand All';
+    const collapseBtn = document.createElement('a');
+    collapseBtn.classList.add('collapse-btn');
+    collapseBtn.setAttribute('href', '#');
+    collapseBtn.textContent = 'Collapse All';
+    expandCollapse.appendChild(expandBtn);
+    expandCollapse.appendChild(collapseBtn);
+    const parent = block.parentNode;
+    parent.prepend(expandCollapse);
+    // event listeners for expand, collapse buttons
+    expandCollapse.addEventListener('click', (event) => {
+      if (event.target.classList.contains('expand-btn')) {
+        document.querySelector('.expand_collapse').classList.add('expanded');
+        document.querySelector('.collapse-btn').style.display = 'inline-block';
+        const allQuestions = document.querySelectorAll('.faq-question');
+        allQuestions.forEach((ele) => {
+          ele.classList.add('active');
+          ele.nextElementSibling.classList.add('active');
+          ele.nextElementSibling.style.maxHeight = `${ele.nextElementSibling.scrollHeight}px`;
+        });
+      } else if (event.target.classList.contains('collapse-btn')) {
+        document.querySelector('.expand_collapse').classList.remove('expanded');
+        document.querySelector('.collapse-btn').style.display = 'none';
+        const allQuestions = document.querySelectorAll('.faq-question');
+        allQuestions.forEach((ele) => {
+          ele.classList.remove('active');
+          ele.nextElementSibling.classList.remove('active');
+          ele.nextElementSibling.style.removeProperty('max-height');
+        });
+      }
+    });
+  }
   const faqRows = [...block.children];
   block.classList.add('faq-accordion');
-
   faqRows.forEach((row) => {
     const faqQuestion = [...row.children][0];
-    const faqAnswer = [...row.children][1];
     faqQuestion.classList.add('faq-question');
-    faqAnswer.classList.add('faq-answer');
-
-    faqQuestion.addEventListener('click', () => {
-      const isActive = faqQuestion.classList.contains('active');
-
-      if (isActive) {
-        faqQuestion.classList.remove('active');
-        faqAnswer.classList.remove('active');
-        // Set max-height to 0 for smooth closing
-        faqAnswer.style.maxHeight = '0';
+    faqQuestion.addEventListener('click', (e) => {
+      const currentFaq = e.currentTarget.classList.contains('active');
+      const openfaq = block.querySelector('.faq-question.active');
+      if (openfaq && !currentFaq) {
+        openfaq.classList.toggle('active');
+        openfaq.nextElementSibling.classList.toggle('active');
+      }
+      faqQuestion.nextElementSibling.style.removeProperty('max-height');
+      e.currentTarget.classList.toggle('active');
+      e.currentTarget.nextElementSibling.classList.toggle('active');
+      const faqAnswer = e.currentTarget.nextElementSibling;
+      if (faqAnswer.style.maxHeight) {
+        faqAnswer.style.removeProperty('max-height');
       } else {
-        faqQuestion.classList.add('active');
-        faqAnswer.classList.add('active');
-        // Set max-height to scrollHeight for smooth opening
         faqAnswer.style.maxHeight = `${faqAnswer.scrollHeight}px`;
       }
     });
-
-    // Close all accordions initially
-    faqQuestion.classList.remove('active');
-    faqAnswer.classList.remove('active');
-    faqAnswer.style.maxHeight = '0';
+    const faqAnswer = [...row.children][1];
+    faqAnswer.classList.add('faq-answer');
   });
 }

blocks/author/author.css

@@ -0,0 +1,111 @@
+.author {
+    padding: 20px 0;
+    border: 1px solid #999;
+}
+
+.author .tablist {
+    background-color: #999;
+    display: block!important;
+}
+
+.author .mmg-tabs .tab {
+    border: none!important;
+    border-radius: 0!important;
+    font-size: 15px!important;
+    color: #fff!important;
+    background-color: #999!important;
+}
+
+.author .mmg-tabs .tab.active {
+    color: #1A1919!important;
+    background-color: #fff!important;
+}
+
+.author .mmg-tabs .tab.active:hover {
+    color: #1A1919!important;
+    background-color: #fff!important;
+}
+
+.author .mmg-tabs .tabpanel {
+    border: none;
+}
+
+.author .mmg-tabs .tabpanel img {
+    border-radius: 50%;
+    border: 1px solid #CCC;
+}
+
+.author p {
+    padding: 0;
+}
+
+.author .author-info h4 {
+    padding-top: 0
+}
+
+.author #author-profile {
+    display: flex;
+    gap: 20px;
+    flex-direction: row;
+    justify-content: space-between;
+}
+
+.author .author-recent-posts {
+    font-size: 14px;
+    line-height: normal
+}
+
+.author .author-recent-posts .post {
+    padding: .4em 0
+}
+
+.author .date {
+    padding-left: .5em;
+    color: #b8bec1;
+    font-size: 14px!important;
+}
+
+.author #latest-post-panel a {
+    font-size: 14px;
+}
+
+.author .tabpanel li {
+    padding: 0 16px;
+}
+
+.author .tabpanel li::before {
+    top: 0.2rem!important;
+}
+
+@media(max-width: 414px) {
+    .author .tablist {
+        display: flex!important;
+    }
+
+    .author #author-profile {
+        flex-direction: column;
+    }
+
+    .author .author-info h4 {
+        text-align: center
+    }
+
+    .author .author-avatar {
+        /* float: none; */
+        width: 100%;
+        display: block;
+        text-align: center;
+        padding-bottom: 1em
+    }
+
+    .author .author-avatar img {
+        width: 80%;
+        max-width: 300px;
+        margin: 0 auto
+    }
+
+    .author .author-info,.author-info.has-avatar {
+        display: block;
+        width: 100%
+    }
+}

blocks/author/author.js

@@ -0,0 +1,148 @@
+import {
+  div, button,
+} from '../../scripts/dom-builder.js';
+
+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');
+}
+
+function makeAuthorBlock(elements) {
+  const authorBlock = document.createElement('div');
+  authorBlock.className = 'author-block';
+
+  if (elements.querySelector('picture')) {
+    const imgDiv = document.createElement('div');
+    const AnchorTag = elements.querySelector('a');
+    const copyTag = AnchorTag.cloneNode(true);
+    imgDiv.appendChild(copyTag);
+    copyTag.innerText = '';
+    imgDiv.className = 'author-avatar';
+    const img = elements.querySelector('picture');
+    copyTag.appendChild(img.cloneNode(true));
+    authorBlock.appendChild(imgDiv);
+  }
+
+  const contentDiv = document.createElement('div');
+  contentDiv.className = 'author-info';
+  const remainingContent = elements.cloneNode(true);
+  if (remainingContent.querySelector('picture')) {
+    remainingContent.querySelector('picture').remove();
+    contentDiv.classList.add('has-avatar');
+  }
+  contentDiv.appendChild(remainingContent);
+  authorBlock.appendChild(contentDiv);
+
+  return authorBlock;
+}
+
+async function fetchBlogData() {
+  try {
+    const response = await fetch('/query-index.json');
+    const jsonData = await response.json();
+    return jsonData.data;
+  } catch (error) {
+    return [];
+  }
+}
+
+function createArticleList(articles) {
+  const ul = document.createElement('ul');
+
+  articles.forEach((article) => {
+    const li = document.createElement('li');
+    const link = document.createElement('a');
+    const date = new Date(Number(article.date) * 1000).toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' });
+    link.href = article.path;
+    link.textContent = article.title;
+    const span = document.createElement('span');
+    span.className = 'date';
+    span.innerText = ` - ${date}`;
+    li.appendChild(link);
+    li.appendChild(span);
+    ul.appendChild(li);
+  });
+
+  return ul;
+}
+
+async function getLatestPosts(authorUrl) {
+  const searchParams = new URLSearchParams(authorUrl.split('?')[1]);
+  let finalArticles = [];
+
+  try {
+    const data = await fetchBlogData();
+    const filteredResults = data.filter((item) => {
+      const path = item.path.toLowerCase();
+      const regex = /^\/blog\/.+/;
+      return regex.test(path);
+    });
+
+    if (searchParams.has('author')) {
+      const author = searchParams.get('author');
+      finalArticles = filteredResults.filter(
+        (art) => art.author.toLowerCase() === author.toLowerCase(),
+      );
+    }
+  } catch (error) {
+    return '';
+  }
+  return createArticleList(finalArticles);
+}
+
+export default async function decorate(block) {
+  const tabComponent = document.createElement('div');
+  tabComponent.className = 'mmg-tabs';
+  const ul = document.createElement('div');
+  ul.className = 'tablist';
+  const tabContent = document.createElement('div');
+  tabContent.className = 'tabpanels';
+  [...block.children].forEach((row) => {
+    const itemContent = makeAuthorBlock(row.children[1]);
+    itemContent.id = 'author-profile';
+    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);
+  });
+
+  const latestPostTab = button({ class: 'tab', id: 'latest-post' }, div('LATEST POSTS'));
+
+  ul.appendChild(latestPostTab);
+  const latestPostContent = div({ class: 'tabpanel', id: 'latest-post-panel' });
+  const authorUrl = block.querySelector('a').href;
+  const tabList = await getLatestPosts(authorUrl);
+  latestPostContent.appendChild(tabList);
+  tabContent.appendChild(latestPostContent);
+  latestPostTab.addEventListener('click', () => {
+    removeActiveClasses(tabComponent);
+    latestPostTab.classList.add('active');
+    latestPostContent.classList.add('active');
+  });
+  block.textContent = '';
+  tabComponent.appendChild(ul);
+  tabComponent.appendChild(tabContent);
+  block.appendChild(tabComponent);
+  activeFirstElements(tabComponent);
+}