From 39c72814256665f14667c3fc73b1b6e8651d59a5 Mon Sep 17 00:00:00 2001 From: Tomasz Dziezyk Date: Thu, 17 Aug 2023 10:34:35 +0200 Subject: [PATCH 01/12] #23 Add card block --- blocks/v2-cards/v2-cards.css | 74 ++++++++++++++++++++++++++++++++++++ blocks/v2-cards/v2-cards.js | 30 +++++++++++++++ icons/chevron-right.svg | 3 ++ styles/styles.css | 19 ++++++++- 4 files changed, 125 insertions(+), 1 deletion(-) create mode 100644 blocks/v2-cards/v2-cards.css create mode 100644 blocks/v2-cards/v2-cards.js create mode 100644 icons/chevron-right.svg diff --git a/blocks/v2-cards/v2-cards.css b/blocks/v2-cards/v2-cards.css new file mode 100644 index 000000000..4ba65112d --- /dev/null +++ b/blocks/v2-cards/v2-cards.css @@ -0,0 +1,74 @@ +/* stylelint-disable selector-class-pattern */ +.v2-cards { + display: flex; + flex-direction: column; + gap: 24px; + padding: 16px; +} + +.v2-cards__card-item { + background: var(--c-primary-white); + color: var(--c-primary-black); +} + +.v2-cards__picture-wrapper { + padding: 0; +} + +.v2-cards__text-wrapper { + padding: 24px; +} + +.v2-cards__picture { + display: flex; +} + +.v2-cards__image { + background: #e9eaec; + height: 193px; + width: 100%; + object-fit: cover; +} + +.v2-cards__heading { + font-family: var(--ff-subheadings-medium); + font-size: var(--headline-5-font-size); + line-height: var(--headline-5-line-height); + margin: 0 0 7px; +} + +.v2-cards__text-wrapper p { + margin: 0; + color: var(--c-primary-black); + font-family: var(--ff-body); + font-size: var(--body-1-font-size); + font-style: normal; + line-height: var(--body-1-line-height); + letter-spacing: 0.16px; +} + +.v2-cards__text-wrapper .v2-cards__button-container { + margin-top: 16px; +} + +.v2-cards__button-container .v2-cards__button:any-link { + color: var(--c-primary-black); + font-family: var(--ff-subheadings-medium); + font-size: var(--button-font-size); + font-style: normal; + line-height: var(--button-line-height); + letter-spacing: 1.12px; + display: inline-flex; + gap: 4px; + margin: 0; + padding: 0; + background: transparent; +} + +@media (min-width: 1040px) { + .v2-cards { + flex-direction: row; + gap: 16px; + padding: 0; + } +} diff --git a/blocks/v2-cards/v2-cards.js b/blocks/v2-cards/v2-cards.js new file mode 100644 index 000000000..9d2d77f7d --- /dev/null +++ b/blocks/v2-cards/v2-cards.js @@ -0,0 +1,30 @@ +const blockClass = 'v2-cards'; + +export default async function decorate(block) { + const cardsItems = [...block.querySelectorAll(':scope > div')]; + cardsItems.forEach((el) => el.classList.add(`${blockClass}__card-item`)); + + const cardsSections = [...block.querySelectorAll(':scope > div > div')]; + cardsSections.forEach((el) => { + el.classList.add(`${blockClass}__text-wrapper`); + }); + + const pictures = [...block.querySelectorAll('picture')]; + pictures.forEach((el) => { + el.classList.add(`${blockClass}__picture`); + el.parentElement.classList.add(`${blockClass}__picture-wrapper`); + el.parentElement.classList.remove(`${blockClass}__text-wrapper`); + }); + + const images = [...block.querySelectorAll('img')]; + images.forEach((el) => el.classList.add(`${blockClass}__image`)); + + const cardsHeadings = [...block.querySelectorAll('h1, h2, h3, h4, h5, h6')]; + cardsHeadings.forEach((el) => el.classList.add(`${blockClass}__heading`)); + + const buttons = [...block.querySelectorAll('.button-container')]; + buttons.forEach((el) => { + el.classList.add(`${blockClass}__button-container`); + [...el.querySelectorAll('a')].forEach((link) => link.classList.add(`${blockClass}__button`)); + }); +} diff --git a/icons/chevron-right.svg b/icons/chevron-right.svg new file mode 100644 index 000000000..f4f98d469 --- /dev/null +++ b/icons/chevron-right.svg @@ -0,0 +1,3 @@ + + + diff --git a/styles/styles.css b/styles/styles.css index e712a223f..2ae02ba01 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -104,7 +104,7 @@ /* Helvetica Neue LT Pro, 65 Medium, 18px, 140% */ --headline-5-font-size: 1.125rem; /* 18px */ - --headline-5-line-height: 150%; + --headline-5-line-height: 140%; /* Helvetica Neue LT Pro, 55 Roman / Helvetica Neue LT Pro, 75 Bold, 16px, 150% */ --body-1-font-size: 1rem; /* 16px */ @@ -808,6 +808,22 @@ main .section.responsive-title h1 { font-size: 16px; } +.redesign-v2 .icon { + display: inline-flex; +} + +/* stylelint-disable-next-line no-descending-specificity */ +.redesign-v2 .icon svg { + fill: currentcolor; + height: 1em; + width: 1em; +} + +.redesign-v2 .section.dark-backgorund { + background-color: var(--c-secondary-graphite); + color: var(--c-primary-white); +} + /* stylelint-disable-next-line no-descending-specificity */ .redesign-v2 .section { padding: 40px 0; @@ -830,6 +846,7 @@ main .section.responsive-title h1 { padding: 0; } +.section.header-with-mark > .default-content-wrapper:first-child > h1:first-child::before, .redesign-v2 .with-marker::before { content: ''; margin: 0; From a349f12b0ae1cc5d83da49bb2f55eb172490ae47 Mon Sep 17 00:00:00 2001 From: Tomasz Dziezyk Date: Thu, 17 Aug 2023 11:47:44 +0200 Subject: [PATCH 02/12] #23 Update cards tablet styles --- blocks/v2-cards/v2-cards.css | 16 +++++++++++++--- 1 file changed, 13 insertions(+), 3 deletions(-) diff --git a/blocks/v2-cards/v2-cards.css b/blocks/v2-cards/v2-cards.css index 4ba65112d..13dd0388e 100644 --- a/blocks/v2-cards/v2-cards.css +++ b/blocks/v2-cards/v2-cards.css @@ -1,9 +1,13 @@ -/* stylelint-disable selector-class-pattern */ +main .section.v2-cards-container .v2-cards-wrapper { + padding: 0; +} + .v2-cards { display: flex; flex-direction: column; gap: 24px; padding: 16px; + justify-content: center; } .v2-cards__card-item { @@ -65,10 +69,16 @@ background: transparent; } -@media (min-width: 1040px) { +@media (min-width: 740px) { .v2-cards { - flex-direction: row; + flex-flow: row wrap; gap: 16px; padding: 0; + justify-content: center; + } + + .v2-cards__card-item { + max-width: calc((100% - 32px) / 3); + min-width: 336px; } } From a03fc8d63b7ea3679d24c5174a962b5e6f57e7e7 Mon Sep 17 00:00:00 2001 From: Tomasz Dziezyk Date: Thu, 17 Aug 2023 15:38:57 +0200 Subject: [PATCH 03/12] #23 Css fix --- blocks/v2-cards/v2-cards.css | 1 + 1 file changed, 1 insertion(+) diff --git a/blocks/v2-cards/v2-cards.css b/blocks/v2-cards/v2-cards.css index 13dd0388e..d40601242 100644 --- a/blocks/v2-cards/v2-cards.css +++ b/blocks/v2-cards/v2-cards.css @@ -67,6 +67,7 @@ main .section.v2-cards-container .v2-cards-wrapper { margin: 0; padding: 0; background: transparent; + justify-content: left; } @media (min-width: 740px) { From bb98819f8fbb29732f6dc3ed51c1b7aaef9d3621 Mon Sep 17 00:00:00 2001 From: Tomasz Dziezyk Date: Fri, 18 Aug 2023 11:39:17 +0200 Subject: [PATCH 04/12] #23 Update css --- blocks/v2-cards/v2-cards.css | 2 ++ styles/styles.css | 3 ++- 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/blocks/v2-cards/v2-cards.css b/blocks/v2-cards/v2-cards.css index d40601242..a73090063 100644 --- a/blocks/v2-cards/v2-cards.css +++ b/blocks/v2-cards/v2-cards.css @@ -8,6 +8,8 @@ main .section.v2-cards-container .v2-cards-wrapper { gap: 24px; padding: 16px; justify-content: center; + max-width: 1040px; + margin: auto; } .v2-cards__card-item { diff --git a/styles/styles.css b/styles/styles.css index 9a529b4b8..fa5f8d2d9 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -987,8 +987,9 @@ main .section.responsive-title h1 { } .redesign-v2 .section > div { - padding: 0 200px; + padding: 0; margin: 0 auto; + max-width: 1040px; } .redesign-v2 .with-marker::before { From 2076a1ad876bfb2ea1f8c3ee50022aee7b0627e2 Mon Sep 17 00:00:00 2001 From: Tomasz Dziezyk Date: Mon, 28 Aug 2023 10:49:00 +0200 Subject: [PATCH 05/12] #23 Fixes after CR --- blocks/v2-cards/v2-cards.css | 21 +++++++++------------ blocks/v2-cards/v2-cards.js | 5 ++++- icons/chevron-right.svg | 2 +- styles/styles.css | 25 ++++++++++++++++++++++--- 4 files changed, 36 insertions(+), 17 deletions(-) diff --git a/blocks/v2-cards/v2-cards.css b/blocks/v2-cards/v2-cards.css index a73090063..734aa0599 100644 --- a/blocks/v2-cards/v2-cards.css +++ b/blocks/v2-cards/v2-cards.css @@ -58,18 +58,15 @@ main .section.v2-cards-container .v2-cards-wrapper { } .v2-cards__button-container .v2-cards__button:any-link { - color: var(--c-primary-black); - font-family: var(--ff-subheadings-medium); - font-size: var(--button-font-size); - font-style: normal; - line-height: var(--button-line-height); - letter-spacing: 1.12px; - display: inline-flex; - gap: 4px; - margin: 0; - padding: 0; - background: transparent; - justify-content: left; + align-items: flex-start; +} + +.v2-cards__button-container .icon { + stroke: currentcolor; +} + +.v2-cards__button-container .v2-cards__button:hover { + color: var(--c-secondary-steel); } @media (min-width: 740px) { diff --git a/blocks/v2-cards/v2-cards.js b/blocks/v2-cards/v2-cards.js index 9d2d77f7d..6a9102610 100644 --- a/blocks/v2-cards/v2-cards.js +++ b/blocks/v2-cards/v2-cards.js @@ -25,6 +25,9 @@ export default async function decorate(block) { const buttons = [...block.querySelectorAll('.button-container')]; buttons.forEach((el) => { el.classList.add(`${blockClass}__button-container`); - [...el.querySelectorAll('a')].forEach((link) => link.classList.add(`${blockClass}__button`)); + [...el.querySelectorAll('a')].forEach((link) => { + link.classList.add('standalone-link', `${blockClass}__button`); + link.classList.remove('button', 'primary'); + }); }); } diff --git a/icons/chevron-right.svg b/icons/chevron-right.svg index f4f98d469..a9e95a0b5 100644 --- a/icons/chevron-right.svg +++ b/icons/chevron-right.svg @@ -1,3 +1,3 @@ - + diff --git a/styles/styles.css b/styles/styles.css index fa5f8d2d9..eb450cbfb 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -251,13 +251,13 @@ h1, h2 { h1 { font-size: var(--headline-1-font-size); line-height: var(--headline-1-line-height); - letter-spacing: var(--headline-1-line-letter-spacing); + letter-spacing: var(--headline-1-letter-spacing); } h2 { font-size: var(--headline-2-font-size); line-height: var(--headline-2-line-height); - letter-spacing: var(--headline-2-line-letter-spacing); + letter-spacing: var(--headline-2-letter-spacing); } h3 { @@ -828,7 +828,7 @@ main .section.responsive-title h1 { width: 1em; } -.redesign-v2 .section.dark-backgorund { +.redesign-v2 .section.section-dark { background-color: var(--c-secondary-graphite); color: var(--c-primary-white); } @@ -981,6 +981,25 @@ main .section.responsive-title h1 { top: -18px; } +.redesign-v2 a.standalone-link { + align-items: center; + color: var(--c-primary-black); + display: inline-flex; + font-family: var(--ff-body-bold); + font-size: var(--button-font-size); + gap: 4px; + letter-spacing: 1.12px; + line-height: var(--button-line-height); + background: transparent; +} + +.redesign-v2 a.standalone-link:active, +.redesign-v2 a.standalone-link:visited, +.redesign-v2 a.standalone-link:hover { + background: transparent; + color: var(--c-cta-blue-active); +} + @media (min-width: 1040px) { .redesign-v2 .section { padding: 80px 0; From cb84a505fd5fda8a27e491cbda8306573305396d Mon Sep 17 00:00:00 2001 From: Tomasz Dziezyk Date: Wed, 30 Aug 2023 13:22:20 +0200 Subject: [PATCH 06/12] #23 Update css --- styles/styles.css | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/styles/styles.css b/styles/styles.css index eb450cbfb..b7de8de5f 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -421,6 +421,7 @@ main .section.black-background { main .section.dark-background { background-color: var(--c-secondary-graphite); + color: var(--c-primary-white); } main .section.center { @@ -828,11 +829,6 @@ main .section.responsive-title h1 { width: 1em; } -.redesign-v2 .section.section-dark { - background-color: var(--c-secondary-graphite); - color: var(--c-primary-white); -} - /* ICONS STYLES - default on white background */ .redesign-v2 svg path[fill] { fill: var(--color-icon); From 2a32ed08a2eefc776fb3f60bb763161ae4d1eb54 Mon Sep 17 00:00:00 2001 From: Tomasz Dziezyk Date: Thu, 31 Aug 2023 12:45:26 +0200 Subject: [PATCH 07/12] #23 Fix h1 styling --- styles/styles.css | 1 + 1 file changed, 1 insertion(+) diff --git a/styles/styles.css b/styles/styles.css index b7de8de5f..a557f6645 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -252,6 +252,7 @@ h1 { font-size: var(--headline-1-font-size); line-height: var(--headline-1-line-height); letter-spacing: var(--headline-1-letter-spacing); + font-weight: normal; } h2 { From 57fb29b98fbb6fc3829861a27e440912d7102f97 Mon Sep 17 00:00:00 2001 From: Tomasz Dziezyk Date: Thu, 31 Aug 2023 12:47:02 +0200 Subject: [PATCH 08/12] #23 Fix headings font weight --- styles/styles.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/styles/styles.css b/styles/styles.css index a557f6645..5a0b4b817 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -242,6 +242,7 @@ h4, h5, h6 { margin-top: 1em; margin-bottom: 0.5em; scroll-margin: calc(var(--nav-height-m) + 1em); + font-weight: normal; } h1, h2 { @@ -252,7 +253,6 @@ h1 { font-size: var(--headline-1-font-size); line-height: var(--headline-1-line-height); letter-spacing: var(--headline-1-letter-spacing); - font-weight: normal; } h2 { From d7a536753c7c33cd2c941c0671a8b344df0a9970 Mon Sep 17 00:00:00 2001 From: Tomasz Dziezyk Date: Tue, 5 Sep 2023 08:43:13 +0200 Subject: [PATCH 09/12] #23 Fix after merge --- blocks/v2-testimonial/v2-testimonial.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/blocks/v2-testimonial/v2-testimonial.css b/blocks/v2-testimonial/v2-testimonial.css index a697cd818..bc9616b33 100644 --- a/blocks/v2-testimonial/v2-testimonial.css +++ b/blocks/v2-testimonial/v2-testimonial.css @@ -97,7 +97,7 @@ height: 24px; } -.v2-testimonial__video-link .icon svg { +.v2-testimonial__video-link svg { height: 24px; width: 24px; } From 59842c62f6f24668d14786cf77bca9b3f699d81c Mon Sep 17 00:00:00 2001 From: Tomasz Dziezyk Date: Tue, 5 Sep 2023 10:14:29 +0200 Subject: [PATCH 10/12] #23 Fix breakpoint --- blocks/v2-cards/v2-cards.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/blocks/v2-cards/v2-cards.css b/blocks/v2-cards/v2-cards.css index 504352844..b28cfb63b 100644 --- a/blocks/v2-cards/v2-cards.css +++ b/blocks/v2-cards/v2-cards.css @@ -76,7 +76,7 @@ main .section.v2-cards-container .v2-cards-wrapper { color: var(--c-secondary-steel); } -@media (min-width: 740px) { +@media (min-width: 744px) { .v2-cards { flex-flow: row wrap; gap: 16px; From 06c07a7c6c08d586b8f27e8a5509fdbcdafeea77 Mon Sep 17 00:00:00 2001 From: Tomasz Dziezyk Date: Tue, 5 Sep 2023 12:45:12 +0200 Subject: [PATCH 11/12] #23 Changes after CR --- blocks/v2-cards/v2-cards.css | 15 +++++---------- blocks/v2-cards/v2-cards.js | 2 +- icons/chevron-right.svg | 2 +- icons/play.svg | 13 +++---------- icons/speach.svg | 13 ++++++------- styles/styles.css | 11 +++++++---- 6 files changed, 23 insertions(+), 33 deletions(-) diff --git a/blocks/v2-cards/v2-cards.css b/blocks/v2-cards/v2-cards.css index b28cfb63b..deb55253d 100644 --- a/blocks/v2-cards/v2-cards.css +++ b/blocks/v2-cards/v2-cards.css @@ -8,7 +8,7 @@ main .section.v2-cards-container .v2-cards-wrapper { gap: 24px; padding: 16px; justify-content: center; - max-width: 1040px; + max-width: var(--wrapper-width); margin: auto; } @@ -30,8 +30,8 @@ main .section.v2-cards-container .v2-cards-wrapper { } .v2-cards__image { - background: #e9eaec; - height: 193px; + background: var(--c-tertiary-light-cool-gray); + aspect-ratio: 16/9; width: 100%; object-fit: cover; } @@ -63,8 +63,8 @@ main .section.v2-cards-container .v2-cards-wrapper { .v2-cards__button-container .icon { stroke: currentcolor; - width: 1em; - height: 1em; + width: 16px; + height: 16px; } .v2-cards__button-container .icon svg { @@ -72,10 +72,6 @@ main .section.v2-cards-container .v2-cards-wrapper { height: 1em; } -.v2-cards__button-container .v2-cards__button:hover { - color: var(--c-secondary-steel); -} - @media (min-width: 744px) { .v2-cards { flex-flow: row wrap; @@ -86,6 +82,5 @@ main .section.v2-cards-container .v2-cards-wrapper { .v2-cards__card-item { max-width: calc((100% - 32px) / 3); - min-width: 336px; } } diff --git a/blocks/v2-cards/v2-cards.js b/blocks/v2-cards/v2-cards.js index 6a9102610..c5042726c 100644 --- a/blocks/v2-cards/v2-cards.js +++ b/blocks/v2-cards/v2-cards.js @@ -27,7 +27,7 @@ export default async function decorate(block) { el.classList.add(`${blockClass}__button-container`); [...el.querySelectorAll('a')].forEach((link) => { link.classList.add('standalone-link', `${blockClass}__button`); - link.classList.remove('button', 'primary'); + link.classList.remove('button', 'button--primary'); }); }); } diff --git a/icons/chevron-right.svg b/icons/chevron-right.svg index a9e95a0b5..43dcfa439 100644 --- a/icons/chevron-right.svg +++ b/icons/chevron-right.svg @@ -1,3 +1,3 @@ - + diff --git a/icons/play.svg b/icons/play.svg index 8b8db8f08..9a3b872fe 100644 --- a/icons/play.svg +++ b/icons/play.svg @@ -1,11 +1,4 @@ - - - - - - - - - + + + diff --git a/icons/speach.svg b/icons/speach.svg index 219a25ac9..064c77e0e 100644 --- a/icons/speach.svg +++ b/icons/speach.svg @@ -1,7 +1,6 @@ - - - - - - \ No newline at end of file + + + + + + diff --git a/styles/styles.css b/styles/styles.css index 0393d9321..062701c61 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -971,10 +971,13 @@ main .section.responsive-title h1 { } .redesign-v2 a.standalone-link:active, -.redesign-v2 a.standalone-link:visited, -.redesign-v2 a.standalone-link:hover { - background: transparent; - color: var(--c-cta-blue-active); +.redesign-v2 a.standalone-link:visited { + color: var(--c-primary-black); +} + +.redesign-v2 a.standalone-link:hover, +.redesign-v2 a.standalone-link:focus { + text-decoration: underline; } @media (min-width: 1040px) { From 154ec198c06e2c75472d2834201b69c155dbfa8f Mon Sep 17 00:00:00 2001 From: Tomasz Dziezyk Date: Tue, 5 Sep 2023 15:19:04 +0200 Subject: [PATCH 12/12] #23 Changes after CR --- blocks/v2-cards/v2-cards.css | 4 ++-- blocks/v2-testimonial/v2-testimonial.css | 4 ++-- icons/play.svg | 4 ++-- styles/styles.css | 3 ++- 4 files changed, 8 insertions(+), 7 deletions(-) diff --git a/blocks/v2-cards/v2-cards.css b/blocks/v2-cards/v2-cards.css index deb55253d..3fb7e0a00 100644 --- a/blocks/v2-cards/v2-cards.css +++ b/blocks/v2-cards/v2-cards.css @@ -68,8 +68,8 @@ main .section.v2-cards-container .v2-cards-wrapper { } .v2-cards__button-container .icon svg { - width: 1em; - height: 1em; + width: 16px; + height: 16px; } @media (min-width: 744px) { diff --git a/blocks/v2-testimonial/v2-testimonial.css b/blocks/v2-testimonial/v2-testimonial.css index bc9616b33..c9e4ac4ab 100644 --- a/blocks/v2-testimonial/v2-testimonial.css +++ b/blocks/v2-testimonial/v2-testimonial.css @@ -60,8 +60,8 @@ } .v2-testimonial__author svg { - width: 34px; - height: 27px; + width: 32px; + height: 32px; } .v2-testimonial__video-link-wrapper { diff --git a/icons/play.svg b/icons/play.svg index 9a3b872fe..1f32c6132 100644 --- a/icons/play.svg +++ b/icons/play.svg @@ -1,4 +1,4 @@ - - + + diff --git a/styles/styles.css b/styles/styles.css index 062701c61..46f5df45e 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -972,11 +972,12 @@ main .section.responsive-title h1 { .redesign-v2 a.standalone-link:active, .redesign-v2 a.standalone-link:visited { - color: var(--c-primary-black); + color: var(--c-tertiary-cool-gray); } .redesign-v2 a.standalone-link:hover, .redesign-v2 a.standalone-link:focus { + color: var(--c-tertiary-cool-gray); text-decoration: underline; }