feat(content-band-checkmarks): Content band checkmarks block changes (#…

…300) * feat(content-band-list-block): Content checkmarks block changes. * feat(content-band-list-block): Content checkmarks width changes. * feat(content-band-list-block): variable name additions. * feat(content-band-list-block): content checkmarks block vide implementation. * feat(content-band-list-block): styles css lint fix. * Update blocks/content-band-checkmarks/content-band-checkmarks.css * Update blocks/content-band-checkmarks/content-band-checkmarks.css --------- Co-authored-by: Putra Bonaccorsi <[email protected]>
hlxsites · Aug 11, 2023 · 6259710 · 6259710
1 parent e783f18
commit 6259710
Show file tree

Hide file tree

Showing 3 changed files with 198 additions and 0 deletions.
diff --git a/blocks/content-band-checkmarks/content-band-checkmarks.css b/blocks/content-band-checkmarks/content-band-checkmarks.css
@@ -0,0 +1,157 @@
+.content-band-checkmarks > div > div:first-child > p:first-child {
+    font-family: var(--sans-serif-font-medium);
+    font-size: var(--font-size-11);
+    font-weight: var(--font-weight-medium);
+    line-height: var(--line-height-120);
+    letter-spacing: var(--letter-spacing-02-em);
+    margin: 0 0 var(--spacer-element-07) 0;
+}
+
+.content-band-checkmarks > div > div:first-child > h2 {
+    font-family: var(--serif-font);
+    font-size: var(--font-size-32);
+    font-weight: var(--font-weight-light);
+    line-height: var(--line-height-120);
+    letter-spacing: var(--letter-spacing-1-75);
+    margin: 0 0 var(--spacer-element-08) 0;
+}
+
+.content-band-checkmarks > div > div:first-child > p:not(:first-child):not(.button-container) {
+    font-family: var(--sans-serif-font-light);
+    font-size: var(--font-size-16);
+    font-weight: var(--font-weight-light);
+    line-height: var(--line-height-160);
+    letter-spacing: var(--letter-spacing-001-em);
+    margin: 0 0 var(--spacer-element-08) 0;
+}
+
+.content-band-checkmarks > div > div:first-child > .button-container {
+    margin: 0 0 var(--spacer-layout-04);
+}
+
+.content-band-checkmarks > div > div:first-child > .button-container button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    font-family: var(--sans-serif-font-medium);
+    font-weight: var(--font-weight-medium);
+    text-decoration: none;
+    background: var(--primary-purple);
+    color: var(--neutral-white);
+    border-radius: 40px;
+    border-style: none;
+}
+
+.content-band-checkmarks > div > div:first-child > .button-container button.open-video::after {
+    content: '';
+    background: url("./../../icons/play-button.svg") no-repeat;
+    background-size: contain;
+    height: var(--spacer-element-05);
+    width: 10px;
+    margin-left: var(--spacer-element-07);
+}
+
+.content-band-checkmarks > div > div:first-child > .button-container button.open-video:hover {
+    background: var(--gradient-left-right);
+}
+
+.content-band-checkmarks > div > div:first-child > .button-container > strong > a, .content-band-checkmarks > div > div:first-child > .button-container > strong > button {
+    font-family: var(--sans-serif-font-medium);
+    font-size: var(--font-size-16);
+    font-weight: var(--font-weight-medium);
+    line-height: var(--line-height-160);
+    letter-spacing: var(--letter-spacing-1);
+    padding: var(--spacer-element-05) var(--spacer-element-07);
+}
+
+.content-band-checkmarks > div > div:nth-child(2) > ul {
+    margin: 0;
+    padding: 0;
+}
+
+.content-band-checkmarks > div > div:nth-child(2) > ul > li {
+    font-family: var(--sans-serif-font-medium);
+    font-size: var(--font-size-18);
+    font-weight: var(--font-weight-medium);
+    line-height: var(--line-height-160);
+    letter-spacing: var(--letter-spacing-001-em);
+    margin: 0 0 var(--spacer-element-05);
+    padding: 0 var(--spacer-element-07);
+    height: var(--spacer-layout-04);
+    display: flex;
+    align-items: center;
+}
+
+main > .section.section-header.list-section.bg-neutral-bone > .content-band-checkmarks-wrapper > .content-band-checkmarks > div > div:nth-child(2) > ul > li {
+    background-color: var(--neutral-white);
+}
+
+.content-band-checkmarks > div > div:nth-child(2) > ul > li::before {
+    margin-right: var(--spacer-element-07);
+}
+
+
+/* Tablet CSS */
+@media (min-width: 768px) {
+    .content-band-checkmarks > div > div:first-child > h2 {
+        max-width: 516px;
+    }
+
+    .content-band-checkmarks > div > div:first-child > p:not(:first-child):not(.button-container) {
+        max-width: 516px;
+    }
+
+    .content-band-checkmarks > div > div:nth-child(2) > ul {
+        display: grid;
+        grid-template-columns: repeat(2, 1fr);
+        grid-template-rows: repeat(3, 1fr);
+        grid-auto-flow: column;
+        column-gap: var(--gap-24);
+    }
+
+}
+
+/* Desktop css */
+@media (min-width: 1200px) {
+    .content-band-checkmarks > div {
+        display: flex;
+        gap: var(--gap-120);
+    }
+
+    .content-band-checkmarks > div:not(.video-modal) > div:first-child {
+        max-width: 644px;
+    }
+
+    .content-band-checkmarks > div > div:first-child > p:first-child{
+        font-size: var(--font-size-14);
+        letter-spacing: var(--letter-spacing-02-em);
+    }
+
+    .content-band-checkmarks > div > div:first-child > h2 {
+        font-size: var(--font-size-45);
+        letter-spacing: var(--letter-spacing-1-75);
+        max-width: 100%;
+    }
+
+    .content-band-checkmarks > div > div:nth-child(2) > ul > li {
+        font-size: var(--font-size-21);
+        height: 64px;
+        width: 360px;
+    }
+
+    .content-band-checkmarks > div > div:first-child > p:not(:first-child):not(.button-container) {
+        font-size: var(--font-size-21);
+        letter-spacing: var(--letter-spacing-001-em);
+        max-width: 100%;
+    }
+
+    .content-band-checkmarks > div:not(.video-modal) > div:nth-child(2) {
+        max-width: 360px;
+    }
+
+    .content-band-checkmarks > div > div:nth-child(2) > ul {
+        display: block;
+    }
+
+}
diff --git a/blocks/content-band-checkmarks/content-band-checkmarks.js b/blocks/content-band-checkmarks/content-band-checkmarks.js
@@ -0,0 +1,40 @@
+import { createTag } from '../../scripts/scripts.js';
+import { getVideoType, buildVideoModal, toggleVideoOverlay } from '../video/video.js';
+
+const decorateVideoLink = (link, videoType, label = 'Play') => {
+  let playBtn = link;
+  if (videoType !== 'external') {
+    // Create a new <button> element
+    playBtn = createTag(
+      'button',
+      { class: 'open-video', type: 'button', 'aria-label': 'Play video' },
+    );
+    link.parentElement.appendChild(playBtn);
+    link.parentElement.removeChild(link);
+  } else {
+    link.setAttribute('target', '_blank');
+    link.classList.add('open-video');
+  }
+  playBtn.innerHTML = `<span>${label}</span>`;
+  return playBtn;
+};
+
+export default function decorate(block) {
+  // decorate video link
+  const videoLink = block.querySelector('a');
+  let videoHref;
+  if (videoLink) {
+    videoHref = videoLink.href;
+    const videoType = getVideoType(videoHref);
+    const playButton = decorateVideoLink(videoLink, videoType, videoLink.textContent);
+    if (videoType !== 'external') {
+      const videoModal = buildVideoModal(videoHref, videoType);
+      const videoClose = videoModal.querySelector('button.video-modal-close');
+      videoClose.addEventListener('click', () => toggleVideoOverlay(block));
+      block.append(videoModal);
+
+      // Display video overlay when play button is pressed
+      playButton.addEventListener('click', () => toggleVideoOverlay(block));
+    }
+  }
+}
diff --git a/styles/styles.css b/styles/styles.css
@@ -193,6 +193,7 @@
   --sticky-nav-height: 80px;
 
   /* gap spacers */
+  --gap-24: 24px;
   --gap-48: 48px;
   --gap-84: 84px;
   --gap-120: 120px;