Skip to content

Commit 2f47857

Browse files
raquelarrojoraquelarrojo
authored
Merge pull request #1346 from dxc-technology/aida-quicknav-website
Changed website to match fix of quick nav
2 parents e26622f + c943647 commit 2f47857

File tree

7 files changed

+109
-11
lines changed

7 files changed

+109
-11
lines changed

‎website/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
"lint": "next lint"
99
},
1010
"dependencies": {
11-
"@dxc-technology/halstack-react": "0.0.0-3216581",
11+
"@dxc-technology/halstack-react": "0.0.0-87e1151",
1212
"@types/styled-components": "^5.1.18",
1313
"axios": "^0.27.2",
1414
"cross-env": "^7.0.3",

‎website/screens/common/HeadingLink.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,11 @@ type HeadingLinkProps = {
88
children: string;
99
level?: 1 | 2 | 3 | 4 | 5;
1010
as?: "h1" | "h2" | "h3" | "h4" | "h5";
11+
navSubtitle?: string;
1112
};
1213

13-
function HeadingLink({ children, level, as }: HeadingLinkProps) {
14-
const elementId = slugify(children, { lower: true });
14+
function HeadingLink({ children, level, as, navSubtitle }: HeadingLinkProps) {
15+
const elementId = slugify(navSubtitle ?? children, { lower: true });
1516
return (
1617
<HeadingLinkContainer id={elementId}>
1718
<HeadingAnchor href={`#${elementId}`}>{linkIcon}</HeadingAnchor>

‎website/screens/common/Section.tsx‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,20 +9,24 @@ type SectionType = {
99
level?: 1 | 2 | 3 | 4 | 5;
1010
subSections?: SectionType[];
1111
children?: React.ReactNode;
12+
navSubtitle?: string;
1213
};
1314

1415
const Section = ({
1516
title,
1617
subSections,
1718
level,
1819
children,
20+
navSubtitle,
1921
}: SectionType): JSX.Element => {
2022
return (
2123
<DxcFlex
2224
direction="column"
2325
gap={level === 1 ? "3rem" : level === 2 ? "2rem" : "1.5rem"}
2426
>
25-
<HeadingLink level={level}>{title}</HeadingLink>
27+
<HeadingLink level={level} navSubtitle={navSubtitle}>
28+
{title}
29+
</HeadingLink>
2630
{children}
2731
{subSections?.map((subSection) => {
2832
return (
@@ -32,6 +36,7 @@ const Section = ({
3236
title={subSection.title}
3337
subSections={subSection.subSections}
3438
level={level + 1 <= 5 ? level + 1 : 5}
39+
navSubtitle={`${title} ${subSection.title}`}
3540
>
3641
{subSection.content}
3742
</Section>

‎website/screens/components/quick-nav/QuickNavPageLayout.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,9 @@ const QuickNavPageHeading = ({ children }: { children: React.ReactNode }) => {
1414
<DxcParagraph>
1515
The quick nav component allows navigation inside a page. It renders
1616
the links according to the headings of the content in order to
17-
navigate to each section.
17+
navigate to each section. The navigation is done using the link
18+
label or the link label plus sublink label when it is a sublink. If
19+
there is any space, it will be replaced by '-'.
1820
</DxcParagraph>
1921
<TabsPageHeading tabs={tabs}></TabsPageHeading>
2022
</DxcFlex>

‎website/screens/components/quick-nav/code/QuickNavCodePage.tsx‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import Code from "@/common/Code";
66
import Example from "@/common/example/Example";
77
import quickNav from "./examples/quickNav";
88
import HeaderDescriptionCell from "@/common/HeaderDescriptionCell";
9+
import withContent from "./examples/withContent";
910

1011
const sections = [
1112
{
@@ -60,6 +61,14 @@ const sections = [
6061
</>
6162
),
6263
},
64+
{
65+
title: "With content",
66+
content: (
67+
<>
68+
<Example example={withContent} defaultIsVisible />
69+
</>
70+
),
71+
},
6372
],
6473
},
6574
];

‎website/screens/components/quick-nav/code/examples/withContent.ts‎

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
import {
2+
DxcInset,
3+
DxcQuickNav,
4+
DxcFlex,
5+
DxcHeading,
6+
DxcParagraph,
7+
} from "@dxc-technology/halstack-react";
8+
9+
const code = `() => {
10+
const links = [
11+
{
12+
label: "Accordion",
13+
links: [{ label: "Code" }, { label: "Usage" }],
14+
},
15+
{
16+
label: "Alert",
17+
links: [{ label: "Code" }],
18+
},
19+
];
20+
21+
return (
22+
<DxcInset space="2rem">
23+
<DxcFlex direction="row">
24+
<DxcFlex direction="column" gap="2rem">
25+
<div id="accordion">
26+
<DxcFlex direction="column" gap="1rem">
27+
<DxcHeading level={2} text="Accordion" />
28+
<div id="accordion-code">
29+
<DxcFlex direction="column" gap="1rem">
30+
<DxcHeading level={3} text="Code" />
31+
<DxcParagraph>
32+
Accordions are used to group similar content and hide or
33+
show it depending on user needs or preferences. Accordions
34+
give users more granular control over the interface and help
35+
digest content in stages, rather than all at once.
36+
</DxcParagraph>
37+
</DxcFlex>
38+
</div>
39+
<div id="accordion-usage">
40+
<DxcFlex direction="column" gap="1rem">
41+
<DxcHeading level={3} text="Usage" />
42+
<DxcParagraph>
43+
The accordion component delivers large amounts of content in
44+
a small space through progressive disclosure.
45+
</DxcParagraph>
46+
</DxcFlex>
47+
</div>
48+
</DxcFlex>
49+
</div>
50+
<div id="alert">
51+
<DxcFlex direction="column" gap="1rem">
52+
<DxcHeading level={2} text="Alert" />
53+
<div id="alert-code">
54+
<DxcFlex direction="column" gap="1rem">
55+
<DxcHeading level={3} text="Code" />
56+
<DxcParagraph>
57+
Alert messages are meant to provide contextual feedback
58+
about important changes in the interface.
59+
</DxcParagraph>
60+
</DxcFlex>
61+
</div>
62+
</DxcFlex>
63+
</div>
64+
</DxcFlex>
65+
<DxcInset space="2rem">
66+
<DxcQuickNav links={links}></DxcQuickNav>
67+
</DxcInset>
68+
</DxcFlex>
69+
</DxcInset>
70+
);
71+
}`;
72+
73+
const scope = {
74+
DxcInset,
75+
DxcQuickNav,
76+
DxcFlex,
77+
DxcHeading,
78+
DxcParagraph,
79+
};
80+
81+
export default { code, scope };

‎website/yarn.lock‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -144,18 +144,18 @@
144144
dependencies:
145145
"@date-io/core" "^1.3.13"
146146

147-
"@dxc-technology/halstack-react@0.0.0-3216581":
148-
version "0.0.0-3216581"
149-
resolved "https://registry.yarnpkg.com/@dxc-technology/halstack-react/-/halstack-react-0.0.0-3216581.tgz#379a8c7eaa361e0bbff955253a857e5073e6ffcc"
150-
integrity sha512-09IaHT0OyN9E960z7e+ogidistggVa7nG4feluY0LUY2LYQg1gD0gAeVKuMWodFYjT+umdRyIDR1F2/Dp1wuKA==
147+
"@dxc-technology/halstack-react@0.0.0-87e1151":
148+
version "0.0.0-87e1151"
149+
resolved "https://registry.yarnpkg.com/@dxc-technology/halstack-react/-/halstack-react-0.0.0-87e1151.tgz#9aff03bc08f523677003ba6e8b3c300f9294d3d9"
150+
integrity sha512-wp1msZOaTGfIYqTn466rLX/EdiuyOZ+sMwG0qQBLLy/yOy7C0e4b3M7JtYRRFlJHJSdVGvf0J0447NQwMITrUw==
151151
dependencies:
152152
"@date-io/dayjs" "^1.3.9"
153153
"@material-ui/core" "4.11.1"
154154
"@material-ui/icons" "4.4.3"
155155
"@material-ui/lab" "4.0.0-alpha.17"
156156
"@material-ui/pickers" "3.2.2"
157157
"@material-ui/styles" "4.0.2"
158-
"@radix-ui/react-popover" "^0.1.6"
158+
"@radix-ui/react-popover" "0.1.6"
159159
"@types/styled-components" "^5.1.24"
160160
"@types/uuid" "^8.3.4"
161161
color "^3.1.3"
@@ -546,7 +546,7 @@
546546
"@babel/runtime" "^7.13.10"
547547
"@radix-ui/react-use-layout-effect" "0.1.0"
548548

549-
"@radix-ui/react-popover@^0.1.6":
549+
"@radix-ui/react-popover@0.1.6":
550550
version "0.1.6"
551551
resolved "https://registry.yarnpkg.com/@radix-ui/react-popover/-/react-popover-0.1.6.tgz#788e969239d9c55239678e615ab591b6b7ba5cdc"
552552
integrity sha512-zQzgUqW4RQDb0ItAL1xNW4K4olUrkfV3jeEPs9rG+nsDQurO+W9TT+YZ9H1mmgAJqlthyv1sBRZGdBm4YjtD6Q==

0 commit comments

Comments
 (0)