Career testimonials hero block (#34)

* Career testimonials hero block
* Added Visual test
* Add career-hero to LCP list

Fixes #15

---------

Co-authored-by: Satya Deep Maheshwari <[email protected]>

.github/workflows/visual-tests.yaml

@@ -5,7 +5,7 @@ on:
     types: [ opened, synchronize ]
 
 env:
-  TEST_PATHS: "/"
+  TEST_PATHS: "/ /career/yuya-yoshisue"
   TEST_PATHS_INDEXES: "/sidekick/library.json "
   DOMAIN_MAIN: "main--sunstar--hlxsites.hlx.page"
   DOMAIN_BRANCH: "${{github.head_ref}}--sunstar--hlxsites.hlx.page"

blocks/career-hero/career-hero.css

@@ -0,0 +1,150 @@
+.career-hero {
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: 58%;
+}
+
+.career-hero .career-hero-top {
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+    height: auto;
+    max-width: 75rem;
+}
+
+.career-hero .career-hero-left {
+    color: var(--white);
+    margin: 3rem 0;
+    text-align: center;
+    width: 155px;
+}
+
+.career-hero .career-hero-photo {
+    margin-bottom: 1rem;
+}
+
+.career-hero .career-hero-photo img {
+    height: 10.75rem;
+    width: auto;
+}
+
+.career-hero .career-hero-name {
+    color: var(--white);
+    font-size: var(--heading-font-size-xxs);
+    letter-spacing: 0.9px;
+    margin-bottom: 14px;
+    padding-top: 0.5rem;
+    text-transform: unset;
+}
+
+.career-hero .career-hero-title {
+    font-size: var(--body-font-size-xs);
+}
+
+.career-hero .career-hero-right {
+    color: var(--white);
+    background-color: var(--primary);
+    width: 100vw;
+    padding-block: 50px;
+    margin-top: 0;
+}
+
+.career-hero .career-hero-quote {
+    font-size: var(--heading-font-size-s);
+    font-style: var(--font-style-normal);
+    line-height: 32px;
+    margin: 24px 16px 62px;
+    position: relative;
+    text-indent: 0;
+}
+
+.career-hero .career-hero-quote::before {
+    content: '“';
+    font-size: 90px;
+    line-height: 1;
+    opacity: 0.7;
+    position: absolute;
+    top: -44px;
+}
+
+.career-hero .career-hero-quote::after {
+    content: '”';
+    font-size: 90px;
+    line-height: 1;
+    opacity: 0.7;
+    position: absolute;
+    bottom: -84px;
+    right: 0;
+}
+
+.career-hero .career-hero-careerbgtitle {
+    color: white;
+    font-size: var(--heading-font-size-xs);
+    font-weight: var(--font-weight-bold);
+    letter-spacing: 1px;
+    margin: 0 16px 14px;
+    text-transform: unset;
+}
+
+.career-hero .career-hero-careerbg {
+    font-size: var(--heading-font-size-xxs);
+    line-height: 22px;
+    margin-inline: 16px;
+}
+
+@media (min-width: 62rem) {
+    .career-hero {
+        background-position: center;
+    }
+
+    .career-hero .career-hero-top {
+        flex-direction: row;
+        align-items: unset;
+        height: 700px;
+        margin-inline: auto;
+    }
+
+    .career-hero .career-hero-left {
+        width: 21rem;
+        margin-top: 5rem;
+        margin-right: 4rem;
+    }
+
+    .career-hero .career-hero-photo img {
+        height: 296px;
+    }
+
+    .career-hero .career-hero-name {
+        font-size: var(--heading-font-size-xs);
+        padding-top: 0;
+    }
+
+    .career-hero .career-hero-title {
+        font-size: var(--body-font-size-s);
+    }
+
+    .career-hero .career-hero-right {
+        background-color: unset;
+        margin-top: 120px;
+        padding-top: unset;
+        width: calc(100% - 336px - 4rem);
+    }
+
+    .career-hero .career-hero-quote {
+        font-size: var(--heading-font-size-xl);
+        line-height: 59px;
+        margin: 0 0 97px;
+    }
+
+    .career-hero .career-hero-careerbgtitle {
+        font-size: var(--heading-font-size-m);
+        letter-spacing: 1.2px;
+        margin: 0 0 13px;
+    }
+
+    .career-hero .career-hero-careerbg {
+        font-size: var(--body-font-size-m);
+        line-height: 32px;
+        margin: 0;
+    }
+}

blocks/career-hero/career-hero.js

@@ -0,0 +1,59 @@
+import { readBlockConfig } from '../../scripts/lib-franklin.js';
+import { getNamedValueFromTable } from '../../scripts/scripts.js';
+
+function addImage(mediaRow, target, ...classes) {
+  const mediaDiv = document.createElement('div');
+  classes.forEach((c) => mediaDiv.classList.add(c));
+  const pictureTag = mediaRow.querySelector('picture');
+  mediaDiv.appendChild(pictureTag);
+  target.appendChild(mediaDiv);
+
+  return mediaDiv;
+}
+
+function deleteConfigBlock(block, firstNonCfgEl) {
+  while (block.children.length > 0 && block.children[0] !== firstNonCfgEl) {
+    block.children[0].remove();
+  }
+}
+
+function addTextEl(tag, txt, parent, ...classes) {
+  const newDiv = document.createElement(tag);
+  newDiv.textContent = txt;
+  classes.forEach((c) => newDiv.classList.add(c));
+  parent.appendChild(newDiv);
+}
+
+export default function decorate($block) {
+  const section = document.querySelector('.section.career-hero-container');
+  if (section) {
+    section.classList.add('full-width');
+  }
+
+  const cfg = readBlockConfig($block);
+
+  const bgimg = cfg['hero-background'];
+  const s = `background-image: url(${bgimg})`;
+  $block.style = s;
+
+  const heroDiv = document.createElement('div');
+  heroDiv.classList.add('career-hero-top');
+  $block.appendChild(heroDiv);
+
+  const heroLeft = document.createElement('div');
+  heroLeft.classList.add('career-hero-left');
+  heroDiv.appendChild(heroLeft);
+  const photo = getNamedValueFromTable($block, 'photo');
+  addImage(photo, heroLeft, 'career-hero-photo');
+  addTextEl('h6', cfg.name, heroLeft, 'career-hero-name');
+  addTextEl('p', cfg.title, heroLeft, 'career-hero-title');
+
+  const heroRight = document.createElement('div');
+  heroRight.classList.add('career-hero-right');
+  heroDiv.appendChild(heroRight);
+  addTextEl('blockquote', cfg.quote, heroRight, 'career-hero-quote');
+  addTextEl('h6', 'Career background', heroRight, 'career-hero-careerbgtitle'); // TODO i18n
+  addTextEl('p', cfg['career-background'], heroRight, 'career-hero-careerbg');
+
+  deleteConfigBlock($block, heroDiv);
+}

scripts/scripts.js

@@ -22,6 +22,7 @@ const LCP_BLOCKS = [
   'hero-vertical-tabs',
   'overlapping-content',
   'carousel',
+  'career-hero',
 ]; // add your LCP blocks to the list
 const SKIP_FROM_LCP = ['breadcrumb']; // add blocks that shouldn't ever be LCP candidates to the list
 // search for at least these many blocks (post-skipping-non-candidates) to find LCP candidates