From 3f30df7ff7677722e5e170801912dcba1cb22a27 Mon Sep 17 00:00:00 2001
From: Syb Wartna <sybren.wartna@cognizant.com>
Date: Wed, 25 Oct 2023 19:38:24 +0200
Subject: [PATCH] add cards variant, refactor class name

---
 blocks/v2-cards/v2-cards.css |  4 ++++
 blocks/v2-cards/v2-cards.js  | 24 ++++++++++++++----------
 2 files changed, 18 insertions(+), 10 deletions(-)

diff --git a/blocks/v2-cards/v2-cards.css b/blocks/v2-cards/v2-cards.css
index 2af06551b..b101719e5 100644
--- a/blocks/v2-cards/v2-cards.css
+++ b/blocks/v2-cards/v2-cards.css
@@ -12,6 +12,10 @@
   color: var(--c-primary-black);
 }
 
+.v2-cards--gray-cards .v2-cards__card-item {
+  background: var(--c-tertiary-light-cool-gray);
+}
+
 .v2-cards__picture-wrapper {
   padding: 0;
 }
diff --git a/blocks/v2-cards/v2-cards.js b/blocks/v2-cards/v2-cards.js
index c5042726c..e848c70d4 100644
--- a/blocks/v2-cards/v2-cards.js
+++ b/blocks/v2-cards/v2-cards.js
@@ -1,32 +1,36 @@
-const blockClass = 'v2-cards';
+import { variantsClassesToBEM } from '../../scripts/common.js';
 
 export default async function decorate(block) {
+  const blockName = 'v2-cards';
+  const variantClasses = ['gray-cards'];
+  variantsClassesToBEM(block.classList, variantClasses, blockName);
+
   const cardsItems = [...block.querySelectorAll(':scope > div')];
-  cardsItems.forEach((el) => el.classList.add(`${blockClass}__card-item`));
+  cardsItems.forEach((el) => el.classList.add(`${blockName}__card-item`));
 
   const cardsSections = [...block.querySelectorAll(':scope > div > div')];
   cardsSections.forEach((el) => {
-    el.classList.add(`${blockClass}__text-wrapper`);
+    el.classList.add(`${blockName}__text-wrapper`);
   });
 
   const pictures = [...block.querySelectorAll('picture')];
   pictures.forEach((el) => {
-    el.classList.add(`${blockClass}__picture`);
-    el.parentElement.classList.add(`${blockClass}__picture-wrapper`);
-    el.parentElement.classList.remove(`${blockClass}__text-wrapper`);
+    el.classList.add(`${blockName}__picture`);
+    el.parentElement.classList.add(`${blockName}__picture-wrapper`);
+    el.parentElement.classList.remove(`${blockName}__text-wrapper`);
   });
 
   const images = [...block.querySelectorAll('img')];
-  images.forEach((el) => el.classList.add(`${blockClass}__image`));
+  images.forEach((el) => el.classList.add(`${blockName}__image`));
 
   const cardsHeadings = [...block.querySelectorAll('h1, h2, h3, h4, h5, h6')];
-  cardsHeadings.forEach((el) => el.classList.add(`${blockClass}__heading`));
+  cardsHeadings.forEach((el) => el.classList.add(`${blockName}__heading`));
 
   const buttons = [...block.querySelectorAll('.button-container')];
   buttons.forEach((el) => {
-    el.classList.add(`${blockClass}__button-container`);
+    el.classList.add(`${blockName}__button-container`);
     [...el.querySelectorAll('a')].forEach((link) => {
-      link.classList.add('standalone-link', `${blockClass}__button`);
+      link.classList.add('standalone-link', `${blockName}__button`);
       link.classList.remove('button', 'button--primary');
     });
   });