add cards variant, refactor class name

Netcentric · Oct 25, 2023 · 69b9ae1 · 69b9ae1
1 parent a046665
commit 69b9ae1
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 10 deletions.
diff --git 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-warm-gray);
+}
+
 .v2-cards__picture-wrapper {
   padding: 0;
 }

diff --git 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');
     });
   });