From b7bc06ba8128a0e15f84b033049341a55b4b5239 Mon Sep 17 00:00:00 2001 From: Rishi Raj Date: Thu, 5 Feb 2026 18:27:05 +0530 Subject: [PATCH 1/2] feat: implement dynamic routing for Sistent components Migrate Sistent components to MDX-based dynamic routing. This removes the hardcoded content.js and replaces it with a scalable, GraphQL-driven approach suitable for large component libraries. Signed-off-by: Rishi Raj --- gatsby-node.js | 72 +++-- .../sistent/components/accordion/index.mdx | 11 + .../sistent/components/avatar-group/index.mdx | 11 + .../sistent/components/avatar/index.mdx | 11 + .../sistent/components/backdrop/index.mdx | 11 + .../sistent/components/badge/index.mdx | 11 + .../sistent/components/box/index.mdx | 11 + .../sistent/components/button-group/index.mdx | 11 + .../sistent/components/button/index.mdx | 11 + .../sistent/components/chip/index.mdx | 11 + .../components/circularprogress/index.mdx | 11 + .../sistent/components/collapse/index.mdx | 11 + .../sistent/components/container/index.mdx | 11 + .../sistent/components/dialog/index.mdx | 11 + .../sistent/components/divider/index.mdx | 11 + .../sistent/components/drawer/index.mdx | 11 + .../components/formcontrollabel/index.mdx | 11 + .../sistent/components/grid/index.mdx | 11 + .../sistent/components/iconbutton/index.mdx | 11 + .../sistent/components/icons/index.mdx | 11 + .../sistent/components/link/index.mdx | 11 + .../sistent/components/list/index.mdx | 11 + .../sistent/components/modal/index.mdx | 11 + .../sistent/components/pagination/index.mdx | 11 + .../sistent/components/paper/index.mdx | 11 + .../sistent/components/popper/index.mdx | 11 + .../sistent/components/radiogroup/index.mdx | 11 + .../sistent/components/select/index.mdx | 11 + .../sistent/components/stack/index.mdx | 11 + .../sistent/components/stepper/index.mdx | 11 + .../sistent/components/switch/index.mdx | 11 + .../sistent/components/tabs/index.mdx | 11 + .../sistent/components/text-field/index.mdx | 11 + .../sistent/components/text-input/index.mdx | 11 + .../components/toggle-button/index.mdx | 11 + .../sistent/components/toolbar/index.mdx | 11 + .../sistent/components/tooltip/index.mdx | 11 + src/components/SistentNavigation/index.js | 31 +- .../projects/sistent/components/index.js | 26 +- .../Projects/Sistent/components/content.js | 279 ------------------ .../Projects/Sistent/components/index.js | 11 +- 41 files changed, 509 insertions(+), 306 deletions(-) create mode 100644 src/collections/sistent/components/accordion/index.mdx create mode 100644 src/collections/sistent/components/avatar-group/index.mdx create mode 100644 src/collections/sistent/components/avatar/index.mdx create mode 100644 src/collections/sistent/components/backdrop/index.mdx create mode 100644 src/collections/sistent/components/badge/index.mdx create mode 100644 src/collections/sistent/components/box/index.mdx create mode 100644 src/collections/sistent/components/button-group/index.mdx create mode 100644 src/collections/sistent/components/button/index.mdx create mode 100644 src/collections/sistent/components/chip/index.mdx create mode 100644 src/collections/sistent/components/circularprogress/index.mdx create mode 100644 src/collections/sistent/components/collapse/index.mdx create mode 100644 src/collections/sistent/components/container/index.mdx create mode 100644 src/collections/sistent/components/dialog/index.mdx create mode 100644 src/collections/sistent/components/divider/index.mdx create mode 100644 src/collections/sistent/components/drawer/index.mdx create mode 100644 src/collections/sistent/components/formcontrollabel/index.mdx create mode 100644 src/collections/sistent/components/grid/index.mdx create mode 100644 src/collections/sistent/components/iconbutton/index.mdx create mode 100644 src/collections/sistent/components/icons/index.mdx create mode 100644 src/collections/sistent/components/link/index.mdx create mode 100644 src/collections/sistent/components/list/index.mdx create mode 100644 src/collections/sistent/components/modal/index.mdx create mode 100644 src/collections/sistent/components/pagination/index.mdx create mode 100644 src/collections/sistent/components/paper/index.mdx create mode 100644 src/collections/sistent/components/popper/index.mdx create mode 100644 src/collections/sistent/components/radiogroup/index.mdx create mode 100644 src/collections/sistent/components/select/index.mdx create mode 100644 src/collections/sistent/components/stack/index.mdx create mode 100644 src/collections/sistent/components/stepper/index.mdx create mode 100644 src/collections/sistent/components/switch/index.mdx create mode 100644 src/collections/sistent/components/tabs/index.mdx create mode 100644 src/collections/sistent/components/text-field/index.mdx create mode 100644 src/collections/sistent/components/text-input/index.mdx create mode 100644 src/collections/sistent/components/toggle-button/index.mdx create mode 100644 src/collections/sistent/components/toolbar/index.mdx create mode 100644 src/collections/sistent/components/tooltip/index.mdx delete mode 100644 src/sections/Projects/Sistent/components/content.js diff --git a/gatsby-node.js b/gatsby-node.js index 5907338bfab55..2c16bae787f2b 100644 --- a/gatsby-node.js +++ b/gatsby-node.js @@ -13,9 +13,7 @@ const { createFilePath } = require("gatsby-source-filesystem"); const config = require("./gatsby-config"); const isDevelopment = process.env.NODE_ENV === "development"; const isProduction = process.env.NODE_ENV === "production"; -const { - componentsData, -} = require("./src/sections/Projects/Sistent/components/content"); + const HEAVY_COLLECTIONS = new Set(["members", "integrations"]); const isFullSiteBuild = process.env.BUILD_FULL_SITE !== "false"; @@ -241,6 +239,29 @@ exports.createPages = async ({ actions, graphql, reporter }) => { } } } + sistentComponents: allMdx( + filter: { + fields: { collection: { eq: "sistent" } } + frontmatter: { published: { eq: true } } + } + ) { + nodes { + frontmatter { + name + title + description + component + pages + } + fields { + slug + collection + } + internal { + contentFilePath + } + } + } } `); @@ -541,35 +562,46 @@ exports.createPages = async ({ actions, graphql, reporter }) => { } }); - const components = componentsData.map((component) => component.src.replace("/", "")); - const createComponentPages = (createPage, components) => { + // Create Sistent component pages dynamically from MDX + const sistentComponents = res.data.sistentComponents.nodes; + + sistentComponents.forEach((node) => { + const componentName = node.frontmatter.component; + const pages = node.frontmatter.pages || ["overview"]; + const pageTypes = [ - { suffix: "", file: "index.js" }, - { suffix: "/guidance", file: "guidance.js" }, - { suffix: "/code", file: "code.js" }, + { suffix: "", file: "index.js", pageType: "overview" }, + { suffix: "/guidance", file: "guidance.js", pageType: "guidance" }, + { suffix: "/code", file: "code.js", pageType: "code" }, ]; - components.forEach((name) => { - pageTypes.forEach(({ suffix, file }) => { - const pagePath = `/projects/sistent/components/${name}${suffix}`; - const componentPath = `./src/sections/Projects/Sistent/components/${name}/${file}`; + pageTypes.forEach(({ suffix, file, pageType }) => { + // Only create pages that exist in frontmatter + if (pages.includes(pageType)) { + const pagePath = `/projects/sistent/components/${componentName}${suffix}`; + const componentPath = `./src/sections/Projects/Sistent/components/${componentName}/${file}`; + if (fs.existsSync(path.resolve(componentPath))) { try { createPage({ path: pagePath, component: require.resolve(componentPath), + context: { + slug: `/sistent/components/${componentName}`, + componentName: componentName, + }, }); } catch (error) { console.error(`Error creating page for "${pagePath}":`, error); } } else { - console.info(`Skipping creating page "${pagePath}" - file not found: "${componentPath}"`); + console.info( + `Skipping creating page "${pagePath}" - file not found: "${componentPath}"` + ); } - }); + } }); - }; - - createComponentPages(createPage, components); + }); }; // slug starts and ends with '/' so parts[0] and parts[-1] will be empty @@ -707,6 +739,12 @@ exports.onCreateNode = ({ node, actions, getNode }) => { if (node.frontmatter.title) slug = `/community/events/${slugify(node.frontmatter.title)}`; break; + case "sistent": { + // For sistent components, create slug from directory structure + const componentSlug = parent.relativeDirectory.split("/").pop(); + slug = `/sistent/components/${componentSlug}`; + break; + } default: slug = `/${collection}/${slugify(node.frontmatter.title)}`; } diff --git a/src/collections/sistent/components/accordion/index.mdx b/src/collections/sistent/components/accordion/index.mdx new file mode 100644 index 0000000000000..2c50e4110546e --- /dev/null +++ b/src/collections/sistent/components/accordion/index.mdx @@ -0,0 +1,11 @@ +--- +name: "Accordion" +title: "Accordion" +description: "An accordion is a vertically stacked list of headers that can be clicked to reveal or hide associated content, allowing users to toggle between hiding and showing large amounts of content in a compact space." +component: "accordion" +published: true +pages: + - overview + - guidance + - code +--- diff --git a/src/collections/sistent/components/avatar-group/index.mdx b/src/collections/sistent/components/avatar-group/index.mdx new file mode 100644 index 0000000000000..2605674f1aa53 --- /dev/null +++ b/src/collections/sistent/components/avatar-group/index.mdx @@ -0,0 +1,11 @@ +--- +name: "AvatarGroup" +title: "AvatarGroup" +description: "An AvatarGroup component is used to display a collection of Avatars together, typically representing a group of users, collaborators, or participants." +component: "avatar-group" +published: true +pages: + - overview + - guidance + - code +--- diff --git a/src/collections/sistent/components/avatar/index.mdx b/src/collections/sistent/components/avatar/index.mdx new file mode 100644 index 0000000000000..175f1c4ec993f --- /dev/null +++ b/src/collections/sistent/components/avatar/index.mdx @@ -0,0 +1,11 @@ +--- +name: "Avatar" +title: "Avatar" +description: "An Avatar component is used to visually represent a user, profile, or entity, typically through an image, initials, or icon." +component: "avatar" +published: true +pages: + - overview + - guidance + - code +--- diff --git a/src/collections/sistent/components/backdrop/index.mdx b/src/collections/sistent/components/backdrop/index.mdx new file mode 100644 index 0000000000000..4f76c4338d597 --- /dev/null +++ b/src/collections/sistent/components/backdrop/index.mdx @@ -0,0 +1,11 @@ +--- +name: "Backdrop" +title: "Backdrop" +description: "Backdrop component overlays a dimmed screen to focus attention on foreground content." +component: "backdrop" +published: true +pages: + - overview + - guidance + - code +--- diff --git a/src/collections/sistent/components/badge/index.mdx b/src/collections/sistent/components/badge/index.mdx new file mode 100644 index 0000000000000..3eb7c0d745eb8 --- /dev/null +++ b/src/collections/sistent/components/badge/index.mdx @@ -0,0 +1,11 @@ +--- +name: "Badge" +title: "Badge" +description: "A badge is a small component that displays a number or status indicator, often used to show notifications or messages." +component: "badge" +published: true +pages: + - overview + - guidance + - code +--- diff --git a/src/collections/sistent/components/box/index.mdx b/src/collections/sistent/components/box/index.mdx new file mode 100644 index 0000000000000..cf4e21c6c9ce4 --- /dev/null +++ b/src/collections/sistent/components/box/index.mdx @@ -0,0 +1,11 @@ +--- +name: "Box" +title: "Box" +description: "Box is used as a flexible container for layout and styling, allowing quick customization and responsive design adjustments." +component: "box" +published: true +pages: + - overview + - guidance + - code +--- diff --git a/src/collections/sistent/components/button-group/index.mdx b/src/collections/sistent/components/button-group/index.mdx new file mode 100644 index 0000000000000..30e5275218480 --- /dev/null +++ b/src/collections/sistent/components/button-group/index.mdx @@ -0,0 +1,11 @@ +--- +name: "ButtonGroup" +title: "ButtonGroup" +description: "ButtonGroup is a component that groups multiple buttons together." +component: "button-group" +published: true +pages: + - overview + - guidance + - code +--- diff --git a/src/collections/sistent/components/button/index.mdx b/src/collections/sistent/components/button/index.mdx new file mode 100644 index 0000000000000..3978dd3ab5f21 --- /dev/null +++ b/src/collections/sistent/components/button/index.mdx @@ -0,0 +1,11 @@ +--- +name: "Button" +title: "Button" +description: "A button is an interactive element that triggers a specific action and also lets users know what will happen next." +component: "button" +published: true +pages: + - overview + - guidance + - code +--- diff --git a/src/collections/sistent/components/chip/index.mdx b/src/collections/sistent/components/chip/index.mdx new file mode 100644 index 0000000000000..23211c4f7c81c --- /dev/null +++ b/src/collections/sistent/components/chip/index.mdx @@ -0,0 +1,11 @@ +--- +name: "Chip" +title: "Chip" +description: "Chips are compact elements that represent an input, attribute, or action. They are often used for tags, contacts, or filters." +component: "chip" +published: true +pages: + - overview + - guidance + - code +--- diff --git a/src/collections/sistent/components/circularprogress/index.mdx b/src/collections/sistent/components/circularprogress/index.mdx new file mode 100644 index 0000000000000..389eeb8816419 --- /dev/null +++ b/src/collections/sistent/components/circularprogress/index.mdx @@ -0,0 +1,11 @@ +--- +name: "Circular Progress" +title: "Circular Progress" +description: "The Circular Progress component displays a circular loading indicator that represents the progress in your application" +component: "circularprogress" +published: true +pages: + - overview + - guidance + - code +--- diff --git a/src/collections/sistent/components/collapse/index.mdx b/src/collections/sistent/components/collapse/index.mdx new file mode 100644 index 0000000000000..6a0ab9659e789 --- /dev/null +++ b/src/collections/sistent/components/collapse/index.mdx @@ -0,0 +1,11 @@ +--- +name: "Collapse" +title: "Collapse" +description: "The Collapse component is used to create expandable/collapsible content sections. It smoothly animates the height of its children from zero to full height when expanded." +component: "collapse" +published: true +pages: + - overview + - guidance + - code +--- diff --git a/src/collections/sistent/components/container/index.mdx b/src/collections/sistent/components/container/index.mdx new file mode 100644 index 0000000000000..148fae5a9d1f1 --- /dev/null +++ b/src/collections/sistent/components/container/index.mdx @@ -0,0 +1,11 @@ +--- +name: "Container" +title: "Container" +description: "Containers align and center content, providing responsive layout options for different screen sizes." +component: "container" +published: true +pages: + - overview + - guidance + - code +--- diff --git a/src/collections/sistent/components/dialog/index.mdx b/src/collections/sistent/components/dialog/index.mdx new file mode 100644 index 0000000000000..c119a005ba35b --- /dev/null +++ b/src/collections/sistent/components/dialog/index.mdx @@ -0,0 +1,11 @@ +--- +name: "Dialog" +title: "Dialog" +description: "Dialogs display important prompts or confirmation requests that interrupt user interaction flow." +component: "dialog" +published: true +pages: + - overview + - guidance + - code +--- diff --git a/src/collections/sistent/components/divider/index.mdx b/src/collections/sistent/components/divider/index.mdx new file mode 100644 index 0000000000000..255539fd3d745 --- /dev/null +++ b/src/collections/sistent/components/divider/index.mdx @@ -0,0 +1,11 @@ +--- +name: "Divider" +title: "Divider" +description: "The Divider component visually separates content with a thin line, helping to organize sections and improve scannability in lists and layouts." +component: "divider" +published: true +pages: + - overview + - guidance + - code +--- diff --git a/src/collections/sistent/components/drawer/index.mdx b/src/collections/sistent/components/drawer/index.mdx new file mode 100644 index 0000000000000..c060106d2231c --- /dev/null +++ b/src/collections/sistent/components/drawer/index.mdx @@ -0,0 +1,11 @@ +--- +name: "Drawer" +title: "Drawer" +description: "The drawer provides a sliding panel that appears from an edge to present navigation, options, or contextual content." +component: "drawer" +published: true +pages: + - overview + - guidance + - code +--- diff --git a/src/collections/sistent/components/formcontrollabel/index.mdx b/src/collections/sistent/components/formcontrollabel/index.mdx new file mode 100644 index 0000000000000..fab2e697a1dbf --- /dev/null +++ b/src/collections/sistent/components/formcontrollabel/index.mdx @@ -0,0 +1,11 @@ +--- +name: "FormControlLabel" +title: "FormControlLabel" +description: "A control + label pair used for checkboxes or radio buttons." +component: "formcontrollabel" +published: true +pages: + - overview + - guidance + - code +--- diff --git a/src/collections/sistent/components/grid/index.mdx b/src/collections/sistent/components/grid/index.mdx new file mode 100644 index 0000000000000..bfe969acb82db --- /dev/null +++ b/src/collections/sistent/components/grid/index.mdx @@ -0,0 +1,11 @@ +--- +name: "Grid" +title: "Grid" +description: "The Grid component in Sistent provides a flexible and responsive layout system for arranging content in rows and columns." +component: "grid" +published: true +pages: + - overview + - guidance + - code +--- diff --git a/src/collections/sistent/components/iconbutton/index.mdx b/src/collections/sistent/components/iconbutton/index.mdx new file mode 100644 index 0000000000000..bf970afe4437d --- /dev/null +++ b/src/collections/sistent/components/iconbutton/index.mdx @@ -0,0 +1,11 @@ +--- +name: "IconButton" +title: "IconButton" +description: "IconButton provides an interactive button component that displays only an icon, ideal for compact UIs where space is limited and actions are easily recognizable through iconography." +component: "iconbutton" +published: true +pages: + - overview + - guidance + - code +--- diff --git a/src/collections/sistent/components/icons/index.mdx b/src/collections/sistent/components/icons/index.mdx new file mode 100644 index 0000000000000..02f8fc7188684 --- /dev/null +++ b/src/collections/sistent/components/icons/index.mdx @@ -0,0 +1,11 @@ +--- +name: "Icons" +title: "Icons" +description: "Sistent provides a comprehensive collection of icons that can be used across your projects. These icons are designed to be consistent with the overall design language of the Sistent design system, ensuring a cohesive user experience." +component: "icons" +published: true +pages: + - overview + - guidance + - code +--- diff --git a/src/collections/sistent/components/link/index.mdx b/src/collections/sistent/components/link/index.mdx new file mode 100644 index 0000000000000..b5fd12b5be487 --- /dev/null +++ b/src/collections/sistent/components/link/index.mdx @@ -0,0 +1,11 @@ +--- +name: "Link" +title: "Link" +description: "Links are essential and integral components of an interface. They are primarily used for navigation, guiding users to the next step in a journey or redirecting them to relevant sections or pages." +component: "link" +published: true +pages: + - overview + - guidance + - code +--- diff --git a/src/collections/sistent/components/list/index.mdx b/src/collections/sistent/components/list/index.mdx new file mode 100644 index 0000000000000..60bf9ff1afef9 --- /dev/null +++ b/src/collections/sistent/components/list/index.mdx @@ -0,0 +1,11 @@ +--- +name: "List" +title: "List" +description: "Lists are essential UI elements that allow items to be organized sequentially in a structured and readable way. They help users view, select, and interact with multiple items conveniently." +component: "list" +published: true +pages: + - overview + - guidance + - code +--- diff --git a/src/collections/sistent/components/modal/index.mdx b/src/collections/sistent/components/modal/index.mdx new file mode 100644 index 0000000000000..d51a531c41f83 --- /dev/null +++ b/src/collections/sistent/components/modal/index.mdx @@ -0,0 +1,11 @@ +--- +name: "Modal" +title: "Modal" +description: "A modal is a conatiner that appears in front of the main content on a page when clicked on button or text. It provides information or an actionable piece of content for users to execute." +component: "modal" +published: true +pages: + - overview + - guidance + - code +--- diff --git a/src/collections/sistent/components/pagination/index.mdx b/src/collections/sistent/components/pagination/index.mdx new file mode 100644 index 0000000000000..deeb7ebe64ccb --- /dev/null +++ b/src/collections/sistent/components/pagination/index.mdx @@ -0,0 +1,11 @@ +--- +name: "Pagination" +title: "Pagination" +description: "Pagination enables users to navigate through multiple pages of content, providing an intuitive interface for browsing large datasets or segmented information." +component: "pagination" +published: true +pages: + - overview + - guidance + - code +--- diff --git a/src/collections/sistent/components/paper/index.mdx b/src/collections/sistent/components/paper/index.mdx new file mode 100644 index 0000000000000..33456ca564248 --- /dev/null +++ b/src/collections/sistent/components/paper/index.mdx @@ -0,0 +1,11 @@ +--- +name: "Paper" +title: "Paper" +description: "The Paper component offers an elevated surface with shadow effects, following Material Design’s elevation system." +component: "paper" +published: true +pages: + - overview + - guidance + - code +--- diff --git a/src/collections/sistent/components/popper/index.mdx b/src/collections/sistent/components/popper/index.mdx new file mode 100644 index 0000000000000..6b48b3e19933a --- /dev/null +++ b/src/collections/sistent/components/popper/index.mdx @@ -0,0 +1,11 @@ +--- +name: "Popper" +title: "Popper" +description: "A popper is a tooltip that appears when a user interacts with an element." +component: "popper" +published: true +pages: + - overview + - guidance + - code +--- diff --git a/src/collections/sistent/components/radiogroup/index.mdx b/src/collections/sistent/components/radiogroup/index.mdx new file mode 100644 index 0000000000000..4d96927b4075a --- /dev/null +++ b/src/collections/sistent/components/radiogroup/index.mdx @@ -0,0 +1,11 @@ +--- +name: "RadioGroup" +title: "RadioGroup" +description: "Sistent offers a well-structured RadioGroup component that allows users to select one option from a set." +component: "radiogroup" +published: true +pages: + - overview + - guidance + - code +--- diff --git a/src/collections/sistent/components/select/index.mdx b/src/collections/sistent/components/select/index.mdx new file mode 100644 index 0000000000000..6388b1d6a805d --- /dev/null +++ b/src/collections/sistent/components/select/index.mdx @@ -0,0 +1,11 @@ +--- +name: "Select" +title: "Select" +description: "Select component is a dropdown menu for selecting an option from a list." +component: "select" +published: true +pages: + - overview + - guidance + - code +--- diff --git a/src/collections/sistent/components/stack/index.mdx b/src/collections/sistent/components/stack/index.mdx new file mode 100644 index 0000000000000..9300b4378f021 --- /dev/null +++ b/src/collections/sistent/components/stack/index.mdx @@ -0,0 +1,11 @@ +--- +name: "Stack" +title: "Stack" +description: "Stack is a layout component that arranges elements in a one-dimensional flow with customizable spacing and direction." +component: "stack" +published: true +pages: + - overview + - guidance + - code +--- diff --git a/src/collections/sistent/components/stepper/index.mdx b/src/collections/sistent/components/stepper/index.mdx new file mode 100644 index 0000000000000..c155182408807 --- /dev/null +++ b/src/collections/sistent/components/stepper/index.mdx @@ -0,0 +1,11 @@ +--- +name: "Stepper" +title: "Stepper" +description: "Stepper provides a way to display progress through a sequence of logical steps." +component: "stepper" +published: true +pages: + - overview + - guidance + - code +--- diff --git a/src/collections/sistent/components/switch/index.mdx b/src/collections/sistent/components/switch/index.mdx new file mode 100644 index 0000000000000..8b99fb3abbad5 --- /dev/null +++ b/src/collections/sistent/components/switch/index.mdx @@ -0,0 +1,11 @@ +--- +name: "Switch" +title: "Switch" +description: "The Switch component allows users to toggle the state of a single setting on or off." +component: "switch" +published: true +pages: + - overview + - guidance + - code +--- diff --git a/src/collections/sistent/components/tabs/index.mdx b/src/collections/sistent/components/tabs/index.mdx new file mode 100644 index 0000000000000..ef84b3240f9b6 --- /dev/null +++ b/src/collections/sistent/components/tabs/index.mdx @@ -0,0 +1,11 @@ +--- +name: "Tabs" +title: "Tabs" +description: "Tabs organize and allow navigation between groups of content that are related and at the same level of hierarchy." +component: "tabs" +published: true +pages: + - overview + - guidance + - code +--- diff --git a/src/collections/sistent/components/text-field/index.mdx b/src/collections/sistent/components/text-field/index.mdx new file mode 100644 index 0000000000000..e81d4d2f0aadc --- /dev/null +++ b/src/collections/sistent/components/text-field/index.mdx @@ -0,0 +1,11 @@ +--- +name: "Text Field" +title: "Text Field" +description: "The TextField component is a versatile input field used to capture user input in forms and user interfaces." +component: "text-field" +published: true +pages: + - overview + - guidance + - code +--- diff --git a/src/collections/sistent/components/text-input/index.mdx b/src/collections/sistent/components/text-input/index.mdx new file mode 100644 index 0000000000000..ca16a88f4a925 --- /dev/null +++ b/src/collections/sistent/components/text-input/index.mdx @@ -0,0 +1,11 @@ +--- +name: "Text Input" +title: "Text Input" +description: "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." +component: "text-input" +published: true +pages: + - overview + - guidance + - code +--- diff --git a/src/collections/sistent/components/toggle-button/index.mdx b/src/collections/sistent/components/toggle-button/index.mdx new file mode 100644 index 0000000000000..cd9cc1471c747 --- /dev/null +++ b/src/collections/sistent/components/toggle-button/index.mdx @@ -0,0 +1,11 @@ +--- +name: "ToggleButton" +title: "ToggleButton" +description: "ToggleButton allows users to switch between two or more states, commonly used in forms or settings for quick toggles." +component: "toggle-button" +published: true +pages: + - overview + - guidance + - code +--- diff --git a/src/collections/sistent/components/toolbar/index.mdx b/src/collections/sistent/components/toolbar/index.mdx new file mode 100644 index 0000000000000..8cd477a233489 --- /dev/null +++ b/src/collections/sistent/components/toolbar/index.mdx @@ -0,0 +1,11 @@ +--- +name: "Toolbar" +title: "Toolbar" +description: "The toolbar is a horizontal container for grouping interactive elements like buttons, filters, or navigation controls, typically placed at the top of a UI section." +component: "toolbar" +published: true +pages: + - overview + - guidance + - code +--- diff --git a/src/collections/sistent/components/tooltip/index.mdx b/src/collections/sistent/components/tooltip/index.mdx new file mode 100644 index 0000000000000..47697fc3599e8 --- /dev/null +++ b/src/collections/sistent/components/tooltip/index.mdx @@ -0,0 +1,11 @@ +--- +name: "Tooltip" +title: "Tooltip" +description: "The Tooltip component is a small pop-up box that appears when a user hovers over an element." +component: "tooltip" +published: true +pages: + - overview + - guidance + - code +--- diff --git a/src/components/SistentNavigation/index.js b/src/components/SistentNavigation/index.js index f5bca82b99ad8..11499b548b983 100644 --- a/src/components/SistentNavigation/index.js +++ b/src/components/SistentNavigation/index.js @@ -1,8 +1,7 @@ import React, { useState } from "react"; import { HiOutlineChevronLeft } from "@react-icons/all-files/hi/HiOutlineChevronLeft"; -import { Link } from "gatsby"; +import { Link, graphql, useStaticQuery } from "gatsby"; import { IoIosArrowForward } from "@react-icons/all-files/io/IoIosArrowForward"; -import { componentsData } from "../../sections/Projects/Sistent/components/content"; import TOCWrapper from "./toc.style"; import { IoIosArrowDown } from "@react-icons/all-files/io/IoIosArrowDown"; @@ -22,10 +21,30 @@ const TOC = () => { location.pathname.includes("/components") ); - // Sorting the array of components by name - const sortedComponentArray = [...componentsData].sort((a, b) => - a.name.localeCompare(b.name) - ); + // Fetch component data dynamically from GraphQL + const data = useStaticQuery(graphql` + query SistentComponentsNav { + allMdx( + filter: { + fields: { collection: { eq: "sistent" } } + frontmatter: { published: { eq: true } } + } + sort: { frontmatter: { name: ASC } } + ) { + nodes { + frontmatter { + name + component + } + } + } + } + `); + + const sortedComponentArray = data.allMdx.nodes.map((node) => ({ + name: node.frontmatter.name, + url: `/projects/sistent/components/${node.frontmatter.component}`, + })); return ( diff --git a/src/pages/projects/sistent/components/index.js b/src/pages/projects/sistent/components/index.js index 0cd9f7e7d28df..80c405437dbdf 100644 --- a/src/pages/projects/sistent/components/index.js +++ b/src/pages/projects/sistent/components/index.js @@ -1,8 +1,30 @@ import React from "react"; +import { graphql } from "gatsby"; import SistentComponents from "../../../../sections/Projects/Sistent/components"; -const SistentComponentsPage = () => { - return ; +const SistentComponentsPage = ({ data }) => { + return ; }; +export const query = graphql` + query SistentComponentsList { + allMdx( + filter: { + fields: { collection: { eq: "sistent" } } + frontmatter: { published: { eq: true } } + } + sort: { frontmatter: { name: ASC } } + ) { + nodes { + id + frontmatter { + name + description + component + } + } + } + } +`; + export default SistentComponentsPage; diff --git a/src/sections/Projects/Sistent/components/content.js b/src/sections/Projects/Sistent/components/content.js deleted file mode 100644 index 7bea8ebf1ab0c..0000000000000 --- a/src/sections/Projects/Sistent/components/content.js +++ /dev/null @@ -1,279 +0,0 @@ -const componentsData = [ - { - id: 1, - name: "Button", - description: - "A button is an interactive element that triggers a specific action and also lets users know what will happen next.", - url: "/projects/sistent/components/button", - src: "/button", - }, - { - id: 2, - name: "Text Input", - description: - "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/text-input", - src: "/text-input", - }, - { - id: 3, - name: "Modal", - description: - "A modal is a conatiner that appears in front of the main content on a page when clicked on button or text. It provides information or an actionable piece of content for users to execute.", - url: "/projects/sistent/components/modal", - src: "/modal", - }, - { - id: 4, - name: "Paper", - description: - "The Paper component offers an elevated surface with shadow effects, following Material Design’s elevation system.", - url: "/projects/sistent/components/paper", - src: "/paper", - }, - { - id: 5, - name: "Popper", - description: - "A popper is a tooltip that appears when a user interacts with an element.", - url: "/projects/sistent/components/popper", - src: "/popper", - }, - { - id: 6, - name: "Text Field", - description: - "The TextField component is a versatile input field used to capture user input in forms and user interfaces.", - url: "/projects/sistent/components/text-field", - src: "/text-field", - }, - { - id: 7, - name: "Link", - description: - "Links are essential and integral components of an interface. They are primarily used for navigation, guiding users to the next step in a journey or redirecting them to relevant sections or pages.", - url: "/projects/sistent/components/link", - src: "/link", - }, - { - id: 8, - name: "Container", - description: - "Containers align and center content, providing responsive layout options for different screen sizes.", - url: "/projects/sistent/components/container", - src: "/container", - }, - { - id: 9, - name: "ButtonGroup", - description: - "ButtonGroup is a component that groups multiple buttons together.", - url: "/projects/sistent/components/button-group", - src: "/button-group", - }, - { - id: 10, - name: "Box", - description: - "Box is used as a flexible container for layout and styling, allowing quick customization and responsive design adjustments.", - url: "/projects/sistent/components/box", - src: "/box", - }, - { - id: 11, - name: "Tooltip", - description: - "The Tooltip component is a small pop-up box that appears when a user hovers over an element.", - url: "/projects/sistent/components/tooltip", - src: "/tooltip", - }, - { - id: 12, - name: "Backdrop", - description: - "Backdrop component overlays a dimmed screen to focus attention on foreground content.", - 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", - }, - { - id: 14, - name: "Pagination", - description: - "Pagination enables users to navigate through multiple pages of content, providing an intuitive interface for browsing large datasets or segmented information.", - url: "/projects/sistent/components/pagination", - src: "/pagination", - }, - { - id: 15, - name: "Select", - description: - "Select component is a dropdown menu for selecting an option from a list.", - url: "/projects/sistent/components/select", - src: "/select", - }, - { - id: 16, - name: "Icons", - description: - "Sistent provides a comprehensive collection of icons that can be used across your projects. These icons are designed to be consistent with the overall design language of the Sistent design system, ensuring a cohesive user experience.", - url: "/projects/sistent/components/icons", - src: "/icons", - }, - { - id: 17, - name: "Dialog", - description: - "Dialogs display important prompts or confirmation requests that interrupt user interaction flow.", - url: "/projects/sistent/components/dialog", - src: "/dialog", - }, - { - id: 18, - name: "Drawer", - description: - "The drawer provides a sliding panel that appears from an edge to present navigation, options, or contextual content.", - url: "/projects/sistent/components/drawer", - src: "/drawer", - }, - { - id: 19, - name: "Circular Progress", - description: - "The Circular Progress component displays a circular loading indicator that represents the progress in your application", - url: "/projects/sistent/components/circularprogress", - src: "/circularprogress", - }, - { - id: 20, - name: "Switch", - description: "The Switch component allows users to toggle the state of a single setting on or off.", - url: "/projects/sistent/components/switch", - src: "/switch" - }, - { - id: 21, - name: "Tabs", - description: "Tabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.", - url: "/projects/sistent/components/tabs", - src: "/tabs", - }, - { - id: 22, - name: "Avatar", - description: - "An Avatar component is used to visually represent a user, profile, or entity, typically through an image, initials, or icon.", - url: "/projects/sistent/components/avatar", - src: "/avatar", - }, - { - id: 23, - name: "AvatarGroup", - description: - "An AvatarGroup component is used to display a collection of Avatars together, typically representing a group of users, collaborators, or participants.", - url: "/projects/sistent/components/avatar-group", - src: "/avatar-group", - }, - { - id: 24, - name: "Badge", - description: "A badge is a small component that displays a number or status indicator, often used to show notifications or messages.", - url: "/projects/sistent/components/badge", - src: "/badge", - }, - { - id: 25, - name: "Toolbar", - description: - "The toolbar is a horizontal container for grouping interactive elements like buttons, filters, or navigation controls, typically placed at the top of a UI section.", - url: "/projects/sistent/components/toolbar", - src: "/toolbar", - }, - { - "id": 26, - "name": "RadioGroup", - "description": "Sistent offers a well-structured RadioGroup component that allows users to select one option from a set.", - "url": "/projects/sistent/components/radiogroup", - "src": "/radiogroup" - }, - { - "id": 27, - "name": "Grid", - "description": "The Grid component in Sistent provides a flexible and responsive layout system for arranging content in rows and columns.", - "url": "/projects/sistent/components/grid", - "src": "/grid" - }, - { - "id": 28, - "name": "List", - "description": "Lists are essential UI elements that allow items to be organized sequentially in a structured and readable way. They help users view, select, and interact with multiple items conveniently.", - "url": "/projects/sistent/components/list", - "src": "/list", - }, - { - "id": 29, - "name": "Chip", - "description": "Chips are compact elements that represent an input, attribute, or action. They are often used for tags, contacts, or filters.", - "url": "/projects/sistent/components/chip", - "src": "/chip", - }, - { - "id": 30, - "name": "Collapse", - "description": "The Collapse component is used to create expandable/collapsible content sections. It smoothly animates the height of its children from zero to full height when expanded.", - "url": "/projects/sistent/components/collapse", - "src": "/collapse", - }, - { - "id": 31, - "name": "FormControlLabel", - "description": "A control + label pair used for checkboxes or radio buttons.", - "url": "/projects/sistent/components/formcontrollabel", - "src": "/formcontrollabel", - }, - { - id: 32, - name: "IconButton", - description: "IconButton provides an interactive button component that displays only an icon, ideal for compact UIs where space is limited and actions are easily recognizable through iconography.", - url: "/projects/sistent/components/iconbutton", - src: "/iconbutton", - }, - { - id: 33, - name: "Stepper", - description: "Stepper provides a way to display progress through a sequence of logical steps.", - url: "/projects/sistent/components/stepper", - src: "/stepper", - }, - { - id: 34, - name: "Stack", - description: "Stack is a layout component that arranges elements in a one-dimensional flow with customizable spacing and direction.", - url: "/projects/sistent/components/stack", - src: "/stack", - }, - { - id: 35, - name: "Accordion", - description: "An accordion is a vertically stacked list of headers that can be clicked to reveal or hide associated content, allowing users to toggle between hiding and showing large amounts of content in a compact space.", - url: "/projects/sistent/components/accordion", - src: "/accordion", - }, - { - id: 36, - name: "Divider", - description: - "The Divider component visually separates content with a thin line, helping to organize sections and improve scannability in lists and layouts.", - url: "/projects/sistent/components/divider", - src: "/divider", - }, -]; - -module.exports = { componentsData }; diff --git a/src/sections/Projects/Sistent/components/index.js b/src/sections/Projects/Sistent/components/index.js index 85ce53768b6ae..a0787b6b8355f 100644 --- a/src/sections/Projects/Sistent/components/index.js +++ b/src/sections/Projects/Sistent/components/index.js @@ -6,9 +6,16 @@ import SearchBox from "../../../../reusecore/Search"; import useDataList from "../../../../utils/usedataList"; import { FaArrowRight } from "@react-icons/all-files/fa/FaArrowRight"; import { Link } from "gatsby"; -import { componentsData } from "./content"; -const SistentComponents = () => { +const SistentComponents = ({ data }) => { + // Transform GraphQL data + const componentsData = data?.allMdx?.nodes.map(node => ({ + id: node.id, + name: node.frontmatter.name, + description: node.frontmatter.description, + url: `/projects/sistent/components/${node.frontmatter.component}` + })) || []; + const [searchQuery, setSearchQuery] = useState(""); const { queryResults, searchData } = useDataList( componentsData, From e33a1757fba6297431b2af9babee328fd6cc34e5 Mon Sep 17 00:00:00 2001 From: Rishi Raj Date: Fri, 6 Feb 2026 18:47:46 +0530 Subject: [PATCH 2/2] feat: standardize sistent component layouts and refactor to MDX Migrated all Sistent components to dynamic MDX routing. Standardized component header layouts by moving descriptions to frontmatter. Cleaned up legacy content.js and deprecated code. Signed-off-by: Rishi Raj --- gatsby-node.js | 104 +- .../accordion/ControlledAccordion.js | 64 ++ .../sistent/components/accordion/code.mdx | 231 +++++ .../sistent/components/accordion/guidance.mdx | 147 +++ .../sistent/components/accordion/index.mdx | 67 +- .../sistent/components/avatar-group/code.mdx | 150 +++ .../components/avatar-group/guidance.mdx | 39 + .../sistent/components/avatar-group/index.mdx | 105 +- .../sistent/components/avatar/code.mdx | 102 ++ .../sistent/components/avatar/guidance.mdx | 49 + .../sistent/components/avatar/index.mdx | 83 +- .../components/backdrop/BackdropDemo.js | 26 + .../sistent/components/backdrop/code.mdx | 42 + .../sistent/components/backdrop/guidance.mdx | 45 + .../sistent/components/backdrop/index.mdx | 28 +- .../sistent/components/badge/code.mdx | 177 ++++ .../sistent/components/badge/guidance.mdx | 179 ++++ .../sistent/components/badge/index.mdx | 167 +++- .../sistent/components/box/code.mdx | 137 +++ .../sistent/components/box/guidance.mdx | 105 ++ .../sistent/components/box/index.mdx | 62 +- .../sistent/components/button-group/code.mdx | 264 +++++ .../components/button-group/guidance.mdx | 41 + .../sistent/components/button-group/index.mdx | 168 +++- .../sistent/components/button/code.mdx | 110 +++ .../sistent/components/button/guidance.mdx | 81 ++ .../sistent/components/button/index.mdx | 96 +- .../sistent/components/chip/code.mdx | 137 +++ .../sistent/components/chip/guidance.mdx | 95 ++ .../sistent/components/chip/index.mdx | 160 ++- .../circularprogress/CircularProgressDemo.js | 20 + .../components/circularprogress/code.mdx | 105 ++ .../components/circularprogress/guidance.mdx | 69 ++ .../components/circularprogress/index.mdx | 55 +- .../components/collapse/CollapseDemo.js | 47 + .../sistent/components/collapse/code.mdx | 90 ++ .../sistent/components/collapse/guidance.mdx | 95 ++ .../sistent/components/collapse/index.mdx | 43 +- .../sistent/components/container/code.mdx | 124 +++ .../sistent/components/container/guidance.mdx | 81 ++ .../sistent/components/container/index.mdx | 52 +- .../sistent/components/dialog/DialogDemo.js | 88 ++ .../sistent/components/dialog/code.mdx | 126 +++ .../sistent/components/dialog/guidance.mdx | 80 ++ .../sistent/components/dialog/index.mdx | 38 +- .../sistent/components/divider/code.mdx | 210 ++++ .../sistent/components/divider/guidance.mdx | 112 +++ .../sistent/components/divider/index.mdx | 93 +- .../sistent/components/drawer/DrawerDemo.js | 182 ++++ .../sistent/components/drawer/code.mdx | 149 +++ .../sistent/components/drawer/guidance.mdx | 79 ++ .../sistent/components/drawer/index.mdx | 55 +- .../formcontrollabel/FormControlLabelDemo.js | 68 ++ .../components/formcontrollabel/code.mdx | 75 ++ .../components/formcontrollabel/guidance.mdx | 90 ++ .../components/formcontrollabel/index.mdx | 35 +- .../sistent/components/grid/GridItem.js | 19 + .../sistent/components/grid/code.mdx | 379 +++++++ .../sistent/components/grid/guidance.mdx | 275 ++++++ .../sistent/components/grid/index.mdx | 137 ++- .../components/iconbutton/IconButtonDemo.js | 119 +++ .../sistent/components/iconbutton/code.mdx | 118 +++ .../components/iconbutton/guidance.mdx | 95 ++ .../sistent/components/iconbutton/index.mdx | 98 +- .../sistent/components/icons/IconsDemo.js} | 165 ++-- .../sistent/components/icons/code.mdx | 42 + .../sistent/components/icons/guidance.mdx | 53 + .../sistent/components/icons/index.mdx | 41 +- .../sistent/components/link/code.mdx | 187 ++++ .../sistent/components/link/guidance.mdx | 107 ++ .../sistent/components/link/index.mdx | 121 ++- .../sistent/components/list/ListDemo.js | 103 ++ .../sistent/components/list/code.mdx | 225 +++++ .../sistent/components/list/guidance.mdx | 130 +++ .../sistent/components/list/index.mdx | 151 ++- .../sistent/components/modal/ModalDemo.js | 322 ++++++ .../sistent/components/modal/code.mdx | 273 +++++ .../sistent/components/modal/guidance.mdx | 131 +++ .../sistent/components/modal/index.mdx | 44 +- .../components/pagination/PaginationDemo.js | 58 ++ .../sistent/components/pagination/code.mdx | 77 ++ .../components/pagination/guidance.mdx | 37 + .../sistent/components/pagination/index.mdx | 85 +- .../sistent/components/paper/code.mdx | 115 +++ .../sistent/components/paper/guidance.mdx | 44 + .../sistent/components/paper/index.mdx | 62 +- .../sistent/components/popper/PopperDemo.js | 142 +++ .../sistent/components/popper/code.mdx | 58 ++ .../sistent/components/popper/guidance.mdx | 68 ++ .../sistent/components/popper/index.mdx | 47 +- .../components/radiogroup/RadioGroupDemo.js | 81 ++ .../sistent/components/radiogroup/code.mdx | 79 ++ .../components/radiogroup/guidance.mdx | 29 + .../sistent/components/radiogroup/index.mdx | 77 +- .../sistent/components/select/SelectDemo.js | 146 +++ .../sistent/components/select/code.mdx | 186 ++++ .../sistent/components/select/guidance.mdx | 100 ++ .../sistent/components/select/index.mdx | 107 +- .../sistent/components/stack/code.mdx | 227 +++++ .../sistent/components/stack/guidance.mdx | 191 ++++ .../sistent/components/stack/index.mdx | 131 ++- .../sistent/components/stepper/StepperDemo.js | 142 +++ .../sistent/components/stepper/code.mdx | 62 ++ .../sistent/components/stepper/guidance.mdx | 61 ++ .../sistent/components/stepper/index.mdx | 47 +- .../sistent/components/switch/SwitchDemo.js | 52 + .../sistent/components/switch/code.mdx | 84 ++ .../sistent/components/switch/guidance.mdx | 67 ++ .../sistent/components/switch/index.mdx | 57 +- .../sistent/components/tabs/TabsDemo.js | 241 +++++ .../sistent/components/tabs/code.mdx | 267 +++++ .../sistent/components/tabs/guidance.mdx | 169 ++++ .../sistent/components/tabs/index.mdx | 61 +- .../components/text-field/TextFieldDemo.js | 447 +++++++++ .../sistent/components/text-field/code.mdx | 386 ++++++++ .../components/text-field/guidance.mdx | 93 ++ .../sistent/components/text-field/index.mdx | 87 +- .../components/text-input/TextInputDemo.js | 87 ++ .../sistent/components/text-input/code.mdx | 152 +++ .../components/text-input/guidance.mdx | 83 ++ .../sistent/components/text-input/index.mdx | 70 +- .../toggle-button/ToggleButtonDemo.js | 152 +++ .../sistent/components/toggle-button/code.mdx | 112 +++ .../components/toggle-button/guidance.mdx | 76 ++ .../components/toggle-button/index.mdx | 99 +- .../sistent/components/toolbar/ToolbarDemo.js | 281 ++++++ .../sistent/components/toolbar/code.mdx | 70 ++ .../sistent/components/toolbar/guidance.mdx | 123 +++ .../sistent/components/toolbar/index.mdx | 82 +- .../sistent/components/tooltip/TooltipDemo.js | 295 ++++++ .../sistent/components/tooltip/code.mdx | 237 +++++ .../sistent/components/tooltip/guidance.mdx | 105 ++ .../sistent/components/tooltip/index.mdx | 108 +- src/components/CodeBlock/index.js | 60 +- .../projects/sistent/components/index.js | 5 +- .../Sistent/components/accordion/code.js | 328 ------ .../Sistent/components/accordion/guidance.js | 244 ----- .../Sistent/components/accordion/index.js | 169 ---- .../Sistent/components/avatar-group/code.js | 229 ----- .../components/avatar-group/guidance.js | 123 --- .../Sistent/components/avatar-group/index.js | 173 ---- .../Sistent/components/avatar/code.js | 137 --- .../Sistent/components/avatar/guidance.js | 104 -- .../Sistent/components/avatar/index.js | 128 --- .../Sistent/components/backdrop/code.js | 126 --- .../Sistent/components/backdrop/guidance.js | 320 ------ .../Sistent/components/backdrop/index.js | 119 --- .../Projects/Sistent/components/badge/code.js | 256 ----- .../Sistent/components/badge/guidance.js | 248 ----- .../Sistent/components/badge/index.js | 255 ----- .../Projects/Sistent/components/box/code.js | 210 ---- .../Sistent/components/box/guidance.js | 181 ---- .../Projects/Sistent/components/box/index.js | 133 --- .../Sistent/components/button-group/code.js | 393 -------- .../components/button-group/guidance.js | 134 --- .../Sistent/components/button-group/index.js | 258 ----- .../Sistent/components/button/code-block.js | 20 - .../Sistent/components/button/code.js | 181 ---- .../Sistent/components/button/guidance.js | 199 ---- .../Sistent/components/button/index.js | 194 ---- .../Projects/Sistent/components/chip/code.js | 206 ---- .../Sistent/components/chip/guidance.js | 144 --- .../Projects/Sistent/components/chip/index.js | 199 ---- .../components/circularprogress/code.js | 196 ---- .../components/circularprogress/guidance.js | 187 ---- .../components/circularprogress/index.js | 112 --- .../Sistent/components/collapse/code.js | 149 --- .../Sistent/components/collapse/guidance.js | 141 --- .../Sistent/components/collapse/index.js | 112 --- .../Sistent/components/container/code.js | 221 ----- .../Sistent/components/container/guidance.js | 166 ---- .../Sistent/components/container/index.js | 126 --- .../Sistent/components/dialog/code.js | 269 ----- .../Sistent/components/dialog/guidance.js | 216 ---- .../Sistent/components/dialog/index.js | 120 --- .../Sistent/components/divider/code.js | 288 ------ .../Sistent/components/divider/guidance.js | 168 ---- .../Sistent/components/divider/index.js | 168 ---- .../Sistent/components/drawer/code.js | 352 ------- .../Sistent/components/drawer/guidance.js | 222 ----- .../Sistent/components/drawer/index.js | 139 --- .../components/formcontrollabel/code.js | 143 --- .../components/formcontrollabel/guidance.js | 177 ---- .../components/formcontrollabel/index.js | 103 -- .../Projects/Sistent/components/grid/code.js | 502 ---------- .../Sistent/components/grid/guidance.js | 396 -------- .../Projects/Sistent/components/grid/index.js | 218 ---- .../Sistent/components/iconbutton/code.js | 241 ----- .../Sistent/components/iconbutton/guidance.js | 287 ------ .../Sistent/components/iconbutton/index.js | 221 ----- .../Projects/Sistent/components/icons/code.js | 97 -- .../Sistent/components/icons/guidance.js | 125 --- .../Projects/Sistent/components/link/code.js | 282 ------ .../Sistent/components/link/guidance.js | 184 ---- .../Projects/Sistent/components/link/index.js | 189 ---- .../Projects/Sistent/components/list/code.js | 336 ------- .../Sistent/components/list/guidance.js | 142 --- .../Projects/Sistent/components/list/index.js | 217 ---- .../Projects/Sistent/components/modal/code.js | 932 ------------------ .../Sistent/components/modal/guidance.js | 420 -------- .../Sistent/components/modal/index.js | 108 -- .../Sistent/components/pagination/code.js | 180 ---- .../Sistent/components/pagination/guidance.js | 111 --- .../Sistent/components/pagination/index.js | 168 ---- .../Projects/Sistent/components/paper/code.js | 203 ---- .../Sistent/components/paper/guidance.js | 124 --- .../Sistent/components/paper/index.js | 114 --- .../Sistent/components/popper/code.js | 349 ------- .../Sistent/components/popper/guidance.js | 174 ---- .../Sistent/components/popper/index.js | 143 --- .../Sistent/components/radiogroup/code.js | 209 ---- .../Sistent/components/radiogroup/guidance.js | 210 ---- .../Sistent/components/radiogroup/index.js | 162 --- .../Sistent/components/select/code.js | 456 --------- .../Sistent/components/select/guidance.js | 245 ----- .../Sistent/components/select/header.js | 15 - .../Sistent/components/select/index.js | 228 ----- .../Sistent/components/select/section-nav.js | 40 - .../Projects/Sistent/components/stack/code.js | 301 ------ .../Sistent/components/stack/guidance.js | 247 ----- .../Sistent/components/stack/index.js | 180 ---- .../Sistent/components/stepper/code.js | 182 ---- .../Sistent/components/stepper/guidance.js | 299 ------ .../Sistent/components/stepper/index.js | 186 ---- .../Sistent/components/switch/code.js | 152 --- .../Sistent/components/switch/guidance.js | 138 --- .../Sistent/components/switch/index.js | 147 --- .../Projects/Sistent/components/tabs/code.js | 624 ------------ .../Sistent/components/tabs/guidance.js | 515 ---------- .../Projects/Sistent/components/tabs/index.js | 162 --- .../Sistent/components/text-field/code.js | 768 --------------- .../Sistent/components/text-field/guidance.js | 216 ---- .../Sistent/components/text-field/index.js | 416 -------- .../Sistent/components/text-input/code.js | 271 ----- .../Sistent/components/text-input/guidance.js | 219 ---- .../Sistent/components/text-input/index.js | 130 --- .../Sistent/components/toggle-button/code.js | 290 ------ .../components/toggle-button/guidance.js | 204 ---- .../Sistent/components/toggle-button/index.js | 265 ----- .../Sistent/components/toolbar/code.js | 167 ---- .../Sistent/components/toolbar/guidance.js | 314 ------ .../Sistent/components/toolbar/index.js | 258 ----- .../Sistent/components/tooltip/code.js | 463 --------- .../Sistent/components/tooltip/guidance.js | 270 ----- .../Sistent/components/tooltip/index.js | 238 ----- .../Sistent/getting-started/about/index.js | 6 +- .../Sistent/getting-started/tokens/index.js | 12 +- .../Sistent/getting-started/usage/index.js | 25 +- .../Projects/Sistent/sistent.style.js | 11 +- .../Projects/Sistent/theme-wrapper.js | 14 + src/templates/sistent-component.js | 92 ++ 251 files changed, 15217 insertions(+), 25303 deletions(-) create mode 100644 src/collections/sistent/components/accordion/ControlledAccordion.js create mode 100644 src/collections/sistent/components/accordion/code.mdx create mode 100644 src/collections/sistent/components/accordion/guidance.mdx create mode 100644 src/collections/sistent/components/avatar-group/code.mdx create mode 100644 src/collections/sistent/components/avatar-group/guidance.mdx create mode 100644 src/collections/sistent/components/avatar/code.mdx create mode 100644 src/collections/sistent/components/avatar/guidance.mdx create mode 100644 src/collections/sistent/components/backdrop/BackdropDemo.js create mode 100644 src/collections/sistent/components/backdrop/code.mdx create mode 100644 src/collections/sistent/components/backdrop/guidance.mdx create mode 100644 src/collections/sistent/components/badge/code.mdx create mode 100644 src/collections/sistent/components/badge/guidance.mdx create mode 100644 src/collections/sistent/components/box/code.mdx create mode 100644 src/collections/sistent/components/box/guidance.mdx create mode 100644 src/collections/sistent/components/button-group/code.mdx create mode 100644 src/collections/sistent/components/button-group/guidance.mdx create mode 100644 src/collections/sistent/components/button/code.mdx create mode 100644 src/collections/sistent/components/button/guidance.mdx create mode 100644 src/collections/sistent/components/chip/code.mdx create mode 100644 src/collections/sistent/components/chip/guidance.mdx create mode 100644 src/collections/sistent/components/circularprogress/CircularProgressDemo.js create mode 100644 src/collections/sistent/components/circularprogress/code.mdx create mode 100644 src/collections/sistent/components/circularprogress/guidance.mdx create mode 100644 src/collections/sistent/components/collapse/CollapseDemo.js create mode 100644 src/collections/sistent/components/collapse/code.mdx create mode 100644 src/collections/sistent/components/collapse/guidance.mdx create mode 100644 src/collections/sistent/components/container/code.mdx create mode 100644 src/collections/sistent/components/container/guidance.mdx create mode 100644 src/collections/sistent/components/dialog/DialogDemo.js create mode 100644 src/collections/sistent/components/dialog/code.mdx create mode 100644 src/collections/sistent/components/dialog/guidance.mdx create mode 100644 src/collections/sistent/components/divider/code.mdx create mode 100644 src/collections/sistent/components/divider/guidance.mdx create mode 100644 src/collections/sistent/components/drawer/DrawerDemo.js create mode 100644 src/collections/sistent/components/drawer/code.mdx create mode 100644 src/collections/sistent/components/drawer/guidance.mdx create mode 100644 src/collections/sistent/components/formcontrollabel/FormControlLabelDemo.js create mode 100644 src/collections/sistent/components/formcontrollabel/code.mdx create mode 100644 src/collections/sistent/components/formcontrollabel/guidance.mdx create mode 100644 src/collections/sistent/components/grid/GridItem.js create mode 100644 src/collections/sistent/components/grid/code.mdx create mode 100644 src/collections/sistent/components/grid/guidance.mdx create mode 100644 src/collections/sistent/components/iconbutton/IconButtonDemo.js create mode 100644 src/collections/sistent/components/iconbutton/code.mdx create mode 100644 src/collections/sistent/components/iconbutton/guidance.mdx rename src/{sections/Projects/Sistent/components/icons/index.js => collections/sistent/components/icons/IconsDemo.js} (52%) create mode 100644 src/collections/sistent/components/icons/code.mdx create mode 100644 src/collections/sistent/components/icons/guidance.mdx create mode 100644 src/collections/sistent/components/link/code.mdx create mode 100644 src/collections/sistent/components/link/guidance.mdx create mode 100644 src/collections/sistent/components/list/ListDemo.js create mode 100644 src/collections/sistent/components/list/code.mdx create mode 100644 src/collections/sistent/components/list/guidance.mdx create mode 100644 src/collections/sistent/components/modal/ModalDemo.js create mode 100644 src/collections/sistent/components/modal/code.mdx create mode 100644 src/collections/sistent/components/modal/guidance.mdx create mode 100644 src/collections/sistent/components/pagination/PaginationDemo.js create mode 100644 src/collections/sistent/components/pagination/code.mdx create mode 100644 src/collections/sistent/components/pagination/guidance.mdx create mode 100644 src/collections/sistent/components/paper/code.mdx create mode 100644 src/collections/sistent/components/paper/guidance.mdx create mode 100644 src/collections/sistent/components/popper/PopperDemo.js create mode 100644 src/collections/sistent/components/popper/code.mdx create mode 100644 src/collections/sistent/components/popper/guidance.mdx create mode 100644 src/collections/sistent/components/radiogroup/RadioGroupDemo.js create mode 100644 src/collections/sistent/components/radiogroup/code.mdx create mode 100644 src/collections/sistent/components/radiogroup/guidance.mdx create mode 100644 src/collections/sistent/components/select/SelectDemo.js create mode 100644 src/collections/sistent/components/select/code.mdx create mode 100644 src/collections/sistent/components/select/guidance.mdx create mode 100644 src/collections/sistent/components/stack/code.mdx create mode 100644 src/collections/sistent/components/stack/guidance.mdx create mode 100644 src/collections/sistent/components/stepper/StepperDemo.js create mode 100644 src/collections/sistent/components/stepper/code.mdx create mode 100644 src/collections/sistent/components/stepper/guidance.mdx create mode 100644 src/collections/sistent/components/switch/SwitchDemo.js create mode 100644 src/collections/sistent/components/switch/code.mdx create mode 100644 src/collections/sistent/components/switch/guidance.mdx create mode 100644 src/collections/sistent/components/tabs/TabsDemo.js create mode 100644 src/collections/sistent/components/tabs/code.mdx create mode 100644 src/collections/sistent/components/tabs/guidance.mdx create mode 100644 src/collections/sistent/components/text-field/TextFieldDemo.js create mode 100644 src/collections/sistent/components/text-field/code.mdx create mode 100644 src/collections/sistent/components/text-field/guidance.mdx create mode 100644 src/collections/sistent/components/text-input/TextInputDemo.js create mode 100644 src/collections/sistent/components/text-input/code.mdx create mode 100644 src/collections/sistent/components/text-input/guidance.mdx create mode 100644 src/collections/sistent/components/toggle-button/ToggleButtonDemo.js create mode 100644 src/collections/sistent/components/toggle-button/code.mdx create mode 100644 src/collections/sistent/components/toggle-button/guidance.mdx create mode 100644 src/collections/sistent/components/toolbar/ToolbarDemo.js create mode 100644 src/collections/sistent/components/toolbar/code.mdx create mode 100644 src/collections/sistent/components/toolbar/guidance.mdx create mode 100644 src/collections/sistent/components/tooltip/TooltipDemo.js create mode 100644 src/collections/sistent/components/tooltip/code.mdx create mode 100644 src/collections/sistent/components/tooltip/guidance.mdx delete mode 100644 src/sections/Projects/Sistent/components/accordion/code.js delete mode 100644 src/sections/Projects/Sistent/components/accordion/guidance.js delete mode 100644 src/sections/Projects/Sistent/components/accordion/index.js delete mode 100644 src/sections/Projects/Sistent/components/avatar-group/code.js delete mode 100644 src/sections/Projects/Sistent/components/avatar-group/guidance.js delete mode 100644 src/sections/Projects/Sistent/components/avatar-group/index.js delete mode 100644 src/sections/Projects/Sistent/components/avatar/code.js delete mode 100644 src/sections/Projects/Sistent/components/avatar/guidance.js delete mode 100644 src/sections/Projects/Sistent/components/avatar/index.js delete mode 100644 src/sections/Projects/Sistent/components/backdrop/code.js delete mode 100644 src/sections/Projects/Sistent/components/backdrop/guidance.js delete mode 100644 src/sections/Projects/Sistent/components/backdrop/index.js delete mode 100644 src/sections/Projects/Sistent/components/badge/code.js delete mode 100644 src/sections/Projects/Sistent/components/badge/guidance.js delete mode 100644 src/sections/Projects/Sistent/components/badge/index.js delete mode 100644 src/sections/Projects/Sistent/components/box/code.js delete mode 100644 src/sections/Projects/Sistent/components/box/guidance.js delete mode 100644 src/sections/Projects/Sistent/components/box/index.js delete mode 100644 src/sections/Projects/Sistent/components/button-group/code.js delete mode 100644 src/sections/Projects/Sistent/components/button-group/guidance.js delete mode 100644 src/sections/Projects/Sistent/components/button-group/index.js delete mode 100644 src/sections/Projects/Sistent/components/button/code-block.js delete mode 100644 src/sections/Projects/Sistent/components/button/code.js delete mode 100644 src/sections/Projects/Sistent/components/button/guidance.js delete mode 100644 src/sections/Projects/Sistent/components/button/index.js delete mode 100644 src/sections/Projects/Sistent/components/chip/code.js delete mode 100644 src/sections/Projects/Sistent/components/chip/guidance.js delete mode 100644 src/sections/Projects/Sistent/components/chip/index.js delete mode 100644 src/sections/Projects/Sistent/components/circularprogress/code.js delete mode 100644 src/sections/Projects/Sistent/components/circularprogress/guidance.js delete mode 100644 src/sections/Projects/Sistent/components/circularprogress/index.js delete mode 100644 src/sections/Projects/Sistent/components/collapse/code.js delete mode 100644 src/sections/Projects/Sistent/components/collapse/guidance.js delete mode 100644 src/sections/Projects/Sistent/components/collapse/index.js delete mode 100644 src/sections/Projects/Sistent/components/container/code.js delete mode 100644 src/sections/Projects/Sistent/components/container/guidance.js delete mode 100644 src/sections/Projects/Sistent/components/container/index.js delete mode 100644 src/sections/Projects/Sistent/components/dialog/code.js delete mode 100644 src/sections/Projects/Sistent/components/dialog/guidance.js delete mode 100644 src/sections/Projects/Sistent/components/dialog/index.js delete mode 100644 src/sections/Projects/Sistent/components/divider/code.js delete mode 100644 src/sections/Projects/Sistent/components/divider/guidance.js delete mode 100644 src/sections/Projects/Sistent/components/divider/index.js delete mode 100644 src/sections/Projects/Sistent/components/drawer/code.js delete mode 100644 src/sections/Projects/Sistent/components/drawer/guidance.js delete mode 100644 src/sections/Projects/Sistent/components/drawer/index.js delete mode 100644 src/sections/Projects/Sistent/components/formcontrollabel/code.js delete mode 100644 src/sections/Projects/Sistent/components/formcontrollabel/guidance.js delete mode 100644 src/sections/Projects/Sistent/components/formcontrollabel/index.js delete mode 100644 src/sections/Projects/Sistent/components/grid/code.js delete mode 100644 src/sections/Projects/Sistent/components/grid/guidance.js delete mode 100644 src/sections/Projects/Sistent/components/grid/index.js delete mode 100644 src/sections/Projects/Sistent/components/iconbutton/code.js delete mode 100644 src/sections/Projects/Sistent/components/iconbutton/guidance.js delete mode 100644 src/sections/Projects/Sistent/components/iconbutton/index.js delete mode 100644 src/sections/Projects/Sistent/components/icons/code.js delete mode 100644 src/sections/Projects/Sistent/components/icons/guidance.js delete mode 100644 src/sections/Projects/Sistent/components/link/code.js delete mode 100644 src/sections/Projects/Sistent/components/link/guidance.js delete mode 100644 src/sections/Projects/Sistent/components/link/index.js delete mode 100644 src/sections/Projects/Sistent/components/list/code.js delete mode 100644 src/sections/Projects/Sistent/components/list/guidance.js delete mode 100644 src/sections/Projects/Sistent/components/list/index.js delete mode 100644 src/sections/Projects/Sistent/components/modal/code.js delete mode 100644 src/sections/Projects/Sistent/components/modal/guidance.js delete mode 100644 src/sections/Projects/Sistent/components/modal/index.js delete mode 100644 src/sections/Projects/Sistent/components/pagination/code.js delete mode 100644 src/sections/Projects/Sistent/components/pagination/guidance.js delete mode 100644 src/sections/Projects/Sistent/components/pagination/index.js delete mode 100644 src/sections/Projects/Sistent/components/paper/code.js delete mode 100644 src/sections/Projects/Sistent/components/paper/guidance.js delete mode 100644 src/sections/Projects/Sistent/components/paper/index.js delete mode 100644 src/sections/Projects/Sistent/components/popper/code.js delete mode 100644 src/sections/Projects/Sistent/components/popper/guidance.js delete mode 100644 src/sections/Projects/Sistent/components/popper/index.js delete mode 100644 src/sections/Projects/Sistent/components/radiogroup/code.js delete mode 100644 src/sections/Projects/Sistent/components/radiogroup/guidance.js delete mode 100644 src/sections/Projects/Sistent/components/radiogroup/index.js delete mode 100644 src/sections/Projects/Sistent/components/select/code.js delete mode 100644 src/sections/Projects/Sistent/components/select/guidance.js delete mode 100644 src/sections/Projects/Sistent/components/select/header.js delete mode 100644 src/sections/Projects/Sistent/components/select/index.js delete mode 100644 src/sections/Projects/Sistent/components/select/section-nav.js delete mode 100644 src/sections/Projects/Sistent/components/stack/code.js delete mode 100644 src/sections/Projects/Sistent/components/stack/guidance.js delete mode 100644 src/sections/Projects/Sistent/components/stack/index.js delete mode 100644 src/sections/Projects/Sistent/components/stepper/code.js delete mode 100644 src/sections/Projects/Sistent/components/stepper/guidance.js delete mode 100644 src/sections/Projects/Sistent/components/stepper/index.js delete mode 100644 src/sections/Projects/Sistent/components/switch/code.js delete mode 100644 src/sections/Projects/Sistent/components/switch/guidance.js delete mode 100644 src/sections/Projects/Sistent/components/switch/index.js delete mode 100644 src/sections/Projects/Sistent/components/tabs/code.js delete mode 100644 src/sections/Projects/Sistent/components/tabs/guidance.js delete mode 100644 src/sections/Projects/Sistent/components/tabs/index.js delete mode 100644 src/sections/Projects/Sistent/components/text-field/code.js delete mode 100644 src/sections/Projects/Sistent/components/text-field/guidance.js delete mode 100644 src/sections/Projects/Sistent/components/text-field/index.js delete mode 100644 src/sections/Projects/Sistent/components/text-input/code.js delete mode 100644 src/sections/Projects/Sistent/components/text-input/guidance.js delete mode 100644 src/sections/Projects/Sistent/components/text-input/index.js delete mode 100644 src/sections/Projects/Sistent/components/toggle-button/code.js delete mode 100644 src/sections/Projects/Sistent/components/toggle-button/guidance.js delete mode 100644 src/sections/Projects/Sistent/components/toggle-button/index.js delete mode 100644 src/sections/Projects/Sistent/components/toolbar/code.js delete mode 100644 src/sections/Projects/Sistent/components/toolbar/guidance.js delete mode 100644 src/sections/Projects/Sistent/components/toolbar/index.js delete mode 100644 src/sections/Projects/Sistent/components/tooltip/code.js delete mode 100644 src/sections/Projects/Sistent/components/tooltip/guidance.js delete mode 100644 src/sections/Projects/Sistent/components/tooltip/index.js create mode 100644 src/sections/Projects/Sistent/theme-wrapper.js create mode 100644 src/templates/sistent-component.js diff --git a/gatsby-node.js b/gatsby-node.js index 2c16bae787f2b..9a65ec5b8d113 100644 --- a/gatsby-node.js +++ b/gatsby-node.js @@ -242,23 +242,19 @@ exports.createPages = async ({ actions, graphql, reporter }) => { sistentComponents: allMdx( filter: { fields: { collection: { eq: "sistent" } } - frontmatter: { published: { eq: true } } } ) { - nodes { - frontmatter { - name - title - description - component - pages - } - fields { - slug - collection - } - internal { - contentFilePath + group(field: { fields: { componentName: SELECT } }) { + fieldValue + nodes { + fields { + slug + componentName + pageType + } + internal { + contentFilePath + } } } } @@ -563,43 +559,26 @@ exports.createPages = async ({ actions, graphql, reporter }) => { }); // Create Sistent component pages dynamically from MDX - const sistentComponents = res.data.sistentComponents.nodes; - - sistentComponents.forEach((node) => { - const componentName = node.frontmatter.component; - const pages = node.frontmatter.pages || ["overview"]; - - const pageTypes = [ - { suffix: "", file: "index.js", pageType: "overview" }, - { suffix: "/guidance", file: "guidance.js", pageType: "guidance" }, - { suffix: "/code", file: "code.js", pageType: "code" }, - ]; - - pageTypes.forEach(({ suffix, file, pageType }) => { - // Only create pages that exist in frontmatter - if (pages.includes(pageType)) { - const pagePath = `/projects/sistent/components/${componentName}${suffix}`; - const componentPath = `./src/sections/Projects/Sistent/components/${componentName}/${file}`; - - if (fs.existsSync(path.resolve(componentPath))) { - try { - createPage({ - path: pagePath, - component: require.resolve(componentPath), - context: { - slug: `/sistent/components/${componentName}`, - componentName: componentName, - }, - }); - } catch (error) { - console.error(`Error creating page for "${pagePath}":`, error); - } - } else { - console.info( - `Skipping creating page "${pagePath}" - file not found: "${componentPath}"` - ); - } - } + // Use grouping to identify which sub-pages (Tabs) exist for each component + const sistentGroups = res.data.sistentComponents.group; + const sistentTemplate = path.resolve("src/templates/sistent-component.js"); + + sistentGroups.forEach((group) => { + const componentName = group.fieldValue; + // content-learn uses different fields, sistent uses componentName. + + const availablePages = group.nodes.map(node => node.fields.pageType); + + group.nodes.forEach((node) => { + createPage({ + path: node.fields.slug, + component: `${sistentTemplate}?__contentFilePath=${node.internal.contentFilePath}`, + context: { + slug: node.fields.slug, + componentName: componentName, + availablePages: availablePages + } + }); }); }); }; @@ -688,13 +667,11 @@ exports.onCreateNode = ({ node, actions, getNode }) => { const parent = getNode(node.parent); let collection = parent.sourceInstanceName; - // --- CHANGED: Consolidated Source Logic --- // If the source is "collections", we determine the actual collection // from the parent directory name (e.g., "blog", "news", etc.) if (collection === "collections") { collection = parent.relativeDirectory.split("/")[0]; } - // ------------------------------------------ createNodeField({ name: "collection", @@ -742,7 +719,24 @@ exports.onCreateNode = ({ node, actions, getNode }) => { case "sistent": { // For sistent components, create slug from directory structure const componentSlug = parent.relativeDirectory.split("/").pop(); - slug = `/sistent/components/${componentSlug}`; + const fileName = parent.name; + const suffix = fileName === "index" ? "" : `/${fileName}`; + + slug = `/projects/sistent/components/${componentSlug}${suffix}`; + + createNodeField({ + name: "componentName", + node, + value: componentSlug, + }); + + // "index" -> "overview", others match filename + const pageType = fileName === "index" ? "overview" : fileName; + createNodeField({ + name: "pageType", + node, + value: pageType, + }); break; } default: diff --git a/src/collections/sistent/components/accordion/ControlledAccordion.js b/src/collections/sistent/components/accordion/ControlledAccordion.js new file mode 100644 index 0000000000000..60ceb0cacf5ee --- /dev/null +++ b/src/collections/sistent/components/accordion/ControlledAccordion.js @@ -0,0 +1,64 @@ +import React, { useState } from "react"; +import { Accordion, AccordionSummary, AccordionDetails, Typography } from "@sistent/sistent"; +import ExpandMoreIcon from "@mui/icons-material/ExpandMore"; + +const ControlledAccordion = () => { + const [expanded, setExpanded] = useState("panel1"); + + const handleChange = (panel) => (event, isExpanded) => { + setExpanded(isExpanded ? panel : false); + }; + + return ( +
+ + } + aria-controls="panel1bh-content" + id="panel1bh-header" + > + + General settings + + + + + Controlled accordions manage their expanded state through React, allowing only one panel to be open at a time. This creates a cleaner, more focused user experience by preventing multiple sections from being visible simultaneously. + + + + + } + aria-controls="panel2bh-content" + id="panel2bh-header" + > + Users + + + + When expanding this panel, the previously opened panel automatically collapses. This behavior is ideal for settings pages, configuration panels, and any interface where you want users to focus on one section at a time. + + + + + } + aria-controls="panel3bh-content" + id="panel3bh-header" + > + + Advanced settings + + + + + Accordions help organize complex information into digestible sections. They reduce cognitive load by hiding content until users actively choose to reveal it, making interfaces feel less overwhelming and more navigable. + + + +
+ ); +}; + +export default ControlledAccordion; diff --git a/src/collections/sistent/components/accordion/code.mdx b/src/collections/sistent/components/accordion/code.mdx new file mode 100644 index 0000000000000..815809946f7bf --- /dev/null +++ b/src/collections/sistent/components/accordion/code.mdx @@ -0,0 +1,231 @@ +--- +title: Accordion Code +component: accordion +description: An accordion is a vertically stacked list of headers that can be clicked to reveal or hide associated content. It allows users to toggle between hiding and showing large amounts of content in a compact space. +--- + +import ExpandMoreIcon from "@mui/icons-material/ExpandMore"; +import { Accordion, AccordionSummary, AccordionDetails, Typography } from "@sistent/sistent"; +import ControlledAccordion from "./ControlledAccordion"; + + + + +

Basic Accordion

+ + +A simple accordion with multiple independent panels. Each panel can be expanded and collapsed without affecting others. + +
+
+ +
+ + } + aria-controls="panel1-content" + id="panel1-header" + > + Accordion 1 + + + + This is the content for the first accordion panel. You can add any content here, including text, images, or other components. + + + + + } + aria-controls="panel2-content" + id="panel2-header" + > + Accordion 2 + + + + This is the content for the second accordion panel. Accordions can contain rich content and media. + + + +
+ +
+ + + } + aria-controls="panel1-content" + id="panel1-header" + > + Accordion 1 + + + + This is the content for the first accordion panel. + + + + + } + aria-controls="panel2-content" + id="panel2-header" + > + Accordion 2 + + + + This is the content for the second accordion panel. + + + +`} /> +
+ + +

Controlled Accordion

+ + +A controlled accordion where the expanded state is managed by React state. This allows only one panel to be expanded at a time, providing a more focused user experience. + +
+
+ + + +
+ (event, isExpanded) => { + setExpanded(isExpanded ? panel : false); +}; + + + + } + aria-controls="panel1bh-content" + id="panel1bh-header" + > + General settings + + + + This accordion is controlled. Only one panel can be open at a time. + + + + + } + aria-controls="panel2bh-content" + id="panel2bh-header" + > + Users + + + + Content for the second panel. + + + +`} /> +
+ + +

Default Expanded

+ + +Use the defaultExpanded prop to have an accordion panel expanded by default when the component mounts. + +
+
+ +
+ + } + aria-controls="panel1-content" + id="panel1-header" + > + Expanded by Default + + + + This accordion panel is expanded by default using the defaultExpanded prop. Users can still collapse it. + + + +
+ +
+ + + } + aria-controls="panel1-content" + id="panel1-header" + > + Expanded by Default + + + + This accordion panel is expanded by default using the + defaultExpanded prop. + + + +`} /> +
+ + +

Disabled Accordion

+ + +Use the disabled prop to prevent users from interacting with an accordion panel. + +
+
+ +
+ + } + aria-controls="panel1-content" + id="panel1-header" + > + Disabled Accordion + + + + This content cannot be accessed as the accordion is disabled. + + + +
+ +
+ + + } + aria-controls="panel1-content" + id="panel1-header" + > + Disabled Accordion + + + + This content cannot be accessed as the accordion is disabled. + + + +`} /> +
diff --git a/src/collections/sistent/components/accordion/guidance.mdx b/src/collections/sistent/components/accordion/guidance.mdx new file mode 100644 index 0000000000000..87d2349b20e39 --- /dev/null +++ b/src/collections/sistent/components/accordion/guidance.mdx @@ -0,0 +1,147 @@ +--- +title: Accordion Guidance +component: accordion +description: An accordion is a vertically stacked list of headers that can be clicked to reveal or hide associated content. It allows users to toggle between hiding and showing large amounts of content in a compact space. +--- + +import ExpandMoreIcon from "@mui/icons-material/ExpandMore"; +import { Accordion, AccordionSummary, AccordionDetails, Typography } from "@sistent/sistent"; +import ControlledAccordion from "./ControlledAccordion"; + + +

Usage

+ + +Accordions are useful when you want to toggle between hiding and showing large amounts of content. They help reduce vertical space and improve the user experience by organizing content in a hierarchical, easy-to-scan way. + +
    +
  • Use accordions to organize related information into sections
    • +
  • Allow users to focus on one section at a time
    • +
  • Reduce scrolling by collapsing content that's not immediately needed
    • +
  • Provide clear, descriptive headers for each accordion panel
    • +
+ + +

Basic Example

+ + +A simple accordion with expand/collapse functionality. Each panel can be opened and closed independently. + + + +
+ + } + aria-controls="usage-panel1-content" + id="usage-panel1-header" + > + What is Meshery? + + + + Meshery is the cloud native management plane offering lifecycle management of more Kubernetes-based infrastructure and applications. + + + + + } + aria-controls="usage-panel2-content" + id="usage-panel2-header" + > + What is Kanvas? + + + + Kanvas is a visual topology and infrastructure management tool for cloud native applications and infrastructure. + + + +
+ + + + +

When to Use

+ + +Accordions are best used when you need to present multiple sections of content in a limited space. Here are some common use cases: + +

Frequently Asked Questions (FAQs)

+ +Accordions are ideal for FAQ sections where users can expand only the questions they're interested in, making it easier to scan and find relevant information. + + + +
+ + }> + How do I get started with Layer5? + + + + Visit the Layer5 community page, join our Slack, and explore the getting started guides for each project. + + + + + }> + Is Layer5 open source? + + + + Yes, all Layer5 projects are open source and welcome contributions from the community. + + + +
+ + + +

Settings and Configuration Panels

+ +Use accordions to organize different categories of settings, allowing users to focus on one category at a time. + + + + + + + +

Documentation and Help Sections

+ +Organize documentation into collapsible sections to help users navigate through large amounts of information efficiently. + + +

Best Practices

+ + +Follow these guidelines to ensure accordions are effective and user-friendly: + +
    +
  • + Clear Headers: Use descriptive, concise headers that clearly indicate the content within each panel. Users should be able to understand what information they'll find before expanding. +
    • +
  • + Logical Grouping: Group related content together and order panels in a logical sequence (alphabetical, chronological, or by importance). +
    • +
  • + Visual Indicators: Always use clear expand/collapse icons (like arrows) to indicate the current state and interactivity of each panel. +
    • +
  • + Controlled vs Uncontrolled: Decide whether multiple panels can be open simultaneously (uncontrolled) or only one at a time (controlled) based on your use case. +
    • +
  • + Accessible: Ensure accordions are keyboard accessible and work with screen readers. Use proper ARIA attributes for accessibility. +
    • +
  • + Performance: Avoid nesting too many accordions or placing heavy content inside panels that could slow down the page. +
    • +
  • + Mobile-Friendly: Accordions work particularly well on mobile devices where screen space is limited. Ensure touch targets are large enough. +
    • +
  • + Default State: Consider which panels (if any) should be expanded by default based on the most commonly accessed information. +
    • +
diff --git a/src/collections/sistent/components/accordion/index.mdx b/src/collections/sistent/components/accordion/index.mdx index 2c50e4110546e..1f246c14ea691 100644 --- a/src/collections/sistent/components/accordion/index.mdx +++ b/src/collections/sistent/components/accordion/index.mdx @@ -1,11 +1,66 @@ --- name: "Accordion" title: "Accordion" -description: "An accordion is a vertically stacked list of headers that can be clicked to reveal or hide associated content, allowing users to toggle between hiding and showing large amounts of content in a compact space." -component: "accordion" published: true -pages: - - overview - - guidance - - code +component: accordion +description: An accordion is a vertically stacked list of headers that can be clicked to reveal or hide associated content. It allows users to toggle between hiding and showing large amounts of content in a compact space. --- + +import ExpandMoreIcon from "@mui/icons-material/ExpandMore"; +import { Accordion, AccordionSummary, AccordionDetails, Typography } from "@sistent/sistent"; +import ControlledAccordion from "./ControlledAccordion"; + +Accordions are useful when you want to toggle between hiding and showing large amounts of content. They help reduce vertical space and improve the user experience by organizing content in a hierarchical, easy-to-scan way. + + +

Basic Accordion

+ + +A basic accordion with multiple panels that can be expanded and collapsed independently. + + + +
+ + } + aria-controls="panel1-content" + id="panel1-header" + > + Accordion 1 + + + + This is the content for the first accordion panel. You can add any content here, including text, images, or other components. + + + + + } + aria-controls="panel2-content" + id="panel2-header" + > + Accordion 2 + + + + This is the content for the second accordion panel. Accordions can contain rich content and media. + + + +
+ + + + +

Controlled Accordion

+ + +A controlled accordion where only one panel can be expanded at a time, providing a more focused user experience. + + + + + + diff --git a/src/collections/sistent/components/avatar-group/code.mdx b/src/collections/sistent/components/avatar-group/code.mdx new file mode 100644 index 0000000000000..3d42ededcae74 --- /dev/null +++ b/src/collections/sistent/components/avatar-group/code.mdx @@ -0,0 +1,150 @@ +--- +title: AvatarGroup Code +component: avatar-group +description: The AvatarGroup component is used to visually represent a collection of users or entities in a compact and organized layout. It's ideal for showcasing team members, collaborators, or participants, and is often used in dashboards, cards, and collaborative tools. AvatarGroup handles overlapping, spacing, and overflow logic to ensure clarity even with limited space. +--- + +import { Avatar, AvatarGroup } from "@sistent/sistent"; +import user1 from "../../../../assets/images/sistent/placeholder/user.webp"; +import user2 from "../../../../assets/images/sistent/placeholder/user.webp"; +import user3 from "../../../../assets/images/sistent/placeholder/user.webp"; +import user4 from "../../../../assets/images/sistent/placeholder/user.webp"; + +The AvatarGroup component helps visually group multiple avatars in a compact and meaningful layout, often representing users in a shared context. + +

AvatarGroup Implementation Variants

+ +

Basic AvatarGroup

+Display a horizontal group of avatars with default overlap. + +
+
+ + + + + + + +
+ + + + +`} /> +
+ +

Max Avatars

+Limit the number of visible avatars using the `max` prop. + +
+
+ + + + + + + + +
+ + + + + +`} /> +
+ +

Custom Spacing

+Control the spacing between avatars. + +
+
+ + + + + + + +
+ + + + +`} /> +
+ +

Shape Variants

+Mix avatar shape variants like square and rounded. + +
+
+ + + + + + + +
+ + + + +`} /> +
+ +

Total Avatars

+You can indicate the total number of avatars using the `total` prop, even if not all are rendered. + +
+
+ + + + + + + +
+ + + + +`} /> +
+ +

Custom Surplus Renderer

+Customize the overflow display using the `renderSurplus` prop for more control over surplus appearance. + +
+
+ + ( + +{surplus.toString()[0]}k + )} + total={4251} + > + + + + + + +
+ ( + {\`+\${surplus} more\`} + )} +> + + + + +`} /> +
diff --git a/src/collections/sistent/components/avatar-group/guidance.mdx b/src/collections/sistent/components/avatar-group/guidance.mdx new file mode 100644 index 0000000000000..b012bfd4ad74f --- /dev/null +++ b/src/collections/sistent/components/avatar-group/guidance.mdx @@ -0,0 +1,39 @@ +--- +title: AvatarGroup Guidance +component: avatar-group +description: The AvatarGroup component is used to visually represent a collection of users or entities in a compact and organized layout. It's ideal for showcasing team members, collaborators, or participants, and is often used in dashboards, cards, and collaborative tools. AvatarGroup handles overlapping, spacing, and overflow logic to ensure clarity even with limited space. +--- + +

Avatar Group

+ +The AvatarGroup component displays a compact collection of avatar elements that represent a group of users or entities. It’s useful in collaborative spaces, team-based features, or user listings. + +

Design Guidelines and Best Practices

+ +When implementing `AvatarGroup`, it's important to consider how it enhances collaboration and identity clarity without overwhelming the interface. Here are key best practices: + +
    +
  • + Use to represent teams or shared ownership: Ideal for showing members of a project, contributors, or shared access groups in apps like dashboards or chat. +
    • +
  • + Don’t overuse in dense interfaces: Too many avatars in a group can clutter the view. Use the `max` prop to collapse overflow into a `+N` indicator. +
    • +
  • + Use consistent sizing and spacing: Align all avatars to the same size to maintain visual harmony. Use `spacing` options (or `sx`) for controlled overlap. +
    • +
  • + Provide accessible alt text: Each avatar should have meaningful alternative text for screen readers. Avoid empty or redundant `alt` values. +
    • +
  • + Avoid interactive behavior within AvatarGroup: The component is for display only. If avatars must be clickable, wrap each `<Avatar>` individually in buttons or links outside the group context. +
    • +
  • + Keep it compact: AvatarGroup is not meant for long lists. For large user sets, link to a full view or show summary avatars only. +
    • +
  • + Fallbacks matter: Always account for broken images by using initials or icons as fallback content within each `Avatar`. +
    • +
+ +This ensures that `AvatarGroup` remains a helpful, visually tidy, and accessible interface element wherever user identity grouping is necessary. diff --git a/src/collections/sistent/components/avatar-group/index.mdx b/src/collections/sistent/components/avatar-group/index.mdx index 2605674f1aa53..6ba15740b9b0c 100644 --- a/src/collections/sistent/components/avatar-group/index.mdx +++ b/src/collections/sistent/components/avatar-group/index.mdx @@ -1,11 +1,102 @@ --- name: "AvatarGroup" -title: "AvatarGroup" -description: "An AvatarGroup component is used to display a collection of Avatars together, typically representing a group of users, collaborators, or participants." -component: "avatar-group" +title: AvatarGroup published: true -pages: - - overview - - guidance - - code +component: avatar-group +description: The AvatarGroup component is used to visually represent a collection of users or entities in a compact and organized layout. It's ideal for showcasing team members, collaborators, or participants, and is often used in dashboards, cards, and collaborative tools. AvatarGroup handles overlapping, spacing, and overflow logic to ensure clarity even with limited space. --- + +import { Avatar, AvatarGroup } from "@sistent/sistent"; +import user1 from "../../../../assets/images/sistent/placeholder/user.webp"; +import user2 from "../../../../assets/images/sistent/placeholder/user.webp"; +import user3 from "../../../../assets/images/sistent/placeholder/user.webp"; +import user4 from "../../../../assets/images/sistent/placeholder/user.webp"; + +AvatarGroup is used to display a collection of user avatars together, typically for showing team members or participants in collaborative features. + +

Basic Avatar Group

+ +The simplest use case: showing multiple avatars grouped horizontally. + + + +
+ + + + + +
+ + + +

Limiting Displayed Avatars

+ +You can limit the number of avatars shown using the `max` prop. Additional avatars are collapsed into a counter (e.g. +2). + + + +
+ + + + + + +
+ + + +

Custom Spacing

+ +Customize the gap between avatars using the `spacing` prop. + + + +
+ + + + + +
+ + + +

Avatar Variants in Group

+ +You can combine avatar shape variants like `rounded` and `square` inside the group. + + + +
+ + + + + +
+ + + +

Custom Surplus Renderer

+ +Customize the overflow display using the `renderSurplus` prop for more control over surplus appearance. + + + +
+ ( + +{surplus.toString()[0]}k + )} + total={4251} + > + + + + +
+ + diff --git a/src/collections/sistent/components/avatar/code.mdx b/src/collections/sistent/components/avatar/code.mdx new file mode 100644 index 0000000000000..bf694fa7c9be4 --- /dev/null +++ b/src/collections/sistent/components/avatar/code.mdx @@ -0,0 +1,102 @@ +--- +title: Avatar Code +component: avatar +description: The Avatar component offers a flexible visual representation of users or entities, supporting profile images, initials, icons, and customizable styles. +--- + +import { Avatar } from "@sistent/sistent"; +import { FaUser } from "@react-icons/all-files/fa/FaUser"; +import user from "../../../../assets/images/sistent/placeholder/user.webp"; + +The Avatar component offers a flexible visual representation of users or entities, supporting profile images, initials, icons, and customizable styles. + +

Avatar Implementation Variants

+ +

Image Avatar

+Display user profile images. + +
+
+ +
+ +
+ +
+ `} /> +
+ +

Initials Avatar

+Use initials when an image is unavailable. + +
+
+ +
+ JD +
+ +
+ JD`} /> +
+ +

Icon Avatar

+Use icons for generic representation. + +
+
+ +
+ + + +
+ +
+ `} /> +
+ +

Sized Avatars

+Adjust avatar sizes to fit various contexts. + +
+
+ +
+ + + +
+ +
+ + + + +`} /> +
+ +

Custom Styling

+Apply custom styles using the sx prop. + +
+
+ +
+ S +
+ +
+ S`} /> +
diff --git a/src/collections/sistent/components/avatar/guidance.mdx b/src/collections/sistent/components/avatar/guidance.mdx new file mode 100644 index 0000000000000..6a1161146959b --- /dev/null +++ b/src/collections/sistent/components/avatar/guidance.mdx @@ -0,0 +1,49 @@ +--- +title: Avatar Guidance +component: avatar +description: The Avatar component represents a user using an image, initials, or an icon. It is a crucial UI element for providing visual identity across digital platforms. +--- + + + +

Best Practices

+ +
    +
  • + Visual Representation: Choose clear, recognizable images that authentically represent the user or entity. +
    • +
  • + Fallback Mechanisms: Implement robust fallback strategies: +
    • +
  • Optimize image resolution for performance and clarity.
    • +
+ +

Accessibility Considerations

+
    +
  • + Mandatory alt text for screen reader compatibility. +
    • +
  • Ensure 4.5:1 color contrast ratio for initials and icons.
    • +
  • Add meaningful aria labels for context.
    • +
+ +

Performance Optimization

+
    +
  • Use image compression techniques.
    • +
  • Implement lazy loading for avatar images.
    • +
  • Cache avatar images to reduce network requests.
    • +
+ +

Advanced Customization

+
    +
  • Theme-aware color generation for initial avatars.
    • +
  • Status indicators (online/offline/away).
    • +
+ +

Common Integration Patterns

+
    +
  • User profile headers
    • +
  • Team member lists
    • +
  • Comment and messaging interfaces
    • +
  • Collaboration platform user representations
    • +
diff --git a/src/collections/sistent/components/avatar/index.mdx b/src/collections/sistent/components/avatar/index.mdx index 175f1c4ec993f..39c546dc2eca1 100644 --- a/src/collections/sistent/components/avatar/index.mdx +++ b/src/collections/sistent/components/avatar/index.mdx @@ -1,11 +1,80 @@ --- name: "Avatar" -title: "Avatar" -description: "An Avatar component is used to visually represent a user, profile, or entity, typically through an image, initials, or icon." -component: "avatar" +title: Avatar published: true -pages: - - overview - - guidance - - code +component: avatar +description: An Avatar component is used to visually represent a user, profile, or entity, typically through an image, initials, or icon. It is commonly used in interfaces to indicate identity. --- + +import { Avatar } from "@sistent/sistent"; +import { FaUser } from "@react-icons/all-files/fa/FaUser"; +import profilePicture from "../../../../assets/images/sistent/placeholder/user.webp"; + +Avatars are versatile visual representations that provide instant visual identification for users, teams, or entities within digital interfaces. They serve as a quick and intuitive way to personalize and humanize digital experiences across various applications and platforms. + +

Image Avatars

+ +Image avatars provide the most personalized representation by displaying actual profile pictures, organizational logos, or specific user imagery. + + + +
+ +
+ + + +

Initials Avatar

+ +When a profile image is unavailable, initials provide a professional and clean alternative for user identification. + + + +
+ JS + AB + CD +
+ + + +

Icon Avatar

+ +Icon avatars offer a universal visual representation when specific imagery isn't available or appropriate. + + + +
+ + + +
+ + + +

Flexible Sizing

+ +Avatars can be dynamically sized to fit various design requirements and interface contexts. + + + +
+ + + +
+ + + +

Variants

+ +If you need square or rounded avatars, use the variant prop. + + + +
+ + +
+ + diff --git a/src/collections/sistent/components/backdrop/BackdropDemo.js b/src/collections/sistent/components/backdrop/BackdropDemo.js new file mode 100644 index 0000000000000..de8bde9ca554b --- /dev/null +++ b/src/collections/sistent/components/backdrop/BackdropDemo.js @@ -0,0 +1,26 @@ +import React, { useState } from "react"; +import { Backdrop, Button, CircularProgress } from "@sistent/sistent"; + +const BackdropDemo = () => { + const [open, setOpen] = useState(false); + const handleClose = () => setOpen(false); + const handleOpen = () => setOpen(true); + + return ( +
+ + ({ + color: "#fff", + zIndex: theme.zIndex.drawer + 1, + })} + open={open} + onClick={handleClose} + > + + +
+ ); +}; + +export default BackdropDemo; diff --git a/src/collections/sistent/components/backdrop/code.mdx b/src/collections/sistent/components/backdrop/code.mdx new file mode 100644 index 0000000000000..3a6ecfdf432ed --- /dev/null +++ b/src/collections/sistent/components/backdrop/code.mdx @@ -0,0 +1,42 @@ +--- +title: Backdrop Code +component: backdrop +description: The Backdrop component overlays a dimmed background across the screen to direct focus to specific content in the foreground, like loading indicators, modals, or dialogs. It visually signals that the background content is temporarily inaccessible. The Backdrop can be closed when clicked, depending on the close action set in its props. +--- + +import BackdropDemo from "./BackdropDemo"; + +The Backdrop component overlays a dimmed background across the screen to direct focus to specific content in the foreground, like loading indicators, modals, or dialogs. It visually signals that the background content is temporarily inaccessible. The Backdrop can be closed when clicked, depending on the close action set in its props. + + +

Backdrop Example

+ + +
+
+ + + +
+ setOpen(false); +const handleOpen = () => setOpen(true); +*/ +
+ + ({ + color: "#fff", + zIndex: theme.zIndex.drawer + 1, + })} + open={open} + onClick={handleClose} + > + + +
`} /> +
diff --git a/src/collections/sistent/components/backdrop/guidance.mdx b/src/collections/sistent/components/backdrop/guidance.mdx new file mode 100644 index 0000000000000..ad06405833555 --- /dev/null +++ b/src/collections/sistent/components/backdrop/guidance.mdx @@ -0,0 +1,45 @@ +--- +title: Backdrop Guidance +component: backdrop +description: The Backdrop component overlays a dimmed background across the screen to direct focus to specific content in the foreground, like loading indicators, modals, or dialogs. It visually signals that the background content is temporarily inaccessible. The Backdrop can be closed when clicked, depending on the close action set in its props. +--- + +

Backdrop

+ +The Backdrop component is used to overlay a dimmed background across the screen, drawing attention to content in the foreground, such as modals, dialogs, or loading indicators. The backdrop signals that the background content is temporarily inaccessible. + +The Backdrop component provides a clean and efficient way to overlay a backdrop layer to indicate that the background content is temporarily inactive or inaccessible. This component is primarily used in conjunction with modals, loading indicators, or popovers. + + +

Function

+ + +The Backdrop component helps achieve the following functions: + +
    +
  • + Modal Backdrop: Provides a visual overlay when a modal is open, dimming the background and focusing attention on the modal. +
    • +
  • + Loading Indicator: Can be used with a loading spinner or indicator to notify users that content is being processed. +
    • +
  • + Popover or Custom Select: Useful for making a popover or custom select component more noticeable by blocking interaction with the background. +
    • +
+ + +

Labeling

+ + +The Backdrop component provides a clear visual indication that content is temporarily inaccessible. It is typically used for displaying temporary UI elements, such as dialogs or loading indicators. It's important to ensure that the backdrop is not intrusive and is used in the appropriate context. + +It is also essential to consider accessibility and usability when implementing a backdrop. Ensure that users can interact with the content behind the backdrop when it is dismissed or closed, and ensure proper keyboard and screen reader support. + + +

Responsive Design

+ + +The Backdrop component can be easily integrated into responsive designs, ensuring that it adapts to different screen sizes and layouts. It should be used in a way that works well on mobile devices, tablets, and desktops. Consider the size of the overlay and how it impacts the user experience across devices. + +You can adjust the backdrop's visibility, duration, and animation to suit different screen sizes and provide a smooth user experience on all devices. diff --git a/src/collections/sistent/components/backdrop/index.mdx b/src/collections/sistent/components/backdrop/index.mdx index 4f76c4338d597..cfa31c29e4a7f 100644 --- a/src/collections/sistent/components/backdrop/index.mdx +++ b/src/collections/sistent/components/backdrop/index.mdx @@ -1,11 +1,25 @@ --- name: "Backdrop" -title: "Backdrop" -description: "Backdrop component overlays a dimmed screen to focus attention on foreground content." -component: "backdrop" +title: Backdrop published: true -pages: - - overview - - guidance - - code +component: backdrop +description: The Backdrop component overlays a dimmed background across the screen to direct focus to specific content in the foreground, like loading indicators, modals, or dialogs. It visually signals that the background content is temporarily inaccessible. The Backdrop can be closed when clicked, depending on the close action set in its props. --- + +import BackdropDemo from "./BackdropDemo"; + +The Backdrop component in React is used to overlay a dimmed background across the entire screen, guiding the user's focus to a specific element or content in the foreground. This component is often utilized for scenarios that require a change in the application’s state, such as showing loading indicators, modals, dialogs, or other focused content. + +In its simplest use, a Backdrop dims the background, enhancing the visibility of what’s in the foreground while signaling that the underlying content is temporarily inaccessible. When Backdrop is open, users can click on it to close it, depending on how the close action is handled in the component’s props. + + +

How to use

+ + +The demo below shows a basic Backdrop with a Circular Progress component in the foreground to indicate a loading state. After clicking Show Backdrop, you can click anywhere on the page to close it. + + + + + + diff --git a/src/collections/sistent/components/badge/code.mdx b/src/collections/sistent/components/badge/code.mdx new file mode 100644 index 0000000000000..a225d269abef5 --- /dev/null +++ b/src/collections/sistent/components/badge/code.mdx @@ -0,0 +1,177 @@ +--- +title: Badge Code +component: badge +description: A badge is a small piece of information that is used to convey a specific message or status. It is often used to provide additional context or information about an item, such as a notification count, status indicator, or label. +--- + +import { Badge, Avatar } from "@sistent/sistent"; +import MailIcon from "@mui/icons-material/Mail"; + +A badge is a small piece of information that is used to convey a specific message or status. It is often used to provide additional context or information about an item, such as a notification count, status indicator, or label. + +Badges display counts, small information indicators, or status markers that are attached to other interface elements. + + +

Basic Badge

+ + +Examples of badges containing text, primarily using the badgeContent prop. + +
+
+ + + + + +
+ + +`} /> +
+ +

Dot Badge

+The dot badge shows a small dot indicator without any content. + +
+
+ + + + + +
+ + +`} /> +
+ +

Badge Colors

+Use the color prop to apply theme palette colors to badges. + +
+
+ +
+ + + + + + + + + + + + + + + +
+ +
+ + + + +`} /> +
+ + +

Badge Position

+ + +Use the anchorOrigin prop to change the position of the badge. + +
+
+ +
+ + + + + + + + + + + + +
+ +
+ + +`} /> +
+ + +

Badge with Avatar

+ + +Badges can be used with avatars to show user status. + +
+
+ + + + U + + + +
+ + + U + +`} /> +
diff --git a/src/collections/sistent/components/badge/guidance.mdx b/src/collections/sistent/components/badge/guidance.mdx new file mode 100644 index 0000000000000..1d88724ff5aa8 --- /dev/null +++ b/src/collections/sistent/components/badge/guidance.mdx @@ -0,0 +1,179 @@ +--- +title: Badge Guidance +component: badge +description: A badge is a small piece of information that is used to convey a specific message or status. It is often used to provide additional context or information about an item, such as a notification count, status indicator, or label. +--- + +import { Badge, Avatar } from "@sistent/sistent"; +import MailIcon from "@mui/icons-material/Mail"; +import NotificationsIcon from "@mui/icons-material/Notifications"; + +A badge is a small piece of information that is used to convey a specific message or status. It is often used to provide additional context or information about an item, such as a notification count, status indicator, or label. + +For proper application, badges should be used consistently throughout the user interface to maintain clarity and user understanding. + + +

Function

+ + +The function of badges determines how they should be used in different scenarios to provide users with additional context or information. + +

Notification Badge

+ +Notification badges are commonly used to display counts of unread messages, alerts, or notifications. They typically appear as small circular indicators with numbers and are positioned at the top-right corner of icons, buttons, or user avatars. + + + +
+ + + +
+ + + +

Status Badge

+ +Status badges indicate the current state of an item or user. They can show whether a user is online/offline, if a service is active/inactive, or if a process is pending/completed. Status badges often use color coding to convey meaning, such as green for "online" or red for "error." + + + +
+ + + U + + +
+ + + +

Label Badge

+ +Label badges categorize or tag elements in the interface. They might indicate features like "New," "Premium," or "Beta" to highlight special characteristics of an item. These badges are often rectangular and contain text rather than just a number or dot. + + + +
+
+
+ +
+ Feature Item +
+
+ + + + +

Color Usage

+ + +Colors play a crucial role in communicating the meaning and importance of badges. Using consistent color patterns helps users quickly understand the information being presented. + +

Primary Color

+Primary color badges are typically used for standard notifications or counts that don't have a specific urgency level. + + + +
+ + + +
+ + + +

Secondary Color

+Secondary color badges can be used to differentiate between different types of notifications or to create visual hierarchy. + + + +
+ + + +
+ + + +

Error Color

+Error color badges (typically red) indicate important notifications that require immediate attention or critical status information. + + + +
+ + + +
+ + + +

Warning Color

+Warning color badges (typically yellow/orange) indicate notifications or status that requires attention but isn't critical. + + + +
+ + + +
+ + + +

Success Color

+Success color badges (typically green) indicate positive status or completed actions. + + + +
+ + + +
+ + + + +

Best Practices

+ + +When using badges in your interface, consider these guidelines to ensure they're effective and user-friendly: + +
    +
  • + Keep it Simple: Badges should be concise and only display essential information. For notification counts, consider using "99+" for large numbers to save space. +
    • +
  • + Consistent Positioning: Place badges in consistent locations relative to their parent elements to create a predictable pattern for users. +
    • +
  • + Use Color Meaningfully: Choose badge colors purposefully to convey information about priority or status. +
    • +
  • + Ensure Visibility: Make sure badges have sufficient contrast against their background to be easily visible. +
    • +
  • + Avoid Overuse: Too many badges can create visual noise. Use them sparingly for important information only. +
    • +
diff --git a/src/collections/sistent/components/badge/index.mdx b/src/collections/sistent/components/badge/index.mdx index 3eb7c0d745eb8..283fdd92ea455 100644 --- a/src/collections/sistent/components/badge/index.mdx +++ b/src/collections/sistent/components/badge/index.mdx @@ -1,11 +1,164 @@ --- name: "Badge" -title: "Badge" -description: "A badge is a small component that displays a number or status indicator, often used to show notifications or messages." -component: "badge" +title: Badge published: true -pages: - - overview - - guidance - - code +component: badge +description: A badge is a small piece of information that is used to convey a specific message or status. It is often used to provide additional context or information about an item, such as a notification count, status indicator, or label. --- + +import { Badge, Avatar } from "@sistent/sistent"; +import MailIcon from "@mui/icons-material/Mail"; + +Badges are small, often circular or rectangular elements that can display a number, status, or label. They are typically used to draw attention to specific information or to indicate the status of an item. Badges can be used in various contexts, such as notifications, labels, or status indicators. + + +

Types

+ + +Different types of badges serve different purposes in user interfaces. The visual distinction helps users quickly understand the context and importance of the information being presented. + +

Standard Badge

+ +Standard badges display a small circular notification indicator. They are commonly used to show counts or statuses on icons, buttons, or other UI elements. + + + +
+ + + +
+ + + +

Dot Badge

+ +Dot badges are minimalist indicators that show a small dot rather than a number. They're useful when you just need to indicate the presence of notifications without specifying the count. + + + +
+ + + +
+ + + +

Status Badge

+ +Status badges can be used to indicate the state of an item or component. They typically use different colors to represent different statuses such as online/offline, active/inactive, or success/error. + + + +
+ + + U + + +
+ + + + +

Colors

+ + +Badges come in different colors to help convey specific meanings. The color choice should be consistent across your application to maintain a clear visual language for users. + + + +
+ + + + + + + + + + + + + + + +
+ + + + +

Positioning

+ + +Badges can be positioned in different locations around their parent element. The default position is top-right, but they can be adjusted to appear at various anchor points based on design requirements. + + + +
+ + + + + + + + + + + + +
+ + + + +

Visibility

+ + +Badges can be shown or hidden based on their content or specific conditions. For example, a badge might only appear when there are unread notifications and disappear when all notifications have been viewed. + + + +
+ + + +
+ + diff --git a/src/collections/sistent/components/box/code.mdx b/src/collections/sistent/components/box/code.mdx new file mode 100644 index 0000000000000..382d84426fdac --- /dev/null +++ b/src/collections/sistent/components/box/code.mdx @@ -0,0 +1,137 @@ +--- +title: Box Code +component: box +description: The Box component is a versatile, theme-aware container in Sistent, ideal for styling and layout customization. It supports the sx prop for easy, responsive styling and can render as any HTML element. +--- + +import { Box } from "@sistent/sistent"; + +The `Box` component is a flexible and foundational container in Sistent, designed to structure and style content. It provides quick access to the theme and CSS utilities, allowing for easy customization and responsive design. Using the sx prop, developers can apply CSS styles directly with theme-aware properties, making Box ideal for layouts, spacing, and other UI adjustments. It can render as any HTML element using the component prop, offering high versatility in both structure and styling. + + +

Basic Box Example

+ + +A simple Box component can be used to contain and structure other elements. Here, the Box serves as a basic container without any styling applied. + +
+
+ + +

This is a basic Box component.

+ + +
+ +

+ This is a Box component with custom background and padding. +

+`} /> +
+ + +

Styled Box Example

+ + +You can add custom styles to a Box component by applying `sx` properties. In this example, the Box has a background color, padding, and a defined height. + +
+
+ + +

+ This is a Box component with custom background and padding. +

+ + +
+ +

+ This Box is responsive, changing style based on screen size. +

+`} /> +
+ + +

Responsive Box Example

+ + +The Box component also supports responsive styling using the `sx` prop. In this example, the Box adjusts its padding and background color based on screen size. + +
+
+ + +

+ This Box is responsive, changing style based on screen size. +

+ + +
+ +

+ This Box is responsive, changing style based on screen size. +

+`} /> +
+ + +

Interactive Box Example

+ + +Here’s an example where the Box component includes hover effects to create a more interactive experience. This is useful for buttons, cards, and other clickable elements. + +
+
+ + +

+ Hover over this Box to see the interactive effect. +

+ + +
+ +

Hover over this Box to see the interactive effect.

+`} /> +
diff --git a/src/collections/sistent/components/box/guidance.mdx b/src/collections/sistent/components/box/guidance.mdx new file mode 100644 index 0000000000000..2ebeeba9a7789 --- /dev/null +++ b/src/collections/sistent/components/box/guidance.mdx @@ -0,0 +1,105 @@ +--- +title: Box Guidance +component: box +description: The Box component is a versatile, theme-aware container in Sistent, ideal for styling and layout customization. It supports the sx prop for easy, responsive styling and can render as any HTML element. +--- + +import { Box } from "@sistent/sistent"; + +The Box component is a flexible, theme-aware container that adapts seamlessly across various layouts. It provides a convenient way to apply styles, positioning, and responsive adjustments to content, making it ideal for any layout needs. + +The Box component is a highly versatile tool that can be used for layout management, spacing, styling, and more. With full support for responsive design, Box is an essential part of any well-structured application, allowing developers to customize and style elements while keeping the theme consistent. + + +

Function

+ + +The Box component serves several functions: + +

Responsive Styling

+ +The `sx` prop makes it easy to apply responsive styles directly within the component, allowing for adaptive design that looks great across all screen sizes. + + + +
+ +

+ This is a responsive Box component. +

+ +
+ + + +

Flexible Layout Control

+ +Box can serve as a container for organizing other elements, whether it's aligning text, images, or interactive components. The flexibility of the Box component allows it to adapt to a wide range of layout needs, from card-style containers to more complex nested structures. + +

Customizable Appearance

+ +The Box component’s customization options allow you to adjust colors, borders, shadows, and more through the `sx` prop, ensuring that components blend well with your app's overall theme. + + + +
+ +

+ Customized Box with shadow and color. +

+ +
+ + + + +

Use Cases

+ + +

Nested Layouts

+ +Use Box to create nested layouts by embedding one Box within another, each with distinct styling. This setup enables the creation of structured and multi-layered designs. + + + +
+ + +

Nested Box layout example.

+ + +
+ + + +

Utility for Spacing and Margin

+ +Leveraging Box for margin and padding adjustments offers fine-grained control over spacing between components, making it useful in complex layouts where alignment and spacing are crucial. + +

Event Handling and State Management

+ +Box can also be used as an interactive element, handling events and managing state. This makes it ideal for use cases that require dynamic behavior or user interaction. + +

Responsive Design

+ +The Box component seamlessly integrates with Sistent’s responsive design principles, providing a cohesive experience across various screen sizes by leveraging breakpoints in the `sx` prop. diff --git a/src/collections/sistent/components/box/index.mdx b/src/collections/sistent/components/box/index.mdx index cf4e21c6c9ce4..5333110a54806 100644 --- a/src/collections/sistent/components/box/index.mdx +++ b/src/collections/sistent/components/box/index.mdx @@ -1,11 +1,59 @@ --- name: "Box" -title: "Box" -description: "Box is used as a flexible container for layout and styling, allowing quick customization and responsive design adjustments." -component: "box" +title: Box published: true -pages: - - overview - - guidance - - code +component: box +description: The Box component is a versatile, theme-aware container in Sistent, ideal for styling and layout customization. It supports the sx prop for easy, responsive styling and can render as any HTML element. --- + +import { Box } from "@sistent/sistent"; + +The `Box` component is a flexible and foundational container in Sistent, designed to structure and style content. It provides quick access to the theme and CSS utilities, allowing for easy customization and resilient design. Using the sx prop, developers can apply CSS styles directly with theme-aware properties, making Box ideal for layouts, spacing, and other UI adjustments. It can render as any HTML element using the component prop, offering high versatility in both structure and styling. + + +

Usage

+ + +The Box component differs from other containers available in Sistent in that its usage is intended to be multipurpose and open-ended, just like a `div`. Components like Container, Stack and Paper, by contrast, feature usage-specific props that make them ideal for certain use cases: Container for main layout orientation, Stack for one-dimensional layouts, and Paper for elevated surfaces. + +

Box component

+ +The Box component renders as a `div` by default, but you can swap in any other valid HTML tag or React component using the component prop. The demo below replaces the `div` with a `section` element: + + + +
+ + This Box renders as an HTML section element. + +
+ + + + +

Customization

+ + +The Box component can be styled flexibly with Sistent `sx` prop and custom themes. The sx prop allows quick application of CSS styles that are theme-aware, enabling responsive and consistent design. + +

Using the sx Prop

+ +The sx prop supports a wide range of style properties, including colors, spacing, and responsive adjustments. It directly accesses theme values, allowing you to apply theme-based styles to a Box with minimal code. + + + +
+ +
+ + diff --git a/src/collections/sistent/components/button-group/code.mdx b/src/collections/sistent/components/button-group/code.mdx new file mode 100644 index 0000000000000..8e9f1f83d3058 --- /dev/null +++ b/src/collections/sistent/components/button-group/code.mdx @@ -0,0 +1,264 @@ +--- +title: Button Group Code +component: button-group +description: The ButtonGroup component can be used to group related buttons together. It is a container for multiple buttons that can be used to group buttons together and apply styles to them. This component is useful when you have a group of buttons that need to be styled in a similar way. +--- + +import { ButtonGroup, Button, Box } from "@sistent/sistent"; + +export const buttons = [ + , + , + , +]; + +The ButtonGroup component can be used to group related buttons together. It is a container for multiple buttons that can be used to group buttons together and apply styles to them. This component is useful when you have a group of buttons that need to be styled in a similar way. + +The ButtonGroup component can be used to group related buttons together. It is a container for multiple buttons that can be used to group buttons together and apply styles to them. This component is useful when you have a group of buttons that need to be styled in a similar way. + + +

Basic Usage

+ + +The buttons can be grouped by wrapping them with the ButtonGroup component. They need to be immediate children. + +
+
+ + + {buttons} + + +
+ + + + +`} /> +
+ + +

Button Variant

+ + +The ButtonGroup component supports three variants: Filled, Outlined, and Text. + +
+
+ +
+ + {buttons} + + + {buttons} + + + {buttons} + +
+ +
+ + + + + + + + + + + + + + +`} /> +
+ + +

Vertical Group

+ + +The ButtonGroup component can be used to create a vertical group of buttons by setting the vertical prop to true. + +
+
+ +
+ + {buttons} + + + {buttons} + + + {buttons} + +
+ +
+ + + + + + + + + + + + + + +`} /> +
+ + +

Disable elevation

+ + +The ButtonGroup component can be used to create a group of buttons with no elevation by setting the disableElevation prop to true. + +
+
+ + + {buttons} + + +
+ + + + +`} /> +
+ + +

Sizes

+ + +For now, two different sizes of buttons exist: 56px height and 48px height. + +
+
+ +
+ + {buttons} + + + {buttons} + + + {buttons} + +
+ +
+ + + + + + + + + + + + + + +`} /> +
+ + +

Full Width

+ + +The ButtonGroup component can be used to create a group of buttons that take up the full width of the container by setting the fullWidth prop to true. + +
+
+ + + {buttons} + + +
+ + + + +`} /> +
diff --git a/src/collections/sistent/components/button-group/guidance.mdx b/src/collections/sistent/components/button-group/guidance.mdx new file mode 100644 index 0000000000000..3a1088095923c --- /dev/null +++ b/src/collections/sistent/components/button-group/guidance.mdx @@ -0,0 +1,41 @@ +--- +title: Button Group Guidance +component: button-group +description: The ButtonGroup component can be used to group related buttons together. It is a container for multiple buttons that can be used to group buttons together and apply styles to them. This component is useful when you have a group of buttons that need to be styled in a similar way. +--- + +import { ButtonGroup, Button, Box } from "@sistent/sistent"; + +The ButtonGroup component can be used to group related buttons together. It is a container for multiple buttons that can be used to group buttons together and apply styles to them. This component is useful when you have a group of buttons that need to be styled in a similar way. + +The ButtonGroup component can be used to group related buttons together. It is a container for multiple buttons that can be used to group buttons together and apply styles to them. This component is useful when you have a group of buttons that need to be styled in a similar way. + + +

Labeling

+ + +The ButtonGroup component should be labeled with a heading that describes the group of buttons. This heading should be descriptive and should clearly indicate the purpose of the group of buttons. + + +

Placement

+ + +The ButtonGroup component should be placed in a location that is easily accessible to users. It should be placed in a prominent location on the page where users can easily find it. The buttons within the ButtonGroup should be large enough to be easily clickable, and there should be enough space between the buttons to prevent accidental clicks. Additionally, the ButtonGroup should be accessible via keyboard navigation, and screen readers should be able to read the labels of the buttons within the group. + + +

Behavior

+ + +The ButtonGroup component should behave in a consistent and predictable manner. When a user clicks on a button within the group, the button should respond visually to indicate that it has been clicked. The ButtonGroup should also provide visual feedback when a user hovers over a button, to indicate that the button is clickable. Additionally, the ButtonGroup should be accessible via keyboard navigation, and screen readers should be able to read the labels of the buttons within the group. + + +

Styling

+ + +The ButtonGroup component should be styled in a way that is consistent with the rest of the application. The buttons within the group should be styled in a way that is visually distinct from other buttons on the page, to indicate that they are part of a group. The ButtonGroup should also be styled in a way that is accessible to users with color blindness or low vision. The buttons within the group should have a visible focus state, and the focus should be set to the first button in the group by default. + + +

Accessibility

+ + +The ButtonGroup component should be accessible to all users, including those with disabilities. The component should be keyboard navigable, and screen readers should be able to read the labels of the buttons within the group. The buttons within the ButtonGroup should have a visible focus state, and the focus should be set to the first button in the group by default. The ButtonGroup should also be styled in a way that is accessible to users with color blindness or low vision. diff --git a/src/collections/sistent/components/button-group/index.mdx b/src/collections/sistent/components/button-group/index.mdx index 30e5275218480..3c303e96298ae 100644 --- a/src/collections/sistent/components/button-group/index.mdx +++ b/src/collections/sistent/components/button-group/index.mdx @@ -1,11 +1,163 @@ --- -name: "ButtonGroup" -title: "ButtonGroup" -description: "ButtonGroup is a component that groups multiple buttons together." -component: "button-group" +name: "Button Group" +title: Button Group published: true -pages: - - overview - - guidance - - code +component: button-group +description: The ButtonGroup component can be used to group related buttons together. It is a container for multiple buttons that can be used to group buttons together and apply styles to them. This component is useful when you have a group of buttons that need to be styled in a similar way. --- + +import { ButtonGroup, Button, Box } from "@sistent/sistent"; + +export const buttons = [ + , + , + , +]; + +The ButtonGroup component is a container for multiple buttons that can be used to group buttons together and apply styles to them. This component is useful when you have a group of buttons that need to be styled in a similar way. The ButtonGroup component can be used to group related buttons together. + + +

Basic Usage

+ + +The buttons can be grouped by wrapping them with the ButtonGroup component. They need to be immediate children. + + + +
+ + {buttons} + +
+ + + + +

Button variants

+ + +The ButtonGroup component supports the following variants: contained (default), outlined, and text. + + + +
+ + {buttons} + + + {buttons} + + + {buttons} + +
+ + + + +

Vertical Group

+ + +The ButtonGroup component can be used to create a vertical group of buttons by setting the vertical prop to true. + + + +
+ + {buttons} + + + {buttons} + + + {buttons} + +
+ + + + +

Disabled elevation

+ + +You can remove the elevation with the `disableElevation` prop. + + + +
+ + {buttons} + +
+ + + + +

Sizes

+ + +The ButtonGroup component supports the following sizes: small, medium (default), and large. + + + +
+ + {buttons} + + + {buttons} + + + {buttons} + +
+ + + + +

Full width

+ + +You can make the ButtonGroup full width with the `fullWidth` prop. + + + +
+ + {buttons} + +
+ + diff --git a/src/collections/sistent/components/button/code.mdx b/src/collections/sistent/components/button/code.mdx new file mode 100644 index 0000000000000..7b34726ea0b26 --- /dev/null +++ b/src/collections/sistent/components/button/code.mdx @@ -0,0 +1,110 @@ +--- +title: Button Code +component: button +description: Buttons are crucial and integral elements in an interface. They are mostly used to trigger actions and in so doing, take users to where they need to be in any step of a flow. Buttons can be used in tandem with other elements to piece designs together and convey digital experiences. +--- + +Buttons communicate actions to users and they can be placed at several places throughout the user interface. + + +

Basic Button

+ + +The button comes in three types: Filled, Outlined, and Text. + +

Filled Button

+ +Mostly used for high-emphasis actions and are primarily distinguished by their fill. They are used to represent actions that are primary to the solution. + +
+
+ + + +
+ + + `} /> +
+ +

Outlined Button

+ +Can be used for both medium and sometimes high-emphasis actions. + +
+
+ + + +
+ + + `} /> +
+ +

Text Button

+ +Mostly used for less pronounced and very low emphasis actions. Can also be used for text links as well. + +
+
+ + + +
+ + + `} /> +
+ + +

Sizes

+ + +For now, two different sizes of buttons exist: 56px height and 48px height. + +
+
+ + + + +
+ + + + `} /> +
+ + +

Adding Icons

+ + +Icons are mostly added to filled and outlined buttons and they are used to better describe the information being passed across by the button’s label. + +
+
+ + + +
+ + + `} /> +
diff --git a/src/collections/sistent/components/button/guidance.mdx b/src/collections/sistent/components/button/guidance.mdx new file mode 100644 index 0000000000000..fb020c2fc2ac6 --- /dev/null +++ b/src/collections/sistent/components/button/guidance.mdx @@ -0,0 +1,81 @@ +--- +title: Button Guidance +component: button +description: Buttons are crucial and integral elements in an interface. They are mostly used to trigger actions and in so doing, take users to where they need to be in any step of a flow. Buttons can be used in tandem with other elements to piece designs together and convey digital experiences. +--- + +For proper application, these buttons can be used for different purposes to enable easier and consistent combination when guiding users across digital experiences. + + +

Function

+ + +The function of different buttons is what determines its usage and how well suited it is to be applied in a given scenario to solve an existing problem or complete a pending task. Functions or roles that can be assigned to buttons in a particular design include: + +

Primary Button

+ +Primary buttons are used for the most important actions on a page. It should be the key button that helps the user navigate in a given flow or while trying to perform a specific action. This could apply in cases like when the user needs to submit a from, proceed to a new page, or complete an action. The filled button serves as the primary button. + + + + + +
+ {customTransition + ? "Custom transition content" + : unmountOnExit + ? "Content that unmounts when collapsed" + : defaultExpanded + ? "Content that's expanded by default" + : "Content to be collapsed/expanded"} +
+ + + ); +}; + +export default CollapseDemo; diff --git a/src/collections/sistent/components/collapse/code.mdx b/src/collections/sistent/components/collapse/code.mdx new file mode 100644 index 0000000000000..56e45c094422a --- /dev/null +++ b/src/collections/sistent/components/collapse/code.mdx @@ -0,0 +1,90 @@ +--- +title: Collapse Code +component: collapse +description: The Collapse component allows you to create collapsible content areas that can be toggled to show or hide content. It's commonly used for FAQs, accordions, and other UI elements where space needs to be managed efficiently. +--- + +import { Collapse, Button } from "@sistent/sistent"; +import CollapseDemo from "./CollapseDemo"; + +The Collapse component provides a smooth, animated way to show and hide content. Below are various examples demonstrating its capabilities and usage patterns. + + +

Basic Collapse

+ + +A simple collapsible section that can be toggled with a button click. + +
+
+ + + +
+ setExpanded(!expanded)}> + {expanded ? 'Collapse' : 'Expand'} + + +
Content to be collapsed/expanded
+`} /> +
+ + +

Default Expanded

+ + +A collapsible section that starts expanded by default. + +
+
+ + + +
+ setExpanded(!expanded)}> + {expanded ? 'Collapse' : 'Expand'} + + +
Content that's expanded by default
+`} /> +
+ + +

Unmount on Exit

+ + +Unmounts the content when collapsed for better performance with large content. + +
+
+ + + +
+ setExpanded(!expanded)}> + {expanded ? 'Collapse' : 'Expand'} + + +
Content that unmounts when collapsed
+`} /> +
+ + +

Custom Transition

+ + +Customize the transition duration and easing function. + +
+
+ + + +
+ setExpanded(!expanded)}> + {expanded ? 'Fast Collapse' : 'Slow Expand'} + + +
Custom transition content
+`} /> +
diff --git a/src/collections/sistent/components/collapse/guidance.mdx b/src/collections/sistent/components/collapse/guidance.mdx new file mode 100644 index 0000000000000..26a2cde198826 --- /dev/null +++ b/src/collections/sistent/components/collapse/guidance.mdx @@ -0,0 +1,95 @@ +--- +title: Collapse Guidance +component: collapse +description: The Collapse component allows you to create collapsible content areas that can be toggled to show or hide content. It's commonly used for FAQs, accordions, and other UI elements where space needs to be managed efficiently. +--- + +import { Collapse } from "@sistent/sistent"; + +The Collapse component allows you to create collapsible content areas that can be toggled to show or hide content. It's commonly used for FAQs, accordions, and other UI elements where space needs to be managed efficiently. + +The Collapse component provides a smooth, animated transition for showing and hiding content. It's an essential UI pattern for managing content density and progressive disclosure of information. + + +

Best Practices

+ + +
    +
  • + Clear Triggers: Always use clear, descriptive labels for collapse triggers that indicate the action and content. +
    • +
  • + Progressive Disclosure: Use collapse to hide secondary content or advanced options that aren't immediately needed. +
    • +
  • + Performance: For large content, consider using unmountOnExit to improve performance by unmounting content when collapsed. +
    • +
  • + Animation Timing: Adjust the timeout prop to match your application's animation speed for a cohesive feel. +
    • +
  • + Consistent Behavior: Maintain consistent behavior across your application - don't mix different animation patterns for similar interactions. +
    • +
+ + +

Accessibility Considerations

+ + +
    +
  • + Keyboard Navigation: Ensure the collapse trigger is keyboard accessible and can be activated with both Enter and Space keys. +
    • +
  • + ARIA Attributes: The component automatically handles aria-expanded and aria-controls attributes. +
    • +
  • + Focus Management: Consider managing focus when content is expanded/collapsed, especially for screen reader users. +
    • +
  • + Screen Reader Announcements: Use aria-live regions to announce state changes to screen reader users. +
    • +
+ + +

When to Use

+ + +
    +
  • FAQs and help sections
    • +
  • Forms with optional or advanced fields
    • +
  • Content that can be toggled on/off
    • +
  • Accordion interfaces
    • +
  • Mobile navigation menus
    • +
+ + +

When to Consider Something Else

+ + +
    +
  • For simple show/hide without animation, consider conditional rendering
    • +
  • For modal dialogs or overlays, use the Dialog component instead
    • +
  • For tabbed interfaces, consider using the Tabs component
    • +
+ + +

Performance Optimization

+ + +
    +
  • Use unmountOnExit for better performance with large content
    • +
  • Consider code-splitting for complex content within collapsible sections
    • +
  • Memoize the content if it includes expensive computations
    • +
+ + +

Common Patterns

+ + +
    +
  • Accordion: Multiple collapsible sections where only one can be open at a time
    • +
  • Expandable Cards: Cards with a summary that can be expanded for more details
    • +
  • Progressive Disclosure: Show advanced options or additional information on demand
    • +
  • Mobile Navigation: Collapsible menus for mobile views
    • +
diff --git a/src/collections/sistent/components/collapse/index.mdx b/src/collections/sistent/components/collapse/index.mdx index 6a0ab9659e789..2e9f6c898b8d1 100644 --- a/src/collections/sistent/components/collapse/index.mdx +++ b/src/collections/sistent/components/collapse/index.mdx @@ -1,11 +1,40 @@ --- name: "Collapse" -title: "Collapse" -description: "The Collapse component is used to create expandable/collapsible content sections. It smoothly animates the height of its children from zero to full height when expanded." -component: "collapse" +title: Collapse published: true -pages: - - overview - - guidance - - code +component: collapse +description: The Collapse component allows you to create collapsible content areas that can be toggled to show or hide content. It's commonly used for FAQs, accordions, and other UI elements where space needs to be managed efficiently. --- + +import { Collapse, Button } from "@sistent/sistent"; +import CollapseDemo from "./CollapseDemo"; + +The Collapse component provides a smooth, animated way to show and hide content. It's particularly useful for creating space-efficient interfaces and progressive disclosure of information. + + +

Basic Collapse

+ + +A simple collapsible section that can be toggled with a button click. + + + +
+ +
+ + + + +

Default Expanded

+ + +A collapsible section that starts expanded by default. + + + +
+ +
+ + diff --git a/src/collections/sistent/components/container/code.mdx b/src/collections/sistent/components/container/code.mdx new file mode 100644 index 0000000000000..f95dd0c24219d --- /dev/null +++ b/src/collections/sistent/components/container/code.mdx @@ -0,0 +1,124 @@ +--- +title: Container Code +component: container +description: Containers are fundamental layout elements, used to center and structure content horizontally. They can be fluid or fixed, helping maintain alignment across different screen sizes and improving readability. +--- + +import { Container, Box } from "@sistent/sistent"; + +The Container component is an essential building block for creating layouts. Its ability to center content, provide fluid and fixed widths, and adapt responsively to different screen sizes makes it an invaluable tool for developers. By using the Container effectively, you can ensure that your application maintains a clean and organized appearance while enhancing the user experience. + + +

Fluid Container Example

+ + +By default, the Container is fluid, meaning it adjusts its width based on the viewport size. You can control its maximum width by utilizing the maxWidth prop. + +
+
+ + + + + +
+ + +`} /> +
+ +
+

maxWidth Prop Values

+

+ The maxWidth prop accepts several predefined values, each corresponding to specific breakpoints. Here are the available options: +

+
    +
  • + "xs": This sets the maximum width to the extra-small breakpoint (0px to 600px). The container will not exceed this width, providing a compact layout suitable for mobile devices. +
    • +
  • + "sm": The small breakpoint (600px to 960px) ensures that the container expands up to a width of 600px, making it a good choice for tablets and smaller desktops. +
    • +
  • + "md": This option sets the maximum width to the medium breakpoint (960px to 1280px). It is useful for standard desktop views while still accommodating smaller devices. +
    • +
  • + "lg": The large breakpoint (1280px to 1920px) allows the container to grow larger, up to 1280px, ideal for wide-screen displays and detailed layouts. +
    • +
  • + "xl": This sets the maximum width to the extra-large breakpoint (1920px and above). It's particularly beneficial for high-resolution screens where more content can be displayed without feeling cramped. +
    • +
  • + false: If set to false, the container will have no maximum width constraint, allowing it to stretch the full width of its parent element. +
    • +
+
+ +
+

+ Another Example with maxWidth = "md" +

+
+
+ + + + + +
+ + +`} /> +
+
+ + +

Fixed Container Example

+ + +If you prefer a fixed width, you can use the fixed prop. This aligns the container's max-width with the minimum width of the current breakpoint, ensuring that your layout remains consistent across different screen sizes. + +
+
+ + + + + +
+ + +`} /> +
+ + +

Nested Container Example

+

+ A small section on nesting containers, emphasizing best practices. +

+ + +
+
+ + + + +

+ This is a nested container example. +

+ + + + +
+ + + +

+ This is a nested container example. +

+ + +`} /> +
diff --git a/src/collections/sistent/components/container/guidance.mdx b/src/collections/sistent/components/container/guidance.mdx new file mode 100644 index 0000000000000..f93252a3a2a95 --- /dev/null +++ b/src/collections/sistent/components/container/guidance.mdx @@ -0,0 +1,81 @@ +--- +title: Container Guidance +component: container +description: Containers are fundamental layout elements, used to center and structure content horizontally. They can be fluid or fixed, helping maintain alignment across different screen sizes and improving readability. +--- + +import { Container, Box } from "@sistent/sistent"; + +Containers are fundamental layout elements, used to center and structure content horizontally. They can be fluid or fixed, helping maintain alignment across different screen sizes and improving readability. + +The Container component is an essential building block for creating layouts. Its ability to center content, provide fluid and fixed widths, and adapt responsively to different screen sizes makes it an invaluable tool for developers. By using the Container effectively, you can ensure that your application maintains a clean and organized appearance while enhancing the user experience. + + +

Function

+ + +The Container serves various functions: + +

Fluid Container

+ +A fluid container adapts to the width of its parent element and can have a maximum width set by the `maxWidth` prop. This is useful for creating responsive layouts that adjust based on screen size. + + + + + +

+ This is a fluid container that adjusts its width based on the screen size. +

+ + + + + +

Fixed Container

+ +A fixed container uses predefined maximum widths based on breakpoints, providing a consistent layout across different screen sizes. This helps maintain a structured design that is visually appealing. + + + + + +

+ This is a fixed container with a max width defined by the current breakpoint +

+ + + + + +

Nested Containers

+ +While nesting containers is possible, it is generally recommended to avoid it unless necessary. Proper use of containers can enhance layout structure without complicating the design. + + + + + + +

+ This is a nested container example. +

+ + + + + + + +

Labeling

+ + +Container labeling is essential for understanding the layout structure. Use clear and descriptive headings to indicate the purpose of each container. + +

Use Cases

+ +Different use cases for containers include wrapping content sections, creating responsive grids, and maintaining consistent padding and margins across various components. + +

Responsive Design

+ +Leveraging the container's fluid and fixed properties contributes to a responsive design that provides a seamless user experience across devices of all sizes. diff --git a/src/collections/sistent/components/container/index.mdx b/src/collections/sistent/components/container/index.mdx index 148fae5a9d1f1..d552675947d18 100644 --- a/src/collections/sistent/components/container/index.mdx +++ b/src/collections/sistent/components/container/index.mdx @@ -1,11 +1,49 @@ --- name: "Container" -title: "Container" -description: "Containers align and center content, providing responsive layout options for different screen sizes." -component: "container" +title: Container published: true -pages: - - overview - - guidance - - code +component: container +description: Containers are fundamental layout elements, used to center and structure content horizontally. They can be fluid or fixed, helping maintain alignment across different screen sizes and improving readability. --- + +import { Container, Box } from "@sistent/sistent"; + +The Container component is an essential building block for creating layouts. Its ability to center content, provide fluid and fixed widths, and adapt responsively to different screen sizes makes it an invaluable tool for developers. By using the Container effectively, you can ensure that your application maintains a clean and organized appearance while enhancing the user experience. + + +

Types of Container

+ + +Sistent has two main types of containers that cater to different layout requirements: Fluid Containers and Fixed Containers. Each type serves specific use cases in building responsive web applications. + +

1. Fluid Container

+ +A Fluid Container automatically adjusts its width to fill the available space based on the viewport size. It allows for a responsive layout that adapts to different screen sizes. + +

Usage

+ +Ideal for layouts where you want the content to take full advantage of the available width. The fluid nature of the container ensures that it scales seamlessly across devices, from mobile to desktop. + + + + + + + + + +

2. Fixed Container

+ +A Fixed Container has a predefined width that matches the minimum width of the current breakpoint. This allows for a consistent and controlled layout across different screen sizes. + +

Usage

+ +Suitable for designs that require specific width constraints, ensuring that your content does not stretch too wide on larger screens. This is particularly useful for fixed-width layouts where the visual structure is maintained. + + + + + + + + diff --git a/src/collections/sistent/components/dialog/DialogDemo.js b/src/collections/sistent/components/dialog/DialogDemo.js new file mode 100644 index 0000000000000..19693507cf886 --- /dev/null +++ b/src/collections/sistent/components/dialog/DialogDemo.js @@ -0,0 +1,88 @@ +import React, { useState } from "react"; +import { Dialog, DialogTitle, DialogContent, DialogActions, Button, Input } from "@sistent/sistent"; + +const DialogDemo = ({ type = "basic" }) => { + const [open, setOpen] = useState(false); + + const handleOpen = () => setOpen(true); + const handleClose = () => setOpen(false); + + if (type === "form") { + return ( + <> + + + Subscribe + +
+ + +
+ + + + + + + + ); + } + + if (type === "fullscreen") { + return ( + <> + + + Full-Screen Dialog + +

+ This dialog stretches to full screen. Use it when the user's + full attention is needed for complex tasks or on mobile devices. +

+ + + + + + + + ); + } + + return ( + <> + + + Confirm Action + + Do you want to proceed with this action? + + + + + + + + ); +}; + +export default DialogDemo; diff --git a/src/collections/sistent/components/dialog/code.mdx b/src/collections/sistent/components/dialog/code.mdx new file mode 100644 index 0000000000000..112c9ed5b6228 --- /dev/null +++ b/src/collections/sistent/components/dialog/code.mdx @@ -0,0 +1,126 @@ +--- +title: Dialog Code +component: dialog +description: The Dialog component is a modal window that appears on top of the main content to focus user attention on specific tasks or information. It provides a controlled way to present confirmations, forms, alerts, and detailed content without navigating away from the current context. +--- + +import DialogDemo from "./DialogDemo"; + +The Dialog component provides modal windows that focus user attention on specific tasks or information. They overlay the main content and require user interaction before returning to the underlying interface. + +The `Dialog` component is essential for creating focused user experiences that require immediate attention. It provides a controlled way to present forms, confirmations, and detailed information without navigating away from the current context. + + +

Basic Dialog

+ + +A simple modal dialog with title, content, and action buttons. This is the most common pattern for confirmations and simple interactions. + +
+
+ + + +
+ setOpen(true); +const handleClose = () => setOpen(false); + + + + Confirm Action + + Do you want to proceed with this action? + + + + + +`} /> +
+ + +

Full-Screen Dialog

+ + +Full-screen dialogs are useful for complex forms or when you need the user's complete attention. They take up the entire viewport and are ideal for mobile devices. + +
+
+ + + +
+ setOpenFull(true)}> + Open Full-Screen Dialog + + setOpenFull(false)} + fullScreen + maxWidth="lg" +> + Full-Screen Dialog + +

+ This dialog stretches to full screen. Use it when the + user's full attention is needed. +

+ + + + + +`} /> +
+ + +

Dialog with Form

+ + +Dialogs can contain forms for collecting user input. This pattern is common for creating, editing, or subscribing workflows that don't require a full page. + +
+
+ + + +
+ setOpenForm(true)}> + Open Form Dialog + + setOpenForm(false)}> + Subscribe + +
+ + +
+ + + + + +`} /> +
diff --git a/src/collections/sistent/components/dialog/guidance.mdx b/src/collections/sistent/components/dialog/guidance.mdx new file mode 100644 index 0000000000000..39fa4d74b9092 --- /dev/null +++ b/src/collections/sistent/components/dialog/guidance.mdx @@ -0,0 +1,80 @@ +--- +title: Dialog Guidance +component: dialog +description: The Dialog component is a modal window that appears on top of the main content to focus user attention on specific tasks or information. It provides a controlled way to present confirmations, forms, alerts, and detailed content without navigating away from the current context. +--- + +import DialogDemo from "./DialogDemo"; + +The Dialog component is a modal window that appears on top of the main content to focus user attention on specific tasks or information. It provides a controlled way to present confirmations, forms, alerts, and detailed content without navigating away from the current context. + +Proper usage of the Dialog component can enhance user experience by providing clear, focused interactions that guide users through important decisions and tasks. Below are guidelines and interactive examples to help you implement dialogs effectively. + + +

Usage

+ + +To use the Dialog component, include it with the required props and structure. The component supports various configurations and styling options: + +- `open` to control visibility state +- `onClose` for handling dialog closure +- `fullScreen` for expanded display +- `maxWidth` for size constraints + + +

Basic Dialog

+ + +A simple confirmation dialog with title, content, and action buttons. This pattern is ideal for user confirmations and simple decision-making scenarios: + + + +
+ +
+ + + + +

Dialog with Form

+ + +Dialogs can contain forms for collecting user input without requiring navigation to a separate page. This pattern works well for quick data collection: + + + +
+ +
+ + + + +

Full-Screen Dialog

+ + +Full-screen dialogs provide maximum space for complex content or forms. They're particularly useful on mobile devices or when extensive user input is required: + + + +
+ +
+ + + + +

Best Practices

+ + +

When to Use Dialogs

+ +Use dialogs for critical user decisions, confirmations, and tasks that require immediate attention. Avoid overusing dialogs as they can interrupt workflow and frustrate users if used inappropriately. + +

Content Guidelines

+ +Keep dialog content focused and concise. Use clear, action-oriented language for buttons and provide sufficient context without overwhelming the user. + +

Accessibility

+ +Ensure proper focus management, keyboard navigation, and screen reader support. Always provide clear titles and meaningful action button labels. diff --git a/src/collections/sistent/components/dialog/index.mdx b/src/collections/sistent/components/dialog/index.mdx index c119a005ba35b..5cc7f40991530 100644 --- a/src/collections/sistent/components/dialog/index.mdx +++ b/src/collections/sistent/components/dialog/index.mdx @@ -1,11 +1,35 @@ --- name: "Dialog" -title: "Dialog" -description: "Dialogs display important prompts or confirmation requests that interrupt user interaction flow." -component: "dialog" +title: Dialog published: true -pages: - - overview - - guidance - - code +component: dialog +description: The Dialog component is a modal window that appears on top of the main content to focus user attention on specific tasks or information. It provides a controlled way to present confirmations, forms, alerts, and detailed content without navigating away from the current context. --- + +import DialogDemo from "./DialogDemo"; + +Dialog components provide modal windows that focus user attention on specific tasks or information. They overlay the main content and require user interaction before returning to the underlying interface. + + +

Basic Example

+ + +Below is a simple example of how to use the Dialog component. + + + +
+ +
+ + + + +

Usage

+ + +The component can be used in several main variants: + +- **Standard:** Basic modal dialog for confirmations and simple interactions +- **Form:** Dialog containing input fields for data collection +- **Full-screen:** Expanded dialog for complex forms or mobile interfaces diff --git a/src/collections/sistent/components/divider/code.mdx b/src/collections/sistent/components/divider/code.mdx new file mode 100644 index 0000000000000..f1265c7351f26 --- /dev/null +++ b/src/collections/sistent/components/divider/code.mdx @@ -0,0 +1,210 @@ +--- +title: Divider Code +component: divider +description: The Divider component renders a thin line that separates content within lists, layouts, and sections, providing a subtle way to reinforce visual hierarchy and improve scannability. +--- + +import { Divider, Box, List, ListItem, ListItemText, Chip, Stack } from "@sistent/sistent"; + +The `Divider` component renders a thin line that separates content within lists, layouts, and sections, providing a subtle way to reinforce visual hierarchy. + +The Divider component is a thin, subtle line for separating content in your interface. + + +

Basic Divider

+ + +By default, the Divider renders as a full-width horizontal line. + +
+
+ + + + + +
+ + +`} /> +
+ + +

Variants

+ + +The Divider supports three variants: `fullWidth` (default), `inset`, and `middle`. + +
+
+ + + Full Width: + + Inset: + + Middle: + + + +
+ + + + +`} /> +
+ + +

Vertical Divider

+ + +Use `orientation="vertical"` to render a vertical divider. The `flexItem` prop ensures proper height in flex containers. + +
+
+ + + Left + + Center + + Right + + +
+ + Left + + Center + + Right +`} /> +
+ + +

Divider with Text

+ + +You can render text or other elements within the divider using children. Use `textAlign` to control alignment. + +
+
+ + + CENTER + + LEFT + + RIGHT + + + + + + +
+ + CENTER + LEFT + RIGHT + + + +`} /> +
+ + +

List Divider

+ + +When using dividers in lists, set `component="li"` to ensure valid HTML structure. + +
+
+ + + + + + + + + + + + + + + +
+ + + + + + + + + + + + +`} /> +
+ + +

Section Separators

+ + +Use dividers to separate distinct sections in a layout, combined with proper spacing. + +
+
+ + + Section 1 + + Section 2 + + Section 3 + + +
+ + Section 1 + + Section 2 + + Section 3 +`} /> +
+ + +

Icon Grouping

+ + +Use vertical dividers with the `middle` variant to group related actions in toolbars. + +
+
+ + + Bold + Italic + + Left + Center + Right + + +
+ + Bold + Italic + + Left + Center + Right +`} /> +
diff --git a/src/collections/sistent/components/divider/guidance.mdx b/src/collections/sistent/components/divider/guidance.mdx new file mode 100644 index 0000000000000..3be87a6a213b4 --- /dev/null +++ b/src/collections/sistent/components/divider/guidance.mdx @@ -0,0 +1,112 @@ +--- +title: Divider Guidance +component: divider +description: The Divider component renders a thin line that separates content within lists, layouts, and sections, providing a subtle way to reinforce visual hierarchy and improve scannability. +--- + +import { Divider, Box, Stack } from "@sistent/sistent"; + +The `Divider` component renders a thin line that separates content within lists, layouts, and sections, providing a subtle way to reinforce visual hierarchy and improve scannability. + + +

Best Practices

+ + +

When to Use

+ +Dividers work best when separating distinct groups of content in lists, menus, or sections. They help users scan and understand the structure of complex interfaces. + + + + + Section 1 + + Section 2 + + Section 3 + + + + +

Use Sparingly

+ +Avoid overusing dividers. Too many lines can create visual clutter. Consider using whitespace, different background colors, or typography to create separation instead. + +

Vertical Dividers for Toolbars

+ +Use vertical dividers to separate groups of actions in toolbars or icon groups. The `flexItem` prop ensures proper height alignment. + + + + + Action A + Action B + + Action C + Action D + + + + + +

Accessibility

+ + +By default, Divider renders as an `
` element with an implicit ARIA role of `separator`. Screen readers will announce it as "Horizontal Splitter" (or vertical when using `orientation="vertical"`). + +

Decorative Dividers

+ +If the divider is purely decorative, add `aria-hidden="true"` to prevent screen readers from announcing it. + +

Dividers with Content

+ +When wrapping content like text or chips, set `component="div"` and `role="presentation"` to maintain proper semantics. + + +

Common Patterns

+ + +

List Separators

+ +When using dividers in lists, set `component="li"` to ensure valid HTML structure. + +

Section Headers

+ +Use dividers with text to create subtle section headers: + + + + + Personal Information + Content here... + Contact Details + Content here... + + + + +

Responsive Behavior

+ +Consider how dividers appear on different screen sizes. Vertical dividers in horizontal layouts may need to switch to horizontal dividers on smaller screens. + + +

Do's and Don'ts

+ + +

Do's

+ +
    +
  • Use dividers to separate distinct groups of related content
    • +
  • Combine with appropriate spacing for better visual rhythm
    • +
  • Use `variant="middle"` or `variant="inset"` to reduce visual weight
    • +
  • Set proper ARIA attributes for accessibility
    • +
+ +

Don'ts

+ +
    +
  • Use dividers as the only method of creating separation
    • +
  • Overuse dividers—they can create visual noise
    • +
  • Rely on dividers to convey interactive functionality
    • +
  • Use dividers for decorative purposes without hiding them from screen readers
    • +
diff --git a/src/collections/sistent/components/divider/index.mdx b/src/collections/sistent/components/divider/index.mdx index 255539fd3d745..66a76c7b49308 100644 --- a/src/collections/sistent/components/divider/index.mdx +++ b/src/collections/sistent/components/divider/index.mdx @@ -1,11 +1,90 @@ --- name: "Divider" -title: "Divider" -description: "The Divider component visually separates content with a thin line, helping to organize sections and improve scannability in lists and layouts." -component: "divider" +title: Divider published: true -pages: - - overview - - guidance - - code +component: divider +description: The Divider component renders a thin line that separates content within lists, layouts, and sections, providing a subtle way to reinforce visual hierarchy and improve scannability. --- + +import { Divider, Box, Chip } from "@sistent/sistent"; + +Dividers help organize content and improve scannability by separating groups of related elements. Use them sparingly to maintain visual clarity without creating unnecessary noise. + + +

Variants

+ + +The Divider component supports three variants: `fullWidth` (default), `inset`, and `middle`. + +

Full Width

+ +The default variant spans the full width of its container. + + + + + + + + + +

Inset

+ +The `inset` variant adds left padding, useful when aligning with indented list items. + + + + + + + + + +

Middle

+ +The `middle` variant shortens the divider on both sides. + + + + + + + + + + +

Orientation

+ + +Use the `orientation` prop to render vertical dividers. Vertical dividers are useful for separating items in toolbars or button groups. + + + + + Left + + Center + + Right + + + + + +

Divider with Text

+ + +You can center an element between divider lines using children. Use the `textAlign` prop to align the content. + + + + + CENTER + LEFT + RIGHT + + + + + + diff --git a/src/collections/sistent/components/drawer/DrawerDemo.js b/src/collections/sistent/components/drawer/DrawerDemo.js new file mode 100644 index 0000000000000..c574c2cf57033 --- /dev/null +++ b/src/collections/sistent/components/drawer/DrawerDemo.js @@ -0,0 +1,182 @@ +import React, { useState } from "react"; +import { Drawer, Button, List, ListItem, Box, Typography, Divider } from "@sistent/sistent"; + +const DrawerDemo = ({ type = "temporary", anchor = "left" }) => { + const [open, setOpen] = useState(false); + const [anchorState, setAnchorState] = useState({ + left: false, + right: false, + top: false, + bottom: false, + }); + + const toggleAnchor = (anchor, open) => (event) => { + if (event.type === "keydown" && (event.key === "Tab" || event.key === "Shift")) { + return; + } + setAnchorState({ ...anchorState, [anchor]: open }); + }; + + const listContent = ( + setOpen(false)} + onKeyDown={() => setOpen(false)} + > + + {["Inbox", "Starred", "Send email", "Drafts"].map((text) => ( + + {text} + + ))} + + + + {["All mail", "Trash", "Spam"].map((text) => ( + + {text} + + ))} + + + ); + + if (type === "anchors") { + return ( + + {["left", "right", "top", "bottom"].map((anchorDir) => ( + + + + + + This is a basic modal with simple content for displaying information. + + + + + + Close + + + + + + ); + } + + // Confirmation Modal + if (type === "confirmation") { + return ( + <> + + + + + + + This action is irreversible! Are you sure you want to delete this item? + + + + + + + Cancel + + + Delete + + + + + + ); + } + + // Action Modal + if (type === "action") { + return ( + <> + + + + + + + Create a new user account with the following details: + + + + + + + + + + Cancel + + + Create User + + + + + + ); + } + + // Informational Modal + if (type === "informational") { + return ( + <> + + + + + + + + About This Feature + + + This feature helps you manage your workflow efficiently with automated tools. + + + Last updated: January 2025 • Version 2.1.0 + + + + + + + + Got it + + + + + + ); + } + + // Warning Modal + if (type === "warning") { + return ( + <> + + + + + + + + This action may affect system performance and could take several minutes. + + + Consider performing this during off-peak hours. + + + + + + + + Cancel + + + Continue Anyway + + + + + + ); + } + + // Success Modal + if (type === "success") { + return ( + <> + + + + + + + + Operation Completed Successfully + + + Your changes have been saved and are now active. + + + + + + + + Continue + + + + + + ); + } + + // Error Modal + if (type === "error") { + return ( + <> + + + + + + + + File Upload Failed + + + The file could not be uploaded due to a network connectivity issue. + + + What you can do: Check your internet connection and try again. + + + + + + + + Cancel + + + Try Again + + + + + + ); + } + + // Nested Modal + if (type === "nested") { + return ( + <> + + + + + + This is the parent modal. Click to open nested modal. + + + + + + + Close Parent + + + + + + setNestedOpen(false)} title="Nested Modal"> + + + This is a nested modal that appears on top of the parent modal. + + + + + setNestedOpen(false)}> + Close Nested + + + + + + ) + } + + return null; +}; + +export default ModalDemo; diff --git a/src/collections/sistent/components/modal/code.mdx b/src/collections/sistent/components/modal/code.mdx new file mode 100644 index 0000000000000..e2f336d5b98b0 --- /dev/null +++ b/src/collections/sistent/components/modal/code.mdx @@ -0,0 +1,273 @@ +--- +title: Modal Code +component: modal +description: A modal is a container that appears in front of the main content on a page, providing important information or an actionable piece of content for users to execute. Modals focus user attention and prevent interaction with the underlying page until dismissed. +--- + +import ModalDemo from "./ModalDemo"; + +Here are code examples for different variations and use cases of the Modal component. Each example shows the implementation with a live preview and copyable code. + + +

Basic Modal

+ + +A simple modal with basic content and standard dismiss functionality. + +
+
+ + + +
+ setOpen(true)}> + Open Basic Modal + + setOpen(false)} title="Basic Modal"> + + + This is a basic modal with simple content for displaying information. + + + + setOpen(false)}> + Close + + +`} /> +
+ + +

Confirmation Modal

+ + +Confirmation modals for destructive or important actions requiring user consent. + +
+
+ + + +
+ setOpen(true)}> + Delete Item + + setOpen(false)} title="Confirm Deletion"> + + + + + This action is irreversible! Are you sure? + + + + + setOpen(false)}> + Cancel + + setOpen(false)}> + Delete + + +`} /> +
+ + +

Action Modal

+ + +Action modals for task completion with forms and interactive elements. + +
+
+ + + +
+ setOpen(true)}> + Add New User + + setOpen(false)} title="Add New User"> + + + + Create a new user account: + + + + + + + setOpen(false)}> + Cancel + + setOpen(false)}> + Create User + + +`} /> +
+ + +

Informational Modal

+ + +Informational modals for displaying help content and contextual information. + +
+
+ + + +
+ setOpen(true)}> + View Information + + setOpen(false)} title="System Information"> + + + + + + About This Feature + + + This feature helps you manage workflow efficiently. + + + Last updated: January 2025 • Version 2.1.0 + + + + + + setOpen(false)}> + Got it + + +`} /> +
+ + +

Warning Modal

+ + +Warning modals to alert users about potential issues before proceeding. + +
+
+ + + +
+ setOpen(true)} +> + Proceed with Caution + + setOpen(false)} title="Warning"> + + + + + + This action may affect system performance. + + + Consider performing this during off-peak hours. + + + + + + setOpen(false)}> + Cancel + + setOpen(false)}> + Continue Anyway + + +`} /> +
+ + +

Success Modal

+ + +Success modals to provide positive feedback and confirm task completion. + +
+
+ + + +
+ setOpen(true)}> + Complete Action + + setOpen(false)} title="Success!"> + + + + + + Operation Completed Successfully + + + Your changes have been saved and are now active. + + + + + + setOpen(false)}> + Continue + + +`} /> +
+ + +

Error Modal

+ + +Communicate failures clearly with friendly language. + +
+
+ + + +
+ setOpen(true)}> + Trigger Error + + setOpen(false)} title="Upload Failed"> + + + + + + File Upload Failed + + + The file could not be uploaded due to network issue. + + + What you can do: Check connection and try again. + + + + + + setOpen(false)}> + Cancel + + setOpen(false)}> + Try Again + + +`} /> +
diff --git a/src/collections/sistent/components/modal/guidance.mdx b/src/collections/sistent/components/modal/guidance.mdx new file mode 100644 index 0000000000000..1a0b712f90076 --- /dev/null +++ b/src/collections/sistent/components/modal/guidance.mdx @@ -0,0 +1,131 @@ +--- +title: Modal Guidance +component: modal +description: A modal is a container that appears in front of the main content on a page, providing important information or an actionable piece of content for users to execute. Modals focus user attention and prevent interaction with the underlying page until dismissed. +--- + +import ModalDemo from "./ModalDemo"; + +This guide provides comprehensive information on when and how to use different types of modals effectively in your applications. + + +

Basic Modal

+ + +Use for simple information display or read-only content. Keep content concise and provide clear dismiss options. + +
+
+ + + +
+
+ + +

Confirmation Modal

+ + +Essential for destructive actions. Always use warning icons, specific button labels, and clearly explain consequences. + +
+
+ + + +
+
+ + +

Action Modal

+ + +Perfect for task completion with forms. Use contextual icons and provide clear primary/secondary actions. + +
+
+ + + +
+
+ + +

Informational Modal

+ + +Use for help content and contextual information. Structure content clearly and keep it scannable. + +
+
+ + + +
+
+ + +

Warning Modal

+ + +Alert users to potential issues before proceeding. Use warning colors and provide helpful context. + +
+
+ + + +
+
+ + +

Success Modal

+ + +Celebrate user achievements and provide positive feedback. Include relevant metrics when helpful. + +
+
+ + + +
+
+ + +

Error Modal

+ + +Communicate failures clearly with friendly language. Provide specific solutions and avoid technical jargon. + +
+
+ + + +
+
+ + +

Nested Modal

+ + +Use sparingly for multi-step workflows. Maintain clear navigation and ensure users understand the hierarchy. + +
+
+ + + +
+
+ + +

When to Use Modals

+ + +- Requiring immediate user attention for critical information or decisions. +- Collecting user input without navigating away from the current context. +- Confirming destructive or irreversible actions before execution. +- Displaying detailed information that doesn't warrant a separate page. +- Presenting workflows that need to maintain the underlying page state. diff --git a/src/collections/sistent/components/modal/index.mdx b/src/collections/sistent/components/modal/index.mdx index d51a531c41f83..c47f6cc66c833 100644 --- a/src/collections/sistent/components/modal/index.mdx +++ b/src/collections/sistent/components/modal/index.mdx @@ -1,11 +1,41 @@ --- name: "Modal" -title: "Modal" -description: "A modal is a conatiner that appears in front of the main content on a page when clicked on button or text. It provides information or an actionable piece of content for users to execute." -component: "modal" +title: Modal published: true -pages: - - overview - - guidance - - code +component: modal +description: A modal is a container that appears in front of the main content on a page, providing important information or an actionable piece of content for users to execute. Modals focus user attention and prevent interaction with the underlying page until dismissed. --- + +import { Button } from "@sistent/sistent"; +import ModalDemo from "./ModalDemo"; + +The Modal component is essential for communicating important information and collecting user input without losing context. It provides immediate focus and ensures users complete required actions before proceeding. + + +

Basic Modal

+ + +A simple modal with basic content and standard dismiss functionality. This is the default behavior for displaying information to users. + +
+
+ + + +
+
+ + +

Modal Variations

+ + +The Modal component supports various types and configurations to handle different use cases and user interactions. + +- **Basic Modal:** Simple content display with minimal interaction. +- **Confirmation Modal:** Require user confirmation for important or destructive actions. +- **Action Modal:** Facilitate task completion with forms and interactive controls. +- **Informational Modal:** Provide detailed information, help content, or contextual guidance. +- **Warning Modal:** Alert users to potential issues or important considerations. +- **Success Modal:** Confirm successful completion of actions with positive feedback. +- **Error Modal:** Communicate failures or issues requiring user attention. +- **Nested Modal:** Secondary modals that open from within existing modals. diff --git a/src/collections/sistent/components/pagination/PaginationDemo.js b/src/collections/sistent/components/pagination/PaginationDemo.js new file mode 100644 index 0000000000000..5f05b10c454d3 --- /dev/null +++ b/src/collections/sistent/components/pagination/PaginationDemo.js @@ -0,0 +1,58 @@ +import React, { useState } from "react"; +import { Pagination, Box } from "@sistent/sistent"; + +const PaginationDemo = ({ type }) => { + const [page, setPage] = useState(1); + const handleChange = (event, value) => { + setPage(value); + }; + + if (type === "basic") { + return ; + } + + if (type === "sizes") { + return ( + + + + + + ); + } + + if (type === "variants") { + return ( + + + + + ); + } + + if (type === "styling") { + return ( + + ); + } + + if (type === "outline") { + return ( + + ); + } + + // Generic controlled wrapper if needed, default to basic + return ; +}; + +export default PaginationDemo; diff --git a/src/collections/sistent/components/pagination/code.mdx b/src/collections/sistent/components/pagination/code.mdx new file mode 100644 index 0000000000000..0b249ea28ef92 --- /dev/null +++ b/src/collections/sistent/components/pagination/code.mdx @@ -0,0 +1,77 @@ +--- +title: Pagination Code +component: pagination +description: The Pagination component helps users navigate through multiple pages of content. It provides a clear interface for moving between pages and understanding the current position within a larger dataset. +--- + +import { Pagination } from "@sistent/sistent"; +import PaginationDemo from "./PaginationDemo"; + +The Pagination component helps users navigate through multiple pages of content. It provides a clear interface for moving between pages and understanding the current position within a larger dataset. + + + +
+
+ + + +
+ `} /> +
+ + +

Pagination Sizes

+ + +
+
+ + + +
+ + +`} /> +
+ + +

Custom Styling

+ + +
+
+ + + +
+ `} /> +
+ + +

Pagination with Outline

+ + +
+
+ + + +
+ `} /> +
diff --git a/src/collections/sistent/components/pagination/guidance.mdx b/src/collections/sistent/components/pagination/guidance.mdx new file mode 100644 index 0000000000000..5644457c33e8f --- /dev/null +++ b/src/collections/sistent/components/pagination/guidance.mdx @@ -0,0 +1,37 @@ +--- +title: Pagination Guidance +component: pagination +description: The Pagination component helps users navigate through multiple pages of content. It provides a clear interface for moving between pages and understanding the current position within a larger dataset. +--- + +import { Pagination } from "@sistent/sistent"; + +The Pagination component helps users navigate through multiple pages of content. It provides a clear interface for moving between pages and understanding the current position within a larger dataset. + + +

Usage Guidelines

+ + +

When to Use

+ +Pagination should be used when displaying large datasets that need to be broken into manageable chunks. It helps users navigate through multiple pages of content and is beneficial when content needs to be loaded incrementally to improve performance. + +

Best Practices

+ +To ensure a smooth user experience, it’s important to keep page sizes consistent throughout the interface. The current page number and total pages should be displayed clearly. Adequate spacing between page numbers should be ensured to improve readability. It’s also crucial to provide clear visual feedback for the current page. For large page ranges, consider using ellipsis (...) to represent skipped pages. + +

Accessibility

+ +To make pagination more accessible, ensure that ARIA labels are used to identify the pagination controls. Keyboard navigation should be properly supported to allow users to navigate through the pages easily. It’s important to provide clear visual indicators for focus states and maintain adequate color contrast for all states to ensure readability. + +
+
+ + + +
+
diff --git a/src/collections/sistent/components/pagination/index.mdx b/src/collections/sistent/components/pagination/index.mdx index deeb7ebe64ccb..003a863ac18dc 100644 --- a/src/collections/sistent/components/pagination/index.mdx +++ b/src/collections/sistent/components/pagination/index.mdx @@ -1,11 +1,82 @@ --- name: "Pagination" -title: "Pagination" -description: "Pagination enables users to navigate through multiple pages of content, providing an intuitive interface for browsing large datasets or segmented information." -component: "pagination" +title: Pagination published: true -pages: - - overview - - guidance - - code +component: pagination +description: The Pagination component helps users navigate through multiple pages of content. It provides a clear interface for moving between pages and understanding the current position within a larger dataset. --- + +import { Pagination, Box } from "@sistent/sistent"; +import PaginationDemo from "./PaginationDemo"; + +Pagination is an essential element for navigating large datasets or multiple pages of information. It enables users to move between pages in a user-friendly and intuitive manner. Pagination helps to split large content into smaller sections to improve the overall user experience. + + +

Basic Usage

+ + +Basic pagination allows users to navigate through numbered pages. The current page is highlighted, and users can click on page numbers or arrows to move between pages. + +
+
+ + + +
+
+ + +

Variants

+ + +The Pagination component supports multiple variants to match your design needs, including outlined, text, and contained styles. These variants provide flexibility in integrating the component into your layout while maintaining a consistent visual appearance. + +
+
+ + + +
+
+ + +

Sizes

+ + +The Pagination component can also be customized in terms of size to suit different use cases. For smaller screens, compact pagination may be preferred, while larger pagination can be used for better visibility on larger screens. + +

Large

+ +A larger pagination component that enhances visibility and interaction on larger displays. + +
+
+ + + +
+
+ +

Medium

+ +A medium-sized pagination component that balances compactness and visibility. + +
+
+ + + +
+
+ +

Small

+ +A smaller pagination component suitable for compact designs or when screen real estate is limited. + +
+
+ + + +
+
diff --git a/src/collections/sistent/components/paper/code.mdx b/src/collections/sistent/components/paper/code.mdx new file mode 100644 index 0000000000000..0dddf36b7def9 --- /dev/null +++ b/src/collections/sistent/components/paper/code.mdx @@ -0,0 +1,115 @@ +--- +title: Paper Code +component: paper +description: The Paper component provides an elevated surface for displaying content. It mimics the behavior of real-world surfaces with shadow effects, supporting Material Design's elevation system. +--- + +import { Paper } from "@sistent/sistent"; + +The Paper component provides an elevated surface for displaying content. It mimics the behavior of real-world surfaces with shadow effects, supporting Material Design's elevation system. + + +

Basic Example

+ + +Here’s a simple example of a Paper component with default elevation. This creates a surface with a subtle shadow. + +
+
+ + + Default Paper with Elevation 1 + + +
+ + Default Paper with Elevation 1 +`} /> +
+ + +

Elevation Example

+ + +The `elevation` prop controls the shadow depth. Use values from 0 to 24 to create varying levels of elevation: + +
+
+ +
+ + Elevation 0 (No shadow) + + + Elevation 3 + + + Elevation 8 + +
+ +
+ + Elevation 0 (No shadow) + + + Elevation 3 + + + Elevation 8 +`} /> +
+ + +

Variant Example

+ + +The Paper component supports two variants: `elevation` (default) and `outlined`. The outlined variant removes shadows and adds a border instead: + +
+
+ +
+ + Elevation Variant (Default) + + + Outlined Variant (No shadow) + +
+ +
+ + Elevation Variant (Default) + + + Outlined Variant (No shadow) +`} /> +
+ + +

Square and Rounded Corners

+ + +By default, the Paper component has rounded corners. You can make it square by setting the `square` prop to `true`. + +
+
+ +
+ + Rounded Corners (Default) + + + Square Corners + +
+ +
+ + Rounded Corners (Default) + + + Square Corners +`} /> +
diff --git a/src/collections/sistent/components/paper/guidance.mdx b/src/collections/sistent/components/paper/guidance.mdx new file mode 100644 index 0000000000000..b1b990ea2563a --- /dev/null +++ b/src/collections/sistent/components/paper/guidance.mdx @@ -0,0 +1,44 @@ +--- +title: Paper Guidance +component: paper +description: The Paper component provides an elevated surface for displaying content. It mimics the behavior of real-world surfaces with shadow effects, supporting Material Design's elevation system. +--- + +import { Paper } from "@sistent/sistent"; + +The Paper component provides an elevated surface for displaying content. It mimics the behavior of real-world surfaces with shadow effects, supporting Material Design's elevation system. + + +

Usage Guidelines

+ + +When using the Paper component, follow these guidelines to ensure consistency and usability across your designs. + + +

Elevation Guidelines

+ + +- Use lower elevations (0-3) for subtle surfaces such as cards and small sections. +- Higher elevations (8-24) are best for modals or key areas that need emphasis. +- Be mindful of the dark mode behavior, where higher elevations result in a lighter background. + + +

Variant Guidelines

+ + +- Use the `outlined` variant for areas where shadows might feel visually overwhelming. +- Stick to the default elevation variant for core components requiring shadow depth. + + +

Corners Guidelines

+ + +- Rounded corners are more user-friendly and should be preferred unless a strict design requires square corners. +- Use square corners sparingly, mostly for components meant to indicate precision or alignment with grid systems. + + +

Accessibility

+ + +- Make sure elevated surfaces have sufficient contrast with the background. +- Use clear and concise labels or headings for content within Paper components to enhance accessibility. diff --git a/src/collections/sistent/components/paper/index.mdx b/src/collections/sistent/components/paper/index.mdx index 33456ca564248..bb49919e1900e 100644 --- a/src/collections/sistent/components/paper/index.mdx +++ b/src/collections/sistent/components/paper/index.mdx @@ -1,11 +1,59 @@ --- name: "Paper" -title: "Paper" -description: "The Paper component offers an elevated surface with shadow effects, following Material Design’s elevation system." -component: "paper" +title: Paper published: true -pages: - - overview - - guidance - - code +component: paper +description: The Paper component provides an elevated surface for displaying content. It mimics the behavior of real-world surfaces with shadow effects, supporting Material Design's elevation system. --- + +import { Paper } from "@sistent/sistent"; + +The Paper component is useful for designs that require elevated surfaces, such as cards or modals, and offers multiple configuration options like elevation, variants, and corner styles. + + +

Elevation

+ + +Paper can be configured with different `elevation` levels to establish a visual hierarchy. The elevation prop determines the shadow depth, with values ranging from 0 (no shadow) to 24 (maximum shadow). + +
+
+ + + Paper with Elevation 3 + + +
+
+ + +

Outlined

+ + +For designs requiring minimal shadows, the `outlined` variant can be used instead of the default elevated one. + +
+
+ + + Outlined Paper Variant + + +
+
+ + +

Corners

+ + +The Paper component has rounded corners by default, but you can use the `square` prop to remove rounding. + +
+
+ + + Square Corners + + +
+
diff --git a/src/collections/sistent/components/popper/PopperDemo.js b/src/collections/sistent/components/popper/PopperDemo.js new file mode 100644 index 0000000000000..b69e70a122a04 --- /dev/null +++ b/src/collections/sistent/components/popper/PopperDemo.js @@ -0,0 +1,142 @@ +import React, { useState } from "react"; +import { Popper, Button, Box, Grid } from "@sistent/sistent"; + +const PopperDemo = ({ type }) => { + const [anchorEl, setAnchorEl] = useState(null); + const [placement, setPlacement] = useState("bottom"); + const [open, setOpen] = useState(false); + + const handleClick = (newPlacement) => (event) => { + setAnchorEl(event.currentTarget); + setOpen((prev) => placement !== newPlacement || !prev); + setPlacement(newPlacement); + }; + + const handleBasicClick = (event) => { + setAnchorEl(event.currentTarget); + setOpen((prev) => !prev); + } + + if (type === "basic") { + return ( + + + + + The content of the Popper. + + + + ); + } + + if (type === "positioned") { + return ( + + + + The content of the Popper. + + + + + + + + + + + + +
+ +
+ + + + + + + + + + + + + + + + + + + + + + + ); + } + + return null; +}; + +export default PopperDemo; diff --git a/src/collections/sistent/components/popper/code.mdx b/src/collections/sistent/components/popper/code.mdx new file mode 100644 index 0000000000000..66ea91e513c55 --- /dev/null +++ b/src/collections/sistent/components/popper/code.mdx @@ -0,0 +1,58 @@ +--- +title: Popper Code +component: popper +description: The Popper component provides a mechanism for positioning content dynamically relative to a reference element. It is commonly used for tooltips, dropdowns, and modals, enhancing the user experience by presenting contextual information without overcrowding the interface. +--- + +import { Popper, Button, Box } from "@sistent/sistent"; +import PopperDemo from "./PopperDemo"; + +The Popper component provides a mechanism for positioning content dynamically relative to a reference element. It is commonly used for tooltips, dropdowns, and modals, enhancing the user experience by presenting contextual information without overcrowding the interface. + + +

Basic Popper

+ + +Here’s a simple example of how to use the Popper component. In this example, clicking the button toggles the visibility of the popper: + +
+
+ + + +
+ + + + The content of the Popper. + +`} /> +
+ + +

Positioned Example

+ + +You can specify the position of the Popper using the `placement` prop. Here's an example of a Popper positioned relative to its anchor: + +
+
+ + + +
+ + + The content of the Popper. + + + + {/* Grid of buttons to control placement */} + {/* ... (Implementation of buttons setting placement state) ... */} +`} /> +
diff --git a/src/collections/sistent/components/popper/guidance.mdx b/src/collections/sistent/components/popper/guidance.mdx new file mode 100644 index 0000000000000..310f345d92a9a --- /dev/null +++ b/src/collections/sistent/components/popper/guidance.mdx @@ -0,0 +1,68 @@ +--- +title: Popper Guidance +component: popper +description: The Popper component provides a mechanism for positioning content dynamically relative to a reference element. It is commonly used for tooltips, dropdowns, and modals, enhancing the user experience by presenting contextual information without overcrowding the interface. +--- + +import { Popper, Button, Box } from "@sistent/sistent"; +import PopperDemo from "./PopperDemo"; + +The Popper component provides a mechanism for positioning content dynamically relative to a reference element. It is commonly used for tooltips, dropdowns, and modals, enhancing the user experience by presenting contextual information without overcrowding the interface. + +Proper usage of the Popper component can greatly enhance user experience by providing relevant contextual information at the right time. Below are some guidelines to ensure effective implementation. + + +

Positioning

+ + +The positioning of the Popper is critical for usability. Use the `placement` prop to control where the Popper appears relative to its anchor element. Options include: + +- top +- bottom +- left +- right +- top-start +- top-end +- bottom-start +- bottom-end +- left-start +- left-end +- right-start +- right-end + +Choosing the right position helps to prevent overlap with other interface elements and improves readability. + + +

Styling

+ + +The Popper component inherits styles from the Sistent theme. You can customize the appearance by applying styles to the content inside the Popper. For instance: + +
+
+ + + +
+
+ +Ensure that the styling aligns with your application's theme for a cohesive look and feel. + + +

Accessibility

+ + +It’s important to ensure that the Popper component is accessible to all users. Here are some key considerations: + +- Use appropriate `aria-` attributes to enhance screen reader compatibility, such as `aria-describedby` for tooltips. +- Ensure that the Popper is keyboard navigable, allowing users to open/close it using keyboard shortcuts. +- Provide sufficient contrast for the text and background colors to improve readability. + + +

Performance Tips

+ + +When using the Popper component, consider the following to optimize performance: + +- Avoid excessive rendering by controlling when the Popper is opened. Use state management effectively to minimize unnecessary re-renders. +- For complex popper content, consider lazy loading non-critical elements to improve initial load times. diff --git a/src/collections/sistent/components/popper/index.mdx b/src/collections/sistent/components/popper/index.mdx index 6b48b3e19933a..63360765c92a3 100644 --- a/src/collections/sistent/components/popper/index.mdx +++ b/src/collections/sistent/components/popper/index.mdx @@ -1,11 +1,44 @@ --- name: "Popper" -title: "Popper" -description: "A popper is a tooltip that appears when a user interacts with an element." -component: "popper" +title: Popper published: true -pages: - - overview - - guidance - - code +component: popper +description: The Popper component provides a mechanism for positioning content dynamically relative to a reference element. It is commonly used for tooltips, dropdowns, and modals, enhancing the user experience by presenting contextual information without overcrowding the interface. --- + +import { Popper, Button, Box } from "@sistent/sistent"; +import PopperDemo from "./PopperDemo"; + +Poppers are critical for displaying information dynamically and can be used in various scenarios like tooltips, dropdowns, and menus. By anchoring the content to a reference element, Poppers provide users with relevant information as they interact with the interface. + + +

Basic Example

+ + +Below is a simple example of how to use the Popper component to display content relative to a button. + +
+
+ + + +
+
+ +The `anchorEl` prop specifies the element to which the Popper will be anchored. The `open` prop controls its visibility. + + +

Styling and Positioning

+ + +You can customize the positioning of the Popper using the `placement` prop to define where the Popper appears relative to the anchor element. + +
+
+ + + +
+
+ +The above example demonstrates a Popper positioned relative to the reference button, providing flexibility in its placement. diff --git a/src/collections/sistent/components/radiogroup/RadioGroupDemo.js b/src/collections/sistent/components/radiogroup/RadioGroupDemo.js new file mode 100644 index 0000000000000..46f22e5f0ce10 --- /dev/null +++ b/src/collections/sistent/components/radiogroup/RadioGroupDemo.js @@ -0,0 +1,81 @@ +import React, { useState } from "react"; +import { RadioGroup, Radio, FormControlLabel, Box } from "@sistent/sistent"; + +const RadioGroupDemo = ({ type }) => { + const [value, setValue] = useState("Layer5"); + const handleChange = (event) => setValue(event.target.value); + + const [disabledValue, setDisabledValue] = useState("Layer5"); + const handleDisabledChange = (event) => setDisabledValue(event.target.value); + + const [rowValue, setRowValue] = useState("Contributor"); + const handleRowChange = (event) => setRowValue(event.target.value); + + const [labelValue, setLabelValue] = useState("end"); + const handleLabelChange = (event) => setLabelValue(event.target.value); + + if (type === "basic") { + return ( + + } label="Layer5" /> + } label="Meshery" /> + } label="Kanvas" /> + + ); + } + + if (type === "disabled") { + return ( + + } label="Layer5" /> + } label="Meshery-Cloud (Private)" disabled /> + } label="Sistent Design System" /> + + ); + } + + if (type === "row") { + return ( + + } label="Contributor" /> + } label="Community Member" /> + } label="Maintainer" /> + + ); + } + + if (type === "labelPlacement") { + return ( + + } + label="End (Default)" + labelPlacement="end" + /> + } + label="Top" + labelPlacement="top" + /> + } + label="Bottom" + labelPlacement="bottom" + /> + } + label="Start" + labelPlacement="start" + /> + + ); + } + + return null; +}; + +export default RadioGroupDemo; diff --git a/src/collections/sistent/components/radiogroup/code.mdx b/src/collections/sistent/components/radiogroup/code.mdx new file mode 100644 index 0000000000000..beaf87936df84 --- /dev/null +++ b/src/collections/sistent/components/radiogroup/code.mdx @@ -0,0 +1,79 @@ +--- +title: RadioGroup Code +component: radiogroup +description: The RadioGroup component allows users to select one option from a set of mutually exclusive choices. It ensures accessibility and consistency within the Sistent design system. +--- + +import { RadioGroup, Radio, FormControlLabel } from "@sistent/sistent"; +import RadioGroupDemo from "./RadioGroupDemo"; + +The RadioGroup component lets users select one option from a set of choices. It ensures accessibility and ease of use. + + +

Basic RadioGroup

+ + +
+
+ + + +
+ + } label="Layer5" /> + } label="Meshery" /> + } label="Kanvas" /> +`} /> +
+ + +

Disabled Options

+ + +
+
+ + + +
+ + } label="Layer5" /> + } label="Meshery-Cloud (Private)" disabled /> + } label="Sistent Design System" /> +`} /> +
+ + +

Row Layout

+ + +
+
+ + + +
+ + } label="Contributor" /> + } label="Community Member" /> + } label="Maintainer" /> +`} /> +
+ + +

Label Placement

+ + +
+
+ + + +
+ + } label="End (Default)" labelPlacement="end" /> + } label="Top" labelPlacement="top" /> + } label="Bottom" labelPlacement="bottom" /> + } label="Start" labelPlacement="start" /> +`} /> +
diff --git a/src/collections/sistent/components/radiogroup/guidance.mdx b/src/collections/sistent/components/radiogroup/guidance.mdx new file mode 100644 index 0000000000000..1f545df0f7a73 --- /dev/null +++ b/src/collections/sistent/components/radiogroup/guidance.mdx @@ -0,0 +1,29 @@ +--- +title: RadioGroup Guidance +component: radiogroup +description: The RadioGroup component allows users to select one option from a set of mutually exclusive choices. It ensures accessibility and consistency within the Sistent design system. +--- + +import { RadioGroup, Radio, FormControlLabel } from "@sistent/sistent"; + +The RadioGroup component allows the user to select one option from a set. + + +

Function

+ + +The RadioGroup component helps achieve the following functions: + +- **Single Selection:** Ensures that only one option can be selected at a time, making it ideal for mutually exclusive choices. +- **Form Inputs:** Commonly used in forms where users need to select from predefined options, such as survey questions or settings. +- **Custom UI Controls:** Can be styled and customized to fit different design requirements and themes. + + +

Best Practices

+ + +- **Single-choice only:** Use RadioGroup when users must select just one option from a set. For multiple selections, use checkboxes instead. +- **Clear labeling:** Provide short, descriptive labels for each radio option to help users understand their choices quickly. +- **Logical grouping:** Visually and semantically group related radio options together to improve clarity and accessibility. +- **Default selection:** Set a sensible default value to guide users and streamline their decision-making process. +- **Horizontal layout:** Use the `row` prop for horizontal alignment when space is limited or when options are closely related. diff --git a/src/collections/sistent/components/radiogroup/index.mdx b/src/collections/sistent/components/radiogroup/index.mdx index 4d96927b4075a..7f1a895a115f2 100644 --- a/src/collections/sistent/components/radiogroup/index.mdx +++ b/src/collections/sistent/components/radiogroup/index.mdx @@ -1,11 +1,74 @@ --- name: "RadioGroup" -title: "RadioGroup" -description: "Sistent offers a well-structured RadioGroup component that allows users to select one option from a set." -component: "radiogroup" +title: RadioGroup published: true -pages: - - overview - - guidance - - code +component: radiogroup +description: The RadioGroup component allows users to select one option from a set of mutually exclusive choices. It ensures accessibility and consistency within the Sistent design system. --- + +import { RadioGroup, Radio, FormControlLabel } from "@sistent/sistent"; +import RadioGroupDemo from "./RadioGroupDemo"; + +The RadioGroup component in React is used to present a set of mutually exclusive options, where only one option can be selected at a time. It is commonly used in forms and settings. + + +

How to use

+ + +The examples below demonstrate different ways to use the RadioGroup component. + + +

Basic RadioGroup

+ + +Select one option from a simple vertical list. + +
+
+ + + +
+
+ + +

Disabled Options

+ + +One of the options is disabled and cannot be selected. + +
+
+ + + +
+
+ + +

Row Layout

+ + +Options are displayed in a horizontal row. + +
+
+ + + +
+
+ + +

Label Placement

+ + +You can change the placement of the label with the `labelPlacement` prop. + +
+
+ + + +
+
diff --git a/src/collections/sistent/components/select/SelectDemo.js b/src/collections/sistent/components/select/SelectDemo.js new file mode 100644 index 0000000000000..7d44e2f272c87 --- /dev/null +++ b/src/collections/sistent/components/select/SelectDemo.js @@ -0,0 +1,146 @@ +import React, { useState } from "react"; +import { + FormControl, + InputLabel, + MenuItem, + Select, + OutlinedInput, + FormHelperText, + ListSubheader, + Box +} from "@mui/material"; + +const SelectDemo = ({ type, ...props }) => { + const [age, setAge] = useState(""); + const [multipleAges, setMultipleAges] = useState([]); + + const handleChange = (event) => { + setAge(event.target.value); + }; + + const handleMultipleChange = (event) => { + const { + target: { value }, + } = event; + setMultipleAges( + // On autofill we get a stringified value. + typeof value === 'string' ? value.split(',') : value, + ); + }; + + if (type === "basic") { + // Covers outlined, filled, standard variants via props + const labelId = `demo-select-${props.variant || 'outlined'}-label`; + return ( + + + Age + + + + ); + } + + if (type === "helper") { + return ( + + Age + + With label + helper text + + ); + } + + if (type === "placeholder") { + return ( + + + + ) + } + + if (type === "grouping") { + return ( + + Grouping + + + ); + } + + if (type === "multiple") { + return ( + + Name + + + ); + } + + return null; +}; + +export default SelectDemo; diff --git a/src/collections/sistent/components/select/code.mdx b/src/collections/sistent/components/select/code.mdx new file mode 100644 index 0000000000000..7c28b6ee6ae30 --- /dev/null +++ b/src/collections/sistent/components/select/code.mdx @@ -0,0 +1,186 @@ +--- +title: Select Code +component: select +description: The Select component is a versatile and customizable element commonly used in forms and user interfaces. It is designed to present a list of options for users to choose from, either as a single selection or multiple selections. This component plays a vital role in collecting user-provided information efficiently and intuitively. +--- + +import { FormControl, Select, MenuItem, InputLabel, FormHelperText, OutlinedInput, ListSubheader } from "@mui/material"; +import SelectDemo from "./SelectDemo"; + +The Select component comes in various types and supports different features like grouping, multiple selection, and custom variants. + + +

Select variants

+ + +The select comes in three types: Outlined, Filled, and Standard. To specify the variant, pass a value to the variant prop. + +
+
+ + + +
+ + Ten + Twenty + Thirty +`} /> +
+ +
+
+ + + +
+ + Ten + Twenty + Thirty +`} /> +
+ +
+
+ + + +
+ + Ten + Twenty + Thirty +`} /> +
+ + +

Sizes

+ + +There are 3 size option for the select component: autowidth, small, and fullWidth. + +
+
+ + + +
+ + Ten + Twenty + Thirty +`} /> +
+ +
+
+ + + +
+ + Ten + Twenty + Thirty +`} /> +
+ +
+
+ +
+ +
+ +
+ + Ten + Twenty + Thirty +`} /> +
+ + +

Customization

+ + +You can customize labels, helper text, and placeholders. + +
+
+ + + +
+ + + This is a helper text +`} /> +
+ +
+
+ + + +
+ setSelectedAge(e.target.value)} + renderValue={() => { + if (selectedAge == "") return Select an age; + return selectedAge; + }} + value={selectedAge} + displayEmpty +> + Ten + Twenty + Thirty +`} /> +
+ +
+
+ + + +
+ + Group 1 + Ten + Twenty + Group 2 + Thirty + Fourty + Group 3 + Fifty + Sixty +`} /> +
+ + +

Multi-select

+ + +
+
+ + + +
+ } + value={multipleAges} + onChange={handleMultiplSelect} +> + Ten + Twenty + Thirty +`} /> +
diff --git a/src/collections/sistent/components/select/guidance.mdx b/src/collections/sistent/components/select/guidance.mdx new file mode 100644 index 0000000000000..1a5c8764290f4 --- /dev/null +++ b/src/collections/sistent/components/select/guidance.mdx @@ -0,0 +1,100 @@ +--- +title: Select Guidance +component: select +description: The Select component is a versatile and customizable element commonly used in forms and user interfaces. It is designed to present a list of options for users to choose from, either as a single selection or multiple selections. This component plays a vital role in collecting user-provided information efficiently and intuitively. +--- + +import { FormControl, InputLabel, MenuItem, Select } from "@mui/material"; +import SelectDemo from "./SelectDemo"; + +The select component can exhibit different state based on the context and user input. Since it is usually used within a form component, these states can act in response to the user input for other components in the form. + + +

Functions

+ + +

Disabled

+If the component is disabled, the dropdown menu won't display when user clicks on the selection area. This behavior is useful when the user is not allowed to select any option. + +
+
+ + + +
+
+ +

Error

+This behavior is used to indicate that the user has made an error or the selection is not compatible with other form components. + +
+
+ + + +
+
+ +

Required

+If specified, the select component will be required to have an input from the user. An asterisk will be displayed next to the label to let the user know that the input is required. + +
+
+ + + +
+
+ + +

Customization

+ + +Additional props can be added to the select component to customize its label and dropdown menu to provide use with more context of their selection. + +

Label and helper text

+The label is optional. If provided, helper text is displayed below the component to give the user more context about the component. + +
+
+ + + +
+
+ +

Placeholder

+A placeholder is a short hint or description that is displayed inside an input field or select component before the user enters a value. + +
+
+ + + +
+
+ +

Grouping

+If the selection options are organized into groups, their groups can be displayed within the dropdown menu. + +
+
+ + + +
+
+ + +

Multiple select

+ + +The multiple select component allows users to select more than one option from the dropdown list. + +
+
+ + + +
+
diff --git a/src/collections/sistent/components/select/index.mdx b/src/collections/sistent/components/select/index.mdx index 6388b1d6a805d..6a5343e08ed7a 100644 --- a/src/collections/sistent/components/select/index.mdx +++ b/src/collections/sistent/components/select/index.mdx @@ -1,11 +1,104 @@ --- name: "Select" -title: "Select" -description: "Select component is a dropdown menu for selecting an option from a list." -component: "select" +title: Select published: true -pages: - - overview - - guidance - - code +component: select +description: The Select component is a versatile and customizable element commonly used in forms and user interfaces. It is designed to present a list of options for users to choose from, either as a single selection or multiple selections. This component plays a vital role in collecting user-provided information efficiently and intuitively. --- + +import { FormControl, InputLabel, MenuItem, Select, OutlinedInput } from "@mui/material"; +import SelectDemo from "./SelectDemo"; + +To accommodate various design styles and use cases, the select component offers numerous customizable properties. Developers can customize how the component display the labels or selected option to improve user experience. + + +

Types

+ + +

Outlined

+The default style is "outlined," featuring a thin line around the selection area. The label appears above the selection, and the dropdown menu is displayed below it. + +
+
+ + + +
+
+ +

Filled

+Filled select feature a background color fill. Depending on the theme or intended action, the color fill can range from a primary brand color to any other applicable color in a brand's color palette. + +
+
+ + + +
+
+ +

Standard

+The standard style features a simple underline below the selection area. + +
+
+ + + +
+
+ + +

Sizes

+ + +The select component can be adjusted in size to accommodate various use cases. + +

Auto width

+The width of the component can scale automatically to fit the content it contains. + +
+
+ + + +
+
+ +

Small

+The small size select component is designed to fit into more compact spaces. + +
+
+ + + +
+
+ +

Full width

+Full width select are more efficient in mobile designs. + +
+
+ +
+ +
+ +
+
+ + +

Multiple select

+ + +Multiple select component allows users to select more than one option. + +
+
+ + + +
+
diff --git a/src/collections/sistent/components/stack/code.mdx b/src/collections/sistent/components/stack/code.mdx new file mode 100644 index 0000000000000..2401a354e116a --- /dev/null +++ b/src/collections/sistent/components/stack/code.mdx @@ -0,0 +1,227 @@ +--- +title: Stack Code +component: stack +description: The Stack component is a layout utility that manages one-dimensional layouts with flexible spacing and alignment. Built on Flexbox, it provides an efficient way to arrange elements vertically or horizontally with consistent spacing. +--- + +import { Stack, Box, Button } from "@sistent/sistent"; + +The `Stack` component is a layout utility that manages one-dimensional layouts with flexible spacing and alignment. Built on Flexbox, it provides an efficient way to arrange elements vertically or horizontally with consistent spacing. + +The `Stack` component arranges children in one-dimensional flow, either vertically or horizontally, with consistent spacing and no manual margin adjustments. + + +

Vertical Stack

+ + +The default Stack orientation is vertical. Use the `spacing` prop to control the gap between children. + +
+
+ + + + Header + + + Content + + + Footer + + + +
+ + + Header + + + Content + + + Footer + +`} /> +
+ + +

Horizontal Stack

+ + +Set `direction="row"` to arrange children horizontally. Useful for button groups and navigation items. + +
+
+ + + + Home + + + About + + + Contact + + + +
+ + + Home + + + About + + + Contact + +`} /> +
+ + +

Responsive Stack

+ + +Use responsive values for the `direction` prop to create adaptive layouts that stack vertically on mobile and horizontally on larger screens. + +
+
+ + + + Card One + + + Card Two + + + +
+ + + Card One + + + Card Two + +`} /> +
+ + +

Divider

+ + +Add visual separation between children using the `divider` prop. + +
+
+ + + } + > + Profile + Settings + Logout + + +
+ + } +> + Profile + Settings + Logout +`} /> +
+ + +

Spacing

+ + +Use larger spacing values to create wider gaps. Common values range from 1 (8px) to 4 (32px). + +
+
+ + + + Title + + + Description + + + +
+ + + Title + + + Description + +`} /> +
+ + +

Button Group

+ + +Use `direction="row"` to stack horizontal button groups with consistent spacing. + +
+
+ + + + + + + +
+ + + + +`} /> +
diff --git a/src/collections/sistent/components/stack/guidance.mdx b/src/collections/sistent/components/stack/guidance.mdx new file mode 100644 index 0000000000000..42b6fe0b53a91 --- /dev/null +++ b/src/collections/sistent/components/stack/guidance.mdx @@ -0,0 +1,191 @@ +--- +title: Stack Guidance +component: stack +description: The Stack component is a layout utility that manages one-dimensional layouts with flexible spacing and alignment. Built on Flexbox, it provides an efficient way to arrange elements vertically or horizontally with consistent spacing. +--- + +import { Stack, Box, Button } from "@sistent/sistent"; + +The `Stack` component is a layout utility that manages one-dimensional layouts with flexible spacing and alignment. Built on Flexbox, it provides an efficient way to arrange elements vertically or horizontally with consistent spacing. + +Stack is built on Flexbox and optimized for one-dimensional layouts. It excels at organizing elements in a single direction while maintaining consistent spacing. + + +

Best Practices

+ + +

Use Cases

+ +Stack is ideal for: +- Form layouts with consistent vertical spacing +- Button groups arranged horizontally or vertically +- Navigation menus with proper spacing +- Card content stacking +- Lists with dividers + +

Stack vs Grid

+ +Choose the right component: +- **Stack:** One-dimensional layout (single direction) +- **Grid:** Two-dimensional layout (rows and columns) + +
+
+ + + +

+ Stack Example (One Direction): +

+ + + 1 + + + 2 + + + 3 + + + + + +
+
+ + +

Spacing

+ + +

Best Practices

+ +Use consistent spacing values throughout your application: +- `spacing=1` (8px) for closely related elements +- `spacing=2` (16px) for standard spacing +- `spacing=3` (24px) for distinct sections +- `spacing=4` (32px) for major separations + +
+
+ + + +

+ Spacing = 1 +

+ + Label + Input + + + +

+ Spacing = 3 +

+ + Title + Body + + + + +
+
+ +

Direction

+ +- `direction="column"` (default) for vertical stacking +- `direction="row"` for horizontal arrangements +- Use responsive values: `direction={{ xs: "column", md: "row" }}` + +

Dividers

+ +- Use to separate distinct sections +- Use sparingly for best effect +- Match divider style with your design system + +
+
+ + + } + > + Profile Settings + Notification Preferences + Privacy Controls + + +
+
+ + +

Examples

+ + +

Form Layout

+ +Organize form fields vertically with consistent spacing: + +
+
+ + + + + Name + + + Input field + + + + + Email + + + Input field + + + + + + + + +
+
+ +

Button Groups

+ +Use horizontal Stack for grouping related action buttons: + +
+
+ + + + + + + +
+
diff --git a/src/collections/sistent/components/stack/index.mdx b/src/collections/sistent/components/stack/index.mdx index 9300b4378f021..b62012b805d6e 100644 --- a/src/collections/sistent/components/stack/index.mdx +++ b/src/collections/sistent/components/stack/index.mdx @@ -1,11 +1,128 @@ --- name: "Stack" -title: "Stack" -description: "Stack is a layout component that arranges elements in a one-dimensional flow with customizable spacing and direction." -component: "stack" +title: Stack published: true -pages: - - overview - - guidance - - code +component: stack +description: The Stack component is a layout utility that manages one-dimensional layouts with flexible spacing and alignment. Built on Flexbox, it provides an efficient way to arrange elements vertically or horizontally with consistent spacing. --- + +import { Stack, Box, Button } from "@sistent/sistent"; + +Stack simplifies one-dimensional layouts by automatically handling spacing and direction. It eliminates manual margin adjustments, making it ideal for form fields, button groups, and navigation items. + + +

Usage

+ + +

Vertical Stack

+ +By default, Stack arranges children vertically. Use the `spacing` prop to control gaps between elements. + +
+
+ + + + Header + + + Content + + + Footer + + + +
+
+ +

Horizontal Stack

+ +Set `direction="row"` to arrange children horizontally. + +
+
+ + + + Home + + + About + + + Contact + + + +
+
+ + +

Customization

+ + +Stack provides several props for customization, including spacing, direction, dividers, and responsive behavior. These options make it flexible for various layout requirements. + +

Responsive Direction

+ +The `direction` prop accepts responsive values, allowing the stack to change direction based on screen size: + +
+
+ + + + Card One + + + Card Two + + + +
+
+ +

Dividers

+ +Use the `divider` prop to add visual separation between elements. + +
+
+ + + } + > + Profile + Settings + Logout + + +
+
diff --git a/src/collections/sistent/components/stepper/StepperDemo.js b/src/collections/sistent/components/stepper/StepperDemo.js new file mode 100644 index 0000000000000..e79f813cf71af --- /dev/null +++ b/src/collections/sistent/components/stepper/StepperDemo.js @@ -0,0 +1,142 @@ +import React from "react"; +import { CustomizedStepper, useStepper, Box, Typography, Button } from "@sistent/sistent"; +import PersonIcon from "@mui/icons-material/Person"; +import SettingsIcon from "@mui/icons-material/Settings"; +import CheckCircleIcon from "@mui/icons-material/CheckCircle"; +import DescriptionIcon from "@mui/icons-material/Description"; +import CodeIcon from "@mui/icons-material/Code"; +import IntegrationInstructionsIcon from "@mui/icons-material/IntegrationInstructions"; + +const StepOne = () => ( + + User Information + + Collect basic user details + + +); + +const StepTwo = () => ( + + Account Settings + + Configure preferences + + +); + +const StepThree = () => ( + + Complete Setup + + Review and finish + + +); + +const HowToStep1 = () => ( + + + 1. Import Dependencies + + + Import CustomizedStepper, useStepper from @sistent/sistent and your icons + + +); + +const HowToStep2 = () => ( + + + 2. Create Step Components + + + Define components for each step content + + +); + +const HowToStep3 = () => ( + + + 3. Configure useStepper Hook + + + Call useStepper with steps array containing label, component, and icon + + +); + +const HowToStep4 = () => ( + + + 4. Render Stepper + + + Use CustomizedStepper with stepLabels, activeStep, icons and ActiveStepComponent + + +); + +const StepperDemo = ({ type }) => { + const isHowTo = type === "howto"; + + const steps = isHowTo + ? [ + { label: "Import", component: HowToStep1, icon: CodeIcon }, + { label: "Create Components", component: HowToStep2, icon: DescriptionIcon }, + { label: "Configure Hook", component: HowToStep3, icon: SettingsIcon }, + { label: "Render", component: HowToStep4, icon: IntegrationInstructionsIcon } + ] + : [ + { label: "User Info", component: StepOne, icon: PersonIcon }, + { label: "Settings", component: StepTwo, icon: SettingsIcon }, + { label: "Complete", component: StepThree, icon: CheckCircleIcon } + ]; + + const { + activeStep, + handleNext, + goBack, + stepLabels, + icons, + activeStepComponent: ActiveStepComponent + } = useStepper({ steps }); + + return ( + + + + + + + + + Step {activeStep + 1} of {stepLabels.length} + + + + + ); +}; + +export default StepperDemo; diff --git a/src/collections/sistent/components/stepper/code.mdx b/src/collections/sistent/components/stepper/code.mdx new file mode 100644 index 0000000000000..1c795ae3fd16d --- /dev/null +++ b/src/collections/sistent/components/stepper/code.mdx @@ -0,0 +1,62 @@ +--- +title: Stepper Code +component: stepper +description: Steppers guide users through multi-step processes by breaking complex tasks into manageable, sequential steps with clear progress indication. +--- + +import { CustomizedStepper, useStepper, Box, Typography, Button } from "@sistent/sistent"; +import StepperDemo from "./StepperDemo"; + +The Stepper component uses the `useStepper` hook for state management and the `CustomizedStepper` component for rendering. + + +

Stepper with Navigation

+ + +Enhanced stepper with navigation controls for user interaction. + +
+
+ + + +
+ User Info Content; +const StepTwo = () => Settings Content; +const StepThree = () => Complete Content; + +const MyStepper = () => { + const { + activeStep, + handleNext, + goBack, + stepLabels, + icons, + activeStepComponent: ActiveStepComponent + } = useStepper({ steps: [ + { label: 'User Info', component: StepOne, icon: PersonIcon }, + { label: 'Settings', component: StepTwo, icon: SettingsIcon }, + { label: 'Complete', component: StepThree, icon: CheckCircleIcon } + ] }); + + return ( +
+ + + + + + + + +
+ ); +}`} /> +
diff --git a/src/collections/sistent/components/stepper/guidance.mdx b/src/collections/sistent/components/stepper/guidance.mdx new file mode 100644 index 0000000000000..8f39b75288625 --- /dev/null +++ b/src/collections/sistent/components/stepper/guidance.mdx @@ -0,0 +1,61 @@ +--- +title: Stepper Guidance +component: stepper +description: Steppers guide users through multi-step processes by breaking complex tasks into manageable, sequential steps with clear progress indication. +--- + +import { CustomizedStepper, useStepper, Box, Typography } from "@sistent/sistent"; +import StepperDemo from "./StepperDemo"; + +This guide provides comprehensive information on when and how to use steppers effectively in your applications. + + +

Basic Stepper Example

+ + +Simple 3-step workflow perfect for getting started with steppers. Ideal for linear processes. + +
+
+ + + +
+
+ + +

How to Use

+ + +Step-by-step guide to implement steppers in application. + +
+
+ + + +
+
+ + +

Best Practices

+ + +

Step Design

+- Keep step labels short and descriptive (1-3 words) +- Use meaningful icons that relate to step content +- Limit to 3-7 steps maximum for better usability +- Group related tasks into single steps + +

Navigation

+- Always provide a "Back" button (except on first step) +- Disable "Next" until current step is valid +- Use clear action labels: "Continue", "Next", "Finish" +- Show progress indicator (current step / total steps) + +

User Experience

+- Validate input before allowing progression +- Save progress automatically when possible +- Provide clear error messages with solutions +- Allow users to edit previous steps +- Show completion status for each step diff --git a/src/collections/sistent/components/stepper/index.mdx b/src/collections/sistent/components/stepper/index.mdx index c155182408807..2d239fc776595 100644 --- a/src/collections/sistent/components/stepper/index.mdx +++ b/src/collections/sistent/components/stepper/index.mdx @@ -1,11 +1,44 @@ --- name: "Stepper" -title: "Stepper" -description: "Stepper provides a way to display progress through a sequence of logical steps." -component: "stepper" +title: Stepper published: true -pages: - - overview - - guidance - - code +component: stepper +description: Steppers guide users through multi-step processes by breaking complex tasks into manageable, sequential steps with clear progress indication. --- + +import { CustomizedStepper, useStepper, Box, Typography } from "@sistent/sistent"; +import StepperDemo from "./StepperDemo"; + +Steppers are essential for breaking down complex workflows into digestible pieces. They provide clear visual feedback about progress and help users understand what's required at each stage of a process. + + +

Interactive Demo

+ + +Experience how the stepper component works with this interactive example: + +
+
+ + + +
+
+ + +

Key Features

+ + +The Sistent Stepper component provides several powerful features: + +

Linear Progress

+Users complete steps in sequence, ensuring all required information is collected before proceeding to the next step. + +

Visual Progress Indication

+Clear visual feedback shows completed steps, current step, and remaining steps, helping users understand their progress. + +

Customizable Icons

+Each step can have a custom icon that represents its content or purpose, making the interface more intuitive and visually appealing. + +

Responsive Design

+The stepper adapts to different screen sizes, maintaining usability across desktop and mobile devices. diff --git a/src/collections/sistent/components/switch/SwitchDemo.js b/src/collections/sistent/components/switch/SwitchDemo.js new file mode 100644 index 0000000000000..b6b12aba6fc17 --- /dev/null +++ b/src/collections/sistent/components/switch/SwitchDemo.js @@ -0,0 +1,52 @@ +import React, { useState } from "react"; +import { Switch, FormControlLabel, Box } from "@sistent/sistent"; + +const SwitchDemo = ({ type }) => { + const [checked, setChecked] = useState(true); + const handleChange = (event) => { + setChecked(event.target.checked); + }; + + if (type === "basic") { + return ; + } + + if (type === "disabled") { + return ( + + + + + ); + } + + if (type === "labeled") { + return ( + + } + label="Enable Notifications" + /> + ); + } + + if (type === "small") { + return ( + + ); + } + + return null; +}; + +export default SwitchDemo; diff --git a/src/collections/sistent/components/switch/code.mdx b/src/collections/sistent/components/switch/code.mdx new file mode 100644 index 0000000000000..b851bdcec59c3 --- /dev/null +++ b/src/collections/sistent/components/switch/code.mdx @@ -0,0 +1,84 @@ +--- +title: Switch Code +component: switch +description: A switch is an toggle component which allows users to toggle a setting on or off and is typically used for system preferences or real-time configuration options. +--- + +import { Switch, FormControlLabel } from "@sistent/sistent"; +import SwitchDemo from "./SwitchDemo"; + +The Switch component allows users to toggle a setting between two states—on or off. + + +

Basic Switch

+ + +This is the default switch style used to represent changes between two states. + +
+
+ + + +
+ `} /> +
+ + +

Disabled Switch

+ + +Disabled switches show the state but are not interactive. + +
+
+ + + +
+ `} /> +
+ + +

Labeled Switch

+ + +Labels describe the action being toggled and improve accessibility. + +
+
+ + + +
+ + } + label="Enable Notifications" +/>`} /> +
+ + +

Small Switch

+ + +Use the `size="small"` prop for a more compact version. + +
+
+ + + +
+ `} /> +
diff --git a/src/collections/sistent/components/switch/guidance.mdx b/src/collections/sistent/components/switch/guidance.mdx new file mode 100644 index 0000000000000..8433e04f973d8 --- /dev/null +++ b/src/collections/sistent/components/switch/guidance.mdx @@ -0,0 +1,67 @@ +--- +title: Switch Guidance +component: switch +description: A switch is an toggle component which allows users to toggle a setting on or off and is typically used for system preferences or real-time configuration options. +--- + +import { Switch, FormControlLabel } from "@sistent/sistent"; +import SwitchDemo from "./SwitchDemo"; + +The Switch is a toggle component used to instantly turn features on or off. Its binary nature makes it ideal for preferences and settings panels where real-time toggling is expected. + + +

Function

+ + +

State Representation

+A Switch reflects its state visually, using a track and thumb indicator. When toggled, the thumb slides across the track to communicate the new value. This feedback is direct and immediate. + +
+
+ + + +
+
+ +

State Variants

+A Switch can be active, inactive, or disabled. Use the disabled state to communicate unavailable features or settings that require prerequisites. + +
+
+ + + +
+
+ + +

Labeling

+ + +Everyone Switch should be paired with a visible label. Use `FormControlLabel` to visually bind labels to toggles for clarity and context. + +
+
+ + + +
+
+ +

Label Placement

+Labels can be placed beside the Switch horizontally. For forms or settings pages, maintaining vertical spacing with consistent margins is recommended to improve readability and alignment. + + +

Sizing

+ + +The default Switch size is medium, which fits most use cases. Use `size="small"` when you have limited space or need to place toggles inside compact UI elements like tables, cards, or toolbars. + +
+
+ + + +
+
diff --git a/src/collections/sistent/components/switch/index.mdx b/src/collections/sistent/components/switch/index.mdx index 8b99fb3abbad5..615e9661a5ed7 100644 --- a/src/collections/sistent/components/switch/index.mdx +++ b/src/collections/sistent/components/switch/index.mdx @@ -1,11 +1,54 @@ --- name: "Switch" -title: "Switch" -description: "The Switch component allows users to toggle the state of a single setting on or off." -component: "switch" +title: Switch published: true -pages: - - overview - - guidance - - code +component: switch +description: A switch is an toggle component which allows users to toggle a setting on or off and is typically used for system preferences or real-time configuration options. --- + +import { Switch, FormControlLabel } from "@sistent/sistent"; +import SwitchDemo from "./SwitchDemo"; + +Switches are ideal when a setting is either enabled or disabled, and the user should be able to change it instantly without additional confirmation. They are used to toggle between two states. + + +

States

+ + +The Switch supports different states including **active**, **inactive**, and **disabled**. Visual feedback is immediate, allowing users to quickly understand the current status of a toggle. + +
+
+ + + +
+
+ + +

Labeling

+ + +Labels should be concise and descriptive to provide clarity about what each switch does. + +
+
+ + + +
+
+ + +

Sizing

+ + +Switches come in two sizes: **medium** and **small**. The small size is particularly useful for dense layouts and compact UI patterns. + +
+
+ + + +
+
diff --git a/src/collections/sistent/components/tabs/TabsDemo.js b/src/collections/sistent/components/tabs/TabsDemo.js new file mode 100644 index 0000000000000..eedd70c6675b4 --- /dev/null +++ b/src/collections/sistent/components/tabs/TabsDemo.js @@ -0,0 +1,241 @@ +import React, { useState } from "react"; +import { Tabs, Tab, Box, Typography, Button } from "@sistent/sistent"; +import HomeIcon from "@mui/icons-material/Home"; +import SearchIcon from "@mui/icons-material/Search"; +import FavoriteIcon from "@mui/icons-material/Favorite"; +import PersonIcon from "@mui/icons-material/Person"; + +function TabPanel({ children, value, index, ...other }) { + return ( + + ); +} + +const TabsDemo = ({ type }) => { + const [value, setValue] = useState(0); + + const handleChange = (event, newValue) => { + setValue(newValue); + }; + + if (type === "basic") { + return ( + + + + + + + + Dashboard Content + + + Analytics Content + + + Settings Content + + + ); + } + + if (type === "scrollable") { + return ( + + + + + + + + + + + ); + } + + if (type === "fullWidth") { + return ( + + + + + + + + ); + } + + if (type === "vertical") { + return ( + + + + + + + + + General Settings + + + Privacy Settings + + + Security Settings + + + Notification Settings + + + ); + } + + if (type === "icon") { + return ( + + + } label="Home" /> + } label="Search" /> + } label="Favorites" /> + } label="Profile" /> + + + Home Content + + + Search Content + + + Favorites Content + + + Profile Content + + + ); + } + + if (type === "disabled") { + return ( + + + + + + + ); + } + + if (type === "colored") { + return ( + + + + + + + + ); + } + + if (type === "controlled") { + const handleNext = () => { + setValue((prev) => (prev + 1) % 3); + }; + + return ( + + + + + + + + + + + Step 1 Content + + + Step 2 Content + + + Step 3 Content + + + ); + } + + if (type === "wrapped") { + return ( + + + + + + + + ); + } + + return null; +}; + +export default TabsDemo; diff --git a/src/collections/sistent/components/tabs/code.mdx b/src/collections/sistent/components/tabs/code.mdx new file mode 100644 index 0000000000000..dd995b5081a44 --- /dev/null +++ b/src/collections/sistent/components/tabs/code.mdx @@ -0,0 +1,267 @@ +--- +title: Tabs Code +component: tabs +description: Tabs organize content across different screens, data sets, and other interactions. They allow users to navigate between different views within the same context, making it easy to explore and switch between related content sections. +--- + +import { Tabs, Tab, Box, Typography, Button } from "@sistent/sistent"; +import TabsDemo from "./TabsDemo"; + +Here are code examples for all different variations and props of the Tabs component. Each example shows the implementation with a live preview and copyable code. + + +

Basic Tabs

+ + +Standard horizontal tabs with controlled state and content panels. + +
+
+ + + +
+ { + setValue(newValue); + }; + + return ( + + + + + + + + Dashboard Content + + + Analytics Content + + + Settings Content + + + ); +}`} /> +
+ + +

Scrollable Tabs

+ + +Tabs that can scroll horizontally when content overflows the container width. + +
+
+ + + +
+ setValue(newValue)} + variant="scrollable" + scrollButtons="auto" +> + + + + + + +`} /> +
+ + +

Full Width Tabs

+ + +Tabs that expand to fill the entire width of their container. + +
+
+ + + +
+ setValue(newValue)} + variant="fullWidth" +> + + + +`} /> +
+ + +

Vertical Tabs

+ + +Tabs arranged vertically, perfect for sidebar navigation. + +
+
+ + + +
+ setValue(newValue)} + sx={{ borderRight: 1, borderColor: 'divider' }} +> + + + + +`} /> +
+ + +

Icon Tabs

+ + +Tabs enhanced with icons for better visual context and usability. + +
+
+ + + +
+ setValue(newValue)}> + } label="Home" /> + } label="Search" /> + } label="Favorites" /> + } label="Profile" /> +`} /> +
+ + +

Disabled Tabs

+ + +Individual tabs can be disabled to indicate unavailable functionality. + +
+
+ + + +
+ setValue(newValue)}> + + + + +`} /> +
+ + +

Colored Tabs

+ + +Customize the indicator and text colors to match your design system. + +
+
+ + + +
+ setValue(newValue)} + indicatorColor="secondary" + textColor="secondary" + sx={{ + '& .MuiTab-root': { + color: '#1976d2', + }, + '& .Mui-selected': { + color: '#d81b60', + }, + '& .MuiTabs-indicator': { + backgroundColor: '#d81b60', + } + }} +> + + + +`} /> +
+ + +

Controlled Tabs

+ + +Programmatically control which tab is active using external buttons or logic. + +
+
+ + + +
+ { + setValue((prev) => (prev + 1) % 3); + }; + + return ( + + setValue(newValue)}> + + + + + + + + + ); +}`} /> +
+ + +

Wrapped Labels Tabs

+ + +Tabs with longer labels that can wrap to multiple lines when needed. + +
+
+ + + +
+ setValue(newValue)} + sx={{ + '& .MuiTab-root': { + minHeight: 72, + alignItems: 'center', + whiteSpace: 'normal', + textAlign: 'center' + } + }} +> + + + +`} /> +
diff --git a/src/collections/sistent/components/tabs/guidance.mdx b/src/collections/sistent/components/tabs/guidance.mdx new file mode 100644 index 0000000000000..ac3bd077e16c3 --- /dev/null +++ b/src/collections/sistent/components/tabs/guidance.mdx @@ -0,0 +1,169 @@ +--- +title: Tabs Guidance +component: tabs +description: Tabs organize content across different screens, data sets, and other interactions. They allow users to navigate between different views within the same context, making it easy to explore and switch between related content sections. +--- + +import { Tabs, Tab, Box } from "@sistent/sistent"; +import TabsDemo from "./TabsDemo"; + +This guide shows you how to use different variations of the Tabs component effectively in your applications. Each variation serves specific use cases and design requirements. + + +

Standard Tabs

+ + +The default tab layout with horizontal arrangement. Best for general navigation between related content sections when you have 3-7 tabs that fit comfortably in the available width. + +
+
+ + + +
+
+ + +

Scrollable Tabs

+ + +When you have many tabs that don't fit in the available width, scrollable tabs provide navigation arrows. This prevents text truncation and maintains readability. Best for dashboards with multiple sections or detailed navigation. + +
+
+ + + +
+
+ + +

Full Width Tabs

+ + +Tabs expand to fill the entire width of their container, distributing space evenly. Perfect for layouts where you want tabs to span the full width, typically with 2-4 tabs for optimal appearance. + +
+
+ + + +
+
+ + +

Vertical Tabs

+ + +Vertical orientation is ideal for sidebar navigation or when horizontal space is limited. Common in admin panels, settings pages, and detailed configuration interfaces where you need more vertical space for content. + +
+
+ + + +
+
+ + +

Icon Tabs

+ + +Enhance usability with icons that provide visual context. Icons can be used alone for compact layouts or combined with labels for better accessibility. Perfect for mobile interfaces or when space is at a premium. + +
+
+ + + +
+
+ + +

Disabled Tabs

+ + +Some tabs can be disabled to indicate unavailable functionality or content that requires certain conditions to be met. Useful for progressive disclosure or when features depend on user permissions or subscription levels. + +
+
+ + + +
+
+ + +

Colored Tabs

+ + +Customize the indicator and text colors to match your design system. Use different color combinations to create visual hierarchy or match your brand colors. + +
+
+ + + +
+
+ + +

Controlled Tabs

+ + +Programmatically control which tab is active using external buttons or logic. Useful for wizards, multi-step forms, or when you need to control navigation flow based on user actions or validation. + +
+
+ + + +
+
+ + +

Wrapped Labels Tabs

+ + +Tabs with longer labels that can wrap to multiple lines when needed. Useful when you have descriptive tab names that don't fit in a single line, while maintaining readability and accessibility. + +
+
+ + + +
+
+ + +

Best Practices

+ + +

When to Use Each Variation

+- **Standard Tabs:** Use for 3-7 tabs in desktop layouts with sufficient horizontal space +- **Scrollable Tabs:** Use when you have 5+ tabs or limited horizontal space +- **Full Width Tabs:** Use for 2-4 important tabs in wide containers +- **Vertical Tabs:** Use for sidebar navigation, admin panels, or settings pages +- **Icon Tabs:** Use for mobile interfaces or when space is limited +- **Disabled Tabs:** Use to show unavailable features or progressive disclosure +- **Colored Tabs:** Use to match brand colors or create visual hierarchy +- **Controlled Tabs:** Use for wizards, multi-step forms, or programmatic navigation +- **Wrapped Labels Tabs:** Use when tab labels are longer and need multiple lines + +

Content Organization

+- Keep tab labels concise and descriptive (1-2 words when possible) +- Use consistent naming conventions across tabs +- Organize tabs in logical order of importance or user workflow +- Group related functionality within the same tab + +

Accessibility Guidelines

+- Ensure sufficient color contrast between active and inactive tabs +- Use descriptive labels that work well with screen readers +- Support keyboard navigation with arrow keys and tab key +- Provide clear focus indicators for keyboard users + +

Design Considerations

+- Maintain visual hierarchy with clear active/inactive states +- Use consistent spacing and alignment across all tabs +- Consider mobile responsiveness when choosing tab variants +- Test with real content to ensure tabs work with varying label lengths diff --git a/src/collections/sistent/components/tabs/index.mdx b/src/collections/sistent/components/tabs/index.mdx index ef84b3240f9b6..b509fbf7e3ba7 100644 --- a/src/collections/sistent/components/tabs/index.mdx +++ b/src/collections/sistent/components/tabs/index.mdx @@ -1,11 +1,58 @@ --- name: "Tabs" -title: "Tabs" -description: "Tabs organize and allow navigation between groups of content that are related and at the same level of hierarchy." -component: "tabs" +title: Tabs published: true -pages: - - overview - - guidance - - code +component: tabs +description: Tabs organize content across different screens, data sets, and other interactions. They allow users to navigate between different views within the same context, making it easy to explore and switch between related content sections. --- + +import { Tabs, Tab, Box, Typography } from "@sistent/sistent"; +import TabsDemo from "./TabsDemo"; + +The `Tabs` component provides an intuitive way to organize and navigate between related content sections. It supports various configurations and is essential for creating organized user interfaces. + + +

Simple Example

+ + +Here's a basic example showing how tabs work with content panels: + +
+
+ + + +
+
+ + +

Variations

+ + +You can customize the Tabs as per your requirements by passing various props to the component. + +

By Variant

+- **Standard:** Default horizontal tabs with fixed positioning +- **Scrollable:** Tabs that can scroll horizontally when overflowing +- **Full Width:** Tabs that expand to fill the entire container width + +

By Orientation

+- **Horizontal:** Standard left-to-right tab layout +- **Vertical:** Top-to-bottom tab layout, perfect for sidebars + +

By Content

+- **Text Only:** Tabs with only text labels +- **Icon Only:** Tabs with only icons +- **Icon + Text:** Tabs with both icons and text labels +- **With Badges:** Tabs that can display notification badges + +

By State

+- **Enabled:** Interactive tabs that users can click +- **Disabled:** Non-interactive tabs that are grayed out +- **Active:** The currently selected tab +- **Inactive:** Non-selected tabs available for interaction + +

By Customization

+- **Colored Tabs:** Custom indicator and text colors to match design system +- **Controlled Tabs:** Programmatically controlled tab selection +- **Wrapped Labels:** Tabs with longer labels that can wrap to multiple lines diff --git a/src/collections/sistent/components/text-field/TextFieldDemo.js b/src/collections/sistent/components/text-field/TextFieldDemo.js new file mode 100644 index 0000000000000..6c47795d47db1 --- /dev/null +++ b/src/collections/sistent/components/text-field/TextFieldDemo.js @@ -0,0 +1,447 @@ +import React from "react"; +import { TextField, Box } from "@sistent/sistent"; + +const TextFieldDemo = ({ type }) => { + if (type === "form-props") { + return ( + +
+ + + + + + +
+
+ + + + + + +
+
+ + + + + + +
+ + ); + } + + if (type === "validation") { + return ( + +
+ + +
+
+ + +
+
+ + +
+ + ); + } + + if (type === "multiline") { + return ( + +
+ + + +
+
+ + + +
+
+ + + +
+ + ); + } + + if (type === "sizes") { + return ( + +
+ + +
+
+ + +
+
+ + +
+ + ); + } + + if (type === "fullWidth") { + return ( + + + + ); + } + + // Basic variants for guidance + if (type === "outlined") { + return ( + + + + ); + } + + if (type === "filled") { + return ( + + + + ); + } + + if (type === "standard") { + return ( + + + + ); + } + + if (type === "type-prop") { + return ( + +
+ + + +
+ + ); + } + + if (type === "helper-text") { + return ( + +
+ +
+ + ); + } + + if (type === "error-prop") { + return ( + +
+ +
+ + ); + } + + return null; +}; + +export default TextFieldDemo; diff --git a/src/collections/sistent/components/text-field/code.mdx b/src/collections/sistent/components/text-field/code.mdx new file mode 100644 index 0000000000000..6ea70b1836db6 --- /dev/null +++ b/src/collections/sistent/components/text-field/code.mdx @@ -0,0 +1,386 @@ +--- +title: TextField Code +component: text-field +description: The TextField component is a versatile input field used to capture user input in forms and user interfaces. It can handle a variety of input types, such as text, numbers, emails, and passwords, and offers built-in styling and validation features. +--- + +import { TextField, Box } from "@sistent/sistent"; +import TextFieldDemo from "./TextFieldDemo"; + +The TextField component is a versatile input field used to capture user input in forms and user interfaces. It can handle a variety of input types, such as text, numbers, emails, and passwords, and offers built-in styling and validation features. + +A TextField allow user to enter and edit any text. It mostly present in Forms or dialogue box in UI. TextField are crucial and integral elements in an interface. It allows to get data from enetered user. + + +

Form Props

+ + +Standard form attributes are supported, for example required, disabled, type, etc. HelperText attributes is used to give context about a field's input, such as how the input will be used. + +
+
+ + + +
+ +
+ + + + + + +
+
+ + + + + + +
+
+ + + + + + +
+`} /> +
+ + +

Validation

+ + +The error property toggles the error state. The helperText prop can then be used to provide feedback to the user about the error. As shown below it can be used with variant such as outlined (default), filled, and standard. + +
+
+ + + +
+ +
+ + +
+
+ + +
+
+ + +
+`} /> +
+ + +

Multiline

+ + +The multiline prop transforms the text field into a TextareaAutosize element. Unless the rows prop is set, the height of the text field dynamically matches its content (using TextareaAutosize). You can use the minRows and maxRows props to bound it. + +
+
+ + + +
+ +
+ + + +
+
+ + + +
+
+ + + +
+`} /> +
+ + +

Sizes

+ + +TextField can have small or normal field sizes. According the requirement it can be adjusted. + +
+
+ + + +
+ +
+ + +
+
+ + +
+
+ + +
+`} /> +
+ + +

Full Width

+ + +FullWidth attribute can be used to make the input take up the full width of its container. + +
+
+ + + +
+ + +`} /> +
diff --git a/src/collections/sistent/components/text-field/guidance.mdx b/src/collections/sistent/components/text-field/guidance.mdx new file mode 100644 index 0000000000000..19de2708f11a2 --- /dev/null +++ b/src/collections/sistent/components/text-field/guidance.mdx @@ -0,0 +1,93 @@ +--- +title: TextField Guidance +component: text-field +description: The TextField component is a versatile input field used to capture user input in forms and user interfaces. It can handle a variety of input types, such as text, numbers, emails, and passwords, and offers built-in styling and validation features. +--- + +import { TextField, Box } from "@sistent/sistent"; +import TextFieldDemo from "./TextFieldDemo"; + +The TextField component is a versatile input field used to capture user input in forms and user interfaces. It can handle a variety of input types, such as text, numbers, emails, and passwords, and offers built-in styling and validation features. + +For proper application, these TextField can be used for different purposes. It can be effectively used in any project to increase User Interaction. Lets see how can we use TextField effectively in our project. + + +

Basic TextField

+ + +The TextField wrapper component is a complete form control including a label, variant, helper text etc. TextField comes with three variants: outlined (default), filled, and standard. + +

Outlined (default)

+ +Outlined TextField are TextField that do not have a fill, but have a border or stroke to define its bounding box as well as a text label to convey a thought for users to take action upon. Colors can also be used to style these buttons in order to fit into the theme align with brand guidelines. + +
+
+ + + +
+
+ +

Filled

+ +Filled TextField are TextField that consist a background color fill and a text in it. Depending on the theme or intended action, the color fill can range from a primary brand color to any other applicable color in a brand’s color palette. + +
+
+ + + +
+
+ +

Standard

+ +Standard TextField are TextField that do not have background color fill and a text in it. Colors can also be used to style these buttons in order to fit into the theme align with brand guidelines. + +
+
+ + + +
+
+ + +

When to use different properties?

+ + +You might come across in a situation you needed some helper text, field with number, disabled field etc. Let's see different properties availble for TextField. + +

Type prop

+Type prop can have a value such as password, number or text. + +
+
+ + + +
+
+ +

Helper Text

+Helper text also very effective for your form or for better understanding. + +
+
+ + + +
+
+ +

Error

+Error handling is very important for UI. User might come in sitatution where they enter invalid value or forget to enter any data in TextField. Here come error prop helps to indicate partucular field are required or user have entered invalid value. + +
+
+ + + +
+
diff --git a/src/collections/sistent/components/text-field/index.mdx b/src/collections/sistent/components/text-field/index.mdx index e81d4d2f0aadc..af37d2e899c71 100644 --- a/src/collections/sistent/components/text-field/index.mdx +++ b/src/collections/sistent/components/text-field/index.mdx @@ -1,11 +1,82 @@ --- -name: "Text Field" -title: "Text Field" -description: "The TextField component is a versatile input field used to capture user input in forms and user interfaces." -component: "text-field" +name: "TextField" +title: TextField published: true -pages: - - overview - - guidance - - code +component: text-field +description: The TextField component is a versatile input field used to capture user input in forms and user interfaces. It can handle a variety of input types, such as text, numbers, emails, and passwords, and offers built-in styling and validation features. --- + +import { TextField, Box } from "@sistent/sistent"; +import TextFieldDemo from "./TextFieldDemo"; + +A Text fileds allow user to enter and edit any text. It mostly present in Forms or dialogue box in UI. TextField are crucial and integral elements in an interface. It allows to get data from enetered user. + + +

Form Props

+ + +Standard form attributes are supported, for example required, disabled, type, etc. HelperText attributes is used to give context about a field's input, such as how the input will be used. + +
+
+ + + +
+
+ + +

Validation

+ + +The error property toggles the error state. The helperText prop can then be used to provide feedback to the user about the error. As shown below it can be used with variant such as outlined (default), filled, and standard. + +
+
+ + + +
+
+ + +

Multiline

+ + +The multiline prop transforms the text field into a TextareaAutosize element. Unless the rows prop is set, the height of the text field dynamically matches its content (using TextareaAutosize). You can use the minRows and maxRows props to bound it. + +
+
+ + + +
+
+ + +

Sizes

+ + +TextField can have small or normal field sizes. According the requirement it can be adjusted. + +
+
+ + + +
+
+ + +

Full Width

+ + +FullWidth attribute can be used to make the input take up the full width of its container. + +
+
+ + + +
+
diff --git a/src/collections/sistent/components/text-input/TextInputDemo.js b/src/collections/sistent/components/text-input/TextInputDemo.js new file mode 100644 index 0000000000000..89d5d1c83c5d0 --- /dev/null +++ b/src/collections/sistent/components/text-input/TextInputDemo.js @@ -0,0 +1,87 @@ +import React from "react"; +import { Input } from "@sistent/sistent"; + +const TextInputDemo = ({ type }) => { + if (type === "basic") { + return ; + } + + if (type === "labeled") { + return ( + + ); + } + + if (type === "multiline") { + return ( + + ); + } + + if (type === "colors") { + return ( +
+ + + +
+ ); + } + + if (type === "types") { + return ( +
+ + + +
+ ); + } + + if (type === "error") { + return ( + + ); + } + + if (type === "disabled") { + return ( + + ); + } + + return null; +}; + +export default TextInputDemo; diff --git a/src/collections/sistent/components/text-input/code.mdx b/src/collections/sistent/components/text-input/code.mdx new file mode 100644 index 0000000000000..a9830b83ecb13 --- /dev/null +++ b/src/collections/sistent/components/text-input/code.mdx @@ -0,0 +1,152 @@ +--- +title: Text Input Code +component: text-input +description: The Input component is a versatile form control that enables users to enter and edit text data. It supports various input types, validation states, and customization options to create accessible and user-friendly data collection experiences. +--- + +import { Input } from "@sistent/sistent"; +import TextInputDemo from "./TextInputDemo"; + +Input components provide users with the ability to enter text data in forms and interfaces. They support various input types, validation states, and customization options for creating effective data collection experiences. + +The `Input` component is essential for collecting user data in forms. It provides immediate feedback during data entry, supports various input types, and maintains consistency with your application's design system. + + +

Basic Text Input

+ + +A simple input field for collecting single-line text data. This is the most common form of text input used across applications. + +
+
+ + + +
+ `} /> +
+ + +

Labeled Input

+ + +Inputs with labels provide better accessibility and user guidance. Labels clearly identify the purpose of each input field and support screen readers. + +
+
+ + + +
+ `} /> +
+ + +

Multiline Text Input

+ + +For longer text content that may span multiple lines. The multiline input automatically expands to accommodate content and provides users with adequate space. + +
+
+ + + +
+ `} /> +
+ + +

Color Options

+ + +Input components support various color themes to match your application's design system. Colors can convey different meanings or states within your interface. + +
+
+ + + +
+ + +`} /> +
+ + +

Different Input Types

+ + +Various input types provide specialized behavior and validation for different data formats. Choose the appropriate type to enhance user experience and data quality. + +
+
+ + + +
+ + +`} /> +
+ + +

Error State

+ + +Error states provide visual feedback when validation fails. Combined with helper text, they guide users toward resolving input issues effectively. + +
+
+ + + +
+ `} /> +
+ + +

Disabled State

+ + +Disabled inputs are non-interactive and typically used for read-only data or when certain conditions haven't been met to enable the input. + +
+
+ + + +
+ `} /> +
diff --git a/src/collections/sistent/components/text-input/guidance.mdx b/src/collections/sistent/components/text-input/guidance.mdx new file mode 100644 index 0000000000000..073c052887f2d --- /dev/null +++ b/src/collections/sistent/components/text-input/guidance.mdx @@ -0,0 +1,83 @@ +--- +title: Text Input Guidance +component: text-input +description: The Input component is a versatile form control that enables users to enter and edit text data. It supports various input types, validation states, and customization options to create accessible and user-friendly data collection experiences. +--- + +import { Input } from "@sistent/sistent"; +import TextInputDemo from "./TextInputDemo"; + +The Input component is a versatile form control that enables users to enter and edit text data. It supports various input types, validation states, and customization options to create accessible and user-friendly data collection experiences. + +Proper usage of the Input component can enhance user experience by providing clear, accessible, and visually consistent form controls. Below are guidelines and interactive examples to help you implement inputs effectively. + + +

Usage

+ + +To use the Input component, include it in your form with the desired props. The component supports various input types and styling options: + +* `type` for input behavior (text, email, password, etc.) +* `color` for theme colors +* `multiline` for text areas +* `disabled`, `error`, `required` for different states + + +

Colors

+ + +Customize the color theme of the input component. Colors can convey different meanings or states within your interface: + +
+
+ + + +
+
+ + +

Input Types

+ + +Different input types provide specialized behavior and validation for different data formats. The placeholder text automatically updates to match the selected type: + +
+
+ + + +
+
+ + +

Input States

+ + +Input components support various states to provide feedback and control user interaction. These examples demonstrate different state combinations: + +
+
+ + +
+ + +
+
+ + +

Best Practices

+ + +

Accessibility

+ +Always provide clear labels for screen readers and ensure sufficient color contrast. Use helper text to provide additional context and validation feedback. + +

Validation

+ +Implement real-time validation when appropriate, but avoid being overly aggressive. Provide clear error messages that help users understand how to fix issues. + +

Placeholder Text

+ +Use placeholder text to show examples of expected input format, but don't rely on it as the primary way to communicate requirements. Always include proper labels. diff --git a/src/collections/sistent/components/text-input/index.mdx b/src/collections/sistent/components/text-input/index.mdx index ca16a88f4a925..541a6eb6d207e 100644 --- a/src/collections/sistent/components/text-input/index.mdx +++ b/src/collections/sistent/components/text-input/index.mdx @@ -1,11 +1,67 @@ --- name: "Text Input" -title: "Text Input" -description: "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." -component: "text-input" +title: Text Input published: true -pages: - - overview - - guidance - - code +component: text-input +description: The Input component is a versatile form control that enables users to enter and edit text data. It supports various input types, validation states, and customization options to create accessible and user-friendly data collection experiences. --- + +import { Input } from "@sistent/sistent"; +import TextInputDemo from "./TextInputDemo"; + +Input components are fundamental building blocks for forms and data collection interfaces. They provide immediate feedback to users and help maintain data quality through validation and formatting features. The component adapts to different content types while maintaining consistency with your design system. + + +

Usage

+ + +The component can be used in several main variants: + +* **Standard:** Single-line text input for basic data collection +* **Multiline:** Multi-line text area for longer content + + +

Basic Example

+ + +Below is a simple example of how to use the Input component. + +
+
+ + + +
+
+ + +

Key Features

+ + +You can customize the appearance and behavior of the Input component using various props to define how the component renders and interacts with users. + +

Input Types

+ +* **Text:** Standard text input for general text data +* **Email:** Email input with built-in validation +* **Password:** Password input with hidden text +* **Number:** Numeric input with increment/decrement controls +* **Tel:** Telephone number input +* **URL:** URL input with validation +* **Search:** Search input with optimized styling + +

Visual Features

+ +* **Standard:** Clean, minimalist input styling +* **Multiline:** Expandable text area for longer content + +

Component Props

+ +* **Color:** Primary, secondary, success, error, warning color themes +* **Label:** Descriptive labels for accessibility +* **Helper Text:** Additional guidance or validation messages +* **Placeholder:** Hint text showing expected input format +* **Disabled State:** Non-interactive state for read-only contexts +* **Required:** Indicates mandatory fields +* **Error State:** Visual feedback for validation errors +* **Start/End Adornments:** Icons or text before/after input content diff --git a/src/collections/sistent/components/toggle-button/ToggleButtonDemo.js b/src/collections/sistent/components/toggle-button/ToggleButtonDemo.js new file mode 100644 index 0000000000000..97ea62922d3e6 --- /dev/null +++ b/src/collections/sistent/components/toggle-button/ToggleButtonDemo.js @@ -0,0 +1,152 @@ +import React from "react"; +import { ToggleButton, ToggleButtonGroup, Box } from "@sistent/sistent"; + +const ToggleButtonDemo = ({ type }) => { + const [formats, setFormats] = React.useState(() => ["bold"]); + const [alignment, setAlignment] = React.useState("left"); + + const handleFormat = (event, newFormats) => { + setFormats(newFormats); + }; + + const handleAlignment = (event, newAlignment) => { + if (newAlignment !== null) { + setAlignment(newAlignment); + } + }; + + const formatButtons = [ + Bold, + Italic, + Underline, + ]; + + if (type === "basic") { + return ( + + {formatButtons} + + ); + } + + if (type === "exclusive") { + return ( + + Left + Center + Right + + ); + } + + if (type === "vertical") { + return ( + + {formatButtons} + + ); + } + + if (type === "sizes") { + return ( + *": { + m: 1, + }, + }} + > + + {formatButtons} + + + {formatButtons} + + + {formatButtons} + + + ); + } + + if (type === "disabled") { + return ( + + {formatButtons} + + ); + } + + if (type === "colors") { + return ( + *": { + m: 1, + }, + }} + > + + {formatButtons} + + + {formatButtons} + + + ); + } + + return null; +}; + +export default ToggleButtonDemo; diff --git a/src/collections/sistent/components/toggle-button/code.mdx b/src/collections/sistent/components/toggle-button/code.mdx new file mode 100644 index 0000000000000..3e750f3773c99 --- /dev/null +++ b/src/collections/sistent/components/toggle-button/code.mdx @@ -0,0 +1,112 @@ +--- +title: Toggle Button Code +component: toggle-button +description: 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. +--- + +import { ToggleButton, ToggleButtonGroup } from "@sistent/sistent"; +import ToggleButtonDemo from "./ToggleButtonDemo"; + +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. + + +

Exclusive Selection

+ + +
+
+ + + +
+ + Left + Center + Right +`} /> +
+ + +

Multiple Selection

+ + +
+
+ + + +
+ + Toggle Button 1 + Toggle Button 1 + Toggle Button 1 +`} /> +
+ + +

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 +`} /> +
diff --git a/src/collections/sistent/components/toggle-button/guidance.mdx b/src/collections/sistent/components/toggle-button/guidance.mdx new file mode 100644 index 0000000000000..08c9d4fa06f2b --- /dev/null +++ b/src/collections/sistent/components/toggle-button/guidance.mdx @@ -0,0 +1,76 @@ +--- +title: Toggle Button Guidance +component: toggle-button +description: 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. +--- + +import { ToggleButton, ToggleButtonGroup } from "@sistent/sistent"; +import ToggleButtonDemo from "./ToggleButtonDemo"; + +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. + + +

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

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

Sizes

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

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

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. + +
+
+ + + +
+
diff --git a/src/collections/sistent/components/toggle-button/index.mdx b/src/collections/sistent/components/toggle-button/index.mdx index cd9cc1471c747..a9f7b76893ea1 100644 --- a/src/collections/sistent/components/toggle-button/index.mdx +++ b/src/collections/sistent/components/toggle-button/index.mdx @@ -1,11 +1,94 @@ --- -name: "ToggleButton" -title: "ToggleButton" -description: "ToggleButton allows users to switch between two or more states, commonly used in forms or settings for quick toggles." -component: "toggle-button" +name: "Toggle Button" +title: Toggle Button published: true -pages: - - overview - - guidance - - code +component: toggle-button +description: 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. --- + +import { ToggleButton, ToggleButtonGroup } from "@sistent/sistent"; +import ToggleButtonDemo from "./ToggleButtonDemo"; + + +

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

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

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

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

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

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. + +
+
+ + + +
+
diff --git a/src/collections/sistent/components/toolbar/ToolbarDemo.js b/src/collections/sistent/components/toolbar/ToolbarDemo.js new file mode 100644 index 0000000000000..5351bc8df89d6 --- /dev/null +++ b/src/collections/sistent/components/toolbar/ToolbarDemo.js @@ -0,0 +1,281 @@ +import React, { useState } from "react"; +import { Toolbar, Button } from "@sistent/sistent"; +import AddIcon from "@mui/icons-material/Add"; +import DeleteIcon from "@mui/icons-material/Delete"; +import EditIcon from "@mui/icons-material/Edit"; +import SearchIcon from "@mui/icons-material/Search"; +import HomeIcon from "@mui/icons-material/Home"; +import ArrowBackIcon from "@mui/icons-material/ArrowBack"; +import ArrowForwardIcon from "@mui/icons-material/ArrowForward"; +import SettingsIcon from "@mui/icons-material/Settings"; +import MoreVertIcon from "@mui/icons-material/MoreVert"; +import FileDownloadIcon from "@mui/icons-material/FileDownload"; +import ShareIcon from "@mui/icons-material/Share"; +import RefreshIcon from "@mui/icons-material/Refresh"; + +const ToolbarDemo = ({ type }) => { + const [dropdownOpen, setDropdownOpen] = useState(false); + const [selectedOption, setSelectedOption] = useState("More"); + const [selectedIcon, setSelectedIcon] = useState(); + const [selectionType, setSelectionType] = useState("text"); + + const toggleDropdown = () => setDropdownOpen((prev) => !prev); + const handleOptionClick = (option, icon) => { + setSelectedOption(option); + setSelectedIcon(icon); + setDropdownOpen(false); + }; + + const getDropdownStyle = () => ({ + position: "absolute", + right: 0, + top: "100%", + backgroundColor: "white", + boxShadow: "0 2px 10px rgba(0,0,0,0.1)", + borderRadius: "4px", + overflow: "hidden", + zIndex: 1000, + border: "1px solid #eee", + }); + + const dropdownItem = { + padding: "8px 16px", + cursor: "pointer", + minWidth: "120px", + transition: "background-color 0.2s", + whiteSpace: "nowrap", + color: "black", + }; + + const options = [ + { name: "Delete", icon: }, + { name: "Download", icon: }, + { name: "Share", icon: } + ]; + + if (type === "basic") { + return ( + + + + + + ); + } + + if (type === "standard") { + return ( + + + + + + ); + } + + if (type === "navigation") { + return ( + + + + + + + ); + } + + if (type === "dropdown") { + return ( + + + +
+ + {dropdownOpen && ( +
+ {options.map( + (option, index) => ( +
handleOptionClick(option.name, option.icon)} + > + {React.cloneElement(option.icon, { fontSize: "small" })} + {option.name} +
+ ) + )} +
+ )} +
+ + ); + } + + if (type === "search") { + return ( + +
+ +
Search... +
+
+
+ +
+ + ); + } + + if (type === "fixed") { + return ( +
+ + + + + +
+
+

Sistent Toolbar: The Sistent toolbar provides users with quick access to essential navigation and settings, ensuring a seamless experience across the application.

+

With a fixed position, the toolbar remains visible as you scroll, making key actions always accessible.

+

Use the Home icon to return to the dashboard, the Search icon to find resources, and the Settings icon to customize your preferences.

+

Sistent is designed for clarity, accessibility, and ease of use, helping users stay productive and focused.

+
+
+
+ ); + } + + if (type === "contextual") { + return ( + +
+ + +
+ + {selectionType === "text" ? ( + <> + + + + + ) : ( + <> + + + + + )} + + ); + } + + if (type === "top") { + return ( +
+ + + +
+ +
+ +
+ Content Area +
+
+ ); + } + + if (type === "bottom") { + return ( +
+
+ Content Area +
+ + + + + + +
+ ); + } + + if (type === "dense") { + return ( + + + + + + ); + } + + if (type === "action") { + return ( + + + + +
+ +
+ + ); + } + + return null; +}; + +export default ToolbarDemo; diff --git a/src/collections/sistent/components/toolbar/code.mdx b/src/collections/sistent/components/toolbar/code.mdx new file mode 100644 index 0000000000000..38e3287d91b62 --- /dev/null +++ b/src/collections/sistent/components/toolbar/code.mdx @@ -0,0 +1,70 @@ +--- +title: Toolbar Code +component: toolbar +description: The Toolbar is a horizontal layout container used to organize and group actions or interactive elements. It helps streamline workflows and keeps related actions in one place, providing users with easy access to frequently used commands. +--- + +import { Toolbar, Button } from "@sistent/sistent"; +import ToolbarDemo from "./ToolbarDemo"; + +Toolbars provide quick access to commonly used actions grouped logically in a horizontal or vertical container. + +The following examples demonstrate how to implement various toolbar configurations in your application. + + +

Basic Toolbar

+ + +The basic toolbar contains a set of buttons that represent key actions. Each button can perform a specific task when clicked. + +
+
+ + + +
+ + + + +`} /> +
+ + +

Fixed Toolbar

+ + +Fixed toolbars remain visible when scrolling and provide persistent access to navigation. Use the `fixed` prop to create a toolbar that stays in place during scrolling. + +
+
+ + + +
+ + + + + +/* Further content goes here. */`} /> +
+ + +

Dense Toolbar

+ + +Dense toolbars are more compact, saving vertical space. Use the `variant="dense"` prop to create a more compact toolbar. + +
+
+ + + +
+ + + + +`} /> +
diff --git a/src/collections/sistent/components/toolbar/guidance.mdx b/src/collections/sistent/components/toolbar/guidance.mdx new file mode 100644 index 0000000000000..c3eafd6f21468 --- /dev/null +++ b/src/collections/sistent/components/toolbar/guidance.mdx @@ -0,0 +1,123 @@ +--- +title: Toolbar Guidance +component: toolbar +description: The Toolbar is a horizontal layout container used to organize and group actions or interactive elements. It helps streamline workflows and keeps related actions in one place, providing users with easy access to frequently used commands. +--- + +import { Toolbar, Button } from "@sistent/sistent"; +import ToolbarDemo from "./ToolbarDemo"; + +A toolbar is a container for a set of controls or actions related to the current context or page. It helps users quickly access common functions or navigate within an application. + +For effective implementation, toolbars should be used consistently throughout the interface to provide users with predictable access to important actions. + + +

Function

+ + +The function of toolbars determines how they should be used in different scenarios to provide users with quick access to actions and tools. + +

Navigation Toolbar

+ +Navigation toolbars provide controls for moving between pages or sections of an application. They typically include back, forward, and home buttons. + +
+
+ + + +
+
+ +

Action Toolbar

+ +Action toolbars contain buttons for performing operations on selected content or the current view. They often include functions like create, edit, delete, or share. + +
+
+ + + +
+
+ +

Search Toolbar

+ +Search toolbars provide interfaces for finding content within an application. They typically include search fields and filtering options. + +
+
+ + + +
+
+ + +

Types of Toolbars

+ + +

Fixed Toolbar

+ +Fixed toolbars remain visible at the top or side of the screen while scrolling, providing persistent access to common actions. + +
+
+ + + +
+
+ +

Contextual Toolbar

+ +Contextual toolbars appear based on user selection or context, showing actions specific to the current content or state. + +
+
+ + + +
+
+ + +

Positioning

+ + +The positioning of toolbars affects usability and accessibility. Different positions work better for different types of applications and user behaviors. + +

Top Toolbar

+ +Top toolbars are the most common placement and are easily discovered by users. They're ideal for primary navigation and actions. + +
+
+ + + +
+
+ +

Bottom Toolbar

+ +Bottom toolbars are more accessible for mobile users as they're easier to reach with thumbs. They're good for common actions in mobile interfaces. + +
+
+ + + +
+
+ + +

Best Practices

+ + +When implementing toolbars in your interface, consider these guidelines to ensure they're effective and user-friendly: + +* **Prioritize Actions:** Include only the most important and frequently used actions in your toolbar to avoid overwhelming users. +* **Group Related Actions:** Organize buttons logically, keeping related actions together to improve discoverability. +* **Use Icons With Labels:** When space permits, include both icons and text labels to improve clarity and accessibility. +* **Maintain Consistency:** Use consistent positioning and styling for toolbars across your application to build user familiarity. diff --git a/src/collections/sistent/components/toolbar/index.mdx b/src/collections/sistent/components/toolbar/index.mdx index 8cd477a233489..3a1d324fe9ef0 100644 --- a/src/collections/sistent/components/toolbar/index.mdx +++ b/src/collections/sistent/components/toolbar/index.mdx @@ -1,11 +1,79 @@ --- name: "Toolbar" -title: "Toolbar" -description: "The toolbar is a horizontal container for grouping interactive elements like buttons, filters, or navigation controls, typically placed at the top of a UI section." -component: "toolbar" +title: Toolbar published: true -pages: - - overview - - guidance - - code +component: toolbar +description: The Toolbar is a horizontal layout container used to organize and group actions or interactive elements. It helps streamline workflows and keeps related actions in one place, providing users with easy access to frequently used commands. --- + +import { Toolbar, Button } from "@sistent/sistent"; +import ToolbarDemo from "./ToolbarDemo"; + +Toolbars are essential UI components that provide convenient access to actions and tools. They can be placed at various locations within your interface and configured to suit different needs. + + +

Usage

+ + +Toolbars are commonly used in applications to provide quick access to frequently used functions. They can be customized with various controls including buttons, dropdowns, search fields, and more. + +

Standard Toolbar

+ +A standard toolbar with basic action buttons: + +
+
+ + + +
+
+ +

Navigation Toolbar

+ +A toolbar for navigation controls: + +
+
+ + + +
+
+ +

Toolbar with Dropdown

+ +A toolbar with actions and a dropdown menu: + +
+
+ + + +
+
+ +

Search Toolbar

+ +A toolbar with a search field and settings button: + +
+
+ + + +
+
+ + +

Customization

+ + +Toolbars can be customized in various ways to fit your application's needs: + +* **Fixed Position:** Add the `fixed` prop to create a toolbar that stays in place during scrolling. +* **Density:** Use `variant="dense"` for a more compact toolbar with less vertical padding. +* **Custom Content:** Combine buttons, text fields, dropdowns, and other controls to create custom toolbar layouts. +* **Styling:** Apply custom styles to match your application's design system. + +When designing toolbars, consider the user's workflow and prioritize the most frequently used actions to improve efficiency and usability. diff --git a/src/collections/sistent/components/tooltip/TooltipDemo.js b/src/collections/sistent/components/tooltip/TooltipDemo.js new file mode 100644 index 0000000000000..7e638feddaf09 --- /dev/null +++ b/src/collections/sistent/components/tooltip/TooltipDemo.js @@ -0,0 +1,295 @@ +import React from "react"; +import { CustomTooltip, Button, Box, Grid, Typography } from "@sistent/sistent"; + +const TooltipDemo = ({ type }) => { + if (type === "basic") { + return ( + + + + + + ); + } + + if (type === "disabled") { + return ( + + + + + + ); + } + + if (type === "offset") { + return ( + + + + + + ); + } + + if (type === "variable-width") { + return ( + *": { + m: 1, + }, + }} + > + + + + + + + + + + + + ); + } + + if (type === "follow-cursor") { + return ( + + + + + + ); + } + + if (type === "show-hide") { + return ( + + + + + + ); + } + + if (type === "styled") { + return ( + Custom Tooltip} + > + + + + + + + + + + + + + + + + + + + + + ); + } + + if (type === "positioned") { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); + } + + return null; +}; + +export default TooltipDemo; diff --git a/src/collections/sistent/components/tooltip/code.mdx b/src/collections/sistent/components/tooltip/code.mdx new file mode 100644 index 0000000000000..ce2700a49594e --- /dev/null +++ b/src/collections/sistent/components/tooltip/code.mdx @@ -0,0 +1,237 @@ +--- +title: Tooltip Code +component: tooltip +description: The Tooltip component displays informative text when users hover over, focus on, or tap an element. Tooltips are designed to enhance accessibility and user understanding of interface elements. +--- + +import TooltipDemo from "./TooltipDemo"; + +The Tooltip component displays informative text when users hover over, focus on, or tap an element. Tooltips are designed to enhance accessibility and user understanding of interface elements. + +The Tooltip component displays informative text when users hover over, focus on, or tap an element. Tooltips are designed to enhance accessibility and user understanding of interface elements. + + +

Basic Tooltip

+ + +
+
+ + + +
+ + +
+ + +

Positioned Example

+ + +You can specify the position of the Popper using the `placement` prop. Here's an example of a Tooltip positioned above its anchor: + +
+
+ + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +`} /> +
+ + +

Distance from anchor

+ + +To adjust the distance between the tooltip and its anchor, you can use the slotProps prop to modify the offset of the popper. + +
+
+ + + +
+ + + + +`} /> +
+ + +

Variable width

+ + +The variant prop in Tooltip allows you to control the tooltips size with predefined styles (standard or small). This makes it easier to adjust the tooltip to fit various UI requirements quickly and consistently. + +
+
+ + + +
+ + + + + + + + + +`} /> +
+ + +

Follow Cursor

+ + +Tooltips can be configured to follow the cursor, making it easier to read the content. + +
+
+ + + +
+ + + + +`} /> +
+ + +

Showing and Hiding

+ + +A delay in showing or hiding the tooltip can be added through the `enterDelay` and `leaveDelay` props. + +
+
+ + + +
+ + + + +`} /> +
diff --git a/src/collections/sistent/components/tooltip/guidance.mdx b/src/collections/sistent/components/tooltip/guidance.mdx new file mode 100644 index 0000000000000..5709331e82ad1 --- /dev/null +++ b/src/collections/sistent/components/tooltip/guidance.mdx @@ -0,0 +1,105 @@ +--- +title: Tooltip Guidance +component: tooltip +description: The Tooltip component displays informative text when users hover over, focus on, or tap an element. Tooltips are designed to enhance accessibility and user understanding of interface elements. +--- + +import TooltipDemo from "./TooltipDemo"; + +The Tooltip component displays informative text when users hover over, focus on, or tap an element. Tooltips are designed to enhance accessibility and user understanding of interface elements. + +The Tooltip component displays informative text when users hover over, focus on, or tap an element. Tooltips are designed to enhance accessibility and user understanding of interface elements. + + +

Positioning

+ + +The positioning of the Tooltip is critical for usability. Use the `placement` prop to control where the Tooltip appears relative to its anchor element. Options include: + +* top +* bottom +* left +* right +* top-start +* top-end +* bottom-start +* bottom-end +* left-start +* left-end +* right-start +* right-end + +Choosing the right position helps to prevent overlap with other interface elements and improves readability. + + +

Styling

+ + +The Tooltip component inherits styles from the Sistent theme. You can customize the appearance by applying styles to the content inside the Tooltip. For instance: + +
+
+ + + +
+
+ +

HTML Support

+ +The Tooltip component supports HTML content, allowing you to include rich text, links, and other elements inside the tooltip. By passing HTML content as the title prop, you can create more engaging and informative tooltips. + +
+
+ + + +
+
+ +

Markdown Support

+ +The Tooltip component supports Markdown content, allowing you to include rich text, links, and other elements inside the tooltip. By passing Markdown content as the title prop, you can create more engaging and informative tooltips. + +
+
+ + + +
+
+ +

Triggers

+ +The Tooltip component can be triggered by various user actions, including hover, focus, and click. By default, the Tooltip appears when the user hovers over the anchor element. You can customize the trigger behavior using the following props: + +* `disableHoverListener`: Disables the hover trigger. +* `disableFocusListener`: Disables the focus trigger. +* `disableTouchListener`: Disables the touch trigger. + +
+
+ + + +
+
+ + +

Accessibility

+ + +It’s important to ensure that the Tooltip component is accessible to all users. Here are some key considerations: + +* By default, tooltips are designed to label their child element rather than describe it. This differs from the `title` attribute, which can either label or describe the child element based on whether it already has an accessible label. +* Using `describeChild` : When you want the tooltip to act as an accessible description (adding additional context), you can enable the describeChild prop. Use describeChild only if the tooltip provides supplementary information and the child element already has an accessible label. +* Avoiding Accessibility Violations: Do not use describeChild if the tooltip is the only visible label for the child element, as this would prevent the child from having an accessible name. + + +

Performance Tips

+ + +When using the Tooltip component, consider the following to optimize performance: + +* Use the `placement` prop to control the position of the Tooltip and prevent overlap with other interface elements. +* Ensure that the Tooltip is keyboard navigable, allowing users to open/close it using keyboard shortcuts. diff --git a/src/collections/sistent/components/tooltip/index.mdx b/src/collections/sistent/components/tooltip/index.mdx index 47697fc3599e8..b26309f9239a9 100644 --- a/src/collections/sistent/components/tooltip/index.mdx +++ b/src/collections/sistent/components/tooltip/index.mdx @@ -1,11 +1,105 @@ --- name: "Tooltip" -title: "Tooltip" -description: "The Tooltip component is a small pop-up box that appears when a user hovers over an element." -component: "tooltip" +title: Tooltip published: true -pages: - - overview - - guidance - - code +component: tooltip +description: The Tooltip component displays informative text when users hover over, focus on, or tap an element. Tooltips are designed to enhance accessibility and user understanding of interface elements. --- + +import TooltipDemo from "./TooltipDemo"; + +The Tooltip component displays informative text when users hover over, focus on, or tap an element. Tooltips are designed to enhance accessibility and user understanding of interface elements. + + +

Basic Tooltip

+ + +A simple tooltip that displays helpful information when hovering over an icon button. + +
+
+ + + +
+
+ +

Custom Position

+ +Tooltips support different placements, allowing flexibility depending on your layout requirements. + +
+
+ + + +
+
+ +

Disabled Elements

+ +By default disabled elements like button do not trigger user interactions so a `Tooltip` will not activate on normal events like hover. To accommodate disabled elements, add a simple wrapper element, such as a `span`. + +
+
+ + + +
+
+ + +

Distance from anchor

+ + +To adjust the distance between the tooltip and its anchor, you can use the slotProps prop to modify the offset of the popper. + +
+
+ + + +
+
+ + +

Variable width

+ + +The variant prop in Tooltip allows you to control the tooltips size with predefined styles (standard or small). This makes it easier to adjust the tooltip to fit various UI requirements quickly and consistently. + +
+
+ + + +
+
+ + +

Follow Cursor

+ + +Tooltips can be configured to follow the cursor, making it easier to read the content. + +
+
+ + + +
+
+ + +

Showing and Hiding

+ + +The Tooltip is normally shown immediately when the user's mouse hovers over the element, and hides immediately when the user's mouse leaves. A delay in showing or hiding the tooltip can be added through the `enterDelay` and `leaveDelay` props. + +
+
+ + + +
+
diff --git a/src/components/CodeBlock/index.js b/src/components/CodeBlock/index.js index fee7b65f4a84b..0d257c05f1af9 100644 --- a/src/components/CodeBlock/index.js +++ b/src/components/CodeBlock/index.js @@ -41,35 +41,53 @@ const CopyCode = styled.button` } `; -const Code = ({ codeString, language = "jsx" }) => { +const Code = ({ codeString, code, language = "jsx", name }) => { + const finalCode = codeString || code || ""; const [copyText, setCopyText] = useState("Copy"); + const [showCode, setShowCode] = useState(false); + const handleClick = () => { - copyToClipboard(codeString); + copyToClipboard(finalCode); setCopyText("Copied!"); setTimeout(() => setCopyText("Copy"), 1000); }; + return ( - - {({ className, style, tokens, getLineProps, getTokenProps }) => ( - 
-          {copyText}
-          
-            {tokens.map((line, i) => (
-              

-                {i + 1}
-                {line.map((token, key) => (
-                  
+    

+      {/* Checkbox toggle styled in sistent.style.js */}
+       setShowCode(!showCode)}
+      />
+      
+      
+      {showCode && (
+        
+          {({ className, style, tokens, getLineProps, getTokenProps }) => (
+            
+              {copyText}
+              
+                {tokens.map((line, i) => (
+                  

+                    {i + 1}
+                    {line.map((token, key) => (
+                      
+                    ))}
+                  

                 ))}
-              

-            ))}
-          

-
+ + + )} + )} - + ); }; diff --git a/src/pages/projects/sistent/components/index.js b/src/pages/projects/sistent/components/index.js index 80c405437dbdf..6157bb389dd58 100644 --- a/src/pages/projects/sistent/components/index.js +++ b/src/pages/projects/sistent/components/index.js @@ -10,7 +10,10 @@ export const query = graphql` query SistentComponentsList { allMdx( filter: { - fields: { collection: { eq: "sistent" } } + fields: { + collection: { eq: "sistent" } + pageType: { eq: "overview" } + } frontmatter: { published: { eq: true } } } sort: { frontmatter: { name: ASC } } diff --git a/src/sections/Projects/Sistent/components/accordion/code.js b/src/sections/Projects/Sistent/components/accordion/code.js deleted file mode 100644 index 44f56b2c18f1e..0000000000000 --- a/src/sections/Projects/Sistent/components/accordion/code.js +++ /dev/null @@ -1,328 +0,0 @@ -import React, { useState } from "react"; -import { navigate } from "gatsby"; -import { useLocation } from "@reach/router"; -import { SistentThemeProvider, Accordion, AccordionSummary, AccordionDetails, Typography } from "@sistent/sistent"; -import TabButton from "../../../../../reusecore/Button"; -import { SistentLayout } from "../../sistent-layout"; -import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode"; -import { CodeBlock } from "../button/code-block"; -import ExpandMoreIcon from "@mui/icons-material/ExpandMore"; - -const codes = [ - ` - - } - aria-controls="panel1-content" - id="panel1-header" - > - Accordion 1 - - - - This is the content for the first accordion panel. - - - - - } - aria-controls="panel2-content" - id="panel2-header" - > - Accordion 2 - - - - This is the content for the second accordion panel. - - - -`, - `const [expanded, setExpanded] = useState(false); - -const handleChange = (panel) => (event, isExpanded) => { - setExpanded(isExpanded ? panel : false); -}; - - - - } - aria-controls="panel1bh-content" - id="panel1bh-header" - > - General settings - - - - This accordion is controlled. Only one panel can be open at a time. - - - - - } - aria-controls="panel2bh-content" - id="panel2bh-header" - > - Users - - - - Content for the second panel. - - - -`, - ` - - } - aria-controls="panel1-content" - id="panel1-header" - > - Expanded by Default - - - - This accordion panel is expanded by default using the - defaultExpanded prop. - - - -`, - ` - - } - aria-controls="panel1-content" - id="panel1-header" - > - Disabled Accordion - - - - This content cannot be accessed as the accordion is disabled. - - - -`, -]; - -const AccordionCode = () => { - const location = useLocation(); - const { isDark } = useStyledDarkMode(); - const [expanded, setExpanded] = useState(false); - - const handleChange = (panel) => (event, isExpanded) => { - setExpanded(isExpanded ? panel : false); - }; - - return ( - -
- -

Accordion

- -

- An accordion is a vertically stacked list of headers that can be clicked to reveal or hide associated content. It allows users to toggle between hiding and showing large amounts of content in a compact space. -

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

- The Accordion component provides a consistent way to create expandable and collapsible content sections throughout your application. -

- -

Basic Accordion

- -

- A simple accordion with multiple independent panels. Each panel can be expanded and collapsed without affecting others. -

-
-
- -
- - } - aria-controls="panel1-content" - id="panel1-header" - > - Accordion 1 - - - - This is the content for the first accordion panel. You can add any content here, including text, images, or other components. - - - - - } - aria-controls="panel2-content" - id="panel2-header" - > - Accordion 2 - - - - This is the content for the second accordion panel. Accordions can contain rich content and media. - - - -
- -
- -
- - -

Controlled Accordion

- -

- A controlled accordion where the expanded state is managed by React state. This allows only one panel to be expanded at a time, providing a more focused user experience. -

-
-
- -
- - } - aria-controls="panel1bh-content" - id="panel1bh-header" - > - - General settings - - - - - Controlled accordions manage their expanded state through React, allowing only one panel to be open at a time. This creates a cleaner, more focused user experience by preventing multiple sections from being visible simultaneously. - - - - - } - aria-controls="panel2bh-content" - id="panel2bh-header" - > - Users - - - - When expanding this panel, the previously opened panel automatically collapses. This behavior is ideal for settings pages, configuration panels, and any interface where you want users to focus on one section at a time. - - - -
- -
- -
- - -

Default Expanded

- -

- Use the defaultExpanded prop to have an accordion panel expanded by default when the component mounts. -

-
-
- -
- - } - aria-controls="panel1-content" - id="panel1-header" - > - Expanded by Default - - - - This accordion panel is expanded by default using the defaultExpanded prop. Users can still collapse it. - - - -
- -
- -
- - -

Disabled Accordion

- -

- Use the disabled prop to prevent users from interacting with an accordion panel. -

-
-
- -
- - } - aria-controls="panel1-content" - id="panel1-header" - > - Disabled Accordion - - - - This content cannot be accessed as the accordion is disabled. - - - -
- -
- -
-
-
- - ); -}; - -export default AccordionCode; diff --git a/src/sections/Projects/Sistent/components/accordion/guidance.js b/src/sections/Projects/Sistent/components/accordion/guidance.js deleted file mode 100644 index 8b54498c0d7f9..0000000000000 --- a/src/sections/Projects/Sistent/components/accordion/guidance.js +++ /dev/null @@ -1,244 +0,0 @@ -import React, { useState } from "react"; -import { navigate } from "gatsby"; -import { useLocation } from "@reach/router"; -import { SistentThemeProvider, Accordion, AccordionSummary, AccordionDetails, Typography } from "@sistent/sistent"; -import TabButton from "../../../../../reusecore/Button"; -import { SistentLayout } from "../../sistent-layout"; -import { Row } from "../../../../../reusecore/Layout"; -import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode"; -import ExpandMoreIcon from "@mui/icons-material/ExpandMore"; - -const AccordionGuidance = () => { - const location = useLocation(); - const { isDark } = useStyledDarkMode(); - const [expanded, setExpanded] = useState("panel1"); - - const handleChange = (panel) => (event, isExpanded) => { - setExpanded(isExpanded ? panel : false); - }; - - return ( - -
- -

Accordion

- -

- An accordion is a vertically stacked list of headers that can be clicked to reveal or hide associated content. It allows users to toggle between hiding and showing large amounts of content in a compact space. -

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

Usage

- -

- Accordions are useful when you want to toggle between hiding and showing large amounts of content. They help reduce vertical space and improve the user experience by organizing content in a hierarchical, easy-to-scan way. -

-
    -
  • Use accordions to organize related information into sections
    • -
  • Allow users to focus on one section at a time
    • -
  • Reduce scrolling by collapsing content that's not immediately needed
    • -
  • Provide clear, descriptive headers for each accordion panel
    • -
- - -

Basic Example

- -

- A simple accordion with expand/collapse functionality. Each panel can be opened and closed independently. -

- - -
- - } - aria-controls="usage-panel1-content" - id="usage-panel1-header" - > - What is Meshery? - - - - Meshery is the cloud native management plane offering lifecycle management of more Kubernetes-based infrastructure and applications. - - - - - } - aria-controls="usage-panel2-content" - id="usage-panel2-header" - > - What is Kanvas? - - - - Kanvas is a visual topology and infrastructure management tool for cloud native applications and infrastructure. - - - -
- - - - -

When to Use

- -

- Accordions are best used when you need to present multiple sections of content in a limited space. Here are some common use cases: -

- -

Frequently Asked Questions (FAQs)

-

- Accordions are ideal for FAQ sections where users can expand only the questions they're interested in, making it easier to scan and find relevant information. -

- - -
- - }> - How do I get started with Layer5? - - - - Visit the Layer5 community page, join our Slack, and explore the getting started guides for each project. - - - - - }> - Is Layer5 open source? - - - - Yes, all Layer5 projects are open source and welcome contributions from the community. - - - -
- - - -

Settings and Configuration Panels

-

- Use accordions to organize different categories of settings, allowing users to focus on one category at a time. -

- - -
- - }> - - General Settings - - - - - Configure general application settings such as language, timezone, and default preferences. - - - - - }> - - Security - - - - - Manage security settings including password policies, two-factor authentication, and API keys. - - - - - }> - - Notifications - - - - - Control how and when you receive notifications from the platform. - - - -
- - - -

Documentation and Help Sections

-

- Organize documentation into collapsible sections to help users navigate through large amounts of information efficiently. -

- - -

Best Practices

- -

- Follow these guidelines to ensure accordions are effective and user-friendly: -

-
    -
  • - Clear Headers: Use descriptive, concise headers that clearly indicate the content within each panel. Users should be able to understand what information they'll find before expanding. -
    • -
  • - Logical Grouping: Group related content together and order panels in a logical sequence (alphabetical, chronological, or by importance). -
    • -
  • - Visual Indicators: Always use clear expand/collapse icons (like arrows) to indicate the current state and interactivity of each panel. -
    • -
  • - Controlled vs Uncontrolled: Decide whether multiple panels can be open simultaneously (uncontrolled) or only one at a time (controlled) based on your use case. -
    • -
  • - Accessible: Ensure accordions are keyboard accessible and work with screen readers. Use proper ARIA attributes for accessibility. -
    • -
  • - Performance: Avoid nesting too many accordions or placing heavy content inside panels that could slow down the page. -
    • -
  • - Mobile-Friendly: Accordions work particularly well on mobile devices where screen space is limited. Ensure touch targets are large enough. -
    • -
  • - Default State: Consider which panels (if any) should be expanded by default based on the most commonly accessed information. -
    • -
-
-
- - ); -}; - -export default AccordionGuidance; diff --git a/src/sections/Projects/Sistent/components/accordion/index.js b/src/sections/Projects/Sistent/components/accordion/index.js deleted file mode 100644 index f7d8ccb1ccac8..0000000000000 --- a/src/sections/Projects/Sistent/components/accordion/index.js +++ /dev/null @@ -1,169 +0,0 @@ -import React, { useState } from "react"; -import { navigate } from "gatsby"; -import { useLocation } from "@reach/router"; -import { SistentThemeProvider, Accordion, AccordionSummary, AccordionDetails, Typography } from "@sistent/sistent"; -import TabButton from "../../../../../reusecore/Button"; -import { SistentLayout } from "../../sistent-layout"; -import { Row } from "../../../../../reusecore/Layout"; -import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode"; -import ExpandMoreIcon from "@mui/icons-material/ExpandMore"; - -const SistentAccordion = () => { - const location = useLocation(); - const { isDark } = useStyledDarkMode(); - const [expanded, setExpanded] = useState(false); - - const handleChange = (panel) => (event, isExpanded) => { - setExpanded(isExpanded ? panel : false); - }; - - return ( - -
- -

Accordion

- -

- An accordion is a vertically stacked list of headers that can be clicked to reveal or hide associated content. It allows users to toggle between hiding and showing large amounts of content in a compact space. -

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

- Accordions are useful when you want to toggle between hiding and showing large amounts of content. They help reduce vertical space and improve the user experience by organizing content in a hierarchical, easy-to-scan way. -

- -

Basic Accordion

- -

- A basic accordion with multiple panels that can be expanded and collapsed independently. -

- - -
- - } - aria-controls="panel1-content" - id="panel1-header" - > - Accordion 1 - - - - This is the content for the first accordion panel. You can add any content here, including text, images, or other components. - - - - - } - aria-controls="panel2-content" - id="panel2-header" - > - Accordion 2 - - - - This is the content for the second accordion panel. Accordions can contain rich content and media. - - - -
- - - -

Controlled Accordion

- -

- A controlled accordion where only one panel can be expanded at a time, providing a more focused user experience. -

- - -
- - } - aria-controls="panel1bh-content" - id="panel1bh-header" - > - - General settings - - - - - Controlled accordions manage their expanded state through React, allowing only one panel to be open at a time. This creates a cleaner, more focused user experience by preventing multiple sections from being visible simultaneously. - - - - - } - aria-controls="panel2bh-content" - id="panel2bh-header" - > - Users - - - - When expanding this panel, the previously opened panel automatically collapses. This behavior is ideal for settings pages, configuration panels, and any interface where you want users to focus on one section at a time. - - - - - } - aria-controls="panel3bh-content" - id="panel3bh-header" - > - - Advanced settings - - - - - Accordions help organize complex information into digestible sections. They reduce cognitive load by hiding content until users actively choose to reveal it, making interfaces feel less overwhelming and more navigable. - - - -
- - -
-
- - ); -}; - -export default SistentAccordion; diff --git a/src/sections/Projects/Sistent/components/avatar-group/code.js b/src/sections/Projects/Sistent/components/avatar-group/code.js deleted file mode 100644 index bab7d19028a52..0000000000000 --- a/src/sections/Projects/Sistent/components/avatar-group/code.js +++ /dev/null @@ -1,229 +0,0 @@ -import React, { useState } from "react"; -import { Avatar, AvatarGroup, SistentThemeProvider } from "@sistent/sistent"; -import { SistentLayout } from "../../sistent-layout"; -import TabButton from "../../../../../reusecore/Button"; -import { CodeBlock } from "../button/code-block"; -import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode"; - -import user1 from "../../../../../assets/images/sistent/placeholder/user.webp"; -import user2 from "../../../../../assets/images/sistent/placeholder/user.webp"; -import user3 from "../../../../../assets/images/sistent/placeholder/user.webp"; -import user4 from "../../../../../assets/images/sistent/placeholder/user.webp"; - -const TABS = ["Overview", "Guidance", "Code"]; - -const avatarGroupExamples = [ - { - title: "Basic AvatarGroup", - description: "Display a horizontal group of avatars with default overlap.", - element: ( - - - - - - ), - code: ` - - - -`, - id: "basic-group", - }, - { - title: "Max Avatars", - description: "Limit the number of visible avatars using the `max` prop.", - element: ( - - - - - - - ), - code: ` - - - - -`, - id: "max-group", - }, - { - title: "Custom Spacing", - description: "Control the spacing between avatars.", - element: ( - - - - - - ), - code: ` - - - -`, - id: "spacing-group", - }, - { - title: "Shape Variants", - description: "Mix avatar shape variants like square and rounded.", - element: ( - - - - - - ), - code: ` - - - -`, - id: "variant-group", - }, - { - title: "Total Avatars", - description: - "You can indicate the total number of avatars using the `total` prop, even if not all are rendered.", - element: ( - - - - - - ), - code: ` - - - -`, - id: "total-avatars", - }, - { - title: "Custom Surplus Renderer", - description: - "Customize the overflow display using the `renderSurplus` prop for more control over surplus appearance.", - element: ( - +{surplus.toString()[0]}k} - total={4251} - > - - - - - - ), - code: ` ( - {\`+\${surplus} more\`} - )} -> - - - - -`, - id: "custom-surplus", - }, -]; - -const AvatarGroupComponent = () => { - const { isDark } = useStyledDarkMode(); - const [activeTab, setActiveTab] = useState("Overview"); - - return ( - -
- -

Avatar Group

- -

- Below are practical implementation examples of the - AvatarGroup component, showcasing different - configurations such as max user limit, spacing, variant styling, and - accessibility-friendly usage. These examples are designed to help you - apply AvatarGroup effectively across team or user-related - interfaces. -

- -
- {TABS.map((tab) => ( - setActiveTab(tab)} - /> - ))} -
- -

- The AvatarGroup component helps visually group multiple avatars in a - compact and meaningful layout, often representing users in a shared - context. -

- - {activeTab === "Code" && ( -
-

AvatarGroup Implementation Variants

- - {avatarGroupExamples.map( - ({ title, description, element, code, id }) => ( -
-

{title}

-

{description}

-
-
{element}
- -
-
- ), - )} - -
- )} - - {activeTab === "Overview" && ( -
-

Usage

-

- Use AvatarGroup when you want to display a group of users or - entities visually. It's useful for team indicators, - collaborations, or contributors. You can adjust overlap, limit - display with `max`, or even indicate a total with `total`. -

-
- )} - - {activeTab === "Guidance" && ( -
-

Design Guidance

-

- Keep avatar count minimal (ideally < 5) to reduce clutter. - Surplus avatars should indicate remaining count clearly (e.g. - "+3"). Consider consistent shapes, sizes, and padding across your - app. -

-
    -
  • - Use `max` and `total` for clear grouping when avatars exceed - space. -
    • -
  • - Use `renderSurplus` to match branding or add tooltips/custom UI. -
    • -
  • Maintain consistent alt texts for accessibility.
    • -
-
- )} -
- - ); -}; - -export default AvatarGroupComponent; diff --git a/src/sections/Projects/Sistent/components/avatar-group/guidance.js b/src/sections/Projects/Sistent/components/avatar-group/guidance.js deleted file mode 100644 index 064fe7690284b..0000000000000 --- a/src/sections/Projects/Sistent/components/avatar-group/guidance.js +++ /dev/null @@ -1,123 +0,0 @@ -import React from "react"; -import { navigate } from "gatsby"; -import { useLocation } from "@reach/router"; -import { SistentLayout } from "../../sistent-layout"; -import TabButton from "../../../../../reusecore/Button"; - -const AvatarGroupGuidance = () => { - const location = useLocation(); - - return ( - -
- -

Avatar Group

- -

- The AvatarGroup component displays a compact - collection of avatar elements that represent a group of users or - entities. It’s useful in collaborative spaces, team-based features, or - user listings. -

- - {/* Tabs */} -
- - navigate("/projects/sistent/components/avatar-group") - } - title="Overview" - /> - - navigate("/projects/sistent/components/avatar-group/guidance") - } - title="Guidance" - /> - - navigate("/projects/sistent/components/avatar-group/code") - } - title="Code" - /> -
- -
-

Design Guidelines and Best Practices

-

- When implementing AvatarGroup, it's important to - consider how it enhances collaboration and identity clarity without - overwhelming the interface. Here are key best practices: -

- -
    -
  • - Use to represent teams or shared ownership: Ideal - for showing members of a project, contributors, or shared access - groups in apps like dashboards or chat. -
    • -
  • - Don’t overuse in dense interfaces: Too many - avatars in a group can clutter the view. Use the max{" "} - prop to collapse overflow into a +N indicator. -
    • -
  • - Use consistent sizing and spacing: Align all - avatars to the same size to maintain visual harmony. Use{" "} - spacing options (or sx) for controlled - overlap. -
    • -
  • - - Provide accessible alt text: - {" "} - Each avatar should have meaningful alternative text for screen - readers. Avoid empty or redundant alt values. -
    • -
  • - Avoid interactive behavior within AvatarGroup:{" "} - The component is for display only. If avatars must be clickable, - wrap each <Avatar> individually in buttons or - links outside the group context. -
    • -
  • - Keep it compact: AvatarGroup is not meant for - long lists. For large user sets, link to a full view or show - summary avatars only. -
    • -
  • - Fallbacks matter: Always account for broken - images by using initials or icons as fallback content within each{" "} - Avatar. -
    • -
- -

- These practices ensure that AvatarGroup remains a - helpful, visually tidy, and accessible interface element wherever - user identity grouping is necessary. -

-
-
- - ); -}; - -export default AvatarGroupGuidance; diff --git a/src/sections/Projects/Sistent/components/avatar-group/index.js b/src/sections/Projects/Sistent/components/avatar-group/index.js deleted file mode 100644 index 372ddb7bebea7..0000000000000 --- a/src/sections/Projects/Sistent/components/avatar-group/index.js +++ /dev/null @@ -1,173 +0,0 @@ -import React from "react"; -import { navigate } from "gatsby"; -import { useLocation } from "@reach/router"; -import { Avatar, AvatarGroup, SistentThemeProvider } from "@sistent/sistent"; -import { SistentLayout } from "../../sistent-layout"; -import TabButton from "../../../../../reusecore/Button"; -import { Row } from "../../../../../reusecore/Layout"; -import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode"; - -import user1 from "../../../../../assets/images/sistent/placeholder/user.webp"; -import user2 from "../../../../../assets/images/sistent/placeholder/user.webp"; -import user3 from "../../../../../assets/images/sistent/placeholder/user.webp"; -import user4 from "../../../../../assets/images/sistent/placeholder/user.webp"; - -const SistentAvatarGroup = () => { - const location = useLocation(); - const { isDark } = useStyledDarkMode(); - - return ( - -
- -

Avatar Group

- - -

- The AvatarGroup component is used to visually represent a - collection of users or entities in a compact and organized layout. - It's ideal for showcasing team members, collaborators, or - participants, and is often used in dashboards, cards, and - collaborative tools. AvatarGroup handles overlapping, spacing, and - overflow logic to ensure clarity even with limited space. -

- {/* Navigation Tabs */} -
- - navigate("/projects/sistent/components/avatar-group") - } - /> - - navigate("/projects/sistent/components/avatar-group/guidance") - } - /> - - navigate("/projects/sistent/components/avatar-group/code") - } - /> -
- -
-

- AvatarGroup is used to display a collection of user - avatars together, typically for showing team members or participants - in collaborative features. -

- - {/* Basic Avatar Group */} -

Basic Avatar Group

-

- The simplest use case: showing multiple avatars grouped - horizontally. -

- - - - - - - - - - - {/* Max Displayed Avatars */} -

Limiting Displayed Avatars

-

- You can limit the number of avatars shown using the max{" "} - prop. Additional avatars are collapsed into a counter (e.g. +2). -

- - - - - - - - - - - - {/* Custom Spacing */} -

Custom Spacing

-

- Customize the gap between avatars using the spacing{" "} - prop. -

- - - - - - - - - - - {/* Variant Styling */} -

Avatar Variants in Group

-

- You can combine avatar shape variants like rounded and{" "} - square inside the group. -

- - - - - - - - - - - {/* Custom surplus */} -

Custom Surplus Renderer

-

- Customize the overflow display using the `renderSurplus` prop for - more control over surplus appearance. -

- - - - ( - +{surplus.toString()[0]}k - )} - total={4251} - > - - - - - - -
-
- - ); -}; - -export default SistentAvatarGroup; diff --git a/src/sections/Projects/Sistent/components/avatar/code.js b/src/sections/Projects/Sistent/components/avatar/code.js deleted file mode 100644 index 03308be3549f1..0000000000000 --- a/src/sections/Projects/Sistent/components/avatar/code.js +++ /dev/null @@ -1,137 +0,0 @@ -import React, { useState } from "react"; -import { Avatar, SistentThemeProvider } from "@sistent/sistent"; -import { SistentLayout } from "../../sistent-layout"; -import TabButton from "../../../../../reusecore/Button"; -import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode"; -import { CodeBlock } from "../button/code-block"; -import user from "../../../../../assets/images/sistent/placeholder/user.webp"; -import { FaUser } from "@react-icons/all-files/fa/FaUser"; - -const TABS = ["Overview", "Guidance", "Code"]; - -const avatarExamples = [ - { - title: "Image Avatar", - description: "Display user profile images.", - element: , - code: "", - id: "image-avatar", - }, - { - title: "Initials Avatar", - description: "Use initials when an image is unavailable.", - element: JD, - code: "JD", - id: "initials-avatar", - }, - { - title: "Icon Avatar", - description: "Use icons for generic representation.", - element: ( - - - - ), - code: "", - id: "icon-avatar", - }, - { - title: "Sized Avatars", - description: "Adjust avatar sizes to fit various contexts.", - element: ( - <> - - - - - ), - code: `<> - - - -`, - id: "sized-avatar", - }, - { - title: "Custom Styling", - description: "Apply custom styles using the sx prop.", - element: ( - - ), - code: ``, - id: "custom-avatar", - }, -]; - -const AvatarComponent = () => { - const { isDark } = useStyledDarkMode(); - const [activeTab, setActiveTab] = useState("Overview"); - - return ( - -
- -

Avatar

- -

- Below are code examples demonstrating different ways to use the{" "} - Avatar component—including image-based avatars, initials, - icons, sizing variations, and custom styling. These implementations - showcase the flexibility and adaptability of the component across - various interface needs. -

-
- {TABS.map((tab) => ( - setActiveTab(tab)} - /> - ))} -
- -

- The Avatar component offers a flexible visual representation of users - or entities, supporting profile images, initials, icons, and - customizable styles. -

- - {activeTab === "Code" && ( -
-

Avatar Implementation Variants

- - {avatarExamples.map( - ({ title, description, element, code, id }) => ( -
-

{title}

-

{description}

-
-
{element}
- -
-
- ), - )} - -
- )} -
- - ); -}; - -export default AvatarComponent; diff --git a/src/sections/Projects/Sistent/components/avatar/guidance.js b/src/sections/Projects/Sistent/components/avatar/guidance.js deleted file mode 100644 index fece563c29dc1..0000000000000 --- a/src/sections/Projects/Sistent/components/avatar/guidance.js +++ /dev/null @@ -1,104 +0,0 @@ -import React from "react"; -import { navigate } from "gatsby"; -import { useLocation } from "@reach/router"; -import { SistentLayout } from "../../sistent-layout"; -import TabButton from "../../../../../reusecore/Button"; -const Guidance = () => { - const location = useLocation(); - return ( - -
-

Avatar

-

- The Avatar component represents a user using an image, initials, or an - icon. It is a crucial UI element for providing visual identity across - digital platforms. -

- -
- - navigate("/projects/sistent/components/avatar/overview") - } - title="Overview" - /> - - navigate("/projects/sistent/components/avatar/guidance") - } - title="Guidance" - /> - navigate("/projects/sistent/components/avatar/code")} - title="Code" - /> -
- -
-

Best Practices

- -
    -
  • - Visual Representation: Choose clear, recognizable - images that authentically represent the user or entity. -
    • -
  • - Fallback Mechanisms: Implement robust fallback - strategies: -
    • -
  • Optimize image resolution for performance and clarity.
    • -
- -

Accessibility Considerations

-
    -
  • - Mandatory alt text for screen reader compatibility. -
    • -
  • Ensure 4.5:1 color contrast ratio for initials and icons.
    • -
  • Add meaningful aria labels for context.
    • -
- -

Performance Optimization

-
    -
  • Use image compression techniques.
    • -
  • Implement lazy loading for avatar images.
    • -
  • Cache avatar images to reduce network requests.
    • -
- -

Advanced Customization

-
    -
  • Theme-aware color generation for initial avatars.
    • -
  • Status indicators (online/offline/away).
    • -
- -

Common Integration Patterns

-
    -
  • User profile headers
    • -
  • Team member lists
    • -
  • Comment and messaging interfaces
    • -
  • Collaboration platform user representations
    • -
-
-
- - ); -}; - -export default Guidance; diff --git a/src/sections/Projects/Sistent/components/avatar/index.js b/src/sections/Projects/Sistent/components/avatar/index.js deleted file mode 100644 index bff58aac24d47..0000000000000 --- a/src/sections/Projects/Sistent/components/avatar/index.js +++ /dev/null @@ -1,128 +0,0 @@ -import React from "react"; -import { navigate } from "gatsby"; -import { useLocation } from "@reach/router"; -import profilePicture from "../../../../../assets/images/sistent/placeholder/user.webp"; -import { SistentThemeProvider, Avatar } from "@sistent/sistent"; -import TabButton from "../../../../../reusecore/Button"; -import { FaUser } from "@react-icons/all-files/fa/FaUser"; -import { SistentLayout } from "../../sistent-layout"; -import { Row } from "../../../../../reusecore/Layout"; -import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode"; - -const SistentAvatar = () => { - const location = useLocation(); - const { isDark } = useStyledDarkMode(); - - return ( - -
- -

Avatar

- -

- An Avatar component is used to visually represent a user, profile, or - entity, typically through an image, initials, or icon. It is commonly - used in interfaces to indicate identity. -

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

- Avatars are versatile visual representations that provide instant - visual identification for users, teams, or entities within digital - interfaces. They serve as a quick and intuitive way to personalize - and humanize digital experiences across various applications and - platforms. -

-

Image Avatars

-

- Image avatars provide the most personalized representation by - displaying actual profile pictures, organizational logos, or - specific user imagery. -

- - - - - -

Initials Avatar

-

- When a profile image is unavailable, initials provide a professional - and clean alternative for user identification. -

- - - JS - AB - CD - - -

Icon Avatar

-

- Icon avatars offer a universal visual representation when specific - imagery isn't available or appropriate. -

- - - - - - - -

Flexible Sizing

-

- Avatars can be dynamically sized to fit various design requirements - and interface contexts. -

- - - - - - - -

Variants

-

If you need square or rounded avatars, use the variant prop.

- - - - - - -
-
- - ); -}; - -export default SistentAvatar; diff --git a/src/sections/Projects/Sistent/components/backdrop/code.js b/src/sections/Projects/Sistent/components/backdrop/code.js deleted file mode 100644 index e6fca5b9b9dee..0000000000000 --- a/src/sections/Projects/Sistent/components/backdrop/code.js +++ /dev/null @@ -1,126 +0,0 @@ -import { useLocation } from "@reach/router"; -import { navigate } from "gatsby"; -import React from "react"; - -import { Container, SistentThemeProvider } from "@sistent/sistent"; -import { SistentLayout } from "../../sistent-layout"; -import { CodeBlock } from "../button/code-block"; - -import TabButton from "../../../../../reusecore/Button"; -import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode"; - -import { Backdrop, Button, CircularProgress } from "@sistent/sistent"; - -const codes = [ - ` - import { Backdrop, Button, CircularProgress } from "@sistent/sistent"; - - // declare states and functions to handle open and close operation - - /* - const [open, setOpen] = React.useState(false); - const handleClose = () => setOpen(false); - const handleOpen = () => setOpen(true); - */ -
- - ({ - color: "#fff", - zIndex: theme.zIndex.drawer + 1, - })} - open={open} - onClick={handleClose} - > - - -
`, -]; - -const BackdropCode = () => { - const location = useLocation(); - const { isDark } = useStyledDarkMode(); - - const [open, setOpen] = React.useState(false); - const handleClose = () => setOpen(false); - const handleOpen = () => setOpen(true); - - return ( - -
- -

Backdrop

- -

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

- The Backdrop component overlays a dimmed background across the - screen to direct focus to specific content in the foreground, like - loading indicators, modals, or dialogs. It visually signals that the - background content is temporarily inaccessible. The Backdrop can be - closed when clicked, depending on the close action set in its props. -

- -

Backdrop Example

- -
-
- - - - ({ - color: "#fff", - zIndex: theme.zIndex.drawer + 1, - })} - open={open} - onClick={handleClose} - > - - - - -
- -
-
-
- - ); -}; - -export default BackdropCode; \ No newline at end of file diff --git a/src/sections/Projects/Sistent/components/backdrop/guidance.js b/src/sections/Projects/Sistent/components/backdrop/guidance.js deleted file mode 100644 index b80743893c0e9..0000000000000 --- a/src/sections/Projects/Sistent/components/backdrop/guidance.js +++ /dev/null @@ -1,320 +0,0 @@ -import React from "react"; -import { navigate } from "gatsby"; -import { useLocation } from "@reach/router"; -import { SistentLayout } from "../../sistent-layout"; -import TabButton from "../../../../../reusecore/Button"; -import styled from "styled-components"; - -const StyledTable = styled.table` - tr { - background-color:${props => props.theme.grey121212ToWhite}; - } -`; - -const BackdropGuidance = () => { - const location = useLocation(); - - return ( - -
- -

Backdrop

- -

- The Backdrop component is used to overlay a dimmed background across - the screen, drawing attention to content in the foreground, such as - modals, dialogs, or loading indicators. The backdrop signals that the - background content is temporarily inaccessible. -

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

- The Backdrop component provides a clean and efficient way to overlay - a backdrop layer to indicate that the background content is - temporarily inactive or inaccessible. This component is primarily - used in conjunction with modals, loading indicators, or popovers. -

- - -

Function

- - -

The Backdrop component helps achieve the following functions:

-
    -
  • - Modal Backdrop: Provides a visual overlay when a - modal is open, dimming the background and focusing attention on - the modal. -
    • -
  • - Loading Indicator: Can be used with a loading - spinner or indicator to notify users that content is being - processed. -
    • -
  • - Popover or Custom Select: Useful for making a - popover or custom select component more noticeable by blocking - interaction with the background. -
    • -
- - -

Props

- -

Props of the Fade component are also available.

- - - - - Name - Type - Default - Description - - - - - - open* - - - bool - - - - - If true, the component is shown. - - - - - children - - - node - - - - The content of the component. - - - - classes - - - object - - - - - Override or extend the styles applied to the component. See - CSS classes API below for more details. - - - - - component - - - elementType - - - - - The component used for the root node. Either a string to use - an HTML element or a component. - - - - - components - - - Root?: elementType - - - {} - - - The components used for each slot inside. - Deprecated — Use the slots prop - instead. This prop will be removed in v7. See Migrating from - deprecated APIs for more details. - - - - - componentsProps - - - root?: object - - - {} - - - The extra props for the slot components. You can override the - existing props or add new ones. - Deprecated — Use the slotProps{" "} - prop instead. This prop will be removed in v7. - - - - - invisible - - - bool - - - false - - - If true, the backdrop is invisible, useful for - popovers or custom selects. - - - - - slotProps - - - root?: func | object, transition?: func | object - - - {} - - The props used for each slot inside the component. - - - - slots - - - root?: elementType, transition?: elementType - - - {} - - The components used for each slot inside. - - - - sx - - - Array<func | object | bool> | func | object - - - - - The system prop for defining system overrides and additional - CSS styles. See the{" "} - sx page for more - details. - - - - - TransitionComponent - - - elementType - - - Fade - - - The component used for the transition. Refer to the guide for - component requirements. - - - - - transitionDuration - - - - number | appear?: number, enter?: number, exit?: number{" "} - - - - - - Duration for the transition, in milliseconds. Specify a single - timeout or individual times. - - - - - - -

Labeling

- - -

- The Backdrop component provides a clear visual indication that - content is temporarily inaccessible. It is typically used for - displaying temporary UI elements, such as dialogs or loading - indicators. It's important to ensure that the backdrop is not - intrusive and is used in the appropriate context. -

- -

- It is also essential to consider accessibility and usability when - implementing a backdrop. Ensure that users can interact with the - content behind the backdrop when it is dismissed or closed, and - ensure proper keyboard and screen reader support. -

- - -

Responsive Design

- - -

- The Backdrop component can be easily integrated into responsive - designs, ensuring that it adapts to different screen sizes and - layouts. It should be used in a way that works well on mobile - devices, tablets, and desktops. Consider the size of the overlay and - how it impacts the user experience across devices. -

- -

- You can adjust the backdrop's visibility, duration, and animation to - suit different screen sizes and provide a smooth user experience on - all devices. -

-
-
- - ); -}; - -export default BackdropGuidance; \ No newline at end of file diff --git a/src/sections/Projects/Sistent/components/backdrop/index.js b/src/sections/Projects/Sistent/components/backdrop/index.js deleted file mode 100644 index c55f44a523480..0000000000000 --- a/src/sections/Projects/Sistent/components/backdrop/index.js +++ /dev/null @@ -1,119 +0,0 @@ -import React from "react"; -import { navigate } from "gatsby"; -import { useLocation } from "@reach/router"; - -import { - SistentThemeProvider, - Button, - Backdrop, - CircularProgress, -} from "@sistent/sistent"; -import TabButton from "../../../../../reusecore/Button"; -import { SistentLayout } from "../../sistent-layout"; -import { Row } from "../../../../../reusecore/Layout"; -import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode"; - -const SistentBackdrop = () => { - const location = useLocation(); - const { isDark } = useStyledDarkMode(); - - const [open, setOpen] = React.useState(false); - const handleClose = () => setOpen(false); - const handleOpen = () => setOpen(true); - - return ( - -
- -

Backdrop

- -

- The Backdrop component overlays a dimmed background across the screen - to direct focus to specific content in the foreground, like loading - indicators, modals, or dialogs. It visually signals that the - background content is temporarily inaccessible. The Backdrop can be - closed when clicked, depending on the close action set in its props. -

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

- The Backdrop component in React is used to overlay a dimmed - background across the entire screen, guiding the user's focus to a - specific element or content in the foreground. This component is - often utilized for scenarios that require a change in the - application’s state, such as showing loading indicators, modals, - dialogs, or other focused content. -

-

- In its simplest use, a Backdrop dims the background, enhancing the - visibility of what’s in the foreground while signaling that the - underlying content is temporarily inaccessible. When Backdrop is - open, users can click on it to close it, depending on how the close - action is handled in the component’s props. -

- -

How to use

- -

- The demo below shows a basic Backdrop with a Circular Progress - component in the foreground to indicate a loading state. After - clicking Show Backdrop, you can click anywhere on the page to close - it. -

- - -
- - ({ - color: "#fff", - zIndex: theme.zIndex.drawer + 1, - })} - open={open} - onClick={handleClose} - > - - -
- - -
-
- - ); -}; - -export default SistentBackdrop; diff --git a/src/sections/Projects/Sistent/components/badge/code.js b/src/sections/Projects/Sistent/components/badge/code.js deleted file mode 100644 index 5e4674584e0a8..0000000000000 --- a/src/sections/Projects/Sistent/components/badge/code.js +++ /dev/null @@ -1,256 +0,0 @@ -import React from "react"; -import { navigate } from "gatsby"; -import { useLocation } from "@reach/router"; -import { Badge, SistentThemeProvider, Avatar } from "@sistent/sistent"; -import { CodeBlock } from "../button/code-block"; -import MailIcon from "@mui/icons-material/Mail"; -import { SistentLayout } from "../../sistent-layout"; - -import TabButton from "../../../../../reusecore/Button"; -import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode"; - -const codes = [ - ` - - - - `, - ` - - - - `, - ` - - - - - - `, - ` - - - - `, - ` - - - U - - - `, -]; - -const BadgeCode = () => { - const location = useLocation(); - const { isDark } = useStyledDarkMode(); - - return ( - -
- -

Badge

- -

- A badge is a small piece of information that is used to convey a - specific message or status. It is often used to provide additional - context or information about an item, such as a notification count, - status indicator, or label. -

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

- Badges display counts, small information indicators, or status - markers that are attached to other interface elements. -

- -

Basic Badge

- -

- Examples of badges containing text, primarily using the badgeContent - prop. -

-
-
- - - - - -
- -
-

Dot Badge

-

The dot badge shows a small dot indicator without any content.

-
-
- - - - - -
- -
-

Badge Colors

-

Use the color prop to apply theme palette colors to badges.

-
-
- -
- - - - - - - - - - - - - - - -
- -
- -
- -

Badge Position

- -

Use the anchorOrigin prop to change the position of the badge.

-
-
- -
- - - - - - - - - - - - -
- -
- -
- -

Badge with Avatar

- -

Badges can be used with avatars to show user status.

-
-
- - - - U - - - -
- -
-
-
- - ); -}; - -export default BadgeCode; diff --git a/src/sections/Projects/Sistent/components/badge/guidance.js b/src/sections/Projects/Sistent/components/badge/guidance.js deleted file mode 100644 index b1b0e189b728c..0000000000000 --- a/src/sections/Projects/Sistent/components/badge/guidance.js +++ /dev/null @@ -1,248 +0,0 @@ -import React from "react"; -import { navigate } from "gatsby"; -import { useLocation } from "@reach/router"; -import { Row } from "../../../../../reusecore/Layout"; -import { Badge, SistentThemeProvider, Avatar } from "@sistent/sistent"; -import { SistentLayout } from "../../sistent-layout"; -import MailIcon from "@mui/icons-material/Mail"; -import NotificationsIcon from "@mui/icons-material/Notifications"; - -import TabButton from "../../../../../reusecore/Button"; -import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode"; - -const BadgeGuidance = () => { - const location = useLocation(); - const { isDark } = useStyledDarkMode(); - - return ( - -
- -

Badge

- -

- A badge is a small piece of information that is used to convey a - specific message or status. It is often used to provide additional - context or information about an item, such as a notification count, - status indicator, or label. -

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

- For proper application, badges should be used consistently - throughout the user interface to maintain clarity and user - understanding. -

- -

Function

- -

- The function of badges determines how they should be used in - different scenarios to provide users with additional context or - information. -

-

Notification Badge

-

- Notification badges are commonly used to display counts of unread - messages, alerts, or notifications. They typically appear as small - circular indicators with numbers and are positioned at the top-right - corner of icons, buttons, or user avatars. -

- - - - - - - -

Status Badge

-

- Status badges indicate the current state of an item or user. They - can show whether a user is online/offline, if a service is - active/inactive, or if a process is pending/completed. Status badges - often use color coding to convey meaning, such as green for "online" - or red for "error." -

- - - - - U - - - - -

Label Badge

-

- Label badges categorize or tag elements in the interface. They might - indicate features like "New," "Premium," or "Beta" to highlight - special characteristics of an item. These badges are often - rectangular and contain text rather than just a number or dot. -

- - -
-
- -
- Feature Item -
- - - - -

Color Usage

- -

- Colors play a crucial role in communicating the meaning and - importance of badges. Using consistent color patterns helps users - quickly understand the information being presented. -

-

Primary Color

-

- Primary color badges are typically used for standard notifications - or counts that don't have a specific urgency level. -

- - - - - - - -

Secondary Color

-

- Secondary color badges can be used to differentiate between - different types of notifications or to create visual hierarchy. -

- - - - - - - -

Error Color

-

- Error color badges (typically red) indicate important notifications - that require immediate attention or critical status information. -

- - - - - - - -

Warning Color

-

- Warning color badges (typically yellow/orange) indicate - notifications or status that requires attention but isn't critical. -

- - - - - - - -

Success Color

-

- Success color badges (typically green) indicate positive status or - completed actions. -

- - - - - - - - - -

Best Practices

- -

- When using badges in your interface, consider these guidelines to - ensure they're effective and user-friendly: -

-
    -
  • - Keep it Simple: Badges should be concise and only - display essential information. For notification counts, consider - using "99+" for large numbers to save space. -
    • -
  • - Consistent Positioning: Place badges in - consistent locations relative to their parent elements to create a - predictable pattern for users. -
    • -
  • - Use Color Meaningfully: Choose badge colors - purposefully to convey information about priority or status. -
    • -
  • - Ensure Visibility: Make sure badges have - sufficient contrast against their background to be easily visible. -
    • -
  • - Avoid Overuse: Too many badges can create visual - noise. Use them sparingly for important information only. -
    • -
-
-
- - ); -}; - -export default BadgeGuidance; \ No newline at end of file diff --git a/src/sections/Projects/Sistent/components/badge/index.js b/src/sections/Projects/Sistent/components/badge/index.js deleted file mode 100644 index 8adc142e9456f..0000000000000 --- a/src/sections/Projects/Sistent/components/badge/index.js +++ /dev/null @@ -1,255 +0,0 @@ - -import React from "react"; -import { navigate } from "gatsby"; -import { useLocation } from "@reach/router"; - -import { SistentThemeProvider, Badge, Avatar } from "@sistent/sistent"; -import TabButton from "../../../../../reusecore/Button"; -import { SistentLayout } from "../../sistent-layout"; -import { Col, Row } from "../../../../../reusecore/Layout"; -import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode"; -import MailIcon from "@mui/icons-material/Mail"; - -const SistentBadge = () => { - const location = useLocation(); - const { isDark } = useStyledDarkMode(); - - return ( - -
- -

Badge

- -

- A badge is a small piece of information that is used to convey a - specific message or status. It is often used to provide additional - context or information about an item, such as a notification count, - status indicator, or label. -

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

- Badges are small, often circular or rectangular elements that can - display a number, status, or label. They are typically used to draw - attention to specific information or to indicate the status of an - item. Badges can be used in various contexts, such as notifications, - labels, or status indicators. -

- -

Types

- -

- Different types of badges serve different purposes in user - interfaces. The visual distinction helps users quickly understand - the context and importance of the information being presented. -

-

Standard Badge

-

- Standard badges display a small circular notification indicator. - They are commonly used to show counts or statuses on icons, buttons, - or other UI elements. -

- - - - - - - -

Dot Badge

-

- Dot badges are minimalist indicators that show a small dot rather - than a number. They're useful when you just need to indicate the - presence of notifications without specifying the count. -

- - - - - - - -

Status Badge

-

- Status badges can be used to indicate the state of an item or - component. They typically use different colors to represent - different statuses such as online/offline, active/inactive, or - success/error. -

- - - - - U - - - - - -

Colors

- -

- Badges come in different colors to help convey specific meanings. - The color choice should be consistent across your application to - maintain a clear visual language for users. -

- - - - - - - - - - - - - - - - - - - - -

Positioning

- -

- Badges can be positioned in different locations around their parent - element. The default position is top-right, but they can be adjusted - to appear at various anchor points based on design requirements. -

- - - -
- - - - - - - - - - - - -
- - - - -

Visibility

- -

- Badges can be shown or hidden based on their content or specific - conditions. For example, a badge might only appear when there are - unread notifications and disappear when all notifications have been - viewed. -

- - - - - - - -
-
- - ); -}; - -export default SistentBadge; \ No newline at end of file diff --git a/src/sections/Projects/Sistent/components/box/code.js b/src/sections/Projects/Sistent/components/box/code.js deleted file mode 100644 index a6832b7b44860..0000000000000 --- a/src/sections/Projects/Sistent/components/box/code.js +++ /dev/null @@ -1,210 +0,0 @@ -import React from "react"; -import { navigate } from "gatsby"; -import { useLocation } from "@reach/router"; - -import { SistentThemeProvider, Box } from "@sistent/sistent"; -import { CodeBlock } from "../button/code-block"; -import { SistentLayout } from "../../sistent-layout"; - -import TabButton from "../../../../../reusecore/Button"; -import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode"; - -const codes = [ - ` -

- This is a Box component with custom background and padding. -

-`, - ` -

- This Box is responsive, changing style based on screen size. -

-`, - ` -

- This Box is responsive, changing style based on screen size. -

-`, - ` -

Hover over this Box to see the interactive effect.

-`, -]; - -const BoxCode = () => { - const location = useLocation(); - const { isDark } = useStyledDarkMode(); - - return ( - -
- -

Box

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

- The Box component is a flexible and foundational - container in Sistent, designed to structure and style content. It - provides quick access to the theme and CSS utilities, allowing for - easy customization and responsive design. Using the sx prop, - developers can apply CSS styles directly with theme-aware - properties, making Box ideal for layouts, spacing, and other UI - adjustments. It can render as any HTML element using the component - prop, offering high versatility in both structure and styling. -

- -

Basic Box Example

- -

- A simple Box component can be used to contain and structure other - elements. Here, the Box serves as a basic container without any - styling applied. -

-
-
- - -

This is a basic Box component.

- - -
- -
- -

Styled Box Example

- -

- You can add custom styles to a Box component by applying{" "} - sx - properties. In this example, the Box has a background color, - padding, and a defined height. -

-
-
- - -

- This is a Box component with custom background and padding. -

- - -
- -
- -

Responsive Box Example

- -

- The Box component also supports responsive styling using the{" "} - sx prop. In this example, the Box adjusts its padding - and background color based on screen size. -

-
-
- - -

- This Box is responsive, changing style based on screen size. -

- - -
- -
- -

Interactive Box Example

- -

- Here’s an example where the Box component includes hover effects to - create a more interactive experience. This is useful for buttons, - cards, and other clickable elements. -

-
-
- - -

- Hover over this Box to see the interactive effect. -

- - -
- -
-
-
- - ); -}; - -export default BoxCode; \ No newline at end of file diff --git a/src/sections/Projects/Sistent/components/box/guidance.js b/src/sections/Projects/Sistent/components/box/guidance.js deleted file mode 100644 index 76e1c8c280904..0000000000000 --- a/src/sections/Projects/Sistent/components/box/guidance.js +++ /dev/null @@ -1,181 +0,0 @@ -import React from "react"; -import { navigate } from "gatsby"; -import { useLocation } from "@reach/router"; -import { Row } from "../../../../../reusecore/Layout"; -import { SistentThemeProvider, Box } from "@sistent/sistent"; -import { SistentLayout } from "../../sistent-layout"; - -import TabButton from "../../../../../reusecore/Button"; -import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode"; - -const BoxGuidance = () => { - const location = useLocation(); - const { isDark } = useStyledDarkMode(); - - return ( - -
- -

Box

- -

- The Box component is a flexible, theme-aware container that adapts - seamlessly across various layouts. It provides a convenient way to - apply styles, positioning, and responsive adjustments to content, - making it ideal for any layout needs. -

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

- The Box component is a highly versatile tool that can be used for - layout management, spacing, styling, and more. With full support for - responsive design, Box is an essential part of any well-structured - application, allowing developers to customize and style elements - while keeping the theme consistent. -

- - -

Function

- - -

The Box component serves several functions:

- -

Responsive Styling

-

- The sx prop makes it easy to apply responsive styles - directly within the component, allowing for adaptive design that - looks great across all screen sizes. -

- - - -

- This is a responsive Box component. -

- - - - -

Flexible Layout Control

-

- Box can serve as a container for organizing other elements, whether - it's aligning text, images, or interactive components. The - flexibility of the Box component allows it to adapt to a wide range - of layout needs, from card-style containers to more complex nested - structures. -

- -

Customizable Appearance

-

- The Box component’s customization options allow you to adjust - colors, borders, shadows, and more through the sx prop, - ensuring that components blend well with your app's overall theme. -

- - - -

- Customized Box with shadow and color. -

- - - - - -

Use Cases

- - -

Nested Layouts

-

- Use Box to create nested layouts by embedding one Box within - another, each with distinct styling. This setup enables the creation - of structured and multi-layered designs. -

- - - - -

Nested Box layout example.

- - - - - -

Utility for Spacing and Margin

-

- Leveraging Box for margin and padding adjustments offers - fine-grained control over spacing between components, making it - useful in complex layouts where alignment and spacing are crucial. -

- -

Event Handling and State Management

-

- Box can also be used as an interactive element, handling events and - managing state. This makes it ideal for use cases that require - dynamic behavior or user interaction. -

- -

Responsive Design

-

- The Box component seamlessly integrates with Sistent’s responsive - design principles, providing a cohesive experience across various - screen sizes by leveraging breakpoints in the sx prop. -

-
-
- - ); -}; - -export default BoxGuidance; diff --git a/src/sections/Projects/Sistent/components/box/index.js b/src/sections/Projects/Sistent/components/box/index.js deleted file mode 100644 index a09dff7d7a4b2..0000000000000 --- a/src/sections/Projects/Sistent/components/box/index.js +++ /dev/null @@ -1,133 +0,0 @@ -import React from "react"; -import { navigate } from "gatsby"; -import { useLocation } from "@reach/router"; - -import { SistentThemeProvider, Box } from "@sistent/sistent"; -import TabButton from "../../../../../reusecore/Button"; -import { SistentLayout } from "../../sistent-layout"; -import { Row } from "../../../../../reusecore/Layout"; -import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode"; - -const SistentBox = () => { - const location = useLocation(); - const { isDark } = useStyledDarkMode(); - - return ( - -
- -

Box

- -

- The Box component is a versatile, theme-aware container - in Sistent, ideal for styling and layout customization. It supports - the sx prop for easy, responsive styling and can render as any HTML - element. -

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

- The Box component is a flexible and foundational - container in Sistent, designed to structure and style content. It - provides quick access to the theme and CSS utilities, allowing for - easy customization and responsive design. Using the sx prop, - developers can apply CSS styles directly with theme-aware - properties, making Box ideal for layouts, spacing, and other UI - adjustments. It can render as any HTML element using the component - prop, offering high versatility in both structure and styling. -

- -

Usage

- -

- The Box component differs from other containers available in Sistent - in that its usage is intended to be multipurpose and open-ended, - just like a `div`. Components like Container, Stack and - Paper, by contrast, feature usage-specific props that make them - ideal for certain use cases: Container for main layout orientation, - Stack for one-dimensional layouts, and Paper for elevated surfaces. -

-

Box component

-

- The Box component renders as a `div` by default, but - you can swap in any other valid HTML tag or React component using - the component prop. The demo below replaces the `div` - with a `section` element: -

- - - - This Box renders as an HTML section element. - - - - - -

Customization

- -

- The Box component can be styled flexibly with Sistent - sxprop and custom themes. The sx prop allows quick - application of CSS styles that are theme-aware, enabling responsive - and consistent design. -

- -

Using the sx Prop

-

- The sx prop supports a wide range of style properties, including - colors, spacing, and responsive adjustments. It directly accesses - theme values, allowing you to apply theme-based styles to a Box with - minimal code. -

- - - - - -
-
- - ); -}; - -export default SistentBox; diff --git a/src/sections/Projects/Sistent/components/button-group/code.js b/src/sections/Projects/Sistent/components/button-group/code.js deleted file mode 100644 index 8eb59a500c10d..0000000000000 --- a/src/sections/Projects/Sistent/components/button-group/code.js +++ /dev/null @@ -1,393 +0,0 @@ -import React from "react"; -import { navigate } from "gatsby"; -import { useLocation } from "@reach/router"; - -import { - SistentThemeProvider, - Button, - ButtonGroup, - Box, -} from "@sistent/sistent"; -import TabButton from "../../../../../reusecore/Button"; -import { SistentLayout } from "../../sistent-layout"; -import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode"; -import { CodeBlock } from "../button/code-block"; - -const buttons = [ - , - , - , -]; - -const codes = [ - ` - - - - - - `, - ` - - - - - - - - - - - - - - - - `, - ` - - - - - - - - - - - - - - - - `, - ` - - - - - - `, - ` - - - - - - - - - - - - - - - - `, - ` - - - - - - `, -]; - -const ButtonGroupCode = () => { - const location = useLocation(); - const { isDark } = useStyledDarkMode(); - - return ( - -
- -

Button Group

- -

- The ButtonGroup component can be used to group related buttons - together. It is a container for multiple buttons that can be used to - group buttons together and apply styles to them. This component is - useful when you have a group of buttons that need to be styled in a - similar way. -

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

- The ButtonGroup component can be used to group related buttons - together. It is a container for multiple buttons that can be used to - group buttons together and apply styles to them. This component is - useful when you have a group of buttons that need to be styled in a - similar way. -

- -

Basic Usage

- -

- The buttons can be grouped by wrapping them with the ButtonGroup - component. They need to be immediate children. -

-
-
- - - {buttons} - - -
- -
- -

Button Variant

- -

- The ButtonGroup component supports three variants: Filled, Outlined, - and Text. -

-
-
- - *": { - m: 1, - }, - }} - > - - {buttons} - - - {buttons} - - - {buttons} - - - -
- -
- -

Vertical Group

- -

- The ButtonGroup component can be used to create a vertical group of - buttons by setting the vertical prop to true. -

-
-
- - *": { - m: 1, - }, - }} - > - - {buttons} - - - {buttons} - - - {buttons} - - - -
- -
- -

Disable elevation

- -

- The ButtonGroup component can be used to create a group of buttons - with no elevation by setting the disableElevation prop to true. -

-
-
- - - {buttons} - - -
- -
- -

Sizes

- -

- For now, two different sizes of buttons exist: 56px height and 48px - height. -

-
-
- - *": { - m: 1, - }, - }} - > - - {buttons} - - - {buttons} - - - {buttons} - - - -
- -
- -

Full Width

- -

- The ButtonGroup component can be used to create a group of buttons - that take up the full width of the container by setting the - fullWidth prop to true. -

-
-
- - - {buttons} - - -
- -
-
-
- - ); -}; - -export default ButtonGroupCode; diff --git a/src/sections/Projects/Sistent/components/button-group/guidance.js b/src/sections/Projects/Sistent/components/button-group/guidance.js deleted file mode 100644 index bd9ae5122313d..0000000000000 --- a/src/sections/Projects/Sistent/components/button-group/guidance.js +++ /dev/null @@ -1,134 +0,0 @@ -import React from "react"; -import { navigate } from "gatsby"; -import { useLocation } from "@reach/router"; -import TabButton from "../../../../../reusecore/Button"; -import { SistentLayout } from "../../sistent-layout"; - -const ButtonGroupGuidance = () => { - const location = useLocation(); - - return ( - -
- -

Button Group

- -

- The ButtonGroup component can be used to group related buttons - together. It is a container for multiple buttons that can be used to - group buttons together and apply styles to them. This component is - useful when you have a group of buttons that need to be styled in a - similar way. -

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

- The ButtonGroup component can be used to group related buttons - together. It is a container for multiple buttons that can be used to - group buttons together and apply styles to them. This component is - useful when you have a group of buttons that need to be styled in a - similar way. -

- -

Labeling

- -

- The ButtonGroup component should be labeled with a heading that - describes the group of buttons. This heading should be descriptive - and should clearly indicate the purpose of the group of buttons. -

- -

Placement

- -

- The ButtonGroup component should be placed in a location that is - easily accessible to users. It should be placed in a prominent - location on the page where users can easily find it. The buttons - within the ButtonGroup should be large enough to be easily - clickable, and there should be enough space between the buttons to - prevent accidental clicks. Additionally, the ButtonGroup should be - accessible via keyboard navigation, and screen readers should be - able to read the labels of the buttons within the group. -

- -

Behavior

- -

- The ButtonGroup component should behave in a consistent and - predictable manner. When a user clicks on a button within the group, - the button should respond visually to indicate that it has been - clicked. The ButtonGroup should also provide visual feedback when a - user hovers over a button, to indicate that the button is clickable. - Additionally, the ButtonGroup should be accessible via keyboard - navigation, and screen readers should be able to read the labels of - the buttons within the group. -

- -

Styling

- -

- The ButtonGroup component should be styled in a way that is - consistent with the rest of the application. The buttons within the - group should be styled in a way that is visually distinct from other - buttons on the page, to indicate that they are part of a group. The - ButtonGroup should also be styled in a way that is accessible to - users with color blindness or low vision. The buttons within the - group should have a visible focus state, and the focus should be set - to the first button in the group by default. -

- -

Accessibility

- -

- The ButtonGroup component should be accessible to all users, - including those with disabilities. The component should be keyboard - navigable, and screen readers should be able to read the labels of - the buttons within the group. The buttons within the ButtonGroup - should have a visible focus state, and the focus should be set to - the first button in the group by default. The ButtonGroup should - also be styled in a way that is accessible to users with color - blindness or low vision. -

-
-
- - ); -}; - -export default ButtonGroupGuidance; diff --git a/src/sections/Projects/Sistent/components/button-group/index.js b/src/sections/Projects/Sistent/components/button-group/index.js deleted file mode 100644 index 52b69b2d44f65..0000000000000 --- a/src/sections/Projects/Sistent/components/button-group/index.js +++ /dev/null @@ -1,258 +0,0 @@ -import React from "react"; -import { navigate } from "gatsby"; -import { useLocation } from "@reach/router"; - -import { - SistentThemeProvider, - ButtonGroup, - Button, - Box, -} from "@sistent/sistent"; -import TabButton from "../../../../../reusecore/Button"; -import { SistentLayout } from "../../sistent-layout"; -import { Row } from "../../../../../reusecore/Layout"; -import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode"; - -const buttons = [ - , - , - , -]; - -const SistentButtonGroup = () => { - const location = useLocation(); - const { isDark } = useStyledDarkMode(); - - return ( - -
- -

Button Group

- -

- The ButtonGroup component can be used to group related buttons - together. It is a container for multiple buttons that can be used to - group buttons together and apply styles to them. This component is - useful when you have a group of buttons that need to be styled in a - similar way. -

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

- The ButtonGroup component is a container for multiple buttons that - can be used to group buttons together and apply styles to them. This - component is useful when you have a group of buttons that need to be - styled in a similar way. The ButtonGroup component can be used to - group related buttons together. -

- -

Basic Usage

- -

- The buttons can be grouped by wrapping them with the ButtonGroup - component. They need to be immediate children. -

- - - - {buttons} - - - - -

Button variants

- -

- The ButtonGroup component supports the following variants: contained - (default), outlined, and text. -

- - - *": { - m: 1, - }, - }} - > - - {buttons} - - - {buttons} - - - {buttons} - - - - - -

Vertical Group

- -

- The ButtonGroup component can be used to create a vertical group of - buttons by setting the vertical prop to true. -

- - - *": { - m: 1, - }, - }} - > - - {buttons} - - - {buttons} - - - {buttons} - - - - - -

Disabled elevation

- -

- You can remove the elevation with the disableElevation{" "} - prop. -

- - - - {buttons} - - - - -

Sizes

- -

- The ButtonGroup component supports the following sizes: small, - medium (default), and large. -

- - - *": { - m: 1, - }, - }} - > - - {buttons} - - - {buttons} - - - {buttons} - - - - - -

Full width

- -

- You can make the ButtonGroup full width with the{" "} - fullWidth prop. -

- - - - {buttons} - - - -
-
- - ); -}; - -export default SistentButtonGroup; diff --git a/src/sections/Projects/Sistent/components/button/code-block.js b/src/sections/Projects/Sistent/components/button/code-block.js deleted file mode 100644 index 2a7463d6ceecf..0000000000000 --- a/src/sections/Projects/Sistent/components/button/code-block.js +++ /dev/null @@ -1,20 +0,0 @@ -import React, { useState } from "react"; -import Code from "../../../../../components/CodeBlock"; - -export const CodeBlock = ({ name, code }) => { - const [showCode, setShowCode] = useState(false); - const onChange = () => { - setShowCode((prev) => !prev); - }; - return ( -
- - - {showCode && ( - - )} -
- ); -}; diff --git a/src/sections/Projects/Sistent/components/button/code.js b/src/sections/Projects/Sistent/components/button/code.js deleted file mode 100644 index bde29a50fa51e..0000000000000 --- a/src/sections/Projects/Sistent/components/button/code.js +++ /dev/null @@ -1,181 +0,0 @@ -import React from "react"; -import { navigate } from "gatsby"; -import { useLocation } from "@reach/router"; - -import { Button, SistentThemeProvider } from "@sistent/sistent"; -import { CodeBlock } from "./code-block"; -import { FaArrowRight } from "@react-icons/all-files/fa/FaArrowRight"; -import { SistentLayout } from "../../sistent-layout"; - -import TabButton from "../../../../../reusecore/Button"; -import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode"; - -const codes = [ - ` - - `, - ` - - `, - ` - - `, - ` - - - `, - ` - - `, -]; - -const ButtonCode = () => { - const location = useLocation(); - const { isDark } = useStyledDarkMode(); - - return ( - -
- -

Button

- -

- A button is an interactive element that triggers a specific action, - takes users where they need to go, and points out what happens next in - a given flow. -

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

- Buttons communicate actions to users and they can be placed at - several places throughout the user interface. -

- -

Basic Button

- -

The button comes in three types: Filled, Outlined, and Text.

-

Filled Button

-

- Mostly used for high-emphasis actions and are primarily - distinguished by their fill. They are used to represent actions that - are primary to the solution. -

-
-
- - - -
- -
-

Outlined Button

-

- Can be used for both medium and sometimes high-emphasis actions. -

-
-
- - - -
- -
-

Text Button

-

- Mostly used for less pronounced and very low emphasis actions. Can - also be used for text links as well. -

-
-
- - - -
- -
- -

Sizes

- -

- For now, two different sizes of buttons exist: 56px height and 48px - height. -

-
-
- - - - -
- -
- -

Adding Icons

- -

- Icons are mostly added to filled and outlined buttons and they are - used to better describe the information being passed across by the - button’s label. -

-
-
- - - -
- -
-
-
- - ); -}; - -export default ButtonCode; \ No newline at end of file diff --git a/src/sections/Projects/Sistent/components/button/guidance.js b/src/sections/Projects/Sistent/components/button/guidance.js deleted file mode 100644 index 52b2b902b0c00..0000000000000 --- a/src/sections/Projects/Sistent/components/button/guidance.js +++ /dev/null @@ -1,199 +0,0 @@ -import React from "react"; -import { navigate } from "gatsby"; -import { useLocation } from "@reach/router"; -import { Row } from "../../../../../reusecore/Layout"; -import { Button, SistentThemeProvider } from "@sistent/sistent"; -import { SistentLayout } from "../../sistent-layout"; - -import TabButton from "../../../../../reusecore/Button"; -import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode"; - -const ButtonGuidance = () => { - const location = useLocation(); - const { isDark } = useStyledDarkMode(); - - return ( - -
- -

Button

- -

- A button is an interactive element that triggers a specific action, - takes users where they need to go, and points out what happens next in - a given flow. -

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

- For proper application, these buttons can be used for different - purposes to enable easier and consistent combination when guiding - users across digital experiences. -

- -

Function

- -

- The function of different buttons is what determines its usage and - how well suited it is to be applied in a given scenario to solve an - existing problem or complete a pending task. Functions or roles that - can be assigned to buttons in a particular design include: -

-

Primary Button

-

- Primary buttons are used for the most important actions on a page. - It should be the key button that helps the user navigate in a given - flow or while trying to perform a specific action. This could apply - in cases like when the user needs to submit a from, proceed to a new - page, or complete an action. The filled button serves as the primary - button. -

- - -
-
- - ); -}; - -export default ButtonGuidance; diff --git a/src/sections/Projects/Sistent/components/button/index.js b/src/sections/Projects/Sistent/components/button/index.js deleted file mode 100644 index 12db13bd269ea..0000000000000 --- a/src/sections/Projects/Sistent/components/button/index.js +++ /dev/null @@ -1,194 +0,0 @@ -import React from "react"; -import { navigate } from "gatsby"; -import { useLocation } from "@reach/router"; - -import { SistentThemeProvider, Button } from "@sistent/sistent"; -import TabButton from "../../../../../reusecore/Button"; -import { SistentLayout } from "../../sistent-layout"; -import { Col, Row } from "../../../../../reusecore/Layout"; -import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode"; - -const SistentButton = () => { - const location = useLocation(); - const { isDark } = useStyledDarkMode(); - - return ( - -
- -

Button

- -

- A button is an interactive element that triggers a specific action, - takes users where they need to go, and points out what happens next in - a given flow. -

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

- Buttons are crucial and integral elements in an interface. They are - mostly used to trigger actions and in so doing, take users to where - they need to be in any step of a flow. Buttons can be used in tandem - with other elements to piece designs together and convey digital - experiences. -

- -

Types

- -

- In order to establish hierarchy, prominence and flexibility, - multiple types of buttons exist that can assist users to achieve - different aims. With the different styling on these buttons, it - makes it easier for users to navigate and arrive at their solutions - faster. -

-

Filled

-

- Filled buttons are buttons that consist a background color fill and - a text in it. Depending on the theme or intended action, the color - fill can range from a primary brand color to any other applicable - color in a brand’s color palette. -

- - -
-
- - ); -}; - -export default SistentButton; diff --git a/src/sections/Projects/Sistent/components/chip/code.js b/src/sections/Projects/Sistent/components/chip/code.js deleted file mode 100644 index 8eb4e318120b5..0000000000000 --- a/src/sections/Projects/Sistent/components/chip/code.js +++ /dev/null @@ -1,206 +0,0 @@ -import React from "react"; -import { navigate } from "gatsby"; -import { useLocation } from "@reach/router"; - -import { Chip, SistentThemeProvider, DesignIcon } from "@sistent/sistent"; -import { CodeBlock } from "../button/code-block"; -import { SistentLayout } from "../../sistent-layout"; - -import TabButton from "../../../../../reusecore/Button"; -import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode"; - -const codes = [ - ` - - `, - ` - - `, - ` - {}} /> - `, - ` - - - `, - ` - - - `, - ` - } /> - `, - ` - - - - - `, -]; - -const ChipCode = () => { - const location = useLocation(); - const { isDark } = useStyledDarkMode(); - - return ( - -
- -

Chip

- -

- Chips are compact elements that represent an input, attribute, or action. - They allow users to enter information, make selections, filter content, or trigger actions. -

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

- Chips can be used to display information, enable user interaction, - and provide a way to input or filter data. -

- -

Basic Chip

- -

The chip comes in different types: Basic, Clickable, and Deletable.

-

Basic Chip

-

- Basic chips display simple information and are typically non-interactive. - They're useful for showing tags, categories, or labels. -

-
-
- - - -
- -
-

Clickable Chip

-

- Clickable chips respond to user interaction and can trigger actions - when clicked. -

-
-
- - - -
- -
-

Deletable Chip

-

- Deletable chips include a delete icon that allows users to remove them. -

-
-
- - {}} /> - -
- -
- -

Variants

- -

- Chips come in different visual styles: filled and outlined. -

-
-
- - - - -
- -
- -

Sizes

- -

- Chips are available in different sizes: small and medium. -

-
-
- - - - -
- -
- -

- Chips can display icons alongside text labels for enhanced visual identification. -

-
-
- - } - style={{ paddingLeft: "4px", margin: "0 8px" }} - /> - -
- -
- -

Colors

- -

- Chips can use different colors to convey meaning or status. -

-
-
- - - - - - -
- -
-
-
- - ); -}; - -export default ChipCode; diff --git a/src/sections/Projects/Sistent/components/chip/guidance.js b/src/sections/Projects/Sistent/components/chip/guidance.js deleted file mode 100644 index fae0b0515482d..0000000000000 --- a/src/sections/Projects/Sistent/components/chip/guidance.js +++ /dev/null @@ -1,144 +0,0 @@ -import React from "react"; -import { navigate } from "gatsby"; -import { useLocation } from "@reach/router"; -import { Row } from "../../../../../reusecore/Layout"; -import { Chip, SistentThemeProvider,DesignIcon ,MesheryFilterIcon } from "@sistent/sistent"; -import { SistentLayout } from "../../sistent-layout"; - -import TabButton from "../../../../../reusecore/Button"; -import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode"; - -const ChipGuidance = () => { - const location = useLocation(); - const { isDark } = useStyledDarkMode(); - - return ( - -
- -

Chip

- -

- Chips are compact elements that represent an input, attribute, or action. - They allow users to enter information, make selections, filter content, or trigger actions. -

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

- Chips provide a compact way to display information and enable user - interaction. They should be used thoughtfully to enhance the user - experience without overwhelming the interface. -

- -

Usage

- -

- Chips serve various purposes in user interfaces and can be applied - in different contexts to improve usability and information display. -

-

Filters

-

- Chips are excellent for displaying active filters in search results, - data tables, or content lists. They provide a clear visual indication - of what filters are applied and allow easy removal. -

- - - {}} color="primary" style={{ margin: "0 8px" }} /> - - -

Tags and Categories

-

- Use chips to display tags, categories, or labels associated with content. - They help users quickly understand the nature or classification of items. -

- - - - - - - -

Logo Chip

-

- Chips can display icons alongside text labels for enhanced visual identification. -

- - - } - style={{ paddingLeft: "4px", margin: "0 8px" }} - /> - } - style={{ paddingLeft: "4px" ,margin: "0 8px" }} - /> - - -

Status Indicators

-

- Use colored chips to indicate status, priority, or state of items. - The color should be meaningful and consistent with your design system. -

- - - - - - - - -

Best Practices

- -
    -
  • Keep chips simple and easy to understand.
    • -
  • Use short, clear labels for each chip.
    • -
  • Only add icons or colors when they add real value or meaning.
    • -
  • Group related chips together for better organization.
    • -
  • Maintain consistent spacing and alignment between chips.
    • -
  • Avoid cluttering the interface with too many chips or styles.
    • -
  • Ensure interactive chips have clear hover, focus, and active states.
    • -
  • Use colors meaningfully and consistently (e.g., green for success, red for errors).
    • -
-
-
- - ); -}; - -export default ChipGuidance; diff --git a/src/sections/Projects/Sistent/components/chip/index.js b/src/sections/Projects/Sistent/components/chip/index.js deleted file mode 100644 index bf7ba746f6ef5..0000000000000 --- a/src/sections/Projects/Sistent/components/chip/index.js +++ /dev/null @@ -1,199 +0,0 @@ -import React from "react"; -import { navigate } from "gatsby"; -import { useLocation } from "@reach/router"; - -import { SistentThemeProvider, Chip, DesignIcon, MesheryFilterIcon } from "@sistent/sistent"; -import TabButton from "../../../../../reusecore/Button"; -import { SistentLayout } from "../../sistent-layout"; -import { Row } from "../../../../../reusecore/Layout"; -import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode"; - -const SistentChip = () => { - const location = useLocation(); - const { isDark } = useStyledDarkMode(); - - return ( - -
- -

Chip

- -

- Chips are compact elements that represent an input, attribute, or action. - They allow users to enter information, make selections, filter content, or trigger actions. -

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

- Chips are helpful elements that can be used to display selected options, - filter content, or trigger actions. They provide a clear visual representation - of discrete pieces of information and can be interactive or static depending - on the use case. -

- -

Types

- -

- Different types of chips serve various purposes in the user interface, - from displaying information to enabling user interaction. -

-

Basic Chip

-

- Basic chips display simple information and are typically non-interactive. - They're useful for showing tags, categories, or labels. -

- - - - - -

Clickable Chip

-

- Clickable chips respond to user interaction and can trigger actions - when clicked. They're useful for navigation or performing specific operations. -

- - - - - -

Deletable Chip

-

- Deletable chips include a delete icon that allows users to remove them. - They're commonly used for selected filters, tags, or form inputs. -

- - - {}} /> - - - -

Variants

- -

- Chips come in different visual styles to match various design needs - and levels of emphasis. -

-

Filled

-

- Filled chips have a solid background color and are the default variant. - They provide good contrast and visibility. -

- - - - - -

Outlined

-

- Outlined chips have a transparent background with a border. - They're useful when you need a lighter visual treatment. -

- - - - - - -

Sizes

- -

- Chips are available in different sizes to accommodate various use cases - and design requirements. -

-

Small

-

- Small chips are compact and work well in dense layouts or when space is limited. -

- - - - - -

Medium

-

- Medium chips are the default size and work well in most situations. -

- - - - - - -

- Logo chips combine icons with text labels to provide visual context - and improve user recognition of different categories or actions. -

- - - } - style={{ paddingLeft: "4px", margin: "0 8px" }} - /> - } - style={{ paddingLeft: "4px", margin: "0 8px" }} - /> - - - -

Colors

- -

- Chips can use different colors to convey meaning, status, or to match - your brand's color scheme. -

- - - - - - - - - - -
-
- - ); -}; - -export default SistentChip; diff --git a/src/sections/Projects/Sistent/components/circularprogress/code.js b/src/sections/Projects/Sistent/components/circularprogress/code.js deleted file mode 100644 index f2e855461b157..0000000000000 --- a/src/sections/Projects/Sistent/components/circularprogress/code.js +++ /dev/null @@ -1,196 +0,0 @@ -import React, { useState, useEffect } from "react"; -import { navigate } from "gatsby"; -import { useLocation } from "@reach/router"; - -import { SistentThemeProvider, CircularProgress } from "@sistent/sistent"; -import { CodeBlock } from "../button/code-block"; - - -import TabButton from "../../../../../reusecore/Button"; -import { SistentLayout } from "../../sistent-layout"; -import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode"; - -const codes = [ - "", - "", - ` - -`, - ` - -`, - ` - -`, -]; - -const SistentCircularProgress = () => { - const location = useLocation(); - const { isDark } = useStyledDarkMode(); - const [progress, setProgress] = useState(0); - - useEffect(() => { - const timer = setInterval(() => { - setProgress((prevProgress) => (prevProgress >= 100 ? 0 : prevProgress + 10)); - }, 800); - - return () => { - clearInterval(timer); - }; - }, []); - - return ( - -
- -

Circular Progress

- -

- Circular progress indicators provide visual feedback about ongoing processes, - helping users understand that their request is being processed. They can show - either determinate progress (specific completion percentage) or indeterminate - progress (unknown duration). -

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

- The CircularProgress component is essential for communicating - system status to users. It provides immediate feedback during loading - states, file uploads, data processing, and other time-consuming operations. -

- -

Basic Circular Progress

- -

- A simple indeterminate circular progress indicator that shows continuous loading. - This is the default behavior when no variant or value props are provided. -

-
-
- - - -
- -
- - -

Determinate Progress

- -

- The determinate variant shows specific progress completion using the - value prop (0-100). This variant is perfect for file uploads, - downloads, or any process with measurable progress. -

-
-
- - - -
- -
- - -

Size Variations

- -

- Circular progress indicators can be scaled to different sizes using - the size prop. This flexibility allows them to fit various layout - requirements, from small inline indicators to prominent loading states. -

-
-
- -
- - - -
- -
- -
- - -

Thickness Variations

- -

- The thickness prop controls the width of the progress arc, allowing - you to create subtle or bold visual emphasis depending on your design - requirements. Thicker lines provide more visual weight and prominence. -

-
-
- -
- - - -
- -
- -
- - -

Color Options

- -

- Circular progress indicators support various color themes to match - your application's design system. Colors can convey different meanings - or states, such as success, warning, or error conditions. -

-
-
- -
- - - -
- -
- -
-
-
- - ); -}; - -export default SistentCircularProgress; \ No newline at end of file diff --git a/src/sections/Projects/Sistent/components/circularprogress/guidance.js b/src/sections/Projects/Sistent/components/circularprogress/guidance.js deleted file mode 100644 index 8ce43d954d424..0000000000000 --- a/src/sections/Projects/Sistent/components/circularprogress/guidance.js +++ /dev/null @@ -1,187 +0,0 @@ -import React, { useState } from "react"; -import { navigate } from "gatsby"; -import { useLocation } from "@reach/router"; -import { SistentLayout } from "../../sistent-layout"; -import { SistentThemeProvider, Button, CircularProgress } from "@sistent/sistent"; -import { Row } from "../../../../../reusecore/Layout"; -import TabButton from "../../../../../reusecore/Button"; -import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode"; - -const CircularprogressGuidance = () => { - const { isDark } = useStyledDarkMode(); - const location = useLocation(); - - const [size, setSize] = useState(40); // default size - const [thickness, setThickness] = useState(4); // default thickness - const [currentColor, setCurrentColor] = useState("primary"); // default color - const maxSize = 80; - const minSize = 20; - const maxThickness = 10; - const minThickness = 1; - const colors = ["primary", "secondary", "success", "error", "warning", "info"]; - - return ( - -
- -

Circular Progress

- -

- The Circular Progress component displays a circular loading indicator that represents - either determinate or indeterminate progress in your application. It's commonly used - to show loading states, progress of operations, or completion percentages. -

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

- Proper usage of the Circular Progress component can enhance user experience by visually indicating progress status. Below are some guidelines to ensure effective implementation. -

- - -

Usage

- -

- To use the Circular Progress component, include it in your layout with the desired variant prop to specify whether it should be determinate or indeterminate. For example: -

-
    -
  • variant="indeterminate" for continuous loading.
    • -
  • variant="determinate" for specific progress indication.
    • -
-

- The value prop is required for determinate progress to indicate how far along the task is, ranging from 0 to 100. -

-
- -

Sizing

- -

- Adjust the size of the Circular Progress component using the size prop. For example, set size={60} to increase the diameter of the circular loader. -

- - - -
-
- - - -
- -

Thickness

- -

- Control the thickness of the circular progress arc using the thickness prop. This allows for customization of the loader's appearance. For instance: -

- - - -
-
- - - -
- -

Colors

- -

- Customize the color of the Circular Progress component using the color prop. Available colors include primary, secondary, success, error, warning, and info to match your design system. -

- - - -
- {colors.map((color) => ( -
- - -
-
- - ); -}; - -export default CircularprogressGuidance; \ No newline at end of file diff --git a/src/sections/Projects/Sistent/components/circularprogress/index.js b/src/sections/Projects/Sistent/components/circularprogress/index.js deleted file mode 100644 index 7f5132d8673c3..0000000000000 --- a/src/sections/Projects/Sistent/components/circularprogress/index.js +++ /dev/null @@ -1,112 +0,0 @@ -import React from "react"; -import { navigate } from "gatsby"; -import { useLocation } from "@reach/router"; -import { SistentThemeProvider, CircularProgress } from "@sistent/sistent"; -import TabButton from "../../../../../reusecore/Button"; -import { SistentLayout } from "../../sistent-layout"; -import { Row } from "../../../../../reusecore/Layout"; -import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode"; - -const SistentCircularprogress = () => { - const location = useLocation(); - const { isDark } = useStyledDarkMode(); - - return ( - -
- -

Circular Progress

- -

- The Circular Progress component displays a circular loading indicator that represents - either determinate or indeterminate progress in your application. It's commonly used - to show loading states, progress of operations, or completion percentages. -

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

- Circular Progress indicators inform users about the status of ongoing processes, - such as loading an application, submitting a form, or updating data. They help - maintain user engagement by providing visual feedback about the progress of operations. -

- -

Usage

- -

- The component can be used in two main variants: -

-
    -

  • Determinate: Shows definite progress with a specific percentage value

    • -

  • Indeterminate: Shows an animation indicating an unspecified wait time

    • -
- -

Basic Example

- -

- Below is a simple example of how to use the CircularProgress component. -

-
- - - - - -
- -

Key Features

- -

- You can customize the appearance of the Circular Progress using - various props to define how the component - renders relative to its container element. -

-

Variants

-
    -

  • Determinate: Displays specific progress percentage

    • -

  • Indeterminate: Shows continuous animation for unknown duration processes

    • -
-

Customization Options

-
    -

  • Size: Adjustable diameter of the progress circle

    • -

  • Thickness: Controllable width of the progress arc

    • -

  • Color: Customizable colors for both track and progress

    • -

  • Value: Percentage complete (0-100) for determinate variant

    • -
-
-
- - ); -}; - -export default SistentCircularprogress; \ No newline at end of file diff --git a/src/sections/Projects/Sistent/components/collapse/code.js b/src/sections/Projects/Sistent/components/collapse/code.js deleted file mode 100644 index 7d6709d54cc94..0000000000000 --- a/src/sections/Projects/Sistent/components/collapse/code.js +++ /dev/null @@ -1,149 +0,0 @@ -import React, { useState } from "react"; -import { Collapse, Button, SistentThemeProvider } from "@sistent/sistent"; -import { SistentLayout } from "../../sistent-layout"; -import TabButton from "../../../../../reusecore/Button"; -import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode"; -import { CodeBlock } from "../button/code-block"; -import { navigate } from "gatsby"; -import { useLocation } from "@reach/router"; - -const codes = [ - " \n \n \n
Content to be collapsed/expanded
\n \n ", - " \n \n \n
Content that's expanded by default
\n \n ", - " \n \n \n
Content that unmounts when collapsed
\n \n ", - " \n \n \n
Custom transition content
\n \n ", -]; - -const CollapseComponent = () => { - const { isDark } = useStyledDarkMode(); - const location = useLocation(); - - const [expanded1, setExpanded1] = useState(false); - const [expanded2, setExpanded2] = useState(true); - const [expanded3, setExpanded3] = useState(false); - const [expanded4, setExpanded4] = useState(false); - - return ( - -
- -

Collapse

- -

- The Collapse component provides a smooth, animated way to show and hide content. - Below are various examples demonstrating its capabilities and usage patterns. -

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

- The Collapse component provides a smooth, animated way to show and hide content. - Below are various examples demonstrating its capabilities and usage patterns. -

- -

Basic Collapse

- -

A simple collapsible section that can be toggled with a button click.

-
-
- - - -
Content to be collapsed/expanded
- - -
- -
- - -

Default Expanded

- -

A collapsible section that starts expanded by default.

-
-
- - - -
Content that's expanded by default
- - -
- -
- - -

Unmount on Exit

- -

Unmounts the content when collapsed for better performance with large content.

-
-
- - - -
Content that unmounts when collapsed
- - -
- -
- - -

Custom Transition

- -

Customize the transition duration and easing function.

-
-
- - - -
Custom transition content
- - -
- -
-
-
- - ); -}; - -export default CollapseComponent; \ No newline at end of file diff --git a/src/sections/Projects/Sistent/components/collapse/guidance.js b/src/sections/Projects/Sistent/components/collapse/guidance.js deleted file mode 100644 index e44039d0d76de..0000000000000 --- a/src/sections/Projects/Sistent/components/collapse/guidance.js +++ /dev/null @@ -1,141 +0,0 @@ -import React from "react"; -import { navigate } from "gatsby"; -import { useLocation } from "@reach/router"; -import { SistentLayout } from "../../sistent-layout"; -import TabButton from "../../../../../reusecore/Button"; - -const Guidance = () => { - const location = useLocation(); - - return ( - -
- -

Collapse

- -

- The Collapse component provides a smooth, animated transition for showing and hiding content. - It's an essential UI pattern for managing content density and progressive disclosure of information. -

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

Best Practices

- -
    -
  • - Clear Triggers: Always use clear, descriptive labels for collapse triggers that indicate the action and content. -
    • -
  • - Progressive Disclosure: Use collapse to hide secondary content or advanced options that aren't immediately needed. -
    • -
  • - Performance: For large content, consider using unmountOnExit to improve performance by unmounting content when collapsed. -
    • -
  • - Animation Timing: Adjust the timeout prop to match your application's animation speed for a cohesive feel. -
    • -
  • - Consistent Behavior: Maintain consistent behavior across your application - don't mix different animation patterns for similar interactions. -
    • -
- - - -

Accessibility Considerations

- -
    -
  • - Keyboard Navigation: Ensure the collapse trigger is keyboard accessible and can be activated with both Enter and Space keys. -
    • -
  • - ARIA Attributes: The component automatically handles aria-expanded and aria-controls attributes. -
    • -
  • - Focus Management: Consider managing focus when content is expanded/collapsed, especially for screen reader users. -
    • -
  • - Screen Reader Announcements: Use aria-live regions to announce state changes to screen reader users. -
    • -
- - - -

When to Use

- -
    -
  • FAQs and help sections
    • -
  • Forms with optional or advanced fields
    • -
  • Content that can be toggled on/off
    • -
  • Accordion interfaces
    • -
  • Mobile navigation menus
    • -
- - - -

When to Consider Something Else

- -
    -
  • For simple show/hide without animation, consider conditional rendering
    • -
  • For modal dialogs or overlays, use the Dialog component instead
    • -
  • For tabbed interfaces, consider using the Tabs component
    • -
- - - -

Performance Optimization

- -
    -
  • Use unmountOnExit for better performance with large content
    • -
  • Consider code-splitting for complex content within collapsible sections
    • -
  • Memoize the content if it includes expensive computations
    • -
- - - -

Common Patterns

- -
    -
  • Accordion: Multiple collapsible sections where only one can be open at a time
    • -
  • Expandable Cards: Cards with a summary that can be expanded for more details
    • -
  • Progressive Disclosure: Show advanced options or additional information on demand
    • -
  • Mobile Navigation: Collapsible menus for mobile views
    • -
-
-
- - ); -}; - -export default Guidance; \ No newline at end of file diff --git a/src/sections/Projects/Sistent/components/collapse/index.js b/src/sections/Projects/Sistent/components/collapse/index.js deleted file mode 100644 index 651b6b0a963a6..0000000000000 --- a/src/sections/Projects/Sistent/components/collapse/index.js +++ /dev/null @@ -1,112 +0,0 @@ -import React, { useState, useMemo } from "react"; -import { navigate } from "gatsby"; -import { useLocation } from "@reach/router"; -import { SistentThemeProvider, Collapse, Button } from "@sistent/sistent"; -import TabButton from "../../../../../reusecore/Button"; -import { SistentLayout } from "../../sistent-layout"; -import { Row } from "../../../../../reusecore/Layout"; -import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode"; - -const SistentCollapse = () => { - const location = useLocation(); - const { isDark } = useStyledDarkMode(); - const [expanded, setExpanded] = useState(false); - const [expanded2, setExpanded2] = useState(true); - - // Memoize the active tab to prevent unnecessary re-renders - const activeTab = useMemo(() => { - const path = location.pathname; - if (path.endsWith("/code")) return "code"; - if (path.endsWith("/guidance")) return "guidance"; - return "overview"; - }, [location.pathname]); - - // Handle tab change - const handleTabChange = (tab) => { - const basePath = "/projects/sistent/components/collapse"; - const newPath = tab === "overview" ? basePath : `${basePath}/${tab}`; - if (location.pathname !== newPath) { - navigate(newPath); - } - }; - - return ( - -
- -

Collapse

- -

- The Collapse component allows you to create collapsible content areas that can be toggled to show or hide content. It's commonly used for FAQs, accordions, and other UI elements where space needs to be managed efficiently. -

- -
- handleTabChange("overview")} - title="Overview" - /> - handleTabChange("guidance")} - title="Guidance" - /> - handleTabChange("code")} - title="Code" - /> -
- -
-

- The Collapse component provides a smooth, animated way to show and hide content. It's particularly useful for creating space-efficient interfaces and progressive disclosure of information. -

- - - -

Basic Collapse

- -

- A simple collapsible section that can be toggled with a button click. -

- - - - -
- This content will be collapsed/expanded with a smooth animation. - You can put any content here, including other React components. -
- - - - - - -

Default Expanded

- -

- A collapsible section that starts expanded by default. -

- - - - -
- This content is expanded by default. Click the button to collapse it. -
- - - -
-
- - ); -}; - -export default SistentCollapse; \ No newline at end of file diff --git a/src/sections/Projects/Sistent/components/container/code.js b/src/sections/Projects/Sistent/components/container/code.js deleted file mode 100644 index 3a7aadda9e134..0000000000000 --- a/src/sections/Projects/Sistent/components/container/code.js +++ /dev/null @@ -1,221 +0,0 @@ -import React from "react"; -import { navigate } from "gatsby"; -import { useLocation } from "@reach/router"; - -import { SistentThemeProvider, Container, Box } from "@sistent/sistent"; -import { CodeBlock } from "../button/code-block"; -// import { FaArrowRight } from "@react-icons/all-files/fa/FaArrowRight"; -import { SistentLayout } from "../../sistent-layout"; - -import TabButton from "../../../../../reusecore/Button"; -import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode"; - -const codes = [ - ` - - - - `, - - ` - - - - `, - - ` - - - - -`, - ` - - - - -

- This is a nested container example. -

- - - - -`, -]; - -const ContainerCode = () => { - const location = useLocation(); - const { isDark } = useStyledDarkMode(); - - return ( - -
- -

Container

- -

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

- The Container component is an essential building block for creating - layouts. Its ability to center content, provide fluid and fixed - widths, and adapt responsively to different screen sizes makes it an - invaluable tool for developers. By using the Container effectively, - you can ensure that your application maintains a clean and organized - appearance while enhancing the user experience. -

- -

Fluid Container Example

- -

- By default, the Container is fluid, meaning it adjusts its width - based on the viewport size. You can control its maximum width by - utilizing the maxWidth prop. -

-
-
- - - - - -
- -
-
-

maxWidth Prop Values

-

- The maxWidth prop accepts several predefined values, each - corresponding to specific breakpoints. Here are the available - options: -

-
    -
  • - "xs": This sets the maximum width to the - extra-small breakpoint (0px to 600px). The container will not - exceed this width, providing a compact layout suitable for - mobile devices. -
    • -
  • - "sm": The small breakpoint (600px to 960px) - ensures that the container expands up to a width of 600px, - making it a good choice for tablets and smaller desktops. -
    • -
  • - "md": This option sets the maximum width to the - medium breakpoint (960px to 1280px). It is useful for standard - desktop views while still accommodating smaller devices. -
    • -
  • - "lg": The large breakpoint (1280px to 1920px) - allows the container to grow larger, up to 1280px, ideal for - wide-screen displays and detailed layouts. -
    • -
  • - "xl": This sets the maximum width to the - extra-large breakpoint (1920px and above). It's particularly - beneficial for high-resolution screens where more content can be - displayed without feeling cramped. -
    • -
  • - false: If set to false, the container will have - no maximum width constraint, allowing it to stretch the full - width of its parent element. -
    • -
-
- -
-

- Another Example with maxWith = "md" -

-
-
- - - - - -
- -
-
- -

Fixed Container Example

- -

- If you prefer a fixed width, you can use the fixed prop. This aligns - the container's max-width with the minimum width of the current - breakpoint, ensuring that your layout remains consistent across - different screen sizes -

-
-
- - - - - -
- -
- -

Nested Container Example

-

- A small section on nesting containers, emphasizing best practices. -

- -
-
- - - - - - - -
- -
-
-
- - ); -}; - -export default ContainerCode; diff --git a/src/sections/Projects/Sistent/components/container/guidance.js b/src/sections/Projects/Sistent/components/container/guidance.js deleted file mode 100644 index 5db325d0a9dfe..0000000000000 --- a/src/sections/Projects/Sistent/components/container/guidance.js +++ /dev/null @@ -1,166 +0,0 @@ -import React from "react"; -import { navigate } from "gatsby"; -import { useLocation } from "@reach/router"; -import { Row } from "../../../../../reusecore/Layout"; -import { SistentThemeProvider, Container, Box } from "@sistent/sistent"; -import { SistentLayout } from "../../sistent-layout"; - -import TabButton from "../../../../../reusecore/Button"; -import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode"; - -const ContainerGuidancePage = () => { - const location = useLocation(); - const { isDark } = useStyledDarkMode(); - - return ( - -
- -

Container

- -

- Containers are fundamental layout elements, used to center and - structure content horizontally. They can be fluid or fixed, helping - maintain alignment across different screen sizes and improving - readability. -

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

- The Container component is an essential building block for creating - layouts. Its ability to center content, provide fluid and fixed - widths, and adapt responsively to different screen sizes makes it an - invaluable tool for developers. By using the Container effectively, - you can ensure that your application maintains a clean and organized - appearance while enhancing the user experience -

- - -

Function

- - -

The Container serves various functions:

- -

Fluid Container

-

- A fluid container adapts to the width of its parent element and can - have a maximum width set by the maxWidth prop. This is - useful for creating responsive layouts that adjust based on screen - size. -

- - - - -

- This is a fluid container that adjusts its width based on - the screen size. -

- - - - - -

Fixed Container

-

- A fixed container uses predefined maximum widths based on - breakpoints, providing a consistent layout across different screen - sizes. This helps maintain a structured design that is visually - appealing. -

- - - - -

- This is a fixed container with a max width defined by the - current breakpoint -

- - - - - -

Nested Containers

-

- While nesting containers is possible, it is generally recommended to - avoid it unless necessary. Proper use of containers can enhance - layout structure without complicating the design. -

- - - - - -

- This is a nested container example. -

- - - - - - - -

Labeling

- -

- Container labeling is essential for understanding the layout - structure. Use clear and descriptive headings to indicate the - purpose of each container. -

- -

Use Cases

-

- Different use cases for containers include wrapping content - sections, creating responsive grids, and maintaining consistent - padding and margins across various components. -

- -

Responsive Design

-

- Leveraging the container's fluid and fixed properties contributes to - a responsive design that provides a seamless user experience across - devices of all sizes. -

-
-
- - ); -}; - -export default ContainerGuidancePage; diff --git a/src/sections/Projects/Sistent/components/container/index.js b/src/sections/Projects/Sistent/components/container/index.js deleted file mode 100644 index a8333a26ca64d..0000000000000 --- a/src/sections/Projects/Sistent/components/container/index.js +++ /dev/null @@ -1,126 +0,0 @@ -import React from "react"; -import { navigate } from "gatsby"; -import { useLocation } from "@reach/router"; - -import { SistentThemeProvider, Container, Box } from "@sistent/sistent"; -import TabButton from "../../../../../reusecore/Button"; -import { SistentLayout } from "../../sistent-layout"; -import { Row } from "../../../../../reusecore/Layout"; -import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode"; - -const SistentContainer = () => { - const location = useLocation(); - const { isDark } = useStyledDarkMode(); - - return ( - -
- -

Container

- -

- Containers are fundamental layout elements, used to center and - structure content horizontally. They can be fluid or fixed, helping - maintain alignment across different screen sizes and improving - readability. -

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

- The Container component is an essential building block for creating - layouts. Its ability to center content, provide fluid and fixed - widths, and adapt responsively to different screen sizes makes it an - invaluable tool for developers. By using the Container effectively, - you can ensure that your application maintains a clean and organized - appearance while enhancing the user experience. -

- -

Types of Container

- -

- Sistent has two main types of containers that cater to different - layout requirements: Fluid Containers and Fixed Containers. Each - type serves specific use cases in building responsive web - applications. -

-

1. Fluid Container

-

- A Fluid Container automatically adjusts its width to fill the - available space based on the viewport size. It allows for a - responsive layout that adapts to different screen sizes. -

-

Usage

-

- Ideal for layouts where you want the content to take full advantage - of the available width. The fluid nature of the container ensures - that it scales seamlessly across devices, from mobile to desktop. -

- - - - - - - - -

2. Fixed Container

-

- A Fixed Container has a predefined width that matches the minimum - width of the current breakpoint. This allows for a consistent and - controlled layout across different screen sizes. -

-

Usage

-

- Suitable for designs that require specific width constraints, - ensuring that your content does not stretch too wide on larger - screens. This is particularly useful for fixed-width layouts where - the visual structure is maintained. -

- - - - - - - -
-
- - ); -}; - -export default SistentContainer; diff --git a/src/sections/Projects/Sistent/components/dialog/code.js b/src/sections/Projects/Sistent/components/dialog/code.js deleted file mode 100644 index 77b63b0c291de..0000000000000 --- a/src/sections/Projects/Sistent/components/dialog/code.js +++ /dev/null @@ -1,269 +0,0 @@ -import React, { useState } from "react"; -import { navigate } from "gatsby"; -import { useLocation } from "@reach/router"; - -import { - Dialog, - DialogTitle, - DialogContent, - DialogActions, - Button, - SistentThemeProvider, - Input -} from "@sistent/sistent"; - -import { SistentLayout } from "../../sistent-layout"; -import TabButton from "../../../../../reusecore/Button"; -import { CodeBlock } from "../button/code-block"; -import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode"; - -const codes = [ - `const [open, setOpen] = useState(false); - -const handleOpen = () => setOpen(true); -const handleClose = () => setOpen(false); - - - - Confirm Action - - Do you want to proceed with this action? - - - - - -`, - `const [openFull, setOpenFull] = useState(false); - - - setOpenFull(false)} - fullScreen - maxWidth="lg" -> - Full-Screen Dialog - -

- This dialog stretches to full screen. Use it when the - user's full attention is needed. -

- - - - - -`, - `const [openForm, setOpenForm] = useState(false); - - - setOpenForm(false)}> - Subscribe - -
- - -
- - - - - -` -]; - -const DialogCode = () => { - const location = useLocation(); - const { isDark } = useStyledDarkMode(); - const [open, setOpen] = useState(false); - const [openFull, setOpenFull] = useState(false); - const [openForm, setOpenForm] = useState(false); - - const handleOpen = () => setOpen(true); - const handleClose = () => setOpen(false); - - return ( - -
- -

Dialog

- -

- Dialog components provide modal windows that focus user attention on specific tasks - or information. They overlay the main content and require user interaction before - returning to the underlying interface. -

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

- The Dialog component is essential for creating focused user experiences - that require immediate attention. It provides a controlled way to present forms, - confirmations, and detailed information without navigating away from the current context. -

- - -

Basic Dialog

- -

- A simple modal dialog with title, content, and action buttons. This is the most - common pattern for confirmations and simple interactions. -

-
-
- - - - Confirm Action - - Do you want to proceed with this action? - - - - - - - -
- -
- - -

Full-Screen Dialog

- -

- Full-screen dialogs are useful for complex forms or when you need the user's - complete attention. They take up the entire viewport and are ideal for mobile devices. -

-
-
- - - setOpenFull(false)} - fullScreen - maxWidth="lg" - > - Full-Screen Dialog - -

- This dialog stretches to full screen. Use it when the user's - full attention is needed for complex tasks or on mobile devices. -

- - - - - - - -
- -
- - -

Dialog with Form

- -

- Dialogs can contain forms for collecting user input. This pattern is common - for creating, editing, or subscribing workflows that don't require a full page. -

-
-
- - - setOpenForm(false)}> - Subscribe - -
- - -
- - - - - - - -
- -
-
-
- - ); -}; - -export default DialogCode; \ No newline at end of file diff --git a/src/sections/Projects/Sistent/components/dialog/guidance.js b/src/sections/Projects/Sistent/components/dialog/guidance.js deleted file mode 100644 index 43f3d59c46891..0000000000000 --- a/src/sections/Projects/Sistent/components/dialog/guidance.js +++ /dev/null @@ -1,216 +0,0 @@ -import React, { useState } from "react"; -import { navigate } from "gatsby"; -import { useLocation } from "@reach/router"; -import { SistentLayout } from "../../sistent-layout"; -import { - Dialog, - DialogTitle, - DialogContent, - DialogActions, - Button, - SistentThemeProvider, - Input -} from "@sistent/sistent"; -import { Row } from "../../../../../reusecore/Layout"; -import TabButton from "../../../../../reusecore/Button"; -import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode"; - -const DialogGuidance = () => { - const { isDark } = useStyledDarkMode(); - const location = useLocation(); - - const [openBasic, setOpenBasic] = useState(false); - const [openForm, setOpenForm] = useState(false); - const [openFullScreen, setOpenFullScreen] = useState(false); - - return ( - -
- -

Dialog

- -

- The Dialog component is a modal window that appears on top of the main content to focus - user attention on specific tasks or information. It provides a controlled way to present - confirmations, forms, alerts, and detailed content without navigating away from the - current context. -

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

- Proper usage of the Dialog component can enhance user experience by providing clear, - focused interactions that guide users through important decisions and tasks. Below are - guidelines and interactive examples to help you implement dialogs effectively. -

- - -

Usage

- -

- To use the Dialog component, include it with the required props and structure. The component - supports various configurations and styling options: -

-
    -
  • open to control visibility state
    • -
  • onClose for handling dialog closure
    • -
  • fullScreen for expanded display
    • -
  • maxWidth for size constraints
    • -
-
- - -

Basic Dialog

- -

- A simple confirmation dialog with title, content, and action buttons. This pattern - is ideal for user confirmations and simple decision-making scenarios: -

- - - - setOpenBasic(false)}> - Confirm Action - - Do you want to proceed with this action? - - - - - - - - - -
- -

Dialog with Form

- -

- Dialogs can contain forms for collecting user input without requiring navigation - to a separate page. This pattern works well for quick data collection: -

- - - - setOpenForm(false)}> - Subscribe - -
- - -
- - - - - - - - - -
- -

Full-Screen Dialog

- -

- Full-screen dialogs provide maximum space for complex content or forms. They're - particularly useful on mobile devices or when extensive user input is required: -

- - - - setOpenFullScreen(false)} - fullScreen - maxWidth="lg" - > - Full-Screen Dialog - -

- This dialog stretches to full screen. Use it when the user's - full attention is needed for complex tasks or on mobile devices. -

- - - - - - - - - - -

Best Practices

- -
-

When to Use Dialogs

-

- Use dialogs for critical user decisions, confirmations, and tasks that require - immediate attention. Avoid overusing dialogs as they can interrupt workflow and - frustrate users if used inappropriately. -

- -

Content Guidelines

-

- Keep dialog content focused and concise. Use clear, action-oriented language - for buttons and provide sufficient context without overwhelming the user. -

- -

Accessibility

-

- Ensure proper focus management, keyboard navigation, and screen reader support. - Always provide clear titles and meaningful action button labels. -

-
-
- - ); -}; - -export default DialogGuidance; \ No newline at end of file diff --git a/src/sections/Projects/Sistent/components/dialog/index.js b/src/sections/Projects/Sistent/components/dialog/index.js deleted file mode 100644 index c11d2e7163f8d..0000000000000 --- a/src/sections/Projects/Sistent/components/dialog/index.js +++ /dev/null @@ -1,120 +0,0 @@ -import React from "react"; -import { navigate } from "gatsby"; -import { useLocation } from "@reach/router"; - -import { - Dialog, - DialogTitle, - DialogContent, - DialogActions, - Button, - SistentThemeProvider -} from "@sistent/sistent"; -import { Row } from "../../../../../reusecore/Layout"; -import TabButton from "../../../../../reusecore/Button"; -import { SistentLayout } from "../../sistent-layout"; -import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode"; - -const SistentDialog = () => { - const location = useLocation(); - const { isDark } = useStyledDarkMode(); - const [open, setOpen] = React.useState(false); - - const handleOpen = () => setOpen(true); - const handleClose = () => setOpen(false); - - return ( - -
- -

Dialog

- -

- The Dialog component is a modal window that appears on top of the main content to focus - user attention on specific tasks or information. It provides a controlled way to present - confirmations, forms, alerts, and detailed content without navigating away from the - current context. -

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

- Dialog components provide modal windows that focus user attention on specific tasks - or information. They overlay the main content and require user interaction before - returning to the underlying interface. -

- -

Basic Example

- -

- Below is a simple example of how to use the Dialog component. -

-
- - - - - Confirm Action - - Do you want to proceed with this action? - - - - - - - - - -

Usage

- -

- The component can be used in several main variants: -

-
    -

  • Standard: Basic modal dialog for confirmations and simple interactions

    • -

  • Form: Dialog containing input fields for data collection

    • -

  • Full-screen: Expanded dialog for complex forms or mobile interfaces

    • -
-
-
- - ); -}; - -export default SistentDialog; \ No newline at end of file diff --git a/src/sections/Projects/Sistent/components/divider/code.js b/src/sections/Projects/Sistent/components/divider/code.js deleted file mode 100644 index 2dc108cd228a6..0000000000000 --- a/src/sections/Projects/Sistent/components/divider/code.js +++ /dev/null @@ -1,288 +0,0 @@ -import React from "react"; -import { navigate } from "gatsby"; -import { useLocation } from "@reach/router"; -import TabButton from "../../../../../reusecore/Button"; -import { SistentLayout } from "../../sistent-layout"; -import { SistentThemeProvider, Divider, Box, List, ListItem, ListItemText, Chip, Stack } from "@sistent/sistent"; -import { CodeBlock } from "../button/code-block"; -import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode"; - -const codes = [ - ` - - - -`, - ` - - - - - -`, - ` - - Left - - Center - - Right - -`, - ` - - CENTER - LEFT - RIGHT - - - - -`, - ` - - - - - - - - - - - - - -`, - ` - - Section 1 - - Section 2 - - Section 3 - -`, - ` - - Bold - Italic - - Left - Center - Right - -`, -]; - -const DividerCode = () => { - const location = useLocation(); - const { isDark } = useStyledDarkMode(); - - return ( - -
- -

Divider

- -

- The Divider component renders a thin line that separates content within lists, layouts, and sections, providing a subtle way to reinforce visual hierarchy. -

-
- 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 is a thin, subtle line for separating content in your interface. -

- - -

Basic Divider

- -

- By default, the Divider renders as a full-width horizontal line. -

-
-
- - - - - -
- -
- - -

Variants

- -

- The Divider supports three variants: fullWidth (default), inset, and middle. -

-
-
- - - Full Width: - - Inset: - - Middle: - - - -
- -
- - -

Vertical Divider

- -

- Use orientation="vertical" to render a vertical divider. The flexItem prop ensures proper height in flex containers. -

-
-
- - - Left - - Center - - Right - - -
- -
- - -

Divider with Text

- -

- You can render text or other elements within the divider using children. Use textAlign to control alignment. -

-
-
- - - CENTER - - LEFT - - RIGHT - - - - - - -
- -
- - -

List Divider

- -

- When using dividers in lists, set component="li" to ensure valid HTML structure. -

-
-
- - - - - - - - - - - - - - - -
- -
- - -

Section Separators

- -

- Use dividers to separate distinct sections in a layout, combined with proper spacing. -

-
-
- - - Section 1 - - Section 2 - - Section 3 - - -
- -
- - -

Icon Grouping

- -

- Use vertical dividers with the middle variant to group related actions in toolbars. -

-
-
- - - Bold - Italic - - Left - Center - Right - - -
- -
-
-
- - ); -}; - -export default DividerCode; diff --git a/src/sections/Projects/Sistent/components/divider/guidance.js b/src/sections/Projects/Sistent/components/divider/guidance.js deleted file mode 100644 index b252ea5ad739e..0000000000000 --- a/src/sections/Projects/Sistent/components/divider/guidance.js +++ /dev/null @@ -1,168 +0,0 @@ -import React from "react"; -import { navigate } from "gatsby"; -import { useLocation } from "@reach/router"; -import TabButton from "../../../../../reusecore/Button"; -import { SistentLayout } from "../../sistent-layout"; -import { SistentThemeProvider, Divider, Box, Stack } from "@sistent/sistent"; -import { Row } from "../../../../../reusecore/Layout"; -import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode"; - -const DividerGuidance = () => { - const location = useLocation(); - const { isDark } = useStyledDarkMode(); - - return ( - -
- -

Divider

- -

- The Divider component renders a thin line that separates content within lists, layouts, and sections, providing a subtle way to reinforce visual hierarchy and improve scannability. -

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

Best Practices

- - -

When to Use

-

- Dividers work best when separating distinct groups of content in lists, menus, or sections. They help users scan and understand the structure of complex interfaces. -

- - - - Section 1 - - Section 2 - - Section 3 - - - - -

Use Sparingly

-

- Avoid overusing dividers. Too many lines can create visual clutter. Consider using whitespace, different background colors, or typography to create separation instead. -

- -

Vertical Dividers for Toolbars

-

- Use vertical dividers to separate groups of actions in toolbars or icon groups. The flexItem prop ensures proper height alignment. -

- - - - Action A - Action B - - Action C - Action D - - - - - -

Accessibility

- -

- By default, Divider renders as an <hr> element with an implicit ARIA role of separator. Screen readers will announce it as "Horizontal Splitter" (or vertical when using orientation="vertical"). -

- -

Decorative Dividers

-

- If the divider is purely decorative, add aria-hidden="true" to prevent screen readers from announcing it. -

- -

Dividers with Content

-

- When wrapping content like text or chips, set component="div" and role="presentation" to maintain proper semantics. -

- - -

Common Patterns

- - -

List Separators

-

- When using dividers in lists, set component="li" to ensure valid HTML structure. -

- -

Section Headers

-

- Use dividers with text to create subtle section headers: -

- - - - Personal Information - Content here... - Contact Details - Content here... - - - - -

Responsive Behavior

-

- Consider how dividers appear on different screen sizes. Vertical dividers in horizontal layouts may need to switch to horizontal dividers on smaller screens. -

- - -

Do's and Don'ts

- - -

Do's

-
    -
  • Use dividers to separate distinct groups of related content
    • -
  • Combine with appropriate spacing for better visual rhythm
    • -
  • Use variant="middle" or variant="inset" to reduce visual weight
    • -
  • Set proper ARIA attributes for accessibility
    • -
- -

Don'ts

-
    -
  • Use dividers as the only method of creating separation
    • -
  • Overuse dividers—they can create visual noise
    • -
  • Rely on dividers to convey interactive functionality
    • -
  • Use dividers for decorative purposes without hiding them from screen readers
    • -
-
-
- - ); -}; - -export default DividerGuidance; diff --git a/src/sections/Projects/Sistent/components/divider/index.js b/src/sections/Projects/Sistent/components/divider/index.js deleted file mode 100644 index 965ece93cbdd3..0000000000000 --- a/src/sections/Projects/Sistent/components/divider/index.js +++ /dev/null @@ -1,168 +0,0 @@ -import React from "react"; -import { navigate } from "gatsby"; -import { useLocation } from "@reach/router"; - -import { Divider, SistentThemeProvider, Box, List, ListItem, ListItemText, Chip } from "@sistent/sistent"; -import TabButton from "../../../../../reusecore/Button"; -import { SistentLayout } from "../../sistent-layout"; -import { Row } from "../../../../../reusecore/Layout"; -import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode"; - -const SistentDivider = () => { - const location = useLocation(); - const { isDark } = useStyledDarkMode(); - - return ( - -
- -

Divider

- -

- The Divider component renders a thin line that separates content within lists, layouts, and sections, providing a subtle way to reinforce visual hierarchy and improve scannability. -

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

- Dividers help organize content and improve scannability by separating groups of related elements. Use them sparingly to maintain visual clarity without creating unnecessary noise. -

- -

Variants

- -

- The Divider component supports three variants: fullWidth (default), inset, and middle. -

-

Full Width

-

- The default variant spans the full width of its container. -

- - - - - - - - -

Inset

-

- The inset variant adds left padding, useful when aligning with indented list items. -

- - - - - - - - -

Middle

-

- The middle variant shortens the divider on both sides. -

- - - - - - - - - -

Orientation

- -

- Use the orientation prop to render vertical dividers. Vertical dividers are useful for separating items in toolbars or button groups. -

- - - - Left - - Center - - Right - - - - - -

Divider with Text

- -

- You can center an element between divider lines using children. Use the textAlign prop to align the content. -

- - - - CENTER - LEFT - RIGHT - - - - - - - - -

List Divider

- -

- When using the Divider to separate items in a list, render it as an <li> using the component prop. -

- - - - - - - - - - - - - - - - - -
-
- - ); -}; - -export default SistentDivider; diff --git a/src/sections/Projects/Sistent/components/drawer/code.js b/src/sections/Projects/Sistent/components/drawer/code.js deleted file mode 100644 index 600c02403d835..0000000000000 --- a/src/sections/Projects/Sistent/components/drawer/code.js +++ /dev/null @@ -1,352 +0,0 @@ -import React from "react"; -import { navigate } from "gatsby"; -import { useLocation } from "@reach/router"; - -import { SistentThemeProvider, Drawer, Button, List, ListItem, Box, Divider, Typography } from "@sistent/sistent"; -import { CodeBlock } from "../button/code-block"; -import { SistentLayout } from "../../sistent-layout"; -import TabButton from "../../../../../reusecore/Button"; -import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode"; - -const codes = [ - ` - - setOpen(false)} - title="Basic Modal" - > - - - This is a basic modal with simple content. - - - - setOpen(false)} - > - Close - - - - - ); -}`, - - // Confirmation Modal - `import { - Button, - Modal, - ModalBody, - ModalFooter, - ModalButtonSecondary, - ModalButtonDanger, - Box, - Typography - } from "@sistent/sistent"; -import WarningIcon from "@mui/icons-material/Warning"; - -function ConfirmationModal() { - const [open, setOpen] = useState(false); - - return ( - <> - - setOpen(false)} - title="Confirm Deletion" - > - - - - - This action is irreversible! Are you sure? - - - - - setOpen(false)} - > - Cancel - - setOpen(false)} - > - Delete - - - - - ); -}`, - - // Action Modal - `import { - Button, - Modal, - ModalBody, - ModalFooter, - ModalButtonSecondary, - ModalButtonPrimary, - TextField, - Box, - Typography - } from "@sistent/sistent"; -import PersonAddIcon from "@mui/icons-material/PersonAdd"; - -function ActionModal() { - const [open, setOpen] = useState(false); - - return ( - <> - - setOpen(false)} - title="Add New User" - > - - - - Create a new user account: - - - - - - - setOpen(false)} - > - Cancel - - setOpen(false)} - > - Create User - - - - - ); -}`, - - // Informational Modal - `import { - Button, - Modal, - ModalBody, - ModalFooter, - ModalButtonSecondary, - Box, - Typography - } from "@sistent/sistent"; -import InfoIcon from "@mui/icons-material/Info"; - -function InformationalModal() { - const [open, setOpen] = useState(false); - - return ( - <> - - setOpen(false)} - title="System Information" - > - - - - - - About This Feature - - - This feature helps you manage workflow efficiently. - - - Last updated: January 2025 • Version 2.1.0 - - - - - - setOpen(false)} - > - Got it - - - - - ); -}`, - - // Warning Modal - `import { - Button, - Modal, - ModalBody, - ModalFooter, - ModalButtonSecondary, - ModalButtonPrimary, - Box, - Typography - } from "@sistent/sistent"; -import WarningIcon from "@mui/icons-material/Warning"; - -function WarningModal() { - const [open, setOpen] = useState(false); - - return ( - <> - - setOpen(false)} - title="Warning" - > - - - - - - This action may affect system performance. - - - Consider performing this during off-peak hours. - - - - - - setOpen(false)} - > - Cancel - - setOpen(false)} - > - Continue Anyway - - - - - ); -}`, - - // Success Modal - `import { - Button, - Modal, - ModalBody, - ModalFooter, - ModalButtonPrimary, - Box, - Typography - } from "@sistent/sistent"; -import CheckCircleIcon from "@mui/icons-material/CheckCircle"; - -function SuccessModal() { - const [open, setOpen] = useState(false); - - return ( - <> - - setOpen(false)} - title="Success!" - > - - - - - - Operation Completed Successfully - - - Your changes have been saved and are now active. - - - - - - setOpen(false)} - > - Continue - - - - - ); -}`, - - // Error Modal - `import { - Button, - Modal, - ModalBody, - ModalFooter, - ModalButtonSecondary, - ModalButtonPrimary, - Box, - Typography - } from "@sistent/sistent"; -import ErrorIcon from "@mui/icons-material/Error"; - -function ErrorModal() { - const [open, setOpen] = useState(false); - - return ( - <> - - setOpen(false)} - title="Upload Failed" - > - - - - - - File Upload Failed - - - The file could not be uploaded due to network issue. - - - What you can do: - Check connection and try again. - - - - - - setOpen(false)} - > - Cancel - - setOpen(false)} - > - Try Again - - - - - ); -}`, - - // Nested Modal - `import { - Button, - Modal, - ModalBody, - ModalFooter, - ModalButtonSecondary, - Typography - } from "@sistent/sistent"; - -function NestedModalExample() { - const [parentOpen, setParentOpen] = useState(false); - const [childOpen, setChildOpen] = useState(false); - - const handleParentClose = () => { - setParentOpen(false); - setChildOpen(false); - }; - - return ( - <> - - - - - - This is the parent modal. Click to open nested modal. - - - - - - Close Parent - - - - - setChildOpen(false)} - title="Nested Modal" - > - - - This nested modal appears on top of the parent. - - - - setChildOpen(false)} - > - Close Nested - - - - - ); -}` -]; - -const ModalCode = () => { - const location = useLocation(); - const { isDark } = useStyledDarkMode(); - - const [openModals, setOpenModals] = useState({ - basic: false, - confirmation: false, - action: false, - informational: false, - warning: false, - success: false, - error: false, - form: false, - nested: false - }); - - const [nestedModal, setNestedModal] = useState(false); - - const toggleModal = (type) => { - setOpenModals(prev => ({ - ...prev, - [type]: !prev[type] - })); - }; - - return ( - -
- -

Modal

- -

- Here are code examples for different variations and use cases of the Modal component. - Each example shows the implementation with a live preview and copyable code. -

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

Basic Modal

- -

A simple modal with basic content and standard dismiss functionality.

-
-
- - toggleModal("basic")} - title="Basic Modal" - > - - - This is a basic modal with simple content for displaying information. - - - - - toggleModal("basic")}> - Close - - - - -
- -
- - -

Confirmation Modal

- -

Confirmation modals for destructive or important actions requiring user consent.

-
-
- - toggleModal("confirmation")} - title="Confirm Deletion" - > - - - - - This action is irreversible! Are you sure you want to delete this item? - - - - - - toggleModal("confirmation")}> - Cancel - - toggleModal("confirmation")}> - Delete - - - - -
- -
- - -

Action Modal

- -

Action modals for task completion with forms and interactive elements.

-
-
- - toggleModal("action")} - title="Add New User" - > - - - - - Create a new user account with the following details: - - - - - - - - - toggleModal("action")}> - Cancel - - toggleModal("action")}> - Create User - - - - -
- -
- - -

Informational Modal

- -

Informational modals for displaying help content and contextual information.

-
-
- - toggleModal("informational")} - title="System Information" - > - - - - - - About This Feature - - - This feature helps you manage your workflow efficiently with automated tools. - - - Last updated: January 2025 • Version 2.1.0 - - - - - - - toggleModal("informational")}> - Got it - - - - -
- -
- - -

Warning Modal

- -

Warning modals to alert users about potential issues before proceeding.

-
-
- - toggleModal("warning")} - title="Warning" - > - - - - - - This action may affect system performance and could take several minutes. - - - Consider performing this during off-peak hours. - - - - - - - toggleModal("warning")}> - Cancel - - toggleModal("warning")}> - Continue Anyway - - - - -
- -
- - -

Success Modal

- -

Success modals to provide positive feedback and confirm task completion.

-
-
- - toggleModal("success")} - title="Success!" - > - - - - - - Operation Completed Successfully - - - Your changes have been saved and are now active. - - - - - - - toggleModal("success")}> - Continue - - - - -
- -
- - -

Error Modal

- -

Error modals to communicate failures and provide actionable solutions.

-
-
- - toggleModal("error")} - title="Upload Failed" - > - - - - - - File Upload Failed - - - The file could not be uploaded due to a network connectivity issue. - - - What you can do: Check your internet connection and try again. - - - - - - - toggleModal("error")}> - Cancel - - toggleModal("error")}> - Try Again - - - - -
- -
- - -

Nested Modal

- -

Nested modals for multi-step workflows and complex interactions.

-
-
- - toggleModal("nested")} - title="Parent Modal" - > - - - This is the parent modal. You can open a nested modal from here. - - - - - - toggleModal("nested")}> - Close - - - - - - setNestedModal(false)} - title="Nested Modal" - > - - - This is a nested modal that appears on top of the parent modal. - - - - - setNestedModal(false)}> - Close Nested - - - - -
- -
- - -
-
- - ); -}; - -export default ModalCode; \ No newline at end of file diff --git a/src/sections/Projects/Sistent/components/modal/guidance.js b/src/sections/Projects/Sistent/components/modal/guidance.js deleted file mode 100644 index 03bfc4ac80182..0000000000000 --- a/src/sections/Projects/Sistent/components/modal/guidance.js +++ /dev/null @@ -1,420 +0,0 @@ -import React, { useState } from "react"; -import { SistentLayout } from "../../sistent-layout"; -import TabButton from "../../../../../reusecore/Button"; -import { navigate } from "gatsby"; -import { useLocation } from "@reach/router"; -import { - Box, - Button, - Modal, - ModalBody, - ModalButtonDanger, - ModalButtonPrimary, - ModalButtonSecondary, - ModalFooter, - SistentThemeProvider, - TextField, - Typography, -} from "@sistent/sistent"; -import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode"; -import { ActionBox } from "../../sistent.style"; -import WarningIcon from "@mui/icons-material/Warning"; -import InfoIcon from "@mui/icons-material/Info"; -import CheckCircleIcon from "@mui/icons-material/CheckCircle"; -import ErrorIcon from "@mui/icons-material/Error"; -import PersonAddIcon from "@mui/icons-material/PersonAdd"; - -const CustomInput = ({ label, placeholder }) => ( - - - {label} - - - -); - -const ModalGuidance = () => { - const location = useLocation(); - const { isDark } = useStyledDarkMode(); - const [activeModal, setActiveModal] = useState(null); - const [nestedModal, setNestedModal] = useState(false); - - return ( - -
- -

Modal

- -

- This guide provides comprehensive information on when and how to use different types of modals effectively in your applications. -

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

Basic Modal

- -

Use for simple information display or read-only content. Keep content concise and provide clear dismiss options.

-
-
- - setActiveModal(null)} - title="Basic Modal" - > - - - This is a basic modal with simple content for displaying information. - - - - - setActiveModal(null)}> - Close - - - - -
-
- - -

Confirmation Modal

- -

Essential for destructive actions. Always use warning icons, specific button labels, and clearly explain consequences.

-
-
- - setActiveModal(null)} - title="Confirm Account Deletion" - > - - - - - - This action cannot be undone. Deleting your account will permanently remove all your data. - - - - - - - setActiveModal(null)}> - Keep Account - - setActiveModal(null)}> - Delete Account - - - - -
-
- - -

Action Modal

- -

Perfect for task completion with forms. Use contextual icons and provide clear primary/secondary actions.

-
-
- - setActiveModal(null)} - title="Add New User" - > - - - - - Create a new user account: - - - - - - - - - setActiveModal(null)}> - Cancel - - setActiveModal(null)}> - Create User - - - - -
-
- - -

Informational Modal

- -

Use for help content and contextual information. Structure content clearly and keep it scannable.

-
-
- - setActiveModal(null)} - title="System Information" - > - - - - - - About This Feature - - - This feature helps you manage your workflow efficiently with automated tools. - - - Last updated: January 2025 • Version 2.1.0 - - - - - - - setActiveModal(null)}> - Got it - - - - -
-
- - -

Warning Modal

- -

Alert users to potential issues before proceeding. Use warning colors and provide helpful context.

-
-
- - setActiveModal(null)} - title="Warning" - > - - - - - - This action may affect system performance and could take several minutes. - - - Consider performing this during off-peak hours. - - - - - - - setActiveModal(null)}> - Cancel - - setActiveModal(null)}> - Continue Anyway - - - - -
-
- - -

Success Modal

- -

Celebrate user achievements and provide positive feedback. Include relevant metrics when helpful.

-
-
- - setActiveModal(null)} - title="Success!" - > - - - - - - Operation Completed Successfully - - - Your changes have been saved and are now active. - - - - - - - setActiveModal(null)}> - Continue - - - - -
-
- - -

Error Modal

- -

Communicate failures clearly with friendly language. Provide specific solutions and avoid technical jargon.

-
-
- - setActiveModal(null)} - title="Upload Failed" - > - - - - - - File Upload Failed - - - The file could not be uploaded due to a network connectivity issue. - - - What you can do: Check your internet connection and try again. - - - - - - - setActiveModal(null)}> - Cancel - - setActiveModal(null)}> - Try Again - - - - -
-
- - - -

Nested Modal

- -

Use sparingly for multi-step workflows. Maintain clear navigation and ensure users understand the hierarchy.

-
-
- - setActiveModal(null)} - title="Parent Modal" - > - - - This is the parent modal. You can open a nested modal from here. - - - - - - setActiveModal(null)}> - Close - - - - - - setNestedModal(false)} - title="Nested Modal" - > - - - This is a nested modal that appears on top of the parent modal. - - - - - setNestedModal(false)}> - Close Nested - - - - -
-
- - - - -

When to Use Modals

- -
    -

  • Requiring immediate user attention for critical information or decisions

    • -

  • Collecting user input without navigating away from the current context

    • -

  • Confirming destructive or irreversible actions before execution

    • -

  • Displaying detailed information that doesn't warrant a separate page

    • -

  • Presenting workflows that need to maintain the underlying page state

    • -
- -
-
- - ); -}; - -export default ModalGuidance; \ No newline at end of file diff --git a/src/sections/Projects/Sistent/components/modal/index.js b/src/sections/Projects/Sistent/components/modal/index.js deleted file mode 100644 index 2b0006b5fe793..0000000000000 --- a/src/sections/Projects/Sistent/components/modal/index.js +++ /dev/null @@ -1,108 +0,0 @@ -import React, { useState } from "react"; -import { navigate } from "gatsby"; -import { useLocation } from "@reach/router"; -import { SistentLayout } from "../../sistent-layout"; -import { - Button, - Modal, - ModalBody, - ModalFooter, - ModalButtonSecondary, - SistentThemeProvider, - Typography, -} from "@sistent/sistent"; -import TabButton from "../../../../../reusecore/Button"; -import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode"; -import { ActionBox } from "../../sistent.style"; - -const SistentModal = () => { - const location = useLocation(); - const { isDark } = useStyledDarkMode(); - const [open, setOpen] = useState(false); - - return ( - -
- -

Modal

- -

- A modal is a container that appears in front of the main content on a page, providing important information or an actionable piece of content for users to execute. Modals focus user attention and prevent interaction with the underlying page until dismissed. -

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

- The Modal component is essential for communicating important information and collecting user input without losing context. It provides immediate focus and ensures users complete required actions before proceeding. -

- - -

Basic Modal

- -

- A simple modal with basic content and standard dismiss functionality. This is the default behavior for displaying information to users. -

-
-
- - - setOpen(false)} title="Basic Modal"> - - - This is a basic modal with simple content. It can contain text, images, or other basic elements to convey information to users. - - - - - setOpen(false)}> - Close - - - - - -
-
- - -

Modal Variations

- -

- The Modal component supports various types and configurations to handle different use cases and user interactions. -

-
    -

  • Basic Modal: Simple content display with minimal interaction

    • -

  • Confirmation Modal: Require user confirmation for important or destructive actions

    • -

  • Action Modal: Facilitate task completion with forms and interactive controls

    • -

  • Informational Modal: Provide detailed information, help content, or contextual guidance

    • -

  • Warning Modal: Alert users to potential issues or important considerations

    • -

  • Success Modal: Confirm successful completion of actions with positive feedback

    • -

  • Error Modal: Communicate failures or issues requiring user attention

    • -

  • Nested Modal: Secondary modals that open from within existing modals

    • -
-
-
- - ); -}; - -export default SistentModal; \ No newline at end of file diff --git a/src/sections/Projects/Sistent/components/pagination/code.js b/src/sections/Projects/Sistent/components/pagination/code.js deleted file mode 100644 index e4ca8769a1c8e..0000000000000 --- a/src/sections/Projects/Sistent/components/pagination/code.js +++ /dev/null @@ -1,180 +0,0 @@ -import React, { useState } from "react"; -import { navigate } from "gatsby"; -import { useLocation } from "@reach/router"; -import { Pagination, SistentThemeProvider } from "@sistent/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 = [ - // Basic pagination - ` - handleChange(page)} - /> - `, - // Pagination with size variants - ` - - - - `, - // Pagination with custom styling - ` - - `, - // Pagination with an outline - ` - - `, -]; - -const PaginationCode = () => { - const { isDark } = useStyledDarkMode(); - const location = useLocation(); - const [currentPage, setCurrentPage] = useState(1); - - const handlePageChange = (event, value) => { - setCurrentPage(value); - }; - - return ( - -
- -

Pagination

- -

- The Pagination component helps users navigate through multiple pages - of content. It provides a clear interface for moving between pages and - understanding the current position within a larger dataset. -

-
- navigate("/projects/sistent/components/pagination")} - title="Overview" - /> - - navigate("/projects/sistent/components/pagination/guidance") - } - title="Guidance" - /> - - navigate("/projects/sistent/components/pagination/code") - } - title="Code" - /> -
-
- {/* Basic Pagination */} - -
-
- - - -
- -
- - {/* Pagination Sizes */} - -

Pagination Sizes

- -
-
- -
- - - -
- -
- -
- - {/* Custom Styling */} - -

Custom Styling

- -
-
- - - -
- -
- - {/* Pagination with Outline */} - -

Pagination with Outline

- -
-
- - - -
- -
-
-
- - ); -}; - -export default PaginationCode; \ No newline at end of file diff --git a/src/sections/Projects/Sistent/components/pagination/guidance.js b/src/sections/Projects/Sistent/components/pagination/guidance.js deleted file mode 100644 index d323f3f69f5d4..0000000000000 --- a/src/sections/Projects/Sistent/components/pagination/guidance.js +++ /dev/null @@ -1,111 +0,0 @@ -import React from "react"; -import { navigate } from "gatsby"; -import { useLocation } from "@reach/router"; -import { Row } from "../../../../../reusecore/Layout"; -import { SistentThemeProvider, Pagination } from "@sistent/sistent"; -import { SistentLayout } from "../../sistent-layout"; -import TabButton from "../../../../../reusecore/Button"; -import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode"; - -const PaginationGuidance = () => { - const location = useLocation(); - const { isDark } = useStyledDarkMode(); - - return ( - -
- -

Pagination

- -

- The Pagination component helps users navigate through multiple pages - of content. It provides a clear interface for moving between pages and - understanding the current position within a larger dataset. -

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

Usage Guidelines

- - -

When to Use

-

- Pagination should be used when displaying large datasets that need - to be broken into manageable chunks. It helps users navigate through - multiple pages of content and is beneficial when content needs to be - loaded incrementally to improve performance. -

- -

Best Practices

-

- To ensure a smooth user experience, it’s important to keep page - sizes consistent throughout the interface. The current page number - and total pages should be displayed clearly. Adequate spacing - between page numbers should be ensured to improve readability. It’s - also crucial to provide clear visual feedback for the current page. - For large page ranges, consider using ellipsis (...) to represent - skipped pages. -

- -

Accessibility

-

- To make pagination more accessible, ensure that ARIA labels are used - to identify the pagination controls. Keyboard navigation should be - properly supported to allow users to navigate through the pages - easily. It’s important to provide clear visual indicators for focus - states and maintain adequate color contrast for all states to ensure - readability. -

- - - - - - -
-
- - ); -}; - -export default PaginationGuidance; \ No newline at end of file diff --git a/src/sections/Projects/Sistent/components/pagination/index.js b/src/sections/Projects/Sistent/components/pagination/index.js deleted file mode 100644 index 958787aac0a87..0000000000000 --- a/src/sections/Projects/Sistent/components/pagination/index.js +++ /dev/null @@ -1,168 +0,0 @@ -import React, { useState } from "react"; -import { navigate } from "gatsby"; -import { useLocation } from "@reach/router"; -import { SistentThemeProvider, Pagination, Box } from "@sistent/sistent"; -import TabButton from "../../../../../reusecore/Button"; -import { SistentLayout } from "../../sistent-layout"; -import { Row } from "../../../../../reusecore/Layout"; -import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode"; - -const SistentPagination = () => { - const location = useLocation(); - const { isDark } = useStyledDarkMode(); - const [page, setPage] = useState(1); - - const handleChange = (event, value) => { - setPage(value); - }; - - return ( - -
- -

Pagination

- -

- The Pagination component helps users navigate through multiple pages - of content. It provides a clear interface for moving between pages and - understanding the current position within a larger dataset. -

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

- Pagination is an essential element for navigating large datasets or - multiple pages of information. It enables users to move between - pages in a user-friendly and intuitive manner. Pagination helps to - split large content into smaller sections to improve the overall - user experience. -

- - -

Basic Usage

- -

- Basic pagination allows users to navigate through numbered pages. - The current page is highlighted, and users can click on page numbers - or arrows to move between pages. -

- - - - - - - -

Variants

- -

- The Pagination component supports multiple variants to match your - design needs, including outlined, text, and contained styles. These - variants provide flexibility in integrating the component into your - layout while maintaining a consistent visual appearance. -

- - - - - - - - - - -

Sizes

- -

- The Pagination component can also be customized in terms of size to - suit different use cases. For smaller screens, compact pagination - may be preferred, while larger pagination can be used for better - visibility on larger screens. -

-

Large

-

- A larger pagination component that enhances visibility and - interaction on larger displays. -

- - - - - - -

Medium

-

- A medium-sized pagination component that balances compactness and - visibility. -

- - - - - - -

Small

-

- A smaller pagination component suitable for compact designs or when - screen real estate is limited. -

- - - - - -
-
- - ); -}; - -export default SistentPagination; \ No newline at end of file diff --git a/src/sections/Projects/Sistent/components/paper/code.js b/src/sections/Projects/Sistent/components/paper/code.js deleted file mode 100644 index dc0282817e4b7..0000000000000 --- a/src/sections/Projects/Sistent/components/paper/code.js +++ /dev/null @@ -1,203 +0,0 @@ -import React from "react"; -import { navigate } from "gatsby"; -import { useLocation } from "@reach/router"; -import TabButton from "../../../../../reusecore/Button"; -import { SistentLayout } from "../../sistent-layout"; -import { SistentThemeProvider, Paper } from "@sistent/sistent"; -import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode"; -import { CodeBlock } from "../button/code-block"; - -const codes = [ - ` - - Default Paper with Elevation 1 - - `, - ` - - Elevation 0 (No shadow) - - - Elevation 3 - - - Elevation 8 - - `, - ` - - Elevation Variant (Default) - - - Outlined Variant (No shadow) - - `, - ` - - Rounded Corners (Default) - - - Square Corners - - `, -]; -const PaperCode = () => { - const location = useLocation(); - const { isDark } = useStyledDarkMode(); - - return ( - -
- -

Paper

- -

- The Paper component provides an elevated surface for displaying - content. It mimics the behavior of real-world surfaces with shadow - effects, supporting Material Design's elevation system. -

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

Basic Example

- -

- Here’s a simple example of a Paper component with default elevation. - This creates a surface with a subtle shadow. -

-
-
- - - Default Paper with Elevation 1 - - -
- -
- - -

Elevation Example

- -

- The elevation prop controls the shadow depth. Use - values from 0 to 24 to create varying levels of elevation: -

-
-
- - - Elevation 0 (No shadow) - - - Elevation 3 - - - Elevation 8 - - -
- -
- -

Variant Example

- -

- The Paper component supports two variants: elevation{" "} - (default) and outlined. The outlined variant removes - shadows and adds a border instead: -

-
-
- - - Elevation Variant (Default) - - - Outlined Variant (No shadow) - - -
- -
- - -

Square and Rounded Corners

- -

- By default, the Paper component has rounded corners. You can make it - square by setting the square prop to true. -

-
-
- - - Rounded Corners (Default) - - - Square Corners - - -
- -
-
-
- - ); -}; - -export default PaperCode; diff --git a/src/sections/Projects/Sistent/components/paper/guidance.js b/src/sections/Projects/Sistent/components/paper/guidance.js deleted file mode 100644 index e12d90aeff6f2..0000000000000 --- a/src/sections/Projects/Sistent/components/paper/guidance.js +++ /dev/null @@ -1,124 +0,0 @@ -import React from "react"; -import { SistentLayout } from "../../sistent-layout"; -import TabButton from "../../../../../reusecore/Button"; -import { navigate } from "gatsby"; -import { useLocation } from "@reach/router"; - -const PaperGuidance = () => { - const location = useLocation(); - - return ( - -
- -

Paper

- -

- The Paper component provides an elevated surface for displaying - content. It mimics the behavior of real-world surfaces with shadow - effects, supporting Material Design's elevation system. -

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

Usage Guidelines

- -

- When using the Paper component, follow these guidelines to ensure - consistency and usability across your designs. -

- - -

Elevation Guidelines

- -
    -
  • Use lower elevations (0-3) for subtle surfaces such as cards and - small sections. -
    • -
  • Higher elevations (8-24) are best for modals or - key areas that need emphasis. -
    • -
  • Be mindful of the dark mode - behavior, where higher elevations result in a lighter background. -
    • -
- - -

Variant Guidelines

- -
    -
  • - Use the outlined variant for areas where shadows - might feel visually overwhelming. -
    • -
  • - Stick to the default elevation variant for core components - requiring shadow depth. -
    • -
- -

Corners Guidelines

- -
    -
  • - Rounded corners are more user-friendly and should be preferred - unless a strict design requires square corners. -
    • -
  • - Use square corners sparingly, mostly for components meant to - indicate precision or alignment with grid systems. -
    • -
- - -

Accessibility

- -
    -
  • - Make sure elevated surfaces have sufficient contrast with the - background. -
    • -
  • - Use clear and concise labels or headings for content within Paper - components to enhance accessibility. -
    • -
-
-
- - ); -}; - -export default PaperGuidance; diff --git a/src/sections/Projects/Sistent/components/paper/index.js b/src/sections/Projects/Sistent/components/paper/index.js deleted file mode 100644 index 711a478b5d281..0000000000000 --- a/src/sections/Projects/Sistent/components/paper/index.js +++ /dev/null @@ -1,114 +0,0 @@ -import React from "react"; -import { SistentLayout } from "../../sistent-layout"; -import TabButton from "../../../../../reusecore/Button"; -import { navigate } from "gatsby"; -import { useLocation } from "@reach/router"; -import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode"; -import { Paper, SistentThemeProvider } from "@sistent/sistent"; - -const SistentPaper = () => { - const location = useLocation(); - const { isDark } = useStyledDarkMode(); - return ( - -
- -

Paper

- -

- The Paper component provides an elevated surface for displaying - content. It mimics the behavior of real-world surfaces with shadow - effects, supporting Material Design's elevation system. -

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

- The Paper component is useful for designs that require elevated - surfaces, such as cards or modals, and offers multiple configuration - options like elevation, variants, and corner styles. -

- - -

Types

- -

- Paper can be configured with different elevation levels - to establish a visual hierarchy, and it also supports a flat, - outlined variant. -

- -

Elevation

-

- The elevation prop determines the shadow depth, with values ranging - from 0 (no shadow) to 24 (maximum shadow). -

- - - - Paper with Elevation 3 - - - -

Outlined

-

- For designs requiring minimal shadows, the outlined{" "} - variant can be used instead of the default elevated one. -

- - - - Outlined Paper Variant - - - - -

Corners

- -

- The Paper component has rounded corners by default, but you can use - the square prop to remove rounding. -

- - - - Square Corners - - -
-
- - ); -}; -export default SistentPaper; diff --git a/src/sections/Projects/Sistent/components/popper/code.js b/src/sections/Projects/Sistent/components/popper/code.js deleted file mode 100644 index 6eb7d49fd64ec..0000000000000 --- a/src/sections/Projects/Sistent/components/popper/code.js +++ /dev/null @@ -1,349 +0,0 @@ -import React, { useState } from "react"; -import { navigate } from "gatsby"; -import { useLocation } from "@reach/router"; -import { - SistentThemeProvider, - Popper, - Button, - Box, - Grid, -} from "@sistent/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 = [ - ` - - - -`, -]; - -const StackCode = () => { - const location = useLocation(); - const { isDark } = useStyledDarkMode(); - - return ( - -
- -

Stack

- -

- The Stack component is a layout utility that manages - one-dimensional layouts with flexible spacing and alignment. Built on - Flexbox, it provides an efficient way to arrange elements vertically - or horizontally with consistent spacing. -

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

- The Stack component arranges children in one-dimensional flow, either vertically or - horizontally, with consistent spacing and no manual margin adjustments. -

- -

Vertical Stack

- -

- The default Stack orientation is vertical. Use the spacing prop to control the gap between children. -

-
-
- - - - Header - - - Content - - - Footer - - - -
- -
- -

Horizontal Stack

- -

- Set direction="row" to arrange children horizontally. Useful for button groups and navigation items. -

-
-
- - - - Home - - - About - - - Contact - - - -
- -
- -

Responsive Stack

- -

- Use responsive values for the direction prop to create adaptive layouts that stack vertically on mobile and horizontally on larger screens. -

-
-
- - - - Card One - - - Card Two - - - -
- -
- -

Divider

- -

- Add visual separation between children using the divider prop. -

-
-
- - - } - > - Profile - Settings - Logout - - -
- -
- -

Spacing

- -

- Use larger spacing values to create wider gaps. Common values range from 1 (8px) to 4 (32px). -

-
-
- - - - Title - - - Description - - - -
- -
- -

Button Group

- -

- Use direction="row" to stack horizontal button groups with consistent spacing. -

-
-
- - - - - - - -
- -
-
-
- - ); -}; - -export default StackCode; diff --git a/src/sections/Projects/Sistent/components/stack/guidance.js b/src/sections/Projects/Sistent/components/stack/guidance.js deleted file mode 100644 index c788db47b881f..0000000000000 --- a/src/sections/Projects/Sistent/components/stack/guidance.js +++ /dev/null @@ -1,247 +0,0 @@ -import React from "react"; -import { navigate } from "gatsby"; -import { useLocation } from "@reach/router"; -import { Row } from "../../../../../reusecore/Layout"; -import { SistentThemeProvider, Stack, Box, Button } from "@sistent/sistent"; -import { SistentLayout } from "../../sistent-layout"; - -import TabButton from "../../../../../reusecore/Button"; -import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode"; - -const StackGuidance = () => { - const location = useLocation(); - const { isDark } = useStyledDarkMode(); - - return ( - -
- -

Stack

- -

- The Stack component is a layout utility that manages - one-dimensional layouts with flexible spacing and alignment. Built on - Flexbox, it provides an efficient way to arrange elements vertically - or horizontally with consistent spacing. -

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

- Stack is built on Flexbox and optimized for one-dimensional layouts. It excels at organizing elements in a single direction while maintaining consistent spacing. -

- - -

Best Practices

- - -

Use Cases

-

- Stack is ideal for: -

-
    -
  • Form layouts with consistent vertical spacing
    • -
  • Button groups arranged horizontally or vertically
    • -
  • Navigation menus with proper spacing
    • -
  • Card content stacking
    • -
  • Lists with dividers
    • -
- -

Stack vs Grid

-

- Choose the right component: -

-
    -
  • Stack: One-dimensional layout (single direction)
    • -
  • Grid: Two-dimensional layout (rows and columns)
    • -
- - - - -

- Stack Example (One Direction): -

- - - 1 - - - 2 - - - 3 - - - - - - - - -

Spacing

- - -

Best Practices

-

- Use consistent spacing values throughout your application: -

-
    -
  • spacing=1 (8px) for closely related elements
    • -
  • spacing=2 (16px) for standard spacing
    • -
  • spacing=3 (24px) for distinct sections
    • -
  • spacing=4 (32px) for major separations
    • -
- - - - -

- Spacing = 1 -

- - Label - Input - - - -

- Spacing = 3 -

- - Title - Body - - - - - - -

Direction

-
    -
  • direction="column" (default) for vertical stacking
    • -
  • direction="row" for horizontal arrangements
    • -
  • Use responsive values: direction={{ xs: "column", md: "row" }}
    • -
- -

Dividers

-
    -
  • Use to separate distinct sections
    • -
  • Use sparingly for best effect
    • -
  • Match divider style with your design system
    • -
- - - - } - > - Profile Settings - Notification Preferences - Privacy Controls - - - - - -

Examples

- - -

Form Layout

-

- Organize form fields vertically with consistent spacing: -

- - - - - - Name - - - Input field - - - - - Email - - - Input field - - - - - - - - - - -

Button Groups

-

- Use horizontal Stack for grouping related action buttons: -

- - - - - - - - - -
-
- - ); -}; - -export default StackGuidance; diff --git a/src/sections/Projects/Sistent/components/stack/index.js b/src/sections/Projects/Sistent/components/stack/index.js deleted file mode 100644 index 80b16ae78634a..0000000000000 --- a/src/sections/Projects/Sistent/components/stack/index.js +++ /dev/null @@ -1,180 +0,0 @@ -import React from "react"; -import { navigate } from "gatsby"; -import { useLocation } from "@reach/router"; - -import { SistentThemeProvider, Stack, Box } from "@sistent/sistent"; -import TabButton from "../../../../../reusecore/Button"; -import { SistentLayout } from "../../sistent-layout"; -import { Row } from "../../../../../reusecore/Layout"; -import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode"; - -const SistentStack = () => { - const location = useLocation(); - const { isDark } = useStyledDarkMode(); - - return ( - -
- -

Stack

- -

- The Stack component is a layout utility that manages - one-dimensional layouts with flexible spacing and alignment. Built on - Flexbox, it provides an efficient way to arrange elements vertically - or horizontally with consistent spacing. -

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

- Stack simplifies one-dimensional layouts by automatically handling spacing and direction. - It eliminates manual margin adjustments, making it ideal for form fields, button groups, and navigation items. -

- -

Usage

- -

Vertical Stack

-

- By default, Stack arranges children vertically. Use the spacing prop to control gaps between elements. -

- - - - - Header - - - Content - - - Footer - - - - - -

Horizontal Stack

-

- Set direction="row" to arrange children horizontally. -

- - - - - Home - - - About - - - Contact - - - - - - -

Customization

- -

- Stack provides several props for customization, including spacing, - direction, dividers, and responsive behavior. These options make it - flexible for various layout requirements. -

- -

Responsive Direction

-

- The direction prop accepts responsive values, allowing - the stack to change direction based on screen size: -

- - - - - Card One - - - Card Two - - - - - -

Dividers

-

- Use the divider prop to add visual separation between elements. -

- - - - } - > - Profile - Settings - Logout - - - -
-
- - ); -}; - -export default SistentStack; diff --git a/src/sections/Projects/Sistent/components/stepper/code.js b/src/sections/Projects/Sistent/components/stepper/code.js deleted file mode 100644 index 43065868c350c..0000000000000 --- a/src/sections/Projects/Sistent/components/stepper/code.js +++ /dev/null @@ -1,182 +0,0 @@ -import React from "react"; -import { navigate } from "gatsby"; -import { useLocation } from "@reach/router"; - -import { CustomizedStepper, useStepper, SistentThemeProvider, Box, Typography, Button } from "@sistent/sistent"; -import { CodeBlock } from "../button/code-block"; -import { SistentLayout } from "../../sistent-layout"; -import PersonIcon from "@mui/icons-material/Person"; -import SettingsIcon from "@mui/icons-material/Settings"; -import CheckCircleIcon from "@mui/icons-material/CheckCircle"; - -import TabButton from "../../../../../reusecore/Button"; -import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode"; - -const StepExample = ({ title, content }) => ( - - {title} - - {content} - - -); - -const codes = [ - `import { CustomizedStepper, useStepper, Button, Box } from '@sistent/sistent'; - -const { - activeStep, - handleNext, - goBack, - stepLabels, - icons, - activeStepComponent: ActiveStepComponent -} = useStepper({ steps: [ - { label: 'User Info', component: StepOne, icon: PersonIcon }, - { label: 'Settings', component: StepTwo, icon: SettingsIcon }, - { label: 'Complete', component: StepThree, icon: CheckCircleIcon } -] }); - -return ( -
- - - - - - - - -
-);` -]; - -const StepperCode = () => { - const location = useLocation(); - const { isDark } = useStyledDarkMode(); - - const { - activeStep, - handleNext, - goBack, - stepLabels, - icons, - activeStepComponent: ActiveStepComponent - } = useStepper({ - steps: [ - { - label: "User Info", - component: () => , - icon: PersonIcon - }, - { - label: "Settings", - component: () => , - icon: SettingsIcon - }, - { - label: "Complete", - component: () => , - icon: CheckCircleIcon - } - ] - }); - - return ( - -
- -

Stepper

- -

- Code examples for implementing the Stepper component. -

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

- The Stepper component uses the useStepper hook for state management - and the CustomizedStepper component for rendering. -

- - -

Stepper with Navigation

- -

- Enhanced stepper with navigation controls for user interaction. -

-
-
- - - - - - - - - - Step {activeStep + 1} of {stepLabels.length} - - - - - -
- -
-
-
- - ); -}; - -export default StepperCode; diff --git a/src/sections/Projects/Sistent/components/stepper/guidance.js b/src/sections/Projects/Sistent/components/stepper/guidance.js deleted file mode 100644 index 226771c53b02a..0000000000000 --- a/src/sections/Projects/Sistent/components/stepper/guidance.js +++ /dev/null @@ -1,299 +0,0 @@ -import React from "react"; -import { navigate } from "gatsby"; -import { useLocation } from "@reach/router"; -import { CustomizedStepper, useStepper, SistentThemeProvider, Box, Typography, Button } from "@sistent/sistent"; -import { SistentLayout } from "../../sistent-layout"; - -import TabButton from "../../../../../reusecore/Button"; -import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode"; -import PersonIcon from "@mui/icons-material/Person"; -import SettingsIcon from "@mui/icons-material/Settings"; -import CheckCircleIcon from "@mui/icons-material/CheckCircle"; -import DescriptionIcon from "@mui/icons-material/Description"; -import CodeIcon from "@mui/icons-material/Code"; -import IntegrationInstructionsIcon from "@mui/icons-material/IntegrationInstructions"; - -const StepOne = () => ( - - - User Information - - - Please provide your basic information to get started with the setup process. - - -); - -const StepTwo = () => ( - - - Account Settings - - - Configure your account preferences and notification settings. - - -); - -const StepThree = () => ( - - - Payment Information - - - Enter your payment details to complete the account setup. - - -); - - -// How to use stepper components -const HowToStep1 = () => ( - - - 1. Import Dependencies - - - Import CustomizedStepper, useStepper from @sistent/sistent and your icons - - -); - -const HowToStep2 = () => ( - - - 2. Create Step Components - - - Define components for each step content (e.g., StepOne, StepTwo, StepThree) - - -); - -const HowToStep3 = () => ( - - - 3. Configure useStepper Hook - - - Call useStepper with steps array containing label, component, and icon - - -); - -const HowToStep4 = () => ( - - - 4. Render Stepper - - - Use CustomizedStepper with stepLabels, activeStep, icons and ActiveStepComponent - - -); - -const StepperGuidance = () => { - const location = useLocation(); - const { isDark } = useStyledDarkMode(); - - // Linear stepper example - const { - activeStep: linearActiveStep, - handleNext: linearNext, - goBack: linearBack, - stepLabels: linearLabels, - icons: linearIcons, - activeStepComponent: LinearActiveComponent - } = useStepper({ - steps: [ - { label: "User Info", component: StepOne, icon: PersonIcon }, - { label: "Settings", component: StepTwo, icon: SettingsIcon }, - { label: "Complete", component: StepThree, icon: CheckCircleIcon } - ] - }); - - // How to use stepper example - const { - activeStep: howToActiveStep, - handleNext: howToNext, - goBack: howToBack, - stepLabels: howToLabels, - icons: howToIcons, - activeStepComponent: HowToActiveComponent - } = useStepper({ - steps: [ - { label: "Import", component: HowToStep1, icon: CodeIcon }, - { label: "Create Components", component: HowToStep2, icon: DescriptionIcon }, - { label: "Configure Hook", component: HowToStep3, icon: SettingsIcon }, - { label: "Render", component: HowToStep4, icon: IntegrationInstructionsIcon } - ] - }); - - return ( - -
- -

Stepper

- -

- This guide provides comprehensive information on when and how to use - steppers effectively in your applications. -

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

Basic Stepper Example

- -

- Simple 3-step workflow perfect for getting started with steppers. Ideal for linear processes. -

- -
-
- - - - - - - - - Step {linearActiveStep + 1} of {linearLabels.length} - - - - -
-
- - -

How to Use

- -

- Step-by-step guide to implement steppers in application. -

- -
-
- - - - - - - - - Step {howToActiveStep + 1} of {howToLabels.length} - - - - -
-
- - -

Best Practices

- -
-

Step Design

-
    -
  • Keep step labels short and descriptive (1-3 words)
    • -
  • Use meaningful icons that relate to step content
    • -
  • Limit to 3-7 steps maximum for better usability
    • -
  • Group related tasks into single steps
    • -
- -

Navigation

-
    -
  • Always provide a "Back" button (except on first step)
    • -
  • Disable "Next" until current step is valid
    • -
  • Use clear action labels: "Continue", "Next", "Finish"
    • -
  • Show progress indicator (current step / total steps)
    • -
- -

User Experience

-
    -
  • Validate input before allowing progression
    • -
  • Save progress automatically when possible
    • -
  • Provide clear error messages with solutions
    • -
  • Allow users to edit previous steps
    • -
  • Show completion status for each step
    • -
- -
-
- - ); -}; - -export default StepperGuidance; diff --git a/src/sections/Projects/Sistent/components/stepper/index.js b/src/sections/Projects/Sistent/components/stepper/index.js deleted file mode 100644 index 1183c88fb6143..0000000000000 --- a/src/sections/Projects/Sistent/components/stepper/index.js +++ /dev/null @@ -1,186 +0,0 @@ -import React from "react"; -import { navigate } from "gatsby"; -import { useLocation } from "@reach/router"; - -import { SistentThemeProvider, CustomizedStepper, useStepper, Box, Typography } from "@sistent/sistent"; -import TabButton from "../../../../../reusecore/Button"; -import { SistentLayout } from "../../sistent-layout"; -import { Col, Row } from "../../../../../reusecore/Layout"; -import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode"; -import PersonIcon from "@mui/icons-material/Person"; -import SettingsIcon from "@mui/icons-material/Settings"; -import CheckCircleIcon from "@mui/icons-material/CheckCircle"; - -const StepOneDemo = () => ( - - User Information - - Collect basic user details - - -); - -const StepTwoDemo = () => ( - - Account Settings - - Configure preferences - - -); - -const StepThreeDemo = () => ( - - Complete Setup - - Review and finish - - -); - -const SistentStepper = () => { - const location = useLocation(); - const { isDark } = useStyledDarkMode(); - - const { - activeStep, - handleNext, - goBack, - stepLabels, - icons, - activeStepComponent: ActiveStepComponent - } = useStepper({ - steps: [ - { label: "User Info", component: StepOneDemo, icon: PersonIcon }, - { label: "Settings", component: StepTwoDemo, icon: SettingsIcon }, - { label: "Complete", component: StepThreeDemo, icon: CheckCircleIcon } - ] - }); - - return ( - -
- -

Stepper

- -

- Steppers guide users through multi-step processes by breaking complex tasks - into manageable, sequential steps with clear progress indication. -

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

- Steppers are essential for breaking down complex workflows into digestible pieces. - They provide clear visual feedback about progress and help users understand - what's required at each stage of a process. -

- - -

Interactive Demo

- -

- Experience how the stepper component works with this interactive example: -

- - - - - - - - - - - - - - - - -

Key Features

- -

- The Sistent Stepper component provides several powerful features: -

- -

Linear Progress

-

- Users complete steps in sequence, ensuring all required information - is collected before proceeding to the next step. -

- -

Visual Progress Indication

-

- Clear visual feedback shows completed steps, current step, and remaining - steps, helping users understand their progress. -

- -

Customizable Icons

-

- Each step can have a custom icon that represents its content or purpose, - making the interface more intuitive and visually appealing. -

- -

Responsive Design

-

- The stepper adapts to different screen sizes, maintaining usability - across desktop and mobile devices. -

-
-
- - ); -}; - -export default SistentStepper; diff --git a/src/sections/Projects/Sistent/components/switch/code.js b/src/sections/Projects/Sistent/components/switch/code.js deleted file mode 100644 index a54e863a28466..0000000000000 --- a/src/sections/Projects/Sistent/components/switch/code.js +++ /dev/null @@ -1,152 +0,0 @@ -import React, { useState } from "react"; -import { CodeBlock } from "../button/code-block"; -import { Switch, FormControlLabel, SistentThemeProvider } from "@sistent/sistent"; -import { SistentLayout } from "../../sistent-layout"; -import TabButton from "../../../../../reusecore/Button"; -import { navigate } from "gatsby"; -import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode"; -import { useLocation } from "@reach/router"; - -const codes = [ - ` - - `, - ` - - `, - ` - - } - label="Enable Notifications" - /> - `, - ` - - `, -]; - -const SwitchCode = () => { - const [checked, setChecked] = useState(true); - const handleChange = (event) => setChecked(event.target.checked); - const location = useLocation(); - const { isDark } = useStyledDarkMode(); - return ( - -
- -

Switch

- -

- The Switch component allows users to toggle a setting between two states—on or off. -

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

Basic Switch

- -

- This is the default switch style used to represent changes between two states. -

-
-
- - - -
- -
- - -

Disabled Switch

- -

- Disabled switches show the state but are not interactive. -

-
-
- - - -
- -
- - -

Labeled Switch

- -

- Labels describe the action being toggled and improve accessibility. -

-
-
- - - } - label="Enable Notifications" - /> - -
- -
- - -

Small Switch

- -

- Use the size="small" prop for a more compact version. -

-
-
- - - -
- -
-
-
- - ); -}; - -export default SwitchCode; diff --git a/src/sections/Projects/Sistent/components/switch/guidance.js b/src/sections/Projects/Sistent/components/switch/guidance.js deleted file mode 100644 index 901b2d7a1bd42..0000000000000 --- a/src/sections/Projects/Sistent/components/switch/guidance.js +++ /dev/null @@ -1,138 +0,0 @@ -import React from "react"; -import { navigate } from "gatsby"; -import { useLocation } from "@reach/router"; -import { Row } from "../../../../../reusecore/Layout"; -import { - SistentThemeProvider, - Switch, - FormControlLabel, -} from "@sistent/sistent"; -import TabButton from "../../../../../reusecore/Button"; -import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode"; -import { SistentLayout } from "../../sistent-layout"; - -const SwitchGuidance = () => { - const location = useLocation(); - const { isDark } = useStyledDarkMode(); - - return ( - -
- -

Switch

- -

- The Switch is a toggle component used to instantly turn - features on or off. Its binary nature makes it ideal for - preferences and settings panels where real-time toggling is expected. -

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

Function

- - -

State Representation

-

- A Switch reflects its state visually, using a track and thumb - indicator. When toggled, the thumb slides across the track to - communicate the new value. This feedback is direct and immediate. -

- - - - - - -

State Variants

-

- A Switch can be active, inactive, or disabled. Use the disabled - state to communicate unavailable features or settings that require - prerequisites. -

- - - - - - - -

Labeling

- -

- Every Switch should be paired with a visible label. Use FormControlLabel to - visually bind labels to toggles for clarity and context. -

- - - - } - label="Enable Dark Mode" - /> - - - -

Label Placement

-

- Labels can be placed beside the Switch horizontally. For forms or - settings pages, maintaining vertical spacing with consistent margins - is recommended to improve readability and alignment. -

- - -

Sizing

- -

- The default Switch size is medium, which fits most use cases. Use size="small" when you have limited space or need to place toggles inside compact UI elements like tables, cards, or toolbars. -

- - - - - -
-
- - ); -}; - -export default SwitchGuidance; \ No newline at end of file diff --git a/src/sections/Projects/Sistent/components/switch/index.js b/src/sections/Projects/Sistent/components/switch/index.js deleted file mode 100644 index 3e120df13f226..0000000000000 --- a/src/sections/Projects/Sistent/components/switch/index.js +++ /dev/null @@ -1,147 +0,0 @@ -import React, { useState } from "react"; -import { navigate } from "gatsby"; -import { useLocation } from "@reach/router"; - -import { - SistentThemeProvider, - Switch, - FormControlLabel, -} from "@sistent/sistent"; -import TabButton from "../../../../../reusecore/Button"; -import { SistentLayout } from "../../sistent-layout"; -import { Row } from "../../../../../reusecore/Layout"; -import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode"; - -const SistentSwitch = () => { - const location = useLocation(); - const { isDark } = useStyledDarkMode(); - const [isChecked, setIsChecked] = useState(true); - const handleToggle = (e) => setIsChecked(e.target.checked); - - return ( - -
- -

Switch

- -

- A switch is an toggle component which allows users to toggle a setting on or off and is typically used for - system preferences or real-time configuration options. -

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

- Switches are ideal when a setting is either enabled or disabled, and - the user should be able to change it instantly without additional - confirmation. They are used to toggle between two states. -

- - -

States

- -

- The Switch supports different states including active, inactive, and disabled. Visual feedback is immediate, allowing users to quickly understand the current status of a toggle. -

- -
Checked
- - - - - - -
Unchecked
- - - - - - -
Disabled
- - - - - - -

Labeling

- -

- Labels should be concise and descriptive to provide clarity about - what each switch does. -

- - - - } - label="Dark Mode" - /> - - - - -

Sizing

- -

- Switches come in two sizes: medium and{" "} - small. The small size is particularly useful for - dense layouts and compact UI patterns. -

- -
Medium (default)
- - - - - -
Small
- - - - -
-
- - ); -}; - -export default SistentSwitch; \ No newline at end of file diff --git a/src/sections/Projects/Sistent/components/tabs/code.js b/src/sections/Projects/Sistent/components/tabs/code.js deleted file mode 100644 index 98346c70beef3..0000000000000 --- a/src/sections/Projects/Sistent/components/tabs/code.js +++ /dev/null @@ -1,624 +0,0 @@ -import React, { useState } from "react"; -import { navigate } from "gatsby"; -import { useLocation } from "@reach/router"; -import { SistentThemeProvider, Tabs, Tab, Box, Typography } from "@sistent/sistent"; -import { CodeBlock } from "../button/code-block"; -import TabButton from "../../../../../reusecore/Button"; -import { SistentLayout } from "../../sistent-layout"; -import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode"; -import HomeIcon from "@mui/icons-material/Home"; -import SearchIcon from "@mui/icons-material/Search"; -import FavoriteIcon from "@mui/icons-material/Favorite"; -import PersonIcon from "@mui/icons-material/Person"; - -function TabPanel({ children, value, index, ...other }) { - return ( - - ); -} - -const codes = { - basic: `import { Tabs, Tab, Box, Typography } from "@sistent/sistent"; - -function BasicTabs() { - const [value, setValue] = useState(0); - - const handleChange = (event, newValue) => { - setValue(newValue); - }; - - return ( - - - - - - - - Dashboard Content - - - Analytics Content - - - Settings Content - - - ); -}`, - - scrollable: `import { Tabs, Tab, Box } from "@sistent/sistent"; - -function ScrollableTabs() { - const [value, setValue] = useState(0); - - return ( - - setValue(newValue)} - variant="scrollable" - scrollButtons="auto" - > - - - - - - - - - ); -}`, - - fullWidth: `import { Tabs, Tab, Box } from "@sistent/sistent"; - -function FullWidthTabs() { - const [value, setValue] = useState(0); - - return ( - - setValue(newValue)} - variant="fullWidth" - > - - - - - - ); -}`, - - vertical: `import { Tabs, Tab, Box } from "@sistent/sistent"; - -function VerticalTabs() { - const [value, setValue] = useState(0); - - return ( - - setValue(newValue)} - sx={{ borderRight: 1, borderColor: 'divider' }} - > - - - - - - - General Settings - - - ); -}`, - - icon: `import { Tabs, Tab, Box } from "@sistent/sistent"; -import HomeIcon from "@mui/icons-material/Home"; -import SearchIcon from "@mui/icons-material/Search"; -import FavoriteIcon from "@mui/icons-material/Favorite"; -import PersonIcon from "@mui/icons-material/Person"; - -function IconTabs() { - const [value, setValue] = useState(0); - - return ( - - setValue(newValue)}> - } label="Home" /> - } label="Search" /> - } label="Favorites" /> - } label="Profile" /> - - - ); -}`, - - disabled: `import { Tabs, Tab } from "@sistent/sistent"; - -function DisabledTabs() { - const [value, setValue] = useState(0); - - return ( - setValue(newValue)}> - - - - - - ); -}`, - - colors: `import { Tabs, Tab, Box } from "@sistent/sistent"; - -function ColoredTabs() { - const [value, setValue] = useState(0); - - return ( - - setValue(newValue)} - indicatorColor="secondary" - textColor="secondary" - sx={{ - '& .MuiTab-root': { - color: '#1976d2', // Custom blue color - }, - '& .Mui-selected': { - color: '#d81b60', // Custom pink color for selected - }, - '& .MuiTabs-indicator': { - backgroundColor: '#d81b60', // Pink indicator - } - }} - > - - - - - - ); -}`, - - controlled: `import { Tabs, Tab, Box, Button } from "@sistent/sistent"; - -function ControlledTabs() { - const [value, setValue] = useState(0); - - const handleNext = () => { - setValue((prev) => (prev + 1) % 3); - }; - - return ( - - setValue(newValue)}> - - - - - - - - - ); -}`, - - wrapped: `import { Tabs, Tab, Box } from "@sistent/sistent"; - -function WrappedLabelTabs() { - const [value, setValue] = useState(0); - - return ( - - setValue(newValue)} - sx={{ - '& .MuiTab-root': { - minHeight: 72, - alignItems: 'center', - whiteSpace: 'normal', - textAlign: 'center' - } - }} - > - - - - - - ); -}` -}; - -const SistentTabsCode = () => { - const location = useLocation(); - const { isDark } = useStyledDarkMode(); - - // State for different tab examples - const [basicValue, setBasicValue] = useState(0); - const [scrollableValue, setScrollableValue] = useState(0); - const [fullWidthValue, setFullWidthValue] = useState(0); - const [verticalValue, setVerticalValue] = useState(0); - const [iconValue, setIconValue] = useState(0); - const [disabledValue, setDisabledValue] = useState(0); - const [colorValue, setColorValue] = useState(0); - const [controlledValue, setControlledValue] = useState(0); - const [wrappedValue, setWrappedValue] = useState(0); - - const handleControlledNext = () => { - setControlledValue((prev) => (prev + 1) % 3); - }; - - return ( - -
- -

Tabs

- -

- Here are code examples for all different variations and props of the Tabs component. - Each example shows the implementation with a live preview and copyable code. -

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

Basic Tabs

- -

- Standard horizontal tabs with controlled state and content panels. -

-
-
- - - setBasicValue(newValue)}> - - - - - - Dashboard Content - - - Analytics Content - - - Settings Content - - - -
- -
- - -

Scrollable Tabs

- -

- Tabs that can scroll horizontally when content overflows the container width. -

-
-
- - - setScrollableValue(newValue)} - variant="scrollable" - scrollButtons="auto" - > - - - - - - - - - -
- -
- - -

Full Width Tabs

- -

- Tabs that expand to fill the entire width of their container. -

-
-
- - - setFullWidthValue(newValue)} - variant="fullWidth" - > - - - - - - -
- -
- - -

Vertical Tabs

- -

- Tabs arranged vertically, perfect for sidebar navigation. -

-
-
- - - setVerticalValue(newValue)} - sx={{ borderRight: 1, borderColor: "divider", minWidth: 140 }} - > - - - - - - General Settings - Privacy Settings - Security Settings - Notification Settings - - -
- -
- - -

Icon Tabs

- -

- Tabs enhanced with icons for better visual context and usability. -

-
-
- - - setIconValue(newValue)}> - } label="Home" /> - } label="Search" /> - } label="Favorites" /> - } label="Profile" /> - - - Home Content - - - Search Content - - - Favorites Content - - - Profile Content - - - -
- -
- - -

Disabled Tabs

- -

- Individual tabs can be disabled to indicate unavailable functionality. -

-
-
- - setDisabledValue(newValue)}> - - - - - - -
- -
- - -

Colored Tabs

- -

- Customize the indicator and text colors to match your design system. -

-
-
- - - setColorValue(newValue)} - indicatorColor="secondary" - textColor="secondary" - sx={{ - "& .MuiTab-root": { - color: isDark ? "#90caf9" : "#1976d2", - }, - "& .Mui-selected": { - color: isDark ? "#f48fb1" : "#d81b60", - }, - "& .MuiTabs-indicator": { - backgroundColor: isDark ? "#f48fb1" : "#d81b60", - } - }} - > - - - - - - Home Content with Custom Colors - - - Profile Content with Custom Colors - - - Settings Content with Custom Colors - - - -
- -
- - -

Controlled Tabs with External Controls

- -

- Programmatically control which tab is active using external buttons or logic. -

-
-
- - - setControlledValue(newValue)}> - - - - - - - Next Step - - - - Step 1 Content - - - Step 2 Content - - - Step 3 Content - - - -
- -
- - -

Wrapped Labels Tabs

- -

- Tabs with longer labels that can wrap to multiple lines when needed. -

-
-
- - - setWrappedValue(newValue)} - sx={{ - "& .MuiTab-root": { - minHeight: 72, - alignItems: "center", - whiteSpace: "normal", - textAlign: "center" - } - }} - > - - - - - - User Management Content - - - Analytics Content - - - Configuration Content - - - -
- -
-
-
- - ); -}; - -export default SistentTabsCode; diff --git a/src/sections/Projects/Sistent/components/tabs/guidance.js b/src/sections/Projects/Sistent/components/tabs/guidance.js deleted file mode 100644 index 3098901b71591..0000000000000 --- a/src/sections/Projects/Sistent/components/tabs/guidance.js +++ /dev/null @@ -1,515 +0,0 @@ -import React, { useState } from "react"; -import { navigate } from "gatsby"; -import { useLocation } from "@reach/router"; -import { SistentLayout } from "../../sistent-layout"; -import { SistentThemeProvider, Tabs, Tab, Box, Typography } from "@sistent/sistent"; -import TabButton from "../../../../../reusecore/Button"; -import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode"; -import HomeIcon from "@mui/icons-material/Home"; -import SearchIcon from "@mui/icons-material/Search"; -import FavoriteIcon from "@mui/icons-material/Favorite"; -import PersonIcon from "@mui/icons-material/Person"; - -function TabPanel({ children, value, index, ...other }) { - return ( - - ); -} - -const TabsGuidance = () => { - const { isDark } = useStyledDarkMode(); - const location = useLocation(); - - - const [standardValue, setStandardValue] = useState(0); - const [scrollableValue, setScrollableValue] = useState(0); - const [fullWidthValue, setFullWidthValue] = useState(0); - const [verticalValue, setVerticalValue] = useState(0); - const [iconValue, setIconValue] = useState(0); - const [disabledValue, setDisabledValue] = useState(0); - const [coloredValue, setColoredValue] = useState(0); - const [controlledValue, setControlledValue] = useState(0); - const [wrappedValue, setWrappedValue] = useState(0); - - const handleControlledNext = () => { - setControlledValue((prev) => (prev + 1) % 3); - }; - - return ( - -
- -

Tabs

- -

- This guide shows you how to use different variations of the Tabs component - effectively in your applications. Each variation serves specific use cases - and design requirements. -

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

Standard Tabs

- -

- The default tab layout with horizontal arrangement. Best for general navigation - between related content sections when you have 3-7 tabs that fit comfortably - in the available width. -

-
-
- - - setStandardValue(newValue)}> - - - - - - - Dashboard - Overview of key metrics and recent activity - - - Analytics - Detailed charts and performance data - - - Reports - Generated reports and export options - - - Settings - Configuration and preferences - - - -
-
- - -

Scrollable Tabs

- -

- When you have many tabs that don't fit in the available width, scrollable tabs - provide navigation arrows. This prevents text truncation and maintains readability. - Best for dashboards with multiple sections or detailed navigation. -

-
-
- - - setScrollableValue(newValue)} - variant="scrollable" - scrollButtons="auto" - > - - - - - - - - - - Overview - General information and status - - - Performance - Speed and optimization metrics - - - Security - Access control and permissions - - - Integrations - Connected services and APIs - - - Billing - Payment and subscription details - - - Team - User management and collaboration - - - Advanced - Developer settings and customization - - - -
-
- - -

Full Width Tabs

- -

- Tabs expand to fill the entire width of their container, distributing space - evenly. Perfect for layouts where you want tabs to span the full width, - typically with 2-4 tabs for optimal appearance. -

-
-
- - - setFullWidthValue(newValue)} - variant="fullWidth" - > - - - - - - Profile - Personal information and avatar settings - - - Account - Login credentials and security settings - - - Preferences - Application settings and customization - - - -
-
- - -

Vertical Tabs

- -

- Vertical orientation is ideal for sidebar navigation or when horizontal space - is limited. Common in admin panels, settings pages, and detailed configuration - interfaces where you need more vertical space for content. -

-
-
- - - setVerticalValue(newValue)} - sx={{ borderRight: 1, borderColor: "divider", minWidth: 140 }} - > - - - - - - - - General Settings
- Basic configuration options and preferences for your account. - - - Privacy Settings
- Control who can see your information and activity. - - - Security Settings
- Manage passwords, two-factor authentication, and access controls. - - - Notification Settings
- Choose what notifications you receive and how you receive them. - - - Advanced Settings
- Developer options, API keys, and experimental features. - - - -
-
- - -

Icon Tabs

- -

- Enhance usability with icons that provide visual context. Icons can be used - alone for compact layouts or combined with labels for better accessibility. - Perfect for mobile interfaces or when space is at a premium. -

-
-
- - - setIconValue(newValue)}> - } label="Home" /> - } label="Search" /> - } label="Favorites" /> - } label="Profile" /> - - - Home - Main dashboard with overview information - - - Search - Find and filter through your content - - - Favorites - Your saved and bookmarked items - - - Profile - Personal settings and account information - - - -
-
- - -

Disabled Tabs

- -

- Some tabs can be disabled to indicate unavailable functionality or content - that requires certain conditions to be met. Useful for progressive disclosure - or when features depend on user permissions or subscription levels. -

-
-
- - - setDisabledValue(newValue)}> - - - - - - - Basic Plan - Features available in your current plan - - - Pro Features - Upgrade required to access these features - - - Enterprise - Contact sales for enterprise solutions - - - Support - Help documentation and contact information - - - -
-
- - -

Colored Tabs

- -

- Customize the indicator and text colors to match your design system. Use different - color combinations to create visual hierarchy or match your brand colors. -

-
-
- - - setColoredValue(newValue)} - indicatorColor="secondary" - textColor="secondary" - sx={{ - "& .MuiTab-root": { - color: isDark ? "#90caf9" : "#1976d2", - }, - "& .Mui-selected": { - color: isDark ? "#f48fb1" : "#d81b60", - }, - "& .MuiTabs-indicator": { - backgroundColor: isDark ? "#f48fb1" : "#d81b60", - } - }} - > - - - - - - Home - Main dashboard with custom colored tabs - - - Profile - User profile with secondary color theme - - - Settings - Application settings with brand colors - - - -
-
- - -

Controlled Tabs

- -

- Programmatically control which tab is active using external buttons or logic. - Useful for wizards, multi-step forms, or when you need to control navigation - flow based on user actions or validation. -

-
-
- - - setControlledValue(newValue)}> - - - - - - - Next Step - - - - Step 1 - Initial setup and configuration - - - Step 2 - Data input and validation - - - Step 3 - Review and confirmation - - - -
-
- - -

Wrapped Labels Tabs

- -

- Tabs with longer labels that can wrap to multiple lines when needed. Useful when - you have descriptive tab names that don't fit in a single line, while maintaining - readability and accessibility. -

-
-
- - - setWrappedValue(newValue)} - sx={{ - "& .MuiTab-root": { - minHeight: 72, - alignItems: "center", - whiteSpace: "normal", - textAlign: "center" - } - }} - > - - - - - - User Management and Permissions - Manage users, roles, and access controls - - - Data Analytics and Reporting - View reports, analytics, and insights - - - System Configuration - Configure system settings and preferences - - - -
-
- - -

Best Practices

- - -

When to Use Each Variation

-
    -

  • Standard Tabs: Use for 3-7 tabs in desktop layouts with sufficient horizontal space

    • -

  • Scrollable Tabs: Use when you have 5+ tabs or limited horizontal space

    • -

  • Full Width Tabs: Use for 2-4 important tabs in wide containers

    • -

  • Vertical Tabs: Use for sidebar navigation, admin panels, or settings pages

    • -

  • Icon Tabs: Use for mobile interfaces or when space is limited

    • -

  • Disabled Tabs: Use to show unavailable features or progressive disclosure

    • -

  • Colored Tabs: Use to match brand colors or create visual hierarchy

    • -

  • Controlled Tabs: Use for wizards, multi-step forms, or programmatic navigation

    • -

  • Wrapped Labels Tabs: Use when tab labels are longer and need multiple lines

    • -
- -

Content Organization

-
    -

  • Keep tab labels concise and descriptive (1-2 words when possible)

    • -

  • Use consistent naming conventions across tabs

    • -

  • Organize tabs in logical order of importance or user workflow

    • -

  • Group related functionality within the same tab

    • -
- -

Accessibility Guidelines

-
    -

  • Ensure sufficient color contrast between active and inactive tabs

    • -

  • Use descriptive labels that work well with screen readers

    • -

  • Support keyboard navigation with arrow keys and tab key

    • -

  • Provide clear focus indicators for keyboard users

    • -
- -

Design Considerations

-
    -

  • Maintain visual hierarchy with clear active/inactive states

    • -

  • Use consistent spacing and alignment across all tabs

    • -

  • Consider mobile responsiveness when choosing tab variants

    • -

  • Test with real content to ensure tabs work with varying label lengths

    • -
-
-
- - ); -}; - -export default TabsGuidance; diff --git a/src/sections/Projects/Sistent/components/tabs/index.js b/src/sections/Projects/Sistent/components/tabs/index.js deleted file mode 100644 index 07c55126db0f2..0000000000000 --- a/src/sections/Projects/Sistent/components/tabs/index.js +++ /dev/null @@ -1,162 +0,0 @@ -import React, { useState } from "react"; -import { navigate } from "gatsby"; -import { useLocation } from "@reach/router"; -import { SistentThemeProvider, Tabs, Tab, Box, Typography } from "@sistent/sistent"; -import TabButton from "../../../../../reusecore/Button"; -import { SistentLayout } from "../../sistent-layout"; -import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode"; - -function TabPanel({ children, value, index, ...other }) { - return ( - - ); -} - -const SistentTabs = () => { - const location = useLocation(); - const { isDark } = useStyledDarkMode(); - const [tabValue, setTabValue] = useState(0); - - const handleTabChange = (event, newValue) => { - setTabValue(newValue); - }; - - return ( - -
- -

Tabs

- -

- Tabs organize content across different screens, data sets, and other interactions. - They allow users to navigate between different views within the same context, - making it easy to explore and switch between related content sections. -

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

- The Tabs component provides an intuitive way to organize and - navigate between related content sections. It supports various configurations - and is essential for creating organized user interfaces. -

- - -

Simple Example

- -

- Here's a basic example showing how tabs work with content panels: -

-
-
- - - - - - - - - Dashboard Content
- This is where you would display dashboard information and metrics. - - - Analytics Content
- Here you can show charts, graphs, and analytical data. - - - Settings Content
- Configuration options and preferences would go here. - - - -
-
- - -

Variations

- - -

You can customize the Tabs as per your requirements by passing various props to the component

- -

By Variant

-
    -

  • Standard: Default horizontal tabs with fixed positioning

    • -

  • Scrollable: Tabs that can scroll horizontally when overflowing

    • -

  • Full Width: Tabs that expand to fill the entire container width

    • -
- -

By Orientation

-
    -

  • Horizontal: Standard left-to-right tab layout

    • -

  • Vertical: Top-to-bottom tab layout, perfect for sidebars

    • -
- -

By Content

-
    -

  • Text Only: Tabs with only text labels

    • -

  • Icon Only: Tabs with only icons

    • -

  • Icon + Text: Tabs with both icons and text labels

    • -

  • With Badges: Tabs that can display notification badges

    • -
- -

By State

-
    -

  • Enabled: Interactive tabs that users can click

    • -

  • Disabled: Non-interactive tabs that are grayed out

    • -

  • Active: The currently selected tab

    • -

  • Inactive: Non-selected tabs available for interaction

    • -
- -

By Customization

-
    -

  • Colored Tabs: Custom indicator and text colors to match design system

    • -

  • Controlled Tabs: Programmatically controlled tab selection

    • -

  • Wrapped Labels: Tabs with longer labels that can wrap to multiple lines

    • -
-
-
- - ); -}; - -export default SistentTabs; \ No newline at end of file diff --git a/src/sections/Projects/Sistent/components/text-field/code.js b/src/sections/Projects/Sistent/components/text-field/code.js deleted file mode 100644 index 113df7b4ae1f0..0000000000000 --- a/src/sections/Projects/Sistent/components/text-field/code.js +++ /dev/null @@ -1,768 +0,0 @@ -import React from "react"; -import { navigate } from "gatsby"; -import { useLocation } from "@reach/router"; - -import { Box, SistentThemeProvider, TextField } from "@sistent/sistent"; -import { CodeBlock } from "../button/code-block"; -import { SistentLayout } from "../../sistent-layout"; - -import TabButton from "../../../../../reusecore/Button"; -import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode"; - -const codes = [ - ` -
- - - - - - -
-
- - - - - - -
-
- - - - - - -
- `, - ` -
- - -
-
- - -
-
- - -
- `, - ` -
- - - -
-
- - - -
-
- - - -
- `, - ` -
- - -
-
- - -
-
- - -
- `, - ` - - `, -]; - -const TextFieldCode = () => { - const location = useLocation(); - const { isDark } = useStyledDarkMode(); - - return ( - -
- -

Text Field

- -

- The TextField component is a versatile input field used to capture - user input in forms and user interfaces. It can handle a variety of - input types, such as text, numbers, emails, and passwords, and offers - built-in styling and validation features. -

-
- navigate("/projects/sistent/components/text-field")} - title="Overview" - /> - - navigate("/projects/sistent/components/text-field/guidance") - } - title="Guidance" - /> - navigate("/projects/sistent/identity/color/code")} - title="Code" - /> -
-
-

- A TextField allow user to enter and edit any text. It mostly present - in Forms or dialogue box in UI. TextField are crucial and integral - elements in an interface. It allows to get data from enetered user. -

- -

Form Props

- -

- Standard form attributes are supported, for example required, - disabled, type, etc. HelperText attributes is used to give context - about a field's input, such as how the input will be used. -

-
-
- - -
- - - - - - -
-
- - - - - - -
-
- - - - - - -
- - -
- -
- -

Validation

- -

- The error property toggles the error state. The helperText prop can - then be used to provide feedback to the user about the error. As - shown below it can be used with variant such as outlined (default), - filled, and standard. -

-
-
- - -
- - -
-
- - -
-
- - -
- - -
- -
- -

Multiline

- -

- The multiline prop transforms the text field into a TextareaAutosize - element. Unless the rows prop is set, the height of the text field - dynamically matches its content (using TextareaAutosize). You can - use the minRows and maxRows props to bound it. -

-
-
- - -
- - - -
-
- - - -
-
- - - -
- - -
- -
- -

Sizes

- -

- TextField can have small or normal field sizes. According the - requirement it can be adjusted. -

-
-
- - -
- - -
-
- - -
-
- - -
- - -
- -
- -

Full Width

- -

- FullWidth attribute can be used to make the input take up the full - width of its container. -

-
-
- - - - - -
- - -
-
-
- - ); -}; - -export default TextFieldCode; diff --git a/src/sections/Projects/Sistent/components/text-field/guidance.js b/src/sections/Projects/Sistent/components/text-field/guidance.js deleted file mode 100644 index c06188d3b0e7f..0000000000000 --- a/src/sections/Projects/Sistent/components/text-field/guidance.js +++ /dev/null @@ -1,216 +0,0 @@ -import React from "react"; -import { navigate } from "gatsby"; -import { useLocation } from "@reach/router"; -import { Box, SistentThemeProvider, TextField } from "@sistent/sistent"; -import { SistentLayout } from "../../sistent-layout"; - -import TabButton from "../../../../../reusecore/Button"; -import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode"; - -const TextFieldGuidance = () => { - const location = useLocation(); - const { isDark } = useStyledDarkMode(); - - return ( - -
- -

Text Field

- -

- The TextField component is a versatile input field used to capture - user input in forms and user interfaces. It can handle a variety of - input types, such as text, numbers, emails, and passwords, and offers - built-in styling and validation features. -

-
- navigate("/projects/sistent/components/text-field")} - title="Overview" - /> - - navigate("/projects/sistent/components/text-field/guidance") - } - title="Guidance" - /> - - navigate("/projects/sistent/components/text-field/code") - } - title="Code" - /> -
-
-

- For proper application, these TextField can be used for different - purposes. It can be effectively used in any project to increase User - Interaction. Lets see how can we use TextField effectively in our - project. -

- -

Basic TextField

- -

- The TextField wrapper component is a complete form control including - a label, variant, helper text etc. TextField comes with three - variants: outlined (default), filled, and standard. -

-

Outlined (default)

-

- Outlined TextField are TextField that do not have a fill, but have a - border or stroke to define its bounding box as well as a text label - to convey a thought for users to take action upon. Colors can also - be used to style these buttons in order to fit into the theme align - with brand guidelines. -

- - - - - -

Filled

-

- Filled TextField are TextField that consist a background color fill - and a text in it. Depending on the theme or intended action, the - color fill can range from a primary brand color to any other - applicable color in a brand’s color palette. -

- - - - - -

Standard

-

- Standard TextField are TextField that do not have background color - fill and a text in it. Colors can also be used to style these - buttons in order to fit into the theme align with brand guidelines. -

- - - - - - -

When to use different properties?

- -

- You might come across in a situation you needed some helper text, - field with number, disabled field etc. Let's see different - properties availble for TextField. -

-

Type prop

-

Type prop can have a value such as password, number or text.

- - -
- - - -
- - -

Helper Text

-

- Helper text also very effective for your form or for better - understanding. -

- - -
- -
- - -

Error

-

- Error handling is very important for UI. User might come in - sitatution where they enter invalid value or forget to enter any - data in TextField. Here come error prop helps to indicate partucular - field are required or user have entered invalid value. -

- - -
- -
- - -
-
- - ); -}; - -export default TextFieldGuidance; diff --git a/src/sections/Projects/Sistent/components/text-field/index.js b/src/sections/Projects/Sistent/components/text-field/index.js deleted file mode 100644 index a9c2ceeb19796..0000000000000 --- a/src/sections/Projects/Sistent/components/text-field/index.js +++ /dev/null @@ -1,416 +0,0 @@ -import React from "react"; -import { navigate } from "gatsby"; -import { useLocation } from "@reach/router"; - -import { Box, SistentThemeProvider, TextField } from "@sistent/sistent"; -import TabButton from "../../../../../reusecore/Button"; -import { SistentLayout } from "../../sistent-layout"; -import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode"; - -const SistentTextField = () => { - const location = useLocation(); - const { isDark } = useStyledDarkMode(); - - return ( - -
- -

Text Field

- -

- The TextField component is a versatile input field used to capture user input in forms and user interfaces. It can handle a variety of input types, such as text, numbers, emails, and passwords, and offers built-in styling and validation features. -

-
- navigate("/projects/sistent/components/text-field")} - title="Overview" - /> - - navigate("/projects/sistent/components/text-field/guidance") - } - title="Guidance" - /> - navigate("/projects/sistent/components/text-field/code")} - title="Code" - /> -
-
-

- A Text fileds allow user to enter and edit any text. It mostly present in Forms or dialogue box in UI. - TextField are crucial and integral elements in an interface. It allows to get data from enetered user. -

- -

Form Props

- -

- Standard form attributes are supported, for example required, disabled, type, etc. - HelperText attributes is used to give context about a field's input, - such as how the input will be used. -

- - -
- - - - - - -
-
- - - - - - -
-
- - - - - - -
- - - -

Validation

- -

- The error property toggles the error state. The helperText prop can then be used to provide feedback to the user about the error. As shown below it can be used with variant such as outlined (default), filled, and standard. -

- - -
- - -
-
- - -
-
- - -
- - - -

Multiline

- -

- The multiline prop transforms the text field into a TextareaAutosize element. Unless the rows prop is set, the height of the text field dynamically matches its content (using TextareaAutosize). You can use the minRows and maxRows props to bound it. -

- - -
- - - -
-
- - - -
-
- - - -
- - -
- -

Sizes

- -

- TextField can have small or normal field sizes. According the requirement it can be adjusted. -

- - -
- - -
-
- - -
-
- - -
- - -
-
- -

Full Width

- -

- FullWidth attribute can be used to make the input take up the full width of its container. -

- - - - - -
-
-
- - ); -}; - -export default SistentTextField; diff --git a/src/sections/Projects/Sistent/components/text-input/code.js b/src/sections/Projects/Sistent/components/text-input/code.js deleted file mode 100644 index 773355b8f567f..0000000000000 --- a/src/sections/Projects/Sistent/components/text-input/code.js +++ /dev/null @@ -1,271 +0,0 @@ -import React from "react"; -import { navigate } from "gatsby"; -import { useLocation } from "@reach/router"; - -import { SistentThemeProvider, Input } from "@sistent/sistent"; -import { CodeBlock } from "../button/code-block"; - - -import TabButton from "../../../../../reusecore/Button"; -import { SistentLayout } from "../../sistent-layout"; -import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode"; - -const codes = [ - "", - ``, - ``, - ` - -`, - ` - -`, - ``, - `` -]; - -const TextInputCode = () => { - const location = useLocation(); - const { isDark } = useStyledDarkMode(); - - return ( - -
- -

Text Input

- -

- Input components provide users with the ability to enter text data in forms and interfaces. - They support various input types, validation states, and customization options for creating - effective data collection experiences. -

-
- navigate("/projects/sistent/components/text-input")} - title="Overview" - /> - - navigate("/projects/sistent/components/text-input/guidance") - } - title="Guidance" - /> - - navigate("/projects/sistent/components/text-input/code") - } - title="Code" - /> -
-
-

- The Input component is essential for collecting user data in forms. - It provides immediate feedback during data entry, supports various input types, - and maintains consistency with your application's design system. -

- - -

Basic Text Input

- -

- A simple input field for collecting single-line text data. This is the most common - form of text input used across applications. -

-
-
- - - -
- -
- - -

Labeled Input

- -

- Inputs with labels provide better accessibility and user guidance. Labels clearly - identify the purpose of each input field and support screen readers. -

-
-
- - - -
- -
- - -

Multiline Text Input

- -

- For longer text content that may span multiple lines. The multiline input - automatically expands to accommodate content and provides users with adequate space. -

-
-
- - - -
- -
- - -

Color Options

- -

- Input components support various color themes to match your application's - design system. Colors can convey different meanings or states within your interface. -

-
-
- -
- - - -
- -
- -
- - -

Different Input Types

- -

- Various input types provide specialized behavior and validation for different - data formats. Choose the appropriate type to enhance user experience and data quality. -

-
-
- -
- - - -
- -
- -
- - -

Error State

- -

- Error states provide visual feedback when validation fails. Combined with helper text, - they guide users toward resolving input issues effectively. -

-
-
- - - -
- -
- - -

Disabled State

- -

- Disabled inputs are non-interactive and typically used for read-only data - or when certain conditions haven't been met to enable the input. -

-
-
- - - -
- -
-
-
- - ); -}; - -export default TextInputCode; \ No newline at end of file diff --git a/src/sections/Projects/Sistent/components/text-input/guidance.js b/src/sections/Projects/Sistent/components/text-input/guidance.js deleted file mode 100644 index 878d15c0fea94..0000000000000 --- a/src/sections/Projects/Sistent/components/text-input/guidance.js +++ /dev/null @@ -1,219 +0,0 @@ -import React, { useState } from "react"; -import { navigate } from "gatsby"; -import { useLocation } from "@reach/router"; -import { SistentLayout } from "../../sistent-layout"; -import { SistentThemeProvider, Input } from "@sistent/sistent"; -import { Row } from "../../../../../reusecore/Layout"; -import TabButton from "../../../../../reusecore/Button"; -import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode"; - -const TextInputGuidance = () => { - const { isDark } = useStyledDarkMode(); - const location = useLocation(); - - const [currentColor, setCurrentColor] = useState("primary"); - const [currentType, setCurrentType] = useState("text"); - - const colors = ["primary", "secondary", "success", "error", "warning", "info"]; - const types = ["text", "email", "password", "number", "tel", "url", "search"]; - - const getPlaceholderText = () => { - switch (currentType) { - case "email": return "example@domain.com"; - case "password": return "Enter password"; - case "number": return "123"; - case "tel": return "+1 (555) 123-4567"; - case "url": return "https://example.com"; - case "search": return "Search..."; - default: return "Enter text"; - } - }; - - return ( - -
- -

Text Input

- -

- The Input component is a versatile form control that enables users to enter and edit text data. - It supports various input types, validation states, and customization options to create - accessible and user-friendly data collection experiences. -

-
- navigate("/projects/sistent/components/text-input")} - title="Overview" - /> - - navigate("/projects/sistent/components/text-input/guidance") - } - title="Guidance" - /> - navigate("/projects/sistent/components/text-input/code")} - title="Code" - /> -
-
-

- Proper usage of the Input component can enhance user experience by providing clear, - accessible, and visually consistent form controls. Below are guidelines and interactive - examples to help you implement inputs effectively. -

- - -

Usage

- -

- To use the Input component, include it in your form with the desired props. The component - supports various input types and styling options: -

-
    -
  • type for input behavior (text, email, password, etc.)
    • -
  • color for theme colors
    • -
  • multiline for text areas
    • -
  • disabled, error, required for different states
    • -
-
- - -

Colors

- -

- Customize the color theme of the input component. Colors can convey different meanings - or states within your interface: -

- - - - - -
- {colors.map((color) => ( - setCurrentColor(color)} - title={color.charAt(0).toUpperCase() + color.slice(1)} - /> - ))} -
- -
- -

Input Types

- -

- Different input types provide specialized behavior and validation for different - data formats. The placeholder text automatically updates to match the selected type: -

- - - - - -
- {types.map((type) => ( - setCurrentType(type)} - title={type.charAt(0).toUpperCase() + type.slice(1)} - /> - ))} -
- -
- -

Input States

- -

- Input components support various states to provide feedback and control user interaction. - These examples demonstrate different state combinations: -

-
- -
- - - - - -
- -
- - -

Best Practices

- -

Accessibility

-

- Always provide clear labels for screen readers and ensure sufficient color contrast. - Use helper text to provide additional context and validation feedback. -

- -

Validation

-

- Implement real-time validation when appropriate, but avoid being overly aggressive. - Provide clear error messages that help users understand how to fix issues. -

- -

Placeholder Text

-

- Use placeholder text to show examples of expected input format, but don't rely on it - as the primary way to communicate requirements. Always include proper labels. -

-
-
- - ); -}; - -export default TextInputGuidance; diff --git a/src/sections/Projects/Sistent/components/text-input/index.js b/src/sections/Projects/Sistent/components/text-input/index.js deleted file mode 100644 index e81f792f721ba..0000000000000 --- a/src/sections/Projects/Sistent/components/text-input/index.js +++ /dev/null @@ -1,130 +0,0 @@ -import React from "react"; -import { navigate } from "gatsby"; -import { useLocation } from "@reach/router"; - -import { SistentThemeProvider, Input } from "@sistent/sistent"; -import { Row } from "../../../../../reusecore/Layout"; -import TabButton from "../../../../../reusecore/Button"; -import { SistentLayout } from "../../sistent-layout"; -import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode"; - -const SistentTextInput = () => { - const location = useLocation(); - const { isDark } = useStyledDarkMode(); - - return ( - -
- -

Text Input

- -

- The Input component is a versatile form control that enables users to enter and edit text data. - It supports various input types, validation states, and customization options to create - accessible and user-friendly data collection experiences. -

-
- navigate("/projects/sistent/components/text-input")} - title="Overview" - /> - - navigate("/projects/sistent/components/text-input/guidance") - } - title="Guidance" - /> - - navigate("/projects/sistent/components/text-input/code") - } - title="Code" - /> -
-
-

- Input components are fundamental building blocks for forms and data collection interfaces. - They provide immediate feedback to users and help maintain data quality through validation - and formatting features. The component adapts to different content types while maintaining - consistency with your design system. -

- -

Usage

- -

- The component can be used in several main variants: -

-
    -

  • Standard: Single-line text input for basic data collection

    • -

  • Multiline: Multi-line text area for longer content

    • -
- -

Basic Example

- -

- Below is a simple example of how to use the Input component. -

-
- - - - - -
- -

Key Features

- -

- You can customize the appearance and behavior of the Input component using - various props to define how the component renders and interacts with users. -

-

Input Types

-
    -

  • Text: Standard text input for general text data

    • -

  • Email: Email input with built-in validation

    • -

  • Password: Password input with hidden text

    • -

  • Number: Numeric input with increment/decrement controls

    • -

  • Tel: Telephone number input

    • -

  • URL: URL input with validation

    • -

  • Search: Search input with optimized styling

    • -
-

Visual Features

-
    -

  • Standard: Clean, minimalist input styling

    • -

  • Multiline: Expandable text area for longer content

    • -
-

Component Props

-
    -

  • Color: Primary, secondary, success, error, warning color themes

    • -

  • Label: Descriptive labels for accessibility

    • -

  • Helper Text: Additional guidance or validation messages

    • -

  • Placeholder: Hint text showing expected input format

    • -

  • Disabled State: Non-interactive state for read-only contexts

    • -

  • Required: Indicates mandatory fields

    • -

  • Error State: Visual feedback for validation errors

    • -

  • Start/End Adornments: Icons or text before/after input content

    • -
-
-
- - ); -}; - -export default SistentTextInput; diff --git a/src/sections/Projects/Sistent/components/toggle-button/code.js b/src/sections/Projects/Sistent/components/toggle-button/code.js deleted file mode 100644 index ddf97caffd0d0..0000000000000 --- a/src/sections/Projects/Sistent/components/toggle-button/code.js +++ /dev/null @@ -1,290 +0,0 @@ -import React, { useState } from "react"; -import { navigate } from "gatsby"; -import { useLocation } from "@reach/router"; - -import { - SistentThemeProvider, - ToggleButton, - ToggleButtonGroup, -} from "@sistent/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 deleted file mode 100644 index 08870261872f8..0000000000000 --- a/src/sections/Projects/Sistent/components/toggle-button/guidance.js +++ /dev/null @@ -1,204 +0,0 @@ -import React from "react"; -import { navigate } from "gatsby"; -import { useLocation } from "@reach/router"; -import { Row } from "../../../../../reusecore/Layout"; -import { - ToggleButton, - ToggleButtonGroup, - SistentThemeProvider, -} from "@sistent/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 deleted file mode 100644 index 3161055fd8413..0000000000000 --- a/src/sections/Projects/Sistent/components/toggle-button/index.js +++ /dev/null @@ -1,265 +0,0 @@ -import React from "react"; -import { navigate } from "gatsby"; -import { useLocation } from "@reach/router"; - -import { - SistentThemeProvider, - ToggleButtonGroup, - ToggleButton, - Box, -} from "@sistent/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; diff --git a/src/sections/Projects/Sistent/components/toolbar/code.js b/src/sections/Projects/Sistent/components/toolbar/code.js deleted file mode 100644 index 02c7dddfd9ad5..0000000000000 --- a/src/sections/Projects/Sistent/components/toolbar/code.js +++ /dev/null @@ -1,167 +0,0 @@ -import React from "react"; -import { navigate } from "gatsby"; -import { useLocation } from "@reach/router"; -import { Toolbar, SistentThemeProvider, Button } from "@sistent/sistent"; -import { CodeBlock } from "../button/code-block"; -import { SistentLayout } from "../../sistent-layout"; -import TabButton from "../../../../../reusecore/Button"; -import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode"; -import SearchIcon from "@mui/icons-material/Search"; -import HomeIcon from "@mui/icons-material/Home"; -import ArrowBackIcon from "@mui/icons-material/ArrowBack"; -import ArrowForwardIcon from "@mui/icons-material/ArrowForward"; -import RefreshIcon from "@mui/icons-material/Refresh"; -import SettingsIcon from "@mui/icons-material/Settings"; - -const codes = [ - ` - - - - - - `, - ` - - - - - - /* Further content goes here. */ - `, - ` - - - - - - `, -]; - -const ToolbarCode = () => { - const location = useLocation(); - const { isDark } = useStyledDarkMode(); - - return ( - -
- -

Toolbar

- -

- Toolbars provide quick access to commonly used actions grouped - logically in a horizontal or vertical container. -

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

- The following examples demonstrate how to implement various toolbar configurations - in your application. -

- -

Basic Toolbar

- -

- The basic toolbar contains a set of buttons that represent key - actions. Each button can perform a specific task when clicked. -

-
-
- - - - - - - -
- -
- - -

Fixed Toolbar

- -

- Fixed toolbars remain visible when scrolling and provide persistent - access to navigation. Use the fixed prop to create a toolbar that - stays in place during scrolling. -

-
-
- - - - - - -
-
-

Scrollable content goes here...

-

More content...

-

Even more content...

-

Keep scrolling to see the toolbar stay fixed.

-

Toolbar in Sistent: Provides a consistent and accessible way to group key actions for users at the top of your application.

-
-
- -
- -
- -

Dense Toolbar

- -

- Dense toolbars are more compact, saving vertical space. Use the variant="dense" prop - to create a more compact toolbar. -

-
-
- - - - - - - -
- -
- -
-
- - ); -}; - -export default ToolbarCode; \ No newline at end of file diff --git a/src/sections/Projects/Sistent/components/toolbar/guidance.js b/src/sections/Projects/Sistent/components/toolbar/guidance.js deleted file mode 100644 index a938a03616257..0000000000000 --- a/src/sections/Projects/Sistent/components/toolbar/guidance.js +++ /dev/null @@ -1,314 +0,0 @@ -import React, { useState } from "react"; -import { navigate } from "gatsby"; -import { useLocation } from "@reach/router"; -import { Row, Col } from "../../../../../reusecore/Layout"; -import { Toolbar, SistentThemeProvider, Button } from "@sistent/sistent"; -import { SistentLayout } from "../../sistent-layout"; -import TabButton from "../../../../../reusecore/Button"; -import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode"; -import AddIcon from "@mui/icons-material/Add"; -import DeleteIcon from "@mui/icons-material/Delete"; -import EditIcon from "@mui/icons-material/Edit"; -import SearchIcon from "@mui/icons-material/Search"; -import HomeIcon from "@mui/icons-material/Home"; -import ArrowBackIcon from "@mui/icons-material/ArrowBack"; -import ArrowForwardIcon from "@mui/icons-material/ArrowForward"; -import RefreshIcon from "@mui/icons-material/Refresh"; -import SettingsIcon from "@mui/icons-material/Settings"; -import MoreVertIcon from "@mui/icons-material/MoreVert"; - -const ToolbarGuidance = () => { - const location = useLocation(); - const { isDark } = useStyledDarkMode(); - const [selectionType, setSelectionType] = useState("text"); // "text" or "image" - - return ( - -
- -

Toolbar

- -

- A toolbar is a container for a set of controls or actions related to the current context or page. - It helps users quickly access common functions or navigate within an application. -

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

- For effective implementation, toolbars should be used consistently throughout - the interface to provide users with predictable access to important actions. -

- -

Function

- -

- The function of toolbars determines how they should be used in - different scenarios to provide users with quick access to actions and tools. -

-

Navigation Toolbar

-

- Navigation toolbars provide controls for moving between pages or sections - of an application. They typically include back, forward, and home buttons. -

- - - - - - - - - - -

Action Toolbar

-

- Action toolbars contain buttons for performing operations on selected content - or the current view. They often include functions like create, edit, delete, or share. -

- - - - - - -
- -
- - - -

Search Toolbar

-

- Search toolbars provide interfaces for finding content within an application. - They typically include search fields and filtering options. -

- - - -
- -
Search... -
-
-
- -
- - - - - -

Types of Toolbars

-

-

Fixed Toolbar

-

- Fixed toolbars remain visible at the top or side of the screen while - scrolling, providing persistent access to common actions. -

- -
- - - - - - -
-
-

Sistent Toolbar: The Sistent toolbar provides users with quick access to essential navigation and settings, ensuring a seamless experience across the application.

-

With a fixed position, the toolbar remains visible as you scroll, making key actions always accessible.

-

Use the Home icon to return to the dashboard, the Search icon to find resources, and the Settings icon to customize your preferences.

-

Sistent is designed for clarity, accessibility, and ease of use, helping users stay productive and focused.

-
-
- -
- -

Contextual Toolbar

-

- Contextual toolbars appear based on user selection or context, showing actions specific to the current content or state. -

- - - - {/* Toggle buttons for switching between text and image */} -
- - -
- - {/* Dynamic toolbar options based on selection type */} - {selectionType === "text" ? ( - <> - - - - - ) : ( - <> - - - - - )} - - - - - -

Positioning

- -

- The positioning of toolbars affects usability and accessibility. Different - positions work better for different types of applications and user behaviors. -

-

Top Toolbar

-

- Top toolbars are the most common placement and are easily discovered by users. - They're ideal for primary navigation and actions. -

- - - -
- - - -
- -
- -
- Content Area -
-
- - - -

Bottom Toolbar

-

- Bottom toolbars are more accessible for mobile users as they're easier to reach - with thumbs. They're good for common actions in mobile interfaces. -

- - - -
-
- Content Area -
- - - - - - -
- - - - - -

Best Practices

- -

- When implementing toolbars in your interface, consider these guidelines - to ensure they're effective and user-friendly: -

-
    -
  • - Prioritize Actions: Include only the most important and frequently used - actions in your toolbar to avoid overwhelming users. -
    • -
  • - Group Related Actions: Organize buttons logically, keeping related - actions together to improve discoverability. -
    • -
  • - Use Icons With Labels: When space permits, include both icons and text - labels to improve clarity and accessibility. -
    • -
  • - Maintain Consistency: Use consistent positioning and styling for - toolbars across your application to build user familiarity. -
    • -
-
-
- - ); -}; - -export default ToolbarGuidance; \ No newline at end of file diff --git a/src/sections/Projects/Sistent/components/toolbar/index.js b/src/sections/Projects/Sistent/components/toolbar/index.js deleted file mode 100644 index ce6b6bcd9c948..0000000000000 --- a/src/sections/Projects/Sistent/components/toolbar/index.js +++ /dev/null @@ -1,258 +0,0 @@ -import React, { useState } from "react"; -import { navigate } from "gatsby"; -import { useLocation } from "@reach/router"; -import { SistentLayout } from "../../sistent-layout"; -import { SistentThemeProvider, Toolbar, Button } from "@sistent/sistent"; -import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode"; -import TabButton from "../../../../../reusecore/Button"; -import { Row, Col } from "../../../../../reusecore/Layout"; -import AddIcon from "@mui/icons-material/Add"; -import DeleteIcon from "@mui/icons-material/Delete"; -import EditIcon from "@mui/icons-material/Edit"; -import SearchIcon from "@mui/icons-material/Search"; -import HomeIcon from "@mui/icons-material/Home"; -import ArrowBackIcon from "@mui/icons-material/ArrowBack"; -import ArrowForwardIcon from "@mui/icons-material/ArrowForward"; -import SettingsIcon from "@mui/icons-material/Settings"; -import MoreVertIcon from "@mui/icons-material/MoreVert"; -import FileDownloadIcon from "@mui/icons-material/FileDownload"; -import ShareIcon from "@mui/icons-material/Share"; - - -const getDropdownStyle = (isDark) => ({ - position: "absolute", - right: 0, - top: "100%", - backgroundColor: isDark ? "#333" : "white", - boxShadow: "0 2px 10px rgba(0,0,0,0.1)", - borderRadius: "4px", - overflow: "hidden", - zIndex: 1000, -}); - -const dropdownItem = { - padding: "8px 16px", - cursor: "pointer", - minWidth: "120px", - transition: "background-color 0.2s", - whiteSpace: "nowrap", -}; - -const ToolbarOverview = () => { - const location = useLocation(); - const { isDark } = useStyledDarkMode(); - const [dropdownOpen, setDropdownOpen] = useState(false); - const [selectedOption, setSelectedOption] = useState("More"); - const [selectedIcon, setSelectedIcon] = useState(); - - // Dropdown toggle and option select handlers - const toggleDropdown = () => setDropdownOpen((prev) => !prev); - const handleOptionClick = (option, icon) => { - setSelectedOption(option); - setSelectedIcon(icon); - setDropdownOpen(false); - }; - - // Dropdown options - const options = [ - { name: "Delete", icon: }, - { name: "Download", icon: }, - { name: "Share", icon: } - ]; - - return ( - -
- -

Toolbar

- -

- The Toolbar is a horizontal layout container used to organize and group actions or interactive elements. - It helps streamline workflows and keeps related actions in one place, providing users with easy access - to frequently used commands. -

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

- Toolbars are essential UI components that provide convenient access to actions and tools. - They can be placed at various locations within your interface and configured to suit different needs. -

- - -

Usage

- -

- Toolbars are commonly used in applications to provide quick access to frequently used functions. - They can be customized with various controls including buttons, dropdowns, search fields, and more.
- Some of the basic examples are shown below. -

- -

Standard Toolbar

-

- A standard toolbar with basic action buttons: -

- - - - - - - - - - - -

Navigation Toolbar

-

- A toolbar for navigation controls: -

- - - - - - - - - - - -

Toolbar with Dropdown

-

- A toolbar with actions and a dropdown menu: -

- - - - - -
- - {dropdownOpen && ( -
- {options.map( - (option, index) => ( -
handleOptionClick(option.name, option.icon)} - > - {React.cloneElement(option.icon, { fontSize: "small" })} - {option.name} -
- ) - )} -
- )} -
- - - - -

Search Toolbar

-

- A toolbar with a search field and settings button: -

- - - - - -
- -
Search... -
-
-
- -
- - - - - - -

Customization

- -

- Toolbars can be customized in various ways to fit your application's needs: -

-
    -
  • Fixed Position: Add the fixed prop to create a toolbar that stays in place during scrolling.
    • -
  • Density: Use variant="dense" for a more compact toolbar with less vertical padding.
    • -
  • Custom Content: Combine buttons, text fields, dropdowns, and other controls to create custom toolbar layouts.
    • -
  • Styling: Apply custom styles to match your application's design system.
    • -
- -

- When designing toolbars, consider the user's workflow and prioritize the most frequently used actions - to improve efficiency and usability. -

-
-
- - ); -}; - -export default ToolbarOverview; \ No newline at end of file diff --git a/src/sections/Projects/Sistent/components/tooltip/code.js b/src/sections/Projects/Sistent/components/tooltip/code.js deleted file mode 100644 index fc770879e4a3a..0000000000000 --- a/src/sections/Projects/Sistent/components/tooltip/code.js +++ /dev/null @@ -1,463 +0,0 @@ -import React from "react"; -import { navigate } from "gatsby"; -import { useLocation } from "@reach/router"; -import { - SistentThemeProvider, - Button, - Box, - Grid, - CustomTooltip, -} from "@sistent/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 = [ - ` - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -`, - ` - - - -`, - ` - - - - - - - - -`, - ` - - - -`, - ` - - - -`, -]; - -const TooltipCode = () => { - const { isDark } = useStyledDarkMode(); - const location = useLocation(); - - return ( - -
- -

Tooltip

- -

- The Tooltip component displays informative text when users hover over, - focus on, or tap an element. Tooltips are designed to enhance - accessibility and user understanding of interface elements. -

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

- The Tooltip component displays informative text when users hover - over, focus on, or tap an element. Tooltips are designed to enhance - accessibility and user understanding of interface elements. -

- -

Basic Tooltip

- -
-
- - - -
- -
- -

Positioned Example

- -

- You can specify the position of the Popper using the{" "} - placement prop. Here's an example of a Tooltip - positioned above its anchor: -

-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- -
- -

Distance from anchor

- -

- To adjust the distance between the tooltip and its anchor, you can - use the slotProps prop to modify the offset of the popper. -

-
-
- - - - - - - -
- -
- -

Variable width

- -

- The variant prop in Tooltip allows you to control the tooltips size - with predefined styles (standard or small). This makes it easier to - adjust the tooltip to fit various UI requirements quickly and - consistently. -

-
-
- - *": { - m: 1, - }, - }} - > - - - - - - - - - - - - -
- -
- -

Follow Cursor

- -

- Tooltips can be configured to follow the cursor, making it easier to - read the content. -

-
-
- - - - - - - -
- -
- -

Showing and Hiding

- -

- A delay in showing or hiding the tooltip can be added through the{" "} - enterDelay and leaveDelay props. -

-
-
- - - - - - - -
- -
-
-
- - ); -}; - -export default TooltipCode; diff --git a/src/sections/Projects/Sistent/components/tooltip/guidance.js b/src/sections/Projects/Sistent/components/tooltip/guidance.js deleted file mode 100644 index 9713c82791b4e..0000000000000 --- a/src/sections/Projects/Sistent/components/tooltip/guidance.js +++ /dev/null @@ -1,270 +0,0 @@ -import React from "react"; -import { navigate } from "gatsby"; -import { useLocation } from "@reach/router"; -import { SistentLayout } from "../../sistent-layout"; -import { - SistentThemeProvider, - Button, - Typography, - CustomTooltip, - Grid, -} from "@sistent/sistent"; -import { Row } from "../../../../../reusecore/Layout"; -import TabButton from "../../../../../reusecore/Button"; -import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode"; - -const TooltipGuidance = () => { - const { isDark } = useStyledDarkMode(); - const location = useLocation(); - - return ( - -
- -

Tooltip

- -

- The Tooltip component displays informative text when users hover over, - focus on, or tap an element. Tooltips are designed to enhance - accessibility and user understanding of interface elements. -

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

- The Tooltip component displays informative text when users hover - over, focus on, or tap an element. Tooltips are designed to enhance - accessibility and user understanding of interface elements. -

- - -

Positioning

- -

- The positioning of the Tooltip is critical for usability. Use the - `placement` prop to control where the Tooltip appears relative to - its anchor element. Options include: -

-
    -
  • top
    • -
  • bottom
    • -
  • left
    • -
  • right
    • -
  • top-start
    • -
  • top-end
    • -
  • bottom-start
    • -
  • bottom-end
    • -
  • left-start
    • -
  • left-end
    • -
  • right-start
    • -
  • right-end
    • -
-

- Choosing the right position helps to prevent overlap with other - interface elements and improves readability. -

- - -

Styling

- -

- The Tooltip component inherits styles from the Sistent theme. You - can customize the appearance by applying styles to the content - inside the Tooltip. For instance: -

- - - Custom Tooltip} - > - - - - - - - - - - - - - - - - - - - - - - - - -

Accessibility

- -

- It’s important to ensure that the Tooltip component is accessible to - all users. Here are some key considerations: -

-
    -
  • - By default, tooltips are designed to label their child element - rather than describe it. This differs from the title{" "} - attribute, which can either label or describe the child element - based on whether it already has an accessible label. -
    • -
  • - Using describeChild : When you want the tooltip to - act as an accessible description (adding additional context), you - can enable the describeChild prop. Use describeChild only if the - tooltip provides supplementary information and the child element - already has an accessible label. -
    • -
  • - Avoiding Accessibility Violations: Do not use describeChild if the - tooltip is the only visible label for the child element, as this - would prevent the child from having an accessible name. -
    • -
- - -

Performance Tips

- -

- When using the Tooltip component, consider the following to optimize - performance: -

-
    -
  • - Use the `placement` prop to control the position of the Tooltip - and prevent overlap with other interface elements. -
    • -
  • - Ensure that the Tooltip is keyboard navigable, allowing users to - open/close it using keyboard shortcuts. -
    • -
-
-
- - ); -}; - -export default TooltipGuidance; diff --git a/src/sections/Projects/Sistent/components/tooltip/index.js b/src/sections/Projects/Sistent/components/tooltip/index.js deleted file mode 100644 index 43731357a26d2..0000000000000 --- a/src/sections/Projects/Sistent/components/tooltip/index.js +++ /dev/null @@ -1,238 +0,0 @@ -import React from "react"; -import { navigate } from "gatsby"; -import { useLocation } from "@reach/router"; -import { - SistentThemeProvider, - Button, - CustomTooltip, - Box, -} from "@sistent/sistent"; -import TabButton from "../../../../../reusecore/Button"; -import { SistentLayout } from "../../sistent-layout"; -import { Row } from "../../../../../reusecore/Layout"; -import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode"; - -const SistentTooltip = () => { - const location = useLocation(); - const { isDark } = useStyledDarkMode(); - - return ( - -
- -

Tooltip

- -

- The Tooltip component displays informative text when users hover over, - focus on, or tap an element. Tooltips are designed to enhance - accessibility and user understanding of interface elements. -

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

- The Tooltip component displays informative text when users hover - over, focus on, or tap an element. Tooltips are designed to enhance - accessibility and user understanding of interface elements. -

- -

Basic Tooltip

- -

- A simple tooltip that displays helpful information when hovering - over an icon button. -

- - - - - - - - - - -

Disabled Elements

-

- By default disabled elements like button do not trigger user - interactions so a Tooltip will not activate on normal - events like hover. To accommodate disabled elements, add a simple - wrapper element, such as a span. -

- - - - - - - - - - - -

Distance from anchor

- -

- To adjust the distance between the tooltip and its anchor, you can - use the slotProps prop to modify the offset of the popper. -

- - - - - - - - - - - -

Variable width

- -

- The variant prop in Tooltip allows you to control the tooltips size - with predefined styles (standard or small). This makes it easier to - adjust the tooltip to fit various UI requirements quickly and - consistently. -

- - - *": { - m: 1, - }, - }} - > - - - - - - - - - - - - - - - -

Follow Cursor

- -

- Tooltips can be configured to follow the cursor, making it easier to - read the content. -

- - - - - - - - - - - -

Showing and Hiding

- -

- The Tooltip is normally shown immediately when the user's mouse - hovers over the element, and hides immediately when the user's mouse - leaves. A delay in showing or hiding the tooltip can be added - through the enterDelay and leaveDelay{" "} - props. -

- - - - - - - - - -
-
- - ); -}; - -export default SistentTooltip; diff --git a/src/sections/Projects/Sistent/getting-started/about/index.js b/src/sections/Projects/Sistent/getting-started/about/index.js index e2b93cd613c06..04f745312db9d 100644 --- a/src/sections/Projects/Sistent/getting-started/about/index.js +++ b/src/sections/Projects/Sistent/getting-started/about/index.js @@ -7,7 +7,7 @@ import SistentPagination from "../../../../../components/SistentNavigation/pagin import { Link } from "gatsby"; import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode"; -import { CodeBlock } from "../../components/button/code-block"; +// CodeBlock replaced by Code from components/CodeBlock import Code from "../../../../../components/CodeBlock"; import { SistentThemeProvider, Button } from "@sistent/sistent"; @@ -87,7 +87,7 @@ const SistentAbout = () => {

To install the Sistent NPM package, run:

- +

After installation, you can import Sistent theme and any Sistent @@ -103,7 +103,7 @@ const SistentAbout = () => { - + diff --git a/src/sections/Projects/Sistent/getting-started/tokens/index.js b/src/sections/Projects/Sistent/getting-started/tokens/index.js index 1cd7caf613e18..a347f30411506 100644 --- a/src/sections/Projects/Sistent/getting-started/tokens/index.js +++ b/src/sections/Projects/Sistent/getting-started/tokens/index.js @@ -5,7 +5,7 @@ import TOC from "../../../../../components/SistentNavigation"; import IntraPage from "../../../../../components/handbook-navigation/intra-page"; import SistentPagination from "../../../../../components/SistentNavigation/pagination"; import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode"; -import { CodeBlock } from "../../components/button/code-block"; +import CodeBlock from "../../../../../components/CodeBlock"; import { SistentThemeProvider } from "@sistent/sistent"; import { Box, Typography, Card, Alert } from "@sistent/sistent"; @@ -171,7 +171,7 @@ const SistentTokens = () => {

- +
@@ -233,7 +233,7 @@ const SistentTokens = () => { - + @@ -255,7 +255,7 @@ const SistentTokens = () => { - + @@ -292,7 +292,7 @@ const SistentTokens = () => { - + @@ -329,7 +329,7 @@ const SistentTokens = () => { - +

Implementation Guidelines

diff --git a/src/sections/Projects/Sistent/getting-started/usage/index.js b/src/sections/Projects/Sistent/getting-started/usage/index.js index 93ffdd6a6ffc2..55488086163d6 100644 --- a/src/sections/Projects/Sistent/getting-started/usage/index.js +++ b/src/sections/Projects/Sistent/getting-started/usage/index.js @@ -5,7 +5,7 @@ import TOC from "../../../../../components/SistentNavigation"; import IntraPage from "../../../../../components/handbook-navigation/intra-page"; import SistentPagination from "../../../../../components/SistentNavigation/pagination"; import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode"; -import { CodeBlock } from "../../components/button/code-block"; +import CodeBlock from "../../../../../components/CodeBlock"; import { SistentThemeProvider } from "@sistent/sistent"; import { Button, TextField, Card, CardContent, Typography, Alert } from "@sistent/sistent"; @@ -204,7 +204,6 @@ function App() { ); }`, - importStrategies: `// ✅ Recommended: Individual component imports import { Button } from "@sistent/sistent"; import { TextField } from "@sistent/sistent"; @@ -272,7 +271,7 @@ function IconExamples() { responsiveUsage: `import { Card, CardContent, - Typography, + Typography, Box } from "@sistent/sistent"; @@ -375,7 +374,7 @@ const SistentUsage = () => { - + @@ -393,7 +392,7 @@ const SistentUsage = () => {

- +
@@ -459,7 +458,7 @@ const SistentUsage = () => {
- +

Interactive Form Example

@@ -513,7 +512,7 @@ const SistentUsage = () => { - + @@ -527,7 +526,7 @@ const SistentUsage = () => {

- +

Import Strategies

@@ -536,7 +535,7 @@ const SistentUsage = () => {

- +

Working with Icons

@@ -555,7 +554,7 @@ const SistentUsage = () => { - +

Responsive Design

@@ -603,7 +602,7 @@ const SistentUsage = () => { Responsive Card 4 - Design system ensures visual unity. + Design system ensures visual unity. @@ -611,7 +610,7 @@ const SistentUsage = () => { - + {/* Best Practices Section */} @@ -665,4 +664,4 @@ const SistentUsage = () => { ); }; -export default SistentUsage; \ No newline at end of file +export default SistentUsage; diff --git a/src/sections/Projects/Sistent/sistent.style.js b/src/sections/Projects/Sistent/sistent.style.js index 6b898b11a1d91..0e69050d2121b 100644 --- a/src/sections/Projects/Sistent/sistent.style.js +++ b/src/sections/Projects/Sistent/sistent.style.js @@ -47,15 +47,15 @@ const SistentWrapper = styled.div` .page-section { h2 { - padding-top: 7rem; - margin-top: -7rem; + padding-top: 1rem; + margin-top: 1rem; } h3 { - padding-top: 7rem; - margin-top: -7rem; + padding-top: 1rem; + margin-top: 1rem; } padding-left: 20rem; - margin-top: 15rem; + margin-top: 4rem; display: flex; } .conduct-section { @@ -582,6 +582,7 @@ const SistentWrapper = styled.div` .filterBtns { display: flex; + justify-content: center; margin-bottom: 1.25rem; border-bottom: 1px solid #bec2c5; margin-top: 5rem; diff --git a/src/sections/Projects/Sistent/theme-wrapper.js b/src/sections/Projects/Sistent/theme-wrapper.js new file mode 100644 index 0000000000000..30b0f742f273e --- /dev/null +++ b/src/sections/Projects/Sistent/theme-wrapper.js @@ -0,0 +1,14 @@ +import React from "react"; +import { SistentThemeProvider } from "@sistent/sistent"; +import { useStyledDarkMode } from "../../../theme/app/useStyledDarkMode"; + +const ThemeWrapper = ({ children }) => { + const { isDark } = useStyledDarkMode(); + return ( + + {children} + + ); +}; + +export default ThemeWrapper; diff --git a/src/templates/sistent-component.js b/src/templates/sistent-component.js new file mode 100644 index 0000000000000..a862992a3da2b --- /dev/null +++ b/src/templates/sistent-component.js @@ -0,0 +1,92 @@ +import React from "react"; +import { graphql, navigate } from "gatsby"; +import { useLocation } from "@reach/router"; +import { MDXProvider } from "@mdx-js/react"; +import { FaArrowRight } from "@react-icons/all-files/fa/FaArrowRight"; + +import { SistentLayout } from "../sections/Projects/Sistent/sistent-layout"; +import TabButton from "../reusecore/Button"; +import { Col, Row } from "../reusecore/Layout"; +import CodeBlock from "../components/CodeBlock"; +import { SistentThemeProvider, Button } from "@sistent/sistent"; +import { useStyledDarkMode } from "../theme/app/useStyledDarkMode"; +import ThemeWrapper from "../sections/Projects/Sistent/theme-wrapper"; + +const shortcodes = { + SistentThemeProvider, + ThemeWrapper, + Button, + Col, + Row, + CodeBlock, + FaArrowRight +}; + +const SistentComponentTemplate = ({ data, children, pageContext }) => { + const { frontmatter } = data.mdx; + const location = useLocation(); + const { componentName, availablePages } = pageContext; + const { isDark } = useStyledDarkMode(); + + const baseUrl = `/projects/sistent/components/${componentName}`; + + // Format component name for display (e.g., "avatar-group" -> "Avatar Group") + const displayName = componentName + .split("-") + .map((word) => word.charAt(0).toUpperCase() + word.slice(1)) + .join(" "); + + return ( + +
+
+

{displayName}

+ {frontmatter.description &&

{frontmatter.description}

} +
+ +
+ {availablePages.includes("overview") && ( + navigate(baseUrl)} + title="Overview" + /> + )} + {availablePages.includes("guidance") && ( + navigate(`${baseUrl}/guidance`)} + title="Guidance" + /> + )} + {availablePages.includes("code") && ( + navigate(`${baseUrl}/code`)} + title="Code" + /> + )} +
+ +
+ {children} +
+ +
+ + ); +}; + +export const query = graphql` + query($slug: String!) { + mdx(fields: { slug: { eq: $slug } }) { + body + frontmatter { + title + description + } + } + } +`; + +export default SistentComponentTemplate;