Merge pull request #288 from adobecom/stage

[Release] Sync main from stage 2/5/2024
adobecom · May 7, 2024 · a93efdb · a93efdb
2 parents b6f187f + 844e252
commit a93efdb
Show file tree

Hide file tree

Showing 10 changed files with 109 additions and 36 deletions.
diff --git a/creativecloud/blocks/interactive-marquee/interactive-marquee.js b/creativecloud/blocks/interactive-marquee/interactive-marquee.js
@@ -3,7 +3,7 @@ import { getLibs } from '../../scripts/utils.js';
 // [headingSize, bodySize, detailSize, titlesize]
 const typeSizes = ['xxl', 'xl', 'l', 'xs'];
 
-function decorateText(el, createTag) {
+function decorateText(el, createTag, isMwebMarquee = false) {
   const headings = el.querySelectorAll('h1, h2, h3, h4, h5, h6');
   const heading = headings[headings.length - 1];
   const config = typeSizes;
@@ -24,6 +24,19 @@ function decorateText(el, createTag) {
     iconAreaElements?.classList.add('icon-area');
     iconText.innerText = (iconAreaElements.textContent.trim());
     iconText.previousSibling.textContent = '';
+    if (isMwebMarquee) {
+      const foreground = el.closest('.foreground');
+      const mwebContainer = createTag('div', { class: 'mweb-container' });
+      const actionItem = el.querySelector('.action-area');
+      mwebContainer.append(heading.cloneNode(true), actionItem.cloneNode(true));
+      heading.classList.add('mobile-cta-top');
+      actionItem.classList.add('mobile-cta-top');
+      if (sib) {
+        mwebContainer.prepend(sib.cloneNode(true));
+        sib.classList.add('mobile-cta-top');
+      }
+      foreground.prepend(mwebContainer);
+    }
   };
   decorate(heading, config);
 }
@@ -60,9 +73,10 @@ function interactiveInit(el, decorateButtons, decorateBlockBg, createTag) {
 
   const firstDivInForeground = foreground.querySelector(':scope > div');
   if (firstDivInForeground?.classList.contains('asset')) el.classList.add('row-reversed');
+  const isMwebMarquee = el.classList.contains('mobile-cta-top');
 
   decorateButtons(text, 'button-xl');
-  decorateText(text, createTag);
+  decorateText(text, createTag, isMwebMarquee);
   extendButtonsClass(text);
 }
 

diff --git a/creativecloud/blocks/interactive-marquee/milo-marquee.css b/creativecloud/blocks/interactive-marquee/milo-marquee.css
@@ -46,6 +46,7 @@
 }
 
 .interactive-marquee .text .detail-l,
+.interactive-marquee .mweb-container .detail-l,
 .interactive-marquee .text .heading-xl,
 .interactive-marquee .text .heading-xxl {
   margin-bottom: var(--spacing-xs);
@@ -73,6 +74,7 @@
 .interactive-marquee .icon-area img {
   height: 40px;
   width: auto;
+  min-width: 40px;
   display: block;
 }
 
@@ -116,6 +118,11 @@
   line-height: 0;
 }
 
+.interactive-marquee > .container > .body-xl {
+  display: none;
+  order:3;
+}
+
 @media screen and (min-width: 600px) {
   .interactive-marquee .background .mobile-only,
   .interactive-marquee .background .desktop-only {
@@ -142,6 +149,10 @@
     align-items: center;
     gap: var(--spacing-s);
   }
+
+  .interactive-marquee .mweb-container {
+    display: none;
+  }
 }
 
 @media screen and (min-width: 1200px) {
@@ -191,3 +202,17 @@
     max-width: 500px;
   }
 }
+
+@media screen and (max-width: 600px) {
+  .mweb-container .action-area {
+    text-align: center;
+  }
+
+  .interactive-marquee .text .detail-l.mobile-cta-top,
+  .interactive-marquee .text .icon-area.mobile-cta-top,
+  .interactive-marquee .text .action-area.mobile-cta-top,
+  .interactive-marquee .text h1[class^="heading"].mobile-cta-top
+  {
+    display: none;
+  }
+}
diff --git a/creativecloud/blocks/interactive-metadata/interactive-metadata.js b/creativecloud/blocks/interactive-metadata/interactive-metadata.js
@@ -257,6 +257,7 @@ function getWorkFlowInformation(el) {
     'workflow-generate-repeat-crop': ['generate', 'selector-tray', 'generate', 'selector-tray', 'crop', 'start-over'],
     'workflow-hue-sat': ['slider-tray'],
     'workflow-generate-select-generate': ['generate', 'selector-tray', 'generate', 'crop', 'start-over'],
+    'workflow-generate-select': ['generate', 'selector-tray', 'start-over'],
     'workflow-generate-selector': ['generate', 'selector-tray', 'generate', 'start-over'],
     'workflow-generate-triple-selector': ['generate', 'selector-tray', 'generate', 'selector-tray', 'generate', 'selector-tray', 'start-over'],
   };

diff --git a/creativecloud/blocks/sidenav/sidenav.js b/creativecloud/blocks/sidenav/sidenav.js
@@ -19,12 +19,16 @@ const getCategories = (items, isMultilevel, mapCategories) => {
   const merchTag = createTag('merch-sidenav-list', { deeplink: 'category' });
   merchTag.append(tag);
   items.forEach((item) => {
-    if (item) {
+    if (item?.id) {
       let parent = tag;
       const value = getIdLeaf(item.id);
       // first token is type, second is parent category
       const isParent = item.id.split('/').length <= 2;
       const itemTag = createTag('sp-sidenav-item', { label: item.name, value });
+      if (item.icon) {
+        item.icon.setAttribute('slot', 'icon');
+        itemTag.append(item.icon);
+      }
       if (isParent) {
         mapParents[value] = itemTag;
         tag.append(itemTag);
@@ -34,7 +38,7 @@ const getCategories = (items, isMultilevel, mapCategories) => {
           if (!mapParents[parentId]) {
             const parentItem = mapCategories[parentId];
             if (parentItem) {
-              mapParents[parentId] = createTag('sp-sidenav-item', { label: parentItem.name, parentId });
+              mapParents[parentId] = createTag('sp-sidenav-item', { label: parentItem.name, value: parentId });
               tag.append(mapParents[parentId]);
             }
           }
@@ -74,20 +78,23 @@ const appendFilters = async (root, link, explicitCategoriesElt, typeText) => {
         if (item.id?.startsWith(CATEGORY_ID_PREFIX)) {
           const value = getIdLeaf(item.id);
           mapCategories[value] = item;
-          categoryValues.push(value);
+          categoryValues.push({ value });
         } else if (item.id?.startsWith(TYPE_ID_PREFIX)) {
           types.push(item);
         }
       });
       if (explicitCategoriesElt) {
         categoryValues = Array.from(explicitCategoriesElt.querySelectorAll('li'))
-          .map((item) => item.textContent.trim().toLowerCase());
+          .map((item) => ({
+            value: item.textContent.trim().toLowerCase(),
+            icon: item.querySelector('picture'),
+          }));
       }
       let shallowCategories = true;
       if (categoryValues.length > 0) {
         await makePause();
-        const items = categoryValues.map((value) => mapCategories[value]);
-        const parentValues = new Set(items.map((value) => value?.id.split('/')[1]));
+        const items = categoryValues.map(({ value, icon }) => ({ ...mapCategories[value], icon }));
+        const parentValues = new Set(items.map(({ id }) => id?.split('/')[1]));
         // all parent will always be here without children,
         // so shallow is considered below 2 parents
         shallowCategories = parentValues.size <= 2;
@@ -132,6 +139,7 @@ function appendResources(rootNav, resourceLink) {
 
 export default async function init(el) {
   const libs = getLibs();
+  const [mainRow, categoryRow] = Array.from(el.children);
   const merchSidenavDep = import('../../deps/merch-sidenav.js');
   const deps = Promise.all([
     merchSidenavDep,
@@ -148,20 +156,21 @@ export default async function init(el) {
     import(`${libs}/features/spectrum-web-components/dist/overlay.js`),
   ]);
 
-  const title = el.querySelector('h2,h3')?.textContent.trim();
+  const title = mainRow?.querySelector('h2,h3')?.textContent.trim();
+  const searchText = mainRow?.querySelector('p > strong')?.textContent.trim();
+  const typeText = mainRow?.querySelector('p > em')?.textContent.trim();
+  // eslint-disable-next-line prefer-const
+  const resourcesLink = mainRow?.querySelector('a');
+  let endpoint = categoryRow?.querySelector('a');
   await merchSidenavDep;
   const rootNav = createTag('merch-sidenav', { title });
-  const searchText = el.querySelector('p > strong')?.textContent.trim();
-  const typeText = el.querySelector('p > em')?.textContent.trim();
   await deps;
   el.replaceWith(rootNav);
   appendSearch(rootNav, searchText);
-  // eslint-disable-next-line prefer-const
-  let [endpoint, resourcesLink] = el.querySelectorAll('a');
   if (endpoint) {
     await makePause();
     endpoint = localizeLink(endpoint.textContent.trim(), null, true);
-    const explicitCategories = el.querySelector('ul');
+    const explicitCategories = categoryRow?.querySelector('ul');
     performance.mark('sidenav:appendFilters:start');
     await appendFilters(rootNav, endpoint, explicitCategories, typeText);
     performance.mark('sidenav:appendFilters:end');

diff --git a/creativecloud/features/firefly/firefly-interactive.css b/creativecloud/features/firefly/firefly-interactive.css
@@ -96,11 +96,7 @@
   }
 
   .interactive-marquee.firefly .asset {
-    top: 24px;
-  }
-
-  .interactive-marquee.firefly .foreground {
-    padding-top: 0;
+    top: 0;
   }
 
   .interactive-marquee.firefly.ff-text-effects .interactive-container,

diff --git a/creativecloud/features/firefly/firefly-susi.js b/creativecloud/features/firefly/firefly-susi.js
@@ -19,7 +19,7 @@ function redirectUrl(prompt, paramKey) {
     const effectsPath = `generate/font-styles?prompt=${encodeURI(prompt)}&${queryParam}`;
     windowLocation = env === 'prod' ? `${fireflyprod}/${effectsPath}` : `${fireflystage}/${effectsPath}`;
   } else if (paramKey === 'goToFirefly') {
-    const fireflyPath = `generate/images?prompt=${encodeURI(prompt)}&${queryParam}&seed=${generateRandomSeed()}&seed=${generateRandomSeed()}&seed=${generateRandomSeed()}&seed=${generateRandomSeed()}&modelInputVersion=v2&modelConfig=v2`;
+    const fireflyPath = `generate/images?prompt=${encodeURI(prompt)}&${queryParam}&seed=${generateRandomSeed()}&seed=${generateRandomSeed()}&seed=${generateRandomSeed()}&seed=${generateRandomSeed()}&modelInputVersion=v3&modelConfig=v3`;
     windowLocation = env === 'prod' ? `${fireflyprod}/${fireflyPath}` : `${fireflystage}/${fireflyPath}`;
   }
   return windowLocation;

diff --git a/creativecloud/features/interactive-components/selector-tray/selector-tray.css b/creativecloud/features/interactive-components/selector-tray/selector-tray.css
@@ -57,6 +57,7 @@
 
 .interactive-enabled .step-selector-tray .selector-tray .tray-items a.tray-thumbnail-img .tray-thumbnail-outline {
   display: none;
+  box-sizing: content-box;
   height: calc(100% - 10px);
   width: calc(100% - 10px);
   border: 5px solid var(--prompt-highlight-color);

diff --git a/test/blocks/sidenav/mocks/blah.svg b/test/blocks/sidenav/mocks/blah.svg
diff --git a/test/blocks/sidenav/sidenav.test.html b/test/blocks/sidenav/sidenav.test.html
@@ -15,17 +15,27 @@ <h1 id="side-nav-testing">SIDE NAV testing</h1>
             <div>
               <h2 id="refine-your-results">REFINE YOUR RESULTS</h2>
               <p><strong>Search all your products</strong></p>
-              <p><a href="/some/taxonomy.json">https://www.adobe.com/some/taxonomy.json</a></p>
               <p><em>TYPES</em></p>
               <p><a href="https://www.adobe.com/products/special-offers.html">RESOURCES: Special Offers</a></p>
             </div>
           </div>
+          <div>
+            <div>
+              <p><a href="/some/taxonomy.json">https://www.adobe.com/some/taxonomy.json</a></p>
+            </div>
+          </div>
         </div>
         <div class="sidenav reordered-categories">
           <div>
             <div>
               <h2 id="refine-your-results">REFINE YOUR RESULTS</h2>
               <p><strong>Search all your products</strong></p>
+              <p><em>TYPES</em></p>
+              <p><a href="https://www.adobe.com/products/special-offers.html">RESOURCES: Special Offers</a></p>
+            </div>
+          </div>
+          <div>
+            <div>
               <p><a href="/some/taxonomy.json">https://www.adobe.com/some/taxonomy.json</a></p>
               <ul>
                 <li>all</li>
@@ -45,26 +55,28 @@ <h2 id="refine-your-results">REFINE YOUR RESULTS</h2>
                 <li>Commerce-conversions</li>
                 <li>Optimization-scale</li>
               </ul>
-              <p><em>TYPES</em></p>
-              <p><a href="https://www.adobe.com/products/special-offers.html">RESOURCES: Special Offers</a></p>
             </div>
           </div>
         </div>
         <div class="sidenav plans">
           <div>
             <div>
-              <h2>REFINE YOUR RESULTS</h2>
-              <p><a href="/some/taxonomy.json">https://www.adobe.com//some/taxonomy.json</a></p>
-              <ul>
-                <li>All</li>
-                <li>Photo</li>
-                <li>Graphic-design</li>
-                <li>Video</li>
-                <li>Illustration</li>
-                <li>Acrobat-pdf</li>
-                <li>3d-ar</li>
-                <li>Social-media</li>
-              </ul>
+              <h2>CATEGORIES</h2>
+            </div>
+          </div>
+          <div>
+              <div>
+                <p><a href="/some/taxonomy.json">https://www.adobe.com//some/taxonomy.json</a></p>
+                <ul>
+                  <li>All <picture><img loading="lazy" src="mocks/blah.svg"></picture></li>
+                  <li>Photo</li>
+                  <li>Graphic-design</li>
+                  <li>Video</li>
+                  <li>Illustration</li>
+                  <li>Acrobat-pdf</li>
+                  <li>3d-ar</li>
+                  <li>Social-media</li>
+                </ul>
             </div>
           </div>
         </div>

diff --git a/test/blocks/sidenav/sidenav.test.html.js b/test/blocks/sidenav/sidenav.test.html.js
@@ -61,11 +61,14 @@ runTests(async () => {
       const sidenavEl = document.querySelector('.plans');
       const newRoot = await init(sidenavEl);
       expect(newRoot.tagName).to.equal('MERCH-SIDENAV');
-      expect(newRoot.title).to.equal('REFINE YOUR RESULTS');
+      expect(newRoot.title).to.equal('CATEGORIES');
       const search = newRoot.querySelector('sp-search');
       expect(search).to.be.null;
       const nestedItems = newRoot.querySelectorAll('sp-sidenav-item > sp-sidenav-item');
       expect(nestedItems.length).to.equal(0);
+      const iconItem = newRoot.querySelector('sp-sidenav-item[value=all] > picture');
+      expect(iconItem).to.not.be.null;
+      expect(iconItem.getAttribute('slot')).to.equal('icon');
     });
   });
 });