Skip to content

[Sistent] Add Switch component to the sistent components page #6705

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
vr-varad merged 10 commits into from
Aug 19, 2025
Merged

[Sistent] Add Switch component to the sistent components page #6705

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
987fa48
Added Index.js
Rajesh-Nagarajan-11 Aug 17, 2025
58de982
Added switch component
Rajesh-Nagarajan-11 Aug 17, 2025
45313c8
Updated prev and next button
Rajesh-Nagarajan-11 Aug 17, 2025
616d882
Updates
Rajesh-Nagarajan-11 Aug 18, 2025
11db561
updates
Rajesh-Nagarajan-11 Aug 18, 2025
0e5bb3a
Merge branch 'master' into add-switch-component
vr-varad Aug 18, 2025
2128cd8
Update code.js
vr-varad Aug 18, 2025
e95dcee
Merge branch 'master' into add-switch-component
vr-varad Aug 18, 2025
4abb48f
Merge branch 'master' into add-switch-component
vr-varad Aug 18, 2025
938a3d5
Merge branch 'master' into add-switch-component
vr-varad Aug 19, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
28 changes: 16 additions & 12 deletions src/components/SistentNavigation/content.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,16 +62,20 @@ export const content = [
{ id: 43, link: "/projects/sistent/components/select", text: "Select" },
{ id: 44, link: "/projects/sistent/components/select/guidance", text: "Select" },
{ id: 45, link: "/projects/sistent/components/select/code", text: "Select" },

{ id: 46, link: "/projects/sistent/components/text-field", text: "Text Field" },
{ id: 47, link: "/projects/sistent/components/text-field/guidance", text: "Text Field" },
{ id: 48, link: "/projects/sistent/components/text-field/code", text: "Text Field" },

{ id: 49, link: "/projects/sistent/components/text-input", text: "Text Input" },
{ id: 50, link: "/projects/sistent/components/text-input/guidance", text: "Text Input" },
{ id: 51, link: "/projects/sistent/components/text-input/code", text: "Text Input" },

{ id: 52, link: "/projects/sistent/components/tooltip", text: "Tooltip" },
{ id: 53, link: "/projects/sistent/components/tooltip/guidance", text: "Tooltip" },
{ id: 54, link: "/projects/sistent/components/tooltip/code", text: "Tooltip" },

{ id: 46, link: "/projects/sistent/components/switch", text: "Switch" },
{ id: 47, link: "/projects/sistent/components/switch/guidance", text: "Switch" },
{ id: 48, link: "/projects/sistent/components/switch/code", text: "Switch" },

{ id: 49, link: "/projects/sistent/components/text-field", text: "Text Field" },
{ id: 50, link: "/projects/sistent/components/text-field/guidance", text: "Text Field" },
{ id: 51, link: "/projects/sistent/components/text-field/code", text: "Text Field" },

{ id: 52, link: "/projects/sistent/components/text-input", text: "Text Input" },
{ id: 53, link: "/projects/sistent/components/text-input/guidance", text: "Text Input" },
{ id: 54, link: "/projects/sistent/components/text-input/code", text: "Text Input" },

{ id: 55, link: "/projects/sistent/components/tooltip", text: "Tooltip" },
{ id: 56, link: "/projects/sistent/components/tooltip/guidance", text: "Tooltip" },
{ id: 57, link: "/projects/sistent/components/tooltip/code", text: "Tooltip" },
];
7 changes: 7 additions & 0 deletions src/sections/Projects/Sistent/components/content.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -141,6 +141,13 @@ const componentsData = [
url: "/projects/sistent/components/circularprogress",
src: "/circularprogress",
},
{
id: 19,
name: "Switch",
description: "The Switch component allows users to toggle the state of a single setting on or off.",
url: "/projects/sistent/components/switch",
src: "/switch"
},

];

Expand Down
152 changes: 152 additions & 0 deletions src/sections/Projects/Sistent/components/switch/code.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,152 @@
import React, { useState } from "react";
import { CodeBlock } from "../button/code-block";
import { Switch, FormControlLabel, SistentThemeProvider } from "@sistent/sistent";
import { SistentLayout } from "../../sistent-layout";
import TabButton from "../../../../../reusecore/Button";
import { navigate } from "gatsby";
import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode";
import { useLocation } from "@reach/router";

const codes = [
` <SistentThemeProvider>
<Switch/>
</SistentThemeProvider>`,
` <SistentThemeProvider>
<Switch checked={false} disabled />
</SistentThemeProvider>`,
` <SistentThemeProvider>
<FormControlLabel
control={
<Switch
checked={checked}
onChange={handleChange}
name="demoSwitch"
color="primary"
/>
}
label="Enable Notifications"
/>
</SistentThemeProvider>`,
` <SistentThemeProvider>
<Switch
size="small"
checked={checked}
onChange={handleChange}
inputProps={{ 'aria-label': 'toggle something' }}
/>
</SistentThemeProvider>`,
];

const SwitchCode = () => {
const [checked, setChecked] = useState(true);
const handleChange = (event) => setChecked(event.target.checked);
const location = useLocation();
const { isDark } = useStyledDarkMode();
return (
<SistentLayout title="Switch">
<div className="content">
<a id="Switch">
<h2>Switch</h2>
</a>
<p>
The Switch component allows users to toggle a setting between two states—on or off.
</p>
<div className="filterBtns">
<TabButton
className={location.pathname === "/projects/sistent/components/switch" ? "active" : ""}
onClick={() => navigate("/projects/sistent/components/switch")}
title="Overview"
/>
<TabButton
className={location.pathname === "/projects/sistent/components/switch/guidance" ? "active" : ""}
onClick={() => navigate("/projects/sistent/components/switch/guidance")}
title="Guidance"
/>
<TabButton
className={location.pathname === "/projects/sistent/components/switch/code" ? "active" : ""}
onClick={() => navigate("/projects/sistent/components/switch/code")}
title="Code"
/>
</div>
<div className="main-content">
<a id="Basic Switch">
<h2>Basic Switch</h2>
</a>
<p>
This is the default switch style used to represent changes between two states.
</p>
<div className="showcase">
<div className="items">
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
<Switch checked={checked} />
</SistentThemeProvider>
</div>
<CodeBlock name="basic-switch" code={codes[0]} />
</div>

<a id="Disabled Switch">
<h2>Disabled Switch</h2>
</a>
<p>
Disabled switches show the state but are not interactive.
</p>
<div className="showcase">
<div className="items">
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
<Switch checked={false} disabled />
</SistentThemeProvider>
</div>
<CodeBlock name="disabled-switch" code={codes[1]} />
</div>

<a id="Labeled Switch">
<h2>Labeled Switch</h2>
</a>
<p>
Labels describe the action being toggled and improve accessibility.
</p>
<div className="showcase">
<div className="items">
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
<FormControlLabel
control={
<Switch
checked={checked}
onChange={handleChange}
name="demoSwitch"
color="primary"
/>
}
label="Enable Notifications"
/>
</SistentThemeProvider>
</div>
<CodeBlock name="labeled-switch" code={codes[2]} />
</div>

<a id="Small Switch">
<h2>Small Switch</h2>
</a>
<p>
Use the <code>size="small"</code> prop for a more compact version.
</p>
<div className="showcase">
<div className="items">
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
<Switch
size="small"
checked={checked}
onChange={handleChange}
inputProps={{ "aria-label": "toggle something" }}
/>
</SistentThemeProvider>
</div>
<CodeBlock name="small-switch" code={codes[3]} />
</div>
</div>
</div>
</SistentLayout>
);
};

export default SwitchCode;
138 changes: 138 additions & 0 deletions src/sections/Projects/Sistent/components/switch/guidance.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,138 @@
import React from "react";
import { navigate } from "gatsby";
import { useLocation } from "@reach/router";
import { Row } from "../../../../../reusecore/Layout";
import {
SistentThemeProvider,
Switch,
FormControlLabel,
} from "@sistent/sistent";
import TabButton from "../../../../../reusecore/Button";
import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode";
import { SistentLayout } from "../../sistent-layout";

const SwitchGuidance = () => {
const location = useLocation();
const { isDark } = useStyledDarkMode();

return (
<SistentLayout title="Switch">
<div className="content">
<a id="Identity">
<h2>Switch</h2>
</a>
<p>
The Switch is a toggle component used to instantly turn
features on or off. Its binary nature makes it ideal for
preferences and settings panels where real-time toggling is expected.
</p>

<div className="filterBtns">
<TabButton
className={
location.pathname === "/projects/sistent/components/switch"
? "active"
: ""
}
onClick={() => navigate("/projects/sistent/components/switch")}
title="Overview"
/>
<TabButton
className={
location.pathname ===
"/projects/sistent/components/switch/guidance"
? "active"
: ""
}
onClick={() =>
navigate("/projects/sistent/components/switch/guidance")
}
title="Guidance"
/>
<TabButton
className={
location.pathname === "/projects/sistent/components/switch/code"
? "active"
: ""
}
onClick={() => navigate("/projects/sistent/components/switch/code")}
title="Code"
/>
</div>

<div className="main-content">

<a id="Function">
<h2>Function</h2>
</a>

<h3>State Representation</h3>
<p>
A Switch reflects its state visually, using a track and thumb
indicator. When toggled, the thumb slides across the track to
communicate the new value. This feedback is direct and immediate.
</p>
<Row $Hcenter className="image-container">
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
<Switch checked />
</SistentThemeProvider>
</Row>

<h3>State Variants</h3>
<p>
A Switch can be active, inactive, or disabled. Use the disabled
state to communicate unavailable features or settings that require
prerequisites.
</p>
<Row $Hcenter className="image-container">
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
<Switch checked={false} disabled />
</SistentThemeProvider>
</Row>

<a id="Labeling">
<h2>Labeling</h2>
</a>
<p>
Every Switch should be paired with a visible label. Use <code>FormControlLabel</code> to
visually bind labels to toggles for clarity and context.
</p>
<Row $Hcenter className="image-container">
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
<FormControlLabel
control={
<Switch
checked={true}
inputProps={{ "aria-label": "Enable dark mode" }}
/>
}
label="Enable Dark Mode"
/>
</SistentThemeProvider>
</Row>

<h3>Label Placement</h3>
<p>
Labels can be placed beside the Switch horizontally. For forms or
settings pages, maintaining vertical spacing with consistent margins
is recommended to improve readability and alignment.
</p>

<a id="Sizing">
<h2>Sizing</h2>
</a>
<p>
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.
</p>
<Row $Hcenter className="image-container">
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
<Switch size="small" checked={false} />
</SistentThemeProvider>
</Row>
</div>
</div>
</SistentLayout>
);
};

export default SwitchGuidance;
Loading
Loading