Skip to content

Commit 90fc10e

Browse files
Namanv0509Namanv0509
authored
Merge pull request #6826 from ARYANSHAH1567/aryanshah/sistent_getting_started
Enhaced The Introduction page for Sistent
2 parents b82a74f + 62ea7ad commit 90fc10e

13 files changed

Lines changed: 1345 additions & 174 deletions

File tree

‎src/components/SistentNavigation/content.js‎

Lines changed: 29 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,41 @@
11
export const content = [
2-
// About
3-
{ id: 0, link: "/projects/sistent/about", text: "About Sistent" },
2+
// Getting Started
3+
{ id: 0, link: "/projects/sistent/getting-started/about", text: "About" },
4+
{ id: 1, link: "/projects/sistent/getting-started/installation", text: "Installation" },
5+
{ id: 2, link: "/projects/sistent/getting-started/usage", text: "Usage" },
6+
{ id: 3, link: "/projects/sistent/getting-started/tokens", text: "Tokens" },
47

58
// Identity
6-
{ id: 1, link: "/projects/sistent/identity/color", text: "Colors" },
7-
{ id: 2, link: "/projects/sistent/identity/color/guidance", text: "Colors" },
8-
{ id: 3, link: "/projects/sistent/identity/color/code", text: "Colors" },
9-
{ id: 4, link: "/projects/sistent/identity/spacing", text: "Spacing" },
10-
{ id: 5, link: "/projects/sistent/identity/spacing/guidance", text: "Spacing" },
11-
{ id: 6, link: "/projects/sistent/identity/spacing/code", text: "Spacing" },
12-
{ id: 7, link: "/projects/sistent/identity/typography", text: "Typography" },
13-
{ id: 8, link: "/projects/sistent/identity/typography/guidance", text: "Typography" },
14-
{ id: 9, link: "/projects/sistent/identity/typography/code", text: "Typography" },
9+
{ id: 4, link: "/projects/sistent/identity/color", text: "Colors" },
10+
{ id: 5, link: "/projects/sistent/identity/color/guidance", text: "Colors" },
11+
{ id: 6, link: "/projects/sistent/identity/color/code", text: "Colors" },
12+
{ id: 7, link: "/projects/sistent/identity/spacing", text: "Spacing" },
13+
{ id: 8, link: "/projects/sistent/identity/spacing/guidance", text: "Spacing" },
14+
{ id: 9, link: "/projects/sistent/identity/spacing/code", text: "Spacing" },
15+
{ id: 10, link: "/projects/sistent/identity/typography", text: "Typography" },
16+
{ id: 11, link: "/projects/sistent/identity/typography/guidance", text: "Typography" },
17+
{ id: 12, link: "/projects/sistent/identity/typography/code", text: "Typography" },
1518

1619
// Components
17-
{ id: 10, link: "/projects/sistent/components/backdrop", text: "Backdrop" },
18-
{ id: 11, link: "/projects/sistent/components/backdrop/guidance", text: "Backdrop" },
19-
{ id: 12, link: "/projects/sistent/components/backdrop/code", text: "Backdrop" },
20+
{ id: 13, link: "/projects/sistent/components/backdrop", text: "Backdrop" },
21+
{ id: 14, link: "/projects/sistent/components/backdrop/guidance", text: "Backdrop" },
22+
{ id: 15, link: "/projects/sistent/components/backdrop/code", text: "Backdrop" },
2023

21-
{ id: 13, link: "/projects/sistent/components/badge", text: "Badge" },
22-
{ id: 14, link: "/projects/sistent/components/badge/guidance", text: "Badge" },
23-
{ id: 15, link: "/projects/sistent/components/badge/code", text: "Badge" },
24+
{ id: 16, link: "/projects/sistent/components/badge", text: "Badge" },
25+
{ id: 17, link: "/projects/sistent/components/badge/guidance", text: "Badge" },
26+
{ id: 18, link: "/projects/sistent/components/badge/code", text: "Badge" },
2427

25-
{ id: 16, link: "/projects/sistent/components/box", text: "Box" },
26-
{ id: 17, link: "/projects/sistent/components/box/guidance", text: "Box" },
27-
{ id: 18, link: "/projects/sistent/components/box/code", text: "Box" },
28+
{ id: 19, link: "/projects/sistent/components/box", text: "Box" },
29+
{ id: 20, link: "/projects/sistent/components/box/guidance", text: "Box" },
30+
{ id: 21, link: "/projects/sistent/components/box/code", text: "Box" },
2831

29-
{ id: 19, link: "/projects/sistent/components/button", text: "Button" },
30-
{ id: 20, link: "/projects/sistent/components/button/guidance", text: "Button" },
31-
{ id: 21, link: "/projects/sistent/components/button/code", text: "Button" },
32+
{ id: 22, link: "/projects/sistent/components/button", text: "Button" },
33+
{ id: 23, link: "/projects/sistent/components/button/guidance", text: "Button" },
34+
{ id: 24, link: "/projects/sistent/components/button/code", text: "Button" },
3235

33-
{ id: 22, link: "/projects/sistent/components/button-group", text: "Button Group" },
34-
{ id: 23, link: "/projects/sistent/components/button-group/guidance", text: "Button Group" },
35-
{ id: 24, link: "/projects/sistent/components/button-group/code", text: "Button Group" },
36+
{ id: 25, link: "/projects/sistent/components/button-group", text: "Button Group" },
37+
{ id: 26, link: "/projects/sistent/components/button-group/guidance", text: "Button Group" },
38+
{ id: 27, link: "/projects/sistent/components/button-group/code", text: "Button Group" },
3639

3740
{ id: 25, link: "/projects/sistent/components/chip", text: "Chip" },
3841
{ id: 26, link: "/projects/sistent/components/chip/guidance", text: "Chip" },

‎src/components/SistentNavigation/index.js‎

Lines changed: 73 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,10 @@ import { useLocation } from "@reach/router";
1212
const TOC = () => {
1313
const [expand, setExpand] = useState(false);
1414
const location = useLocation();
15-
const [expandIdentity, setExpandIdentity] = useState(
15+
const [expandGettingStarted, setExpandGettingStarted] = useState(
16+
location.pathname.includes("/getting-started")
17+
);
18+
const [expandIdenity, setExpandIdentity] = useState(
1619
location.pathname.includes("/identity")
1720
);
1821
const [expandComponent, setExpandComponent] = useState(
@@ -52,13 +55,74 @@ const TOC = () => {
5255
<div className="toc-list">
5356
<ul className={`toc-ul ${expand ? "toc-ul-open" : ""}`}>
5457
<li>
55-
<Link
56-
to="/projects/sistent/about"
57-
className="toc-sub-heading toc-sub-inline"
58-
activeClassName="active"
59-
>
60-
About
61-
</Link>
58+
<div>
59+
<li
60+
className="toc-sub-heading getting-started"
61+
onClick={() => setExpandGettingStarted((prev) => !prev)}
62+
>
63+
Getting Started
64+
{expandGettingStarted ?
65+
<IoIosArrowDown style={{ zIndex: 2 }} /> :
66+
<IoIosArrowForward style={{ zIndex: 2 }} />
67+
}
68+
</li>
69+
{expandGettingStarted && (
70+
<div className="getting-started-sublinks">
71+
<li>
72+
<Link
73+
to="/projects/sistent/getting-started/about"
74+
className={`toc-sub-heading toc-sub-inline getting-started-item ${
75+
location.pathname.includes("/projects/sistent/getting-started/about")
76+
? "active"
77+
: ""
78+
}`}
79+
activeClassName="active"
80+
>
81+
About
82+
</Link>
83+
</li>
84+
<li>
85+
<Link
86+
to="/projects/sistent/getting-started/installation"
87+
className={`toc-sub-heading toc-sub-inline getting-started-item ${
88+
location.pathname.includes("/projects/sistent/getting-started/installation")
89+
? "active"
90+
: ""
91+
}`}
92+
activeClassName="active"
93+
>
94+
Installation
95+
</Link>
96+
</li>
97+
<li>
98+
<Link
99+
to="/projects/sistent/getting-started/usage"
100+
className={`toc-sub-heading toc-sub-inline getting-started-item ${
101+
location.pathname.includes("/projects/sistent/getting-started/usage")
102+
? "active"
103+
: ""
104+
}`}
105+
activeClassName="active"
106+
>
107+
Usage
108+
</Link>
109+
</li>
110+
<li>
111+
<Link
112+
to="/projects/sistent/getting-started/tokens"
113+
className={`toc-sub-heading toc-sub-inline getting-started-item ${
114+
location.pathname.includes("/projects/sistent/getting-started/tokens")
115+
? "active"
116+
: ""
117+
}`}
118+
activeClassName="active"
119+
>
120+
Tokens
121+
</Link>
122+
</li>
123+
</div>
124+
)}
125+
</div>
62126
</li>
63127
<li>
64128
<div>
@@ -163,4 +227,4 @@ const TOC = () => {
163227
);
164228
};
165229

166-
export default TOC;
230+
export default TOC;

‎src/components/SistentNavigation/toc.style.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -135,7 +135,7 @@ const TOCWrapper = styled.div`
135135
background-color: transparent;
136136
}
137137
138-
.identity, .components {
138+
.identity, .components, .getting-started {
139139
display: flex;
140140
width: 100%;
141141
justify-content: space-between;

src/pages/projects/sistent/about.js renamed to src/pages/projects/sistent/getting-started/about/index.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from "react";
2-
import SistentAbout from "../../../sections/Projects/Sistent/about";
2+
import SistentAbout from "../../../../../sections/Projects/Sistent/getting-started/about";
33

44
const SistentAboutPage = () => {
55
return <SistentAbout />;

‎src/pages/projects/sistent/getting-started/installation/index.js‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import React from "react";
2+
import SistentInstallation from "../../../../../sections/Projects/Sistent/getting-started/installation";
3+
4+
const SistentInstallationPage = () => {
5+
return <SistentInstallation />;
6+
};
7+
8+
export default SistentInstallationPage;

‎src/pages/projects/sistent/getting-started/tokens/index.js‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import React from "react";
2+
import SistentTokens from "../../../../../sections/Projects/Sistent/getting-started/tokens";
3+
4+
const SistentTokensPage = () => {
5+
return <SistentTokens />;
6+
};
7+
8+
export default SistentTokensPage;

‎src/pages/projects/sistent/getting-started/usage/index.js‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import React from "react";
2+
import SistentUsage from "../../../../../sections/Projects/Sistent/getting-started/usage";
3+
4+
const SistentUsagePage = () => {
5+
return <SistentUsage />;
6+
};
7+
8+
export default SistentUsagePage;

‎src/sections/Projects/Sistent/about.js‎

Lines changed: 0 additions & 135 deletions
This file was deleted.

0 commit comments

Comments
 (0)