Skip to content

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

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.

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

Open
wants to merge 8 commits into
base: master
Choose a base branch
from
7 changes: 7 additions & 0 deletions src/sections/Projects/Sistent/components/content.js
Original file line number Diff line number Diff line change
@@ -126,6 +126,13 @@ const componentsData = [
url: "/projects/sistent/components/icons",
src: "/icons"
},
{
id: 17,
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"
},
];

module.exports = { componentsData };
131 changes: 131 additions & 0 deletions src/sections/Projects/Sistent/components/switch/code.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,131 @@
import React, { useState } from "react";
import { CodeBlock } from "../button/code-block";
import { Switch, FormControlLabel, SistentThemeProvider } from "@sistent/sistent";
import { SistentLayout } from "../../sistent-layout";

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);

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="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>
<Switch checked={false}/>
</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>
<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>
<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>
<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;
140 changes: 140 additions & 0 deletions src/sections/Projects/Sistent/components/switch/guidance.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,140 @@
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 space is constrained or when embedding
toggles into compact elements such as 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