Merge pull request #333 from Netcentric/323-implement-solid-colors

323 Applying solid colors to the cards
Netcentric · May 26, 2023 · eca99e5 · eca99e5
2 parents 08e55a3 + b6bd08b
commit eca99e5
Show file tree

Hide file tree

Showing 2 changed files with 82 additions and 4 deletions.
diff --git a/blocks/cards/cards.css b/blocks/cards/cards.css
@@ -142,6 +142,8 @@
     padding: 0;
     position: relative;
     list-style: none;
+    height: 500px;
+    display: block;
 }
 
 .cards.icon-with-text > ul > li {
@@ -268,6 +270,13 @@
     }
 }
 
+@media (max-width: 600px) {
+    .cards.side-by-side > ul > li {
+          height: 380px;
+      }
+  }
+
+
 @media (min-width: 750px) {
     .cards.icon-with-text > ul {
       grid-template-columns: 1fr 1fr;
@@ -421,3 +430,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-midnight-blue {
+    background-color: var(--c-midnight-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,11 +1,25 @@
 import { createOptimizedPicture } from '../../scripts/lib-franklin.js';
 
+const supportedBackgroundColors = [
+  'dark-teal',
+  'mid-teal',
+  'light-teal',
+  'dark-blue',
+  'light-blue',
+  'midnight-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
+    // scaling all the images down to the actual size makes them blury
     return 150;
   }
-
   return 750;
 }
 
@@ -16,8 +30,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);
   });