From 897beb9eb55548e96f61635c9b79c5ed86b8c501 Mon Sep 17 00:00:00 2001 From: Mdkaif-123 Date: Tue, 12 Nov 2024 01:55:52 +0530 Subject: [PATCH] feat: add sistent-backdrop-component Signed-off-by: Mdkaif-123 --- .../sistent/components/backdrop/code.js | 8 + .../sistent/components/backdrop/guidance.js | 8 + .../sistent/components/backdrop/index.js | 8 + .../Sistent/components/backdrop/code.js | 122 +++++++ .../Sistent/components/backdrop/guidance.js | 127 ++++++++ .../Sistent/components/backdrop/index.js | 303 ++++++++++++++++++ .../Projects/Sistent/components/index.js | 7 + 7 files changed, 583 insertions(+) create mode 100644 src/pages/projects/sistent/components/backdrop/code.js create mode 100644 src/pages/projects/sistent/components/backdrop/guidance.js create mode 100644 src/pages/projects/sistent/components/backdrop/index.js create mode 100644 src/sections/Projects/Sistent/components/backdrop/code.js create mode 100644 src/sections/Projects/Sistent/components/backdrop/guidance.js create mode 100644 src/sections/Projects/Sistent/components/backdrop/index.js diff --git a/src/pages/projects/sistent/components/backdrop/code.js b/src/pages/projects/sistent/components/backdrop/code.js new file mode 100644 index 000000000000..fd20b83d1d18 --- /dev/null +++ b/src/pages/projects/sistent/components/backdrop/code.js @@ -0,0 +1,8 @@ +import React from "react"; +import { BackdropCode } from "../../../../../sections/Projects/Sistent/components/backdrop/code"; + +const BackdropCodePage = () => { + return ; +}; + +export default BackdropCodePage; diff --git a/src/pages/projects/sistent/components/backdrop/guidance.js b/src/pages/projects/sistent/components/backdrop/guidance.js new file mode 100644 index 000000000000..af77b4ae3fe3 --- /dev/null +++ b/src/pages/projects/sistent/components/backdrop/guidance.js @@ -0,0 +1,8 @@ +import React from "react"; +import { BackdropGuidance } from "../../../../../sections/Projects/Sistent/components/backdrop/guidance"; + +const ButtonGuidancePage = () => { + return ; +}; + +export default ButtonGuidancePage; diff --git a/src/pages/projects/sistent/components/backdrop/index.js b/src/pages/projects/sistent/components/backdrop/index.js new file mode 100644 index 000000000000..87263495b534 --- /dev/null +++ b/src/pages/projects/sistent/components/backdrop/index.js @@ -0,0 +1,8 @@ +import React from "react"; +import SistentBackdrop from "../../../../../sections/Projects/Sistent/components/backdrop"; + +const SistentBackdropPage = () => { + return ; +}; + +export default SistentBackdropPage; diff --git a/src/sections/Projects/Sistent/components/backdrop/code.js b/src/sections/Projects/Sistent/components/backdrop/code.js new file mode 100644 index 000000000000..1d337c28ad0f --- /dev/null +++ b/src/sections/Projects/Sistent/components/backdrop/code.js @@ -0,0 +1,122 @@ +import { useLocation } from "@reach/router"; +import { navigate } from "gatsby"; +import React from "react"; + +import { Container, SistentThemeProvider } from "@layer5/sistent"; +import { SistentLayout } from "../../sistent-layout"; +import { CodeBlock } from "../button/code-block"; + +import TabButton from "../../../../../reusecore/Button"; +import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode"; + +import { Backdrop, Button, CircularProgress } from "@layer5/sistent"; + +const codes = [ + ` + // 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} + > + + +
`, +]; + +export 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} + > + + + + +
+ +
+
+
+ + ); +}; diff --git a/src/sections/Projects/Sistent/components/backdrop/guidance.js b/src/sections/Projects/Sistent/components/backdrop/guidance.js new file mode 100644 index 000000000000..abe58145c119 --- /dev/null +++ b/src/sections/Projects/Sistent/components/backdrop/guidance.js @@ -0,0 +1,127 @@ +import React from "react"; +import { navigate } from "gatsby"; +import { useLocation } from "@reach/router"; +import { SistentLayout } from "../../sistent-layout"; +import TabButton from "../../../../../reusecore/Button"; + +export 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. +
    • +
+ + +

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/sections/Projects/Sistent/components/backdrop/index.js b/src/sections/Projects/Sistent/components/backdrop/index.js new file mode 100644 index 000000000000..0896fee5cf90 --- /dev/null +++ b/src/sections/Projects/Sistent/components/backdrop/index.js @@ -0,0 +1,303 @@ +import React from "react"; +import { navigate } from "gatsby"; +import { useLocation } from "@reach/router"; + +import { + SistentThemeProvider, + Button, + Backdrop, + 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"; + +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} + > + + +
+ + + + +

Props

+ +

Props of the Fade component are also available.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeDefaultDescription
+ 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. +
+
+
+ + ); +}; + +export default SistentBackdrop; diff --git a/src/sections/Projects/Sistent/components/index.js b/src/sections/Projects/Sistent/components/index.js index 749fb2c5e34e..c0b5bf1e3b50 100644 --- a/src/sections/Projects/Sistent/components/index.js +++ b/src/sections/Projects/Sistent/components/index.js @@ -72,6 +72,13 @@ const componentsData = [ "ButtonGroup is a component that groups multiple buttons together.", url: "/projects/sistent/components/button-group", }, + { + id: 10, + name: "Backdrop", + description: + "Backdrop component overlays a dimmed screen to focus attention on foreground content.", + url: "/projects/sistent/components/backdrop", + }, ]; const SistentComponents = () => {