Redesign release 4 (#559)

* change url and sharepoint to upstream urls * Release 4 (#211) * Update fstab.yaml for redesign * change url and sharepoint to upstream urls * Inpage navigation is in reversed order on Firefox #173 (#178) * fix Firefox issue with sorting * fix naming issues * refactor focus state, button styles * fix overlap issue * Hero V2 Block displays different images for mobile and desktop. #106 (#179) * refactor naming structure * refactor adaptive images mechanism * Icon cards block (#181) * #509 Fix displaying header on dealer page * fix done * one trust position ix * Embed block match NZ one * Update feed.xml * Fix createElement() v1-Cards * Update feed.xml * Update release.yml * columns block adapted * icon cards working * css clean * adjustements * last changes * specific class * btn state styling * comments corrected * secondary btn margin corrected * secondary btn class added * cleanup --------- Co-authored-by: Tomasz Dziezyk <[email protected]> Co-authored-by: TomaszDziezykNetcentric <[email protected]> Co-authored-by: Jonatan Lledo <[email protected]> Co-authored-by: aem-code-sync[bot] <aem-code-sync[bot]@users.noreply.github.com> Co-authored-by: Syb <[email protected]> * The pop-up of the video displayed clicking on the Play video button is smaller and the thumbnail is cutout #182 (#183) * iPhone/iPad - Icon Cards - The local video in the video pop-up cannot be played and is incorrectly displayed #184 (#185) * fix #184: use <video> tag for video in modal * fix modal close button * fix override fullscreen play for safari * refactor setting attributes * Opening up Images will display an incorrect default state on the Image grid carousel #169 (#193) * Hero variant for Solutions page #45 (#197) * hero variants added * refactored changes to alltrucks block * comments addressed * color confusion * make btn color always white * button style refactor * margin solved * pdp edge cases * Tabbed Carousel variant for wheelbase #190 (#196) * add new variant for tabbed carousel * 190 fadeIn effect with no scroll * 190 Fix line more than 100 chars * 190 fix index overflow * Figcap conditional add, default color & tab items wider * list style none & setCarousel index-1 too --------- Co-authored-by: Jonatan Lledo <[email protected]> * Pencil Promo block #108 (#195) * #108 - Pencil promo and banner promo block * #108 - Add cursor: pointer to the block * #108 - Add pencil banner links styles * #108 - Change link hover color to acheive better contrast * Applied comments & each block cares by itself only * fixed alignment issue in line 288 * fix lint issue * Fix an issue if p Element is not present inside content * Style issues fix * remove an unnecessary search for h1 & its styling * move the hover effect 1 level up & a bit of code clean up --------- Co-authored-by: Jonatan Lledo <[email protected]> * fix alignment, add hover and focus state * V2 Columns Block variation #133 (#186) --------- Co-authored-by: aem-code-sync[bot] <aem-code-sync[bot]@users.noreply.github.com> Co-authored-by: Lakshmishri <[email protected]> Co-authored-by: Syb Wartna <[email protected]> * Add "My Assets" functionality #201 (#202) * add my assets to sidekick * add custom viewport configurations for sidekick library * Powertrain V2 Slider Block #147 (#200) * add block * add new section background color --------- Co-authored-by: Syb <[email protected]> Co-authored-by: Syb Wartna <[email protected]> Co-authored-by: SantiagoHomps-NC <[email protected]> Co-authored-by: Tomasz Dziezyk <[email protected]> Co-authored-by: TomaszDziezykNetcentric <[email protected]> Co-authored-by: Jonatan Lledo <[email protected]> Co-authored-by: aem-code-sync[bot] <aem-code-sync[bot]@users.noreply.github.com> Co-authored-by: taimurCognizant <[email protected]> Co-authored-by: Lakshmishri <[email protected]> Co-authored-by: Marko Vukićević <[email protected]> * change url and sharepoint to upstream urls --------- Co-authored-by: Syb Wartna <[email protected]> Co-authored-by: Lakshmishri <[email protected]> Co-authored-by: Syb <[email protected]> Co-authored-by: SantiagoHomps-NC <[email protected]> Co-authored-by: Tomasz Dziezyk <[email protected]> Co-authored-by: TomaszDziezykNetcentric <[email protected]> Co-authored-by: Jonatan Lledo <[email protected]> Co-authored-by: aem-code-sync[bot] <aem-code-sync[bot]@users.noreply.github.com> Co-authored-by: taimurCognizant <[email protected]> Co-authored-by: Marko Vukićević <[email protected]>
Netcentric · Jan 31, 2024 · a9933c7 · a9933c7
1 parent 1eceb76
commit a9933c7
Show file tree

Hide file tree

Showing 25 changed files with 1,552 additions and 306 deletions.
diff --git a/blocks/v2-all-trucks/v2-all-trucks.css b/blocks/v2-all-trucks/v2-all-trucks.css
@@ -4,13 +4,6 @@
   margin-top: 35px;
 }
 
-.v2-all-trucks__title {
-  font-family: var(--ff-headline-medium);
-  letter-spacing: -.02em;
-  margin-bottom: 24px;
-  padding-top: 42px;
-}
-
 .redesign-v2 .section.v2-all-trucks-container .default-content-wrapper h1 + p {
   letter-spacing: .01rem;
   margin-bottom: 30px;
@@ -38,7 +31,6 @@
   width: 100%;
 }
 
-
 /* Trucks */
 .v2-all-trucks-container div.v2-all-trucks-wrapper {
   padding: 0;
@@ -285,7 +277,6 @@
 
   .v2-all-trucks .v2-all-trucks__truck .v2-all-trucks__truck-image picture:last-child {
     display: flex;
-    align-items: center;
     justify-content: center;
     overflow: hidden;
     width: 100%;
@@ -352,7 +343,7 @@
     width: auto;
   }
 
-  .v2-all-trucks__selected-item-wrapper { 
+  .v2-all-trucks__selected-item-wrapper {
     display: none;
   }
 

diff --git a/blocks/v2-all-trucks/v2-all-trucks.js b/blocks/v2-all-trucks/v2-all-trucks.js
@@ -4,9 +4,6 @@ import { createElement, getTextLabel } from '../../scripts/common.js';
 const blockName = 'v2-all-trucks';
 
 export default function decorate(block) {
-  const pageDescriptionHeading = document.querySelector(`.${blockName}-container > div > h1`);
-  pageDescriptionHeading.classList.add('with-marker', `${blockName}__title`);
-
   const truckElement = block.querySelectorAll(`.${blockName} > div`);
   truckElement.forEach((div) => {
     div.classList.add(`${blockName}__truck`);

diff --git a/blocks/v2-columns/v2-columns.css b/blocks/v2-columns/v2-columns.css
@@ -1,3 +1,7 @@
+.v2-columns-container.section--with-background {
+  position: relative;
+}
+
 .v2-columns__row {
   flex-direction: column;
   display: flex;
@@ -32,6 +36,7 @@
   display: flex;
   flex-direction: column;
   padding: 40px 0;
+  gap: 12px;
 }
 
 .v2-columns__heading {
@@ -44,12 +49,17 @@
 }
 
 .v2-columns__column--with-text .v2-columns__heading {
-  margin: 12px 0;
+  margin: 0;
+}
+
+.v2-columns__column--with-text .pretitle {
+  margin-bottom: 12px;
 }
 
 .v2-columns__column--with-text .v2-columns__body {
   font-size: var(--body-1-font-size);
-  margin: 0 0 32px;
+  margin-top: 0;
+  margin-bottom: 0;
 }
 
 .v2-columns__column--with-text .v2-columns__body a {
@@ -58,50 +68,20 @@
   text-decoration: none;
 }
 
-.v2-columns__column--with-text a.button {
-  width: fit-content;
-  margin-top: 12px;
-}
-
-.v2-columns__column--with-text a.button:not(a.button:first-of-type) {
-  margin: 5px 0 0;
-}
-
-.v2-columns--info .v2-columns__column {
-  gap: 8px;
-}
-
-.v2-columns--info .icon {
-  margin-bottom: 8px;
-}
-
-.v2-columns--info .v2-columns__heading {
-  margin: 0;
-}
-
-.v2-columns--info .v2-columns__body {
-  margin: 0 0 22px;
-}
-
-.v2-columns--info .v2-columns__column--info-main {
-  gap: 24px;
+.v2-columns__column--with-text .button-container {
+  margin: 12px 0 0;
+  display: flex;
+  flex-direction: row;
+  gap: 16px;
 }
 
-.v2-columns--info .v2-columns__column--info-main .v2-columns__heading {
-  padding-top: 24px;
+.v2-columns__column--with-text a.button {
+  min-width: auto;
   margin: 0;
 }
 
-.v2-columns--info .v2-columns__column--with-text {
-  padding: 0;
-}
-
-.v2-columns--info .v2-columns__row {
-  gap: 40px;
-}
-
-.v2-columns--info .v2-columns__button {
-  margin-bottom: 16px;
+.v2-columns-container:not(.v2-columns-container--with-background-image) .v2-columns__column--with-text a.button:not(a.button:first-of-type) {
+  margin: 5px 0 0;
 }
 
 @media (min-width: 744px) {
@@ -123,42 +103,73 @@
     order: unset;
   }
 
-  .v2-columns:not(.v2-columns--info) .v2-columns__column--with-text {
+  .v2-columns .v2-columns__column--with-text {
     padding: 0 56px;
   }
 
-  .v2-columns:not(.v2-columns--info) .v2-columns__column--with-text .v2-columns__heading {
-    margin: 24px 0 12px;
+  .v2-columns .v2-columns__column--with-text .v2-columns__heading {
     font-size: var(--headline-1-font-size);
   }
 
-  .v2-columns__column--with-text .v2-columns__body {
-    margin: 0 0 14px;
+  .v2-columns__column--with-text ul.v2-columns__body {
+    margin: 0;
   }
+}
 
-  .v2-columns--info .v2-columns__row {
-    justify-content: space-between;
-    align-items: flex-start;
-  }
+/* TRUCKS VARIATIONS STYLING */
 
-  .v2-columns--info .v2-columns__body:last-child {
-    margin: 0;
+.redesign-v2 .v2-columns-container--with-background-image .v2-columns-wrapper {
+  padding: 40px 16px;
+  width: 100%;
+}
+
+.redesign-v2 .section--with-background.v2-columns-container--with-background-image > picture img {
+  position: relative;
+  aspect-ratio: 1;
+}
+
+.v2-columns-container--with-background-image .v2-columns__column--with-text {
+  padding: 24px 0 0;
+}
+
+.v2-columns.v2-columns--with-background-image .v2-columns__heading.with-marker::before {
+  top: -24px;
+}
+
+
+/* stylelint-disable-next-line no-descending-specificity */
+.v2-columns.v2-columns--with-background-image .button-container a.button,
+.v2-columns.v2-columns--with-background-image .button-container a.button:not(a.button:first-of-type) {
+  width: 100%;
+}
+
+@media (min-width: 744px) {
+  .v2-columns__column--with-text .button-container {
+    margin: 20px 0 0;
   }
 
-  .v2-columns--info .v2-columns__column {
-    max-width: 245px;
+  .redesign-v2 .v2-columns-container--with-background-image .v2-columns-wrapper {
+    background-color: var(--c-primary-white);
+    position: absolute;
+    top: calc(200% * 0.125);
+    max-width: 485px;
+    padding: 40px;
+    margin-left: 72px;
   }
 
-  .v2-columns--info .v2-columns__column--info-main {
-    align-self: center;
-    max-width: 329px;
-    width: 100%;
+  .v2-columns.v2-columns--with-background-image .button-container a.button,
+  .v2-columns.v2-columns--with-background-image .button-container a.button:not(a.button:first-of-type) {
+    max-width: 140px;
   }
 }
 
 @media (min-width: 1200px) {
-  .v2-columns--info {
-    padding: 20px 40px;
-    background: var(--c-primary-white);
+  .redesign-v2 .v2-columns-container--with-background-image .v2-columns-wrapper {
+    left: calc(calc(100% - var(--wrapper-width)) / 2);
+    margin-left: 56px;
+  }
+
+  .redesign-v2 .section--with-background.v2-columns-container--with-background-image > picture img {
+    aspect-ratio: 12 / 7;
   }
 }
diff --git a/blocks/v2-columns/v2-columns.js b/blocks/v2-columns/v2-columns.js
@@ -1,10 +1,15 @@
-import { createElement, variantsClassesToBEM } from '../../scripts/common.js';
+import { variantsClassesToBEM, createElement } from '../../scripts/common.js';
 
 export default async function decorate(block) {
+  const blockParent = block.parentElement.parentElement;
   const blockName = 'v2-columns';
-  const variantClasses = ['info'];
+
+  const variantClasses = ['with-background-image'];
   variantsClassesToBEM(block.classList, variantClasses, blockName);
 
+  const isBackgroundImageVariant = block.classList.contains(`${blockName}--with-background-image`);
+  const hasHeader = blockParent.classList.contains('header-with-mark');
+
   const rows = [...block.querySelectorAll(':scope > div')];
   const columns = [...block.querySelectorAll(':scope > div > div')];
 
@@ -16,7 +21,7 @@ export default async function decorate(block) {
     col.classList.add(`${blockName}__column`);
 
     const picture = col.querySelector('picture');
-    const allTextElmts = col.querySelectorAll('p');
+    const allTextElmts = col.querySelectorAll('p, ul, ol');
     const bodyElmts = [];
 
     if (picture) {
@@ -35,14 +40,35 @@ export default async function decorate(block) {
     });
     bodyElmts.forEach((e) => e.classList.add(`${blockName}__body`));
 
+    block.querySelectorAll(`ul.${blockName}__body li`).forEach((item) => {
+      item.classList.add('li--hyphen');
+    });
     const buttons = [...col.querySelectorAll('.button-container a')];
-    buttons.forEach((btn) => {
-      btn.classList.add('button', 'button--large', 'button--primary');
 
-      if (btn.parentElement.classList.contains('button-container')) {
-        btn.parentElement.replaceWith(btn);
+    if (isBackgroundImageVariant) {
+      blockParent.classList.add(`${blockName}-container--with-background-image`);
+      const btnSection = createElement('div', { classes: 'button-container' });
+
+      buttons.forEach((btn) => {
+        btn.classList.add('button--large');
+        const btnContainer = btn.closest('.button-container');
+        btnContainer.replaceWith(btn);
+        btnSection.append(btn);
+      });
+      if (!picture) col.append(btnSection);
+
+      if (hasHeader) {
+        const defaultContent = blockParent.querySelector('.default-content-wrapper');
+        const header = [...defaultContent.querySelectorAll('h1, h2, h3, h4, h5, h6')];
+        header[0].classList.add(`${blockName}__body-header`, 'with-marker');
+        bodyElmts[0].insertAdjacentElement('beforebegin', header[0]);
+        defaultContent.remove();
       }
-    });
+    } else {
+      buttons.forEach((btn) => {
+        btn.classList.add('button--large');
+      });
+    }
 
     const headings = [...col.querySelectorAll('h1, h2, h3, h4, h5, h6')];
     headings.forEach((heading) => heading.classList.add(`${blockName}__heading`, 'h2'));
@@ -64,35 +90,4 @@ export default async function decorate(block) {
       prevEl.replaceWith(pretitle);
     }
   });
-
-  // logic for info variant
-  if (block.classList.contains(`${blockName}--info`)) {
-    const headings = [...block.querySelectorAll('h3, h4, h5, h6')];
-    const h2List = [...block.querySelectorAll('h2')];
-
-    headings.forEach((h) => {
-      h.classList.add('h5');
-      h.classList.remove('h2');
-    });
-
-    h2List.forEach((h) => {
-      h.classList.add('with-marker', 'h2');
-      h.classList.remove('h1');
-      h.closest(`.${blockName}__column`)?.classList.add(`${blockName}__column--info-main`);
-    });
-
-    // replacing headings (h3, h4, h5, h6) with strong so the block will not break semantic
-    // (example breaking semantic: col 1 -> h5, col 2 -> h2)
-    headings.forEach((heading) => {
-      const newHeadingEl = createElement('strong', { classes: [...heading.classList] });
-      newHeadingEl.innerHTML = heading.innerHTML;
-      heading.replaceWith(newHeadingEl);
-    });
-
-    const buttons = [...block.querySelectorAll('.button-container a')];
-    buttons.forEach((button) => {
-      button.classList.add('standalone-link', `${blockName}__button`);
-      button.classList.remove('button', 'button--primary', 'button--large');
-    });
-  }
 }