Skip to content

Commit 2cbfa52

Browse files
sudhanshutechsudhanshutech
authored
Merge pull request #6011 from Vidit-Kushwaha/add/paper
Add Paper component to the sistent components page
2 parents 8e565fc + 72e5102 commit 2cbfa52

File tree

9 files changed

+657
-0
lines changed

9 files changed

+657
-0
lines changed

‎src/components/SistentNavigation/content.js

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,4 +43,19 @@ export const content = [
4343
link: "/projects/sistent/components/text-input/code",
4444
text: "Text Input",
4545
},
46+
{
47+
id: 15,
48+
link: "/projects/sistent/components/paper",
49+
text: "Paper",
50+
},
51+
{
52+
id: 16,
53+
link: "/projects/sistent/components/paper/guidance",
54+
text: "Paper",
55+
},
56+
{
57+
id: 17,
58+
link: "/projects/sistent/components/paper/code",
59+
text: "Paper",
60+
},
4661
];

‎src/pages/projects/sistent/components/paper/code.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 PaperCode from "../../../../../sections/Projects/Sistent/components/paper/code";
3+
4+
const PaperCodePage = () => {
5+
return <PaperCode />;
6+
};
7+
8+
export default PaperCodePage;

‎src/pages/projects/sistent/components/paper/guidance.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 PaperGuidance from "../../../../../sections/Projects/Sistent/components/paper/guidance";
3+
4+
const PaperGuidancePage = () => {
5+
return <PaperGuidance />;
6+
};
7+
8+
export default PaperGuidancePage;

‎src/pages/projects/sistent/components/paper/index.js

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

‎src/sections/Projects/Sistent/components/index.js

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,13 @@ const componentsData = [
3030
"A text input is made up of multiple elements that combine to form a component that helps users to read, write, and edit text in an interface.",
3131
url: "/projects/sistent/components/modal",
3232
},
33+
{
34+
id: 4,
35+
name: "Paper",
36+
description:
37+
"The Paper component offers an elevated surface with shadow effects, following Material Design’s elevation system.",
38+
url: "/projects/sistent/components/paper",
39+
},
3340
];
3441

3542
const SistentComponents = () => {

‎src/sections/Projects/Sistent/components/paper/code.js

Lines changed: 203 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,203 @@
1+
import React from "react";
2+
import { navigate } from "gatsby";
3+
import { useLocation } from "@reach/router";
4+
import TabButton from "../../../../../reusecore/Button";
5+
import { SistentLayout } from "../../sistent-layout";
6+
import { SistentThemeProvider, Paper } from "@layer5/sistent";
7+
import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode";
8+
import { CodeBlock } from "../button/code-block";
9+
10+
const codes = [
11+
`<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
12+
<Paper elevation={1} style={{ padding: "16px" }}>
13+
Default Paper with Elevation 1
14+
</Paper>
15+
</SistentThemeProvider>`,
16+
`<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
17+
<Paper
18+
elevation={0}
19+
style={{ padding: "16px" }}
20+
>
21+
Elevation 0 (No shadow)
22+
</Paper>
23+
<Paper
24+
elevation={3}
25+
style={{ padding: "16px" }}
26+
>
27+
Elevation 3
28+
</Paper>
29+
<Paper
30+
elevation={8}
31+
style={{ padding: "16px" }}
32+
>
33+
Elevation 8
34+
</Paper>
35+
</SistentThemeProvider>`,
36+
`<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
37+
<Paper
38+
variant="elevation"
39+
style={{ padding: "16px" }}
40+
>
41+
Elevation Variant (Default)
42+
</Paper>
43+
<Paper
44+
variant="outlined"
45+
style={{ padding: "16px", borderColor: "#ccc" }}
46+
>
47+
Outlined Variant (No shadow)
48+
</Paper>
49+
</SistentThemeProvider>`,
50+
`<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
51+
<Paper
52+
square={false}
53+
style={{ padding: "16px" }}
54+
>
55+
Rounded Corners (Default)
56+
</Paper>
57+
<Paper square style={{ padding: "16px" }}>
58+
Square Corners
59+
</Paper>
60+
</SistentThemeProvider>`,
61+
];
62+
const PaperCode = () => {
63+
const location = useLocation();
64+
const { isDark } = useStyledDarkMode();
65+
66+
return (
67+
<SistentLayout title="Paper">
68+
<div className="content">
69+
<a id="Identity">
70+
<h2>Paper</h2>
71+
</a>
72+
<p>
73+
The Paper component provides an elevated surface for displaying
74+
content. It mimics the behavior of real-world surfaces with shadow
75+
effects, supporting Material Design's elevation system.
76+
</p>
77+
78+
<div className="filterBtns">
79+
<TabButton
80+
className={
81+
location.pathname === "/projects/sistent/components/paper"
82+
? "active"
83+
: ""
84+
}
85+
onClick={() => navigate("/projects/sistent/components/paper")}
86+
title="Overview"
87+
/>
88+
<TabButton
89+
className={
90+
location.pathname ===
91+
"/projects/sistent/components/paper/guidance"
92+
? "active"
93+
: ""
94+
}
95+
onClick={() =>
96+
navigate("/projects/sistent/components/paper/guidance")
97+
}
98+
title="Guidance"
99+
/>
100+
<TabButton
101+
className={
102+
location.pathname === "/projects/sistent/components/paper/code"
103+
? "active"
104+
: ""
105+
}
106+
onClick={() => navigate("/projects/sistent/components/paper/code")}
107+
title="Code"
108+
/>
109+
</div>
110+
<div className="main-content">
111+
<a id="Basic Example">
112+
<h3>Basic Example</h3>
113+
</a>
114+
<p>
115+
Here’s a simple example of a Paper component with default elevation.
116+
This creates a surface with a subtle shadow.
117+
</p>
118+
<div className="showcase">
119+
<div className="items">
120+
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
121+
<Paper elevation={1} style={{ padding: "16px" }}>
122+
Default Paper with Elevation 1
123+
</Paper>
124+
</SistentThemeProvider>
125+
</div>
126+
<CodeBlock name="basic-example" code={codes[0]} />
127+
</div>
128+
129+
<a id="Elevation Example">
130+
<h3>Elevation Example</h3>
131+
</a>
132+
<p>
133+
The <code>elevation</code> prop controls the shadow depth. Use
134+
values from 0 to 24 to create varying levels of elevation:
135+
</p>
136+
<div className="showcase">
137+
<div className="items">
138+
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
139+
<Paper elevation={0} style={{ padding: "16px" }}>
140+
Elevation 0 (No shadow)
141+
</Paper>
142+
<Paper elevation={3} style={{ padding: "16px" }}>
143+
Elevation 3
144+
</Paper>
145+
<Paper elevation={8} style={{ padding: "16px" }}>
146+
Elevation 8
147+
</Paper>
148+
</SistentThemeProvider>
149+
</div>
150+
<CodeBlock name="elevation-example" code={codes[1]} />
151+
</div>
152+
<a id="Variant Example">
153+
<h3>Variant Example</h3>
154+
</a>
155+
<p>
156+
The Paper component supports two variants: <code>elevation</code>{" "}
157+
(default) and <code>outlined</code>. The outlined variant removes
158+
shadows and adds a border instead:
159+
</p>
160+
<div className="showcase">
161+
<div className="items">
162+
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
163+
<Paper variant="elevation" style={{ padding: "16px" }}>
164+
Elevation Variant (Default)
165+
</Paper>
166+
<Paper
167+
variant="outlined"
168+
style={{ padding: "16px", borderColor: "#ccc" }}
169+
>
170+
Outlined Variant (No shadow)
171+
</Paper>
172+
</SistentThemeProvider>
173+
</div>
174+
<CodeBlock name="variant-example" code={codes[2]} />
175+
</div>
176+
177+
<a id="Corners Example">
178+
<h3>Square and Rounded Corners</h3>
179+
</a>
180+
<p>
181+
By default, the Paper component has rounded corners. You can make it
182+
square by setting the <code>square</code> prop to <code>true</code>.
183+
</p>
184+
<div className="showcase">
185+
<div className="items">
186+
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
187+
<Paper square={false} style={{ padding: "16px" }}>
188+
Rounded Corners (Default)
189+
</Paper>
190+
<Paper square style={{ padding: "16px" }}>
191+
Square Corners
192+
</Paper>
193+
</SistentThemeProvider>
194+
</div>
195+
<CodeBlock name="corners-example" code={codes[3]} />
196+
</div>
197+
</div>
198+
</div>
199+
</SistentLayout>
200+
);
201+
};
202+
203+
export default PaperCode;

‎src/sections/Projects/Sistent/components/paper/guidance.js

Lines changed: 121 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,121 @@
1+
import React from "react";
2+
import { SistentLayout } from "../../sistent-layout";
3+
import TabButton from "../../../../../reusecore/Button";
4+
import { navigate } from "gatsby";
5+
import { useLocation } from "@reach/router";
6+
7+
const PaperGuidance = () => {
8+
const location = useLocation();
9+
10+
return (
11+
<SistentLayout title="Paper">
12+
<div className="content">
13+
<a id="Identity">
14+
<h2>Paper</h2>
15+
</a>
16+
<p>
17+
The Paper component provides an elevated surface for displaying
18+
content. It mimics the behavior of real-world surfaces with shadow
19+
effects, supporting Material Design's elevation system.
20+
</p>
21+
22+
<div className="filterBtns">
23+
<TabButton
24+
className={
25+
location.pathname === "/projects/sistent/components/paper"
26+
? "active"
27+
: ""
28+
}
29+
onClick={() => navigate("/projects/sistent/components/paper")}
30+
title="Overview"
31+
/>
32+
<TabButton
33+
className={
34+
location.pathname ===
35+
"/projects/sistent/components/paper/guidance"
36+
? "active"
37+
: ""
38+
}
39+
onClick={() =>
40+
navigate("/projects/sistent/components/paper/guidance")
41+
}
42+
title="Guidance"
43+
/>
44+
<TabButton
45+
className={
46+
location.pathname === "/projects/sistent/components/paper/code"
47+
? "active"
48+
: ""
49+
}
50+
onClick={() => navigate("/projects/sistent/components/paper/code")}
51+
title="Code"
52+
/>
53+
</div>
54+
<div className="main-content">
55+
<a id="Usage Guidelines">
56+
<h2>Usage Guidelines</h2>
57+
</a>
58+
<p>
59+
When using the Paper component, follow these guidelines to ensure
60+
consistency and usability across your designs.
61+
</p>
62+
63+
<a id="Elevation Guidelines">
64+
<h3>Elevation Guidelines</h3>
65+
</a>
66+
<ul>
67+
<li> Use lower elevations (0-3) for subtle surfaces such as cards and
68+
small sections.</li>
69+
<li>Higher elevations (8-24) are best for modals or
70+
key areas that need emphasis.</li>
71+
<li>Be mindful of the dark mode
72+
behavior, where higher elevations result in a lighter background.</li>
73+
</ul>
74+
75+
<a id="Variant Guidelines">
76+
<h3>Variant Guidelines</h3>
77+
</a>
78+
<ul>
79+
<li>
80+
Use the <code>outlined</code> variant for areas where shadows
81+
might feel visually overwhelming.
82+
</li>
83+
<li>
84+
Stick to the default elevation variant for core components
85+
requiring shadow depth.
86+
</li>
87+
</ul>
88+
<a id="Corners Guidelines">
89+
<h3>Corners Guidelines</h3>
90+
</a>
91+
<ul>
92+
<li>
93+
Rounded corners are more user-friendly and should be preferred
94+
unless a strict design requires square corners.
95+
</li>
96+
<li>
97+
Use square corners sparingly, mostly for components meant to
98+
indicate precision or alignment with grid systems.
99+
</li>
100+
</ul>
101+
102+
<a id="Accessibility">
103+
<h2>Accessibility</h2>
104+
</a>
105+
<ul>
106+
<li>
107+
Make sure elevated surfaces have sufficient contrast with the
108+
background.
109+
</li>
110+
<li>
111+
Use clear and concise labels or headings for content within Paper
112+
components to enhance accessibility.
113+
</li>
114+
</ul>
115+
</div>
116+
</div>
117+
</SistentLayout>
118+
);
119+
};
120+
121+
export default PaperGuidance;

0 commit comments

Comments
 (0)