diff --git a/src/components/SistentNavigation/content.js b/src/components/SistentNavigation/content.js index 1932e1dc9356..70b8f975231c 100644 --- a/src/components/SistentNavigation/content.js +++ b/src/components/SistentNavigation/content.js @@ -87,5 +87,20 @@ export const content = [ id: 23, link: "/projects/sistent/components/text-field/code", text: "Text Field", - } + }, + { + id: 24, + link: "/projects/sistent/components/circularprogress", + text: "Circular Progress" + }, + { + id: 25, + link: "/projects/sistent/components/circularprogress/guidance", + text: "Circular Progress" + }, + { + id: 26, + link: "/projects/sistent/components/circularprogress/code", + text: "Circular Progress" + }, ]; diff --git a/src/pages/projects/sistent/components/circularprogress/code.js b/src/pages/projects/sistent/components/circularprogress/code.js new file mode 100644 index 000000000000..9bf124f49adc --- /dev/null +++ b/src/pages/projects/sistent/components/circularprogress/code.js @@ -0,0 +1,9 @@ +import React from "react"; +import { CircularprogressCode } from "../../../../../sections/Projects/Sistent/components/circularprogress/code"; + + +const ModalCodePage = () => { + return ; +}; + +export default ModalCodePage; \ No newline at end of file diff --git a/src/pages/projects/sistent/components/circularprogress/guidance.js b/src/pages/projects/sistent/components/circularprogress/guidance.js new file mode 100644 index 000000000000..ea6730ba0126 --- /dev/null +++ b/src/pages/projects/sistent/components/circularprogress/guidance.js @@ -0,0 +1,9 @@ +import React from "react"; +import { CircularprogressGuidance } from "../../../../../sections/Projects/Sistent/components/circularprogress/guidance"; + + +const ModalGuidancePage = () => { + return ; +}; + +export default ModalGuidancePage; \ No newline at end of file diff --git a/src/pages/projects/sistent/components/circularprogress/index.js b/src/pages/projects/sistent/components/circularprogress/index.js new file mode 100644 index 000000000000..ea684f23aea0 --- /dev/null +++ b/src/pages/projects/sistent/components/circularprogress/index.js @@ -0,0 +1,9 @@ +import React from "react"; +import { SistentCircularprogress } from "../../../../../sections/Projects/Sistent/components/circularprogress"; + + +const SistentModalPage = () => { + return ; +}; + +export default SistentModalPage; \ No newline at end of file diff --git a/src/sections/Projects/Sistent/components/circularprogress/code.js b/src/sections/Projects/Sistent/components/circularprogress/code.js new file mode 100644 index 000000000000..4abbe7c78fec --- /dev/null +++ b/src/sections/Projects/Sistent/components/circularprogress/code.js @@ -0,0 +1,227 @@ +import React, { useState } from "react"; +import { navigate } from "gatsby"; +import { useLocation } from "@reach/router"; +import { + SistentThemeProvider, + CircularProgress, +} from "@layer5/sistent"; +import { Row } from "../../../../../reusecore/Layout"; +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 [progress, setProgress] = React.useState(0); + + React.useEffect(() => { + const timer = setInterval(() => { + setProgress((prevProgress) => (prevProgress >= 100 ? 0 : prevProgress + 10)); + }, 800); + + return () => { + clearInterval(timer); + }; + }, []); + + + `, + ` + + + + `, + ` + + + + `, + ` + + + + `, + +]; + +export const CircularprogressCode = () => { + const { isDark } = useStyledDarkMode(); + const location = useLocation(); + + const [progress, setProgress] = useState(0); + + React.useEffect(() => { + const timer = setInterval(() => { + setProgress((prevProgress) => (prevProgress >= 100 ? 0 : prevProgress + 10)); + }, 800); + + return () => { + clearInterval(timer); + }; + }, []); + + 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" + /> +
+
+ + +

Basic CircularProgress

+ +

+ This example shows a basic circular progress indicator with the default settings. No props are needed to render this simple loader, ideal for processes with unknown durations. +

+

+ + + + + +

+
+ +
+ + +

Determinate Example

+ +

+ The determinate progress indicator is controlled by the variant and value props, allowing you to display a specific percentage of progress. Set variant="determinate" and value between 0 and 100 to indicate completion. +

+ +

+ + + + + +
+ +
+ + +

Size Variation Examples

+ +

+ These examples adjust the size of the circular progress indicator using the size prop. Set size to change the diameter of the circle, accommodating different layout requirements. +

+ + +

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

Thickness Variation Examples

+ +

+ This variant modifies the width of the progress arc with the thickness prop. Use thickness to increase or decrease the line width, adding emphasis or subtlety to the indicator's appearance. +

+ + +

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

Circular Color Examples

+ +

+ Various color options are applied to the circular progress using the color prop. Customize the appearance by setting color to values like "secondary," "success," or "inherit" to align with theme requirements. +

+ + +

+ + +
+ +
+
+ +
+
+ +
+ + +
+ +
+ +
+
+ + ); +}; diff --git a/src/sections/Projects/Sistent/components/circularprogress/guidance.js b/src/sections/Projects/Sistent/components/circularprogress/guidance.js new file mode 100644 index 000000000000..7759295f18e8 --- /dev/null +++ b/src/sections/Projects/Sistent/components/circularprogress/guidance.js @@ -0,0 +1,123 @@ +import React, { useState } from "react"; +import { navigate } from "gatsby"; +import { useLocation } from "@reach/router"; +import { SistentLayout } from "../../sistent-layout"; +import { SistentThemeProvider, Button, CircularProgress } from "@layer5/sistent"; +import { Row } from "../../../../../reusecore/Layout"; +import TabButton from "../../../../../reusecore/Button"; +import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode"; + +export const CircularprogressGuidance = () => { + const { isDark } = useStyledDarkMode(); + const location = useLocation(); + + const [size, setSize] = useState(40); // default size + const [thickness, setThickness] = useState(4); // default thickness + + 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. +

+ + + +
+
+ + ); +}; \ 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 new file mode 100644 index 000000000000..a9ecb591f6b2 --- /dev/null +++ b/src/sections/Projects/Sistent/components/circularprogress/index.js @@ -0,0 +1,113 @@ +import React from "react"; +import { navigate } from "gatsby"; +import { useLocation } from "@reach/router"; +import { SistentThemeProvider, CircularProgress } from "@layer5/sistent"; +import TabButton from "../../../../../reusecore/Button"; +import { SistentLayout } from "../../sistent-layout"; +import { Row } from "../../../../../reusecore/Layout"; +import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode"; + +export 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 + the `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

    • +
+
+
+ + ); +}; diff --git a/src/sections/Projects/Sistent/components/index.js b/src/sections/Projects/Sistent/components/index.js index fa716d565a50..f44df1c19a0d 100644 --- a/src/sections/Projects/Sistent/components/index.js +++ b/src/sections/Projects/Sistent/components/index.js @@ -50,6 +50,13 @@ const componentsData = [ 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", + }, + { + id: 7, + name: "Circular Progress", + description: + "This is a Circular Progress element", + url: "/projects/sistent/components/circularprogress", } ];