#323: moved solid colours to normal cards block

Netcentric · May 22, 2023 · 30c7bdc · 30c7bdc
1 parent 164e819
commit 30c7bdc
Show file tree

Hide file tree

Showing 2 changed files with 72 additions and 2 deletions.
diff --git a/blocks/cards/cards.css b/blocks/cards/cards.css
@@ -421,3 +421,52 @@
   background-color: var(--bg-text-light-plum);
   color: var(--c-dark-plum);
 }
+
+/* background colors */
+.cards-card-bg-dark-teal {
+  background-color: var(--c-dark-teal);
+}
+
+.cards-card-bg-mid-teal {
+  background-color: var(--c-mid-teal);
+}
+
+.cards-card-bg-light-teal {
+  background-color: var(--c-light-teal);
+}
+
+.cards-card-bg-dark-blue {
+  background-color: var(--c-dark-blue);
+}
+
+.cards-card-bg-light-blue {
+  background-color: var(--c-light-blue);
+}
+
+.cards-card-bg-mid-blue {
+  background-color: var(--c-mid-blue);
+}
+
+.cards-card-bg-dark-plum {
+  background-color: var(--c-dark-plum);
+}
+
+.cards-card-bg-light-plum {
+  background-color: var(--c-light-plum);
+}
+
+.cards-card-bg-mid-plum {
+  background-color: var(--c-mid-plum);
+}
+
+.cards-card-bg-light-grey{
+  background-color: var(--c-light-gray);
+}
+
+.cards-card-bg-mid-grey{
+  background-color: var(--c-mid-gray);
+}
+
+.cards-card-bg-dark-grey{
+  background-color: var(--c-dark-gray);
+}
diff --git a/blocks/cards/cards.js b/blocks/cards/cards.js
@@ -1,5 +1,20 @@
 import { createOptimizedPicture } from '../../scripts/lib-franklin.js';
 
+const supportedBackgroundColors = [
+  'dark-teal',
+  'mid-teal',
+  'light-teal',
+  'dark-blue',
+  'light-blue',
+  'mid-blue',
+  'dark-plum',
+  'light-plum',
+  'mid-plum',
+  'light-gray',
+  'mid-gray',
+  'dark-gray',
+];
+
 function getImageWidth(block) {
   if (block.matches('.icon-with-text')) {
     // scaling the images down to the actual size makes them blury
@@ -16,8 +31,14 @@ export default function decorate(block) {
     const li = document.createElement('li');
     li.innerHTML = row.innerHTML;
     [...li.children].forEach((div) => {
-      if (div.children.length === 1 && div.querySelector('picture')) div.className = 'cards-card-image';
-      else div.className = 'cards-card-body';
+      if (supportedBackgroundColors.indexOf(div.textContent) >= 0) {
+        li.removeChild(div);
+        li.classList.add(`cards-card-bg-${div.textContent}`);
+      } else if (div.children.length === 1 && div.querySelector('picture')) {
+        div.className = 'cards-card-image';
+      } else {
+        div.className = 'cards-card-body';
+      }
     });
     ul.append(li);
   });