rename collapsible-block to faqv2

express/blocks/faqv2/faqv2.css

@@ -0,0 +1,254 @@
+.faqv2-wrapper {
+    margin: 0 auto 10px auto;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    border-radius: 8px;
+    background: var(--color-white);
+    width: 92%;
+  }
+
+  .faqv2-accordion {
+    height: 128px;
+    margin-bottom: 4px;
+    border-radius: 0px 8px 8px 0px;
+    border-left: 4px solid #724CDC;
+    background: #F8F8F8;
+    padding: 16px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+  }
+
+  .faqv2 {
+    position: relative;
+    z-index: 1;
+    width: 100%;
+    height: auto;
+  }
+
+  .faqv2 .faqv2-accordion {
+    margin-right: 15px;
+  }
+
+  .faqv2-header {
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 24px;
+    text-align: left;
+    padding-left: 16px;
+    color: #444444;
+  }
+
+  .faqv2-sub-header {
+    margin-top: 10px;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 700;
+    line-height: 24px;
+    text-align: left;
+    padding-left: 16px;
+    color: #505050;
+  }
+
+  .faqv2 .faqv2-toggle-btn {
+    display: block;
+    width: fit-content;
+    margin: 15px 0 0 15px;
+    text-align: left;
+    text-decoration: none;
+    border-radius: 18px;
+    padding: 5px 1.2em 6px 1.2em;
+    font-size: var(--body-font-size-s);
+    font-weight: 600;
+    line-height: var(--body-line-height);
+    cursor: pointer;
+    transition: background-color 0.3s, color 0.3s, border 0.3s;
+    border-width: 2px;
+    border-style: solid;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    color: var(--color-white);
+    background-color: var(--color-info-accent);
+    border-color: var(--color-info-accent);
+  }
+
+  .faqv2-accordion.expandable.header-accordion {
+    height: 100%;
+    border-radius: 8px;
+    border: none;
+    margin-bottom: 6px;
+    background: white;
+  }
+
+  .faqv2-accordion.expandable.header-accordion.rounded-corners {
+    border-radius: 8px 8px 0 0;
+    margin-bottom: 0;
+    background: linear-gradient(to bottom,
+        #5C5CE0,
+        #9C49C6,
+        #BF38A5) left / 1% 100% no-repeat,
+      white;
+  }
+
+  .faqv2-accordion.expandable.sub-header-accordion {
+    height: 100%;
+    border-radius: 0 0 8px 8px;
+    border: none;
+    display: none;
+    margin-bottom: 6px;
+    background: linear-gradient(to bottom,
+        #D13381,
+        #DE3E67,
+        #EC5153,
+        #F2693C,
+        #F08420) left / 1% 100% no-repeat,
+      white;
+  }
+
+  .faqv2-header.expandable {
+    font-size: 16px;
+    font-weight: 700;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    cursor: pointer;
+    color: #242424;
+    padding-left: 6px;
+  }
+
+  .faqv2-accordion.expandable .toggle-icon {
+    width: 12px;
+    height: 12px;
+  }
+
+  .faqv2-sub-header.expandable {
+    font-size: 16px;
+    font-weight: 400;
+    margin-top: 0;
+    padding-bottom: 10px;
+    padding-left: 6px;
+  }
+
+  .faqv2-accordion.title {
+    font-size: 32px;
+    font-weight: 800;
+    margin: 20px 0 10px 0;
+    padding-left: 0;
+    height: 50px;
+    border: none;
+    background: transparent;
+    text-align: center;
+  }
+
+  .section.faqv2-grey-bg {
+    background-color: #E8E8E8;
+  }
+
+  .section.faqv2-section-padding {
+    padding-top: 10px;
+    padding-bottom: 50px;
+  }
+
+  .section .faqv2-background {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 0;
+    margin: 0;
+    max-width: none;
+  }
+
+  .section .faqv2-background img {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    object-fit: cover;
+    transform: translate(-50%, -50%);
+    width: 100%;
+    height: 100%;
+    max-width: none;
+  }
+
+  @media (min-width: 400px) {
+    .faqv2-header {
+      font-size: 18px;
+      font-weight: 400;
+    }
+
+    .faqv2-sub-header {
+      font-size: 18px;
+      font-weight: 700;
+      line-height: 24px;
+    }
+
+    .faqv2.small .faqv2-accordion {
+      height: 78px;
+    }
+
+    .faqv2-accordion {
+      height: 128px;
+      margin-bottom: 4px;
+      border-radius: 0px 8px 8px 0px;
+      border-left: 4px solid #724CDC;
+      background: #F8F8F8;
+      padding: 16px;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+    }
+
+    .faqv2-accordion.collapsed {
+      display: none;
+    }
+
+    .faqv2-toggle-btn {
+      display: block;
+      width: fit-content;
+      margin: 10px 0 0 0;
+      margin-left: 0;
+      text-align: left;
+      text-decoration: none;
+      border-radius: 18px;
+      padding: 5px 1.2em 6px 1.2em;
+      font-size: var(--body-font-size-s);
+      font-weight: 600;
+      line-height: var(--body-line-height);
+      cursor: pointer;
+      transition: background-color 0.3s, color 0.3s, border 0.3s;
+      border-width: 2px;
+      border-style: solid;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      color: var(--color-white);
+      background-color: var(--color-info-accent);
+      border-color: var(--color-info-accent);
+    }
+  }
+
+  @media (min-width: 600px) {
+    .faqv2-wrapper {
+      width: unset;
+    }
+  }
+
+  @media (min-width: 900px) {
+    .faqv2 {
+      width: 648px;
+      margin: auto;
+    }
+
+    .faqv2 .faqv2-accordion {
+      margin-left: 0;
+      margin-right: 0;
+    }
+
+    .faqv2 .faqv2-toggle-btn {
+      width: 65px;
+      height: 24px;
+      line-height: 24px;
+      margin-left: 0;
+    }
+  }

express/blocks/faqv2/faqv2.js

@@ -0,0 +1,140 @@
+import { createTag } from '../../scripts/utils.js';
+
+function buildTableLayout(block) {
+  const parentDiv = block.closest('.section');
+  parentDiv?.classList.add('faqv2-grey-bg', 'faqv2-section-padding');
+
+  const rows = Array.from(block.children);
+  block.innerHTML = '';
+  const background = rows.shift();
+  background.classList.add('faqv2-background');
+  parentDiv.prepend(background);
+  const headerText = rows.shift()?.innerText.trim();
+
+  if (headerText) {
+    const rowAccordionHeader = createTag('h2', { class: 'faqv2-accordion title' });
+    rowAccordionHeader.textContent = headerText;
+    block.prepend(rowAccordionHeader);
+  }
+
+  const collapsibleRows = [];
+  rows.forEach((row) => {
+    const cells = Array.from(row.children);
+    const header = cells[0];
+    const subHeader = cells[1];
+    collapsibleRows.push({
+      header: header.textContent.trim(),
+      subHeader: subHeader.innerHTML,
+    });
+  });
+
+  collapsibleRows.forEach((row) => {
+    const { header, subHeader } = row;
+
+    const rowWrapper = createTag('div', { class: 'faqv2-wrapper' });
+    block.append(rowWrapper);
+
+    const headerAccordion = createTag('div', { class: 'faqv2-accordion expandable header-accordion' });
+    rowWrapper.append(headerAccordion);
+
+    const headerDiv = createTag('h3', { class: 'faqv2-header expandable' });
+    headerDiv.innerHTML = header;
+    headerAccordion.append(headerDiv);
+
+    const iconElement = createTag('img', {
+      src: '/express/icons/plus-heavy.svg',
+      alt: 'toggle-icon',
+      class: 'toggle-icon',
+    });
+
+    headerDiv.appendChild(iconElement);
+
+    const subHeaderAccordion = createTag('div', { class: 'faqv2-accordion expandable sub-header-accordion' });
+    rowWrapper.append(subHeaderAccordion);
+
+    const subHeaderDiv = createTag('div', { class: 'faqv2-sub-header expandable' });
+    subHeaderDiv.innerHTML = subHeader;
+    subHeaderAccordion.append(subHeaderDiv);
+
+    headerDiv.addEventListener('click', () => {
+      headerAccordion.classList.toggle('rounded-corners');
+      const isCollapsed = subHeaderAccordion.classList.toggle('collapsed');
+      subHeaderAccordion.style.display = isCollapsed ? 'flex' : 'none';
+      subHeaderAccordion.style.paddingTop = 0;
+
+      iconElement.src = isCollapsed ? '/express/icons/minus-heavy.svg' : '/express/icons/plus-heavy.svg';
+    });
+  });
+}
+
+function buildOriginalLayout(block) {
+  const collapsibleRows = [];
+  const rows = Array.from(block.children);
+
+  rows.forEach((row) => {
+    const cells = Array.from(row.children);
+    const header = cells[0];
+    const subHeader = cells[1];
+    collapsibleRows.push({
+      header: header.textContent.trim(),
+      subHeader: subHeader?.innerHTML,
+    });
+  });
+
+  block.innerHTML = '';
+
+  const visibleCount = 3;
+  let isExpanded = false;
+
+  collapsibleRows.forEach((row, index) => {
+    const { header, subHeader } = row;
+
+    const accordion = createTag('div', { class: 'faqv2-accordion' });
+
+    if (index >= visibleCount) {
+      accordion.classList.add('collapsed');
+      accordion.style.display = 'none';
+    }
+
+    block.append(accordion);
+
+    const headerDiv = createTag('h3', { class: 'faqv2-header' });
+    accordion.append(headerDiv);
+    headerDiv.innerHTML = header;
+
+    const subHeaderDiv = createTag('div', { class: 'faqv2-sub-header' });
+    subHeaderDiv.innerHTML = subHeader;
+    accordion.append(subHeaderDiv);
+  });
+
+  const toggleButton = createTag('a', { class: 'faqv2-toggle-btn button' });
+  toggleButton.textContent = 'View more';
+  collapsibleRows.length > 3 && block.append(toggleButton);
+
+  toggleButton.addEventListener('click', () => {
+    const hiddenItems = block.querySelectorAll('.faqv2-accordion');
+    hiddenItems.forEach((item, index) => {
+      if (index >= visibleCount) {
+        if (item.classList.contains('collapsed')) {
+          item.classList.remove('collapsed');
+          item.style.display = 'flex';
+        } else {
+          item.style.display = 'none';
+          item.classList.add('collapsed');
+        }
+      }
+    });
+    isExpanded = !isExpanded;
+    toggleButton.textContent = isExpanded ? 'View less' : 'View more';
+  });
+}
+
+export default async function decorate(block) {
+  const isExpandableVariant = block.classList.contains('expandable');
+
+  if (isExpandableVariant) {
+    buildTableLayout(block);
+  } else {
+    buildOriginalLayout(block);
+  }
+}