Merge branch 'feature/ac-sideline-variation' of https://github.com/hl…

…xsites/aldevron into feature/ac-sideline-variation

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/articlecards/articlecards.css

@@ -9,7 +9,7 @@
 .wrapper{
     display: grid;
     grid-template-columns: 1fr 1fr;
-    grid-gap: 2.25rem;
+    grid-gap: 2.50rem;
 }
 
 @media only screen and (max-width: 768px) {
@@ -22,16 +22,17 @@ ul.posts li.post:not(:first-child){
     display: flex;
     flex-direction: row;
     align-items: flex-start;
-    gap: 0.75rem;
+    gap: 1rem;
+    margin-bottom: 20px;
 }
 
 ul.posts li.post:before {
     display: none;
 }
 
 ul.posts li.post:not(:first-child) a.article-card-img{
-    flex-shrink: 0.9;
     padding: 20px 0 0;
+    min-width: 188px;
 }
 
 .article-card-body a{
@@ -170,6 +171,10 @@ ul.posts li.post:not(:first-child) .description {
     font-size: 14px;
 }
 
+ul.posts li.post:not(:first-child) .description {
+    letter-spacing: 0.005em;
+}
+
 ul.posts li.post:first-child .entry-title {
     font-size: 18px;
 }
@@ -182,6 +187,10 @@ ul.posts li.post:first-child .article-card-img img {
     height: 264px;
 }
 
+ul.posts li.post{
+    padding: 0;
+}
+
 @media only screen and (max-width: 479px) {
     .horizontal .article-card  {
         flex-direction: column!important;
@@ -190,6 +199,22 @@ ul.posts li.post:first-child .article-card-img img {
     .horizontal .article-card .article-card-img img {
         max-width: 100%!important;
     }
+
+    .wrapper{
+        grid-gap: 0;
+    }
+
+    ul.posts li.post:not(:first-child){
+        display: block;
+    }
+
+    ul.posts li.post:first-child .article-card-img img {
+        height: auto;
+    }
+
+    ul.posts li.post:not(:first-child) a.article-card-img{
+        min-width: 100%;
+    }
 }
 
 @media (min-width: 479px) and (max-width: 767px) {