Skip to content

Commit

Permalink
Enhance the toggle-button component
Browse files Browse the repository at this point in the history 
Signed-off-by: eyeaadil <[email protected]>
  • Loading branch information
@eyeaadil
eyeaadil committed Dec 28, 2024
1 parent c80f0b9 commit d8ab6b9
Show file tree
Hide file tree
Showing 6 changed files with 190 additions and 162 deletions.
4 changes: 0 additions & 4 deletions gatsby-node.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -727,10 +727,6 @@ exports.createPages = async ({ actions, graphql, reporter }) => {
});

const components = componentsData.map((component) => component.src.replace("/", ""));




const createComponentPages = (createPage, components) => {
const pageTypes = [
{ suffix: "", file: "index.js" },
Expand Down
2 changes: 1 addition & 1 deletion src/components/handbook-navigation/TocPagination.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ const TocPagination = () => {
) : null}

{currentPage < content.length - 1 ? (
<Button $primary $url={content[currentPage + 1]?.link}>
<Button $primary $url={content[currentPage + 1]?.link} onClick={() => console.log("button is clicked")}>
Next &rarr;
</Button>
) : null}
Expand Down
2 changes: 1 addition & 1 deletion src/sections/Projects/Sistent/components/content.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ const componentsData = [
id: 3,
name: "Modal",
description:
"A modal is a dialog box/popup that is displayed over the main content to present information or collect input.",
"A text input is made up of multiple elements that combine to form a component that helps users to read, write, and edit text in an interface.",
url: "/projects/sistent/components/modal",
src: "/modal",
},
Expand Down
193 changes: 105 additions & 88 deletions src/sections/Projects/Sistent/components/toggle-button/code.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,64 +13,87 @@ import TabButton from "../../../../../reusecore/Button";
import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode";

const codes = [
`<SistentThemeProvider>
<ToggleButton value="toggle1" selected={true}>
Toggle On
</ToggleButton>
</SistentThemeProvider>`,
`<SistentThemeProvider>
// For exclusive selection
`
<ToggleButtonGroup
value="option1"
value="left"
exclusive
onChange={(event, value) => console.log(value)}
>
<ToggleButton value="option1">Option 1</ToggleButton>
<ToggleButton value="option2">Option 2</ToggleButton>
<ToggleButton value="left">Left</ToggleButton>
<ToggleButton value="center">Center</ToggleButton>
<ToggleButton value="right">Right</ToggleButton>
</ToggleButtonGroup>
</SistentThemeProvider>`,
`<SistentThemeProvider>
`,
// For multiple selection
`
<ToggleButtonGroup
value={["option1", "option3"]}
onChange={(event, value) => console.log(value)}
value={["bold", "italic"]}
>
<ToggleButton value="option1">Option 1</ToggleButton>
<ToggleButton value="option2">Option 2</ToggleButton>
<ToggleButton value="option3">Option 3</ToggleButton>
<ToggleButton value="bold">Bold</ToggleButton>
<ToggleButton value="italic">Italic</ToggleButton>
<ToggleButton value="underline">Underline</ToggleButton>
</ToggleButtonGroup>
</SistentThemeProvider>`,
`<SistentThemeProvider>
`,
// For size
`
<ToggleButtonGroup value="option1" exclusive size="small">
<ToggleButton value="option1">Small</ToggleButton>
<ToggleButton value="option2">Small</ToggleButton>
</ToggleButtonGroup>
</SistentThemeProvider>`,
`<SistentThemeProvider>
<ToggleButtonGroup value="option1" exclusive size="medium">
<ToggleButton value="option1">Medium</ToggleButton>
<ToggleButton value="option2">Medium</ToggleButton>
</ToggleButtonGroup>
<ToggleButtonGroup value="option1" exclusive size="large">
<ToggleButton value="option1">Large</ToggleButton>
<ToggleButton value="option2">Large</ToggleButton>
</ToggleButtonGroup>
</SistentThemeProvider>`,
`<SistentThemeProvider>
<ToggleButtonGroup value="option1" exclusive color="primary">
<ToggleButton value="option1">Primary</ToggleButton>
<ToggleButton value="option2">Secondary</ToggleButton>
`,
// For color
`
<ToggleButtonGroup value="primary" exclusive color="primary">
<ToggleButton value="primary">Primary</ToggleButton>
<ToggleButton value="secondary">Secondary</ToggleButton>
</ToggleButtonGroup>
`,
// For vertical
`
<ToggleButtonGroup
orientation="vertical"
value="option1"
exclusive
>
<ToggleButton value="option1">Vertical 1</ToggleButton>
<ToggleButton value="option2">Vertical 2</ToggleButton>
<ToggleButton value="option3">Vertical 3</ToggleButton>
</ToggleButtonGroup>
</SistentThemeProvider>`,
`,
];

const ToggleButtonCode = () => {
const { isDark } = useStyledDarkMode();
const location = useLocation();
const [selected, setSelected] = useState("option1");
const [multiSelected, setMultiSelected] = useState(["option1"]);

const handleSingleToggle = (event, value) => {
setSelected(value);
const [exclusiveSelected, setExclusiveSelected] = useState("left");
const [multiSelected, setMultiSelected] = useState(["bold"]);
const [sizeSelected, setSizeSelected] = useState("small");
const [colorSelected, setColorSelected] = useState("primary");
const [verticalSelected, setVerticalSelected] = useState("left");
const handleExclusiveToggle = (event, value) => {
setExclusiveSelected(value);
};

const handleMultiToggle = (event, value) => {
setMultiSelected(value);
};
const handleSizeToggle = (event, value) => {
setSizeSelected(value);
};
const handleColorToggle = (event, value) => {
setColorSelected(value);
};
const handleVerticalToggle = (event, value) => {
setVerticalSelected(value);
};

return (
<SistentLayout title="ToggleButton">
Expand Down Expand Up @@ -124,112 +147,106 @@ const ToggleButtonCode = () => {
/>
</div>
<div className="main-content">
<a id="Single ToggleButton">
<h3>Single ToggleButton</h3>
</a>
<p>
A single `ToggleButton` is used to toggle between two states. Here
is an example:
</p>
<div className="showcase">
<div className="items">
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
<ToggleButton value="toggle1" selected={true}>
Toggle On
</ToggleButton>
</SistentThemeProvider>
</div>
<CodeBlock name="single-toggle" code={codes[0]} />
</div>

<a id="Grouped ToggleButtons (Single Selection)">
<h3>Grouped ToggleButtons (Single Selection)</h3>
<a id="Exclusive Selection">
<h3>Exclusive Selection</h3>
</a>
<p>
Use a `ToggleButtonGroup` to group related buttons for single
selection. The `exclusive` prop ensures that only one button can be
selected at a time.
</p>
<div className="showcase">
<div className="items">
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
<ToggleButtonGroup
value={selected}
value={exclusiveSelected}
exclusive
onChange={handleSingleToggle}
onChange={handleExclusiveToggle}
>
<ToggleButton value="option1">Option 1</ToggleButton>
<ToggleButton value="option2">Option 2</ToggleButton>
<ToggleButton value="left">Left</ToggleButton>
<ToggleButton value="center">Center</ToggleButton>
<ToggleButton value="right">Right</ToggleButton>
</ToggleButtonGroup>
</SistentThemeProvider>
</div>
<CodeBlock name="grouped-single-selection" code={codes[1]} />
<CodeBlock name="exclusive-selection" code={codes[0]} />
</div>

<a id="Grouped ToggleButtons (Multiple Selection)">
<h3>Grouped ToggleButtons (Multiple Selection)</h3>
<a id="Multiple Selection">
<h3>Multiple Selection</h3>
</a>
<p>
Use `ToggleButtonGroup` without the `exclusive` prop to allow users
to select multiple options within a group. This approach is useful
when enabling combinations of settings.
</p>
<div className="showcase">
<div className="items">
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
<ToggleButtonGroup
value={multiSelected}
onChange={handleMultiToggle}
>
<ToggleButton value="option1">Option 1</ToggleButton>
<ToggleButton value="option2">Option 2</ToggleButton>
<ToggleButton value="option3">Option 3</ToggleButton>
<ToggleButton value="bold">Bold</ToggleButton>
<ToggleButton value="italic">Italic</ToggleButton>
<ToggleButton value="underline">Underline</ToggleButton>
</ToggleButtonGroup>
</SistentThemeProvider>
</div>
<CodeBlock name="grouped-multiple-selection" code={codes[2]} />
<CodeBlock name="multiple-selection" code={codes[1]} />
</div>

<a id="ToggleButton Sizes">
<a id="Sizes">
<h3>ToggleButton Sizes</h3>
</a>
<p>
Adjust the size of the `ToggleButton` using the `size` prop. Supported values include
`small`, `medium`, and `large`.
Adjust the size of the `ToggleButton` using the `size` prop.
Supported values include `small`, `medium`, and `large`.
</p>
<div className="showcase">
<div className="items">
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
<ToggleButtonGroup value="option1" exclusive size="small">
<ToggleButtonGroup value={sizeSelected} onChange={handleSizeToggle} exclusive size="small">
<ToggleButton value="option1">Small</ToggleButton>
<ToggleButton value="option2">Small</ToggleButton>
</ToggleButtonGroup>
<ToggleButtonGroup value="option1" exclusive size="large">
<ToggleButtonGroup value={sizeSelected} onChange={handleSizeToggle} exclusive size="medium">
<ToggleButton value="option1">Medium</ToggleButton>
<ToggleButton value="option2">Medium</ToggleButton>
</ToggleButtonGroup>
<ToggleButtonGroup value={sizeSelected} onChange={handleSizeToggle} exclusive size="large">
<ToggleButton value="option1">Large</ToggleButton>
<ToggleButton value="option2">Large</ToggleButton>
</ToggleButtonGroup>
</SistentThemeProvider>
</div>
<CodeBlock name="toggle-button-sizes" code={codes[3]} />
<CodeBlock name="toggle-button-sizes" code={codes[2]} />
</div>

<a id="ToggleButton Colors">
<a id="Colors">
<h3>ToggleButton Colors</h3>
</a>
<p>
Use the `color` prop to set the color scheme for the `ToggleButton`. Common values include
`primary`, `secondary`, and `default`.
</p>
<div className="showcase">
<div className="items">
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
<ToggleButtonGroup value="option1" exclusive color="primary">
<ToggleButton value="option1">Primary</ToggleButton>
<ToggleButton value="option2">Secondary</ToggleButton>
<ToggleButtonGroup value={colorSelected} onChange={handleColorToggle} exclusive color="primary">
<ToggleButton value="primary">Primary</ToggleButton>
<ToggleButton value="secondary">Secondary</ToggleButton>
</ToggleButtonGroup>
</SistentThemeProvider>
</div>
<CodeBlock name="toggle-button-colors" code={codes[3]} />
</div>

<a id="Vertical Buttons">
<h3>Vertical Buttons</h3>
</a>
<div className="showcase">
<div className="items">
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
<ToggleButtonGroup
orientation="vertical"
value={verticalSelected}
onChange={handleVerticalToggle}
exclusive
>
<ToggleButton value="option1">Vertical 1</ToggleButton>
<ToggleButton value="option2">Vertical 2</ToggleButton>
<ToggleButton value="option3">Vertical 3</ToggleButton>
</ToggleButtonGroup>
</SistentThemeProvider>
</div>
<CodeBlock name="toggle-button-colors" code={codes[5]} />
<CodeBlock name="vertical-toggle-buttons" code={codes[4]} />
</div>
</div>
</div>
Expand Down
Loading

0 comments on commit d8ab6b9

Please sign in to comment.