-
Notifications
You must be signed in to change notification settings - Fork 1.2k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #6011 from Vidit-Kushwaha/add/paper
Add Paper component to the sistent components page
- Loading branch information
Showing
9 changed files
with
657 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,8 @@ | ||
| import React from "react"; | ||
| import PaperCode from "../../../../../sections/Projects/Sistent/components/paper/code"; | ||
|
|
||
| const PaperCodePage = () => { | ||
| return <PaperCode />; | ||
| }; | ||
|
|
||
| export default PaperCodePage; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,8 @@ | ||
| import React from "react"; | ||
| import PaperGuidance from "../../../../../sections/Projects/Sistent/components/paper/guidance"; | ||
|
|
||
| const PaperGuidancePage = () => { | ||
| return <PaperGuidance />; | ||
| }; | ||
|
|
||
| export default PaperGuidancePage; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,9 @@ | ||
| import React from "react"; | ||
| import SistentPaper from "../../../../../sections/Projects/Sistent/components/paper"; | ||
|
|
||
|
|
||
| const SistentPaperPage = () => { | ||
| return <SistentPaper />; | ||
| }; | ||
|
|
||
| export default SistentPaperPage; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 = [ | ||
| `<SistentThemeProvider initialMode={isDark ? "dark" : "light"}> | ||
| <Paper elevation={1} style={{ padding: "16px" }}> | ||
| Default Paper with Elevation 1 | ||
| </Paper> | ||
| </SistentThemeProvider>`, | ||
| `<SistentThemeProvider initialMode={isDark ? "dark" : "light"}> | ||
| <Paper | ||
| elevation={0} | ||
| style={{ padding: "16px" }} | ||
| > | ||
| Elevation 0 (No shadow) | ||
| </Paper> | ||
| <Paper | ||
| elevation={3} | ||
| style={{ padding: "16px" }} | ||
| > | ||
| Elevation 3 | ||
| </Paper> | ||
| <Paper | ||
| elevation={8} | ||
| style={{ padding: "16px" }} | ||
| > | ||
| Elevation 8 | ||
| </Paper> | ||
| </SistentThemeProvider>`, | ||
| `<SistentThemeProvider initialMode={isDark ? "dark" : "light"}> | ||
| <Paper | ||
| variant="elevation" | ||
| style={{ padding: "16px" }} | ||
| > | ||
| Elevation Variant (Default) | ||
| </Paper> | ||
| <Paper | ||
| variant="outlined" | ||
| style={{ padding: "16px", borderColor: "#ccc" }} | ||
| > | ||
| Outlined Variant (No shadow) | ||
| </Paper> | ||
| </SistentThemeProvider>`, | ||
| `<SistentThemeProvider initialMode={isDark ? "dark" : "light"}> | ||
| <Paper | ||
| square={false} | ||
| style={{ padding: "16px" }} | ||
| > | ||
| Rounded Corners (Default) | ||
| </Paper> | ||
| <Paper square style={{ padding: "16px" }}> | ||
| Square Corners | ||
| </Paper> | ||
| </SistentThemeProvider>`, | ||
| ]; | ||
| const PaperCode = () => { | ||
| const location = useLocation(); | ||
| const { isDark } = useStyledDarkMode(); | ||
|
|
||
| return ( | ||
| <SistentLayout title="Paper"> | ||
| <div className="content"> | ||
| <a id="Identity"> | ||
| <h2>Paper</h2> | ||
| </a> | ||
| <p> | ||
| 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. | ||
| </p> | ||
|
|
||
| <div className="filterBtns"> | ||
| <TabButton | ||
| className={ | ||
| location.pathname === "/projects/sistent/components/paper" | ||
| ? "active" | ||
| : "" | ||
| } | ||
| onClick={() => navigate("/projects/sistent/components/paper")} | ||
| title="Overview" | ||
| /> | ||
| <TabButton | ||
| className={ | ||
| location.pathname === | ||
| "/projects/sistent/components/paper/guidance" | ||
| ? "active" | ||
| : "" | ||
| } | ||
| onClick={() => | ||
| navigate("/projects/sistent/components/paper/guidance") | ||
| } | ||
| title="Guidance" | ||
| /> | ||
| <TabButton | ||
| className={ | ||
| location.pathname === "/projects/sistent/components/paper/code" | ||
| ? "active" | ||
| : "" | ||
| } | ||
| onClick={() => navigate("/projects/sistent/components/paper/code")} | ||
| title="Code" | ||
| /> | ||
| </div> | ||
| <div className="main-content"> | ||
| <a id="Basic Example"> | ||
| <h3>Basic Example</h3> | ||
| </a> | ||
| <p> | ||
| Here’s a simple example of a Paper component with default elevation. | ||
| This creates a surface with a subtle shadow. | ||
| </p> | ||
| <div className="showcase"> | ||
| <div className="items"> | ||
| <SistentThemeProvider initialMode={isDark ? "dark" : "light"}> | ||
| <Paper elevation={1} style={{ padding: "16px" }}> | ||
| Default Paper with Elevation 1 | ||
| </Paper> | ||
| </SistentThemeProvider> | ||
| </div> | ||
| <CodeBlock name="basic-example" code={codes[0]} /> | ||
| </div> | ||
|
|
||
| <a id="Elevation Example"> | ||
| <h3>Elevation Example</h3> | ||
| </a> | ||
| <p> | ||
| The <code>elevation</code> prop controls the shadow depth. Use | ||
| values from 0 to 24 to create varying levels of elevation: | ||
| </p> | ||
| <div className="showcase"> | ||
| <div className="items"> | ||
| <SistentThemeProvider initialMode={isDark ? "dark" : "light"}> | ||
| <Paper elevation={0} style={{ padding: "16px" }}> | ||
| Elevation 0 (No shadow) | ||
| </Paper> | ||
| <Paper elevation={3} style={{ padding: "16px" }}> | ||
| Elevation 3 | ||
| </Paper> | ||
| <Paper elevation={8} style={{ padding: "16px" }}> | ||
| Elevation 8 | ||
| </Paper> | ||
| </SistentThemeProvider> | ||
| </div> | ||
| <CodeBlock name="elevation-example" code={codes[1]} /> | ||
| </div> | ||
| <a id="Variant Example"> | ||
| <h3>Variant Example</h3> | ||
| </a> | ||
| <p> | ||
| The Paper component supports two variants: <code>elevation</code>{" "} | ||
| (default) and <code>outlined</code>. The outlined variant removes | ||
| shadows and adds a border instead: | ||
| </p> | ||
| <div className="showcase"> | ||
| <div className="items"> | ||
| <SistentThemeProvider initialMode={isDark ? "dark" : "light"}> | ||
| <Paper variant="elevation" style={{ padding: "16px" }}> | ||
| Elevation Variant (Default) | ||
| </Paper> | ||
| <Paper | ||
| variant="outlined" | ||
| style={{ padding: "16px", borderColor: "#ccc" }} | ||
| > | ||
| Outlined Variant (No shadow) | ||
| </Paper> | ||
| </SistentThemeProvider> | ||
| </div> | ||
| <CodeBlock name="variant-example" code={codes[2]} /> | ||
| </div> | ||
|
|
||
| <a id="Corners Example"> | ||
| <h3>Square and Rounded Corners</h3> | ||
| </a> | ||
| <p> | ||
| By default, the Paper component has rounded corners. You can make it | ||
| square by setting the <code>square</code> prop to <code>true</code>. | ||
| </p> | ||
| <div className="showcase"> | ||
| <div className="items"> | ||
| <SistentThemeProvider initialMode={isDark ? "dark" : "light"}> | ||
| <Paper square={false} style={{ padding: "16px" }}> | ||
| Rounded Corners (Default) | ||
| </Paper> | ||
| <Paper square style={{ padding: "16px" }}> | ||
| Square Corners | ||
| </Paper> | ||
| </SistentThemeProvider> | ||
| </div> | ||
| <CodeBlock name="corners-example" code={codes[3]} /> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </SistentLayout> | ||
| ); | ||
| }; | ||
|
|
||
| export default PaperCode; |
121 changes: 121 additions & 0 deletions
121
src/sections/Projects/Sistent/components/paper/guidance.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 ( | ||
| <SistentLayout title="Paper"> | ||
| <div className="content"> | ||
| <a id="Identity"> | ||
| <h2>Paper</h2> | ||
| </a> | ||
| <p> | ||
| 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. | ||
| </p> | ||
|
|
||
| <div className="filterBtns"> | ||
| <TabButton | ||
| className={ | ||
| location.pathname === "/projects/sistent/components/paper" | ||
| ? "active" | ||
| : "" | ||
| } | ||
| onClick={() => navigate("/projects/sistent/components/paper")} | ||
| title="Overview" | ||
| /> | ||
| <TabButton | ||
| className={ | ||
| location.pathname === | ||
| "/projects/sistent/components/paper/guidance" | ||
| ? "active" | ||
| : "" | ||
| } | ||
| onClick={() => | ||
| navigate("/projects/sistent/components/paper/guidance") | ||
| } | ||
| title="Guidance" | ||
| /> | ||
| <TabButton | ||
| className={ | ||
| location.pathname === "/projects/sistent/components/paper/code" | ||
| ? "active" | ||
| : "" | ||
| } | ||
| onClick={() => navigate("/projects/sistent/components/paper/code")} | ||
| title="Code" | ||
| /> | ||
| </div> | ||
| <div className="main-content"> | ||
| <a id="Usage Guidelines"> | ||
| <h2>Usage Guidelines</h2> | ||
| </a> | ||
| <p> | ||
| When using the Paper component, follow these guidelines to ensure | ||
| consistency and usability across your designs. | ||
| </p> | ||
|
|
||
| <a id="Elevation Guidelines"> | ||
| <h3>Elevation Guidelines</h3> | ||
| </a> | ||
| <ul> | ||
| <li> Use lower elevations (0-3) for subtle surfaces such as cards and | ||
| small sections.</li> | ||
| <li>Higher elevations (8-24) are best for modals or | ||
| key areas that need emphasis.</li> | ||
| <li>Be mindful of the dark mode | ||
| behavior, where higher elevations result in a lighter background.</li> | ||
| </ul> | ||
|
|
||
| <a id="Variant Guidelines"> | ||
| <h3>Variant Guidelines</h3> | ||
| </a> | ||
| <ul> | ||
| <li> | ||
| Use the <code>outlined</code> variant for areas where shadows | ||
| might feel visually overwhelming. | ||
| </li> | ||
| <li> | ||
| Stick to the default elevation variant for core components | ||
| requiring shadow depth. | ||
| </li> | ||
| </ul> | ||
| <a id="Corners Guidelines"> | ||
| <h3>Corners Guidelines</h3> | ||
| </a> | ||
| <ul> | ||
| <li> | ||
| Rounded corners are more user-friendly and should be preferred | ||
| unless a strict design requires square corners. | ||
| </li> | ||
| <li> | ||
| Use square corners sparingly, mostly for components meant to | ||
| indicate precision or alignment with grid systems. | ||
| </li> | ||
| </ul> | ||
|
|
||
| <a id="Accessibility"> | ||
| <h2>Accessibility</h2> | ||
| </a> | ||
| <ul> | ||
| <li> | ||
| Make sure elevated surfaces have sufficient contrast with the | ||
| background. | ||
| </li> | ||
| <li> | ||
| Use clear and concise labels or headings for content within Paper | ||
| components to enhance accessibility. | ||
| </li> | ||
| </ul> | ||
| </div> | ||
| </div> | ||
| </SistentLayout> | ||
| ); | ||
| }; | ||
|
|
||
| export default PaperGuidance; |
Oops, something went wrong.