Operate your infrastructure
-See your designs in action. Operate with best practices.
-Visualize your infrastructure
++ See your designs in action. Operate with{" "} + best practices. +
+Button
diff --git a/src/sections/Projects/Sistent/components/divider/code.js b/src/sections/Projects/Sistent/components/divider/code.js new file mode 100644 index 000000000000..3004932433c6 --- /dev/null +++ b/src/sections/Projects/Sistent/components/divider/code.js @@ -0,0 +1,306 @@ +import { useLocation } from "@reach/router"; +import { navigate } from "gatsby"; +import React from "react"; + +import { + Box, + Chip, + Divider, + List, + ListItem, + ListItemText, + SistentThemeProvider, + styled, +} from "@layer5/sistent"; + +import TabButton from "../../../../../reusecore/Button"; +import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode"; +import { SistentLayout } from "../../sistent-layout"; + +import FormatBoldIcon from "@mui/icons-material/FormatBold"; +import FormatItalicIcon from "@mui/icons-material/FormatItalic"; +import FormatAlignRightIcon from "@mui/icons-material/FormatAlignRight"; +import FormatAlignCenterIcon from "@mui/icons-material/FormatAlignCenter"; +import FormatAlignLeftIcon from "@mui/icons-material/FormatAlignLeft"; + +import { CodeBlock } from "../button/code-block"; + +const style = { + py: 0, + width: "100%", + maxWidth: 360, + borderRadius: 2, + border: "1px solid", + borderColor: "divider", + backgroundColor: "background.paper", +}; + +const Root = styled("div")(({ theme }) => ({ + width: "100%", + ...theme.typography.body2, + color: theme.palette.text.secondary, + "& > :not(style) ~ :not(style)": { + marginTop: theme.spacing(2), + }, +})); + +const content = ( ++ {"Lorem ipsum dolor sit amet, consectetur adipiscing elit."} +
+); + +const codes = [ + `-
+
Divider
+ ++ The Divider component adds a subtle line to separate content + sections, supporting horizontal/vertical orientation and + customizable alignment for text or icons. Ideal for enhancing layout + clarity. +
+ +Variant Example
+ ++ The Divider component supports three variants: fullWidth (default), + inset, and middle. +
+-
+
Flex Item Example
+ +
+ The flexItem prop allows the Divider to function
+ properly within a flex container, ensuring it aligns with other flex
+ items seamlessly.
+
Orientation Example
+ ++ The Divider component supports two orientations: horizontal and + vertical. Each orientation serves different layout needs and + enhances the visual structure of your content. +
+With children Example
+ ++ The Divider component supports two orientations: horizontal and + vertical. Each orientation serves different layout needs and + enhances the visual structure of your content. +
+Divider Component
+ ++ The Divider component provides a visual separation between content + areas, improving readability and structure in your layouts. +
+ +Variants
+ +The Divider component supports three variants:
+-
+
- + fullWidth: The default variant that spans the + full width of its container. + +
- + inset: This variant indents the divider to create + visual hierarchy. + +
- + middle: Centers the divider within its container, + useful for segmenting content. + +
Orientation
+ +The Divider can be oriented horizontally or vertically:
+-
+
- + Horizontal: Default orientation, ideal for + separating content sections. + +
- + Vertical: Use when you need to separate items in + a flex layout or sidebar. + +
Using as a Flex Item
+ +
+ When using the Divider in a flex container, set the{" "}
+ flexItem prop. This ensures proper alignment and sizing
+ relative to other flex items.
+
Accessibility
+ +
+ The Divider is announced by screen readers, ensuring users with
+ assistive technologies can navigate your layout effectively. If the
+ Divider is purely decorative, consider using{" "}
+ aria-hidden="true".
+
Usage Examples
+ +Here are a few scenarios where you might use the Divider:
+-
+
- Separating sections in a card layout. +
- Dividing items in a list. +
- Creating visual breaks in a form. +
+ {"Lorem ipsum dolor sit amet, consectetur adipiscing elit."} +
+); + +const SistentDivider = () => { + const location = useLocation(); + const { isDark } = useStyledDarkMode(); + + return ( +Divider
+ ++ The Divider component adds a subtle line to separate content sections, + supporting horizontal/vertical orientation and customizable alignment + for text or icons. Ideal for enhancing layout clarity. +
++ The Divider component provides a simple line to visually separate + content sections, enhancing readability and hierarchy in layouts. It + supports customization options such as orientation (horizontal or + vertical), variants (fullWidth, inset, and middle), and flexible + alignment of text or icons. Perfect for cleanly segmenting elements + in lists, cards, or flex containers, the Divider is accessible and + can be styled to fit various design needs. +
+ +Props
+ +| Prop | +Type | +Default Value | +Description | +
|---|---|---|---|
| variant | +string | +"fullWidth" | ++ Defines the style of the divider. Can be "fullWidth", + "inset", or "middle". "fullWidth" is the default and takes + the full width of its container. + | +
| orientation | +string | +"horizontal" | ++ Specifies the divider's orientation. It can be + "horizontal" or "vertical". Default is "horizontal". + | +
| component | +elementType | ++ | + Specifies the component type for the divider. It can be + set to any valid HTML element, such as "li" to use the + divider within lists. Default is "div". + | +
| sx | +object | +{} | ++ A custom style prop to modify the divider's appearance, + such as color, height, or margin. Accepts a style object. + | +
| role | +string | +"separator" | ++ Sets the ARIA role for accessibility purposes, generally + set as "separator" to indicate the divider's role. + | +
| flexItem | +boolean | +false | ++ If true, applies the divider as a flex item, adjusting it + within a flexbox layout. Default is false. + | +
Ways to use Divider Component
+ +Here are ways to use the Divider component effectively:
+-
+
- + Section Separation: Use to divide sections in + forms, articles, or settings pages to improve readability. + +
-
+ Orientation Options: Set
orientation{" "} + tohorizontal(default) orverticalfor + versatile layouts. +
+ -
+ List Item Separators: Insert between list items
+ using
variant="inset"for a more subtle divider. +
+ -
+ Text Alignment: Wrap text using{" "}
+
textAlign="left",center, or{" "} +rightfor labeled dividers. +
+ -
+ In Flex Containers: With
flexItem, + the Divider integrates seamlessly in flex layouts. +
+ - + Chip Integration: Place chips within dividers to + label or categorize content. + +
1. Variants
+ ++ The Divider component supports three variants: fullWidth (default), + inset, and middle. +
+Variants of the Divider Component
+-
+
- + Full Width: The default variant that spans the + entire width of its container. + +
- + Inset: Creates an indented Divider for a nested + appearance, useful for lists. + +
- + Middle: Renders the Divider in the center, + allowing content to be placed above and below it. + +
-
+
2. Flex item
+ +
+ The flexItem prop allows the Divider to function
+ properly within a flex container, ensuring it aligns with other flex
+ items seamlessly.
+
3. Orientation
+ ++ The Divider component supports two orientations: horizontal and + vertical. Each orientation serves different layout needs and + enhances the visual structure of your content. +
+Horizontal:
++ This is the default orientation of the Divider. It is used to + separate content sections horizontally, making it ideal for + creating clear distinctions between different blocks of + information, such as headings and paragraphs or between card + elements. A horizontal divider typically spans the full width of + its container, effectively guiding the user eye through the + layout. +
+ +Vertical:
++ The vertical orientation is useful in scenarios where you want to + separate items or components side by side, such as in a flex + container or sidebar. This orientation helps to create visual + breaks between closely related elements, enhancing readability and + organization. A vertical divider can be particularly effective in + navigation menus or grouped items where you want to maintain a + compact layout. +
+4. With children
+ +
+ Use the textAlign prop to align elements that are
+ wrapped by the Divider.
+
Accessibility
+ +
+ Due to its implicit role of separator, the Divider, which is a
+ `hr` element, will be announced by screen readers as a
+ "Horizontal Splitter" (or vertical, if you're using the orientation
+ prop). If you're using it as a purely stylistic element, we
+ recommend setting aria-hidden="true" which will make screen readers
+ bypass it.
+
+
+ If you're using the Divider to wrap other elements, such as text or
+ chips, we recommend changing its rendered element to a plain
+ `div`
+ using the component prop, and setting role="presentation". This
+ ensures that it's not announced by screen readers while still
+ preserving the semantics of the elements inside it.
+