From fcbe0ea16b37509df513dc6ca9fe96bf3dc5d79c Mon Sep 17 00:00:00 2001 From: PelayoFelgueroso Date: Wed, 22 Oct 2025 15:37:31 +0200 Subject: [PATCH 1/7] Added onClick to Links on Quick Nav to fix routing bug --- packages/lib/src/quick-nav/QuickNav.tsx | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-) diff --git a/packages/lib/src/quick-nav/QuickNav.tsx b/packages/lib/src/quick-nav/QuickNav.tsx index aa9718fb7..472b6acd3 100644 --- a/packages/lib/src/quick-nav/QuickNav.tsx +++ b/packages/lib/src/quick-nav/QuickNav.tsx @@ -68,7 +68,14 @@ export default function DxcQuickNav({ links, title }: QuickNavTypes) { {links.map((link) => (
  • - + { + e.preventDefault(); + const id = slugify(link.label, { lower: true }); + document.getElementById(id)?.scrollIntoView({ behavior: "smooth" }); + }} + > {link.label} {link.links?.length && ( @@ -79,6 +86,11 @@ export default function DxcQuickNav({ links, title }: QuickNavTypes) { href={`#${slugify(link?.label, { lower: true })}-${slugify(sublink?.label, { lower: true, })}`} + onClick={(e) => { + e.preventDefault(); + const id = slugify(link.label, { lower: true }); + document.getElementById(id)?.scrollIntoView({ behavior: "smooth" }); + }} > {sublink.label} From 4627e80577e95c81774165b13b09ad8472865ab0 Mon Sep 17 00:00:00 2001 From: PelayoFelgueroso Date: Wed, 22 Oct 2025 15:40:55 +0200 Subject: [PATCH 2/7] Add slugify to sublinks --- packages/lib/src/quick-nav/QuickNav.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/lib/src/quick-nav/QuickNav.tsx b/packages/lib/src/quick-nav/QuickNav.tsx index 472b6acd3..e3fae7830 100644 --- a/packages/lib/src/quick-nav/QuickNav.tsx +++ b/packages/lib/src/quick-nav/QuickNav.tsx @@ -88,7 +88,7 @@ export default function DxcQuickNav({ links, title }: QuickNavTypes) { })}`} onClick={(e) => { e.preventDefault(); - const id = slugify(link.label, { lower: true }); + const id = `${slugify(link.label, { lower: true })}-${slugify(sublink.label, { lower: true })}`; document.getElementById(id)?.scrollIntoView({ behavior: "smooth" }); }} > From 75a8258ebf5145e0ec23f3e9f23c1ab07fea05cc Mon Sep 17 00:00:00 2001 From: Pelayo Felgueroso Date: Thu, 23 Oct 2025 11:21:42 +0200 Subject: [PATCH 3/7] Add # to the url when any link or sublink is clicked on the QuickNav --- packages/lib/src/quick-nav/QuickNav.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/lib/src/quick-nav/QuickNav.tsx b/packages/lib/src/quick-nav/QuickNav.tsx index e3fae7830..57d03a9ab 100644 --- a/packages/lib/src/quick-nav/QuickNav.tsx +++ b/packages/lib/src/quick-nav/QuickNav.tsx @@ -74,6 +74,7 @@ export default function DxcQuickNav({ links, title }: QuickNavTypes) { e.preventDefault(); const id = slugify(link.label, { lower: true }); document.getElementById(id)?.scrollIntoView({ behavior: "smooth" }); + history.replaceState(null, "", `#${id}`); }} > {link.label} @@ -90,6 +91,7 @@ export default function DxcQuickNav({ links, title }: QuickNavTypes) { e.preventDefault(); const id = `${slugify(link.label, { lower: true })}-${slugify(sublink.label, { lower: true })}`; document.getElementById(id)?.scrollIntoView({ behavior: "smooth" }); + history.replaceState(null, "", `#${id}`); }} > {sublink.label} From 985350efcbc135d229008abc30446bb437d7c573 Mon Sep 17 00:00:00 2001 From: Pelayo Felgueroso Date: Thu, 23 Oct 2025 12:00:52 +0200 Subject: [PATCH 4/7] Add conditional onClick Prop to be displayed only when isHashRouter prop is passed --- packages/lib/src/quick-nav/QuickNav.tsx | 32 +++++++++++++++---------- packages/lib/src/quick-nav/types.ts | 4 ++++ 2 files changed, 23 insertions(+), 13 deletions(-) diff --git a/packages/lib/src/quick-nav/QuickNav.tsx b/packages/lib/src/quick-nav/QuickNav.tsx index 57d03a9ab..e44cfda33 100644 --- a/packages/lib/src/quick-nav/QuickNav.tsx +++ b/packages/lib/src/quick-nav/QuickNav.tsx @@ -59,7 +59,7 @@ const Link = styled.a` } `; -export default function DxcQuickNav({ links, title }: QuickNavTypes) { +export default function DxcQuickNav({ links, title, isHashRouter = false }: QuickNavTypes) { const translatedLabels = useContext(HalstackLanguageContext); return ( @@ -70,12 +70,15 @@ export default function DxcQuickNav({ links, title }: QuickNavTypes) {
  • { - e.preventDefault(); - const id = slugify(link.label, { lower: true }); - document.getElementById(id)?.scrollIntoView({ behavior: "smooth" }); - history.replaceState(null, "", `#${id}`); - }} + onClick={ + isHashRouter + ? (e) => { + e.preventDefault(); + const id = slugify(link.label, { lower: true }); + document.getElementById(id)?.scrollIntoView({ behavior: "smooth" }); + } + : undefined + } > {link.label} @@ -87,12 +90,15 @@ export default function DxcQuickNav({ links, title }: QuickNavTypes) { href={`#${slugify(link?.label, { lower: true })}-${slugify(sublink?.label, { lower: true, })}`} - onClick={(e) => { - e.preventDefault(); - const id = `${slugify(link.label, { lower: true })}-${slugify(sublink.label, { lower: true })}`; - document.getElementById(id)?.scrollIntoView({ behavior: "smooth" }); - history.replaceState(null, "", `#${id}`); - }} + onClick={ + isHashRouter + ? (e) => { + e.preventDefault(); + const id = `${slugify(link.label, { lower: true })}-${slugify(sublink.label, { lower: true })}`; + document.getElementById(id)?.scrollIntoView({ behavior: "smooth" }); + } + : undefined + } > {sublink.label} diff --git a/packages/lib/src/quick-nav/types.ts b/packages/lib/src/quick-nav/types.ts index a6c061dc4..e2daf9b5f 100644 --- a/packages/lib/src/quick-nav/types.ts +++ b/packages/lib/src/quick-nav/types.ts @@ -18,6 +18,10 @@ type Props = { * Links to be shown inside the quick nav component. */ links: Link[]; + /* + * Links to be shown inside the quick nav component. + */ + isHashRouter?: boolean; }; export default Props; From 0ac083a4460b4cb28da2dc46fdaf4d2cf0de9ecb Mon Sep 17 00:00:00 2001 From: Pelayo Felgueroso Date: Thu, 23 Oct 2025 12:07:31 +0200 Subject: [PATCH 5/7] Add isHashRouter to types.ts and QuickNavCodePage --- .../components/quick-nav/code/QuickNavCodePage.tsx | 11 +++++++++++ packages/lib/src/quick-nav/types.ts | 8 ++++---- 2 files changed, 15 insertions(+), 4 deletions(-) diff --git a/apps/website/screens/components/quick-nav/code/QuickNavCodePage.tsx b/apps/website/screens/components/quick-nav/code/QuickNavCodePage.tsx index 2a16fa595..32106acae 100644 --- a/apps/website/screens/components/quick-nav/code/QuickNavCodePage.tsx +++ b/apps/website/screens/components/quick-nav/code/QuickNavCodePage.tsx @@ -21,6 +21,17 @@ const sections = [ + + isHashRouter + + boolean + + + If true, enables navigation to sections within the page using the onClick handler, ensuring compatibility + with HashRouter. + + false + diff --git a/packages/lib/src/quick-nav/types.ts b/packages/lib/src/quick-nav/types.ts index e2daf9b5f..900ac911d 100644 --- a/packages/lib/src/quick-nav/types.ts +++ b/packages/lib/src/quick-nav/types.ts @@ -10,6 +10,10 @@ type Link = { }; type Props = { + /** + * If true, enables navigation to sections within the page using the onClick handler, ensuring compatibility with HashRouter. + */ + isHashRouter?: boolean; /** * Title of the quick nav component. */ @@ -18,10 +22,6 @@ type Props = { * Links to be shown inside the quick nav component. */ links: Link[]; - /* - * Links to be shown inside the quick nav component. - */ - isHashRouter?: boolean; }; export default Props; From 0bfeb4420edb4ddfb56170e336f5bff95aa56281 Mon Sep 17 00:00:00 2001 From: Pelayo Felgueroso Date: Fri, 24 Oct 2025 13:15:00 +0200 Subject: [PATCH 6/7] Fix errors with quickNav and remove isHashRouter prop, using and internal function to check if the user is using HashRouter --- .../quick-nav/code/QuickNavCodePage.tsx | 14 ++------------ .../dxc-technology-halstack-react-0.0.0.tgz | Bin 0 -> 1135336 bytes packages/lib/src/quick-nav/QuickNav.tsx | 14 +++++++++----- packages/lib/src/quick-nav/types.ts | 4 ---- 4 files changed, 11 insertions(+), 21 deletions(-) create mode 100644 packages/lib/dxc-technology-halstack-react-0.0.0.tgz diff --git a/apps/website/screens/components/quick-nav/code/QuickNavCodePage.tsx b/apps/website/screens/components/quick-nav/code/QuickNavCodePage.tsx index 32106acae..1c89ea016 100644 --- a/apps/website/screens/components/quick-nav/code/QuickNavCodePage.tsx +++ b/apps/website/screens/components/quick-nav/code/QuickNavCodePage.tsx @@ -21,17 +21,6 @@ const sections = [ - - isHashRouter - - boolean - - - If true, enables navigation to sections within the page using the onClick handler, ensuring compatibility - with HashRouter. - - false - @@ -44,7 +33,8 @@ const sections = [ Links of the quick nav component. Only first and second level links will be shown in the quick nav, due to - design restrictions. Each link has the following properties: + design restrictions. The component automatically detects HashRouter usage and enables smooth scrolling + navigation when appropriate. Each link has the following properties: