From c0a1d922cced26830ed0271711eb125363cdc822 Mon Sep 17 00:00:00 2001 From: wz914876 Date: Mon, 11 Dec 2023 19:11:53 +0530 Subject: [PATCH 01/12] initial commit --- blocks/card-list/card-list.js | 66 +++++++++++++++++++++-------------- icons/icon-dropdown.svg | 3 ++ styles/styles.css | 41 ++++++++++++++++++++++ 3 files changed, 83 insertions(+), 27 deletions(-) create mode 100644 icons/icon-dropdown.svg diff --git a/blocks/card-list/card-list.js b/blocks/card-list/card-list.js index 4d944e33..a6353e05 100644 --- a/blocks/card-list/card-list.js +++ b/blocks/card-list/card-list.js @@ -1,12 +1,13 @@ import ffetch from '../../scripts/ffetch.js'; import { - ul, a, div, span, h2, + ul, a, div, span, h2, button, input, label, } from '../../scripts/dom-builder.js'; import { toClassName } from '../../scripts/lib-franklin.js'; import createArticleCard from './articleCard.js'; import createApplicationCard from './applicationCard.js'; import createLibraryCard from './libraryCard.js'; +import { generateUUID } from '../../scripts/scripts.js'; const getSelectionFromUrl = (field) => toClassName(new URLSearchParams(window.location.search).get(field)) || ''; @@ -67,6 +68,14 @@ const createPagination = (entries, page, limit) => { return listPagination; }; +function toggleTopics(activeButton) { + const isOpen = activeButton.classList.contains('show'); + //console.log('isOpen...'+isOpen); + activeButton.setAttribute('aria-expanded', !isOpen); + activeButton.classList.toggle('show', !isOpen); + activeButton.querySelector('svg').classList.toggle('rotate-180', !isOpen); +} + const createFilters = (articles, activeTag) => { // collect tag filters const allKeywords = articles.map((item) => item.topics.replace(/,\s*/g, ',').split(',')); @@ -79,35 +88,38 @@ const createFilters = (articles, activeTag) => { const newUrl = new URL(window.location); newUrl.searchParams.delete('tag'); newUrl.searchParams.delete('page'); - const tags = div( - { class: 'flex flex-wrap gap-2 mb-4' }, - a( - { - class: - 'text-center my-2 inline-block rounded-full px-4 py-2 font-semibold bg-d text-danaherpurple-500 bg-danaherpurple-50 hover:bg-gray-100 hover:text-gray-500', - href: newUrl.toString(), - }, - 'View All', - ), - ); + + const uuid = generateUUID(); + const btnTopics = button({ id: 'menu-button', + type: 'button', + class: 'peer text-white bg-danaherpurple-500 hover:bg-gray-100 hover:text-gray-500 font-medium rounded-full text-sm px-5 py-2.5 text-center inline-flex items-center', + 'aria-expanded': false, + 'aria-controls': `${uuid}` + },); + btnTopics.innerHTML = `Topics`; + const tags = div({ class: 'relative inline-block text-left' }, div( btnTopics)); + const dropdownDiv = div({ id: `${uuid}`, class: 'absolute peer-[.show]:block hidden left-0 z-10 mt-2 w-56 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none'}); + const dropdownDivInner = div({ class: 'py-1', role: 'none' }); + [...keywords].sort().forEach((keyword) => { newUrl.searchParams.set('tag', toClassName(keyword).toLowerCase()); - const tagAnchor = a( - { - class: - 'text-center my-2 inline-block rounded-full px-4 py-2 font-semibold bg-d hover:bg-gray-100 hover:text-gray-500', - href: newUrl.toString(), - }, - keyword, - ); - if (toClassName(keyword).toLowerCase() === activeTag) { - tagAnchor.classList.add('bg-danaherpurple-500', 'text-white'); - tagAnchor.setAttribute('aria-current', 'tag'); - } else { - tagAnchor.classList.add('text-danaherpurple-500', 'bg-danaherpurple-50'); - } - tags.append(tagAnchor); + const inputEl = input({ class: 'w-4 h-4 text-blue-600 bg-gray-100 border-gray-300', type: 'radio', id: `topicsRadio`, name: 'topicsRadio', value: `${keyword}` }); + const labelEl = label({ class: 'w-full ms-2 text-sm font-medium text-gray-900 rounded cursor-pointer', for: `${keyword}` }, keyword ); + const tagsDiv = div( { class: 'text-gray-700 block px-4 py-2 text-sm'}, inputEl, labelEl); + dropdownDivInner.append(tagsDiv); + dropdownDiv.append(dropdownDivInner); + // if (toClassName(keyword).toLowerCase() === activeTag) { + // tagAnchor.classList.add('bg-danaherpurple-500', 'text-white'); + // tagAnchor.setAttribute('aria-current', 'tag'); + // } else { + // tagAnchor.classList.add('text-danaherpurple-500', 'bg-danaherpurple-50'); + // } + //console.log(toClassName(keyword).toLowerCase()+' === '+activeTag); + tags.append(dropdownDiv); }); + tags.addEventListener('click', () => toggleTopics(tags)); return tags; }; diff --git a/icons/icon-dropdown.svg b/icons/icon-dropdown.svg new file mode 100644 index 00000000..db3eded2 --- /dev/null +++ b/icons/icon-dropdown.svg @@ -0,0 +1,3 @@ + \ No newline at end of file diff --git a/styles/styles.css b/styles/styles.css index 9eca4f1b..ac584b89 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -2485,6 +2485,10 @@ main .default-content-wrapper ul { margin-bottom: 1rem !important; } +.-mr-1 { + margin-right: -0.25rem; +} + .-mr-px { margin-right: -1px; } @@ -2577,6 +2581,10 @@ main .default-content-wrapper ul { margin-right: 1.75rem; } +.ms-2 { + margin-inline-start: 0.5rem; +} + .mt-0 { margin-top: 0px; } @@ -2827,6 +2835,10 @@ main .default-content-wrapper ul { width: 1.25rem; } +.w-56 { + width: 14rem; +} + .w-6 { width: 1.5rem; } @@ -2940,6 +2952,10 @@ main .default-content-wrapper ul { table-layout: auto; } +.origin-top-right { + transform-origin: top right; +} + .-translate-x-8 { --tw-translate-x: -2rem; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); @@ -3866,6 +3882,11 @@ main .default-content-wrapper ul { color: rgb(0 0 0 / var(--tw-text-opacity)); } +.text-blue-600 { + --tw-text-opacity: 1; + color: rgb(37 99 235 / var(--tw-text-opacity)); +} + .text-danaherblack-500 { --tw-text-opacity: 1; color: rgb(51 51 51 / var(--tw-text-opacity)); @@ -4013,6 +4034,21 @@ main .default-content-wrapper ul { box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000) !important; } +.ring-1 { + --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); + --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color); + box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); +} + +.ring-black { + --tw-ring-opacity: 1; + --tw-ring-color: rgb(0 0 0 / var(--tw-ring-opacity)); +} + +.ring-opacity-5 { + --tw-ring-opacity: 0.05; +} + .\!ring-offset-0 { --tw-ring-offset-width: 0px !important; } @@ -4239,6 +4275,11 @@ main .default-content-wrapper ul { border-color: rgb(209 213 219 / var(--tw-border-opacity)); } +.focus\:outline-none:focus { + outline: 2px solid transparent; + outline-offset: 2px; +} + .focus\:ring-gray-300:focus { --tw-ring-opacity: 1; --tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity)); From e1b573ec8834314e99e56083dd1fc60983b03c0c Mon Sep 17 00:00:00 2001 From: wz914876 Date: Tue, 12 Dec 2023 17:50:45 +0530 Subject: [PATCH 02/12] dropdown button toggle changes --- blocks/card-list/card-list.js | 75 +++++++++++++++++------------------ styles/styles.css | 50 +++++++++++++++++------ tailwind.config.js | 12 ++++++ 3 files changed, 85 insertions(+), 52 deletions(-) diff --git a/blocks/card-list/card-list.js b/blocks/card-list/card-list.js index a6353e05..c6660d0b 100644 --- a/blocks/card-list/card-list.js +++ b/blocks/card-list/card-list.js @@ -68,12 +68,10 @@ const createPagination = (entries, page, limit) => { return listPagination; }; -function toggleTopics(activeButton) { - const isOpen = activeButton.classList.contains('show'); - //console.log('isOpen...'+isOpen); - activeButton.setAttribute('aria-expanded', !isOpen); - activeButton.classList.toggle('show', !isOpen); - activeButton.querySelector('svg').classList.toggle('rotate-180', !isOpen); +function toggleTopics(event) { + const isOpen = event.target.parentElement.getAttribute('aria-expanded'); + event.target.parentElement.setAttribute('aria-expanded', !JSON.parse(isOpen)); + event.target.parentElement.querySelector('svg')?.classList.toggle('rotate-180', !JSON.parse(isOpen)); } const createFilters = (articles, activeTag) => { @@ -89,40 +87,39 @@ const createFilters = (articles, activeTag) => { newUrl.searchParams.delete('tag'); newUrl.searchParams.delete('page'); - const uuid = generateUUID(); - const btnTopics = button({ id: 'menu-button', - type: 'button', - class: 'peer text-white bg-danaherpurple-500 hover:bg-gray-100 hover:text-gray-500 font-medium rounded-full text-sm px-5 py-2.5 text-center inline-flex items-center', - 'aria-expanded': false, - 'aria-controls': `${uuid}` - },); + const uuid = generateUUID(); + const btnTopics = button({ type: 'button', + class: 'btn btn-lg btn-primary-purple px-4 rounded-full', 'aria-expanded': false, 'aria-controls': `${uuid}` },); btnTopics.innerHTML = `Topics`; - const tags = div({ class: 'relative inline-block text-left' }, div( btnTopics)); - const dropdownDiv = div({ id: `${uuid}`, class: 'absolute peer-[.show]:block hidden left-0 z-10 mt-2 w-56 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none'}); - const dropdownDivInner = div({ class: 'py-1', role: 'none' }); - - [...keywords].sort().forEach((keyword) => { - newUrl.searchParams.set('tag', toClassName(keyword).toLowerCase()); - const inputEl = input({ class: 'w-4 h-4 text-blue-600 bg-gray-100 border-gray-300', type: 'radio', id: `topicsRadio`, name: 'topicsRadio', value: `${keyword}` }); - const labelEl = label({ class: 'w-full ms-2 text-sm font-medium text-gray-900 rounded cursor-pointer', for: `${keyword}` }, keyword ); - const tagsDiv = div( { class: 'text-gray-700 block px-4 py-2 text-sm'}, inputEl, labelEl); - dropdownDivInner.append(tagsDiv); - dropdownDiv.append(dropdownDivInner); - // if (toClassName(keyword).toLowerCase() === activeTag) { - // tagAnchor.classList.add('bg-danaherpurple-500', 'text-white'); - // tagAnchor.setAttribute('aria-current', 'tag'); - // } else { - // tagAnchor.classList.add('text-danaherpurple-500', 'bg-danaherpurple-50'); - // } - //console.log(toClassName(keyword).toLowerCase()+' === '+activeTag); - tags.append(dropdownDiv); - }); - tags.addEventListener('click', () => toggleTopics(tags)); - return tags; + + `; + const tags = div({ class: 'relative inline-block text-left' }, btnTopics); + const dropdownDiv = div({ id: `${uuid}`, class: 'w-max max-w-xs absolute left-0 z-10 mt-2 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none aria-expanded:block hidden'}); + const dropdownDivInner = div({ class: 'p-1 space-y-2', role: 'none' }); + + [...keywords].sort().forEach((keyword) => { + newUrl.searchParams.set('tag', toClassName(keyword).toLowerCase()); + const inputEl = input({ class: 'w-5 h-5 bg-gray-100 border-danaherblack-500 focus:ring-danaherblack-500 focus:ring-2 text-white cursor-pointer', type: 'radio', id: `${keyword}`, name: 'topicsRadio', value: `${keyword}` }); + const labelEl = label({ class: 'w-full text-sm font-medium text-gray-900', for: `${keyword}` }, keyword ); + const tagsDiv = a({ class: 'flex gap-x-3 items-center text-gray-700 block px-4 py-2 text-sm hover:bg-slate-50', href: newUrl.toString() }, inputEl, labelEl); + inputEl.addEventListener('click', (e) => { + window.location.href = e.target.parentElement.getAttribute('href'); + }); + if (toClassName(keyword).toLowerCase() === activeTag) { + tagsDiv.setAttribute('aria-current', 'tag'); + inputEl.setAttribute('checked', true); + } else { + inputEl.removeAttribute('checked'); + } + dropdownDivInner.append(tagsDiv); + dropdownDiv.append(dropdownDivInner); + tags.append(dropdownDiv); + }); + btnTopics.addEventListener('click', toggleTopics); + return tags; }; + export default async function decorate(block) { const articleType = block.classList.length > 2 ? block.classList[1] : ''; if (articleType) block.classList.remove(articleType); @@ -173,7 +170,7 @@ export default async function decorate(block) { block.append(divLetter, cardList); }); // render cards application style - } else if (articleType === 'application' || articleType === 'info') { + } else if (['application', 'info'].includes(articleType)) { filteredArticles.sort((card1, card2) => card1.title.localeCompare(card2.title)); const cardList = ul({ @@ -196,7 +193,7 @@ export default async function decorate(block) { const cardList = ul({ class: - 'container grid max-w-7xl w-full mx-auto gap-6 grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 px-4 sm:px-0 justify-items-center mt-3 mb-3', + 'container grid max-w-7xl w-full mx-auto gap-6 grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 px-0 lg:px-4 justify-items-center mt-4 mb-3', }); articlesToDisplay.forEach((article, index) => { cardList.appendChild(createArticleCard(article, index === 0)); diff --git a/styles/styles.css b/styles/styles.css index ac584b89..f73c0034 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -1811,6 +1811,13 @@ main .section { line-height: 1.25rem; } +.btn-lg { + padding-top: 0.625rem; + padding-bottom: 0.625rem; + font-size: 1.125rem; + line-height: 1.75rem; +} + .btn:disabled { cursor: not-allowed; opacity: 0.5; @@ -2581,10 +2588,6 @@ main .default-content-wrapper ul { margin-right: 1.75rem; } -.ms-2 { - margin-inline-start: 0.5rem; -} - .mt-0 { margin-top: 0px; } @@ -2835,10 +2838,6 @@ main .default-content-wrapper ul { width: 1.25rem; } -.w-56 { - width: 14rem; -} - .w-6 { width: 1.5rem; } @@ -3296,6 +3295,11 @@ main .default-content-wrapper ul { border-color: rgb(0 0 0 / var(--tw-border-opacity)); } +.border-danaherblack-500 { + --tw-border-opacity: 1; + border-color: rgb(51 51 51 / var(--tw-border-opacity)); +} + .border-danaherpurple-500 { --tw-border-opacity: 1; border-color: rgb(117 35 255 / var(--tw-border-opacity)); @@ -3882,11 +3886,6 @@ main .default-content-wrapper ul { color: rgb(0 0 0 / var(--tw-text-opacity)); } -.text-blue-600 { - --tw-text-opacity: 1; - color: rgb(37 99 235 / var(--tw-text-opacity)); -} - .text-danaherblack-500 { --tw-text-opacity: 1; color: rgb(51 51 51 / var(--tw-text-opacity)); @@ -4206,6 +4205,11 @@ main .default-content-wrapper ul { background-color: rgb(125 86 164 / var(--tw-bg-opacity)); } +.hover\:bg-slate-50:hover { + --tw-bg-opacity: 1; + background-color: rgb(248 250 252 / var(--tw-bg-opacity)); +} + .hover\:bg-slate-900\/\[0\.03\]:hover { background-color: rgb(15 23 42 / 0.03); } @@ -4280,6 +4284,17 @@ main .default-content-wrapper ul { outline-offset: 2px; } +.focus\:ring-2:focus { + --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); + --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color); + box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); +} + +.focus\:ring-danaherblack-500:focus { + --tw-ring-opacity: 1; + --tw-ring-color: rgb(51 51 51 / var(--tw-ring-opacity)); +} + .focus\:ring-gray-300:focus { --tw-ring-opacity: 1; --tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity)); @@ -4312,6 +4327,10 @@ main .default-content-wrapper ul { display: block; } +[aria-expanded='true'] + .aria-expanded\:block { + display: block; +} + @media (min-width: 640px) { .sm\:grid-cols-1 { @@ -4672,6 +4691,11 @@ main .default-content-wrapper ul { padding-right: 2.5rem; } + .lg\:px-4 { + padding-left: 1rem; + padding-right: 1rem; + } + .lg\:px-7 { padding-left: 1.75rem; padding-right: 1.75rem; diff --git a/tailwind.config.js b/tailwind.config.js index 97aea498..12950c35 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -1,3 +1,4 @@ +const plugin = require('tailwindcss/plugin') /** @type {import('tailwindcss').Config} */ module.exports = { content: ['./blocks/**/*.js', './scripts/*.js', '!./scripts/at-lsig.js', './fragments/*.html', './404.html'], // https://tailwindcss.com/docs/content-configuration#class-detection-in-depth @@ -7,6 +8,17 @@ module.exports = { opacity: ['disabled'], }, }, + plugins: [ + plugin(function ({ addVariant, e }) { + addVariant('aria-expanded', ({ modifySelectors, separator }) => { + modifySelectors(({ className }) => { + return `[aria-expanded='true'] + .${e( + `aria-expanded${separator}${className}` + )}` + }) + }) + }), + ], safelist: [ 'appear', 'btn', From 4e03591e27f5bf0a16f00c3da557632f854f7ca5 Mon Sep 17 00:00:00 2001 From: wz914876 Date: Tue, 12 Dec 2023 19:08:49 +0530 Subject: [PATCH 03/12] Added Brand dropdown changes --- blocks/card-list/card-list.js | 44 +++++++++++++++++++++-------------- scripts/scripts.js | 9 +++++++ styles/styles.css | 4 ++++ 3 files changed, 40 insertions(+), 17 deletions(-) diff --git a/blocks/card-list/card-list.js b/blocks/card-list/card-list.js index c6660d0b..6fe2c559 100644 --- a/blocks/card-list/card-list.js +++ b/blocks/card-list/card-list.js @@ -7,7 +7,7 @@ import { toClassName } from '../../scripts/lib-franklin.js'; import createArticleCard from './articleCard.js'; import createApplicationCard from './applicationCard.js'; import createLibraryCard from './libraryCard.js'; -import { generateUUID } from '../../scripts/scripts.js'; +import { generateUUID, capitalize } from '../../scripts/scripts.js'; const getSelectionFromUrl = (field) => toClassName(new URLSearchParams(window.location.search).get(field)) || ''; @@ -68,15 +68,15 @@ const createPagination = (entries, page, limit) => { return listPagination; }; -function toggleTopics(event) { +function toggleFilter(event) { const isOpen = event.target.parentElement.getAttribute('aria-expanded'); event.target.parentElement.setAttribute('aria-expanded', !JSON.parse(isOpen)); event.target.parentElement.querySelector('svg')?.classList.toggle('rotate-180', !JSON.parse(isOpen)); } -const createFilters = (articles, activeTag) => { +const createFilters = (articles, activeTag, tagName) => { // collect tag filters - const allKeywords = articles.map((item) => item.topics.replace(/,\s*/g, ',').split(',')); + const allKeywords = articles.map((item) => item[tagName].replace(/,\s*/g, ',').split(',')); const keywords = new Set([].concat(...allKeywords)); keywords.delete(''); keywords.delete('Blog'); // filter out generic blog tag @@ -84,21 +84,21 @@ const createFilters = (articles, activeTag) => { // render tag cloud const newUrl = new URL(window.location); - newUrl.searchParams.delete('tag'); + newUrl.searchParams.delete(tagName); newUrl.searchParams.delete('page'); - + tagName = capitalize(tagName); const uuid = generateUUID(); const btnTopics = button({ type: 'button', class: 'btn btn-lg btn-primary-purple px-4 rounded-full', 'aria-expanded': false, 'aria-controls': `${uuid}` },); - btnTopics.innerHTML = `Topics${tagName}`; - const tags = div({ class: 'relative inline-block text-left' }, btnTopics); + const tags = div({ class: `${tagName} relative inline-block text-left pr-52` }, btnTopics); const dropdownDiv = div({ id: `${uuid}`, class: 'w-max max-w-xs absolute left-0 z-10 mt-2 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none aria-expanded:block hidden'}); const dropdownDivInner = div({ class: 'p-1 space-y-2', role: 'none' }); [...keywords].sort().forEach((keyword) => { - newUrl.searchParams.set('tag', toClassName(keyword).toLowerCase()); + newUrl.searchParams.set(tagName, toClassName(keyword).toLowerCase()); const inputEl = input({ class: 'w-5 h-5 bg-gray-100 border-danaherblack-500 focus:ring-danaherblack-500 focus:ring-2 text-white cursor-pointer', type: 'radio', id: `${keyword}`, name: 'topicsRadio', value: `${keyword}` }); const labelEl = label({ class: 'w-full text-sm font-medium text-gray-900', for: `${keyword}` }, keyword ); const tagsDiv = a({ class: 'flex gap-x-3 items-center text-gray-700 block px-4 py-2 text-sm hover:bg-slate-50', href: newUrl.toString() }, inputEl, labelEl); @@ -106,7 +106,7 @@ const createFilters = (articles, activeTag) => { window.location.href = e.target.parentElement.getAttribute('href'); }); if (toClassName(keyword).toLowerCase() === activeTag) { - tagsDiv.setAttribute('aria-current', 'tag'); + tagsDiv.setAttribute('aria-current', tagName); inputEl.setAttribute('checked', true); } else { inputEl.removeAttribute('checked'); @@ -115,7 +115,7 @@ const createFilters = (articles, activeTag) => { dropdownDiv.append(dropdownDivInner); tags.append(dropdownDiv); }); - btnTopics.addEventListener('click', toggleTopics); + btnTopics.addEventListener('click', toggleFilter); return tags; }; @@ -131,10 +131,19 @@ export default async function decorate(block) { .filter(({ type }) => type.toLowerCase() === articleType) .all(); let filteredArticles = articles; - const activeTagFilter = getSelectionFromUrl('tag'); - if (activeTagFilter) { + const activeTopicsFilter = getSelectionFromUrl('topics'); + const activeBrandFilter = getSelectionFromUrl('brand'); + // console.log(activeTopicsFilter); + // console.log(activeBrandFilter); + if (activeTopicsFilter) { filteredArticles = articles.filter( - (item) => toClassName(item.topics).toLowerCase().indexOf(activeTagFilter) > -1, + (item) => toClassName(item.topics).toLowerCase().indexOf(activeTopicsFilter) > -1, + ); + } + + if (activeBrandFilter) { + filteredArticles = filteredArticles.filter( + (item) => toClassName(item.brand).toLowerCase().indexOf(activeBrandFilter) > -1, ); } @@ -200,9 +209,10 @@ export default async function decorate(block) { }); // render pagination and filters - const filterTags = createFilters(articles, activeTagFilter); + const topicsFilters = createFilters(articles, activeTopicsFilter, 'topics'); + const brandFilters = createFilters(articles, activeBrandFilter, 'brand'); const paginationElements = createPagination(filteredArticles, page, limitPerPage); - block.append(filterTags, cardList, paginationElements); + block.append(topicsFilters, brandFilters, cardList, paginationElements); } -} +} \ No newline at end of file diff --git a/scripts/scripts.js b/scripts/scripts.js index e43d1873..ae0322ac 100644 --- a/scripts/scripts.js +++ b/scripts/scripts.js @@ -83,6 +83,15 @@ export function generateUUID() { return Math.floor(1000 + Math.random() * 9000); } +/** + * Regex to capitalize first letter every word + * @returns capitalized word +*/ +export function capitalize(str) { + var reg = /\b([a-zÁ-ú]{3,})/g; + return str.replace(reg, (w) => w.charAt(0).toUpperCase() + w.slice(1)); +} + /** * Returns the valid public url with or without .html extension * @param {string} url diff --git a/styles/styles.css b/styles/styles.css index f73c0034..e93ec5d4 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -3678,6 +3678,10 @@ main .default-content-wrapper ul { padding-right: 0.75rem; } +.pr-52 { + padding-right: 13rem; +} + .pr-6 { padding-right: 1.5rem; } From 90f6ce6bd0efd7ec22a811947ff73224c12a3dc3 Mon Sep 17 00:00:00 2001 From: wz914876 Date: Wed, 13 Dec 2023 11:26:05 +0530 Subject: [PATCH 04/12] lint errors fixes --- blocks/card-list/card-list.js | 72 ++++++++++++++++++----------------- scripts/scripts.js | 4 +- 2 files changed, 39 insertions(+), 37 deletions(-) diff --git a/blocks/card-list/card-list.js b/blocks/card-list/card-list.js index 6fe2c559..e0845c37 100644 --- a/blocks/card-list/card-list.js +++ b/blocks/card-list/card-list.js @@ -68,7 +68,7 @@ const createPagination = (entries, page, limit) => { return listPagination; }; -function toggleFilter(event) { +function toggleFilter(event) { const isOpen = event.target.parentElement.getAttribute('aria-expanded'); event.target.parentElement.setAttribute('aria-expanded', !JSON.parse(isOpen)); event.target.parentElement.querySelector('svg')?.classList.toggle('rotate-180', !JSON.parse(isOpen)); @@ -86,40 +86,44 @@ const createFilters = (articles, activeTag, tagName) => { const newUrl = new URL(window.location); newUrl.searchParams.delete(tagName); newUrl.searchParams.delete('page'); - tagName = capitalize(tagName); - const uuid = generateUUID(); - const btnTopics = button({ type: 'button', - class: 'btn btn-lg btn-primary-purple px-4 rounded-full', 'aria-expanded': false, 'aria-controls': `${uuid}` },); - btnTopics.innerHTML = `${tagName}${capitalize(tagName)}`; - const tags = div({ class: `${tagName} relative inline-block text-left pr-52` }, btnTopics); - const dropdownDiv = div({ id: `${uuid}`, class: 'w-max max-w-xs absolute left-0 z-10 mt-2 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none aria-expanded:block hidden'}); - const dropdownDivInner = div({ class: 'p-1 space-y-2', role: 'none' }); - - [...keywords].sort().forEach((keyword) => { - newUrl.searchParams.set(tagName, toClassName(keyword).toLowerCase()); - const inputEl = input({ class: 'w-5 h-5 bg-gray-100 border-danaherblack-500 focus:ring-danaherblack-500 focus:ring-2 text-white cursor-pointer', type: 'radio', id: `${keyword}`, name: 'topicsRadio', value: `${keyword}` }); - const labelEl = label({ class: 'w-full text-sm font-medium text-gray-900', for: `${keyword}` }, keyword ); - const tagsDiv = a({ class: 'flex gap-x-3 items-center text-gray-700 block px-4 py-2 text-sm hover:bg-slate-50', href: newUrl.toString() }, inputEl, labelEl); - inputEl.addEventListener('click', (e) => { - window.location.href = e.target.parentElement.getAttribute('href'); - }); - if (toClassName(keyword).toLowerCase() === activeTag) { - tagsDiv.setAttribute('aria-current', tagName); - inputEl.setAttribute('checked', true); - } else { - inputEl.removeAttribute('checked'); - } - dropdownDivInner.append(tagsDiv); - dropdownDiv.append(dropdownDivInner); - tags.append(dropdownDiv); - }); - btnTopics.addEventListener('click', toggleFilter); - return tags; + `; + const tags = div({ class: `${tagName} relative inline-block text-left pr-52 pb-2` }, btnTopics); + const dropdownDiv = div({ id: `${uuid}`, class: 'w-max max-w-xs absolute left-0 z-10 mt-2 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none aria-expanded:block hidden' }); + const dropdownDivInner = div({ class: 'p-1 space-y-2', role: 'none' }); + + [...keywords].sort().forEach((keyword) => { + newUrl.searchParams.set(tagName, toClassName(keyword).toLowerCase()); + const inputEl = input({ + class: 'w-5 h-5 bg-gray-100 border-danaherblack-500 focus:ring-danaherblack-500 focus:ring-2 text-white cursor-pointer', type: 'radio', id: `${keyword}`, name: `${tagName}Radio`, value: `${keyword}`, + }); + const labelEl = label({ class: 'w-full text-sm font-medium text-gray-900', for: `${keyword}` }, keyword); + const tagsDiv = a({ class: 'flex gap-x-3 items-center text-gray-700 block px-4 py-2 text-sm hover:bg-slate-50', href: newUrl.toString() }, inputEl, labelEl); + inputEl.addEventListener('click', (e) => { + window.location.href = e.target.parentElement.getAttribute('href'); + }); + if (toClassName(keyword).toLowerCase() === activeTag) { + tagsDiv.setAttribute('aria-current', tagName); + inputEl.setAttribute('checked', true); + } else { + inputEl.removeAttribute('checked'); + } + dropdownDivInner.append(tagsDiv); + dropdownDiv.append(dropdownDivInner); + tags.append(dropdownDiv); + }); + btnTopics.addEventListener('click', toggleFilter); + return tags; }; - export default async function decorate(block) { const articleType = block.classList.length > 2 ? block.classList[1] : ''; if (articleType) block.classList.remove(articleType); @@ -133,8 +137,6 @@ export default async function decorate(block) { let filteredArticles = articles; const activeTopicsFilter = getSelectionFromUrl('topics'); const activeBrandFilter = getSelectionFromUrl('brand'); - // console.log(activeTopicsFilter); - // console.log(activeBrandFilter); if (activeTopicsFilter) { filteredArticles = articles.filter( (item) => toClassName(item.topics).toLowerCase().indexOf(activeTopicsFilter) > -1, @@ -215,4 +217,4 @@ export default async function decorate(block) { block.append(topicsFilters, brandFilters, cardList, paginationElements); } -} \ No newline at end of file +} diff --git a/scripts/scripts.js b/scripts/scripts.js index ae0322ac..b6fc836b 100644 --- a/scripts/scripts.js +++ b/scripts/scripts.js @@ -83,12 +83,12 @@ export function generateUUID() { return Math.floor(1000 + Math.random() * 9000); } -/** +/** * Regex to capitalize first letter every word * @returns capitalized word */ export function capitalize(str) { - var reg = /\b([a-zÁ-ú]{3,})/g; + const reg = /\b([a-zÁ-ú]{3,})/g; return str.replace(reg, (w) => w.charAt(0).toUpperCase() + w.slice(1)); } From 1bc1969d03c622f470450c7130668e6cbb10334e Mon Sep 17 00:00:00 2001 From: wz914876 Date: Wed, 13 Dec 2023 12:08:25 +0530 Subject: [PATCH 05/12] minor changes on dropdowns --- blocks/card-list/card-list.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/blocks/card-list/card-list.js b/blocks/card-list/card-list.js index e0845c37..ce5934d6 100644 --- a/blocks/card-list/card-list.js +++ b/blocks/card-list/card-list.js @@ -11,7 +11,7 @@ import { generateUUID, capitalize } from '../../scripts/scripts.js'; const getSelectionFromUrl = (field) => toClassName(new URLSearchParams(window.location.search).get(field)) || ''; -const createPaginationLink = (page, label, current = false) => { +const createPaginationLink = (page, btnLabel, current = false) => { const newUrl = new URL(window.location); newUrl.searchParams.set('page', page); const link = a( @@ -20,7 +20,7 @@ const createPaginationLink = (page, label, current = false) => { class: 'font-medium text-sm leading-5 pt-4 px-4 items-center inline-flex hover:border-t-2 hover:border-gray-300 hover:text-gray-700', }, - label || page, + btnLabel || page, ); if (current) { link.setAttribute('aria-current', 'page'); @@ -93,7 +93,7 @@ const createFilters = (articles, activeTag, tagName) => { 'aria-expanded': false, 'aria-controls': `${uuid}`, }); - btnTopics.innerHTML = `${capitalize(tagName)}${capitalize(tagName)}: ${activeTag}`; const tags = div({ class: `${tagName} relative inline-block text-left pr-52 pb-2` }, btnTopics); From 9ac8e5dc7d26b8c506dcd6861bf68f5c51449817 Mon Sep 17 00:00:00 2001 From: wz914876 Date: Thu, 14 Dec 2023 12:04:48 +0530 Subject: [PATCH 06/12] dropdown changes --- blocks/card-list/card-list.js | 24 +++++++++++------ styles/styles.css | 50 +++++++++++++++++++++-------------- styles/tailwind.css | 10 +++++++ 3 files changed, 56 insertions(+), 28 deletions(-) diff --git a/blocks/card-list/card-list.js b/blocks/card-list/card-list.js index ce5934d6..1885304a 100644 --- a/blocks/card-list/card-list.js +++ b/blocks/card-list/card-list.js @@ -77,11 +77,16 @@ function toggleFilter(event) { const createFilters = (articles, activeTag, tagName) => { // collect tag filters const allKeywords = articles.map((item) => item[tagName].replace(/,\s*/g, ',').split(',')); - const keywords = new Set([].concat(...allKeywords)); + const keywords = new Set(['All'].concat(...allKeywords)); keywords.delete(''); keywords.delete('Blog'); // filter out generic blog tag keywords.delete('News'); // filter out generic news tag - + let valSelected = ''; + [...keywords].forEach((keyword) => { + if (toClassName(keyword).toLowerCase() === activeTag) { + valSelected = ': '+keyword; + } + }); // render tag cloud const newUrl = new URL(window.location); newUrl.searchParams.delete(tagName); @@ -93,20 +98,23 @@ const createFilters = (articles, activeTag, tagName) => { 'aria-expanded': false, 'aria-controls': `${uuid}`, }); - btnTopics.innerHTML = `${capitalize(tagName)}: ${activeTag}${capitalize(tagName)}${valSelected}`; - const tags = div({ class: `${tagName} relative inline-block text-left pr-52 pb-2` }, btnTopics); + const tags = div({ class: `${tagName} relative inline-block text-left px-2 pb-2` }, btnTopics); const dropdownDiv = div({ id: `${uuid}`, class: 'w-max max-w-xs absolute left-0 z-10 mt-2 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none aria-expanded:block hidden' }); const dropdownDivInner = div({ class: 'p-1 space-y-2', role: 'none' }); - - [...keywords].sort().forEach((keyword) => { + + //keywords.add('All'); + console.log(keywords); + [...keywords].forEach((keyword) => { newUrl.searchParams.set(tagName, toClassName(keyword).toLowerCase()); + const href = newUrl.toString().includes('all') ? newUrl.toString().replace(`?${tagName}=all`, '').replace(`&${tagName}=all`, '') : newUrl.toString(); const inputEl = input({ - class: 'w-5 h-5 bg-gray-100 border-danaherblack-500 focus:ring-danaherblack-500 focus:ring-2 text-white cursor-pointer', type: 'radio', id: `${keyword}`, name: `${tagName}Radio`, value: `${keyword}`, + class: 'form-radio', type: 'radio', id: `${keyword}`, name: `${tagName}Radio`, value: `${keyword}`, }); const labelEl = label({ class: 'w-full text-sm font-medium text-gray-900', for: `${keyword}` }, keyword); - const tagsDiv = a({ class: 'flex gap-x-3 items-center text-gray-700 block px-4 py-2 text-sm hover:bg-slate-50', href: newUrl.toString() }, inputEl, labelEl); + const tagsDiv = a({ class: 'flex gap-x-3 items-center text-gray-700 block px-4 py-2 text-sm hover:bg-slate-50', href: href }, inputEl, labelEl); inputEl.addEventListener('click', (e) => { window.location.href = e.target.parentElement.getAttribute('href'); }); diff --git a/styles/styles.css b/styles/styles.css index e93ec5d4..ede34bc2 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -1944,6 +1944,36 @@ main .section { color: rgb(255 255 255 / var(--tw-text-opacity)); } +.form-radio { + height: 1.25rem; + width: 1.25rem; + flex-shrink: 0; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + border-radius: 9999px; + border-width: 2px; + --tw-border-opacity: 1; + border-color: rgb(209 213 219 / var(--tw-border-opacity)); +} + +.form-radio:checked { + border-color: transparent; + --tw-bg-opacity: 1; + background-color: rgb(51 51 51 / var(--tw-bg-opacity)); +} + +.form-radio:focus { + --tw-bg-opacity: 1; + background-color: rgb(51 51 51 / var(--tw-bg-opacity)); +} + +.form-radio[type="radio"]:checked { + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 16 16' fill='%23fff' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='8' cy='8' r='3'/%3E%3C/svg%3E"); + background-size: 24px 24px; + background-position: center; + } + .sticky-footer { position: fixed; bottom: 0.75rem; @@ -3295,11 +3325,6 @@ main .default-content-wrapper ul { border-color: rgb(0 0 0 / var(--tw-border-opacity)); } -.border-danaherblack-500 { - --tw-border-opacity: 1; - border-color: rgb(51 51 51 / var(--tw-border-opacity)); -} - .border-danaherpurple-500 { --tw-border-opacity: 1; border-color: rgb(117 35 255 / var(--tw-border-opacity)); @@ -3678,10 +3703,6 @@ main .default-content-wrapper ul { padding-right: 0.75rem; } -.pr-52 { - padding-right: 13rem; -} - .pr-6 { padding-right: 1.5rem; } @@ -4288,17 +4309,6 @@ main .default-content-wrapper ul { outline-offset: 2px; } -.focus\:ring-2:focus { - --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); - --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color); - box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); -} - -.focus\:ring-danaherblack-500:focus { - --tw-ring-opacity: 1; - --tw-ring-color: rgb(51 51 51 / var(--tw-ring-opacity)); -} - .focus\:ring-gray-300:focus { --tw-ring-opacity: 1; --tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity)); diff --git a/styles/tailwind.css b/styles/tailwind.css index fdd8b79b..47492e49 100644 --- a/styles/tailwind.css +++ b/styles/tailwind.css @@ -201,6 +201,16 @@ @apply py-2 text-lg; } + .form-radio{ + @apply w-5 h-5 appearance-none shrink-0 border-2 border-gray-300 rounded-full focus:bg-danaherblack-500 checked:bg-danaherblack-500 checked:border-transparent; + } + + .form-radio[type="radio"]:checked { + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 16 16' fill='%23fff' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='8' cy='8' r='3'/%3E%3C/svg%3E"); + background-size: 24px 24px; + background-position: center; + } + .sticky-footer { @apply fixed w-full flex gap-x-2 justify-center bottom-3 px-5 transition z-10; } From d1bf016e6ce0d5df92aeb1f449021ef8549d3659 Mon Sep 17 00:00:00 2001 From: wz914876 Date: Thu, 14 Dec 2023 13:04:24 +0530 Subject: [PATCH 07/12] Select All changes --- blocks/card-list/card-list.js | 46 +++++++++++++++++++++-------------- 1 file changed, 28 insertions(+), 18 deletions(-) diff --git a/blocks/card-list/card-list.js b/blocks/card-list/card-list.js index 1885304a..4f373a03 100644 --- a/blocks/card-list/card-list.js +++ b/blocks/card-list/card-list.js @@ -77,7 +77,7 @@ function toggleFilter(event) { const createFilters = (articles, activeTag, tagName) => { // collect tag filters const allKeywords = articles.map((item) => item[tagName].replace(/,\s*/g, ',').split(',')); - const keywords = new Set(['All'].concat(...allKeywords)); + const keywords = new Set([].concat(...allKeywords)); keywords.delete(''); keywords.delete('Blog'); // filter out generic blog tag keywords.delete('News'); // filter out generic news tag @@ -102,25 +102,34 @@ const createFilters = (articles, activeTag, tagName) => { `; const tags = div({ class: `${tagName} relative inline-block text-left px-2 pb-2` }, btnTopics); - const dropdownDiv = div({ id: `${uuid}`, class: 'w-max max-w-xs absolute left-0 z-10 mt-2 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none aria-expanded:block hidden' }); - const dropdownDivInner = div({ class: 'p-1 space-y-2', role: 'none' }); - - //keywords.add('All'); - console.log(keywords); - [...keywords].forEach((keyword) => { + const dropdownDiv = div({ id: `${uuid}`, class: 'w-max max-w-xs absolute left-0 z-10 mt-2 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none aria-expanded:block hidden' }, + div({ class: 'blog-inner-filter p-1 space-y-2', role: 'none' }, + a({class: 'flex gap-x-3 items-center text-gray-700 block px-4 py-2 text-sm hover:bg-slate-50', href: newUrl.toString().replace(`?${tagName}=all`, '').replace(`&${tagName}=all`, '')}, + input({class: 'view-all form-radio', type: 'radio', id: 'All', name: `${tagName}Radio`, value: 'All',}), + label({ class: 'w-full text-sm font-medium text-gray-900', for: 'All' }, 'All') + ) + ) + ); + const dropdownDivInner = dropdownDiv.querySelector('div.blog-inner-filter'); + const allTag = dropdownDiv.querySelector('.view-all'); + allTag.setAttribute('checked', true); + allTag.addEventListener('click', (e) => { + window.location.href = e.target.parentElement.getAttribute('href'); + }); + + [...keywords].sort().forEach((keyword) => { newUrl.searchParams.set(tagName, toClassName(keyword).toLowerCase()); - const href = newUrl.toString().includes('all') ? newUrl.toString().replace(`?${tagName}=all`, '').replace(`&${tagName}=all`, '') : newUrl.toString(); - const inputEl = input({ - class: 'form-radio', type: 'radio', id: `${keyword}`, name: `${tagName}Radio`, value: `${keyword}`, - }); - const labelEl = label({ class: 'w-full text-sm font-medium text-gray-900', for: `${keyword}` }, keyword); - const tagsDiv = a({ class: 'flex gap-x-3 items-center text-gray-700 block px-4 py-2 text-sm hover:bg-slate-50', href: href }, inputEl, labelEl); - inputEl.addEventListener('click', (e) => { - window.location.href = e.target.parentElement.getAttribute('href'); - }); + const inputEl = input({ class: 'form-radio', type: 'radio', id: `${keyword}`, name: `${tagName}Radio`, value: `${keyword}`}); + const tagsDiv = a({ class: 'flex gap-x-3 items-center text-gray-700 block px-4 py-2 text-sm hover:bg-slate-50', href: newUrl.toString() }, inputEl, + label({ class: 'w-full text-sm font-medium text-gray-900', for: `${keyword}` }, keyword) + ); + inputEl.addEventListener('click', (e) => { + window.location.href = e.target.parentElement.getAttribute('href'); + }); if (toClassName(keyword).toLowerCase() === activeTag) { tagsDiv.setAttribute('aria-current', tagName); inputEl.setAttribute('checked', true); + allTag.removeAttribute('checked'); } else { inputEl.removeAttribute('checked'); } @@ -128,7 +137,7 @@ const createFilters = (articles, activeTag, tagName) => { dropdownDiv.append(dropdownDivInner); tags.append(dropdownDiv); }); - btnTopics.addEventListener('click', toggleFilter); + tags.addEventListener('click', toggleFilter); return tags; }; @@ -145,6 +154,7 @@ export default async function decorate(block) { let filteredArticles = articles; const activeTopicsFilter = getSelectionFromUrl('topics'); const activeBrandFilter = getSelectionFromUrl('brand'); + if (activeTopicsFilter) { filteredArticles = articles.filter( (item) => toClassName(item.topics).toLowerCase().indexOf(activeTopicsFilter) > -1, @@ -225,4 +235,4 @@ export default async function decorate(block) { block.append(topicsFilters, brandFilters, cardList, paginationElements); } -} +} \ No newline at end of file From 4a6fa8d2b50c69e72a7a50b4e96d221a065f9fec Mon Sep 17 00:00:00 2001 From: wz914876 Date: Thu, 14 Dec 2023 13:05:25 +0530 Subject: [PATCH 08/12] lint fixes --- blocks/card-list/card-list.js | 49 +++++++++++++++++++++-------------- 1 file changed, 29 insertions(+), 20 deletions(-) diff --git a/blocks/card-list/card-list.js b/blocks/card-list/card-list.js index 4f373a03..17e9a611 100644 --- a/blocks/card-list/card-list.js +++ b/blocks/card-list/card-list.js @@ -83,8 +83,8 @@ const createFilters = (articles, activeTag, tagName) => { keywords.delete('News'); // filter out generic news tag let valSelected = ''; [...keywords].forEach((keyword) => { - if (toClassName(keyword).toLowerCase() === activeTag) { - valSelected = ': '+keyword; + if (toClassName(keyword).toLowerCase() === activeTag) { + valSelected = `: ${keyword}`; } }); // render tag cloud @@ -102,30 +102,39 @@ const createFilters = (articles, activeTag, tagName) => { `; const tags = div({ class: `${tagName} relative inline-block text-left px-2 pb-2` }, btnTopics); - const dropdownDiv = div({ id: `${uuid}`, class: 'w-max max-w-xs absolute left-0 z-10 mt-2 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none aria-expanded:block hidden' }, - div({ class: 'blog-inner-filter p-1 space-y-2', role: 'none' }, - a({class: 'flex gap-x-3 items-center text-gray-700 block px-4 py-2 text-sm hover:bg-slate-50', href: newUrl.toString().replace(`?${tagName}=all`, '').replace(`&${tagName}=all`, '')}, - input({class: 'view-all form-radio', type: 'radio', id: 'All', name: `${tagName}Radio`, value: 'All',}), - label({ class: 'w-full text-sm font-medium text-gray-900', for: 'All' }, 'All') - ) - ) - ); + const dropdownDiv = div( + { id: `${uuid}`, class: 'w-max max-w-xs absolute left-0 z-10 mt-2 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none aria-expanded:block hidden' }, + div( + { class: 'blog-inner-filter p-1 space-y-2', role: 'none' }, + a( + { class: 'flex gap-x-3 items-center text-gray-700 block px-4 py-2 text-sm hover:bg-slate-50', href: newUrl.toString().replace(`?${tagName}=all`, '').replace(`&${tagName}=all`, '') }, + input({ + class: 'view-all form-radio', type: 'radio', id: 'All', name: `${tagName}Radio`, value: 'All', + }), + label({ class: 'w-full text-sm font-medium text-gray-900', for: 'All' }, 'All'), + ), + ), + ); const dropdownDivInner = dropdownDiv.querySelector('div.blog-inner-filter'); const allTag = dropdownDiv.querySelector('.view-all'); allTag.setAttribute('checked', true); allTag.addEventListener('click', (e) => { window.location.href = e.target.parentElement.getAttribute('href'); }); - + [...keywords].sort().forEach((keyword) => { newUrl.searchParams.set(tagName, toClassName(keyword).toLowerCase()); - const inputEl = input({ class: 'form-radio', type: 'radio', id: `${keyword}`, name: `${tagName}Radio`, value: `${keyword}`}); - const tagsDiv = a({ class: 'flex gap-x-3 items-center text-gray-700 block px-4 py-2 text-sm hover:bg-slate-50', href: newUrl.toString() }, inputEl, - label({ class: 'w-full text-sm font-medium text-gray-900', for: `${keyword}` }, keyword) - ); - inputEl.addEventListener('click', (e) => { - window.location.href = e.target.parentElement.getAttribute('href'); - }); + const inputEl = input({ + class: 'form-radio', type: 'radio', id: `${keyword}`, name: `${tagName}Radio`, value: `${keyword}`, + }); + const tagsDiv = a( + { class: 'flex gap-x-3 items-center text-gray-700 block px-4 py-2 text-sm hover:bg-slate-50', href: newUrl.toString() }, + inputEl, + label({ class: 'w-full text-sm font-medium text-gray-900', for: `${keyword}` }, keyword), + ); + inputEl.addEventListener('click', (e) => { + window.location.href = e.target.parentElement.getAttribute('href'); + }); if (toClassName(keyword).toLowerCase() === activeTag) { tagsDiv.setAttribute('aria-current', tagName); inputEl.setAttribute('checked', true); @@ -154,7 +163,7 @@ export default async function decorate(block) { let filteredArticles = articles; const activeTopicsFilter = getSelectionFromUrl('topics'); const activeBrandFilter = getSelectionFromUrl('brand'); - + if (activeTopicsFilter) { filteredArticles = articles.filter( (item) => toClassName(item.topics).toLowerCase().indexOf(activeTopicsFilter) > -1, @@ -235,4 +244,4 @@ export default async function decorate(block) { block.append(topicsFilters, brandFilters, cardList, paginationElements); } -} \ No newline at end of file +} From 26216de747bbb871a28b7d5415bafa88d3eb7b9a Mon Sep 17 00:00:00 2001 From: Amlan Sengupta Date: Thu, 14 Dec 2023 15:27:35 +0530 Subject: [PATCH 09/12] base-styling for dropdown --- blocks/card-list/card-list.js | 25 ++++++++++++++++++------ styles/styles.css | 36 +++++++++++++++++++++++++++++++---- styles/tailwind.css | 8 ++++++++ 3 files changed, 59 insertions(+), 10 deletions(-) diff --git a/blocks/card-list/card-list.js b/blocks/card-list/card-list.js index 17e9a611..91ff3eca 100644 --- a/blocks/card-list/card-list.js +++ b/blocks/card-list/card-list.js @@ -70,8 +70,14 @@ const createPagination = (entries, page, limit) => { function toggleFilter(event) { const isOpen = event.target.parentElement.getAttribute('aria-expanded'); + if (JSON.parse(isOpen)) { + console.log(event.target.parentElement.parentElement); + event.target.parentElement.parentElement.focus(); + setTimeout(() => event.target.parentElement.parentElement.blur(), 1000); + } else { + event.target.parentElement.parentElement.focus(); + } event.target.parentElement.setAttribute('aria-expanded', !JSON.parse(isOpen)); - event.target.parentElement.querySelector('svg')?.classList.toggle('rotate-180', !JSON.parse(isOpen)); } const createFilters = (articles, activeTag, tagName) => { @@ -96,14 +102,21 @@ const createFilters = (articles, activeTag, tagName) => { type: 'button', class: 'btn btn-lg btn-primary-purple px-4 rounded-full', 'aria-expanded': false, + title: valSelected, 'aria-controls': `${uuid}`, }); - btnTopics.innerHTML = `${capitalize(tagName)}${valSelected}`; - const tags = div({ class: `${tagName} relative inline-block text-left px-2 pb-2` }, btnTopics); + btnTopics.innerHTML = `${capitalize(tagName)}${valSelected}`; + const tags = div( + { + class: `dropdown group ${tagName} relative inline-block text-left px-2 pb-2`, + 'tabindex': '0' + }, + btnTopics + ); const dropdownDiv = div( - { id: `${uuid}`, class: 'w-max max-w-xs absolute left-0 z-10 mt-2 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none aria-expanded:block hidden' }, + { id: `${uuid}`, class: 'dropdown-menu hidden group-focus-within:block w-max max-w-xs absolute left-0 z-10 mt-2 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none' }, div( { class: 'blog-inner-filter p-1 space-y-2', role: 'none' }, a( diff --git a/styles/styles.css b/styles/styles.css index ba3c9dc6..67de4265 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -3094,6 +3094,10 @@ main .default-content-wrapper ul { width: max-content; } +.min-w-\[15rem\] { + min-width: 15rem; +} + .min-w-\[320px\] { min-width: 320px; } @@ -3446,6 +3450,12 @@ main .default-content-wrapper ul { overflow-x: auto; } +.truncate { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + .whitespace-nowrap { white-space: nowrap; } @@ -4302,6 +4312,11 @@ main .default-content-wrapper ul { --tw-ring-offset-width: 0px !important; } +.blur { + --tw-blur: blur(8px); + filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); +} + .invert { --tw-invert: invert(100%); filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); @@ -4399,6 +4414,14 @@ main .section.top-border > div { padding-top: 1rem; } +/* .dropdown > .dropdown-menu { + @apply hidden; + } + + .dropdown:focus-within > .dropdown-menu { + @apply block; + } */ + @media (min-width: 768px) { .md\:btn-lg { @@ -4564,6 +4587,15 @@ main .section.top-border > div { --tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity)); } +.group:focus-within .group-focus-within\:block { + display: block; +} + +.group:focus-within .group-focus-within\:rotate-180 { + --tw-rotate: 180deg; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} + .group:hover .group-hover\:translate-x-1 { --tw-translate-x: 0.25rem; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); @@ -4591,10 +4623,6 @@ main .section.top-border > div { display: block; } -[aria-expanded='true'] + .aria-expanded\:block { - display: block; -} - @media (prefers-color-scheme: dark) { .dark\:bg-gray-800 { diff --git a/styles/tailwind.css b/styles/tailwind.css index 42c6387e..c73f7491 100644 --- a/styles/tailwind.css +++ b/styles/tailwind.css @@ -327,4 +327,12 @@ main .section.top-border > div { @apply pt-4; } + + /* .dropdown > .dropdown-menu { + @apply hidden; + } + + .dropdown:focus-within > .dropdown-menu { + @apply block; + } */ } From a78f007b89490c800333130a902650779ae872cf Mon Sep 17 00:00:00 2001 From: wz914876 Date: Thu, 14 Dec 2023 15:30:04 +0530 Subject: [PATCH 10/12] lint errors fix --- blocks/card-list/card-list.js | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/blocks/card-list/card-list.js b/blocks/card-list/card-list.js index 91ff3eca..c30c6047 100644 --- a/blocks/card-list/card-list.js +++ b/blocks/card-list/card-list.js @@ -71,7 +71,6 @@ const createPagination = (entries, page, limit) => { function toggleFilter(event) { const isOpen = event.target.parentElement.getAttribute('aria-expanded'); if (JSON.parse(isOpen)) { - console.log(event.target.parentElement.parentElement); event.target.parentElement.parentElement.focus(); setTimeout(() => event.target.parentElement.parentElement.blur(), 1000); } else { @@ -111,9 +110,9 @@ const createFilters = (articles, activeTag, tagName) => { const tags = div( { class: `dropdown group ${tagName} relative inline-block text-left px-2 pb-2`, - 'tabindex': '0' + tabindex: '0', }, - btnTopics + btnTopics, ); const dropdownDiv = div( { id: `${uuid}`, class: 'dropdown-menu hidden group-focus-within:block w-max max-w-xs absolute left-0 z-10 mt-2 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none' }, From 742babb321efd81ccc939e426a8c36c9800be32e Mon Sep 17 00:00:00 2001 From: wz914876 Date: Thu, 14 Dec 2023 19:13:18 +0530 Subject: [PATCH 11/12] Addressed review comments --- blocks/card-list/card-list.js | 21 +++++++++++++++------ styles/styles.css | 13 ------------- 2 files changed, 15 insertions(+), 19 deletions(-) diff --git a/blocks/card-list/card-list.js b/blocks/card-list/card-list.js index c30c6047..ea47a579 100644 --- a/blocks/card-list/card-list.js +++ b/blocks/card-list/card-list.js @@ -72,7 +72,7 @@ function toggleFilter(event) { const isOpen = event.target.parentElement.getAttribute('aria-expanded'); if (JSON.parse(isOpen)) { event.target.parentElement.parentElement.focus(); - setTimeout(() => event.target.parentElement.parentElement.blur(), 1000); + setTimeout(() => event.target.parentElement.parentElement.blur(), 200); } else { event.target.parentElement.parentElement.focus(); } @@ -99,14 +99,22 @@ const createFilters = (articles, activeTag, tagName) => { const uuid = generateUUID(); const btnTopics = button({ type: 'button', - class: 'btn btn-lg btn-primary-purple px-4 rounded-full', + class: 'btn px-4 rounded-full', 'aria-expanded': false, - title: valSelected, + title: valSelected.replace(':', '').toString().trimStart(), 'aria-controls': `${uuid}`, }); - btnTopics.innerHTML = `${capitalize(tagName)}${valSelected}`; + if (valSelected) { + btnTopics.classList.add('btn-primary-purple'); + btnTopics.innerHTML = `${capitalize(tagName)}${valSelected} + + `; + } else { + btnTopics.classList.add('btn-outline-trending-brand'); + btnTopics.innerHTML = `${capitalize(tagName)} + + `; + } const tags = div( { class: `dropdown group ${tagName} relative inline-block text-left px-2 pb-2`, @@ -127,6 +135,7 @@ const createFilters = (articles, activeTag, tagName) => { ), ), ); + const dropdownDivInner = dropdownDiv.querySelector('div.blog-inner-filter'); const allTag = dropdownDiv.querySelector('.view-all'); allTag.setAttribute('checked', true); diff --git a/styles/styles.css b/styles/styles.css index adad186a..e76f0cf3 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -2731,10 +2731,6 @@ main .default-content-wrapper ul { margin-bottom: 1rem !important; } -.-mr-1 { - margin-right: -0.25rem; -} - .-mr-px { margin-right: -1px; } @@ -3118,10 +3114,6 @@ main .default-content-wrapper ul { width: max-content; } -.min-w-\[15rem\] { - min-width: 15rem; -} - .min-w-\[320px\] { min-width: 320px; } @@ -4615,11 +4607,6 @@ main .section.top-border > div { display: block; } -.group:focus-within .group-focus-within\:rotate-180 { - --tw-rotate: 180deg; - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); -} - .group:hover .group-hover\:translate-x-1 { --tw-translate-x: 0.25rem; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); From 12976f74a2ec935f96dd1119d53852ae671ee2e7 Mon Sep 17 00:00:00 2001 From: wz914876 Date: Fri, 15 Dec 2023 11:35:46 +0530 Subject: [PATCH 12/12] Review comments changes --- blocks/card-list/card-list.js | 23 +++++++++-------------- styles/styles.css | 28 +++++++++++++++++++++++++--- 2 files changed, 34 insertions(+), 17 deletions(-) diff --git a/blocks/card-list/card-list.js b/blocks/card-list/card-list.js index ea47a579..e8fb13f1 100644 --- a/blocks/card-list/card-list.js +++ b/blocks/card-list/card-list.js @@ -104,26 +104,20 @@ const createFilters = (articles, activeTag, tagName) => { title: valSelected.replace(':', '').toString().trimStart(), 'aria-controls': `${uuid}`, }); - if (valSelected) { - btnTopics.classList.add('btn-primary-purple'); - btnTopics.innerHTML = `${capitalize(tagName)}${valSelected} - - `; - } else { - btnTopics.classList.add('btn-outline-trending-brand'); - btnTopics.innerHTML = `${capitalize(tagName)} - - `; - } + + valSelected = valSelected ? btnTopics.classList.add('btn-primary-purple', 'group') : btnTopics.classList.add('btn-outline-trending-brand', 'group'); + btnTopics.innerHTML = `${capitalize(tagName)} ${valSelected ? `${valSelected}` : ''} + + `; const tags = div( { - class: `dropdown group ${tagName} relative inline-block text-left px-2 pb-2`, + class: `dropdown group ${tagName} relative inline-block text-left pb-2 px-0 lg:px-2 pr-2`, tabindex: '0', }, btnTopics, ); const dropdownDiv = div( - { id: `${uuid}`, class: 'dropdown-menu hidden group-focus-within:block w-max max-w-xs absolute left-0 z-10 mt-2 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none' }, + { id: `${uuid}`, class: 'dropdown-menu hidden group-focus-within:block w-max max-w-xs absolute center-0 z-10 mt-2 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none' }, div( { class: 'blog-inner-filter p-1 space-y-2', role: 'none' }, a( @@ -242,6 +236,7 @@ export default async function decorate(block) { block.append(cardList); // render cards article style } else { + // block.classList.add('space-x-2'); filteredArticles.sort((card1, card2) => card2.publishDate - card1.publishDate); let page = parseInt(getSelectionFromUrl('page'), 10); @@ -252,7 +247,7 @@ export default async function decorate(block) { const cardList = ul({ class: - 'container grid max-w-7xl w-full mx-auto gap-6 grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 px-0 lg:px-4 justify-items-center mt-4 mb-3', + 'container grid max-w-7xl w-full mx-auto gap-6 grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 px-0 lg:px-2 justify-items-center mt-4 mb-3', }); articlesToDisplay.forEach((article, index) => { cardList.appendChild(createArticleCard(article, index === 0)); diff --git a/styles/styles.css b/styles/styles.css index cbfe9655..0aa3f187 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -3136,6 +3136,10 @@ main .default-content-wrapper ul { max-width: 80rem; } +.max-w-\[14rem\] { + max-width: 14rem; +} + .max-w-full { max-width: 100%; } @@ -3378,6 +3382,12 @@ main .default-content-wrapper ul { row-gap: 2rem; } +.space-x-2 > :not([hidden]) ~ :not([hidden]) { + --tw-space-x-reverse: 0; + margin-right: calc(0.5rem * var(--tw-space-x-reverse)); + margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse))); +} + .space-x-3 > :not([hidden]) ~ :not([hidden]) { --tw-space-x-reverse: 0; margin-right: calc(0.75rem * var(--tw-space-x-reverse)); @@ -3716,6 +3726,14 @@ main .default-content-wrapper ul { fill: #fff; } +.stroke-danaherpurple-500 { + stroke: #7523FF; +} + +.stroke-white { + stroke: #fff; +} + .object-contain { -o-object-fit: contain; object-fit: contain; @@ -4624,6 +4642,10 @@ main .section.top-border > div { background-color: rgb(117 35 255 / var(--tw-bg-opacity)); } +.group:hover .group-hover\:stroke-white { + stroke: #fff; +} + .group:hover .group-hover\:font-semibold { font-weight: 600; } @@ -5085,9 +5107,9 @@ main .section.top-border > div { padding-right: 2.5rem; } - .lg\:px-4 { - padding-left: 1rem; - padding-right: 1rem; + .lg\:px-2 { + padding-left: 0.5rem; + padding-right: 0.5rem; } .lg\:px-7 {