Skip to content

[Major] Application layout review #1120

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 8 commits into from
Jun 22, 2022
Merged

[Major] Application layout review #1120

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
b534315
First review of the application layout
Jun 8, 2022
8f85087
More updates to the application layout styling
Jun 8, 2022
d9ba93f
Using media queries for Application Layout and new prop added
Jun 9, 2022
f4127aa
New SidenavContext added for Application Layout
Jun 10, 2022
fca75b8
Application Layout hook renamed & Sidenav updated
Jun 13, 2022
774c81c
Adjustments to the application layout code
Jun 22, 2022
bc43058
[Major] Translation added for hamburguer button & stories updated for…
Jun 22, 2022
8d0efb9
Merge branch 'master' into gomezivann-applicationLayout-review
raquelarrojo Jun 22, 2022
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
2 changes: 1 addition & 1 deletion docs/src/common/Header.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ function App() {
return (
<DxcHeader
underlined
padding={{ left: "medium", right: "medium" }}
padding={{ left: "small" }}
content={
<React.Fragment>
<HeaderSelect>
Expand Down
198 changes: 100 additions & 98 deletions docs/src/pages/components/Components.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,112 +61,114 @@ const getComponentsLinks = (type) => {
);
};

function Components() {
const SidenavContent = () => {
const location = useLocation();
const changeResponsiveSidenavVisibility =
DxcApplicationLayout.useResponsiveSidenavVisibility();

const handleLinkOnClick = () => {
changeResponsiveSidenavVisibility(false);
};

return (
<DxcApplicationLayout>
<DxcApplicationLayout.Header>
<Header />
</DxcApplicationLayout.Header>
<DxcApplicationLayout.SideNav mode="push" padding="large">
<SideNavContainer>
<Title>
React
<ReactLogo src={reactIcon} alt="React Logo"></ReactLogo>
</Title>
{Object.keys(types).map((type) => (
<React.Fragment key={types[type]}>
<ComponentType>{types[type]}</ComponentType>
<ComponentsList>
{paths
.filter((path) => path.type === types[type])
.sort((path1, path2) => (path1.name < path2.name ? -1 : 1))
.map((path) => (
<NavLink
isActive={
location.pathname === `/components/${path.path}`
<SidenavContainer>
<Title>
React
<ReactLogo src={reactIcon} alt="React Logo" />
</Title>
{Object.keys(types).map((type) => (
<React.Fragment key={types[type]}>
<ComponentType>{types[type]}</ComponentType>
<ComponentsList>
{paths
.filter((path) => path.type === types[type])
.sort((path1, path2) => (path1.name < path2.name ? -1 : 1))
.map((path) => (
<NavLink
isActive={location.pathname === `/components/${path.path}`}
key={path.path}
>
<Link
to={`/components/${path.path}`}
onClick={handleLinkOnClick}
>
{path.name}
</Link>
{path.status === "deprecated" && (
<StatusTag
status={
path.status.charAt(0).toUpperCase() +
path.status.slice(1)
}
key={path.path}
>
<Link to={`/components/${path.path}`}>{path.name}</Link>
{path.status === "deprecated" && (
<StatusTag
status={
path.status.charAt(0).toUpperCase() +
path.status.slice(1)
}
/>
)}
</NavLink>
))}
</ComponentsList>
</React.Fragment>
))}
</SideNavContainer>
</DxcApplicationLayout.SideNav>
<DxcApplicationLayout.Main>
<MainContent>
<Route exact path="/components">
<ComponentDoc>
<DxcHeading
level={1}
text="Components"
margin={{ bottom: "large" }}
/>
<DxcHeading level={3} text="Forms" />
<DxcBox
padding="small"
margin={{ top: "small", bottom: "small" }}
>
{getComponentsLinks("Forms")}
</DxcBox>
<DxcHeading level={3} text="Navigation" />
<DxcBox
padding="small"
margin={{ top: "small", bottom: "small" }}
>
{getComponentsLinks("Navigation")}
</DxcBox>
<DxcHeading level={3} text="Layout" />
<DxcBox
padding="small"
margin={{ top: "small", bottom: "small" }}
>
{getComponentsLinks("Layout")}
</DxcBox>
<DxcHeading level={3} text="Utilities" />
<DxcBox
padding="small"
margin={{ top: "small", bottom: "small" }}
>
{getComponentsLinks("Utilities")}
</DxcBox>
</ComponentDoc>
</Route>
{paths.map((path) => (
<Route path={`/components/${path.path}`} key={path.path}>
<path.component></path.component>
</Route>
))}
</MainContent>
</DxcApplicationLayout.Main>
<DxcApplicationLayout.Footer>
<DxcFooter
bottomLinks={[
{ text: "Twitter", href: "http://www.google.com" },
{ text: "Facebook", href: "http://www.google.com" },
{ text: "Instagram", href: "http://www.google.com" },
]}
></DxcFooter>
</DxcApplicationLayout.Footer>
</DxcApplicationLayout>
/>
)}
</NavLink>
))}
</ComponentsList>
</React.Fragment>
))}
</SidenavContainer>
);
}
};

const SideNavContainer = styled.div`
const Components = () => (
<DxcApplicationLayout visibilityToggleLabel="Components">
<DxcApplicationLayout.Header>
<Header />
</DxcApplicationLayout.Header>
<DxcApplicationLayout.SideNav padding="large">
<SidenavContent />
</DxcApplicationLayout.SideNav>
<DxcApplicationLayout.Main>
<MainContent>
<Route exact path="/components">
<ComponentDoc>
<DxcHeading
level={1}
text="Components"
margin={{ bottom: "large" }}
/>
<DxcHeading level={3} text="Forms" />
<DxcBox padding="small" margin={{ top: "small", bottom: "small" }}>
{getComponentsLinks("Forms")}
</DxcBox>
<DxcHeading level={3} text="Navigation" />
<DxcBox padding="small" margin={{ top: "small", bottom: "small" }}>
{getComponentsLinks("Navigation")}
</DxcBox>
<DxcHeading level={3} text="Layout" />
<DxcBox padding="small" margin={{ top: "small", bottom: "small" }}>
{getComponentsLinks("Layout")}
</DxcBox>
<DxcHeading level={3} text="Utilities" />
<DxcBox padding="small" margin={{ top: "small", bottom: "small" }}>
{getComponentsLinks("Utilities")}
</DxcBox>
</ComponentDoc>
</Route>
{paths.map((path) => (
<Route path={`/components/${path.path}`} key={path.path}>
<path.component></path.component>
</Route>
))}
</MainContent>
</DxcApplicationLayout.Main>
<DxcApplicationLayout.Footer>
<DxcFooter
bottomLinks={[
{ text: "Twitter", href: "http://www.google.com" },
{ text: "Facebook", href: "http://www.google.com" },
{ text: "Instagram", href: "http://www.google.com" },
]}
></DxcFooter>
</DxcApplicationLayout.Footer>
</DxcApplicationLayout>
);

const SidenavContainer = styled.div`
margin-bottom: 40px;
`;

const MainContent = styled.div`
height: 100%;
min-height: 100vh;
Expand Down
1 change: 1 addition & 0 deletions lib/src/HalstackContext.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -301,6 +301,7 @@ const parseLabels = (labels) => {
});
return parsedLabels;
};

type HalstackProviderPropsType = {
theme?: object;
advancedTheme?: object;
Expand Down
3 changes: 3 additions & 0 deletions lib/src/common/variables.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1481,4 +1481,7 @@ export const defaultTranslatedComponentLabels = {
],
monthsShort: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
},
applicationLayout: {
visibilityToggleTitle: "Toggle visibility sidenav",
},
};
73 changes: 14 additions & 59 deletions lib/src/layout/ApplicationLayout.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,17 +2,16 @@ import React from "react";
import DxcApplicationLayout from "./ApplicationLayout";
import DxcSidenav from "../sidenav/Sidenav";
import Title from "../../.storybook/components/Title";
import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
import { userEvent, within, waitFor } from "@storybook/testing-library";
import { INITIAL_VIEWPORTS } from "@storybook/addon-viewport";

export default {
title: "Application Layout ",
component: DxcApplicationLayout,
parameters: {
viewport: {
viewports: INITIAL_VIEWPORTS,
}
}
},
},
};

export const DefaultApplicationLayout = () => (
Expand Down Expand Up @@ -50,51 +49,9 @@ export const ApplicationLayoutWithDefaultSidenav = () => (
</>
);

export const ApplicationLayoutWithPushSidenav = () => (
<>
<DxcApplicationLayout>
<DxcApplicationLayout.SideNav mode="push">
<DxcSidenav.Title>Application layout with push sidenav</DxcSidenav.Title>
<p>SideNav Content</p>
<p>SideNav Content</p>
<p>SideNav Content</p>
<p>SideNav Content</p>
<p>SideNav Content</p>
</DxcApplicationLayout.SideNav>
<DxcApplicationLayout.Main>
<p>Main Content</p>
<p>Main Content</p>
<p>Main Content</p>
<p>Main Content</p>
</DxcApplicationLayout.Main>
</DxcApplicationLayout>
</>
);

export const ApplicationLayoutWithArrowSidenav = () => (
<>
<DxcApplicationLayout>
<DxcApplicationLayout.SideNav mode="overlay" displayArrow>
<DxcSidenav.Title>Application layout with push sidenav</DxcSidenav.Title>
<p>SideNav Content</p>
<p>SideNav Content</p>
<p>SideNav Content</p>
<p>SideNav Content</p>
<p>SideNav Content</p>
</DxcApplicationLayout.SideNav>
<DxcApplicationLayout.Main>
<p>Main Content</p>
<p>Main Content</p>
<p>Main Content</p>
<p>Main Content</p>
</DxcApplicationLayout.Main>
</DxcApplicationLayout>
</>
);

export const ApplicationLayoutWithResponsiveSidenav = () => (
<>
<DxcApplicationLayout>
<DxcApplicationLayout visibilityToggleLabel="Example">
<DxcApplicationLayout.SideNav>
<DxcSidenav.Title>Application layout with push sidenav</DxcSidenav.Title>
<p>SideNav Content</p>
Expand All @@ -115,16 +72,19 @@ export const ApplicationLayoutWithResponsiveSidenav = () => (

ApplicationLayoutWithResponsiveSidenav.parameters = {
viewport: {
defaultViewport: 'pixel',
defaultViewport: "pixel",
},
};

export const ApplicationLayoutWithCustomHeader = () => (
<>
<DxcApplicationLayout>
<DxcApplicationLayout.Header> <p>Custom Header</p> </DxcApplicationLayout.Header>
<DxcApplicationLayout.Header>
{" "}
<p>Custom Header</p>{" "}
</DxcApplicationLayout.Header>
<DxcApplicationLayout.SideNav>
<DxcSidenav.Title>Application layout with push sidenav</DxcSidenav.Title>
<DxcSidenav.Title>Application layout with custom header</DxcSidenav.Title>
<p>SideNav Content</p>
<p>SideNav Content</p>
<p>SideNav Content</p>
Expand All @@ -145,7 +105,7 @@ export const ApplicationLayoutWithCustomFooter = () => (
<>
<DxcApplicationLayout>
<DxcApplicationLayout.SideNav>
<DxcSidenav.Title>Application layout with push sidenav</DxcSidenav.Title>
<DxcSidenav.Title>Application layout with custom footer</DxcSidenav.Title>
<p>SideNav Content</p>
<p>SideNav Content</p>
<p>SideNav Content</p>
Expand All @@ -158,14 +118,9 @@ export const ApplicationLayoutWithCustomFooter = () => (
<p>Main Content</p>
<p>Main Content</p>
</DxcApplicationLayout.Main>
<DxcApplicationLayout.Footer> <p>Custom Footer</p> </DxcApplicationLayout.Footer>
<DxcApplicationLayout.Footer>
<p>Custom Footer</p>
</DxcApplicationLayout.Footer>
</DxcApplicationLayout>
</>
);

export const ApplicationLayoutWithClosingSidenav = ApplicationLayoutWithArrowSidenav.bind({});
ApplicationLayoutWithClosingSidenav.play = async ({ canvasElement }) => {
const canvas = within(canvasElement);
const arrow = canvas.getByRole("button");
await userEvent.click(arrow);
};
Loading