From ebf763ab3a7c503d6f18938c3ef65798237332cf Mon Sep 17 00:00:00 2001 From: David Bosschaert Date: Tue, 19 Sep 2023 10:29:07 +0100 Subject: [PATCH] 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 --- .github/workflows/visual-tests.yaml | 2 +- blocks/career-hero/career-hero.css | 150 ++++++++++++++++++++++++++++ blocks/career-hero/career-hero.js | 59 +++++++++++ scripts/scripts.js | 1 + 4 files changed, 211 insertions(+), 1 deletion(-) create mode 100644 blocks/career-hero/career-hero.css create mode 100644 blocks/career-hero/career-hero.js diff --git a/.github/workflows/visual-tests.yaml b/.github/workflows/visual-tests.yaml index 59c0fb0c..9e4ed9e6 100644 --- a/.github/workflows/visual-tests.yaml +++ b/.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" diff --git a/blocks/career-hero/career-hero.css b/blocks/career-hero/career-hero.css new file mode 100644 index 00000000..e8bf42fe --- /dev/null +++ b/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; + } +} \ No newline at end of file diff --git a/blocks/career-hero/career-hero.js b/blocks/career-hero/career-hero.js new file mode 100644 index 00000000..ae57d20d --- /dev/null +++ b/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); +} diff --git a/scripts/scripts.js b/scripts/scripts.js index be81e20a..ca531139 100644 --- a/scripts/scripts.js +++ b/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