Merge branch 'adobecom:main' into main

.github/pull_request_template.md

@@ -3,5 +3,5 @@
 Resolves: [MWPW-NUMBER](https://jira.corp.adobe.com/browse/MWPW-NUMBER)
 
 **Test URLs:**
-- Before: https://main--cc--adobecom.hlx.page/?martech=off
-- After: https://<branch>--cc--adobecom.hlx.page/?martech=off
+- Before: https://main--cc--adobecom.hlx.live/?martech=off
+- After: https://<branch>--cc--adobecom.hlx.live/?martech=off

.kodiak/config.yaml

@@ -0,0 +1,31 @@
+version: 1.0
+
+snow:
+  - id: 545562 # Milo CC
+
+notifications:
+  jira:
+    default:
+      project: MWPW # Mandatory
+      filters:
+        include:
+          risk_rating: R5
+      fields:
+        assignee:
+          name: sumanh
+        customfield_11800: MWPW-140779 #epic link
+        customfield_12900: 
+          value: Brahmos
+        watchers:
+          - casalino
+          - jmichnow
+          - mauchley
+          - saljain
+          - mathuria
+          - dstrong
+        labels:
+          - "OriginatingProcess=Kodiak"
+          - "security"
+          - "kodiak-ticket"
+        components:
+          - name: "DevOps Security" 

CODEOWNERS

@@ -1 +1 @@
-* @salonijain3 @aishwaryamathuria @Ruchika4 @amitbikram @raga-adbe-gh
+* @adobecom/cc-code-owners

README.md

@@ -1,6 +1,9 @@
 # CC x Milo
 The Franklin based project for creative cloud pages on www.adobe.com. Based off of milo-college.
 
+## Code merge process
+https://github.com/adobecom/cc/wiki
+
 ## Developing
 1. Install the [AEM CLI](https://github.com/adobe/helix-cli): `sudo npm install -g @adobe/aem-cli`
 2. Run `aem up` this repo's folder. (opens your browser at `http://localhost:3000`)

codecov.yaml

@@ -0,0 +1,10 @@
+coverage:
+  status: 
+    patch:
+      default:
+        target: 100%
+        threshold: 0.1%
+    project:
+      default:
+        target: auto
+        threshold: 0.1%

creativecloud/blocks/interactive-marquee/interactive-marquee.js

@@ -52,14 +52,14 @@ function interactiveInit(el, decorateButtons, decorateBlockBg, createTag) {
   if (media) {
     const interactiveBox = createTag('div', { class: 'interactive-container' });
     mediaElements.forEach((mediaDiv) => {
-      mediaDiv.classList.add('media');
+      mediaDiv.classList.add('asset');
       interactiveBox.appendChild(mediaDiv);
     });
     foreground.appendChild(interactiveBox);
   }
 
   const firstDivInForeground = foreground.querySelector(':scope > div');
-  if (firstDivInForeground?.classList.contains('media')) el.classList.add('row-reversed');
+  if (firstDivInForeground?.classList.contains('asset')) el.classList.add('row-reversed');
 
   decorateButtons(text, 'button-xl');
   decorateText(text, createTag);

creativecloud/blocks/interactive-marquee/milo-marquee.css

@@ -24,7 +24,7 @@
   border: 4px;
 }
 
-.interactive-marquee .media {
+.interactive-marquee .asset {
   max-width: 300px;
   position: relative;
   padding: 0;
@@ -131,7 +131,7 @@
     width: 569px;
   }
 
-  .interactive-marquee .media {
+  .interactive-marquee .asset {
     max-width: 569px;
     top: 35px;
   }
@@ -175,7 +175,7 @@
     margin: 0;
   }
 
-  .interactive-marquee .media {
+  .interactive-marquee .asset {
     top: 91px;
     margin: 0 auto;
   }

creativecloud/features/firefly/firefly-interactive.css

@@ -39,12 +39,12 @@
   cursor: pointer;
 }
 
-.interactive-marquee.firefly .media {
+.interactive-marquee.firefly .asset {
   top: 72px;
 }
 
-.interactive-marquee.firefly .media picture img,
-.interactive-marquee.firefly .media video {
+.interactive-marquee.firefly .asset picture img,
+.interactive-marquee.firefly .asset video {
   border-radius: 16px;
 }
 
@@ -95,7 +95,7 @@
     height: 440px;
   }
 
-  .interactive-marquee.firefly .media {
+  .interactive-marquee.firefly .asset {
     top: 24px;
   }
 
@@ -176,8 +176,6 @@
 
 @media screen and (max-width: 1799px) and (min-width: 1650px) {
   .firefly-selectortray {
-    top: 144px;
-    position: absolute;
     right: -85px;
   }
 
@@ -189,8 +187,6 @@
 
 @media screen and (max-width: 1649px) and (min-width: 1438px) {
   .firefly-selectortray {
-    top: 144px;
-    position: absolute;
     right: -35px;
   }
 
@@ -202,8 +198,6 @@
 
 @media screen and (max-width: 1437px) and (min-width: 1200px) {
   .firefly-selectortray {
-    top: 144px;
-    position: absolute;
     right: 5px;
   }
 

creativecloud/features/firefly/firefly-interactive.js

@@ -109,7 +109,7 @@ export default async function setInteractiveFirefly(el) {
   const interactiveElemMode = el.classList.contains('light') ? 'dark' : 'light';
   const buttons = el.querySelectorAll('.con-button');
   [...buttons].forEach((button) => { if (button.innerText.includes('Firefly')) button.setAttribute('daa-ll', 'getfirefly'); });
-  const media = el.querySelector('.media');
+  const media = el.querySelector('.asset');
   const allP = media.querySelectorAll('p:not(:empty)');
   const allAnchorTag = media.querySelectorAll('a');
   // Get InteractiveSelection Value

creativecloud/features/genfill/genfill-interactive.css

@@ -12,7 +12,7 @@
   display: none;
 }
 
-.genfill .media a {
+.genfill .asset a {
   cursor: pointer;
   position: absolute;
   top: 0;
@@ -35,6 +35,7 @@
   margin: 40px 0 16px -20px;
   top: -90px;
   color: var(--color-white);
+  font-weight: 700;
 }
 
 .enticement-text.light {

creativecloud/features/genfill/genfill-interactive.js

@@ -8,7 +8,7 @@ async function addEnticement(container, enticement, mode) {
   entcmtEl.classList.add('enticement');
   const viewports = ['tablet', 'desktop'];
   viewports.forEach((v) => {
-    const mDiv = container.querySelector(`.media.${v}-only`);
+    const mDiv = container.querySelector(`.asset.${v}-only`);
     mDiv.insertBefore(entcmtEl.cloneNode(true), mDiv.firstElementChild);
   });
 }
@@ -51,7 +51,7 @@ function startAutocycle(a, autoCycleConfig, viewport, deviceConfig, interval, hT
 }
 
 function processMedia(ic, miloUtil, autoCycleConfig, deviceConfig, v, hText) {
-  const media = miloUtil.createTag('div', { class: `media ${v}-only` });
+  const media = miloUtil.createTag('div', { class: `asset ${v}-only` });
   const a = miloUtil.createTag('a', { class: 'genfill-link' });
   const img = miloUtil.createTag('img', { class: 'genfill-image' });
   const src = deviceConfig[v].srcList[0];
@@ -84,7 +84,7 @@ export default async function decorateGenfill(el, miloUtil) {
   const heading = ic.closest('.foreground').querySelector('h1, h2, h3, h4, h5, h6');
   const hText = heading.id
     .split('-').map((w) => w.charAt(0).toUpperCase() + w.slice(1)).join('');
-  const allP = ic.querySelectorAll('.media:first-child p');
+  const allP = ic.querySelectorAll('.asset:first-child p');
   const pMetadata = [...allP].filter((p) => !p.querySelector('picture'));
   const [enticement, timer = null] = [...pMetadata];
   enticement.classList.add('enticement-detail');
@@ -102,7 +102,7 @@ export default async function decorateGenfill(el, miloUtil) {
     tablet: { srcList: [], attrList: [], index: 0 },
     desktop: { srcList: [], attrList: [], index: 0 },
   };
-  const mediaElements = currentDom.querySelectorAll('.media');
+  const mediaElements = currentDom.querySelectorAll('.asset');
   viewports.forEach((v, vi) => {
     const media = mediaElements[vi]
       ? mediaElements[vi]

creativecloud/features/interactive-elements/interactive-elements.css

@@ -57,6 +57,7 @@
   margin: 40px 0 16px -20px;
   top: -90px;
   color: var(--color-white);
+  font-weight: 700;
 }
 
 .enticement-text.light {

creativecloud/features/interactive-elements/interactive-elements.js

@@ -40,7 +40,7 @@ export async function createEnticement(enticementDetail, mode) {
   const svgImage = createTag('img', { class: 'enticement-arrow', alt: '' });
   let arrowText;
   [arrowText, svgImage.src] = enticementDetail.split('|');
-  const enticementText = createTag('h2', { class: 'enticement-text' }, arrowText.trim());
+  const enticementText = createTag('p', { class: 'enticement-text' }, arrowText.trim());
   enticementDiv.append(enticementText, svgImage);
   if (mode === 'light') enticementText.classList.add('light');
   return enticementDiv;

creativecloud/scripts/utils.js

@@ -45,7 +45,7 @@ export const [setLibs, getLibs] = (() => {
 
 const miloLibs = setLibs('/libs');
 
-const { createTag, localizeLink } = await import(`${miloLibs}/utils/utils.js`);
+const { createTag, localizeLink, getConfig, loadStyle } = await import(`${miloLibs}/utils/utils.js`);
 export { createTag, localizeLink };
 
 function getDecorateAreaFn() {
@@ -58,13 +58,25 @@ function getDecorateAreaFn() {
     if (lcpImg) lcpImgSet = true;
   };
 
+  function replaceDotMedia(area = document) {
+    const currUrl = new URL(window.location);
+    const pathSeg = currUrl.pathname.split('/').length;
+    if (pathSeg >= 3) return;
+    const resetAttributeBase = (tag, attr) => {
+      area.querySelectorAll(`${tag}[${attr}^="./media_"]`).forEach((el) => {
+        el[attr] = `${new URL(`${getConfig().contentRoot}${el.getAttribute(attr).substring(1)}`, window.location).href}`;
+      });
+    };
+    resetAttributeBase('img', 'src');
+    resetAttributeBase('source', 'srcset');
+  }
+
   async function loadLCPImage(area = document, { fragmentLink = null } = {}) {
     const firstBlock = area.querySelector('body > main > div > div');
     let fgDivs = null;
     switch (true) {
       case firstBlock?.classList.contains('changebg'): {
         firstBlock.querySelector(':scope > div:nth-child(1)').querySelectorAll('img').forEach(eagerLoad);
-        const { getConfig } = await import(`${getLibs()}/utils/utils.js`);
         import(`${getConfig().codeRoot}/deps/interactive-marquee-changebg/changeBgMarquee.js`);
         break;
       }
@@ -75,6 +87,7 @@ function getDecorateAreaFn() {
         firstBlock.querySelector(':scope > div:nth-child(1)').querySelectorAll('img').forEach(eagerLoad);
         fgDivs = firstBlock.querySelector(':scope > div:nth-child(2)').querySelectorAll('div:not(:first-child)');
         fgDivs.forEach((d) => eagerLoad(d.querySelector('img')));
+        if (!firstBlock.classList.contains('changebg')) loadStyle('/creativecloud/blocks/interactive-marquee/milo-marquee.css');
         break;
       case !!fragmentLink:
         if (window.document.querySelector('a.fragment') === fragmentLink && !window.document.querySelector('img[loading="eager"]')) {
@@ -88,6 +101,7 @@ function getDecorateAreaFn() {
   }
 
   return (area, options) => {
+    replaceDotMedia();
     if (!lcpImgSet) loadLCPImage(area, options);
   };
 }

creativecloud/sitemap-index.xml

@@ -75,9 +75,6 @@
   <sitemap>
     <loc>https://www.adobe.com/cl/cc-shared/assets/sitemap.xml</loc>
   </sitemap>
-  <sitemap>
-    <loc>https://www.adobe.com/cy_en/cc-shared/assets/sitemap.xml</loc>
-  </sitemap>
   <sitemap>
     <loc>https://www.adobe.com/gr_en/cc-shared/assets/sitemap.xml</loc>
   </sitemap>
@@ -111,9 +108,6 @@
   <sitemap>
     <loc>https://www.adobe.com/lu_en/cc-shared/assets/sitemap.xml</loc>
   </sitemap>
-  <sitemap>
-    <loc>https://www.adobe.com/mt/cc-shared/assets/sitemap.xml</loc>
-  </sitemap>
   <sitemap>
     <loc>https://www.adobe.com/sa_ar/cc-shared/assets/sitemap.xml</loc>
   </sitemap>