Skip to content

Commit fd47ea5

Browse files
jsuarezgonzjsuarezgonz
authored
Merge pull request #1512 from dxc-technology/rarrojolopez-sidenav
Added sidenav usage and specs to the site
2 parents 4b6f6b1 + f566c68 commit fd47ea5

File tree

14 files changed

+599
-11
lines changed

14 files changed

+599
-11
lines changed

‎lib/src/common/variables.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -918,7 +918,7 @@ export const componentTokens = {
918918
linkMarginRight: "16px",
919919
linkMarginLeft: "16px",
920920
linkFocusColor: globalTokens.hal_blue_l_50,
921-
scrollBarThumbColor: "#66666626",
921+
scrollBarThumbColor: globalTokens.color_grey_a_200,
922922
scrollBarTrackColor: globalTokens.transparent,
923923
},
924924
slider: {

‎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-ad31801",
11+
"@dxc-technology/halstack-react": "0.0.0-50c4df3",
1212
"@radix-ui/react-popover": "0.1.6",
1313
"@types/styled-components": "^5.1.18",
1414
"axios": "^0.27.2",

‎website/pages/components/sidenav/specifications.tsx‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import Head from "next/head";
2+
import type { ReactElement } from "react";
3+
import SidenavPageLayout from "../../../screens/components/sidenav/SidenavPageLayout";
4+
import SidenavSpecsPage from "../../../screens/components/sidenav/specs/SidenavSpecsPage";
5+
6+
const Specifications = () => {
7+
return (
8+
<>
9+
<Head>
10+
<title>Sidenav Specs — Halstack Design System</title>
11+
</Head>
12+
<SidenavSpecsPage></SidenavSpecsPage>
13+
</>
14+
);
15+
};
16+
17+
Specifications.getLayout = function getLayout(page: ReactElement) {
18+
return <SidenavPageLayout>{page}</SidenavPageLayout>;
19+
};
20+
21+
export default Specifications;

‎website/pages/components/sidenav/usage.tsx‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import Head from "next/head";
2+
import type { ReactElement } from "react";
3+
import SidenavPageLayout from "../../../screens/components/sidenav/SidenavPageLayout";
4+
import SidenavUsagePage from "../../../screens/components/sidenav/usage/SidenavUsagePage";
5+
6+
const Usage = () => {
7+
return (
8+
<>
9+
<Head>
10+
<title>Sidenav Usage — Halstack Design System</title>
11+
</Head>
12+
<SidenavUsagePage></SidenavUsagePage>
13+
</>
14+
);
15+
};
16+
17+
Usage.getLayout = function getLayout(page: ReactElement) {
18+
return <SidenavPageLayout>{page}</SidenavPageLayout>;
19+
};
20+
21+
export default Usage;

‎website/screens/components/accordion/specs/AccordionSpecsPage.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -50,14 +50,14 @@ const sections = [
5050
<DxcBulletedList type="number">
5151
<DxcBulletedList.Item>Header</DxcBulletedList.Item>
5252
<DxcBulletedList.Item>
53-
Custom icon (Optional)
53+
Custom icon <em>(Optional)</em>
5454
</DxcBulletedList.Item>
5555
<DxcBulletedList.Item>Title</DxcBulletedList.Item>
5656
<DxcBulletedList.Item>
57-
Helper text (Optional)
57+
Helper text<em>(Optional)</em>
5858
</DxcBulletedList.Item>
5959
<DxcBulletedList.Item>
60-
Caret icon (Expand/collapse)
60+
Caret icon <em>(Expand/collapse)</em>
6161
</DxcBulletedList.Item>
6262
<DxcBulletedList.Item>Expanded panel</DxcBulletedList.Item>
6363
</DxcBulletedList>

‎website/screens/components/sidenav/SidenavPageLayout.tsx‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,11 @@ import ComponentHeading from "@/common/ComponentHeading";
55
import Link from "next/link";
66

77
const SidenavPageHeading = ({ children }: { children: React.ReactNode }) => {
8-
const tabs = [{ label: "Code", path: "/components/sidenav" }];
8+
const tabs = [
9+
{ label: "Code", path: "/components/sidenav" },
10+
{ label: "Usage", path: "/components/sidenav/usage" },
11+
{ label: "Specifications", path: "/components/sidenav/specifications" },
12+
];
913

1014
return (
1115
<DxcFlex direction="column" gap="3rem">

0 commit comments

Comments
 (0)