[Release] Stage to Main (#2852)

libs/blocks/notification/notification.css

@@ -16,7 +16,7 @@
   --icon-size: 56px;
   --icon-size-xl: 64px;
   --pill-radius: 16px;
-  --pill-shadow: 0 3px 6px #707070;
+  --pill-shadow: 0 3px 6px #00000029;
 
   display: flex;
   inline-size: 100%;
@@ -310,11 +310,20 @@
   justify-content: flex-end;
 }
 
+.notification.flexible {
+  background: unset;
+}
+
 .notification .flexible-inner {
   inline-size: 100%;
   box-shadow: var(--pill-shadow);
 }
 
+.notification.pill.no-shadow,
+.notification.pill.no-shadow.flexible .flexible-inner {
+  box-shadow: unset;
+}
+
 .notification .foreground > :is(.tablet-up, .desktop-up) {
   display: none;
 }
@@ -328,6 +337,12 @@
   margin-block-end: var(--spacing-xxs);
 }
 
+.notification.pill.max-width-6 { max-width: 600px; }
+.notification.pill.max-width-8 { max-width: 800px; }
+.notification.pill.max-width-10 { max-width: 1000px; }
+.notification.pill.max-width-12 { max-width: 1200px; }
+.notification.pill.max-width-auto { max-width: unset; }
+
 @media screen and (min-width: 600px) {
   .notification {
     --max-inline-size-image: 188px;
@@ -468,6 +483,12 @@
     padding-inline-end: unset;
     inline-size: unset;
   }
+
+  .notification.pill.max-width-6-tablet { max-width: 600px; }
+  .notification.pill.max-width-8-tablet { max-width: 800px; }
+  .notification.pill.max-width-10-tablet { max-width: 1000px; }
+  .notification.pill.max-width-12-tablet { max-width: 1200px; }
+  .notification.pill.max-width-auto-tablet { max-width: unset; }
 }
 
 @media screen and (min-width: 1200px) {
@@ -632,4 +653,10 @@
   .notification.pill .copy-wrap p:first-child:not(:only-child) {
     margin-block-end: 0;
   }
+
+  .notification.pill.max-width-6-desktop { max-width: 600px; }
+  .notification.pill.max-width-8-desktop { max-width: 800px; }
+  .notification.pill.max-width-10-desktop { max-width: 1000px; }
+  .notification.pill.max-width-12-desktop { max-width: 1200px; }
+  .notification.pill.max-width-auto-desktop { max-width: unset; }
 }

libs/blocks/region-nav/region-nav.js

@@ -3,7 +3,8 @@ import { getConfig } from '../../utils/utils.js';
 /* c8 ignore next 11 */
 function handleEvent(prefix, link) {
   const domain = window.location.host.endsWith('.adobe.com') ? 'domain=adobe.com' : '';
-  document.cookie = `international=${prefix};path=/;${domain}`;
+  const maxAge = 365 * 24 * 60 * 60; // max-age in seconds for 365 days
+  document.cookie = `international=${prefix};max-age=${maxAge};path=/;${domain}`;
   sessionStorage.setItem('international', prefix);
   fetch(link.href, { method: 'HEAD' }).then((resp) => {
     if (!resp.ok) throw new Error('request failed');

libs/blocks/table/table.css

@@ -614,6 +614,14 @@ header.global-navigation {
     right: initial;
   }
 
+  .table .row-heading .col-heading .pricing {
+    overflow-wrap: anywhere;
+  }
+
+  .table .row-heading .col-heading span[is='inline-price'] {
+    display: inline;
+  }
+
   .table .row-heading .col:nth-child(n+1) {
     padding: 20px;
   }

libs/blocks/text/text.css

@@ -1,4 +1,6 @@
 .text-block {
+  --accent-height: 10px;
+
   position: relative;
 }
 
@@ -16,6 +18,8 @@
 
 .text-block [class^="detail"] { margin: 0 0 var(--spacing-xxs) 0; }
 
+.text-block [class^="detail"] strong { font-weight: unset; } /* bugfix for FF */
+
 .text-block .cta-container,
 .text-block p.action-area { margin-top: var(--spacing-s); }
 
@@ -72,6 +76,25 @@
   margin: var(--spacing-m) 0;
 }
 
+.text-block .title-l {
+  font-size: var(--type-body-m-size);
+  line-height: var(--type-body-m-lh);
+  font-weight: 700;
+  text-transform: none;
+  margin-bottom: var(--spacing-xs);
+}
+
+.text-block :is(.image, .lockup-area) {
+  margin-block-end: var(--spacing-m);
+}
+
+.text-block .image em {
+  display: block;
+  font-size: var(--type-body-s-size);
+  line-height: var(--type-body-s-lh);
+  margin-block-start: var(--spacing-xs);
+}
+
 .text-block .icon-list-item {
   list-style: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'/%3E"); /* Must not be `none` for accessibility */
   position: relative;
@@ -82,17 +105,68 @@
   inset: 0 100% auto auto;
 }
 
+.text-block.accent-bar {
+  inline-size: 100%;
+  block-size: var(--accent-height);
+}
+
+.text-block .lockup-area img {
+  width: auto;
+}
+
 /* Alignment */
 .text-block.center {
   text-align: center;
   align-items: center;
 }
 
+.text-block .icon-area {
+  display: flex;
+  column-gap: var(--spacing-xs);
+}
+
+.text-block p.icon-area { /* NOT <a/> tags with icons in them */
+  margin-block-end: var(--spacing-m);
+}
+
+.text-block.xxs-icon .icon-area {
+  height: var(--icon-size-xxs);
+}
+
+.text-block.xs-icon .icon-area {
+  height: var(--icon-size-xs);
+}
+
+.text-block.s-icon .icon-area {
+  height: var(--icon-size-s);
+}
+
+.text-block.m-icon .icon-area {
+  height: var(--icon-size-m);
+}
+
+.text-block.l-icon .icon-area {
+  height: var(--icon-size-l);
+}
+
+.text-block.xl-icon .icon-area {
+  height: var(--icon-size-xl);
+}
+
+.text-block.xxl-icon .icon-area {
+  height: var(--icon-size-xxl);
+}
+
+.text-block .icon-area img {
+  max-height: 100%;
+  width: auto;
+}
+
 .text-block.center .action-area,
 .text-block.center .icon-area { justify-content: center; }
 
 .text-block.right {
-  text-align: right;
+  text-align: end;
   align-items: end;
 }
 
@@ -144,17 +218,25 @@
   max-width: unset;
 }
 
-.text-block .icon-area {
-  display: flex;
-  column-gap: var(--spacing-xxs);
-}
-
 .text-block .icon-area.con-button {
   column-gap: unset;
 }
 
 .text-block .icon-area picture {
   line-height: 0em;
+  height: inherit; /* Safari + FF bug fix */
+}
+
+.text-block .image picture {
+  display: flex;
+}
+
+.text-block.center .image picture {
+  justify-content: center;
+}
+
+.text-block.right .image picture {
+  justify-content: flex-end;
 }
 
 /* icon inline */

libs/blocks/text/text.js

@@ -24,9 +24,8 @@ const blockTypeSizes = {
   },
 };
 
-function decorateMultiViewport(el) {
+function decorateMultiViewport(foreground) {
   const viewports = ['mobile-up', 'tablet-up', 'desktop-up'];
-  const foreground = el.querySelector('.foreground');
   if (foreground.childElementCount === 2 || foreground.childElementCount === 3) {
     [...foreground.children].forEach((child, index) => {
       child.className = viewports[index];
@@ -36,8 +35,13 @@ function decorateMultiViewport(el) {
   return foreground;
 }
 
-function decorateBlockIconArea(el) {
-  const headings = el.querySelectorAll('h1, h2, h3, h4, h5, h6');
+function decorateBlockIconArea(content, el) {
+  const first = content.children[0];
+  if (first?.querySelector('img')) {
+    const areaClass = el.className.match(/-(lockup|icon)/);
+    first.classList.add(areaClass ? `${areaClass[1]}-area` : 'image');
+  }
+  const headings = content.querySelectorAll('h1, h2, h3, h4, h5, h6');
   if (!headings) return;
   headings.forEach((h) => {
     const hPrevElem = h.previousElementSibling;
@@ -76,14 +80,20 @@ function decorateLinkFarms(el) {
   });
 }
 
+function addStyle(filename) {
+  const { miloLibs, codeRoot } = getConfig();
+  const base = miloLibs || codeRoot;
+  loadStyle(`${base}/styles/${filename}.css`);
+}
+
 export default async function init(el) {
   el.classList.add('text-block', 'con-block');
   let rows = el.querySelectorAll(':scope > div');
-  if (rows.length > 1) {
+  if (rows.length > 1 || el.matches('.accent-bar')) {
     if (rows[0].textContent !== '') el.classList.add('has-bg');
     const [head, ...tail] = rows;
     decorateBlockBg(el, head);
-    rows = tail;
+    rows = tail || rows;
   }
   const helperClasses = [];
   let blockType = 'text';
@@ -97,8 +107,11 @@ export default async function init(el) {
   const hasLinkFarm = el.classList.contains('link-farm');
   rows.forEach((row) => {
     row.classList.add('foreground');
-    if (!hasLinkFarm) decorateBlockText(row, blockTypeSizes[blockType][size]);
-    decorateBlockIconArea(row);
+    if (!hasLinkFarm) {
+      [...row.children].forEach((c) => decorateBlockText(c, blockTypeSizes[blockType][size]));
+      decorateMultiViewport(row);
+    }
+    [...row.children].forEach((c) => decorateBlockIconArea(c, el));
   });
   if (el.classList.contains('full-width')) helperClasses.push('max-width-8-desktop', 'center', 'xxl-spacing');
   if (el.classList.contains('intro')) helperClasses.push('max-width-8-desktop', 'xxl-spacing-top', 'xl-spacing-bottom');
@@ -109,7 +122,6 @@ export default async function init(el) {
   if (hasLinkFarm) decorateLinkFarms(el);
   el.classList.add(...helperClasses);
   decorateTextOverrides(el);
-  if (!hasLinkFarm) decorateMultiViewport(el);
 
   const lastActionArea = el.querySelector('.action-area:last-of-type');
   if (lastActionArea) {
@@ -124,4 +136,10 @@ export default async function init(el) {
     mnemonicList.querySelectorAll('p').forEach((product) => product.removeAttribute('class'));
     await loadBlock(mnemonicList);
   }
+  if (el.matches('[class*="rounded-corners"]')) addStyle('rounded-corners');
+  if (el.matches('[class*="-lockup"]')) addStyle('iconography');
+  // Override Detail with Title L style if class exists - Temporary solution until Spectrum 2
+  if (el.classList.contains('l-title')) {
+    el.querySelectorAll('[class*="detail-"]')?.forEach((detail) => detail.classList.add('title-l'));
+  }
 }

libs/features/personalization/personalization.js

@@ -360,10 +360,13 @@ function modifySelectorTerm(termParam) {
     'secondary-cta': 'em a',
     'action-area': '*:has(> em a, > strong a)',
     'any-marquee': '[class*="marquee"]',
-    header: ':is(h1, h2, h3, h4, h5, h6)',
+    'any-header': ':is(h1, h2, h3, h4, h5, h6)',
   };
   const otherSelectors = ['row', 'col'];
-  const htmlEls = ['main', 'div', 'a', 'p', 'strong', 'em', 'picture', 'source', 'img', 'h'];
+  const htmlEls = [
+    'html', 'body', 'header', 'footer', 'main',
+    'div', 'a', 'p', 'strong', 'em', 'picture', 'source', 'img', 'h',
+  ];
   const startTextMatch = term.match(/^[a-zA-Z/./-]*/);
   const startText = startTextMatch ? startTextMatch[0].toLowerCase() : '';
   const startTextPart1 = startText.split(/\.|:/)[0];
@@ -890,8 +893,6 @@ export function cleanAndSortManifestList(manifests) {
           freshManifest = manifestObj[manifest.manifestPath];
         }
         freshManifest.name = fullManifest.name;
-        freshManifest.selectedVariantName = fullManifest.selectedVariantName;
-        freshManifest.selectedVariant = freshManifest.variants[freshManifest.selectedVariantName];
         manifestObj[manifest.manifestPath] = freshManifest;
       } else {
         manifestObj[manifest.manifestPath] = manifest;