From 851cc32856f7137043d3bc94f635a46e770683be Mon Sep 17 00:00:00 2001 From: Tomasz Dziezyk Date: Thu, 29 Aug 2024 13:26:39 +0200 Subject: [PATCH 001/159] Add colors and text styles --- styles/styles.css | 219 ++++++++++++++++++++++++++++++++++++++-------- 1 file changed, 183 insertions(+), 36 deletions(-) diff --git a/styles/styles.css b/styles/styles.css index 54f946c..f17c9b9 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -11,17 +11,8 @@ */ :root { - /* colors */ - --link-color: #f00; - --link-hover-color: #1d1d1b; - --c-primary-white: #fff; - --button-color: #f00; - --light-color: #eee; - --dark-color: #ccc; - --text-color: #1d1d1b; - /* fonts */ - --body-font-family: "Oxygen", sans-serif; + --body-font-family: "Boxed", arial; --heading-font-family: var(--body-font-family); --body-font-size: 16px; @@ -31,11 +22,49 @@ /* section paddings */ --section-y-padding: 40px; --section-x-padding: 15px; + + /* v2 */ + --white: #fff; + --grey-5: #f2f2f2; + --grey-10: #e6e6e6; + --grey-20: #ccc; + --grey-30: #b3b3b3; + --grey-40: #999; + --grey-50: #8080; + --grey-60: #666; + --grey-70: #4d4d4d; + --grey-80: #333; + --grey-90: #1a1a1a; + --black: #000; + --dark-red: #e3423d; + --action-default: #ed1c24; + --action-hover: #ae2d27; + --action-focus: #82221d; + --success: #2d9d78; + --warning: #e68619; + --error: #b81f2d; + + /* old variables */ + --link-color: var(--action-default); + --link-hover-color: var(--action-hover); + --c-primary-white: var(--white); + --button-color: var(--action-default); + --light-color: #eee; + --dark-color: #ccc; + --text-color: #1d1d1b; + +} + +:root .dark { + --action-default: #fff; + --action-hover: #bbb; + --action-focus: #999; } body { font-size: var(--body-font-size); - font-weight: 400; + font-weight: 500; + letter-spacing: 0.44px; margin: 0; font-family: var(--body-font-family); line-height: 1.5; @@ -43,6 +72,7 @@ body { background-color: var(--c-primary-white); display: none; -webkit-font-smoothing: antialiased; + font-feature-settings: 'liga' off, 'clig' off; } body.appear { @@ -53,53 +83,154 @@ header { height: var(--nav-height); } -h1, h2, h3, h4, h5, h6, -.h1, .h2, .h3, .h4, .h5, .h6 { +h1, +h2, +h3, +h4, +h5, +h6, +.h1, +.h2, +.h3, +.h4, +.h5, +.h6 { margin-bottom: 20px; margin-top: 0; } h1, .h1 { - font-size: 1.8063rem; - line-height: 1.2; - font-weight: 400; - text-transform: uppercase; + font-size: 2.25rem; + font-style: normal; + font-weight: 500; + line-height: 140%; + letter-spacing: 0; } h2, .h2 { - font-size: 1.7rem; - line-height: 1.3; - font-weight: 400; + font-size: 2rem; + font-style: normal; + font-weight: 500; + line-height: 140%; + letter-spacing: 0.25; } h3, .h3 { - font-size: 1.5rem; - line-height: 1.4; - font-weight: 400; + font-size: 1.75rem; + font-style: normal; + font-weight: 500; + line-height: 140%; + letter-spacing: 0; } h4, .h4 { font-size: 1.25rem; - line-height: 1.4; - font-weight: 600; + font-style: normal; + font-weight: 500; + line-height: 130%; + letter-spacing: 0.15px; } h5, .h5 { - font-size: 1rem; - line-height: 1.4; - font-weight: 600; + font-size: 1.25rem; + font-style: normal; + font-weight: 500; + line-height: 130%; + letter-spacing: 0.15px; } h6, .h6 { + font-size: 1rem; + font-style: normal; + font-weight: 500; + line-height: 140%; + letter-spacing: 0.15px; +} + +@media (width >= 768px) { + h1, + .h1 { + font-size: 2.5rem; + } + + h2, + .h2 { + font-size: 2.25rem; + } + + h3, + .h3 { + font-size: 2rem; + } + + h4, + .h4 { + font-size: 1.75rem; + } + + h5, + .h5 { + font-size: 1.5rem; + } + + h6, + .h6 { + font-size: 1.25rem; + } +} + +@media (width >= 1024px) { + h1, + .h1 { + font-size: 4.375rem; + letter-spacing: -1.5px; + } + + h2, + .h2 { + font-size: 3rem; + letter-spacing: -0.5px; + } + + h3, + .h3 { + font-size: 2.5rem; + letter-spacing: 0; + } + + h4, + .h4 { + font-size: 2.125rem; + letter-spacing: 0.25px; + } + + h5, + .h5 { + font-size: 1.75rem; + letter-spacing: 0; + } + + h6, + .h6 { + font-size: 1.25rem; + letter-spacing: 0.15px; + } +} + +.font-small { font-size: 0.875rem; - line-height: 1.4; - font-weight: 600; + letter-spacing: 0.25px; +} + +.font-caption { + font-size: 0.75; + letter-spacing: 0.4px; } * + .h1, @@ -117,7 +248,6 @@ h6, margin-top: 40px; } - p, dl, ol, @@ -128,7 +258,14 @@ blockquote { margin-bottom: 1em; } -address, dl, fieldset, figure, ol, p, pre, ul { +address, +dl, +fieldset, +figure, +ol, +p, +pre, +ul { margin: 0 0 20px; } @@ -316,7 +453,7 @@ main .section.highlight { content: ""; display: inline-block; position: relative; - top: calc(-0.1* 1em); + top: calc(-0.1 * 1em); vertical-align: middle; height: calc(4px + 0.7em); margin-right: calc(5px + 0.2em); @@ -372,7 +509,17 @@ main .border-top { } /* styles to override onetrust */ -#onetrust-consent-sdk #onetrust-pc-sdk button:not(#clear-filters-handler, .ot-close-icon, #filter-btn-handler, .ot-remove-objection-handler, .ot-obj-leg-btn-handler, [aria-expanded], .ot-link-btn), +#onetrust-consent-sdk + #onetrust-pc-sdk + button:not( + #clear-filters-handler, + .ot-close-icon, + #filter-btn-handler, + .ot-remove-objection-handler, + .ot-obj-leg-btn-handler, + [aria-expanded], + .ot-link-btn + ), #onetrust-banner-sdk #onetrust-reject-all-handler, #onetrust-consent-sdk #onetrust-accept-btn-handler { background-color: var(--link-color) !important; @@ -385,7 +532,7 @@ main .border-top { line-height: 1.2; color: #333; font-weight: 400; - margin-bottom: 40px + margin-bottom: 40px; } .article em { @@ -394,7 +541,7 @@ main .border-top { @media (width >= 960px) { .article h1 { - font-size:2.625rem + font-size: 2.625rem; } } From c0d30a86780b38f6504a35f7cd153df5a3e5bf89 Mon Sep 17 00:00:00 2001 From: Tomasz Dziezyk Date: Mon, 2 Sep 2024 11:22:48 +0200 Subject: [PATCH 002/159] Update button styles --- styles/styles.css | 190 ++++++++++++++++++++++++++++++++++------------ 1 file changed, 141 insertions(+), 49 deletions(-) diff --git a/styles/styles.css b/styles/styles.css index f17c9b9..d479463 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -30,7 +30,7 @@ --grey-20: #ccc; --grey-30: #b3b3b3; --grey-40: #999; - --grey-50: #8080; + --grey-50: #808080; --grey-60: #666; --grey-70: #4d4d4d; --grey-80: #333; @@ -52,7 +52,10 @@ --light-color: #eee; --dark-color: #ccc; --text-color: #1d1d1b; +} +.dark { + background-color: var(--black); } :root .dark { @@ -61,6 +64,10 @@ --action-focus: #999; } +* { + box-sizing: border-box; +} + body { font-size: var(--body-font-size); font-weight: 500; @@ -72,7 +79,7 @@ body { background-color: var(--c-primary-white); display: none; -webkit-font-smoothing: antialiased; - font-feature-settings: 'liga' off, 'clig' off; + font-feature-settings: "liga" off, "clig" off; } body.appear { @@ -289,16 +296,6 @@ main pre { white-space: pre; } -/* links */ -a:any-link { - color: var(--link-color); - text-decoration: none; -} - -a:hover { - color: var(--link-hover-color); -} - /* buttons */ a.button:any-link, button { @@ -311,43 +308,151 @@ button { overflow: hidden; text-overflow: ellipsis; margin: 0; - padding: 0 30px; - vertical-align: middle; - font-size: 0.875rem; - line-height: 38px; - text-align: center; - display: inline-block; - transition: 0.1s ease-in-out; - transition-property: color, background-color, background-position, - background-size, border-color, box-shadow; + display: inline-flex; + align-items: center; + justify-content: center; + gap: 8px; + flex-shrink: 0; + background: var(--white); + color: var(--action-default); + font-size: 1rem; + line-height: 150%; font-weight: 600; - text-transform: uppercase; - border-radius: 0; - background-color: var(--button-color); - color: var(--c-primary-white); - border: 1px solid var(--button-color); + border: unset; + padding: 0; + letter-spacing: 0.44px; } -a.button:active { - background-color: #c00; - border-color: transparent; +a.button:hover, +button:hover { + color: var(--action-hover); } -a.button:hover, a.button:focus, -button:hover, button:focus { - background-color: rgb(255 0 0 / 0%); - color: var(--link-hover-color); - border-color: var(--link-hover-color); + color: var(--action-focus); + outline: none; } button:disabled, button:disabled:hover { cursor: not-allowed; + color: var(--grey-50); + border: none; +} + +a.button.primary:any-link, +button.primary, +a.button.secondary:any-link, +button.secondary { + padding: 0 20px; + border-radius: 24px; + height: 48px; +} + +a.button.primary:any-link, +button.primary { + background: var(--action-default); + color: var(--white); + border: solid 1px var(--action-default); +} + +a.button.secondary:any-link, +button.secondary { + background: var(--white); + color: var(--action-default); + border: 1px solid var(--action-default); +} + +a.button.primary:hover, +button.primary:hover, +a.button.secondary:hover, +button.secondary:hover { + color: var(--action-hover); + background: var(--white); + border: 1px solid var(--action-hover); +} + +a.button.primary:focus, +button.primary:focus, +a.button.secondary:focus, +button.secondary:focus { + color: var(--action-focus); + background: var(--white); + border: 1px solid var(--action-focus); + outline: none; +} + +button.primary:disabled, +button.primary:disabled:hover, +button.primary:disabled:focus { + cursor: not-allowed; + background-color: var(--grey-20); + color: var(--grey-50); + border-color: var(--grey-20); +} + +button.secondary:disabled, +button.secondary:disabled:hover { + cursor: not-allowed; + background-color: var(--white); + color: var(--grey-50); + border-color: var(--grey-50); +} + +a.button.small, +button.small, +a.button.primary.small, +button.primary.small, +a.button.secondary.small, +button.secondary.small { + font-size: 0.75rem; + height: auto; +} + +a.button.primary.small, +button.primary.small, +a.button.secondary.small, +button.secondary.small { + padding: 3px 12px; +} + +.dark a.button:any-link, +.dark button { background-color: transparent; - color: #999; - border: 1px solid #e5e5e5; +} + +.dark a.button.primary, +.dark button.primary { + background: var(--white); + color: var(--black); +} + +.dark a.button.primary:hover, +.dark button.primary:hover { + color: #ed1c24; + border-color: #ed1c24; +} + +.dark a.button.primary:focus, +.dark button.primary:focus { + color: #82221D; + border-color: #82221D; + background: var(--action-hover); +} + +.dark .button:disabled, +.dark .button:disabled:focus, +.dark .button:disabled:hover { + color: var(--grey-40); + border-color: var(--grey-40); + background: transparent; +} + +.dark .button.primary:disabled, +.dark .button.primary:disabled:focus, +.dark .button.primary:disabled:hover { + background: var(--grey-70); } main img { @@ -475,19 +580,6 @@ main .border-top { padding-top: 40px; } -.button.secondary:any-link { - background-color: transparent; - border: none; - color: var(--link-color); - font-weight: 400; - font-size: 16px; - text-transform: capitalize; -} - -.button.secondary:any-link:hover { - color: var(--text-color); -} - .section-small { max-width: 900px; margin: auto; From f2939cf49c698a094753682b1c6a3e8a36eaca5e Mon Sep 17 00:00:00 2001 From: Tomasz Dziezyk Date: Mon, 2 Sep 2024 11:28:42 +0200 Subject: [PATCH 003/159] Remove unused code --- styles/styles.css | 31 ------------------------------- 1 file changed, 31 deletions(-) diff --git a/styles/styles.css b/styles/styles.css index d479463..7a9b17c 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -523,16 +523,6 @@ main .section.padding-bottom-0 { .section > div.full-width { max-width: 100vw; } - - h1, - .h1 { - font-size: 2.125rem; - } - - h2, - .h2 { - font-size: 2rem; - } } /* full width styles */ @@ -617,24 +607,3 @@ main .border-top { background-color: var(--link-color) !important; border-color: transparent !important; } - -/* article styles - start */ -.article h1 { - font-size: 2.2313rem; - line-height: 1.2; - color: #333; - font-weight: 400; - margin-bottom: 40px; -} - -.article em { - color: rgb(240 80 110); -} - -@media (width >= 960px) { - .article h1 { - font-size: 2.625rem; - } -} - -/* article styles - end */ From 7ef8216fb663884d17e47784a468f02cbb85e383 Mon Sep 17 00:00:00 2001 From: Tomasz Dziezyk Date: Mon, 2 Sep 2024 11:32:05 +0200 Subject: [PATCH 004/159] Fix styles of links inside the text --- styles/styles.css | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/styles/styles.css b/styles/styles.css index 7a9b17c..2694907 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -297,7 +297,7 @@ main pre { } /* buttons */ -a.button:any-link, +a:any-link, button { font-family: var(--body-font-family); box-sizing: border-box; @@ -323,12 +323,12 @@ button { letter-spacing: 0.44px; } -a.button:hover, +a:hover, button:hover { color: var(--action-hover); } -a.button:focus, +a:focus, button:focus { color: var(--action-focus); outline: none; @@ -417,7 +417,7 @@ button.secondary.small { padding: 3px 12px; } -.dark a.button:any-link, +.dark a:any-link, .dark button { background-color: transparent; } From 651e1577d9ce9b20eb6b477c987469d768a37e17 Mon Sep 17 00:00:00 2001 From: Tomasz Dziezyk Date: Mon, 2 Sep 2024 11:33:31 +0200 Subject: [PATCH 005/159] Fix background color for link --- styles/styles.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/styles/styles.css b/styles/styles.css index 2694907..19b3eca 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -313,7 +313,7 @@ button { justify-content: center; gap: 8px; flex-shrink: 0; - background: var(--white); + background: transparent; color: var(--action-default); font-size: 1rem; line-height: 150%; From 1adee4f30fd1ab33ead06caf3cc2442295c98c24 Mon Sep 17 00:00:00 2001 From: Tomasz Dziezyk Date: Mon, 2 Sep 2024 12:35:33 +0200 Subject: [PATCH 006/159] Fix buttons's secondary style for dark background --- styles/styles.css | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/styles/styles.css b/styles/styles.css index 19b3eca..7d4b85c 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -428,6 +428,11 @@ button.secondary.small { color: var(--black); } +.dark a.button.secondary:any-link, +.dark button.secondary { + background-color: transparent; +} + .dark a.button.primary:hover, .dark button.primary:hover { color: #ed1c24; From 3d067f02ff88a23fc86a95410bdc85e9d9244684 Mon Sep 17 00:00:00 2001 From: Ioana Iordache Date: Wed, 4 Sep 2024 12:18:51 +0200 Subject: [PATCH 007/159] KAW-7905: add new footer design v2 --- blocks/footer/footer.css | 115 ++++++++++++++++++++------------------- blocks/footer/footer.js | 58 ++++++++++---------- icons/facebook.svg | 4 +- icons/instagram.svg | 3 + icons/logo-flag.svg | 6 ++ icons/x.svg | 3 + icons/youtube.svg | 6 +- scripts/helpers.js | 7 +++ styles/styles.css | 2 - 9 files changed, 113 insertions(+), 91 deletions(-) create mode 100644 icons/instagram.svg create mode 100644 icons/logo-flag.svg create mode 100644 icons/x.svg diff --git a/blocks/footer/footer.css b/blocks/footer/footer.css index fb981eb..50359a8 100644 --- a/blocks/footer/footer.css +++ b/blocks/footer/footer.css @@ -1,27 +1,24 @@ footer { background-color: #222; color: var(--c-primary-white); + position: relative; + padding: 0 20px; } -.footer .section { - padding: 40px 15px 0; -} - -.footer .section:last-child { - padding-bottom: 40px; +.footer .columns-container .columns-wrapper { + padding-top: 40px; } -.footer .footer-logo img { - width: 250px; - height: auto; +.footer .footer-column > * { + margin: 0; } -.footer .footer-column > * { +.footer .footer-column:first-child { margin: 0; } -.footer .columns .footer-column { - padding-bottom: 60px; +.footer .block.columns .footer-column { + padding-bottom: 20px; position: relative; margin: 0; } @@ -30,17 +27,10 @@ footer { padding-bottom: 0; } -.footer .footer-column::after { - border-top: 1px solid rgb(255 255 255 / 20%); - content: ""; - display: block; - width: 100%; - position: absolute; - bottom: 30px; -} - -.footer .footer-column:last-child::after { - display: none; +.footer .footer-column:last-child ul { + display: flex; + flex-direction: row; + gap: 20px; } .footer .footer-column ul { @@ -52,11 +42,14 @@ footer { flex-direction: column; } +.footer .footer-column .font-small { + color: var(--grey-20); +} + .footer .footer-list-item { display: flex; gap: 15px; align-items: center; - color: rgb(255 255 255 / 70%); } .footer .footer-list-item a { @@ -64,14 +57,25 @@ footer { display: flex; gap: 15px; align-items: center; + font-weight: normal; } .footer .footer-list-item a:hover, .footer .footer-list-item a:active { - color: var(--c-primary-white); + color: var(--action-hover); text-decoration: none; } +.footer .footer-list-item a:focus { + color: var(--action-focus); + text-decoration: none; +} + +.footer .footer-list-item a:has(span.icon):focus, +.footer .footer-list-item a:has(span.icon):hover { + filter: brightness(2); +} + .footer .back-to-top { position: relative; display: flex; @@ -97,7 +101,6 @@ footer { } .footer .section .default-content-wrapper { - padding-top: 10px; text-align: center; font-size: 14px; line-height: 19.6px; @@ -107,19 +110,37 @@ footer { margin-bottom: 10px; } +.footer .section .default-content-wrapper .icon { + width: auto; + height: auto; + position: absolute; + right: 40px; + top: 0; +} .footer .section .default-content-wrapper p:last-child { margin-bottom: 0; } -.footer .footer-list-item .icon { - min-width: 20px; - width: 20px; - height: auto; +.footer .default-content-wrapper ul { + display: flex; + gap: 40px; + justify-content: center; + padding: 0; +} + +.footer .section:not(.columns-container) .default-content-wrapper { + display: flex; + justify-content: center; + flex-direction: column; + padding: 40px 0; + align-items: flex-start; + font-size: 16px; + line-height: 1.5; } @media (width >= 768px) { - .footer .section { - padding: 40px 30px; + footer { + padding: 0 40px; } .footer .columns > div { @@ -130,31 +151,18 @@ footer { .footer .columns .footer-column { width: calc(50% - 30px); padding-bottom: 0; - margin-top: 30px; } - .footer .footer-column::after { - width: 1px; - height: 100%; - border-top: unset; - border-right: 1px solid rgb(255 255 255 / 20%); - top: 0; - right: -30px; + .footer .section:not(.columns-container) .default-content-wrapper { + flex-direction: row; + gap: 40px; } } @media (width >= 960px) { - .footer { - padding-top: 30px; - } - - .footer .section { - padding-left: 40px; - padding-right: 40px; - } .footer .columns > div { - gap: 60px; + gap: 24px; align-items: stretch; } @@ -163,12 +171,7 @@ footer { gap: 60px; } - .footer .footer-logo .icon { - width: 100%; - height: auto; - } - - .footer .footer-logo img { - width: auto; + .footer .section:not(.columns-container) .default-content-wrapper { + justify-content: center; } } diff --git a/blocks/footer/footer.js b/blocks/footer/footer.js index ba5798c..73bbfb6 100644 --- a/blocks/footer/footer.js +++ b/blocks/footer/footer.js @@ -1,6 +1,7 @@ import { getMetadata } from '../../scripts/aem.js'; -import { getTextLabel } from '../../scripts/scripts.js'; +// import { getTextLabel } from '../../scripts/scripts.js'; import { loadFragment } from '../fragment/fragment.js'; +import { addTitleAttributeToIconLink } from '../../scripts/helpers.js'; /** * loads and decorates the footer @@ -19,17 +20,17 @@ export default async function decorate(block) { const columns = [...footer.querySelectorAll('.columns > div > div')]; columns.forEach((column) => { - // if the element contains only image => logo - if (column.childElementCount === 1 && column.querySelector('p > span > img')) { - column.classList.add('footer-logo'); - } - column.classList.add('footer-column'); - // each heading should be rendered as h3 - [...column.querySelectorAll('h1, h2, h3, h4, h5, h6')].forEach((heading) => heading.classList.add('h3')); + // each heading should be rendered as font-small + [...column.querySelectorAll('h1, h2, h3, h4, h5, h6')].forEach((heading) => heading.classList.add('font-small')); }); + // a11y for social icons + const socialIconLinks = footer.querySelectorAll('.footer-column:has(a[title=""]) a[title=""]'); + console.log('🚀 ~ decorate ~ socialIcons:', socialIconLinks); + socialIconLinks.forEach((anchor) => addTitleAttributeToIconLink(anchor)); + const lists = [...footer.querySelectorAll('ul')]; lists.forEach((list) => { [...list.querySelectorAll(':scope > li')].forEach((listItem) => { @@ -48,30 +49,31 @@ export default async function decorate(block) { }); }); - // add back to top button - const backToTopIcon = ` - - - - `; + // TODO add back to top button + // const backToTopIcon = ` + // + // + // + // + // `; - const backToTopText = getTextLabel('top'); + // const backToTopText = getTextLabel('top'); - const backToTopNode = document.createRange().createContextualFragment(` - - `); + // const backToTopNode = document.createRange().createContextualFragment(` + // + // `); - footer.querySelector('.section:last-child').prepend(backToTopNode); + // footer.querySelector('.section:last-child').prepend(backToTopNode); - footer.querySelector('.back-to-top').addEventListener('click', () => { - window.scrollTo({ - top: 0, - behavior: 'smooth', - }); - }); + // footer.querySelector('.back-to-top').addEventListener('click', () => { + // window.scrollTo({ + // top: 0, + // behavior: 'smooth', + // }); + // }); block.append(footer); } diff --git a/icons/facebook.svg b/icons/facebook.svg index 3988481..f950f1f 100644 --- a/icons/facebook.svg +++ b/icons/facebook.svg @@ -1,3 +1,3 @@ - - + + \ No newline at end of file diff --git a/icons/instagram.svg b/icons/instagram.svg new file mode 100644 index 0000000..db6d5d0 --- /dev/null +++ b/icons/instagram.svg @@ -0,0 +1,3 @@ + + + diff --git a/icons/logo-flag.svg b/icons/logo-flag.svg new file mode 100644 index 0000000..75f710c --- /dev/null +++ b/icons/logo-flag.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/icons/x.svg b/icons/x.svg new file mode 100644 index 0000000..4ea80ef --- /dev/null +++ b/icons/x.svg @@ -0,0 +1,3 @@ + + + diff --git a/icons/youtube.svg b/icons/youtube.svg index cefd4d6..a31b671 100644 --- a/icons/youtube.svg +++ b/icons/youtube.svg @@ -1,3 +1,3 @@ - - - \ No newline at end of file + + + diff --git a/scripts/helpers.js b/scripts/helpers.js index c4a8da0..999bb65 100644 --- a/scripts/helpers.js +++ b/scripts/helpers.js @@ -62,3 +62,10 @@ export function callOnIntersection(elements, onChange) { observer.observe(video); }); } + +export function addTitleAttributeToIconLink(element) { + const iconElement = element.querySelector('[data-icon-name]'); + if (iconElement) { + element.setAttribute('title', iconElement.getAttribute('data-icon-name')); + } +} diff --git a/styles/styles.css b/styles/styles.css index 7d4b85c..2620f91 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -468,8 +468,6 @@ main img { .icon { display: inline-block; - height: 20px; - width: 20px; } .icon img { From ee2b7fa87b34ba0457231aa57f97f10a7598009c Mon Sep 17 00:00:00 2001 From: Ioana Iordache Date: Wed, 4 Sep 2024 14:53:27 +0200 Subject: [PATCH 008/159] KAW-7905: remove console statement --- blocks/footer/footer.js | 1 - 1 file changed, 1 deletion(-) diff --git a/blocks/footer/footer.js b/blocks/footer/footer.js index 73bbfb6..b20570f 100644 --- a/blocks/footer/footer.js +++ b/blocks/footer/footer.js @@ -28,7 +28,6 @@ export default async function decorate(block) { // a11y for social icons const socialIconLinks = footer.querySelectorAll('.footer-column:has(a[title=""]) a[title=""]'); - console.log('🚀 ~ decorate ~ socialIcons:', socialIconLinks); socialIconLinks.forEach((anchor) => addTitleAttributeToIconLink(anchor)); const lists = [...footer.querySelectorAll('ul')]; From 00c8a960c219cc1f0b3e773702698729e9e2ff25 Mon Sep 17 00:00:00 2001 From: Ioana Iordache Date: Wed, 4 Sep 2024 15:02:21 +0200 Subject: [PATCH 009/159] KAW-7905: fix build --- blocks/footer/footer.css | 18 ++++++------------ 1 file changed, 6 insertions(+), 12 deletions(-) diff --git a/blocks/footer/footer.css b/blocks/footer/footer.css index 50359a8..a98c38e 100644 --- a/blocks/footer/footer.css +++ b/blocks/footer/footer.css @@ -17,20 +17,14 @@ footer { margin: 0; } -.footer .block.columns .footer-column { - padding-bottom: 20px; - position: relative; - margin: 0; -} - .footer .footer-column:last-child { padding-bottom: 0; } -.footer .footer-column:last-child ul { - display: flex; - flex-direction: row; - gap: 20px; +.footer .block.columns .footer-column { + padding-bottom: 20px; + position: relative; + margin: 0; } .footer .footer-column ul { @@ -117,11 +111,12 @@ footer { right: 40px; top: 0; } + .footer .section .default-content-wrapper p:last-child { margin-bottom: 0; } -.footer .default-content-wrapper ul { +.footer .section .default-content-wrapper ul { display: flex; gap: 40px; justify-content: center; @@ -160,7 +155,6 @@ footer { } @media (width >= 960px) { - .footer .columns > div { gap: 24px; align-items: stretch; From 3eab626e520ff223b0482bbccd62f0c0a603edd8 Mon Sep 17 00:00:00 2001 From: Ioana Iordache Date: Thu, 5 Sep 2024 13:50:57 +0200 Subject: [PATCH 010/159] KAW-7905: aadress pr comments --- blocks/footer/footer.css | 16 +++++++++++----- 1 file changed, 11 insertions(+), 5 deletions(-) diff --git a/blocks/footer/footer.css b/blocks/footer/footer.css index a98c38e..067e6b6 100644 --- a/blocks/footer/footer.css +++ b/blocks/footer/footer.css @@ -32,10 +32,15 @@ footer { padding: 0; list-style: none; display: flex; - gap: 10px; + gap: 24px; flex-direction: column; } +.footer .footer-column:last-child ul { + flex-direction: row; + gap: 20px; +} + .footer .footer-column .font-small { color: var(--grey-20); } @@ -82,7 +87,7 @@ footer { border: unset; color: rgb(255 255 255 / 50%); font-size: 16px; - line-height: 24px; + line-height: 150%; } .footer .back-to-top:hover, @@ -97,11 +102,11 @@ footer { .footer .section .default-content-wrapper { text-align: center; font-size: 14px; - line-height: 19.6px; + line-height: 150%; } .footer .section .default-content-wrapper p { - margin-bottom: 10px; + margin-bottom: 0; } .footer .section .default-content-wrapper .icon { @@ -121,6 +126,7 @@ footer { gap: 40px; justify-content: center; padding: 0; + margin-bottom: 0; } .footer .section:not(.columns-container) .default-content-wrapper { @@ -130,7 +136,7 @@ footer { padding: 40px 0; align-items: flex-start; font-size: 16px; - line-height: 1.5; + line-height: 150%; } @media (width >= 768px) { From f22455a9f703a07c466a9be0c0802ac7e4b9f1e0 Mon Sep 17 00:00:00 2001 From: Ioana Iordache Date: Mon, 9 Sep 2024 10:09:44 +0200 Subject: [PATCH 011/159] KAW-7905: add back to top button --- blocks/footer/footer.css | 25 ++++++++--------- blocks/footer/footer.js | 59 +++++++++++++++++++++++++--------------- icons/chevron-up.svg | 4 +++ 3 files changed, 53 insertions(+), 35 deletions(-) create mode 100644 icons/chevron-up.svg diff --git a/blocks/footer/footer.css b/blocks/footer/footer.css index 067e6b6..c443d6b 100644 --- a/blocks/footer/footer.css +++ b/blocks/footer/footer.css @@ -76,23 +76,22 @@ footer { } .footer .back-to-top { - position: relative; - display: flex; - flex-direction: column; - gap: 0; - align-items: center; - margin: auto; - padding: 0; - background: inherit; - border: unset; - color: rgb(255 255 255 / 50%); - font-size: 16px; - line-height: 150%; + width: 32px; + height: 32px; + position: fixed; + right: 20px; + bottom: 40px; + display: none; + background-color: var(--grey-10); + color: var(--white); + border: none; + cursor: pointer; + z-index: 1000; } .footer .back-to-top:hover, .footer .back-to-top:focus { - color: rgb(255 255 255 / 70%); + background-color: var(--grey-30); } .footer .back-to-top svg { diff --git a/blocks/footer/footer.js b/blocks/footer/footer.js index b20570f..15c5068 100644 --- a/blocks/footer/footer.js +++ b/blocks/footer/footer.js @@ -1,5 +1,4 @@ import { getMetadata } from '../../scripts/aem.js'; -// import { getTextLabel } from '../../scripts/scripts.js'; import { loadFragment } from '../fragment/fragment.js'; import { addTitleAttributeToIconLink } from '../../scripts/helpers.js'; @@ -48,31 +47,47 @@ export default async function decorate(block) { }); }); - // TODO add back to top button - // const backToTopIcon = ` - // - // - // - // - // `; + // Back to top button + const backToTopNode = document.createRange().createContextualFragment(` + + + `); - // const backToTopText = getTextLabel('top'); + footer.prepend(backToTopNode); - // const backToTopNode = document.createRange().createContextualFragment(` - // - // `); + const backToTopButton = footer.querySelector('.back-to-top'); + const observer = new IntersectionObserver((entries) => { + entries.forEach((entry) => { + if (entry.isIntersecting) { + backToTopButton.style.position = 'absolute'; + backToTopButton.style.bottom = `${entry.boundingClientRect.height + 80}px`; + } else { + backToTopButton.style.position = 'fixed'; + backToTopButton.style.bottom = '80px'; + } + }); + }); + observer.observe(footer); - // footer.querySelector('.section:last-child').prepend(backToTopNode); + window.addEventListener('scroll', () => { + const scrollPosition = window.scrollY + window.innerHeight; + const documentHeight = document.documentElement.scrollHeight; - // footer.querySelector('.back-to-top').addEventListener('click', () => { - // window.scrollTo({ - // top: 0, - // behavior: 'smooth', - // }); - // }); + // Display button if user scrolls close to the bottom, 40px above the footer + if (scrollPosition >= documentHeight / 3) { + backToTopButton.style.display = 'block'; + } else { + backToTopButton.style.display = 'none'; + } + }); + + footer.querySelector('.back-to-top').addEventListener('click', () => { + window.scrollTo({ + top: 0, + behavior: 'smooth', + }); + }); block.append(footer); } diff --git a/icons/chevron-up.svg b/icons/chevron-up.svg new file mode 100644 index 0000000..ba5fad3 --- /dev/null +++ b/icons/chevron-up.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file From aaea6d6cee2ab8ad2c7e8b778b0af3ceb81bc76a Mon Sep 17 00:00:00 2001 From: Ioana Iordache Date: Mon, 9 Sep 2024 11:36:53 +0200 Subject: [PATCH 012/159] KAW-7905: add updated viewport and limit back-to-top on dealer pages --- blocks/footer/footer.css | 2 +- blocks/footer/footer.js | 61 +++++++++++++++++++++------------------- 2 files changed, 33 insertions(+), 30 deletions(-) diff --git a/blocks/footer/footer.css b/blocks/footer/footer.css index c443d6b..925044b 100644 --- a/blocks/footer/footer.css +++ b/blocks/footer/footer.css @@ -159,7 +159,7 @@ footer { } } -@media (width >= 960px) { +@media (width >= 1024px) { .footer .columns > div { gap: 24px; align-items: stretch; diff --git a/blocks/footer/footer.js b/blocks/footer/footer.js index 15c5068..671ce85 100644 --- a/blocks/footer/footer.js +++ b/blocks/footer/footer.js @@ -48,46 +48,49 @@ export default async function decorate(block) { }); // Back to top button - const backToTopNode = document.createRange().createContextualFragment(` + const path = window.location.pathname; + if (!(path.includes('importatori-dealer') || path.includes('import-dealers'))) { + const backToTopNode = document.createRange().createContextualFragment(` `); - footer.prepend(backToTopNode); + footer.prepend(backToTopNode); - const backToTopButton = footer.querySelector('.back-to-top'); - const observer = new IntersectionObserver((entries) => { - entries.forEach((entry) => { - if (entry.isIntersecting) { - backToTopButton.style.position = 'absolute'; - backToTopButton.style.bottom = `${entry.boundingClientRect.height + 80}px`; - } else { - backToTopButton.style.position = 'fixed'; - backToTopButton.style.bottom = '80px'; - } + const backToTopButton = footer.querySelector('.back-to-top'); + const observer = new IntersectionObserver((entries) => { + entries.forEach((entry) => { + if (entry.isIntersecting) { + backToTopButton.style.position = 'absolute'; + backToTopButton.style.bottom = `${entry.boundingClientRect.height + 80}px`; + } else { + backToTopButton.style.position = 'fixed'; + backToTopButton.style.bottom = '80px'; + } + }); }); - }); - observer.observe(footer); + observer.observe(footer); - window.addEventListener('scroll', () => { - const scrollPosition = window.scrollY + window.innerHeight; - const documentHeight = document.documentElement.scrollHeight; + window.addEventListener('scroll', () => { + const scrollPosition = window.scrollY + window.innerHeight; + const documentHeight = document.documentElement.scrollHeight; - // Display button if user scrolls close to the bottom, 40px above the footer - if (scrollPosition >= documentHeight / 3) { - backToTopButton.style.display = 'block'; - } else { - backToTopButton.style.display = 'none'; - } - }); + // Display button if user scrolls close to the bottom, 40px above the footer + if (scrollPosition >= documentHeight / 3) { + backToTopButton.style.display = 'block'; + } else { + backToTopButton.style.display = 'none'; + } + }); - footer.querySelector('.back-to-top').addEventListener('click', () => { - window.scrollTo({ - top: 0, - behavior: 'smooth', + footer.querySelector('.back-to-top').addEventListener('click', () => { + window.scrollTo({ + top: 0, + behavior: 'smooth', + }); }); - }); + } block.append(footer); } From c2723ba836ebf0fbfc99f749a5b0a8f8788fef6b Mon Sep 17 00:00:00 2001 From: Ioana Iordache Date: Mon, 9 Sep 2024 13:53:26 +0200 Subject: [PATCH 013/159] KAW-7905: footer updates --- blocks/footer/footer.css | 16 +++++------ blocks/footer/footer.js | 61 +++++++++++++++++++--------------------- 2 files changed, 36 insertions(+), 41 deletions(-) diff --git a/blocks/footer/footer.css b/blocks/footer/footer.css index 925044b..f73ba32 100644 --- a/blocks/footer/footer.css +++ b/blocks/footer/footer.css @@ -1,5 +1,5 @@ footer { - background-color: #222; + background-color: var(--black); color: var(--c-primary-white); position: relative; padding: 0 20px; @@ -13,12 +13,9 @@ footer { margin: 0; } -.footer .footer-column:first-child { - margin: 0; -} - .footer .footer-column:last-child { padding-bottom: 0; + margin: 0; } .footer .block.columns .footer-column { @@ -28,11 +25,11 @@ footer { } .footer .footer-column ul { - margin-top: 20px; + margin-top: 24px; padding: 0; list-style: none; display: flex; - gap: 24px; + gap: 16px; flex-direction: column; } @@ -52,6 +49,7 @@ footer { } .footer .footer-list-item a { + border-bottom: 1px solid transparent; color: var(--c-primary-white); display: flex; gap: 15px; @@ -61,8 +59,7 @@ footer { .footer .footer-list-item a:hover, .footer .footer-list-item a:active { - color: var(--action-hover); - text-decoration: none; + border-bottom: 1px solid var(--c-primary-white); } .footer .footer-list-item a:focus { @@ -73,6 +70,7 @@ footer { .footer .footer-list-item a:has(span.icon):focus, .footer .footer-list-item a:has(span.icon):hover { filter: brightness(2); + border: none; } .footer .back-to-top { diff --git a/blocks/footer/footer.js b/blocks/footer/footer.js index 671ce85..15c5068 100644 --- a/blocks/footer/footer.js +++ b/blocks/footer/footer.js @@ -48,49 +48,46 @@ export default async function decorate(block) { }); // Back to top button - const path = window.location.pathname; - if (!(path.includes('importatori-dealer') || path.includes('import-dealers'))) { - const backToTopNode = document.createRange().createContextualFragment(` + const backToTopNode = document.createRange().createContextualFragment(` `); - footer.prepend(backToTopNode); + footer.prepend(backToTopNode); - const backToTopButton = footer.querySelector('.back-to-top'); - const observer = new IntersectionObserver((entries) => { - entries.forEach((entry) => { - if (entry.isIntersecting) { - backToTopButton.style.position = 'absolute'; - backToTopButton.style.bottom = `${entry.boundingClientRect.height + 80}px`; - } else { - backToTopButton.style.position = 'fixed'; - backToTopButton.style.bottom = '80px'; - } - }); - }); - observer.observe(footer); - - window.addEventListener('scroll', () => { - const scrollPosition = window.scrollY + window.innerHeight; - const documentHeight = document.documentElement.scrollHeight; - - // Display button if user scrolls close to the bottom, 40px above the footer - if (scrollPosition >= documentHeight / 3) { - backToTopButton.style.display = 'block'; + const backToTopButton = footer.querySelector('.back-to-top'); + const observer = new IntersectionObserver((entries) => { + entries.forEach((entry) => { + if (entry.isIntersecting) { + backToTopButton.style.position = 'absolute'; + backToTopButton.style.bottom = `${entry.boundingClientRect.height + 80}px`; } else { - backToTopButton.style.display = 'none'; + backToTopButton.style.position = 'fixed'; + backToTopButton.style.bottom = '80px'; } }); + }); + observer.observe(footer); - footer.querySelector('.back-to-top').addEventListener('click', () => { - window.scrollTo({ - top: 0, - behavior: 'smooth', - }); + window.addEventListener('scroll', () => { + const scrollPosition = window.scrollY + window.innerHeight; + const documentHeight = document.documentElement.scrollHeight; + + // Display button if user scrolls close to the bottom, 40px above the footer + if (scrollPosition >= documentHeight / 3) { + backToTopButton.style.display = 'block'; + } else { + backToTopButton.style.display = 'none'; + } + }); + + footer.querySelector('.back-to-top').addEventListener('click', () => { + window.scrollTo({ + top: 0, + behavior: 'smooth', }); - } + }); block.append(footer); } From eb80a94e18d2d5da3785a382a153464cafa69fba Mon Sep 17 00:00:00 2001 From: Ioana Iordache Date: Mon, 9 Sep 2024 15:35:37 +0200 Subject: [PATCH 014/159] KAW-7905: correct link states --- blocks/footer/footer.css | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/blocks/footer/footer.css b/blocks/footer/footer.css index f73ba32..71c2cfb 100644 --- a/blocks/footer/footer.css +++ b/blocks/footer/footer.css @@ -58,19 +58,17 @@ footer { } .footer .footer-list-item a:hover, +.footer .footer-list-item a:focus, .footer .footer-list-item a:active { border-bottom: 1px solid var(--c-primary-white); } -.footer .footer-list-item a:focus { - color: var(--action-focus); - text-decoration: none; -} +.footer .footer-list-item a:has(span.icon):hover, .footer .footer-list-item a:has(span.icon):focus, -.footer .footer-list-item a:has(span.icon):hover { +.footer .footer-list-item a:has(span.icon):active { filter: brightness(2); - border: none; + border-bottom: 1px solid transparent; } .footer .back-to-top { From 7a4d5f98406fb53ab2dcf47268b49736ebe67c40 Mon Sep 17 00:00:00 2001 From: Lakshmishri Date: Mon, 9 Sep 2024 16:54:00 +0200 Subject: [PATCH 015/159] add localhost for not loading cookies --- scripts/delayed.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/scripts/delayed.js b/scripts/delayed.js index c111c14..98ffa15 100644 --- a/scripts/delayed.js +++ b/scripts/delayed.js @@ -2,7 +2,7 @@ import { loadScript } from './aem.js'; // OneTrust Cookies Consent Notice if (!window.location.pathname.includes('srcdoc') - && !['hlx.live', 'aem.page', 'aem.live'].some((url) => window.location.host.includes(url))) { + && !['localhost', 'hlx.live', 'aem.page', 'aem.live'].some((url) => window.location.host.includes(url))) { // when running on localhost in the block library host is empty but the path is srcdoc // on localhost/hlx.page/hlx.live the consent notice is displayed every time the page opens, // because the cookie is not persistent. To avoid this annoyance, disable unless on the From 598088797032e0470f6eb5d5e6244df2295f1ffc Mon Sep 17 00:00:00 2001 From: Lakshmishri Date: Mon, 9 Sep 2024 16:57:23 +0200 Subject: [PATCH 016/159] add dev env to not show cookies consent --- scripts/delayed.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/scripts/delayed.js b/scripts/delayed.js index 98ffa15..143c9ee 100644 --- a/scripts/delayed.js +++ b/scripts/delayed.js @@ -2,7 +2,7 @@ import { loadScript } from './aem.js'; // OneTrust Cookies Consent Notice if (!window.location.pathname.includes('srcdoc') - && !['localhost', 'hlx.live', 'aem.page', 'aem.live'].some((url) => window.location.host.includes(url))) { + && !['localhost', 'hlx.page', 'hlx.live', 'aem.page', 'aem.live'].some((url) => window.location.host.includes(url))) { // when running on localhost in the block library host is empty but the path is srcdoc // on localhost/hlx.page/hlx.live the consent notice is displayed every time the page opens, // because the cookie is not persistent. To avoid this annoyance, disable unless on the From f7254e046df545aea266e2d1be52f6ec5352ed15 Mon Sep 17 00:00:00 2001 From: Lakshmishri Date: Wed, 11 Sep 2024 09:51:06 +0200 Subject: [PATCH 017/159] KAW-7936 wire up title component --- blocks/title/title.css | 62 ++++++++++++++++++++++++++++++++++++++++++ blocks/title/title.js | 31 +++++++++++++++++++++ scripts/helpers.js | 54 ++++++++++++++++++++++++++++++++++++ styles/styles.css | 11 ++++---- 4 files changed, 153 insertions(+), 5 deletions(-) create mode 100644 blocks/title/title.css create mode 100644 blocks/title/title.js diff --git a/blocks/title/title.css b/blocks/title/title.css new file mode 100644 index 0000000..210af2d --- /dev/null +++ b/blocks/title/title.css @@ -0,0 +1,62 @@ +.title { + padding-top: 40px; + padding-bottom: 60px; + max-width: 616px; + display: flex; + flex-flow: column; + gap: 12px; +} + +.heading { + margin: 0; + + strong { + font-weight: normal; + color: var(--text-red); + } +} + +.title.line { + padding-top: 80px; + padding-bottom: 40px; + align-items: center; +} + +.vertical-line-wrapper { + height: 80px; + width: 2px; + align-items: flex-end; + display: flex; +} + +.vertical-line { + height: 20px; + width: 2px; + background-color: var(--text-red); +} + +.vertical-line.animate { + height: 80px; + transition: height 5s ease-in-out; +} + +@media (width >= 768px) { + .title { + max-width: 784px; + padding-top: 60px; + padding-bottom: 60px; + } + + .title.line { + padding-top: 120px; + padding-bottom: 60px; + } +} + +@media (width >= 1024px) { + .title { + max-width: 924px; + padding-top: 80px; + padding-bottom: 120px; + } +} \ No newline at end of file diff --git a/blocks/title/title.js b/blocks/title/title.js new file mode 100644 index 0000000..46d4122 --- /dev/null +++ b/blocks/title/title.js @@ -0,0 +1,31 @@ +import { unwrapDivs, adjustPretitle } from '../../scripts/helpers.js'; + +export default async function decorate(block) { + unwrapDivs(block); + adjustPretitle(block); + + const headings = block.querySelectorAll('h1, h2, h3, h4, h5, h6'); + [...headings].forEach((heading) => heading.classList.add('heading')); + + const isLineVariant = block.classList.contains('line'); + + if (isLineVariant) { + const lineEle = document.createElement('div'); + lineEle.classList.add('vertical-line-wrapper'); + const innerEle = document.createElement('div'); + innerEle.classList.add('vertical-line'); + lineEle.appendChild(innerEle); + block.prepend(lineEle); + + const observer = new IntersectionObserver((entries) => { + entries.forEach((entry) => { + if (entry.isIntersecting) { + innerEle.classList.add('animate'); + } else { + innerEle.classList.remove('animate'); + } + }); + }); + observer.observe(block); + } +} diff --git a/scripts/helpers.js b/scripts/helpers.js index 999bb65..99494cb 100644 --- a/scripts/helpers.js +++ b/scripts/helpers.js @@ -69,3 +69,57 @@ export function addTitleAttributeToIconLink(element) { element.setAttribute('title', iconElement.getAttribute('data-icon-name')); } } + +export const adjustPretitle = (element) => { + const headingSelector = 'h1, h2, h3, h4, h5, h6'; + + [...element.querySelectorAll(headingSelector)].forEach((heading) => { + const isNextElHeading = heading.nextElementSibling?.matches(headingSelector); + + if (!isNextElHeading) { + return; + } + + const currentLevel = Number(heading.tagName[1]); + const nextElLevel = Number(heading.nextElementSibling.tagName[1]); + + if (currentLevel > nextElLevel) { + const pretitle = document.createElement('span'); + pretitle.classList.add('pretitle'); + pretitle.append(...heading.childNodes); + + heading.replaceWith(pretitle); + } + }); +}; + +export const unwrapDivs = (element, options = {}) => { + const stack = [element]; + const { ignoreDataAlign = false } = options; + + while (stack.length > 0) { + const currentElement = stack.pop(); + + let i = 0; + while (i < currentElement.children.length) { + const node = currentElement.children[i]; + const attributesLength = [...node.attributes].filter((el) => { + if (ignoreDataAlign) { + return !(el.name.startsWith('data-align') || el.name.startsWith('data-valign')); + } + + return el; + }).length; + + if (node.tagName === 'DIV' && attributesLength === 0) { + while (node.firstChild) { + currentElement.insertBefore(node.firstChild, node); + } + node.remove(); + } else { + stack.push(node); + i += 1; + } + } + } +}; diff --git a/styles/styles.css b/styles/styles.css index 2620f91..2ea9594 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -45,6 +45,7 @@ --error: #b81f2d; /* old variables */ + --text-red: var(--action-default); --link-color: var(--action-default); --link-hover-color: var(--action-hover); --c-primary-white: var(--white); @@ -108,7 +109,7 @@ h6, h1, .h1 { - font-size: 2.25rem; + font-size: 2.875rem; font-style: normal; font-weight: 500; line-height: 140%; @@ -160,15 +161,15 @@ h6, letter-spacing: 0.15px; } -@media (width >= 768px) { +@media (width >= 1025px) { h1, .h1 { - font-size: 2.5rem; + font-size: 3.75rem; } h2, .h2 { - font-size: 2.25rem; + font-size: 2.5rem; } h3, @@ -192,7 +193,7 @@ h6, } } -@media (width >= 1024px) { +@media (width >= 1440px) { h1, .h1 { font-size: 4.375rem; From 697ba8c26031cff24a2334abe63e8e1969253102 Mon Sep 17 00:00:00 2001 From: Tomasz Dziezyk Date: Wed, 11 Sep 2024 15:15:27 +0200 Subject: [PATCH 018/159] KAW-7904 Implement header --- blocks/header/header.css | 511 +++++++++++++++++---------------------- blocks/header/header.js | 100 ++++++-- styles/styles.css | 5 +- 3 files changed, 307 insertions(+), 309 deletions(-) diff --git a/blocks/header/header.css b/blocks/header/header.css index 98ba3ef..362725d 100644 --- a/blocks/header/header.css +++ b/blocks/header/header.css @@ -1,433 +1,366 @@ /* header and nav layout */ header .nav-wrapper { - --color-gray: #999; - width: 100%; - z-index: 2; - position: relative; + z-index: var(--z-index-header); + position: fixed; } header nav { - box-sizing: border-box; display: flex; - flex-flow: column; + flex-flow: row; height: var(--nav-height); - padding: 15px 30px; + padding: 20px; + max-width: 1240px; + margin: auto; } -header nav[aria-expanded='true'] { - overflow-y: auto; - min-height: 100vh; - background-color: #222; - color: var(--color-gray); - max-width: 350px; - width: 50%; - position: relative; - min-width: 270px +header nav p { + margin: 0; + line-height: 1; } -header .nav-brand, -.nav-link-section .icon-logo-bimota-h { - display: none; +header a:any-link { + font-size: 1.25rem; + font-style: normal; + font-weight: 500; + line-height: 130%; + color: var(--grey-90); } -header .nav-wrapper.hide .nav-brand { - display: none; +header a:active, +header a:focus, +header a:hover { + color: var(--action-default); } -header .nav-wrapper.hide nav { - height: 100px; +/* brand */ +header .nav-brand { + flex-grow: 1; } -header nav p { - margin: 0; - line-height: 1; +header .nav-brand span.icon { + display: flex; + height: auto; + width: auto; } -.nav-logo-mobile { - position: absolute; - top: 10px; - left: 0; - transform: translateX(40vw); +header .nav-brand img { + width: 111px; + height: 31px; } -.nav-logo-mobile .icon-logo-bimota-h { - width: 100%; - height: 100%; - max-width: 170px; - max-height: 47px; +header .nav-dealer-locator { + margin-right: 20px; } -header a:any-link, -.nav-drop-text { - color: currentcolor; - padding: 5px 0; - display: flex; +header .nav-dealer-locator a.button { + display: inline-flex; + height: 30px; + padding: 6px 12px; + justify-content: center; align-items: center; - column-gap: .25em; - text-decoration: none; -} - -.nav-sections a.active, -.nav-drop.active .nav-drop-text { - color: var(--c-primary-white); + gap: 8px; + border-radius: 26px; + background: var(--white); + color: var(--black); + text-align: center; + font-size: 0.75rem; + font-style: normal; + font-weight: 600; + line-height: 150%; + letter-spacing: 0.44px; } -/* brand */ -header .nav-brand img { - max-width: 100%; - height: auto; +header .nav-drop picture { + display: none; } header .nav-link-section { - display: flex; + position: fixed; + top: 0; + right: 0; + height: 100vh; + width: 320px; + padding: 25px 20px 0; + display: none; flex-flow: column; - gap: 30px; + gap: 20px; + background-color: var(--white); + z-index: 2; } -/* sections */ -header .nav-sections { - flex: 1; - display: none; - visibility: hidden; +header .nav-close-button { + align-self: flex-end; + width: 20px; + margin-bottom: 20px; } -header nav[aria-expanded='true'] .nav-sections { +header .nav-flag { + position: fixed; + bottom: 0; + right: 20px; display: flex; - visibility: visible; } -.nav-tools .default-content-wrapper { +header nav[aria-expanded="true"] .nav-link-section { display: flex; - padding: 7px; - list-style: none; - margin-bottom: 0; - align-items: center; -} - -header .nav-sections .default-content-wrapper { - flex: 1; -} - -.nav-sections .default-content-wrapper .nav-logo { - align-self: flex-start; } header .nav-sections ul { list-style: none; - padding-left: 0; - font-size: 14px; - font-weight: 600; + padding: 0; + font-size: 1.25rem; + font-style: normal; + font-weight: 500; + line-height: 130%; display: flex; - align-items: flex-start; - column-gap: .25em; flex-flow: column; + gap: 24px; + margin: 0; } header .nav-sections ul li { width: 100%; } -.nav-sections ul > li > ul { - margin-top: 0; +header .nav-drop ul { + cursor: auto; } -/* tools */ -header .nav-tools { - display: none; - visibility: hidden; +header .nav-sections ul > li > ul { + margin: 0; + gap: 16px; + padding: 10px 0 0; } -header nav[aria-expanded='true'] .nav-tools { +header .nav-sections ul > li > ul a:any-link { + font-size: 0.875rem; + font-style: normal; + font-weight: 500; + line-height: 150%; + letter-spacing: 0.44px; +} + +/* tools */ +header .nav-tools .default-content-wrapper { + list-style: none; + padding: 0; + gap: 16px; display: flex; - visibility: visible; - padding-left: 30px; - align-items: center; + margin: 27px 0 0; } -.nav-tools .default-content-wrapper li { - padding: 5px 10px 6px; - line-height: 1; - color: var(--c-primary-white); +header .nav-tools .default-content-wrapper li { + margin: 0; +} + +header .nav-tools .default-content-wrapper li a:any-link { + font-size: 0.875rem; + font-style: normal; + font-weight: 600; + line-height: 130%; + letter-spacing: 0.44px; } /* hamburger */ header .nav-hamburger { - height: 22px; display: flex; - align-self: start; - justify-content: flex-end; - flex: 1; + align-items: center; } header .nav-hamburger button { - height: 22px; - margin: auto; + height: 24px; border: 0; border-radius: 0; padding: 0; background-color: transparent; - color: inherit; - overflow: initial; - text-overflow: initial; - white-space: initial; cursor: pointer; } -header .nav-hamburger-icon, -header .nav-hamburger-icon::before, -header .nav-hamburger-icon::after { - box-sizing: border-box; - display: block; - position: relative; - width: 20px; -} - -header .nav-hamburger-icon::before, -header .nav-hamburger-icon::after { - content: ''; - position: absolute; - background: currentcolor; -} - -header nav[aria-expanded='true'] .nav-hamburger { - flex: initial; - align-self: flex-end; -} - -header nav[aria-expanded='false'] .nav-hamburger-icon, -header nav[aria-expanded='false'] .nav-hamburger-icon::before, -header nav[aria-expanded='false'] .nav-hamburger-icon::after { - height: 2px; - border-radius: 2px; - background: var(--color-gray); -} - -header nav[aria-expanded='false'] .nav-hamburger-icon::before { - top: -6px; -} - -header nav[aria-expanded='false'] .nav-hamburger-icon::after { - top: 6px; -} - -header nav[aria-expanded='true'] .nav-hamburger-icon { - height: 22px; -} - -header nav[aria-expanded='true'] .nav-hamburger-icon::before, -header nav[aria-expanded='true'] .nav-hamburger-icon::after { - top: 3px; - left: 1px; - transform: rotate(45deg); - transform-origin: 2px 1px; - width: 24px; - height: 2px; - border-radius: 2px; -} - -header nav[aria-expanded='true'] .nav-hamburger-icon::after { - top: unset; - bottom: 3px; - transform: rotate(-45deg); -} - /* nav-drop */ header .nav-drop { position: relative; cursor: pointer; } -header .nav-drop::after { - content: ''; - display: inline-block; - position: absolute; - top: 10px; - right: 5px; - transform: rotate(135deg); - width: 6px; - height: 6px; - border: 2px solid currentcolor; - border-radius: 0 1px 0 0; - border-width: 2px 2px 0 0; -} - -header .nav-drop[aria-expanded='false'] ul { +header .nav-drop[aria-expanded="false"] ul { display: none; } -header .nav-drop[aria-expanded='true'] ul { +.nav-sections .nav-drop-text { display: flex; - flex-flow: column; - padding: 5px 0 5px 15px; -} - -header .nav-drop[aria-expanded='true']::after { - bottom: 0.5em; - transform: rotate(315deg); + justify-content: space-between; } .nav-sections .nav-drop-text:hover { text-decoration: none; } -.nav-sections a:hover, -header nav[aria-expanded='true'] button:hover .nav-hamburger-icon::after, -header nav[aria-expanded='true'] button:hover .nav-hamburger-icon::before, -header .nav-drop[aria-expanded='true']:hover::after { - color: #ffffffb2; +header .nav-backdrop { + position: fixed; + top: 0; + left: 0; + width: 100vw; + height: 100vh; + background: rgb(0 0 0 / 40%); + z-index: 1; } -@media (width >= 640px) { - header .nav-drop::after { - top: 8px; - } +header .nav-backdrop.hide { + display: none; } -@media (width >= 992px) { - header { - --nav-height: 130px; - } - +@media (width >= 768px) { header nav { - display: flex; - justify-content: space-between; + padding: 20px 30px 16px 24px; } - header a:any-link, - .nav-link-section .a, - .nav-tools .default-content-wrapper li { - color: var(--text-color); - letter-spacing: 1px; - font-weight: 400; + header .nav-brand img { + height: 34px; + width: auto; } - header .nav-wrapper { - max-width: 100%; - background-color: var(--c-primary-white); - position: fixed; + header .nav-link-section { + padding: 24px 30px 0; } - header nav[aria-expanded='true'] { - min-height: auto; - overflow: visible; - margin: auto; - background-color: var(--c-primary-white); - padding-top: 0; - max-width: 1280px; - width: 100%; + header .nav-dealer-locator { + margin-right: 32px; } - header nav .nav-hamburger { - display: none; - visibility: hidden; + header .nav-flag { + right: 30px; } +} +@media (width >= 1024px) { header .nav-brand { - display: block; - align-self: flex-end; + flex-grow: unset; } header .nav-link-section { - flex-flow: row; - } - - header .nav-sections { - display: flex; - visibility: visible; - white-space: nowrap; + position: static; + width: auto; + padding: 0; + flex-direction: row; + background-color: transparent; + height: auto; + flex-grow: 1; align-items: center; } - header .nav-sections .default-content-wrapper { - display: flex; - flex-flow: row; - justify-content: space-between; - flex: 1; - align-items: center; + header .nav-backdrop { + display: none; } - .nav-logo-mobile .icon-logo-bimota-h { + header .nav-hamburger, + header .nav-close-button, + header .nav-flag, + header .nav-drop-text .chevron-icon { display: none; } - header .nav-sections .icon-logo-bimota-h { - display: block; - height: 100%; - width: 100%; - max-width: 250px; - max-height: 70px; + header .nav-dealer-locator { + margin: 0; + display: flex; + align-items: center; } - .nav-sections a:hover, - .nav-sections a.active, - .nav-drop.active .nav-drop-text { - color: var(--link-color); + header .nav-sections { + flex-grow: 1; + justify-content: center; + display: flex; } header .nav-sections ul { - display: flex; - gap: 30px; - margin: 0; - flex-flow: row; - align-items: center; - justify-content: center; + flex-direction: row; + gap: 28px; } - .nav-tools .default-content-wrapper li { - cursor: pointer; + header .nav-tools { + margin-right: 24px; } - header .nav-sections .default-content-wrapper > ul > li { - flex: 0 1 auto; - position: relative; - font-weight: 500; - min-height: 80px; - display: flex; + header .nav-tools ul { + flex-direction: row; + gap: 12px; } - header .nav-sections .default-content-wrapper > ul > li > ul { - display: none; - position: relative; + header .nav-tools .default-content-wrapper { + margin: 0; } - header .nav-sections .default-content-wrapper > ul > li[aria-expanded='true'] > ul { - display: block; - position: absolute; - width: 250px; - top: 80px; - padding: 25px; - background-color: var(--c-primary-white); - white-space: initial; - box-shadow: 0 5px 12px rgba(0 0 0 / 15%); + header .nav-sections ul, + header .nav-link-section a:any-link, + header .nav-tools .default-content-wrapper li a:any-link { + font-size: 0.875rem; + font-style: normal; + font-weight: 600; + line-height: 130%; + letter-spacing: 0.44px; } - .nav-tools .default-content-wrapper a, - .nav-drop-text { - color: var(--text-color); + header .nav-sections ul li { + width: auto; } - .nav-tools a:any-link:hover { - color: var(--text-color); + /* expanded menu item content */ + header .nav-sections .nav-drop ul { + position: fixed; + top: var(--nav-height); + padding: 40px; + width: 100vw; + left: 0; + height: auto; + background: var(--white); + gap: unset; + justify-content: space-between; + flex-wrap: wrap; + row-gap: 40px; } - - .nav-sections .nav-drop ul a:any-link { - color: var(--color-gray); + + header .nav-sections .nav-drop ul li a:any-link { + padding: 0 16px; + display: flex; + flex-direction: column; + gap: 16px; + font-size: 1.25rem; + font-style: normal; + font-weight: 500; + line-height: 140%; } - - .nav-sections .nav-drop ul a:hover { - color: var(--link-hover-color); + + header .nav-sections .nav-drop ul picture { + display: flex; } - header .nav-sections .default-content-wrapper > ul > li > ul > li { - padding: 8px 0; + header .nav-sections .nav-drop ul img { + width: 187px; + height: auto; } - header .nav-drop::after { - display: none; + header .nav-drop[aria-expanded="true"]::after { + content: ''; + display: block; + width: 100vw; + height: calc(100vh - var(--nav-height)); + position: fixed; + top: var(--nav-height); + left: 0; + background: rgb(0 0 0 / 40%); + z-index: -1; + cursor: auto; } +} - header nav[aria-expanded='true'] .nav-tools { +@media (width >= 1024px) { + header nav { padding-left: 0; + padding-right: 0; + } + + header .nav-sections .nav-drop ul { + padding-left: calc((100vw - 1240px) / 2); + padding-right: calc((100vw - 1240px) / 2); } } \ No newline at end of file diff --git a/blocks/header/header.js b/blocks/header/header.js index 4ebced2..7160a0e 100644 --- a/blocks/header/header.js +++ b/blocks/header/header.js @@ -2,7 +2,41 @@ import { getMetadata } from '../../scripts/aem.js'; import { loadFragment } from '../fragment/fragment.js'; // media query match that indicates mobile/tablet width -const isDesktop = window.matchMedia('(min-width: 992px)'); +const isDesktop = window.matchMedia('(min-width: 1024px)'); + +const hamburgerIcon = ` + + + + + + + + + + +`; + +const chevronIcon = ` + + + +`; + +const flag = ` + + + + + + +`; + +const closeIcon = ` + + + +`; function closeOnEscape(e) { if (e.code === 'Escape') { @@ -70,6 +104,13 @@ function toggleMenu(nav, navSections, forceExpanded = null) { } }); + const backdropEl = nav.querySelector('.nav-backdrop'); + if (!expanded) { + backdropEl.classList.remove('hide'); + } else { + backdropEl.classList.add('hide'); + } + // enable menu collapse on escape keypress if (!expanded || isDesktop.matches) { // collapse menu on escape press @@ -117,7 +158,8 @@ function redirectPage(event) { export default async function decorate(block) { // load nav as fragment const navMeta = getMetadata('nav'); - const navPath = navMeta ? new URL(navMeta, window.location).pathname : '/nav'; + // const navPath = navMeta ? new URL(navMeta, window.location).pathname : '/nav'; + const navPath = '/drafts/tdziezyk/v3-nav'; const fragment = await loadFragment(navPath); // decorate nav DOM @@ -126,7 +168,7 @@ export default async function decorate(block) { nav.id = 'nav'; while (fragment.firstElementChild) nav.append(fragment.firstElementChild); - const classes = ['brand', 'sections', 'tools']; + const classes = ['brand', 'sections', 'tools', 'dealer-locator']; classes.forEach((c, i) => { const section = nav.children[i]; if (section) section.classList.add(`nav-${c}`); @@ -140,29 +182,31 @@ export default async function decorate(block) { } const navSections = nav.querySelector('.nav-sections'); - const mobileLogoWrapper = document.createElement('div'); - mobileLogoWrapper.classList.add('nav-logo-mobile'); + if (navSections) { navSections.querySelectorAll(':scope .default-content-wrapper > ul > li').forEach((navSection) => { if (navSection.querySelector('ul')) { const textWrapper = document.createElement('a'); textWrapper.classList.add('nav-drop-text'); textWrapper.append(navSection.firstChild); + textWrapper.innerHTML += `${chevronIcon}`; navSection.prepend(textWrapper); navSection.classList.add('nav-drop'); + + // wrapping pictures with links if the link follows immediately after the picture + navSection.querySelectorAll('ul picture + a').forEach((link) => { + const picture = link.previousElementSibling; + + link.prepend(picture); + }); } - navSection.addEventListener('click', () => toggleSubNav(navSection, navSections)); + navSection.addEventListener('click', (event) => { + if (event.target.classList.contains('nav-drop-text')) { + toggleSubNav(navSection, navSections); + } + }); }); - const defaultContentWrapper = navSections.querySelector('.default-content-wrapper'); - const logoButton = defaultContentWrapper.querySelector('.default-content-wrapper .button'); - if (logoButton) { - logoButton.className = 'nav-logo'; - defaultContentWrapper.prepend(logoButton); - const buttonContainer = defaultContentWrapper.querySelector('.button-container'); - mobileLogoWrapper.appendChild(logoButton.cloneNode(true)); - buttonContainer.remove(); - } } const navTools = nav.querySelector('.nav-tools'); @@ -176,21 +220,39 @@ export default async function decorate(block) { }); } + const navDealerLocator = nav.querySelector('.nav-dealer-locator'); + const dealerLocatorButton = navDealerLocator.querySelector('a'); + navDealerLocator.innerHTML = ''; + navDealerLocator.append(dealerLocatorButton); + if (navSections && navTools) { const navLinksWrapper = document.createElement('div'); navLinksWrapper.classList.add('nav-link-section'); - navLinksWrapper.append(navSections, navTools); + const flagEl = document.createElement('span'); + flagEl.classList.add('nav-flag'); + flagEl.innerHTML = flag; + const closeEl = document.createElement('button'); + closeEl.classList.add('nav-close-button'); + closeEl.innerHTML = closeIcon; + closeEl.addEventListener('click', () => toggleMenu(nav, navSections)); + navLinksWrapper.append(closeEl, navSections, navTools, flagEl); nav.append(navLinksWrapper); + + const backdrop = document.createElement('div'); + backdrop.classList.add('nav-backdrop'); + nav.append(backdrop); } + nav.append(navDealerLocator); + // hamburger for mobile const hamburger = document.createElement('div'); hamburger.classList.add('nav-hamburger'); hamburger.innerHTML = ``; hamburger.addEventListener('click', () => toggleMenu(nav, navSections)); - nav.prepend(hamburger); + nav.append(hamburger); nav.setAttribute('aria-expanded', 'false'); // prevent mobile nav behavior on window resize toggleMenu(nav, navSections, isDesktop.matches); @@ -200,7 +262,7 @@ export default async function decorate(block) { const navWrapper = document.createElement('div'); navWrapper.className = 'nav-wrapper'; - navWrapper.append(mobileLogoWrapper, nav); + navWrapper.append(nav); block.append(navWrapper); checkForActiveLink(navSections); diff --git a/styles/styles.css b/styles/styles.css index 7d4b85c..3b7d291 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -17,7 +17,7 @@ --body-font-size: 16px; /* nav height */ - --nav-height: 80px; + --nav-height: 70px; /* section paddings */ --section-y-padding: 40px; @@ -44,6 +44,9 @@ --warning: #e68619; --error: #b81f2d; + /* z indexes */ + --z-index-header: 2; + /* old variables */ --link-color: var(--action-default); --link-hover-color: var(--action-hover); From 51af69cf5b6af2e021bec960d80196ffae19ded7 Mon Sep 17 00:00:00 2001 From: Tomasz Dziezyk Date: Thu, 12 Sep 2024 09:07:22 +0200 Subject: [PATCH 019/159] KAW-7904 Improve header css'es --- blocks/header/header.css | 75 +++++++++++++++++++++++++++++++++++++--- blocks/header/header.js | 6 ++-- 2 files changed, 74 insertions(+), 7 deletions(-) diff --git a/blocks/header/header.css b/blocks/header/header.css index 362725d..3693fa7 100644 --- a/blocks/header/header.css +++ b/blocks/header/header.css @@ -3,6 +3,7 @@ header .nav-wrapper { width: 100%; z-index: var(--z-index-header); position: fixed; + color: var(--grey-90); } header nav { @@ -12,6 +13,7 @@ header nav { padding: 20px; max-width: 1240px; margin: auto; + background-color: var(--white); } header nav p { @@ -62,13 +64,23 @@ header .nav-dealer-locator a.button { gap: 8px; border-radius: 26px; background: var(--white); - color: var(--black); text-align: center; font-size: 0.75rem; font-style: normal; font-weight: 600; line-height: 150%; letter-spacing: 0.44px; + border: solid 1px var(--action-default); +} + +header .nav-dealer-locator a.button:hover { + border-color: var(--action-hover); + color: var(--action-hover); +} + +header .nav-dealer-locator a.button:focus { + border-color: var(--action-focus); + color: var(--action-focus); } header .nav-drop picture { @@ -177,6 +189,10 @@ header .nav-hamburger button { cursor: pointer; } +header .nav-hamburger button svg { + color: var(--grey-90); +} + /* nav-drop */ header .nav-drop { position: relative; @@ -210,6 +226,40 @@ header .nav-backdrop.hide { display: none; } +header.transparent nav { + background-color: transparent; + color: var(--white); +} + +header.transparent a:any-link { + color: var(--white); +} + +header.transparent .nav-hamburger svg { + color: var(--white); +} + +header.transparent .nav-dealer-locator a.button { + background-color: var(--white); + border-color: transparent; + color: var(--black); +} + +header.transparent .nav-dealer-locator a.button:hover { + border-color: var(--action-hover); + color: var(--action-hover); +} + +header.transparent .nav-dealer-locator a.button:focus { + border-color: var(--action-focus); + color: var(--action-focus); +} + +header.transparent nav[aria-expanded="true"] .nav-link-section a:any-link, +header.transparent nav[aria-expanded="true"] .nav-link-section a.nav-drop-text { + color: var(--grey-90); +} + @media (width >= 768px) { header nav { padding: 20px 30px 16px 24px; @@ -340,7 +390,7 @@ header .nav-backdrop.hide { } header .nav-drop[aria-expanded="true"]::after { - content: ''; + content: ""; display: block; width: 100vw; height: calc(100vh - var(--nav-height)); @@ -351,9 +401,26 @@ header .nav-backdrop.hide { z-index: -1; cursor: auto; } + + header.transparent nav[aria-expanded="true"] .nav-link-section a:any-link, + header.transparent nav[aria-expanded="true"] .nav-link-section a.nav-drop-text { + color: var(--white); + } + + header.transparent nav[aria-expanded="true"] .nav-link-section .nav-drop a:any-link { + color: var(--grey-90); + } + + header.transparent nav[aria-expanded="true"] .nav-link-section .nav-drop a:focus { + color: var(--action-focus); + } + + header.transparent nav[aria-expanded="true"] .nav-link-section .nav-drop a:hover { + color: var(--action-hover); + } } -@media (width >= 1024px) { +@media (width >= 1440px) { header nav { padding-left: 0; padding-right: 0; @@ -363,4 +430,4 @@ header .nav-backdrop.hide { padding-left: calc((100vw - 1240px) / 2); padding-right: calc((100vw - 1240px) / 2); } -} \ No newline at end of file +} diff --git a/blocks/header/header.js b/blocks/header/header.js index 7160a0e..d1ea75d 100644 --- a/blocks/header/header.js +++ b/blocks/header/header.js @@ -5,9 +5,9 @@ import { loadFragment } from '../fragment/fragment.js'; const isDesktop = window.matchMedia('(min-width: 1024px)'); const hamburgerIcon = ` - + - + @@ -202,7 +202,7 @@ export default async function decorate(block) { } navSection.addEventListener('click', (event) => { - if (event.target.classList.contains('nav-drop-text')) { + if (event.target.classList.contains('nav-drop-text') || event.target.closest('.nav-drop-text')) { toggleSubNav(navSection, navSections); } }); From cc6676475b1bfe7e5446b01dbc11adb6385b3806 Mon Sep 17 00:00:00 2001 From: Tomasz Dziezyk Date: Thu, 12 Sep 2024 10:43:04 +0200 Subject: [PATCH 020/159] KAW-7904 Add scrolling logic for header --- blocks/header/header.css | 16 ++++++++++++++-- blocks/header/header.js | 31 +++++++++++++++++++++++++++++++ styles/styles.css | 4 ++++ 3 files changed, 49 insertions(+), 2 deletions(-) diff --git a/blocks/header/header.css b/blocks/header/header.css index 3693fa7..7cc213e 100644 --- a/blocks/header/header.css +++ b/blocks/header/header.css @@ -1,8 +1,19 @@ /* header and nav layout */ + +header { + position: fixed; + top: 0; + transition: 500ms all; + width: 100vw; + z-index: var(--z-index-header); +} + +header.fade-out { + top: calc(-1 * var(--nav-height)); +} + header .nav-wrapper { width: 100%; - z-index: var(--z-index-header); - position: fixed; color: var(--grey-90); } @@ -231,6 +242,7 @@ header.transparent nav { color: var(--white); } +/* stylelint-disable-next-line no-descending-specificity */ header.transparent a:any-link { color: var(--white); } diff --git a/blocks/header/header.js b/blocks/header/header.js index d1ea75d..b0acf34 100644 --- a/blocks/header/header.js +++ b/blocks/header/header.js @@ -151,6 +151,35 @@ function redirectPage(event) { } window.location.replace(redirectUrl); } + +function handleTransparentAndScrolling(nav) { + const useTransparentVariant = !!document.querySelector('main > .section > .hero-wrapper'); + const header = nav.closest('header'); + let prevScrollingPosition = 0; + + document.addEventListener('scroll', () => { + const { scrollY } = window; + + if (useTransparentVariant) { + header.classList.add('transparent', 'can-be-transparent'); + + if (scrollY > 100) { + header.classList.remove('transparent'); + } else { + header.classList.add('transparent'); + } + } + + if (scrollY - prevScrollingPosition > 0 && scrollY > 200) { + header.classList.add('fade-out'); + } else if (prevScrollingPosition - scrollY > 0) { + header.classList.remove('fade-out'); + } + + prevScrollingPosition = scrollY; + }); +} + /** * loads and decorates the header, mainly the nav * @param {Element} block The header block element @@ -277,4 +306,6 @@ export default async function decorate(block) { }); }, { rootMargin: '0px 0px -1000px 0px' }); observer.observe(document.querySelector('main')); + + handleTransparentAndScrolling(nav); } diff --git a/styles/styles.css b/styles/styles.css index 3b7d291..96b3268 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -496,6 +496,10 @@ div[class$="-wrapper"]:not(:first-child) { } } +header:not(.can-be-transparent) + main { + margin-top: var(--nav-height); +} + /* sections */ main .section { padding: var(--section-y-padding) var(--section-x-padding); From ff06afa3bb8157a842eb85cbd14fe6987a7f834e Mon Sep 17 00:00:00 2001 From: Tomasz Dziezyk Date: Thu, 12 Sep 2024 10:49:01 +0200 Subject: [PATCH 021/159] KAW-7904 Fix chevron animation --- blocks/header/header.css | 10 ++++++++++ blocks/header/header.js | 4 ++-- 2 files changed, 12 insertions(+), 2 deletions(-) diff --git a/blocks/header/header.css b/blocks/header/header.css index 7cc213e..2ea963b 100644 --- a/blocks/header/header.css +++ b/blocks/header/header.css @@ -214,6 +214,16 @@ header .nav-drop[aria-expanded="false"] ul { display: none; } +header .nav-drop .chevron-icon { + transition: transform 200ms ease-in-out; + transform-origin: center center; + display: flex; +} + +header .nav-drop[aria-expanded="true"] .chevron-icon { + transform: rotate(180deg); +} + .nav-sections .nav-drop-text { display: flex; justify-content: space-between; diff --git a/blocks/header/header.js b/blocks/header/header.js index b0acf34..e677cfd 100644 --- a/blocks/header/header.js +++ b/blocks/header/header.js @@ -18,8 +18,8 @@ const hamburgerIcon = ` `; const chevronIcon = ` - - + + `; From 69c0329547b22cdd5d8de26d9ed4834fe4852e1e Mon Sep 17 00:00:00 2001 From: Tomasz Dziezyk Date: Thu, 12 Sep 2024 10:57:41 +0200 Subject: [PATCH 022/159] KAW-7904 Refactor --- blocks/header/header.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/blocks/header/header.css b/blocks/header/header.css index 2ea963b..e8e3b41 100644 --- a/blocks/header/header.css +++ b/blocks/header/header.css @@ -119,7 +119,7 @@ header .nav-close-button { } header .nav-flag { - position: fixed; + position: absolute; bottom: 0; right: 20px; display: flex; From bc596fb9ba17e92686b48f8c59b8d4bdf8cc4e3b Mon Sep 17 00:00:00 2001 From: Tomasz Dziezyk Date: Thu, 12 Sep 2024 11:25:03 +0200 Subject: [PATCH 023/159] KAW-7904 Update icons --- blocks/header/header.css | 15 ++++++++++--- blocks/header/header.js | 45 ++++++--------------------------------- icons/chevron.svg | 3 +++ icons/close.svg | 4 ++-- icons/hamburger.svg | 10 +++++++++ icons/logo-flag-black.svg | 6 ++++++ icons/logo.svg | 11 ++++++++++ scripts/scripts.js | 32 +++++++++++++++++++++++++++- 8 files changed, 82 insertions(+), 44 deletions(-) create mode 100644 icons/chevron.svg create mode 100644 icons/hamburger.svg create mode 100644 icons/logo-flag-black.svg create mode 100644 icons/logo.svg diff --git a/blocks/header/header.css b/blocks/header/header.css index e8e3b41..e30aac1 100644 --- a/blocks/header/header.css +++ b/blocks/header/header.css @@ -118,6 +118,11 @@ header .nav-close-button { margin-bottom: 20px; } +header .icon-close { + display: flex; + color: var(--grey-90); +} + header .nav-flag { position: absolute; bottom: 0; @@ -125,6 +130,10 @@ header .nav-flag { display: flex; } +header .nav-flag .icon { + display: flex; +} + header nav[aria-expanded="true"] .nav-link-section { display: flex; } @@ -214,13 +223,13 @@ header .nav-drop[aria-expanded="false"] ul { display: none; } -header .nav-drop .chevron-icon { +header .nav-drop .icon-chevron { transition: transform 200ms ease-in-out; transform-origin: center center; display: flex; } -header .nav-drop[aria-expanded="true"] .chevron-icon { +header .nav-drop[aria-expanded="true"] .icon-chevron { transform: rotate(180deg); } @@ -328,7 +337,7 @@ header.transparent nav[aria-expanded="true"] .nav-link-section a.nav-drop-text { header .nav-hamburger, header .nav-close-button, header .nav-flag, - header .nav-drop-text .chevron-icon { + header .nav-drop-text .icon-chevron { display: none; } diff --git a/blocks/header/header.js b/blocks/header/header.js index e677cfd..1222ef2 100644 --- a/blocks/header/header.js +++ b/blocks/header/header.js @@ -1,43 +1,10 @@ import { getMetadata } from '../../scripts/aem.js'; +import { customDecoreateIcons } from '../../scripts/scripts.js'; import { loadFragment } from '../fragment/fragment.js'; // media query match that indicates mobile/tablet width const isDesktop = window.matchMedia('(min-width: 1024px)'); -const hamburgerIcon = ` - - - - - - - - - - -`; - -const chevronIcon = ` - - - -`; - -const flag = ` - - - - - - -`; - -const closeIcon = ` - - - -`; - function closeOnEscape(e) { if (e.code === 'Escape') { const nav = document.getElementById('nav'); @@ -218,7 +185,7 @@ export default async function decorate(block) { const textWrapper = document.createElement('a'); textWrapper.classList.add('nav-drop-text'); textWrapper.append(navSection.firstChild); - textWrapper.innerHTML += `${chevronIcon}`; + textWrapper.innerHTML += ''; navSection.prepend(textWrapper); navSection.classList.add('nav-drop'); @@ -259,10 +226,10 @@ export default async function decorate(block) { navLinksWrapper.classList.add('nav-link-section'); const flagEl = document.createElement('span'); flagEl.classList.add('nav-flag'); - flagEl.innerHTML = flag; + flagEl.innerHTML = ''; const closeEl = document.createElement('button'); closeEl.classList.add('nav-close-button'); - closeEl.innerHTML = closeIcon; + closeEl.innerHTML = ''; closeEl.addEventListener('click', () => toggleMenu(nav, navSections)); navLinksWrapper.append(closeEl, navSections, navTools, flagEl); nav.append(navLinksWrapper); @@ -278,7 +245,7 @@ export default async function decorate(block) { const hamburger = document.createElement('div'); hamburger.classList.add('nav-hamburger'); hamburger.innerHTML = ``; hamburger.addEventListener('click', () => toggleMenu(nav, navSections)); nav.append(hamburger); @@ -308,4 +275,6 @@ export default async function decorate(block) { observer.observe(document.querySelector('main')); handleTransparentAndScrolling(nav); + + customDecoreateIcons(nav); } diff --git a/icons/chevron.svg b/icons/chevron.svg new file mode 100644 index 0000000..4952f2a --- /dev/null +++ b/icons/chevron.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/icons/close.svg b/icons/close.svg index e7b4747..103f557 100644 --- a/icons/close.svg +++ b/icons/close.svg @@ -1,4 +1,4 @@ - - + + \ No newline at end of file diff --git a/icons/hamburger.svg b/icons/hamburger.svg new file mode 100644 index 0000000..3ab87cb --- /dev/null +++ b/icons/hamburger.svg @@ -0,0 +1,10 @@ + + + + + + + + + + \ No newline at end of file diff --git a/icons/logo-flag-black.svg b/icons/logo-flag-black.svg new file mode 100644 index 0000000..c199615 --- /dev/null +++ b/icons/logo-flag-black.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/icons/logo.svg b/icons/logo.svg new file mode 100644 index 0000000..142e87d --- /dev/null +++ b/icons/logo.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + \ No newline at end of file diff --git a/scripts/scripts.js b/scripts/scripts.js index d56037b..146584f 100644 --- a/scripts/scripts.js +++ b/scripts/scripts.js @@ -94,6 +94,36 @@ function swappingPlacesBlock(main) { }); } +export function customDecoreateIcons(main) { + // inline icons give the possibility to change its colors using the css variables + const decorateInlineIcons = (rootElement) => { + const inlineIcons = ['icon-logo', 'icon-hamburger', 'icon-chevron', 'icon-close']; + const isInlineIcon = (el) => { + const isInline = (className) => inlineIcons.includes(className); + return [...el.classList].some(isInline); + }; + const inlineIconsList = [...rootElement.querySelectorAll('span.icon')].filter(isInlineIcon); + + inlineIconsList.forEach((async (inlineIcon) => { + const iconName = [...inlineIcon.classList].find((c) => c.startsWith('icon-')).substring(5); + inlineIcon.classList.remove('icon'); // removing the 'icon' class, so the icon won't be used by decorateIcon + const icon = await fetch(`${window.hlx.codeBasePath}/icons/${iconName}.svg`); + + try { + const svgIcon = await icon.text(); + const svgEl = document.createRange().createContextualFragment(svgIcon).children[0]; + inlineIcon.innerHTML = svgEl.outerHTML; + } catch (error) { + // eslint-disable-next-line no-console + console.error(error); + } + })); + }; + + decorateInlineIcons(main); + decorateIcons(main); +} + /** * Decorates the main element. * @param {Element} main The main element @@ -102,7 +132,7 @@ function swappingPlacesBlock(main) { export function decorateMain(main) { // hopefully forward compatible button decoration decorateButtons(main); - decorateIcons(main); + customDecoreateIcons(main); buildAutoBlocks(main); decorateSections(main); customDecorateSections(main); From 803bf741a4e438c67d4478138ba7aedbf6cc00a3 Mon Sep 17 00:00:00 2001 From: Lakshmishri Date: Thu, 12 Sep 2024 11:49:20 +0200 Subject: [PATCH 024/159] KAW-7941-NBA-component --- blocks/nba/nba.css | 54 +++++++++++++++++++++++++++++++++++++++++++ blocks/nba/nba.js | 33 ++++++++++++++++++++++++++ icons/arrow-right.svg | 5 ++++ scripts/helpers.js | 13 +++-------- styles/styles.css | 5 ++-- 5 files changed, 98 insertions(+), 12 deletions(-) create mode 100644 blocks/nba/nba.css create mode 100644 blocks/nba/nba.js create mode 100644 icons/arrow-right.svg diff --git a/blocks/nba/nba.css b/blocks/nba/nba.css new file mode 100644 index 0000000..84e8cc1 --- /dev/null +++ b/blocks/nba/nba.css @@ -0,0 +1,54 @@ +.nba { + --row-gap: 40px; + + justify-content: center; + align-items: center; + padding: 60px 20px; +} + +.nba-text-wrapper { + --row-gap: 16px; + + justify-content: center; + align-items: center; + text-align: center; +} + +.nba-button-wrapper { + --row-gap: 24px; + + width: 100%; +} + +.nba .nba-button-wrapper:not(:first-child) { + padding-top: 0; +} + +.nba-button-wrapper .icon-arrow-right { + height: 24px; + width: 24px; +} + +.nba , +.nba-button-wrapper, +.nba-text-wrapper { + display: flex; + flex-flow: column; + gap: var(--row-gap) +} + +.heading { + margin-bottom: 0; +} + +@media (width >= 768px) { + .nba { + padding-top: 80px; + padding-bottom: 80px; + } + + .nba .nba-button-wrapper { + width: auto; + flex-flow: row; + } +} \ No newline at end of file diff --git a/blocks/nba/nba.js b/blocks/nba/nba.js new file mode 100644 index 0000000..80410ef --- /dev/null +++ b/blocks/nba/nba.js @@ -0,0 +1,33 @@ +import { unwrapDivs } from '../../scripts/helpers.js'; + +export default async function decorate(block) { + const textWrapper = document.createElement('div'); + textWrapper.classList.add('nba-text-wrapper'); + + const headings = block.querySelectorAll('h1, h2, h3, h4, h5, h6'); + [...headings].forEach((heading) => { + heading.classList.add('heading'); + textWrapper.append(heading); + }); + + block.querySelectorAll('p').forEach((textEle) => { + if (!textEle.children.length) { + textWrapper.append(textEle); + } + }); + block.prepend(textWrapper); + + const buttonWrapper = document.createElement('div'); + buttonWrapper.classList.add('nba-button-wrapper'); + block.querySelectorAll('a').forEach((button, index) => { + const buttonClass = index < 1 ? 'primary' : 'secondary'; + button.classList.add('button', buttonClass); + if (button.parentElement.classList.contains('button-container')) { + button.parentElement.remove(); + } + buttonWrapper.append(button); + }); + block.append(buttonWrapper); + + unwrapDivs(block); +} diff --git a/icons/arrow-right.svg b/icons/arrow-right.svg new file mode 100644 index 0000000..db216f1 --- /dev/null +++ b/icons/arrow-right.svg @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file diff --git a/scripts/helpers.js b/scripts/helpers.js index 99494cb..38285bc 100644 --- a/scripts/helpers.js +++ b/scripts/helpers.js @@ -93,9 +93,8 @@ export const adjustPretitle = (element) => { }); }; -export const unwrapDivs = (element, options = {}) => { +export const unwrapDivs = (element) => { const stack = [element]; - const { ignoreDataAlign = false } = options; while (stack.length > 0) { const currentElement = stack.pop(); @@ -103,15 +102,9 @@ export const unwrapDivs = (element, options = {}) => { let i = 0; while (i < currentElement.children.length) { const node = currentElement.children[i]; - const attributesLength = [...node.attributes].filter((el) => { - if (ignoreDataAlign) { - return !(el.name.startsWith('data-align') || el.name.startsWith('data-valign')); - } - - return el; - }).length; + const attributesLength = [...node.attributes].filter((el) => el).length; - if (node.tagName === 'DIV' && attributesLength === 0) { + if (node && attributesLength === 0) { while (node.firstChild) { currentElement.insertBefore(node.firstChild, node); } diff --git a/styles/styles.css b/styles/styles.css index 2ea9594..3b0547e 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -57,6 +57,7 @@ .dark { background-color: var(--black); + color: var(--white); } :root .dark { @@ -436,8 +437,8 @@ button.secondary.small { .dark a.button.primary:hover, .dark button.primary:hover { - color: #ed1c24; - border-color: #ed1c24; + color: #ae2d27; + border-color: #ae2d27; } .dark a.button.primary:focus, From bb1cdea5fc9a73d4fc20a5dd97e7fa2ae33e194f Mon Sep 17 00:00:00 2001 From: Tomasz Dziezyk Date: Thu, 12 Sep 2024 12:15:58 +0200 Subject: [PATCH 025/159] KAW-7904 Add underline style for active links --- blocks/header/header.css | 51 ++++++++++++++++++++++++++++++++++++---- 1 file changed, 47 insertions(+), 4 deletions(-) diff --git a/blocks/header/header.css b/blocks/header/header.css index e30aac1..30c8e9a 100644 --- a/blocks/header/header.css +++ b/blocks/header/header.css @@ -184,8 +184,18 @@ header .nav-tools .default-content-wrapper { header .nav-tools .default-content-wrapper li { margin: 0; + position: relative; +} + +header .nav-tools .default-content-wrapper li.active::after { + content: ""; + display: block; + width: 100%; + height: 1px; + background: black; } + header .nav-tools .default-content-wrapper li a:any-link { font-size: 0.875rem; font-style: normal; @@ -223,6 +233,10 @@ header .nav-drop[aria-expanded="false"] ul { display: none; } +header .nav-sections .nav-drop[aria-expanded="true"] { + color: var(--action-default); +} + header .nav-drop .icon-chevron { transition: transform 200ms ease-in-out; transform-origin: center center; @@ -385,6 +399,20 @@ header.transparent nav[aria-expanded="true"] .nav-link-section a.nav-drop-text { width: auto; } + header .nav-sections .nav-drop[aria-expanded="true"] .nav-drop-text { + color: var(--black); + } + + header .nav-sections .nav-drop[aria-expanded="true"] .nav-drop-text::after { + content: ""; + display: block; + width: 100%; + height: 1px; + position: absolute; + bottom: 0; + background: currentcolor; + } + /* expanded menu item content */ header .nav-sections .nav-drop ul { position: fixed; @@ -434,19 +462,34 @@ header.transparent nav[aria-expanded="true"] .nav-link-section a.nav-drop-text { } header.transparent nav[aria-expanded="true"] .nav-link-section a:any-link, - header.transparent nav[aria-expanded="true"] .nav-link-section a.nav-drop-text { + header.transparent + nav[aria-expanded="true"] + .nav-link-section + a.nav-drop-text { color: var(--white); } - header.transparent nav[aria-expanded="true"] .nav-link-section .nav-drop a:any-link { + header.transparent + nav[aria-expanded="true"] + .nav-link-section + .nav-drop + a:any-link { color: var(--grey-90); } - header.transparent nav[aria-expanded="true"] .nav-link-section .nav-drop a:focus { + header.transparent + nav[aria-expanded="true"] + .nav-link-section + .nav-drop + a:focus { color: var(--action-focus); } - header.transparent nav[aria-expanded="true"] .nav-link-section .nav-drop a:hover { + header.transparent + nav[aria-expanded="true"] + .nav-link-section + .nav-drop + a:hover { color: var(--action-hover); } } From 6a680faea077c007aa4a720536c19b9f8c48e96c Mon Sep 17 00:00:00 2001 From: Tomasz Dziezyk Date: Thu, 12 Sep 2024 12:23:08 +0200 Subject: [PATCH 026/159] KAW-7904 Fix navigation location --- blocks/header/header.css | 5 +++++ blocks/header/header.js | 16 +++++++++++----- 2 files changed, 16 insertions(+), 5 deletions(-) diff --git a/blocks/header/header.css b/blocks/header/header.css index 30c8e9a..50009a6 100644 --- a/blocks/header/header.css +++ b/blocks/header/header.css @@ -15,6 +15,7 @@ header.fade-out { header .nav-wrapper { width: 100%; color: var(--grey-90); + background-color: var(--white); } header nav { @@ -275,6 +276,10 @@ header.transparent nav { color: var(--white); } +header.transparent .nav-wrapper { + background-color: transparent; +} + /* stylelint-disable-next-line no-descending-specificity */ header.transparent a:any-link { color: var(--white); diff --git a/blocks/header/header.js b/blocks/header/header.js index 1222ef2..3bf0f91 100644 --- a/blocks/header/header.js +++ b/blocks/header/header.js @@ -108,7 +108,7 @@ function redirectPage(event) { const currentUrl = window.location; let redirectUrl = currentUrl.origin; - if (event.target.innerHTML === 'ENG') { + if (event.target.innerHTML.toLowerCase() === 'en') { if (!currentUrl.pathname.includes('/en/')) { redirectUrl = `${redirectUrl}/en`; } @@ -154,8 +154,7 @@ function handleTransparentAndScrolling(nav) { export default async function decorate(block) { // load nav as fragment const navMeta = getMetadata('nav'); - // const navPath = navMeta ? new URL(navMeta, window.location).pathname : '/nav'; - const navPath = '/drafts/tdziezyk/v3-nav'; + const navPath = navMeta ? new URL(navMeta, window.location).pathname : '/nav'; const fragment = await loadFragment(navPath); // decorate nav DOM @@ -211,8 +210,15 @@ export default async function decorate(block) { toolsWrapper.classList.add('default-content-wrapper'); navTools.append(toolsWrapper); navTools.firstElementChild.remove(); - toolsWrapper.querySelectorAll('li').forEach((list) => { - list.addEventListener('click', redirectPage); + toolsWrapper.querySelectorAll('li').forEach((item) => { + item.addEventListener('click', redirectPage); + + const urlLang = document.location.pathname.includes('/en/') ? 'en' : 'ita'; + const listItemLang = item.textContent.trim().toLowerCase(); + + if (urlLang === listItemLang) { + item.classList.add('active'); + } }); } From c0d50bd132b843a745541c252baf42c46666495e Mon Sep 17 00:00:00 2001 From: Tomasz Dziezyk Date: Thu, 12 Sep 2024 12:28:19 +0200 Subject: [PATCH 027/159] KAW-7904 Fix init state of the header --- blocks/header/header.js | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/blocks/header/header.js b/blocks/header/header.js index 3bf0f91..ff7eee1 100644 --- a/blocks/header/header.js +++ b/blocks/header/header.js @@ -124,9 +124,7 @@ function handleTransparentAndScrolling(nav) { const header = nav.closest('header'); let prevScrollingPosition = 0; - document.addEventListener('scroll', () => { - const { scrollY } = window; - + const changeToTransparentIfNeeded = (scrollY) => { if (useTransparentVariant) { header.classList.add('transparent', 'can-be-transparent'); @@ -136,6 +134,12 @@ function handleTransparentAndScrolling(nav) { header.classList.add('transparent'); } } + }; + + document.addEventListener('scroll', () => { + const { scrollY } = window; + + changeToTransparentIfNeeded(scrollY); if (scrollY - prevScrollingPosition > 0 && scrollY > 200) { header.classList.add('fade-out'); @@ -145,6 +149,8 @@ function handleTransparentAndScrolling(nav) { prevScrollingPosition = scrollY; }); + + changeToTransparentIfNeeded(window.scrollY); } /** From a1704c40059b9aab67bf73f21335336188b0bed8 Mon Sep 17 00:00:00 2001 From: Tomasz Dziezyk Date: Thu, 12 Sep 2024 12:39:55 +0200 Subject: [PATCH 028/159] KAW-7904 Fix transparent header when click on models --- blocks/header/header.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/blocks/header/header.js b/blocks/header/header.js index ff7eee1..f110c82 100644 --- a/blocks/header/header.js +++ b/blocks/header/header.js @@ -91,6 +91,10 @@ function toggleSubNav(navSection, navSections) { const expanded = navSection.getAttribute('aria-expanded') === 'true'; toggleAllNavSections(navSections); navSection.setAttribute('aria-expanded', expanded ? 'false' : 'true'); + + if (!expanded) { + document.querySelector('header').classList.remove('transparent'); + } } function checkForActiveLink(navSections) { From 7879e87b45666a2dd265282657e57e8a8eba1c91 Mon Sep 17 00:00:00 2001 From: Tomasz Dziezyk Date: Thu, 12 Sep 2024 12:41:54 +0200 Subject: [PATCH 029/159] KAW-7904 Fix language selection --- blocks/header/header.css | 2 +- blocks/header/header.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/blocks/header/header.css b/blocks/header/header.css index 50009a6..f3e43b9 100644 --- a/blocks/header/header.css +++ b/blocks/header/header.css @@ -193,7 +193,7 @@ header .nav-tools .default-content-wrapper li.active::after { display: block; width: 100%; height: 1px; - background: black; + background: currentcolor; } diff --git a/blocks/header/header.js b/blocks/header/header.js index f110c82..4eb00d9 100644 --- a/blocks/header/header.js +++ b/blocks/header/header.js @@ -223,7 +223,7 @@ export default async function decorate(block) { toolsWrapper.querySelectorAll('li').forEach((item) => { item.addEventListener('click', redirectPage); - const urlLang = document.location.pathname.includes('/en/') ? 'en' : 'ita'; + const urlLang = document.location.pathname.includes('/en/') ? 'en' : 'it'; const listItemLang = item.textContent.trim().toLowerCase(); if (urlLang === listItemLang) { From 078554eff8a9ddab28d9931c8d35c495170262e4 Mon Sep 17 00:00:00 2001 From: Lakshmishri Date: Thu, 12 Sep 2024 13:57:46 +0200 Subject: [PATCH 030/159] remove class attribute --- blocks/nba/nba.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/blocks/nba/nba.js b/blocks/nba/nba.js index 80410ef..19132d8 100644 --- a/blocks/nba/nba.js +++ b/blocks/nba/nba.js @@ -23,7 +23,7 @@ export default async function decorate(block) { const buttonClass = index < 1 ? 'primary' : 'secondary'; button.classList.add('button', buttonClass); if (button.parentElement.classList.contains('button-container')) { - button.parentElement.remove(); + button.parentElement.removeAttribute('class'); } buttonWrapper.append(button); }); From 691330c07b3ca5f24b9cafaa1e7c9fd6165f7e79 Mon Sep 17 00:00:00 2001 From: Tomasz Dziezyk Date: Fri, 13 Sep 2024 12:06:42 +0200 Subject: [PATCH 031/159] KAW-7904 Add the Model label for expanded menu on desktop --- blocks/header/header.css | 29 +++++++++++++++++++++++------ blocks/header/header.js | 29 ++++++++++++++--------------- 2 files changed, 37 insertions(+), 21 deletions(-) diff --git a/blocks/header/header.css b/blocks/header/header.css index f3e43b9..4626fad 100644 --- a/blocks/header/header.css +++ b/blocks/header/header.css @@ -95,7 +95,8 @@ header .nav-dealer-locator a.button:focus { color: var(--action-focus); } -header .nav-drop picture { +header .nav-drop picture, +header .nav-sublist > span { display: none; } @@ -160,13 +161,13 @@ header .nav-drop ul { cursor: auto; } -header .nav-sections ul > li > ul { +header .nav-sections ul > li .nav-sublist ul { margin: 0; gap: 16px; padding: 10px 0 0; } -header .nav-sections ul > li > ul a:any-link { +header .nav-sections ul > li .nav-sublist ul a:any-link { font-size: 0.875rem; font-style: normal; font-weight: 500; @@ -197,6 +198,7 @@ header .nav-tools .default-content-wrapper li.active::after { } +/* stylelint-disable-next-line no-descending-specificity */ header .nav-tools .default-content-wrapper li a:any-link { font-size: 0.875rem; font-style: normal; @@ -230,7 +232,7 @@ header .nav-drop { cursor: pointer; } -header .nav-drop[aria-expanded="false"] ul { +header .nav-drop[aria-expanded="false"] .nav-sublist { display: none; } @@ -419,7 +421,7 @@ header.transparent nav[aria-expanded="true"] .nav-link-section a.nav-drop-text { } /* expanded menu item content */ - header .nav-sections .nav-drop ul { + header .nav-sections .nav-drop .nav-sublist { position: fixed; top: var(--nav-height); padding: 40px; @@ -427,6 +429,10 @@ header.transparent nav[aria-expanded="true"] .nav-link-section a.nav-drop-text { left: 0; height: auto; background: var(--white); + } + + header .nav-sections .nav-drop ul { + padding: 0; gap: unset; justify-content: space-between; flex-wrap: wrap; @@ -444,10 +450,21 @@ header.transparent nav[aria-expanded="true"] .nav-link-section a.nav-drop-text { line-height: 140%; } - header .nav-sections .nav-drop ul picture { + header .nav-sections .nav-drop ul picture, + header .nav-sublist > span { display: flex; } + + header .nav-sublist > span { + padding: 0 40px 24px; + font-weight: 500; + font-size: 1.75rem; + line-height: 2.275; + color: var(--black); + cursor: auto; + } + header .nav-sections .nav-drop ul img { width: 187px; height: auto; diff --git a/blocks/header/header.js b/blocks/header/header.js index 4eb00d9..8c40cc7 100644 --- a/blocks/header/header.js +++ b/blocks/header/header.js @@ -190,7 +190,8 @@ export default async function decorate(block) { if (navSections) { navSections.querySelectorAll(':scope .default-content-wrapper > ul > li').forEach((navSection) => { - if (navSection.querySelector('ul')) { + const sublist = navSection.querySelector('ul'); + if (sublist) { const textWrapper = document.createElement('a'); textWrapper.classList.add('nav-drop-text'); textWrapper.append(navSection.firstChild); @@ -204,10 +205,21 @@ export default async function decorate(block) { link.prepend(picture); }); + + const sublistWrapper = document.createElement('div'); + sublistWrapper.classList.add('nav-sublist'); + const sublistHeading = document.createElement('span'); + sublistHeading.textContent = textWrapper.textContent; + sublist.replaceWith(sublistWrapper); + sublistWrapper.append(sublistHeading); + sublistWrapper.append(sublist); } navSection.addEventListener('click', (event) => { - if (event.target.classList.contains('nav-drop-text') || event.target.closest('.nav-drop-text')) { + if ( + event.target.classList.contains('nav-drop-text') + || event.target.classList.contains('nav-drop') + || event.target.closest('.nav-drop-text')) { toggleSubNav(navSection, navSections); } }); @@ -278,19 +290,6 @@ export default async function decorate(block) { block.append(navWrapper); checkForActiveLink(navSections); - - const observer = new IntersectionObserver((entries) => { - entries.forEach((entry) => { - if (entry.isIntersecting && isDesktop) { - navWrapper.classList.add('hide'); - } else if (isDesktop) { - navWrapper.classList.remove('hide'); - } - }); - }, { rootMargin: '0px 0px -1000px 0px' }); - observer.observe(document.querySelector('main')); - handleTransparentAndScrolling(nav); - customDecoreateIcons(nav); } From 5e649de6a941733e4e55a0515f0749c76a51c239 Mon Sep 17 00:00:00 2001 From: Tomasz Dziezyk Date: Fri, 13 Sep 2024 12:33:13 +0200 Subject: [PATCH 032/159] KAW-7904 Fix hover colors --- blocks/header/header.css | 4 ++-- blocks/header/header.js | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/blocks/header/header.css b/blocks/header/header.css index 4626fad..737b0f9 100644 --- a/blocks/header/header.css +++ b/blocks/header/header.css @@ -44,7 +44,7 @@ header a:any-link { header a:active, header a:focus, header a:hover { - color: var(--action-default); + color: var(--action-hover); } /* brand */ @@ -335,7 +335,7 @@ header.transparent nav[aria-expanded="true"] .nav-link-section a.nav-drop-text { } } -@media (width >= 1024px) { +@media (width >= 1025px) { header .nav-brand { flex-grow: unset; } diff --git a/blocks/header/header.js b/blocks/header/header.js index 8c40cc7..cee5e23 100644 --- a/blocks/header/header.js +++ b/blocks/header/header.js @@ -3,7 +3,7 @@ import { customDecoreateIcons } from '../../scripts/scripts.js'; import { loadFragment } from '../fragment/fragment.js'; // media query match that indicates mobile/tablet width -const isDesktop = window.matchMedia('(min-width: 1024px)'); +const isDesktop = window.matchMedia('(min-width: 1025px)'); function closeOnEscape(e) { if (e.code === 'Escape') { From 5b997f9404f99bf3edd39761a655433a787a70e2 Mon Sep 17 00:00:00 2001 From: Tomasz Dziezyk Date: Fri, 13 Sep 2024 13:04:56 +0200 Subject: [PATCH 033/159] KAW-7904 Disable main doc scrolling when the menu is expanded --- blocks/header/header.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/blocks/header/header.js b/blocks/header/header.js index cee5e23..f3e6b97 100644 --- a/blocks/header/header.js +++ b/blocks/header/header.js @@ -94,6 +94,9 @@ function toggleSubNav(navSection, navSections) { if (!expanded) { document.querySelector('header').classList.remove('transparent'); + document.body.style.overflow = 'hidden'; + } else { + document.body.style.overflow = ''; } } From 9e5545f0c1b3199dab787866449ba799f941d25c Mon Sep 17 00:00:00 2001 From: Tomasz Dziezyk Date: Mon, 16 Sep 2024 09:22:04 +0200 Subject: [PATCH 034/159] KAW-7904 Add animations for header --- blocks/header/header.css | 21 +++++++----- blocks/header/header.js | 71 +++++++++++++++++++++++++++++++++++----- 2 files changed, 76 insertions(+), 16 deletions(-) diff --git a/blocks/header/header.css b/blocks/header/header.css index 737b0f9..2a18a0d 100644 --- a/blocks/header/header.css +++ b/blocks/header/header.css @@ -96,10 +96,14 @@ header .nav-dealer-locator a.button:focus { } header .nav-drop picture, -header .nav-sublist > span { +header .nav-sublist > div > span { display: none; } +header .nav-sublist > div { + overflow: hidden; +} + header .nav-link-section { position: fixed; top: 0; @@ -136,10 +140,6 @@ header .nav-flag .icon { display: flex; } -header nav[aria-expanded="true"] .nav-link-section { - display: flex; -} - header .nav-sections ul { list-style: none; padding: 0; @@ -349,6 +349,7 @@ header.transparent nav[aria-expanded="true"] .nav-link-section a.nav-drop-text { height: auto; flex-grow: 1; align-items: center; + display: flex; } header .nav-backdrop { @@ -424,11 +425,15 @@ header.transparent nav[aria-expanded="true"] .nav-link-section a.nav-drop-text { header .nav-sections .nav-drop .nav-sublist { position: fixed; top: var(--nav-height); - padding: 40px; width: 100vw; left: 0; height: auto; background: var(--white); + padding: 0; + } + + header .nav-sections .nav-drop .nav-sublist > div { + padding: 40px; } header .nav-sections .nav-drop ul { @@ -451,12 +456,12 @@ header.transparent nav[aria-expanded="true"] .nav-link-section a.nav-drop-text { } header .nav-sections .nav-drop ul picture, - header .nav-sublist > span { + header .nav-sublist > div > span { display: flex; } - header .nav-sublist > span { + header .nav-sublist > div > span { padding: 0 40px 24px; font-weight: 500; font-size: 1.75rem; diff --git a/blocks/header/header.js b/blocks/header/header.js index f3e6b97..a06a164 100644 --- a/blocks/header/header.js +++ b/blocks/header/header.js @@ -5,6 +5,45 @@ import { loadFragment } from '../fragment/fragment.js'; // media query match that indicates mobile/tablet width const isDesktop = window.matchMedia('(min-width: 1025px)'); +const animateInOut = (animateTarget, isFadeIn, initStyles, startStyles, endStyles) => { + animateTarget.style.transition = 'all 300ms ease-in-out'; + + const setStyles = (targetEl, stylesObject) => { + Object.entries(stylesObject).forEach(([key, value]) => { + targetEl.style[key] = value; + }); + }; + + const cssReflow = () => { + // trigger reflow to ensure the transition starts from the current state + // read more here: https://gist.github.com/paulirish/5d52fb081b3570c81e3a + // eslint-disable-next-line no-unused-expressions + animateTarget.offsetWidth; + }; + + const restoreDisplayPropAfterHide = () => { + const transitionEndEvent = () => { + animateTarget.style.display = ''; + animateTarget.removeEventListener('transitionend', transitionEndEvent); + }; + + animateTarget.addEventListener('transitionend', transitionEndEvent); + }; + + setStyles(animateTarget, initStyles); + + if (isFadeIn) { + setStyles(animateTarget, startStyles); + cssReflow(); + setStyles(animateTarget, endStyles); + } else { + setStyles(animateTarget, endStyles); + cssReflow(); + restoreDisplayPropAfterHide(); + setStyles(animateTarget, startStyles); + } +}; + function closeOnEscape(e) { if (e.code === 'Escape') { const nav = document.getElementById('nav'); @@ -73,8 +112,18 @@ function toggleMenu(nav, navSections, forceExpanded = null) { const backdropEl = nav.querySelector('.nav-backdrop'); if (!expanded) { + if (document.querySelector('header nav .nav-link-section')) { + const animateTarget = document.querySelector('header nav .nav-link-section'); + + animateInOut(animateTarget, !expanded, { display: 'flex' }, { right: '-320px' }, { right: '0' }); + } backdropEl.classList.remove('hide'); } else { + if (document.querySelector('header nav .nav-link-section')) { + const animateTarget = document.querySelector('header nav .nav-link-section'); + + animateInOut(animateTarget, !expanded, { display: 'flex' }, { right: '-320px' }, { right: '0' }); + } backdropEl.classList.add('hide'); } @@ -90,14 +139,17 @@ function toggleMenu(nav, navSections, forceExpanded = null) { function toggleSubNav(navSection, navSections) { const expanded = navSection.getAttribute('aria-expanded') === 'true'; toggleAllNavSections(navSections); - navSection.setAttribute('aria-expanded', expanded ? 'false' : 'true'); if (!expanded) { document.querySelector('header').classList.remove('transparent'); document.body.style.overflow = 'hidden'; + animateInOut(navSection.querySelector('.nav-sublist'), expanded, { display: 'grid' }, { gridTemplateRows: '1fr' }, { gridTemplateRows: '0fr' }); } else { document.body.style.overflow = ''; + animateInOut(navSection.querySelector('.nav-sublist'), !expanded, { display: 'grid' }, { gridTemplateRows: '0fr' }, { gridTemplateRows: '1fr' }); } + + navSection.setAttribute('aria-expanded', expanded ? 'false' : 'true'); } function checkForActiveLink(navSections) { @@ -209,13 +261,16 @@ export default async function decorate(block) { link.prepend(picture); }); - const sublistWrapper = document.createElement('div'); - sublistWrapper.classList.add('nav-sublist'); - const sublistHeading = document.createElement('span'); - sublistHeading.textContent = textWrapper.textContent; - sublist.replaceWith(sublistWrapper); - sublistWrapper.append(sublistHeading); - sublistWrapper.append(sublist); + const navSublist = document.createRange().createContextualFragment(` +
+
+ ${textWrapper.textContent} + ${sublist.outerHTML} +
+
+ `).children[0]; + + sublist.replaceWith(navSublist); } navSection.addEventListener('click', (event) => { From a5665823e2d11ebb75783f28bad954fab1fdeebb Mon Sep 17 00:00:00 2001 From: Tomasz Dziezyk Date: Mon, 16 Sep 2024 09:46:03 +0200 Subject: [PATCH 035/159] KAW-7904 Refactor --- blocks/header/header.js | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/blocks/header/header.js b/blocks/header/header.js index a06a164..3244c82 100644 --- a/blocks/header/header.js +++ b/blocks/header/header.js @@ -138,15 +138,16 @@ function toggleMenu(nav, navSections, forceExpanded = null) { function toggleSubNav(navSection, navSections) { const expanded = navSection.getAttribute('aria-expanded') === 'true'; + const navSublist = navSection.querySelector('.nav-sublist'); toggleAllNavSections(navSections); - if (!expanded) { + if (expanded) { + document.body.style.overflow = ''; + animateInOut(navSublist, !expanded, { display: 'grid' }, { gridTemplateRows: '0fr' }, { gridTemplateRows: '1fr' }); + } else { document.querySelector('header').classList.remove('transparent'); document.body.style.overflow = 'hidden'; - animateInOut(navSection.querySelector('.nav-sublist'), expanded, { display: 'grid' }, { gridTemplateRows: '1fr' }, { gridTemplateRows: '0fr' }); - } else { - document.body.style.overflow = ''; - animateInOut(navSection.querySelector('.nav-sublist'), !expanded, { display: 'grid' }, { gridTemplateRows: '0fr' }, { gridTemplateRows: '1fr' }); + animateInOut(navSublist, !expanded, { display: 'grid' }, { gridTemplateRows: '0fr' }, { gridTemplateRows: '1fr' }); } navSection.setAttribute('aria-expanded', expanded ? 'false' : 'true'); From 5d7ce3f68ea5d79624c41a09729ca92d215bc19d Mon Sep 17 00:00:00 2001 From: Tomasz Dziezyk Date: Mon, 16 Sep 2024 09:49:24 +0200 Subject: [PATCH 036/159] KAW-7904 Refactor --- blocks/header/header.js | 19 +++++++------------ 1 file changed, 7 insertions(+), 12 deletions(-) diff --git a/blocks/header/header.js b/blocks/header/header.js index 3244c82..5c21304 100644 --- a/blocks/header/header.js +++ b/blocks/header/header.js @@ -112,21 +112,17 @@ function toggleMenu(nav, navSections, forceExpanded = null) { const backdropEl = nav.querySelector('.nav-backdrop'); if (!expanded) { - if (document.querySelector('header nav .nav-link-section')) { - const animateTarget = document.querySelector('header nav .nav-link-section'); - - animateInOut(animateTarget, !expanded, { display: 'flex' }, { right: '-320px' }, { right: '0' }); - } backdropEl.classList.remove('hide'); } else { - if (document.querySelector('header nav .nav-link-section')) { - const animateTarget = document.querySelector('header nav .nav-link-section'); - - animateInOut(animateTarget, !expanded, { display: 'flex' }, { right: '-320px' }, { right: '0' }); - } backdropEl.classList.add('hide'); } + if (document.querySelector('header nav .nav-link-section')) { + const animateTarget = document.querySelector('header nav .nav-link-section'); + + animateInOut(animateTarget, !expanded, { display: 'flex' }, { right: '-320px' }, { right: '0' }); + } + // enable menu collapse on escape keypress if (!expanded || isDesktop.matches) { // collapse menu on escape press @@ -143,13 +139,12 @@ function toggleSubNav(navSection, navSections) { if (expanded) { document.body.style.overflow = ''; - animateInOut(navSublist, !expanded, { display: 'grid' }, { gridTemplateRows: '0fr' }, { gridTemplateRows: '1fr' }); } else { document.querySelector('header').classList.remove('transparent'); document.body.style.overflow = 'hidden'; - animateInOut(navSublist, !expanded, { display: 'grid' }, { gridTemplateRows: '0fr' }, { gridTemplateRows: '1fr' }); } + animateInOut(navSublist, !expanded, { display: 'grid' }, { gridTemplateRows: '0fr' }, { gridTemplateRows: '1fr' }); navSection.setAttribute('aria-expanded', expanded ? 'false' : 'true'); } From 5f4f99889d4c4664d947a39a3d9f05703d4f62b5 Mon Sep 17 00:00:00 2001 From: Ioana Iordache Date: Mon, 16 Sep 2024 10:35:13 +0200 Subject: [PATCH 037/159] KAW-7921: teaser component --- .gitignore | 2 + blocks/columns/columns.js | 1 - blocks/teaser/teaser.css | 159 ++++++++++++++++++++++++++++++++++++++ blocks/teaser/teaser.js | 20 +++++ icons/arrow-right.svg | 10 +++ 5 files changed, 191 insertions(+), 1 deletion(-) create mode 100644 blocks/teaser/teaser.css create mode 100644 blocks/teaser/teaser.js create mode 100644 icons/arrow-right.svg diff --git a/.gitignore b/.gitignore index 5f4aed1..04097bc 100644 --- a/.gitignore +++ b/.gitignore @@ -7,3 +7,5 @@ helix-importer-ui .DS_Store *.bak .idea + +.vscode/settings.json diff --git a/blocks/columns/columns.js b/blocks/columns/columns.js index f64a7f3..4530132 100644 --- a/blocks/columns/columns.js +++ b/blocks/columns/columns.js @@ -13,7 +13,6 @@ export default function decorate(block) { block.classList.remove(borderClassName); } const isDownloadVariant = block.classList.contains('download'); - const isGridVariant = block.classList.contains('grid'); const isGalleryVariant = block.classList.contains('gallery'); const ratioClass = [...block.classList].find((cl) => cl.startsWith('ratio-')); diff --git a/blocks/teaser/teaser.css b/blocks/teaser/teaser.css new file mode 100644 index 0000000..d73f906 --- /dev/null +++ b/blocks/teaser/teaser.css @@ -0,0 +1,159 @@ +/* general styles */ +.teaser > ul { + list-style: none; + margin: 0; + padding: 0; + display: grid; + grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); + grid-gap: 24px; +} + +.teaser > ul > li { + border-radius: 4px; + background-color: var(--grey-5); + display: flex; + flex-direction: column; + justify-content: space-between; + height: 100%; + border: 1px solid transparent; + position: relative; +} + +.teaser li:hover { + border-color: var(--black); +} + +.teaser .teaser-card-body { + margin: 28px 20px; + flex-grow: 1; + display: flex; + flex-direction: column; + justify-content: space-between; +} + +.teaser .teaser-card-body .h4, +.teaser .teaser-card-body p { + margin-bottom: 16px; +} + +.teaser .teaser-card-body p:has(+ .button-container) { + margin-bottom: 24px; +} + +.teaser .button-container { + margin-top: auto; + margin-bottom: 0; +} + +.teaser .button-container .icon-arrow-right { + display: flex; +} + +.teaser .teaser-card-body a.button { + border-color: transparent; + color: var(--black); +} + +.teaser .teaser-card-body a.button::after { + position: absolute; + inset: 0; + z-index: 1; + content: ""; +} + +.teaser li:hover .teaser-card-body a.button { + border-color: var(--action-hover); + color: var(--action-hover); +} + +.teaser .teaser-card-image { + line-height: 0; +} + +.teaser > ul > li img { + width: 100%; + aspect-ratio: 4 / 3; + object-fit: cover; +} + +@media (width >= 1024px) { + .teaser .teaser-card-body { + margin: 16px 20px; + } +} + +div.teaser-wrapper + div.teaser-wrapper { + padding-top: 24px; +} + +/* teaser image */ +.teaser.image li { + overflow: hidden; + min-height: 464px; + display: grid; + justify-content: unset; + color: white; +} + +.teaser.image .teaser-card-image { + grid-area: 1 / 1; +} + +.teaser.image .teaser-card-image img { + height: 100%; +} + +.teaser.image .teaser-card-body { + grid-area: 1 / 1; + margin: 0; + padding: 20px 16px; + background-image: linear-gradient( + 180deg, + rgb(0 0 0 / 0%) 40%, + rgba(0 0 0/ 40%) 99% + ); + justify-content: end; +} + +.teaser.image .teaser-card-body .button-container { + margin-top: unset; +} + +@media (width >= 768) { + .teaser.image li { + min-height: 474px; + } +} + +@media (width >= 1025) { + .teaser.image li { + min-height: 451px; + } +} + +@media (width >= 1440) { + .teaser.image li { + min-height: 566px; + } +} + +/* teaser 30%-60% */ +@media (width >= 1024px) { + .teaser.one-two > ul { + grid-template-columns: 33% 66%; + } +} + +/* teaser 66%-33% */ +@media (width >= 1024px) { + .teaser.two-one > ul { + grid-template-columns: 66% 33%; + } +} + +/* teaser 1-1 */ +@media (width >= 1024px) { + .teaser.one-one > ul { + grid-template-columns: 50% 50%; + } +} diff --git a/blocks/teaser/teaser.js b/blocks/teaser/teaser.js new file mode 100644 index 0000000..344b726 --- /dev/null +++ b/blocks/teaser/teaser.js @@ -0,0 +1,20 @@ +import { createOptimizedPicture } from '../../scripts/aem.js'; + +export default function decorate(block) { + /* change to ul, li */ + const ul = document.createElement('ul'); + [...block.children].forEach((row) => { + const li = document.createElement('li'); + while (row.firstElementChild) li.append(row.firstElementChild); + [...li.children].forEach((div) => { + if (div.children.length === 1 && div.querySelector('picture')) div.className = 'teaser-card-image'; + else div.className = 'teaser-card-body'; + }); + ul.append(li); + // each heading should be rendered as font-small + [...li.querySelectorAll('h1, h2, h3, h4, h5, h6')].forEach((heading) => heading.classList.add('h4')); + }); + ul.querySelectorAll('picture > img').forEach((img) => img.closest('picture').replaceWith(createOptimizedPicture(img.src, img.alt, false, [{ width: '750' }]))); + block.textContent = ''; + block.append(ul); +} diff --git a/icons/arrow-right.svg b/icons/arrow-right.svg new file mode 100644 index 0000000..679dc2e --- /dev/null +++ b/icons/arrow-right.svg @@ -0,0 +1,10 @@ + + + + + + + + + + From 87f2be1929247aa67002954653d7d8620cfcc144 Mon Sep 17 00:00:00 2001 From: Tomasz Dziezyk Date: Mon, 16 Sep 2024 10:52:13 +0200 Subject: [PATCH 038/159] KAW-7904 Add animation for each model --- blocks/header/header.css | 8 ++++++++ blocks/header/header.js | 13 ++++++++++++- 2 files changed, 20 insertions(+), 1 deletion(-) diff --git a/blocks/header/header.css b/blocks/header/header.css index 2a18a0d..4348d50 100644 --- a/blocks/header/header.css +++ b/blocks/header/header.css @@ -460,6 +460,14 @@ header.transparent nav[aria-expanded="true"] .nav-link-section a.nav-drop-text { display: flex; } + header .nav-sections .nav-sublist li { + transition: opacity 400ms linear; + opacity: 0; + } + + header .nav-sections .nav-sublist.subnav-fadein li { + opacity: 1; + } header .nav-sublist > div > span { padding: 0 40px 24px; diff --git a/blocks/header/header.js b/blocks/header/header.js index 5c21304..18b43f8 100644 --- a/blocks/header/header.js +++ b/blocks/header/header.js @@ -4,9 +4,10 @@ import { loadFragment } from '../fragment/fragment.js'; // media query match that indicates mobile/tablet width const isDesktop = window.matchMedia('(min-width: 1025px)'); +const fadeTransitionTime = 300; const animateInOut = (animateTarget, isFadeIn, initStyles, startStyles, endStyles) => { - animateTarget.style.transition = 'all 300ms ease-in-out'; + animateTarget.style.transition = `all ${fadeTransitionTime}ms ease-in-out`; const setStyles = (targetEl, stylesObject) => { Object.entries(stylesObject).forEach(([key, value]) => { @@ -139,8 +140,13 @@ function toggleSubNav(navSection, navSections) { if (expanded) { document.body.style.overflow = ''; + navSublist.classList.remove('subnav-fadein'); } else { document.querySelector('header').classList.remove('transparent'); + + setTimeout(() => { + navSublist.classList.add('subnav-fadein'); + }, 0); document.body.style.overflow = 'hidden'; } @@ -257,6 +263,11 @@ export default async function decorate(block) { link.prepend(picture); }); + // setting transtion delay for every list item + navSection.querySelectorAll('ul li').forEach((li, index) => { + li.style.transitionDelay = `${fadeTransitionTime + index * 200}ms`; + }); + const navSublist = document.createRange().createContextualFragment(`
From a69cf530fdec4eac5b7a37d8f1992d1bc37a78d9 Mon Sep 17 00:00:00 2001 From: Tomasz Dziezyk Date: Mon, 16 Sep 2024 11:21:35 +0200 Subject: [PATCH 039/159] KAW-7904 Add hover effect for models --- blocks/header/header.css | 10 +++++++++- blocks/header/header.js | 8 ++++++-- 2 files changed, 15 insertions(+), 3 deletions(-) diff --git a/blocks/header/header.css b/blocks/header/header.css index 4348d50..03662aa 100644 --- a/blocks/header/header.css +++ b/blocks/header/header.css @@ -455,7 +455,7 @@ header.transparent nav[aria-expanded="true"] .nav-link-section a.nav-drop-text { line-height: 140%; } - header .nav-sections .nav-drop ul picture, + header .nav-sections .nav-drop ul picture:first-child, header .nav-sublist > div > span { display: flex; } @@ -465,6 +465,14 @@ header.transparent nav[aria-expanded="true"] .nav-link-section a.nav-drop-text { opacity: 0; } + header .nav-sections .nav-sublist a.swipe-on-hover:hover picture:first-child { + display: none; + } + + header .nav-sections .nav-sublist a.swipe-on-hover:hover picture:nth-child(2) { + display: flex; + } + header .nav-sections .nav-sublist.subnav-fadein li { opacity: 1; } diff --git a/blocks/header/header.js b/blocks/header/header.js index 18b43f8..f527209 100644 --- a/blocks/header/header.js +++ b/blocks/header/header.js @@ -258,9 +258,13 @@ export default async function decorate(block) { // wrapping pictures with links if the link follows immediately after the picture navSection.querySelectorAll('ul picture + a').forEach((link) => { - const picture = link.previousElementSibling; + const pictures = link.parentElement.querySelectorAll('picture'); - link.prepend(picture); + if (pictures.length === 2) { + link.classList.add('swipe-on-hover'); + } + + link.prepend(...pictures); }); // setting transtion delay for every list item From 81424d219a5169758346ace078f6c20bda255ce8 Mon Sep 17 00:00:00 2001 From: Tomasz Dziezyk Date: Mon, 16 Sep 2024 11:52:16 +0200 Subject: [PATCH 040/159] KAW-7904 Fix header for xl screen resolution --- blocks/header/header.css | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/blocks/header/header.css b/blocks/header/header.css index 03662aa..4fcfe82 100644 --- a/blocks/header/header.css +++ b/blocks/header/header.css @@ -430,10 +430,12 @@ header.transparent nav[aria-expanded="true"] .nav-link-section a.nav-drop-text { height: auto; background: var(--white); padding: 0; + overflow: hidden; } header .nav-sections .nav-drop .nav-sublist > div { padding: 40px; + margin: auto; } header .nav-sections .nav-drop ul { @@ -547,4 +549,16 @@ header.transparent nav[aria-expanded="true"] .nav-link-section a.nav-drop-text { padding-left: calc((100vw - 1240px) / 2); padding-right: calc((100vw - 1240px) / 2); } + + header .nav-sections .nav-drop .nav-sublist > div { + width: 1440px; + max-width: 1440px; + padding-left: 100px; + padding-right: 100px; + } + + header .nav-sections .nav-drop .nav-sublist > div > span { + padding-left: 0; + padding-right: 0; + } } From 947e768764e12d65504b7ca14d43337cb2b6ccc2 Mon Sep 17 00:00:00 2001 From: Ioana Iordache Date: Tue, 17 Sep 2024 12:28:38 +0200 Subject: [PATCH 041/159] KAW-7921: pr updates --- blocks/teaser/teaser.css | 14 +++++++------- blocks/teaser/teaser.js | 4 ++-- icons/arrow-right.svg | 2 +- scripts/scripts.js | 2 +- 4 files changed, 11 insertions(+), 11 deletions(-) diff --git a/blocks/teaser/teaser.css b/blocks/teaser/teaser.css index d73f906..a3ffadf 100644 --- a/blocks/teaser/teaser.css +++ b/blocks/teaser/teaser.css @@ -76,7 +76,7 @@ object-fit: cover; } -@media (width >= 1024px) { +@media (width >= 1025px) { .teaser .teaser-card-body { margin: 16px 20px; } @@ -119,40 +119,40 @@ div.teaser-wrapper + div.teaser-wrapper { margin-top: unset; } -@media (width >= 768) { +@media (width >= 768px) { .teaser.image li { min-height: 474px; } } -@media (width >= 1025) { +@media (width >= 1025px) { .teaser.image li { min-height: 451px; } } -@media (width >= 1440) { +@media (width >= 1440px) { .teaser.image li { min-height: 566px; } } /* teaser 30%-60% */ -@media (width >= 1024px) { +@media (width >= 1025px) { .teaser.one-two > ul { grid-template-columns: 33% 66%; } } /* teaser 66%-33% */ -@media (width >= 1024px) { +@media (width >= 1025px) { .teaser.two-one > ul { grid-template-columns: 66% 33%; } } /* teaser 1-1 */ -@media (width >= 1024px) { +@media (width >= 1025px) { .teaser.one-one > ul { grid-template-columns: 50% 50%; } diff --git a/blocks/teaser/teaser.js b/blocks/teaser/teaser.js index 344b726..1f9e30f 100644 --- a/blocks/teaser/teaser.js +++ b/blocks/teaser/teaser.js @@ -5,13 +5,13 @@ export default function decorate(block) { const ul = document.createElement('ul'); [...block.children].forEach((row) => { const li = document.createElement('li'); - while (row.firstElementChild) li.append(row.firstElementChild); + li.append(...row.children); [...li.children].forEach((div) => { if (div.children.length === 1 && div.querySelector('picture')) div.className = 'teaser-card-image'; else div.className = 'teaser-card-body'; }); ul.append(li); - // each heading should be rendered as font-small + // each heading should be rendered as h4 [...li.querySelectorAll('h1, h2, h3, h4, h5, h6')].forEach((heading) => heading.classList.add('h4')); }); ul.querySelectorAll('picture > img').forEach((img) => img.closest('picture').replaceWith(createOptimizedPicture(img.src, img.alt, false, [{ width: '750' }]))); diff --git a/icons/arrow-right.svg b/icons/arrow-right.svg index 679dc2e..46a5094 100644 --- a/icons/arrow-right.svg +++ b/icons/arrow-right.svg @@ -1,6 +1,6 @@ - + diff --git a/scripts/scripts.js b/scripts/scripts.js index 146584f..d29f208 100644 --- a/scripts/scripts.js +++ b/scripts/scripts.js @@ -97,7 +97,7 @@ function swappingPlacesBlock(main) { export function customDecoreateIcons(main) { // inline icons give the possibility to change its colors using the css variables const decorateInlineIcons = (rootElement) => { - const inlineIcons = ['icon-logo', 'icon-hamburger', 'icon-chevron', 'icon-close']; + const inlineIcons = ['icon-logo', 'icon-hamburger', 'icon-chevron', 'icon-close', 'icon-arrow-right']; const isInlineIcon = (el) => { const isInline = (className) => inlineIcons.includes(className); return [...el.classList].some(isInline); From fe486cac502cbbffc7fbd46af16c77a2e751c1c5 Mon Sep 17 00:00:00 2001 From: Ioana Iordache Date: Thu, 19 Sep 2024 13:18:22 +0200 Subject: [PATCH 042/159] KAW-7937: news and stories --- blocks/footer/footer.js | 4 +- blocks/news-stories/news-stories.css | 164 +++++++++++++++++++++++++++ blocks/news-stories/news-stories.js | 20 ++++ blocks/teaser/teaser.css | 8 +- 4 files changed, 190 insertions(+), 6 deletions(-) create mode 100644 blocks/news-stories/news-stories.css create mode 100644 blocks/news-stories/news-stories.js diff --git a/blocks/footer/footer.js b/blocks/footer/footer.js index 15c5068..24bf93d 100644 --- a/blocks/footer/footer.js +++ b/blocks/footer/footer.js @@ -61,10 +61,10 @@ export default async function decorate(block) { entries.forEach((entry) => { if (entry.isIntersecting) { backToTopButton.style.position = 'absolute'; - backToTopButton.style.bottom = `${entry.boundingClientRect.height + 80}px`; + backToTopButton.style.bottom = `${entry.boundingClientRect.height + 40}px`; } else { backToTopButton.style.position = 'fixed'; - backToTopButton.style.bottom = '80px'; + backToTopButton.style.bottom = '40px'; } }); }); diff --git a/blocks/news-stories/news-stories.css b/blocks/news-stories/news-stories.css new file mode 100644 index 0000000..0f3d854 --- /dev/null +++ b/blocks/news-stories/news-stories.css @@ -0,0 +1,164 @@ +.news-stories > ul { + list-style: none; + margin: 0; + padding: 0; + display: grid; + grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); + grid-gap: 24px; +} + +.news-stories > ul > li { + position: relative; +} + +.news-stories .news-stories-card-body { + margin-top: 28px; +} + +.news-stories .news-stories-card-body .h5 { + margin-top: 4px; + margin-bottom: 16px; +} + +.news-stories .news-stories-card-body p:first-of-type { + margin-bottom: 0; +} + +.news-stories .news-stories-card-body p:nth-of-type(2) { + margin-bottom: 24px; +} + +.news-stories .news-stories-card-body .icon-arrow-right { + display: inline-flex; +} + +.news-stories .news-stories-card-image { + line-height: 0; +} + +.news-stories > ul > li img { + width: 100%; + aspect-ratio: 4 / 3; + object-fit: cover; + border-radius: 4px; +} + +.news-stories .news-stories-card-body a.button::after { + position: absolute; + inset: 0; + z-index: 1; + content: ""; +} + +div.news-stories-wrapper + div.news-stories-wrapper { + padding-top: 24px; +} + +/* multiple variant */ + +.row-two .news-stories-card-body .button-container .button, +.row-three .news-stories-card-body .button-container .button { + border-color: transparent; + padding: 0; +} + +/* multiple variant 2 in a row */ +@media (width >= 1025px) { + .news-stories.row-two > ul { + grid-template-columns: 1fr 2fr; + align-items: start; + } +} + +/* single variant */ +.news-stories.single .news-stories-card-body .h5 { + margin-top: 16px; + margin-bottom: 16px; +} + +.news-stories.single .news-stories-card-body p:nth-of-type(2) { + margin-bottom: 36px; +} + +@media (width >= 768px) { + .news-stories.single > ul { + display: initial + } + + .news-stories.single > ul > li { + display: flex; + align-items: center; + gap: 24px; + } + + .news-stories.single .news-stories-card-body { + flex-grow: 1; + } + + .news-stories.single .news-stories-card-image { + flex-shrink: 0; + } +} + +@media (width >= 1025px) { + .news-stories.single > ul > li { + gap: 46px; + } +} + +div.news-stories-wrapper:has(.single) + div.news-stories-wrapper:has(.single) { + padding-top: 80px; +} + +/* single variant image first */ +.news-stories.one-two .news-stories-card-image img { + height: 423px; +} + +@media (width >= 768px) { + .news-stories.one-two .news-stories-card-image { + flex-basis: 50%; + } + + .news-stories.one-two .news-stories-card-image img { + height: 454px; + } +} + +@media (width >= 1025px) { + .news-stories.one-two .news-stories-card-image img { + height: 512px; + } + + .news-stories.one-two .news-stories-card-image { + flex-basis: 33%; + } +} + +/* stylelint-disable-next-line no-descending-specificity */ +.news-stories.one-two .news-stories-card-body p, +.news-stories.one-two .news-stories-card-body .h5 { + max-width: 438px; +} + +@media (width >= 1440px) { + .news-stories.one-two .news-stories-card-image img { + height: 523px; + } + + .news-stories.one-two .news-stories-card-body p, + .news-stories.one-two .news-stories-card-body .h5 { + max-width: 480px; +} +} + +/* single variant text first */ +@media (width >= 768px) { + .news-stories.news-stories.one-one > ul >li { + flex-direction: row-reverse; + } + + .news-stories.one-one .news-stories-card-image { + flex-basis: 50%; + } +} \ No newline at end of file diff --git a/blocks/news-stories/news-stories.js b/blocks/news-stories/news-stories.js new file mode 100644 index 0000000..64ed3e8 --- /dev/null +++ b/blocks/news-stories/news-stories.js @@ -0,0 +1,20 @@ +import { createOptimizedPicture } from '../../scripts/aem.js'; + +export default function decorate(block) { + /* change to ul, li */ + const ul = document.createElement('ul'); + [...block.children].forEach((row) => { + const li = document.createElement('li'); + li.append(...row.children); + [...li.children].forEach((div) => { + if (div.children.length === 1 && div.querySelector('picture')) div.className = 'news-stories-card-image'; + else div.className = 'news-stories-card-body'; + }); + ul.append(li); + // each heading should be rendered as h5 + [...li.querySelectorAll('h1, h2, h3, h4, h5, h6')].forEach((heading) => heading.classList.add('h5')); + }); + ul.querySelectorAll('picture > img').forEach((img) => img.closest('picture').replaceWith(createOptimizedPicture(img.src, img.alt, false, [{ width: '750' }]))); + block.textContent = ''; + block.append(ul); +} diff --git a/blocks/teaser/teaser.css b/blocks/teaser/teaser.css index a3ffadf..bd2d6ae 100644 --- a/blocks/teaser/teaser.css +++ b/blocks/teaser/teaser.css @@ -137,23 +137,23 @@ div.teaser-wrapper + div.teaser-wrapper { } } -/* teaser 30%-60% */ +/* teaser 33%-66% */ @media (width >= 1025px) { .teaser.one-two > ul { - grid-template-columns: 33% 66%; + grid-template-columns: 1fr 2fr; } } /* teaser 66%-33% */ @media (width >= 1025px) { .teaser.two-one > ul { - grid-template-columns: 66% 33%; + grid-template-columns: 2fr 1fr; } } /* teaser 1-1 */ @media (width >= 1025px) { .teaser.one-one > ul { - grid-template-columns: 50% 50%; + grid-template-columns: 1fr 1fr; } } From f9becaa35f1136817f57d513add18c75301a7f38 Mon Sep 17 00:00:00 2001 From: Tomasz Dziezyk Date: Thu, 19 Sep 2024 13:48:24 +0200 Subject: [PATCH 043/159] KAW-7904 Add text and image block --- blocks/text-with-image/text-with-image.css | 239 +++++++++++++++++++++ blocks/text-with-image/text-with-image.js | 88 ++++++++ 2 files changed, 327 insertions(+) create mode 100644 blocks/text-with-image/text-with-image.css create mode 100644 blocks/text-with-image/text-with-image.js diff --git a/blocks/text-with-image/text-with-image.css b/blocks/text-with-image/text-with-image.css new file mode 100644 index 0000000..d785562 --- /dev/null +++ b/blocks/text-with-image/text-with-image.css @@ -0,0 +1,239 @@ +.text-with-image { + padding-top: 60px; + padding-bottom: 60px; +} + +.dark .text-with-image { + color: var(--white); +} + +.text-with-image .text-with-image-row { + display: flex; + flex-direction: column; + gap: 48px; +} + +.text-with-image .column-with-images { + order: 1; + position: relative; +} + +.text-with-image .column-with-text { + order: 2; + display: flex; + flex-direction: column; + gap: 32px; +} + +.text-with-image picture { + display: flex; +} + +.text-with-image picture img { + aspect-ratio: 1/1; + border-radius: 4px; +} + +.text-with-image .h3 { + margin: 0; +} + +.text-with-image .button-container { + display: flex; + gap: 24px; +} + +.text-with-image p { + margin: 0; +} + +/* sticky image variant */ +.text-with-image.sticky-image picture img { + aspect-ratio: 4/3; +} + +/* stacked images variant */ +.text-with-image.stacked-images .text-with-image-row { + gap: 40px; +} + +.text-with-image.stacked-images .column-with-images p:nth-child(1) img { + aspect-ratio: 4 / 3; + margin: 0 calc(-1 * var(--section-x-padding)); + max-width: unset; + width: calc(100% + 2 * var(--section-x-padding)); + margin-bottom: 180px; +} + +.text-with-image.stacked-images .column-with-images p:nth-child(2) img { + width: 214px; + position: absolute; + right: 21px; + bottom: 0; +} + +/* wide stacked images variant */ +.text-with-image.wide-stacked-images .text-with-image-row { + gap: 40px; +} + +.text-with-image.wide-stacked-images .column-with-images p:nth-child(1) img { + aspect-ratio: 16 / 9; + width: 100vw; + margin: 0 calc((100vw - 100%) / -2); + max-width: 100vw; +} + +.text-with-image.wide-stacked-images .column-with-images p:nth-child(2) img { + width: 149px; + right: 21px; + position: absolute; + bottom: 0; +} + +@media (width >= 768px) { + .text-with-image { + padding-top: 80px; + padding-bottom: 80px; + } + + .text-with-image .text-with-image-row { + gap: 60px; + flex-direction: row; + } + + .text-with-image .column-with-images, + .text-with-image .column-with-text { + order: 1; + } + + .text-with-image .column-with-text { + max-width: 306px; + } + + .text-with-image .column-with-images { + min-width: 50%; + width: 50%; + } + + .text-with-image-row:has(.column-with-text + .column-with-images) { + justify-content: flex-end; + } + + /* sticky image variant */ + .text-with-image.sticky-image .column-with-images img { + position: absolute; + width: calc(100% + var(--section-x-padding)); + max-width: unset; + } + + .text-with-image.sticky-image .column-with-images.left-column img { + left: calc(var(--section-x-padding) * -1); + } + + .text-with-image.sticky-image .column-with-images.right-column img { + right: calc(var(--section-x-padding) * -1); + } + + /* stacked images variant */ + .text-with-image.stacked-images .column-with-images { + align-self: flex-start; + } + + .text-with-image.stacked-images .column-with-images p:nth-child(1) img { + margin-right: 0; + margin-left: 0; + width: 100%; + } + + .text-with-image.stacked-images .column-with-images p:nth-child(2) img { + right: 36px; + } + + /* wide stacked images variant */ + .text-with-image.wide-stacked-images .text-with-image-row { + flex-direction: column; + gap: 0; + } + + .text-with-image.wide-stacked-images .column-with-images { + order: 0; + width: 100%; + } + + .text-with-image.wide-stacked-images .column-with-text { + margin-top: -90px; + } + + .text-with-image.wide-stacked-images .column-with-images p:nth-child(2) img { + width: 340px; + right: 0; + } +} + +@media (width >= 1025px) { + .text-with-image .text-with-image-row { + gap: 104px; + } + + .text-with-image .column-with-text { + max-width: 297px; + } + + /* sticky image variant */ + .text-with-image.sticky-image .column-with-images.left-column, + .text-with-image.sticky-image .column-with-images.right-column { + min-height: 37.5vw; + } + + .text-with-image.sticky-image .column-with-images.left-column img, + .text-with-image.sticky-image .column-with-images.right-column img { + width: 50vw; + } + + .text-with-image.sticky-image .column-with-images.left-column img { + left: unset; + right: 0; + } + + .text-with-image.sticky-image .column-with-images.right-column img { + left: 0; + right: unset; + } + + /* stacked images variant */ + .text-with-image.stacked-images .column-with-images p:nth-child(2) img { + width: 216px; + right: 81px; + } + + /* wide stacked images variant */ + .text-with-image.wide-stacked-images .column-with-text { + margin-top: calc(-1 * var(--text-image-distance, 0px)); + } + + .text-with-image.wide-stacked-images .column-with-images p:nth-child(2) img { + width: 456px; + } +} + +@media (width >= 1440px) { + .text-with-image .text-with-image-row { + gap: 130px; + } + + .text-with-image .column-with-text { + max-width: 397px; + } + + /* stacked images variant */ + .text-with-image.stacked-images .column-with-images p:nth-child(2) img { + width: 290px; + right: 105px; + } + + /* wide stacked images variant */ + .text-with-image.wide-stacked-images .column-with-images p:nth-child(2) img { + width: 607px; + } +} diff --git a/blocks/text-with-image/text-with-image.js b/blocks/text-with-image/text-with-image.js new file mode 100644 index 0000000..dc08320 --- /dev/null +++ b/blocks/text-with-image/text-with-image.js @@ -0,0 +1,88 @@ +const gatherButtons = (buttonsContainers) => { + let currentButtonContainer; + + buttonsContainers.forEach((buttonContainer) => { + if (currentButtonContainer?.nextElementSibling === buttonContainer) { + currentButtonContainer.append(buttonContainer.children[0]); + buttonContainer.remove(); + } else { + currentButtonContainer = buttonContainer; + } + }); +}; + +const moveImageOnScroll = (block, settings = {}) => { + const [firstImage, secondImage] = block.querySelectorAll('.column-with-images img'); + let inProgeress = false; + const { + minOverlap = 0.1, + maxOverlap = 0.5, + durationRatio = 0.66, + } = settings; + + const onScroll = () => { + const windowHeight = window.innerHeight || document.documentElement.clientHeight; + // how many px it takes to move the image from bottom to top + const durationInPx = windowHeight * durationRatio; + const rect = firstImage.getBoundingClientRect(); + const distanceFromTheBottom = windowHeight - rect.bottom; + const secondImageHeight = secondImage.height; + let overlapInPx = 0; + + if (distanceFromTheBottom >= durationInPx) { + overlapInPx = (1 - maxOverlap) * secondImageHeight; + } else if (distanceFromTheBottom < 0) { + overlapInPx = (1 - minOverlap) * secondImageHeight; + } else { + const shiftRatio = (distanceFromTheBottom / durationInPx) * (maxOverlap - minOverlap); + overlapInPx = (1 - (shiftRatio + minOverlap)) * secondImageHeight; + } + + // fix for strange scroll event with less then 1px + if (Math.abs(firstImage.style.marginBottom.split('px')[0] - overlapInPx) > 1) { + firstImage.style.marginBottom = `${overlapInPx}px`; + block.style.setProperty('--text-image-distance', `${secondImageHeight - overlapInPx}px`); + } + }; + + window.addEventListener('scroll', () => { + if (!inProgeress) { + window.requestAnimationFrame(() => { + onScroll(); + inProgeress = false; + }); + + inProgeress = true; + } + }); +}; + +export default async function decorate(block) { + const row = block.querySelector(':scope > div'); + + row.classList.add('text-with-image-row'); + + block.querySelectorAll(':scope > div > div').forEach((column, index) => { + const columnType = column.querySelector('picture') ? 'images' : 'text'; + column.classList.add(`column-with-${columnType}`); + + const columnPosition = index === 0 ? 'left' : 'right'; + column.classList.add(`${columnPosition}-column`); + }); + + const headings = block.querySelectorAll('h1, h2, h3, h4, h5, h6'); + + headings.forEach((heading) => { + heading.classList.add('h3'); + }); + + gatherButtons(block.querySelectorAll('.button-container')); + + if (block.classList.contains('stacked-images')) { + moveImageOnScroll(block); + } + + if (block.classList.contains('wide-stacked-images')) { + moveImageOnScroll(block, { minOverlap: -1, maxOverlap: 0.4, durationRatio: 0.3 }); + } +} From 8bf9663800b5ee52b1cd934267c426f5f896f4d8 Mon Sep 17 00:00:00 2001 From: Tomasz Dziezyk Date: Thu, 19 Sep 2024 14:24:12 +0200 Subject: [PATCH 044/159] KAW-7904 Set scroll-x to hidden --- styles/styles.css | 1 + 1 file changed, 1 insertion(+) diff --git a/styles/styles.css b/styles/styles.css index 48bd6c7..9f12fec 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -84,6 +84,7 @@ body { display: none; -webkit-font-smoothing: antialiased; font-feature-settings: "liga" off, "clig" off; + overflow-x: hidden; } body.appear { From a003068942f2d472553233d9b917848a9898379e Mon Sep 17 00:00:00 2001 From: Tomasz Dziezyk Date: Fri, 20 Sep 2024 09:18:39 +0200 Subject: [PATCH 045/159] KAW-7904 Fix icons styles --- blocks/text-with-image/text-with-image.css | 4 ++++ blocks/text-with-image/text-with-image.js | 8 ++++---- icons/chevron-right.svg | 3 +++ icons/mail.svg | 4 ++-- scripts/scripts.js | 2 +- 5 files changed, 14 insertions(+), 7 deletions(-) create mode 100644 icons/chevron-right.svg diff --git a/blocks/text-with-image/text-with-image.css b/blocks/text-with-image/text-with-image.css index d785562..3450fc1 100644 --- a/blocks/text-with-image/text-with-image.css +++ b/blocks/text-with-image/text-with-image.css @@ -3,6 +3,10 @@ padding-bottom: 60px; } +.text-with-image span[class^="icon-"] { + display: flex; +} + .dark .text-with-image { color: var(--white); } diff --git a/blocks/text-with-image/text-with-image.js b/blocks/text-with-image/text-with-image.js index dc08320..e308674 100644 --- a/blocks/text-with-image/text-with-image.js +++ b/blocks/text-with-image/text-with-image.js @@ -13,7 +13,7 @@ const gatherButtons = (buttonsContainers) => { const moveImageOnScroll = (block, settings = {}) => { const [firstImage, secondImage] = block.querySelectorAll('.column-with-images img'); - let inProgeress = false; + let inProgress = false; const { minOverlap = 0.1, maxOverlap = 0.5, @@ -46,13 +46,13 @@ const moveImageOnScroll = (block, settings = {}) => { }; window.addEventListener('scroll', () => { - if (!inProgeress) { + if (!inProgress) { window.requestAnimationFrame(() => { onScroll(); - inProgeress = false; + inProgress = false; }); - inProgeress = true; + inProgress = true; } }); }; diff --git a/icons/chevron-right.svg b/icons/chevron-right.svg new file mode 100644 index 0000000..0b865d3 --- /dev/null +++ b/icons/chevron-right.svg @@ -0,0 +1,3 @@ + + + diff --git a/icons/mail.svg b/icons/mail.svg index d53cee6..b5087b9 100644 --- a/icons/mail.svg +++ b/icons/mail.svg @@ -1,4 +1,4 @@ - - + + \ No newline at end of file diff --git a/scripts/scripts.js b/scripts/scripts.js index 146584f..4dd5eb3 100644 --- a/scripts/scripts.js +++ b/scripts/scripts.js @@ -97,7 +97,7 @@ function swappingPlacesBlock(main) { export function customDecoreateIcons(main) { // inline icons give the possibility to change its colors using the css variables const decorateInlineIcons = (rootElement) => { - const inlineIcons = ['icon-logo', 'icon-hamburger', 'icon-chevron', 'icon-close']; + const inlineIcons = ['icon-logo', 'icon-hamburger', 'icon-chevron', 'icon-close', 'icon-mail', 'icon-chevron-right']; const isInlineIcon = (el) => { const isInline = (className) => inlineIcons.includes(className); return [...el.classList].some(isInline); From 54e646a13945f77d9c62f24798062031052870fe Mon Sep 17 00:00:00 2001 From: Tomasz Dziezyk Date: Fri, 20 Sep 2024 14:34:22 +0200 Subject: [PATCH 046/159] KAW-7904 Refactor --- blocks/text-with-image/text-with-image.css | 41 +++++++++++++++++++--- blocks/text-with-image/text-with-image.js | 29 ++++++--------- 2 files changed, 47 insertions(+), 23 deletions(-) diff --git a/blocks/text-with-image/text-with-image.css b/blocks/text-with-image/text-with-image.css index 3450fc1..7b6b205 100644 --- a/blocks/text-with-image/text-with-image.css +++ b/blocks/text-with-image/text-with-image.css @@ -1,4 +1,6 @@ .text-with-image { + --animation-time: 300ms; + padding-top: 60px; padding-bottom: 60px; } @@ -61,12 +63,16 @@ gap: 40px; } +.text-with-image.stacked-images .column-with-text { + transform: translateY(calc(214px - var(--text-image-distance))); + transition: transform var(--animation-time) linear; +} + .text-with-image.stacked-images .column-with-images p:nth-child(1) img { aspect-ratio: 4 / 3; margin: 0 calc(-1 * var(--section-x-padding)); max-width: unset; width: calc(100% + 2 * var(--section-x-padding)); - margin-bottom: 180px; } .text-with-image.stacked-images .column-with-images p:nth-child(2) img { @@ -74,11 +80,19 @@ position: absolute; right: 21px; bottom: 0; + transform: translateY(calc(100% - var(--text-image-distance))); + transition: transform var(--animation-time) linear; } /* wide stacked images variant */ .text-with-image.wide-stacked-images .text-with-image-row { - gap: 40px; + gap: 0; +} + +.text-with-image.wide-stacked-images .column-with-text { + transform: translateY(calc(var(--text-image-distance) * -1)); + transition: transform var(--animation-time) linear; + margin-top: 189px; } .text-with-image.wide-stacked-images .column-with-images p:nth-child(1) img { @@ -93,6 +107,8 @@ right: 21px; position: absolute; bottom: 0; + transform: translateY(calc(100% - var(--text-image-distance))); + transition: transform var(--animation-time) linear; } @media (width >= 768px) { @@ -140,6 +156,10 @@ } /* stacked images variant */ + .text-with-image.stacked-images .column-with-text { + transform: unset; + } + .text-with-image.stacked-images .column-with-images { align-self: flex-start; } @@ -166,7 +186,9 @@ } .text-with-image.wide-stacked-images .column-with-text { - margin-top: -90px; + margin: 0; + margin-top: 80px; + transform: translateY(calc(102px - var(--text-image-distance))); } .text-with-image.wide-stacked-images .column-with-images p:nth-child(2) img { @@ -211,9 +233,11 @@ right: 81px; } - /* wide stacked images variant */ + /* wide stacked images variant */ .text-with-image.wide-stacked-images .column-with-text { - margin-top: calc(-1 * var(--text-image-distance, 0px)); + max-width: 381px; + margin-left: calc(50% - 381px); + transform: translateY(calc(137px - var(--text-image-distance))); } .text-with-image.wide-stacked-images .column-with-images p:nth-child(2) img { @@ -240,4 +264,11 @@ .text-with-image.wide-stacked-images .column-with-images p:nth-child(2) img { width: 607px; } + + .text-with-image.wide-stacked-images .column-with-text { + max-width: 506px; + margin-left: unset; + transform: translateY(calc(182px - var(--text-image-distance))); + margin-top: 120px; + } } diff --git a/blocks/text-with-image/text-with-image.js b/blocks/text-with-image/text-with-image.js index e308674..54eb0c9 100644 --- a/blocks/text-with-image/text-with-image.js +++ b/blocks/text-with-image/text-with-image.js @@ -15,8 +15,8 @@ const moveImageOnScroll = (block, settings = {}) => { const [firstImage, secondImage] = block.querySelectorAll('.column-with-images img'); let inProgress = false; const { - minOverlap = 0.1, - maxOverlap = 0.5, + startOverlap = 0.1, + endOverlap = 0.5, durationRatio = 0.66, } = settings; @@ -27,22 +27,19 @@ const moveImageOnScroll = (block, settings = {}) => { const rect = firstImage.getBoundingClientRect(); const distanceFromTheBottom = windowHeight - rect.bottom; const secondImageHeight = secondImage.height; - let overlapInPx = 0; + let distance = 0; if (distanceFromTheBottom >= durationInPx) { - overlapInPx = (1 - maxOverlap) * secondImageHeight; + distance = endOverlap * 100; } else if (distanceFromTheBottom < 0) { - overlapInPx = (1 - minOverlap) * secondImageHeight; + distance = startOverlap * 100; } else { - const shiftRatio = (distanceFromTheBottom / durationInPx) * (maxOverlap - minOverlap); - overlapInPx = (1 - (shiftRatio + minOverlap)) * secondImageHeight; + const shiftRatio = (distanceFromTheBottom / durationInPx) * (endOverlap - startOverlap); + distance = (shiftRatio + startOverlap) * 100; } - // fix for strange scroll event with less then 1px - if (Math.abs(firstImage.style.marginBottom.split('px')[0] - overlapInPx) > 1) { - firstImage.style.marginBottom = `${overlapInPx}px`; - block.style.setProperty('--text-image-distance', `${secondImageHeight - overlapInPx}px`); - } + const distanaceToPx = (distance * secondImageHeight) / 100; + block.style.setProperty('--text-image-distance', `${distanaceToPx}px`); }; window.addEventListener('scroll', () => { @@ -78,11 +75,7 @@ export default async function decorate(block) { gatherButtons(block.querySelectorAll('.button-container')); - if (block.classList.contains('stacked-images')) { - moveImageOnScroll(block); - } - - if (block.classList.contains('wide-stacked-images')) { - moveImageOnScroll(block, { minOverlap: -1, maxOverlap: 0.4, durationRatio: 0.3 }); + if (block.classList.contains('stacked-images') || block.classList.contains('wide-stacked-images')) { + moveImageOnScroll(block, { startOverlap: -1, endOverlap: 0.3, durationRatio: 0.33 }); } } From 740e5215e5550c90be2545879ce529363f354b5c Mon Sep 17 00:00:00 2001 From: Tomasz Dziezyk Date: Fri, 20 Sep 2024 15:21:42 +0200 Subject: [PATCH 047/159] KAW-7904 Refactor --- blocks/text-with-image/text-with-image.css | 34 +++++++++++++++++----- blocks/text-with-image/text-with-image.js | 1 + 2 files changed, 27 insertions(+), 8 deletions(-) diff --git a/blocks/text-with-image/text-with-image.css b/blocks/text-with-image/text-with-image.css index 7b6b205..a3311b9 100644 --- a/blocks/text-with-image/text-with-image.css +++ b/blocks/text-with-image/text-with-image.css @@ -59,12 +59,16 @@ } /* stacked images variant */ +.text-with-image.stacked-images { + --text-image-2nd-image-height: 214px; +} + .text-with-image.stacked-images .text-with-image-row { gap: 40px; } .text-with-image.stacked-images .column-with-text { - transform: translateY(calc(214px - var(--text-image-distance))); + transform: translateY(calc(var(--text-image-2nd-image-height) - var(--text-image-distance))); transition: transform var(--animation-time) linear; } @@ -85,6 +89,10 @@ } /* wide stacked images variant */ +.text-with-image.wide-stacked-images { + --text-image-2nd-image-height: 149px; +} + .text-with-image.wide-stacked-images .text-with-image-row { gap: 0; } @@ -92,7 +100,7 @@ .text-with-image.wide-stacked-images .column-with-text { transform: translateY(calc(var(--text-image-distance) * -1)); transition: transform var(--animation-time) linear; - margin-top: 189px; + margin-top: calc((var(--text-image-2nd-image-height) + 40px)); } .text-with-image.wide-stacked-images .column-with-images p:nth-child(1) img { @@ -175,6 +183,10 @@ } /* wide stacked images variant */ + .text-with-image.wide-stacked-images { + --text-image-2nd-image-height: 304px; + } + .text-with-image.wide-stacked-images .text-with-image-row { flex-direction: column; gap: 0; @@ -188,11 +200,11 @@ .text-with-image.wide-stacked-images .column-with-text { margin: 0; margin-top: 80px; - transform: translateY(calc(102px - var(--text-image-distance))); + transform: translateY(calc(var(--text-image-max-overlap) - var(--text-image-distance))); } .text-with-image.wide-stacked-images .column-with-images p:nth-child(2) img { - width: 340px; + width: var(--text-image-2nd-image-height); right: 0; } } @@ -234,14 +246,17 @@ } /* wide stacked images variant */ + .text-with-image.wide-stacked-images { + --text-image-2nd-image-height: 456px; + } + .text-with-image.wide-stacked-images .column-with-text { max-width: 381px; margin-left: calc(50% - 381px); - transform: translateY(calc(137px - var(--text-image-distance))); } .text-with-image.wide-stacked-images .column-with-images p:nth-child(2) img { - width: 456px; + width: var(--text-image-2nd-image-height); } } @@ -261,14 +276,17 @@ } /* wide stacked images variant */ + .text-with-image.wide-stacked-images { + --text-image-2nd-image-height: 506px; + } + .text-with-image.wide-stacked-images .column-with-images p:nth-child(2) img { width: 607px; } .text-with-image.wide-stacked-images .column-with-text { - max-width: 506px; + max-width: var(--text-image-2nd-image-height); margin-left: unset; - transform: translateY(calc(182px - var(--text-image-distance))); margin-top: 120px; } } diff --git a/blocks/text-with-image/text-with-image.js b/blocks/text-with-image/text-with-image.js index 54eb0c9..fdd972f 100644 --- a/blocks/text-with-image/text-with-image.js +++ b/blocks/text-with-image/text-with-image.js @@ -40,6 +40,7 @@ const moveImageOnScroll = (block, settings = {}) => { const distanaceToPx = (distance * secondImageHeight) / 100; block.style.setProperty('--text-image-distance', `${distanaceToPx}px`); + block.style.setProperty('--text-image-max-overlap', `${endOverlap * secondImageHeight}px`); }; window.addEventListener('scroll', () => { From dc1b52fe3d3d0f707d271fc43bd4db7b7106e43a Mon Sep 17 00:00:00 2001 From: Tomasz Dziezyk Date: Fri, 20 Sep 2024 15:35:59 +0200 Subject: [PATCH 048/159] KAW-7904 Add throttle to animations --- blocks/text-with-image/text-with-image.js | 14 +++++++++----- scripts/helpers.js | 13 +++++++++++++ 2 files changed, 22 insertions(+), 5 deletions(-) diff --git a/blocks/text-with-image/text-with-image.js b/blocks/text-with-image/text-with-image.js index fdd972f..d378fdc 100644 --- a/blocks/text-with-image/text-with-image.js +++ b/blocks/text-with-image/text-with-image.js @@ -1,3 +1,5 @@ +import { throttle } from '../../scripts/helpers.js'; + const gatherButtons = (buttonsContainers) => { let currentButtonContainer; @@ -15,9 +17,9 @@ const moveImageOnScroll = (block, settings = {}) => { const [firstImage, secondImage] = block.querySelectorAll('.column-with-images img'); let inProgress = false; const { - startOverlap = 0.1, - endOverlap = 0.5, - durationRatio = 0.66, + startOverlap = 0.1, // how much of the 2nd image should overlap the 1st one at the start (in %) + endOverlap = 0.5, // how much of the 2nd image should overlap the 1st one at the end (in %) + durationRatio = 0.66, // how much of the viewport should be scrolled to finish the animation } = settings; const onScroll = () => { @@ -43,7 +45,7 @@ const moveImageOnScroll = (block, settings = {}) => { block.style.setProperty('--text-image-max-overlap', `${endOverlap * secondImageHeight}px`); }; - window.addEventListener('scroll', () => { + const onScrollListener = () => { if (!inProgress) { window.requestAnimationFrame(() => { onScroll(); @@ -52,7 +54,9 @@ const moveImageOnScroll = (block, settings = {}) => { inProgress = true; } - }); + }; + + window.addEventListener('scroll', throttle(onScrollListener, 200)); }; export default async function decorate(block) { diff --git a/scripts/helpers.js b/scripts/helpers.js index 99494cb..33bf5ca 100644 --- a/scripts/helpers.js +++ b/scripts/helpers.js @@ -123,3 +123,16 @@ export const unwrapDivs = (element, options = {}) => { } } }; + +export const throttle = (func, limit) => { + let inThrottle; + + return function (...args) { + const context = this; + if (!inThrottle) { + func.apply(context, args); + inThrottle = true; + setTimeout(() => { inThrottle = false; }, limit); + } + }; +}; From 4cf1ab09eca4b1e184d61f5256fb5efd3207576b Mon Sep 17 00:00:00 2001 From: Tomasz Dziezyk Date: Fri, 20 Sep 2024 15:51:52 +0200 Subject: [PATCH 049/159] KAW-7935 Refactor --- blocks/text-with-image/text-with-image.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/blocks/text-with-image/text-with-image.css b/blocks/text-with-image/text-with-image.css index a3311b9..08c9ba4 100644 --- a/blocks/text-with-image/text-with-image.css +++ b/blocks/text-with-image/text-with-image.css @@ -111,7 +111,7 @@ } .text-with-image.wide-stacked-images .column-with-images p:nth-child(2) img { - width: 149px; + width: var(--text-image-2nd-image-height); right: 21px; position: absolute; bottom: 0; From 64bbbf4f70989cebe28cc169cd2e362016457ba7 Mon Sep 17 00:00:00 2001 From: Tomasz Dziezyk Date: Mon, 23 Sep 2024 08:30:16 +0200 Subject: [PATCH 050/159] KAW-7939 Add image block --- blocks/image/image.css | 58 +++++++++++++++++++++++++++++++++++++++--- blocks/image/image.js | 30 ++++++++++++++++++++-- scripts/helpers.js | 13 ++++++++++ 3 files changed, 95 insertions(+), 6 deletions(-) diff --git a/blocks/image/image.css b/blocks/image/image.css index 04bd64b..f12cbcc 100644 --- a/blocks/image/image.css +++ b/blocks/image/image.css @@ -2,11 +2,61 @@ display: flex; } -.block.image img:not(.image.center img) { +.block.image picture img { + aspect-ratio: 16 / 9; width: 100%; - object-fit: cover; } -.image.center picture { - justify-content: center; +/* 2 images */ +.block.image.images-wide-row > div { + display: flex; + gap: 24px; + flex-direction: column; +} + +.block.image.images-wide-row picture img { + aspect-ratio: 4/3; +} + +.block.image.images-wide-row > div > div:nth-child(2) img { + width: 252px; + height: auto; +} + +/* sticky variant */ +.block.image.sticky { + width: 100vw; + margin-left: calc((100vw - 100%) * -1 / 2); + aspect-ratio: 16 / 9; + background-repeat: no-repeat; + background-position: 0 0; + background-size: contain; +} + +@media (width >= 768px) { + /* 2 images */ + .block.image.images-wide-row > div { + flex-direction: row; + align-items: flex-end; + } + + .block.image.images-wide-row > div > div:nth-child(1) { + flex-grow: 434; + } + + .block.image.images-wide-row > div > div:nth-child(2) { + flex-grow: 250; + } + + .block.image.images-wide-row > div > div:nth-child(2) img { + width: auto; + } +} + +@media (width >= 1440px) { + /* 2 images */ + .block.image.images-wide-row { + width: 100vw; + margin-left: calc((100vw - 100%) * -1 / 2); + } } diff --git a/blocks/image/image.js b/blocks/image/image.js index 286310b..ee0c257 100644 --- a/blocks/image/image.js +++ b/blocks/image/image.js @@ -1,3 +1,29 @@ -export default async function decorate() { - // JS code +import { createOptimizedPicture } from '../../scripts/aem.js'; +import { throttle } from '../../scripts/helpers.js'; + +export default async function decorate(block) { + const images = block.querySelectorAll(':scope > div > div picture'); + + if (images.length === 2) { + block.classList.add('images-wide-row'); + } + + if (block.classList.contains('sticky')) { + const bgImg = new Image(); + const img = block.querySelector('img'); + const pictureEl = createOptimizedPicture(img.src, '', false, [{ width: window.innerWidth }]); + const imgUrl = pictureEl.querySelector('img').src; + bgImg.onload = () => { + block.style.backgroundImage = `url(${imgUrl})`; + block.style.aspectRatio = `${bgImg.naturalWidth} / ${bgImg.naturalHeight}`; + }; + bgImg.src = imgUrl; + + block.innerHTML = ''; + + window.addEventListener('scroll', throttle(() => { + const backgroundStyle = block.getBoundingClientRect().top > 0 ? 'scroll' : 'fixed'; + block.style.backgroundAttachment = backgroundStyle; + }), 100); + } } diff --git a/scripts/helpers.js b/scripts/helpers.js index 99494cb..33bf5ca 100644 --- a/scripts/helpers.js +++ b/scripts/helpers.js @@ -123,3 +123,16 @@ export const unwrapDivs = (element, options = {}) => { } } }; + +export const throttle = (func, limit) => { + let inThrottle; + + return function (...args) { + const context = this; + if (!inThrottle) { + func.apply(context, args); + inThrottle = true; + setTimeout(() => { inThrottle = false; }, limit); + } + }; +}; From 2d4822da42f7f0baf2d31a052aba242d7ce83143 Mon Sep 17 00:00:00 2001 From: Tomasz Dziezyk Date: Mon, 23 Sep 2024 08:37:31 +0200 Subject: [PATCH 051/159] KAW-7939 Add border-radius --- blocks/image/image.css | 1 + 1 file changed, 1 insertion(+) diff --git a/blocks/image/image.css b/blocks/image/image.css index f12cbcc..2f4499c 100644 --- a/blocks/image/image.css +++ b/blocks/image/image.css @@ -5,6 +5,7 @@ .block.image picture img { aspect-ratio: 16 / 9; width: 100%; + border-radius: 4px; } /* 2 images */ From 20e789fe8f116796c5289fa7be9ce878d4d06a3a Mon Sep 17 00:00:00 2001 From: Tomasz Dziezyk Date: Mon, 23 Sep 2024 13:33:46 +0200 Subject: [PATCH 052/159] KAW-7943 Add highlight block --- blocks/highlight/highlight.css | 95 ++++++++++++++++++++++++++++++++++ blocks/highlight/highlight.js | 55 ++++++++++++++++++++ 2 files changed, 150 insertions(+) create mode 100644 blocks/highlight/highlight.css create mode 100644 blocks/highlight/highlight.js diff --git a/blocks/highlight/highlight.css b/blocks/highlight/highlight.css new file mode 100644 index 0000000..98760da --- /dev/null +++ b/blocks/highlight/highlight.css @@ -0,0 +1,95 @@ +.highlight { + position: relative; + color: var(--white); + aspect-ratio: 3/4; + width: 100%; +} + +.highlight picture { + display: flex; + height: 100%; + width: auto; + margin: 0 calc((100vw - 100%) / -2); + transition: all 300ms ease-in-out; +} + +.highlight.active picture { + transform: scale(1) !important; +} + +picture::after { + display: block; + content: ""; + background: linear-gradient(180deg, rgb(0 0 0 / 0%), rgb(0 0 0 / 40%)); + top: revert-layer; + left: 0; + position: absolute; + width: 100%; + height: 100%; +} + +.highlight picture img { + object-fit: cover; + width: 100%; +} + +.highlight.block .highlight-slides-wrapper { + position: absolute; + top: 0; + display: flex; + flex-direction: column; + width: 100%; + padding-top: 0; + height: 100%; + overflow: hidden; +} + +.highlight .highlight-slide { + min-height: 100%; + display: flex; + align-items: flex-end; + padding: 0 20px 56px; +} + +.highlight .highlight-slide div { + display: flex; + flex-direction: column; + gap: 16px; +} + +.highlight .highlight-slide h2 { + margin: 0; +} + +@media (width >= 768px) { + .highlight { + aspect-ratio: 16/9; + } + + .highlight .highlight-slide { + padding: 0 30px; + align-items: center; + max-width: 507px; + } +} + +@media (width >= 1024px) { + .highlight .highlight-slide { + padding: 172px 30px 0; + align-items: flex-start; + } + + .highlight .highlight-slide div { + gap: 20px; + } +} + +@media (width >= 1440px) { + .highlight .highlight-slide { + padding: 255px 30px 0; + } + + .highlight .highlight-slide div { + gap: 24px; + } +} diff --git a/blocks/highlight/highlight.js b/blocks/highlight/highlight.js new file mode 100644 index 0000000..3894b71 --- /dev/null +++ b/blocks/highlight/highlight.js @@ -0,0 +1,55 @@ +const setInitScaleForPicture = (block, picture) => { + const isNotMobile = window.matchMedia('(width >= 768px)').matches; + const mobileAspectRatio = 3 / 4; + const noneMobileAspectRatio = 16 / 9; + const aspectRatio = isNotMobile ? noneMobileAspectRatio : mobileAspectRatio; + + const maxWidth = document.body.clientWidth; + const maxHeight = maxWidth / aspectRatio; + + // for some reason the block.clientWidth is 0 + // so we need to wait for the repaint + setTimeout(() => { + const initialWidth = block.clientWidth; + block.style.height = maxHeight; + + const initScale = initialWidth / maxWidth; + + picture.style.transform = `scale(${initScale})`; + }); +}; + +const observeWhenBlockIsFullyVisible = (block) => { + const observer = new IntersectionObserver((entries) => { + entries.forEach((entry) => { + if (entry.isIntersecting && entry.intersectionRatio === 1) { + block.classList.add('active'); + } else { + block.classList.remove('active'); + } + }); + }, { threshold: [0, 1.0] }); + + observer.observe(block); +}; + +export default async function decorate(block) { + const [pictureWrapper, ...slides] = block.querySelectorAll(':scope > div'); + const slidesWrapper = document.createElement('div'); + + slides.forEach((slide) => { + slide.classList.add('highlight-slide'); + slide.querySelectorAll('h1, h2, h3, h4, h5, h6') + .forEach((heading) => heading.classList.add('h1')); + }); + + slidesWrapper.classList.add('highlight-slides-wrapper'); + slidesWrapper.append(...slides); + block.append(slidesWrapper); + + const picture = pictureWrapper.querySelector('picture'); + pictureWrapper.replaceWith(picture); + + setInitScaleForPicture(block, picture); + observeWhenBlockIsFullyVisible(block); +} From beaf8f69d6145ebee3d4a84fdf5f6f88ab731fe4 Mon Sep 17 00:00:00 2001 From: Tomasz Dziezyk Date: Tue, 24 Sep 2024 14:55:21 +0200 Subject: [PATCH 053/159] KAW-7943 Update scrolling behavior --- blocks/highlight/highlight.css | 11 +++++ blocks/highlight/highlight.js | 77 ++++++++++++++++++++++++++++++++-- 2 files changed, 84 insertions(+), 4 deletions(-) diff --git a/blocks/highlight/highlight.css b/blocks/highlight/highlight.css index 98760da..a094ee7 100644 --- a/blocks/highlight/highlight.css +++ b/blocks/highlight/highlight.css @@ -44,11 +44,22 @@ picture::after { overflow: hidden; } +.highlight-slides-container { + transition: transform 500ms ease-in-out; + transform: translateY(0); +} + .highlight .highlight-slide { min-height: 100%; display: flex; align-items: flex-end; padding: 0 20px 56px; + opacity: 0; + transition: opacity 750ms ease-in-out; +} + +.highlight .highlight-slide.active { + opacity: 1; } .highlight .highlight-slide div { diff --git a/blocks/highlight/highlight.js b/blocks/highlight/highlight.js index 3894b71..ce8db42 100644 --- a/blocks/highlight/highlight.js +++ b/blocks/highlight/highlight.js @@ -16,19 +16,81 @@ const setInitScaleForPicture = (block, picture) => { const initScale = initialWidth / maxWidth; picture.style.transform = `scale(${initScale})`; + }, 100); +}; + +const getActiveSlideIndex = (slidersContainer) => [...slidersContainer.querySelectorAll('.highlight-slide')].findIndex((slide) => slide.classList.contains('active')); + +const scrollToSlide = (slidersContainer, slideIndex) => { + slidersContainer.style.transform = `translateY(-${slideIndex * 100}%)`; + slidersContainer.querySelectorAll('.highlight-slide').forEach((slide, index) => { + const addOrRemove = index === slideIndex ? 'add' : 'remove'; + slide.classList[addOrRemove]('active'); }); }; +const getOnScroll = (block) => { + const container = block.querySelector('.highlight-slides-container'); + let prevScrollY = window.scrollY; + let pause = false; + + const pauseForMoment = () => { + pause = true; + + setTimeout(() => { + pause = false; + }, 1000); + }; + + pauseForMoment(); + + const onScroll = () => { + if (pause) { + block.scrollIntoView({ block: 'end', behavior: 'instant' }); + return; + } + + const activeSlideIndex = getActiveSlideIndex(container); + const slideCount = container.querySelectorAll('.highlight-slide').length; + const deltaY = window.scrollY - prevScrollY; + + pauseForMoment(); + + if (deltaY > 0 && activeSlideIndex < slideCount - 1) { + scrollToSlide(container, activeSlideIndex + 1); + block.scrollIntoView({ block: 'end' }); + } else if (deltaY < 0 && activeSlideIndex > 0) { + scrollToSlide(container, activeSlideIndex - 1); + block.scrollIntoView({ block: 'end' }); + } else { + // remove the listener when there is no more slides in the direction + window.removeEventListener('scroll', onScroll, { passive: false }); + } + + prevScrollY = window.scrollY; + }; + + return onScroll; +}; + +const trap = (block) => { + const onScroll = getOnScroll(block); + + window.addEventListener('scroll', onScroll, { passive: false }); + block.scrollIntoView({ block: 'end' }); +}; + const observeWhenBlockIsFullyVisible = (block) => { const observer = new IntersectionObserver((entries) => { entries.forEach((entry) => { - if (entry.isIntersecting && entry.intersectionRatio === 1) { + if (entry.isIntersecting && entry.intersectionRatio >= 0.9) { block.classList.add('active'); + trap(block); } else { block.classList.remove('active'); } }); - }, { threshold: [0, 1.0] }); + }, { threshold: [0.1, 0.9] }); observer.observe(block); }; @@ -36,15 +98,22 @@ const observeWhenBlockIsFullyVisible = (block) => { export default async function decorate(block) { const [pictureWrapper, ...slides] = block.querySelectorAll(':scope > div'); const slidesWrapper = document.createElement('div'); + const slidesContainer = document.createElement('div'); - slides.forEach((slide) => { + slides.forEach((slide, index) => { slide.classList.add('highlight-slide'); slide.querySelectorAll('h1, h2, h3, h4, h5, h6') .forEach((heading) => heading.classList.add('h1')); + + if (index === 0) { + slide.classList.add('active'); + } }); slidesWrapper.classList.add('highlight-slides-wrapper'); - slidesWrapper.append(...slides); + slidesContainer.classList.add('highlight-slides-container'); + slidesContainer.append(...slides); + slidesWrapper.append(slidesContainer); block.append(slidesWrapper); const picture = pictureWrapper.querySelector('picture'); From a0355ea38f278791172f3a83d182c76d212a2b4b Mon Sep 17 00:00:00 2001 From: Tomasz Dziezyk Date: Wed, 25 Sep 2024 11:13:50 +0200 Subject: [PATCH 054/159] KAW-7943 Switch to whell and touch events --- blocks/highlight/highlight.js | 115 ++++++++++++++++++++++------------ 1 file changed, 74 insertions(+), 41 deletions(-) diff --git a/blocks/highlight/highlight.js b/blocks/highlight/highlight.js index ce8db42..69784b8 100644 --- a/blocks/highlight/highlight.js +++ b/blocks/highlight/highlight.js @@ -19,7 +19,8 @@ const setInitScaleForPicture = (block, picture) => { }, 100); }; -const getActiveSlideIndex = (slidersContainer) => [...slidersContainer.querySelectorAll('.highlight-slide')].findIndex((slide) => slide.classList.contains('active')); +const getActiveSlideIndex = (block) => [...block.querySelectorAll('.highlight-slide')] + .findIndex((slide) => slide.classList.contains('active')); const scrollToSlide = (slidersContainer, slideIndex) => { slidersContainer.style.transform = `translateY(-${slideIndex * 100}%)`; @@ -29,65 +30,72 @@ const scrollToSlide = (slidersContainer, slideIndex) => { }); }; -const getOnScroll = (block) => { - const container = block.querySelector('.highlight-slides-container'); - let prevScrollY = window.scrollY; - let pause = false; - - const pauseForMoment = () => { - pause = true; +function preventScroll({ moveDown, moveUp }) { + let startX; + let startY; - setTimeout(() => { - pause = false; - }, 1000); + const touchStart = (event) => { + // Store the starting touch position + startX = event.touches[0].pageX; + startY = event.touches[0].pageY; }; - pauseForMoment(); + const touchMove = (event) => { + event.preventDefault(); - const onScroll = () => { - if (pause) { - block.scrollIntoView({ block: 'end', behavior: 'instant' }); - return; - } + // Calculate the distance moved in both directions + const moveX = event.touches[0].pageX - startX; + const moveY = event.touches[0].pageY - startY; - const activeSlideIndex = getActiveSlideIndex(container); - const slideCount = container.querySelectorAll('.highlight-slide').length; - const deltaY = window.scrollY - prevScrollY; + // Determine direction + if (Math.abs(moveY) > Math.abs(moveX)) { + if (moveY > 0) { + moveUp(); + } else { + moveDown(); + } + } + }; - pauseForMoment(); + const onWheel = (event) => { + event.preventDefault(); - if (deltaY > 0 && activeSlideIndex < slideCount - 1) { - scrollToSlide(container, activeSlideIndex + 1); - block.scrollIntoView({ block: 'end' }); - } else if (deltaY < 0 && activeSlideIndex > 0) { - scrollToSlide(container, activeSlideIndex - 1); - block.scrollIntoView({ block: 'end' }); + if (event.deltaY > 0) { + moveUp(); } else { - // remove the listener when there is no more slides in the direction - window.removeEventListener('scroll', onScroll, { passive: false }); + moveDown(); } - - prevScrollY = window.scrollY; }; - return onScroll; -}; + window.addEventListener('touchstart', touchStart, { passive: false }); + window.addEventListener('touchmove', touchMove, { passive: false }); + window.addEventListener('wheel', onWheel, { passive: false }); -const trap = (block) => { - const onScroll = getOnScroll(block); + const enableScroll = () => { + window.removeEventListener('touchstart', touchStart, { passive: false }); + window.removeEventListener('touchmove', touchMove, { passive: false }); + window.removeEventListener('wheel', onWheel, { passive: false }); + }; - window.addEventListener('scroll', onScroll, { passive: false }); - block.scrollIntoView({ block: 'end' }); -}; + return enableScroll; +} -const observeWhenBlockIsFullyVisible = (block) => { +const trapScrollingForSlides = (block, { prevSlide, nextSlide }) => { const observer = new IntersectionObserver((entries) => { + let enableScoll = null; + const moveDown = () => { nextSlide(enableScoll); }; + const moveUp = () => { prevSlide(enableScoll); }; + entries.forEach((entry) => { if (entry.isIntersecting && entry.intersectionRatio >= 0.9) { block.classList.add('active'); - trap(block); + enableScoll = preventScroll({ moveDown, moveUp }); } else { block.classList.remove('active'); + if (enableScoll) { + enableScoll(); + enableScoll = null; + } } }); }, { threshold: [0.1, 0.9] }); @@ -120,5 +128,30 @@ export default async function decorate(block) { pictureWrapper.replaceWith(picture); setInitScaleForPicture(block, picture); - observeWhenBlockIsFullyVisible(block); + + // trapping the scrolling so the user will scroll the next slides of the slider + const container = block.querySelector('.highlight-slides-container'); + const prevSlide = (onNoPreSlide) => { + const activeSlideIndex = getActiveSlideIndex(block); + + if (activeSlideIndex <= 0) { + onNoPreSlide(); + return; + } + + scrollToSlide(container, activeSlideIndex - 1); + }; + const nextSlide = (onNoNextSlide) => { + const activeSlideIndex = getActiveSlideIndex(block); + const slideCount = block.querySelectorAll('.highlight-slide').length; + + if (activeSlideIndex >= slideCount - 1) { + onNoNextSlide(); + return; + } + + scrollToSlide(container, activeSlideIndex + 1); + }; + + trapScrollingForSlides(block, { prevSlide, nextSlide }); } From 75bafbb336146e9d5085f93cb1fa92e1154d5470 Mon Sep 17 00:00:00 2001 From: Tomasz Dziezyk Date: Wed, 25 Sep 2024 11:31:47 +0200 Subject: [PATCH 055/159] KAW-7943 Add throttling to slide moving --- blocks/highlight/highlight.js | 19 +++++++++++++++---- 1 file changed, 15 insertions(+), 4 deletions(-) diff --git a/blocks/highlight/highlight.js b/blocks/highlight/highlight.js index 69784b8..6278c2c 100644 --- a/blocks/highlight/highlight.js +++ b/blocks/highlight/highlight.js @@ -1,3 +1,5 @@ +import { throttle } from '../../scripts/helpers.js'; + const setInitScaleForPicture = (block, picture) => { const isNotMobile = window.matchMedia('(width >= 768px)').matches; const mobileAspectRatio = 3 / 4; @@ -34,6 +36,15 @@ function preventScroll({ moveDown, moveUp }) { let startX; let startY; + const move = throttle((direction) => { + if (direction === 'down') { + moveDown(); + return; + } + + moveUp(); + }, 1000); + const touchStart = (event) => { // Store the starting touch position startX = event.touches[0].pageX; @@ -50,9 +61,9 @@ function preventScroll({ moveDown, moveUp }) { // Determine direction if (Math.abs(moveY) > Math.abs(moveX)) { if (moveY > 0) { - moveUp(); + move('up'); } else { - moveDown(); + move('down'); } } }; @@ -61,9 +72,9 @@ function preventScroll({ moveDown, moveUp }) { event.preventDefault(); if (event.deltaY > 0) { - moveUp(); + move('down'); } else { - moveDown(); + move('up'); } }; From e7eda596bdb3334864f9e51137614c8592c53d3f Mon Sep 17 00:00:00 2001 From: Tomasz Dziezyk Date: Wed, 25 Sep 2024 11:58:22 +0200 Subject: [PATCH 056/159] KAW-7943 Fix mobile version --- blocks/highlight/highlight.css | 1 + 1 file changed, 1 insertion(+) diff --git a/blocks/highlight/highlight.css b/blocks/highlight/highlight.css index a094ee7..d1d18a8 100644 --- a/blocks/highlight/highlight.css +++ b/blocks/highlight/highlight.css @@ -47,6 +47,7 @@ picture::after { .highlight-slides-container { transition: transform 500ms ease-in-out; transform: translateY(0); + max-height: 100%; } .highlight .highlight-slide { From 27d90b67d70ae929477ff3216cca023216dabdfb Mon Sep 17 00:00:00 2001 From: Tomasz Dziezyk Date: Wed, 25 Sep 2024 12:58:53 +0200 Subject: [PATCH 057/159] KAW-7943 Fix mobile veiw on Safari --- blocks/highlight/highlight.css | 1 + 1 file changed, 1 insertion(+) diff --git a/blocks/highlight/highlight.css b/blocks/highlight/highlight.css index d1d18a8..612350b 100644 --- a/blocks/highlight/highlight.css +++ b/blocks/highlight/highlight.css @@ -31,6 +31,7 @@ picture::after { .highlight picture img { object-fit: cover; width: 100%; + height: 100%; } .highlight.block .highlight-slides-wrapper { From f08e0e18c72fd6b7c58ed3395fe6aadb6000f0a4 Mon Sep 17 00:00:00 2001 From: Tomasz Dziezyk Date: Wed, 25 Sep 2024 14:10:06 +0200 Subject: [PATCH 058/159] KAW-7943 Update animation timing --- blocks/highlight/highlight.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/blocks/highlight/highlight.css b/blocks/highlight/highlight.css index 612350b..b5ff9bd 100644 --- a/blocks/highlight/highlight.css +++ b/blocks/highlight/highlight.css @@ -46,7 +46,7 @@ picture::after { } .highlight-slides-container { - transition: transform 500ms ease-in-out; + transition: transform 750ms ease-in-out; transform: translateY(0); max-height: 100%; } @@ -57,7 +57,7 @@ picture::after { align-items: flex-end; padding: 0 20px 56px; opacity: 0; - transition: opacity 750ms ease-in-out; + transition: opacity 1500ms ease-in-out; } .highlight .highlight-slide.active { From 1497c9a3aadd9aebf9aecac5403f8512b4576204 Mon Sep 17 00:00:00 2001 From: Tomasz Dziezyk Date: Wed, 25 Sep 2024 14:14:27 +0200 Subject: [PATCH 059/159] KAW-7943 Fix scolling for Safari --- blocks/highlight/highlight.js | 25 ++++++++++++++++++++++--- 1 file changed, 22 insertions(+), 3 deletions(-) diff --git a/blocks/highlight/highlight.js b/blocks/highlight/highlight.js index 6278c2c..4971240 100644 --- a/blocks/highlight/highlight.js +++ b/blocks/highlight/highlight.js @@ -35,8 +35,15 @@ const scrollToSlide = (slidersContainer, slideIndex) => { function preventScroll({ moveDown, moveUp }) { let startX; let startY; + let isInitPause = true; // pause the moving event for 1s - fix for Firefox + + setTimeout(() => { isInitPause = false; }, 1000); const move = throttle((direction) => { + if (isInitPause) { + return; + } + if (direction === 'down') { moveDown(); return; @@ -49,6 +56,7 @@ function preventScroll({ moveDown, moveUp }) { // Store the starting touch position startX = event.touches[0].pageX; startY = event.touches[0].pageY; + document.body.style.overflow = 'hidden'; }; const touchMove = (event) => { @@ -69,7 +77,12 @@ function preventScroll({ moveDown, moveUp }) { }; const onWheel = (event) => { - event.preventDefault(); + if (event.cancelable) { + event.preventDefault(); + event.stopPropagation(); + } + + document.body.style.overflow = 'hidden'; if (event.deltaY > 0) { move('down'); @@ -94,8 +107,14 @@ function preventScroll({ moveDown, moveUp }) { const trapScrollingForSlides = (block, { prevSlide, nextSlide }) => { const observer = new IntersectionObserver((entries) => { let enableScoll = null; - const moveDown = () => { nextSlide(enableScoll); }; - const moveUp = () => { prevSlide(enableScoll); }; + const moveDown = () => { + nextSlide(enableScoll); + document.body.style.overflow = ''; + }; + const moveUp = () => { + prevSlide(enableScoll); + document.body.style.overflow = ''; + }; entries.forEach((entry) => { if (entry.isIntersecting && entry.intersectionRatio >= 0.9) { From 7cca4a000433ac9777f818fc5bca1f0f2a7aac01 Mon Sep 17 00:00:00 2001 From: Tomasz Dziezyk Date: Wed, 25 Sep 2024 14:41:41 +0200 Subject: [PATCH 060/159] KAW-7943 Fix scaling image on browsers resize and on init --- blocks/highlight/highlight.js | 41 +++++++++++++++++++++++------------ 1 file changed, 27 insertions(+), 14 deletions(-) diff --git a/blocks/highlight/highlight.js b/blocks/highlight/highlight.js index 4971240..6287716 100644 --- a/blocks/highlight/highlight.js +++ b/blocks/highlight/highlight.js @@ -1,24 +1,37 @@ import { throttle } from '../../scripts/helpers.js'; -const setInitScaleForPicture = (block, picture) => { - const isNotMobile = window.matchMedia('(width >= 768px)').matches; - const mobileAspectRatio = 3 / 4; - const noneMobileAspectRatio = 16 / 9; - const aspectRatio = isNotMobile ? noneMobileAspectRatio : mobileAspectRatio; - - const maxWidth = document.body.clientWidth; - const maxHeight = maxWidth / aspectRatio; - - // for some reason the block.clientWidth is 0 - // so we need to wait for the repaint - setTimeout(() => { +const setScaleForPicture = (block, picture) => { + const setScale = () => { + const isNotMobile = window.matchMedia('(width >= 768px)').matches; + const mobileAspectRatio = 3 / 4; + const noneMobileAspectRatio = 16 / 9; + const aspectRatio = isNotMobile ? noneMobileAspectRatio : mobileAspectRatio; + + const maxWidth = document.body.clientWidth; + const maxHeight = maxWidth / aspectRatio; + const initialWidth = block.clientWidth; block.style.height = maxHeight; const initScale = initialWidth / maxWidth; picture.style.transform = `scale(${initScale})`; - }, 100); + }; + + const observer = new IntersectionObserver((entries) => { + entries.forEach((entry) => { + if (entry.intersectionRatio > 0) { + setScale(block, picture); + observer.disconnect(); + } + }); + }, { threshold: [0.1], rootMargin: '100px' }); + + observer.observe(block); + + window.addEventListener('resize', throttle(() => { + setScale(block, picture); + }, 250)); }; const getActiveSlideIndex = (block) => [...block.querySelectorAll('.highlight-slide')] @@ -157,7 +170,7 @@ export default async function decorate(block) { const picture = pictureWrapper.querySelector('picture'); pictureWrapper.replaceWith(picture); - setInitScaleForPicture(block, picture); + setScaleForPicture(block, picture); // trapping the scrolling so the user will scroll the next slides of the slider const container = block.querySelector('.highlight-slides-container'); From b8a1eb215e0b957c44bed18b54eb099ae57b104f Mon Sep 17 00:00:00 2001 From: Tomasz Dziezyk Date: Wed, 25 Sep 2024 15:56:38 +0200 Subject: [PATCH 061/159] KAW-7943 Fix scolling --- blocks/highlight/highlight.js | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/blocks/highlight/highlight.js b/blocks/highlight/highlight.js index 6287716..bf6b982 100644 --- a/blocks/highlight/highlight.js +++ b/blocks/highlight/highlight.js @@ -104,11 +104,13 @@ function preventScroll({ moveDown, moveUp }) { } }; + console.log('start'); window.addEventListener('touchstart', touchStart, { passive: false }); window.addEventListener('touchmove', touchMove, { passive: false }); window.addEventListener('wheel', onWheel, { passive: false }); const enableScroll = () => { + console.log('end'); window.removeEventListener('touchstart', touchStart, { passive: false }); window.removeEventListener('touchmove', touchMove, { passive: false }); window.removeEventListener('wheel', onWheel, { passive: false }); @@ -118,8 +120,9 @@ function preventScroll({ moveDown, moveUp }) { } const trapScrollingForSlides = (block, { prevSlide, nextSlide }) => { + let enableScoll = null; + const observer = new IntersectionObserver((entries) => { - let enableScoll = null; const moveDown = () => { nextSlide(enableScoll); document.body.style.overflow = ''; @@ -132,6 +135,9 @@ const trapScrollingForSlides = (block, { prevSlide, nextSlide }) => { entries.forEach((entry) => { if (entry.isIntersecting && entry.intersectionRatio >= 0.9) { block.classList.add('active'); + if (enableScoll) { + enableScoll(); + } enableScoll = preventScroll({ moveDown, moveUp }); } else { block.classList.remove('active'); From 947318dc79f398a8f23190e466bf3018a3976dcb Mon Sep 17 00:00:00 2001 From: Tomasz Dziezyk Date: Wed, 25 Sep 2024 16:00:11 +0200 Subject: [PATCH 062/159] KAW-7943 Remove console.logs --- blocks/highlight/highlight.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/blocks/highlight/highlight.js b/blocks/highlight/highlight.js index bf6b982..cf0326e 100644 --- a/blocks/highlight/highlight.js +++ b/blocks/highlight/highlight.js @@ -104,13 +104,11 @@ function preventScroll({ moveDown, moveUp }) { } }; - console.log('start'); window.addEventListener('touchstart', touchStart, { passive: false }); window.addEventListener('touchmove', touchMove, { passive: false }); window.addEventListener('wheel', onWheel, { passive: false }); const enableScroll = () => { - console.log('end'); window.removeEventListener('touchstart', touchStart, { passive: false }); window.removeEventListener('touchmove', touchMove, { passive: false }); window.removeEventListener('wheel', onWheel, { passive: false }); From 61f22a4f1af7f81727aeecd0b2702208a3462fb9 Mon Sep 17 00:00:00 2001 From: Lakshmishri Date: Thu, 26 Sep 2024 09:41:37 +0200 Subject: [PATCH 063/159] rename classes --- blocks/nba/nba.css | 2 +- blocks/nba/nba.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/blocks/nba/nba.css b/blocks/nba/nba.css index 84e8cc1..d39e292 100644 --- a/blocks/nba/nba.css +++ b/blocks/nba/nba.css @@ -37,7 +37,7 @@ gap: var(--row-gap) } -.heading { +.nba .h3 { margin-bottom: 0; } diff --git a/blocks/nba/nba.js b/blocks/nba/nba.js index 19132d8..826a248 100644 --- a/blocks/nba/nba.js +++ b/blocks/nba/nba.js @@ -6,7 +6,7 @@ export default async function decorate(block) { const headings = block.querySelectorAll('h1, h2, h3, h4, h5, h6'); [...headings].forEach((heading) => { - heading.classList.add('heading'); + heading.classList.add('h3'); textWrapper.append(heading); }); From 8e84bb09556fa6c11989118f5107903984e2932b Mon Sep 17 00:00:00 2001 From: Tomasz Dziezyk Date: Mon, 30 Sep 2024 10:08:13 +0200 Subject: [PATCH 064/159] KAW-7943 Fix image styles --- blocks/highlight/highlight.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/blocks/highlight/highlight.css b/blocks/highlight/highlight.css index b5ff9bd..cbe7fcc 100644 --- a/blocks/highlight/highlight.css +++ b/blocks/highlight/highlight.css @@ -17,7 +17,7 @@ transform: scale(1) !important; } -picture::after { +.highlight picture::after { display: block; content: ""; background: linear-gradient(180deg, rgb(0 0 0 / 0%), rgb(0 0 0 / 40%)); From dcdcb696f88bf82bee95afd45ac920822a9d22a4 Mon Sep 17 00:00:00 2001 From: Tomasz Dziezyk Date: Mon, 30 Sep 2024 12:45:21 +0200 Subject: [PATCH 065/159] KAW-9747 Add animated headings --- scripts/scripts.js | 17 ++++++++++++++ styles/styles.css | 58 ++++++++++++++++++++++++++++++++++++++++++++-- 2 files changed, 73 insertions(+), 2 deletions(-) diff --git a/scripts/scripts.js b/scripts/scripts.js index 9e5485c..3686990 100644 --- a/scripts/scripts.js +++ b/scripts/scripts.js @@ -132,6 +132,22 @@ export function customDecoreateIcons(main) { decorateIcons(main); } +const animatedHeadings = (main) => { + main.querySelectorAll('.heading-animated').forEach((animatedHeading) => { + const observer = new IntersectionObserver((entries) => { + // Step 3: Define the callback function + entries.forEach((entry) => { + if (entry.isIntersecting) { + entry.target.classList.add('heading-animated-visible'); + observer.unobserve(); + } + }); + }); + + observer.observe(animatedHeading); + }); +}; + /** * Decorates the main element. * @param {Element} main The main element @@ -189,6 +205,7 @@ async function loadLazy(doc) { loadHeader(doc.querySelector('header')); loadFooter(doc.querySelector('footer')); + animatedHeadings(main); loadCSS(`${window.hlx.codeBasePath}/styles/lazy-styles.css`); loadFonts(); diff --git a/styles/styles.css b/styles/styles.css index 674f162..426a558 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -447,8 +447,8 @@ button.secondary.small { .dark a.button.primary:focus, .dark button.primary:focus { - color: #82221D; - border-color: #82221D; + color: #82221d; + border-color: #82221d; background: var(--action-hover); } @@ -620,3 +620,57 @@ main .border-top { background-color: var(--link-color) !important; border-color: transparent !important; } + +/* animated heading */ +.heading-animated { + text-align: center; + padding: 180px 0 40px; + margin: 0; + position: relative; +} + +.heading-animated::before { + content: ''; + width: 3px; + height: 10px; + display: block; + background: var(--action-default); + position: absolute; + left: 50%; + transform: translateX(-50%); + top: 150px; + transition: all 200ms ease-in; +} + +.heading-animated.heading-animated-visible::before { + top: 80px; + height: 80px; +} + +@media (width >= 768px) { + .heading-animated { + padding-top: 160px; + } + + .heading-animated::before { + top: 130px; + } + + .heading-animated.heading-animated-visible::before { + top: 60px; + } +} + +@media (width >= 1025px) { + .heading-animated { + padding: 220px 0 60px + } + + .heading-animated::before { + top: 190px; + } + + .heading-animated.heading-animated-visible::before { + top: 120px; + } +} \ No newline at end of file From cba4d80ebdeeb263e95419bd24c8e8f452a864c7 Mon Sep 17 00:00:00 2001 From: Ioana Iordache Date: Tue, 1 Oct 2024 20:24:44 +0200 Subject: [PATCH 066/159] KAW-7940: gallery component --- blocks/gallery/gallery.css | 47 ++++++++++++++++++++++++++++++++++++++ blocks/gallery/gallery.js | 37 ++++++++++++++++++++++++++++++ 2 files changed, 84 insertions(+) create mode 100644 blocks/gallery/gallery.css create mode 100644 blocks/gallery/gallery.js diff --git a/blocks/gallery/gallery.css b/blocks/gallery/gallery.css new file mode 100644 index 0000000..5b18078 --- /dev/null +++ b/blocks/gallery/gallery.css @@ -0,0 +1,47 @@ +.gallery { + display: flex; + flex-direction: column; + gap: 12px; +} + +.gallery img { + border-radius: 2px; +} + +@media (width >= 768px) { + .gallery { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 24px; + } + + .gallery img { + --gallery-animation-factor: 0.2; + + width: 100%; + height: auto; + object-fit: cover; + translate: 0 calc(var(--gallery-animation-factor) * ((100 - var(--gallery-intersection-ratio)) * 1%)); + transition: translate ease-out 0.2s; + } + + .gallery div:nth-child(3n+1) { + grid-column: 1 / -1; + } + + .gallery div:nth-child(3n) img { + --gallery-animation-factor: 0.4; + } +} + +@media (width >= 1025px) { + .gallery img { + border-radius: 3px; + } +} + +@media (width >= 1440px) { + .gallery img { + border-radius: 4px; + } +} \ No newline at end of file diff --git a/blocks/gallery/gallery.js b/blocks/gallery/gallery.js new file mode 100644 index 0000000..4999f17 --- /dev/null +++ b/blocks/gallery/gallery.js @@ -0,0 +1,37 @@ +export default async function decorate(block) { + const targets = block.querySelectorAll('.gallery div:has(>picture)'); + + const buildThresholdArray = (steps) => Array(steps + 1) + .fill(0) + .map((_, index) => index / steps || 0); + + const intersectionObserver = new IntersectionObserver((entries) => { + entries.forEach((entry) => { + const isIntersectingAtTop = entry.boundingClientRect.top < 0; + if (isIntersectingAtTop) { + // only update when intersecting in or out at the bottom of screen + return; + } + + const intersectionRatio = Math.ceil(entry.intersectionRatio * 100); + entry.target.style.setProperty('--gallery-intersection-ratio', intersectionRatio); + }); + }, { + threshold: buildThresholdArray(20), + }); + + const observeTargets = () => targets.forEach((target) => intersectionObserver.observe(target)); + + // only observe on large screens + const isSmallUp = window.matchMedia('(min-width: 768px)'); + + if (isSmallUp.matches) observeTargets(); + + isSmallUp.addEventListener('change', (evt) => { + if (evt.matches) { + observeTargets(); + } else { + intersectionObserver.disconnect(); + } + }); +} From 1c2e0ac5f893708d89161bf0eabd8c6ed319c7f5 Mon Sep 17 00:00:00 2001 From: Tomasz Dziezyk Date: Wed, 2 Oct 2024 11:58:38 +0200 Subject: [PATCH 067/159] KAW-7947 Add specification table --- blocks/header/header.js | 61 +++----- .../specification-table.css | 80 ++++++++++ .../specification-table.js | 46 ++++++ blocks/specification/specification.css | 76 +++++++++ blocks/specification/specification.js | 39 +++++ icons/close.svg | 8 +- scripts/scripts.js | 148 +++++++++++++++++- styles/styles.css | 132 ++++++++++++++-- 8 files changed, 528 insertions(+), 62 deletions(-) create mode 100644 blocks/specification-table/specification-table.css create mode 100644 blocks/specification-table/specification-table.js create mode 100644 blocks/specification/specification.css create mode 100644 blocks/specification/specification.js diff --git a/blocks/header/header.js b/blocks/header/header.js index f527209..c0cd824 100644 --- a/blocks/header/header.js +++ b/blocks/header/header.js @@ -1,50 +1,11 @@ import { getMetadata } from '../../scripts/aem.js'; -import { customDecoreateIcons } from '../../scripts/scripts.js'; +import { addAnimateInOut, customDecoreateIcons } from '../../scripts/scripts.js'; import { loadFragment } from '../fragment/fragment.js'; // media query match that indicates mobile/tablet width const isDesktop = window.matchMedia('(min-width: 1025px)'); const fadeTransitionTime = 300; -const animateInOut = (animateTarget, isFadeIn, initStyles, startStyles, endStyles) => { - animateTarget.style.transition = `all ${fadeTransitionTime}ms ease-in-out`; - - const setStyles = (targetEl, stylesObject) => { - Object.entries(stylesObject).forEach(([key, value]) => { - targetEl.style[key] = value; - }); - }; - - const cssReflow = () => { - // trigger reflow to ensure the transition starts from the current state - // read more here: https://gist.github.com/paulirish/5d52fb081b3570c81e3a - // eslint-disable-next-line no-unused-expressions - animateTarget.offsetWidth; - }; - - const restoreDisplayPropAfterHide = () => { - const transitionEndEvent = () => { - animateTarget.style.display = ''; - animateTarget.removeEventListener('transitionend', transitionEndEvent); - }; - - animateTarget.addEventListener('transitionend', transitionEndEvent); - }; - - setStyles(animateTarget, initStyles); - - if (isFadeIn) { - setStyles(animateTarget, startStyles); - cssReflow(); - setStyles(animateTarget, endStyles); - } else { - setStyles(animateTarget, endStyles); - cssReflow(); - restoreDisplayPropAfterHide(); - setStyles(animateTarget, startStyles); - } -}; - function closeOnEscape(e) { if (e.code === 'Escape') { const nav = document.getElementById('nav'); @@ -120,8 +81,14 @@ function toggleMenu(nav, navSections, forceExpanded = null) { if (document.querySelector('header nav .nav-link-section')) { const animateTarget = document.querySelector('header nav .nav-link-section'); - - animateInOut(animateTarget, !expanded, { display: 'flex' }, { right: '-320px' }, { right: '0' }); + const animationConfig = { + initStyles: { display: 'flex' }, + startStyles: { right: '-320px' }, + endStyles: { right: '0' }, + time: fadeTransitionTime, + }; + const animateInOut = addAnimateInOut(animateTarget, animationConfig); + animateInOut(!expanded); } // enable menu collapse on escape keypress @@ -150,7 +117,15 @@ function toggleSubNav(navSection, navSections) { document.body.style.overflow = 'hidden'; } - animateInOut(navSublist, !expanded, { display: 'grid' }, { gridTemplateRows: '0fr' }, { gridTemplateRows: '1fr' }); + const animationConfig = { + initStyles: { display: 'grid' }, + startStyles: { gridTemplateRows: '0fr' }, + endStyles: { gridTemplateRows: '1fr' }, + time: fadeTransitionTime, + }; + const animateInOut = addAnimateInOut(navSublist, animationConfig); + + animateInOut(!expanded); navSection.setAttribute('aria-expanded', expanded ? 'false' : 'true'); } diff --git a/blocks/specification-table/specification-table.css b/blocks/specification-table/specification-table.css new file mode 100644 index 0000000..b844d11 --- /dev/null +++ b/blocks/specification-table/specification-table.css @@ -0,0 +1,80 @@ +.specification-table { + display: flex; + flex-direction: column; + gap: 32px; +} + +.specification-table p, +.specification-table .h6, +.specification-table .st-heading { + margin: 0; +} + +.specification-table.block .st-category-wrapper { + display: flex; + flex-direction: column; + gap: 24px; + padding: 0; +} + +.specification-table .st-category-wrapper .st-category-data-wrapper { + padding: 0; + display: flex; + flex-direction: column; + gap: 4px; +} + +.specification-table .st-category-wrapper .st-category-data-wrapper > * { + background-color: var(--grey-5); + padding: 12px; + display: flex; + flex-direction: column; + gap: 4px; +} + +.specification-table .st-label { + color: var(--grey-70); +} + +@media (width >= 768px) { + .specification-table.block .st-category-wrapper { + flex-direction: row; + } + + .specification-table .st-category-wrapper .st-category { + width: 143px; + min-width: 143px; + padding-top: 8px; + } + + .specification-table .st-category-wrapper .st-category-data-wrapper { + flex-grow: 1; + } + + .specification-table + .st-category-wrapper + .st-category-data-wrapper + > * { + flex-direction: row; + gap: 24px; + } + + .specification-table .st-label, + .specification-table .st-value { + width: 50%; + } +} + +@media (width >= 1024px) { + .specification-table .st-category-wrapper .st-category { + width: 158px; + min-width: 158px; + } +} + +@media (width >= 1440px) { + .specification-table .st-category-wrapper .st-category { + width: 195px; + min-width: 195px; + } +} diff --git a/blocks/specification-table/specification-table.js b/blocks/specification-table/specification-table.js new file mode 100644 index 0000000..bc68317 --- /dev/null +++ b/blocks/specification-table/specification-table.js @@ -0,0 +1,46 @@ +export default function decorate(block) { + const tableHeader = block.querySelector(':scope > div > div'); + tableHeader.querySelector('h1, h2, h3, h4, h5, h6').classList.add('h3', 'st-heading'); + + const data = []; + + block.querySelectorAll(':scope > div:not(:first-child)').forEach((dataRow) => { + const [category, label, value] = dataRow.querySelectorAll(':scope > div'); + + if (category.textContent.trim()) { + category.classList.add('h6', 'st-category'); + data.push({ + category, + categoryData: [], + }); + } + + label.classList.add('st-label'); + value.classList.add('st-value'); + + data.at(-1).categoryData.push({ + label, + value, + }); + }); + + block.innerHTML = ''; + block.append(tableHeader); + + data.forEach((categoryRow) => { + const categoryWrapper = document.createElement('div'); + categoryWrapper.classList.add('st-category-wrapper'); + categoryWrapper.append(categoryRow.category); + + const categoryDataWrapper = document.createElement('div'); + categoryDataWrapper.classList.add('st-category-data-wrapper'); + categoryRow.categoryData.forEach((el) => { + const wrapper = document.createElement('div'); + wrapper.append(el.label, el.value); + + categoryDataWrapper.append(wrapper); + }); + categoryWrapper.append(categoryDataWrapper); + block.append(categoryWrapper); + }); +} diff --git a/blocks/specification/specification.css b/blocks/specification/specification.css new file mode 100644 index 0000000..1b1f003 --- /dev/null +++ b/blocks/specification/specification.css @@ -0,0 +1,76 @@ +.specification .specification-content { + display: flex; + flex-direction: column-reverse; + gap: 24px; +} + +.specification .specification-stats-wrapper { + display: flex; + flex-wrap: wrap; + gap: 24px 16px; +} + +.specification .specification-stats-wrapper > * { + width: calc(50% - 8px); +} + +.specification .specification-stat { + display: flex; + flex-direction: column; + gap: 6px; +} + +.specification .specification-stat p { + margin-bottom: 0; +} + +.specification .specification-label { + color: var(--grey-70); +} + +.specification .specification-value { + font-weight: 600; +} + +.specification .button-container { + margin-top: 40px; +} + +.specification .button-container .button { + width: 100%; +} + +@media (width >= 768px) { + .specification .specification-content { + flex-direction: row; + align-items: center; + } + + .specification .specification-text-content { + width: 250px; + } + + .specification .specification-stats-wrapper { + flex-direction: column; + } + + .specification .specification-stat { + width: auto; + } + + .specification .button-container .button { + width: auto; + } +} + +@media (width >= 1024px) { + .specification .specification-text-content { + width: 296px; + } +} + +@media (width >= 1440px) { + .specification .specification-text-content { + width: 398px; + } +} \ No newline at end of file diff --git a/blocks/specification/specification.js b/blocks/specification/specification.js new file mode 100644 index 0000000..67ebfcd --- /dev/null +++ b/blocks/specification/specification.js @@ -0,0 +1,39 @@ +export default function decorate(block) { + const content = block.querySelector(':scope > div'); + content.classList.add('specification-content'); + const textContent = block.querySelector(':scope > div > div:first-child'); + const statisticsWrapper = document.createElement('div'); + + statisticsWrapper.classList.add('specification-statistics'); + textContent.classList.add('specification-text-content'); + + // adding proper styles for stats labels and values + textContent.querySelectorAll('p').forEach((paragraph) => { + const strongEls = paragraph.querySelectorAll('strong'); + const hasButton = paragraph.classList.contains('button-container'); + + if (strongEls.length > 0) { + paragraph.classList.add('font-small', 'specification-value'); + strongEls.forEach((s) => { + s.classList.add('h5'); + }); + } else if (!hasButton) { + paragraph.classList.add('font-small', 'specification-label'); + } + }); + + // grouping all of the stats label and values + const specificationStatsWrapper = document.createElement('div'); + specificationStatsWrapper.classList.add('specification-stats-wrapper'); + textContent.insertBefore(specificationStatsWrapper, textContent.querySelector('.specification-label')); + + textContent.querySelectorAll('.specification-label').forEach((el) => { + const stat = document.createElement('div'); + stat.classList.add('specification-stat'); + const valueEl = el.nextElementSibling; + + stat.append(el); + stat.append(valueEl); + specificationStatsWrapper.append(stat); + }); +} diff --git a/icons/close.svg b/icons/close.svg index 103f557..598b5fb 100644 --- a/icons/close.svg +++ b/icons/close.svg @@ -1,4 +1,4 @@ - - - - \ No newline at end of file + + + diff --git a/scripts/scripts.js b/scripts/scripts.js index 3686990..4be6e8e 100644 --- a/scripts/scripts.js +++ b/scripts/scripts.js @@ -133,13 +133,27 @@ export function customDecoreateIcons(main) { } const animatedHeadings = (main) => { - main.querySelectorAll('.heading-animated').forEach((animatedHeading) => { + main.querySelectorAll('.animated-heading').forEach((el) => { + let animatedHeading = el; + + // if the class is added to the section then the first heading + // will be animated one + if (el.classList.contains('section')) { + const heading = el.querySelector('h1, h2, h3, h4, h5, h6'); + + if (heading) { + animatedHeading = heading; + el.classList.remove('animated-heading'); + heading.classList.add('animated-heading'); + } + } + const observer = new IntersectionObserver((entries) => { // Step 3: Define the callback function entries.forEach((entry) => { if (entry.isIntersecting) { - entry.target.classList.add('heading-animated-visible'); - observer.unobserve(); + entry.target.classList.add('animated-heading-visible'); + observer.unobserve(animatedHeading); } }); }); @@ -221,6 +235,133 @@ function loadDelayed() { // load anything that can be postponed to the latest here } +export function addAnimateInOut(animateTarget, { + initStyles = {}, startStyles = {}, endStyles = {}, time = 300, +}) { + const fadeTransitionTime = time; + + const animateInOut = (isFadeIn) => { + animateTarget.style.transition = `all ${fadeTransitionTime}ms ease-in-out`; + + const setStyles = (targetEl, stylesObject) => { + Object.entries(stylesObject).forEach(([key, value]) => { + targetEl.style[key] = value; + }); + }; + + const cssReflow = () => { + // trigger reflow to ensure the transition starts from the current state + // read more here: https://gist.github.com/paulirish/5d52fb081b3570c81e3a + // eslint-disable-next-line no-unused-expressions + animateTarget.offsetWidth; + }; + + const restoreDisplayPropAfterHide = () => { + const transitionEndEvent = () => { + animateTarget.style.display = ''; + animateTarget.removeEventListener('transitionend', transitionEndEvent); + }; + + animateTarget.addEventListener('transitionend', transitionEndEvent); + }; + + setStyles(animateTarget, initStyles); + + if (isFadeIn) { + setStyles(animateTarget, startStyles); + cssReflow(); + setStyles(animateTarget, endStyles); + } else { + setStyles(animateTarget, endStyles); + cssReflow(); + restoreDisplayPropAfterHide(); + setStyles(animateTarget, startStyles); + } + }; + + return animateInOut; +} + +function addModalHandling() { + const modalLinks = document.querySelectorAll('a[href^="/#modal-"]'); + const modalContentMap = new Map(); + + modalLinks.forEach((mLink) => { + const modalContentId = mLink.getAttribute('href').split('modal-')[1]; + const modalContentEl = document.querySelector(`.${modalContentId}`); + + if (modalContentEl) { + modalContentEl.parentElement.remove(); + modalContentMap.set(modalContentId, modalContentEl); + } + + mLink.addEventListener('click', (event) => { + event.preventDefault(); + const modalEvent = new CustomEvent('show-modal', { detail: modalContentId }); + + window.dispatchEvent(modalEvent); + }); + }); + + const modalEl = document.createRange().createContextualFragment(` +
+
+
+ +
+ `).children[0]; + + document.body.append(modalEl); + customDecoreateIcons(modalEl); + + document.body.querySelector('.modal-close-button').addEventListener('click', () => { + const closeModalEvent = new CustomEvent('hide-modal'); + window.dispatchEvent(closeModalEvent); + }); + + const modalContent = document.querySelector('.modal-content'); + const closeButton = document.querySelector('.modal-close-button'); + const modalXSmallAnimationConfig = { + startStyles: { transform: 'var(--modal-content-animation-start)' }, + endStyles: { transform: 'var(--modal-content-animation-end)' }, + }; + const closeXSmallAnimationConfig = { + startStyles: { transform: 'var(--modal-close-button-animation-start)' }, + endStyles: { transform: 'var(--modal-close-button-animation-end)' }, + }; + + const modalContentAnimation = addAnimateInOut(modalContent, modalXSmallAnimationConfig); + const closeButtonAnimation = addAnimateInOut(closeButton, closeXSmallAnimationConfig); + + window.addEventListener('show-modal', (event) => { + const elId = event.detail; + const content = modalContentMap.get(elId); + + const modal = document.querySelector('.modal'); + modalContent.append(content); + modal.classList.remove('modal-hidden'); + document.body.classList.add('modal-visible'); + + modalContentAnimation(true); + closeButtonAnimation(true); + }); + + window.addEventListener('hide-modal', () => { + const modal = document.querySelector('.modal'); + document.body.classList.remove('modal-visible'); + + // removing the modal content after the fade out + modalContentAnimation(false); + closeButtonAnimation(false); + + setTimeout(() => { + modal.classList.add('modal-hidden'); + }, 3000); + }); +} + async function loadPage() { await loadEager(document); await loadLazy(document); @@ -239,3 +380,4 @@ export function getTextLabel(key) { placeholders = await fetchPlaceholders(); loadPage(); +addModalHandling(); diff --git a/styles/styles.css b/styles/styles.css index 426a558..27750da 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -622,15 +622,15 @@ main .border-top { } /* animated heading */ -.heading-animated { +.animated-heading { text-align: center; padding: 180px 0 40px; margin: 0; position: relative; } -.heading-animated::before { - content: ''; +.animated-heading::before { + content: ""; width: 3px; height: 10px; display: block; @@ -642,35 +642,143 @@ main .border-top { transition: all 200ms ease-in; } -.heading-animated.heading-animated-visible::before { +.animated-heading.animated-heading-visible::before { top: 80px; height: 80px; } @media (width >= 768px) { - .heading-animated { + .animated-heading { padding-top: 160px; } - .heading-animated::before { + .animated-heading::before { top: 130px; } - .heading-animated.heading-animated-visible::before { + .animated-heading.animated-heading-visible::before { top: 60px; } } @media (width >= 1025px) { - .heading-animated { - padding: 220px 0 60px + .animated-heading { + padding: 220px 0 60px; } - .heading-animated::before { + .animated-heading::before { top: 190px; } - .heading-animated.heading-animated-visible::before { + .animated-heading.animated-heading-visible::before { top: 120px; } -} \ No newline at end of file +} + +/* modal styles */ +body.modal-visible { + overflow: hidden; +} + +.modal { + --modal-content-animation-start: translateY(calc(100%)); + --modal-content-animation-end: translateY(0); + --modal-close-button-animation-start: translate(-50%, 90px); + --modal-close-button-animation-end: translate(-50%, 0); + + z-index: 1001; + position: relative; +} + +.modal.modal-hidden { + display: none; +} + +.modal .modal-background { + position: fixed; + top: 0; + left: 0; + width: 100vw; + height: 100vh; + background: #0006; +} + +.modal .modal-content { + padding: 40px 20px; + width: 100vw; + height: 100vh; + overflow: auto; + position: fixed; + background: var(--white); + top: 0; +} + +.modal .modal-close-button { + position: fixed; + bottom: 40px; + left: 50%; + transform: translate(-50%, 0); + width: 42px; + height: 42px; + background: var(--white); + border-radius: 50%; + border: solid 1px var(--action-default); +} + +.modal .modal-close-button:hover, +.modal .modal-close-button:active { + border-color: var(--action-hover); +} + +.modal .modal-close-button span { + display: flex; +} + +.modal .modal-close-button svg { + height: 18px; + width: 18px; +} + +@media (width >= 768px) { + .modal { + --modal-content-animation-start: translateX(100%); + --modal-content-animation-end: translateX(0); + --modal-close-button-animation-start: translate(66px, 0); + --modal-close-button-animation-end: translate(-694px, 0); + } + + .modal .modal-content { + padding: 60px 30px; + top: 0; + max-width: 670px; + right: 0; + } + + .modal .modal-close-button { + bottom: 50%; + left: unset; + right: 0; + } +} + +@media (width >= 1025px) { + .modal { + --modal-close-button-animation-end: translate(-928px, 0); + } + + .modal .modal-content { + padding: 60px 40px; + max-width: 904px; + } +} + +@media (width >= 1440px) { + .modal { + --modal-close-button-animation-end: translate(-1158px, 0); + } + + .modal .modal-content { + padding: 60px 100px; + max-width: 1134px; + } +} From b3336930ea8088917e07cce1cc0987f3e78d87d7 Mon Sep 17 00:00:00 2001 From: Tomasz Dziezyk Date: Wed, 2 Oct 2024 12:42:07 +0200 Subject: [PATCH 068/159] KAW-7943 Add border radius to image --- blocks/highlight/highlight.css | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/blocks/highlight/highlight.css b/blocks/highlight/highlight.css index cbe7fcc..1dac016 100644 --- a/blocks/highlight/highlight.css +++ b/blocks/highlight/highlight.css @@ -32,6 +32,11 @@ object-fit: cover; width: 100%; height: 100%; + border-radius: 4px; +} + +.highlight.active picture img { + border-radius: 0; } .highlight.block .highlight-slides-wrapper { From 6efda92f5effa2b4a65b2a10820afb820c14f4c1 Mon Sep 17 00:00:00 2001 From: Tomasz Dziezyk Date: Thu, 3 Oct 2024 11:15:59 +0200 Subject: [PATCH 069/159] KAW-8026 Fix sticky image --- blocks/image/image.css | 9 ++++++--- blocks/image/image.js | 19 ++++++++----------- scripts/helpers.js | 2 +- 3 files changed, 15 insertions(+), 15 deletions(-) diff --git a/blocks/image/image.css b/blocks/image/image.css index 2f4499c..2b2bc59 100644 --- a/blocks/image/image.css +++ b/blocks/image/image.css @@ -29,9 +29,12 @@ width: 100vw; margin-left: calc((100vw - 100%) * -1 / 2); aspect-ratio: 16 / 9; - background-repeat: no-repeat; - background-position: 0 0; - background-size: contain; + overflow: hidden; + position: relative; +} + +.block.image.sticky picture { + position: relative; } @media (width >= 768px) { diff --git a/blocks/image/image.js b/blocks/image/image.js index ee0c257..5085b0e 100644 --- a/blocks/image/image.js +++ b/blocks/image/image.js @@ -9,21 +9,18 @@ export default async function decorate(block) { } if (block.classList.contains('sticky')) { - const bgImg = new Image(); const img = block.querySelector('img'); const pictureEl = createOptimizedPicture(img.src, '', false, [{ width: window.innerWidth }]); - const imgUrl = pictureEl.querySelector('img').src; - bgImg.onload = () => { - block.style.backgroundImage = `url(${imgUrl})`; - block.style.aspectRatio = `${bgImg.naturalWidth} / ${bgImg.naturalHeight}`; - }; - bgImg.src = imgUrl; - - block.innerHTML = ''; + block.querySelector('picture').replaceWith(pictureEl); window.addEventListener('scroll', throttle(() => { - const backgroundStyle = block.getBoundingClientRect().top > 0 ? 'scroll' : 'fixed'; - block.style.backgroundAttachment = backgroundStyle; + const { top } = block.getBoundingClientRect(); + + if (top < 0) { + pictureEl.style.top = `${top * -1}px`; + } else { + pictureEl.style.top = 0; + } }), 100); } } diff --git a/scripts/helpers.js b/scripts/helpers.js index d20f139..00ba78c 100644 --- a/scripts/helpers.js +++ b/scripts/helpers.js @@ -120,7 +120,7 @@ export const unwrapDivs = (element) => { export const throttle = (func, limit) => { let inThrottle; - return function (...args) { + return function thrttledFunction(...args) { const context = this; if (!inThrottle) { func.apply(context, args); From 6138c726897472a5548d076fcffa0ef5ce40a447 Mon Sep 17 00:00:00 2001 From: Tomasz Dziezyk Date: Fri, 4 Oct 2024 14:45:03 +0200 Subject: [PATCH 070/159] KAW-7947 Refactor --- scripts/scripts.js | 15 +++++++++------ 1 file changed, 9 insertions(+), 6 deletions(-) diff --git a/scripts/scripts.js b/scripts/scripts.js index 4be6e8e..d6f475a 100644 --- a/scripts/scripts.js +++ b/scripts/scripts.js @@ -240,7 +240,7 @@ export function addAnimateInOut(animateTarget, { }) { const fadeTransitionTime = time; - const animateInOut = (isFadeIn) => { + const animateInOut = (isFadeIn, { afterOut } = {}) => { animateTarget.style.transition = `all ${fadeTransitionTime}ms ease-in-out`; const setStyles = (targetEl, stylesObject) => { @@ -260,6 +260,9 @@ export function addAnimateInOut(animateTarget, { const transitionEndEvent = () => { animateTarget.style.display = ''; animateTarget.removeEventListener('transitionend', transitionEndEvent); + if (afterOut) { + afterOut(); + } }; animateTarget.addEventListener('transitionend', transitionEndEvent); @@ -353,12 +356,12 @@ function addModalHandling() { document.body.classList.remove('modal-visible'); // removing the modal content after the fade out - modalContentAnimation(false); + modalContentAnimation(false, { + afterOut: () => { + modal.classList.add('modal-hidden'); + }, + }); closeButtonAnimation(false); - - setTimeout(() => { - modal.classList.add('modal-hidden'); - }, 3000); }); } From 410cc068960a17a848c5e1cad11f0b03abcc18c7 Mon Sep 17 00:00:00 2001 From: Tomasz Dziezyk Date: Mon, 7 Oct 2024 11:56:59 +0200 Subject: [PATCH 071/159] KAW-7947 Add specification slide change --- blocks/highlight/highlight.js | 74 +------------------------ blocks/specification/specification.css | 21 ++++++- blocks/specification/specification.js | 76 ++++++++++++++++++++++++++ scripts/helpers.js | 72 ++++++++++++++++++++++++ styles/styles.css | 4 ++ 5 files changed, 173 insertions(+), 74 deletions(-) diff --git a/blocks/highlight/highlight.js b/blocks/highlight/highlight.js index cf0326e..6fd7bdc 100644 --- a/blocks/highlight/highlight.js +++ b/blocks/highlight/highlight.js @@ -1,4 +1,4 @@ -import { throttle } from '../../scripts/helpers.js'; +import { preventScroll, throttle } from '../../scripts/helpers.js'; const setScaleForPicture = (block, picture) => { const setScale = () => { @@ -45,78 +45,6 @@ const scrollToSlide = (slidersContainer, slideIndex) => { }); }; -function preventScroll({ moveDown, moveUp }) { - let startX; - let startY; - let isInitPause = true; // pause the moving event for 1s - fix for Firefox - - setTimeout(() => { isInitPause = false; }, 1000); - - const move = throttle((direction) => { - if (isInitPause) { - return; - } - - if (direction === 'down') { - moveDown(); - return; - } - - moveUp(); - }, 1000); - - const touchStart = (event) => { - // Store the starting touch position - startX = event.touches[0].pageX; - startY = event.touches[0].pageY; - document.body.style.overflow = 'hidden'; - }; - - const touchMove = (event) => { - event.preventDefault(); - - // Calculate the distance moved in both directions - const moveX = event.touches[0].pageX - startX; - const moveY = event.touches[0].pageY - startY; - - // Determine direction - if (Math.abs(moveY) > Math.abs(moveX)) { - if (moveY > 0) { - move('up'); - } else { - move('down'); - } - } - }; - - const onWheel = (event) => { - if (event.cancelable) { - event.preventDefault(); - event.stopPropagation(); - } - - document.body.style.overflow = 'hidden'; - - if (event.deltaY > 0) { - move('down'); - } else { - move('up'); - } - }; - - window.addEventListener('touchstart', touchStart, { passive: false }); - window.addEventListener('touchmove', touchMove, { passive: false }); - window.addEventListener('wheel', onWheel, { passive: false }); - - const enableScroll = () => { - window.removeEventListener('touchstart', touchStart, { passive: false }); - window.removeEventListener('touchmove', touchMove, { passive: false }); - window.removeEventListener('wheel', onWheel, { passive: false }); - }; - - return enableScroll; -} - const trapScrollingForSlides = (block, { prevSlide, nextSlide }) => { let enableScoll = null; diff --git a/blocks/specification/specification.css b/blocks/specification/specification.css index 1b1f003..5c66447 100644 --- a/blocks/specification/specification.css +++ b/blocks/specification/specification.css @@ -40,6 +40,25 @@ width: 100%; } +.specification .specification-images { + position: relative; +} + +.specification .specification-images p { + margin: 0; + transition: opacity 300ms linear; +} + +.specification .specification-images p:not(:first-child) { + position: absolute; + top: 0; + left: 0; +} + +.specification .specification-images picture { + display: flex; +} + @media (width >= 768px) { .specification .specification-content { flex-direction: row; @@ -73,4 +92,4 @@ .specification .specification-text-content { width: 398px; } -} \ No newline at end of file +} diff --git a/blocks/specification/specification.js b/blocks/specification/specification.js index 67ebfcd..d720758 100644 --- a/blocks/specification/specification.js +++ b/blocks/specification/specification.js @@ -1,7 +1,10 @@ +import { preventScroll } from '../../scripts/helpers.js'; + export default function decorate(block) { const content = block.querySelector(':scope > div'); content.classList.add('specification-content'); const textContent = block.querySelector(':scope > div > div:first-child'); + const imagesWrapper = block.querySelector(':scope > div > div:nth-child(2)'); const statisticsWrapper = document.createElement('div'); statisticsWrapper.classList.add('specification-statistics'); @@ -22,6 +25,8 @@ export default function decorate(block) { } }); + imagesWrapper.classList.add('specification-images'); + // grouping all of the stats label and values const specificationStatsWrapper = document.createElement('div'); specificationStatsWrapper.classList.add('specification-stats-wrapper'); @@ -36,4 +41,75 @@ export default function decorate(block) { stat.append(valueEl); specificationStatsWrapper.append(stat); }); + + // trapping the scrolling so the user will scroll the next slides of the slider + const trapScrollingForSlides = ({ prevSlide, nextSlide }) => { + let enableScoll = null; + + const observer = new IntersectionObserver((entries) => { + const moveDown = () => { + nextSlide(enableScoll); + document.body.style.overflow = ''; + }; + const moveUp = () => { + prevSlide(enableScoll); + document.body.style.overflow = ''; + }; + + entries.forEach((entry) => { + if (entry.isIntersecting && entry.intersectionRatio >= 0.9) { + if (enableScoll) { + enableScoll(); + } + enableScoll = preventScroll({ moveDown, moveUp }); + } else if (enableScoll) { + enableScoll(); + enableScoll = null; + } + }); + }, { threshold: [0.1, 0.9] }); + + observer.observe(block); + }; + + const getActiveSlideIndex = () => [...block.querySelectorAll('.specification-images > *')] + .findIndex((slide) => slide.classList.contains('active')); + + const scrollToSlide = (slideIndex) => { + [...block.querySelectorAll('.specification-images > *')] + .forEach((el, index) => { + if (slideIndex === index) { + el.style.opacity = '1'; + el.classList.add('active'); + } else { + el.style.opacity = '0'; + el.classList.remove('active'); + } + }); + }; + + const prevSlide = (onNoPreSlide) => { + const activeSlideIndex = getActiveSlideIndex(block); + + if (activeSlideIndex <= 0) { + onNoPreSlide(); + return; + } + + scrollToSlide(activeSlideIndex - 1); + }; + const nextSlide = (onNoNextSlide) => { + const activeSlideIndex = getActiveSlideIndex(block); + const slideCount = block.querySelectorAll('.specification-images > *').length; + + if (activeSlideIndex >= slideCount - 1) { + onNoNextSlide(); + return; + } + + scrollToSlide(activeSlideIndex + 1); + }; + + scrollToSlide(0); + trapScrollingForSlides({ prevSlide, nextSlide }); } diff --git a/scripts/helpers.js b/scripts/helpers.js index 00ba78c..a10d376 100644 --- a/scripts/helpers.js +++ b/scripts/helpers.js @@ -129,3 +129,75 @@ export const throttle = (func, limit) => { } }; }; + +export const preventScroll = ({ moveDown, moveUp }) => { + let startX; + let startY; + let isInitPause = true; // pause the moving event for 1s - fix for Firefox + + setTimeout(() => { isInitPause = false; }, 1000); + + const move = throttle((direction) => { + if (isInitPause) { + return; + } + + if (direction === 'down') { + moveDown(); + return; + } + + moveUp(); + }, 1000); + + const touchStart = (event) => { + // Store the starting touch position + startX = event.touches[0].pageX; + startY = event.touches[0].pageY; + document.body.style.overflow = 'hidden'; + }; + + const touchMove = (event) => { + event.preventDefault(); + + // Calculate the distance moved in both directions + const moveX = event.touches[0].pageX - startX; + const moveY = event.touches[0].pageY - startY; + + // Determine direction + if (Math.abs(moveY) > Math.abs(moveX)) { + if (moveY > 0) { + move('up'); + } else { + move('down'); + } + } + }; + + const onWheel = (event) => { + if (event.cancelable) { + event.preventDefault(); + event.stopPropagation(); + } + + document.body.style.overflow = 'hidden'; + + if (event.deltaY > 0) { + move('down'); + } else { + move('up'); + } + }; + + window.addEventListener('touchstart', touchStart, { passive: false }); + window.addEventListener('touchmove', touchMove, { passive: false }); + window.addEventListener('wheel', onWheel, { passive: false }); + + const enableScroll = () => { + window.removeEventListener('touchstart', touchStart, { passive: false }); + window.removeEventListener('touchmove', touchMove, { passive: false }); + window.removeEventListener('wheel', onWheel, { passive: false }); + }; + + return enableScroll; +}; diff --git a/styles/styles.css b/styles/styles.css index 27750da..1795a4c 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -680,6 +680,10 @@ body.modal-visible { overflow: hidden; } +body.modal-visible > *:not(.modal) { + filter: blur(4px); +} + .modal { --modal-content-animation-start: translateY(calc(100%)); --modal-content-animation-end: translateY(0); From cdd75aa81c96ebdee499fb83d2a20b95d12f947d Mon Sep 17 00:00:00 2001 From: Tomasz Dziezyk Date: Mon, 7 Oct 2024 12:03:47 +0200 Subject: [PATCH 072/159] KAW-7947 Remove unused code --- scripts/scripts.js | 31 -------------------------- styles/styles.css | 54 ---------------------------------------------- 2 files changed, 85 deletions(-) diff --git a/scripts/scripts.js b/scripts/scripts.js index d6f475a..436224f 100644 --- a/scripts/scripts.js +++ b/scripts/scripts.js @@ -132,36 +132,6 @@ export function customDecoreateIcons(main) { decorateIcons(main); } -const animatedHeadings = (main) => { - main.querySelectorAll('.animated-heading').forEach((el) => { - let animatedHeading = el; - - // if the class is added to the section then the first heading - // will be animated one - if (el.classList.contains('section')) { - const heading = el.querySelector('h1, h2, h3, h4, h5, h6'); - - if (heading) { - animatedHeading = heading; - el.classList.remove('animated-heading'); - heading.classList.add('animated-heading'); - } - } - - const observer = new IntersectionObserver((entries) => { - // Step 3: Define the callback function - entries.forEach((entry) => { - if (entry.isIntersecting) { - entry.target.classList.add('animated-heading-visible'); - observer.unobserve(animatedHeading); - } - }); - }); - - observer.observe(animatedHeading); - }); -}; - /** * Decorates the main element. * @param {Element} main The main element @@ -219,7 +189,6 @@ async function loadLazy(doc) { loadHeader(doc.querySelector('header')); loadFooter(doc.querySelector('footer')); - animatedHeadings(main); loadCSS(`${window.hlx.codeBasePath}/styles/lazy-styles.css`); loadFonts(); diff --git a/styles/styles.css b/styles/styles.css index 1795a4c..953120f 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -621,60 +621,6 @@ main .border-top { border-color: transparent !important; } -/* animated heading */ -.animated-heading { - text-align: center; - padding: 180px 0 40px; - margin: 0; - position: relative; -} - -.animated-heading::before { - content: ""; - width: 3px; - height: 10px; - display: block; - background: var(--action-default); - position: absolute; - left: 50%; - transform: translateX(-50%); - top: 150px; - transition: all 200ms ease-in; -} - -.animated-heading.animated-heading-visible::before { - top: 80px; - height: 80px; -} - -@media (width >= 768px) { - .animated-heading { - padding-top: 160px; - } - - .animated-heading::before { - top: 130px; - } - - .animated-heading.animated-heading-visible::before { - top: 60px; - } -} - -@media (width >= 1025px) { - .animated-heading { - padding: 220px 0 60px; - } - - .animated-heading::before { - top: 190px; - } - - .animated-heading.animated-heading-visible::before { - top: 120px; - } -} - /* modal styles */ body.modal-visible { overflow: hidden; From ede5d319dfa1cfeaf3c3a4a870ce04b7a8fbd9ee Mon Sep 17 00:00:00 2001 From: Tomasz Dziezyk Date: Mon, 7 Oct 2024 12:40:05 +0200 Subject: [PATCH 073/159] KAW-7998 Fix text align --- blocks/text-with-image/text-with-image.css | 1 + 1 file changed, 1 insertion(+) diff --git a/blocks/text-with-image/text-with-image.css b/blocks/text-with-image/text-with-image.css index 08c9ba4..d7d77b6 100644 --- a/blocks/text-with-image/text-with-image.css +++ b/blocks/text-with-image/text-with-image.css @@ -29,6 +29,7 @@ display: flex; flex-direction: column; gap: 32px; + justify-content: center; } .text-with-image picture { From f3ed8f10bb0f9c380070d6619d8ac7373ff7956e Mon Sep 17 00:00:00 2001 From: Tomasz Dziezyk Date: Mon, 7 Oct 2024 14:41:43 +0200 Subject: [PATCH 074/159] KAW-7947 Fix loading the modal content --- scripts/scripts.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/scripts/scripts.js b/scripts/scripts.js index 436224f..6779a96 100644 --- a/scripts/scripts.js +++ b/scripts/scripts.js @@ -336,6 +336,7 @@ function addModalHandling() { async function loadPage() { await loadEager(document); + addModalHandling(); await loadLazy(document); loadDelayed(); } @@ -352,4 +353,3 @@ export function getTextLabel(key) { placeholders = await fetchPlaceholders(); loadPage(); -addModalHandling(); From d91b7def92c70319610ac84d1e02a08b4f195905 Mon Sep 17 00:00:00 2001 From: Tomasz Dziezyk Date: Tue, 8 Oct 2024 10:56:01 +0200 Subject: [PATCH 075/159] Revert header path deterining --- blocks/header/header.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/blocks/header/header.js b/blocks/header/header.js index 26e306e..3a6f6a8 100644 --- a/blocks/header/header.js +++ b/blocks/header/header.js @@ -226,8 +226,7 @@ function handleTransparentAndScrolling(nav) { export default async function decorate(block) { // load nav as fragment const navMeta = getMetadata('nav'); - // const navPath = navMeta ? new URL(navMeta, window.location).pathname : '/nav'; - const navPath = '/drafts/tdziezyk/nav'; + const navPath = navMeta ? new URL(navMeta, window.location).pathname : '/nav'; const fragment = await loadFragment(navPath); // decorate nav DOM From d64304b2ad7fdcbfe1e9159f4235abccbb7c7e70 Mon Sep 17 00:00:00 2001 From: Tomasz Dziezyk Date: Tue, 8 Oct 2024 11:53:26 +0200 Subject: [PATCH 076/159] KAW-7947 Fix displaying the modal content --- blocks/specification-table/specification-table.css | 2 +- scripts/scripts.js | 14 +++++++------- styles/styles.css | 12 ++++++++++++ 3 files changed, 20 insertions(+), 8 deletions(-) diff --git a/blocks/specification-table/specification-table.css b/blocks/specification-table/specification-table.css index b844d11..6236436 100644 --- a/blocks/specification-table/specification-table.css +++ b/blocks/specification-table/specification-table.css @@ -1,4 +1,4 @@ -.specification-table { +.specification-table.block { display: flex; flex-direction: column; gap: 32px; diff --git a/scripts/scripts.js b/scripts/scripts.js index 6779a96..82954b5 100644 --- a/scripts/scripts.js +++ b/scripts/scripts.js @@ -259,17 +259,17 @@ function addModalHandling() { const modalContentMap = new Map(); modalLinks.forEach((mLink) => { - const modalContentId = mLink.getAttribute('href').split('modal-')[1]; - const modalContentEl = document.querySelector(`.${modalContentId}`); + const modalContentName = mLink.getAttribute('href').split('/#')[1]; + const modalContentEl = document.querySelector(`.${modalContentName}`); if (modalContentEl) { - modalContentEl.parentElement.remove(); - modalContentMap.set(modalContentId, modalContentEl); + modalContentEl.parentElement.replaceWith(modalContentEl); + modalContentMap.set(modalContentName, modalContentEl); } mLink.addEventListener('click', (event) => { event.preventDefault(); - const modalEvent = new CustomEvent('show-modal', { detail: modalContentId }); + const modalEvent = new CustomEvent('show-modal', { detail: modalContentName }); window.dispatchEvent(modalEvent); }); @@ -293,7 +293,7 @@ function addModalHandling() { window.dispatchEvent(closeModalEvent); }); - const modalContent = document.querySelector('.modal-content'); + const modalContent = document.querySelector('.modal .modal-content'); const closeButton = document.querySelector('.modal-close-button'); const modalXSmallAnimationConfig = { startStyles: { transform: 'var(--modal-content-animation-start)' }, @@ -310,8 +310,8 @@ function addModalHandling() { window.addEventListener('show-modal', (event) => { const elId = event.detail; const content = modalContentMap.get(elId); - const modal = document.querySelector('.modal'); + modalContent.append(content); modal.classList.remove('modal-hidden'); document.body.classList.add('modal-visible'); diff --git a/styles/styles.css b/styles/styles.css index 953120f..ccb94c0 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -626,6 +626,18 @@ body.modal-visible { overflow: hidden; } +/* + Hiding modal content when it is not in the modal yet. + By default the block needs to be added to the body until the js and css + are fetched for the block, but it should not be visible for the user. + Otherwhise (if the block is cutted from the body to early) the js and css + files for block won't load. +*/ +:not(.modal-content) > .block[class^="modal-"], +:not(.modal-content) > .block[class*=" modal-"] { + display: none; +} + body.modal-visible > *:not(.modal) { filter: blur(4px); } From 4970a31b41f81310db6aef6b43685262a76239cf Mon Sep 17 00:00:00 2001 From: Tomasz Dziezyk Date: Tue, 8 Oct 2024 13:31:26 +0200 Subject: [PATCH 077/159] KAW-7947 Improve the scrolling behaviour --- blocks/highlight/highlight.js | 95 ++++++++++++++++++--------- blocks/specification/specification.js | 95 ++++++++++++++++++--------- scripts/helpers.js | 43 ++++++------ 3 files changed, 148 insertions(+), 85 deletions(-) diff --git a/blocks/highlight/highlight.js b/blocks/highlight/highlight.js index 6fd7bdc..4b08077 100644 --- a/blocks/highlight/highlight.js +++ b/blocks/highlight/highlight.js @@ -1,4 +1,4 @@ -import { preventScroll, throttle } from '../../scripts/helpers.js'; +import { isInViewport, preventScroll, throttle } from '../../scripts/helpers.js'; const setScaleForPicture = (block, picture) => { const setScale = () => { @@ -45,37 +45,37 @@ const scrollToSlide = (slidersContainer, slideIndex) => { }); }; -const trapScrollingForSlides = (block, { prevSlide, nextSlide }) => { - let enableScoll = null; +const trapScrollingForSlides = (block, { + hasNextSlide, hasPrevSlide, move, +}) => { + let enableScroll = null; + let prevY = window.scrollY; - const observer = new IntersectionObserver((entries) => { - const moveDown = () => { - nextSlide(enableScoll); - document.body.style.overflow = ''; - }; - const moveUp = () => { - prevSlide(enableScoll); - document.body.style.overflow = ''; - }; + window.addEventListener('scroll', () => { + const hasSlideInDirection = prevY < window.scrollY ? hasNextSlide() : hasPrevSlide(); + prevY = window.scrollY; - entries.forEach((entry) => { - if (entry.isIntersecting && entry.intersectionRatio >= 0.9) { - block.classList.add('active'); - if (enableScoll) { - enableScoll(); - } - enableScoll = preventScroll({ moveDown, moveUp }); - } else { - block.classList.remove('active'); - if (enableScoll) { - enableScoll(); - enableScoll = null; + if (isInViewport(block)) { + block.classList.add('active'); + + if (hasSlideInDirection) { + if (enableScroll) { + // enablingScroll just to make sure that all of the event listener blocking it are removed + // they will be replaced by the preventScroll with new ones + enableScroll(); } - } - }); - }, { threshold: [0.1, 0.9] }); + block.scrollIntoView({ block: 'nearest', behaviour: 'smooth' }); - observer.observe(block); + enableScroll = preventScroll({ move: (direction) => move(direction, enableScroll) }); + } + } else { + block.classList.remove('active'); + if (enableScroll) { + enableScroll(); + enableScroll = null; + } + } + }); }; export default async function decorate(block) { @@ -106,10 +106,22 @@ export default async function decorate(block) { // trapping the scrolling so the user will scroll the next slides of the slider const container = block.querySelector('.highlight-slides-container'); + const hasPrevSlide = () => { + const activeSlideIndex = getActiveSlideIndex(block); + return activeSlideIndex > 0; + }; + + const hasNextSlide = () => { + const activeSlideIndex = getActiveSlideIndex(block); + const slideCount = block.querySelectorAll('.highlight-slide').length; + + return activeSlideIndex < slideCount - 1; + }; + const prevSlide = (onNoPreSlide) => { const activeSlideIndex = getActiveSlideIndex(block); - if (activeSlideIndex <= 0) { + if (!hasPrevSlide()) { onNoPreSlide(); return; } @@ -118,9 +130,8 @@ export default async function decorate(block) { }; const nextSlide = (onNoNextSlide) => { const activeSlideIndex = getActiveSlideIndex(block); - const slideCount = block.querySelectorAll('.highlight-slide').length; - if (activeSlideIndex >= slideCount - 1) { + if (!hasNextSlide()) { onNoNextSlide(); return; } @@ -128,5 +139,25 @@ export default async function decorate(block) { scrollToSlide(container, activeSlideIndex + 1); }; - trapScrollingForSlides(block, { prevSlide, nextSlide }); + const move = throttle((direction, onNoSlide) => { + if (direction === 'up') { + if (!hasPrevSlide()) { + onNoSlide(); + return; + } + + prevSlide(); + } else { + if (!hasNextSlide()) { + onNoSlide(); + return; + } + + nextSlide(); + } + }, 1000); + + trapScrollingForSlides(block, { + hasNextSlide, hasPrevSlide, move, + }); } diff --git a/blocks/specification/specification.js b/blocks/specification/specification.js index d720758..ac0f418 100644 --- a/blocks/specification/specification.js +++ b/blocks/specification/specification.js @@ -1,4 +1,4 @@ -import { preventScroll } from '../../scripts/helpers.js'; +import { isInViewport, preventScroll, throttle } from '../../scripts/helpers.js'; export default function decorate(block) { const content = block.querySelector(':scope > div'); @@ -43,33 +43,35 @@ export default function decorate(block) { }); // trapping the scrolling so the user will scroll the next slides of the slider - const trapScrollingForSlides = ({ prevSlide, nextSlide }) => { - let enableScoll = null; - - const observer = new IntersectionObserver((entries) => { - const moveDown = () => { - nextSlide(enableScoll); - document.body.style.overflow = ''; - }; - const moveUp = () => { - prevSlide(enableScoll); - document.body.style.overflow = ''; - }; - - entries.forEach((entry) => { - if (entry.isIntersecting && entry.intersectionRatio >= 0.9) { - if (enableScoll) { - enableScoll(); + const trapScrollingForSlides = ({ hasNextSlide, hasPrevSlide, move }) => { + let enableScroll = null; + let prevY = window.scrollY; + + window.addEventListener('scroll', () => { + const hasSlideInDirection = prevY < window.scrollY ? hasNextSlide() : hasPrevSlide(); + prevY = window.scrollY; + + if (isInViewport(block)) { + block.classList.add('active'); + + if (hasSlideInDirection) { + if (enableScroll) { + // enablingScroll just to make sure that all of the event listener + // blocking it are removed they will be replaced by the preventScroll with new ones + enableScroll(); } - enableScoll = preventScroll({ moveDown, moveUp }); - } else if (enableScoll) { - enableScoll(); - enableScoll = null; - } - }); - }, { threshold: [0.1, 0.9] }); + block.scrollIntoView({ block: 'nearest', behaviour: 'smooth' }); - observer.observe(block); + enableScroll = preventScroll({ move: (direction) => move(direction, enableScroll) }); + } + } else { + block.classList.remove('active'); + if (enableScroll) { + enableScroll(); + enableScroll = null; + } + } + }); }; const getActiveSlideIndex = () => [...block.querySelectorAll('.specification-images > *')] @@ -88,10 +90,22 @@ export default function decorate(block) { }); }; + const hasPrevSlide = () => { + const activeSlideIndex = getActiveSlideIndex(); + return activeSlideIndex > 0; + }; + + const hasNextSlide = () => { + const activeSlideIndex = getActiveSlideIndex(); + const slideCount = block.querySelectorAll('.specification-images > *').length; + + return activeSlideIndex < slideCount - 1; + }; + const prevSlide = (onNoPreSlide) => { - const activeSlideIndex = getActiveSlideIndex(block); + const activeSlideIndex = getActiveSlideIndex(); - if (activeSlideIndex <= 0) { + if (!hasPrevSlide()) { onNoPreSlide(); return; } @@ -99,10 +113,9 @@ export default function decorate(block) { scrollToSlide(activeSlideIndex - 1); }; const nextSlide = (onNoNextSlide) => { - const activeSlideIndex = getActiveSlideIndex(block); - const slideCount = block.querySelectorAll('.specification-images > *').length; + const activeSlideIndex = getActiveSlideIndex(); - if (activeSlideIndex >= slideCount - 1) { + if (!hasNextSlide()) { onNoNextSlide(); return; } @@ -110,6 +123,24 @@ export default function decorate(block) { scrollToSlide(activeSlideIndex + 1); }; + const move = throttle((direction, onNoSlide) => { + if (direction === 'up') { + if (!hasPrevSlide()) { + onNoSlide(); + return; + } + + prevSlide(); + } else { + if (!hasNextSlide()) { + onNoSlide(); + return; + } + + nextSlide(); + } + }, 1000); + scrollToSlide(0); - trapScrollingForSlides({ prevSlide, nextSlide }); + trapScrollingForSlides({ hasNextSlide, hasPrevSlide, move }); } diff --git a/scripts/helpers.js b/scripts/helpers.js index a10d376..c36b9b9 100644 --- a/scripts/helpers.js +++ b/scripts/helpers.js @@ -130,35 +130,21 @@ export const throttle = (func, limit) => { }; }; -export const preventScroll = ({ moveDown, moveUp }) => { +export const preventScroll = ({ move }) => { let startX; let startY; - let isInitPause = true; // pause the moving event for 1s - fix for Firefox - - setTimeout(() => { isInitPause = false; }, 1000); - - const move = throttle((direction) => { - if (isInitPause) { - return; - } - - if (direction === 'down') { - moveDown(); - return; - } - - moveUp(); - }, 1000); const touchStart = (event) => { // Store the starting touch position startX = event.touches[0].pageX; startY = event.touches[0].pageY; - document.body.style.overflow = 'hidden'; }; const touchMove = (event) => { - event.preventDefault(); + if (event.cancelable) { + event.preventDefault(); + event.stopPropagation(); + } // Calculate the distance moved in both directions const moveX = event.touches[0].pageX - startX; @@ -176,12 +162,11 @@ export const preventScroll = ({ moveDown, moveUp }) => { const onWheel = (event) => { if (event.cancelable) { + console.log('cancelable'); event.preventDefault(); event.stopPropagation(); } - document.body.style.overflow = 'hidden'; - if (event.deltaY > 0) { move('down'); } else { @@ -191,13 +176,29 @@ export const preventScroll = ({ moveDown, moveUp }) => { window.addEventListener('touchstart', touchStart, { passive: false }); window.addEventListener('touchmove', touchMove, { passive: false }); + window.addEventListener('wheel', onWheel, { passive: false, capture: true }); window.addEventListener('wheel', onWheel, { passive: false }); const enableScroll = () => { + console.log('remove events listeners'); window.removeEventListener('touchstart', touchStart, { passive: false }); window.removeEventListener('touchmove', touchMove, { passive: false }); + window.removeEventListener('wheel', onWheel, { passive: false, capture: true }); window.removeEventListener('wheel', onWheel, { passive: false }); }; return enableScroll; }; + +export const isInViewport = (element) => { + const rect = element.getBoundingClientRect(); + const windowHeight = (window.visualViewport || window).height; + const windowWidth = (window.visualViewport || window).width; + + return ( + rect.top >= 0 + && rect.left >= 0 + && rect.bottom <= windowHeight + && rect.right <= windowWidth + ); +}; From f7a623ab315de8050593127ac6c7c738dd0c8174 Mon Sep 17 00:00:00 2001 From: Tomasz Dziezyk Date: Tue, 8 Oct 2024 13:32:12 +0200 Subject: [PATCH 078/159] KAW-7947 Remove unused code --- scripts/helpers.js | 4 ---- 1 file changed, 4 deletions(-) diff --git a/scripts/helpers.js b/scripts/helpers.js index c36b9b9..99f5d9f 100644 --- a/scripts/helpers.js +++ b/scripts/helpers.js @@ -162,7 +162,6 @@ export const preventScroll = ({ move }) => { const onWheel = (event) => { if (event.cancelable) { - console.log('cancelable'); event.preventDefault(); event.stopPropagation(); } @@ -176,14 +175,11 @@ export const preventScroll = ({ move }) => { window.addEventListener('touchstart', touchStart, { passive: false }); window.addEventListener('touchmove', touchMove, { passive: false }); - window.addEventListener('wheel', onWheel, { passive: false, capture: true }); window.addEventListener('wheel', onWheel, { passive: false }); const enableScroll = () => { - console.log('remove events listeners'); window.removeEventListener('touchstart', touchStart, { passive: false }); window.removeEventListener('touchmove', touchMove, { passive: false }); - window.removeEventListener('wheel', onWheel, { passive: false, capture: true }); window.removeEventListener('wheel', onWheel, { passive: false }); }; From a5f74fd1079749441d4f89693abd47c67005163f Mon Sep 17 00:00:00 2001 From: Tomasz Dziezyk Date: Wed, 9 Oct 2024 12:04:17 +0200 Subject: [PATCH 079/159] KAW-8012 Add feature carousel --- blocks/feature/feature.css | 132 +++++++++++++++++++++++++++++++++++++ blocks/feature/feature.js | 92 ++++++++++++++++++++++++++ styles/styles.css | 2 +- 3 files changed, 225 insertions(+), 1 deletion(-) create mode 100644 blocks/feature/feature.css create mode 100644 blocks/feature/feature.js diff --git a/blocks/feature/feature.css b/blocks/feature/feature.css new file mode 100644 index 0000000..f95cab4 --- /dev/null +++ b/blocks/feature/feature.css @@ -0,0 +1,132 @@ +.feature.block { + position: relative; +} + +.feature .feature-slides { + display: grid; +} + +.feature .feature-slide { + display: flex; + flex-direction: column; + gap: 32px; + grid-area: 1 / 1 / 2 / 2; + transition: opacity 500ms ease-in-out; +} + +.feature .feature-image { + width: 100vw; + margin-left: calc((100vw - 100%) / -2); +} + +.feature .feature-image picture { + display: flex; +} + +.feature .feature-image img { + width: 100%; + height: auto; +} + +.feature .feature-slides-nav { + display: inline-flex; + flex-direction: column; + gap: 16px; + position: absolute; + right: 0; + top: calc(75vw + 40px); + margin-right: calc(var(--section-x-padding) * -1); +} + +.feature .feature-slide-nav-item { + width: 32px; + height: 32px; + display: flex; + align-items: center; + justify-content: center; +} + +.feature-slide-nav-dot { + width: 6px; + height: 6px; + display: block; + border: solid 1px var(--grey-90); + color: transparent; + overflow: hidden; + border-radius: 50%; +} + +.feature .active .feature-slide-nav-dot { + width: 20px; + height: 20px; + background: var(--black); + border-radius: 50%; + border-width: 0; +} + +.feature .feature-text { + padding-right: 26px; +} + +.feature .feature-text .h5 { + margin-bottom: 24px; +} + +@media (width >= 768px) { + .feature .feature-slide { + flex-direction: row; + gap: 48px; + } + + .feature .feature-image { + width: calc(50vw - 12px); + } + + .feature .feature-text { + width: 251px; + padding-right: 0; + } + + .feature .feature-slides-nav { + width: 34px; + top: 0; + margin-right: 0; + z-index: 1; + } + + .feature .feature-slide-nav-item { + width: 34px; + height: 34px; + } + + .feature .feature-slide-nav-item.active span { + width: 34px; + height: 34px; + color: var(--white); + display: flex; + align-items: center; + justify-content: center; + } +} + +@media (width >= 1025px) { + .feature .feature-slide { + align-items: center; + gap: 72px; + } + + .feature .feature-text { + width: 330px; + } + + .feature .feature-slides-nav { + top: 50%; + translate: 0 -50%; + } +} + +@media (width >= 1440px) { + .feature .feature-text { + width: 450px; + } +} diff --git a/blocks/feature/feature.js b/blocks/feature/feature.js new file mode 100644 index 0000000..2ec8d49 --- /dev/null +++ b/blocks/feature/feature.js @@ -0,0 +1,92 @@ +const createNavigation = (block, slideCount, onClick) => { + const slidesDots = (new Array(slideCount)) + .fill(0) + .map((_, index) => { + const navItem = document.createElement('button'); + navItem.classList.add('feature-slide-nav-item'); + + if (!index) { + navItem.classList.add('active'); + } + + const dotEl = document.createElement('span'); + dotEl.classList.add('feature-slide-nav-dot'); + dotEl.textContent = index + 1; + + navItem.append(dotEl); + navItem.addEventListener('click', () => onClick(index)); + + return navItem; + }); + + const wrapper = document.createElement('div'); + wrapper.classList.add('feature-slides-nav'); + wrapper.append(...slidesDots); + block.append(wrapper); +}; + +export default async function decorate(block) { + const slideCount = block.querySelectorAll(':scope > div').length; + const slideWrapper = document.createElement('div'); + slideWrapper.classList.add('feature-slides'); + + block.querySelectorAll(':scope > div').forEach((el, index) => { + if (!index) { + el.replaceWith(slideWrapper); + } + + el.classList.add('feature-slide'); + slideWrapper.append(el); + }); + + block.querySelectorAll('.feature-slides > div > div').forEach((column) => { + const type = column.querySelector('picture') ? 'image' : 'text'; + column.classList.add(`feature-${type}`); + }); + + const headings = block.querySelectorAll('h1, h2, h3, h4, h5, h6'); + + headings.forEach((heading) => { + heading.classList.add('h5'); + }); + + const slides = block.querySelectorAll('.feature-slides > div'); + const setActiveSlide = (newActiveIndex) => { + const navItems = [...block.querySelectorAll('.feature-slide-nav-item')]; + + slides.forEach((slide, index) => { + if (newActiveIndex === index) { + slide.style.opacity = '1'; + slide.style.zIndex = '1'; + navItems[index].classList.add('active'); + } else { + slide.style.opacity = '0'; + slide.style.zIndex = '0'; + navItems[index].classList.remove('active'); + } + }); + }; + + createNavigation(block, slideCount, setActiveSlide); + setActiveSlide(0); + + // making sure that the slide gets enought space to display slide navigation + const onResize = () => { + const firstTextEl = block.querySelector('.feature-text'); + const navEl = block.querySelector('.feature-slides-nav'); + const minHeight = window.getComputedStyle(navEl).height; + + firstTextEl.style.minHeight = `calc(${minHeight} + 20px)`; + }; + + const interval = setInterval(() => { + // initial calculaton when the page is ready + // (EDS adds the appear class when the page is ready) + if (document.body.classList.contains('appear')) { + clearInterval(interval); + onResize(); + } + }, 100); + + window.addEventListener('resize', onResize); +} diff --git a/styles/styles.css b/styles/styles.css index 674f162..accec6b 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -21,7 +21,7 @@ /* section paddings */ --section-y-padding: 40px; - --section-x-padding: 15px; + --section-x-padding: 20px; /* v2 */ --white: #fff; From 15b7b906ba9c7422954983944f45bf8f752b03f1 Mon Sep 17 00:00:00 2001 From: Tomasz Dziezyk Date: Wed, 9 Oct 2024 14:26:36 +0200 Subject: [PATCH 080/159] KAW-7947 Fix spacing --- blocks/specification-table/specification-table.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/blocks/specification-table/specification-table.css b/blocks/specification-table/specification-table.css index 6236436..5139456 100644 --- a/blocks/specification-table/specification-table.css +++ b/blocks/specification-table/specification-table.css @@ -1,7 +1,7 @@ .specification-table.block { display: flex; flex-direction: column; - gap: 32px; + gap: 24px; } .specification-table p, From c1520b34d0b997382af87800b001a0c5e98dbaa1 Mon Sep 17 00:00:00 2001 From: Ioana Iordache Date: Wed, 9 Oct 2024 23:35:44 +0200 Subject: [PATCH 081/159] KAW-7944: vehicle selector component --- blocks/news-stories/news-stories.css | 4 - blocks/vehicle-selector/vehicle-selector.css | 260 +++++++++++++++++++ blocks/vehicle-selector/vehicle-selector.js | 236 +++++++++++++++++ scripts/helpers.js | 28 ++ scripts/motion-helper.js | 67 +++++ styles/styles.css | 12 + 6 files changed, 603 insertions(+), 4 deletions(-) create mode 100644 blocks/vehicle-selector/vehicle-selector.css create mode 100644 blocks/vehicle-selector/vehicle-selector.js create mode 100644 scripts/motion-helper.js diff --git a/blocks/news-stories/news-stories.css b/blocks/news-stories/news-stories.css index 0f3d854..f1122bf 100644 --- a/blocks/news-stories/news-stories.css +++ b/blocks/news-stories/news-stories.css @@ -28,10 +28,6 @@ margin-bottom: 24px; } -.news-stories .news-stories-card-body .icon-arrow-right { - display: inline-flex; -} - .news-stories .news-stories-card-image { line-height: 0; } diff --git a/blocks/vehicle-selector/vehicle-selector.css b/blocks/vehicle-selector/vehicle-selector.css new file mode 100644 index 0000000..4aa2c4b --- /dev/null +++ b/blocks/vehicle-selector/vehicle-selector.css @@ -0,0 +1,260 @@ +/* stylelint-disable no-descending-specificity */ +/* stylelint-disable selector-class-pattern */ +@keyframes vehicle-entry { + 0% { + transform: translateX(100%); + opacity: 0; + } + + 25% { + opacity: 1; + } + + 100% { + transform: translateX(0); + } +} + +/* Full width block */ +body .section.vehicle-selector-container .vehicle-selector-wrapper { + margin: 0; + padding: 0; + min-width: 100%; +} + +main .section.vehicle-selector-container { + padding: 0; +} + +.section .title-wrapper { + padding-inline: var(--section-x-padding); +} + +/* End Full width block */ + +.vehicle-selector__images-container, +.vehicle-selector__description-container { + display: flex; + flex-flow: row nowrap; + margin: 0; + padding-left: 0; +} + +.vehicle-selector__description-container { + order: 2; + overflow: hidden; +} + +.vehicle-selector__images-container { + align-items: flex-end; + gap: 24px; + overflow: scroll hidden; + scroll-behavior: smooth; + scroll-snap-type: x mandatory; + scrollbar-width: none; +} + +.vehicle-selector__images-container::-webkit-scrollbar { + display: none; +} + +.vehicle-selector__image-item { + flex: none; + max-width: var(--vehicle-lineup-img-width); + scroll-snap-align: center; + text-align: center; +} + +.vehicle-selector__image-item picture { + display: block; + animation-duration: 1s; + animation-delay: 0.5s; + animation-name: vehicle-entry; + animation-timing-function: ease-in; +} + +.vehicle-selector__image-item:first-child { + margin-left: 20vw; +} + +.vehicle-selector__images-container::after { + content: ''; + display: block; + flex: 0 0 20vw; + min-height: 1px; /* In this case, Safari doesn't render element properly without height */ +} + +.vehicle-selector__image-item img { + aspect-ratio: 16/9; + max-height: 80vh; + width: auto; +} + +.vehicle-selector__content { + margin: 0 auto 32px; + text-align: center; + width: 90%; +} + +.vehicle-selector__desc-item { + display: grid; + gap: 24px; + flex: none; + opacity: 0; + width: 100%; + grid-template-columns: repeat(2, 1fr); + grid-template-rows: auto; + padding-inline: 20px; + + /* fadeout */ + transition: opacity var(--duration-medium) var(--easing-exit); +} + +.vehicle-selector__desc-item.active { + opacity: 1; + transition: opacity 0.5s var(--easing-entrance) var(--duration-medium); +} + +.vehicle-selector__text { + display: flex; + flex-direction: column; + text-wrap: balance; +} + +.vehicle-selector__text * { + margin: 0; +} + +.vehicle-selector__text p:not(.button-container) { + margin-bottom: 6px; + color: var(--grey-60) +} + +.vehicle-selector__text:has(.button-container) { + margin-top: auto; +} + +.vehicle-selector .button-container { + margin: 16px 0 0; +} + +/* Navigation */ +.vehicle-selector__navigation::-webkit-scrollbar { + display: none; +} + +ul.vehicle-selector__navigation { + display: flex; + gap: 30px; + flex-flow: row nowrap; + list-style: none; + margin: 0; + order: 1; + overflow: auto; + padding: 10px 32px; + position: relative; + scrollbar-width: none; +} + +.vehicle-selector__navigation::before, +.vehicle-selector__navigation::after { + content: ''; + margin: auto; +} + +.vehicle-selector__navigation button { + color: var(--grey-60); + line-height: 100%; + margin: 0; +} + +.vehicle-selector__navigation button:focus-visible { + color: var(--action-default); +} + +.vehicle-selector__navigation-item.active button { + color: var(--action-default); +} + +/* Arrow controls */ +.vehicle-selector__slider-wrapper { + position: relative; +} + +.vehicle-selector__arrow-controls { + display: none; + margin: 0; +} + +.vehicle-selector__arrow-controls li { + align-items: center; + display: flex; + height: 100%; + left: 10%; + position: absolute; + top: 0; +} + +.vehicle-selector__arrow-controls li:last-child { + left: auto; + right: 10%; +} + +.vehicle-selector__arrow-controls button { + background-color: var(--white); + border-radius: 50%; + border: 1px solid var(--action-default); + font-size: 0; + line-height: 0; + margin: 0; + padding: 12px; + position: relative; + opacity: 0; + transition: opacity var(--duration-small) var(--easing-standard); +} + +.vehicle-selector__arrow-controls button:hover { + box-shadow: 0 0 12px 2px rgb(77 77 77 / 20%); +} + +.vehicle-selector__arrow-controls button:active { + box-shadow: 0 0 12px 2px rgb(77 77 77 / 20%); +} + +.vehicle-selector__arrow-controls button:focus-visible { + outline: 2px solid var(--action-focus); + outline-offset: 1px; +} + +.vehicle-selector__slider-wrapper:hover .vehicle-selector__arrow-controls button, +.vehicle-selector__arrow-controls button:focus-visible, /* stylelint-disable-line no-descending-specificity */ +.vehicle-selector__arrow-controls:focus-within button { + opacity: 1; +} + +@media screen and (width >= 768px) { + .vehicle-selector__arrow-controls { + display: block; + } + + .vehicle-selector__desc-item { + grid-template-columns: repeat(4, 1fr); + padding-inline: 30px; + } + + ul.vehicle-selector__navigation { + gap: 60px; + } +} + +@media screen and (width >= 1024px) { + .vehicle-selector__desc-item { + padding-inline: 100px; + } +} + +@media screen and (width >= 1440px) { + .vehicle-selector__desc-item { + padding-left: 200px; + } +} diff --git a/blocks/vehicle-selector/vehicle-selector.js b/blocks/vehicle-selector/vehicle-selector.js new file mode 100644 index 0000000..05b1be7 --- /dev/null +++ b/blocks/vehicle-selector/vehicle-selector.js @@ -0,0 +1,236 @@ +/* eslint-disable max-len */ +import { createElement } from '../../scripts/helpers.js'; +import { smoothScrollHorizontal } from '../../scripts/motion-helper.js'; + +const blockName = 'vehicle-selector'; + +function stripEmptyTags(main, child) { + if (child !== main && child.innerHTML.trim() === '') { + const parent = child.parentNode; + child.remove(); + stripEmptyTags(main, parent); + } +} + +function buildTabNavigation(tabItems, clickHandler) { + const tabNavigation = createElement('ul', { classes: `${blockName}__navigation` }); + const navigationLine = createElement('li', { classes: `${blockName}__navigation-line` }); + + tabItems.forEach((tabItem, i) => { + const listItem = createElement('li', { classes: `${blockName}__navigation-item` }); + const button = createElement('button'); + button.classList.add('h5'); + button.addEventListener('click', () => clickHandler(i)); + // TODO make surer i target the right heading + const tabTitle = tabItem.querySelector('h1,h2,h3,h4,h5,h6'); + button.innerText = tabTitle.innerText; + tabTitle.remove(); + + listItem.append(button); + tabNavigation.append(listItem); + }); + + tabNavigation.append(navigationLine); + + return tabNavigation; +} + +const updateActiveItem = (index) => { + const images = document.querySelector(`.${blockName}__images-container`); + const descriptions = document.querySelector(`.${blockName}__description-container`); + const navigation = document.querySelector(`.${blockName}__navigation`); + + [images, descriptions, navigation].forEach((c) => c.querySelectorAll('.active').forEach((i) => { + i.classList.remove('active'); + + // Remove tabindex from previously active items + i.querySelectorAll('a').forEach((link) => link.setAttribute('tabindex', '-1')); + })); + + images.children[index].classList.add('active'); + descriptions.children[index].classList.add('active'); + navigation.children[index].classList.add('active'); + + // Make links of current item are accessible by keyboard + descriptions.children[index].setAttribute('aria-hidden', 'false'); + descriptions.children[index].querySelectorAll('a').forEach((link) => link.setAttribute('tabindex', '0')); + + // Center navigation item + const navigationActiveItem = navigation.querySelector('.active'); + + if (navigation && navigationActiveItem) { + const { clientWidth: itemWidth, offsetLeft } = navigationActiveItem; + // Calculate the scroll position to center the active item + const scrollPosition = offsetLeft - (navigation.clientWidth - itemWidth) / 2; + navigation.scrollTo({ + left: scrollPosition, + behavior: 'smooth', + }); + } + + // Update description position + const descriptionWidth = descriptions.offsetWidth; + + setTimeout(() => { + descriptions.scrollTo({ + left: descriptionWidth * index, + behavior: 'smooth', + }); + }, 50); +}; + +const listenScroll = (carousel) => { + const imageLoadPromises = Array.from(carousel.querySelectorAll('picture > img')) + .filter((img) => !img.complete) + .map((img) => new Promise((resolve) => { + img.addEventListener('load', resolve); + })); + + Promise.all(imageLoadPromises).then(() => { + const elements = carousel.querySelectorAll(':scope > *'); + + const io = new IntersectionObserver((entries) => { + entries.forEach((entry) => { + if (entry.isIntersecting && entry.intersectionRatio >= 0.9) { + const activeItem = entry.target; + const currentIndex = Array.from(activeItem.parentNode.children).indexOf(activeItem); + updateActiveItem(currentIndex); + } + }); + }, { + root: carousel, + threshold: 0.9, + }); + + elements.forEach((el) => io.observe(el)); + + // Force to go to the first item on load + carousel.scrollTo({ + left: 0, + behavior: 'instant', + }); + }); +}; + +const setCarouselPosition = (carousel, index) => { + const scrollOffset = carousel.firstElementChild.getBoundingClientRect().width + 24; + const targetX = index * scrollOffset; + + smoothScrollHorizontal(carousel, targetX, 1200); +}; + +const navigate = (carousel, direction) => { + if (carousel.classList.contains('is-animating')) return; + + const activeItem = carousel.querySelector(`.${blockName}__image-item.active`); + let index = [...activeItem.parentNode.children].indexOf(activeItem); + if (direction === 'left') { + index -= 1; + if (index === -1) { + index = carousel.childElementCount - 1; + } + } else { + index += 1; + if (index > carousel.childElementCount - 1) { + index = 0; + } + } + + setCarouselPosition(carousel, index); +}; + +const createArrowControls = (carousel) => { + const arrowControls = createElement('ul', { classes: [`${blockName}__arrow-controls`] }); + const arrows = document.createRange().createContextualFragment(` +
  • + +
    • +
  • + +
    • + `); + arrowControls.append(...arrows.children); + carousel.insertAdjacentElement('beforebegin', arrowControls); + const [prevButton, nextButton] = arrowControls.querySelectorAll(':scope button'); + prevButton.addEventListener('click', () => navigate(carousel, 'left')); + nextButton.addEventListener('click', () => navigate(carousel, 'right')); +}; + +export default function decorate(block) { + const tabItems = block.querySelectorAll(':scope > div > div:nth-child(1)'); + + const descriptionContainer = createElement('div', { classes: `${blockName}__description-container` }); + const descriptionItems = block.querySelectorAll(':scope > div > div:nth-child(3)'); + descriptionItems.forEach((item) => { + item.classList.add(`${blockName}__desc-item`); + descriptionContainer.appendChild(item); + }); + block.appendChild(descriptionContainer); + + const imagesWrapper = createElement('div', { classes: `${blockName}__slider-wrapper` }); + const imagesContainer = createElement('div', { classes: `${blockName}__images-container` }); + descriptionContainer.parentNode.prepend(imagesWrapper); + imagesWrapper.appendChild(imagesContainer); + + const tabNavigation = buildTabNavigation(tabItems, (index) => { + setCarouselPosition(imagesContainer, index); + }); + + // Arrows + createArrowControls(imagesContainer); + + block.prepend(tabNavigation); + + const allDivs = block.querySelectorAll(':scope > div'); + + // Filter only the empty divs (no classes and no content) + const imageContainers = Array.from(allDivs).filter((div) => !div.classList.length); + + tabItems.forEach((tabItem, i) => { + // Create div for image and append inside image div container + const picture = imageContainers[i].querySelector('picture'); + const imageItem = createElement('div', { classes: `${blockName}__image-item` }); + imageItem.appendChild(picture); + imagesContainer.appendChild(imageItem); + + // Remove empty tags + block.querySelectorAll('p, div').forEach((item) => { + stripEmptyTags(tabItem, item); + }); + + const headings = descriptionItems[i].querySelectorAll('h1, h2, h3, h4, h5, h6'); + headings.forEach((heading) => { + heading.classList.add('h6'); + }); + + const descItem = descriptionItems[i].querySelectorAll('p'); + descItem.forEach((element) => { + const currentContainer = createElement('div', { classes: `${blockName}__text` }); + element.parentNode.appendChild(currentContainer); + let nextElement = element.nextElementSibling; + while (nextElement && nextElement.classList.contains('h6')) { + currentContainer.appendChild(nextElement); + nextElement = element.nextElementSibling; + } + currentContainer.insertAdjacentElement('afterbegin', element); + }); + }); + + // Update the button indicator on scroll + listenScroll(imagesContainer); + + // Update text position + navigation line when page is resized + window.addEventListener('resize', () => { + const activeItem = imagesContainer.querySelector(`.${blockName}__image-item.active`); + const index = [...activeItem.parentNode.children].indexOf(activeItem); + updateActiveItem(index); + }); +} diff --git a/scripts/helpers.js b/scripts/helpers.js index 00ba78c..be45cc7 100644 --- a/scripts/helpers.js +++ b/scripts/helpers.js @@ -129,3 +129,31 @@ export const throttle = (func, limit) => { } }; }; + +/** + * Create an element with the given id and classes. + * @param {string} tagName the tag + * @param {Object} options the element options + * @param {string[]|string} [options.classes=[]] the class or classes to add + * @param {Object} [options.props={}] any other attributes to add to the element + * @returns {HTMLElement} the element + */ +export function createElement(tagName, options = {}) { + const { classes = [], props = {} } = options; + const elem = document.createElement(tagName); + const isString = typeof classes === 'string'; + if (classes || (isString && classes !== '') || (!isString && classes.length > 0)) { + const classesArr = isString ? [classes] : classes; + elem.classList.add(...classesArr); + } + if (!isString && classes.length === 0) elem.removeAttribute('class'); + + if (props) { + Object.keys(props).forEach((propName) => { + const value = propName === props[propName] ? '' : props[propName]; + elem.setAttribute(propName, value); + }); + } + + return elem; +} diff --git a/scripts/motion-helper.js b/scripts/motion-helper.js new file mode 100644 index 0000000..a2c2046 --- /dev/null +++ b/scripts/motion-helper.js @@ -0,0 +1,67 @@ +export function disableScrollSnap(element) { + element.style.scrollSnapType = 'none'; + element.style.scrollBehavior = 'auto'; +} + +export function enableScrollSnap(element) { + // Reverts it back to its original value (or stylesheet value). + element.style.scrollSnapType = ''; + element.style.scrollBehavior = ''; +} + +export const smoothScrollHorizontal = (element, targetX, duration) => { + const start = element.scrollLeft; + const timeStart = new Date().getTime(); + const scrollingClass = 'is-animating'; // Class to be added/removed + + function cubicBezier(x) { + const p0 = { x: 0, y: 0 }; + const p1 = { x: 0, y: 0 }; + const p2 = { x: 0, y: 1 }; + const p3 = { x: 1, y: 1 }; + + // Find the t value for the given x in Bezier curve + let t = x; + for (let i = 0; i < 5; i += 1) { + const xT = ((1 - t) ** 3) * p0.x + + 3 * ((1 - t) ** 2) * t * p1.x + + 3 * (1 - t) * (t ** 2) * p2.x + + (t ** 3) * p3.x; + + const difference = xT - x; + t -= difference / 2; + } + + // Return the y value for the computed t + return ((1 - t) ** 3) * p0.y + + 3 * ((1 - t) ** 2) * t * p1.y + + 3 * (1 - t) * (t ** 2) * p2.y + + (t ** 3) * p3.y; + } + + const ease = (time, startValue, changeInValue, easeDuration) => { + const progress = time / easeDuration; + const easingFactor = cubicBezier(progress); + return startValue + easingFactor * changeInValue; + }; + + function animation() { + const timeCurrent = new Date().getTime(); + const timeElapsed = timeCurrent - timeStart; + + const nextX = ease(timeElapsed, start, targetX - start, duration); + element.scrollLeft = nextX; + + if (timeElapsed < duration) { + requestAnimationFrame(animation); + } else { + element.scrollLeft = targetX; + enableScrollSnap(element); // Re-enable scroll snap after the animation completes + element.classList.remove(scrollingClass); + } + } + + disableScrollSnap(element); // Disable scroll snap before starting the animation + element.classList.add(scrollingClass); + requestAnimationFrame(animation); +}; diff --git a/styles/styles.css b/styles/styles.css index 674f162..6dbb529 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -47,6 +47,14 @@ /* z indexes */ --z-index-header: 2; + /* vehicle selector */ + --vehicle-lineup-img-width: 60%; + --duration-medium: 240ms; + --easing-entrance: cubic-bezier(0, 0, 0.4, 1); + --easing-exit: cubic-bezier(0.2, 0, 1, 1); + --duration-small: 160ms; + --easing-standard: cubic-bezier(0.2, 0, 0.1, 1); + /* old variables */ --text-red: var(--action-default); --link-color: var(--action-default); @@ -347,6 +355,10 @@ button:disabled:hover { border: none; } +a.button span[class^='icon'] { + display: inline-flex; +} + a.button.primary:any-link, button.primary, a.button.secondary:any-link, From 9b7446bb1d83602b4c55b64d7f8103893238bfe3 Mon Sep 17 00:00:00 2001 From: Ioana Iordache Date: Thu, 10 Oct 2024 14:57:47 +0200 Subject: [PATCH 082/159] KAW-7944: vehicle selector updates --- blocks/title/title.css | 5 ++ blocks/vehicle-selector/vehicle-selector.css | 49 ++++++++----------- blocks/vehicle-selector/vehicle-selector.js | 50 ++++++++++++-------- scripts/helpers.js | 8 ++++ scripts/scripts.js | 2 +- 5 files changed, 64 insertions(+), 50 deletions(-) diff --git a/blocks/title/title.css b/blocks/title/title.css index 210af2d..364a1de 100644 --- a/blocks/title/title.css +++ b/blocks/title/title.css @@ -22,6 +22,11 @@ align-items: center; } +.title.center { + margin-inline: auto; + text-align: center; +} + .vertical-line-wrapper { height: 80px; width: 2px; diff --git a/blocks/vehicle-selector/vehicle-selector.css b/blocks/vehicle-selector/vehicle-selector.css index 4aa2c4b..f59d65b 100644 --- a/blocks/vehicle-selector/vehicle-selector.css +++ b/blocks/vehicle-selector/vehicle-selector.css @@ -15,23 +15,6 @@ } } -/* Full width block */ -body .section.vehicle-selector-container .vehicle-selector-wrapper { - margin: 0; - padding: 0; - min-width: 100%; -} - -main .section.vehicle-selector-container { - padding: 0; -} - -.section .title-wrapper { - padding-inline: var(--section-x-padding); -} - -/* End Full width block */ - .vehicle-selector__images-container, .vehicle-selector__description-container { display: flex; @@ -90,12 +73,6 @@ main .section.vehicle-selector-container { width: auto; } -.vehicle-selector__content { - margin: 0 auto 32px; - text-align: center; - width: 90%; -} - .vehicle-selector__desc-item { display: grid; gap: 24px; @@ -125,17 +102,15 @@ main .section.vehicle-selector-container { margin: 0; } -.vehicle-selector__text p:not(.button-container) { +.vehicle-selector__text h4 { margin-bottom: 6px; - color: var(--grey-60) -} - -.vehicle-selector__text:has(.button-container) { - margin-top: auto; + color: var(--grey-60); + font-size: 14px; + line-height: 150%; } .vehicle-selector .button-container { - margin: 16px 0 0; + margin: auto 0 0; } /* Navigation */ @@ -168,6 +143,11 @@ ul.vehicle-selector__navigation { margin: 0; } + +.vehicle-selector__navigation button:hover { + color: var(--action-hover); +} + .vehicle-selector__navigation button:focus-visible { color: var(--action-default); } @@ -176,6 +156,10 @@ ul.vehicle-selector__navigation { color: var(--action-default); } +.vehicle-selector-wrapper .vehicle-selector .vehicle-selector__slider-wrapper { + padding-top: 0; +} + /* Arrow controls */ .vehicle-selector__slider-wrapper { position: relative; @@ -251,6 +235,11 @@ ul.vehicle-selector__navigation { .vehicle-selector__desc-item { padding-inline: 100px; } + + .vehicle-selector__slider-wrapper { + width: 100vw; + margin-left: calc((100vw - 100%)* -1 / 2); + } } @media screen and (width >= 1440px) { diff --git a/blocks/vehicle-selector/vehicle-selector.js b/blocks/vehicle-selector/vehicle-selector.js index 05b1be7..5bf25e9 100644 --- a/blocks/vehicle-selector/vehicle-selector.js +++ b/blocks/vehicle-selector/vehicle-selector.js @@ -1,17 +1,9 @@ /* eslint-disable max-len */ -import { createElement } from '../../scripts/helpers.js'; +import { createElement, stripEmptyTags } from '../../scripts/helpers.js'; import { smoothScrollHorizontal } from '../../scripts/motion-helper.js'; const blockName = 'vehicle-selector'; -function stripEmptyTags(main, child) { - if (child !== main && child.innerHTML.trim() === '') { - const parent = child.parentNode; - child.remove(); - stripEmptyTags(main, parent); - } -} - function buildTabNavigation(tabItems, clickHandler) { const tabNavigation = createElement('ul', { classes: `${blockName}__navigation` }); const navigationLine = createElement('li', { classes: `${blockName}__navigation-line` }); @@ -210,18 +202,36 @@ export default function decorate(block) { headings.forEach((heading) => { heading.classList.add('h6'); }); - - const descItem = descriptionItems[i].querySelectorAll('p'); - descItem.forEach((element) => { - const currentContainer = createElement('div', { classes: `${blockName}__text` }); - element.parentNode.appendChild(currentContainer); - let nextElement = element.nextElementSibling; - while (nextElement && nextElement.classList.contains('h6')) { - currentContainer.appendChild(nextElement); - nextElement = element.nextElementSibling; + // Create description items + const listItems = descriptionItems[i].querySelectorAll(':scope > ul > li'); + const fragment = document.createDocumentFragment(); + + listItems.forEach((li) => { + const containerDiv = document.createElement('div'); + containerDiv.classList.add(`${blockName}__text`); + + const subList = li.querySelector('ul'); + if (subList) { + const h4Element = document.createElement('h4'); + h4Element.textContent = li.childNodes[0].textContent.trim(); + containerDiv.appendChild(h4Element); + + const subItems = subList.querySelectorAll('li'); + subItems.forEach((subLi) => { + const pElement = document.createElement('p'); + pElement.classList.add('h6'); + pElement.textContent = subLi.textContent.trim(); + containerDiv.appendChild(pElement); + }); } - currentContainer.insertAdjacentElement('afterbegin', element); + + fragment.appendChild(containerDiv); }); + const button = descriptionItems[i].querySelector('.button-container'); + fragment.appendChild(button); + + descriptionItems[i].innerHTML = ''; + descriptionItems[i].appendChild(fragment); }); // Update the button indicator on scroll @@ -233,4 +243,6 @@ export default function decorate(block) { const index = [...activeItem.parentNode.children].indexOf(activeItem); updateActiveItem(index); }); + + block.classList.add('full-width'); } diff --git a/scripts/helpers.js b/scripts/helpers.js index be45cc7..7ef070f 100644 --- a/scripts/helpers.js +++ b/scripts/helpers.js @@ -130,6 +130,14 @@ export const throttle = (func, limit) => { }; }; +export function stripEmptyTags(main, child) { + if (child !== main && child.innerHTML.trim() === '') { + const parent = child.parentNode; + child.remove(); + stripEmptyTags(main, parent); + } +} + /** * Create an element with the given id and classes. * @param {string} tagName the tag diff --git a/scripts/scripts.js b/scripts/scripts.js index 9e5485c..3155264 100644 --- a/scripts/scripts.js +++ b/scripts/scripts.js @@ -68,7 +68,7 @@ function customDecorateSections(main) { }); } -function customDecorateBlocks(main) { +export function customDecorateBlocks(main) { main.querySelectorAll('div.section > div > div').forEach((block) => { if (block.classList.contains('full-width')) { block.parentElement.classList.add('wrapper-full-width'); From 2f20bc8dfdad66e80522481f855fe38abed4556c Mon Sep 17 00:00:00 2001 From: Tomasz Dziezyk Date: Fri, 11 Oct 2024 09:52:10 +0200 Subject: [PATCH 083/159] KAW-7947 Fix padding between text and button --- blocks/specification/specification.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/blocks/specification/specification.css b/blocks/specification/specification.css index 5c66447..5d37b4a 100644 --- a/blocks/specification/specification.css +++ b/blocks/specification/specification.css @@ -77,6 +77,10 @@ width: auto; } + .specification .button-container { + margin-top: 60px; + } + .specification .button-container .button { width: auto; } From dcbe75666b08ad71454e65b42104883f822a85cc Mon Sep 17 00:00:00 2001 From: Ioana Iordache Date: Fri, 11 Oct 2024 10:09:13 +0200 Subject: [PATCH 084/159] KAW-7944: update description list creation --- blocks/vehicle-selector/vehicle-selector.css | 16 +++---- blocks/vehicle-selector/vehicle-selector.js | 47 +++++++++----------- 2 files changed, 25 insertions(+), 38 deletions(-) diff --git a/blocks/vehicle-selector/vehicle-selector.css b/blocks/vehicle-selector/vehicle-selector.css index f59d65b..33d2b8e 100644 --- a/blocks/vehicle-selector/vehicle-selector.css +++ b/blocks/vehicle-selector/vehicle-selector.css @@ -92,23 +92,17 @@ transition: opacity 0.5s var(--easing-entrance) var(--duration-medium); } -.vehicle-selector__text { - display: flex; - flex-direction: column; - text-wrap: balance; -} - -.vehicle-selector__text * { - margin: 0; -} - -.vehicle-selector__text h4 { +.description-label { margin-bottom: 6px; color: var(--grey-60); font-size: 14px; line-height: 150%; } +.description-value .h6 { + font-weight: 600; +} + .vehicle-selector .button-container { margin: auto 0 0; } diff --git a/blocks/vehicle-selector/vehicle-selector.js b/blocks/vehicle-selector/vehicle-selector.js index 5bf25e9..53318ed 100644 --- a/blocks/vehicle-selector/vehicle-selector.js +++ b/blocks/vehicle-selector/vehicle-selector.js @@ -202,36 +202,29 @@ export default function decorate(block) { headings.forEach((heading) => { heading.classList.add('h6'); }); - // Create description items - const listItems = descriptionItems[i].querySelectorAll(':scope > ul > li'); - const fragment = document.createDocumentFragment(); - - listItems.forEach((li) => { - const containerDiv = document.createElement('div'); - containerDiv.classList.add(`${blockName}__text`); - - const subList = li.querySelector('ul'); - if (subList) { - const h4Element = document.createElement('h4'); - h4Element.textContent = li.childNodes[0].textContent.trim(); - containerDiv.appendChild(h4Element); - - const subItems = subList.querySelectorAll('li'); - subItems.forEach((subLi) => { - const pElement = document.createElement('p'); - pElement.classList.add('h6'); - pElement.textContent = subLi.textContent.trim(); - containerDiv.appendChild(pElement); + // Creating the description list (as in specification component) + descriptionItems[i].querySelectorAll('p').forEach((paragraph) => { + const strongEls = paragraph.querySelectorAll('strong'); + const hasButton = paragraph.classList.contains('button-container'); + + if (strongEls.length > 0) { + paragraph.classList.add('font-small', 'description-value'); + strongEls.forEach((el) => { + el.classList.add('h6'); }); + } else if (!hasButton) { + paragraph.classList.add('font-small', 'description-label'); } - - fragment.appendChild(containerDiv); }); - const button = descriptionItems[i].querySelector('.button-container'); - fragment.appendChild(button); - - descriptionItems[i].innerHTML = ''; - descriptionItems[i].appendChild(fragment); + Array.from(descriptionItems[i].querySelectorAll('.description-label')).reverse().forEach((el) => { + const stat = document.createElement('div'); + stat.classList.add('description-stat'); + const valueEl = el.nextElementSibling; + + stat.append(el); + stat.append(valueEl); + descriptionItems[i].prepend(stat); + }); }); // Update the button indicator on scroll From 07f06c611444b120ff9d4c6f2330c811eff32f2d Mon Sep 17 00:00:00 2001 From: Lakshmishri Date: Fri, 11 Oct 2024 10:28:33 +0200 Subject: [PATCH 085/159] fix heading styles for title --- blocks/footer/footer.css | 2 +- blocks/title/title.js | 9 ++++++--- 2 files changed, 7 insertions(+), 4 deletions(-) diff --git a/blocks/footer/footer.css b/blocks/footer/footer.css index 71c2cfb..d2c00ed 100644 --- a/blocks/footer/footer.css +++ b/blocks/footer/footer.css @@ -82,7 +82,7 @@ footer { color: var(--white); border: none; cursor: pointer; - z-index: 1000; + z-index: 1; } .footer .back-to-top:hover, diff --git a/blocks/title/title.js b/blocks/title/title.js index 46d4122..dccde1b 100644 --- a/blocks/title/title.js +++ b/blocks/title/title.js @@ -4,11 +4,14 @@ export default async function decorate(block) { unwrapDivs(block); adjustPretitle(block); - const headings = block.querySelectorAll('h1, h2, h3, h4, h5, h6'); - [...headings].forEach((heading) => heading.classList.add('heading')); - const isLineVariant = block.classList.contains('line'); + const headings = block.querySelectorAll('h1, h2, h3, h4, h5, h6'); + [...headings].forEach((heading) => { + const headingClass = isLineVariant ? '.h2' : '.h1'; + heading.classList.add(headingClass); + }); + if (isLineVariant) { const lineEle = document.createElement('div'); lineEle.classList.add('vertical-line-wrapper'); From f4870e60f9dcf8f799b18b0f759533fb581676c0 Mon Sep 17 00:00:00 2001 From: Lakshmishri Date: Fri, 11 Oct 2024 11:58:06 +0200 Subject: [PATCH 086/159] fix fonts --- blocks/nba/nba.css | 4 +++- blocks/nba/nba.js | 10 +++------- 2 files changed, 6 insertions(+), 8 deletions(-) diff --git a/blocks/nba/nba.css b/blocks/nba/nba.css index d39e292..bb611ea 100644 --- a/blocks/nba/nba.css +++ b/blocks/nba/nba.css @@ -37,8 +37,10 @@ gap: var(--row-gap) } -.nba .h3 { +.nba .h3, +.nba .h6 { margin-bottom: 0; + margin-top: 0; } @media (width >= 768px) { diff --git a/blocks/nba/nba.js b/blocks/nba/nba.js index 826a248..4b9721c 100644 --- a/blocks/nba/nba.js +++ b/blocks/nba/nba.js @@ -5,16 +5,12 @@ export default async function decorate(block) { textWrapper.classList.add('nba-text-wrapper'); const headings = block.querySelectorAll('h1, h2, h3, h4, h5, h6'); - [...headings].forEach((heading) => { - heading.classList.add('h3'); + [...headings].forEach((heading, index) => { + const headingClass = index === 0 ? 'h3' : 'h6'; + heading.classList.add(headingClass); textWrapper.append(heading); }); - block.querySelectorAll('p').forEach((textEle) => { - if (!textEle.children.length) { - textWrapper.append(textEle); - } - }); block.prepend(textWrapper); const buttonWrapper = document.createElement('div'); From 040b37ef9100702cf0f0bd5de24a9eca2ce10282 Mon Sep 17 00:00:00 2001 From: Ioana Iordache Date: Fri, 11 Oct 2024 12:17:50 +0200 Subject: [PATCH 087/159] KAW-7944: fix class --- blocks/title/title.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/blocks/title/title.js b/blocks/title/title.js index dccde1b..febb314 100644 --- a/blocks/title/title.js +++ b/blocks/title/title.js @@ -8,7 +8,7 @@ export default async function decorate(block) { const headings = block.querySelectorAll('h1, h2, h3, h4, h5, h6'); [...headings].forEach((heading) => { - const headingClass = isLineVariant ? '.h2' : '.h1'; + const headingClass = isLineVariant ? 'h2' : 'h1'; heading.classList.add(headingClass); }); From b5cff0ec12dccfb539a94f52474338d72a561da0 Mon Sep 17 00:00:00 2001 From: Ioana Iordache Date: Fri, 11 Oct 2024 12:59:40 +0200 Subject: [PATCH 088/159] KAW-7944: small updates --- blocks/title/title.css | 3 --- blocks/vehicle-selector/vehicle-selector.css | 5 +++++ 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/blocks/title/title.css b/blocks/title/title.css index 364a1de..8e3e115 100644 --- a/blocks/title/title.css +++ b/blocks/title/title.css @@ -20,9 +20,6 @@ padding-top: 80px; padding-bottom: 40px; align-items: center; -} - -.title.center { margin-inline: auto; text-align: center; } diff --git a/blocks/vehicle-selector/vehicle-selector.css b/blocks/vehicle-selector/vehicle-selector.css index 33d2b8e..c9e67ba 100644 --- a/blocks/vehicle-selector/vehicle-selector.css +++ b/blocks/vehicle-selector/vehicle-selector.css @@ -223,6 +223,11 @@ ul.vehicle-selector__navigation { ul.vehicle-selector__navigation { gap: 60px; } + + .vehicle-selector .button-container { + align-self: center; + margin: 0; + } } @media screen and (width >= 1024px) { From 7537e9a932623900b230ac7906e66fa7ffda073f Mon Sep 17 00:00:00 2001 From: Lakshmishri Date: Mon, 14 Oct 2024 10:15:17 +0200 Subject: [PATCH 089/159] fix KAW-8146 --- blocks/footer/footer.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/blocks/footer/footer.css b/blocks/footer/footer.css index 71c2cfb..ed0596d 100644 --- a/blocks/footer/footer.css +++ b/blocks/footer/footer.css @@ -134,6 +134,10 @@ footer { line-height: 150%; } +.footer-wrapper { + border-top: 1px solid var(--white); +} + @media (width >= 768px) { footer { padding: 0 40px; From 24d7e9d17caae59241bc3e5ddce29db751e128c7 Mon Sep 17 00:00:00 2001 From: Tomasz Dziezyk Date: Mon, 14 Oct 2024 11:51:32 +0200 Subject: [PATCH 090/159] KAW-7945 Add hero block --- blocks/hero/hero.css | 237 +++++++++++++++++++++++++++++++++++++++++-- blocks/hero/hero.js | 181 +++++++++++++++++++++++++++++++++ icons/arrow-down.svg | 4 + icons/pause.svg | 4 + icons/play.svg | 4 + 5 files changed, 423 insertions(+), 7 deletions(-) create mode 100644 icons/arrow-down.svg create mode 100644 icons/pause.svg create mode 100644 icons/play.svg diff --git a/blocks/hero/hero.css b/blocks/hero/hero.css index 1a377ac..347299f 100644 --- a/blocks/hero/hero.css +++ b/blocks/hero/hero.css @@ -6,17 +6,19 @@ main .hero-container { padding: 0; } +main .hero-container .hero-wrapper { + padding: 0; +} + .hero { position: relative; - padding: 32px; - min-height: 300px; + height: 100vh; } -.hero h1 { - max-width: 1200px; - margin-left: auto; - margin-right: auto; - color: white; +/* stylelint-disable-next-line no-descending-specificity */ +.hero > div:first-child, +.hero > div:first-child > div { + height: 100%; } .hero picture { @@ -32,3 +34,224 @@ main .hero-container { width: 100%; height: 100%; } + +.hero video { + position: absolute; + z-index: -1; + inset: 0; + object-fit: cover; + width: 100%; + height: 100%; +} + +.hero picture::after, +.hero video::after { + background: var(--black); + content: ""; + width: 100%; + height: 100%; + display: block; + position: absolute; + top: 0; + opacity: 0.3; +} + +.hero span.icon { + display: flex; +} + +.hero .hero-text-wrapper { + margin: 0; + padding: 20px; + text-align: center; + display: flex; + width: 100%; + flex-direction: column; + height: 100%; + justify-content: center; + background-color: transparent; +} + +.hero .button span { + display: flex; +} + +.hero .hero-pause-button { + position: absolute; + right: 20px; + top: calc(var(--nav-height) + 24px); + width: 32px; + height: 32px; + border: solid 1px var(--white); + border-radius: 50%; +} + +.hero .hero-scroll-icon { + position: absolute; + left: 50%; + translate: -50% 0; + bottom: 24px; + border: solid 1px var(--white); + width: 26px; + height: 40px; + border-radius: 15px; + display: flex; + justify-content: center; + align-items: center; +} + +.hero .hero-scroll-icon span { + height: 20px; + width: 14px; +} + +.hero h1 { + margin-bottom: 6px; +} + +.hero p:not(:last-child) { + margin-bottom: 32px; +} + +.hero p:last-child { + margin-bottom: 0; +} + +.hero span.hidden { + display: none; +} + +.hero .hero-flag { + translate: 20px -50%; + display: flex; + width: 60px; + height: 50px; + position: absolute; +} + +.hero .hero-countdown { + text-align: center; + line-height: 91px; + font-size: 70px; + font-weight: 500; + display: flex; + justify-content: space-between; + margin: 32px 0 43px; + max-width: 320px; + align-self: center; + width: 100%; +} + +.hero.countdown .hero-text-wrapper { + font-size: 24px; + line-height: 33.6px; +} + +.hero .hero-countdown .hero-days-label, +.hero .hero-countdown .hero-hours-label, +.hero .hero-countdown .hero-minutes-label { + font-size: 20px; + line-height: 28px; + font-weight: 500; +} + +@media (width >= 768px) { + .hero .hero-text-wrapper { + max-width: 475px; + text-align: left; + padding: 0 0 0 30px; + } + + .hero .hero-pause-button { + top: unset; + bottom: 30px; + right: 30px; + } + + .hero .hero-flag { + translate: 30px -50%; + } + + .hero.countdown .hero-text-wrapper { + max-width: 652px; + padding: 0; + margin: auto; + text-align: center; + font-size: 34px; + line-height: 47.6px; + } + + .hero.countdown .button-container { + display: flex; + justify-content: center; + } + + .hero .hero-countdown { + font-size: 160px; + line-height: 224px; + max-width: unset; + margin: 20px 0 64px; + } + + .hero .hero-countdown .hero-days-label, + .hero .hero-countdown .hero-hours-label, + .hero .hero-countdown .hero-minutes-label { + font-size: 28px; + line-height: 36.4px; + position: absolute; + bottom: 0; + left: 50%; + translate: -50% 0; + } + + .hero .hero-time { + position: relative; + } +} + +@media (width >= 1025px) { + .hero .hero-text-wrapper { + max-width: 500px; + padding: 0 0 0 40px; + } + + .hero .hero-pause-button { + bottom: 24px; + right: 40px; + } + + .hero .hero-flag { + translate: 40px -50%; + } + + .hero h1 { + margin-bottom: 20px; + } +} + +@media (width >= 1440px) { + .hero .hero-text-wrapper { + max-width: 707px; + padding: 0 0 0 100px; + } + + .hero .hero-pause-button { + right: 100px; + } + + .hero .hero-flag { + translate: 62px -50%; + } + + .hero h1 { + margin-bottom: 20px; + } + + .hero.countdown p { + margin: 0; + } + + .hero .hero-countdown { + margin-bottom: 80px; + } +} diff --git a/blocks/hero/hero.js b/blocks/hero/hero.js index e69de29..88c5106 100644 --- a/blocks/hero/hero.js +++ b/blocks/hero/hero.js @@ -0,0 +1,181 @@ +import { customDecoreateIcons, getTextLabel } from '../../scripts/scripts.js'; + +const addPauseButton = (block) => { + const pauseButton = document.createElement('button'); + pauseButton.classList.add('hero-pause-button'); + pauseButton.setAttribute('aria-label', getTextLabel('pause')); + pauseButton.innerHTML = ` + + + `; + + pauseButton.addEventListener('click', () => { + const video = block.querySelector('video'); + const [pauseIcon, playIcon] = pauseButton.querySelectorAll('span'); + + if (video.paused) { + video.play(); + pauseIcon.classList.remove('hidden'); + playIcon.classList.add('hidden'); + pauseButton.setAttribute('aria-label', getTextLabel('pause')); + } else { + video.pause(); + pauseIcon.classList.add('hidden'); + playIcon.classList.remove('hidden'); + pauseButton.setAttribute('aria-label', getTextLabel('play')); + } + }); + + customDecoreateIcons(pauseButton); + block.append(pauseButton); +}; + +const addScrollIcon = (block) => { + const scrollEl = document.createElement('span'); + scrollEl.classList.add('hero-scroll-icon'); + scrollEl.innerHTML = ''; + + customDecoreateIcons(scrollEl); + block.append(scrollEl); +}; + +const addLogoFlag = (block) => { + const flagEl = document.createElement('span'); + flagEl.classList.add('hero-flag'); + flagEl.innerHTML = ` + + + + + + + `; + customDecoreateIcons(flagEl); + block.append(flagEl); +}; + +const calcTimeLeft = (eventDate) => { + const currentDate = new Date(); + const timeDiff = eventDate - currentDate; + const DAY = 24 * 60 * 60 * 1000; // day in miliseconds + const HOUR = 60 * 60 * 1000; // hour in miliseconds + const MINUTE = 60 * 1000; // minute in miliseconds + + if (timeDiff < 0) { + return { + days: 0, + hours: 0, + minutes: 0, + }; + } + + const days = Math.floor(timeDiff / DAY); + const hours = Math.floor((timeDiff % DAY) / HOUR); + const minutes = Math.floor((timeDiff % HOUR) / MINUTE); + + return { + days, + hours, + minutes, + }; +}; + +const generateTimeElements = (block) => { + const timeElements = document.createRange().createContextualFragment(` +
    +
    +
    +
    +
    +
    :
    +
    +
    +
    +
    +
    :
    +
    +
    +
    +
    +
    +
    + `); + const mountPoint = [...block.querySelectorAll('p')].find((el) => el.textContent.toUpperCase() === '%TIME%'); + + if (!mountPoint) { + // eslint-disable-next-line no-console + console.error('Hero block: The mount point for countdown not found. Plase make sure you put %TIME% in the separate paragraph!!!'); + } + + mountPoint.replaceWith(timeElements.children[0]); +}; + +const startCountdown = (block, eventDate) => { + const MINUTE_IN_MILISECONDS = 60000; + const daysEl = block.querySelector('.hero-days'); + const hoursEl = block.querySelector('.hero-hours'); + const minutesEl = block.querySelector('.hero-minutes'); + const daysLabel = block.querySelector('.hero-days-label'); + const hoursLabel = block.querySelector('.hero-hours-label'); + const minutesLabel = block.querySelector('.hero-minutes-label'); + + const updateCountdow = () => { + const { days, hours, minutes } = calcTimeLeft(eventDate); + + daysEl.textContent = days < 10 ? `0${days}` : days; + hoursEl.textContent = hours < 10 ? `0${hours}` : hours; + minutesEl.textContent = minutes < 10 ? `0${minutes}` : minutes; + daysLabel.textContent = getTextLabel(days > 1 ? 'days' : 'day'); + hoursLabel.textContent = getTextLabel(hours > 1 ? 'hours' : 'hour'); + minutesLabel.textContent = getTextLabel(minutes > 1 ? 'minutes' : 'minute'); + }; + + setTimeout(updateCountdow, MINUTE_IN_MILISECONDS); + updateCountdow(); +}; + +export default function decorate(block) { + const firstCell = block.querySelector(':scope > div > div'); + const picture = firstCell.querySelector('picture'); + const video = firstCell.querySelector('video'); + const headings = firstCell.querySelectorAll('h1, h2, h3, h4, h5, h6'); + const links = firstCell.querySelectorAll('a'); + const dateEl = block.querySelector(':scope > div:nth-child(2) > div'); + + if (picture) { + picture.parentElement.replaceWith(picture); + } + + if (video) { + video.parentElement.replaceWith(video); + addPauseButton(block); + } + + const textWrapper = document.createElement('div'); + textWrapper.classList.add('hero-text-wrapper', 'h6', 'dark'); + textWrapper.append(...firstCell.querySelectorAll(':scope > *:not(picture, video)')); + + firstCell.append(textWrapper); + headings.forEach((h) => { h.classList.add('h1'); }); + links.forEach((link, index) => { link.classList.add(index ? 'secondary' : 'primary'); }); + + addScrollIcon(block); + addLogoFlag(block); + + if (dateEl) { + let date; + try { + date = new Date(dateEl.textContent); + dateEl.remove(); + } catch (error) { + // eslint-disable-next-line no-console + console.error('The 2nd row of data for the hero block should be a date.'); + return; + } + + block.classList.add('countdown'); + textWrapper.classList.remove('h6'); + generateTimeElements(block); + startCountdown(block, date); + } +} diff --git a/icons/arrow-down.svg b/icons/arrow-down.svg new file mode 100644 index 0000000..0537fe1 --- /dev/null +++ b/icons/arrow-down.svg @@ -0,0 +1,4 @@ + + + diff --git a/icons/pause.svg b/icons/pause.svg new file mode 100644 index 0000000..3ad6b20 --- /dev/null +++ b/icons/pause.svg @@ -0,0 +1,4 @@ + + + diff --git a/icons/play.svg b/icons/play.svg new file mode 100644 index 0000000..03fab79 --- /dev/null +++ b/icons/play.svg @@ -0,0 +1,4 @@ + + + From 9a3599c0d6337c48caa34b59aaea2960c2256f39 Mon Sep 17 00:00:00 2001 From: Tomasz Dziezyk Date: Mon, 14 Oct 2024 12:40:28 +0200 Subject: [PATCH 091/159] KAW-7945 Fix vidoe opacity background --- blocks/hero/hero.css | 11 ++++++++++- blocks/hero/hero.js | 4 ++-- 2 files changed, 12 insertions(+), 3 deletions(-) diff --git a/blocks/hero/hero.css b/blocks/hero/hero.css index 347299f..57d1499 100644 --- a/blocks/hero/hero.css +++ b/blocks/hero/hero.css @@ -35,6 +35,10 @@ main .hero-container .hero-wrapper { height: 100%; } +.hero .video-wrapper { + margin: 0; +} + .hero video { position: absolute; z-index: -1; @@ -45,7 +49,7 @@ main .hero-container .hero-wrapper { } .hero picture::after, -.hero video::after { +.hero .video-wrapper::after { background: var(--black); content: ""; width: 100%; @@ -54,6 +58,11 @@ main .hero-container .hero-wrapper { position: absolute; top: 0; opacity: 0.3; + left: 0; +} + +.hero .video-wrapper::after { + z-index: -1; } .hero span.icon { diff --git a/blocks/hero/hero.js b/blocks/hero/hero.js index 88c5106..f06fbfd 100644 --- a/blocks/hero/hero.js +++ b/blocks/hero/hero.js @@ -130,7 +130,7 @@ const startCountdown = (block, eventDate) => { minutesLabel.textContent = getTextLabel(minutes > 1 ? 'minutes' : 'minute'); }; - setTimeout(updateCountdow, MINUTE_IN_MILISECONDS); + setInterval(updateCountdow, MINUTE_IN_MILISECONDS); updateCountdow(); }; @@ -147,7 +147,7 @@ export default function decorate(block) { } if (video) { - video.parentElement.replaceWith(video); + video.parentElement.classList.add('video-wrapper'); addPauseButton(block); } From a9aa1a9b1e5102da7ae315c879cbc03ded1e807b Mon Sep 17 00:00:00 2001 From: Lakshmishri Date: Mon, 14 Oct 2024 14:11:44 +0200 Subject: [PATCH 092/159] implement text component --- blocks/text-with-image/text-with-image.js | 15 +--- blocks/text/text.css | 94 +++++++++++++++++++++-- blocks/text/text.js | 38 ++++++++- icons/quote-close.svg | 3 + icons/quote-open.svg | 3 + scripts/helpers.js | 13 ++++ 6 files changed, 143 insertions(+), 23 deletions(-) create mode 100644 icons/quote-close.svg create mode 100644 icons/quote-open.svg diff --git a/blocks/text-with-image/text-with-image.js b/blocks/text-with-image/text-with-image.js index d378fdc..be12fff 100644 --- a/blocks/text-with-image/text-with-image.js +++ b/blocks/text-with-image/text-with-image.js @@ -1,17 +1,4 @@ -import { throttle } from '../../scripts/helpers.js'; - -const gatherButtons = (buttonsContainers) => { - let currentButtonContainer; - - buttonsContainers.forEach((buttonContainer) => { - if (currentButtonContainer?.nextElementSibling === buttonContainer) { - currentButtonContainer.append(buttonContainer.children[0]); - buttonContainer.remove(); - } else { - currentButtonContainer = buttonContainer; - } - }); -}; +import { throttle, gatherButtons } from '../../scripts/helpers.js'; const moveImageOnScroll = (block, settings = {}) => { const [firstImage, secondImage] = block.querySelectorAll('.column-with-images img'); diff --git a/blocks/text/text.css b/blocks/text/text.css index 554b5e3..8770eb8 100644 --- a/blocks/text/text.css +++ b/blocks/text/text.css @@ -1,13 +1,91 @@ -.text > div { - max-width: 750px; +.text .h3 { + margin-bottom: 24px; } -/* centering by variant */ -.text.center > div { - margin: auto; +.text-quote-wrapper { + padding-top: 64px; + padding-bottom: 40px; + display: flex; + flex-flow: column; + gap: 24px; } -/* centering by set the text aling in the document */ -.section-center .text { - text-align: center; +.text-quote-wrapper .h4 { + margin-top: 0; + margin-bottom: 0; } + +.text-close-quotes { + align-self: flex-end; +} + +.text-close-quotes img, +.text-open-quotes img { + width: 41px; + max-width: none; +} + +.text-button-wrapper { + padding-bottom: 32px; + padding-left: 53px; + display: flex; + gap: 32px; + align-items: center; +} + +.button-container { + display: flex; + gap: 32px; + padding-bottom: 12px; +} + +.text-container .button-container span[class^="icon-"] { + display: flex; +} + +@media (width >= 768px) { + .text .h3 { + margin-bottom: 40px; + } + + .text .h3, + .text-content, + .button-container { + padding-left: 53px; + padding-right: 53px; + } + + .text-quote-wrapper { + flex-flow: row; + gap: 12px; + padding-bottom: 60px; + } +} + +@media (width >= 1025px) { + .text .h3 { + margin-bottom: 32px; + } + + .text-quote-wrapper { + padding-bottom: 80px; + } +} + +@media (width >= 1440px) { + .text .h3 { + margin-bottom: 40px; + } + + .text-quote-wrapper { + padding-top: 78px; + } + + .text-button-wrapper { + padding-bottom: 40px; + } + + .button-container { + padding-bottom: 20px; + } +} \ No newline at end of file diff --git a/blocks/text/text.js b/blocks/text/text.js index 044a7a0..4cb2e6e 100644 --- a/blocks/text/text.js +++ b/blocks/text/text.js @@ -1 +1,37 @@ -/* JS */ +import { gatherButtons } from '../../scripts/helpers.js'; + +export default async function decorate(block) { + const textContainer = block.querySelector(':scope > div > div'); + const headings = block.querySelectorAll('h1, h2, h3, h4, h5, h6'); + [...headings].forEach((heading) => { + heading.classList.add('h3'); + }); + + const textElements = block.querySelectorAll('p'); + [...textElements].forEach((heading) => { + heading.classList.add('text-content'); + }); + const quoteWrapper = document.createElement('div'); + quoteWrapper.classList.add('text-quote-wrapper'); + const quotedText = block.querySelector('strong'); + quotedText.classList.add('h4'); + const openQuotes = document.createRange().createContextualFragment(` +
    + +
    + `); + const closeQuotes = document.createRange().createContextualFragment(` +
    + +
    + `); + quoteWrapper.append(openQuotes, quotedText, closeQuotes); + + gatherButtons(block.querySelectorAll('.button-container')); + + const buttonContainer = block.querySelector('.button-container'); + buttonContainer.classList.remove('text-content'); + textContainer.insertBefore(quoteWrapper, buttonContainer); + + quoteWrapper.previousElementSibling.remove(); +} diff --git a/icons/quote-close.svg b/icons/quote-close.svg new file mode 100644 index 0000000..f69a40f --- /dev/null +++ b/icons/quote-close.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/icons/quote-open.svg b/icons/quote-open.svg new file mode 100644 index 0000000..6f9a86d --- /dev/null +++ b/icons/quote-open.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/scripts/helpers.js b/scripts/helpers.js index 99f5d9f..0fa2f91 100644 --- a/scripts/helpers.js +++ b/scripts/helpers.js @@ -198,3 +198,16 @@ export const isInViewport = (element) => { && rect.right <= windowWidth ); }; + +export const gatherButtons = (buttonsContainers) => { + let currentButtonContainer; + + buttonsContainers.forEach((buttonContainer) => { + if (currentButtonContainer?.nextElementSibling === buttonContainer) { + currentButtonContainer.append(buttonContainer.children[0]); + buttonContainer.remove(); + } else { + currentButtonContainer = buttonContainer; + } + }); +}; From d90ff99f8ad32cfeb804145914ecc519efa76807 Mon Sep 17 00:00:00 2001 From: Tomasz Dziezyk Date: Mon, 14 Oct 2024 14:21:37 +0200 Subject: [PATCH 093/159] KAW-8012 Refactor spacing between text and nav --- blocks/feature/feature.css | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/blocks/feature/feature.css b/blocks/feature/feature.css index f95cab4..c18baa0 100644 --- a/blocks/feature/feature.css +++ b/blocks/feature/feature.css @@ -83,8 +83,8 @@ } .feature .feature-text { - width: 251px; - padding-right: 0; + max-width: 50%; + padding-right: 67px; } .feature .feature-slides-nav { @@ -116,7 +116,7 @@ } .feature .feature-text { - width: 330px; + padding-right: 72px; } .feature .feature-slides-nav { @@ -127,6 +127,6 @@ @media (width >= 1440px) { .feature .feature-text { - width: 450px; + padding-right: 110px; } } From 7eb7c5b5f11d0fdf5e729498878a5b7e2defa21f Mon Sep 17 00:00:00 2001 From: Tomasz Dziezyk Date: Mon, 14 Oct 2024 16:28:24 +0200 Subject: [PATCH 094/159] KAW-8121 Fix flag --- blocks/highlight/highlight.css | 19 +++++++++++++++++++ blocks/highlight/highlight.js | 26 ++++++++++++++++++++++++-- styles/styles.css | 10 ++++++++-- 3 files changed, 51 insertions(+), 4 deletions(-) diff --git a/blocks/highlight/highlight.css b/blocks/highlight/highlight.css index 1dac016..ca01dd4 100644 --- a/blocks/highlight/highlight.css +++ b/blocks/highlight/highlight.css @@ -79,6 +79,21 @@ margin: 0; } +.highlight.block .flag-wrapper { + position: absolute; + display: flex; + bottom: var(--flag-margin); + right: calc(var(--flag-margin) + var(--section-x-padding) * -1 + 30px); + translate: 0 50%; + padding: 0; + transition: all 300ms ease-in-out; +} + +.highlight.block.active .flag-wrapper { + right: calc(var(--section-x-padding) * -1 + 30px); + bottom: 0; +} + @media (width >= 768px) { .highlight { aspect-ratio: 16/9; @@ -110,4 +125,8 @@ .highlight .highlight-slide div { gap: 24px; } + + .highlight.block .flag-wrapper { + right: 30px; + } } diff --git a/blocks/highlight/highlight.js b/blocks/highlight/highlight.js index 4b08077..811370a 100644 --- a/blocks/highlight/highlight.js +++ b/blocks/highlight/highlight.js @@ -1,6 +1,6 @@ import { isInViewport, preventScroll, throttle } from '../../scripts/helpers.js'; -const setScaleForPicture = (block, picture) => { +const setScaleForPicture = (block, picture, onSetScale) => { const setScale = () => { const isNotMobile = window.matchMedia('(width >= 768px)').matches; const mobileAspectRatio = 3 / 4; @@ -16,6 +16,7 @@ const setScaleForPicture = (block, picture) => { const initScale = initialWidth / maxWidth; picture.style.transform = `scale(${initScale})`; + onSetScale(initScale); }; const observer = new IntersectionObserver((entries) => { @@ -78,6 +79,22 @@ const trapScrollingForSlides = (block, { }); }; +const addFlag = (block) => { + const falgEl = ` + + + + + + + `; + + const flagWrapper = document.createElement('div'); + flagWrapper.classList.add('flag-wrapper'); + flagWrapper.innerHTML = (falgEl); + block.append(flagWrapper); +}; + export default async function decorate(block) { const [pictureWrapper, ...slides] = block.querySelectorAll(':scope > div'); const slidesWrapper = document.createElement('div'); @@ -102,7 +119,12 @@ export default async function decorate(block) { const picture = pictureWrapper.querySelector('picture'); pictureWrapper.replaceWith(picture); - setScaleForPicture(block, picture); + addFlag(block); + const onSetScaleForPicture = (value) => { + const space = ((1 - value) / 2) * 100; + block.style.setProperty('--flag-margin', `${space}%`); + }; + setScaleForPicture(block, picture, onSetScaleForPicture); // trapping the scrolling so the user will scroll the next slides of the slider const container = block.querySelector('.highlight-slides-container'); diff --git a/styles/styles.css b/styles/styles.css index 9b94536..66b38a0 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -522,14 +522,14 @@ main .section.padding-bottom-0 { } } -@media (width >= 960px) { +@media (width >= 1025px) { :root { --section-y-padding: 70px; --section-x-padding: 40px; } .section > div { - max-width: 1200px; + max-width: 1240px; margin: auto; } @@ -538,6 +538,12 @@ main .section.padding-bottom-0 { } } +@media (width >= 1440px) { + :root { + --section-x-padding: calc((100vw - 1240px) / 2); + } +} + /* full width styles */ .section .wrapper-full-width { margin: 0; From 04e19df822657cf8e916b5d8b06d3ba019c5a8e3 Mon Sep 17 00:00:00 2001 From: Lakshmishri Date: Tue, 15 Oct 2024 11:11:54 +0200 Subject: [PATCH 095/159] change media query --- blocks/vehicle-selector/vehicle-selector.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/blocks/vehicle-selector/vehicle-selector.css b/blocks/vehicle-selector/vehicle-selector.css index c9e67ba..0da9149 100644 --- a/blocks/vehicle-selector/vehicle-selector.css +++ b/blocks/vehicle-selector/vehicle-selector.css @@ -230,7 +230,7 @@ ul.vehicle-selector__navigation { } } -@media screen and (width >= 1024px) { +@media screen and (width >= 1025px) { .vehicle-selector__desc-item { padding-inline: 100px; } From 38cffc7073b3edd4cecca6a1325d3af8d865ac64 Mon Sep 17 00:00:00 2001 From: Lakshmishri Date: Tue, 15 Oct 2024 11:26:05 +0200 Subject: [PATCH 096/159] fix gutter space --- blocks/gallery/gallery.css | 1 + 1 file changed, 1 insertion(+) diff --git a/blocks/gallery/gallery.css b/blocks/gallery/gallery.css index 5b18078..20e0838 100644 --- a/blocks/gallery/gallery.css +++ b/blocks/gallery/gallery.css @@ -6,6 +6,7 @@ .gallery img { border-radius: 2px; + display: block; } @media (width >= 768px) { From 1b20df1dbcdd67caba5b5e08e9edc8be63be8889 Mon Sep 17 00:00:00 2001 From: Lakshmishri Date: Tue, 15 Oct 2024 11:39:23 +0200 Subject: [PATCH 097/159] get rid of setTimeout --- blocks/vehicle-selector/vehicle-selector.js | 11 ++++------- 1 file changed, 4 insertions(+), 7 deletions(-) diff --git a/blocks/vehicle-selector/vehicle-selector.js b/blocks/vehicle-selector/vehicle-selector.js index 53318ed..17b0927 100644 --- a/blocks/vehicle-selector/vehicle-selector.js +++ b/blocks/vehicle-selector/vehicle-selector.js @@ -62,13 +62,10 @@ const updateActiveItem = (index) => { // Update description position const descriptionWidth = descriptions.offsetWidth; - - setTimeout(() => { - descriptions.scrollTo({ - left: descriptionWidth * index, - behavior: 'smooth', - }); - }, 50); + descriptions.scrollTo({ + left: descriptionWidth * index, + behavior: 'smooth', + }); }; const listenScroll = (carousel) => { From 84dc60df12f371b428994ad3196ffc91b2ce213f Mon Sep 17 00:00:00 2001 From: Ioana Iordache Date: Tue, 15 Oct 2024 12:28:15 +0200 Subject: [PATCH 098/159] KAW-7944: remove comment --- blocks/vehicle-selector/vehicle-selector.js | 1 - 1 file changed, 1 deletion(-) diff --git a/blocks/vehicle-selector/vehicle-selector.js b/blocks/vehicle-selector/vehicle-selector.js index 17b0927..c2a1ec6 100644 --- a/blocks/vehicle-selector/vehicle-selector.js +++ b/blocks/vehicle-selector/vehicle-selector.js @@ -13,7 +13,6 @@ function buildTabNavigation(tabItems, clickHandler) { const button = createElement('button'); button.classList.add('h5'); button.addEventListener('click', () => clickHandler(i)); - // TODO make surer i target the right heading const tabTitle = tabItem.querySelector('h1,h2,h3,h4,h5,h6'); button.innerText = tabTitle.innerText; tabTitle.remove(); From 2f8269ad4ca29ec221b4acaa1505766637afa863 Mon Sep 17 00:00:00 2001 From: Tomasz Dziezyk Date: Tue, 15 Oct 2024 14:56:45 +0200 Subject: [PATCH 099/159] KAW-8122 Fix higlight animation --- blocks/highlight/highlight.js | 37 +++++++++++++++++---------- blocks/specification/specification.js | 37 +++++++++++++++++---------- scripts/helpers.js | 10 +++++--- 3 files changed, 53 insertions(+), 31 deletions(-) diff --git a/blocks/highlight/highlight.js b/blocks/highlight/highlight.js index 4b08077..743e1e2 100644 --- a/blocks/highlight/highlight.js +++ b/blocks/highlight/highlight.js @@ -1,4 +1,4 @@ -import { isInViewport, preventScroll, throttle } from '../../scripts/helpers.js'; +import { isInViewport, onSlideUpOrDown, throttle } from '../../scripts/helpers.js'; const setScaleForPicture = (block, picture) => { const setScale = () => { @@ -48,10 +48,17 @@ const scrollToSlide = (slidersContainer, slideIndex) => { const trapScrollingForSlides = (block, { hasNextSlide, hasPrevSlide, move, }) => { - let enableScroll = null; + let restoreScolling = null; let prevY = window.scrollY; + let blockedScrollYPosition = null; + let paused = false; window.addEventListener('scroll', () => { + if (paused) { + window.scrollTo({ top: blockedScrollYPosition, behavior: 'instant' }); + return; + } + const hasSlideInDirection = prevY < window.scrollY ? hasNextSlide() : hasPrevSlide(); prevY = window.scrollY; @@ -59,21 +66,23 @@ const trapScrollingForSlides = (block, { block.classList.add('active'); if (hasSlideInDirection) { - if (enableScroll) { - // enablingScroll just to make sure that all of the event listener blocking it are removed - // they will be replaced by the preventScroll with new ones - enableScroll(); - } - block.scrollIntoView({ block: 'nearest', behaviour: 'smooth' }); - - enableScroll = preventScroll({ move: (direction) => move(direction, enableScroll) }); + paused = true; + blockedScrollYPosition = window.scrollY; + + window.scrollTo({ top: blockedScrollYPosition, behavior: 'instant' }); + restoreScolling = onSlideUpOrDown({ + move: (direction) => move(direction, restoreScolling), + onEnd: () => { paused = false; }, + }); + return; } } else { block.classList.remove('active'); - if (enableScroll) { - enableScroll(); - enableScroll = null; - } + } + + if (restoreScolling) { + restoreScolling(); + restoreScolling = null; } }); }; diff --git a/blocks/specification/specification.js b/blocks/specification/specification.js index ac0f418..cf96881 100644 --- a/blocks/specification/specification.js +++ b/blocks/specification/specification.js @@ -1,4 +1,4 @@ -import { isInViewport, preventScroll, throttle } from '../../scripts/helpers.js'; +import { isInViewport, onSlideUpOrDown, throttle } from '../../scripts/helpers.js'; export default function decorate(block) { const content = block.querySelector(':scope > div'); @@ -44,10 +44,17 @@ export default function decorate(block) { // trapping the scrolling so the user will scroll the next slides of the slider const trapScrollingForSlides = ({ hasNextSlide, hasPrevSlide, move }) => { - let enableScroll = null; + let restoreScolling = null; let prevY = window.scrollY; + let blockedScrollYPosition = null; + let paused = false; window.addEventListener('scroll', () => { + if (paused) { + window.scrollTo({ top: blockedScrollYPosition, behavior: 'instant' }); + return; + } + const hasSlideInDirection = prevY < window.scrollY ? hasNextSlide() : hasPrevSlide(); prevY = window.scrollY; @@ -55,21 +62,23 @@ export default function decorate(block) { block.classList.add('active'); if (hasSlideInDirection) { - if (enableScroll) { - // enablingScroll just to make sure that all of the event listener - // blocking it are removed they will be replaced by the preventScroll with new ones - enableScroll(); - } - block.scrollIntoView({ block: 'nearest', behaviour: 'smooth' }); - - enableScroll = preventScroll({ move: (direction) => move(direction, enableScroll) }); + paused = true; + blockedScrollYPosition = window.scrollY; + + window.scrollTo({ top: blockedScrollYPosition, behavior: 'instant' }); + restoreScolling = onSlideUpOrDown({ + move: (direction) => move(direction, restoreScolling), + onEnd: () => { paused = false; }, + }); + return; } } else { block.classList.remove('active'); - if (enableScroll) { - enableScroll(); - enableScroll = null; - } + } + + if (restoreScolling) { + restoreScolling(); + restoreScolling = null; } }); }; diff --git a/scripts/helpers.js b/scripts/helpers.js index 0fa2f91..0afb490 100644 --- a/scripts/helpers.js +++ b/scripts/helpers.js @@ -130,7 +130,7 @@ export const throttle = (func, limit) => { }; }; -export const preventScroll = ({ move }) => { +export const onSlideUpOrDown = ({ move, onEnd }) => { let startX; let startY; @@ -177,13 +177,17 @@ export const preventScroll = ({ move }) => { window.addEventListener('touchmove', touchMove, { passive: false }); window.addEventListener('wheel', onWheel, { passive: false }); - const enableScroll = () => { + const clean = () => { window.removeEventListener('touchstart', touchStart, { passive: false }); window.removeEventListener('touchmove', touchMove, { passive: false }); window.removeEventListener('wheel', onWheel, { passive: false }); + + if (onEnd) { + onEnd(); + } }; - return enableScroll; + return clean; }; export const isInViewport = (element) => { From 61dd3bd6af54f13e2623363fb7f7b423d3b7790b Mon Sep 17 00:00:00 2001 From: Tomasz Dziezyk Date: Wed, 16 Oct 2024 10:06:30 +0200 Subject: [PATCH 100/159] KAW-8150 Fix table spacing --- blocks/specification-table/specification-table.css | 12 +++++++++++- blocks/specification-table/specification-table.js | 6 +++++- 2 files changed, 16 insertions(+), 2 deletions(-) diff --git a/blocks/specification-table/specification-table.css b/blocks/specification-table/specification-table.css index 5139456..7899d06 100644 --- a/blocks/specification-table/specification-table.css +++ b/blocks/specification-table/specification-table.css @@ -1,7 +1,7 @@ .specification-table.block { display: flex; flex-direction: column; - gap: 24px; + gap: 32px; } .specification-table p, @@ -36,6 +36,12 @@ color: var(--grey-70); } +.specification-table .st-data-container { + display: flex; + flex-direction: column; + gap: 40px; +} + @media (width >= 768px) { .specification-table.block .st-category-wrapper { flex-direction: row; @@ -47,6 +53,10 @@ padding-top: 8px; } + .specification-table .st-data-container { + gap: 24px; + } + .specification-table .st-category-wrapper .st-category-data-wrapper { flex-grow: 1; } diff --git a/blocks/specification-table/specification-table.js b/blocks/specification-table/specification-table.js index bc68317..a2af9a9 100644 --- a/blocks/specification-table/specification-table.js +++ b/blocks/specification-table/specification-table.js @@ -27,6 +27,9 @@ export default function decorate(block) { block.innerHTML = ''; block.append(tableHeader); + const dataContainer = document.createElement('div'); + dataContainer.classList.add('st-data-container'); + data.forEach((categoryRow) => { const categoryWrapper = document.createElement('div'); categoryWrapper.classList.add('st-category-wrapper'); @@ -41,6 +44,7 @@ export default function decorate(block) { categoryDataWrapper.append(wrapper); }); categoryWrapper.append(categoryDataWrapper); - block.append(categoryWrapper); + dataContainer.append(categoryWrapper); }); + block.append(dataContainer); } From 8e95daa45153fa86e167b23dc0dc18275365a627 Mon Sep 17 00:00:00 2001 From: Tomasz Dziezyk Date: Wed, 16 Oct 2024 13:55:10 +0200 Subject: [PATCH 101/159] KAW-8163 Add support for second image --- blocks/hero/hero.css | 13 +++++++++++++ blocks/hero/hero.js | 14 ++++++++++++-- 2 files changed, 25 insertions(+), 2 deletions(-) diff --git a/blocks/hero/hero.css b/blocks/hero/hero.css index 57d1499..436bd6a 100644 --- a/blocks/hero/hero.css +++ b/blocks/hero/hero.css @@ -27,6 +27,11 @@ main .hero-container .hero-wrapper { inset: 0; object-fit: cover; box-sizing: border-box; + background-color: var(--black); +} + +.hero.hero-multiple-images > div > div picture:first-of-type { + display: none; } .hero img { @@ -165,6 +170,14 @@ main .hero-container .hero-wrapper { } @media (width >= 768px) { + .hero.hero-multiple-images > div > div picture:first-of-type { + display: block; + } + + .hero.hero-multiple-images > div > div picture:nth-of-type(2) { + display: none; + } + .hero .hero-text-wrapper { max-width: 475px; text-align: left; diff --git a/blocks/hero/hero.js b/blocks/hero/hero.js index f06fbfd..954fa34 100644 --- a/blocks/hero/hero.js +++ b/blocks/hero/hero.js @@ -1,3 +1,4 @@ +import { createOptimizedPicture } from '../../scripts/aem.js'; import { customDecoreateIcons, getTextLabel } from '../../scripts/scripts.js'; const addPauseButton = (block) => { @@ -136,14 +137,23 @@ const startCountdown = (block, eventDate) => { export default function decorate(block) { const firstCell = block.querySelector(':scope > div > div'); - const picture = firstCell.querySelector('picture'); + const [picture, xsPicture] = firstCell.querySelectorAll('picture'); const video = firstCell.querySelector('video'); const headings = firstCell.querySelectorAll('h1, h2, h3, h4, h5, h6'); const links = firstCell.querySelectorAll('a'); const dateEl = block.querySelector(':scope > div:nth-child(2) > div'); if (picture) { - picture.parentElement.replaceWith(picture); + const img = picture.querySelector('img'); + const pictureEl = createOptimizedPicture(img.src, '', false, [{ width: window.innerWidth }]); + picture.parentElement.replaceWith(pictureEl); + } + + if (xsPicture) { + const img = xsPicture.querySelector('img'); + const pictureEl = createOptimizedPicture(img.src, '', false, [{ width: window.innerWidth }]); + xsPicture.parentElement.replaceWith(pictureEl); + block.classList.add('hero-multiple-images'); } if (video) { From d0ac1ec241a686f18bcf00ab8134ae710cffbea9 Mon Sep 17 00:00:00 2001 From: Tomasz Dziezyk Date: Thu, 17 Oct 2024 10:14:19 +0200 Subject: [PATCH 102/159] KAW-8140 Fix gap between text and images for stacked variant --- blocks/text-with-image/text-with-image.css | 20 ++++++++++++++++++-- 1 file changed, 18 insertions(+), 2 deletions(-) diff --git a/blocks/text-with-image/text-with-image.css b/blocks/text-with-image/text-with-image.css index d7d77b6..c87c67f 100644 --- a/blocks/text-with-image/text-with-image.css +++ b/blocks/text-with-image/text-with-image.css @@ -69,7 +69,9 @@ } .text-with-image.stacked-images .column-with-text { - transform: translateY(calc(var(--text-image-2nd-image-height) - var(--text-image-distance))); + transform: translateY( + calc(var(--text-image-2nd-image-height) - var(--text-image-distance)) + ); transition: transform var(--animation-time) linear; } @@ -165,6 +167,10 @@ } /* stacked images variant */ + .text-with-image.stacked-images .text-with-image-row { + gap: 60px; + } + .text-with-image.stacked-images .column-with-text { transform: unset; } @@ -201,7 +207,9 @@ .text-with-image.wide-stacked-images .column-with-text { margin: 0; margin-top: 80px; - transform: translateY(calc(var(--text-image-max-overlap) - var(--text-image-distance))); + transform: translateY( + calc(var(--text-image-max-overlap) - var(--text-image-distance)) + ); } .text-with-image.wide-stacked-images .column-with-images p:nth-child(2) img { @@ -241,6 +249,10 @@ } /* stacked images variant */ + .text-with-image.stacked-images .text-with-image-row { + gap: 104px; + } + .text-with-image.stacked-images .column-with-images p:nth-child(2) img { width: 216px; right: 81px; @@ -281,6 +293,10 @@ --text-image-2nd-image-height: 506px; } + .text-with-image.stacked-images .text-with-image-row { + gap: 130px; + } + .text-with-image.wide-stacked-images .column-with-images p:nth-child(2) img { width: 607px; } From fda97c04ca4fcf25c640d91b8e4e37c5d409e788 Mon Sep 17 00:00:00 2001 From: Lakshmishri Date: Thu, 17 Oct 2024 11:08:30 +0200 Subject: [PATCH 103/159] fix font-size --- blocks/news-stories/news-stories.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/blocks/news-stories/news-stories.css b/blocks/news-stories/news-stories.css index f1122bf..d8475a6 100644 --- a/blocks/news-stories/news-stories.css +++ b/blocks/news-stories/news-stories.css @@ -24,6 +24,10 @@ margin-bottom: 0; } +.news-stories:not(.news-stories.single) .news-stories-card-body p:first-of-type { + font-size: 14px; +} + .news-stories .news-stories-card-body p:nth-of-type(2) { margin-bottom: 24px; } From 3282263c23a3e247b94240be8358423e60088aa1 Mon Sep 17 00:00:00 2001 From: Lakshmishri Date: Thu, 17 Oct 2024 11:42:06 +0200 Subject: [PATCH 104/159] add fonts for p type single story variant --- blocks/news-stories/news-stories.css | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/blocks/news-stories/news-stories.css b/blocks/news-stories/news-stories.css index d8475a6..41d7061 100644 --- a/blocks/news-stories/news-stories.css +++ b/blocks/news-stories/news-stories.css @@ -32,6 +32,11 @@ margin-bottom: 24px; } +.news-stories.single .news-stories-card-body p:nth-of-type(2) { + font-size: 20px; + line-height: 140%; +} + .news-stories .news-stories-card-image { line-height: 0; } From f3bc2a2ab90a80b916e31f779f292f7d965dbf83 Mon Sep 17 00:00:00 2001 From: Lakshmishri Date: Thu, 17 Oct 2024 11:50:35 +0200 Subject: [PATCH 105/159] fix lint errors --- blocks/news-stories/news-stories.css | 16 +++++++--------- 1 file changed, 7 insertions(+), 9 deletions(-) diff --git a/blocks/news-stories/news-stories.css b/blocks/news-stories/news-stories.css index 41d7061..42fb20d 100644 --- a/blocks/news-stories/news-stories.css +++ b/blocks/news-stories/news-stories.css @@ -24,19 +24,10 @@ margin-bottom: 0; } -.news-stories:not(.news-stories.single) .news-stories-card-body p:first-of-type { - font-size: 14px; -} - .news-stories .news-stories-card-body p:nth-of-type(2) { margin-bottom: 24px; } -.news-stories.single .news-stories-card-body p:nth-of-type(2) { - font-size: 20px; - line-height: 140%; -} - .news-stories .news-stories-card-image { line-height: 0; } @@ -83,8 +74,15 @@ div.news-stories-wrapper + div.news-stories-wrapper { .news-stories.single .news-stories-card-body p:nth-of-type(2) { margin-bottom: 36px; + font-size: 20px; + line-height: 140%; +} + +.news-stories:not(.news-stories.single) .news-stories-card-body p:first-of-type { + font-size: 14px; } + @media (width >= 768px) { .news-stories.single > ul { display: initial From 414b23f7939d59fcaae4a5bae5d63cd6802a7701 Mon Sep 17 00:00:00 2001 From: Lakshmishri Date: Thu, 17 Oct 2024 14:55:57 +0200 Subject: [PATCH 106/159] fix fonts, add author --- blocks/text/text.css | 10 +++++++++ blocks/text/text.js | 47 ++++++++++++++++++++++++++---------------- blocks/title/title.css | 2 +- styles/styles.css | 2 +- 4 files changed, 41 insertions(+), 20 deletions(-) diff --git a/blocks/text/text.css b/blocks/text/text.css index 8770eb8..7771b59 100644 --- a/blocks/text/text.css +++ b/blocks/text/text.css @@ -15,6 +15,16 @@ margin-bottom: 0; } +.text-quotes-container { + display: flex; + flex-flow: column; + gap:12px; +} + +.text-quotes-container p { + margin-bottom: 0; +} + .text-close-quotes { align-self: flex-end; } diff --git a/blocks/text/text.js b/blocks/text/text.js index 4cb2e6e..80dca04 100644 --- a/blocks/text/text.js +++ b/blocks/text/text.js @@ -11,27 +11,38 @@ export default async function decorate(block) { [...textElements].forEach((heading) => { heading.classList.add('text-content'); }); - const quoteWrapper = document.createElement('div'); - quoteWrapper.classList.add('text-quote-wrapper'); - const quotedText = block.querySelector('strong'); - quotedText.classList.add('h4'); - const openQuotes = document.createRange().createContextualFragment(` -
    - -
    - `); - const closeQuotes = document.createRange().createContextualFragment(` -
    - -
    - `); - quoteWrapper.append(openQuotes, quotedText, closeQuotes); gatherButtons(block.querySelectorAll('.button-container')); const buttonContainer = block.querySelector('.button-container'); - buttonContainer.classList.remove('text-content'); - textContainer.insertBefore(quoteWrapper, buttonContainer); + buttonContainer?.classList.remove('text-content'); - quoteWrapper.previousElementSibling.remove(); + let quoteWrapper; + const quotedText = block.querySelector('.text-content strong'); + if (quotedText) { + quoteWrapper = document.createElement('div'); + quoteWrapper.classList.add('text-quote-wrapper'); + quotedText.classList.add('h4'); + const quotes = document.createElement('div'); + quotes.classList.add('text-quotes-container'); + const nextEle = quotedText.parentElement.nextElementSibling; + if (!nextEle.classList.contains('button-container')) { + quotes.append(nextEle); + nextEle.classList.remove('text-content'); + } + quotes.prepend(quotedText); + const openQuotes = document.createRange().createContextualFragment(` +
    + +
    + `); + const closeQuotes = document.createRange().createContextualFragment(` +
    + +
    + `); + quoteWrapper.append(openQuotes, quotes, closeQuotes); + textContainer.insertBefore(quoteWrapper, buttonContainer); + quoteWrapper.previousElementSibling.remove(); + } } diff --git a/blocks/title/title.css b/blocks/title/title.css index 8e3e115..05c3d6c 100644 --- a/blocks/title/title.css +++ b/blocks/title/title.css @@ -7,7 +7,7 @@ gap: 12px; } -.heading { +.h1{ margin: 0; strong { diff --git a/styles/styles.css b/styles/styles.css index 09442a0..a14ae23 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -149,7 +149,7 @@ h3, h4, .h4 { - font-size: 1.25rem; + font-size: 1.5rem; font-style: normal; font-weight: 500; line-height: 130%; From ef0ec7d1667cd1b7f03df2d624efd247abcb212f Mon Sep 17 00:00:00 2001 From: Tomasz Dziezyk Date: Fri, 18 Oct 2024 10:01:46 +0200 Subject: [PATCH 107/159] KAW-8140 Fix spacing --- blocks/text-with-image/text-with-image.css | 14 +++++++------- styles/styles.css | 8 ++++++-- 2 files changed, 13 insertions(+), 9 deletions(-) diff --git a/blocks/text-with-image/text-with-image.css b/blocks/text-with-image/text-with-image.css index c87c67f..74f641e 100644 --- a/blocks/text-with-image/text-with-image.css +++ b/blocks/text-with-image/text-with-image.css @@ -143,8 +143,8 @@ } .text-with-image .column-with-images { - min-width: 50%; - width: 50%; + min-width: calc(50% - var(--grid-gap) / 2); + width: calc(50% - var(--grid-gap) / 2); } .text-with-image-row:has(.column-with-text + .column-with-images) { @@ -220,7 +220,7 @@ @media (width >= 1025px) { .text-with-image .text-with-image-row { - gap: 104px; + gap: 105px; } .text-with-image .column-with-text { @@ -235,7 +235,7 @@ .text-with-image.sticky-image .column-with-images.left-column img, .text-with-image.sticky-image .column-with-images.right-column img { - width: 50vw; + width: calc(50vw - var(--grid-gap) / 2); } .text-with-image.sticky-image .column-with-images.left-column img { @@ -249,8 +249,8 @@ } /* stacked images variant */ - .text-with-image.stacked-images .text-with-image-row { - gap: 104px; + .text-with-image.stacked-images .text-with-image-row { + gap: 105px; } .text-with-image.stacked-images .column-with-images p:nth-child(2) img { @@ -293,7 +293,7 @@ --text-image-2nd-image-height: 506px; } - .text-with-image.stacked-images .text-with-image-row { + .text-with-image.stacked-images .text-with-image-row { gap: 130px; } diff --git a/styles/styles.css b/styles/styles.css index 09442a0..df7b268 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -23,6 +23,9 @@ --section-y-padding: 40px; --section-x-padding: 20px; + /* grid gap */ + --grid-gap: 16px; + /* v2 */ --white: #fff; --grey-5: #f2f2f2; @@ -355,7 +358,7 @@ button:disabled:hover { border: none; } -a.button span[class^='icon'] { +a.button span[class^="icon"] { display: inline-flex; } @@ -531,6 +534,7 @@ main .section.padding-bottom-0 { :root { --section-y-padding: 40px; --section-x-padding: 30px; + --grid-gap: 24px; } } @@ -552,7 +556,7 @@ main .section.padding-bottom-0 { @media (width >= 1440px) { :root { - --section-x-padding: calc((100vw - 1240px) / 2); + --section-x-padding: calc((100% - 1240px) / 2); } } From 576c9bc0a66f37c654781700b661e6f42b303bd6 Mon Sep 17 00:00:00 2001 From: Lakshmishri Date: Fri, 18 Oct 2024 12:27:53 +0200 Subject: [PATCH 108/159] KAW-8154 adjust spacing --- blocks/text/text.css | 14 ++++++++++++-- blocks/title/title.js | 7 ++++--- 2 files changed, 16 insertions(+), 5 deletions(-) diff --git a/blocks/text/text.css b/blocks/text/text.css index 7771b59..5d12a43 100644 --- a/blocks/text/text.css +++ b/blocks/text/text.css @@ -54,6 +54,11 @@ } @media (width >= 768px) { + .text { + padding-left: 28px; + padding-right: 28px; + } + .text .h3 { margin-bottom: 40px; } @@ -61,8 +66,8 @@ .text .h3, .text-content, .button-container { - padding-left: 53px; - padding-right: 53px; + padding-left: 50px; + padding-right: 50px; } .text-quote-wrapper { @@ -83,6 +88,11 @@ } @media (width >= 1440px) { + .text { + padding-left: 112px; + padding-right: 112px; + } + .text .h3 { margin-bottom: 40px; } diff --git a/blocks/title/title.js b/blocks/title/title.js index febb314..2b0dce1 100644 --- a/blocks/title/title.js +++ b/blocks/title/title.js @@ -1,9 +1,7 @@ -import { unwrapDivs, adjustPretitle } from '../../scripts/helpers.js'; +import { adjustPretitle } from '../../scripts/helpers.js'; export default async function decorate(block) { - unwrapDivs(block); adjustPretitle(block); - const isLineVariant = block.classList.contains('line'); const headings = block.querySelectorAll('h1, h2, h3, h4, h5, h6'); @@ -12,6 +10,9 @@ export default async function decorate(block) { heading.classList.add(headingClass); }); + const pretitle = block.querySelector('.pretitle'); + pretitle.classList.add('h5'); + if (isLineVariant) { const lineEle = document.createElement('div'); lineEle.classList.add('vertical-line-wrapper'); From 2d70f7347f1c9d743f8721924ef7d3d72b3d9856 Mon Sep 17 00:00:00 2001 From: Tomasz Dziezyk Date: Fri, 18 Oct 2024 13:15:05 +0200 Subject: [PATCH 109/159] KAW-8116 Fix gallery translation on small devices --- blocks/feature/feature.js | 11 +++----- blocks/gallery/gallery.js | 53 ++++++++++++++++++++++++++------------- scripts/helpers.js | 11 ++++++++ 3 files changed, 49 insertions(+), 26 deletions(-) diff --git a/blocks/feature/feature.js b/blocks/feature/feature.js index 2ec8d49..abfc6d4 100644 --- a/blocks/feature/feature.js +++ b/blocks/feature/feature.js @@ -1,3 +1,5 @@ +import { onAppReady } from '../../scripts/helpers.js'; + const createNavigation = (block, slideCount, onClick) => { const slidesDots = (new Array(slideCount)) .fill(0) @@ -79,14 +81,7 @@ export default async function decorate(block) { firstTextEl.style.minHeight = `calc(${minHeight} + 20px)`; }; - const interval = setInterval(() => { - // initial calculaton when the page is ready - // (EDS adds the appear class when the page is ready) - if (document.body.classList.contains('appear')) { - clearInterval(interval); - onResize(); - } - }, 100); + onAppReady(onResize); window.addEventListener('resize', onResize); } diff --git a/blocks/gallery/gallery.js b/blocks/gallery/gallery.js index 4999f17..b147d81 100644 --- a/blocks/gallery/gallery.js +++ b/blocks/gallery/gallery.js @@ -1,37 +1,54 @@ +import { onAppReady } from '../../scripts/helpers.js'; + export default async function decorate(block) { const targets = block.querySelectorAll('.gallery div:has(>picture)'); - const buildThresholdArray = (steps) => Array(steps + 1) - .fill(0) - .map((_, index) => index / steps || 0); + const calcImagesIntersectionRatio = () => { + [...targets].forEach((el) => { + const { top, bottom, height } = el.getBoundingClientRect(); + let imageVisibleInPx = height; - const intersectionObserver = new IntersectionObserver((entries) => { - entries.forEach((entry) => { - const isIntersectingAtTop = entry.boundingClientRect.top < 0; - if (isIntersectingAtTop) { - // only update when intersecting in or out at the bottom of screen - return; + if (top > window.innerHeight) { + imageVisibleInPx = 0; + } else if (top > 0 && bottom > window.innerHeight) { + imageVisibleInPx = window.innerHeight - top; + } else if (top < 0 && bottom > window.innerHeight) { + imageVisibleInPx = window.innerHeight + Math.abs(top); + } else if (top < 0 && bottom < window.innerHeight) { + imageVisibleInPx = bottom + Math.abs(top); } + const imageVisibilityInPercent = (imageVisibleInPx * 100) / height; - const intersectionRatio = Math.ceil(entry.intersectionRatio * 100); - entry.target.style.setProperty('--gallery-intersection-ratio', intersectionRatio); + el.style.setProperty('--gallery-intersection-ratio', imageVisibilityInPercent); }); - }, { - threshold: buildThresholdArray(20), - }); + }; + + let scrollEventListener = null; + const startImagesAnimation = () => { + calcImagesIntersectionRatio(); - const observeTargets = () => targets.forEach((target) => intersectionObserver.observe(target)); + window.addEventListener('scroll', calcImagesIntersectionRatio); + }; + + const endImagesAnimation = () => { + if (scrollEventListener) { + window.removeEventListener('scroll', scrollEventListener); + scrollEventListener = null; + } + }; // only observe on large screens const isSmallUp = window.matchMedia('(min-width: 768px)'); - if (isSmallUp.matches) observeTargets(); + if (isSmallUp.matches) { + onAppReady(startImagesAnimation); + } isSmallUp.addEventListener('change', (evt) => { if (evt.matches) { - observeTargets(); + startImagesAnimation(); } else { - intersectionObserver.disconnect(); + endImagesAnimation(); } }); } diff --git a/scripts/helpers.js b/scripts/helpers.js index fb22f9e..6534e0f 100644 --- a/scripts/helpers.js +++ b/scripts/helpers.js @@ -251,3 +251,14 @@ export const gatherButtons = (buttonsContainers) => { } }); }; + +export const onAppReady = (onReady) => { + const interval = setInterval(() => { + // initial calculaton when the page is ready + // (EDS adds the appear class when the page is ready) + if (document.body.classList.contains('appear')) { + clearInterval(interval); + onReady(); + } + }, 100); +}; From 10faf0473d7ea06a7702cf506b7ca8f50368e160 Mon Sep 17 00:00:00 2001 From: Tomasz Dziezyk Date: Fri, 18 Oct 2024 15:28:05 +0200 Subject: [PATCH 110/159] KAW-8168 Fix font size --- blocks/highlight/highlight.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/blocks/highlight/highlight.js b/blocks/highlight/highlight.js index d17eee4..fade895 100644 --- a/blocks/highlight/highlight.js +++ b/blocks/highlight/highlight.js @@ -120,7 +120,7 @@ export default async function decorate(block) { }); slidesWrapper.classList.add('highlight-slides-wrapper'); - slidesContainer.classList.add('highlight-slides-container'); + slidesContainer.classList.add('highlight-slides-container', 'h6'); slidesContainer.append(...slides); slidesWrapper.append(slidesContainer); block.append(slidesWrapper); From d75127fc5926d2b79627b32b6cced8341443c613 Mon Sep 17 00:00:00 2001 From: Tomasz Dziezyk Date: Fri, 18 Oct 2024 15:35:21 +0200 Subject: [PATCH 111/159] KAW-8165 Fix gap between heading and paragraph --- blocks/hero/hero.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/blocks/hero/hero.css b/blocks/hero/hero.css index 436bd6a..938500e 100644 --- a/blocks/hero/hero.css +++ b/blocks/hero/hero.css @@ -257,6 +257,10 @@ main .hero-container .hero-wrapper { padding: 0 0 0 100px; } + .hero .hero-text-wrapper .h1 { + margin-bottom: 24px; + } + .hero .hero-pause-button { right: 100px; } From 155ad22b8c1d0ea77d818547f9350d9ecad637c6 Mon Sep 17 00:00:00 2001 From: Tomasz Dziezyk Date: Fri, 18 Oct 2024 15:45:28 +0200 Subject: [PATCH 112/159] KAW-8166 Fix font size --- blocks/hero/hero.css | 3 +++ blocks/hero/hero.js | 3 +-- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/blocks/hero/hero.css b/blocks/hero/hero.css index 436bd6a..2d1af2c 100644 --- a/blocks/hero/hero.css +++ b/blocks/hero/hero.css @@ -84,6 +84,9 @@ main .hero-container .hero-wrapper { height: 100%; justify-content: center; background-color: transparent; + font-size: 20px; + line-height: 28px; + font-weight: 500; } .hero .button span { diff --git a/blocks/hero/hero.js b/blocks/hero/hero.js index 954fa34..e7c01a2 100644 --- a/blocks/hero/hero.js +++ b/blocks/hero/hero.js @@ -162,7 +162,7 @@ export default function decorate(block) { } const textWrapper = document.createElement('div'); - textWrapper.classList.add('hero-text-wrapper', 'h6', 'dark'); + textWrapper.classList.add('hero-text-wrapper', 'dark'); textWrapper.append(...firstCell.querySelectorAll(':scope > *:not(picture, video)')); firstCell.append(textWrapper); @@ -184,7 +184,6 @@ export default function decorate(block) { } block.classList.add('countdown'); - textWrapper.classList.remove('h6'); generateTimeElements(block); startCountdown(block, date); } From a69997d7272b35aa7c73ffe04b60520458d629fc Mon Sep 17 00:00:00 2001 From: Tomasz Dziezyk Date: Fri, 18 Oct 2024 15:56:52 +0200 Subject: [PATCH 113/159] KAW-8159 Change the dot size --- blocks/feature/feature.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/blocks/feature/feature.css b/blocks/feature/feature.css index c18baa0..78f50e5 100644 --- a/blocks/feature/feature.css +++ b/blocks/feature/feature.css @@ -47,8 +47,8 @@ } .feature-slide-nav-dot { - width: 6px; - height: 6px; + width: 8px; + height: 8px; display: block; border: solid 1px var(--grey-90); color: transparent; From cb9f02eca72b100db66088fc9059deae5c5bbe62 Mon Sep 17 00:00:00 2001 From: Lakshmishri Date: Fri, 18 Oct 2024 16:26:38 +0200 Subject: [PATCH 114/159] KAW-8171 fix circle size --- blocks/vehicle-selector/vehicle-selector.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/blocks/vehicle-selector/vehicle-selector.css b/blocks/vehicle-selector/vehicle-selector.css index 0da9149..6ee84ca 100644 --- a/blocks/vehicle-selector/vehicle-selector.css +++ b/blocks/vehicle-selector/vehicle-selector.css @@ -185,7 +185,7 @@ ul.vehicle-selector__navigation { font-size: 0; line-height: 0; margin: 0; - padding: 12px; + padding: 7px; position: relative; opacity: 0; transition: opacity var(--duration-small) var(--easing-standard); From 68e0911ef28d55c058ab10b6314b4daa2de9d262 Mon Sep 17 00:00:00 2001 From: Lakshmishri Date: Fri, 18 Oct 2024 16:27:09 +0200 Subject: [PATCH 115/159] KAW-8173 fix fonts --- blocks/vehicle-selector/vehicle-selector.css | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/blocks/vehicle-selector/vehicle-selector.css b/blocks/vehicle-selector/vehicle-selector.css index 6ee84ca..d027d1e 100644 --- a/blocks/vehicle-selector/vehicle-selector.css +++ b/blocks/vehicle-selector/vehicle-selector.css @@ -98,8 +98,8 @@ font-size: 14px; line-height: 150%; } - -.description-value .h6 { +.description-value .h6 em { + font-style: normal; font-weight: 600; } @@ -239,6 +239,10 @@ ul.vehicle-selector__navigation { width: 100vw; margin-left: calc((100vw - 100%)* -1 / 2); } + + .description-value .h6 { + font-weight: 600; + } } @media screen and (width >= 1440px) { From ee3f7f22880e39893f38a1bd62b6d5665619d9f8 Mon Sep 17 00:00:00 2001 From: Lakshmishri Date: Fri, 18 Oct 2024 16:30:21 +0200 Subject: [PATCH 116/159] fix lint errors --- blocks/vehicle-selector/vehicle-selector.css | 1 + 1 file changed, 1 insertion(+) diff --git a/blocks/vehicle-selector/vehicle-selector.css b/blocks/vehicle-selector/vehicle-selector.css index d027d1e..73dc91e 100644 --- a/blocks/vehicle-selector/vehicle-selector.css +++ b/blocks/vehicle-selector/vehicle-selector.css @@ -98,6 +98,7 @@ font-size: 14px; line-height: 150%; } + .description-value .h6 em { font-style: normal; font-weight: 600; From 962c13b03841c4591f15a40e63785de494044136 Mon Sep 17 00:00:00 2001 From: Tomasz Dziezyk Date: Mon, 21 Oct 2024 09:14:19 +0200 Subject: [PATCH 117/159] KAS-8158 Fix letter spacing --- blocks/feature/feature.css | 1 + 1 file changed, 1 insertion(+) diff --git a/blocks/feature/feature.css b/blocks/feature/feature.css index 78f50e5..c41ac3d 100644 --- a/blocks/feature/feature.css +++ b/blocks/feature/feature.css @@ -62,6 +62,7 @@ background: var(--black); border-radius: 50%; border-width: 0; + letter-spacing: 0; } .feature .feature-text { From 362be2a2bce0894de7050f43e6f6a2e1df1d87de Mon Sep 17 00:00:00 2001 From: Ioana Iordache Date: Mon, 21 Oct 2024 10:14:55 +0200 Subject: [PATCH 118/159] KAW-812: gap between image and nav bar --- blocks/vehicle-selector/vehicle-selector.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/blocks/vehicle-selector/vehicle-selector.css b/blocks/vehicle-selector/vehicle-selector.css index 73dc91e..5e4aeef 100644 --- a/blocks/vehicle-selector/vehicle-selector.css +++ b/blocks/vehicle-selector/vehicle-selector.css @@ -121,7 +121,7 @@ ul.vehicle-selector__navigation { margin: 0; order: 1; overflow: auto; - padding: 10px 32px; + padding: 10px 32px 40px; position: relative; scrollbar-width: none; } From 8fd59cadfee5016f71dab7497cae5bfbfc894125 Mon Sep 17 00:00:00 2001 From: Tomasz Dziezyk Date: Mon, 21 Oct 2024 10:55:58 +0200 Subject: [PATCH 119/159] KAW-8174 Fix dots and margins --- blocks/feature/feature.css | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/blocks/feature/feature.css b/blocks/feature/feature.css index 78f50e5..bf76772 100644 --- a/blocks/feature/feature.css +++ b/blocks/feature/feature.css @@ -15,8 +15,8 @@ } .feature .feature-image { - width: 100vw; margin-left: calc((100vw - 100%) / -2); + margin-right: calc((100vw - 100%) / -2); } .feature .feature-image picture { @@ -36,6 +36,7 @@ right: 0; top: calc(75vw + 40px); margin-right: calc(var(--section-x-padding) * -1); + z-index: 1; } .feature .feature-slide-nav-item { @@ -80,6 +81,7 @@ .feature .feature-image { width: calc(50vw - 12px); + margin-right: unset; } .feature .feature-text { From a63b67d3824a530976a597df5adc944159e18492 Mon Sep 17 00:00:00 2001 From: Ioana Iordache Date: Mon, 21 Oct 2024 11:35:15 +0200 Subject: [PATCH 120/159] KAW-8176: fix js error --- blocks/title/title.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/blocks/title/title.js b/blocks/title/title.js index 2b0dce1..5459c58 100644 --- a/blocks/title/title.js +++ b/blocks/title/title.js @@ -11,7 +11,7 @@ export default async function decorate(block) { }); const pretitle = block.querySelector('.pretitle'); - pretitle.classList.add('h5'); + pretitle?.classList.add('h5'); if (isLineVariant) { const lineEle = document.createElement('div'); From e75ca8504b87c2a687c90ce08aef6db3a8900731 Mon Sep 17 00:00:00 2001 From: Tomasz Dziezyk Date: Mon, 21 Oct 2024 11:57:39 +0200 Subject: [PATCH 121/159] KAW-8174 Add slide change for feature --- blocks/feature/feature.js | 144 ++++++++++++++++++++++++++++++++------ 1 file changed, 124 insertions(+), 20 deletions(-) diff --git a/blocks/feature/feature.js b/blocks/feature/feature.js index abfc6d4..9e2eb26 100644 --- a/blocks/feature/feature.js +++ b/blocks/feature/feature.js @@ -1,4 +1,32 @@ -import { onAppReady } from '../../scripts/helpers.js'; +import { + isInViewport, onAppReady, onSlideUpOrDown, throttle, +} from '../../scripts/helpers.js'; + +const setActiveSlide = (newActiveIndex, block) => { + const slides = block.querySelectorAll('.feature-slides > div'); + const navItems = [...block.querySelectorAll('.feature-slide-nav-item')]; + + slides.forEach((slide, index) => { + if (newActiveIndex === index) { + slide.style.opacity = '1'; + slide.style.zIndex = '1'; + slide.classList.add('active'); + navItems[index].classList.add('active'); + } else { + slide.style.opacity = '0'; + slide.style.zIndex = '0'; + slide.classList.remove('active'); + navItems[index].classList.remove('active'); + } + }); +}; + +const getActiveSlideIndex = (block) => [...block.querySelectorAll('.feature-slide')] + .findIndex((slide) => slide.classList.contains('active')); + +const scrollToSlide = (block, slideIndex) => { + setActiveSlide(slideIndex, block); +}; const createNavigation = (block, slideCount, onClick) => { const slidesDots = (new Array(slideCount)) @@ -16,7 +44,7 @@ const createNavigation = (block, slideCount, onClick) => { dotEl.textContent = index + 1; navItem.append(dotEl); - navItem.addEventListener('click', () => onClick(index)); + navItem.addEventListener('click', () => onClick(index, block)); return navItem; }); @@ -27,6 +55,44 @@ const createNavigation = (block, slideCount, onClick) => { block.append(wrapper); }; +const trapScrollingForSlides = (block, { + hasNextSlide, hasPrevSlide, move, +}) => { + let restoreScolling = null; + let prevY = window.scrollY; + let blockedScrollYPosition = null; + let paused = false; + + window.addEventListener('scroll', () => { + if (paused) { + window.scrollTo({ top: blockedScrollYPosition, behavior: 'instant' }); + return; + } + + const hasSlideInDirection = prevY < window.scrollY ? hasNextSlide() : hasPrevSlide(); + prevY = window.scrollY; + + if (isInViewport(block)) { + if (hasSlideInDirection) { + paused = true; + blockedScrollYPosition = window.scrollY; + + window.scrollTo({ top: blockedScrollYPosition, behavior: 'instant' }); + restoreScolling = onSlideUpOrDown({ + move: (direction) => move(direction, restoreScolling), + onEnd: () => { paused = false; }, + }); + return; + } + } + + if (restoreScolling) { + restoreScolling(); + restoreScolling = null; + } + }); +}; + export default async function decorate(block) { const slideCount = block.querySelectorAll(':scope > div').length; const slideWrapper = document.createElement('div'); @@ -52,25 +118,8 @@ export default async function decorate(block) { heading.classList.add('h5'); }); - const slides = block.querySelectorAll('.feature-slides > div'); - const setActiveSlide = (newActiveIndex) => { - const navItems = [...block.querySelectorAll('.feature-slide-nav-item')]; - - slides.forEach((slide, index) => { - if (newActiveIndex === index) { - slide.style.opacity = '1'; - slide.style.zIndex = '1'; - navItems[index].classList.add('active'); - } else { - slide.style.opacity = '0'; - slide.style.zIndex = '0'; - navItems[index].classList.remove('active'); - } - }); - }; - createNavigation(block, slideCount, setActiveSlide); - setActiveSlide(0); + setActiveSlide(0, block); // making sure that the slide gets enought space to display slide navigation const onResize = () => { @@ -84,4 +133,59 @@ export default async function decorate(block) { onAppReady(onResize); window.addEventListener('resize', onResize); + + // trapping the scrolling so the user will scroll the next slides of the slider + const hasPrevSlide = () => { + const activeSlideIndex = getActiveSlideIndex(block); + return activeSlideIndex > 0; + }; + + const hasNextSlide = () => { + const activeSlideIndex = getActiveSlideIndex(block); + + return activeSlideIndex < slideCount - 1; + }; + + const prevSlide = (onNoPreSlide) => { + const activeSlideIndex = getActiveSlideIndex(block); + + if (!hasPrevSlide()) { + onNoPreSlide(); + return; + } + + scrollToSlide(block, activeSlideIndex - 1); + }; + const nextSlide = (onNoNextSlide) => { + const activeSlideIndex = getActiveSlideIndex(block); + + if (!hasNextSlide()) { + onNoNextSlide(); + return; + } + + scrollToSlide(block, activeSlideIndex + 1); + }; + + const move = throttle((direction, onNoSlide) => { + if (direction === 'up') { + if (!hasPrevSlide()) { + onNoSlide(); + return; + } + + prevSlide(); + } else { + if (!hasNextSlide()) { + onNoSlide(); + return; + } + + nextSlide(); + } + }, 1000); + + trapScrollingForSlides(block, { + hasNextSlide, hasPrevSlide, move, + }); } From d830bd5af1a101c4dfe6f6e9a80bb54286dde316 Mon Sep 17 00:00:00 2001 From: Tomasz Dziezyk Date: Mon, 21 Oct 2024 13:06:27 +0200 Subject: [PATCH 122/159] KAW-8174 Refactor sliding --- blocks/feature/feature.js | 96 +---------------------- blocks/highlight/highlight.js | 108 +++----------------------- blocks/specification/specification.js | 104 +++---------------------- scripts/slide-helper.js | 104 +++++++++++++++++++++++++ 4 files changed, 131 insertions(+), 281 deletions(-) create mode 100644 scripts/slide-helper.js diff --git a/blocks/feature/feature.js b/blocks/feature/feature.js index 9e2eb26..8544dc1 100644 --- a/blocks/feature/feature.js +++ b/blocks/feature/feature.js @@ -1,6 +1,7 @@ import { - isInViewport, onAppReady, onSlideUpOrDown, throttle, + onAppReady, } from '../../scripts/helpers.js'; +import addSliding from '../../scripts/slide-helper.js'; const setActiveSlide = (newActiveIndex, block) => { const slides = block.querySelectorAll('.feature-slides > div'); @@ -55,44 +56,6 @@ const createNavigation = (block, slideCount, onClick) => { block.append(wrapper); }; -const trapScrollingForSlides = (block, { - hasNextSlide, hasPrevSlide, move, -}) => { - let restoreScolling = null; - let prevY = window.scrollY; - let blockedScrollYPosition = null; - let paused = false; - - window.addEventListener('scroll', () => { - if (paused) { - window.scrollTo({ top: blockedScrollYPosition, behavior: 'instant' }); - return; - } - - const hasSlideInDirection = prevY < window.scrollY ? hasNextSlide() : hasPrevSlide(); - prevY = window.scrollY; - - if (isInViewport(block)) { - if (hasSlideInDirection) { - paused = true; - blockedScrollYPosition = window.scrollY; - - window.scrollTo({ top: blockedScrollYPosition, behavior: 'instant' }); - restoreScolling = onSlideUpOrDown({ - move: (direction) => move(direction, restoreScolling), - onEnd: () => { paused = false; }, - }); - return; - } - } - - if (restoreScolling) { - restoreScolling(); - restoreScolling = null; - } - }); -}; - export default async function decorate(block) { const slideCount = block.querySelectorAll(':scope > div').length; const slideWrapper = document.createElement('div'); @@ -134,58 +97,5 @@ export default async function decorate(block) { window.addEventListener('resize', onResize); - // trapping the scrolling so the user will scroll the next slides of the slider - const hasPrevSlide = () => { - const activeSlideIndex = getActiveSlideIndex(block); - return activeSlideIndex > 0; - }; - - const hasNextSlide = () => { - const activeSlideIndex = getActiveSlideIndex(block); - - return activeSlideIndex < slideCount - 1; - }; - - const prevSlide = (onNoPreSlide) => { - const activeSlideIndex = getActiveSlideIndex(block); - - if (!hasPrevSlide()) { - onNoPreSlide(); - return; - } - - scrollToSlide(block, activeSlideIndex - 1); - }; - const nextSlide = (onNoNextSlide) => { - const activeSlideIndex = getActiveSlideIndex(block); - - if (!hasNextSlide()) { - onNoNextSlide(); - return; - } - - scrollToSlide(block, activeSlideIndex + 1); - }; - - const move = throttle((direction, onNoSlide) => { - if (direction === 'up') { - if (!hasPrevSlide()) { - onNoSlide(); - return; - } - - prevSlide(); - } else { - if (!hasNextSlide()) { - onNoSlide(); - return; - } - - nextSlide(); - } - }, 1000); - - trapScrollingForSlides(block, { - hasNextSlide, hasPrevSlide, move, - }); + addSliding(block, { getActiveSlideIndex, slideCount, scrollToSlide }); } diff --git a/blocks/highlight/highlight.js b/blocks/highlight/highlight.js index fade895..5218850 100644 --- a/blocks/highlight/highlight.js +++ b/blocks/highlight/highlight.js @@ -1,4 +1,5 @@ -import { isInViewport, onSlideUpOrDown, throttle } from '../../scripts/helpers.js'; +import { throttle } from '../../scripts/helpers.js'; +import addSliding from '../../scripts/slide-helper.js'; const setScaleForPicture = (block, picture, onSetScale) => { const setScale = () => { @@ -38,7 +39,8 @@ const setScaleForPicture = (block, picture, onSetScale) => { const getActiveSlideIndex = (block) => [...block.querySelectorAll('.highlight-slide')] .findIndex((slide) => slide.classList.contains('active')); -const scrollToSlide = (slidersContainer, slideIndex) => { +const scrollToSlide = (block, slideIndex) => { + const slidersContainer = block.querySelector('.highlight-slides-container'); slidersContainer.style.transform = `translateY(-${slideIndex * 100}%)`; slidersContainer.querySelectorAll('.highlight-slide').forEach((slide, index) => { const addOrRemove = index === slideIndex ? 'add' : 'remove'; @@ -46,48 +48,6 @@ const scrollToSlide = (slidersContainer, slideIndex) => { }); }; -const trapScrollingForSlides = (block, { - hasNextSlide, hasPrevSlide, move, -}) => { - let restoreScolling = null; - let prevY = window.scrollY; - let blockedScrollYPosition = null; - let paused = false; - - window.addEventListener('scroll', () => { - if (paused) { - window.scrollTo({ top: blockedScrollYPosition, behavior: 'instant' }); - return; - } - - const hasSlideInDirection = prevY < window.scrollY ? hasNextSlide() : hasPrevSlide(); - prevY = window.scrollY; - - if (isInViewport(block)) { - block.classList.add('active'); - - if (hasSlideInDirection) { - paused = true; - blockedScrollYPosition = window.scrollY; - - window.scrollTo({ top: blockedScrollYPosition, behavior: 'instant' }); - restoreScolling = onSlideUpOrDown({ - move: (direction) => move(direction, restoreScolling), - onEnd: () => { paused = false; }, - }); - return; - } - } else { - block.classList.remove('active'); - } - - if (restoreScolling) { - restoreScolling(); - restoreScolling = null; - } - }); -}; - const addFlag = (block) => { const falgEl = ` @@ -135,60 +95,16 @@ export default async function decorate(block) { }; setScaleForPicture(block, picture, onSetScaleForPicture); - // trapping the scrolling so the user will scroll the next slides of the slider - const container = block.querySelector('.highlight-slides-container'); - const hasPrevSlide = () => { - const activeSlideIndex = getActiveSlideIndex(block); - return activeSlideIndex > 0; - }; - - const hasNextSlide = () => { - const activeSlideIndex = getActiveSlideIndex(block); - const slideCount = block.querySelectorAll('.highlight-slide').length; - - return activeSlideIndex < slideCount - 1; - }; - - const prevSlide = (onNoPreSlide) => { - const activeSlideIndex = getActiveSlideIndex(block); - - if (!hasPrevSlide()) { - onNoPreSlide(); - return; - } - - scrollToSlide(container, activeSlideIndex - 1); - }; - const nextSlide = (onNoNextSlide) => { - const activeSlideIndex = getActiveSlideIndex(block); - - if (!hasNextSlide()) { - onNoNextSlide(); - return; - } - - scrollToSlide(container, activeSlideIndex + 1); - }; - - const move = throttle((direction, onNoSlide) => { - if (direction === 'up') { - if (!hasPrevSlide()) { - onNoSlide(); - return; - } - - prevSlide(); + const onInViewport = (inViewport) => { + if (inViewport) { + block.classList.add('active'); } else { - if (!hasNextSlide()) { - onNoSlide(); - return; - } - - nextSlide(); + block.classList.remove('active'); } - }, 1000); + }; + const slideCount = [...block.querySelectorAll('.highlight-slide')].length; - trapScrollingForSlides(block, { - hasNextSlide, hasPrevSlide, move, + addSliding(block, { + getActiveSlideIndex, slideCount, scrollToSlide, onInViewport, }); } diff --git a/blocks/specification/specification.js b/blocks/specification/specification.js index cf96881..6ca4e32 100644 --- a/blocks/specification/specification.js +++ b/blocks/specification/specification.js @@ -1,4 +1,4 @@ -import { isInViewport, onSlideUpOrDown, throttle } from '../../scripts/helpers.js'; +import addSliding from '../../scripts/slide-helper.js'; export default function decorate(block) { const content = block.querySelector(':scope > div'); @@ -42,51 +42,10 @@ export default function decorate(block) { specificationStatsWrapper.append(stat); }); - // trapping the scrolling so the user will scroll the next slides of the slider - const trapScrollingForSlides = ({ hasNextSlide, hasPrevSlide, move }) => { - let restoreScolling = null; - let prevY = window.scrollY; - let blockedScrollYPosition = null; - let paused = false; - - window.addEventListener('scroll', () => { - if (paused) { - window.scrollTo({ top: blockedScrollYPosition, behavior: 'instant' }); - return; - } - - const hasSlideInDirection = prevY < window.scrollY ? hasNextSlide() : hasPrevSlide(); - prevY = window.scrollY; - - if (isInViewport(block)) { - block.classList.add('active'); - - if (hasSlideInDirection) { - paused = true; - blockedScrollYPosition = window.scrollY; - - window.scrollTo({ top: blockedScrollYPosition, behavior: 'instant' }); - restoreScolling = onSlideUpOrDown({ - move: (direction) => move(direction, restoreScolling), - onEnd: () => { paused = false; }, - }); - return; - } - } else { - block.classList.remove('active'); - } - - if (restoreScolling) { - restoreScolling(); - restoreScolling = null; - } - }); - }; - const getActiveSlideIndex = () => [...block.querySelectorAll('.specification-images > *')] .findIndex((slide) => slide.classList.contains('active')); - const scrollToSlide = (slideIndex) => { + const scrollToSlide = (_, slideIndex) => { [...block.querySelectorAll('.specification-images > *')] .forEach((el, index) => { if (slideIndex === index) { @@ -99,57 +58,18 @@ export default function decorate(block) { }); }; - const hasPrevSlide = () => { - const activeSlideIndex = getActiveSlideIndex(); - return activeSlideIndex > 0; - }; - - const hasNextSlide = () => { - const activeSlideIndex = getActiveSlideIndex(); - const slideCount = block.querySelectorAll('.specification-images > *').length; - - return activeSlideIndex < slideCount - 1; - }; - - const prevSlide = (onNoPreSlide) => { - const activeSlideIndex = getActiveSlideIndex(); - - if (!hasPrevSlide()) { - onNoPreSlide(); - return; - } - - scrollToSlide(activeSlideIndex - 1); - }; - const nextSlide = (onNoNextSlide) => { - const activeSlideIndex = getActiveSlideIndex(); - - if (!hasNextSlide()) { - onNoNextSlide(); - return; - } + scrollToSlide(block, 0); - scrollToSlide(activeSlideIndex + 1); - }; - - const move = throttle((direction, onNoSlide) => { - if (direction === 'up') { - if (!hasPrevSlide()) { - onNoSlide(); - return; - } - - prevSlide(); + const slideCount = block.querySelectorAll('.specification-images > *').length; + const onInViewport = (inViewport) => { + if (inViewport) { + block.classList.add('active'); } else { - if (!hasNextSlide()) { - onNoSlide(); - return; - } - - nextSlide(); + block.classList.remove('active'); } - }, 1000); + }; - scrollToSlide(0); - trapScrollingForSlides({ hasNextSlide, hasPrevSlide, move }); + addSliding(block, { + getActiveSlideIndex, slideCount, scrollToSlide, onInViewport, + }); } diff --git a/scripts/slide-helper.js b/scripts/slide-helper.js new file mode 100644 index 0000000..a6c62a5 --- /dev/null +++ b/scripts/slide-helper.js @@ -0,0 +1,104 @@ +import { isInViewport, onSlideUpOrDown, throttle } from './helpers.js'; + +const trapScrollingForSlides = (block, { + hasNextSlide, hasPrevSlide, move, onInViewport, +}) => { + let restoreScolling = null; + let prevY = window.scrollY; + let blockedScrollYPosition = null; + let paused = false; + + window.addEventListener('scroll', () => { + if (paused) { + window.scrollTo({ top: blockedScrollYPosition, behavior: 'instant' }); + return; + } + + const hasSlideInDirection = prevY < window.scrollY ? hasNextSlide() : hasPrevSlide(); + prevY = window.scrollY; + + if (isInViewport(block)) { + onInViewport(true); + + if (hasSlideInDirection) { + paused = true; + blockedScrollYPosition = window.scrollY; + + window.scrollTo({ top: blockedScrollYPosition, behavior: 'instant' }); + restoreScolling = onSlideUpOrDown({ + move: (direction) => move(direction, restoreScolling), + onEnd: () => { paused = false; }, + }); + return; + } + } else { + onInViewport(false); + } + + if (restoreScolling) { + restoreScolling(); + restoreScolling = null; + } + }); +}; + +const addSliding = (block, { + getActiveSlideIndex, slideCount, scrollToSlide, onInViewport = () => { }, +}) => { + // trapping the scrolling so the user will scroll the next slides of the slider + const hasPrevSlide = () => { + const activeSlideIndex = getActiveSlideIndex(block); + return activeSlideIndex > 0; + }; + + const hasNextSlide = () => { + const activeSlideIndex = getActiveSlideIndex(block); + + return activeSlideIndex < slideCount - 1; + }; + + const prevSlide = (onNoPreSlide) => { + const activeSlideIndex = getActiveSlideIndex(block); + + if (!hasPrevSlide()) { + onNoPreSlide(); + return; + } + + scrollToSlide(block, activeSlideIndex - 1); + }; + const nextSlide = (onNoNextSlide) => { + const activeSlideIndex = getActiveSlideIndex(block); + + if (!hasNextSlide()) { + onNoNextSlide(); + return; + } + + scrollToSlide(block, activeSlideIndex + 1); + }; + + const move = throttle((direction, onNoSlide) => { + if (direction === 'up') { + if (!hasPrevSlide()) { + onNoSlide(); + return; + } + + prevSlide(); + } else { + if (!hasNextSlide()) { + onNoSlide(); + return; + } + + nextSlide(); + } + }, 1000); + + trapScrollingForSlides(block, { + hasNextSlide, hasPrevSlide, move, onInViewport, + }); +}; + +export default addSliding; From 01e2439e5e1f3ed0ac2724af0e4cc7be454278c7 Mon Sep 17 00:00:00 2001 From: Tomasz Dziezyk Date: Mon, 21 Oct 2024 14:06:12 +0200 Subject: [PATCH 123/159] KAW-8175 Fix lineheight for headings --- styles/styles.css | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/styles/styles.css b/styles/styles.css index 0ab846d..9d080f9 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -128,7 +128,7 @@ h1, font-size: 2.875rem; font-style: normal; font-weight: 500; - line-height: 140%; + line-height: 130%; letter-spacing: 0; } @@ -155,7 +155,7 @@ h4, font-size: 1.5rem; font-style: normal; font-weight: 500; - line-height: 130%; + line-height: 140%; letter-spacing: 0.15px; } @@ -214,18 +214,21 @@ h6, .h1 { font-size: 4.375rem; letter-spacing: -1.5px; + line-height: 120%; } h2, .h2 { font-size: 3rem; letter-spacing: -0.5px; + line-height: 120%; } h3, .h3 { font-size: 2.5rem; letter-spacing: 0; + line-height: 130%; } h4, From be7b6a9bb7ff40ea3f0265740a7fe6c284e1b3dc Mon Sep 17 00:00:00 2001 From: Tomasz Dziezyk Date: Mon, 21 Oct 2024 14:36:44 +0200 Subject: [PATCH 124/159] KAW-8164 Fix specification table size --- blocks/specification-table/specification-table.css | 4 ++-- blocks/specification/specification.css | 6 ++++++ 2 files changed, 8 insertions(+), 2 deletions(-) diff --git a/blocks/specification-table/specification-table.css b/blocks/specification-table/specification-table.css index 7899d06..b5e3b87 100644 --- a/blocks/specification-table/specification-table.css +++ b/blocks/specification-table/specification-table.css @@ -84,7 +84,7 @@ @media (width >= 1440px) { .specification-table .st-category-wrapper .st-category { - width: 195px; - min-width: 195px; + width: 241px; + min-width: 241px; } } diff --git a/blocks/specification/specification.css b/blocks/specification/specification.css index 5d37b4a..bd4f0ec 100644 --- a/blocks/specification/specification.css +++ b/blocks/specification/specification.css @@ -42,11 +42,13 @@ .specification .specification-images { position: relative; + flex-grow: 1; } .specification .specification-images p { margin: 0; transition: opacity 300ms linear; + width: 100%; } .specification .specification-images p:not(:first-child) { @@ -59,6 +61,10 @@ display: flex; } +.specification .specification-images picture img { + width: 100%; +} + @media (width >= 768px) { .specification .specification-content { flex-direction: row; From d3b96477ee7071417062888d8f3927dd01d0dc96 Mon Sep 17 00:00:00 2001 From: Tomasz Dziezyk Date: Tue, 22 Oct 2024 13:41:04 +0200 Subject: [PATCH 125/159] KAW-8177 Fix section spacing --- blocks/hero/hero.css | 2 +- blocks/text-with-image/text-with-image.css | 11 +++----- scripts/scripts.js | 13 +++++++++ styles/styles.css | 32 ++++++++++++++++------ 4 files changed, 42 insertions(+), 16 deletions(-) diff --git a/blocks/hero/hero.css b/blocks/hero/hero.css index 20b8f1e..f8ce6f9 100644 --- a/blocks/hero/hero.css +++ b/blocks/hero/hero.css @@ -3,7 +3,7 @@ main .hero-container > div { } main .hero-container { - padding: 0; + padding: 0 0 var(--section-bottom-padding); } main .hero-container .hero-wrapper { diff --git a/blocks/text-with-image/text-with-image.css b/blocks/text-with-image/text-with-image.css index 74f641e..427e5ce 100644 --- a/blocks/text-with-image/text-with-image.css +++ b/blocks/text-with-image/text-with-image.css @@ -1,8 +1,8 @@ .text-with-image { --animation-time: 300ms; - padding-top: 60px; - padding-bottom: 60px; + padding-top: 0; + padding-bottom: 0; } .text-with-image span[class^="icon-"] { @@ -94,6 +94,8 @@ /* wide stacked images variant */ .text-with-image.wide-stacked-images { --text-image-2nd-image-height: 149px; + + overflow-y: clip; } .text-with-image.wide-stacked-images .text-with-image-row { @@ -123,11 +125,6 @@ } @media (width >= 768px) { - .text-with-image { - padding-top: 80px; - padding-bottom: 80px; - } - .text-with-image .text-with-image-row { gap: 60px; flex-direction: row; diff --git a/scripts/scripts.js b/scripts/scripts.js index bf78d00..a927503 100644 --- a/scripts/scripts.js +++ b/scripts/scripts.js @@ -149,6 +149,18 @@ export function decorateMain(main) { swappingPlacesBlock(main); } +function supportDocumentStyle() { + const styleMetadata = document.querySelector('meta[name="style"'); + + if (!styleMetadata) { + return; + } + + const styles = styleMetadata.getAttribute('content').split(',').map((el) => el.trim()); + + document.body.classList.add(...styles); +} + /** * Loads everything needed to get to LCP. * @param {Element} doc The container element @@ -159,6 +171,7 @@ async function loadEager(doc) { const main = doc.querySelector('main'); if (main) { decorateMain(main); + supportDocumentStyle(); document.body.classList.add('appear'); await loadSection(main.querySelector('.section'), waitForFirstImage); } diff --git a/styles/styles.css b/styles/styles.css index 9d080f9..724d30a 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -20,7 +20,7 @@ --nav-height: 70px; /* section paddings */ - --section-y-padding: 40px; + --section-bottom-padding: 60px; --section-x-padding: 20px; /* grid gap */ @@ -80,6 +80,11 @@ --action-focus: #999; } +:root .homepage, +:root .pdp { + --section-bottom-padding: 80px; +} + * { box-sizing: border-box; } @@ -506,12 +511,12 @@ video { /* blocks */ div[class$="-wrapper"]:not(:first-child) { - padding-top: 30px; + padding-top: 40px; } -@media (width >= 960px) { +@media (width >= 1025px) { div[class$="-wrapper"]:not(:first-child) { - padding-top: 40px; + padding-top: 60px; } } @@ -521,21 +526,20 @@ header:not(.can-be-transparent) + main { /* sections */ main .section { - padding: var(--section-y-padding) var(--section-x-padding); + padding: 0 var(--section-x-padding) var(--section-bottom-padding); } main .section:first-child { padding-top: 0; } -main .section:last-child, +main .section.nba-container:last-child, main .section.padding-bottom-0 { padding-bottom: 0; } @media (width >= 768px) { :root { - --section-y-padding: 40px; --section-x-padding: 30px; --grid-gap: 24px; } @@ -543,10 +547,15 @@ main .section.padding-bottom-0 { @media (width >= 1025px) { :root { - --section-y-padding: 70px; + --section-bottom-padding: 80px; --section-x-padding: 40px; } + :root .homepage, + :root .pdp { + --section-bottom-padding: 120px; + } + .section > div { max-width: 1240px; margin: auto; @@ -575,6 +584,13 @@ main .section.padding-bottom-0 { margin-right: calc(-1 * var(--section-x-padding)); } +@media (width >= 1440px) { + .block.full-width { + margin-left: calc((100vw - 1240px) / -2); + margin-right: calc((100vw - 1240px) / -2); + } +} + /* section metadata */ main .section.light, main .section.highlight { From 3cc643ba9fb6dca322e2093e78cc8e7a4b6bbf98 Mon Sep 17 00:00:00 2001 From: Tomasz Dziezyk Date: Tue, 22 Oct 2024 13:55:47 +0200 Subject: [PATCH 126/159] KAW-8177 Remove title paddings --- blocks/title/title.css | 15 ++------------- 1 file changed, 2 insertions(+), 13 deletions(-) diff --git a/blocks/title/title.css b/blocks/title/title.css index 05c3d6c..765d227 100644 --- a/blocks/title/title.css +++ b/blocks/title/title.css @@ -1,6 +1,6 @@ .title { - padding-top: 40px; - padding-bottom: 60px; + padding-top: 0; + padding-bottom: 0; max-width: 616px; display: flex; flex-flow: column; @@ -17,8 +17,6 @@ } .title.line { - padding-top: 80px; - padding-bottom: 40px; align-items: center; margin-inline: auto; text-align: center; @@ -45,20 +43,11 @@ @media (width >= 768px) { .title { max-width: 784px; - padding-top: 60px; - padding-bottom: 60px; - } - - .title.line { - padding-top: 120px; - padding-bottom: 60px; } } @media (width >= 1024px) { .title { max-width: 924px; - padding-top: 80px; - padding-bottom: 120px; } } \ No newline at end of file From 10055546731c0ff46237dddc7cf89a270f4d085b Mon Sep 17 00:00:00 2001 From: Tomasz Dziezyk Date: Tue, 22 Oct 2024 13:59:15 +0200 Subject: [PATCH 127/159] KAW-8177 Fix logo hover color --- blocks/header/header.css | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/blocks/header/header.css b/blocks/header/header.css index 4fcfe82..2d76337 100644 --- a/blocks/header/header.css +++ b/blocks/header/header.css @@ -52,6 +52,12 @@ header .nav-brand { flex-grow: 1; } +header .nav-brand a:hover, +header .nav-brand a:focus, +header .nav-brand a:active { + color: inherit; +} + header .nav-brand span.icon { display: flex; height: auto; From 7be0295b8d7a223b3c5407d93ae3de5ee59be998 Mon Sep 17 00:00:00 2001 From: Ioana Iordache Date: Tue, 22 Oct 2024 15:11:36 +0200 Subject: [PATCH 128/159] KAW-8144, KAW-8145 --- blocks/teaser/teaser.css | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/blocks/teaser/teaser.css b/blocks/teaser/teaser.css index bd2d6ae..9937a57 100644 --- a/blocks/teaser/teaser.css +++ b/blocks/teaser/teaser.css @@ -32,7 +32,7 @@ } .teaser .teaser-card-body .h4, -.teaser .teaser-card-body p { +.teaser .teaser-card-body p:not(.button-container) { margin-bottom: 16px; } @@ -129,6 +129,10 @@ div.teaser-wrapper + div.teaser-wrapper { .teaser.image li { min-height: 451px; } + + .teaser.image .teaser-card-body { + padding: 28px 20px; + } } @media (width >= 1440px) { From 431c1fc50d7556891f6a40e747b7aebb16e22ff0 Mon Sep 17 00:00:00 2001 From: Tomasz Dziezyk Date: Wed, 23 Oct 2024 09:50:50 +0200 Subject: [PATCH 129/159] KAW-8183 Fix CLS --- blocks/header/header.js | 2 +- scripts/scripts.js | 7 +++++++ styles/styles.css | 6 +++++- 3 files changed, 13 insertions(+), 2 deletions(-) diff --git a/blocks/header/header.js b/blocks/header/header.js index 00381d8..b13ad9d 100644 --- a/blocks/header/header.js +++ b/blocks/header/header.js @@ -161,7 +161,7 @@ function redirectPage(event) { } function handleTransparentAndScrolling(nav) { - const useTransparentVariant = !!document.querySelector('main > .section > .hero-wrapper'); + const useTransparentVariant = !!document.querySelector('main > .section:first-child > .hero-wrapper:first-child'); const header = nav.closest('header'); let prevScrollingPosition = 0; diff --git a/scripts/scripts.js b/scripts/scripts.js index bf78d00..fc9f3d3 100644 --- a/scripts/scripts.js +++ b/scripts/scripts.js @@ -149,6 +149,12 @@ export function decorateMain(main) { swappingPlacesBlock(main); } +function setMainPosition(main) { + if (main.querySelector(':scope > .section:first-child > .hero-wrapper:first-child')) { + main.classList.add('no-top-margin'); + } +} + /** * Loads everything needed to get to LCP. * @param {Element} doc The container element @@ -159,6 +165,7 @@ async function loadEager(doc) { const main = doc.querySelector('main'); if (main) { decorateMain(main); + setMainPosition(main); document.body.classList.add('appear'); await loadSection(main.querySelector('.section'), waitForFirstImage); } diff --git a/styles/styles.css b/styles/styles.css index 9d080f9..bfb823f 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -515,10 +515,14 @@ div[class$="-wrapper"]:not(:first-child) { } } -header:not(.can-be-transparent) + main { +main { margin-top: var(--nav-height); } +main.no-top-margin { + margin-top: 0;; +} + /* sections */ main .section { padding: var(--section-y-padding) var(--section-x-padding); From 7734a242dc4c4c6e32f9e7c2fe6a128675ef2916 Mon Sep 17 00:00:00 2001 From: Tomasz Dziezyk Date: Wed, 23 Oct 2024 09:53:28 +0200 Subject: [PATCH 130/159] KAW-8183 Formatting --- styles/styles.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/styles/styles.css b/styles/styles.css index bfb823f..14ac88b 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -520,7 +520,7 @@ main { } main.no-top-margin { - margin-top: 0;; + margin-top: 0; } /* sections */ From ccb19b626fbea2f3880e15ec97469b3c237e0978 Mon Sep 17 00:00:00 2001 From: Tomasz Dziezyk Date: Wed, 23 Oct 2024 11:59:22 +0200 Subject: [PATCH 131/159] KAW-8184 Replace the trapped scroll to animation --- blocks/feature/feature.js | 10 --- blocks/highlight/highlight.js | 16 ++-- blocks/specification/specification.js | 15 ++-- scripts/helpers.js | 83 ++++++-------------- scripts/slide-helper.js | 104 -------------------------- 5 files changed, 33 insertions(+), 195 deletions(-) delete mode 100644 scripts/slide-helper.js diff --git a/blocks/feature/feature.js b/blocks/feature/feature.js index 8544dc1..fdfbc36 100644 --- a/blocks/feature/feature.js +++ b/blocks/feature/feature.js @@ -1,7 +1,6 @@ import { onAppReady, } from '../../scripts/helpers.js'; -import addSliding from '../../scripts/slide-helper.js'; const setActiveSlide = (newActiveIndex, block) => { const slides = block.querySelectorAll('.feature-slides > div'); @@ -22,13 +21,6 @@ const setActiveSlide = (newActiveIndex, block) => { }); }; -const getActiveSlideIndex = (block) => [...block.querySelectorAll('.feature-slide')] - .findIndex((slide) => slide.classList.contains('active')); - -const scrollToSlide = (block, slideIndex) => { - setActiveSlide(slideIndex, block); -}; - const createNavigation = (block, slideCount, onClick) => { const slidesDots = (new Array(slideCount)) .fill(0) @@ -96,6 +88,4 @@ export default async function decorate(block) { onAppReady(onResize); window.addEventListener('resize', onResize); - - addSliding(block, { getActiveSlideIndex, slideCount, scrollToSlide }); } diff --git a/blocks/highlight/highlight.js b/blocks/highlight/highlight.js index 5218850..6061ac0 100644 --- a/blocks/highlight/highlight.js +++ b/blocks/highlight/highlight.js @@ -1,5 +1,4 @@ -import { throttle } from '../../scripts/helpers.js'; -import addSliding from '../../scripts/slide-helper.js'; +import { autoScrollSlidesWhenInView, throttle } from '../../scripts/helpers.js'; const setScaleForPicture = (block, picture, onSetScale) => { const setScale = () => { @@ -95,16 +94,11 @@ export default async function decorate(block) { }; setScaleForPicture(block, picture, onSetScaleForPicture); - const onInViewport = (inViewport) => { - if (inViewport) { - block.classList.add('active'); - } else { - block.classList.remove('active'); - } - }; const slideCount = [...block.querySelectorAll('.highlight-slide')].length; - addSliding(block, { - getActiveSlideIndex, slideCount, scrollToSlide, onInViewport, + autoScrollSlidesWhenInView(block, { + getActiveIndex: getActiveSlideIndex, + slideCount, + scrollToSlide, }); } diff --git a/blocks/specification/specification.js b/blocks/specification/specification.js index 6ca4e32..6457a8f 100644 --- a/blocks/specification/specification.js +++ b/blocks/specification/specification.js @@ -1,4 +1,4 @@ -import addSliding from '../../scripts/slide-helper.js'; +import { autoScrollSlidesWhenInView } from '../../scripts/helpers.js'; export default function decorate(block) { const content = block.querySelector(':scope > div'); @@ -61,15 +61,10 @@ export default function decorate(block) { scrollToSlide(block, 0); const slideCount = block.querySelectorAll('.specification-images > *').length; - const onInViewport = (inViewport) => { - if (inViewport) { - block.classList.add('active'); - } else { - block.classList.remove('active'); - } - }; - addSliding(block, { - getActiveSlideIndex, slideCount, scrollToSlide, onInViewport, + autoScrollSlidesWhenInView(block, { + getActiveIndex: getActiveSlideIndex, + slideCount, + scrollToSlide, }); } diff --git a/scripts/helpers.js b/scripts/helpers.js index 6534e0f..5e44833 100644 --- a/scripts/helpers.js +++ b/scripts/helpers.js @@ -166,66 +166,6 @@ export function createElement(tagName, options = {}) { return elem; } -export const onSlideUpOrDown = ({ move, onEnd }) => { - let startX; - let startY; - - const touchStart = (event) => { - // Store the starting touch position - startX = event.touches[0].pageX; - startY = event.touches[0].pageY; - }; - - const touchMove = (event) => { - if (event.cancelable) { - event.preventDefault(); - event.stopPropagation(); - } - - // Calculate the distance moved in both directions - const moveX = event.touches[0].pageX - startX; - const moveY = event.touches[0].pageY - startY; - - // Determine direction - if (Math.abs(moveY) > Math.abs(moveX)) { - if (moveY > 0) { - move('up'); - } else { - move('down'); - } - } - }; - - const onWheel = (event) => { - if (event.cancelable) { - event.preventDefault(); - event.stopPropagation(); - } - - if (event.deltaY > 0) { - move('down'); - } else { - move('up'); - } - }; - - window.addEventListener('touchstart', touchStart, { passive: false }); - window.addEventListener('touchmove', touchMove, { passive: false }); - window.addEventListener('wheel', onWheel, { passive: false }); - - const clean = () => { - window.removeEventListener('touchstart', touchStart, { passive: false }); - window.removeEventListener('touchmove', touchMove, { passive: false }); - window.removeEventListener('wheel', onWheel, { passive: false }); - - if (onEnd) { - onEnd(); - } - }; - - return clean; -}; - export const isInViewport = (element) => { const rect = element.getBoundingClientRect(); const windowHeight = (window.visualViewport || window).height; @@ -262,3 +202,26 @@ export const onAppReady = (onReady) => { } }, 100); }; + +export const autoScrollSlidesWhenInView = (block, { + getActiveIndex, slideCount, scrollToSlide, +}) => { + let interval = null; + + window.addEventListener('scroll', throttle(() => { + if (isInViewport(block) && !interval) { + block.classList.add('active'); + + interval = setInterval(() => { + const activeIndex = getActiveIndex(block); + const newActiveIndex = activeIndex === slideCount - 1 ? 0 : activeIndex + 1; + + scrollToSlide(block, newActiveIndex); + }, 3000); + } else if (!isInViewport(block)) { + block.classList.remove('active'); + clearInterval(interval); + interval = null; + } + }, 100)); +}; diff --git a/scripts/slide-helper.js b/scripts/slide-helper.js deleted file mode 100644 index a6c62a5..0000000 --- a/scripts/slide-helper.js +++ /dev/null @@ -1,104 +0,0 @@ -import { isInViewport, onSlideUpOrDown, throttle } from './helpers.js'; - -const trapScrollingForSlides = (block, { - hasNextSlide, hasPrevSlide, move, onInViewport, -}) => { - let restoreScolling = null; - let prevY = window.scrollY; - let blockedScrollYPosition = null; - let paused = false; - - window.addEventListener('scroll', () => { - if (paused) { - window.scrollTo({ top: blockedScrollYPosition, behavior: 'instant' }); - return; - } - - const hasSlideInDirection = prevY < window.scrollY ? hasNextSlide() : hasPrevSlide(); - prevY = window.scrollY; - - if (isInViewport(block)) { - onInViewport(true); - - if (hasSlideInDirection) { - paused = true; - blockedScrollYPosition = window.scrollY; - - window.scrollTo({ top: blockedScrollYPosition, behavior: 'instant' }); - restoreScolling = onSlideUpOrDown({ - move: (direction) => move(direction, restoreScolling), - onEnd: () => { paused = false; }, - }); - return; - } - } else { - onInViewport(false); - } - - if (restoreScolling) { - restoreScolling(); - restoreScolling = null; - } - }); -}; - -const addSliding = (block, { - getActiveSlideIndex, slideCount, scrollToSlide, onInViewport = () => { }, -}) => { - // trapping the scrolling so the user will scroll the next slides of the slider - const hasPrevSlide = () => { - const activeSlideIndex = getActiveSlideIndex(block); - return activeSlideIndex > 0; - }; - - const hasNextSlide = () => { - const activeSlideIndex = getActiveSlideIndex(block); - - return activeSlideIndex < slideCount - 1; - }; - - const prevSlide = (onNoPreSlide) => { - const activeSlideIndex = getActiveSlideIndex(block); - - if (!hasPrevSlide()) { - onNoPreSlide(); - return; - } - - scrollToSlide(block, activeSlideIndex - 1); - }; - const nextSlide = (onNoNextSlide) => { - const activeSlideIndex = getActiveSlideIndex(block); - - if (!hasNextSlide()) { - onNoNextSlide(); - return; - } - - scrollToSlide(block, activeSlideIndex + 1); - }; - - const move = throttle((direction, onNoSlide) => { - if (direction === 'up') { - if (!hasPrevSlide()) { - onNoSlide(); - return; - } - - prevSlide(); - } else { - if (!hasNextSlide()) { - onNoSlide(); - return; - } - - nextSlide(); - } - }, 1000); - - trapScrollingForSlides(block, { - hasNextSlide, hasPrevSlide, move, onInViewport, - }); -}; - -export default addSliding; From 1c68185d123841d342347c5f5e018bd7e519c312 Mon Sep 17 00:00:00 2001 From: Tomasz Dziezyk Date: Wed, 23 Oct 2024 12:11:57 +0200 Subject: [PATCH 132/159] KAW-8184 Increas the clickable size of the feature dots --- blocks/feature/feature.css | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/blocks/feature/feature.css b/blocks/feature/feature.css index ef28a7a..3a29522 100644 --- a/blocks/feature/feature.css +++ b/blocks/feature/feature.css @@ -40,8 +40,8 @@ } .feature .feature-slide-nav-item { - width: 32px; - height: 32px; + width: 42px; + height: 42px; display: flex; align-items: center; justify-content: center; @@ -67,7 +67,7 @@ } .feature .feature-text { - padding-right: 26px; + padding-right: 36px; } .feature .feature-text .h5 { @@ -91,20 +91,20 @@ } .feature .feature-slides-nav { - width: 34px; + width: 42px; top: 0; margin-right: 0; z-index: 1; } .feature .feature-slide-nav-item { - width: 34px; - height: 34px; + width: 42px; + height: 42px; } .feature .feature-slide-nav-item.active span { - width: 34px; - height: 34px; + width: 32px; + height: 32px; color: var(--white); display: flex; align-items: center; @@ -119,7 +119,7 @@ } .feature .feature-text { - padding-right: 72px; + padding-right: 80px; } .feature .feature-slides-nav { @@ -130,6 +130,6 @@ @media (width >= 1440px) { .feature .feature-text { - padding-right: 110px; + padding-right: 118px; } } From 944d40214369d79a78e26b4115360f38b6a63fb3 Mon Sep 17 00:00:00 2001 From: Tomasz Dziezyk Date: Wed, 23 Oct 2024 13:43:27 +0200 Subject: [PATCH 133/159] KAW-8184 Add animation time variant --- blocks/highlight/highlight.js | 4 ++++ blocks/image/image.js | 2 +- blocks/specification/specification.js | 4 ++++ scripts/helpers.js | 4 ++-- 4 files changed, 11 insertions(+), 3 deletions(-) diff --git a/blocks/highlight/highlight.js b/blocks/highlight/highlight.js index 6061ac0..b044508 100644 --- a/blocks/highlight/highlight.js +++ b/blocks/highlight/highlight.js @@ -67,6 +67,9 @@ export default async function decorate(block) { const [pictureWrapper, ...slides] = block.querySelectorAll(':scope > div'); const slidesWrapper = document.createElement('div'); const slidesContainer = document.createElement('div'); + const animationTime = [...block.classList] + .find((el) => el.startsWith('time-')) + ?.split('time-')[1].replace('-', '.'); slides.forEach((slide, index) => { slide.classList.add('highlight-slide'); @@ -100,5 +103,6 @@ export default async function decorate(block) { getActiveIndex: getActiveSlideIndex, slideCount, scrollToSlide, + animationTime, }); } diff --git a/blocks/image/image.js b/blocks/image/image.js index 5085b0e..d14b588 100644 --- a/blocks/image/image.js +++ b/blocks/image/image.js @@ -21,6 +21,6 @@ export default async function decorate(block) { } else { pictureEl.style.top = 0; } - }), 100); + }), 10); } } diff --git a/blocks/specification/specification.js b/blocks/specification/specification.js index 6457a8f..cf57481 100644 --- a/blocks/specification/specification.js +++ b/blocks/specification/specification.js @@ -1,6 +1,9 @@ import { autoScrollSlidesWhenInView } from '../../scripts/helpers.js'; export default function decorate(block) { + const animationTime = [...block.classList] + .find((el) => el.startsWith('time-')) + ?.split('time-')[1].replace('-', '.'); const content = block.querySelector(':scope > div'); content.classList.add('specification-content'); const textContent = block.querySelector(':scope > div > div:first-child'); @@ -66,5 +69,6 @@ export default function decorate(block) { getActiveIndex: getActiveSlideIndex, slideCount, scrollToSlide, + animationTime, }); } diff --git a/scripts/helpers.js b/scripts/helpers.js index 5e44833..10055c2 100644 --- a/scripts/helpers.js +++ b/scripts/helpers.js @@ -204,7 +204,7 @@ export const onAppReady = (onReady) => { }; export const autoScrollSlidesWhenInView = (block, { - getActiveIndex, slideCount, scrollToSlide, + getActiveIndex, slideCount, scrollToSlide, animationTime = 3, }) => { let interval = null; @@ -217,7 +217,7 @@ export const autoScrollSlidesWhenInView = (block, { const newActiveIndex = activeIndex === slideCount - 1 ? 0 : activeIndex + 1; scrollToSlide(block, newActiveIndex); - }, 3000); + }, animationTime * 1000); } else if (!isInViewport(block)) { block.classList.remove('active'); clearInterval(interval); From 22d4e39f409520c044b8969ba63cc881cb06df98 Mon Sep 17 00:00:00 2001 From: Tomasz Dziezyk Date: Wed, 23 Oct 2024 13:50:48 +0200 Subject: [PATCH 134/159] KAW-8184 replace the on scroll animation throttle with debouce --- scripts/helpers.js | 15 ++++++++++++++- 1 file changed, 14 insertions(+), 1 deletion(-) diff --git a/scripts/helpers.js b/scripts/helpers.js index 10055c2..7f1127d 100644 --- a/scripts/helpers.js +++ b/scripts/helpers.js @@ -130,6 +130,19 @@ export const throttle = (func, limit) => { }; }; +export const debounce = (func, wait) => { + let timeout; + + return function debouncedFunction(...args) { + const context = this; + + clearTimeout(timeout); + timeout = setTimeout(() => { + func.apply(context, args); + }, wait); + }; +}; + export function stripEmptyTags(main, child) { if (child !== main && child.innerHTML.trim() === '') { const parent = child.parentNode; @@ -208,7 +221,7 @@ export const autoScrollSlidesWhenInView = (block, { }) => { let interval = null; - window.addEventListener('scroll', throttle(() => { + window.addEventListener('scroll', debounce(() => { if (isInViewport(block) && !interval) { block.classList.add('active'); From ebe1419fd571bf1cbcc79fadbde5b10b308331c5 Mon Sep 17 00:00:00 2001 From: Tomasz Dziezyk Date: Wed, 23 Oct 2024 14:37:30 +0200 Subject: [PATCH 135/159] KAW-8185 Fix footers gap --- blocks/footer/footer.css | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/blocks/footer/footer.css b/blocks/footer/footer.css index 9a6119b..e5ec02a 100644 --- a/blocks/footer/footer.css +++ b/blocks/footer/footer.css @@ -132,10 +132,11 @@ footer { align-items: flex-start; font-size: 16px; line-height: 150%; + gap: 24px; } .footer-wrapper { - border-top: 1px solid var(--white); + border-top: 1px solid var(--white); } @media (width >= 768px) { From eee0f293d40bdf8999ac7f08038bf38088308294 Mon Sep 17 00:00:00 2001 From: Ioana Iordache Date: Thu, 24 Oct 2024 09:53:35 +0200 Subject: [PATCH 136/159] KAW-8190: change image class --- blocks/teaser/teaser.css | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/blocks/teaser/teaser.css b/blocks/teaser/teaser.css index 9937a57..3a51cc6 100644 --- a/blocks/teaser/teaser.css +++ b/blocks/teaser/teaser.css @@ -87,7 +87,7 @@ div.teaser-wrapper + div.teaser-wrapper { } /* teaser image */ -.teaser.image li { +.teaser.image-bg li { overflow: hidden; min-height: 464px; display: grid; @@ -95,15 +95,15 @@ div.teaser-wrapper + div.teaser-wrapper { color: white; } -.teaser.image .teaser-card-image { +.teaser.image-bg .teaser-card-image { grid-area: 1 / 1; } -.teaser.image .teaser-card-image img { +.teaser.image-bg .teaser-card-image img { height: 100%; } -.teaser.image .teaser-card-body { +.teaser.image-bg .teaser-card-body { grid-area: 1 / 1; margin: 0; padding: 20px 16px; @@ -115,28 +115,28 @@ div.teaser-wrapper + div.teaser-wrapper { justify-content: end; } -.teaser.image .teaser-card-body .button-container { +.teaser.image-bg .teaser-card-body .button-container { margin-top: unset; } @media (width >= 768px) { - .teaser.image li { + .teaser.image-bg li { min-height: 474px; } } @media (width >= 1025px) { - .teaser.image li { + .teaser.image-bg li { min-height: 451px; } - .teaser.image .teaser-card-body { + .teaser.image-bg .teaser-card-body { padding: 28px 20px; } } @media (width >= 1440px) { - .teaser.image li { + .teaser.image-bg li { min-height: 566px; } } From d8b0b228b8bc513edd1e1d3a0ed802919c3f4c24 Mon Sep 17 00:00:00 2001 From: Tomasz Dziezyk Date: Thu, 24 Oct 2024 11:39:48 +0200 Subject: [PATCH 137/159] KAW-8173 Fix font-weight --- blocks/vehicle-selector/vehicle-selector.css | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/blocks/vehicle-selector/vehicle-selector.css b/blocks/vehicle-selector/vehicle-selector.css index 5e4aeef..b63c4e3 100644 --- a/blocks/vehicle-selector/vehicle-selector.css +++ b/blocks/vehicle-selector/vehicle-selector.css @@ -102,6 +102,8 @@ .description-value .h6 em { font-style: normal; font-weight: 600; + font-size: 14px; + line-height: 21px; } .vehicle-selector .button-container { @@ -240,10 +242,6 @@ ul.vehicle-selector__navigation { width: 100vw; margin-left: calc((100vw - 100%)* -1 / 2); } - - .description-value .h6 { - font-weight: 600; - } } @media screen and (width >= 1440px) { From e0804ea61508a106c72a78da62f638484fc68e15 Mon Sep 17 00:00:00 2001 From: Tomasz Dziezyk Date: Thu, 24 Oct 2024 11:49:21 +0200 Subject: [PATCH 138/159] KAW-8191 Add Boxed font --- fonts/Boxed-DemiBold.otf | Bin 0 -> 63096 bytes fonts/Boxed-Medium.otf | Bin 0 -> 62404 bytes fonts/Boxed-Regular.otf | Bin 0 -> 62048 bytes fonts/oxygen.woff2 | Bin 10380 -> 0 bytes fonts/roboto-bold.woff2 | Bin 11040 -> 0 bytes fonts/roboto-regular.woff2 | Bin 11028 -> 0 bytes styles/fonts.css | 23 +++++++++++++++++++---- 7 files changed, 19 insertions(+), 4 deletions(-) create mode 100644 fonts/Boxed-DemiBold.otf create mode 100644 fonts/Boxed-Medium.otf create mode 100644 fonts/Boxed-Regular.otf delete mode 100644 fonts/oxygen.woff2 delete mode 100644 fonts/roboto-bold.woff2 delete mode 100644 fonts/roboto-regular.woff2 diff --git a/fonts/Boxed-DemiBold.otf b/fonts/Boxed-DemiBold.otf new file mode 100644 index 0000000000000000000000000000000000000000..6fc26de9238fbc8baec565e9e7b1a34ee48abbab GIT binary patch literal 63096 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 z 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 literal 0 HcmV?d00001 diff --git a/fonts/Boxed-Medium.otf b/fonts/Boxed-Medium.otf new file mode 100644 index 0000000000000000000000000000000000000000..a7a8bcdefd06036733090f18a12f9dac58cd8fc1 GIT binary patch literal 62404 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 literal 0 HcmV?d00001 diff --git a/fonts/Boxed-Regular.otf b/fonts/Boxed-Regular.otf new file mode 100644 index 0000000000000000000000000000000000000000..33b880810929e58ff08903ee25299568b996ef6c GIT binary patch literal 62048 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ℜ$bEvi2-2jn}A-)$^5_QtUEfX1gWuVYQ)?;8Km zxL(~@?TEP?X(mU1b&z^L=FmE>{;$K^4o(h397a0Kci8B#AM<79JDhPSb2#ttwZlV) z#~N46xY!#rW{uQL(5%*M(-dhgXs&A>GL4y5OlPJWGXMkEhciCRcxDoVjCRJrY-M&c zr_&DoyMsN<9%GNQd2A6|%2p~F zw7zG5cVr!#IR4A=eaCi=Jsf*GdO41D40H@}oas0hgWgv=ZgAY{nCQ6IF~c#-@q}Zs z;|0eGN0Z}Y41%{f{`uEnNQ_;iq?o@sfVJ{M%BMi7`XU1o3m-Yyvmd<-_pr&Hhp#T& zS7cA+>&w-~7ke4-@ly6wzP4B&+SjVqc9J(}75Q&EzT+BB@BG)#M^@W*_~4#Wta%T6 z`Xs{b*-YUH3`LvBl1{N2Ekcd~XvN#H=+aGK|9l&JEZ9#qQ5bFAhdJW=q};m z_BFzlYdM4@Sp|~(ogpg_lJt8CNq&rwWc^r1+g3P>*;RCJYIfZ8<7Xte_zTU3q_75&8enG) zQt$o*QHzn`c5NUI4@Ju=cl0>Fb{6LU^(>5|XJP*Tau#Yec}!-~q9t)lmj_FJsBOEXyv^qQj5Vz($(=i73u|_)sV~Dih4ZGc1 z)S}4+Yic08mq1Pr=vB$U#u^^|Q{fPV97|jHGOPhNv}W>X`mR`;ZK5UmM>G!Smrj=hXBw-sn#K3m*Y9&n%}waQiLmFuIGh zvGySC9%Peu?@q?NQ2UaWFOecJXPja222qQ&d*$G@1*U4zojTO&pz(|LpX}pGV_)E% ztJR>%lb{7yHJxw+lD*_T*sH;gE%nH#B5}1Et;?uW3(LhkE$1N|LH2iMZ+-t z6me&?NrGDY+>IwXGa$j+hf`@2DyJ@jPpi&W!icK1=-#6YAb6YptwrM-*<)IhoMX~b zOwg8h0+tv_CHm>Lb2&8Y;7pxbi{apZIU4FQla-PzNsYPYY9328iIw&KUTm`mz(ZiJvUr3qSjRzFO@^mR{_O)2Z(DsnltX(=E7geMYgOGF5+Y~u{Pl$#o|NL zh@~KFR!j1hVe%);9;M_PEZ@gz1BVncY5U?ANm1;=B}*5HT7|qwqHQ>pt`5_2p$ybA z`d_~+z%*53ZDIUcrsdE<{iMLU&)L)2NAg51#zE+uu-r7RES%H6u+SCzoDR}D4wKQ9 z-oVwu6y~C+)84o(U1xDYxoc@s!=R9*QIQg?cGvb5dSGI{e$HA1?jFpcsRXnpm}-JVlXf(2FlX(v8@Ei7 HuF?Mi`2(0# literal 0 HcmV?d00001 diff --git a/fonts/oxygen.woff2 b/fonts/oxygen.woff2 deleted file mode 100644 index 95c479a60cce815fcbc38bb61fc82ea372f695b2..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 10380 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 ON3B$ub4ks;IsgFgYn-P5 diff --git a/styles/fonts.css b/styles/fonts.css index 00665ec..d4b24e5 100644 --- a/styles/fonts.css +++ b/styles/fonts.css @@ -1,9 +1,24 @@ /* stylelint-disable max-line-length */ @font-face { - font-family: Oxygen; + font-family: Boxed; font-style: normal; - font-weight: 400; + font-weight: 500; font-display: swap; - src: url("/fonts/oxygen.woff2") format('woff2'); - unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; + src: url("/fonts/Boxed-Regular.otf") format('opentype'); +} + +@font-face { + font-family: Boxed; + font-style: normal; + font-weight: 600; + font-display: swap; + src: url("/fonts/Boxed-DemiBold.otf") format('opentype'); +} + +@font-face { + font-family: Boxed; + font-style: normal; + font-weight: 700; + font-display: swap; + src: url("/fonts/Boxed-Medium.otf") format('opentype'); } From e9d2a1813805215f85869c48f2c6199db75df04a Mon Sep 17 00:00:00 2001 From: Tomasz Dziezyk Date: Fri, 25 Oct 2024 11:46:08 +0200 Subject: [PATCH 139/159] KAW-8193 Fix vehicle selector animation --- blocks/vehicle-selector/vehicle-selector.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/blocks/vehicle-selector/vehicle-selector.js b/blocks/vehicle-selector/vehicle-selector.js index c2a1ec6..ba39431 100644 --- a/blocks/vehicle-selector/vehicle-selector.js +++ b/blocks/vehicle-selector/vehicle-selector.js @@ -169,6 +169,10 @@ export default function decorate(block) { imagesWrapper.appendChild(imagesContainer); const tabNavigation = buildTabNavigation(tabItems, (index) => { + if (imagesContainer.classList.contains('is-animating')) { + return; + } + setCarouselPosition(imagesContainer, index); }); From 01c72f5c8874b5c1d6ed6e5a3dc2d6de35bd470a Mon Sep 17 00:00:00 2001 From: Tomasz Dziezyk Date: Fri, 25 Oct 2024 12:23:37 +0200 Subject: [PATCH 140/159] KAW-8195 Update favicon --- favicon.ico | Bin 66062 -> 45819 bytes 1 file changed, 0 insertions(+), 0 deletions(-) diff --git a/favicon.ico b/favicon.ico index 96ab42c7e06000861089484a847526f52270aa60..0f2f9ffe50e21991bb8e4f138f5e7b185074402a 100644 GIT binary patch literal 45819 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 IM6N<$f`A9`tN;K2 literal 66062 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 From b98dbe2d60153334bea7bb1d5bb36e5eed87623f Mon Sep 17 00:00:00 2001 From: Tomasz Dziezyk Date: Fri, 25 Oct 2024 12:56:19 +0200 Subject: [PATCH 141/159] Fix space between sections --- blocks/hero/hero.css | 2 +- styles/styles.css | 14 +++++++++----- 2 files changed, 10 insertions(+), 6 deletions(-) diff --git a/blocks/hero/hero.css b/blocks/hero/hero.css index f8ce6f9..6649245 100644 --- a/blocks/hero/hero.css +++ b/blocks/hero/hero.css @@ -3,7 +3,7 @@ main .hero-container > div { } main .hero-container { - padding: 0 0 var(--section-bottom-padding); + padding: 0 0 var(--section-y-padding); } main .hero-container .hero-wrapper { diff --git a/styles/styles.css b/styles/styles.css index dee2466..d3908dd 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -20,7 +20,7 @@ --nav-height: 70px; /* section paddings */ - --section-bottom-padding: 60px; + --section-y-padding: 30px; --section-x-padding: 20px; /* grid gap */ @@ -82,7 +82,7 @@ :root .homepage, :root .pdp { - --section-bottom-padding: 80px; + --section-y-padding: 40px; } * { @@ -530,13 +530,17 @@ main.no-top-margin { /* sections */ main .section { - padding: 0 var(--section-x-padding) var(--section-bottom-padding); + padding: var(--section-y-padding) var(--section-x-padding); } main .section:first-child { padding-top: 0; } +main .section:last-child { + padding-bottom: calc(2 * var(--section-y-padding)); +} + main .section.nba-container:last-child, main .section.padding-bottom-0 { padding-bottom: 0; @@ -551,13 +555,13 @@ main .section.padding-bottom-0 { @media (width >= 1025px) { :root { - --section-bottom-padding: 80px; + --section-y-padding: 40px; --section-x-padding: 40px; } :root .homepage, :root .pdp { - --section-bottom-padding: 120px; + --section-y-padding: 60px; } .section > div { From 5f19119d27e6727a5bd2aca494ff4d05e2ec4000 Mon Sep 17 00:00:00 2001 From: Tomasz Dziezyk Date: Mon, 28 Oct 2024 10:01:03 +0100 Subject: [PATCH 142/159] KAW-8196 Fix text with image stacked overlapping next component --- blocks/text-with-image/text-with-image.css | 3 +++ 1 file changed, 3 insertions(+) diff --git a/blocks/text-with-image/text-with-image.css b/blocks/text-with-image/text-with-image.css index 427e5ce..3eb5d39 100644 --- a/blocks/text-with-image/text-with-image.css +++ b/blocks/text-with-image/text-with-image.css @@ -17,6 +17,7 @@ display: flex; flex-direction: column; gap: 48px; + overflow-x: clip; } .text-with-image .column-with-images { @@ -72,6 +73,7 @@ transform: translateY( calc(var(--text-image-2nd-image-height) - var(--text-image-distance)) ); + padding-bottom: calc(var(--text-image-2nd-image-height) - var(--text-image-distance)); transition: transform var(--animation-time) linear; } @@ -170,6 +172,7 @@ .text-with-image.stacked-images .column-with-text { transform: unset; + padding: 0; } .text-with-image.stacked-images .column-with-images { From 54dc42a0a141014ebf1bbdc883c0702f5051dc87 Mon Sep 17 00:00:00 2001 From: Tomasz Dziezyk Date: Mon, 28 Oct 2024 11:21:32 +0100 Subject: [PATCH 143/159] Remove supportDocumentStyle function --- scripts/scripts.js | 13 ------------- 1 file changed, 13 deletions(-) diff --git a/scripts/scripts.js b/scripts/scripts.js index 16711d6..fc9f3d3 100644 --- a/scripts/scripts.js +++ b/scripts/scripts.js @@ -155,18 +155,6 @@ function setMainPosition(main) { } } -function supportDocumentStyle() { - const styleMetadata = document.querySelector('meta[name="style"'); - - if (!styleMetadata) { - return; - } - - const styles = styleMetadata.getAttribute('content').split(',').map((el) => el.trim()); - - document.body.classList.add(...styles); -} - /** * Loads everything needed to get to LCP. * @param {Element} doc The container element @@ -178,7 +166,6 @@ async function loadEager(doc) { if (main) { decorateMain(main); setMainPosition(main); - supportDocumentStyle(); document.body.classList.add('appear'); await loadSection(main.querySelector('.section'), waitForFirstImage); } From 1281118d8f332c8ae04ba84a0db2400dc9aebb28 Mon Sep 17 00:00:00 2001 From: Tomasz Dziezyk Date: Mon, 28 Oct 2024 13:36:53 +0100 Subject: [PATCH 144/159] KAW-8201 Add lazy loading for map --- blocks/dealer-locator/dealer-locator.js | 85 ++++++++++++++----------- 1 file changed, 49 insertions(+), 36 deletions(-) diff --git a/blocks/dealer-locator/dealer-locator.js b/blocks/dealer-locator/dealer-locator.js index b34a736..f04b6e0 100644 --- a/blocks/dealer-locator/dealer-locator.js +++ b/blocks/dealer-locator/dealer-locator.js @@ -118,44 +118,57 @@ export default async function decorate(block) { }, }; - loadScript('/blocks/dealer-locator/vendor/jquery.min.js', { type: 'text/javascript', charset: 'UTF-8' }) - .then(() => { - // these scripts depend on jquery: - loadScript('//webapp.woosmap.com/webapp.js', { type: 'text/javascript' }).then(() => { - function loadWebApp() { - const publicKey = 'woos-50c04d89-af71-3a3b-b0b9-0786ee130532'; - // eslint-disable-next-line no-undef - const webapp = new window.WebApp('dealer-locator', publicKey); - const config = { - maps: { - provider: 'woosmap', - channel: '', - localities: { - language, - data: 'advanced', + const loadDealerLocator = () => { + loadScript('/blocks/dealer-locator/vendor/jquery.min.js', { type: 'text/javascript', charset: 'UTF-8' }) + .then(() => { + // these scripts depend on jquery: + loadScript('//webapp.woosmap.com/webapp.js', { type: 'text/javascript' }).then(() => { + function loadWebApp() { + const publicKey = 'woos-50c04d89-af71-3a3b-b0b9-0786ee130532'; + // eslint-disable-next-line no-undef + const webapp = new window.WebApp('dealer-locator', publicKey); + const config = { + maps: { + provider: 'woosmap', + channel: '', + localities: { + language, + data: 'advanced', + }, }, - }, - theme: { - primaryColor: '#ed1d24', - }, - datasource: { - maxResponses: 5, - maxDistance: 1000000, - useDistanceMatrix: true, - distanceMatrixProvider: 'woosmap', - }, - internationalization: { - lang: language, - }, - woosmapview: isOneLocationVariant ? selectedLocationConfig : defaultLocationConfig, - }; - webapp.setConf(config); - if (isOneLocationVariant) { - webapp.setInitialStateToSelectedStore('990002'); + theme: { + primaryColor: '#ed1d24', + }, + datasource: { + maxResponses: 5, + maxDistance: 1000000, + useDistanceMatrix: true, + distanceMatrixProvider: 'woosmap', + }, + internationalization: { + lang: language, + }, + woosmapview: isOneLocationVariant ? selectedLocationConfig : defaultLocationConfig, + }; + webapp.setConf(config); + if (isOneLocationVariant) { + webapp.setInitialStateToSelectedStore('990002'); + } + webapp.render(); } - webapp.render(); - } - loadWebApp(); + loadWebApp(); + }); }); + }; + + const observer = new IntersectionObserver((entries) => { + entries.forEach((entry) => { + if (entry.intersectionRatio > 0) { + loadDealerLocator(); + observer.disconnect(); + } }); + }, { threshold: [0.1], rootMargin: '500px' }); + + observer.observe(block); } From 68ebaec6480f6fa8cec80fb70badfd3de3f2e864 Mon Sep 17 00:00:00 2001 From: Tomasz Dziezyk Date: Tue, 29 Oct 2024 14:26:21 +0100 Subject: [PATCH 145/159] Add styles for text only pages --- styles/styles.css | 31 +++++++++++++++++++++++++++++++ 1 file changed, 31 insertions(+) diff --git a/styles/styles.css b/styles/styles.css index d3908dd..cd7f537 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -793,3 +793,34 @@ body.modal-visible > *:not(.modal) { max-width: 1134px; } } + +/* text page styles - used for cookie and policies pages */ + +body.text-page ul { + list-style-position: inside; +} + +body.text-page a:any-link { + text-wrap: auto; + overflow-wrap: anywhere; +} + +@media (width >= 768px) { + body.text-page main .section { + max-width: 525px; + padding: 0; + margin: auto; + } +} + +@media (width >= 1025px) { + body.text-page main .section { + max-width: 783px; + } +} + +@media (width >= 1440px) { + body.text-page main .section { + max-width: 814px; + } +} \ No newline at end of file From a9ebd09d8f908e039b8372111d98edabe8f8f454 Mon Sep 17 00:00:00 2001 From: Ioana Iordache Date: Tue, 29 Oct 2024 15:02:05 +0100 Subject: [PATCH 146/159] KAW-8233: header hightlight on active --- blocks/header/header.css | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/blocks/header/header.css b/blocks/header/header.css index 2d76337..bccd0df 100644 --- a/blocks/header/header.css +++ b/blocks/header/header.css @@ -47,6 +47,10 @@ header a:hover { color: var(--action-hover); } +header a.active { + color: var(--action-default); +} + /* brand */ header .nav-brand { flex-grow: 1; @@ -427,6 +431,20 @@ header.transparent nav[aria-expanded="true"] .nav-link-section a.nav-drop-text { background: currentcolor; } + header.transparent li:not(nav-drop):has(a.active) { + position: relative; + } + + header.transparent li:not(nav-drop):has(a.active)::after { + content: ""; + display: block; + width: 100%; + height: 1px; + position: absolute; + bottom: 0; + background: var(--white); + } + /* expanded menu item content */ header .nav-sections .nav-drop .nav-sublist { position: fixed; From 88ff4701fd634cc344243f8e49853954918edf9e Mon Sep 17 00:00:00 2001 From: Ioana Iordache Date: Tue, 29 Oct 2024 15:06:08 +0100 Subject: [PATCH 147/159] Kaw-8233: fic css order --- blocks/header/header.css | 28 ++++++++++++++-------------- 1 file changed, 14 insertions(+), 14 deletions(-) diff --git a/blocks/header/header.css b/blocks/header/header.css index bccd0df..909c9b7 100644 --- a/blocks/header/header.css +++ b/blocks/header/header.css @@ -431,20 +431,6 @@ header.transparent nav[aria-expanded="true"] .nav-link-section a.nav-drop-text { background: currentcolor; } - header.transparent li:not(nav-drop):has(a.active) { - position: relative; - } - - header.transparent li:not(nav-drop):has(a.active)::after { - content: ""; - display: block; - width: 100%; - height: 1px; - position: absolute; - bottom: 0; - background: var(--white); - } - /* expanded menu item content */ header .nav-sections .nav-drop .nav-sublist { position: fixed; @@ -563,6 +549,20 @@ header.transparent nav[aria-expanded="true"] .nav-link-section a.nav-drop-text { } } +header.transparent li:not(nav-drop):has(a.active) { + position: relative; +} + +header.transparent li:not(nav-drop):has(a.active)::after { + content: ""; + display: block; + width: 100%; + height: 1px; + position: absolute; + bottom: 0; + background: var(--white); +} + @media (width >= 1440px) { header nav { padding-left: 0; From f60ad0cf8cbc4ef6c673cb80996976ee38f96a6b Mon Sep 17 00:00:00 2001 From: Ioana Iordache Date: Tue, 29 Oct 2024 15:12:51 +0100 Subject: [PATCH 148/159] Kaw-8233: fix specificity --- blocks/header/header.css | 31 +++++++++++++++---------------- 1 file changed, 15 insertions(+), 16 deletions(-) diff --git a/blocks/header/header.css b/blocks/header/header.css index 909c9b7..6e1a36e 100644 --- a/blocks/header/header.css +++ b/blocks/header/header.css @@ -1,5 +1,4 @@ /* header and nav layout */ - header { position: fixed; top: 0; @@ -207,7 +206,6 @@ header .nav-tools .default-content-wrapper li.active::after { background: currentcolor; } - /* stylelint-disable-next-line no-descending-specificity */ header .nav-tools .default-content-wrapper li a:any-link { font-size: 0.875rem; @@ -431,6 +429,20 @@ header.transparent nav[aria-expanded="true"] .nav-link-section a.nav-drop-text { background: currentcolor; } + header.transparent li:not(nav-drop):has(a.active) { + position: relative; + } + + header.transparent li:not(nav-drop):has(a.active)::after { + content: ""; + display: block; + width: 100%; + height: 1px; + position: absolute; + bottom: 0; + background: var(--white); + } + /* expanded menu item content */ header .nav-sections .nav-drop .nav-sublist { position: fixed; @@ -472,6 +484,7 @@ header.transparent nav[aria-expanded="true"] .nav-link-section a.nav-drop-text { display: flex; } + /* stylelint-disable-next-line no-descending-specificity */ header .nav-sections .nav-sublist li { transition: opacity 400ms linear; opacity: 0; @@ -549,20 +562,6 @@ header.transparent nav[aria-expanded="true"] .nav-link-section a.nav-drop-text { } } -header.transparent li:not(nav-drop):has(a.active) { - position: relative; -} - -header.transparent li:not(nav-drop):has(a.active)::after { - content: ""; - display: block; - width: 100%; - height: 1px; - position: absolute; - bottom: 0; - background: var(--white); -} - @media (width >= 1440px) { header nav { padding-left: 0; From ed3b5356b599bfc4b4ef33367ee130e424eb6160 Mon Sep 17 00:00:00 2001 From: Tomasz Dziezyk Date: Tue, 29 Oct 2024 15:25:09 +0100 Subject: [PATCH 149/159] Update first heading styles --- styles/styles.css | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/styles/styles.css b/styles/styles.css index cd7f537..4e728cd 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -805,6 +805,10 @@ body.text-page a:any-link { overflow-wrap: anywhere; } +body.text-page main > .section:first-child > .default-content-wrapper:first-child > h1:first-child { + padding-top: 40px; +} + @media (width >= 768px) { body.text-page main .section { max-width: 525px; @@ -817,6 +821,10 @@ body.text-page a:any-link { body.text-page main .section { max-width: 783px; } + + body.text-page main > .section:first-child > .default-content-wrapper:first-child > h1:first-child { + padding-top: 60px; + } } @media (width >= 1440px) { From f5bd4ff9a4e43e88d8cc0e9e0bbe2f4a65912ef8 Mon Sep 17 00:00:00 2001 From: Ioana Iordache Date: Tue, 29 Oct 2024 15:57:28 +0100 Subject: [PATCH 150/159] Kaw-8233: update hover --- blocks/header/header.css | 32 +++++++++++++++++++++++++++++--- 1 file changed, 29 insertions(+), 3 deletions(-) diff --git a/blocks/header/header.css b/blocks/header/header.css index 6e1a36e..69603f3 100644 --- a/blocks/header/header.css +++ b/blocks/header/header.css @@ -43,7 +43,7 @@ header a:any-link { header a:active, header a:focus, header a:hover { - color: var(--action-hover); + color: var(--action-default); } header a.active { @@ -429,20 +429,44 @@ header.transparent nav[aria-expanded="true"] .nav-link-section a.nav-drop-text { background: currentcolor; } - header.transparent li:not(nav-drop):has(a.active) { + header a.active { + color: inherit; + } + + header a:hover.active { + color: var(--action-default); + } + + header.transparent li:not(.nav-drop)[aria-expanded="false"] a:hover:any-link { + color: var(--action-default); + } + + header li:not(nav-drop):has(a.active) { position: relative; } - header.transparent li:not(nav-drop):has(a.active)::after { + header li:not(nav-drop):has(a.active)::after { content: ""; display: block; width: 100%; height: 1px; position: absolute; bottom: 0; + background: var(--black); + } + + header li:not(nav-drop):has(a:hover.active)::after { + background-color: var(--action-default); + } + + header.transparent li:not(nav-drop):has(a.active)::after { background: var(--white); } + header.transparent li:not(nav-drop):has(a:hover.active)::after { + background: var(--action-default); + } + /* expanded menu item content */ header .nav-sections .nav-drop .nav-sublist { position: fixed; @@ -468,6 +492,7 @@ header.transparent nav[aria-expanded="true"] .nav-link-section a.nav-drop-text { row-gap: 40px; } + /* stylelint-disable-next-line no-descending-specificity */ header .nav-sections .nav-drop ul li a:any-link { padding: 0 16px; display: flex; @@ -529,6 +554,7 @@ header.transparent nav[aria-expanded="true"] .nav-link-section a.nav-drop-text { cursor: auto; } + /* stylelint-disable-next-line no-descending-specificity */ header.transparent nav[aria-expanded="true"] .nav-link-section a:any-link, header.transparent nav[aria-expanded="true"] From ba91801c6f6d7ce4bcfc807b654029588a284b62 Mon Sep 17 00:00:00 2001 From: Tomasz Dziezyk Date: Tue, 29 Oct 2024 16:05:36 +0100 Subject: [PATCH 151/159] Change the hero logo --- blocks/hero/hero.css | 15 +++++++++++++-- blocks/hero/hero.js | 10 +++++----- 2 files changed, 18 insertions(+), 7 deletions(-) diff --git a/blocks/hero/hero.css b/blocks/hero/hero.css index 6649245..41837dc 100644 --- a/blocks/hero/hero.css +++ b/blocks/hero/hero.css @@ -146,6 +146,11 @@ main .hero-container .hero-wrapper { position: absolute; } +.hero .hero-flag svg { + width: auto; + height: auto; +} + .hero .hero-countdown { text-align: center; line-height: 91px; @@ -246,7 +251,13 @@ main .hero-container .hero-wrapper { } .hero .hero-flag { - translate: 40px -50%; + translate: 40px -30px; + width: 100px; + height: auto; + } + + .hero .hero-flag svg { + height: unset; } .hero h1 { @@ -269,7 +280,7 @@ main .hero-container .hero-wrapper { } .hero .hero-flag { - translate: 62px -50%; + translate: 62px -30px; } .hero h1 { diff --git a/blocks/hero/hero.js b/blocks/hero/hero.js index e7c01a2..f19e9fd 100644 --- a/blocks/hero/hero.js +++ b/blocks/hero/hero.js @@ -44,11 +44,11 @@ const addLogoFlag = (block) => { const flagEl = document.createElement('span'); flagEl.classList.add('hero-flag'); flagEl.innerHTML = ` - - - - - + + + + + `; customDecoreateIcons(flagEl); From 3304ca9bc172511f53d67759028256d3bd15f842 Mon Sep 17 00:00:00 2001 From: Tomasz Dziezyk Date: Wed, 30 Oct 2024 08:10:05 +0100 Subject: [PATCH 152/159] KAW-8236 Fix wide image variant --- blocks/image/image.js | 5 ++--- blocks/text-with-image/text-with-image.css | 2 +- 2 files changed, 3 insertions(+), 4 deletions(-) diff --git a/blocks/image/image.js b/blocks/image/image.js index d14b588..a5301b8 100644 --- a/blocks/image/image.js +++ b/blocks/image/image.js @@ -1,5 +1,4 @@ import { createOptimizedPicture } from '../../scripts/aem.js'; -import { throttle } from '../../scripts/helpers.js'; export default async function decorate(block) { const images = block.querySelectorAll(':scope > div > div picture'); @@ -13,7 +12,7 @@ export default async function decorate(block) { const pictureEl = createOptimizedPicture(img.src, '', false, [{ width: window.innerWidth }]); block.querySelector('picture').replaceWith(pictureEl); - window.addEventListener('scroll', throttle(() => { + window.addEventListener('scroll', () => { const { top } = block.getBoundingClientRect(); if (top < 0) { @@ -21,6 +20,6 @@ export default async function decorate(block) { } else { pictureEl.style.top = 0; } - }), 10); + }); } } diff --git a/blocks/text-with-image/text-with-image.css b/blocks/text-with-image/text-with-image.css index 3eb5d39..511ea6d 100644 --- a/blocks/text-with-image/text-with-image.css +++ b/blocks/text-with-image/text-with-image.css @@ -17,7 +17,7 @@ display: flex; flex-direction: column; gap: 48px; - overflow-x: clip; + overflow-y: clip; } .text-with-image .column-with-images { From f7ea6cb093747b3731746bf574b9a69047640514 Mon Sep 17 00:00:00 2001 From: Tomasz Dziezyk Date: Wed, 30 Oct 2024 10:00:22 +0100 Subject: [PATCH 153/159] Change the brand logo location for hero banner --- blocks/hero/hero.css | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/blocks/hero/hero.css b/blocks/hero/hero.css index 41837dc..c91cfe1 100644 --- a/blocks/hero/hero.css +++ b/blocks/hero/hero.css @@ -139,7 +139,7 @@ main .hero-container .hero-wrapper { } .hero .hero-flag { - translate: 20px -50%; + translate: 20px -100%; display: flex; width: 60px; height: 50px; @@ -199,7 +199,7 @@ main .hero-container .hero-wrapper { } .hero .hero-flag { - translate: 30px -50%; + translate: 30px -100%; } .hero.countdown .hero-text-wrapper { @@ -251,7 +251,7 @@ main .hero-container .hero-wrapper { } .hero .hero-flag { - translate: 40px -30px; + translate: 40px -100%; width: 100px; height: auto; } @@ -280,7 +280,7 @@ main .hero-container .hero-wrapper { } .hero .hero-flag { - translate: 62px -30px; + translate: 62px -100%; } .hero h1 { From 67aed8780e04abe79514d737c672495adad1b822 Mon Sep 17 00:00:00 2001 From: Ioana Iordache Date: Wed, 30 Oct 2024 10:41:27 +0100 Subject: [PATCH 154/159] kaw-8302: linkedin icon --- icons/linkedin.svg | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/icons/linkedin.svg b/icons/linkedin.svg index db9a440..83972e7 100644 --- a/icons/linkedin.svg +++ b/icons/linkedin.svg @@ -1,4 +1,4 @@ - - + + \ No newline at end of file From d6ad1843ced47e6c1ac61430f659760ef516e91b Mon Sep 17 00:00:00 2001 From: Lakshmishri Date: Wed, 30 Oct 2024 11:48:08 +0100 Subject: [PATCH 155/159] fix text component console error --- blocks/text/text.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/blocks/text/text.js b/blocks/text/text.js index 80dca04..c1cd1c8 100644 --- a/blocks/text/text.js +++ b/blocks/text/text.js @@ -26,7 +26,7 @@ export default async function decorate(block) { const quotes = document.createElement('div'); quotes.classList.add('text-quotes-container'); const nextEle = quotedText.parentElement.nextElementSibling; - if (!nextEle.classList.contains('button-container')) { + if (nextEle && !nextEle.classList.contains('button-container')) { quotes.append(nextEle); nextEle.classList.remove('text-content'); } From 060cc03cdadd7f4baad2ff1cf91701fe04b2f4a9 Mon Sep 17 00:00:00 2001 From: Ioana Iordache Date: Wed, 30 Oct 2024 12:26:06 +0100 Subject: [PATCH 156/159] kaw-8233: fix mobile color --- blocks/header/header.css | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/blocks/header/header.css b/blocks/header/header.css index 69603f3..854ea2f 100644 --- a/blocks/header/header.css +++ b/blocks/header/header.css @@ -320,6 +320,10 @@ header.transparent nav[aria-expanded="true"] .nav-link-section a.nav-drop-text { color: var(--grey-90); } +header.transparent nav[aria-expanded="true"] .nav-link-section a:any-link:where(.active) { + color: var(--action-default); +} + @media (width >= 768px) { header nav { padding: 20px 30px 16px 24px; @@ -419,6 +423,10 @@ header.transparent nav[aria-expanded="true"] .nav-link-section a.nav-drop-text { color: var(--black); } + header .nav-sections .nav-drop[aria-expanded="true"] .nav-drop-text:hover { + color: var(--action-default); + } + header .nav-sections .nav-drop[aria-expanded="true"] .nav-drop-text::after { content: ""; display: block; @@ -584,7 +592,7 @@ header.transparent nav[aria-expanded="true"] .nav-link-section a.nav-drop-text { .nav-link-section .nav-drop a:hover { - color: var(--action-hover); + color: var(--action-default); } } From f5e08a8a64035d3342119ad4b25336de64047960 Mon Sep 17 00:00:00 2001 From: Tomasz Dziezyk Date: Wed, 30 Oct 2024 15:06:10 +0100 Subject: [PATCH 157/159] Make the highlight animation slower --- blocks/highlight/highlight.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/blocks/highlight/highlight.css b/blocks/highlight/highlight.css index ca01dd4..5135f5c 100644 --- a/blocks/highlight/highlight.css +++ b/blocks/highlight/highlight.css @@ -51,7 +51,7 @@ } .highlight-slides-container { - transition: transform 750ms ease-in-out; + transition: transform 1500ms ease-in-out; transform: translateY(0); max-height: 100%; } @@ -62,7 +62,7 @@ align-items: flex-end; padding: 0 20px 56px; opacity: 0; - transition: opacity 1500ms ease-in-out; + transition: opacity 3000ms ease-in-out; } .highlight .highlight-slide.active { From d90985b668dd66465c238746a3362f7237de11fe Mon Sep 17 00:00:00 2001 From: Ioana Iordache Date: Wed, 30 Oct 2024 16:08:28 +0100 Subject: [PATCH 158/159] kaw-8233: active styles --- blocks/header/header.css | 21 +++++++++++++++------ 1 file changed, 15 insertions(+), 6 deletions(-) diff --git a/blocks/header/header.css b/blocks/header/header.css index 854ea2f..c36d117 100644 --- a/blocks/header/header.css +++ b/blocks/header/header.css @@ -324,6 +324,11 @@ header.transparent nav[aria-expanded="true"] .nav-link-section a:any-link:where( color: var(--action-default); } +header.transparent nav[aria-expanded="true"] .nav-link-section a:any-link:hover, +header.transparent nav[aria-expanded="true"] .nav-link-section a.nav-drop-text:hover { + color: var(--action-default); +} + @media (width >= 768px) { header nav { padding: 20px 30px 16px 24px; @@ -449,11 +454,11 @@ header.transparent nav[aria-expanded="true"] .nav-link-section a:any-link:where( color: var(--action-default); } - header li:not(nav-drop):has(a.active) { + header li:not(.nav-drop):has(a.active) { position: relative; } - header li:not(nav-drop):has(a.active)::after { + header .default-content-wrapper>ul>:has(a.active)::after { content: ""; display: block; width: 100%; @@ -463,15 +468,19 @@ header.transparent nav[aria-expanded="true"] .nav-link-section a:any-link:where( background: var(--black); } - header li:not(nav-drop):has(a:hover.active)::after { - background-color: var(--action-default); + header.transparent .default-content-wrapper>ul>:has(a.active)::after { + background: var(--white); } - header.transparent li:not(nav-drop):has(a.active)::after { + header.transparent div:not(.nav-sublist) li:not(.nav-drop):has(a.active)::after { background: var(--white); } - header.transparent li:not(nav-drop):has(a:hover.active)::after { + header div:not(.nav-sublist) li:not(.nav-drop):has(a:hover.active)::after { + background-color: var(--action-default); + } + + header.transparent div:not(.nav-sublist) li:not(.nav-drop):has(a:hover.active)::after { background: var(--action-default); } From f347020de8acd7ff5ba6deded55331482a99276e Mon Sep 17 00:00:00 2001 From: Tomasz Dziezyk Date: Thu, 31 Oct 2024 09:18:50 +0100 Subject: [PATCH 159/159] Change hilight logo --- blocks/highlight/highlight.css | 15 +++++++++++++-- blocks/highlight/highlight.js | 10 +++++----- 2 files changed, 18 insertions(+), 7 deletions(-) diff --git a/blocks/highlight/highlight.css b/blocks/highlight/highlight.css index ca01dd4..a387c1e 100644 --- a/blocks/highlight/highlight.css +++ b/blocks/highlight/highlight.css @@ -84,9 +84,15 @@ display: flex; bottom: var(--flag-margin); right: calc(var(--flag-margin) + var(--section-x-padding) * -1 + 30px); - translate: 0 50%; + translate: 0 0; padding: 0; transition: all 300ms ease-in-out; + width: 60px; +} + +.highlight.block .flag-wrapper svg { + width: 100%; + height: auto; } .highlight.block.active .flag-wrapper { @@ -106,7 +112,7 @@ } } -@media (width >= 1024px) { +@media (width >= 1025px) { .highlight .highlight-slide { padding: 172px 30px 0; align-items: flex-start; @@ -115,6 +121,10 @@ .highlight .highlight-slide div { gap: 20px; } + + .highlight.block .flag-wrapper { + width: 80px; + } } @media (width >= 1440px) { @@ -128,5 +138,6 @@ .highlight.block .flag-wrapper { right: 30px; + width: 100px; } } diff --git a/blocks/highlight/highlight.js b/blocks/highlight/highlight.js index b044508..00d9c33 100644 --- a/blocks/highlight/highlight.js +++ b/blocks/highlight/highlight.js @@ -49,11 +49,11 @@ const scrollToSlide = (block, slideIndex) => { const addFlag = (block) => { const falgEl = ` - - - - - + + + + + `;