From d5430357fb5d754f61d90f4afbb7acee7a7f5cf6 Mon Sep 17 00:00:00 2001 From: Jialecl Date: Mon, 14 Apr 2025 14:25:56 +0200 Subject: [PATCH 1/7] Quicknav height + focus styles corrected --- packages/lib/src/quick-nav/QuickNav.tsx | 25 ++++++++++++------------- 1 file changed, 12 insertions(+), 13 deletions(-) diff --git a/packages/lib/src/quick-nav/QuickNav.tsx b/packages/lib/src/quick-nav/QuickNav.tsx index e5ab3dbf4..24e72d4f1 100644 --- a/packages/lib/src/quick-nav/QuickNav.tsx +++ b/packages/lib/src/quick-nav/QuickNav.tsx @@ -45,6 +45,7 @@ const DxcQuickNav = ({ title, links }: QuickNavTypes): JSX.Element => { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; + height: var(--height-s); width: fit-content; max-width: 100%; @@ -53,7 +54,7 @@ const DxcQuickNav = ({ title, links }: QuickNavTypes): JSX.Element => { } &:focus { border-radius: var(--border-radius-xs); - border: var(--border-width-m) var(--border-style-default) var(--border-color-secondary-medium); + outline: var(--border-width-m) var(--border-style-default) var(--border-color-secondary-medium); } `; return ( @@ -62,24 +63,22 @@ const DxcQuickNav = ({ title, links }: QuickNavTypes): JSX.Element => { {links.map((link) => (
  • - - {link.label} + {link.label} + {link.links?.length && ( {link.links?.map((sublink) => (
  • - - - {sublink.label} - - + + {sublink.label} +
    • ))} - + )} ))}     From 37e5b3c88ea1f2274e0fdd8925b6a5f830ccebef Mon Sep 17 00:00:00 2001 From: Jialecl Date: Mon, 14 Apr 2025 14:28:03 +0200 Subject: [PATCH 2/7] removed typography import --- packages/lib/src/quick-nav/QuickNav.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/lib/src/quick-nav/QuickNav.tsx b/packages/lib/src/quick-nav/QuickNav.tsx index 24e72d4f1..9b8644bf3 100644 --- a/packages/lib/src/quick-nav/QuickNav.tsx +++ b/packages/lib/src/quick-nav/QuickNav.tsx @@ -2,7 +2,6 @@ import { useContext } from "react"; import slugify from "slugify"; import styled from "styled-components"; import DxcHeading from "../heading/Heading"; -import DxcTypography from "../typography/Typography"; import { HalstackLanguageContext } from "../HalstackContext"; import QuickNavTypes from "./types"; From 54048b8ae7e93a4ae355be25a2c1cdea88ba498f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Iv=C3=A1n=20G=C3=B3mez=20Pinta?= <44321109+GomezIvann@users.noreply.github.com> Date: Mon, 14 Apr 2025 14:38:02 +0200 Subject: [PATCH 3/7] Doc updates --- apps/website/pages/components/quick-nav/code.tsx | 2 +- apps/website/pages/components/quick-nav/index.tsx | 2 +- .../components/quick-nav/QuickNavPageLayout.tsx | 4 ++-- .../components/quick-nav/code/QuickNavCodePage.tsx | 14 +++----------- .../quick-nav/overview/QuickNavOverviewsPage.tsx | 14 +++++++------- 5 files changed, 14 insertions(+), 22 deletions(-) diff --git a/apps/website/pages/components/quick-nav/code.tsx b/apps/website/pages/components/quick-nav/code.tsx index 9cd977559..93d5e4171 100644 --- a/apps/website/pages/components/quick-nav/code.tsx +++ b/apps/website/pages/components/quick-nav/code.tsx @@ -6,7 +6,7 @@ import QuickNavPageLayout from "screens/components/quick-nav/QuickNavPageLayout" const Code = () => ( <> - Quick Nav Code — Halstack Design System + Quick nav code — Halstack Design System diff --git a/apps/website/pages/components/quick-nav/index.tsx b/apps/website/pages/components/quick-nav/index.tsx index 292a2d904..89fc1127d 100644 --- a/apps/website/pages/components/quick-nav/index.tsx +++ b/apps/website/pages/components/quick-nav/index.tsx @@ -6,7 +6,7 @@ import QuickNavOverviewPage from "screens/components/quick-nav/overview/QuickNav const Index = () => ( <> - Quick Nav — Halstack Design System + Quick nav — Halstack Design System diff --git a/apps/website/screens/components/quick-nav/QuickNavPageLayout.tsx b/apps/website/screens/components/quick-nav/QuickNavPageLayout.tsx index e38de4aed..c35fe495c 100644 --- a/apps/website/screens/components/quick-nav/QuickNavPageLayout.tsx +++ b/apps/website/screens/components/quick-nav/QuickNavPageLayout.tsx @@ -15,9 +15,9 @@ const QuickNavPageHeading = ({ children }: { children: ReactNode }) => { - + - The Quick Nav component allows navigation inside a page. It renders links according to the headings of the + The quick nav component allows navigation inside a page. It renders links according to the headings of the content structure, enabling users to jump to specific sections. The navigation label is based on the section title or a combination of section and sub-section titles (for nested links). If a heading includes spaces, they are replaced with hyphens (-) in the URL. diff --git a/apps/website/screens/components/quick-nav/code/QuickNavCodePage.tsx b/apps/website/screens/components/quick-nav/code/QuickNavCodePage.tsx index dd28e53a0..ad2098f24 100644 --- a/apps/website/screens/components/quick-nav/code/QuickNavCodePage.tsx +++ b/apps/website/screens/components/quick-nav/code/QuickNavCodePage.tsx @@ -65,19 +65,11 @@ const sections = [ subSections: [ { title: "Basic usage", - content: ( - <> - - - ), + content: , }, { title: "With content", - content: ( - <> - - - ), + content: , }, ], }, @@ -86,7 +78,7 @@ const sections = [ const QuickNavCodePage = () => ( - + diff --git a/apps/website/screens/components/quick-nav/overview/QuickNavOverviewsPage.tsx b/apps/website/screens/components/quick-nav/overview/QuickNavOverviewsPage.tsx index 203785b47..aa4af3f44 100644 --- a/apps/website/screens/components/quick-nav/overview/QuickNavOverviewsPage.tsx +++ b/apps/website/screens/components/quick-nav/overview/QuickNavOverviewsPage.tsx @@ -10,7 +10,7 @@ const sections = [ title: "Introduction", content: ( - Quick Nav is used to improve in-page navigation by listing content sections and subsections based on the heading + Quick nav is used to improve in-page navigation by listing content sections and subsections based on the heading hierarchy. This helps users understand the page structure at a glance and jump directly to the content they're interested in. It's especially useful on documentation pages, dashboards and long-form content. @@ -23,7 +23,7 @@ const sections = [ Quick nav anatomy - Divider: a thin vertical line that visually separates the Quick Nav from the main content + Divider: a thin vertical line that visually separates the quick nav from the main content area. Its purpose is to create a clear boundary between navigation and content, improving readability and layout organization. @@ -52,22 +52,22 @@ const sections = [ the context of the links. - Show structure clearly: use Quick Nav to mirror the hierarchy of your content, making it + Show structure clearly: use quick nav to mirror the hierarchy of your content, making it easier to follow and navigate. Keep headings descriptive and consistent so link labels are meaningful when rendered. - Avoid clutter: avoid rendering Quick Nav on pages with very little content; it can feel + Avoid clutter: avoid rendering quick nav on pages with very little content; it can feel redundant. Maintain visual separation from main content: always allow sufficient spacing between the - Quick Nav and the main content area. This helps users visually distinguish navigation from content and avoids - overwhelming the layout. Use padding or margins to ensure the Quick Nav doesn't feel cramped or interfere with + quick nav and the main content area. This helps users visually distinguish navigation from content and avoids + overwhelming the layout. Use padding or margins to ensure the quick nav doesn't feel cramped or interfere with readability, especially on larger screens or dense layouts. - Pair with other navigational tools: combine Quick Nav with tabs or breadcrumbs for a + Pair with other navigational tools: combine quick nav with tabs or breadcrumbs for a comprehensive navigation experience across and within pages. From 5b596e06992a2ea2f0f9d17197c3188470537af6 Mon Sep 17 00:00:00 2001 From: Jialecl Date: Mon, 14 Apr 2025 14:56:30 +0200 Subject: [PATCH 4/7] changed height to line-height and moved styled components outside --- packages/lib/src/quick-nav/QuickNav.tsx | 93 +++++++++++++------------ 1 file changed, 47 insertions(+), 46 deletions(-) diff --git a/packages/lib/src/quick-nav/QuickNav.tsx b/packages/lib/src/quick-nav/QuickNav.tsx index 9b8644bf3..2af7259c1 100644 --- a/packages/lib/src/quick-nav/QuickNav.tsx +++ b/packages/lib/src/quick-nav/QuickNav.tsx @@ -5,57 +5,58 @@ import DxcHeading from "../heading/Heading"; import { HalstackLanguageContext } from "../HalstackContext"; import QuickNavTypes from "./types"; -const DxcQuickNav = ({ title, links }: QuickNavTypes): JSX.Element => { - const translatedLabels = useContext(HalstackLanguageContext); +const translatedLabels = useContext(HalstackLanguageContext); + +const QuickNavContainer = styled.div` + display: flex; + flex-direction: column; + gap: var(--spacing-gap-m); + padding: var(--spacing-padding-xs) var(--spacing-padding-m); + border-left: var(--border-width-m) var(--border-style-default) var(--border-color-neutral-medium); +`; - const QuickNavContainer = styled.div` - display: flex; - flex-direction: column; - gap: var(--spacing-gap-m); - padding: var(--spacing-padding-xs) var(--spacing-padding-m); - border-left: var(--border-width-m) var(--border-style-default) var(--border-color-neutral-medium); - `; +const ListColumn = styled.ul` + display: flex; + flex-direction: column; + gap: var(--spacing-gap-s); + margin: 0; + padding: 0; + list-style-type: none; +`; - const ListColumn = styled.ul` - display: flex; - flex-direction: column; - gap: var(--spacing-gap-s); - margin: 0; - padding: 0; - list-style-type: none; - `; +const ListSecondColumn = styled.ul` + display: flex; + flex-direction: column; + gap: var(--spacing-gap-xs); + margin-top: var(--spacing-gap-xs); + padding: var(--spacing-padding-none) var(--spacing-padding-xs); + list-style-type: none; +`; - const ListSecondColumn = styled.ul` - display: flex; - flex-direction: column; - gap: var(--spacing-gap-xs); - margin-top: var(--spacing-gap-xs); - padding: var(--spacing-padding-none) var(--spacing-padding-xs); - list-style-type: none; - `; +const Link = styled.a` + text-decoration: none; + font-family: var(--typography-font-family); + font-size: var(--typography-label-m); + font-weight: var(--typography-label-regular); + color: var(--color-fg-neutral-stronger); + display: block; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + line-height: var(--height-s); + width: fit-content; + max-width: 100%; - const Link = styled.a` - text-decoration: none; - font-family: var(--typography-font-family); - font-size: var(--typography-label-m); - font-weight: var(--typography-label-regular); - color: var(--color-fg-neutral-stronger); - display: block; - text-overflow: ellipsis; - white-space: nowrap; - overflow: hidden; - height: var(--height-s); - width: fit-content; - max-width: 100%; + &:hover { + color: var(--color-fg-primary-strong); + } + &:focus { + border-radius: var(--border-radius-xs); + outline: var(--border-width-m) var(--border-style-default) var(--border-color-secondary-medium); + } +`; - &:hover { - color: var(--color-fg-primary-strong); - } - &:focus { - border-radius: var(--border-radius-xs); - outline: var(--border-width-m) var(--border-style-default) var(--border-color-secondary-medium); - } - `; +const DxcQuickNav = ({ title, links }: QuickNavTypes): JSX.Element => { return ( From 516f0e3edaad4cb56de703e54141d5add244ec29 Mon Sep 17 00:00:00 2001 From: Jialecl Date: Mon, 14 Apr 2025 14:58:05 +0200 Subject: [PATCH 5/7] Error fixed --- packages/lib/src/quick-nav/QuickNav.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/lib/src/quick-nav/QuickNav.tsx b/packages/lib/src/quick-nav/QuickNav.tsx index 2af7259c1..0fd193b9a 100644 --- a/packages/lib/src/quick-nav/QuickNav.tsx +++ b/packages/lib/src/quick-nav/QuickNav.tsx @@ -5,8 +5,6 @@ import DxcHeading from "../heading/Heading"; import { HalstackLanguageContext } from "../HalstackContext"; import QuickNavTypes from "./types"; -const translatedLabels = useContext(HalstackLanguageContext); - const QuickNavContainer = styled.div` display: flex; flex-direction: column; @@ -57,6 +55,8 @@ const Link = styled.a` `; const DxcQuickNav = ({ title, links }: QuickNavTypes): JSX.Element => { + const translatedLabels = useContext(HalstackLanguageContext); + return ( From 6030adfa3bc9070ae8dea8250aeefaa05426d169 Mon Sep 17 00:00:00 2001 From: Jialecl Date: Tue, 15 Apr 2025 08:45:51 +0200 Subject: [PATCH 6/7] changing structure to allow ellipsis and flex --- packages/lib/src/quick-nav/QuickNav.tsx | 17 ++++++++++++----- 1 file changed, 12 insertions(+), 5 deletions(-) diff --git a/packages/lib/src/quick-nav/QuickNav.tsx b/packages/lib/src/quick-nav/QuickNav.tsx index 0fd193b9a..2aab7b131 100644 --- a/packages/lib/src/quick-nav/QuickNav.tsx +++ b/packages/lib/src/quick-nav/QuickNav.tsx @@ -37,14 +37,19 @@ const Link = styled.a` font-size: var(--typography-label-m); font-weight: var(--typography-label-regular); color: var(--color-fg-neutral-stronger); - display: block; - text-overflow: ellipsis; + display: flex; + align-items: center; white-space: nowrap; overflow: hidden; - line-height: var(--height-s); + height: var(--height-s); width: fit-content; max-width: 100%; + > span { + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + } &:hover { color: var(--color-fg-primary-strong); } @@ -63,7 +68,9 @@ const DxcQuickNav = ({ title, links }: QuickNavTypes): JSX.Element => { {links.map((link) => (
  • - {link.label} + + {link.label} + {link.links?.length && ( {link.links?.map((sublink) => ( @@ -73,7 +80,7 @@ const DxcQuickNav = ({ title, links }: QuickNavTypes): JSX.Element => { lower: true, })}`} > - {sublink.label} + {sublink.label}
    • ))} From 6243bfa5455234a0ca78a44b9769b2bbc50cb86a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Iv=C3=A1n=20G=C3=B3mez=20Pinta?= <44321109+GomezIvann@users.noreply.github.com> Date: Tue, 15 Apr 2025 10:39:18 +0200 Subject: [PATCH 7/7] Small updates --- packages/lib/src/quick-nav/QuickNav.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/lib/src/quick-nav/QuickNav.tsx b/packages/lib/src/quick-nav/QuickNav.tsx index 2aab7b131..19e3f4d1d 100644 --- a/packages/lib/src/quick-nav/QuickNav.tsx +++ b/packages/lib/src/quick-nav/QuickNav.tsx @@ -18,7 +18,7 @@ const ListColumn = styled.ul` flex-direction: column; gap: var(--spacing-gap-s); margin: 0; - padding: 0; + padding: var(--spacing-padding-none); list-style-type: none; `; @@ -44,6 +44,7 @@ const Link = styled.a` height: var(--height-s); width: fit-content; max-width: 100%; + border-radius: var(--border-radius-xs); > span { text-overflow: ellipsis; @@ -54,7 +55,6 @@ const Link = styled.a` color: var(--color-fg-primary-strong); } &:focus { - border-radius: var(--border-radius-xs); outline: var(--border-width-m) var(--border-style-default) var(--border-color-secondary-medium); } `;