From 9701f3778f2e61322b81eae5e3ad3a37edc9e4ed Mon Sep 17 00:00:00 2001 From: Hidde de Vries Date: Wed, 11 Dec 2024 10:03:37 +0100 Subject: [PATCH 1/3] refactor: avoid using useHistory, fix focus issue focus was being reset to body, because of react router's behaviour, this no longer happens now that we use the browser's History API directly Signed-off-by: Hidde de Vries --- src/components/ComponentOverview.tsx | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/src/components/ComponentOverview.tsx b/src/components/ComponentOverview.tsx index cab36ab5ad1..37967dc669c 100644 --- a/src/components/ComponentOverview.tsx +++ b/src/components/ComponentOverview.tsx @@ -1,5 +1,4 @@ import type { PropSidebarItem, PropSidebarItemLink } from '@docusaurus/plugin-content-docs'; -import { useHistory } from '@docusaurus/router'; import { useCurrentSidebarCategory } from '@docusaurus/theme-common'; import { useDocById } from '@docusaurus/theme-common/internal'; import componentProgress from '@nl-design-system/component-progress/dist/index.json'; @@ -24,8 +23,7 @@ export const ComponentOverview = () => { }; const category = useCurrentSidebarCategory(); - const { location, push } = useHistory(); - + const { location } = window; const params = new URLSearchParams(location.search); const getComponent = (item: PropSidebarItemLink) => @@ -105,7 +103,13 @@ export const ComponentOverview = () => { params.append(SEARCH_PARAM, SEARCH_VALUES.ONLY_IMPLEMENTED); } - push({ ...location, search: params.toString() }); + if (params.size > 0) { + history.pushState({}, '', `?${params.toString()}`); + } else { + const url = new URL(window.location.href); + url.searchParams.delete('filter'); + history.pushState({}, '', url); + } }, [showTodo, showHelpWanted, showCommunity, showCandidate, showHallOfFame, showOnlyImplemented]); const todo = components.filter((c) => c.relayStep === 'UNKNOWN'); From c397241588d324c1c79292570256f1956e913c86 Mon Sep 17 00:00:00 2001 From: Hidde de Vries Date: Wed, 11 Dec 2024 10:04:00 +0100 Subject: [PATCH 2/3] feat: view filters when one or more filters are applied Signed-off-by: Hidde de Vries --- src/components/ComponentOverview.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/ComponentOverview.tsx b/src/components/ComponentOverview.tsx index 37967dc669c..93b05bcc803 100644 --- a/src/components/ComponentOverview.tsx +++ b/src/components/ComponentOverview.tsx @@ -131,7 +131,7 @@ export const ComponentOverview = () => { { className: 'utrecht-accordion--nlds-subtle', headingLevel: 2, - expanded: false, + expanded: params.size > 0, // TODO: Make Pull Request for Utrecht Accordion to allow `ReactNode` // eslint-disable-next-line @typescript-eslint/no-explicit-any From 3db9c9c1449e51bf9b0caabe78e86c29b7c18efc Mon Sep 17 00:00:00 2001 From: Hidde de Vries Date: Wed, 11 Dec 2024 11:07:32 +0100 Subject: [PATCH 3/3] fix: Only render the component in the browser (as its logic depends on a window to exist) Signed-off-by: Hidde de Vries --- docs/componenten/README.mdx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/docs/componenten/README.mdx b/docs/componenten/README.mdx index 99af050e495..c07421a4126 100644 --- a/docs/componenten/README.mdx +++ b/docs/componenten/README.mdx @@ -15,9 +15,10 @@ keywords: --- import { ComponentOverview } from "@site/src/components/ComponentOverview"; +import BrowserOnly from "@docusaurus/BrowserOnly"; # Componenten De componenten van NL Design System worden met een [estafette aanpak](/handboek/estafettemodel) gemaakt en kunnen dus verschillende statussen hebben. - +{() => }