[Release] Stage to Main (adobecom#2766)

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

@@ -2,7 +2,6 @@ import { decorateButtons, decorateBlockHrs } from '../../utils/decorate.js';
 import { getConfig, createTag, loadStyle } from '../../utils/utils.js';
 import { getMetadata } from '../section-metadata/section-metadata.js';
 import { processTrackingLabels } from '../../martech/attributes.js';
-import { replaceKey } from '../../features/placeholders.js';
 import '../../deps/mas/merch-card.js';
 
 const TAG_PATTERN = /^[a-zA-Z0-9_-]+:[a-zA-Z0-9_-]+\/[a-zA-Z0-9_-].*$/;
@@ -403,6 +402,19 @@ const updateBigPrices = (merchCard) => {
   });
 };
 
+const addStartingAt = async (styles, merchCard) => {
+  if (styles.includes('starting-at')) {
+    const { replaceKey } = await import('../../features/placeholders.js');
+    await replaceKey('starting-at', getConfig()).then((key) => {
+      const startingAt = createTag('div', { slot: 'starting-at' }, key);
+      const price = merchCard.querySelector('span[is="inline-price"]');
+      if (price) {
+        price.parentNode.prepend(startingAt);
+      }
+    });
+  }
+};
+
 export default async function init(el) {
   if (!el.querySelector(INNER_ELEMENTS_SELECTOR)) return el;
   const styles = [...el.classList];
@@ -535,6 +547,7 @@ export default async function init(el) {
 
   addStock(merchCard, styles);
   if (styles.includes('secure')) {
+    const { replaceKey } = await import('../../features/placeholders.js');
     await replaceKey('secure-transaction', getConfig()).then((key) => merchCard.setAttribute('secure-label', key));
   }
   merchCard.setAttribute('filters', categories.join(','));
@@ -571,7 +584,9 @@ export default async function init(el) {
         }
       }
     }
+
     updateBigPrices(merchCard);
+    await addStartingAt(styles, merchCard);
     decorateBlockHrs(merchCard);
     simplifyHrs(merchCard);
     if (merchCard.classList.contains('has-divider')) merchCard.setAttribute('custom-hr', true);

libs/features/mas/mas/src/mas.js

@@ -1,5 +1,4 @@
 import { init } from '@adobe/mas-commerce';
-
 const { origin, searchParams } = new URL(import.meta.url);
 
 const locale = searchParams.get('locale') ?? 'US_en';
@@ -19,5 +18,9 @@ const config = () => ({
 init(config);
 
 if (features.includes('merch-card')) {
-    import(`${origin}/libs/deps/merch-card-all.js`);
+  await Promise.allSettled([
+    import('../../web-components/src/merch-card.js'),
+    import('../../web-components/src/merch-icon.js'),
+    import('../../web-components/src/merch-datasource.js'),
+  ]);
 }

libs/features/mas/mocks/mas.js

@@ -1,5 +1,7 @@
 import { init } from '@adobe/mas-commerce';
-import '@adobe/mas-web-components/src/merch-card-all.js';
+import '../../../web-components/src/merch-card.js';
+import '../../../web-components/src/merch-icon.js';
+import '../../../web-components/src/merch-datasource.js';
 
 const locale =
     document

libs/features/mas/web-components/build.mjs

@@ -21,14 +21,6 @@ async function buildLitComponent(name) {
 }
 
 Promise.all([
-    build({
-        bundle: true,
-        format: 'esm',
-        entryPoints: ['./src/merch-card-all.js'],
-        minify: true,
-        outfile: `${outfolder}/merch-card-all.js`,
-        sourcemap: true,
-    }),
     build({
         bundle: true,
         stdin: { contents: '' },

libs/features/mas/web-components/src/global.css.js

@@ -206,6 +206,12 @@ merch-card:not([variant='inline-heading']) [slot='heading-xs'] a {
     color: var(--merch-color-grey-80);
 }
 
+merch-card [slot='starting-at'] {
+  font-size: var(--consonant-merch-card-body-xs-font-size);
+  line-height: var(--consonant-merch-card-body-xs-line-height);
+  font-weight: 500;
+}
+
 merch-card [slot='heading-xs'] a:not(:hover) {
     text-decoration: inherit;
 }

libs/features/mas/web-components/src/merch-card.js

@@ -375,7 +375,11 @@ export class MerchCard extends LitElement {
 
     get promoBottom() {
       return this.classList.contains('promo-bottom');
-  }
+    }
+
+    get startingAt() {
+      return this.classList.contains('starting-at');
+    }
 
     renderSegment() {
         return html` ${this.badge}

libs/features/mas/web-components/src/merch-datasource.js

@@ -55,10 +55,10 @@ const cardContent = {
 };
 
 async function parseMerchCard(item, merchCard) {
-    const cardJson = item.fields.reduce((acc, { name, multiple, values }) => {
-        acc[name] = multiple ? values : values[0];
-        return acc;
-    }, {});
+    const cardJson = Array.isArray(item.fields) ? item.fields.reduce((acc, { name, multiple, values }) => {
+      acc[name] = multiple ? values : values[0];
+      return acc;
+    }, {}) : {};
     const { type = 'catalog' } = cardJson;
     const cardType = cardContent[type] || cardContent.catalog;
 

libs/features/mas/web-components/test/merch-card.test.html

@@ -950,7 +950,7 @@ <h3 slot="heading-m">
                     <a href="https://business.adobe.com/" class="con-button blue">Save now</a>
                 </div>
             </merch-card>
-            <merch-card variant="catalog" action-menu="true" badge-color="#EDCC2D" badge-background-color="#000000"
+            <merch-card variant="catalog" action-menu="true" class="starting-at" badge-color="#EDCC2D" badge-background-color="#000000"
                 badge-text="Best value">
                 <merch-icon slot="icons" size="l" src="../test/img/cc-logo.png"
                     alt="Creative Cloud All Apps"></merch-icon>

libs/styles/styles.css

@@ -127,7 +127,7 @@
   --icon-size-s: 32px;
   --icon-size-xs: 24px;
   --icon-size-xxs: 16px;
-  
+
   /* z-index */
   --above-all: 9000; /* Used for page tools that overlay page content */
 }
@@ -765,6 +765,10 @@ h6 {
   line-height: var(--type-heading-xs-lh);
 }
 
+:is(h1, h2, h3, h4, h5, h6, p):lang(ja) {
+  line-break: strict;
+}
+
 /* Links */
 a.auto-block,
 a.fragment {

libs/utils/decorate.js

@@ -172,12 +172,29 @@ export function decorateTextOverrides(el, options = ['-heading', '-body', '-deta
   });
 }
 
+function defineDeviceByScreenSize() {
+  const screenWidth = window.innerWidth;
+  if (screenWidth <= 600) {
+    return 'mobile';
+  }
+  return 'desktop';
+}
+
+export function getImgSrc(pic) {
+  let source = '';
+  const parser = new DOMParser();
+  const doc = parser.parseFromString(pic, 'text/html');
+  if (defineDeviceByScreenSize() === 'mobile') source = doc.querySelector('source[type="image/webp"]:not([media])');
+  else source = doc.querySelector('source[type="image/webp"][media]');
+  return source?.srcset ? `poster='${source.srcset}'` : '';
+}
+
 export function getVideoAttrs(hash, dataset) {
   const isAutoplay = hash?.includes('autoplay');
   const isAutoplayOnce = hash?.includes('autoplay1');
   const playOnHover = hash?.includes('hoverplay');
   const playInViewport = hash?.includes('viewportplay');
-  const poster = dataset?.videoPoster ? `poster='${dataset.videoPoster}'` : '';
+  const poster = getImgSrc(dataset.videoPoster);
   const globalAttrs = `playsinline ${poster}`;
   const autoPlayAttrs = 'autoplay muted';
   const playInViewportAttrs = playInViewport ? 'data-play-viewport' : '';

libs/utils/utils.js

@@ -533,7 +533,7 @@ export function decorateImageLinks(el) {
       const pic = img.closest('picture');
       const picParent = pic.parentElement;
       if (href.includes('.mp4')) {
-        const a = createTag('a', { href: url, 'data-video-poster': img.src });
+        const a = createTag('a', { href: url, 'data-video-poster': pic.outerHTML });
         a.innerHTML = url;
         pic.replaceWith(a);
       } else {

test/blocks/figure/mocks/body.html

@@ -157,7 +157,12 @@
       <!-- video poster link -->
       <div>
         <div>
-          <a href="link-to-video.mp4" data-video-poster="link-to-poster-image" class="video link-block hide-video">https://main--milo--adobecom.hlx.page/media_1e798d01c6ddc7e7eadc8f134d69e4f8d7193fdbb.mp4</a>
+          <a href="link-to-video.mp4" data-video-poster="<picture>
+            <source type=&quot;image/webp&quot; srcset=&quot;./media_1570a87786799913a62c9987d0f837e22db8cac7f.jpeg?width=2000&amp;amp;format=webply&amp;amp;optimize=medium&quot; media=&quot;(min-width: 600px)&quot;>
+            <source type=&quot;image/webp&quot; srcset=&quot;./media_1570a87786799913a62c9987d0f837e22db8cac7f.jpeg?width=750&amp;amp;format=webply&amp;amp;optimize=medium&quot;>
+            <source type=&quot;image/jpeg&quot; srcset=&quot;./media_1570a87786799913a62c9987d0f837e22db8cac7f.jpeg?width=2000&amp;amp;format=jpeg&amp;amp;optimize=medium&quot; media=&quot;(min-width: 600px)&quot;>
+            <img loading=&quot;lazy&quot; alt=&quot;generate&quot; src=&quot;./media_1570a87786799913a62c9987d0f837e22db8cac7f.jpeg?width=750&amp;amp;format=jpeg&amp;amp;optimize=medium&quot; width=&quot;1536&quot; height=&quot;518&quot;>
+          </picture>" class="video link-block">https://main--milo--adobecom.hlx.page/assets/video/media_1d716842793f4cea9b3b91827eaa8cc118ef1c1b6.mp4</a>
         </div>
       </div>
     </div>

test/blocks/merch-card/mocks/plans-card.html

@@ -47,7 +47,7 @@ <h5>this promo is great <a href="#terms">see terms</a></h5>
     </div>
   </div>
 
-  <div class="merch-card plans icons secure add-stock edu">
+  <div class="merch-card plans icons secure add-stock edu starting-at">
     <div>
       <div>#EDCC2D, #000000</div>
       <div>LOREM IPSUM DOLOR</div>

test/blocks/merch-card/mocks/segment-card.html

@@ -1,9 +1,10 @@
 <div class="fragment">
 <div class="section">
   <div class="before"></div>
-  <div class="merch-card segment">
+  <div class="merch-card segment starting-at">
     <div>
       <div>
+        <span is="inline-price">$59.99</span>
         <h3 id="lorem-ipsum-dolor-sit-amet">Lorem ipsum dolor sit amet</h3>
         <h5>this promo is great <a href="#terms">see terms</a></h5>
         <p>Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim.</p>

test/utils/mocks/body.html

@@ -49,4 +49,13 @@
     <p>I'm not a blockhead.</p>
     <p>{{&nbsp;inkl. MwSt.}}</p>
   </div>
+  <!-- picture element with poster video -->
+  <div>
+    <picture>
+      <source type="image/webp" srcset="./media_1570a87786799913a62c9987d0f837e22db8cac7f.jpeg?width=2000&amp;format=webply&amp;optimize=medium" media="(min-width: 600px)">
+      <source type="image/webp" srcset="./media_1570a87786799913a62c9987d0f837e22db8cac7f.jpeg?width=750&amp;format=webply&amp;optimize=medium">
+      <source type="image/jpeg" srcset="./media_1570a87786799913a62c9987d0f837e22db8cac7f.jpeg?width=2000&amp;format=jpeg&amp;optimize=medium" media="(min-width: 600px)">
+      <img loading="lazy" alt="https://main--milo--adobecom.hlx.page/assets/video/media_1d716842793f4cea9b3b91827eaa8cc118ef1c1b6.mp4 | generate" src="./media_1570a87786799913a62c9987d0f837e22db8cac7f.jpeg?width=750&amp;format=jpeg&amp;optimize=medium" width="1536" height="518">
+    </picture>
+  </div>
 </main>

test/utils/utils.test.js

@@ -1,4 +1,4 @@
-import { readFile } from '@web/test-runner-commands';
+import { readFile, setViewport } from '@web/test-runner-commands';
 import { expect } from '@esm-bundle/chai';
 import sinon from 'sinon';
 import { waitFor, waitForElement } from '../helpers/waitfor.js';
@@ -68,6 +68,7 @@ describe('Utils', () => {
 
     describe('Configure Auto Block', () => {
       it('Disable auto block when #_dnb in url', async () => {
+        setViewport({ width: 600, height: 1500 });
         await waitForElement('.disable-autoblock');
         const disableAutoBlockLink = document.querySelector('.disable-autoblock');
         utils.decorateLinks(disableAutoBlockLink);