code migarte from old repo

.eslintrc.js

@@ -3,7 +3,6 @@ module.exports = {
   extends: [
     'airbnb-base',
     'plugin:json/recommended',
-    'plugin:xwalk/recommended',
   ],
   env: {
     browser: true,

.github/pull_request_template.md

@@ -3,5 +3,5 @@ Please always provide the [GitHub issue(s)](../issues) your PR is for, as well a
 Fix #<gh-issue-id>
 
 Test URLs:
-- Before: https://main--{repo}--{owner}.hlx.live/
-- After: https://<branch>--{repo}--{owner}.hlx.live/
+- Before: https://main--piramalfinance--shamalijadhav.hlx.live/
+- After: https://<branch>--piramalfinance--shamalijadhav.hlx.live/

README.md

@@ -2,8 +2,8 @@
 Your project's description...
 
 ## Environments
-- Preview: https://main--{repo}--{owner}.hlx.page/
-- Live: https://main--{repo}--{owner}.hlx.live/
+- Preview: https://main--piramalfinance--WWWPiramalFinanceCOM.hlx.page/
+- Live: https://main--piramalfinance--WWWPiramalFinanceCOM.hlx.live/
 
 ## Installation
 
@@ -23,4 +23,4 @@ npm run lint
 1. Add the [AEM Code Sync GitHub App](https://github.com/apps/aem-code-sync) to the repository
 1. Install the [AEM CLI](https://github.com/adobe/helix-cli): `npm install -g @adobe/aem-cli`
 1. Start AEM Proxy: `aem up` (opens your browser at `http://localhost:3000`)
-1. Open the `{repo}` directory in your favorite IDE and start coding :)
+1. Open the `piramalfinance` directory in your favorite IDE and start coding :)

blocks/accordion-group/accordion-group.css

@@ -0,0 +1,23 @@
+@import "../accordion/accordion.css";
+
+/* inside accordion group we can have text below first div */
+
+.shade-box {
+    background-color: var(--spectrum-gray-100);
+    padding: 14px 21px 21px;
+    border-radius: 7px;
+    margin-bottom: 28px;
+}
+
+.accordion-group>.accordion details div {
+    font-size: var(--exlm-font-size-content);
+    line-height: var(--exlm-line-height-h4);
+    margin-left: 14px;
+    margin-top: 14px;
+}
+
+/* override /docs font size */
+.accordion-group>.accordion details summary {
+    font-size: var(--spectrum-font-size-200);
+    line-height: var(--exlm-line-height-h4);
+}

blocks/accordion-group/accordion-group.js

@@ -0,0 +1,84 @@
+import { generateAccordionDOM } from "../accordion/accordion.js";
+
+export default function decorate(block) {
+  // each row is an accordion entry
+  const accordions = [...block.children];
+
+  // loop through all accordion blocks
+  [...accordions].forEach((accordion) => {
+    // generate the accordion
+    const accordionDOM = generateAccordionDOM(accordion);
+    // empty the content ,keep root element with UE instrumentation
+    accordion.textContent = "";
+    // add block classes
+    accordion.classList.add("accordion", "block");
+    accordion.append(accordionDOM);
+  });
+
+  // use same styling as shade-box from /docs
+  block.classList.add("shade-box");
+  try {
+    openFunctionFAQ(block);
+    block.closest(".faq-view-more-logic") ? viewMoreLogicFAQ() : "";
+  } catch (error) {
+    console.error(error);
+  }
+}
+
+function openFunctionFAQ(block) {
+  const titles = block.querySelectorAll("details summary");
+
+    titles.forEach(function (title) {
+      title.addEventListener("click", function () {
+        if(this.classList.contains('active')){
+          setTimeout(() => {
+            this.closest("details").removeAttribute("open");
+          }, 1000);
+          this.classList.remove("active");
+        }else{
+          titles.forEach(function (title) {
+            title.closest("details").removeAttribute("open");
+            title.classList.remove("active");
+          });
+
+          this.classList.toggle("active");
+        }
+      });
+    });
+
+}
+
+function viewMoreLogicFAQ() {
+  document.querySelectorAll(".faq-section-wrapper.faq-view-more-logic").forEach((each) => {
+    const allFAQSection = each.querySelectorAll(".accordion.block");
+
+    allFAQSection.forEach((eachFAQ, index) => {
+      if (index == 5) {
+        eachFAQ.classList.add("faq-blur");
+      }
+      eachFAQ.classList.toggle("dp-none", index > 5);
+    });
+
+    const buttonContainer = each.querySelector(".button-container");
+    if (buttonContainer) {
+      const buttonText = buttonContainer.querySelector("a").textContent.trim();
+      buttonContainer.innerHTML = buttonText;
+      viewMoreFAQ(each);
+    }
+  });
+}
+function viewMoreFAQ(eachs) {
+  const faqButtonContainer = eachs.querySelector(".faq-section-wrapper .button-container");
+  faqButtonContainer.addEventListener("click", function () {
+    const isViewMoreFAQ = this.textContent.toLowerCase() === "view more";
+    this.innerText = isViewMoreFAQ ? "View Less" : "View More";
+
+    eachs.querySelectorAll(".accordion.block").forEach((eachFAQ, index) => {
+      if (index == 5) {
+        var checkBlurClass = eachFAQ.classList.contains("faq-blur");
+        checkBlurClass ? eachFAQ.classList.remove("faq-blur") : eachFAQ.classList.add("faq-blur");
+      }
+      eachFAQ.classList.toggle("dp-none", !isViewMoreFAQ && index > 5);
+    });
+  });
+}