Skip to content

Quicknav height + focus styles corrected #2212

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
GomezIvann merged 8 commits into from
Apr 15, 2025
Merged

Quicknav height + focus styles corrected #2212

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
d543035
Quicknav height + focus styles corrected
Jialecl Apr 14, 2025
37e5b3c
removed typography import
Jialecl Apr 14, 2025
54048b8
Doc updates
GomezIvann Apr 14, 2025
5b596e0
changed height to line-height and moved styled components outside
Jialecl Apr 14, 2025
516f0e3
Error fixed
Jialecl Apr 14, 2025
4b2520d
Merge branch 'jialecl-quicknav-focus' of https://github.com/dxc-techn…
Jialecl Apr 14, 2025
6030adf
changing structure to allow ellipsis and flex
Jialecl Apr 15, 2025
6243bfa
Small updates
GomezIvann Apr 15, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion apps/website/pages/components/quick-nav/code.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import QuickNavPageLayout from "screens/components/quick-nav/QuickNavPageLayout"
const Code = () => (
<>
<Head>
<title>Quick Nav Code — Halstack Design System</title>
<title>Quick nav code — Halstack Design System</title>
</Head>
<QuickNavCodePage />
</>
Expand Down
2 changes: 1 addition & 1 deletion apps/website/pages/components/quick-nav/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import QuickNavOverviewPage from "screens/components/quick-nav/overview/QuickNav
const Index = () => (
<>
<Head>
<title>Quick Nav — Halstack Design System</title>
<title>Quick nav — Halstack Design System</title>
</Head>
<QuickNavOverviewPage />
</>
Expand Down
4 changes: 2 additions & 2 deletions apps/website/screens/components/quick-nav/QuickNavPageLayout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,9 +15,9 @@ const QuickNavPageHeading = ({ children }: { children: ReactNode }) => {
<DxcFlex direction="column" gap="3rem">
<PageHeading>
<DxcFlex direction="column" gap="2rem">
<ComponentHeading name="Quick Nav" />
<ComponentHeading name="Quick nav" />
<DxcParagraph>
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 (<Code>-</Code>) in the URL.
Expand Down
14 changes: 3 additions & 11 deletions apps/website/screens/components/quick-nav/code/QuickNavCodePage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,19 +65,11 @@ const sections = [
subSections: [
{
title: "Basic usage",
content: (
<>
<Example example={quickNav} defaultIsVisible />
</>
),
content: <Example example={quickNav} defaultIsVisible />,
},
{
title: "With content",
content: (
<>
<Example example={withContent} defaultIsVisible />
</>
),
content: <Example example={withContent} defaultIsVisible />,
},
],
},
Expand All @@ -86,7 +78,7 @@ const sections = [
const QuickNavCodePage = () => (
<DxcFlex direction="column" gap="4rem">
<QuickNavContainerLayout>
<QuickNavContainer sections={sections} startHeadingLevel={2}></QuickNavContainer>
<QuickNavContainer sections={sections} startHeadingLevel={2} />
</QuickNavContainerLayout>
<DocFooter githubLink="https://github.com/dxc-technology/halstack-react/blob/master/apps/website/screens/components/quick-nav/code/QuickNavCodePage.tsx" />
</DxcFlex>
Expand Down
14 changes: 7 additions & 7 deletions apps/website/screens/components/quick-nav/overview/QuickNavOverviewsPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ const sections = [
title: "Introduction",
content: (
<DxcParagraph>
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.
</DxcParagraph>
Expand All @@ -23,7 +23,7 @@ const sections = [
<Image src={anatomyImage} alt="Quick nav anatomy" />
<DxcBulletedList type="number">
<DxcBulletedList.Item>
<strong>Divider:</strong> a thin vertical line that visually separates the Quick Nav from the main content
<strong>Divider:</strong> 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.
</DxcBulletedList.Item>
Expand Down Expand Up @@ -52,22 +52,22 @@ const sections = [
the context of the links.
</DxcBulletedList.Item>
<DxcBulletedList.Item>
<strong>Show structure clearly:</strong> use Quick Nav to mirror the hierarchy of your content, making it
<strong>Show structure clearly:</strong> 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.
</DxcBulletedList.Item>
<DxcBulletedList.Item>
<strong>Avoid clutter:</strong> avoid rendering Quick Nav on pages with very little content; it can feel
<strong>Avoid clutter:</strong> avoid rendering quick nav on pages with very little content; it can feel
redundant.
</DxcBulletedList.Item>
<DxcBulletedList.Item>
<strong>Maintain visual separation from main content:</strong> 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.
</DxcBulletedList.Item>
<DxcBulletedList.Item>
<strong>Pair with other navigational tools:</strong> combine Quick Nav with tabs or breadcrumbs for a
<strong>Pair with other navigational tools:</strong> combine quick nav with tabs or breadcrumbs for a
comprehensive navigation experience across and within pages.
</DxcBulletedList.Item>
</DxcBulletedList>
Expand Down
116 changes: 61 additions & 55 deletions packages/lib/src/quick-nav/QuickNav.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 (
<QuickNavContainer>
<DxcHeading level={4} text={title || translatedLabels.quickNav.contentTitle} />
<ListColumn>
{links.map((link) => (
<li key={link.label}>
<DxcTypography>
<Link href={`#${slugify(link.label, { lower: true })}`}>{link.label}</Link>
<Link href={`#${slugify(link.label, { lower: true })}`}>
<span>{link.label}</span>
</Link>
{link.links?.length && (
<ListSecondColumn>
{link.links?.map((sublink) => (
<li key={sublink.label}>
<DxcTypography>
<Link
href={`#${slugify(link?.label, { lower: true })}-${slugify(sublink?.label, {
lower: true,
})}`}
>
{sublink.label}
</Link>
</DxcTypography>
<Link
href={`#${slugify(link?.label, { lower: true })}-${slugify(sublink?.label, {
lower: true,
})}`}
>
<span>{sublink.label}</span>
</Link>
</li>
))}
</ListSecondColumn>
</DxcTypography>
)}
</li>
))}
</ListColumn>
Expand Down