Skip to content

Fixed navigation using repeated sublinks in QuickNav #1338

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
merged 6 commits into from
Oct 25, 2022
Merged

Fixed navigation using repeated sublinks in QuickNav #1338

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
f06e321
Fixed repeated sublinks in quick nav and stories
Oct 19, 2022
44e22ef
Merge branch 'master' into fix-1323
raquelarrojo Oct 19, 2022
a523813
Merge branch 'master' into fix-1323
raquelarrojo Oct 21, 2022
90d4e21
Changed website to match fix of quick nav
Oct 21, 2022
cfdd7a0
Revert "Changed website to match fix of quick nav"
Oct 25, 2022
f0c34af
Removed id
Oct 25, 2022
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
92 changes: 67 additions & 25 deletions lib/src/quick-nav/QuickNav.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,28 +14,19 @@ export default {
const defaultLinks = [
{
label: "Overview",
id: "overview",
},
{
label: "Principles",
id: "principles",
links: [
{ label: "Color", id: "color" },
{ label: "Spacing", id: "spacing" },
{ label: "Typography", id: "typography" },
],
links: [{ label: "Color" }, { label: "Spacing" }, { label: "Typography" }],
},
{
label: "Components",
id: "components",
links: [
{
label: "Accordion",
id: "accordion",
},
{
label: "Button",
id: "button",
},
],
},
Expand All @@ -44,30 +35,36 @@ const defaultLinks = [
const links = [
{
label: "Overview",
id: "overview",
links: [
{
label: "Introduction",
id: "introduction",
},
],
},
{
label: "Components",
links: [
{
label: "Introduction",
},
{
label: "Accordion",
},
],
},
{
label: "Principles very very very very very very very very long",
id: "principles",
links: [
{ label: "Color very very very very very very very very long", id: "color" },
{ label: "Spacingveryveryveryveryveryveryveryverylong", id: "spacing" },
{ label: "Typography", id: "typography" },
{ label: "Color very very very very very very very very long" },
{ label: "Spacingveryveryveryveryveryveryveryverylong" },
{ label: "Typography" },
],
},
{
label: "Componentsveryveryveryveryveryveryveryverylong",
id: "components",
links: [
{
label: "Accordion",
id: "accordion",
},
],
},
Expand Down Expand Up @@ -123,7 +120,7 @@ export const Chromatic = () => (
open source design system for insurance products and digital experiences. Our system provides all the
tools and resources needed to create superior, beautiful but above all, functional user experiences.
</DxcParagraph>
<Content id="introduction">
<Content id="overview-introduction">
<DxcHeading level={2} text="Introduction" margin={{ top: "xsmall", bottom: "xsmall" }} />
<DxcParagraph>
Design principles Halstack design principles are the fundamental part of DXC Technology's approach to
Expand Down Expand Up @@ -158,9 +155,54 @@ export const Chromatic = () => (
</DxcParagraph>
</Content>
</Content>
<Content id="principles">
<Content id="components">
<DxcHeading level={1} text="Components" margin={{ top: "small", bottom: "xsmall" }} />
<Content id="components-introduction">
<DxcHeading level={2} text="Introduction" margin={{ top: "xsmall", bottom: "xsmall" }} />
<DxcParagraph>
Design principles Halstack design principles are the fundamental part of DXC Technology's approach to
provide guidance for development teams in order to deliver delightful and consistent user experiences to
our customers: Balance Consistency Visual hierarchy All our components, design tokens, accessibility
guidelines, responsive design techniques, and layout proposals have been carefully curated by DXC design
and engineering teams with the objective of creating a unique visual language and ecosystem for our
applications. This is the DXC way of creating User Experiences. Open Source Halstack is an open source
design system, this means that we work towards DXC Technology bussines needs, but it is open for anyone
to use and contribute back to. We are charmed to receive external contributions to help us find bugs,
design new features, or help us improve the project documentation. If you're interested, definitely
check out our contribution guidelines.Design principles Halstack design principles are the fundamental
part of DXC Technology's approach to provide guidance for development teams in order to deliver
delightful and consistent user experiences to our customers: Balance Consistency Visual hierarchy All
our components, design tokens, accessibility guidelines, responsive design techniques, and layout
proposals have been carefully curated by DXC design and engineering teams with the objective of creating
a unique visual language and ecosystem for our applications. This is the DXC way of creating User
Experiences. Open Source Halstack is an open source design system, this means that we work towards DXC
Technology bussines needs, but it is open for anyone to use and contribute back to. We are charmed to
receive external contributions to help us find bugs, design new features, or help us improve the project
documentation. If you're interested, definitely check out our contribution guidelines.Design principles
Halstack design principles are the fundamental part of DXC Technology's approach to provide guidance for
development teams in order to deliver delightful and consistent user experiences to our customers:
Balance Consistency Visual hierarchy All our components, design tokens, accessibility guidelines,
responsive design techniques, and layout proposals have been carefully curated by DXC design and
engineering teams with the objective of creating a unique visual language and ecosystem for our
applications. This is the DXC way of creating User Experiences. Open Source Halstack is an open source
design system, this means that we work towards DXC Technology bussines needs, but it is open for anyone
to use and contribute back to. We are charmed to receive external contributions to help us find bugs,
design new features, or help us improve the project documentation. If you're interested, definitely
check out our contribution guidelines.
</DxcParagraph>
</Content>
<Content id="components-accordion">
<DxcHeading level={2} text="Accordion" margin={{ top: "xsmall", bottom: "xsmall" }} />
<DxcParagraph>
Accordions are used to group similar content and hide or show it depending on user needs or preferences.
Accordions give users more granular control over the interface and help digest content in stages, rather
than all at once.
</DxcParagraph>
</Content>
</Content>
<Content id="principles-very-very-very-very-very-very-very-very-long">
<DxcHeading level={1} text="Principles" margin={{ top: "small", bottom: "xsmall" }} />
<Content id="color">
<Content id="principles-very-very-very-very-very-very-very-very-long-color-very-very-very-very-very-very-very-very-long">
<DxcHeading level={2} text="Color" margin={{ top: "xsmall", bottom: "xsmall" }} />
<DxcParagraph>
The color palette is an essential asset as a communication resource of our design system. Halstack color
Expand Down Expand Up @@ -197,7 +239,7 @@ export const Chromatic = () => (
role-based color palettes and must not be used outside this context.
</DxcParagraph>
</Content>
<Content id="spacing">
<Content id="principles-very-very-very-very-very-very-very-very-long-spacingveryveryveryveryveryveryveryverylong">
<DxcHeading level={2} text="Spacing" margin={{ top: "xsmall", bottom: "xsmall" }} />
<DxcParagraph>
In the search of consistent alignment between the elements we provide a spacing scale based on a root
Expand All @@ -219,7 +261,7 @@ export const Chromatic = () => (
easily multiplied, they provide flexible and consistent, yet distinct enough, steps between them.
</DxcParagraph>
</Content>
<Content id="typography">
<Content id="principles-very-very-very-very-very-very-very-very-long-typography">
<DxcHeading level={2} text="Typography" margin={{ top: "xsmall", bottom: "xsmall" }} />
<DxcParagraph>
Our selected typography helps in structuring our user's experience based on the visual impact that it
Expand Down Expand Up @@ -256,9 +298,9 @@ export const Chromatic = () => (
</DxcParagraph>
</Content>
</Content>
<Content id="components">
<Content id="componentsveryveryveryveryveryveryveryverylong">
<DxcHeading level={1} text="Components" margin={{ top: "small", bottom: "xsmall" }} />
<Content id="accordion">
<Content id="componentsveryveryveryveryveryveryveryverylong-accordion">
<DxcHeading level={2} text="Accordion" margin={{ top: "xsmall", bottom: "xsmall" }} />
<DxcParagraph>
Accordions are used to group similar content and hide or show it depending on user needs or preferences.
Expand Down
8 changes: 7 additions & 1 deletion lib/src/quick-nav/QuickNav.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,13 @@ const DxcQuickNav = ({ title, links }: QuickNavTypes): JSX.Element => {
<li key={sublink.label}>
<DxcInset horizontal="0.5rem">
<DxcTypography>
<Link href={`#${slugify(sublink?.label, { lower: true })}`}>{sublink?.label}</Link>
<Link
href={`#${slugify(link?.label, { lower: true })}-${slugify(sublink?.label, {
lower: true,
})}`}
>
{sublink?.label}
</Link>
</DxcTypography>
</DxcInset>
</li>
Expand Down