Skip to content

Commit 2151ae6

Browse files
GomezIvannGomezIvann
authored
Merge pull request #1122 from dxc-technology/jialecl-sidenav-redesign
[Major] Sidenav Content Style
2 parents c1b4248 + f380d3e commit 2151ae6

File tree

16 files changed

+940
-624
lines changed

16 files changed

+940
-624
lines changed

‎app/src/pages/Sidenav.jsx‎

Lines changed: 42 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -1,59 +1,55 @@
11
import React from "react";
2-
import {
3-
DxcSidenav,
4-
DxcFooter,
5-
HalstackProvider,
6-
} from "@dxc-technology/halstack-react";
2+
import { DxcSidenav } from "@dxc-technology/halstack-react";
73

8-
const colors = {
9-
sidenav: {
10-
baseColor: "#FABADA",
11-
},
4+
const titleWrapper = () => {
5+
return <DxcSidenav.Title>My sidenav</DxcSidenav.Title>;
126
};
137

148
function App() {
159
return (
1610
<div>
17-
<div className="test-case" id="children">
18-
<DxcSidenav padding="medium">
19-
<p>Lorem ipsum</p>
20-
<p>Lorem ipsum</p>
21-
<p>Lorem ipsum</p>
22-
<p>Lorem ipsum</p>
23-
<p>Lorem ipsum</p>
24-
<p>Lorem ipsum</p>
25-
</DxcSidenav>
26-
<DxcFooter />
27-
</div>
28-
29-
<div className="test-case" id="custom-colors">
30-
<h4>Custom Sidenav</h4>
31-
<HalstackProvider theme={colors}>
32-
<DxcSidenav padding="medium">
33-
<p>Lorem ipsum</p>
34-
<p>Lorem ipsum</p>
11+
<div className="test-case" id="sidenav-menu">
12+
<DxcSidenav title={titleWrapper}>
13+
<DxcSidenav.Section>
3514
<p>Lorem ipsum</p>
36-
</DxcSidenav>
37-
<DxcFooter />
38-
</HalstackProvider>
39-
</div>
15+
<DxcSidenav.Link href="#">Lorem ipsum</DxcSidenav.Link>
16+
<DxcSidenav.Link href="#">Lorem ipsum</DxcSidenav.Link>
17+
<DxcSidenav.Link href="#">Lorem ipsum</DxcSidenav.Link>
18+
<DxcSidenav.Link href="#">Lorem ipsum</DxcSidenav.Link>
19+
<DxcSidenav.Group title="Group title" collapsable>
20+
<DxcSidenav.Link href="#">Lorem ipsum</DxcSidenav.Link>
21+
<DxcSidenav.Link href="#">Lorem ipsum</DxcSidenav.Link>
22+
<DxcSidenav.Link href="#">Lorem ipsum</DxcSidenav.Link>
23+
<DxcSidenav.Link href="#">Lorem ipsum</DxcSidenav.Link>
24+
<DxcSidenav.Link href="#">Lorem ipsum</DxcSidenav.Link>
25+
</DxcSidenav.Group>
26+
<DxcSidenav.Group title="Group title" collapsable>
27+
<DxcSidenav.Link href="#">Lorem ipsum</DxcSidenav.Link>
28+
<DxcSidenav.Link href="#">Lorem ipsum</DxcSidenav.Link>
29+
<DxcSidenav.Link href="#">Lorem ipsum</DxcSidenav.Link>
30+
<DxcSidenav.Link href="#">Lorem ipsum</DxcSidenav.Link>
31+
<DxcSidenav.Link href="#">Lorem ipsum</DxcSidenav.Link>
32+
</DxcSidenav.Group>
33+
</DxcSidenav.Section>
4034

41-
<div className="test-case" id="sidenav-menu">
42-
<h4>Compound components Sidenav</h4>
43-
<DxcSidenav padding="medium">
44-
<DxcSidenav.Title>My sidenav</DxcSidenav.Title>
45-
<p>This is a sidenav.</p>
46-
<DxcSidenav.Subtitle>My subtitle</DxcSidenav.Subtitle>
47-
<DxcSidenav.Link href="#">Home</DxcSidenav.Link>
48-
<DxcSidenav.Link href="/test">Test</DxcSidenav.Link>
49-
<DxcSidenav.Subtitle>My subtitle2</DxcSidenav.Subtitle>
50-
<DxcSidenav.Link href="#">Home2</DxcSidenav.Link>
51-
<DxcSidenav.Link onClick={() => console.log("click")}>
52-
Test2
53-
</DxcSidenav.Link>
54-
<p>This is a sidenav2.</p>
35+
<DxcSidenav.Section>
36+
<p>Lorem ipsum</p>
37+
<DxcSidenav.Group title="Group title">
38+
<DxcSidenav.Link href="#">Lorem ipsum</DxcSidenav.Link>
39+
<DxcSidenav.Link href="#">Lorem ipsum</DxcSidenav.Link>
40+
<DxcSidenav.Link href="#">Lorem ipsum</DxcSidenav.Link>
41+
<DxcSidenav.Link href="#">Lorem ipsum</DxcSidenav.Link>
42+
<DxcSidenav.Link href="#">Lorem ipsum</DxcSidenav.Link>
43+
</DxcSidenav.Group>
44+
<DxcSidenav.Group title="Group title" collapsable>
45+
<DxcSidenav.Link href="#">Lorem ipsum</DxcSidenav.Link>
46+
<DxcSidenav.Link href="#">Lorem ipsum</DxcSidenav.Link>
47+
<DxcSidenav.Link href="#">Lorem ipsum</DxcSidenav.Link>
48+
<DxcSidenav.Link href="#">Lorem ipsum</DxcSidenav.Link>
49+
<DxcSidenav.Link href="#">Lorem ipsum</DxcSidenav.Link>
50+
</DxcSidenav.Group>
51+
</DxcSidenav.Section>
5552
</DxcSidenav>
56-
<DxcFooter />
5753
</div>
5854
</div>
5955
);

‎docs/src/pages/components/Components.jsx‎

Lines changed: 35 additions & 81 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import {
99
DxcFooter,
1010
DxcApplicationLayout,
1111
DxcHeading,
12+
DxcSidenav,
1213
} from "@dxc-technology/halstack-react";
1314
import paths from "./paths.js";
1415
import reactIcon from "../../common/react-icon.png";
@@ -72,40 +73,31 @@ const SidenavContent = () => {
7273

7374
return (
7475
<>
75-
<Title>
76-
React
77-
<ReactLogo src={reactIcon} alt="React Logo" />
78-
</Title>
7976
{Object.keys(types).map((type) => (
80-
<React.Fragment key={types[type]}>
81-
<ComponentType>{types[type]}</ComponentType>
82-
<ComponentsList>
83-
{paths
84-
.filter((path) => path.type === types[type])
85-
.sort((path1, path2) => (path1.name < path2.name ? -1 : 1))
86-
.map((path) => (
87-
<NavLink
88-
isActive={location.pathname === `/components/${path.path}`}
89-
key={path.path}
77+
<DxcSidenav.Group key={types[type]} title={types[type]}>
78+
{paths
79+
.filter((path) => path.type === types[type])
80+
.sort((path1, path2) => (path1.name < path2.name ? -1 : 1))
81+
.map((path) => (
82+
<>
83+
<Link
84+
to={`/components/${path.path}`}
85+
onClick={handleLinkOnClick}
86+
component={DxcSidenav.Link}
87+
selected={location.pathname === `/components/${path.path}`}
9088
>
91-
<Link
92-
to={`/components/${path.path}`}
93-
onClick={handleLinkOnClick}
94-
>
95-
{path.name}
96-
</Link>
97-
{path.status === "deprecated" && (
98-
<StatusTag
99-
status={
100-
path.status.charAt(0).toUpperCase() +
101-
path.status.slice(1)
102-
}
103-
/>
104-
)}
105-
</NavLink>
106-
))}
107-
</ComponentsList>
108-
</React.Fragment>
89+
{path.name}
90+
</Link>
91+
{path.status === "deprecated" && (
92+
<StatusTag
93+
status={
94+
path.status.charAt(0).toUpperCase() + path.status.slice(1)
95+
}
96+
/>
97+
)}
98+
</>
99+
))}
100+
</DxcSidenav.Group>
109101
))}
110102
</>
111103
);
@@ -116,8 +108,17 @@ const Components = () => (
116108
<DxcApplicationLayout.Header>
117109
<Header />
118110
</DxcApplicationLayout.Header>
119-
<DxcApplicationLayout.SideNav padding="large">
120-
<SidenavContent />
111+
<DxcApplicationLayout.SideNav
112+
title={
113+
<DxcSidenav.Title>
114+
React
115+
<ReactLogo src={reactIcon} alt="React Logo" />
116+
</DxcSidenav.Title>
117+
}
118+
>
119+
<DxcSidenav.Section>
120+
<SidenavContent />
121+
</DxcSidenav.Section>
121122
</DxcApplicationLayout.SideNav>
122123
<DxcApplicationLayout.Main>
123124
<MainContent>
@@ -170,58 +171,11 @@ const MainContent = styled.div`
170171
min-height: 100vh;
171172
`;
172173

173-
const Title = styled.h1`
174-
font-size: 24px;
175-
display: flex;
176-
align-items: center;
177-
color: #646464;
178-
font-weight: normal;
179-
line-height: 18px;
180-
`;
181-
182174
const ReactLogo = styled.img`
183175
max-width: 28px;
184176
margin-left: 8px;
185177
`;
186178

187-
const ComponentType = styled.div`
188-
text-transform: uppercase;
189-
color: gray;
190-
font-size: 14px;
191-
letter-spacing: 1px;
192-
margin-bottom: 5px;
193-
`;
194-
195-
const ComponentsList = styled.div`
196-
margin-left: 10px;
197-
margin-bottom: 30px;
198-
display: flex;
199-
flex-direction: column;
200-
`;
201-
202-
const NavLink = styled.div`
203-
display: flex;
204-
align-items: center;
205-
gap: 0.5rem;
206-
padding: 4px 0px;
207-
& a {
208-
font-size: 14px;
209-
text-decoration: none;
210-
font-weight: ${({ isActive }) => (isActive && "bold") || "normal"};
211-
color: ${({ isActive }) => (isActive && "black") || "gray"};
212-
::before {
213-
display: table;
214-
content: "";
215-
margin-bottom: 0.21875rem;
216-
}
217-
::after {
218-
display: table;
219-
content: "";
220-
margin-top: 0.21875rem;
221-
}
222-
}
223-
`;
224-
225179
const ComponentsLinksContainer = styled.div`
226180
display: flex;
227181
flex-direction: row;

‎docs/src/pages/components/cdk-components/sidenav/Sidenav.jsx‎

Lines changed: 31 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,11 @@ import ComponentDoc from "../../common/ComponentDoc";
33
import Section from "../../common/Section";
44
import Example from "../../common/Example";
55
import ComponentHeader from "../../common/ComponentHeader";
6-
import SidenavPropsTable from "./api.jsx";
7-
import SidenavLinkPropsTable from "./linkapi.jsx";
6+
import SidenavPropsTable, {
7+
SidenavTitlePropsTable,
8+
SidenavGroupPropsTable,
9+
SidenavLinkPropsTable,
10+
} from "./api.jsx";
811
import { DxcHeading, DxcLink } from "@dxc-technology/halstack-react";
912
import defaultSidenav from "./examples/default";
1013
import compoundSidenav from "./examples/compound";
@@ -18,7 +21,11 @@ function Sidenav() {
1821
<SidenavPropsTable />
1922
</Section>
2023
<Section>
21-
<DxcHeading level={3} text="Children" margin={{ bottom: "small" }} />
24+
<DxcHeading
25+
level={3}
26+
text="Compound components"
27+
margin={{ bottom: "small" }}
28+
/>
2229
<p>
2330
This component includes different compound components that are
2431
customized following the{" "}
@@ -28,10 +35,27 @@ function Sidenav() {
2835
.
2936
</p>
3037
<DxcHeading text="DxcSidenav.Title" level={4} weight="bold" />
31-
<p>The content will be showed as the main title in the sidenav.</p>
32-
<DxcHeading text="DxcSidenav.Subtitle" level={4} weight="bold" />
33-
<p>The content will be showed as a subtitle in the sidenav.</p>
34-
<DxcHeading text="DxcSidenav.Link" level={4} weight="bold" />
38+
<p>
39+
The content will be showed as the main title in the sidenav, it should
40+
be used only in the sidenav title prop.
41+
</p>
42+
<SidenavTitlePropsTable />
43+
<DxcHeading
44+
text="DxcSidenav.Section"
45+
level={4}
46+
weight="bold"
47+
margin={{ top: "small" }}
48+
/>
49+
<p>The content will be showed as a section the sidenav.</p>
50+
<DxcHeading text="DxcSidenav.Group" level={4} weight="bold" />
51+
<p>A group of Links, recommennded to use inside the section.</p>
52+
<SidenavGroupPropsTable />
53+
<DxcHeading
54+
text="DxcSidenav.Link"
55+
level={4}
56+
weight="bold"
57+
margin={{ top: "small" }}
58+
/>
3559
<p>Customized link that allows the navigation.</p>
3660
<DxcHeading
3761
text="Props"

0 commit comments

Comments
 (0)