From 72e5102890d913de28f31ec3bdcf6317112a88c6 Mon Sep 17 00:00:00 2001 From: Vidit Kushwaha <120644015+Vidit-Kushwaha@users.noreply.github.com> Date: Sun, 20 Oct 2024 13:02:13 +0000 Subject: [PATCH] Add Paper component to the sistent components page Signed-off-by: Vidit Kushwaha <120644015+Vidit-Kushwaha@users.noreply.github.com> --- src/components/SistentNavigation/content.js | 15 ++ .../projects/sistent/components/paper/code.js | 8 + .../sistent/components/paper/guidance.js | 8 + .../sistent/components/paper/index.js | 9 + .../Projects/Sistent/components/index.js | 7 + .../Projects/Sistent/components/paper/code.js | 203 ++++++++++++++++++ .../Sistent/components/paper/guidance.js | 121 +++++++++++ .../Sistent/components/paper/index.js | 114 ++++++++++ .../Sistent/components/popper/guidance.js | 172 +++++++++++++++ 9 files changed, 657 insertions(+) create mode 100644 src/pages/projects/sistent/components/paper/code.js create mode 100644 src/pages/projects/sistent/components/paper/guidance.js create mode 100644 src/pages/projects/sistent/components/paper/index.js create mode 100644 src/sections/Projects/Sistent/components/paper/code.js create mode 100644 src/sections/Projects/Sistent/components/paper/guidance.js create mode 100644 src/sections/Projects/Sistent/components/paper/index.js create mode 100644 src/sections/Projects/Sistent/components/popper/guidance.js diff --git a/src/components/SistentNavigation/content.js b/src/components/SistentNavigation/content.js index 51f8f57618ae..5ca0281ae851 100644 --- a/src/components/SistentNavigation/content.js +++ b/src/components/SistentNavigation/content.js @@ -43,4 +43,19 @@ export const content = [ link: "/projects/sistent/components/text-input/code", text: "Text Input", }, + { + id: 15, + link: "/projects/sistent/components/paper", + text: "Paper", + }, + { + id: 16, + link: "/projects/sistent/components/paper/guidance", + text: "Paper", + }, + { + id: 17, + link: "/projects/sistent/components/paper/code", + text: "Paper", + }, ]; diff --git a/src/pages/projects/sistent/components/paper/code.js b/src/pages/projects/sistent/components/paper/code.js new file mode 100644 index 000000000000..aebd216c36dc --- /dev/null +++ b/src/pages/projects/sistent/components/paper/code.js @@ -0,0 +1,8 @@ +import React from "react"; +import PaperCode from "../../../../../sections/Projects/Sistent/components/paper/code"; + +const PaperCodePage = () => { + return ; +}; + +export default PaperCodePage; \ No newline at end of file diff --git a/src/pages/projects/sistent/components/paper/guidance.js b/src/pages/projects/sistent/components/paper/guidance.js new file mode 100644 index 000000000000..a0ae573e7c1d --- /dev/null +++ b/src/pages/projects/sistent/components/paper/guidance.js @@ -0,0 +1,8 @@ +import React from "react"; +import PaperGuidance from "../../../../../sections/Projects/Sistent/components/paper/guidance"; + +const PaperGuidancePage = () => { + return ; +}; + +export default PaperGuidancePage; diff --git a/src/pages/projects/sistent/components/paper/index.js b/src/pages/projects/sistent/components/paper/index.js new file mode 100644 index 000000000000..cac37c7bd2c0 --- /dev/null +++ b/src/pages/projects/sistent/components/paper/index.js @@ -0,0 +1,9 @@ +import React from "react"; +import SistentPaper from "../../../../../sections/Projects/Sistent/components/paper"; + + +const SistentPaperPage = () => { + return ; +}; + +export default SistentPaperPage; \ No newline at end of file diff --git a/src/sections/Projects/Sistent/components/index.js b/src/sections/Projects/Sistent/components/index.js index 8bb294655b0f..d04c1db7cb27 100644 --- a/src/sections/Projects/Sistent/components/index.js +++ b/src/sections/Projects/Sistent/components/index.js @@ -30,6 +30,13 @@ const componentsData = [ "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/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", + }, ]; const SistentComponents = () => { diff --git a/src/sections/Projects/Sistent/components/paper/code.js b/src/sections/Projects/Sistent/components/paper/code.js new file mode 100644 index 000000000000..2d8c254de522 --- /dev/null +++ b/src/sections/Projects/Sistent/components/paper/code.js @@ -0,0 +1,203 @@ +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 "@layer5/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 new file mode 100644 index 000000000000..6c2dd5a412fb --- /dev/null +++ b/src/sections/Projects/Sistent/components/paper/guidance.js @@ -0,0 +1,121 @@ +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 new file mode 100644 index 000000000000..34ed637986af --- /dev/null +++ b/src/sections/Projects/Sistent/components/paper/index.js @@ -0,0 +1,114 @@ +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 "@layer5/sistent"; + +export 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/guidance.js b/src/sections/Projects/Sistent/components/popper/guidance.js new file mode 100644 index 000000000000..8a9e4a4c9dab --- /dev/null +++ b/src/sections/Projects/Sistent/components/popper/guidance.js @@ -0,0 +1,172 @@ +import React, { useState } from "react"; +import { navigate } from "gatsby"; +import { useLocation } from "@reach/router"; +import { SistentLayout } from "../../sistent-layout"; +import { SistentThemeProvider, Popper, Button, Box } from "@layer5/sistent"; +import { Row } from "../../../../../reusecore/Layout"; +import TabButton from "../../../../../reusecore/Button"; +import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode"; + +export const PopperGuidance = () => { + const { isDark } = useStyledDarkMode(); + const location = useLocation(); + const [open, setOpen] = useState(false); + const [anchorEl, setAnchorEl] = useState(null); + + const handleClick = (event) => { + setAnchorEl(event.currentTarget); + setOpen((prevOpen) => !prevOpen); + }; + + return ( + +
+ +

Popper

+ +

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

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

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

+ + +
+
+ + ); +};