Skip to content
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

Add toggle-button component #6127

Open
wants to merge 4 commits into
base: master
Choose a base branch
from
+738 −285
Open

Add toggle-button component #6127

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
fe4e389
Add toggle-button component
eyeaadil Dec 19, 2024
1f86b76
Removed unnecessary console.log and reverted package-lock.json changes
eyeaadil Dec 20, 2024
ee92d60
correct the paragraph in each file
eyeaadil Dec 20, 2024
787218b
Enhance the toggle-button component
eyeaadil Dec 26, 2024
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
1 change: 0 additions & 1 deletion gatsby-node.js
View file
Open in desktop
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Revert changeous in this file

Original file line number Diff line number Diff line change
Expand Up @@ -727,7 +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
311 changes: 30 additions & 281 deletions package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion src/components/handbook-navigation/TocPagination.js
View file
Open in desktop
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/button/code.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -178,4 +178,4 @@ const ButtonCode = () => {
);
};

export default ButtonCode;
export default ButtonCode;
10 changes: 9 additions & 1 deletion src/sections/Projects/Sistent/components/content.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -95,6 +95,14 @@ const componentsData = [
url: "/projects/sistent/components/backdrop",
src: "/backdrop",
},
{
id: 13,
name: "ToggleButton",
description:
"ToggleButton allows users to switch between two or more states, commonly used in forms or settings for quick toggles.",
url: "/projects/sistent/components/toggle-button",
src: "/toggle-button",
},
];

module.exports = { componentsData };
module.exports = { componentsData };
257 changes: 257 additions & 0 deletions src/sections/Projects/Sistent/components/toggle-button/code.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,257 @@
import React, { useState } from "react";
import { navigate } from "gatsby";
import { useLocation } from "@reach/router";

import {
SistentThemeProvider,
ToggleButton,
ToggleButtonGroup,
} from "@layer5/sistent";
import { SistentLayout } from "../../sistent-layout";
import { CodeBlock } from "../button/code-block";
import TabButton from "../../../../../reusecore/Button";
import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode";

const codes = [
// For exclusive selection
`
<ToggleButtonGroup
value="left"
exclusive
>
<ToggleButton value="left">Left</ToggleButton>
<ToggleButton value="center">Center</ToggleButton>
<ToggleButton value="right">Right</ToggleButton>
</ToggleButtonGroup>
`,
// For multiple selection
`
<ToggleButtonGroup
value={["bold", "italic"]}
>
<ToggleButton value="bold">Bold</ToggleButton>
<ToggleButton value="italic">Italic</ToggleButton>
<ToggleButton value="underline">Underline</ToggleButton>
</ToggleButtonGroup>
`,
// For size
`
<ToggleButtonGroup value="option1" exclusive size="small">
<ToggleButton value="option1">Small</ToggleButton>
<ToggleButton value="option2">Small</ToggleButton>
</ToggleButtonGroup>
<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>
`,
// 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>
`,
];

const ToggleButtonCode = () => {
const { isDark } = useStyledDarkMode();
const location = useLocation();
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">
<div className="content">
<a id="Identity">
<h2>ToggleButton</h2>
</a>
<p>
The `ToggleButton` and `ToggleButtonGroup` are versatile components
that can be used for a wide range of applications. Their intuitive
design ensures users can make selections easily and confidently.
Whether it's enabling a setting, selecting a mode, or choosing
multiple options, these components are built to enhance user
experience across different scenarios.
</p>
<div className="filterBtns">
<TabButton
className={
location.pathname === "/projects/sistent/components/toggle-button"
? "active"
: ""
}
onClick={() =>
navigate("/projects/sistent/components/toggle-button")
}
title="Overview"
/>
<TabButton
className={
location.pathname ===
"/projects/sistent/components/toggle-button/guidance"
? "active"
: ""
}
onClick={() =>
navigate("/projects/sistent/components/toggle-button/guidance")
}
title="Guidance"
/>
<TabButton
className={
location.pathname ===
"/projects/sistent/components/toggle-button/code"
? "active"
: ""
}
onClick={() =>
navigate("/projects/sistent/components/toggle-button/code")
}
title="Code"
/>
</div>
<div className="main-content">
<a id="Exclusive Selection">
<h3>Exclusive Selection</h3>
</a>
<div className="showcase">
<div className="items">
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
<ToggleButtonGroup
value={exclusiveSelected}
exclusive
onChange={handleExclusiveToggle}
>
<ToggleButton value="left">Left</ToggleButton>
<ToggleButton value="center">Center</ToggleButton>
<ToggleButton value="right">Right</ToggleButton>
</ToggleButtonGroup>
</SistentThemeProvider>
</div>
<CodeBlock name="exclusive-selection" code={codes[0]} />
</div>

<a id="Multiple Selection">
<h3>Multiple Selection</h3>
</a>
<div className="showcase">
<div className="items">
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
<ToggleButtonGroup
value={multiSelected}
onChange={handleMultiToggle}
>
<ToggleButton value="bold">Bold</ToggleButton>
<ToggleButton value="italic">Italic</ToggleButton>
<ToggleButton value="underline">Underline</ToggleButton>
</ToggleButtonGroup>
</SistentThemeProvider>
</div>
<CodeBlock name="multiple-selection" code={codes[1]} />
</div>

<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`.
</p>
<div className="showcase">
<div className="items">
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
<ToggleButtonGroup value={sizeSelected} onChange={handleSizeToggle} exclusive size="small">
<ToggleButton value="option1">Small</ToggleButton>
<ToggleButton value="option2">Small</ToggleButton>
</ToggleButtonGroup>
<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[2]} />
</div>

<a id="Colors">
<h3>ToggleButton Colors</h3>
</a>
<div className="showcase">
<div className="items">
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
<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="vertical-toggle-buttons" code={codes[4]} />
</div>
</div>
</div>
</SistentLayout>
);
};

export default ToggleButtonCode;
Loading
Loading