Merge branch 'main' into MWPW-136866-main

adobecom · Jan 15, 2024 · 63f78bd · 63f78bd
2 parents 7290a28 + 0c8a1ab
commit 63f78bd
Show file tree

Hide file tree

Showing 19 changed files with 178 additions and 322 deletions.
diff --git a/libs/blocks/brick/brick.js b/libs/blocks/brick/brick.js
@@ -1,5 +1,5 @@
 import { decorateTextOverrides, decorateBlockText, decorateBlockBg, decorateIconStack, decorateButtons } from '../../utils/decorate.js';
-import { createTag } from '../../utils/utils.js';
+import { createTag, getConfig, loadStyle } from '../../utils/utils.js';
 
 const blockTypeSizes = {
   large: ['xxl', 'm', 'l'],
@@ -72,7 +72,7 @@ function decorateBricks(el) {
     decorateBlockBg(el, elems[elems.length - 2], { useHandleFocalpoint: true });
   }
   if (elems.length > 2) {
-    el.querySelector('.background').style.background = elems[0].textContent;
+    el.style.background = elems[0].textContent;
     elems[0].remove();
   }
   const foreground = elems[elems.length - 1];
@@ -90,6 +90,11 @@ function decorateBricks(el) {
 }
 
 export default async function init(el) {
+  if (el.className.includes('rounded-corners')) {
+    const { miloLibs, codeRoot } = getConfig();
+    const base = miloLibs || codeRoot;
+    loadStyle(`${base}/styles/rounded-corners.css`);
+  }
   decorateBricks(el);
   decorateTextOverrides(el);
   decorateSupplementalText(el);

diff --git a/libs/blocks/global-footer/global-footer.css b/libs/blocks/global-footer/global-footer.css
@@ -253,7 +253,7 @@
   .feds-footer-wrapper .feds-menu-content {
     flex-wrap: wrap;
     width: auto;
-    max-width: auto;
+    column-gap: 12px;
   }
 
   .feds-footer-wrapper .feds-menu-headline {
@@ -264,6 +264,21 @@
     row-gap: 15px;
   }
 
+  .feds-footer-wrapper .feds-menu-column:nth-child(-n+3):last-child {
+    flex-grow: 1;
+  }
+
+  .feds-footer-wrapper .feds-menu-column:nth-last-child(-n+3):first-child .feds-menu-section,
+  .feds-footer-wrapper .feds-menu-column:nth-child(-n+3):last-child .feds-menu-section,
+  .feds-footer-wrapper .feds-menu-column:nth-child(2):nth-last-child(2) .feds-menu-section {
+    width: fit-content;
+  }
+
+  .feds-footer-wrapper .feds-menu-column:nth-last-child(-n+3):first-child,
+  .feds-footer-wrapper .feds-menu-column:nth-child(2):nth-last-child(2) {
+    min-width: 20%;
+  }
+
   /* Featured products */
   .feds-featuredProducts {
     display: flex;

diff --git a/libs/blocks/global-footer/icons.svg b/libs/blocks/global-footer/icons.svg
diff --git a/libs/blocks/media/media.js b/libs/blocks/media/media.js
@@ -20,10 +20,9 @@ function decorateAvatar(el) {
 }
 
 export default function init(el) {
-  const { miloLibs, codeRoot } = getConfig();
-  const regex = /rounded-corners/g;
-  const base = miloLibs || codeRoot;
-  if ([...el.classList].some((c) => regex.test(c))) {
+  if (el.className.includes('rounded-corners')) {
+    const { miloLibs, codeRoot } = getConfig();
+    const base = miloLibs || codeRoot;
     loadStyle(`${base}/styles/rounded-corners.css`);
   }
   el.classList.add('con-block');

diff --git a/libs/blocks/quiz-results/quiz-results.css b/libs/blocks/quiz-results/quiz-results.css
@@ -20,7 +20,7 @@
   justify-content: center;
   width: 100%;
   max-width: 100%;
-  grid-template-columns: repeat(auto-fit, 378px);
+  grid-template-columns: repeat(auto-fit, 300px);
   gap: 32px;
   padding-bottom: 32px;
 }
@@ -48,6 +48,10 @@
   .quiz-results .big-desktop-up {
     display: none;
   }
+
+  .quiz-results .quiz-card-list {
+    grid-template-columns: repeat(auto-fit, 378px);
+  }
 }
 
 @media screen and (min-width: 1200px) {

diff --git a/libs/blocks/quiz/utils.js b/libs/blocks/quiz/utils.js
@@ -67,8 +67,8 @@ export const defaultRedirect = (url) => {
 };
 
 export const handleResultFlow = async (answers = [], redirectFunc = defaultRedirect) => {
-  const { destinationPage, primaryProductCodes } = await findAndStoreResultData(answers);
-  const redirectUrl = getRedirectUrl(destinationPage, primaryProductCodes, answers);
+  const { destinationPage } = await findAndStoreResultData(answers);
+  const redirectUrl = getRedirectUrl(destinationPage);
   redirectFunc(redirectUrl);
 };
 
@@ -123,6 +123,13 @@ export const storeResultInLocalStorage = (
   const structureFragsArray = structureFrags?.split(',');
   const nestedFragsPrimaryArray = nestedFragsPrimary?.split(',');
   const nestedFragsSecondaryArray = nestedFragsSecondary?.split(',');
+  const analyticsConfig = {
+    answers,
+    umbrellaProduct,
+    primaryProducts,
+    analyticsType,
+    analyticsQuiz,
+  };
   const resultToDelegate = {
     primaryProducts,
     secondaryProducts: secondaryProductCodes,
@@ -141,7 +148,7 @@ export const storeResultInLocalStorage = (
       secondaryProductCodes,
       umbrellaProduct,
     ),
-    pageloadHash: getAnalyticsDataForLocalStorage(answers),
+    pageloadHash: getAnalyticsDataForLocalStorage(analyticsConfig),
   };
   localStorage.setItem(quizKey, JSON.stringify(resultToDelegate));
   return resultToDelegate;
@@ -161,7 +168,7 @@ export const structuredFragments = (
         if (umbrellaProduct && row.product === umbrellaProduct) {
           structureFragments.push(row[fragment]);
         }
-      } else if (primaryProducts.length > 0 && primaryProducts.includes(row.product)
+      } else if (primaryProducts?.length > 0 && primaryProducts.includes(row.product)
       && row[fragment]) {
         structureFragments.push(row[fragment]);
       }
@@ -232,9 +239,9 @@ const getNestedFragments = (resultResources, productCodes, fragKey) => {
   return fragArray;
 };
 
-export const getRedirectUrl = (destinationPage, primaryProducts) => {
+export const getRedirectUrl = (destinationPage) => {
   const separator = destinationPage.includes('?') ? '&' : '?';
-  return `${destinationPage}${separator}primary=${primaryProducts}&quizKey=${quizKey}`;
+  return `${destinationPage}${separator}quizKey=${quizKey}`;
 };
 
 export const parseResultData = async (answers) => {
@@ -429,13 +436,31 @@ export const getAnalyticsDataForBtn = (selectedQuestion, selectedCards) => {
   return '';
 };
 
-export const getAnalyticsDataForLocalStorage = (answers) => {
+export const getAnalyticsDataForLocalStorage = (config) => {
+  const {
+    answers = [],
+    umbrellaProduct = '',
+    primaryProducts = [],
+    // eslint-disable-next-line no-shadow
+    analyticsType = '',
+    // eslint-disable-next-line no-shadow
+    analyticsQuiz = '',
+  } = config;
+
+  let formattedResultString = '';
   let formattedAnswerString = '';
-  answers.forEach((answer) => {
+  if (umbrellaProduct) {
+    formattedResultString = umbrellaProduct;
+  } else {
+    primaryProducts?.forEach((product) => {
+      formattedResultString = formattedResultString ? `${formattedResultString}|${product}` : product;
+    });
+  }
+  answers?.forEach((answer) => {
     const eachAnswer = `${answer[0]}/${answer[1].join('/')}`;
-    formattedAnswerString = formattedAnswerString === '' ? eachAnswer : formattedAnswerString.concat('|', eachAnswer);
+    formattedAnswerString = formattedAnswerString ? `${formattedAnswerString}|${eachAnswer}` : eachAnswer;
   });
-  const analyticsHash = `type=${analyticsType}&quiz=${analyticsQuiz}&selectedOptions=${formattedAnswerString}`;
+  const analyticsHash = `type=${analyticsType}&quiz=${analyticsQuiz}&result=${formattedResultString}&selectedOptions=${formattedAnswerString}`;
   return analyticsHash;
 };
 

diff --git a/libs/blocks/tabs/tabs.css b/libs/blocks/tabs/tabs.css
@@ -12,7 +12,6 @@
   --tabs-pill-bg-color-hover: #dadada;
   --tabs-pill-bg-color-active: #c6c6c6;
   --tabs-pill-text-color: #131313;
-  --tabs-paddle-bs-color: #0000001a;
 }
 
 :root .dark {
@@ -26,7 +25,6 @@
   --tabs-pill-bg-color-hover: #666;
   --tabs-pill-bg-color-active: #444;
   --tabs-pill-text-color: #fff;
-  --tabs-paddle-bs-color: #ffffff1a;
 }
 
 .tabs {
@@ -61,7 +59,6 @@
   box-shadow: 0 -1px 0 inset var(--tabs-border-color);
   display: flex;
   z-index: 2;
-  margin: 0 var(--spacing-m);
 
   /* ScrollProps - If content exceeds height of container, overflow! */
   overflow: auto;
@@ -84,11 +81,12 @@
 }
 
 .tabs.center .tab-headline {
-  text-align: center;
+    text-align: center;
 }
 
 .tabs div[role="tablist"] .tab-list-container {
   display: flex;
+  padding: 0 8.3%;
   width: var(--grid-container-width);
   margin: 0 auto;
   box-sizing: content-box;
@@ -103,6 +101,7 @@
 
 .tabs.center div[role="tablist"] .tab-list-container {
   width: auto;
+  margin: 0;
 }
 
 .tabs .tab-content {
@@ -265,63 +264,6 @@
   height: 24px;
 }
 
-.tabs .tab-paddles {
-  position: relative;
-  z-index: 3;
-}
-
-.tabs .tab-paddles .paddle {
-  position: absolute;
-  width: 32px;
-  height: 48px;
-  bottom: 0;
-  background: var(--tabs-active-bg-color);
-  border: 0;
-  padding: 14px 0 12px;
-  display: flex;
-  align-items: center;
-}
-
-.tabs .tab-paddles .paddle:hover {
-  cursor: pointer;
-}
-
-.tabs .tab-paddles .paddle:disabled {
-  box-shadow: 0 -1px 0 inset var(--tabs-border-color);
-  background: var(--tabs-list-bg-gradient);
-}
-
-.tabs .tab-paddles .paddle-left {
-  box-shadow: 0 -1px 0 inset var(--tabs-border-color), 4px 0 4px -2px var(--tabs-paddle-bs-color);
-  left: 0;
-}
-
-.tabs .tab-paddles .paddle-right {
-  box-shadow: 0 -1px 0 inset var(--tabs-border-color), -4px 0 4px -2px var(--tabs-paddle-bs-color);
-  right: 0;
-}
-
-.tabs .tab-paddles .paddle svg {
-  opacity: 1;
-  width: 8px;
-  height: 14px;
-  margin: 0 auto;
-  transition: opacity 150ms ease;
-  color: var(--tabs-text-color);
-}
-
-.tabs .tab-paddles .paddle-left svg {
-  transform: rotate(180deg);
-}
-
-.tabs .tab-paddles .paddle:hover svg {
-  color: var(--tabs-active-text-color);
-}
-
-.tabs .tab-paddles .paddle:disabled svg {
-  opacity: 0;
-}
-
 /* Section Metadata */
 .tabs-background-transparent .tabs,
 .tabs-background-transparent .tabs div[role="tablist"],
@@ -348,12 +290,4 @@
     padding-top: 18px;
     padding-bottom: 18px;
   }
-
-  .tabs .tab-paddles .paddle {
-    height: 62px;
-  }
-
-  .tabs .tab-paddles .paddle svg {
-    top: 24px;
-  }
 }