[Release] Stage to Main (#2811)

adobecom · Sep 3, 2024 · 91afbee · 91afbee
2 parents eeddca4 + 7216452
commit 91afbee
Show file tree

Hide file tree

Showing 116 changed files with 3,950 additions and 1,011 deletions.
diff --git a/.gitignore b/.gitignore
@@ -8,3 +8,5 @@ logs/*
 .iml
 .env
 **/mas/*/stats.json
+test-html-results/
+test-results/
diff --git a/libs/blocks/caas-config/caas-config.js b/libs/blocks/caas-config/caas-config.js
@@ -366,6 +366,7 @@ const UiPanel = () => html`
   <${Input} label="Show total card count at top" prop="showTotalResults" type="checkbox" />
   <${Input} label="Hide date for on-demand content" prop="hideDateInterval" type="checkbox" />
   <${Input} label="Enable showing card badges (by default hidden)" prop="showCardBadges" type="checkbox" />
+  <${Input} label="Show a different CTA for live events" prop="dynamicCTAForLiveEvents" type="checkbox" />
   <${Select} label="Card Style" prop="cardStyle" options=${defaultOptions.cardStyle} />
   <${Select} options=${defaultOptions.cardTitleAccessibilityLevel} prop="cardTitleAccessibilityLevel" label="Card Accessibility Title Level" />
   <${Select} label="Layout" prop="container" options=${defaultOptions.container} />

diff --git a/libs/blocks/caas/utils.js b/libs/blocks/caas/utils.js
@@ -599,6 +599,7 @@ export const getConfig = async (originalState, strs = {}) => {
       },
       detailsTextOption: state.detailsTextOption,
       hideDateInterval: state.hideDateInterval,
+      dynamicCTAForLiveEvents: state.dynamicCTAForLiveEvents,
       setCardBorders: state.setCardBorders,
       showFooterDivider: state.showFooterDivider,
       useOverlayLinks: state.useOverlayLinks,
@@ -764,6 +765,7 @@ export const initCaas = async (state, caasStrs, el) => {
 
 export const defaultState = {
   additionalRequestParams: [],
+  dynamicCTAForLiveEvents: false,
   analyticsCollectionName: '',
   analyticsTrackImpression: false,
   andLogicTags: [],

diff --git a/libs/blocks/chart/chart.js b/libs/blocks/chart/chart.js
@@ -1,4 +1,4 @@
-import { loadScript, getConfig, createTag } from '../../utils/utils.js';
+import { loadScript, getConfig, createTag, customFetch } from '../../utils/utils.js';
 import {
   throttle,
   parseValue,
@@ -122,7 +122,6 @@ export function processMarkData(series, xUnit) {
 }
 
 export async function fetchData(link) {
-  const { customFetch } = await import('../../utils/helpers.js');
   const resp = await customFetch({ resource: link.href.toLowerCase(), withCacheRules: true })
     .catch(() => ({}));
 

diff --git a/libs/blocks/fragment/fragment.js b/libs/blocks/fragment/fragment.js
@@ -1,5 +1,5 @@
 /* eslint-disable max-classes-per-file */
-import { createTag, getConfig, loadArea, localizeLink } from '../../utils/utils.js';
+import { createTag, getConfig, loadArea, localizeLink, customFetch } from '../../utils/utils.js';
 
 const fragMap = {};
 
@@ -83,7 +83,6 @@ export default async function init(a) {
     return;
   }
 
-  const { customFetch } = await import('../../utils/helpers.js');
   let resourcePath = a.href;
   if (a.href.includes('/federal/')) {
     const { getFederatedUrl } = await import('../../utils/federated.js');

diff --git a/libs/blocks/global-footer/global-footer.css b/libs/blocks/global-footer/global-footer.css
@@ -4,7 +4,7 @@
   display: flex;
   justify-content: center;
   font-size: 12px;
-  background: var(--feds-background-footer--light);
+  background: var(--feds-background-footer);
 }
 
 .global-footer ul {
@@ -26,7 +26,7 @@
   display: flex;
   flex-direction: column;
   row-gap: 30px;
-  color: var(--feds-color-headline--light);
+  color: var(--feds-color-headline);
 }
 
 .feds-footer-wrapper ul {
@@ -65,7 +65,7 @@
   margin: 0 var(--feds-gutter-footer);
   border-width: 1px 0 1px 0;
   border-style: solid;
-  border-color: var(--feds-borderColor-featuredProducts--light);
+  border-color: var(--feds-borderColor-featuredProducts);
 }
 
 .feds-featuredProducts-label {
@@ -99,15 +99,15 @@
 /* Region picker */
 .feds-regionPicker {
   column-gap: 10px;
-  color: var(--feds-color-link--light);
-  border-color: var(--feds-color-link--light);
-  fill: var(--feds-color-link--light);
+  color: var(--feds-color-link);
+  border-color: var(--feds-color-link);
+  fill: var(--feds-color-link);
 }
 
 .feds-regionPicker:hover {
-  color: var(--feds-color-link--hover--light);
-  border-color: var(--feds-color-link--hover--light);
-  fill: var(--feds-color-link--hover--light);
+  color: var(--feds-color-link--hover);
+  border-color: var(--feds-color-link--hover);
+  fill: var(--feds-color-link--hover);
 }
 
 .feds-regionPicker:after {
@@ -145,8 +145,8 @@
   min-width: 130px;
   max-height: 300px;
   overflow-y: auto;
-  background: var(--feds-background-nav--light);
-  border: 1px solid var(--feds-color-border--light);
+  background: var(--feds-background-nav);
+  border: 1px solid var(--feds-borderColor);
   border-radius: 4px;
 }
 
@@ -186,11 +186,11 @@
   padding: 0 20px;
   display: block;
   line-height: 2;
-  color: var(--feds-color-link--hover--light);
+  color: var(--feds-color-link--hover);
 }
 
 .feds-regionPicker-wrapper > .fragment a:hover {
-  background: var(--feds-background-link--hover--light);
+  background: var(--feds-background-link--hover);
 }
 
 /* Social */
@@ -234,13 +234,13 @@
   display: flex;
   column-gap: 5px;
   align-items: center;
-  color: var(--feds-color-link--light);
-  fill: var(--feds-color-link--light);
+  color: var(--feds-color-link);
+  fill: var(--feds-color-link);
 }
 
 .feds-footer-privacyLink:hover {
-  color: var(--feds-color-link--hover--light);
-  fill: var(--feds-color-link--hover--light);
+  color: var(--feds-color-link--hover);
+  fill: var(--feds-color-link--hover);
 }
 
 .feds-adChoices-icon {

diff --git a/libs/blocks/global-footer/global-footer.js b/libs/blocks/global-footer/global-footer.js
@@ -20,6 +20,7 @@ import {
   logErrorFor,
   toFragment,
   federatePictureSources,
+  isDarkMode,
 } from '../global-navigation/utilities/utilities.js';
 
 import { getFederatedUrl } from '../../utils/federated.js';
@@ -370,6 +371,7 @@ class Footer {
 export default function init(block) {
   try {
     const footer = new Footer({ block });
+    if (isDarkMode()) block.classList.add('feds--dark');
     return footer;
   } catch (e) {
     lanaLog({ message: 'Could not create footer', e });

diff --git a/libs/blocks/global-navigation/base.css b/libs/blocks/global-navigation/base.css
@@ -7,26 +7,31 @@
   --feds-height-breadcrumbs: 33px;
   --feds-gutter: 8px;
   /* Top navigation - backgrounds */
-  --feds-background-nav--light: #fff;
-  --feds-background-popup--light: #fafafa;
+  --feds-background-nav: #fff;
+  --feds-background-popup: #fafafa;
   --feds-background-promo--dark: #000;
   /* Top navigation - borders */
-  --feds-borderColor--light: #eaeaea;
-  --feds-borderColor-menu--light: #e1e1e1;
+  --feds-borderColor: #eaeaea;
+  --feds-borderColor-menu: #e1e1e1;
+  --feds-borderColor-navLink: #2c2c2c;
   /* Top navigation - colors */
   --feds-color-adobeBrand: #EB1000;
-  --feds-color-headline--light: #505050;
+  --feds-color-headline: #505050;
+  --feds-color-hamburger: #2d2d2d;
+  --feds-color-breadcrumbs--current: #2c2c2c;
+  --feds-color-signIn: #4B4B4B;
   /* Top navigation - misc */
   --feds-radius-utilityIcon: 4px;
   /* Links */
-  --feds-background-link--hover--light: #f5f5f5;
-  --feds-borderColor-link--light: #f3f3f3;
-  --feds-color-link--light: #2c2c2c;
-  --feds-color-link--hover--light: #1473e6;
-  --feds-color-navLink-description--light: #656565;
+  --feds-background-link--hover: #f5f5f5;
+  --feds-borderColor-link: #f3f3f3;
+  --feds-color-link: #2c2c2c;
+  --feds-color-link--hover: #1473e6;
+  --feds-color-navLink-description: #656565;
+  --feds-color-link-breadcrumbs: #707070;
   /* Footer */
-  --feds-background-footer--light: #fafafa;
-  --feds-borderColor-featuredProducts--light: #999;
+  --feds-background-footer: #fafafa;
+  --feds-borderColor-featuredProducts: #999;
   --feds-gutter-footer: 32px;
 }
 
@@ -36,23 +41,23 @@
   align-items: center;
   padding: 12px;
   border: none;
-  color: var(--feds-color-link--light);
+  color: var(--feds-color-link);
   font: inherit;
   white-space: nowrap;
   flex-shrink: 0;
 }
 
 .feds-navLink:hover,
 .feds-navLink:focus {
-  color: var(--feds-color-link--hover--light);
+  color: var(--feds-color-link--hover);
 }
 
 .feds-navLink:not(.feds-navLink--hoverCaret) {
   column-gap: 15px;
 }
 
 .feds-navLink--blue {
-  color: var(--feds-color-link--hover--light);
+  color: var(--feds-color-link--hover);
 }
 
 .feds-navLink--hoverCaret {
@@ -62,15 +67,15 @@
 
 .feds-navLink--hoverCaret:hover,
 .feds-navLink--hoverCaret:focus {
-  color: var(--feds-color-link--light);
+  color: var(--feds-color-link);
 }
 
 .feds-navLink--hoverCaret:after,
 .feds-navLink[class *= '-gradient'] .feds-navLink-title:after {
   display: flex;
   border-width: 0 1px 1px 0;
   border-style: solid;
-  border-color: var(--feds-color-link--light);
+  border-color: var(--feds-color-link);
   transform-origin: 75% 75%;
   transition: transform 0.1s ease;
   box-sizing: content-box;
@@ -134,15 +139,15 @@ header.global-navigation {
 
   .feds-navItem--active > .feds-navLink:only-child:hover,
   .feds-navItem--active > .feds-navLink:only-child:focus {
-    color: var(--feds-color-link--light);
+    color: var(--feds-color-link);
   }
 
   .feds-navItem--active > .feds-navLink:before {
     position: absolute;
     bottom: 0;
     left: 0;
     right: 0;
-    border-bottom: 2px solid #2c2c2c;
+    border-bottom: 2px solid var(--feds-borderColor-navLink);
     content: "";
   }
 
@@ -172,7 +177,7 @@ header.global-navigation {
 
   .feds-navLink--hoverCaret:hover,
   .feds-navLink--hoverCaret:focus {
-    background-color: var(--feds-background-popup--light);
+    background-color: var(--feds-background-popup);
   }
 
   .feds-navLink--hoverCaret:after {
@@ -214,12 +219,12 @@ header.global-navigation {
   .feds-navLink-description {
     display: flex;
     font-size: 12px;
-    color: var(--feds-color-navLink-description--light);
+    color: var(--feds-color-navLink-description);
   }
 
   .feds-navLink:hover .feds-navLink-description,
   .feds-navLink:focus .feds-navLink-description {
-    color: var(--feds-color-navLink-description--light);
+    color: var(--feds-color-navLink-description);
   }
 
   /* Nav Link special styles for A/B test */
@@ -260,7 +265,7 @@ header.global-navigation {
 
   .feds-navLink[class *= '-gradient']:hover .feds-navLink-title:after,
   .feds-navLink[class *= '-gradient']:focus .feds-navLink-title:after {
-    border-color: var(--feds-color-link--hover--light);
+    border-color: var(--feds-color-link--hover);
   }
 
   .feds-navLink--photo-gradient {