Skip to content

Commit 909af9b

Browse files
vr-varadvr-varad
authored
Merge pull request #6705 from Rajesh-Nagarajan-11/add-switch-component
[Sistent] Add Switch component to the sistent components page
2 parents 0f17739 + 938a3d5 commit 909af9b

5 files changed

Lines changed: 460 additions & 12 deletions

File tree

‎src/components/SistentNavigation/content.js‎

Lines changed: 16 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -62,16 +62,20 @@ export const content = [
6262
{ id: 43, link: "/projects/sistent/components/select", text: "Select" },
6363
{ id: 44, link: "/projects/sistent/components/select/guidance", text: "Select" },
6464
{ id: 45, link: "/projects/sistent/components/select/code", text: "Select" },
65-
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" },
69-
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" },
65+
66+
{ id: 46, link: "/projects/sistent/components/switch", text: "Switch" },
67+
{ id: 47, link: "/projects/sistent/components/switch/guidance", text: "Switch" },
68+
{ id: 48, link: "/projects/sistent/components/switch/code", text: "Switch" },
69+
70+
{ id: 49, link: "/projects/sistent/components/text-field", text: "Text Field" },
71+
{ id: 50, link: "/projects/sistent/components/text-field/guidance", text: "Text Field" },
72+
{ id: 51, link: "/projects/sistent/components/text-field/code", text: "Text Field" },
73+
74+
{ id: 52, link: "/projects/sistent/components/text-input", text: "Text Input" },
75+
{ id: 53, link: "/projects/sistent/components/text-input/guidance", text: "Text Input" },
76+
{ id: 54, link: "/projects/sistent/components/text-input/code", text: "Text Input" },
77+
78+
{ id: 55, link: "/projects/sistent/components/tooltip", text: "Tooltip" },
79+
{ id: 56, link: "/projects/sistent/components/tooltip/guidance", text: "Tooltip" },
80+
{ id: 57, link: "/projects/sistent/components/tooltip/code", text: "Tooltip" },
7781
];

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

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -141,6 +141,13 @@ const componentsData = [
141141
url: "/projects/sistent/components/circularprogress",
142142
src: "/circularprogress",
143143
},
144+
{
145+
id: 19,
146+
name: "Switch",
147+
description: "The Switch component allows users to toggle the state of a single setting on or off.",
148+
url: "/projects/sistent/components/switch",
149+
src: "/switch"
150+
},
144151

145152
];
146153

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

Lines changed: 152 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,152 @@
1+
import React, { useState } from "react";
2+
import { CodeBlock } from "../button/code-block";
3+
import { Switch, FormControlLabel, SistentThemeProvider } from "@sistent/sistent";
4+
import { SistentLayout } from "../../sistent-layout";
5+
import TabButton from "../../../../../reusecore/Button";
6+
import { navigate } from "gatsby";
7+
import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode";
8+
import { useLocation } from "@reach/router";
9+
10+
const codes = [
11+
` <SistentThemeProvider>
12+
<Switch/>
13+
</SistentThemeProvider>`,
14+
` <SistentThemeProvider>
15+
<Switch checked={false} disabled />
16+
</SistentThemeProvider>`,
17+
` <SistentThemeProvider>
18+
<FormControlLabel
19+
control={
20+
<Switch
21+
checked={checked}
22+
onChange={handleChange}
23+
name="demoSwitch"
24+
color="primary"
25+
/>
26+
}
27+
label="Enable Notifications"
28+
/>
29+
</SistentThemeProvider>`,
30+
` <SistentThemeProvider>
31+
<Switch
32+
size="small"
33+
checked={checked}
34+
onChange={handleChange}
35+
inputProps={{ 'aria-label': 'toggle something' }}
36+
/>
37+
</SistentThemeProvider>`,
38+
];
39+
40+
const SwitchCode = () => {
41+
const [checked, setChecked] = useState(true);
42+
const handleChange = (event) => setChecked(event.target.checked);
43+
const location = useLocation();
44+
const { isDark } = useStyledDarkMode();
45+
return (
46+
<SistentLayout title="Switch">
47+
<div className="content">
48+
<a id="Switch">
49+
<h2>Switch</h2>
50+
</a>
51+
<p>
52+
The Switch component allows users to toggle a setting between two states—on or off.
53+
</p>
54+
<div className="filterBtns">
55+
<TabButton
56+
className={location.pathname === "/projects/sistent/components/switch" ? "active" : ""}
57+
onClick={() => navigate("/projects/sistent/components/switch")}
58+
title="Overview"
59+
/>
60+
<TabButton
61+
className={location.pathname === "/projects/sistent/components/switch/guidance" ? "active" : ""}
62+
onClick={() => navigate("/projects/sistent/components/switch/guidance")}
63+
title="Guidance"
64+
/>
65+
<TabButton
66+
className={location.pathname === "/projects/sistent/components/switch/code" ? "active" : ""}
67+
onClick={() => navigate("/projects/sistent/components/switch/code")}
68+
title="Code"
69+
/>
70+
</div>
71+
<div className="main-content">
72+
<a id="Basic Switch">
73+
<h2>Basic Switch</h2>
74+
</a>
75+
<p>
76+
This is the default switch style used to represent changes between two states.
77+
</p>
78+
<div className="showcase">
79+
<div className="items">
80+
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
81+
<Switch checked={checked} />
82+
</SistentThemeProvider>
83+
</div>
84+
<CodeBlock name="basic-switch" code={codes[0]} />
85+
</div>
86+
87+
<a id="Disabled Switch">
88+
<h2>Disabled Switch</h2>
89+
</a>
90+
<p>
91+
Disabled switches show the state but are not interactive.
92+
</p>
93+
<div className="showcase">
94+
<div className="items">
95+
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
96+
<Switch checked={false} disabled />
97+
</SistentThemeProvider>
98+
</div>
99+
<CodeBlock name="disabled-switch" code={codes[1]} />
100+
</div>
101+
102+
<a id="Labeled Switch">
103+
<h2>Labeled Switch</h2>
104+
</a>
105+
<p>
106+
Labels describe the action being toggled and improve accessibility.
107+
</p>
108+
<div className="showcase">
109+
<div className="items">
110+
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
111+
<FormControlLabel
112+
control={
113+
<Switch
114+
checked={checked}
115+
onChange={handleChange}
116+
name="demoSwitch"
117+
color="primary"
118+
/>
119+
}
120+
label="Enable Notifications"
121+
/>
122+
</SistentThemeProvider>
123+
</div>
124+
<CodeBlock name="labeled-switch" code={codes[2]} />
125+
</div>
126+
127+
<a id="Small Switch">
128+
<h2>Small Switch</h2>
129+
</a>
130+
<p>
131+
Use the <code>size="small"</code> prop for a more compact version.
132+
</p>
133+
<div className="showcase">
134+
<div className="items">
135+
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
136+
<Switch
137+
size="small"
138+
checked={checked}
139+
onChange={handleChange}
140+
inputProps={{ "aria-label": "toggle something" }}
141+
/>
142+
</SistentThemeProvider>
143+
</div>
144+
<CodeBlock name="small-switch" code={codes[3]} />
145+
</div>
146+
</div>
147+
</div>
148+
</SistentLayout>
149+
);
150+
};
151+
152+
export default SwitchCode;

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

Lines changed: 138 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,138 @@
1+
import React from "react";
2+
import { navigate } from "gatsby";
3+
import { useLocation } from "@reach/router";
4+
import { Row } from "../../../../../reusecore/Layout";
5+
import {
6+
SistentThemeProvider,
7+
Switch,
8+
FormControlLabel,
9+
} from "@sistent/sistent";
10+
import TabButton from "../../../../../reusecore/Button";
11+
import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode";
12+
import { SistentLayout } from "../../sistent-layout";
13+
14+
const SwitchGuidance = () => {
15+
const location = useLocation();
16+
const { isDark } = useStyledDarkMode();
17+
18+
return (
19+
<SistentLayout title="Switch">
20+
<div className="content">
21+
<a id="Identity">
22+
<h2>Switch</h2>
23+
</a>
24+
<p>
25+
The Switch is a toggle component used to instantly turn
26+
features on or off. Its binary nature makes it ideal for
27+
preferences and settings panels where real-time toggling is expected.
28+
</p>
29+
30+
<div className="filterBtns">
31+
<TabButton
32+
className={
33+
location.pathname === "/projects/sistent/components/switch"
34+
? "active"
35+
: ""
36+
}
37+
onClick={() => navigate("/projects/sistent/components/switch")}
38+
title="Overview"
39+
/>
40+
<TabButton
41+
className={
42+
location.pathname ===
43+
"/projects/sistent/components/switch/guidance"
44+
? "active"
45+
: ""
46+
}
47+
onClick={() =>
48+
navigate("/projects/sistent/components/switch/guidance")
49+
}
50+
title="Guidance"
51+
/>
52+
<TabButton
53+
className={
54+
location.pathname === "/projects/sistent/components/switch/code"
55+
? "active"
56+
: ""
57+
}
58+
onClick={() => navigate("/projects/sistent/components/switch/code")}
59+
title="Code"
60+
/>
61+
</div>
62+
63+
<div className="main-content">
64+
65+
<a id="Function">
66+
<h2>Function</h2>
67+
</a>
68+
69+
<h3>State Representation</h3>
70+
<p>
71+
A Switch reflects its state visually, using a track and thumb
72+
indicator. When toggled, the thumb slides across the track to
73+
communicate the new value. This feedback is direct and immediate.
74+
</p>
75+
<Row $Hcenter className="image-container">
76+
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
77+
<Switch checked />
78+
</SistentThemeProvider>
79+
</Row>
80+
81+
<h3>State Variants</h3>
82+
<p>
83+
A Switch can be active, inactive, or disabled. Use the disabled
84+
state to communicate unavailable features or settings that require
85+
prerequisites.
86+
</p>
87+
<Row $Hcenter className="image-container">
88+
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
89+
<Switch checked={false} disabled />
90+
</SistentThemeProvider>
91+
</Row>
92+
93+
<a id="Labeling">
94+
<h2>Labeling</h2>
95+
</a>
96+
<p>
97+
Every Switch should be paired with a visible label. Use <code>FormControlLabel</code> to
98+
visually bind labels to toggles for clarity and context.
99+
</p>
100+
<Row $Hcenter className="image-container">
101+
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
102+
<FormControlLabel
103+
control={
104+
<Switch
105+
checked={true}
106+
inputProps={{ "aria-label": "Enable dark mode" }}
107+
/>
108+
}
109+
label="Enable Dark Mode"
110+
/>
111+
</SistentThemeProvider>
112+
</Row>
113+
114+
<h3>Label Placement</h3>
115+
<p>
116+
Labels can be placed beside the Switch horizontally. For forms or
117+
settings pages, maintaining vertical spacing with consistent margins
118+
is recommended to improve readability and alignment.
119+
</p>
120+
121+
<a id="Sizing">
122+
<h2>Sizing</h2>
123+
</a>
124+
<p>
125+
The default Switch size is medium, which fits most use cases. Use <code>size="small"</code> when you have limited space or need to place toggles inside compact UI elements like tables, cards, or toolbars.
126+
</p>
127+
<Row $Hcenter className="image-container">
128+
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
129+
<Switch size="small" checked={false} />
130+
</SistentThemeProvider>
131+
</Row>
132+
</div>
133+
</div>
134+
</SistentLayout>
135+
);
136+
};
137+
138+
export default SwitchGuidance;

0 commit comments

Comments
 (0)