[Release] Stage to Main

.github/workflows/run-mas-tests.yaml

@@ -0,0 +1,46 @@
+name: MAS Unit Tests
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+    types: [opened, synchronize, reopened]
+jobs:
+  run-tests:
+    name: Running tests
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node-version: [20.x]
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 2
+
+      - name: Set up Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ matrix.node-version }}
+
+      - name: Install npm dependencies
+        run: npm install
+        working-directory: libs/features/mas
+
+      - name: Run npm test
+        run: npm test
+        working-directory: libs/features/mas
+
+      - name: Upload commerce coverage to Codecov
+        uses: codecov/codecov-action@v4
+        with:
+          name: mas-commerce
+          token: ${{ secrets.CODECOV_TOKEN }}
+          files: libs/features/mas/commerce/coverage/lcov.info
+
+      - name: Upload web-components coverage to Codecov
+        uses: codecov/codecov-action@v4
+        with:
+          name: mas-web-components
+          token: ${{ secrets.CODECOV_TOKEN }}
+          files: libs/features/mas/web-components/coverage/lcov.info

libs/blocks/aside/aside.js

@@ -96,6 +96,7 @@ function addCloseButton(el) {
   el.querySelector('.foreground').appendChild(closeBtn);
   closeBtn.addEventListener('click', (e) => {
     e.target.closest('.section').classList.add('close-sticky-section');
+    document.dispatchEvent(new CustomEvent('milo:sticky:closed'));
   });
 }
 

libs/blocks/editorial-card/editorial-card.css

@@ -92,6 +92,11 @@
   margin-top: auto;
 }
 
+.editorial-card .vp-media .tablet-only,
+.editorial-card .vp-media .desktop-only {
+  display: none;
+}
+
 .editorial-card .card-footer > div {
   display: flex;
   flex-direction: column;
@@ -142,11 +147,22 @@
   height: 100%;
 }
 
+.editorial-card .background .milo-video, 
+.editorial-card .background .milo-iframe {
+  height: 100%;
+  padding-bottom: 0;
+}
+
 .editorial-card .lockup-area,
 .editorial-card .device {
   margin: 0;
 }
 
+.editorial-card .device {
+  font-size: var(--type-body-xxs-size);
+  line-height: var(--type-body-xxs-lh);
+}
+
 .editorial-card .lockup-area {
   row-gap: var(--spacing-xxs);
 }
@@ -173,7 +189,6 @@
   justify-content: center;
 }
 
-
 .editorial-card hr {
   background-color: currentcolor;
   border: none;
@@ -248,3 +263,24 @@
 
 .editorial-card.footer-align-left .action-area { justify-content: start; }
 .editorial-card.footer-align-center .action-area { justify-content: center; }
+
+
+/* Tablet up */
+@media screen and (min-width: 600px) {
+  .editorial-card .vp-media .mobile-only,
+  .editorial-card .vp-media .desktop-only {
+    display: none;
+  }
+
+  .editorial-card .vp-media .tablet-only { display: block; }
+}
+
+/* desktop up */
+@media screen and (min-width: 1200px) {
+  .editorial-card .vp-media .mobile-only,
+  .editorial-card .vp-media .tablet-only {
+    display: none;
+  }
+
+  .editorial-card .vp-media .desktop-only { display: block; }
+}

libs/blocks/editorial-card/editorial-card.js

@@ -25,9 +25,10 @@ async function decorateLockupFromContent(el) {
 const extendDeviceContent = (el) => {
   const detail = el.querySelector('[class^="detail-"]');
   const prevElem = detail?.previousElementSibling;
-  if (!prevElem || ![...prevElem.classList].some((c) => c.startsWith('body-'))) return;
-  prevElem.classList.remove('body-m');
-  prevElem.classList.add('body-xxs', 'device');
+  if (!prevElem) return;
+  const elBodyClass = [...prevElem.classList].find((c) => c.startsWith('body-'));
+  prevElem.classList.remove(elBodyClass);
+  prevElem.classList.add('device');
 };
 
 const decorateMedia = (el, media) => {
@@ -37,14 +38,14 @@ const decorateMedia = (el, media) => {
   if (mediaVideo) {
     applyHoverPlay(mediaVideo);
   }
-  if (media.children.length > 1) decorateBlockBg(el, media);
+  if (media.children.length > 1) decorateBlockBg(el, media, { className: 'vp-media' });
 };
 
 const decorateForeground = async (el, rows) => {
-  rows.forEach(async (row, i) => {
+  rows.forEach((row, i) => {
     if (i === 0) {
       row.classList.add('foreground');
-      await decorateLockupFromContent(row);
+      decorateLockupFromContent(row);
     } else if (i === (rows.length - 1)) {
       row.classList.add('card-footer');
       if (!row.textContent.trim()) row.classList.add('empty');
@@ -57,12 +58,13 @@ const decorateForeground = async (el, rows) => {
 };
 
 const decorateBgRow = (el, background) => {
-  if (background.textContent.trim() === '') {
+  decorateBlockBg(el, background);
+  const rows = background.querySelectorAll(':scope > div');
+  const bgRowsEmpty = [...rows].every((row) => row.innerHTML.trim() === '');
+  if (bgRowsEmpty) {
     el.classList.add('no-bg');
     background.remove();
-    return;
   }
-  decorateBlockBg(el, background);
 };
 
 function handleClickableCard(el) {

libs/blocks/hero-marquee/hero-marquee.js

@@ -206,7 +206,7 @@ export default async function init(el) {
     : null;
   if (assetUnknown) assetUnknown.classList.add('asset-unknown');
 
-  decorateBlockText(copy, textDefault);
+  decorateBlockText(copy, textDefault, 'hasDetailHeading');
   await decorateLockupFromContent(copy);
   extendButtonsClass(copy);
 

libs/blocks/notification/notification.js

@@ -88,7 +88,12 @@ function wrapCopy(foreground) {
 
 function decorateClose(el) {
   const btn = createTag('button', { 'aria-label': 'close', class: 'close' }, closeSvg);
-  btn.addEventListener('click', () => (el.style.display = 'none'));
+  btn.addEventListener('click', () => {
+    el.style.display = 'none';
+    el.closest('.section')?.classList.add('close-sticky-section');
+    document.dispatchEvent(new CustomEvent('milo:sticky:closed'));
+  });
+
   el.appendChild(btn);
 }
 

libs/blocks/section-metadata/section-metadata.css

@@ -205,7 +205,7 @@
 
 .section.sticky-bottom.promo-sticky-section {
   background: none;
-  z-index: 4;
+  z-index: 40000;
 }
 
 .section.sticky-bottom.popup {

libs/blocks/table/table.css

@@ -705,4 +705,12 @@ header.global-navigation {
     flex-direction: column;
     align-items: initial;
   }
+
+  .table :is(.heading-button,.action-area) {
+    max-width: 100%;
+  }
+
+  .table .action-area .con-button.button-l {
+    overflow: hidden;
+  }
 }

libs/blocks/table/table.js

@@ -501,7 +501,9 @@ export default function init(el) {
     expandSection = handleSection(sectionParams);
   });
 
-  const isStickyHeader = el.classList.contains('sticky');
+  const isStickyHeader = el.classList.contains('sticky')
+    || (el.classList.contains('sticky-desktop-up') && defineDeviceByScreenSize() === 'DESKTOP')
+    || (el.classList.contains('sticky-tablet-up') && defineDeviceByScreenSize() !== 'MOBILE');
 
   handleHighlight(el);
   if (isMerch) formatMerchTable(el);

libs/blocks/text/text.css

@@ -31,7 +31,6 @@
   position: absolute;
   right: 0;
   top: 0;
-  z-index: -1;
   overflow: hidden;
 }