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. diff --git a/packages/lib/src/quick-nav/QuickNav.tsx b/packages/lib/src/quick-nav/QuickNav.tsx index e5ab3dbf4..19e3f4d1d 100644 --- a/packages/lib/src/quick-nav/QuickNav.tsx +++ b/packages/lib/src/quick-nav/QuickNav.tsx @@ -2,84 +2,90 @@ 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"; -const DxcQuickNav = ({ title, links }: QuickNavTypes): JSX.Element => { - 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: var(--spacing-padding-none); + 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: flex; + align-items: center; + white-space: nowrap; + overflow: hidden; + height: var(--height-s); + width: fit-content; + max-width: 100%; + border-radius: var(--border-radius-xs); - 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; + > span { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; - width: fit-content; - max-width: 100%; + } + &:hover { + color: var(--color-fg-primary-strong); + } + &:focus { + outline: var(--border-width-m) var(--border-style-default) var(--border-color-secondary-medium); + } +`; + +const DxcQuickNav = ({ title, links }: QuickNavTypes): JSX.Element => { + const translatedLabels = useContext(HalstackLanguageContext); - &:hover { - color: var(--color-fg-primary-strong); - } - &:focus { - border-radius: var(--border-radius-xs); - border: var(--border-width-m) var(--border-style-default) var(--border-color-secondary-medium); - } - `; return ( {links.map((link) => (
  • - - {link.label} + + {link.label} + + {link.links?.length && ( {link.links?.map((sublink) => (
  • - - - {sublink.label} - - + + {sublink.label} +
    • ))} - + )} ))}