From 9e6044fad0a7b90ce31299b665abb50083603d3e Mon Sep 17 00:00:00 2001
From: Pardeep Gera <pardeep.gera@gspann.com>
Date: Mon, 16 Oct 2023 11:32:35 +0530
Subject: [PATCH] Added Accordion block

---
 blocks/accordion/accordion.css | 109 +++++++++++++++++++++++++++++++++
 blocks/accordion/accordion.js  |  29 +++++++++
 2 files changed, 138 insertions(+)
 create mode 100644 blocks/accordion/accordion.css
 create mode 100644 blocks/accordion/accordion.js

diff --git a/blocks/accordion/accordion.css b/blocks/accordion/accordion.css
new file mode 100644
index 00000000..3553b75c
--- /dev/null
+++ b/blocks/accordion/accordion.css
@@ -0,0 +1,109 @@
+main .accordion.faq-accordion {
+    padding: 10px 20px 46px;
+}
+
+main .accordion.faq-accordion>div {
+    font-family: var(--ff-myradpro-regular);
+    border: 1px solid #dbdbdb;
+    border-radius: 5px;
+}
+
+main .accordion.spacer.faq-accordion>div {
+    margin-top: 7px;
+}
+
+
+main .accordion.faq-accordion .faq-question {
+    cursor: pointer;
+    padding: 20px 0 11px 6px;
+    font-size: var(--body-font-size-l);
+    text-align: left;
+}
+
+main .accordion.faq-accordion .faq-question.active {
+    color: #ec8f2d;
+}
+
+main .accordion.faq-accordion .faq-question::before {
+    content: "\e905";
+    float: right;
+    font-family: ald-icons !important;
+    font-style: normal;
+    font-variant: normal;
+    font-weight: 400;
+    line-height: 1;
+    padding-left: 0.5em;
+    text-transform: none;
+    margin-right: 10px;
+}
+
+main .accordion.faq-accordion .faq-question.active::before {
+    content: "\e904";
+    float: right;
+    font-family: ald-icons !important;
+    font-style: normal;
+    font-variant: normal;
+    font-weight: 400;
+    line-height: 1;
+    padding-left: 0.5em;
+    text-transform: none;
+    margin-right: 10px;
+}
+
+
+main .section.orange .accordion.faq-accordion .faq-question::before,
+main .section.orange .accordion.faq-accordion .faq-question.active::before,
+main .section.orange .accordion.faq-accordion a {
+    color: #f77f00;
+}
+
+
+main .section.green .accordion.faq-accordion .faq-question::before,
+main .section.green .accordion.faq-accordion .faq-question.active::before,
+main .section.green .accordion.faq-accordion a {
+    color: #78be20;
+}
+
+main .accordion.faq-accordion .faq-answer {
+    padding: 0 18px;
+    margin: 8px 20px;
+    display: none;
+    overflow: hidden;
+    font-size: var(--body-font-size-s);
+    max-height: 0;
+    transition: max-height 0.2s ease-out;
+    text-align: left;
+
+}
+
+main .accordion.faq-accordion .faq-answer p {
+    font-size: var(--body-font-size-s);
+}
+
+main .accordion.faq-accordion .faq-answer ul {
+    list-style-type: square;
+}
+
+main .accordion.faq-accordion .faq-answer.active {
+    display: block;
+}
+
+
+
+
+/* Tablet */
+@media only screen and (min-width: 768px) {
+    main .accordion.faq-accordion .faq-question {
+        cursor: pointer;
+        padding: 20px 0 11px 6px;
+        font-size: var(--body-font-size-xxl);
+    }
+
+}
+
+/* Desktop */
+@media only screen and (min-width: 1030) {
+    main .accordion.faq-accordion .faq-question {
+        font-size: var(--body-font-size-xl);
+    }
+}
\ No newline at end of file
diff --git a/blocks/accordion/accordion.js b/blocks/accordion/accordion.js
new file mode 100644
index 00000000..03ac859a
--- /dev/null
+++ b/blocks/accordion/accordion.js
@@ -0,0 +1,29 @@
+export default function decorate(block) {
+  const faqRows = [...block.children];
+  block.classList.add('faq-accordion');
+  faqRows.forEach((row) => {
+    const faqQuestion = [...row.children][0];
+    faqQuestion.classList.add('faq-question');
+    faqQuestion.addEventListener('click', (e) => {
+      const openfaq = block.querySelector('.faq-question.active');
+      openfaq.classList.remove('active');
+      openfaq.nextElementSibling.classList.remove('active');
+      openfaq.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 {
+        faqAnswer.style.maxHeight = `${faqAnswer.scrollHeight}px`;
+      }
+    });
+    const faqAnswer = [...row.children][1];
+    faqAnswer.classList.add('faq-answer');
+  });
+  const fq = block.querySelector('.faq-question');
+  const fa = block.querySelector('.faq-answer');
+  fq.classList.toggle('active');
+  fa.classList.toggle('active');
+  fa.style.maxHeight = 'unset';
+}