Skip to content

Updates to Sidenav component #1596

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
May 12, 2023
Merged

Updates to Sidenav component #1596

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
39c8993
Sidenav mid-life updates
GomezIvann May 11, 2023
a8dba47
Removing group title styles & React.Children.count
GomezIvann May 11, 2023
11ab3c1
Reverting last Sidenav implementation
GomezIvann May 12, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 2 additions & 13 deletions lib/src/layout/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,3 @@
type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";

type Padding = {
top?: Space;
bottom?: Space;
left?: Space;
right?: Space;
};

type ChildrenType = AppLayoutMainPropsType | AppLayoutSidenavPropsType;

export type AppLayoutMainPropsType = {
/**
* Everything between the tags will be displayed as the content of the main part of the application.
Expand Down Expand Up @@ -46,9 +35,9 @@ type AppLayoutPropsType = {
*/
footer?: React.ReactNode;
/**
* The area inside the sidenav. This area can be used to render custom content.
* Use the DxcApplicationLayout.Main provided to render main content.
*/
children: React.ReactElement<ChildrenType> | React.ReactElement<ChildrenType>[];
children: React.ReactElement<AppLayoutMainPropsType>;
};

export default AppLayoutPropsType;
24 changes: 24 additions & 0 deletions lib/src/sidenav/Icons.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
import React from "react";

const icons = {
collapsedIcon: (
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="currentColor">
<path d="M0 0h24v24H0z" fill="none" />
<path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z" />
</svg>
),
collapsableIcon: (
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="currentColor">
<path d="M0 0h24v24H0z" fill="none" />
<path d="M12 8l-6 6 1.41 1.41L12 10.83l4.59 4.58L18 14z" />
</svg>
),
externalLinkIcon: (
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24" fill="currentColor">
<path d="M0 0h24v24H0z" fill="none" />
<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" />
</svg>
),
};

export default icons;
120 changes: 60 additions & 60 deletions lib/src/sidenav/Sidenav.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
import React from "react";
import DxcSidenav from "./Sidenav";
import DxcSelect from "../select/Select";
import DxcInset from "../inset/Inset";
import Title from "../../.storybook/components/Title";
import ExampleContainer from "../../.storybook/components/ExampleContainer";
import { userEvent, within } from "@storybook/testing-library";
Expand Down Expand Up @@ -150,25 +152,25 @@ export const Chromatic = () => (
</>
);

const CollapsedGroup = () => (
const CollapsedGroupSidenav = () => (
<>
<ExampleContainer>
<Title title="Default sidenav" theme="light" level={4} />
<Title title="Collapsed group with a selected link" theme="light" level={4} />
<DxcSidenav title={<DxcSidenav.Title>Dxc technology</DxcSidenav.Title>}>
<DxcSidenav.Section>
<DxcSidenav.Group collapsable={true} title="Collapsable Group" icon={iconSVG}>
<DxcSidenav.Group collapsable={true} title="Collapsed Group" icon={iconSVG}>
<DxcSidenav.Link>Group Link</DxcSidenav.Link>
<DxcSidenav.Link>Group Link</DxcSidenav.Link>
<DxcSidenav.Link>Group Link</DxcSidenav.Link>
<DxcSidenav.Link>Group Link</DxcSidenav.Link>
</DxcSidenav.Group>
</DxcSidenav.Section>
<DxcSidenav.Section>
<DxcSidenav.Group collapsable={true} title="Collapsable Group">
<DxcSidenav.Link selected>Group Link</DxcSidenav.Link>
<DxcSidenav.Group collapsable={true} title="Collapsed Group">
<DxcSidenav.Link>Group Link</DxcSidenav.Link>
<DxcSidenav.Link selected>Group Link</DxcSidenav.Link>
</DxcSidenav.Group>
<DxcSidenav.Group collapsable={false} title="Section Group">
<DxcSidenav.Group collapsable={true} title="Section Group">
<DxcSidenav.Link>Group Link</DxcSidenav.Link>
<DxcSidenav.Link>Group Link</DxcSidenav.Link>
<DxcSidenav.Link>Group Link</DxcSidenav.Link>
Expand All @@ -179,14 +181,14 @@ const CollapsedGroup = () => (
</>
);

const HoverSidenav = () => (
const HoveredGroupSidenav = () => (
<ExampleContainer pseudoState="pseudo-hover">
<Title title="Default sidenav" theme="light" level={4} />
<Title title="Hover state for groups (selected and not)" theme="light" level={4} />
<DxcSidenav title={<DxcSidenav.Title>Dxc technology</DxcSidenav.Title>}>
<DxcSidenav.Section>
<DxcSidenav.Link>Single Link</DxcSidenav.Link>
<DxcSidenav.Link>Single Link</DxcSidenav.Link>
<DxcSidenav.Group collapsable={true} title="Collapsable Group">
<DxcSidenav.Group collapsable={true} title="Collapsed Group">
<DxcSidenav.Link selected>Group Link</DxcSidenav.Link>
<DxcSidenav.Link>Group Link</DxcSidenav.Link>
<DxcSidenav.Link>Group Link</DxcSidenav.Link>
Expand All @@ -200,13 +202,12 @@ const HoverSidenav = () => (
</DxcSidenav.Group>
<DxcSidenav.Link>Single Link</DxcSidenav.Link>
<DxcSidenav.Link>Single Link</DxcSidenav.Link>
<DxcSidenav.Group collapsable={true} title="Collapsable Group">
<DxcSidenav.Group collapsable={true} title="Collapsed Group">
<DxcSidenav.Link>Group Link</DxcSidenav.Link>
<DxcSidenav.Link>Group Link</DxcSidenav.Link>
<DxcSidenav.Link>Group Link</DxcSidenav.Link>
</DxcSidenav.Group>

<DxcSidenav.Group collapsable={true} title="Collapsable Group">
<DxcSidenav.Group collapsable={true} title="Collapsed Group">
<DxcSidenav.Link>Group Link</DxcSidenav.Link>
<DxcSidenav.Link>Group Link</DxcSidenav.Link>
<DxcSidenav.Link>Group Link</DxcSidenav.Link>
Expand All @@ -216,67 +217,66 @@ const HoverSidenav = () => (
</ExampleContainer>
);

const HoverSidenavOpinionated = () => (
<ExampleContainer pseudoState="pseudo-hover">
<Title title="Default sidenav" theme="light" level={4} />
<HalstackProvider theme={opinionatedTheme}>
<DxcSidenav title={<DxcSidenav.Title>Dxc technology</DxcSidenav.Title>}>
<DxcSidenav.Section>
<DxcSidenav.Link>Single Link</DxcSidenav.Link>
<DxcSidenav.Link>Single Link</DxcSidenav.Link>
<DxcSidenav.Group collapsable={true} title="Collapsable Group">
<DxcSidenav.Link selected>Group Link</DxcSidenav.Link>
<DxcSidenav.Link>Group Link</DxcSidenav.Link>
<DxcSidenav.Link>Group Link</DxcSidenav.Link>
<DxcSidenav.Link>Group Link</DxcSidenav.Link>
</DxcSidenav.Group>
</DxcSidenav.Section>
<DxcSidenav.Section>
<DxcSidenav.Group collapsable={true} title="Not Collapsed Group">
<DxcSidenav.Link selected>Group Link</DxcSidenav.Link>
<DxcSidenav.Link>Group Link</DxcSidenav.Link>
</DxcSidenav.Group>
<DxcSidenav.Link>Single Link</DxcSidenav.Link>
<DxcSidenav.Link>Single Link</DxcSidenav.Link>
<DxcSidenav.Group collapsable={true} title="Collapsable Group">
<DxcSidenav.Link>Group Link</DxcSidenav.Link>
<DxcSidenav.Link>Group Link</DxcSidenav.Link>
<DxcSidenav.Link>Group Link</DxcSidenav.Link>
</DxcSidenav.Group>
<DxcSidenav.Group collapsable={true} title="Collapsable Group">
<DxcSidenav.Link>Group Link</DxcSidenav.Link>
<DxcSidenav.Link>Group Link</DxcSidenav.Link>
<DxcSidenav.Link>Group Link</DxcSidenav.Link>
</DxcSidenav.Group>
</DxcSidenav.Section>
</DxcSidenav>
</HalstackProvider>
const ActiveGroupSidenav = () => (
<ExampleContainer pseudoState="pseudo-active">
<Title title="Active state for groups (selected and not)" theme="light" level={4} />
<DxcSidenav title={<DxcSidenav.Title>Dxc technology</DxcSidenav.Title>}>
<DxcSidenav.Section>
<DxcInset space="1rem">
<DxcSelect
defaultValue="1"
options={[
{ label: "v1.0.0", value: "1" },
{ label: "v2.0.0", value: "2" },
{ label: "v3.0.0", value: "3" },
{ label: "v4.0.0", value: "4" },
]}
size="fillParent"
/>
</DxcInset>
</DxcSidenav.Section>
<DxcSidenav.Section>
<DxcSidenav.Group collapsable={true} title="Collapsed Group">
<DxcSidenav.Link selected>Group Link</DxcSidenav.Link>
<DxcSidenav.Link>Group Link</DxcSidenav.Link>
<DxcSidenav.Link>Group Link</DxcSidenav.Link>
<DxcSidenav.Link>Group Link</DxcSidenav.Link>
</DxcSidenav.Group>
</DxcSidenav.Section>
<DxcSidenav.Section>
<DxcSidenav.Group collapsable={true} title="Not Collapsed Group">
<DxcSidenav.Link selected>Group Link</DxcSidenav.Link>
<DxcSidenav.Link>Group Link</DxcSidenav.Link>
</DxcSidenav.Group>
<DxcSidenav.Link>Single Link</DxcSidenav.Link>
<DxcSidenav.Link>Single Link</DxcSidenav.Link>
</DxcSidenav.Section>
</DxcSidenav>
</ExampleContainer>
);

export const CollapseGroup = CollapsedGroup.bind({});
CollapseGroup.play = async ({ canvasElement }) => {
export const CollapsableGroup = CollapsedGroupSidenav.bind({});
CollapsableGroup.play = async ({ canvasElement }) => {
const canvas = within(canvasElement);
const collapsableGroups = canvas.getAllByText("Collapsable Group");
const collapsableGroups = canvas.getAllByText("Collapsed Group");
collapsableGroups.forEach((group) => {
userEvent.click(group);
});
};

export const CollapseHoverGroup = HoverSidenav.bind({});
CollapseHoverGroup.play = async ({ canvasElement }) => {
export const CollapsedHoverGroup = HoveredGroupSidenav.bind({});
CollapsedHoverGroup.play = async ({ canvasElement }) => {
const canvas = within(canvasElement);
const collapsableGroups = canvas.getAllByText("Collapsable Group");
const collapsableGroups = canvas.getAllByText("Collapsed Group");
collapsableGroups.forEach((group) => {
userEvent.click(group);
});
await new Promise((resolve) => setTimeout(resolve, 1000));
};

export const CollapseHoverGroupOpinionated = HoverSidenavOpinionated.bind({});
CollapseHoverGroupOpinionated.play = async ({ canvasElement }) => {
export const CollapsedActiveGroup = ActiveGroupSidenav.bind({});
CollapsedActiveGroup.play = async ({ canvasElement }) => {
const canvas = within(canvasElement);
const collapsableGroups = canvas.getAllByText("Collapsable Group");
collapsableGroups.forEach((group) => {
userEvent.click(group);
});
};
const collapsableGroups = canvas.getAllByText("Collapsed Group");
userEvent.click(collapsableGroups[0]);
};
Loading