Merge pull request #49 from adobecom/MWPW-143335

feat: add cards block

express/blocks/ax-columns/ax-columns.css

@@ -31,7 +31,7 @@
   gap: 40px;
 }
 
-.ax-columns:not(.extra-wide):first-child {
+.ax-columns:not(.extra-wide):first-child:not(:empty) {
   padding-top: 60px;
 }
 

express/blocks/cards/cards.css

@@ -0,0 +1,195 @@
+main .section:has(.card) {
+  background-color: #F1F3F4;
+  padding-top: 80px;
+}
+
+main .section:has(.cards.highlight) {
+  padding-top: 60px;
+  padding-left: 15px;
+  padding-bottom: 120px;
+  padding-right: 15px;
+}
+
+main .section:has(.card) > div > h2:first-of-type {
+  margin-top: 80px;
+}
+
+main .section:has(.card) .content {
+  margin: auto;
+  max-width: 375px;
+  padding: 0;
+}
+
+main .section:has(.cards.highlight) {
+  background: var(--gradient-highlight-vertical);
+}
+
+main .section .cards {
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  margin: 56px auto;
+  max-width: 375px;
+}
+
+main .section .cards .card {
+  background-color: #FFF;
+  width: 100%;
+  margin: 0 auto 16px auto;
+  border-radius: 20px;
+  display: flex;
+  flex-direction: column;
+}
+
+main .section .cards .card .card-image {
+  box-sizing: border-box;
+  border-radius: 20px 20px 0 0;
+  min-height: 136px;
+}
+
+main .section .cards .card .card-image img {
+  border-radius: 20px 20px 0 0;
+}
+
+
+main .section .cards .card .card-content {
+  padding: 32px 32px 8px 32px;
+  color: #232323;
+}
+
+main .section .cards .card .card-content h2 {
+  text-align: center;
+  margin-bottom: 32px;
+}
+
+main .section .cards .card .card-content p {
+  margin-top: 0;
+}
+
+main .section .cards .card .card-content ul {
+  text-align: left;
+}
+
+main .section .cards.dark .card {
+  background-color: #000;
+}
+
+main .section .cards a.card {
+  text-decoration: none;
+}
+
+main .section .cards.dark .card .card-content {
+  color: #FFF;
+}
+
+main .section .cards.dark .card .card-image {
+  background-color: #343434;
+}
+
+main .section .cards.large {
+  gap: 32px;
+}
+
+main .section .cards.large .card {
+  margin: 0 auto;
+}
+
+main .section .cards.large .card .card-content {
+  padding: 32px 32px 8px 32px;
+}
+
+main .section .cards.large .card .card-content h2 {
+  text-align: left;
+  font-size: 1.375rem;
+  line-height: 1.1;
+  margin-bottom: 32px;
+}
+
+main .section .cards.large .card .card-content p,
+main .section .cards.large .card .card-content li {
+ text-align: left;
+  font-size: 1.125rem;
+}
+
+@media (min-width: 600px) {
+  main .section .cards .card {
+    width: 344px;
+  }
+}
+
+@media (min-width:900px) {
+  main .section:has(.card) .content {
+    max-width: 830px;
+  }
+
+  main .section .cards {
+    max-width: 1024px;
+    width: unset;
+    margin: 80px auto;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: center;
+  }
+
+  main .section .cards .card {
+    width: 248px;
+    margin-right: 32px;
+    background-color: #FFF;
+    box-shadow: 0 4px 8px 2px rgba(102, 102, 102, 0.1);
+    margin: 0 20px 32px 20px;
+  }
+
+  main .section .cards .card .card-image {
+    background-color: #F1F3F4;
+  }
+
+  main .section .cards .card .card-content {
+    padding: 16px 16px 8px 16px;
+  }
+
+  main .section .cards .card .card-content h2 {
+    text-align: center;
+    font-size: 1.25rem;
+    line-height: 1.2;
+    margin-bottom: 8px;
+  }
+
+  main .section .cards .card .card-content p,
+  main .section .cards .card .card-content li {
+    font-size: 0.9rem;
+  }
+
+  main .section .cards.large {
+    flex-wrap: wrap;
+    gap: 40px;
+    width: 724px;
+  }
+
+  main .section .cards.large .card {
+    width: 342px;
+  }
+
+  main .section .cards.featured .card:first-of-type {
+    width: 724px;
+    flex-direction: row;
+  }
+
+  main .section .cards.featured .card:first-of-type .card-image {
+    border-top-left-radius: 20px;
+    border-top-right-radius: 0;
+    border-bottom-left-radius: 20px;
+    min-height: unset;
+    min-width: 342px;
+  }
+
+  main .section .cards.featured .card:first-of-type .card-content {
+    padding: 32px 40px 8px 40px;
+    min-height: 294px;
+  }
+}
+
+@media (min-width:1200px) {
+  main .section:has(.card) .content {
+    max-width: unset;
+  }
+}

express/blocks/cards/cards.js

@@ -0,0 +1,29 @@
+// eslint-disable-next-line import/no-unresolved
+import { getLibs } from '../../scripts/utils.js';
+import { decorateButtonsDeprecated } from '../../scripts/utils/decorate.js';
+
+const { createTag } = await import(`${getLibs()}/utils/utils.js`);
+/**
+ * @param {HTMLDivElement} $block
+ */
+export default function decorate($block) {
+  decorateButtonsDeprecated($block);
+  $block.querySelectorAll(':scope>div').forEach(($card) => {
+    $card.classList.add('card');
+    const $cardDivs = [...$card.children];
+    $cardDivs.forEach(($div) => {
+      if ($div.querySelector('img')) {
+        $div.classList.add('card-image');
+      } else {
+        $div.classList.add('card-content');
+      }
+      const $a = $div.querySelector('a');
+      if ($a && $a.textContent.trim().startsWith('https://')) {
+        const $wrapper = createTag('a', { href: $a.href, class: 'card' });
+        $a.remove();
+        $wrapper.innerHTML = $card.innerHTML;
+        $block.replaceChild($wrapper, $card);
+      }
+    });
+  });
+}

express/blocks/ckg-link-list/ckg-link-list.js

@@ -19,7 +19,6 @@ function addColorSampler(pill, colorHex, btn) {
 }
 
 export default async function decorate(block) {
-  console.log(block);
   block.style.visibility = 'hidden';
 
   const payloadContext = { urlPath: block.textContent.trim() || window.location.pathname };

test/blocks/cards/cards.test.js

@@ -0,0 +1,38 @@
+/* eslint-env mocha */
+/* eslint-disable no-unused-vars */
+
+import { readFile } from '@web/test-runner-commands';
+import { expect } from '@esm-bundle/chai';
+
+const imports = await Promise.all([
+  import('../../../express/scripts/scripts.js'),
+  import('../../../express/blocks/cards/cards.js'),
+]);
+const { default: decorate } = imports[1];
+
+document.body.innerHTML = await readFile({ path: './mocks/body.html' });
+
+describe('Cards', () => {
+  before(() => {
+    window.isTestEnv = true;
+  });
+
+  it('Cards exists', () => {
+    const cards = document.querySelector('.cards');
+    decorate(cards);
+    expect(cards).to.exist;
+  });
+
+  it('Cards has the correct elements', () => {
+    expect(document.querySelector('.card')).to.exist;
+    // If img
+    expect(document.querySelector('.card-image')).to.exist;
+    // If not img
+    expect(document.querySelector('.card-content')).to.exist;
+  });
+
+  it('If text content starts with https://, create a card wrapper', () => {
+    expect(document.querySelector('a')).to.exist;
+    expect(document.querySelector('a.card')).to.exist;
+  });
+});

test/blocks/cards/mocks/body.html

@@ -0,0 +1,41 @@
+<div class="cards block" data-block-name="cards" data-block-status="loading">
+    <div>
+        <div>
+            <picture>
+                <source media="(min-width: 600px)" type="image/webp"
+                    srcset="/express/create/logo/media_1ff901352aa7f926919f0580a27ac3154abece759.png?width=2000&amp;format=webply&amp;optimize=medium">
+                <source type="image/webp"
+                    srcset="/express/create/logo/media_1ff901352aa7f926919f0580a27ac3154abece759.png?width=750&amp;format=webply&amp;optimize=medium">
+                <source media="(min-width: 600px)"
+                    srcset="/express/create/logo/media_1ff901352aa7f926919f0580a27ac3154abece759.png?width=2000&amp;format=png&amp;optimize=medium">
+                <img loading="lazy" alt=""
+                    src="/express/create/logo/media_1ff901352aa7f926919f0580a27ac3154abece759.png?width=750&amp;format=png&amp;optimize=medium">
+            </picture>
+        </div>
+        <div>
+            <p class="button-container">
+                <a href="https://edex.adobe.com/express?trackingid=Z2G1FT79&amp;mv=in-product&amp;mv2=ccx"
+                    target="_blank" title="Teaching Resources" class="button accent">https://edex.adobe.com/express</a>
+            </p>
+            <p>Teach anything with Adobe Express and keep students engaged with free, flexible, creative activities for
+                all ages and subjects.</p>
+            <p class="button-container"><a
+                    href="https://edex.adobe.com/express?trackingid=Z662FPH8&amp;mv=in-product&amp;mv2=ccx"
+                    target="_blank" title="Try now" class="button accent">Try now</a></p>
+        </div>
+    </div>
+    <div>
+        <div>
+            <picture>
+                <source media="(min-width: 600px)" type="image/webp"
+                    srcset="/express/create/logo/media_1c3b632bb63145e30663fca0e5bcb9fe4a0a5e828.png?width=2000&amp;format=webply&amp;optimize=medium">
+                <source type="image/webp"
+                    srcset="/express/create/logo/media_1c3b632bb63145e30663fca0e5bcb9fe4a0a5e828.png?width=750&amp;format=webply&amp;optimize=medium">
+                <source media="(min-width: 600px)"
+                    srcset="/express/create/logo/media_1c3b632bb63145e30663fca0e5bcb9fe4a0a5e828.png?width=2000&amp;format=png&amp;optimize=medium">
+                <img loading="lazy" alt=""
+                    src="/express/create/logo/media_1c3b632bb63145e30663fca0e5bcb9fe4a0a5e828.png?width=750&amp;format=png&amp;optimize=medium">
+            </picture>
+        </div>
+    </div>
+</div>