add collapsible-card block

express/blocks/collapsible-card/collapsible-card.css

@@ -0,0 +1,55 @@
+main .collapsible-card-wrapper .collapsible-card {
+    padding: 20px 40px;
+    background-color: var(--color-gray-200);
+    border-radius: 20px;
+    max-width: 263px;
+    margin: auto auto 40px;
+    position: relative;
+    text-align: center;
+}
+
+main .collapsible-card-wrapper div {
+    overflow: hidden;
+    transition: max-height 0.2s;
+}
+
+main .collapsible-card-wrapper .badge {
+    margin-top: 16px;
+    margin-bottom: 8px;
+    display: inline-block;
+    height: 50px;
+}
+
+main .collapsible-card-wrapper .badge img {
+    height: 100%;
+    margin: 0;
+}
+
+main .collapsible-card-wrapper .toggle-button {
+    position: absolute;
+    top: 14px;
+    right: 14px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: var(--color-gray-300);
+    border-radius: 50%;
+    transition: 0.2s;
+}
+
+main .collapsible-card-wrapper .toggle-button .icon.icon-plus {
+    height: 20px;
+    width: 20px;
+}
+
+main .collapsible-card-wrapper .collapsible-card.expanded .toggle-button {
+    transform: rotate(45deg);
+    top: 10px;
+    right: 10px;
+    padding: 4px;
+}
+
+main .collapsible-card-wrapper .collapsible-card > div:last-of-type {
+    font-size: 14px;
+    line-height: 21px;
+}

express/blocks/collapsible-card/collapsible-card.js

@@ -0,0 +1,70 @@
+import { getLibs } from '../../scripts/utils.js';
+import { addTempWrapperDeprecated } from '../../scripts/utils/decorate.js';
+import { getMobileOperatingSystem } from '../../scripts/widgets/floating-cta.js';
+import { getIconElementDeprecated } from '../../scripts/utils/icons.js';
+import { fetchRelevantRows } from '../../scripts/utils/relevant.js';
+
+const { createTag } = await import(`${getLibs()}/utils/utils.js`);
+
+function toggleCollapsibleCard($block) {
+  $block.classList.toggle('expanded');
+  $block.classList.remove('initial-expansion');
+  const $divs = $block.querySelectorAll(':scope > div');
+  const $childDiv = $divs[$divs.length - 1].querySelector('div');
+
+  setTimeout(() => {
+    if ($block.classList.contains('expanded')) {
+      $divs[$divs.length - 1].style.maxHeight = `${$childDiv.offsetHeight}px`;
+    } else {
+      $divs[$divs.length - 1].style.maxHeight = '0px';
+    }
+  }, 100);
+}
+
+function initToggleState($block) {
+  const $divs = $block.querySelectorAll(':scope > div');
+  $divs[$divs.length - 1].style.maxHeight = '0px';
+}
+
+function decorateToggleButton($block) {
+  const $toggleButton = createTag('div', { class: 'toggle-button' });
+  $toggleButton.append(getIconElementDeprecated('plus'));
+
+  $block.prepend($toggleButton);
+
+  $toggleButton.addEventListener('click', () => {
+    toggleCollapsibleCard($block);
+  });
+}
+
+function decorateBadge($block) {
+  const $anchor = $block.querySelector('a');
+  const OS = getMobileOperatingSystem();
+
+  if ($anchor) {
+    $anchor.textContent = '';
+    $anchor.classList.add('badge');
+
+    if (OS === 'iOS') {
+      $anchor.append(getIconElementDeprecated('apple-store'));
+    } else {
+      $anchor.append(getIconElementDeprecated('google-store'));
+    }
+  }
+}
+
+export default async function decorate($block) {
+  addTempWrapperDeprecated($block, 'collapsible-card');
+
+  if ($block.classList.contains('spreadsheet-powered')) {
+    const relevantRowsData = await fetchRelevantRows(window.location.pathname);
+
+    if (relevantRowsData && (!relevantRowsData.collapsibleCard || relevantRowsData.collapsibleCard !== 'Y')) {
+      $block.remove();
+    }
+  }
+
+  decorateBadge($block);
+  decorateToggleButton($block);
+  initToggleState($block);
+}

test/blocks/collapsible-card/collapsible-card.test.js

@@ -0,0 +1,50 @@
+/* eslint-env mocha */
+/* eslint-disable no-unused-vars */
+
+import { readFile } from '@web/test-runner-commands';
+import { expect } from '@esm-bundle/chai';
+import sinon from 'sinon';
+
+const [, { default: decorate }] = await Promise.all([import('../../../express/scripts/scripts.js'), import('../../../express/blocks/collapsible-card/collapsible-card.js')]);
+
+document.body.innerHTML = await readFile({ path: './mocks/body.html' });
+const clock = sinon.useFakeTimers({ shouldAdvanceTime: true });
+
+describe('Collapsible Card', () => {
+  before(async () => {
+    window.isTestEnv = true;
+    const collapsibleCard = document.querySelector('.collapsible-card');
+    await decorate(collapsibleCard);
+  });
+
+  after(() => {
+    clock.restore();
+  });
+
+  it('Collapsible Card exists', () => {
+    const collapsibleCard = document.querySelector('.collapsible-card');
+    decorate(collapsibleCard);
+    expect(collapsibleCard).to.exist;
+  });
+
+  it('If toggle expanded', async () => {
+    const toggleButton = document.querySelector('.toggle-button');
+    toggleButton.click();
+
+    await clock.nextAsync();
+    expect(document.querySelector('.collapsible-card').classList.contains('expanded')).to.be.true;
+  });
+
+  it('If no toggle expanded', async () => {
+    const toggleButton = document.querySelector('.toggle-button');
+    toggleButton.click();
+
+    await clock.nextAsync();
+    expect(document.querySelector('.collapsible-card').classList.contains('expanded')).to.be.false;
+  });
+
+  it('Anchor has right class', async () => {
+    const anchor = document.querySelector('a');
+    expect(anchor.classList.contains('badge')).to.be.true;
+  });
+});

test/blocks/collapsible-card/mocks/body.html

@@ -0,0 +1,18 @@
+<div class="collapsible-card spreadsheet-powered spreadsheet powered block" data-block-name="collapsible-card"
+    data-block-status="loading">
+    <div>
+        <div>
+            <h5 id="make-your-meme-for-free-on-the-adobe-express-app">Make your meme for free on the Adobe Express app.
+            </h5>
+        </div>
+    </div>
+    <div>
+        <div><a href="https://adobesparkpost.app.link/COaFJORi7pb"
+                title="https://adobesparkpost.app.link/COaFJORi7pb">https://adobesparkpost.app.link/COaFJORi7pb</a>
+        </div>
+    </div>
+    <div style="height: 0px;">
+        <div>Adobe Express enables you to quickly and easily make standout content from thousands of beautiful templates
+            on mobile and web. No design skills needed and it’s FREE to get started.</div>
+    </div>
+</div>