Skip to content

Commit 7e640de

Browse files
vr-varadvr-varad
authored
Merge branch 'master' into aryanshah/add_maintainer
2 parents 68937de + 49405b6 commit 7e640de

5 files changed

Lines changed: 537 additions & 30 deletions

File tree

‎src/components/SistentNavigation/content.js‎

Lines changed: 34 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -30,44 +30,48 @@ export const content = [
3030
{ id: 20, link: "/projects/sistent/components/button-group/guidance", text: "Button Group" },
3131
{ id: 21, link: "/projects/sistent/components/button-group/code", text: "Button Group" },
3232

33-
{ id: 22, link: "/projects/sistent/components/container", text: "Container" },
34-
{ id: 23, link: "/projects/sistent/components/container/guidance", text: "Container" },
35-
{ id: 24, link: "/projects/sistent/components/container/code", text: "Container" },
33+
{ id: 22, link: "/projects/sistent/components/circularprogress", text: "Circular Progress" },
34+
{ id: 23, link: "/projects/sistent/components/circularprogress/guidance", text: "Circular Progress" },
35+
{ id: 24, link: "/projects/sistent/components/circularprogress/code", text: "Circular Progress" },
3636

37-
{ id: 25, link: "/projects/sistent/components/icons", text: "Icons" },
37+
{ id: 25, link: "/projects/sistent/components/container", text: "Container" },
38+
{ id: 26, link: "/projects/sistent/components/container/guidance", text: "Container" },
39+
{ id: 27, link: "/projects/sistent/components/container/code", text: "Container" },
3840

39-
{ id: 26, link: "/projects/sistent/components/link", text: "Link" },
40-
{ id: 27, link: "/projects/sistent/components/link/guidance", text: "Link" },
41-
{ id: 28, link: "/projects/sistent/components/link/code", text: "Link" },
41+
{ id: 28, link: "/projects/sistent/components/icons", text: "Icons" },
4242

43-
{ id: 29, link: "/projects/sistent/components/modal", text: "Modal" },
44-
{ id: 30, link: "/projects/sistent/components/modal/code", text: "Modal" },
43+
{ id: 29, link: "/projects/sistent/components/link", text: "Link" },
44+
{ id: 30, link: "/projects/sistent/components/link/guidance", text: "Link" },
45+
{ id: 31, link: "/projects/sistent/components/link/code", text: "Link" },
4546

46-
{ id: 31, link: "/projects/sistent/components/pagination", text: "Pagination" },
47-
{ id: 32, link: "/projects/sistent/components/pagination/guidance", text: "Pagination" },
48-
{ id: 33, link: "/projects/sistent/components/pagination/code", text: "Pagination" },
47+
{ id: 32, link: "/projects/sistent/components/modal", text: "Modal" },
48+
{ id: 33, link: "/projects/sistent/components/modal/code", text: "Modal" },
4949

50-
{ id: 34, link: "/projects/sistent/components/paper", text: "Paper" },
51-
{ id: 35, link: "/projects/sistent/components/paper/guidance", text: "Paper" },
52-
{ id: 36, link: "/projects/sistent/components/paper/code", text: "Paper" },
50+
{ id: 34, link: "/projects/sistent/components/pagination", text: "Pagination" },
51+
{ id: 35, link: "/projects/sistent/components/pagination/guidance", text: "Pagination" },
52+
{ id: 36, link: "/projects/sistent/components/pagination/code", text: "Pagination" },
5353

54-
{ id: 37, link: "/projects/sistent/components/popper", text: "Popper" },
55-
{ id: 38, link: "/projects/sistent/components/popper/guidance", text: "Popper" },
56-
{ id: 39, link: "/projects/sistent/components/popper/code", text: "Popper" },
54+
{ id: 37, link: "/projects/sistent/components/paper", text: "Paper" },
55+
{ id: 38, link: "/projects/sistent/components/paper/guidance", text: "Paper" },
56+
{ id: 39, link: "/projects/sistent/components/paper/code", text: "Paper" },
5757

58-
{ id: 40, link: "/projects/sistent/components/select", text: "Select" },
59-
{ id: 41, link: "/projects/sistent/components/select/guidance", text: "Select" },
60-
{ id: 42, link: "/projects/sistent/components/select/code", text: "Select" },
58+
{ id: 40, link: "/projects/sistent/components/popper", text: "Popper" },
59+
{ id: 41, link: "/projects/sistent/components/popper/guidance", text: "Popper" },
60+
{ id: 42, link: "/projects/sistent/components/popper/code", text: "Popper" },
6161

62-
{ id: 43, link: "/projects/sistent/components/text-field", text: "Text Field" },
63-
{ id: 44, link: "/projects/sistent/components/text-field/guidance", text: "Text Field" },
64-
{ id: 45, link: "/projects/sistent/components/text-field/code", text: "Text Field" },
62+
{ id: 43, link: "/projects/sistent/components/select", text: "Select" },
63+
{ id: 44, link: "/projects/sistent/components/select/guidance", text: "Select" },
64+
{ id: 45, link: "/projects/sistent/components/select/code", text: "Select" },
6565

66-
{ id: 46, link: "/projects/sistent/components/text-input", text: "Text Input" },
67-
{ id: 47, link: "/projects/sistent/components/text-input/guidance", text: "Text Input" },
68-
{ id: 48, link: "/projects/sistent/components/text-input/code", text: "Text Input" },
66+
{ id: 46, link: "/projects/sistent/components/text-field", text: "Text Field" },
67+
{ id: 47, link: "/projects/sistent/components/text-field/guidance", text: "Text Field" },
68+
{ id: 48, link: "/projects/sistent/components/text-field/code", text: "Text Field" },
6969

70-
{ id: 49, link: "/projects/sistent/components/tooltip", text: "Tooltip" },
71-
{ id: 50, link: "/projects/sistent/components/tooltip/guidance", text: "Tooltip" },
72-
{ id: 51, link: "/projects/sistent/components/tooltip/code", text: "Tooltip" },
70+
{ id: 49, link: "/projects/sistent/components/text-input", text: "Text Input" },
71+
{ id: 50, link: "/projects/sistent/components/text-input/guidance", text: "Text Input" },
72+
{ id: 51, link: "/projects/sistent/components/text-input/code", text: "Text Input" },
73+
74+
{ id: 52, link: "/projects/sistent/components/tooltip", text: "Tooltip" },
75+
{ id: 53, link: "/projects/sistent/components/tooltip/guidance", text: "Tooltip" },
76+
{ id: 54, link: "/projects/sistent/components/tooltip/code", text: "Tooltip" },
7377
];

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

Lines changed: 196 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,196 @@
1+
import React, { useState, useEffect } from "react";
2+
import { navigate } from "gatsby";
3+
import { useLocation } from "@reach/router";
4+
5+
import { SistentThemeProvider, CircularProgress } from "@sistent/sistent";
6+
import { CodeBlock } from "../button/code-block";
7+
8+
9+
import TabButton from "../../../../../reusecore/Button";
10+
import { SistentLayout } from "../../sistent-layout";
11+
import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode";
12+
13+
const codes = [
14+
"<CircularProgress />",
15+
"<CircularProgress variant=\"determinate\" value={75} />",
16+
`<CircularProgress size={24} variant="determinate" value={75} />
17+
<CircularProgress size={40} variant="determinate" value={75} />
18+
<CircularProgress size={56} variant="determinate" value={75} />`,
19+
`<CircularProgress thickness={2} variant="determinate" value={85} />
20+
<CircularProgress thickness={4} variant="determinate" value={85} />
21+
<CircularProgress thickness={6} variant="determinate" value={85} />`,
22+
`<CircularProgress color="primary" />
23+
<CircularProgress color="secondary" />
24+
<CircularProgress color="success" />`,
25+
];
26+
27+
const SistentCircularProgress = () => {
28+
const location = useLocation();
29+
const { isDark } = useStyledDarkMode();
30+
const [progress, setProgress] = useState(0);
31+
32+
useEffect(() => {
33+
const timer = setInterval(() => {
34+
setProgress((prevProgress) => (prevProgress >= 100 ? 0 : prevProgress + 10));
35+
}, 800);
36+
37+
return () => {
38+
clearInterval(timer);
39+
};
40+
}, []);
41+
42+
return (
43+
<SistentLayout title="Circular Progress">
44+
<div className="content">
45+
<a id="Identity">
46+
<h2>Circular Progress</h2>
47+
</a>
48+
<p>
49+
Circular progress indicators provide visual feedback about ongoing processes,
50+
helping users understand that their request is being processed. They can show
51+
either determinate progress (specific completion percentage) or indeterminate
52+
progress (unknown duration).
53+
</p>
54+
<div className="filterBtns">
55+
<TabButton
56+
className={
57+
location.pathname === "/projects/sistent/components/circularprogress"
58+
? "active"
59+
: ""
60+
}
61+
onClick={() => navigate("/projects/sistent/components/circularprogress")}
62+
title="Overview"
63+
/>
64+
<TabButton
65+
className={
66+
location.pathname ===
67+
"/projects/sistent/components/circularprogress/guidance"
68+
? "active"
69+
: ""
70+
}
71+
onClick={() =>
72+
navigate("/projects/sistent/components/circularprogress/guidance")
73+
}
74+
title="Guidance"
75+
/>
76+
<TabButton
77+
className={
78+
location.pathname ===
79+
"/projects/sistent/components/circularprogress/code"
80+
? "active"
81+
: ""
82+
}
83+
onClick={() =>
84+
navigate("/projects/sistent/components/circularprogress/code")
85+
}
86+
title="Code"
87+
/>
88+
</div>
89+
<div className="main-content">
90+
<p>
91+
The <code>CircularProgress</code> component is essential for communicating
92+
system status to users. It provides immediate feedback during loading
93+
states, file uploads, data processing, and other time-consuming operations.
94+
</p>
95+
<a id="Basic Example">
96+
<h2>Basic Circular Progress</h2>
97+
</a>
98+
<p>
99+
A simple indeterminate circular progress indicator that shows continuous loading.
100+
This is the default behavior when no variant or value props are provided.
101+
</p>
102+
<div className="showcase">
103+
<div className="items">
104+
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
105+
<CircularProgress />
106+
</SistentThemeProvider>
107+
</div>
108+
<CodeBlock name="circular-progress-basic" code={codes[0]} />
109+
</div>
110+
111+
<a id="Determinate Progress">
112+
<h2>Determinate Progress</h2>
113+
</a>
114+
<p>
115+
The determinate variant shows specific progress completion using the
116+
value prop (0-100). This variant is perfect for file uploads,
117+
downloads, or any process with measurable progress.
118+
</p>
119+
<div className="showcase">
120+
<div className="items">
121+
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
122+
<CircularProgress variant="determinate" value={progress} />
123+
</SistentThemeProvider>
124+
</div>
125+
<CodeBlock name="circular-progress-determinate" code={codes[1]} />
126+
</div>
127+
128+
<a id="Different Sizes">
129+
<h2>Size Variations</h2>
130+
</a>
131+
<p>
132+
Circular progress indicators can be scaled to different sizes using
133+
the size prop. This flexibility allows them to fit various layout
134+
requirements, from small inline indicators to prominent loading states.
135+
</p>
136+
<div className="showcase">
137+
<div className="items">
138+
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
139+
<div style={{ display: "flex", gap: "40px", alignItems: "center" }}>
140+
<CircularProgress size={24} variant="determinate" value={75} />
141+
<CircularProgress size={40} variant="determinate" value={75} />
142+
<CircularProgress size={56} variant="determinate" value={75} />
143+
</div>
144+
</SistentThemeProvider>
145+
</div>
146+
<CodeBlock name="circular-progress-sizes" code={codes[2]} />
147+
</div>
148+
149+
<a id="Thickness Variations">
150+
<h2>Thickness Variations</h2>
151+
</a>
152+
<p>
153+
The thickness prop controls the width of the progress arc, allowing
154+
you to create subtle or bold visual emphasis depending on your design
155+
requirements. Thicker lines provide more visual weight and prominence.
156+
</p>
157+
<div className="showcase">
158+
<div className="items">
159+
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
160+
<div style={{ display: "flex", gap: "40px", alignItems: "center" }}>
161+
<CircularProgress thickness={2} variant="determinate" value={85} />
162+
<CircularProgress thickness={4} variant="determinate" value={85} />
163+
<CircularProgress thickness={6} variant="determinate" value={85} />
164+
</div>
165+
</SistentThemeProvider>
166+
</div>
167+
<CodeBlock name="circular-progress-thickness" code={codes[3]} />
168+
</div>
169+
170+
<a id="Color Options">
171+
<h2>Color Options</h2>
172+
</a>
173+
<p>
174+
Circular progress indicators support various color themes to match
175+
your application's design system. Colors can convey different meanings
176+
or states, such as success, warning, or error conditions.
177+
</p>
178+
<div className="showcase">
179+
<div className="items">
180+
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
181+
<div style={{ display: "flex", gap: "40px", alignItems: "center" }}>
182+
<CircularProgress color="primary" />
183+
<CircularProgress color="secondary" />
184+
<CircularProgress color="success" />
185+
</div>
186+
</SistentThemeProvider>
187+
</div>
188+
<CodeBlock name="circular-progress-colors" code={codes[4]} />
189+
</div>
190+
</div>
191+
</div>
192+
</SistentLayout>
193+
);
194+
};
195+
196+
export default SistentCircularProgress;

0 commit comments

Comments
 (0)