Skip to content

Commit 22b474c

Browse files
JialeclJialecl
authored
Merge pull request #1596 from dxc-technology/gomezivann/sidenav-update
Updates to Sidenav component
2 parents 3a698b0 + 11ab3c1 commit 22b474c

File tree

7 files changed

+369
-394
lines changed

7 files changed

+369
-394
lines changed

‎lib/src/layout/types.ts‎

Lines changed: 2 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,3 @@
1-
type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
2-
3-
type Padding = {
4-
top?: Space;
5-
bottom?: Space;
6-
left?: Space;
7-
right?: Space;
8-
};
9-
10-
type ChildrenType = AppLayoutMainPropsType | AppLayoutSidenavPropsType;
11-
121
export type AppLayoutMainPropsType = {
132
/**
143
* Everything between the tags will be displayed as the content of the main part of the application.
@@ -46,9 +35,9 @@ type AppLayoutPropsType = {
4635
*/
4736
footer?: React.ReactNode;
4837
/**
49-
* The area inside the sidenav. This area can be used to render custom content.
38+
* Use the DxcApplicationLayout.Main provided to render main content.
5039
*/
51-
children: React.ReactElement<ChildrenType> | React.ReactElement<ChildrenType>[];
40+
children: React.ReactElement<AppLayoutMainPropsType>;
5241
};
5342

5443
export default AppLayoutPropsType;

‎lib/src/sidenav/Icons.tsx‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import React from "react";
2+
3+
const icons = {
4+
collapsedIcon: (
5+
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="currentColor">
6+
<path d="M0 0h24v24H0z" fill="none" />
7+
<path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z" />
8+
</svg>
9+
),
10+
collapsableIcon: (
11+
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="currentColor">
12+
<path d="M0 0h24v24H0z" fill="none" />
13+
<path d="M12 8l-6 6 1.41 1.41L12 10.83l4.59 4.58L18 14z" />
14+
</svg>
15+
),
16+
externalLinkIcon: (
17+
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24" fill="currentColor">
18+
<path d="M0 0h24v24H0z" fill="none" />
19+
<path d="M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z" />
20+
</svg>
21+
),
22+
};
23+
24+
export default icons;

‎lib/src/sidenav/Sidenav.stories.tsx‎

Lines changed: 60 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
import React from "react";
22
import DxcSidenav from "./Sidenav";
3+
import DxcSelect from "../select/Select";
4+
import DxcInset from "../inset/Inset";
35
import Title from "../../.storybook/components/Title";
46
import ExampleContainer from "../../.storybook/components/ExampleContainer";
57
import { userEvent, within } from "@storybook/testing-library";
@@ -150,25 +152,25 @@ export const Chromatic = () => (
150152
</>
151153
);
152154

153-
const CollapsedGroup = () => (
155+
const CollapsedGroupSidenav = () => (
154156
<>
155157
<ExampleContainer>
156-
<Title title="Default sidenav" theme="light" level={4} />
158+
<Title title="Collapsed group with a selected link" theme="light" level={4} />
157159
<DxcSidenav title={<DxcSidenav.Title>Dxc technology</DxcSidenav.Title>}>
158160
<DxcSidenav.Section>
159-
<DxcSidenav.Group collapsable={true} title="Collapsable Group" icon={iconSVG}>
161+
<DxcSidenav.Group collapsable={true} title="Collapsed Group" icon={iconSVG}>
160162
<DxcSidenav.Link>Group Link</DxcSidenav.Link>
161163
<DxcSidenav.Link>Group Link</DxcSidenav.Link>
162164
<DxcSidenav.Link>Group Link</DxcSidenav.Link>
163165
<DxcSidenav.Link>Group Link</DxcSidenav.Link>
164166
</DxcSidenav.Group>
165167
</DxcSidenav.Section>
166168
<DxcSidenav.Section>
167-
<DxcSidenav.Group collapsable={true} title="Collapsable Group">
168-
<DxcSidenav.Link selected>Group Link</DxcSidenav.Link>
169+
<DxcSidenav.Group collapsable={true} title="Collapsed Group">
169170
<DxcSidenav.Link>Group Link</DxcSidenav.Link>
171+
<DxcSidenav.Link selected>Group Link</DxcSidenav.Link>
170172
</DxcSidenav.Group>
171-
<DxcSidenav.Group collapsable={false} title="Section Group">
173+
<DxcSidenav.Group collapsable={true} title="Section Group">
172174
<DxcSidenav.Link>Group Link</DxcSidenav.Link>
173175
<DxcSidenav.Link>Group Link</DxcSidenav.Link>
174176
<DxcSidenav.Link>Group Link</DxcSidenav.Link>
@@ -179,14 +181,14 @@ const CollapsedGroup = () => (
179181
</>
180182
);
181183

182-
const HoverSidenav = () => (
184+
const HoveredGroupSidenav = () => (
183185
<ExampleContainer pseudoState="pseudo-hover">
184-
<Title title="Default sidenav" theme="light" level={4} />
186+
<Title title="Hover state for groups (selected and not)" theme="light" level={4} />
185187
<DxcSidenav title={<DxcSidenav.Title>Dxc technology</DxcSidenav.Title>}>
186188
<DxcSidenav.Section>
187189
<DxcSidenav.Link>Single Link</DxcSidenav.Link>
188190
<DxcSidenav.Link>Single Link</DxcSidenav.Link>
189-
<DxcSidenav.Group collapsable={true} title="Collapsable Group">
191+
<DxcSidenav.Group collapsable={true} title="Collapsed Group">
190192
<DxcSidenav.Link selected>Group Link</DxcSidenav.Link>
191193
<DxcSidenav.Link>Group Link</DxcSidenav.Link>
192194
<DxcSidenav.Link>Group Link</DxcSidenav.Link>
@@ -200,13 +202,12 @@ const HoverSidenav = () => (
200202
</DxcSidenav.Group>
201203
<DxcSidenav.Link>Single Link</DxcSidenav.Link>
202204
<DxcSidenav.Link>Single Link</DxcSidenav.Link>
203-
<DxcSidenav.Group collapsable={true} title="Collapsable Group">
205+
<DxcSidenav.Group collapsable={true} title="Collapsed Group">
204206
<DxcSidenav.Link>Group Link</DxcSidenav.Link>
205207
<DxcSidenav.Link>Group Link</DxcSidenav.Link>
206208
<DxcSidenav.Link>Group Link</DxcSidenav.Link>
207209
</DxcSidenav.Group>
208-
209-
<DxcSidenav.Group collapsable={true} title="Collapsable Group">
210+
<DxcSidenav.Group collapsable={true} title="Collapsed Group">
210211
<DxcSidenav.Link>Group Link</DxcSidenav.Link>
211212
<DxcSidenav.Link>Group Link</DxcSidenav.Link>
212213
<DxcSidenav.Link>Group Link</DxcSidenav.Link>
@@ -216,67 +217,66 @@ const HoverSidenav = () => (
216217
</ExampleContainer>
217218
);
218219

219-
const HoverSidenavOpinionated = () => (
220-
<ExampleContainer pseudoState="pseudo-hover">
221-
<Title title="Default sidenav" theme="light" level={4} />
222-
<HalstackProvider theme={opinionatedTheme}>
223-
<DxcSidenav title={<DxcSidenav.Title>Dxc technology</DxcSidenav.Title>}>
224-
<DxcSidenav.Section>
225-
<DxcSidenav.Link>Single Link</DxcSidenav.Link>
226-
<DxcSidenav.Link>Single Link</DxcSidenav.Link>
227-
<DxcSidenav.Group collapsable={true} title="Collapsable Group">
228-
<DxcSidenav.Link selected>Group Link</DxcSidenav.Link>
229-
<DxcSidenav.Link>Group Link</DxcSidenav.Link>
230-
<DxcSidenav.Link>Group Link</DxcSidenav.Link>
231-
<DxcSidenav.Link>Group Link</DxcSidenav.Link>
232-
</DxcSidenav.Group>
233-
</DxcSidenav.Section>
234-
<DxcSidenav.Section>
235-
<DxcSidenav.Group collapsable={true} title="Not Collapsed Group">
236-
<DxcSidenav.Link selected>Group Link</DxcSidenav.Link>
237-
<DxcSidenav.Link>Group Link</DxcSidenav.Link>
238-
</DxcSidenav.Group>
239-
<DxcSidenav.Link>Single Link</DxcSidenav.Link>
240-
<DxcSidenav.Link>Single Link</DxcSidenav.Link>
241-
<DxcSidenav.Group collapsable={true} title="Collapsable Group">
242-
<DxcSidenav.Link>Group Link</DxcSidenav.Link>
243-
<DxcSidenav.Link>Group Link</DxcSidenav.Link>
244-
<DxcSidenav.Link>Group Link</DxcSidenav.Link>
245-
</DxcSidenav.Group>
246-
<DxcSidenav.Group collapsable={true} title="Collapsable Group">
247-
<DxcSidenav.Link>Group Link</DxcSidenav.Link>
248-
<DxcSidenav.Link>Group Link</DxcSidenav.Link>
249-
<DxcSidenav.Link>Group Link</DxcSidenav.Link>
250-
</DxcSidenav.Group>
251-
</DxcSidenav.Section>
252-
</DxcSidenav>
253-
</HalstackProvider>
220+
const ActiveGroupSidenav = () => (
221+
<ExampleContainer pseudoState="pseudo-active">
222+
<Title title="Active state for groups (selected and not)" theme="light" level={4} />
223+
<DxcSidenav title={<DxcSidenav.Title>Dxc technology</DxcSidenav.Title>}>
224+
<DxcSidenav.Section>
225+
<DxcInset space="1rem">
226+
<DxcSelect
227+
defaultValue="1"
228+
options={[
229+
{ label: "v1.0.0", value: "1" },
230+
{ label: "v2.0.0", value: "2" },
231+
{ label: "v3.0.0", value: "3" },
232+
{ label: "v4.0.0", value: "4" },
233+
]}
234+
size="fillParent"
235+
/>
236+
</DxcInset>
237+
</DxcSidenav.Section>
238+
<DxcSidenav.Section>
239+
<DxcSidenav.Group collapsable={true} title="Collapsed Group">
240+
<DxcSidenav.Link selected>Group Link</DxcSidenav.Link>
241+
<DxcSidenav.Link>Group Link</DxcSidenav.Link>
242+
<DxcSidenav.Link>Group Link</DxcSidenav.Link>
243+
<DxcSidenav.Link>Group Link</DxcSidenav.Link>
244+
</DxcSidenav.Group>
245+
</DxcSidenav.Section>
246+
<DxcSidenav.Section>
247+
<DxcSidenav.Group collapsable={true} title="Not Collapsed Group">
248+
<DxcSidenav.Link selected>Group Link</DxcSidenav.Link>
249+
<DxcSidenav.Link>Group Link</DxcSidenav.Link>
250+
</DxcSidenav.Group>
251+
<DxcSidenav.Link>Single Link</DxcSidenav.Link>
252+
<DxcSidenav.Link>Single Link</DxcSidenav.Link>
253+
</DxcSidenav.Section>
254+
</DxcSidenav>
254255
</ExampleContainer>
255256
);
256257

257-
export const CollapseGroup = CollapsedGroup.bind({});
258-
CollapseGroup.play = async ({ canvasElement }) => {
258+
export const CollapsableGroup = CollapsedGroupSidenav.bind({});
259+
CollapsableGroup.play = async ({ canvasElement }) => {
259260
const canvas = within(canvasElement);
260-
const collapsableGroups = canvas.getAllByText("Collapsable Group");
261+
const collapsableGroups = canvas.getAllByText("Collapsed Group");
261262
collapsableGroups.forEach((group) => {
262263
userEvent.click(group);
263264
});
264265
};
265266

266-
export const CollapseHoverGroup = HoverSidenav.bind({});
267-
CollapseHoverGroup.play = async ({ canvasElement }) => {
267+
export const CollapsedHoverGroup = HoveredGroupSidenav.bind({});
268+
CollapsedHoverGroup.play = async ({ canvasElement }) => {
268269
const canvas = within(canvasElement);
269-
const collapsableGroups = canvas.getAllByText("Collapsable Group");
270+
const collapsableGroups = canvas.getAllByText("Collapsed Group");
270271
collapsableGroups.forEach((group) => {
271272
userEvent.click(group);
272273
});
274+
await new Promise((resolve) => setTimeout(resolve, 1000));
273275
};
274276

275-
export const CollapseHoverGroupOpinionated = HoverSidenavOpinionated.bind({});
276-
CollapseHoverGroupOpinionated.play = async ({ canvasElement }) => {
277+
export const CollapsedActiveGroup = ActiveGroupSidenav.bind({});
278+
CollapsedActiveGroup.play = async ({ canvasElement }) => {
277279
const canvas = within(canvasElement);
278-
const collapsableGroups = canvas.getAllByText("Collapsable Group");
279-
collapsableGroups.forEach((group) => {
280-
userEvent.click(group);
281-
});
282-
};
280+
const collapsableGroups = canvas.getAllByText("Collapsed Group");
281+
userEvent.click(collapsableGroups[0]);
282+
};

0 commit comments

Comments
 (0)