From e3662d8ab644dd9ec541865202b38aef36fd3913 Mon Sep 17 00:00:00 2001 From: Sagar Date: Tue, 6 Feb 2024 20:45:48 +0530 Subject: [PATCH 1/5] updated code for header block as per new design --- blocks/header/header.css | 366 ++++++++++----------------------------- blocks/header/header.js | 251 ++++++++++++--------------- scripts/scripts.js | 11 ++ styles/styles.css | 13 +- 4 files changed, 219 insertions(+), 422 deletions(-) diff --git a/blocks/header/header.css b/blocks/header/header.css index a69cc5cb..e74af732 100644 --- a/blocks/header/header.css +++ b/blocks/header/header.css @@ -1,91 +1,54 @@ - -header { - background-color: white; -} - .header.block nav { - position: relative; display: grid; - height: var(--nav-height); - z-index: 1000; - overflow-y: scroll; grid-template: - 'logo . hamburger' 75px - 'brand brand brand' min-content - 'sections sections sections' min-content - 'utility utility utility' min-content + "logo . hamburger" 75px + "sections sections sections" min-content + "contact-us contact-us contact-us" min-content / min-content 1fr min-content; - justify-content: space-between; + padding: 20px; + align-items: center; background-color: var(--white); - box-shadow: 2px 2px 10px 1px rgba(0 0 0 / 15%); } -.header.block nav[aria-expanded="true"] { - height: 100vh; +.header.block nav a { + text-decoration: none; + color: var(--quartz); + font-weight: bold; } -.header.block .nav-logo { +.header.block.nav-logo { grid-area: logo; } -.header.block .nav-logo a { - position: relative; - display: flex; - margin: 0 15px; - height: 100%; - align-items: center; -} - .header.block .nav-logo img { padding: 15px 0; height: auto; width: 105px; } -.header.block .nav-brand { - grid-area: brand; - display: flex; - height: 25px; - align-items: center; - justify-content: center; - font-size: var(--body-font-size-xs); - font-weight: var(--font-weight-semibold); - line-height: var(--line-height-m); - text-transform: uppercase; -} - -.header.block .nav-brand a:hover { - color: var(--quartz); - text-decoration: none; -} - .header.block .nav-hamburger { - display: flex; grid-area: hamburger; - align-items: center; - justify-content: center; + overflow: hidden; } .header.block .nav-hamburger .nav-hamburger-icon { - display: block; - margin: 0 15px; background-color: transparent; + cursor: pointer; } -.header.block .nav-hamburger .icon-hamburger, -.header.block nav[aria-expanded="true"] .nav-hamburger .icon-close { - display: block; +.header.block .nav-hamburger .icon { + height: 25px; + width: 25px; } -/* stylelint-disable-next-line no-descending-specificity */ -.header.block .nav-hamburger .icon-close, -.header.block nav[aria-expanded="true"] .nav-hamburger .icon-hamburger { - display: none; +.header.block nav[aria-expanded="false"] .nav-hamburger .icon.icon-hamburger, +.header.block nav[aria-expanded="true"] .nav-hamburger .icon.icon-close { + display: block; } -.header.block .nav-hamburger .icon { - height: 25px; - width: 25px; +.header.block nav[aria-expanded="false"] .nav-hamburger .icon.icon-close, +.header.block nav[aria-expanded="true"] .nav-hamburger .icon.icon-hamburger { + display: none; } .header.block .nav-hamburger .icon svg { @@ -93,42 +56,38 @@ header { width: 100%; } -.header.block .nav-sections { +.header.block nav .nav-sections { display: none; - grid-area: sections; - background-color: white; } -.header.block .nav-utility { - display: none; - grid-area: utility; - background-color: var(--silver); -} - -.header.block nav[aria-expanded="true"] .nav-sections, -.header.block nav[aria-expanded="true"] .nav-utility { +.header.block nav[aria-expanded="true"] .nav-sections { + grid-area: sections; display: block; } .header.block .nav-sections > ul { - display: block; - padding: 10px 0; - text-align: center; + display: flex; + padding: 20px 0; + margin: 0; + flex-direction: column; + justify-content: space-around; + gap: 20px; } -.header.block .nav-sections > ul > li { - position: relative; - padding: 15px 0; +.header.block .nav-sections > ul > li > ul { + display: none; } -/* stylelint-disable-next-line no-descending-specificity */ .header.block .nav-sections > ul > li > a { display: flex; - font-weight: var(--font-weight-semibold); - line-height: var(--line-height-m); align-items: center; - justify-content: center; - column-gap: 5px; + justify-content: space-between; + padding: 10px 0; + border-bottom: 1px solid var(--gray); +} + +.header.block .nav-sections > ul > li.nav-drop > a.active-arrow-down::after { + background-image: url(images/down-arrow.png); } .header.block .nav-sections > ul > li.nav-drop > a > .icon { @@ -146,248 +105,105 @@ header { height: 100%; } -.header.block .nav-sections > ul > li.nav-drop[aria-expanded="true"] > a > span { - transform: rotate(180deg); -} - -.header.block .nav-sections > ul > li.separator { - display: none; +.header.block .nav-sections > ul > li.nav-drop > a > span { + transition: transform 0.3s ease-in-out; + transform: rotate(0); } -.header.block .nav-sections > ul > li > ul { - display: none; +.header.block .nav-sections > ul > li.nav-drop[aria-expanded="true"] > a > span { + transform: rotate(180deg); } .header.block .nav-sections > ul > li.nav-drop[aria-expanded="true"] > ul { display: block; } -.header.block .nav-sections > ul > li > ul > li { - padding: 12px 0; +.header.block .nav-sections > ul > li > ul > li.active > a { + text-decoration: underline; } -/* stylelint-disable-next-line no-descending-specificity */ .header.block .nav-sections > ul > li > ul > li > a { display: flex; - align-items: center; - justify-content: center; - column-gap: 5px; - font-size: var(--body-font-size-s); - font-weight: var(--font-weight-normal); -} - -.header.block .nav-sections > ul > li > ul > li.show-all > a { - font-weight: var(--font-weight-bold); + justify-content: flex-start; + padding: 20px 20px 0; } -/* stylelint-disable-next-line no-descending-specificity */ -.header.block .nav-sections > ul > li > ul > li > a > .icon { - display: inline-block; - position: relative; - height: 14px; - width: 14px; -} - -.header.block .nav-sections > ul > li > hr { +.header.block nav .nav-contact-us { display: none; } -/* stylelint-disable-next-line no-descending-specificity */ -.header.block .nav-utility > ul > li { - padding: 20px 0; - margin: 0 auto; - max-width: 200px; - font-size: var(--body-font-size-s); - font-weight: var(--font-weight-semibold); - text-align: center; - text-transform: uppercase; - border-bottom: 1px solid var(--gray); +.header.block nav[aria-expanded="true"] .nav-contact-us { + grid-area: contact-us; + display: flex; + justify-content: center; } -.header.block .nav-utility > ul > li:last-child { - border-bottom: none; +.header.block .nav-contact-us > p { + margin: 0; } -/* stylelint-disable-next-line no-descending-specificity */ -.header.block nav a { +.header.block .nav-contact-us > p > a { + display: inline-block; + padding: 8px 42px; + font-weight: normal; text-decoration: none; - color: var(--quartz); + color: var(--white); + background-color: var(--dark-red); + border-bottom-left-radius: 20px; + white-space: nowrap; } -/* stylelint-disable-next-line no-descending-specificity */ -.header.block nav a:visited { - color: var(--quartz); -} - -@media screen and (max-width: 299px) { - .header.block .nav-brand { - display: none; - max-width: 150px; - margin: 0 auto; - text-align: center; - } - - .header.block nav[aria-expanded="true"] .nav-brand { - display: flex; - } -} +@media (min-width: 900px) { -@media screen and (min-width: 600px) { .header.block nav { - overflow-y: visible; grid-template: - 'utility utility utility' 50px - 'logo brand hamburger' 75px - 'sections sections sections' min-content - / min-content 1fr min-content; + "logo sections contact-us" 75px + ". . hamburger" min-content + / min-content 1fr min-content; + padding: 20px 90px; } - .header.block .nav-brand { - align-items: center; - justify-content: flex-start; - height: 100%; - } - - .header.block .nav-hamburger .nav-hamburger-icon .icon { - height: 35px; - width: 35px; - } - - .header.block nav[aria-expanded="false"] .nav-utility { - display: block; - } - - .header.block .nav-utility ul { - display: flex; - height: 50px; - justify-content: flex-end; + .header.block .nav-hamburger { + display: none; } - .header.block .nav-utility > ul > li { + .header.block .nav-sections { display: flex; - margin: unset; - max-width: unset; - padding: 0 25px; - align-items: center; - border-bottom: none; - text-transform: none; - } - - .header.block .nav-utility a { - font-size: var(--body-font-size-s); - font-weight: var(--font-weight-semibold); - color: var(--quartz); - text-decoration: none; - } - - .header.block .nav-utility a:visited { - color: var(--quartz); - } -} - -@media screen and (min-width: 900px) { - .header.block nav[aria-expanded="true"] { - height: var(--nav-height); - } - - .header.block nav { - grid-template: - 'utility utility utility' 50px - 'logo brand sections' 75px - / min-content min-content 1fr; - } - - /* stylelint-disable-next-line no-descending-specificity */ - .header.block nav a:hover { - text-decoration: underline; - color: var(--red); + justify-content: center; } .header.block .nav-sections > ul { - display: flex; - padding: 0 15px; - height: 100%; - align-items: center; - justify-content: space-around; + flex-direction: row; + width: 100%; } - .header.block .nav-sections > ul > li { - display: flex; - height: 100%; + .header.block .nav-sections > ul > li > a { padding: 0; - align-items: center; - } - - .header.block .nav-sections > ul > li.active { - border-bottom: 3px solid var(--red); - } - - .header.block .nav-sections > ul > li > ul { - position: absolute; - padding: 0 20px; - top: calc(80%); - left: -45px; - background-color: white; - box-shadow: 0 5px 8px 0 rgba(0 0 0 / 30%); - z-index: 1000; - } - - .header.block .nav-sections > ul > li.nav-drop:not([data-touch-click="true"]):hover > ul { - display: block; - } - - .header.block .nav-sections > ul > li > ul > li { - padding: 6px 0; - } - - .header.block .nav-sections > ul > li > ul > li > a { - padding: 6px 0; - line-height: var(--line-height-m); - justify-content: flex-start; - white-space: nowrap; - } - - .header.block .nav-sections > ul > li.nav-drop:not([data-touch-click="true"]):hover > a > span { - transform: rotate(180deg); - } - - .header.block .nav-sections > ul > li.separator { - display: list-item; - padding: 0; - height: 35px; - border-left: 1px solid var(--silver) - } - - .header.block .nav-brand { - width: 180px; + border-bottom: none; } - .header.block .nav-hamburger { + .header.block .nav-sections > ul > li.nav-drop > a > .icon { display: none; } - .header.block nav[aria-expanded="true"] .nav-utility, - .header.block nav[aria-expanded="false"] .nav-utility { - display: block; - justify-content: flex-end; + .header.block .nav-sections > ul > li.nav-drop[aria-expanded="true"] > ul { + position: absolute; + left: 0; + width: 100vw; + display: flex; + opacity: 1; + background-color: var(--gray-neutral-80); + top: 86px; + justify-content: space-evenly; } -} -@media screen and (min-width: 1200px) { - .header.block .nav-brand { - align-items: center; - justify-content: flex-start; - width: unset; - white-space: nowrap; - font-size: var(--body-font-size-m); + .header.block .nav-sections > ul > li.nav-drop[aria-expanded="true"] > ul > li > a { + padding: 10px 0; + color: var(--gray); } - .header.block .nav-sections > ul { - column-gap: 25px; - justify-content: flex-end; + .header.block .nav-sections > ul > li > ul > li.active > a { + border-bottom: 5px solid var(--white); } - .header.block .nav-sections > ul > li > ul > li.hide { - display: none; - } } diff --git a/blocks/header/header.js b/blocks/header/header.js index dfe5887f..4aa2c739 100644 --- a/blocks/header/header.js +++ b/blocks/header/header.js @@ -1,110 +1,79 @@ -import { getMetadata, decorateIcons, decorateSections } from '../../scripts/lib-franklin.js'; +import { + getMetadata, + decorateIcons, + decorateSections, +} from '../../scripts/lib-franklin.js'; -// media query match that indicates mobile/tablet width const isDesktop = window.matchMedia('(min-width: 900px)'); -function closeOnEscape(e) { - if (e.code === 'Escape') { - const nav = document.getElementById('nav'); - const navSections = nav.querySelector('.nav-sections'); - const navSectionExpanded = navSections.querySelector('[aria-expanded="true"]'); - if (navSectionExpanded && isDesktop.matches) { - // eslint-disable-next-line no-use-before-define - toggleAllNavSections(navSections); - navSectionExpanded.focus(); - } else if (!isDesktop.matches) { - // eslint-disable-next-line no-use-before-define - toggleMenu(nav, navSections); - nav.querySelector('button').focus(); - } +function setAttributes(element, attributes) { + for (const key in attributes) { + element.setAttribute(key, attributes[key]); } } -function openOnKeydown(e) { - const navDrop = e.currentTarget.closest('.nav-drop'); - if (navDrop && (e.code === 'Enter' || e.code === 'Space')) { - const dropExpanded = navDrop.getAttribute('aria-expanded') === 'true'; - // eslint-disable-next-line no-use-before-define - toggleAllNavSections(navDrop.closest('.nav-sections')); - navDrop.setAttribute('aria-expanded', dropExpanded ? 'false' : 'true'); - } +function createElemWithClass(type, ...classNames) { + const elem = document.createElement(type); + elem.classList.add(...classNames); + return elem; } -/** - * Toggles all nav sections - * @param {Element} sections The container element - * @param {Boolean} expanded Whether the element should be expanded or collapsed - */ function toggleAllNavSections(sections, expanded = false) { - sections.querySelectorAll('.nav-sections > ul > li.nav-drop').forEach((section) => { - section.setAttribute('aria-expanded', expanded); - section.removeAttribute('data-touch-click'); - }); + sections + .querySelectorAll('.nav-sections > ul > li.nav-drop') + .forEach((section) => { + setAttributes(section, { + 'aria-expanded': expanded, + 'data-touch-click': null, + }); + }); } -/** - * Toggles the entire nav - * @param {Element} nav The container element - * @param {Element} navSections The nav sections within the container element - * @param {*} forceExpanded Optional param to force nav expand behavior when not null - */ function toggleMenu(nav, navSections, forceExpanded = null) { const button = nav.querySelector('.nav-hamburger button'); - const expanded = forceExpanded !== null ? !forceExpanded : nav.getAttribute('aria-expanded') === 'true'; + const expanded = forceExpanded !== null + ? !forceExpanded + : nav.getAttribute('aria-expanded') === 'true'; - document.body.style.overflowY = (expanded || isDesktop.matches) ? '' : 'hidden'; - nav.setAttribute('aria-expanded', expanded ? 'false' : 'true'); + document.body.style.overflowY = expanded || isDesktop.matches ? '' : 'hidden'; + setAttributes(nav, { 'aria-expanded': expanded ? 'false' : 'true' }); toggleAllNavSections(navSections); - button.setAttribute('aria-label', expanded ? 'Open navigation' : 'Close navigation'); - // enable menu collapse on escape keypress - if (!expanded || isDesktop.matches) { - // collapse menu on escape press - window.addEventListener('keydown', closeOnEscape); - } else { - window.removeEventListener('keydown', closeOnEscape); - } + setAttributes(button, { + 'aria-label': expanded ? 'Open navigation' : 'Close navigation', + }); } -/** - * Builds the logo Div. - * @returns {HTMLDivElement} - */ function buildLogo() { - const logo = document.createElement('div'); - logo.classList.add('nav-logo'); - logo.innerHTML = ` - - - - `; + const logo = createElemWithClass('div', 'nav-logo'); + const link = document.createElement('a'); + setAttributes(link, { href: '/', rel: 'noopener', tabindex: '0' }); + const img = document.createElement('img'); + setAttributes(img, { + alt: 'Takeda Logo', + class: 'logo', + src: '/styles/images/logo.png', + loading: 'lazy', + height: '274', + width: '815', + }); + link.appendChild(img); + logo.appendChild(link); return logo; } -/** - * Builds the hamburger menu Div. - * @returns {HTMLDivElement} - */ -function buildBrand() { - const brand = document.createElement('div'); - brand.classList.add('nav-brand'); - brand.innerHTML = 'Takeda\'s Integrated Health Systems Team'; - return brand; -} - -/** - * Builds the hamburger menu Div. - * @returns {HTMLDivElement} - */ function buildHamburger() { - const hamburger = document.createElement('div'); - hamburger.classList.add('nav-hamburger'); - - hamburger.innerHTML = ` - - `; + const hamburger = createElemWithClass('div', 'nav-hamburger'); + const button = document.createElement('button'); + setAttributes(button, { + class: 'nav-hamburger-icon', + 'aria-controls': 'nav', + 'aria-label': 'Open navigation', + tabindex: '0', + }); + const iconHamburger = createElemWithClass('span', 'icon', 'icon-hamburger'); + const iconClose = createElemWithClass('span', 'icon', 'icon-close'); + button.append(iconHamburger, iconClose); + hamburger.appendChild(button); return hamburger; } @@ -122,71 +91,65 @@ function buildSections(sections) { const active = section.querySelector('a'); if (active) { const url = new URL(active.href); - if (window.location.pathname.startsWith(url.pathname)) section.classList.add('active'); + if (window.location.pathname === url.pathname) { + section.classList.add('active'); + } } const submenu = section.querySelector('ul'); if (submenu) { - const icon = submenu.querySelector('span.icon-right-arrow'); - if (icon) { - const li = icon.closest('li'); - li.classList.add('hide', 'show-all'); - } - const anchor = section.querySelector('a'); anchor.append(expander.cloneNode()); section.classList.add('nav-drop'); - section.setAttribute('aria-expanded', 'false'); + + const submenuLinks = submenu.querySelectorAll('li > a'); + const isCurrentPath = Array.from(submenuLinks).some((link) => { + const isMatch = window.location.pathname === new URL(link.href).pathname + && link.hash === window.location.hash; + if (isMatch) { + link.parentElement.classList.add('active'); + link.href = link.hash; + } + return isMatch; + }); + section.setAttribute('aria-expanded', isCurrentPath ? 'true' : 'false'); + + submenuLinks.forEach((link) => { + if (window.location.pathname === new URL(link.href).pathname) { + link.href = link.hash; + } + link.addEventListener('click', (e) => { + // remove active class from all links + submenuLinks.forEach((l) => l.parentElement.classList.remove('active')); + if (link.hash && window.location.pathname === new URL(link.href).pathname) { + link.parentElement.classList.add('active'); + e.stopPropagation(); + } + }); + }); anchor.setAttribute('tabindex', '0'); anchor.setAttribute('role', 'button'); anchor.addEventListener('click', (e) => { + e.preventDefault(); + e.stopPropagation(); const expanded = section.getAttribute('aria-expanded') === 'true'; - if (e.pointerType !== 'mouse' || !isDesktop.matches) { - e.preventDefault(); - e.stopPropagation(); - toggleAllNavSections(sections); + toggleAllNavSections(sections); + if (!isDesktop.matches) { section.setAttribute('aria-expanded', !expanded); - const all = section.querySelector('.show-all'); - if (all) { - all.classList.remove('hide'); - } - if (e.pointerType !== 'mouse') { - section.setAttribute('data-touch-click', 'true'); - } + } else { + section.setAttribute('aria-expanded', true); } - }); - section.addEventListener('pointerenter', (e) => { - if (e.pointerType === 'mouse') { - toggleAllNavSections(sections); - section.setAttribute('aria-expanded', 'true'); - const all = section.querySelector('.show-all'); - if (all) { - all.classList.add('hide'); - } + const all = section.querySelector('.show-all'); + if (all) { + all.classList.remove('hide'); } - }); - section.addEventListener('pointerleave', (e) => { - if (e.pointerType === 'mouse') { - toggleAllNavSections(sections); - section.setAttribute('aria-expanded', 'false'); - const all = section.querySelector('.show-all'); - if (all) { - all.classList.remove('hide'); - } + if (e.pointerType !== 'mouse') { + section.setAttribute('data-touch-click', 'true'); } }); - // enable nav dropdown keyboard accessibility - anchor.addEventListener('keydown', openOnKeydown); } }); - sections.querySelectorAll(':scope > ul > li').forEach((li) => { - if (li.textContent.match(/^---/)) { - li.classList.add('separator'); - li.textContent = ''; - } - }); - return sections; } @@ -197,7 +160,7 @@ function buildSections(sections) { export default async function decorate(block) { // fetch nav content const navMeta = getMetadata('nav'); - const navPath = navMeta ? new URL(navMeta).pathname : '/nav'; + const navPath = navMeta ? new URL(navMeta).pathname : '/drafts/phase-two-redo/nav'; const resp = await fetch(`${navPath}.plain.html`); if (resp.ok) { @@ -210,12 +173,13 @@ export default async function decorate(block) { wrapper.classList.replace('default-content-wrapper', `nav-${clazz}`); }); - block.innerHTML = ` -
- -
- `; + const navWrapper = createElemWithClass('div', 'nav-wrapper'); + const navElement = createElemWithClass('nav', 'nav'); + navElement.id = 'nav'; + navElement.setAttribute('aria-expanded', isDesktop.matches); + + navWrapper.appendChild(navElement); + block.appendChild(navWrapper); const nav = block.querySelector('nav'); const sections = buildSections(html.querySelector('.nav-sections')); @@ -226,25 +190,22 @@ export default async function decorate(block) { toggleMenu(nav, sections); }); + const contactus = html.querySelector('.nav-contact-us'); + const utility = html.querySelector('.nav-utility'); // Order maintains tabindex keyboard nav nav.append(buildLogo()); - nav.append(buildBrand()); nav.append(hamburger); nav.append(sections); - nav.append(utility); + nav.append(contactus); - isDesktop.addEventListener('change', () => toggleMenu(nav, sections, isDesktop.matches)); - document.body.addEventListener('click', () => { - toggleAllNavSections(sections); - }); await decorateIcons(block); // Add a link to the Author guide, if anywhere in the Author Guide if (window.location.pathname.startsWith('/author-guide')) { const li = document.createElement('li'); - li.innerHTML = 'Author Guide'; + li.innerHTML = 'Author Guide'; utility.querySelector('ul').prepend(li); } } diff --git a/scripts/scripts.js b/scripts/scripts.js index 732a8cfd..0b8ec971 100644 --- a/scripts/scripts.js +++ b/scripts/scripts.js @@ -205,6 +205,16 @@ function decorateSectionButtonRow(main) { }); } +function decorateSectionIDs(main) { + main.querySelectorAll(':scope .section').forEach((section) => { + const id = section.getAttribute('data-id'); + if (id) { + section.id = id.toLowerCase().replaceAll(' ', '-'); + } + }); + +} + /** * Decorates the main element. * @param {Element} main The main element @@ -222,6 +232,7 @@ export function decorateMain(main) { decorateSectionButtonRow(main); decorateSectionBackgroundImage(main); decorateSectionGradientTopper(main); + decorateSectionIDs(main); } /** diff --git a/styles/styles.css b/styles/styles.css index 9c450ff8..cfa72ac6 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -58,7 +58,7 @@ --gray-neutral-90: #1e1e23; --gray-box-shadow: rgb(0 0 0 / 20%); --gray-gradient-light: #edeff0; - --gray-gradient-dark: #9da8af; + --gray-gradient-dark: #9da8af; /* general colors */ --silver: #d8d8d8; @@ -255,6 +255,15 @@ body.appear { header { height: var(--nav-height); + position: fixed; + top: 0; + left: 0; + width: 100vw; + z-index: 1000; +} + +main { + padding-top: var(--nav-height); } body.gray-gradient > main { @@ -391,7 +400,7 @@ main > .section[data-background-image] > .section-bg-image-wrapper picture img { width: 100%; object-fit: cover; object-position: center; - + /* temporary until there are right sized images */ height: 600px; } From 883fb3d9e8a251cc0569e45c4606cdaef4e56faa Mon Sep 17 00:00:00 2001 From: Sagar Date: Tue, 6 Feb 2024 21:01:45 +0530 Subject: [PATCH 2/5] fixes for eslint errors --- blocks/floating-images/floating-images.js | 2 -- blocks/form/form.js | 6 ------ blocks/header/header.js | 3 ++- scripts/scripts.js | 3 +-- 4 files changed, 3 insertions(+), 11 deletions(-) diff --git a/blocks/floating-images/floating-images.js b/blocks/floating-images/floating-images.js index 758e6a1f..f4f57d7a 100644 --- a/blocks/floating-images/floating-images.js +++ b/blocks/floating-images/floating-images.js @@ -2,8 +2,6 @@ export default function decorate(block) { const container = block.querySelector(':scope > div'); container.children[0].classList.add('content'); container.children[1].classList.add('image'); - const kids = block.children[1]; - console.log(kids); const picture = block.querySelector('picture'); const img = block.querySelector('img'); diff --git a/blocks/form/form.js b/blocks/form/form.js index 8302f1e9..ee4b8537 100644 --- a/blocks/form/form.js +++ b/blocks/form/form.js @@ -32,19 +32,16 @@ function constructPayload(form) { } async function submissionFailure(error, form) { - alert(error); // TODO define error mechansim form.setAttribute('data-submitting', 'false'); form.querySelector('button[type="submit"]').disabled = false; } async function prepareRequest(form, transformer) { const { payload } = constructPayload(form); - console.log(payload); const headers = { 'Content-Type': 'application/json', }; const body = JSON.stringify({ data: payload }); - console.log(body); const url = form.dataset.submit || form.dataset.action; if (typeof transformer === 'function') { return transformer({ headers, body, url }, form); @@ -61,7 +58,6 @@ async function submitForm(form, transformer) { headers, body, }); - console.log(response); if (response.ok) { /* window.location.href = form.dataset?.redirect || 'thankyou'; */ } else { @@ -336,7 +332,6 @@ async function fetchData(url) { async function fetchForm(pathname) { // get the main form const jsonData = await fetchData(pathname); - console.log(jsonData); return jsonData; } @@ -379,7 +374,6 @@ async function createForm(formURL) { export default async function decorate(block) { const formLink = block.querySelector('a[href$=".json"]'); - console.log(formLink); if (formLink) { const form = await createForm(formLink.href); formLink.replaceWith(form); diff --git a/blocks/header/header.js b/blocks/header/header.js index 4aa2c739..92ccd758 100644 --- a/blocks/header/header.js +++ b/blocks/header/header.js @@ -7,6 +7,7 @@ import { const isDesktop = window.matchMedia('(min-width: 900px)'); function setAttributes(element, attributes) { + // eslint-disable-next-line for (const key in attributes) { element.setAttribute(key, attributes[key]); } @@ -205,7 +206,7 @@ export default async function decorate(block) { // Add a link to the Author guide, if anywhere in the Author Guide if (window.location.pathname.startsWith('/author-guide')) { const li = document.createElement('li'); - li.innerHTML = 'Author Guide'; + li.innerHTML = 'Author Guide'; utility.querySelector('ul').prepend(li); } } diff --git a/scripts/scripts.js b/scripts/scripts.js index 0b8ec971..e2133e73 100644 --- a/scripts/scripts.js +++ b/scripts/scripts.js @@ -77,7 +77,7 @@ async function decorateDisclaimerModal() { disclaimerContainer.remove(); }); main.append(disclaimerContainer); - modal.querySelector('.close').addEventListener('click', function() { + modal.querySelector('.close').addEventListener('click', () => { document.querySelector('.disclaimer-modal-container').style.display = 'none'; }); } @@ -212,7 +212,6 @@ function decorateSectionIDs(main) { section.id = id.toLowerCase().replaceAll(' ', '-'); } }); - } /** From 519931eac646db64933dd5ea72d31ddd36093d26 Mon Sep 17 00:00:00 2001 From: Sagar Date: Tue, 6 Feb 2024 21:08:52 +0530 Subject: [PATCH 3/5] fix for few eslint issues --- blocks/cards/icon.css | 9 +---- blocks/floating-images/floating-images.css | 1 - blocks/header/header.css | 47 +++++++++++----------- 3 files changed, 26 insertions(+), 31 deletions(-) diff --git a/blocks/cards/icon.css b/blocks/cards/icon.css index 074a96f4..512239bd 100644 --- a/blocks/cards/icon.css +++ b/blocks/cards/icon.css @@ -54,21 +54,18 @@ font-weight: var(--font-weight-bold); line-height: var(--line-height-s); } -@media screen and (min-width: 600px) { - .cards.icon.block .card { - - } -} @media screen and (min-width: 900px) { .cards.icon.block .row { grid-template-columns: repeat(2, 1fr); } + .cards.icon.block .card { border-right: 1px solid grey; border-bottom:0; } + main .section[data-layout] .cards.icon.block .row { grid-template-columns: 1fr; } @@ -79,7 +76,5 @@ main .section[data-layout] .cards.icon.block .row { grid-template-columns: repeat(3, 1fr); } - .cards.icon.block .card { - } } diff --git a/blocks/floating-images/floating-images.css b/blocks/floating-images/floating-images.css index 2e7e17c3..2e35053e 100644 --- a/blocks/floating-images/floating-images.css +++ b/blocks/floating-images/floating-images.css @@ -2,7 +2,6 @@ .section.floating-images-container.grey > div { background-color: var(--brand--secondary-subtle); - } .block.floating-images > div { diff --git a/blocks/header/header.css b/blocks/header/header.css index e74af732..821419ad 100644 --- a/blocks/header/header.css +++ b/blocks/header/header.css @@ -56,6 +56,21 @@ width: 100%; } +.header.block .nav-contact-us > p { + margin: 0; +} + +.header.block .nav-contact-us > p > a { + display: inline-block; + padding: 8px 42px; + font-weight: normal; + text-decoration: none; + color: var(--white); + background-color: var(--dark-red); + border-bottom-left-radius: 20px; + white-space: nowrap; +} + .header.block nav .nav-sections { display: none; } @@ -87,7 +102,7 @@ } .header.block .nav-sections > ul > li.nav-drop > a.active-arrow-down::after { - background-image: url(images/down-arrow.png); + background-image: url('images/down-arrow.png'); } .header.block .nav-sections > ul > li.nav-drop > a > .icon { @@ -118,16 +133,16 @@ display: block; } -.header.block .nav-sections > ul > li > ul > li.active > a { - text-decoration: underline; -} - .header.block .nav-sections > ul > li > ul > li > a { display: flex; justify-content: flex-start; padding: 20px 20px 0; } +.header.block .nav-sections > ul > li > ul > li.active > a { + text-decoration: underline; +} + .header.block nav .nav-contact-us { display: none; } @@ -138,23 +153,9 @@ justify-content: center; } -.header.block .nav-contact-us > p { - margin: 0; -} -.header.block .nav-contact-us > p > a { - display: inline-block; - padding: 8px 42px; - font-weight: normal; - text-decoration: none; - color: var(--white); - background-color: var(--dark-red); - border-bottom-left-radius: 20px; - white-space: nowrap; -} @media (min-width: 900px) { - .header.block nav { grid-template: "logo sections contact-us" 75px @@ -197,13 +198,13 @@ justify-content: space-evenly; } + .header.block .nav-sections > ul > li > ul > li.active > a { + border-bottom: 5px solid var(--white); + } + .header.block .nav-sections > ul > li.nav-drop[aria-expanded="true"] > ul > li > a { padding: 10px 0; color: var(--gray); } - .header.block .nav-sections > ul > li > ul > li.active > a { - border-bottom: 5px solid var(--white); - } - } From 47be5126c789e4e43f518440ba76d31bf8b630fd Mon Sep 17 00:00:00 2001 From: Sagar Date: Wed, 7 Feb 2024 17:07:18 +0530 Subject: [PATCH 4/5] updated styles for footer new design --- blocks/footer/footer.css | 80 +++++++++++++++++++++++++++------------- blocks/footer/footer.js | 22 ++++++----- blocks/header/header.js | 7 +--- scripts/utils.js | 5 +++ 4 files changed, 72 insertions(+), 42 deletions(-) create mode 100644 scripts/utils.js diff --git a/blocks/footer/footer.css b/blocks/footer/footer.css index 5a478539..96147173 100644 --- a/blocks/footer/footer.css +++ b/blocks/footer/footer.css @@ -5,57 +5,85 @@ footer { background-color: var(--bright-gray); } - footer .footer.block { max-width: 1200px; margin: auto; } -footer .footer.block > div { +.footer.block .content-wrapper { display: flex; flex-direction: column; - align-items: flex-start; gap: 20px; } -footer .footer.block > div > div:has(picture) { - border-bottom: 2px solid var(--silver); - padding-bottom: 20px; +.footer.block .content-wrapper p { + font-size: var(--body-font-size-xs); + margin-bottom: 14px; + text-align: left; width: 100%; } -footer .footer.block > div > div:has(p>a) { +.footer.block .content-wrapper .footer-contact-us { + background-color: var(--gray-neutral-80); + border-radius: 0 0 10px 10px; + padding: 40px 60px; +} + +.footer.block .content-wrapper .footer-contact-us * { + color: var(--white); +} + +.footer.block .content-wrapper .footer-contact-us h3 { + color: var(--white); + font-size: var(--heading-font-size-l); + padding-bottom: 30px; +} + +.footer.block .content-wrapper .footer-contact-us p { + font-weight: var(--font-weight-semibold); + font-size: var(--body-font-size-l); + text-align: center; + padding-bottom: 30px; +} + +.footer.block .content-wrapper .footer-contact-us a { + display: inline-block; + padding: 8px 42px; + font-weight: normal; + line-height: var(--line-height-l); + text-decoration: none; + color: var(--white); + background-color: var(--dark-red); + border-bottom-left-radius: 20px; +} + +.footer.block .content-wrapper .footer-logo { display: flex; - flex-direction: column; align-items: flex-start; - gap: 0; + flex-direction: column; } -.footer.block picture { +.footer.block .content-wrapper .footer-logo p:has(picture) { + border-bottom: 2px solid var(--silver); +} + +.footer.block .content-wrapper .footer-logo img { + width: 105px; + height: auto; +} + +.footer.block .content-wrapper .footer-links { display: flex; - height: 36px; - width: auto; + flex-direction: column; } -.footer.block a { +.footer.block .content-wrapper .footer-links p > a { color: inherit; text-decoration: none; } -.footer.block a:hover { +.footer.block .content-wrapper .footer-links p > a:hover { text-decoration: underline; opacity: 0.8; } -.footer.block > div > div > p { - font-size: var(--body-font-size-xs); - margin-bottom: 14px; - text-align: left; -} - -@media screen and (min-width: 600px) { - footer .footer.block > div > div:has(p>a){ - flex-direction: row; - gap: 30px; - } -} \ No newline at end of file diff --git a/blocks/footer/footer.js b/blocks/footer/footer.js index 145775a2..a6bf17a0 100644 --- a/blocks/footer/footer.js +++ b/blocks/footer/footer.js @@ -1,4 +1,5 @@ -import { decorateIcons, getMetadata } from '../../scripts/lib-franklin.js'; +import { decorateSections, getMetadata } from '../../scripts/lib-franklin.js'; +import { createElemWithClass } from '../../scripts/utils.js'; /** * loads and decorates the footer @@ -6,7 +7,7 @@ import { decorateIcons, getMetadata } from '../../scripts/lib-franklin.js'; */ export default async function decorate(block) { const footerMeta = getMetadata('footer'); - const footerPath = footerMeta ? new URL(footerMeta).pathname : '/footer'; + const footerPath = footerMeta ? new URL(footerMeta).pathname : '/drafts/phase-two-redo/footer'; const resp = await fetch( `${footerPath}.plain.html`, window.location.pathname.endsWith('/footer') ? { cache: 'reload' } : {}, @@ -16,13 +17,14 @@ export default async function decorate(block) { const footer = document.createElement('div'); // decorate footer DOM footer.innerHTML = await resp.text(); - - // size the footer image - const image = footer.querySelector('picture img'); - image.width = '100'; - image.height = '36'; - - decorateIcons(footer); - block.append(footer); + decorateSections(footer); + const contentWrapper = createElemWithClass('div', 'content-wrapper'); + footer.querySelectorAll('.section[data-section]').forEach((section) => { + const clazz = section.getAttribute('data-section'); + const wrapper = section.children[0]; + wrapper.classList.replace('default-content-wrapper', `footer-${clazz}`); + contentWrapper.append(wrapper); + }); + block.replaceChildren(contentWrapper); } } diff --git a/blocks/header/header.js b/blocks/header/header.js index 92ccd758..d1b50653 100644 --- a/blocks/header/header.js +++ b/blocks/header/header.js @@ -3,6 +3,7 @@ import { decorateIcons, decorateSections, } from '../../scripts/lib-franklin.js'; +import { createElemWithClass } from '../../scripts/utils.js'; const isDesktop = window.matchMedia('(min-width: 900px)'); @@ -13,12 +14,6 @@ function setAttributes(element, attributes) { } } -function createElemWithClass(type, ...classNames) { - const elem = document.createElement(type); - elem.classList.add(...classNames); - return elem; -} - function toggleAllNavSections(sections, expanded = false) { sections .querySelectorAll('.nav-sections > ul > li.nav-drop') diff --git a/scripts/utils.js b/scripts/utils.js new file mode 100644 index 00000000..b1f4256c --- /dev/null +++ b/scripts/utils.js @@ -0,0 +1,5 @@ +export function createElemWithClass(type, ...classNames) { + const elem = document.createElement(type); + elem.classList.add(...classNames); + return elem; +} From b1abe8f5904db5b6b3b209d29f3dd70dda6035c9 Mon Sep 17 00:00:00 2001 From: Sagar Date: Wed, 7 Feb 2024 17:43:52 +0530 Subject: [PATCH 5/5] updated background --- blocks/footer/footer.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/blocks/footer/footer.css b/blocks/footer/footer.css index 96147173..121d9cd7 100644 --- a/blocks/footer/footer.css +++ b/blocks/footer/footer.css @@ -1,8 +1,8 @@ footer { margin: 0; - padding: 2rem; + padding: 0 2rem 2rem; text-align: center; - background-color: var(--bright-gray); + background: linear-gradient(to top, var(--bright-gray) 75%, white 0%); } footer .footer.block {