[Release] Stage to Main

libs/blocks/adobetv/adobetv.js

@@ -7,8 +7,8 @@ const loadAdobeTv = (a) => {
   const bgBlocks = ['aside', 'marquee', 'hero-marquee'];
   if (a.href.includes('.mp4') && bgBlocks.some((b) => a.closest(`.${b}`))) {
     a.classList.add('hide');
-    const { href, hash } = a;
-    const attrs = getVideoAttrs(hash || 'autoplay');
+    const { href, hash, dataset } = a;
+    const attrs = getVideoAttrs(hash || 'autoplay', dataset);
     const video = `<video ${attrs}>
           <source src="${href}" type="video/mp4" />
         </video>`;

libs/blocks/fragment/fragment.js

@@ -32,12 +32,6 @@ const updateFragMap = (fragment, a, href) => {
   }
 };
 
-const setManifestIdOnChildren = (sections, manifestId) => {
-  [...sections[0].children].forEach(
-    (child) => (child.dataset.manifestId = manifestId),
-  );
-};
-
 const insertInlineFrag = (sections, a, relHref) => {
   // Inline fragments only support one section, other sections are ignored
   const fragChildren = [...sections[0].children];
@@ -79,7 +73,7 @@ export default async function init(a) {
   }
 
   const path = new URL(a.href).pathname;
-  if (mep?.fragments?.[path] && mep) {
+  if (mep?.fragments?.[path]) {
     relHref = mep.handleFragmentCommand(mep?.fragments[path], a);
     if (!relHref) return;
   }
@@ -122,15 +116,10 @@ export default async function init(a) {
   }
 
   updateFragMap(fragment, a, relHref);
-
-  if (a.dataset.manifestId) {
-    if (inline) {
-      setManifestIdOnChildren(sections, a.dataset.manifestId);
-    } else {
-      fragment.dataset.manifestId = a.dataset.manifestId;
-    }
+  if (a.dataset.manifestId || a.dataset.adobeTargetTestid) {
+    const { updateFragDataProps } = await import('../../features/personalization/personalization.js');
+    updateFragDataProps(a, inline, sections, fragment);
   }
-
   if (inline) {
     insertInlineFrag(sections, a, relHref);
   } else {

libs/blocks/global-navigation/global-navigation.js

@@ -33,7 +33,7 @@ import {
   toFragment,
   trigger,
   yieldToMain,
-  addMepHighlight,
+  addMepHighlightAndTargetId,
 } from './utilities/utilities.js';
 
 import { replaceKey, replaceKeyArray } from '../../features/placeholders.js';
@@ -919,14 +919,14 @@ class Gnav {
         observer.observe(dropdownTrigger, { attributeFilter: ['aria-expanded'] });
 
         delayDropdownDecoration({ template: triggerTemplate });
-        return addMepHighlight(triggerTemplate, item);
+        return addMepHighlightAndTargetId(triggerTemplate, item);
       }
       case 'primaryCta':
       case 'secondaryCta':
         // Remove its 'em' or 'strong' wrapper
         item.parentElement.replaceWith(item);
 
-        return addMepHighlight(toFragment`<div class="feds-navItem feds-navItem--centered">
+        return addMepHighlightAndTargetId(toFragment`<div class="feds-navItem feds-navItem--centered">
             ${decorateCta({ elem: item, type: itemType, index: index + 1 })}
           </div>`, item);
       case 'link': {
@@ -945,15 +945,15 @@ class Gnav {
           <div class="feds-navItem${activeModifier}">
             ${linkElem}
           </div>`;
-        return addMepHighlight(linkTemplate, item);
+        return addMepHighlightAndTargetId(linkTemplate, item);
       }
       case 'text':
-        return addMepHighlight(toFragment`<div class="feds-navItem feds-navItem--centered">
+        return addMepHighlightAndTargetId(toFragment`<div class="feds-navItem feds-navItem--centered">
             ${item.textContent}
           </div>`, item);
       default:
         /* c8 ignore next 3 */
-        return addMepHighlight(toFragment`<div class="feds-navItem feds-navItem--centered">
+        return addMepHighlightAndTargetId(toFragment`<div class="feds-navItem feds-navItem--centered">
             ${item}
           </div>`, item);
     }

libs/blocks/global-navigation/utilities/menu/menu.js

@@ -11,7 +11,7 @@ import {
   toFragment,
   trigger,
   yieldToMain,
-  addMepHighlight,
+  addMepHighlightAndTargetId,
 } from '../utilities.js';
 
 const decorateHeadline = (elem, index) => {
@@ -317,7 +317,7 @@ const decorateMenu = (config) => logErrorFor(async () => {
           ${menuContent}
         </div>
       </div>`;
-    addMepHighlight(menuTemplate, content);
+    addMepHighlightAndTargetId(menuTemplate, content);
 
     decorateCrossCloudMenu(menuTemplate);
 

libs/blocks/global-navigation/utilities/utilities.js

@@ -47,13 +47,12 @@ export const logErrorFor = async (fn, message, tags) => {
   }
 };
 
-export function addMepHighlight(el, source) {
-  let { manifestId } = source.dataset;
-  if (!manifestId) {
-    const closestManifestId = source?.closest('[data-manifest-id]');
-    if (closestManifestId) manifestId = closestManifestId.dataset.manifestId;
-  }
+export function addMepHighlightAndTargetId(el, source) {
+  let { manifestId, targetManifestId } = source.dataset;
+  manifestId ??= source?.closest('[data-manifest-id]')?.dataset?.manifestId;
+  targetManifestId ??= source?.closest('[data-adobe-target-testid]')?.dataset?.adobeTargetTestid;
   if (manifestId) el.dataset.manifestId = manifestId;
+  if (targetManifestId) el.dataset.adobeTargetTestid = targetManifestId;
   return el;
 }
 
@@ -310,6 +309,7 @@ export async function fetchAndProcessPlainHtml({ url, shouldDecorateLinks = true
   const text = await res.text();
   const { body } = new DOMParser().parseFromString(text, 'text/html');
   if (mepFragment?.manifestId) body.dataset.manifestId = mepFragment.manifestId;
+  if (mepFragment?.targetManifestId) body.dataset.adobeTargetTestid = mepFragment.targetManifestId;
   const commands = mepGnav?.commands;
   if (commands?.length) {
     const { handleCommands, deleteMarkedEls } = await import('../../../features/personalization/personalization.js');

libs/blocks/merch-card-collection/merch-card-collection.js

@@ -27,8 +27,9 @@ const LITERAL_SLOTS = [
 // allows improve TBT by returning control to the main thread.
 // eslint-disable-next-line no-promise-executor-return
 const makePause = async (timeout = 0) => new Promise((resolve) => setTimeout(resolve, timeout));
-
 const BLOCK_NAME = 'merch-card-collection';
+const PROD_INDEX = 'query-index-cards.json';
+const PREVIEW_INDEX = 'query-index-cards-preview.json';
 
 const fail = (el, err = '') => {
   window.lana?.log(`Failed to initialize merch cards: ${err}`);
@@ -131,11 +132,14 @@ export function parsePreferences(elements) {
 /** Retrieve cards from query-index  */
 async function fetchCardsData(config, type, el) {
   let cardsData;
-  const endpointElement = el.querySelector('a[href*="query-index-cards.json"]');
+  const usePreviewIndex = config.env.name === 'stage' && !window.location.host.includes('.live');
+  const endpointElement = el.querySelector(`a[href*="${usePreviewIndex ? PREVIEW_INDEX : PROD_INDEX}"]`)
+                            ?? el.querySelector(`a[href*="${PROD_INDEX}"]`);
   if (!endpointElement) {
     throw new Error('No query-index endpoint provided');
   }
-  endpointElement.remove();
+  el.querySelector(`a[href*="${PROD_INDEX}"]`)?.remove();
+  el.querySelector(`a[href*="${PREVIEW_INDEX}"]`)?.remove();
   let queryIndexCardPath = localizeLink(endpointElement.getAttribute('href'), config);
   if (/\.json$/.test(queryIndexCardPath)) {
     queryIndexCardPath = `${queryIndexCardPath}?sheet=${type}`;

libs/blocks/notification/notification.css

@@ -2,6 +2,7 @@
   --min-block-size: 160px;
   --min-block-size-ribbon: 50px;
   --min-block-size-pill: 72px;
+  --margin-inline-pill-desktop: 80px;
   --margin-inline-ribbon: 30px;
   --max-inline-size-image: 75px;
   --max-inline-size-icon: 231px;
@@ -47,7 +48,8 @@
   font-weight: unset;
 }
 
-.notification [class*="heading-"] + p {
+.notification [class*="heading-"] + p,
+.notification.pill p {
   margin-block-end: var(--spacing-s);
 }
 
@@ -451,6 +453,7 @@
   .notification.max-width-10-desktop .foreground.container {
     margin-inline: var(--grid-margins-width-10);
     gap: var(--spacing-l);
+    max-inline-size: calc(var(--grid-column-width) * 10);
   }
 
   .notification.full-width .foreground.container {
@@ -521,6 +524,10 @@
     margin: 0;
   }
 
+  .notification.pill:not(.flexible) .foreground.container {
+    inline-size: calc(100% - var(--margin-inline-pill-desktop) * 2);
+  }
+
   .notification.pill.flexible .foreground.container {
     padding-inline: 0;
   }
@@ -555,6 +562,10 @@
     text-align: start;
   }
 
+  .notification.pill .copy-wrap > * {
+    max-inline-size: 100%;
+  }
+
   .notification.ribbon.space-between .foreground.container .icon-area {
     margin-inline-end: var(--spacing-s);
   }

libs/blocks/notification/notification.js

@@ -72,10 +72,10 @@ function getBlockData(el) {
 function wrapCopy(foreground) {
   const text = foreground.querySelector('.text');
   if (!text) return;
-  const heading = text?.querySelector('h1, h2, h3, h4, h5, h6');
+  const heading = text?.querySelector('h1, h2, h3, h4, h5, h6, p:not(.icon-area, .action-area)');
   const icon = heading?.previousElementSibling;
   const body = heading?.nextElementSibling?.classList.contains('action-area') ? '' : heading?.nextElementSibling;
-  const copy = createTag('div', { class: 'copy-wrap' }, [heading, body]);
+  const copy = createTag('div', { class: 'copy-wrap' }, [heading, body].filter(Boolean));
   text?.insertBefore(copy, icon?.nextSibling || text.children[0]);
 }
 
@@ -90,8 +90,12 @@ function decorateFlexible(el) {
     el.querySelector('.background'),
     el.querySelector('.foreground'),
     el.querySelector('.close'),
-  ];
+  ].filter(Boolean);
   const inner = createTag('div', { class: 'flexible-inner' }, innards);
+  if (el.style.background) {
+    inner.style.background = el.style.background;
+    el.style.removeProperty('background');
+  }
   el.appendChild(inner);
 }
 

libs/deps/mas/merch-card-collection.js

@@ -1,4 +1,4 @@
-import{html as a,LitElement as A}from"/libs/deps/lit-all.min.js";var m=class{constructor(e,t){this.key=Symbol("match-media-key"),this.matches=!1,this.host=e,this.host.addController(this),this.media=window.matchMedia(t),this.matches=this.media.matches,this.onChange=this.onChange.bind(this),e.addController(this)}hostConnected(){var e;(e=this.media)==null||e.addEventListener("change",this.onChange)}hostDisconnected(){var e;(e=this.media)==null||e.removeEventListener("change",this.onChange)}onChange(e){this.matches!==e.matches&&(this.matches=e.matches,this.host.requestUpdate(this.key,!this.matches))}};var E="hashchange";function S(r=window.location.hash){let e=[],t=r.replace(/^#/,"").split("&");for(let o of t){let[n,l=""]=o.split("=");n&&e.push([n,decodeURIComponent(l.replace(/\+/g," "))])}return Object.fromEntries(e)}function u(r){let e=new URLSearchParams(window.location.hash.slice(1));Object.entries(r).forEach(([n,l])=>{l?e.set(n,l):e.delete(n)}),e.sort();let t=e.toString();if(t===window.location.hash)return;let o=window.scrollY||document.documentElement.scrollTop;window.location.hash=t,window.scrollTo(0,o)}function T(r){let e=()=>{if(!window.location.hash.includes("="))return;let t=S(window.location.hash);r(t)};return e(),window.addEventListener(E,e),()=>{window.removeEventListener(E,e)}}var x="merch-card-collection:sort",g="merch-card-collection:showmore";var C=(r,e={})=>{r.querySelectorAll("span[data-placeholder]").forEach(t=>{let{placeholder:o}=t.dataset;t.innerText=e[o]??""})};var _="(max-width: 1199px)",y="(min-width: 768px)",b="(min-width: 1200px)";import{css as R,unsafeCSS as w}from"/libs/deps/lit-all.min.js";var N=R`
+import{html as a,LitElement as A}from"/libs/deps/lit-all.min.js";var m=class{constructor(e,t){this.key=Symbol("match-media-key"),this.matches=!1,this.host=e,this.host.addController(this),this.media=window.matchMedia(t),this.matches=this.media.matches,this.onChange=this.onChange.bind(this),e.addController(this)}hostConnected(){var e;(e=this.media)==null||e.addEventListener("change",this.onChange)}hostDisconnected(){var e;(e=this.media)==null||e.removeEventListener("change",this.onChange)}onChange(e){this.matches!==e.matches&&(this.matches=e.matches,this.host.requestUpdate(this.key,!this.matches))}};var E="hashchange";function S(r=window.location.hash){let e=[],t=r.replace(/^#/,"").split("&");for(let o of t){let[n,l=""]=o.split("=");n&&e.push([n,decodeURIComponent(l.replace(/\+/g," "))])}return Object.fromEntries(e)}function u(r){let e=new URLSearchParams(window.location.hash.slice(1));Object.entries(r).forEach(([n,l])=>{l?e.set(n,l):e.delete(n)}),e.sort();let t=e.toString();if(t===window.location.hash)return;let o=window.scrollY||document.documentElement.scrollTop;window.location.hash=t,window.scrollTo(0,o)}function T(r){let e=()=>{if(window.location.hash&&!window.location.hash.includes("="))return;let t=S(window.location.hash);r(t)};return e(),window.addEventListener(E,e),()=>{window.removeEventListener(E,e)}}var x="merch-card-collection:sort",g="merch-card-collection:showmore";var C=(r,e={})=>{r.querySelectorAll("span[data-placeholder]").forEach(t=>{let{placeholder:o}=t.dataset;t.innerText=e[o]??""})};var _="(max-width: 1199px)",y="(min-width: 768px)",b="(min-width: 1200px)";import{css as R,unsafeCSS as w}from"/libs/deps/lit-all.min.js";var N=R`
     #header,
     #resultText,
     #footer {

libs/deps/mas/merch-sidenav.js

@@ -1,4 +1,4 @@
 import{html as k,css as H,LitElement as P}from"/libs/deps/lit-all.min.js";var a=class{constructor(e,t){this.key=Symbol("match-media-key"),this.matches=!1,this.host=e,this.host.addController(this),this.media=window.matchMedia(t),this.matches=this.media.matches,this.onChange=this.onChange.bind(this),e.addController(this)}hostConnected(){var e;(e=this.media)==null||e.addEventListener("change",this.onChange)}hostDisconnected(){var e;(e=this.media)==null||e.removeEventListener("change",this.onChange)}onChange(e){this.matches!==e.matches&&(this.matches=e.matches,this.host.requestUpdate(this.key,!this.matches))}};import{css as N}from"/libs/deps/lit-all.min.js";var c=N`
     h2 {
         font-size: 11px;
         font-style: normal;
@@ -9,7 +9,7 @@
         line-height: 32px;
         color: #747474;
     }
-`;import{html as L,LitElement as D}from"/libs/deps/lit-all.min.js";var v="merch-search:change";var x="merch-sidenav:select";function d(s,e){let t;return function(){let o=this,n=arguments;clearTimeout(t),t=setTimeout(()=>s.apply(o,n),e)}}var g="hashchange";function i(s=window.location.hash){let e=[],t=s.replace(/^#/,"").split("&");for(let o of t){let[n,l=""]=o.split("=");n&&e.push([n,decodeURIComponent(l.replace(/\+/g," "))])}return Object.fromEntries(e)}function r(s,e){if(s.deeplink){let t={};t[s.deeplink]=e,A(t)}}function A(s){let e=new URLSearchParams(window.location.hash.slice(1));Object.entries(s).forEach(([n,l])=>{l?e.set(n,l):e.delete(n)}),e.sort();let t=e.toString();if(t===window.location.hash)return;let o=window.scrollY||document.documentElement.scrollTop;window.location.hash=t,window.scrollTo(0,o)}function C(s){let e=()=>{if(!window.location.hash.includes("="))return;let t=i(window.location.hash);s(t)};return e(),window.addEventListener(g,e),()=>{window.removeEventListener(g,e)}}var p=class extends D{static properties={deeplink:{type:String}};get search(){return this.querySelector("sp-search")}constructor(){super(),this.handleInput=()=>{r(this,this.search.value),this.search.value&&this.dispatchEvent(new CustomEvent(v,{bubbles:!0,composed:!0,detail:{type:"search",value:this.search.value}}))},this.handleInputDebounced=d(this.handleInput.bind(this))}connectedCallback(){super.connectedCallback(),this.search&&(this.search.addEventListener("input",this.handleInputDebounced),this.search.addEventListener("submit",this.handleInputSubmit),this.updateComplete.then(()=>{this.setStateFromURL()}),this.startDeeplink())}disconnectedCallback(){super.disconnectedCallback(),this.search.removeEventListener("input",this.handleInputDebounced),this.search.removeEventListener("submit",this.handleInputSubmit),this.stopDeeplink?.()}setStateFromURL(){let t=i()[this.deeplink];t&&(this.search.value=t)}startDeeplink(){this.stopDeeplink=C(({search:e})=>{this.search.value=e??""})}handleInputSubmit(e){e.preventDefault()}render(){return L`<slot></slot>`}};customElements.define("merch-search",p);import{html as b,LitElement as R,css as M}from"/libs/deps/lit-all.min.js";var m=class extends R{static properties={sidenavListTitle:{type:String},label:{type:String},deeplink:{type:String,attribute:"deeplink"},selectedText:{type:String,reflect:!0,attribute:"selected-text"},selectedValue:{type:String,reflect:!0,attribute:"selected-value"}};static styles=[M`
+`;import{html as L,LitElement as D}from"/libs/deps/lit-all.min.js";var v="merch-search:change";var x="merch-sidenav:select";function d(s,e){let t;return function(){let o=this,n=arguments;clearTimeout(t),t=setTimeout(()=>s.apply(o,n),e)}}var g="hashchange";function i(s=window.location.hash){let e=[],t=s.replace(/^#/,"").split("&");for(let o of t){let[n,l=""]=o.split("=");n&&e.push([n,decodeURIComponent(l.replace(/\+/g," "))])}return Object.fromEntries(e)}function r(s,e){if(s.deeplink){let t={};t[s.deeplink]=e,A(t)}}function A(s){let e=new URLSearchParams(window.location.hash.slice(1));Object.entries(s).forEach(([n,l])=>{l?e.set(n,l):e.delete(n)}),e.sort();let t=e.toString();if(t===window.location.hash)return;let o=window.scrollY||document.documentElement.scrollTop;window.location.hash=t,window.scrollTo(0,o)}function C(s){let e=()=>{if(window.location.hash&&!window.location.hash.includes("="))return;let t=i(window.location.hash);s(t)};return e(),window.addEventListener(g,e),()=>{window.removeEventListener(g,e)}}var p=class extends D{static properties={deeplink:{type:String}};get search(){return this.querySelector("sp-search")}constructor(){super(),this.handleInput=()=>{r(this,this.search.value),this.search.value&&this.dispatchEvent(new CustomEvent(v,{bubbles:!0,composed:!0,detail:{type:"search",value:this.search.value}}))},this.handleInputDebounced=d(this.handleInput.bind(this))}connectedCallback(){super.connectedCallback(),this.search&&(this.search.addEventListener("input",this.handleInputDebounced),this.search.addEventListener("submit",this.handleInputSubmit),this.updateComplete.then(()=>{this.setStateFromURL()}),this.startDeeplink())}disconnectedCallback(){super.disconnectedCallback(),this.search.removeEventListener("input",this.handleInputDebounced),this.search.removeEventListener("submit",this.handleInputSubmit),this.stopDeeplink?.()}setStateFromURL(){let t=i()[this.deeplink];t&&(this.search.value=t)}startDeeplink(){this.stopDeeplink=C(({search:e})=>{this.search.value=e??""})}handleInputSubmit(e){e.preventDefault()}render(){return L`<slot></slot>`}};customElements.define("merch-search",p);import{html as b,LitElement as R,css as M}from"/libs/deps/lit-all.min.js";var m=class extends R{static properties={sidenavListTitle:{type:String},label:{type:String},deeplink:{type:String,attribute:"deeplink"},selectedText:{type:String,reflect:!0,attribute:"selected-text"},selectedValue:{type:String,reflect:!0,attribute:"selected-value"}};static styles=[M`
             :host {
                 display: block;
                 contain: content;

libs/features/mas/web-components/src/deeplink.js

@@ -1,4 +1,4 @@
 const EVENT_HASHCHANGE = 'hashchange';
 
 /**
  * @param {*} hash string representing an URL hash
@@ -55,7 +55,7 @@
  */
 export function deeplink(callback) {
     const handler = () => {
-        if (!window.location.hash.includes('=')) return;
+        if (window.location.hash && !window.location.hash.includes('=')) return;
         const state = parseState(window.location.hash);
         callback(state);
     };

libs/features/mas/web-components/test/deeplink.test.js

@@ -1,4 +1,4 @@
 import { expect } from '@esm-bundle/chai';
 import { deeplink, pushState } from '../src/deeplink.js';
 import { delay } from '../../web-components/test/utils.js';
 
@@ -25,8 +25,8 @@
         });
         document.location.hash = 'filter=all&single_app=acrobat&types=desktop';
         await delay(1);
-        expect(events.length).to.equal(1);
-        expect(events[0]).to.deep.equal({
+        expect(events.length).to.equal(2);
+        expect(events[1]).to.deep.equal({
             filter: 'all',
             search: undefined,
             single_app: 'acrobat',
@@ -39,7 +39,7 @@
             types: 'desktop%2Cmobile',
         });
         await delay(1);
-        expect(events[1]).to.deep.equal({
+        expect(events[2]).to.deep.equal({
             filter: 'all',
             search: undefined,
             single_app: undefined,
@@ -50,7 +50,7 @@
             types: undefined,
         });
         await delay(1);
-        expect(events[3]).to.deep.equal({
+        expect(events[4]).to.deep.equal({
             filter: 'all',
             search: undefined,
             single_app: undefined,
@@ -64,7 +64,7 @@
             types: undefined,
         });
         await delay(1);
-        expect(events[3]).to.deep.equal({
+        expect(events[4]).to.deep.equal({
             filter: 'all',
             types: undefined,
             sort: undefined,
@@ -78,6 +78,6 @@
             types: 'desktop',
         });
         await delay(1);
-        expect(events.length).to.equal(6);
+        expect(events.length).to.equal(7);
     });
 });

libs/features/personalization/entitlements.js

@@ -20,6 +20,9 @@ const ENTITLEMENT_MAP = {
   '76e408f6-ab08-49f0-adb6-f9b4efcc205d': 'cc-free',
   '08216aa4-4a0f-4136-8b27-182212764a7c': 'dc-free',
   'fc2d5b34-fa75-4e80-9f23-7d4b40bcfc9b': 'cc-paid',
+  'c6927505-97b3-4655-995a-6452630fa9cb': 'fresco-any',
+  'e82be3ab-1fbc-4410-a099-af6ac6d5dffe': 'cc-paid-no-stock',
+
   // PEP segments
   '6cb0d58c-3a65-47e2-b459-c52bb158d5b6': 'lightroom-web-usage',
   'caa3de84-6336-4fa8-8db2-240fc88106cc': 'photoshop-signup-source',