From 84bbd451f17ded4be6de894a63a459d539fb41a6 Mon Sep 17 00:00:00 2001
From: TyroneAEM <147942284+TyroneAEM@users.noreply.github.com>
Date: Mon, 12 Aug 2024 16:22:19 -0500
Subject: [PATCH] CSS : Renamed classes icon-categories to icon-productGroup,
 categories to productGroup. (#156)

JS :  Renamed classes icon-categories to icon-productGroup, categories to productGroup.
Renamed GraphQL field  program.categories to  program.productGroup
---
 blocks/gmo-program-details/gmo-program-details.css | 4 ++--
 blocks/gmo-program-details/gmo-program-details.js  | 8 ++++----
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/blocks/gmo-program-details/gmo-program-details.css b/blocks/gmo-program-details/gmo-program-details.css
index aa20114..f79a0d4 100644
--- a/blocks/gmo-program-details/gmo-program-details.css
+++ b/blocks/gmo-program-details/gmo-program-details.css
@@ -112,7 +112,7 @@ body {
     margin-left: 16px;
 }
 
-.header-row3 .icon-categories {
+.header-row3 .icon-productGroup {
     width: 16px;
     height: 16px;
     background-image: url('/icons/folderOpenOutline.svg');
@@ -127,7 +127,7 @@ body {
     margin-left: 8px;
 }
 
-.header-row3 .categories {
+.header-row3 .productGroup {
     font: normal normal normal 14px/21px Adobe Clean;
     margin-left: 8px;
 }
diff --git a/blocks/gmo-program-details/gmo-program-details.js b/blocks/gmo-program-details/gmo-program-details.js
index 4ed3901..263d34d 100644
--- a/blocks/gmo-program-details/gmo-program-details.js
+++ b/blocks/gmo-program-details/gmo-program-details.js
@@ -293,10 +293,10 @@ function buildHeader(program, queryVars) {
             <span class="release-tier">Release Tier: ${program.releaseTier || "Not Available"}</span>
         </div>`;
 
-    const categories = `
+    const productGroup = `
         <div class="header-row3">
-            <span class="icon-categories"></span>
-            <span class="categories">${program.categories && program.categories.length > 0 ? program.categories.join(', ') : "Not Available"}</span>
+            <span class="icon-productGroup"></span>
+            <span class="productGroup">${program.productGroup && program.productGroup.length > 0 ? program.productGroup.join(', ') : "Not Available"}</span>
         </div>`;
 
     headerWrapper.innerHTML = `
@@ -311,7 +311,7 @@ function buildHeader(program, queryVars) {
               ${date}
               ${driverField}
               ${releaseTier}
-              ${categories}
+              ${productGroup}
             </div>
         </div>
     `