[Release] Stage to Main

libs/blocks/article-header/article-header.js

@@ -108,20 +108,24 @@ async function buildSharing() {
     twitter: {
       'data-href': `https://www.twitter.com/share?&url=${url}&text=${title}`,
       'aria-label': 'share twitter',
+      tabindex: '0',
     },
     linkedin: {
       'data-type': 'LinkedIn',
       'data-href': `https://www.linkedin.com/shareArticle?mini=true&url=${url}&title=${title}&summary=${description || ''}`,
       'aria-label': 'share linkedin',
+      tabindex: '0',
     },
     facebook: {
       'data-type': 'Facebook',
       'data-href': `https://www.facebook.com/sharer/sharer.php?u=${url}`,
       'aria-label': 'share facebook',
+      tabindex: '0',
     },
     link: {
       id: 'copy-to-clipboard',
       'aria-label': 'copy to clipboard',
+      tabindex: '0',
     },
   };
 

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

@@ -1059,7 +1059,7 @@ const getSource = async () => {
   const { locale, dynamicNavKey } = getConfig();
   let url = getMetadata('gnav-source') || `${locale.contentRoot}/gnav`;
   if (dynamicNavKey) {
-    const { default: dynamicNav } = await import('../../features/dynamic-navigation.js');
+    const { default: dynamicNav } = await import('../../features/dynamic-navigation/dynamic-navigation.js');
     url = dynamicNav(url, dynamicNavKey);
   }
   return url;

libs/blocks/graybox/graybox.css

@@ -10,7 +10,7 @@
 }
 
 .graybox {
-  display: none;
+  display: none !important;
 }
 
 .gb-graybox-body {

libs/blocks/hero-marquee/hero-marquee.css

@@ -17,6 +17,7 @@
   align-items: center;
 }
 
+.hero-marquee.no-min-height { min-height: unset; }
 .hero-marquee.s-min-height { min-height: var(--s-min-height); }
 .hero-marquee.l-min-height { min-height: var(--l-min-height); }
 
@@ -150,6 +151,10 @@ html[dir="rtl"] .hero-marquee .foreground {
   display: none;
 }
 
+.hero-marquee .foreground div.empty-asset:empty {
+  display: block;
+}
+
 /* Row Types */
 .hero-marquee .row-list {
   text-align: left;
@@ -268,8 +273,8 @@ html[dir="rtl"] .hero-marquee li.icon-item span.icon {
   }
 
   /* con-vars support */
-  .hero-marquee:is(.bg-top-mobile, .bg-bottom-mobile, .bg-top-tablet, .bg-bottom-tablet) .background,
-  .hero-marquee:is(.bg-top-mobile, .bg-bottom-mobile, .bg-top-tablet, .bg-bottom-tablet) .background video {
+  .hero-marquee:is(.bg-top-mobile, .bg-bottom-mobile) .background,
+  .hero-marquee:is(.bg-top-mobile, .bg-bottom-mobile) .background video {
       position: relative;
       width: 100%;
   }

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

@@ -76,8 +76,12 @@ async function decorateLockupRow(el, classes) {
   await loadIconography();
   child?.classList.add('lockup-area');
   const iconSizeClass = classes?.find((c) => c.endsWith('-icon'));
-  if (iconSizeClass) el.classList.remove(iconSizeClass);
-  el.classList.add(`${iconSizeClass?.split('-')[0] || 'l'}-lockup`);
+  const lockupSizeClass = classes?.find((c) => c.endsWith('-lockup'));
+  const usedLockupClass = iconSizeClass || lockupSizeClass;
+  if (usedLockupClass) {
+    el.classList.remove(usedLockupClass);
+  }
+  el.classList.add(`${usedLockupClass?.split('-')[0] || 'l'}-lockup`);
 }
 
 function decorateBg(el) {
@@ -219,7 +223,12 @@ export default async function init(el) {
 
   const assetRow = allRows[0].classList.contains('asset');
   if (assetRow) el.classList.add('asset-left');
-  const mainCopy = createTag('div', { class: 'main-copy' });
+  const lockupClass = [...el.classList].find((c) => c.endsWith('-lockup'));
+  if (lockupClass) el.classList.remove(lockupClass);
+  const buttonClass = [...el.classList].find((c) => c.endsWith('-button'));
+  if (buttonClass) el.classList.remove(buttonClass);
+  const classes = `main-copy ${lockupClass || 'l-lockup'} ${buttonClass || 'l-button'}`;
+  const mainCopy = createTag('div', { class: classes });
   while (copy.childNodes.length > 0) {
     mainCopy.appendChild(copy.childNodes[0]);
   }
@@ -237,7 +246,6 @@ export default async function init(el) {
       copy.append(row);
     }
   });
-
   const promiseArr = [];
   [...rows].forEach(async (row) => {
     const cols = row.querySelectorAll(':scope > div');

libs/blocks/modal/modal.css

@@ -21,6 +21,11 @@
   z-index: 102;
 }
 
+#locale-modal-v2 .dialog-close,
+#locale-modal-v2 .georouting-wrapper {
+  display: block;
+}
+
 .dialog-modal.commerce-frame {
   z-index: 103;
 }

libs/blocks/ost/ctaTextOption.js

@@ -3,6 +3,7 @@ const ctaTextOption = {
     { id: 'buy-now', name: 'Buy now' },
     { id: 'free-trial', name: 'Free trial' },
     { id: 'start-free-trial', name: 'Start free trial' },
+    { id: 'save-now', name: 'Save now' },
     { id: 'get-started', name: 'Get started' },
     { id: 'choose-a-plan', name: 'Choose a plan' },
     { id: 'learn-more', name: 'Learn more' },

libs/blocks/quiz-entry/quizoption.js

@@ -8,7 +8,7 @@ export const OptionCard = ({
   disabled, selected, background, onClick,
 }) => {
   const getOptionClass = () => {
-    let className = '';
+    let className = 'no-track ';
     if (icon || iconTablet || iconDesktop) className += 'has-icon ';
     if (image) className += 'has-image ';
     if (background) className += 'has-background ';

libs/blocks/quiz/quizoption.js

@@ -5,7 +5,7 @@ export const OptionCard = ({
   text, title, image, icon, iconTablet, iconDesktop, options, disabled, selected, background,
 }) => {
   const getOptionClass = () => {
-    let className = '';
+    let className = 'no-track ';
     if (icon || iconTablet || iconDesktop) className += 'has-icon ';
     if (image) className += 'has-image ';
     if (background) className += 'has-background ';

libs/deps/mas/merch-card.js

@@ -1015,7 +1015,7 @@ merch-card[variant="plans"] [slot="quantity-select"] {
           <slot name="callout-content"></slot>
           <slot name="body-lower"></slot>
       </div>
-      ${this.secureLabelFooter}`}connectedCallbackHook(){super.connectedCallbackHook(),window.addEventListener("resize",this.postCardUpdateHook.bind(this))}postCardUpdateHook(){O()||this.adjustProductBodySlots()}static variantStyle=Pt`
+      ${this.secureLabelFooter}`}connectedCallbackHook(){super.connectedCallbackHook(),window.addEventListener("resize",this.postCardUpdateHook.bind(this))}postCardUpdateHook(){O()||this.adjustProductBodySlots(),this.adjustTitleWidth()}static variantStyle=Pt`
     :host([variant='product']) > slot:not([name='icons']) {
         display: block;
     }
@@ -1039,6 +1039,9 @@ merch-card[variant="plans"] [slot="quantity-select"] {
         min-height: var(--consonant-merch-card-product-callout-content-height);
         display: block;
     }
+    :host([variant='product']) ::slotted([slot='heading-xs']) {
+        max-width: var(--consonant-merch-card-heading-xs-max-width, 100%);
+    }
   `};import{html as W,css as Nt}from"../lit-all.min.js";var vt=`
 :root {
   --consonant-merch-card-segment-width: 378px;

libs/features/dynamic-navigation.js → libs/features/dynamic-navigation/dynamic-navigation.js

@@ -1,19 +1,21 @@
-import { getMetadata } from '../utils/utils.js';
+import { getMetadata } from '../../utils/utils.js';
 
-function isDynamicNavDisabled() {
+export function foundDisableValues() {
   const dynamicNavDisableValues = getMetadata('dynamic-nav-disable');
   if (!dynamicNavDisableValues) return false;
 
   const metadataPairsMap = dynamicNavDisableValues.split(',').map((pair) => pair.split(';'));
-  return metadataPairsMap.some(([metadataKey, metadataContent]) => {
+  const foundValues = metadataPairsMap.filter(([metadataKey, metadataContent]) => {
     const metaTagContent = getMetadata(metadataKey.toLowerCase());
     return (metaTagContent
         && metaTagContent.toLowerCase() === metadataContent.toLowerCase());
   });
+
+  return foundValues.length ? foundValues : false;
 }
 
 export default function dynamicNav(url, key) {
-  if (isDynamicNavDisabled()) return url;
+  if (foundDisableValues()) return url;
   const metadataContent = getMetadata('dynamic-nav');
 
   if (metadataContent === 'entry') {

libs/features/dynamic-navigation/status.css

@@ -0,0 +1,179 @@
+.dynamic-nav-status {
+  border: 2px solid white;
+  border-radius: 32px;
+  color: #eee;
+  font-size: 16px;
+  padding: 12px 24px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  margin: 12px;
+  position: relative;
+}
+
+.dynamic-nav-status .title { 
+  display: flex;
+}
+
+.dynamic-nav-status.active {
+  background-color: #280;
+}
+
+.dynamic-nav-status.enabled {
+  background-color: #ec4;
+}
+
+.dynamic-nav-status.inactive {
+  background-color: #e20;  
+}
+
+.dns-badge {
+  border: 2px solid white;
+  border-radius: 32px;
+  background-color: transparent;
+  box-sizing: border-box;
+  color: #eee;
+  padding: 8px;
+  height: 12px;
+  width: 12px;
+  margin: 4px 8px 4px 0;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  position: relative;
+}
+
+.dns-badge::after { 
+  content: '';
+  display: block;
+  box-sizing: border-box;
+  position: absolute;
+  width: 6px;
+  height: 6px;
+  border-top: 2px solid;
+  border-right: 2px solid;
+  transform: rotate(45deg);
+  left: 5px;
+  bottom: 5px;
+  transition-duration: 0.2s;
+}
+
+.dns-badge.dns-open::after {
+  transform: rotate(135deg);
+  transition-duration: 0.2s;
+}
+
+.dynamic-nav-status .hidden {
+  display: none;
+}
+
+.dynamic-nav-status.enabled .title,
+.dynamic-nav-status.enabled .dns-badge {
+  color: var(--feds-color-hamburger);  
+  border-color: var(--feds-color-hamburger);
+}
+
+.dynamic-nav-status .dns-close-container {
+  display: flex;
+  justify-content: flex-end;
+  width: 100%;
+  height: 10px;
+  padding: 2px;
+}
+
+.dynamic-nav-status .dns-close {
+  cursor: pointer;
+  display: block;
+  position: absolute;
+  border: 2px solid white;
+  border-radius: 32px;
+  background-color: transparent;
+  color: #eee;
+  height: 20px;
+  width: 20px;
+  top: 6px;
+  right: 6px;
+  box-sizing: border-box;
+}
+
+.dynamic-nav-status .dns-close::after {
+  content: 'x';
+  display: block;
+  box-sizing: border-box;
+  position: absolute;
+  width: 6px;
+  height: 6px;
+  left: 4px;
+  top: -8px;
+  font-size: 18px;
+  font-weight: 600;
+}
+
+.dynamic-nav-status .details {
+  position: absolute;
+  top: 60px;
+  right: 0;
+  background-color: #444;
+  min-width: 300px;
+  border-radius: 16px;
+  box-shadow: 0 0 10px #000;
+  font-size: 12px;
+  padding: 20px;
+  z-index: 1;
+}
+
+.dynamic-nav-status .details::before {
+  content: '';
+  width: 0;
+  height: 0;
+  position: absolute;
+  border-left: 15px solid transparent;
+  border-right: 15px solid transparent;
+  border-top: 15px solid #444;
+  top: -15px;
+  right: 75px;
+  rotate: 180deg;
+}
+
+.dynamic-nav-status p {
+  margin: 2px;
+}
+
+.dynamic-nav-status .details p {
+  font-weight: 600;
+}
+
+.dynamic-nav-status .details span {
+  font-weight: 300;
+}
+
+.dynamic-nav-status .details .additional-info {
+  border-bottom: 1px solid white;
+}
+
+.dynamic-nav-status .disable-values {
+  min-width: 100%;
+}
+
+.dynamic-nav-status .disable-values table {
+  border-collapse: collapse;
+  width: 100%;
+}
+
+.dynamic-nav-status .disable-values caption {
+  min-width: 100%;
+  text-align: left;
+  font-weight: 600;
+}
+
+.dynamic-nav-status .disable-values th,
+.dynamic-nav-status .disable-values td {
+  border: 1px solid rgb(160 160 160);
+  padding: 8px 10px;
+}
+
+@media screen and (max-width: 600px) {
+  .dynamic-nav-status {
+    display: none;
+  }
+}