Pencil Promo block #108

blocks/v2-all-trucks/v2-all-trucks.css

@@ -285,7 +285,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%;

blocks/v2-pencil-promo/v2-pencil-promo.css

@@ -0,0 +1,181 @@
+.redesign-v2 .section .v2-pencil-promo-wrapper:not(.full-width) {
+  padding: 0 16px;
+}
+
+.v2-pencil-promo {
+  --text-color: var(--c-primary-white);
+}
+
+/* Generic block styles */
+.v2-pencil-promo.v2-pencil-promo__promo-banner--with-image {
+  margin: 24px 0;
+}
+
+.v2-pencil-promo:hover {
+  cursor: pointer;
+}
+
+.v2-pencil-promo p:hover {
+  color: var(--text-color);
+}
+
+.v2-pencil-promo__content a {
+  color: var(--text-color);
+  text-decoration: underline;
+  text-decoration-color: var(--c-accent-red);
+  text-underline-offset: 8px;
+}
+
+.v2-pencil-promo__promo-banner a {
+  display: none;
+}
+
+.v2-pencil-promo__content-wrapper:hover .v2-pencil-promo__content a {
+  text-decoration-color: var(--text-color);
+}
+
+.v2-pencil-promo__image {
+  display: block;
+  width: 100%;
+}
+
+.v2-pencil-promo__pencil-banner .v2-pencil-promo__content-wrapper {
+  max-width: var(--wrapper-width);
+  margin: 0 auto;
+}
+
+/* Pencil banner styles */
+.v2-pencil-promo__pencil-banner {
+  background: var(--c-primary-black);
+  color: var(--text-color);
+}
+
+.v2-pencil-promo__pencil-banner .v2-pencil-promo__content {
+  padding: 30px 16px;
+  width: 100%;
+}
+
+.v2-pencil-promo__pencil-banner .v2-pencil-promo__content p {
+  display: inline;
+  font: 1.5625rem/117% var(--ff-subheadings-medium);
+  letter-spacing: .25px;
+}
+
+.v2-pencil-promo__pencil-banner .icon svg {
+  --color-icon: var(--text-color);
+
+  position: absolute;
+  margin-left: 10px;
+  width: 24px;
+  height: 24px;
+}
+
+.v2-pencil-promo--pencil-banner-copper {
+  background: var(--c-accent-copper);
+}
+
+/* stylelint-disable-next-line no-descending-specificity */
+.v2-pencil-promo--pencil-banner-copper .v2-pencil-promo__content a {
+  text-decoration-color: var(--text-color);
+}
+
+.v2-pencil-promo--pencil-banner-copper .v2-pencil-promo__content-wrapper:hover .v2-pencil-promo__content a {
+  text-decoration-color: var(--c-primary-black);
+}
+
+/* Promo banner styles */
+.v2-pencil-promo__promo-banner .v2-pencil-promo__content-wrapper {
+  width: 100%;
+  height: 100%;
+  background: var(--c-primary-gold);
+}
+
+.v2-pencil-promo__promo-banner .v2-pencil-promo__content {
+  display: flex;
+  justify-content: end;
+  align-items: flex-end;
+  width: 100%;
+  height: 100%;
+  background: var(--c-secondary-graphite);
+  margin-bottom: 24px;
+}
+
+.v2-pencil-promo__promo-banner .v2-pencil-promo__content > p {
+  background: var(--c-secondary-graphite);
+  padding: 12px 16px;
+  font: var(--headline-5-font-size)/var(--headline-5-line-height) var(--ff-subheadings-medium);
+  max-width: 343px;
+  margin: 0;
+  color: var(--text-color);
+}
+
+/* stylelint-disable-next-line selector-not-notation */
+.v2-pencil-promo__promo-banner .v2-pencil-promo__content > p:not(:first-child):not(.icon) {
+  padding: 0;
+}
+
+.v2-pencil-promo__promo-banner .icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 76px;
+  height: 76px;
+}
+
+.v2-pencil-promo__promo-banner .icon svg {
+  --color-icon: var(--text-color);
+
+  width: 24px;
+  height: 24px;
+}
+
+.v2-pencil-promo--promo-banner-copper .icon {
+  background: var(--c-accent-copper);
+}
+
+.v2-pencil-promo--promo-banner-gold .icon {
+  background: var(--color-icon-accent);
+}
+
+@media (min-width: 568px) {
+  .v2-pencil-promo__pencil-banner .v2-pencil-promo__content {
+    width: 512px;
+  }
+}
+
+@media (min-width: 1072px) {
+  .v2-pencil-promo__pencil-banner .v2-pencil-promo__content {
+    padding: 30px 0;
+  }
+}
+
+@media (min-width: 1200px) {
+  .v2-pencil-promo__pencil-banner .v2-pencil-promo__content {
+    padding: 40px 0;
+  }
+
+  .redesign-v2 .section .v2-pencil-promo-wrapper:not(.full-width) {
+    padding: 0;
+  }
+
+  .v2-pencil-promo__promo-banner {
+    position: relative;
+  }
+
+  .v2-pencil-promo__promo-banner .v2-pencil-promo__content > p {
+    font-size: var(--headline-4-font-size);
+  }
+
+  .v2-pencil-promo__promo-banner .v2-pencil-promo__content-wrapper {
+    position: absolute;
+    bottom: 0;
+    max-height: 76px;
+  }
+
+  .v2-pencil-promo__promo-banner .v2-pencil-promo__content,
+  .v2-pencil-promo__promo-banner .v2-pencil-promo__content > p,
+  .v2-pencil-promo__promo-banner .v2-pencil-promo__content-wrapper {
+    background: none;
+  }
+}
+

blocks/v2-pencil-promo/v2-pencil-promo.js

@@ -0,0 +1,85 @@
+import {
+  getImageURLs,
+  createResponsivePicture,
+  variantsClassesToBEM,
+  createElement,
+} from '../../scripts/common.js';
+
+export default async function decorate(block) {
+  const blockName = 'v2-pencil-promo';
+  // variant pencil banner black is default
+  const variantClasses = ['pencil-banner-black', 'pencil-banner-copper', 'promo-banner-gold', 'promo-banner-copper'];
+  const indexVariant = variantClasses.findIndex((variant) => block.classList.contains(variant));
+  const currentVariant = (indexVariant >= 0 && variantClasses[indexVariant]) || variantClasses[0];
+  const isPencil = currentVariant.includes('pencil');
+  variantsClassesToBEM(block.classList, variantClasses, blockName);
+
+  block.classList.add(`${blockName}__${isPencil ? 'pencil' : 'promo'}-banner`);
+  if (isPencil) block.parentElement.classList.add('full-width');
+  else block.classList.add(`${blockName}__promo-banner--with-image`);
+
+  const bannerImage = block.querySelector('picture');
+  if (isPencil && bannerImage !== null) {
+    bannerImage.remove();
+  } else if (!isPencil) {
+    const images = [...block.querySelectorAll('p > picture')];
+    const imageURLs = getImageURLs(images);
+    const imageData = imageURLs.map((src) => ({ src, breakpoints: [] }));
+
+    const breakpoints0 = [
+      { media: '(min-width: 600px)', width: 600 },
+      { width: 750 },
+    ];
+
+    const breakpoints1 = [
+      { media: '(min-width: 1200px)', width: 1200 },
+      { media: '(min-width: 1440px)', width: 1440 },
+      { media: '(min-width: 1920px)', width: 1920 },
+    ];
+
+    if (images.length === 1) {
+      imageData[0].breakpoints = [...breakpoints0, ...breakpoints1];
+    } else if (images.length > 1) {
+      imageData[0].breakpoints = [...breakpoints0];
+      imageData[1].breakpoints = [...breakpoints1];
+    }
+
+    const altText = [...block.querySelectorAll('p > picture img.alt')];
+    const newPicture = createResponsivePicture(imageData, true, altText, `${blockName}__image`);
+    images.forEach((image) => image.parentNode.remove());
+
+    block.prepend(newPicture);
+  }
+
+  const contentWrapper = block.querySelector(':scope > div');
+  contentWrapper.classList.add(`${blockName}__content-wrapper`);
+
+  const content = block.querySelector(':scope > div > div');
+  content.classList.add(`${blockName}__content`);
+  if (content.querySelectorAll('p').length === 0) {
+    const p = createElement('p');
+    while (content.firstChild) {
+      p.appendChild(content.firstChild);
+    }
+    content.appendChild(p);
+  }
+
+  const ctaButtons = content.querySelectorAll('.button-container > a');
+  [...ctaButtons].forEach((b) => {
+    b.classList.remove('button', 'button--primary');
+    b.parentElement.classList.remove('button-container');
+    b.parentElement.removeAttribute('class');
+  });
+
+  const bannerLinks = block.querySelectorAll('a');
+
+  bannerLinks.forEach((link) => {
+    const closestParent = link.closest(`.${blockName}`);
+    closestParent.addEventListener('click', () => {
+      const linkHref = link.getAttribute('href');
+      if (linkHref) {
+        window.location.href = linkHref;
+      }
+    });
+  });
+}