Skip to content

[Major] Sidenav Content Style #1122

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 71 commits into from
Aug 5, 2022
Merged

[Major] Sidenav Content Style #1122

Show file tree
Hide file tree
Changes from 63 commits
Commits
Show all changes
71 commits
Select commit Hold shift + click to select a range
ecdfa93
Sidenav redesign and child components
Jialecl Jun 2, 2022
90111f8
Merge branch 'master' of https://github.com/dxc-technology/halstack-r…
Jialecl Jun 7, 2022
6de6f31
Merge branch 'master' of https://github.com/dxc-technology/halstack-r…
Jialecl Jun 7, 2022
cd40a08
Merge branch 'master' of https://github.com/dxc-technology/halstack-r…
Jialecl Jun 16, 2022
652660b
typing and ref
Jialecl Jun 17, 2022
8824eab
Merge branch 'jialecl-sidenav-redesign' of https://github.com/dxc-tec…
Jialecl Jun 17, 2022
e807493
Merge branch 'master' of https://github.com/dxc-technology/halstack-r…
Jialecl Jun 20, 2022
452c6d4
removed group selected
Jialecl Jun 20, 2022
94f298e
Sidenav only accepts title and section as children
Jialecl Jun 20, 2022
0bae677
Merge branch 'master' of https://github.com/dxc-technology/halstack-r…
Jialecl Jun 20, 2022
6e74908
Updating tests with new changes
Jialecl Jun 20, 2022
3ad8a57
Changing example in app
Jialecl Jun 21, 2022
7505aed
removing footer from example
Jialecl Jun 21, 2022
d5624e8
removing one of the examples from app
Jialecl Jun 21, 2022
0aa07f2
Merge branch 'master' into jialecl-sidenav-redesign
raquelarrojo Jun 21, 2022
bc7cc6e
changing sidenav height
Jialecl Jun 21, 2022
fc60eaf
Merge branch 'master' of https://github.com/dxc-technology/halstack-r…
Jialecl Jun 22, 2022
3e885f0
Merge branch 'master' of https://github.com/dxc-technology/halstack-r…
Jialecl Jun 22, 2022
209dfd8
Merge branch 'master' of https://github.com/dxc-technology/halstack-r…
Jialecl Jun 22, 2022
58da5c4
Adapting Sidenav to App layout
Jialecl Jun 22, 2022
1458876
Adding link onClick comment
Jialecl Jun 22, 2022
5c01e89
Adding default values
Jialecl Jun 22, 2022
48e0d99
Removing className and changing docs sidenav
Jialecl Jun 23, 2022
9255da9
Merge branch 'master' of https://github.com/dxc-technology/halstack-r…
Jialecl Jun 27, 2022
0ea659d
Changing docs examples + link hover + styled comp
Jialecl Jun 28, 2022
739b02b
Merge branch 'master' of https://github.com/dxc-technology/halstack-r…
Jialecl Jun 28, 2022
e969b4b
Merge branch 'master' of https://github.com/dxc-technology/halstack-r…
Jialecl Jun 29, 2022
cf20c75
Adding title prop and removing gap from section
Jialecl Jun 29, 2022
3498738
Adding title changes to tests
Jialecl Jun 30, 2022
2d41e99
Merge branch 'master' of https://github.com/dxc-technology/halstack-r…
Jialecl Jun 30, 2022
68c9da4
Adding group title hover
Jialecl Jun 30, 2022
3721eed
Merge branch 'master' of https://github.com/dxc-technology/halstack-r…
Jialecl Jun 30, 2022
d421dd9
Swaping the collapsable icon and typo+naming fix
Jialecl Jun 30, 2022
be32d97
Added more states to the group and the collapsable group
Jialecl Jul 1, 2022
d4222e1
Adding padding and DxcBleed
Jialecl Jul 4, 2022
6d7af30
Merge branch 'master' of https://github.com/dxc-technology/halstack-r…
Jialecl Jul 4, 2022
ae78347
Merge branch 'master' of https://github.com/dxc-technology/halstack-r…
Jialecl Jul 5, 2022
0ffbf3d
Merge branch 'master' into jialecl-sidenav-redesign
raquelarrojo Jul 6, 2022
a029843
Merge branch 'master' of https://github.com/dxc-technology/halstack-r…
Jialecl Jul 6, 2022
1e4b38f
Adapting sidenav to stack changes
Jialecl Jul 6, 2022
2075e3e
Merge branch 'jialecl-sidenav-redesign' of https://github.com/dxc-tec…
Jialecl Jul 6, 2022
ea7089f
Adapting the stack change in layout too
Jialecl Jul 6, 2022
9359b69
adding documentation to docs and changing icon to 18px
Jialecl Jul 6, 2022
66582b8
Merge branch 'master' into jialecl-sidenav-redesign
raquelarrojo Jul 7, 2022
51d3a4a
added new test case + some style values fix
Jialecl Jul 7, 2022
4d002ad
Merge branch 'jialecl-sidenav-redesign' of https://github.com/dxc-tec…
Jialecl Jul 7, 2022
1897a29
Merge api tables in one file + themeBuilder fix
Jialecl Jul 7, 2022
3225fb8
removing unused styled components
Jialecl Jul 8, 2022
52c5b54
Merge branch 'master' of https://github.com/dxc-technology/halstack-r…
Jialecl Jul 8, 2022
f7fbe9f
Merge branch 'master' into jialecl-sidenav-redesign
raquelarrojo Jul 8, 2022
46ed291
Removing Icon from title and fixing examples
Jialecl Jul 11, 2022
0e945d4
Merge branch 'jialecl-sidenav-redesign' of https://github.com/dxc-tec…
Jialecl Jul 11, 2022
21d425a
Merge branch 'master' of https://github.com/dxc-technology/halstack-r…
Jialecl Jul 11, 2022
ba7207e
Merge branch 'master' into jialecl-sidenav-redesign
raquelarrojo Jul 11, 2022
f7f24ec
Changing docs section title
Jialecl Jul 11, 2022
864752a
Merge branch 'jialecl-sidenav-redesign' of https://github.com/dxc-tec…
Jialecl Jul 11, 2022
4617455
Fixing next/link onClick functionality
Jialecl Jul 11, 2022
aaa3b13
removing icon from stories title
Jialecl Jul 13, 2022
fc2b30a
Merge branch 'master' of https://github.com/dxc-technology/halstack-r…
Jialecl Aug 3, 2022
1d9c4a5
adding flex component and onClick to sidenav
Jialecl Aug 3, 2022
2f65eb3
Merge branch 'master' of https://github.com/dxc-technology/halstack-r…
Jialecl Aug 4, 2022
9178b72
changing types in app layout
Jialecl Aug 4, 2022
851a817
removing title from sidenavContent in docs
Jialecl Aug 4, 2022
c3378e8
making some small type fixes and adding icons to visual tests
Jialecl Aug 4, 2022
48b7533
Merge branch 'master' of https://github.com/dxc-technology/halstack-r…
Jialecl Aug 4, 2022
f0c8901
removing unused import
Jialecl Aug 4, 2022
dd9c5af
Merge branch 'master' into jialecl-sidenav-redesign
Jialecl Aug 5, 2022
2f01098
Merge branch 'master' of https://github.com/dxc-technology/halstack-r…
Jialecl Aug 5, 2022
56bccf9
Adding bleed to title
Jialecl Aug 5, 2022
afb52ea
Updating Theme Builder
Aug 5, 2022
f380d3e
Updating Sidenav examples in the Theme Builder
Aug 5, 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
88 changes: 42 additions & 46 deletions app/src/pages/Sidenav.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,59 +1,55 @@
import React from "react";
import {
DxcSidenav,
DxcFooter,
HalstackProvider,
} from "@dxc-technology/halstack-react";
import { DxcSidenav } from "@dxc-technology/halstack-react";

const colors = {
sidenav: {
baseColor: "#FABADA",
},
const titleWrapper = () => {
return <DxcSidenav.Title>My sidenav</DxcSidenav.Title>;
};

function App() {
return (
<div>
<div className="test-case" id="children">
<DxcSidenav padding="medium">
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
</DxcSidenav>
<DxcFooter />
</div>

<div className="test-case" id="custom-colors">
<h4>Custom Sidenav</h4>
<HalstackProvider theme={colors}>
<DxcSidenav padding="medium">
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<div className="test-case" id="sidenav-menu">
<DxcSidenav title={titleWrapper}>
<DxcSidenav.Section>
<p>Lorem ipsum</p>
</DxcSidenav>
<DxcFooter />
</HalstackProvider>
</div>
<DxcSidenav.Link href="#">Lorem ipsum</DxcSidenav.Link>
<DxcSidenav.Link href="#">Lorem ipsum</DxcSidenav.Link>
<DxcSidenav.Link href="#">Lorem ipsum</DxcSidenav.Link>
<DxcSidenav.Link href="#">Lorem ipsum</DxcSidenav.Link>
<DxcSidenav.Group title="Group title" collapsable>
<DxcSidenav.Link href="#">Lorem ipsum</DxcSidenav.Link>
<DxcSidenav.Link href="#">Lorem ipsum</DxcSidenav.Link>
<DxcSidenav.Link href="#">Lorem ipsum</DxcSidenav.Link>
<DxcSidenav.Link href="#">Lorem ipsum</DxcSidenav.Link>
<DxcSidenav.Link href="#">Lorem ipsum</DxcSidenav.Link>
</DxcSidenav.Group>
<DxcSidenav.Group title="Group title" collapsable>
<DxcSidenav.Link href="#">Lorem ipsum</DxcSidenav.Link>
<DxcSidenav.Link href="#">Lorem ipsum</DxcSidenav.Link>
<DxcSidenav.Link href="#">Lorem ipsum</DxcSidenav.Link>
<DxcSidenav.Link href="#">Lorem ipsum</DxcSidenav.Link>
<DxcSidenav.Link href="#">Lorem ipsum</DxcSidenav.Link>
</DxcSidenav.Group>
</DxcSidenav.Section>

<div className="test-case" id="sidenav-menu">
<h4>Compound components Sidenav</h4>
<DxcSidenav padding="medium">
<DxcSidenav.Title>My sidenav</DxcSidenav.Title>
<p>This is a sidenav.</p>
<DxcSidenav.Subtitle>My subtitle</DxcSidenav.Subtitle>
<DxcSidenav.Link href="#">Home</DxcSidenav.Link>
<DxcSidenav.Link href="/test">Test</DxcSidenav.Link>
<DxcSidenav.Subtitle>My subtitle2</DxcSidenav.Subtitle>
<DxcSidenav.Link href="#">Home2</DxcSidenav.Link>
<DxcSidenav.Link onClick={() => console.log("click")}>
Test2
</DxcSidenav.Link>
<p>This is a sidenav2.</p>
<DxcSidenav.Section>
<p>Lorem ipsum</p>
<DxcSidenav.Group title="Group title">
<DxcSidenav.Link href="#">Lorem ipsum</DxcSidenav.Link>
<DxcSidenav.Link href="#">Lorem ipsum</DxcSidenav.Link>
<DxcSidenav.Link href="#">Lorem ipsum</DxcSidenav.Link>
<DxcSidenav.Link href="#">Lorem ipsum</DxcSidenav.Link>
<DxcSidenav.Link href="#">Lorem ipsum</DxcSidenav.Link>
</DxcSidenav.Group>
<DxcSidenav.Group title="Group title" collapsable>
<DxcSidenav.Link href="#">Lorem ipsum</DxcSidenav.Link>
<DxcSidenav.Link href="#">Lorem ipsum</DxcSidenav.Link>
<DxcSidenav.Link href="#">Lorem ipsum</DxcSidenav.Link>
<DxcSidenav.Link href="#">Lorem ipsum</DxcSidenav.Link>
<DxcSidenav.Link href="#">Lorem ipsum</DxcSidenav.Link>
</DxcSidenav.Group>
</DxcSidenav.Section>
</DxcSidenav>
<DxcFooter />
</div>
</div>
);
Expand Down
116 changes: 35 additions & 81 deletions docs/src/pages/components/Components.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import {
DxcFooter,
DxcApplicationLayout,
DxcHeading,
DxcSidenav,
} from "@dxc-technology/halstack-react";
import paths from "./paths.js";
import reactIcon from "../../common/react-icon.png";
Expand Down Expand Up @@ -72,40 +73,31 @@ const SidenavContent = () => {

return (
<>
<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}
<DxcSidenav.Group key={types[type]} title={types[type]}>
{paths
.filter((path) => path.type === types[type])
.sort((path1, path2) => (path1.name < path2.name ? -1 : 1))
.map((path) => (
<>
<Link
to={`/components/${path.path}`}
onClick={handleLinkOnClick}
component={DxcSidenav.Link}
selected={location.pathname === `/components/${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)
}
/>
)}
</NavLink>
))}
</ComponentsList>
</React.Fragment>
{path.name}
</Link>
{path.status === "deprecated" && (
<StatusTag
status={
path.status.charAt(0).toUpperCase() + path.status.slice(1)
}
/>
)}
</>
))}
</DxcSidenav.Group>
))}
</>
);
Expand All @@ -116,8 +108,17 @@ const Components = () => (
<DxcApplicationLayout.Header>
<Header />
</DxcApplicationLayout.Header>
<DxcApplicationLayout.SideNav padding="large">
<SidenavContent />
<DxcApplicationLayout.SideNav
title={
<DxcSidenav.Title>
React
<ReactLogo src={reactIcon} alt="React Logo" />
</DxcSidenav.Title>
}
>
<DxcSidenav.Section>
<SidenavContent />
</DxcSidenav.Section>
</DxcApplicationLayout.SideNav>
<DxcApplicationLayout.Main>
<MainContent>
Expand Down Expand Up @@ -170,58 +171,11 @@ const MainContent = styled.div`
min-height: 100vh;
`;

const Title = styled.h1`
font-size: 24px;
display: flex;
align-items: center;
color: #646464;
font-weight: normal;
line-height: 18px;
`;

const ReactLogo = styled.img`
max-width: 28px;
margin-left: 8px;
`;

const ComponentType = styled.div`
text-transform: uppercase;
color: gray;
font-size: 14px;
letter-spacing: 1px;
margin-bottom: 5px;
`;

const ComponentsList = styled.div`
margin-left: 10px;
margin-bottom: 30px;
display: flex;
flex-direction: column;
`;

const NavLink = styled.div`
display: flex;
align-items: center;
gap: 0.5rem;
padding: 4px 0px;
& a {
font-size: 14px;
text-decoration: none;
font-weight: ${({ isActive }) => (isActive && "bold") || "normal"};
color: ${({ isActive }) => (isActive && "black") || "gray"};
::before {
display: table;
content: "";
margin-bottom: 0.21875rem;
}
::after {
display: table;
content: "";
margin-top: 0.21875rem;
}
}
`;

const ComponentsLinksContainer = styled.div`
display: flex;
flex-direction: row;
Expand Down
38 changes: 31 additions & 7 deletions docs/src/pages/components/cdk-components/sidenav/Sidenav.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,11 @@ import ComponentDoc from "../../common/ComponentDoc";
import Section from "../../common/Section";
import Example from "../../common/Example";
import ComponentHeader from "../../common/ComponentHeader";
import SidenavPropsTable from "./api.jsx";
import SidenavLinkPropsTable from "./linkapi.jsx";
import SidenavPropsTable, {
SidenavTitlePropsTable,
SidenavGroupPropsTable,
SidenavLinkPropsTable,
} from "./api.jsx";
import { DxcHeading, DxcLink } from "@dxc-technology/halstack-react";
import defaultSidenav from "./examples/default";
import compoundSidenav from "./examples/compound";
Expand All @@ -18,7 +21,11 @@ function Sidenav() {
<SidenavPropsTable />
</Section>
<Section>
<DxcHeading level={3} text="Children" margin={{ bottom: "small" }} />
<DxcHeading
level={3}
text="Compound components"
margin={{ bottom: "small" }}
/>
<p>
This component includes different compound components that are
customized following the{" "}
Expand All @@ -28,10 +35,27 @@ function Sidenav() {
.
</p>
<DxcHeading text="DxcSidenav.Title" level={4} weight="bold" />
<p>The content will be showed as the main title in the sidenav.</p>
<DxcHeading text="DxcSidenav.Subtitle" level={4} weight="bold" />
<p>The content will be showed as a subtitle in the sidenav.</p>
<DxcHeading text="DxcSidenav.Link" level={4} weight="bold" />
<p>
The content will be showed as the main title in the sidenav, it should
be used only in the sidenav title prop.
</p>
<SidenavTitlePropsTable />
<DxcHeading
text="DxcSidenav.Section"
level={4}
weight="bold"
margin={{ top: "small" }}
/>
<p>The content will be showed as a section the sidenav.</p>
<DxcHeading text="DxcSidenav.Group" level={4} weight="bold" />
<p>A group of Links, recommennded to use inside the section.</p>
<SidenavGroupPropsTable />
<DxcHeading
text="DxcSidenav.Link"
level={4}
weight="bold"
margin={{ top: "small" }}
/>
<p>Customized link that allows the navigation.</p>
<DxcHeading
text="Props"
Expand Down
Loading