Merge branch 'main' of github.com:Netcentric/vg-macktrucks-com-rd int…

…o buttons
Netcentric · Aug 11, 2023 · 7eaa7e9 · 7eaa7e9
2 parents f3acae5 + 57d6966
commit 7eaa7e9
Show file tree

Hide file tree

Showing 5 changed files with 177 additions and 13 deletions.
diff --git a/blocks/header/header.css b/blocks/header/header.css
@@ -3,7 +3,6 @@
   --nav-font-size-m: 16px;
   --nav-font-size-s: 14px;
   --nav-font-size-xs: 12px;
-  --nav-height: var(--nav-height-m);
   --nav-width: 1376px;
   --nav-ff: var(--ff-body-bold);
 }
@@ -317,10 +316,6 @@ header .studio-search-widget {
 
 @media (min-width: 1140px) {
   /* header and nav layout */
-  :root {
-    --nav-height: var(--nav-height-l);
-  }
-
   header nav {
     display: flex;
     justify-content: space-between;
@@ -475,4 +470,4 @@ header .studio-search-widget {
 
 .autosuggest-results-item-highlighted {
   background-color: #f2f2f2 !important;
-}
+}
diff --git a/blocks/v2-hero/v2-hero.css b/blocks/v2-hero/v2-hero.css
@@ -0,0 +1,76 @@
+/* stylelint-disable selector-class-pattern */
+.v2-hero {
+  /* height of the hero block is set in main style to prevent CLS */
+  position: relative;
+  overflow: hidden;
+}
+
+.v2-hero__image {
+  position: absolute;
+  object-fit: cover;
+  height: 100%;
+  object-position: center;
+  width: 100%;
+}
+
+.v2-hero__content-wrapper {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  justify-content: flex-end;
+}
+
+.v2-hero__content {
+  padding: 40px 16px;
+  display: flex;
+  flex-direction: column;
+  max-width: 1040px;
+}
+
+.v2-hero__heading {
+  margin: 24px 0;
+  color: var(--c-primary-white);
+  font-family: var(--ff-headline-medium);
+  font-size: 28px;
+  font-style: normal;
+  line-height: 120%;
+  letter-spacing: -0.56px;
+  max-width: 600px;
+}
+
+.v2-hero__cta-wrapper {
+  margin: 0;
+}
+
+.v2-hero .v2-hero__cta:any-link {
+  margin: 0;
+  padding: 2px 20px 0;
+  height: 48px;
+  display: inline-flex;
+  align-items: center;
+  color: var(--c-primary-white);
+  text-align: center;
+  font-family: var(--ff-subheadings-medium);
+  font-size: 14px;
+  font-style: normal;
+  line-height: 18px;
+  letter-spacing: 1.12px;
+  border-radius: 2px;
+}
+
+@media (min-width: 1200px) {
+  .v2-hero__content {
+    max-width: 1040px;
+    width: 1040px;
+    margin: 0 auto;
+    padding: 0 0 78px;
+  }
+
+  .v2-hero__heading {
+    margin: 18px 0 41px;
+    line-height: 1.15;
+    font-size: 45px;
+    letter-spacing: -0.9px;
+  }
+}
diff --git a/blocks/v2-hero/v2-hero.js b/blocks/v2-hero/v2-hero.js
@@ -0,0 +1,31 @@
+export default async function decorate(block) {
+  const heroClass = 'v2-hero';
+  const picture = block.querySelector('picture');
+  const img = picture.querySelector('img');
+  img.classList.add(`${heroClass}__image`);
+
+  if (picture.parentElement.tagName === 'P') {
+    picture.parentElement.remove();
+  }
+
+  const contentWrapper = block.querySelector(':scope > div');
+  contentWrapper.classList.add(`${heroClass}__content-wrapper`);
+
+  const content = block.querySelector(':scope > div > div');
+  content.classList.add(`${heroClass}__content`);
+
+  const headings = [...content.querySelectorAll('h1, h2, h3, h4, h5, h6')];
+  headings.forEach((h) => h.classList.add(`${heroClass}__heading`));
+
+  const firstHeading = headings[0];
+  firstHeading.classList.add('with-marker');
+
+  const ctaButtons = content.querySelectorAll('.button-container > a');
+  [...ctaButtons].forEach((b) => {
+    b.classList.add(`${heroClass}__cta`);
+    b.parentElement.classList.add(`${heroClass}__cta-wrapper`);
+  });
+
+  block.prepend(picture);
+  block.parentElement.classList.add('full-width');
+}
diff --git a/scripts/scripts.js b/scripts/scripts.js
@@ -181,7 +181,7 @@ export function createElement(tagName, classes = [], props = {}) {
 function buildHeroBlock(main) {
   const header = main.querySelector('h1');
   const picture = main.querySelector('picture');
-  const heroBlock = main.querySelector('.hero');
+  const heroBlock = main.querySelector('.hero, .v2-hero');
   if (heroBlock) return;
   // eslint-disable-next-line no-bitwise
   if (header && picture
@@ -629,5 +629,4 @@ allLinks.forEach((link) => {
 /* REDESING CLASS CHECK */
 if (getMetadata('style') === 'redesign-v2') {
   document.querySelector('html').classList.add('redesign-v2');
-  document.querySelector('main').classList.remove('redesign-v2');
 }
diff --git a/styles/styles.css b/styles/styles.css
@@ -13,7 +13,7 @@
 
 :root {
   /* Primary colors */
-  --c-primary-black: #000; 
+  --c-primary-black: #000;
   --c-primary-white: #fff;
   --c-primary-gold: #b3976b;
 
@@ -30,7 +30,7 @@
   --c-tertiary-light-warm-gray: #f7f6f3;
 
   /* Accent colors */
-  --c-accent-red: #cd1a0a; 
+  --c-accent-red: #cd1a0a;
   --c-accent-copper: #8f654d;
 
   /* Applied colors */
@@ -52,8 +52,8 @@
 
   /* Secondary */
   --button-secondary-gold-enabled: var(--c-primary-gold);
-  --button-secondary-gold-hover: #D9B781; 
-  --button-secondary-gold-pressed: #A18860;
+  --button-secondary-gold-hover: #d9b781;
+  --button-secondary-gold-pressed: #a18860;
   --button-secondary-gold-disabled: #e1dfdd;
 
   /* Tertiary */
@@ -187,6 +187,13 @@
   /* nav sizes */
   --nav-height-m: 60px;
   --nav-height-l: 85px;
+  --nav-height: var(--nav-height-m);
+}
+
+@media (min-width: 1140px) {
+  :root {
+    --nav-height: var(--nav-height-l);
+  }
 }
 
 *,
@@ -804,9 +811,12 @@ main .section.responsive-title h1 {
 
 /* REDESIGN GLOBAL STYLES */
 .redesign-v2 {
+  --v2-space-small: 16px;
+
   font-size: 16px;
 }
 
+/* REDESIGN Buttons */
 .redesign-v2 a.button.primary,
 .redesign-v2 button.primary,
 .redesign-v2 a.button.secondary,
@@ -898,4 +908,57 @@ main .section.responsive-title h1 {
 .redesign-v2 button.tertiary:active {
   background-color: var(--button-tertiary-white-pressed);
   border-color: #D9D9D9;
-}
+}
+
+/* stylelint-disable-next-line no-descending-specificity */
+.redesign-v2 .section {
+  padding: 40px 0;
+}
+
+/* stylelint-disable-next-line no-descending-specificity */
+.redesign-v2 .section > div {
+  padding: 0 var(--v2-space-small);
+  margin: 0 auto;
+}
+
+.redesign-v2 .section > .full-width {
+  padding: 0;
+  margin: 0;
+  width: 100%;
+  max-width: 100%;
+}
+
+.redesign-v2 main .section.padding-0 {
+  padding: 0;
+}
+
+.redesign-v2 .with-marker::before {
+  content: '';
+  margin: 0;
+  height: 0;
+  width: 45px;
+  border-bottom: 4px solid var(--c-accent-red);
+  display: block;
+  position: relative;
+  top: -18px;
+}
+
+@media (min-width: 1040px) {
+  .redesign-v2 .section {
+    padding: 80px 0;
+  }
+
+  .redesign-v2 .section > div {
+    padding: 0 200px;
+    margin: 0 auto;
+  }
+
+  .redesign-v2 .with-marker::before {
+    width: 65px;
+  }
+}
+
+/* CLS OPTIMIZATION */
+.v2-hero {
+  height: calc(100vh - var(--nav-height));
+}