comments corrected

Netcentric · Nov 29, 2023 · 625ce24 · 625ce24
1 parent 12bcd56
commit 625ce24
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 41 deletions.
diff --git a/blocks/v2-icon-cards/v2-icon-cards.css b/blocks/v2-icon-cards/v2-icon-cards.css
@@ -130,7 +130,7 @@
 }
 
 .default-content-wrapper.v2-icon-cards--4-cols-header h2 {
-  font-size: 32px;
+  font-size: var(--headline-1-font-size);
 }
 
 @media (min-width: 744px) {
@@ -173,16 +173,21 @@
 }
 
 .v2-icon-cards--4-cols .icon {
+  margin-bottom: 0;
+}
+
+.v2-icon-cards--4-cols .top-icon {
   margin-bottom: 16px;
 }
 
 .v2-icon-cards--4-cols .v2-icon-cards__heading {
-  font-size: 13px;
+  font-size: var(--body-2-font-size);
+  line-height: var(--body-2-line-height);
   margin-bottom: 8px;
 }
 
 .v2-icon-cards--4-cols .v2-icon-cards__body {
-  font-size: 13px;
+  font-size: var(--body-2-font-size);
   margin-bottom: 0;
 }
 
@@ -203,32 +208,25 @@
 
 /* stylelint-disable-next-line no-descending-specificity */
 .v2-icon-cards__column--extra-col a.button {
-  display: flex;
-  flex-direction: row-reverse;
-  justify-content: flex-end;
-  align-items: center;
   gap: 8px;
   min-width: unset;
   padding: 0;
   margin: 4px 0;
 }
 
+.v2-icon-cards__column--extra-col a.button--secondary {
+  font-style: normal;
+}
+
 /* stylelint-disable-next-line no-descending-specificity */
 .v2-icon-cards__column--extra-col a.button:active,
 .v2-icon-cards__column--extra-col a.button:focus,
-.v2-icon-cards__column--extra-col a.button:hover {
+.v2-icon-cards__column--extra-col a.button:hover,
+.v2-icon-cards__column--extra-col a.button--secondary:active,
+.v2-icon-cards__column--extra-col a.button--secondary:focus,
+.v2-icon-cards__column--extra-col a.button--secondary:hover {
   background-color: unset;
-}
-
-.v2-icon-cards__column--extra-col svg {
-  align-self: center;
-  height: 24px;
-  width: 24px;
-  margin-bottom: 0;
-}
-
-.v2-icon-cards__column--extra-col .v2-icon-cards__video-icon .icon {
-  margin: 0;
+  text-decoration: none;
 }
 
 @media (min-width: 744px) {

diff --git a/blocks/v2-icon-cards/v2-icon-cards.js b/blocks/v2-icon-cards/v2-icon-cards.js
@@ -1,4 +1,3 @@
-import { isVideoLink } from '../../scripts/video-helper.js';
 import { createElement } from '../../scripts/common.js';
 
 export default async function decorate(block) {
@@ -46,34 +45,17 @@ export default async function decorate(block) {
 
     if (isExtraColumn) {
       col.classList.add(`${blockName}__column--extra-col`);
-      const link = col.querySelector('a');
-      const isVideo = isVideoLink(link);
-
-      if (isVideo) {
-        const playIcon = document.createRange().createContextualFragment(`
-        <a class="${blockName}__videoBtn" href="${link.href}">
-        ${link.title}
-        <span class="icon icon-play">
-        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
-        <path stroke="var(--color-icon, #000)" d="M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20Z"/>
-        <path stroke="var(--color-icon, #000)" stroke-linecap="round" stroke-linejoin="round" d="m10 8 6 4-6 4V8Z"/>
-        </svg>
-        </span>
-        </a>`);
-
-        link.append(...playIcon.children);
-        link.classList.add(`${blockName}__video-icon`);
-        col.append(link);
-      }
+      col.dataset.theme = 'gold';
     }
 
     const headings = [...col.querySelectorAll('h1, h2, h3, h4, h5, h6')];
     headings.forEach((heading) => heading.classList.add(`${blockName}__heading`, 'h2'));
 
     // icons
-    [...col.querySelectorAll('.icon')].forEach((icon) => {
+    [...col.querySelectorAll('.icon')].forEach((icon, index) => {
       const iconParentEl = icon.parentElement;
-      if (iconParentEl.children.length === 1) {
+      if (iconParentEl.children.length === 1 && index === 0) {
+        icon.classList.add('top-icon');
         iconParentEl.replaceWith(icon);
       }
     });