Sync repos

express/blocks/ax-columns/ax-columns.js

@@ -28,6 +28,14 @@ import {
 
 const { createTag, getMetadata } = await import(`${getLibs()}/utils/utils.js`);
 
+function replaceHyphensInText(area) {
+  [...area.querySelectorAll('h1, h2, h3, h4, h5, h6')]
+    .filter((header) => header.textContent.includes('-'))
+    .forEach((header) => {
+      header.textContent = header.textContent.replace(/-/g, '\u2011');
+    });
+}
+
 function transformToVideoColumn(cell, aTag, block) {
   const parent = cell.parentElement;
   const title = aTag.textContent.trim();
@@ -153,7 +161,30 @@ const handleVideos = (cell, a, block, thumbnail) => {
   });
 };
 
+const extractProperties = (block) => {
+  const allProperties = {};
+  const rows = Array.from(block.querySelectorAll(':scope > div')).slice(0, 3);
+
+  rows.forEach((row) => {
+    const content = row.innerText.trim();
+    if (content.includes('linear-gradient')) {
+      allProperties['card-gradient'] = content;
+      row.remove();
+    } else if (content.includes('text-color')) {
+      allProperties['card-text-color'] = content.replace(/text-color\(|\)/g, '');
+      row.remove();
+    } else if (content.includes('background-color')) {
+      allProperties['background-color'] = content.replace(/background-color\(|\)/g, '');
+      row.remove();
+    }
+  });
+
+  return allProperties;
+};
+
 export default async function decorate(block) {
+  if (document.body.dataset.device === 'mobile') replaceHyphensInText(block);
+  const colorProperties = extractProperties(block);
   splitAndAddVariantsWithDash(block);
   decorateSocialIcons(block);
   decorateButtonsDeprecated(block, 'button-xxl');
@@ -182,6 +213,15 @@ export default async function decorate(block) {
       const aTag = cell.querySelector('a');
       const pics = cell.querySelectorAll(':scope picture');
 
+      // apply custom gradient and text color to all columns cards
+      const parent = cell.parentElement;
+      if (colorProperties['card-gradient']) {
+        parent.style.background = colorProperties['card-gradient'];
+      }
+      if (colorProperties['card-text-color']) {
+        parent.style.color = colorProperties['card-text-color'];
+      }
+
       if (cellNum === 0 && isNumberedList) {
         // add number to first cell
         let num = rowNum + 1;
@@ -298,11 +338,14 @@ export default async function decorate(block) {
     );
   }
 
+  // add custom background color to columns-highlight-container
+  const sectionContainer = block.closest('.section');
+  if (sectionContainer && colorProperties['background-color']) {
+    sectionContainer.style.background = colorProperties['background-color'];
+  }
+
   // invert buttons in regular columns inside columns-highlight-container
-  if (
-    block.closest('.section.columns-highlight-container')
-    && !block.classList.contains('highlight')
-  ) {
+  if (sectionContainer && !block.classList.contains('highlight')) {
     block.querySelectorAll('a.button, a.con-button').forEach((button) => {
       button.classList.add('dark');
     });

express/blocks/banner/banner.css

@@ -110,7 +110,8 @@ main .banner h2 {
   border-radius: 12px;
 }
 
-.banner .standout-container strong {
+.banner .standout-container em {
+  font-style: normal;
   background: linear-gradient(180deg, #FF4DD2 20%, #FF993B 80%);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;

express/blocks/browse-by-category/browse-by-category.css

@@ -15,6 +15,7 @@ main .browse-by-category .carousel-container .carousel-platform {
 main .browse-by-category.card .carousel-container .carousel-platform {
   gap: 14px;
   margin: 6px 0 0 0;
+  padding-left: 20px;
 }
 
 main .browse-by-category .carousel-container .button.carousel-arrow {

express/blocks/frictionless-quick-action/frictionless-quick-action.css

@@ -60,8 +60,8 @@
     padding: 24px 0;
     border-radius: 20px;
     box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
-    width: 600px;
-    height: 271px;
+    width: 630px;
+    height: 284px;
 }
 
 .frictionless-quick-action .dropzone-bg {

express/blocks/hero-color/hero-color.js

@@ -106,9 +106,7 @@ function resizeSvgOnMediaQueryChange() {
 }
 
 function decorateCTA(block) {
-  const primaryCta = block.querySelector('.text-container a:last-child');
-  primaryCta?.classList.add('button', 'accent', 'primaryCta', 'same-fcta');
-  primaryCta?.parentElement?.classList.add('button-container');
+  const primaryCta = block.querySelector('.text-container a.button');
   if (!primaryCta) return;
 
   primaryCta.classList.add('primaryCta');

express/blocks/how-to-cards/how-to-cards.css

@@ -0,0 +1,194 @@
+.section:not(:first-of-type) .how-to-cards:first-child {
+    padding-top: 60px;
+}
+
+.how-to-cards {
+    max-width: 1440px;
+    margin: auto;
+}
+
+.how-to-cards h3 {
+    font-size: var(--heading-font-size-s);
+    text-align: left;
+    line-height: 26px;
+    margin-top: 0;
+}
+
+.how-to-cards .text h2,
+.how-to-cards .text p {
+    text-align: left;
+    padding: 0 16px;
+}
+
+.how-to-cards .cards-container {
+    margin: 0;
+}
+
+.how-to-cards .card {
+    flex: 0 0 auto;
+    box-sizing: border-box;
+    padding: 24px;
+    border-radius: 12px;
+    background-color: var(--color-gray-150);
+    list-style: none;
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+}
+
+.how-to-cards .card p {
+    font-size: var(--body-font-size-s);
+    text-align: left;
+    margin: 4px 0;
+}
+
+.how-to-cards .number {
+    position: relative;
+    font-weight: 700;
+    border-radius: 50%;
+    background-color: white;
+    width: 34px;
+    height: 34px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    overflow: hidden;
+}
+
+.how-to-cards .number-txt {
+    z-index: 1;
+}
+
+.how-to-cards .number-bg {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    height: 0;
+    width: 100%;
+    transition: height .5s cubic-bezier(0.19, 1, 0.22, 1);
+    background-color: black;
+}
+
+.how-to-cards .card:hover,
+.how-to-cards .card:focus {
+    background-color: var(--color-gray-200);
+    transition: background-color .5s cubic-bezier(0.19, 1, 0.22, 1);
+}
+
+.how-to-cards .card:not(:hover) {
+    transition: background-color .2s cubic-bezier(0.19, 1, 0.22, 1);
+}
+
+.how-to-cards .card:hover .number-bg,
+.how-to-cards .card:focus .number-bg {
+    height: 100%;
+    transition: height .5s cubic-bezier(0.19, 1, 0.22, 1);
+}
+
+.how-to-cards .card:not(:hover) .number-bg {
+    transition: height .2s cubic-bezier(0.19, 1, 0.22, 1);
+}
+
+.how-to-cards .card:hover .number-txt,
+.how-to-cards .card:focus .number-txt {
+    color: white;
+    transition: color .1s linear;
+}
+
+@media (min-width: 480px) {
+    .how-to-cards .card {
+        width: 308px;
+    }
+}
+
+.gallery {
+    display: flex;
+    flex-wrap: nowrap;
+    gap: 16px;
+    overflow-x: scroll;
+    scrollbar-width: none;
+    scroll-snap-type: x mandatory;
+    scroll-behavior: smooth;
+    padding: 0 16px;
+    scroll-padding: 0 16px;
+}
+
+.gallery::-webkit-scrollbar {
+    -webkit-appearance: none;
+    width: 0;
+    height: 0;
+}
+
+.gallery.center.gallery--all-displayed {
+    justify-content: center;
+}
+
+.gallery--item {
+    scroll-snap-align: start;
+    width: calc(100% - 16px);
+}
+
+.gallery-control {
+    padding: 16px 16px 0;
+    display: flex;
+    justify-content: flex-end;
+    gap: 8px;
+    align-items: center;
+}
+
+.gallery-control.hide,
+.gallery-control .hide {
+    display: none;
+}
+
+.gallery-control.loading {
+    visibility: hidden;
+}
+
+.gallery-control button {
+    all: unset;
+    cursor: pointer;
+    height: 2rem;
+    box-shadow: 0px 2px 8px 0px #00000029;
+    border-radius: 50px;
+}
+
+.gallery-control button:focus {
+    outline: revert;
+}
+
+.gallery-control button:hover:not(:disabled) circle {
+    fill: var(--color-gray-300);
+}
+
+.gallery-control button:disabled {
+    cursor: auto;
+}
+
+.gallery-control button:disabled path {
+    stroke: var(--color-gray-300);
+}
+
+.gallery-control .status {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    background-color: white;
+    box-shadow: 0px 2px 8px 0px #00000029;
+    padding: 8px 16px;
+    border-radius: 50px;
+    height: 32px;
+    box-sizing: border-box;
+}
+
+.gallery-control .status .dot {
+    border-radius: 50px;
+    width: 6px;
+    height: 6px;
+    background-color: #717171;
+}
+
+.gallery-control .status .dot.curr {
+    width: 30px;
+    background-color: #686DF4;
+}