From 39fd6d667771d91fd4be784cc4f892da464afc12 Mon Sep 17 00:00:00 2001 From: Laura Jove Date: Wed, 30 Aug 2023 06:57:30 +0200 Subject: [PATCH 1/4] update fill & stroke functionallity in svgs --- common/modal/modal-component.css | 3 +-- common/modal/modal-component.js | 4 ++-- icons/play.svg | 2 +- icons/search.svg | 2 +- icons/speach.svg | 10 +++++----- styles/styles.css | 17 +---------------- 6 files changed, 11 insertions(+), 27 deletions(-) diff --git a/common/modal/modal-component.css b/common/modal/modal-component.css index 86b47a8f5..fb6bfb0df 100644 --- a/common/modal/modal-component.css +++ b/common/modal/modal-component.css @@ -16,7 +16,6 @@ } .modal-background button.modal-close-button { - color: var(--c-primary-white); text-decoration: none; border: none; background: transparent; @@ -40,7 +39,7 @@ } .modal-background button.modal-close-button:hover { - color: #aaa; + --color-icon: #aaa; } .modal-background.modal-hidden { diff --git a/common/modal/modal-component.js b/common/modal/modal-component.js index 4f8d583a0..4d86fcfdc 100644 --- a/common/modal/modal-component.js +++ b/common/modal/modal-component.js @@ -39,8 +39,8 @@ const createModal = () => { const closeIcon = createElement('span', ['icon', 'icon-close']); const svgCloseIcon = document.createRange().createContextualFragment(` - - + + `); closeIcon.append(...svgCloseIcon.children); diff --git a/icons/play.svg b/icons/play.svg index 91a9a3e6b..d3cc2f502 100644 --- a/icons/play.svg +++ b/icons/play.svg @@ -1,6 +1,6 @@ - + diff --git a/icons/search.svg b/icons/search.svg index b23df1fb9..1e43e697c 100644 --- a/icons/search.svg +++ b/icons/search.svg @@ -1,5 +1,5 @@ - diff --git a/icons/speach.svg b/icons/speach.svg index 410209b58..61e507d69 100644 --- a/icons/speach.svg +++ b/icons/speach.svg @@ -1,7 +1,7 @@ - - - - - + + + + + \ No newline at end of file diff --git a/styles/styles.css b/styles/styles.css index 99f20c4ad..6273b936f 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -818,22 +818,7 @@ main .section.responsive-title h1 { font-size: 16px; } -/* ICONS STYLES - default on white background */ -.redesign-v2 svg path[fill] { - fill: var(--color-icon); -} - -.redesign-v2 svg path[stroke] { - stroke: var(--color-icon); -} - -.redesign-v2 svg path[fill].accent { - fill: var(--color-icon-accent); -} - -.redesign-v2 svg path[stroke].accent { - stroke: var(--color-icon-accent); -} +/* ICONS STYLES */ /* icons on gold background */ .redesign-v2 [data-theme="gold"] { From f741056d1a1b194272a069413912d47bc445ae1a Mon Sep 17 00:00:00 2001 From: Laura Jove Date: Wed, 30 Aug 2023 12:24:33 +0200 Subject: [PATCH 2/4] add svg size --- .../v2-inpage-navigation.css | 107 +++++++++++++ .../v2-inpage-navigation.js | 147 ++++++++++++++++++ blocks/v2-testimonial/v2-testimonial.css | 5 + 3 files changed, 259 insertions(+) create mode 100644 blocks/v2-inpage-navigation/v2-inpage-navigation.css create mode 100644 blocks/v2-inpage-navigation/v2-inpage-navigation.js diff --git a/blocks/v2-inpage-navigation/v2-inpage-navigation.css b/blocks/v2-inpage-navigation/v2-inpage-navigation.css new file mode 100644 index 000000000..7198253c7 --- /dev/null +++ b/blocks/v2-inpage-navigation/v2-inpage-navigation.css @@ -0,0 +1,107 @@ +.v2-inpage-navigation { +} + +.v2-inpage-navigation__wrapper { + display: flex; + box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0.16); + height: 48px; +} + +.v2-inpage-navigation__dropdown { + flex-grow: 1; + position: relative; +} + +.v2-inpage-navigation__dropdown--open .v2-inpage-navigation__items { + display: block; +} + +.v2-inpage-navigation__items { + display: none; + list-style: none; + margin: 0; + padding: 0; + position: absolute; + top: 48px; + left: 0; + width: 100%; + background-color: var(--c-primary-white); + box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0.16); + + /* display: flex; + flex-direction: column; */ +} +.v2-inpage-navigation__item button, +.v2-inpage-navigation__selected-item { + display: block; + margin: 0; + padding: 14px 24px; + background: none; + color: var(--c-primary-black); + font-family: var(--ff-body-bold); + font-size: var(--body-2-font-size); + line-height: var(--body-2-line-height); + cursor: pointer; +} + +.v2-inpage-navigation__item button:active, +.v2-inpage-navigation__selected-item:active { + background-color: #F1F1F1; +} + +.v2-inpage-navigation__item button { + max-width: none; + width: 100%; + text-align: left; +} + +.v2-inpage-navigation__selected-item { + display: flex; + justify-content: space-between; + align-items: center; +} + +.v2-inpage-navigation__selected-item::after { + content: ''; + width: 16px; + height: 16px; + background-color: red; +} + +/* Buttons */ +.v2-inpage-navigation__cta:any-link { + display: flex; + padding: 0 20px; + align-items: center; + font-family: var(--ff-body); + font-size: 14px; + font-style: normal; + font-weight: 500; + line-height: 18px; + letter-spacing: 1.12px; + background-color: var(--button-primary-red-enabled); + color: var(--c-primary-white); +} + +.v2-inpage-navigation__cta:hover, +.v2-inpage-navigation__cta:focus { + background-color: var(--button-primary-red-hover); +} + +.v2-inpage-navigation__cta:active { + background-color: var(--button-primary-red-pressed); +} + +.v2-inpage-navigation__cta--desktop { + display: none; +} + +@media (min-width: 1200px) { + .v2-inpage-navigation__cta--mobile { + display: none; + } + + .v2-inpage-navigation__cta--desktop { + display: block; + } +} diff --git a/blocks/v2-inpage-navigation/v2-inpage-navigation.js b/blocks/v2-inpage-navigation/v2-inpage-navigation.js new file mode 100644 index 000000000..d40238805 --- /dev/null +++ b/blocks/v2-inpage-navigation/v2-inpage-navigation.js @@ -0,0 +1,147 @@ +import { + getMetadata, +} from '../../scripts/lib-franklin.js'; +import { + createElement, +} from '../../scripts/scripts.js'; + +const blockName = 'v2-inpage-navigation'; + +const getInpageNavigationButtons = () => { + // if we have a button title & button link + if (getMetadata('inpage-button') && getMetadata('inpage-link')) { + const titleMobile = getMetadata('inpage-button'); + const url = getMetadata('inpage-link'); + const link = createElement('a', `${blockName}__cta`, { + href: url, + title: titleMobile, + }); + const mobileText = createElement('span', `${blockName}__cta--mobile`); + mobileText.textContent = titleMobile; + link.appendChild(mobileText); + + const titleDesktop = getMetadata('inpage-button-large'); + if (titleDesktop) { + const desktopText = createElement('span', `${blockName}__cta--desktop`); + desktopText.textContent = titleDesktop; + link.setAttribute('title', titleDesktop); + link.appendChild(desktopText); + } + + return link; + } + + return []; +}; + +const gotoSection = (event) => { + // let waitingTime = 500; + const { target } = event; + const button = target.closest('button'); + + if (button) { + const { id } = button.dataset; + + const container = document.querySelector(`main .section[data-inpageid='${id}']`); + container?.scrollIntoView({ behavior: 'smooth' }); + + // // create an Observer instance + // const resizeObserver = new ResizeObserver((entries) => { + // console.log('Body height changed:', entries[0].target.clientHeight); + // }); + + // // start observing a DOM node + // resizeObserver.observe(document.body); + } +}; + +const updateActive = (id) => { + console.log('updateActive', id); + + const currentItem = document.querySelector(`.${blockName}__selected-item`); + const listItems = document.querySelector(`.${blockName}__item--active`); + listItems.classList.remove(`${blockName}__item--active`); + const itemsButton = document.querySelectorAll(`.${blockName}__items button`); + // console.log(itemsButton); + + const selectedButton = [...itemsButton].filter((button) => button.dataset.id === id); + if (!selectedButton[0]) return; + currentItem.textContent = selectedButton[0].textContent; + selectedButton[0].parentNode.classList.add(`${blockName}__item--active`); +}; + +const toggleList = (e) => { + console.log(e.target); + const dropdownWrapper = document.querySelector(`.${blockName}__dropdown`); + + if (e.target.classList.contains(`${blockName}__selected-item`)) { + dropdownWrapper.classList.toggle(`${blockName}__dropdown--open`); + } else { + dropdownWrapper.classList.remove(`${blockName}__dropdown--open`); + } +}; + +const listenScroll = () => { + const main = document.querySelector('main'); + const elements = document.querySelectorAll('main .section[data-inpageid]'); + + console.log(main, elements); + + const io = new IntersectionObserver((entries) => { + entries.forEach((entry) => { + if (entry.isIntersecting) { + // entry.target.classList.add('active'); + console.log(entry.intersectionRatio, entry.target.dataset.inpageid, entry.target); + updateActive(entry.target.dataset.inpageid); + } + }); + }, { + // root: main, + threshold: [0.2, 0.5, 0.7, 1], + }); + + elements.forEach((el) => { + io.observe(el); + }); +}; + +export default async function decorate(block) { + const buttons = getInpageNavigationButtons(); + + const wrapper = block.querySelector(':scope > div'); + wrapper.classList.add(`${blockName}__wrapper`); + const itemsWrapper = block.querySelector(':scope > div > div'); + + const dropdownWrapper = createElement('div', `${blockName}__dropdown`); + const activeItem = createElement('div', `${blockName}__selected-item`); + + const list = createElement('ul', `${blockName}__items`); + + [...itemsWrapper.children].forEach((item, index) => { + const classes = [`${blockName}__item`]; + if (index === 0) { + classes.push(`${blockName}__item--active`); + activeItem.textContent = item.textContent; + } + const listItem = createElement('li', classes); + + listItem.innerHTML = item.innerHTML; + list.appendChild(listItem); + }); + + dropdownWrapper.append(activeItem); + dropdownWrapper.append(list); + wrapper.append(dropdownWrapper); + + itemsWrapper.remove(); + + wrapper.appendChild(buttons); + + list.addEventListener('click', gotoSection); + + // Listener to toggle the dropdown or close it + document.addEventListener('click', toggleList); + + // listen scroll to change the url + listenScroll(); +} diff --git a/blocks/v2-testimonial/v2-testimonial.css b/blocks/v2-testimonial/v2-testimonial.css index ab716c951..651d72a26 100644 --- a/blocks/v2-testimonial/v2-testimonial.css +++ b/blocks/v2-testimonial/v2-testimonial.css @@ -59,6 +59,11 @@ font-size: 13px; } +.v2-testimonial__author svg { + width: 34px; + height: 17px; +} + .v2-testimonial__video-link-wrapper { margin: 0; display: flex; From c0385febf84b61f51c0249cf639419aa6e4d1678 Mon Sep 17 00:00:00 2001 From: Laura Jove Date: Wed, 30 Aug 2023 12:26:23 +0200 Subject: [PATCH 3/4] add svg size --- blocks/v2-testimonial/v2-testimonial.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/blocks/v2-testimonial/v2-testimonial.css b/blocks/v2-testimonial/v2-testimonial.css index 651d72a26..5f5799433 100644 --- a/blocks/v2-testimonial/v2-testimonial.css +++ b/blocks/v2-testimonial/v2-testimonial.css @@ -61,7 +61,7 @@ .v2-testimonial__author svg { width: 34px; - height: 17px; + height: 27px; } .v2-testimonial__video-link-wrapper { From 16faa3148b4a84267f72baf95f7ae456e60503b9 Mon Sep 17 00:00:00 2001 From: Laura Jove Date: Wed, 30 Aug 2023 12:36:08 +0200 Subject: [PATCH 4/4] fix --- .../v2-inpage-navigation.css | 107 ------------- .../v2-inpage-navigation.js | 147 ------------------ 2 files changed, 254 deletions(-) delete mode 100644 blocks/v2-inpage-navigation/v2-inpage-navigation.css delete mode 100644 blocks/v2-inpage-navigation/v2-inpage-navigation.js diff --git a/blocks/v2-inpage-navigation/v2-inpage-navigation.css b/blocks/v2-inpage-navigation/v2-inpage-navigation.css deleted file mode 100644 index 7198253c7..000000000 --- a/blocks/v2-inpage-navigation/v2-inpage-navigation.css +++ /dev/null @@ -1,107 +0,0 @@ -.v2-inpage-navigation { -} - -.v2-inpage-navigation__wrapper { - display: flex; - box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0.16); - height: 48px; -} - -.v2-inpage-navigation__dropdown { - flex-grow: 1; - position: relative; -} - -.v2-inpage-navigation__dropdown--open .v2-inpage-navigation__items { - display: block; -} - -.v2-inpage-navigation__items { - display: none; - list-style: none; - margin: 0; - padding: 0; - position: absolute; - top: 48px; - left: 0; - width: 100%; - background-color: var(--c-primary-white); - box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0.16); - - /* display: flex; - flex-direction: column; */ -} -.v2-inpage-navigation__item button, -.v2-inpage-navigation__selected-item { - display: block; - margin: 0; - padding: 14px 24px; - background: none; - color: var(--c-primary-black); - font-family: var(--ff-body-bold); - font-size: var(--body-2-font-size); - line-height: var(--body-2-line-height); - cursor: pointer; -} - -.v2-inpage-navigation__item button:active, -.v2-inpage-navigation__selected-item:active { - background-color: #F1F1F1; -} - -.v2-inpage-navigation__item button { - max-width: none; - width: 100%; - text-align: left; -} - -.v2-inpage-navigation__selected-item { - display: flex; - justify-content: space-between; - align-items: center; -} - -.v2-inpage-navigation__selected-item::after { - content: ''; - width: 16px; - height: 16px; - background-color: red; -} - -/* Buttons */ -.v2-inpage-navigation__cta:any-link { - display: flex; - padding: 0 20px; - align-items: center; - font-family: var(--ff-body); - font-size: 14px; - font-style: normal; - font-weight: 500; - line-height: 18px; - letter-spacing: 1.12px; - background-color: var(--button-primary-red-enabled); - color: var(--c-primary-white); -} - -.v2-inpage-navigation__cta:hover, -.v2-inpage-navigation__cta:focus { - background-color: var(--button-primary-red-hover); -} - -.v2-inpage-navigation__cta:active { - background-color: var(--button-primary-red-pressed); -} - -.v2-inpage-navigation__cta--desktop { - display: none; -} - -@media (min-width: 1200px) { - .v2-inpage-navigation__cta--mobile { - display: none; - } - - .v2-inpage-navigation__cta--desktop { - display: block; - } -} diff --git a/blocks/v2-inpage-navigation/v2-inpage-navigation.js b/blocks/v2-inpage-navigation/v2-inpage-navigation.js deleted file mode 100644 index d40238805..000000000 --- a/blocks/v2-inpage-navigation/v2-inpage-navigation.js +++ /dev/null @@ -1,147 +0,0 @@ -import { - getMetadata, -} from '../../scripts/lib-franklin.js'; -import { - createElement, -} from '../../scripts/scripts.js'; - -const blockName = 'v2-inpage-navigation'; - -const getInpageNavigationButtons = () => { - // if we have a button title & button link - if (getMetadata('inpage-button') && getMetadata('inpage-link')) { - const titleMobile = getMetadata('inpage-button'); - const url = getMetadata('inpage-link'); - const link = createElement('a', `${blockName}__cta`, { - href: url, - title: titleMobile, - }); - const mobileText = createElement('span', `${blockName}__cta--mobile`); - mobileText.textContent = titleMobile; - link.appendChild(mobileText); - - const titleDesktop = getMetadata('inpage-button-large'); - if (titleDesktop) { - const desktopText = createElement('span', `${blockName}__cta--desktop`); - desktopText.textContent = titleDesktop; - link.setAttribute('title', titleDesktop); - link.appendChild(desktopText); - } - - return link; - } - - return []; -}; - -const gotoSection = (event) => { - // let waitingTime = 500; - const { target } = event; - const button = target.closest('button'); - - if (button) { - const { id } = button.dataset; - - const container = document.querySelector(`main .section[data-inpageid='${id}']`); - container?.scrollIntoView({ behavior: 'smooth' }); - - // // create an Observer instance - // const resizeObserver = new ResizeObserver((entries) => { - // console.log('Body height changed:', entries[0].target.clientHeight); - // }); - - // // start observing a DOM node - // resizeObserver.observe(document.body); - } -}; - -const updateActive = (id) => { - console.log('updateActive', id); - - const currentItem = document.querySelector(`.${blockName}__selected-item`); - const listItems = document.querySelector(`.${blockName}__item--active`); - listItems.classList.remove(`${blockName}__item--active`); - const itemsButton = document.querySelectorAll(`.${blockName}__items button`); - // console.log(itemsButton); - - const selectedButton = [...itemsButton].filter((button) => button.dataset.id === id); - if (!selectedButton[0]) return; - currentItem.textContent = selectedButton[0].textContent; - selectedButton[0].parentNode.classList.add(`${blockName}__item--active`); -}; - -const toggleList = (e) => { - console.log(e.target); - const dropdownWrapper = document.querySelector(`.${blockName}__dropdown`); - - if (e.target.classList.contains(`${blockName}__selected-item`)) { - dropdownWrapper.classList.toggle(`${blockName}__dropdown--open`); - } else { - dropdownWrapper.classList.remove(`${blockName}__dropdown--open`); - } -}; - -const listenScroll = () => { - const main = document.querySelector('main'); - const elements = document.querySelectorAll('main .section[data-inpageid]'); - - console.log(main, elements); - - const io = new IntersectionObserver((entries) => { - entries.forEach((entry) => { - if (entry.isIntersecting) { - // entry.target.classList.add('active'); - console.log(entry.intersectionRatio, entry.target.dataset.inpageid, entry.target); - updateActive(entry.target.dataset.inpageid); - } - }); - }, { - // root: main, - threshold: [0.2, 0.5, 0.7, 1], - }); - - elements.forEach((el) => { - io.observe(el); - }); -}; - -export default async function decorate(block) { - const buttons = getInpageNavigationButtons(); - - const wrapper = block.querySelector(':scope > div'); - wrapper.classList.add(`${blockName}__wrapper`); - const itemsWrapper = block.querySelector(':scope > div > div'); - - const dropdownWrapper = createElement('div', `${blockName}__dropdown`); - const activeItem = createElement('div', `${blockName}__selected-item`); - - const list = createElement('ul', `${blockName}__items`); - - [...itemsWrapper.children].forEach((item, index) => { - const classes = [`${blockName}__item`]; - if (index === 0) { - classes.push(`${blockName}__item--active`); - activeItem.textContent = item.textContent; - } - const listItem = createElement('li', classes); - - listItem.innerHTML = item.innerHTML; - list.appendChild(listItem); - }); - - dropdownWrapper.append(activeItem); - dropdownWrapper.append(list); - wrapper.append(dropdownWrapper); - - itemsWrapper.remove(); - - wrapper.appendChild(buttons); - - list.addEventListener('click', gotoSection); - - // Listener to toggle the dropdown or close it - document.addEventListener('click', toggleList); - - // listen scroll to change the url - listenScroll(); -}