Skip to content

Commit 87e1151

Browse files
raquelarrojoraquelarrojo
authored
Merge pull request #1338 from dxc-technology/fix-1323
Fixed navigation using repeated sublinks in QuickNav
2 parents 4dc6bb3 + f0c34af commit 87e1151

File tree

2 files changed

+74
-26
lines changed

2 files changed

+74
-26
lines changed

‎lib/src/quick-nav/QuickNav.stories.tsx‎

Lines changed: 67 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -14,28 +14,19 @@ export default {
1414
const defaultLinks = [
1515
{
1616
label: "Overview",
17-
id: "overview",
1817
},
1918
{
2019
label: "Principles",
21-
id: "principles",
22-
links: [
23-
{ label: "Color", id: "color" },
24-
{ label: "Spacing", id: "spacing" },
25-
{ label: "Typography", id: "typography" },
26-
],
20+
links: [{ label: "Color" }, { label: "Spacing" }, { label: "Typography" }],
2721
},
2822
{
2923
label: "Components",
30-
id: "components",
3124
links: [
3225
{
3326
label: "Accordion",
34-
id: "accordion",
3527
},
3628
{
3729
label: "Button",
38-
id: "button",
3930
},
4031
],
4132
},
@@ -44,30 +35,36 @@ const defaultLinks = [
4435
const links = [
4536
{
4637
label: "Overview",
47-
id: "overview",
4838
links: [
4939
{
5040
label: "Introduction",
51-
id: "introduction",
41+
},
42+
],
43+
},
44+
{
45+
label: "Components",
46+
links: [
47+
{
48+
label: "Introduction",
49+
},
50+
{
51+
label: "Accordion",
5252
},
5353
],
5454
},
5555
{
5656
label: "Principles very very very very very very very very long",
57-
id: "principles",
5857
links: [
59-
{ label: "Color very very very very very very very very long", id: "color" },
60-
{ label: "Spacingveryveryveryveryveryveryveryverylong", id: "spacing" },
61-
{ label: "Typography", id: "typography" },
58+
{ label: "Color very very very very very very very very long" },
59+
{ label: "Spacingveryveryveryveryveryveryveryverylong" },
60+
{ label: "Typography" },
6261
],
6362
},
6463
{
6564
label: "Componentsveryveryveryveryveryveryveryverylong",
66-
id: "components",
6765
links: [
6866
{
6967
label: "Accordion",
70-
id: "accordion",
7168
},
7269
],
7370
},
@@ -123,7 +120,7 @@ export const Chromatic = () => (
123120
open source design system for insurance products and digital experiences. Our system provides all the
124121
tools and resources needed to create superior, beautiful but above all, functional user experiences.
125122
</DxcParagraph>
126-
<Content id="introduction">
123+
<Content id="overview-introduction">
127124
<DxcHeading level={2} text="Introduction" margin={{ top: "xsmall", bottom: "xsmall" }} />
128125
<DxcParagraph>
129126
Design principles Halstack design principles are the fundamental part of DXC Technology's approach to
@@ -158,9 +155,54 @@ export const Chromatic = () => (
158155
</DxcParagraph>
159156
</Content>
160157
</Content>
161-
<Content id="principles">
158+
<Content id="components">
159+
<DxcHeading level={1} text="Components" margin={{ top: "small", bottom: "xsmall" }} />
160+
<Content id="components-introduction">
161+
<DxcHeading level={2} text="Introduction" margin={{ top: "xsmall", bottom: "xsmall" }} />
162+
<DxcParagraph>
163+
Design principles Halstack design principles are the fundamental part of DXC Technology's approach to
164+
provide guidance for development teams in order to deliver delightful and consistent user experiences to
165+
our customers: Balance Consistency Visual hierarchy All our components, design tokens, accessibility
166+
guidelines, responsive design techniques, and layout proposals have been carefully curated by DXC design
167+
and engineering teams with the objective of creating a unique visual language and ecosystem for our
168+
applications. This is the DXC way of creating User Experiences. Open Source Halstack is an open source
169+
design system, this means that we work towards DXC Technology bussines needs, but it is open for anyone
170+
to use and contribute back to. We are charmed to receive external contributions to help us find bugs,
171+
design new features, or help us improve the project documentation. If you're interested, definitely
172+
check out our contribution guidelines.Design principles Halstack design principles are the fundamental
173+
part of DXC Technology's approach to provide guidance for development teams in order to deliver
174+
delightful and consistent user experiences to our customers: Balance Consistency Visual hierarchy All
175+
our components, design tokens, accessibility guidelines, responsive design techniques, and layout
176+
proposals have been carefully curated by DXC design and engineering teams with the objective of creating
177+
a unique visual language and ecosystem for our applications. This is the DXC way of creating User
178+
Experiences. Open Source Halstack is an open source design system, this means that we work towards DXC
179+
Technology bussines needs, but it is open for anyone to use and contribute back to. We are charmed to
180+
receive external contributions to help us find bugs, design new features, or help us improve the project
181+
documentation. If you're interested, definitely check out our contribution guidelines.Design principles
182+
Halstack design principles are the fundamental part of DXC Technology's approach to provide guidance for
183+
development teams in order to deliver delightful and consistent user experiences to our customers:
184+
Balance Consistency Visual hierarchy All our components, design tokens, accessibility guidelines,
185+
responsive design techniques, and layout proposals have been carefully curated by DXC design and
186+
engineering teams with the objective of creating a unique visual language and ecosystem for our
187+
applications. This is the DXC way of creating User Experiences. Open Source Halstack is an open source
188+
design system, this means that we work towards DXC Technology bussines needs, but it is open for anyone
189+
to use and contribute back to. We are charmed to receive external contributions to help us find bugs,
190+
design new features, or help us improve the project documentation. If you're interested, definitely
191+
check out our contribution guidelines.
192+
</DxcParagraph>
193+
</Content>
194+
<Content id="components-accordion">
195+
<DxcHeading level={2} text="Accordion" margin={{ top: "xsmall", bottom: "xsmall" }} />
196+
<DxcParagraph>
197+
Accordions are used to group similar content and hide or show it depending on user needs or preferences.
198+
Accordions give users more granular control over the interface and help digest content in stages, rather
199+
than all at once.
200+
</DxcParagraph>
201+
</Content>
202+
</Content>
203+
<Content id="principles-very-very-very-very-very-very-very-very-long">
162204
<DxcHeading level={1} text="Principles" margin={{ top: "small", bottom: "xsmall" }} />
163-
<Content id="color">
205+
<Content id="principles-very-very-very-very-very-very-very-very-long-color-very-very-very-very-very-very-very-very-long">
164206
<DxcHeading level={2} text="Color" margin={{ top: "xsmall", bottom: "xsmall" }} />
165207
<DxcParagraph>
166208
The color palette is an essential asset as a communication resource of our design system. Halstack color
@@ -197,7 +239,7 @@ export const Chromatic = () => (
197239
role-based color palettes and must not be used outside this context.
198240
</DxcParagraph>
199241
</Content>
200-
<Content id="spacing">
242+
<Content id="principles-very-very-very-very-very-very-very-very-long-spacingveryveryveryveryveryveryveryverylong">
201243
<DxcHeading level={2} text="Spacing" margin={{ top: "xsmall", bottom: "xsmall" }} />
202244
<DxcParagraph>
203245
In the search of consistent alignment between the elements we provide a spacing scale based on a root
@@ -219,7 +261,7 @@ export const Chromatic = () => (
219261
easily multiplied, they provide flexible and consistent, yet distinct enough, steps between them.
220262
</DxcParagraph>
221263
</Content>
222-
<Content id="typography">
264+
<Content id="principles-very-very-very-very-very-very-very-very-long-typography">
223265
<DxcHeading level={2} text="Typography" margin={{ top: "xsmall", bottom: "xsmall" }} />
224266
<DxcParagraph>
225267
Our selected typography helps in structuring our user's experience based on the visual impact that it
@@ -256,9 +298,9 @@ export const Chromatic = () => (
256298
</DxcParagraph>
257299
</Content>
258300
</Content>
259-
<Content id="components">
301+
<Content id="componentsveryveryveryveryveryveryveryverylong">
260302
<DxcHeading level={1} text="Components" margin={{ top: "small", bottom: "xsmall" }} />
261-
<Content id="accordion">
303+
<Content id="componentsveryveryveryveryveryveryveryverylong-accordion">
262304
<DxcHeading level={2} text="Accordion" margin={{ top: "xsmall", bottom: "xsmall" }} />
263305
<DxcParagraph>
264306
Accordions are used to group similar content and hide or show it depending on user needs or preferences.

‎lib/src/quick-nav/QuickNav.tsx‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,13 @@ const DxcQuickNav = ({ title, links }: QuickNavTypes): JSX.Element => {
2929
<li key={sublink.label}>
3030
<DxcInset horizontal="0.5rem">
3131
<DxcTypography>
32-
<Link href={`#${slugify(sublink?.label, { lower: true })}`}>{sublink?.label}</Link>
32+
<Link
33+
href={`#${slugify(link?.label, { lower: true })}-${slugify(sublink?.label, {
34+
lower: true,
35+
})}`}
36+
>
37+
{sublink?.label}
38+
</Link>
3339
</DxcTypography>
3440
</DxcInset>
3541
</li>

0 commit comments

Comments
 (0)