diff --git a/gatsby-node.js b/gatsby-node.js index c38e2531ceed..bf96eed7e0d2 100644 --- a/gatsby-node.js +++ b/gatsby-node.js @@ -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" }, diff --git a/src/sections/Projects/Sistent/components/button/code.js b/src/sections/Projects/Sistent/components/button/code.js index a8d4903d1978..3b248001ebae 100644 --- a/src/sections/Projects/Sistent/components/button/code.js +++ b/src/sections/Projects/Sistent/components/button/code.js @@ -178,4 +178,4 @@ const ButtonCode = () => { ); }; -export default ButtonCode; +export default ButtonCode; \ No newline at end of file diff --git a/src/sections/Projects/Sistent/components/content.js b/src/sections/Projects/Sistent/components/content.js index 388e34486f06..ca8d04d14ab4 100644 --- a/src/sections/Projects/Sistent/components/content.js +++ b/src/sections/Projects/Sistent/components/content.js @@ -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 }; \ No newline at end of file +module.exports = { componentsData }; diff --git a/src/sections/Projects/Sistent/components/toggle-button/code.js b/src/sections/Projects/Sistent/components/toggle-button/code.js new file mode 100644 index 000000000000..ffc1cd0aaa66 --- /dev/null +++ b/src/sections/Projects/Sistent/components/toggle-button/code.js @@ -0,0 +1,290 @@ +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 + ` + + Left + Center + Right + + `, + // For multiple selection + ` + + Toggle Button 1 + Toggle Button 1 + Toggle Button 1 + + `, + // For size + ` + + Small + Small + + + Medium + Medium + + + Large + Large + + `, + // For color + ` + + Primary + Secondary + + `, + // For vertical + ` + + Vertical 1 + Vertical 2 + Vertical 3 + + `, +]; + +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 ( + +
+ +

ToggleButton

+ +

+ 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. +

+
+ + navigate("/projects/sistent/components/toggle-button") + } + title="Overview" + /> + + navigate("/projects/sistent/components/toggle-button/guidance") + } + title="Guidance" + /> + + navigate("/projects/sistent/components/toggle-button/code") + } + title="Code" + /> +
+
+ +

Exclusive Selection

+ +
+
+ + + Left + Center + Right + + +
+ +
+ + +

Multiple Selection

+ +
+
+ + + Toggle Button 1 + Toggle Button 2 + Toggle Button 3 + + +
+ +
+ + +

ToggleButton Sizes

+ +

+ Adjust the size of the `ToggleButton` using the `size` prop. + Supported values include `small`, `medium`, and `large`. +

+
+
+ +
+ + Small + Small + + + + Medium + Medium + + + + Large + Large + +
+ +
+ +
+ + +

ToggleButton Colors

+ +
+
+ + + Primary + Secondary + + +
+ +
+ + +

Vertical Buttons

+ +
+
+ + + Vertical 1 + Vertical 2 + Vertical 3 + + +
+ +
+
+
+ + ); +}; + +export default ToggleButtonCode; diff --git a/src/sections/Projects/Sistent/components/toggle-button/guidance.js b/src/sections/Projects/Sistent/components/toggle-button/guidance.js new file mode 100644 index 000000000000..2fcc7de22c88 --- /dev/null +++ b/src/sections/Projects/Sistent/components/toggle-button/guidance.js @@ -0,0 +1,204 @@ +import React from "react"; +import { navigate } from "gatsby"; +import { useLocation } from "@reach/router"; +import { Row } from "../../../../../reusecore/Layout"; +import { + ToggleButton, + ToggleButtonGroup, + SistentThemeProvider, +} from "@layer5/sistent"; +import { SistentLayout } from "../../sistent-layout"; +import TabButton from "../../../../../reusecore/Button"; +import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode"; + +const ToggleButtonGuidance = () => { + const location = useLocation(); + const { isDark } = useStyledDarkMode(); + + return ( + +
+ +

ToggleButton

+ +

+ 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. +

+
+ + navigate("/projects/sistent/components/toggle-button") + } + title="Overview" + /> + + navigate("/projects/sistent/components/toggle-button/guidance") + } + title="Guidance" + /> + + navigate("/projects/sistent/components/toggle-button/code") + } + title="Code" + /> +
+
+ +

Functionality

+ +

+ The `ToggleButton` and `ToggleButtonGroup` components provide an + efficient way to handle user interactions for toggling states or + selecting one or multiple options. Below are some common use cases. +

+

Exclusive Selection

+

+ Use an exclusive `ToggleButtonGroup` when only one selection is + allowed at a time. This is useful for scenarios like aligning text + to the left, center, or right. +

+ + + + Left + Center + Right + + + + +

Multiple Selection

+

+ Enable multiple selections within a `ToggleButtonGroup` for cases + where users need to toggle multiple options, such as enabling bold, + italic, and underline text styling simultaneously. +

+ + + + Toggle Button 1 + Toggle Button 2 + Toggle Button 3 + + + + +

Sizes

+

+ Adjust the size of the `ToggleButton` using the `size` prop. This + property supports `small`, `medium`, and `large` values to suit + various design requirements. +

+
+
+ +
+ + Small + Small + + + + Medium + Medium + + + + + Large + + + Large + + +
+ +
+
+ +

Colors

+

+ Use the `color` prop to style the `ToggleButtonGroup` with + pre-defined theme colors, such as `primary` or `secondary`. This + ensures consistency across the application. +

+ + + + Primary + Secondary + + + + +

Vertical Orientation

+

+ The `orientation` prop allows you to arrange toggle buttons + vertically instead of horizontally. This is ideal for menus or + options requiring more vertical space. +

+ + + + Vertical 1 + Vertical 2 + Vertical 3 + + + +
+
+ + ); +}; + +export default ToggleButtonGuidance; diff --git a/src/sections/Projects/Sistent/components/toggle-button/index.js b/src/sections/Projects/Sistent/components/toggle-button/index.js new file mode 100644 index 000000000000..1464c93cc3de --- /dev/null +++ b/src/sections/Projects/Sistent/components/toggle-button/index.js @@ -0,0 +1,265 @@ +import React from "react"; +import { navigate } from "gatsby"; +import { useLocation } from "@reach/router"; + +import { + SistentThemeProvider, + ToggleButtonGroup, + ToggleButton, + Box, +} from "@layer5/sistent"; +import TabButton from "../../../../../reusecore/Button"; +import { SistentLayout } from "../../sistent-layout"; +import { Row } from "../../../../../reusecore/Layout"; +import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode"; + +const formatButtons = [ + ToggleButton 1, + ToggleButton 2, + ToggleButton 3, +]; + +const SistentToggleButton = () => { + const location = useLocation(); + const { isDark } = useStyledDarkMode(); + const [formats, setFormats] = React.useState(() => ["bold"]); + + const handleFormat = (event, newFormats) => { + setFormats(newFormats); + }; + + return ( + +
+ +

ToggleButton

+ +

+ 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. +

+
+ navigate("/projects/sistent/components/toggle-button")} + title="Overview" + /> + navigate("/projects/sistent/components/toggle-button/guidance")} + title="Guidance" + /> + navigate("/projects/sistent/components/toggle-button/code")} + title="Code" + /> +
+
+ +

Basic Usage

+ +

+ Basic toggle buttons allow users to make multiple selections easily, + with each button’s state reflecting whether it is selected. For + example, in text formatting, users can choose "Bold," "Italic," or + "Underline" simultaneously to customize their text. The selected + states are stored in an array, making it simple to manage and apply + changes dynamically. This ensures seamless functionality and a + polished user experience. +

+ + + + {formatButtons} + + + + +

Exclusive Selection

+ +

+ With exclusive selection, only one option can be selected at a time. + This is useful in scenarios where mutually exclusive choices are + required, such as selecting a single alignment for text (e.g., + "Left," "Center," or "Right"). The `exclusive` prop ensures that + toggling one button automatically deselects the others, maintaining + clarity and consistency in user inputs. +

+ + + { + setFormats([newFormat]); + }} + aria-label="text formatting" + > + {formatButtons} + + + + +

Vertical Toggle

+ +

+ Toggle buttons can be stacked vertically by setting the orientation + prop to "vertical." This layout is ideal for menus, settings panels, + or options where vertical alignment improves readability and ease of + access. Vertical toggle groups are particularly helpful on smaller + screens or mobile devices, ensuring options remain accessible without + compromising on space. +

+ + + + {formatButtons} + + + + +

Sizes

+ +

+ The ToggleButtonGroup component supports different sizes to match + the design requirements of your application. Available sizes include + "small," "medium" (default), and "large." By adjusting the size, + you can ensure that buttons are appropriately scaled for their + context, whether it's a compact toolbar or a full-screen settings + menu. +

+ + + *": { + m: 1, + }, + }} + > + + {formatButtons} + + + {formatButtons} + + + {formatButtons} + + + + + +

Disabled

+ +

+ All toggle buttons within a group can be disabled by setting the + `disabled` prop on the `ToggleButtonGroup` component. This is + useful in scenarios where selections should be temporarily or + permanently unavailable to users, such as when certain features are + restricted or conditions are not met for using them. +

+ + + + {formatButtons} + + + + +

Color

+ +

+ Toggle buttons can be styled with different colors using the `color` + prop. Available options include "primary" and "secondary," among + others, depending on your theme configuration. This customization + helps to visually differentiate buttons, emphasizing their purpose + and improving user interaction. +

+ + + *": { + m: 1, + }, + }} + > + + {formatButtons} + + + {formatButtons} + + + + +
+
+ + ); +}; + +export default SistentToggleButton;