Add Paper component to the sistent components page

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",
+  },
 ];

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 <PaperCode />;
+};
+
+export default PaperCodePage;

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 <PaperGuidance />;
+};
+
+export default PaperGuidancePage;

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 <SistentPaper />;
+};
+
+export default SistentPaperPage;

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 = () => {

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 = [
+  `<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;

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 (
+    <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;