Merge branch 'stage' of github.com:adobecom/milo into MWPW-161355

adobecom · Nov 12, 2024 · bcd598d · bcd598d
2 parents 0f6cad4 + ece75be
commit bcd598d
Show file tree

Hide file tree

Showing 25 changed files with 197 additions and 96 deletions.
diff --git a/libs/blocks/caas/utils.js b/libs/blocks/caas/utils.js
@@ -539,6 +539,22 @@ const getCardsString = async (cards = []) => {
   return uuids.filter(Boolean).join('%2C');
 };
 
+export const stageMapToCaasTransforms = (config) => {
+  if (config.env?.name === 'prod' || !config.stageDomainsMap) return {};
+  const { href, hostname } = window.location;
+  const matchedRules = Object.entries(config.stageDomainsMap)
+    .find(([domain]) => new RegExp(domain).test(href));
+  if (!matchedRules) return {};
+  const [, domainsMap] = matchedRules;
+  return {
+    enabled: true,
+    hostnameTransforms: Object.keys(domainsMap).map((d) => ({
+      from: d,
+      to: domainsMap[d] === 'origin' ? `${d.includes('https') ? 'https://' : ''}${hostname}` : domainsMap[d],
+    })),
+  };
+};
+
 export const getConfig = async (originalState, strs = {}) => {
   const state = addMissingStateProps(originalState);
   const originSelection = Array.isArray(state.source) ? state.source.join(',') : state.source;
@@ -742,7 +758,7 @@ export const getConfig = async (originalState, strs = {}) => {
       lastViewedSession: state.lastViewedSession || '',
     },
     customCard: ['card', `return \`${state.customCard}\``],
-    linkTransformer: pageConfig.caasLinkTransformer || {},
+    linkTransformer: pageConfig.caasLinkTransformer || stageMapToCaasTransforms(pageConfig),
     headers: caasRequestHeaders,
   };
 

diff --git a/libs/blocks/fragment/fragment.js b/libs/blocks/fragment/fragment.js
@@ -41,18 +41,15 @@ const updateFragMap = (fragment, a, href) => {
   }
 };
 
-const insertInlineFrag = (sections, a, relHref, mep, handleMepCommands) => {
+const insertInlineFrag = (sections, a, relHref) => {
   // Inline fragments only support one section, other sections are ignored
   const fragChildren = [...sections[0].children];
   if (a.parentElement.nodeName === 'DIV' && !a.parentElement.attributes.length) {
     a.parentElement.replaceWith(...fragChildren);
   } else {
     a.replaceWith(...fragChildren);
   }
-  fragChildren.forEach((child) => {
-    child.setAttribute('data-path', relHref);
-    if (handleMepCommands) mep.commands = handleMepCommands(mep.commands, child);
-  });
+  fragChildren.forEach((child) => child.setAttribute('data-path', relHref));
 };
 
 function replaceDotMedia(path, doc) {
@@ -132,16 +129,14 @@ export default async function init(a) {
     const { updateFragDataProps } = await import('../../features/personalization/personalization.js');
     updateFragDataProps(a, inline, sections, fragment);
   }
-  let handleMepCommands = false;
   if (mep?.commands?.length) {
     const { handleCommands } = await import('../../features/personalization/personalization.js');
-    handleMepCommands = handleCommands;
+    handleCommands(mep?.commands, fragment, false, true);
   }
   if (inline) {
-    insertInlineFrag(sections, a, relHref, mep, handleMepCommands);
+    insertInlineFrag(sections, a, relHref, mep);
   } else {
     a.parentElement.replaceChild(fragment, a);
-    if (handleMepCommands) handleMepCommands(mep?.commands, fragment);
     await loadArea(fragment);
   }
 }

diff --git a/libs/blocks/global-navigation/base.css b/libs/blocks/global-navigation/base.css
@@ -7,27 +7,29 @@
   --feds-height-breadcrumbs: 33px;
   --feds-gutter: 8px;
   /* Top navigation - backgrounds */
-  --feds-background-nav: #fff;
-  --feds-background-popup: #fafafa;
+  --feds-background-nav: #f8f8f8;
+  --feds-background-popup: #f3f3f3;
+  --feds-background-promo: #fff;
   --feds-background-promo--dark: #000;
   /* Top navigation - borders */
   --feds-borderColor: #eaeaea;
   --feds-borderColor-menu: #e1e1e1;
   --feds-borderColor-navLink: #2c2c2c;
   /* Top navigation - colors */
-  --feds-color-adobeBrand: #EB1000;
+  --feds-color-adobeBrand: #eb1000;
   --feds-color-headline: #505050;
   --feds-color-hamburger: #2d2d2d;
   --feds-color-breadcrumbs--current: #2c2c2c;
-  --feds-color-signIn: #4B4B4B;
+  --feds-color-signIn: #4b4b4b;
   /* Top navigation - misc */
   --feds-radius-utilityIcon: 4px;
   /* Links */
-  --feds-background-link--hover: #f5f5f5;
-  --feds-borderColor-link: #f3f3f3;
-  --feds-color-link: #2c2c2c;
-  --feds-color-link--hover: #1473e6;
-  --feds-color-navLink-description: #656565;
+  --feds-background-link--hover: #e9e9e9;
+  --feds-borderColor-link: #e9e9e9;
+  --feds-color-link: #292929;
+  --feds-color-blue-link: #3b63fb;
+  --feds-color-link--hover: #274dea;
+  --feds-color-navLink-description: #505050;
   --feds-color-link-breadcrumbs: #707070;
   /* Footer */
   --feds-background-footer: #fafafa;
@@ -57,7 +59,7 @@
 }
 
 .feds-navLink--blue {
-  color: var(--feds-color-link--hover);
+  color: var(--feds-color-blue-link);
 }
 
 .feds-navLink--hoverCaret {

diff --git a/libs/blocks/global-navigation/dark-nav.css b/libs/blocks/global-navigation/dark-nav.css
@@ -1,43 +1,44 @@
 :root {
-  --text-color: #F2F2F2;
+  --text-color: #f2f2f2;
   --background-color: #111;
   --link-color: #1473e6;
   --link-hover-color: #1473e6;
   /* Top navigation - backgrounds */
   --feds-background-popup: #111;
   --feds-background-nav: #222;
-  --feds-background-nav--desktop: #1B1B1B;
+  --feds-background-nav--desktop: #1b1b1b;
   /* Top navigation - borders */
   --feds-borderColor: #303030;
-  --feds-borderColor-menu: #4B4B4B;
-  --feds-borderColor-navLink: #DBDBDB;
+  --feds-borderColor-menu: #4b4b4b;
+  --feds-borderColor-navLink: #dbdbdb;
+  --feds-background-promo: #1d1d1d;
   /* Top navigation - colors */
-  --feds-color-adobeBrand: #FFF;
-  --feds-color-headline--mobile: #F2F2F2;
-  --feds-color-headline: #EBEBEB;
-  --feds-color-popup: #EBEBEB;
-  --feds-color-hamburger: #FFF;
-  --feds-color-breadcrumbs--current: #DBDBDB;
-  --feds-color-signIn: #DBDBDB;
-  --feds-color-search: #DBDBDB;
+  --feds-color-adobeBrand: #fff;
+  --feds-color-headline--mobile: #f2f2f2;
+  --feds-color-headline: #ebebeb;
+  --feds-color-popup: #ebebeb;
+  --feds-color-hamburger: #fff;
+  --feds-color-breadcrumbs--current: #dbdbdb;
+  --feds-color-signIn: #dbdbdb;
+  --feds-color-search: #dbdbdb;
   /* Links */
-  --feds-color-link: #F2F2F2;
-  /* --feds-color-link--mobile: #F2F2F2; */
-  --feds-color-link--desktop: #DBDBDB;
+  --feds-color-link: #f2f2f2;
+  /* --feds-color-link--mobile: #f2f2f2; */
+  --feds-color-link--desktop: #dbdbdb;
   --feds-color-link--hover: #1473e6;
-  --feds-color-blue-link: #5eaaf7;
-  --feds-color-navLink-description: #B0B0B0;
-  --feds-color-link-breadcrumbs: #B0B0B0;
-  --feds-background-link--hover: #1B1B1B;
+  --feds-color-blue-link: #5eaaF7;
+  --feds-color-navLink-description: #b0b0b0;
+  --feds-color-link-breadcrumbs: #b0b0b0;
+  --feds-background-link--hover: #1b1b1b;
   --feds-borderColor-link: #323232;
   /* Footer */
   --feds-background-footer: #222;
-  --feds-background-footer--desktop: #1B1B1B;
+  --feds-background-footer--desktop: #1b1b1b;
   --feds-borderColor-featuredProducts: #999;
   /* Dropdown */
   --feds-color-profile-heading--dark: #909090;
-  --feds-color-profile--dark: #DBDBDB;
-  --feds-color-profile--emphasis--dark: #F2F2F2;
+  --feds-color-profile--dark: #dbdbdb;
+  --feds-color-profile--emphasis--dark: #f2f2f2;
   --feds-border-profile--dark: 1px solid var(--feds-borderColor);
 }
 
@@ -166,7 +167,7 @@
 @media (min-width: 900px) {
   .feds--dark .feds-promo {
     border: 1px solid var(--feds-borderColor);
-    background: #1D1D1D;
+    background: var(--feds-background-promo);
   }
 
   .feds--dark .feds-promo--dark,

diff --git a/libs/blocks/global-navigation/global-navigation.css b/libs/blocks/global-navigation/global-navigation.css
@@ -260,15 +260,15 @@ header.global-navigation {
 }
 
 .feds-cta--primary {
-  background-color: rgb(20, 115, 230);
-  border-color: rgb(20, 115, 230);
+  background-color: rgb(59, 99, 251);
+  border-color: rgb(59, 99, 251);
   color: rgb(255, 255, 255);
 }
 
 .feds-cta--primary:hover,
 .feds-cta--primary:focus {
-  background-color: rgb(13, 102, 208);
-  border-color: rgb(13, 102, 208);
+  background-color: rgb(39, 77, 234);
+  border-color: rgb(39, 77, 234);
   color: rgb(255, 255, 255);
 }
 
@@ -675,7 +675,7 @@ header.global-navigation {
     right: 0;
     justify-content: center;
     border-bottom: unset;
-    box-shadow: 0 3px 2px rgb(142 142 142 / 30%);
+    border-bottom: 1px solid var(--feds-borderColor);
     background: var(--feds-background-nav);
     transform: translate3d(0,0,0); /* Fix Safari issues w/ position: sticky */
   }

diff --git a/libs/blocks/global-navigation/utilities/menu/menu.css b/libs/blocks/global-navigation/utilities/menu/menu.css
@@ -165,7 +165,7 @@
     flex-direction: column;
     width: 100%;
     border: 1px solid var(--feds-borderColor);
-    background: var(--feds-background-nav);
+    background: var(--feds-background-promo);
     white-space: normal;
     box-sizing: content-box;
   }
@@ -223,8 +223,8 @@
     width: 100%;
     display: flex;
     justify-content: center;
-    border-top: solid 1px #f3f3f3;
-    background-color: #fff;
+    border-top: solid 1px var(--feds-borderColor);
+    background-color: var(--feds-background-nav);
   }
 
   .feds-crossCloudMenu {

diff --git a/libs/blocks/gnav/gnav.css b/libs/blocks/gnav/gnav.css
@@ -106,14 +106,17 @@ header button.gnav-toggle {
 header .gnav-wrapper a.gnav-brand {
   width: 56px;
   grid-area: header;
-  justify-self: center;
   display: flex;
-  justify-content: center;
   align-items: center;
   color: #eb1000;
   font-size: 16px;
   line-height: 16px;
   font-weight: 700;
+  margin-left: 56px;
+}
+
+header .gnav-wrapper a.gnav-brand.brand-image-only {
+  width: auto;
 }
 
 header .gnav-wrapper a.gnav-brand.light {
@@ -125,6 +128,12 @@ header a.gnav-brand img {
   width: 27px;
 }
 
+header a.gnav-brand.brand-image-only svg,
+header a.gnav-brand.brand-image-only img {
+  width: auto;
+  height: 36px;
+}
+
 header span.gnav-brand-title {
   display: none;
 }
@@ -928,6 +937,7 @@ header .app-launcher {
     width: unset;
     grid-area: brand;
     padding-right: 20px;
+    margin-left: auto;
   }
 
   .gnav-wrapper span.gnav-brand-title {

diff --git a/libs/blocks/gnav/gnav.js b/libs/blocks/gnav/gnav.js
@@ -15,6 +15,7 @@ import {
 
 const COMPANY_IMG = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 133.46 118.11"><defs><style>.cls-1{fill:#eb1000;}</style></defs><polygon class="cls-1" points="84.13 0 133.46 0 133.46 118.11 84.13 0"/><polygon class="cls-1" points="49.37 0 0 0 0 118.11 49.37 0"/><polygon class="cls-1" points="66.75 43.53 98.18 118.11 77.58 118.11 68.18 94.36 45.18 94.36 66.75 43.53"/></svg>';
 const BRAND_IMG = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 234"><defs><style>.cls-1{fill:#eb1000;}.cls-2{fill:#fff;}</style></defs><rect class="cls-1" width="240" height="234" rx="42.5"/><path id="_256" data-name="256" class="cls-2" d="M186.617,175.95037H158.11058a6.24325,6.24325,0,0,1-5.84652-3.76911L121.31715,99.82211a1.36371,1.36371,0,0,0-2.61145-.034l-19.286,45.94252A1.63479,1.63479,0,0,0,100.92626,148h21.1992a3.26957,3.26957,0,0,1,3.01052,1.99409l9.2814,20.65452a3.81249,3.81249,0,0,1-3.5078,5.30176H53.734a3.51828,3.51828,0,0,1-3.2129-4.90437L99.61068,54.14376A6.639,6.639,0,0,1,105.843,50h28.31354a6.6281,6.6281,0,0,1,6.23289,4.14376L189.81885,171.046A3.51717,3.51717,0,0,1,186.617,175.95037Z"/></svg>';
+const BRAND_LOGO_AS_TEXT = '<svg xmlns="http://www.w3.org/2000/svg" id="Layer_1" viewBox="0 0 64.57 35"><defs><style>.cls-1{fill: #eb1000;}</style></defs><path class="cls-1" d="M6.27,10.22h4.39l6.2,14.94h-4.64l-3.92-9.92-2.59,6.51h3.08l1.23,3.41H0l6.27-14.94ZM22.03,13.32c.45,0,.94.04,1.43.16v-3.7h3.88v14.72c-.89.4-2.81.89-4.73.89-3.48,0-6.47-1.98-6.47-5.93s2.88-6.13,5.89-6.13ZM22.52,22.19c.36,0,.65-.07.94-.16v-5.42c-.29-.11-.58-.16-.96-.16-1.27,0-2.45.94-2.45,2.92s1.2,2.81,2.47,2.81ZM34.25,13.32c3.23,0,5.98,2.18,5.98,6.02s-2.74,6.02-5.98,6.02-6-2.18-6-6.02,2.72-6.02,6-6.02ZM34.25,22.13c1.11,0,2.14-.89,2.14-2.79s-1.03-2.79-2.14-2.79-2.12.89-2.12,2.79.96,2.79,2.12,2.79ZM41.16,9.78h3.9v3.7c.47-.09.96-.16,1.45-.16,3.03,0,5.84,1.98,5.84,5.86,0,4.1-2.99,6.18-6.53,6.18-1.52,0-3.46-.31-4.66-.87v-14.72ZM45.91,22.17c1.34,0,2.56-.96,2.56-2.94,0-1.85-1.2-2.72-2.5-2.72-.36,0-.65.04-.91.16v5.35c.22.09.51.16.85.16ZM58.97,13.32c2.92,0,5.6,1.87,5.6,5.64,0,.51-.02,1-.09,1.49h-7.27c.4,1.32,1.56,1.94,3.01,1.94,1.18,0,2.27-.29,3.5-.82v2.97c-1.14.58-2.5.82-3.9.82-3.7,0-6.58-2.23-6.58-6.02s2.61-6.02,5.73-6.02ZM60.93,18.02c-.2-1.27-1.05-1.78-1.92-1.78s-1.58.54-1.87,1.78h3.79Z"/></svg>';
 const SEARCH_ICON = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" focusable="false"><path d="M14 2A8 8 0 0 0 7.4 14.5L2.4 19.4a1.5 1.5 0 0 0 2.1 2.1L9.5 16.6A8 8 0 1 0 14 2Zm0 14.1A6.1 6.1 0 1 1 20.1 10 6.1 6.1 0 0 1 14 16.1Z"></path></svg>';
 const SEARCH_DEBOUNCE_MS = 300;
 export const IS_OPEN = 'is-open';
@@ -144,6 +145,7 @@ class Gnav {
   decorateBrand = () => {
     const brandBlock = this.body.querySelector('[class^="gnav-brand"]');
     if (!brandBlock) return null;
+    const isBrandImage = brandBlock.matches('.brand-image-only');
     const brandLinks = [...brandBlock.querySelectorAll('a')];
     const brand = brandLinks.pop();
     const brandTitle = brand.textContent;
@@ -157,10 +159,11 @@ class Gnav {
         decorateSVG(brandLinks[0]);
         brand.insertAdjacentElement('afterbegin', brandBlock.querySelector('img'));
       } else {
-        brand.insertAdjacentHTML('afterbegin', BRAND_IMG);
+        const DEFAULT_IMAGE = isBrandImage ? BRAND_LOGO_AS_TEXT : BRAND_IMG;
+        brand.insertAdjacentHTML('afterbegin', DEFAULT_IMAGE);
       }
     }
-    brand.append(title);
+    if (!isBrandImage) brand.append(title);
     return brand;
   };
 

diff --git a/libs/blocks/tabs/tabs.js b/libs/blocks/tabs/tabs.js
@@ -254,7 +254,6 @@ const init = (block) => {
         id: `tab-panel-${tabId}-${tabName}`,
         role: 'tabpanel',
         class: 'tabpanel',
-        tabindex: '0',
         'aria-labelledby': `tab-${tabId}-${tabName}`,
         'data-block-id': `tabs-${tabId}`,
       };

diff --git a/libs/deps/caas.css b/libs/deps/caas.css