Skip to content

Commit

Permalink
Rename career-hero to hero-career to follow hero block guidelines (#78)
Browse files Browse the repository at this point in the history
* Rename career-hero to hero-career to follow hero block guidelines

This also fixes a layout issue with this block
  • Loading branch information
bosschaert authored Sep 29, 2023
1 parent a26ae6d commit 6dcd4c4
Show file tree
Hide file tree
Showing 3 changed files with 79 additions and 83 deletions.
59 changes: 0 additions & 59 deletions blocks/career-hero/career-hero.js

This file was deleted.

Original file line number Diff line number Diff line change
@@ -1,34 +1,35 @@
.career-hero {
.hero-career {
background-size: cover;
background-repeat: no-repeat;
background-position: 58%;
height: 43.75rem;
}

.career-hero .career-hero-top {
.hero-career .hero-career-top {
align-items: center;
display: flex;
flex-direction: column;
height: auto;
max-width: 75rem;
}

.career-hero .career-hero-left {
.hero-career .hero-career-left {
color: var(--white);
margin: 3rem 0;
text-align: center;
width: 155px;
}

.career-hero .career-hero-photo {
.hero-career .hero-career-left picture {
margin-bottom: 1rem;
}

.career-hero .career-hero-photo img {
.hero-career .hero-career-left img {
height: 10.75rem;
width: auto;
}

.career-hero .career-hero-name {
.hero-career .hero-career-name {
color: var(--white);
font-size: var(--heading-font-size-xxs);
letter-spacing: 0.9px;
Expand All @@ -37,19 +38,19 @@
text-transform: unset;
}

.career-hero .career-hero-title {
.hero-career .hero-career-title {
font-size: var(--body-font-size-xs);
}

.career-hero .career-hero-right {
.hero-career .hero-career-right {
color: var(--white);
background-color: var(--primary);
width: 100vw;
padding-block: 50px;
margin-top: 0;
}

.career-hero .career-hero-quote {
.hero-career .hero-career-quote {
font-size: var(--heading-font-size-s);
font-style: var(--font-style-normal);
line-height: 32px;
Expand All @@ -58,7 +59,7 @@
text-indent: 0;
}

.career-hero .career-hero-quote::before {
.hero-career .hero-career-quote::before {
content: '“';
font-size: 90px;
line-height: 1;
Expand All @@ -67,7 +68,7 @@
top: -44px;
}

.career-hero .career-hero-quote::after {
.hero-career .hero-career-quote::after {
content: '”';
font-size: 90px;
line-height: 1;
Expand All @@ -77,7 +78,7 @@
right: 0;
}

.career-hero .career-hero-careerbgtitle {
.hero-career .hero-career-careerbgtitle {
color: white;
font-size: var(--heading-font-size-xs);
font-weight: var(--font-weight-bold);
Expand All @@ -86,63 +87,63 @@
text-transform: unset;
}

.career-hero .career-hero-careerbg {
.hero-career .hero-career-careerbg {
font-size: var(--heading-font-size-xxs);
line-height: 22px;
margin-inline: 16px;
}

@media (min-width: 62rem) {
.career-hero {
.hero-career {
background-position: center;
}

.career-hero .career-hero-top {
.hero-career .hero-career-top {
flex-direction: row;
align-items: unset;
height: 700px;
margin-inline: auto;
}

.career-hero .career-hero-left {
.hero-career .hero-career-left {
width: 21rem;
margin-top: 5rem;
margin-right: 4rem;
}

.career-hero .career-hero-photo img {
height: 296px;
.hero-career .hero-career-left img {
height: 18.5rem;
}

.career-hero .career-hero-name {
.hero-career .hero-career-name {
font-size: var(--heading-font-size-xs);
padding-top: 0;
}

.career-hero .career-hero-title {
.hero-career .hero-career-title {
font-size: var(--body-font-size-s);
}

.career-hero .career-hero-right {
.hero-career .hero-career-right {
background-color: unset;
margin-top: 120px;
padding-top: unset;
width: calc(100% - 336px - 4rem);
}

.career-hero .career-hero-quote {
.hero-career .hero-career-quote {
font-size: var(--heading-font-size-xl);
line-height: 59px;
margin: 0 0 97px;
}

.career-hero .career-hero-careerbgtitle {
.hero-career .hero-career-careerbgtitle {
font-size: var(--heading-font-size-m);
letter-spacing: 1.2px;
margin: 0 0 13px;
}

.career-hero .career-hero-careerbg {
.hero-career .hero-career-careerbg {
font-size: var(--body-font-size-m);
line-height: 32px;
margin: 0;
Expand Down
54 changes: 54 additions & 0 deletions blocks/hero-career/hero-career.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
import {
createOptimizedPicture,
getMetadata,
readBlockConfig,
} from '../../scripts/lib-franklin.js';

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.hero-career-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('hero-career-top');
block.appendChild(heroDiv);

const heroLeft = document.createElement('div');
heroLeft.classList.add('hero-career-left');
heroDiv.appendChild(heroLeft);

const photoURL = getMetadata('og:image');
const pic = createOptimizedPicture(photoURL, cfg.name);
heroLeft.append(pic);
addTextEl('h6', cfg.name, heroLeft, 'hero-career-name');
addTextEl('p', cfg.title, heroLeft, 'hero-career-title');

const heroRight = document.createElement('div');
heroRight.classList.add('hero-career-right');
heroDiv.appendChild(heroRight);
addTextEl('blockquote', cfg.quote, heroRight, 'hero-career-quote');
addTextEl('h6', 'Career background', heroRight, 'hero-career-careerbgtitle'); // TODO i18n
addTextEl('p', cfg['career-background'], heroRight, 'hero-career-careerbg');

deleteConfigBlock(block, heroDiv);
}

0 comments on commit 6dcd4c4

Please sign in to comment.