Skip to content

Commit a177a70

Browse files
vr-varadvr-varad
authored
Merge pull request #6782 from Rajesh-Nagarajan-11/add-Radio-Group-Component
Added RadioGroup component to the sistent components page
2 parents fe19cf9 + 9edb29c commit a177a70

5 files changed

Lines changed: 613 additions & 21 deletions

File tree

‎src/components/SistentNavigation/content.js‎

Lines changed: 25 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -68,31 +68,35 @@ export const content = [
6868
{ id: 48, link: "/projects/sistent/components/popper/guidance", text: "Popper" },
6969
{ id: 49, link: "/projects/sistent/components/popper/code", text: "Popper" },
7070

71-
{ id: 50, link: "/projects/sistent/components/select", text: "Select" },
72-
{ id: 51, link: "/projects/sistent/components/select/guidance", text: "Select" },
73-
{ id: 52, link: "/projects/sistent/components/select/code", text: "Select" },
71+
{ id: 50,link: "/projects/sistent/components/radiogroup",text: "RadioGroup" },
72+
{ id: 51,link: "/projects/sistent/components/radiogroup/guidance",text: "RadioGroup" },
73+
{ id: 52,link: "/projects/sistent/components/radiogroup/code",text: "RadioGroup" },
7474

75-
{ id: 53, link: "/projects/sistent/components/switch", text: "Switch" },
76-
{ id: 54, link: "/projects/sistent/components/switch/guidance", text: "Switch" },
77-
{ id: 55, link: "/projects/sistent/components/switch/code", text: "Switch" },
75+
{ id: 53, link: "/projects/sistent/components/select", text: "Select" },
76+
{ id: 54, link: "/projects/sistent/components/select/guidance", text: "Select" },
77+
{ id: 55, link: "/projects/sistent/components/select/code", text: "Select" },
7878

79-
{ id: 56, link: "/projects/sistent/components/tabs", text: "Tabs" },
80-
{ id: 57, link: "/projects/sistent/components/tabs/guidance", text: "Tabs" },
81-
{ id: 58, link: "/projects/sistent/components/tabs/code", text: "Tabs" },
79+
{ id: 56, link: "/projects/sistent/components/switch", text: "Switch" },
80+
{ id: 57, link: "/projects/sistent/components/switch/guidance", text: "Switch" },
81+
{ id: 58, link: "/projects/sistent/components/switch/code", text: "Switch" },
8282

83-
{ id: 59, link: "/projects/sistent/components/text-field", text: "Text Field" },
84-
{ id: 60, link: "/projects/sistent/components/text-field/guidance", text: "Text Field" },
85-
{ id: 61, link: "/projects/sistent/components/text-field/code", text: "Text Field" },
83+
{ id: 59, link: "/projects/sistent/components/tabs", text: "Tabs" },
84+
{ id: 60, link: "/projects/sistent/components/tabs/guidance", text: "Tabs" },
85+
{ id: 61, link: "/projects/sistent/components/tabs/code", text: "Tabs" },
8686

87-
{ id: 62, link: "/projects/sistent/components/text-input", text: "Text Input" },
88-
{ id: 63, link: "/projects/sistent/components/text-input/guidance", text: "Text Input" },
89-
{ id: 64, link: "/projects/sistent/components/text-input/code", text: "Text Input" },
87+
{ id: 62, link: "/projects/sistent/components/text-field", text: "Text Field" },
88+
{ id: 63, link: "/projects/sistent/components/text-field/guidance", text: "Text Field" },
89+
{ id: 64, link: "/projects/sistent/components/text-field/code", text: "Text Field" },
9090

91-
{ id: 63, link: "/projects/sistent/components/toolbar", text: "Toolbar" },
92-
{ id: 64, link: "/projects/sistent/components/toolbar/guidance", text: "Toolbar" },
93-
{ id: 65, link: "/projects/sistent/components/toolbar/code", text: "Toolbar" },
91+
{ id: 65, link: "/projects/sistent/components/text-input", text: "Text Input" },
92+
{ id: 66, link: "/projects/sistent/components/text-input/guidance", text: "Text Input" },
93+
{ id: 67, link: "/projects/sistent/components/text-input/code", text: "Text Input" },
9494

95-
{ id: 66, link: "/projects/sistent/components/tooltip", text: "Tooltip" },
96-
{ id: 67, link: "/projects/sistent/components/tooltip/guidance", text: "Tooltip" },
97-
{ id: 68, link: "/projects/sistent/components/tooltip/code", text: "Tooltip" },
95+
{ id: 68, link: "/projects/sistent/components/toolbar", text: "Toolbar" },
96+
{ id: 69, link: "/projects/sistent/components/toolbar/guidance", text: "Toolbar" },
97+
{ id: 70, link: "/projects/sistent/components/toolbar/code", text: "Toolbar" },
98+
99+
{ id: 71, link: "/projects/sistent/components/tooltip", text: "Tooltip" },
100+
{ id: 72, link: "/projects/sistent/components/tooltip/guidance", text: "Tooltip" },
101+
{ id: 73, link: "/projects/sistent/components/tooltip/code", text: "Tooltip" },
98102
];

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

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -188,6 +188,13 @@ const componentsData = [
188188
url: "/projects/sistent/components/toolbar",
189189
src: "/toolbar",
190190
},
191+
{
192+
"id": 25,
193+
"name": "RadioGroup",
194+
"description": "Sistent offers a well-structured RadioGroup component that allows users to select one option from a set.",
195+
"url": "/projects/sistent/components/radiogroup",
196+
"src": "/radiogroup"
197+
},
191198
];
192199

193200
module.exports = { componentsData };

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

Lines changed: 209 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,209 @@
1+
import { useLocation } from "@reach/router";
2+
import { navigate } from "gatsby";
3+
import React from "react";
4+
5+
import { Container, SistentThemeProvider } from "@sistent/sistent";
6+
import { SistentLayout } from "../../sistent-layout";
7+
import { CodeBlock } from "../button/code-block";
8+
9+
import TabButton from "../../../../../reusecore/Button";
10+
import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode";
11+
12+
import { RadioGroup, Radio, FormControlLabel } from "@sistent/sistent";
13+
14+
const codes = [
15+
`<RadioGroup value={value} onChange={handleChange}>
16+
<FormControlLabel value="Layer5" control={<Radio />} label="Layer5" />
17+
<FormControlLabel value="Meshery" control={<Radio />} label="Meshery" />
18+
<FormControlLabel value="Kanvas" control={<Radio />} label="Kanvas" />
19+
</RadioGroup>`,
20+
`<RadioGroup value={selectedDisabledOption} onChange={handleDisabledChange}>
21+
<FormControlLabel value="Layer5" control={<Radio />} label="Layer5" />
22+
<FormControlLabel value="Meshery-Cloud (Private)" control={<Radio />} label="Meshery-Cloud (Private)" disabled />
23+
<FormControlLabel value="Sistent Design System" control={<Radio />} label="Sistent Design System" />
24+
</RadioGroup>`,
25+
`<RadioGroup row value={selectedRowOption} onChange={handleRowChange}>
26+
<FormControlLabel value="Contributor" control={<Radio />} label="Contributor" />
27+
<FormControlLabel value="Community" control={<Radio />} label="Community Member" />
28+
<FormControlLabel value="Maintainer" control={<Radio />} label="Maintainer" />
29+
</RadioGroup>`,
30+
`<RadioGroup row value={selectedLabelOption} onChange={handleLabelChange}>
31+
<FormControlLabel value="end" control={<Radio />} label="End (Default)" labelPlacement="end" />
32+
<FormControlLabel value="top" control={<Radio />} label="Top" labelPlacement="top" />
33+
<FormControlLabel value="bottom" control={<Radio />} label="Bottom" labelPlacement="bottom" />
34+
<FormControlLabel value="start" control={<Radio />} label="Start" labelPlacement="start" />
35+
</RadioGroup>`
36+
];
37+
38+
const SistentRadioGroup = () => {
39+
const location = useLocation();
40+
const { isDark } = useStyledDarkMode();
41+
42+
const [value, setValue] = React.useState("Layer5");
43+
const handleChange = (event) => setValue(event.target.value);
44+
45+
const [selectedDisabledOption, setSelectedDisabledOption] = React.useState("Layer5");
46+
const handleDisabledChange = (event) => setSelectedDisabledOption(event.target.value);
47+
48+
const [selectedRowOption, setSelectedRowOption] = React.useState("Contributor");
49+
const handleRowChange = (event) => setSelectedRowOption(event.target.value);
50+
51+
const [selectedLabelOption, setSelectedLabelOption] = React.useState("end");
52+
const handleLabelChange = (event) => setSelectedLabelOption(event.target.value);
53+
54+
return (
55+
<SistentLayout title="RadioGroup">
56+
<div className="content">
57+
<a id="Identity">
58+
<h2>RadioGroup</h2>
59+
</a>
60+
<div className="filterBtns">
61+
<TabButton
62+
className={
63+
location.pathname === "/projects/sistent/components/radiogroup"
64+
? "active"
65+
: ""
66+
}
67+
onClick={() => navigate("/projects/sistent/components/radiogroup")}
68+
title="Overview"
69+
/>
70+
<TabButton
71+
className={
72+
location.pathname ===
73+
"/projects/sistent/components/radiogroup/guidance"
74+
? "active"
75+
: ""
76+
}
77+
onClick={() =>
78+
navigate("/projects/sistent/components/radiogroup/guidance")
79+
}
80+
title="Guidance"
81+
/>
82+
<TabButton
83+
className={
84+
location.pathname === "/projects/sistent/components/radiogroup/code"
85+
? "active"
86+
: ""
87+
}
88+
onClick={() =>
89+
navigate("/projects/sistent/components/radiogroup/code")
90+
}
91+
title="Code"
92+
/>
93+
</div>
94+
<div className="main-content">
95+
<p>
96+
The RadioGroup component lets users select one option from a set of
97+
choices. It ensures accessibility and ease of use.
98+
</p>
99+
<a id="Basic RadioGroup">
100+
<h2>Basic RadioGroup</h2>
101+
</a>
102+
<div className="showcase">
103+
<div className="items">
104+
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
105+
<Container maxWidth="sm">
106+
<RadioGroup value={value} onChange={handleChange}>
107+
<FormControlLabel
108+
value="Layer5"
109+
control={<Radio />}
110+
label="Layer5"
111+
/>
112+
<FormControlLabel
113+
value="Meshery"
114+
control={<Radio />}
115+
label="Meshery"
116+
/>
117+
<FormControlLabel
118+
value="Kanvas"
119+
control={<Radio />}
120+
label="Kanvas"
121+
/>
122+
</RadioGroup>
123+
</Container>
124+
</SistentThemeProvider>
125+
</div>
126+
<CodeBlock name="radiogroup-example" code={codes[0]} />
127+
</div>
128+
129+
<a id="Disabled RadioGroup">
130+
<h2>Disabled Options</h2>
131+
</a>
132+
<div className="showcase">
133+
<div className="items">
134+
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
135+
<Container maxWidth="sm">
136+
<RadioGroup value={selectedDisabledOption} onChange={handleDisabledChange}>
137+
<FormControlLabel value="Layer5" control={<Radio />} label="Layer5" />
138+
<FormControlLabel value="Meshery-Cloud (Private)" control={<Radio />} label="Meshery-Cloud (private)" disabled />
139+
<FormControlLabel value="Sistent Design System" control={<Radio />} label="Sistent Design System" />
140+
</RadioGroup>
141+
</Container>
142+
</SistentThemeProvider>
143+
</div>
144+
<CodeBlock name="radiogroup-disabled" code={codes[1]} />
145+
</div>
146+
147+
<a id="Row RadioGroup">
148+
<h2>Row Layout</h2>
149+
</a>
150+
<div className="showcase">
151+
<div className="items">
152+
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
153+
<Container maxWidth="sm">
154+
<RadioGroup row value={selectedRowOption} onChange={handleRowChange}>
155+
<FormControlLabel value="Contributor" control={<Radio />} label="Contributor" />
156+
<FormControlLabel value="Community" control={<Radio />} label="Community Member" />
157+
<FormControlLabel value="Maintainer" control={<Radio />} label="Maintainer" />
158+
</RadioGroup>
159+
</Container>
160+
</SistentThemeProvider>
161+
</div>
162+
<CodeBlock name="radiogroup-row" code={codes[2]} />
163+
</div>
164+
165+
<a id="LabelPlacement RadioGroup">
166+
<h2>Label Placement</h2>
167+
</a>
168+
<div className="showcase">
169+
<div className="items">
170+
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
171+
<Container maxWidth="sm">
172+
<RadioGroup row value={selectedLabelOption} onChange={handleLabelChange}>
173+
<FormControlLabel
174+
value="end"
175+
control={<Radio />}
176+
label="End (Default)"
177+
labelPlacement="end"
178+
/>
179+
<FormControlLabel
180+
value="top"
181+
control={<Radio />}
182+
label="Top"
183+
labelPlacement="top"
184+
/>
185+
<FormControlLabel
186+
value="bottom"
187+
control={<Radio />}
188+
label="Bottom"
189+
labelPlacement="bottom"
190+
/>
191+
<FormControlLabel
192+
value="start"
193+
control={<Radio />}
194+
label="Start"
195+
labelPlacement="start"
196+
/>
197+
</RadioGroup>
198+
</Container>
199+
</SistentThemeProvider>
200+
</div>
201+
<CodeBlock name="radiogroup-label-placement" code={codes[3]} />
202+
</div>
203+
</div>
204+
</div>
205+
</SistentLayout>
206+
);
207+
};
208+
209+
export default SistentRadioGroup;

0 commit comments

Comments
 (0)