From b43e1fe3199117cba7ccc699a6c6f02f58f45565 Mon Sep 17 00:00:00 2001 From: Mdkaif-123 Date: Sat, 2 Nov 2024 02:32:25 +0530 Subject: [PATCH 1/8] feat: add sistent-divider-component Signed-off-by: Mdkaif-123 --- .../sistent/components/divider/code.js | 8 + .../sistent/components/divider/guidance.js | 8 + .../sistent/components/divider/index.js | 8 + .../Sistent/components/button/index.js | 2 +- .../Sistent/components/divider/code.js | 318 +++++++++++++++++ .../Sistent/components/divider/guidance.js | 147 ++++++++ .../Sistent/components/divider/index.js | 325 ++++++++++++++++++ .../Projects/Sistent/components/index.js | 7 + 8 files changed, 822 insertions(+), 1 deletion(-) create mode 100644 src/pages/projects/sistent/components/divider/code.js create mode 100644 src/pages/projects/sistent/components/divider/guidance.js create mode 100644 src/pages/projects/sistent/components/divider/index.js create mode 100644 src/sections/Projects/Sistent/components/divider/code.js create mode 100644 src/sections/Projects/Sistent/components/divider/guidance.js create mode 100644 src/sections/Projects/Sistent/components/divider/index.js diff --git a/src/pages/projects/sistent/components/divider/code.js b/src/pages/projects/sistent/components/divider/code.js new file mode 100644 index 000000000000..5a2a00856249 --- /dev/null +++ b/src/pages/projects/sistent/components/divider/code.js @@ -0,0 +1,8 @@ +import React from "react"; +import { DividerCode } from "../../../../../sections/Projects/Sistent/components/divider/code"; + +const DividerCodePage = () => { + return ; +}; + +export default DividerCodePage; diff --git a/src/pages/projects/sistent/components/divider/guidance.js b/src/pages/projects/sistent/components/divider/guidance.js new file mode 100644 index 000000000000..7ac75e0d7e34 --- /dev/null +++ b/src/pages/projects/sistent/components/divider/guidance.js @@ -0,0 +1,8 @@ +import React from "react"; +import { DividerGuidance } from "../../../../../sections/Projects/Sistent/components/divider/guidance"; + +const DividerGuidancePage = () => { + return ; +}; + +export default DividerGuidancePage; diff --git a/src/pages/projects/sistent/components/divider/index.js b/src/pages/projects/sistent/components/divider/index.js new file mode 100644 index 000000000000..c0621b575eb7 --- /dev/null +++ b/src/pages/projects/sistent/components/divider/index.js @@ -0,0 +1,8 @@ +import React from "react"; +import SistentDivider from "../../../../../sections/Projects/Sistent/components/divider/index"; + +const SistentDividerPage = () => { + return ; +}; + +export default SistentDividerPage; diff --git a/src/sections/Projects/Sistent/components/button/index.js b/src/sections/Projects/Sistent/components/button/index.js index 680c7d553541..68f51a3bc288 100644 --- a/src/sections/Projects/Sistent/components/button/index.js +++ b/src/sections/Projects/Sistent/components/button/index.js @@ -13,7 +13,7 @@ const SistentButton = () => { const { isDark } = useStyledDarkMode(); return ( - +

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..fab03730ba55 --- /dev/null +++ b/src/sections/Projects/Sistent/components/divider/code.js @@ -0,0 +1,318 @@ +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 = [ + ` + + + + + + + + + + + + + + + + + + `, + + ` + + + + + + +`, + ` + + + + + + + + + +`, + ` + + {content} + CENTER + {content} + LEFT + {content} + RIGHT + {content} + + + + {content} + + `, +]; + +export const DividerCode = () => { + const location = useLocation(); + const { isDark } = useStyledDarkMode(); + + return ( + +
+ +

Divider

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

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

+ +
+
+ + + {content} + CENTER + {content} + LEFT + {content} + RIGHT + {content} + + + + {content} + + +
+ +
+
+
+ + ); +}; diff --git a/src/sections/Projects/Sistent/components/divider/guidance.js b/src/sections/Projects/Sistent/components/divider/guidance.js new file mode 100644 index 000000000000..0706186e55ab --- /dev/null +++ b/src/sections/Projects/Sistent/components/divider/guidance.js @@ -0,0 +1,147 @@ +import React from "react"; +import { navigate } from "gatsby"; +import { useLocation } from "@reach/router"; +import { Row } from "../../../../../reusecore/Layout"; +import { SistentThemeProvider, Container, Box, Divider } from "@layer5/sistent"; +import { SistentLayout } from "../../sistent-layout"; + +import TabButton from "../../../../../reusecore/Button"; +import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode"; + +export const DividerGuidance = () => { + const location = useLocation(); + const { isDark } = useStyledDarkMode(); + + return ( + +
+ +

Divider Component

+ +

+ The Divider component provides a visual separation between content + areas, improving readability and structure in your layouts. +

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

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

+ + + + + +
Item 1
+ +
Item 2
+ + + + + + +

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.
    • +
+
+
+ + ); +}; diff --git a/src/sections/Projects/Sistent/components/divider/index.js b/src/sections/Projects/Sistent/components/divider/index.js new file mode 100644 index 000000000000..bd5a6e0e10e7 --- /dev/null +++ b/src/sections/Projects/Sistent/components/divider/index.js @@ -0,0 +1,325 @@ +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 { Row } from "../../../../../reusecore/Layout"; +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"; + +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 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. +

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

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

+ +

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{" "} + to horizontal (default) or vertical for + 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{" "} + right for 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. +

+ + + + + {content} + CENTER + {content} + LEFT + {content} + RIGHT + {content} + + + + {content} + + + + + +

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

+
+
+ + ); +}; + +export default SistentDivider; diff --git a/src/sections/Projects/Sistent/components/index.js b/src/sections/Projects/Sistent/components/index.js index 7814f6ed237a..fd5b6fefea38 100644 --- a/src/sections/Projects/Sistent/components/index.js +++ b/src/sections/Projects/Sistent/components/index.js @@ -65,6 +65,13 @@ const componentsData = [ "Containers align and center content, providing responsive layout options for different screen sizes.", url: "/projects/sistent/components/container", }, + { + id: 9, + name: "Divider", + description: + "The Divider component adds a thin line to separate sections, enhancing layout clarity.", + url: "/projects/sistent/components/divider", + }, ]; const SistentComponents = () => { From d20a044dc878789c310ff45886892f8cb53d628a Mon Sep 17 00:00:00 2001 From: Mdkaif-123 Date: Wed, 6 Nov 2024 02:38:14 +0530 Subject: [PATCH 2/8] fix: paragraph color on hover Signed-off-by: Mdkaif-123 --- .../Sistent/components/divider/code.js | 20 +++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/src/sections/Projects/Sistent/components/divider/code.js b/src/sections/Projects/Sistent/components/divider/code.js index fab03730ba55..4c6cbf2cd822 100644 --- a/src/sections/Projects/Sistent/components/divider/code.js +++ b/src/sections/Projects/Sistent/components/divider/code.js @@ -250,12 +250,12 @@ export const DividerCode = () => {

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

+

+ The Divider component supports two orientations: horizontal and + vertical. Each orientation serves different layout needs and + enhances the visual structure of your content. +

@@ -285,12 +285,12 @@ export const DividerCode = () => {

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

+

+ The Divider component supports two orientations: horizontal and + vertical. Each orientation serves different layout needs and + enhances the visual structure of your content. +

From ec4fa5cab7aa00940af290c52c9a9644966503a6 Mon Sep 17 00:00:00 2001 From: Mdkaif-123 Date: Wed, 6 Nov 2024 02:39:33 +0530 Subject: [PATCH 3/8] chore: removed initialTheme from code example Signed-off-by: Mdkaif-123 --- src/sections/Projects/Sistent/components/divider/code.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/sections/Projects/Sistent/components/divider/code.js b/src/sections/Projects/Sistent/components/divider/code.js index 4c6cbf2cd822..58bc7c55d7ba 100644 --- a/src/sections/Projects/Sistent/components/divider/code.js +++ b/src/sections/Projects/Sistent/components/divider/code.js @@ -51,7 +51,7 @@ const content = ( ); const codes = [ - ` + ` @@ -71,7 +71,7 @@ const codes = [ `, - ` + ` `, ` - + `, - ` + ` {content} CENTER From c1efa8c88b7adbe08e124883d005c54a0ee3e94b Mon Sep 17 00:00:00 2001 From: Mdkaif-123 Date: Wed, 6 Nov 2024 02:40:39 +0530 Subject: [PATCH 4/8] chore: fix component not used warning Signed-off-by: Mdkaif-123 --- .../kanvas-visualize-banner.js | 135 +++++++++--------- 1 file changed, 67 insertions(+), 68 deletions(-) diff --git a/src/sections/Kanvas/Kanvas-visualize/kanvas-visualize-banner.js b/src/sections/Kanvas/Kanvas-visualize/kanvas-visualize-banner.js index 2d9f0db74702..dcfafdb31196 100644 --- a/src/sections/Kanvas/Kanvas-visualize/kanvas-visualize-banner.js +++ b/src/sections/Kanvas/Kanvas-visualize/kanvas-visualize-banner.js @@ -1,86 +1,82 @@ import React from "react"; import styled from "styled-components"; -import Button from "../../../reusecore/Button"; import KanvasBtn from "../kanvas-buttons"; const VisualizeBannerWrapper = styled.div` - + display: flex; + align-items: center; + justify-content: center; + .banner { + margin: 3%; + position: relative; + z-index: 10; display: flex; + flex-direction: column; + background-color: ${(props) => props.theme.grey121212EightToWhiteEight}; + border-radius: 2rem; + max-width: 1920px; + width: 90vw; + max-height: 50rem; align-items: center; - justify-content: center; - .banner { - margin: 3%; - position: relative; - z-index: 10; - display: flex; - flex-direction: column; - background-color: ${props => props.theme.grey121212EightToWhiteEight}; - border-radius: 2rem; - max-width: 1920px; - width: 90vw; - max-height: 50rem; - align-items: center; - padding: 4% 5% 6%; - transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); - } - + padding: 4% 5% 6%; + transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); + } - .banner-text { - color: ${props => props.theme.primaryColor}; - display: flex; - flex-direction: column; - text-align: center; - align-items: center; - z-index: 1; - padding: 3% 0%; - opacity: 1; - transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); - } + .banner-text { + color: ${(props) => props.theme.primaryColor}; + display: flex; + flex-direction: column; + text-align: center; + align-items: center; + z-index: 1; + padding: 3% 0%; + opacity: 1; + transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); + } - h1 { - /* font-size: 4rem; */ - /* color: ${props => props.theme.primaryColor}; */ - position: relative; - display: inline-block; - @media only screen and (min-width: 1400px) { - font-size: 3.75rem; - } + h1 { + /* font-size: 4rem; */ + /* color: ${(props) => props.theme.primaryColor}; */ + position: relative; + display: inline-block; + @media only screen and (min-width: 1400px) { + font-size: 3.75rem; } + } - h4 { - padding: 3% 0% 5%; - color: #A0AAAA; - - span { - color: ${props => props.theme.primaryColor}; - transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); - } - - @media only screen and (max-width: 500px) { - font-size: 1.1rem; - } + h4 { + padding: 3% 0% 5%; + color: #a0aaaa; + span { + color: ${(props) => props.theme.primaryColor}; + transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); } - h5 { - padding: 2rem 0; + @media only screen and (max-width: 500px) { + font-size: 1.1rem; } + } - p { - padding-top: 2rem; - } + h5 { + padding: 2rem 0; + } - .banner-image { - padding: 5%; - } - img { - position: relative; - z-index: 0; - opacity: 0.4; - filter: blur(1px); - box-shadow: ${props => props.theme.boxShadowGreen00D3A9}; - transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); - } + p { + padding-top: 2rem; + } + + .banner-image { + padding: 5%; + } + img { + position: relative; + z-index: 0; + opacity: 0.4; + filter: blur(1px); + box-shadow: ${(props) => props.theme.boxShadowGreen00D3A9}; + transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); + } `; const KanvasisualizeBanner = () => { @@ -92,7 +88,10 @@ const KanvasisualizeBanner = () => {

Visualize your infrastructure

-

See your designs in action. Operate with best practices.

+

+ See your designs in action. Operate with{" "} + best practices. +

{/*
@@ -103,4 +102,4 @@ const KanvasisualizeBanner = () => { ); }; -export default KanvasisualizeBanner; \ No newline at end of file +export default KanvasisualizeBanner; From 82201debfba7c8165f4ba4a0d6b03a73f40d50b7 Mon Sep 17 00:00:00 2001 From: Mdkaif-123 Date: Thu, 7 Nov 2024 01:11:31 +0530 Subject: [PATCH 5/8] chore: refactor the code example indentation Signed-off-by: Mdkaif-123 --- .../Sistent/components/divider/code.js | 152 +++++++++--------- 1 file changed, 75 insertions(+), 77 deletions(-) diff --git a/src/sections/Projects/Sistent/components/divider/code.js b/src/sections/Projects/Sistent/components/divider/code.js index 58bc7c55d7ba..dd2eaa045e83 100644 --- a/src/sections/Projects/Sistent/components/divider/code.js +++ b/src/sections/Projects/Sistent/components/divider/code.js @@ -51,86 +51,84 @@ const content = ( ); const codes = [ - ` - - - - - - - - - - - - - - - - - - `, - + ` + + + + + + + + + + + + + + + + + + `, ` - - - - - - + + + + + + `, - ` - - - - - - - - - + ` + + + + + + + + `, - ` - - {content} - CENTER - {content} - LEFT - {content} - RIGHT - {content} - - - - {content} - - `, + ` + + {content} + CENTER + {content} + LEFT + {content} + RIGHT + {content} + + + + {content} + + `, ]; export const DividerCode = () => { From 1b49a8f8896f52ef8423ed5d1c56acf9cfa86bb6 Mon Sep 17 00:00:00 2001 From: Mdkaif-123 Date: Mon, 11 Nov 2024 23:14:13 +0530 Subject: [PATCH 6/8] chore: removed SistentThemeProvider from code example Signed-off-by: Mdkaif-123 --- .../Sistent/components/divider/code.js | 26 ++++++------------- 1 file changed, 8 insertions(+), 18 deletions(-) diff --git a/src/sections/Projects/Sistent/components/divider/code.js b/src/sections/Projects/Sistent/components/divider/code.js index dd2eaa045e83..f2f7bc30c0f6 100644 --- a/src/sections/Projects/Sistent/components/divider/code.js +++ b/src/sections/Projects/Sistent/components/divider/code.js @@ -51,8 +51,7 @@ const content = ( ); const codes = [ - ` - + ` @@ -68,10 +67,8 @@ const codes = [ - - `, - ` - `, + ` - - -`, - ` - `, + ` - - -`, - ` - + `, + ` {content} CENTER {content} @@ -127,8 +118,7 @@ const codes = [ {content} - - `, + `, ]; export const DividerCode = () => { From 2e22f8b39c6d0580a66a51afc48b9645e04d845a Mon Sep 17 00:00:00 2001 From: Mdkaif-123 Date: Tue, 12 Nov 2024 00:18:09 +0530 Subject: [PATCH 7/8] feat: add props section Signed-off-by: Mdkaif-123 --- .../Sistent/components/divider/code.js | 128 +++++++++--------- .../Sistent/components/divider/index.js | 78 ++++++++++- 2 files changed, 138 insertions(+), 68 deletions(-) diff --git a/src/sections/Projects/Sistent/components/divider/code.js b/src/sections/Projects/Sistent/components/divider/code.js index f2f7bc30c0f6..3004932433c6 100644 --- a/src/sections/Projects/Sistent/components/divider/code.js +++ b/src/sections/Projects/Sistent/components/divider/code.js @@ -52,73 +52,73 @@ const content = ( const codes = [ ` - - - - - - - - - - - - - - - - `, + + + + + + + + + + + + + + + +`, ` - - - - `, + sx={{ + display: "inline-flex", + alignItems: "center", + border: "1px solid", + borderColor: "divider", + borderRadius: 2, + bgcolor: "background.paper", + color: "text.secondary", + "& svg": { + m: 1, + }, + }} + > + + + +`, ` - - - - - - `, + sx={{ + display: "flex", + alignItems: "center", + border: "1px solid", + borderColor: "divider", + borderRadius: 1, + bgcolor: "background.paper", + color: "text.secondary", + "& svg": { + m: 1, + }, + }} + > + + + + + +`, ` - {content} - CENTER - {content} - LEFT - {content} - RIGHT - {content} - - - - {content} - `, + {content} + CENTER + {content} + LEFT + {content} + RIGHT + {content} + + + + {content} +`, ]; export const DividerCode = () => { diff --git a/src/sections/Projects/Sistent/components/divider/index.js b/src/sections/Projects/Sistent/components/divider/index.js index bd5a6e0e10e7..06b58ba3e8a1 100644 --- a/src/sections/Projects/Sistent/components/divider/index.js +++ b/src/sections/Projects/Sistent/components/divider/index.js @@ -108,6 +108,80 @@ const SistentDivider = () => { in lists, cards, or flex containers, the Divider is accessible and can be styled to fit various design needs.

+ +

Props

+

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropTypeDefault ValueDescription
variantstring"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. +
orientationstring"horizontal" + Specifies the divider's orientation. It can be + "horizontal" or "vertical". Default is "horizontal". +
componentelementType"div" + 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". +
sxobject{} + A custom style prop to modify the divider's appearance, + such as color, height, or margin. Accepts a style object. +
rolestring"separator" + Sets the ARIA role for accessibility purposes, generally + set as "separator" to indicate the divider's role. +
flexItembooleanfalse + If true, applies the divider as a flex item, adjusting it + within a flexbox layout. Default is false. +
+
+

Ways to use Divider Component

 @@ -191,7 +265,6 @@ const SistentDivider = () => { properly within a flex container, ensuring it aligns with other flex items seamlessly.

- { compact layout.

- { Use the textAlign prop to align elements that are wrapped by the Divider.

- @@ -295,7 +366,6 @@ const SistentDivider = () => { -

Accessibility

 From 089e64cf6f7ef225c0654cb15042ccd2b104cdfd Mon Sep 17 00:00:00 2001 From: Mdkaif-123 Date: Tue, 12 Nov 2024 00:21:08 +0530 Subject: [PATCH 8/8] fix: typo Signed-off-by: Mdkaif-123 --- src/sections/Projects/Sistent/components/divider/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/sections/Projects/Sistent/components/divider/index.js b/src/sections/Projects/Sistent/components/divider/index.js index 06b58ba3e8a1..c83b9b80e9d4 100644 --- a/src/sections/Projects/Sistent/components/divider/index.js +++ b/src/sections/Projects/Sistent/components/divider/index.js @@ -144,7 +144,7 @@ const SistentDivider = () => { component elementType - "div" + Specifies the component type for the divider. It can be set to any valid HTML element, such as "li" to use the