From fa8780378cc5d2ea1e0098f14bd14d0c69a734fa Mon Sep 17 00:00:00 2001
From: vidit kushwaha <viditkushwaha530@gmail.com>
Date: Sat, 12 Oct 2024 14:50:50 +0530
Subject: [PATCH 1/3] added popper docs

Signed-off-by: vidit kushwaha <viditkushwaha530@gmail.com>
---
 src/components/SistentNavigation/content.js   |  15 ++
 .../sistent/components/popper/code.js         |   8 +
 .../sistent/components/popper/guidance.js     |   8 +
 .../sistent/components/popper/index.js        |   8 +
 .../Projects/Sistent/components/index.js      |   7 +
 .../Sistent/components/popper/code.js         | 186 ++++++++++++++++++
 .../Sistent/components/popper/guidance.js     | 174 ++++++++++++++++
 .../Sistent/components/popper/index.js        | 126 ++++++++++++
 8 files changed, 532 insertions(+)
 create mode 100644 src/pages/projects/sistent/components/popper/code.js
 create mode 100644 src/pages/projects/sistent/components/popper/guidance.js
 create mode 100644 src/pages/projects/sistent/components/popper/index.js
 create mode 100644 src/sections/Projects/Sistent/components/popper/code.js
 create mode 100644 src/sections/Projects/Sistent/components/popper/guidance.js
 create mode 100644 src/sections/Projects/Sistent/components/popper/index.js

diff --git a/src/components/SistentNavigation/content.js b/src/components/SistentNavigation/content.js
index 51f8f57618ae..44794fb8db4f 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/popper",
+    text: "Popper",
+  },
+  {
+    id: 16,
+    link: "/projects/sistent/components/popper/guidance",
+    text: "Popper",
+  },
+  {
+    id: 17,
+    link: "/projects/sistent/components/popper/code",
+    text: "Popper",
+  },
 ];
diff --git a/src/pages/projects/sistent/components/popper/code.js b/src/pages/projects/sistent/components/popper/code.js
new file mode 100644
index 000000000000..9327a30755d0
--- /dev/null
+++ b/src/pages/projects/sistent/components/popper/code.js
@@ -0,0 +1,8 @@
+import React from "react";
+import { PooperCode } from "../../../../../sections/Projects/Sistent/components/popper/code";
+
+const PopperCodePage = () => {
+  return <PooperCode />;
+};
+
+export default PopperCodePage;
diff --git a/src/pages/projects/sistent/components/popper/guidance.js b/src/pages/projects/sistent/components/popper/guidance.js
new file mode 100644
index 000000000000..70cde98837c0
--- /dev/null
+++ b/src/pages/projects/sistent/components/popper/guidance.js
@@ -0,0 +1,8 @@
+import React from "react";
+import { PopperGuidance } from "../../../../../sections/Projects/Sistent/components/popper/guidance";
+
+const PopperGuidancePage = () => {
+  return <PopperGuidance />;
+};
+
+export default PopperGuidancePage;
diff --git a/src/pages/projects/sistent/components/popper/index.js b/src/pages/projects/sistent/components/popper/index.js
new file mode 100644
index 000000000000..e75d22655e5f
--- /dev/null
+++ b/src/pages/projects/sistent/components/popper/index.js
@@ -0,0 +1,8 @@
+import React from "react";
+import { SistentPopper } from "../../../../../sections/Projects/Sistent/components/popper";
+
+const SistentPopperPage = () => {
+  return <SistentPopper />;
+};
+
+export default SistentPopperPage;
diff --git a/src/sections/Projects/Sistent/components/index.js b/src/sections/Projects/Sistent/components/index.js
index 8bb294655b0f..a25c3986892d 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: "Popper",
+    description:
+      "A popper is a tooltip that appears when a user interacts with an element.",
+    url: "/projects/sistent/components/popper",
+  },
 ];
 
 const SistentComponents = () => {
diff --git a/src/sections/Projects/Sistent/components/popper/code.js b/src/sections/Projects/Sistent/components/popper/code.js
new file mode 100644
index 000000000000..fd9425703495
--- /dev/null
+++ b/src/sections/Projects/Sistent/components/popper/code.js
@@ -0,0 +1,186 @@
+import React, { useRef, useState } from "react";
+import { navigate } from "gatsby";
+import { SistentThemeProvider, Popper, Button } 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";
+
+const codes = [
+  `<Button
+    variant="contained"
+    label="Toggle Popper"
+    size="medium"
+    onClick={handleClick}
+    ref={anchorRef}
+  />
+  <Popper
+    open={open}
+    anchorEl={anchorRef.current}
+    placement="top"
+  >
+    <div
+      style={{
+        padding: "10px",
+        backgroundColor: "#fff",
+        border: "1px solid #ccc",
+        borderRadius: "4px",
+      }}
+    >
+      I'm positioned above!
+    </div>
+  </Popper>`,
+  `<Button
+    variant="contained"
+    label="Toggle Popper"
+    size="medium"
+    onClick={handleClick}
+    ref={anchorRef}
+  />
+  <Popper
+    open={open}
+    anchorEl={anchorRef.current}
+    placement="top"
+  >
+    <div
+      style={{
+        padding: "10px",
+        backgroundColor: "#fff",
+        border: "1px solid #ccc",
+        borderRadius: "4px",
+      }}
+    >
+      I'm positioned above!
+    </div>
+  </Popper>`,
+];
+
+export const PooperCode = () => {
+  const { isDark } = useStyledDarkMode();
+  const [open, setOpen] = useState(false);
+  const anchorRef = useRef(null);
+
+  const handleClick = () => {
+    setOpen((prevOpen) => !prevOpen);
+  };
+
+  return (
+    <SistentLayout title="Popper">
+      <div className="content">
+        <a id="Identity">
+          <h2>Popper</h2>
+        </a>
+        <p>
+          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.
+        </p>
+        <div className="filterBtns">
+          <TabButton
+            className={
+              location.pathname === "/projects/sistent/components/popper"
+                ? "active"
+                : ""
+            }
+            onClick={() => navigate("/projects/sistent/components/popper")}
+            title="Overview"
+          />
+          <TabButton
+            className={
+              location.pathname ===
+              "/projects/sistent/components/popper/guidance"
+                ? "active"
+                : ""
+            }
+            onClick={() =>
+              navigate("/projects/sistent/components/popper/guidance")
+            }
+            title="Guidance"
+          />
+          <TabButton
+            className={
+              location.pathname === "/projects/sistent/components/popper/code"
+                ? "active"
+                : ""
+            }
+            onClick={() => navigate("/projects/sistent/components/popper/code")}
+            title="Code"
+          />
+        </div>
+        <div className="main-content">
+          <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
+            <p>
+              Here’s a simple example of how to use the Popper component. In
+              this example, clicking the button toggles the visibility of the
+              popper:
+            </p>
+            <a id="Basic Popper">
+              <h3>Basic Popper</h3>
+            </a>
+            <div className="showcase">
+              <div className="items">
+                <Button
+                  variant="contained"
+                  label="Toggle Popper"
+                  size="medium"
+                  onClick={handleClick}
+                  ref={anchorRef}
+                />
+                <Popper open={open}>
+                  <div
+                    style={{
+                      padding: "10px",
+                      backgroundColor: "#fff",
+                      border: "1px solid #ccc",
+                      borderRadius: "4px",
+                    }}
+                  >
+                    Hello, I'm a Popper!
+                  </div>
+                </Popper>
+              </div>
+              <CodeBlock name="Basic Popper" code={codes[0]} />
+            </div>
+            <a id="PositionedExample">
+              <h3>Positioned Example</h3>
+            </a>
+            <p>
+              You can specify the position of the Popper using the{" "}
+              <code>placement</code> prop. Here's an example of a Popper
+              positioned above its anchor:
+            </p>
+            <div className="showcase">
+              <div className="items">
+                <Button
+                  variant="contained"
+                  label="Toggle Popper"
+                  size="medium"
+                  onClick={handleClick}
+                  ref={anchorRef}
+                />
+                <Popper
+                  open={open}
+                  anchorEl={anchorRef.current}
+                  placement="top"
+                >
+                  <div
+                    style={{
+                      padding: "10px",
+                      backgroundColor: "#fff",
+                      border: "1px solid #ccc",
+                      borderRadius: "4px",
+                    }}
+                  >
+                    I'm positioned above!
+                  </div>
+                </Popper>
+              </div>
+              <CodeBlock name="PositionedExample" code={codes[1]} />
+            </div>
+          </SistentThemeProvider>
+        </div>
+      </div>
+    </SistentLayout>
+  );
+};
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..c834a4ed2760
--- /dev/null
+++ b/src/sections/Projects/Sistent/components/popper/guidance.js
@@ -0,0 +1,174 @@
+import React, { useState, useRef } from "react";
+import { navigate } from "gatsby";
+import { SistentLayout } from "../../sistent-layout";
+import { SistentThemeProvider, Popper, Button } 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 [open, setOpen] = useState(false);
+  const anchorRef = useRef(null);
+
+  const handleClick = () => {
+    setOpen((prevOpen) => !prevOpen);
+  };
+
+  return (
+    <SistentLayout title="Popper">
+      <div>
+        <p>
+          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.
+        </p>
+        <div className="filterBtns">
+          <TabButton
+            className={
+              location.pathname === "/projects/sistent/components/popper"
+                ? "active"
+                : ""
+            }
+            onClick={() => navigate("/projects/sistent/components/popper")}
+            title="Overview"
+          />
+          <TabButton
+            className={
+              location.pathname ===
+              "/projects/sistent/components/popper/guidance"
+                ? "active"
+                : ""
+            }
+            onClick={() =>
+              navigate("/projects/sistent/components/popper/guidance")
+            }
+            title="Guidance"
+          />
+          <TabButton
+            className={
+              location.pathname === "/projects/sistent/components/popper/code"
+                ? "active"
+                : ""
+            }
+            onClick={() => navigate("/projects/sistent/components/popper/code")}
+            title="Code"
+          />
+        </div>
+        <div className="main-content">
+          <p>
+            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.
+          </p>
+
+          <a id="Positioning">
+            <h3>Positioning</h3>
+          </a>
+          <p>
+            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:
+          </p>
+          <ul>
+            <li>top</li>
+            <li>bottom</li>
+            <li>left</li>
+            <li>right</li>
+            <li>top-start</li>
+            <li>top-end</li>
+            <li>bottom-start</li>
+            <li>bottom-end</li>
+            <li>left-start</li>
+            <li>left-end</li>
+            <li>right-start</li>
+            <li>right-end</li>
+          </ul>
+          <p>
+            Choosing the right position helps to prevent overlap with other
+            interface elements and improves readability.
+          </p>
+
+          <a id="Styling">
+            <h3>Styling</h3>
+          </a>
+          <p>
+            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:
+          </p>
+          <Row $Hcenter className="image-container">
+            <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
+              <Button
+                variant="contained"
+                label="Toggle Popper"
+                size="medium"
+                onClick={handleClick}
+                ref={anchorRef}
+              />
+              <Popper open={open}>
+                <div
+                  style={{
+                    padding: "10px",
+                    backgroundColor: "#fff",
+                    border: "1px solid #ccc",
+                    borderRadius: "4px",
+                  }}
+                >
+                  Styled Popper content!
+                </div>
+              </Popper>
+            </SistentThemeProvider>
+          </Row>
+          <p>
+            Ensure that the styling aligns with your application's theme for a
+            cohesive look and feel.
+          </p>
+
+          <a id="Accessibility">
+            <h3>Accessibility</h3>
+          </a>
+          <p>
+            It’s important to ensure that the Popper component is accessible to
+            all users. Here are some key considerations:
+          </p>
+          <ul>
+            <li>
+              Use appropriate <code>aria-</code> attributes to enhance screen
+              reader compatibility, such as <code>aria-describedby</code> for
+              tooltips.
+            </li>
+            <li>
+              Ensure that the Popper is keyboard navigable, allowing users to
+              open/close it using keyboard shortcuts.
+            </li>
+            <li>
+              Provide sufficient contrast for the text and background colors to
+              improve readability.
+            </li>
+          </ul>
+
+          <a id="Performance">
+            <h3>Performance Tips</h3>
+          </a>
+          <p>
+            When using the Popper component, consider the following to optimize
+            performance:
+          </p>
+          <ul>
+            <li>
+              Avoid excessive rendering by controlling when the Popper is
+              opened. Use state management effectively to minimize unnecessary
+              re-renders.
+            </li>
+            <li>
+              For complex popper content, consider lazy loading non-critical
+              elements to improve initial load times.
+            </li>
+          </ul>
+        </div>
+      </div>
+    </SistentLayout>
+  );
+};
diff --git a/src/sections/Projects/Sistent/components/popper/index.js b/src/sections/Projects/Sistent/components/popper/index.js
new file mode 100644
index 000000000000..42f22c0e5d60
--- /dev/null
+++ b/src/sections/Projects/Sistent/components/popper/index.js
@@ -0,0 +1,126 @@
+import React from "react";
+import { navigate } from "gatsby";
+import { useLocation } from "@reach/router";
+
+import { SistentThemeProvider, Popper } 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 SistentPopper = () => {
+  const location = useLocation();
+  const { isDark } = useStyledDarkMode();
+
+  return (
+    <SistentLayout title="Popper">
+      <div className="content">
+        <a id="Identity">
+          <h2>Popper</h2>
+        </a>
+        <p>
+          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.
+        </p>
+        <div className="filterBtns">
+          <TabButton
+            className={
+              location.pathname === "/projects/sistent/components/popper"
+                ? "active"
+                : ""
+            }
+            onClick={() => navigate("/projects/sistent/components/popper")}
+            title="Overview"
+          />
+          <TabButton
+            className={
+              location.pathname ===
+              "/projects/sistent/components/popper/guidance"
+                ? "active"
+                : ""
+            }
+            onClick={() =>
+              navigate("/projects/sistent/components/popper/guidance")
+            }
+            title="Guidance"
+          />
+          <TabButton
+            className={
+              location.pathname === "/projects/sistent/components/popper/code"
+                ? "active"
+                : ""
+            }
+            onClick={() => navigate("/projects/sistent/components/popper/code")}
+            title="Code"
+          />
+        </div>
+        <div className="main-content">
+          <p>
+            Poppers are critical for displaying information dynamically and can
+            be used in various scenarios like tooltips, dropdowns, and menus. By
+            anchoring the content to a reference element, Poppers provide users
+            with relevant information as they interact with the interface.
+          </p>
+          <a id="Usage">
+            <h2>Usage</h2>
+          </a>
+          <p>
+            The Popper component should be used in cases where context-sensitive
+            information is necessary. Here are common use cases:
+          </p>
+          <ul>
+            <li>Tooltips that provide additional information on hover.</li>
+            <li>Dropdown menus for navigation or selections.</li>
+            <li>Modals for confirmations or additional content.</li>
+          </ul>
+          <h3>Basic Example</h3>
+          <p>
+            Below is a simple example of how to use the Popper component to
+            display content relative to a button.
+          </p>
+          <Row $Hcenter className="image-container">
+            <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
+              <Popper open={true} anchorEl={document.querySelector("button")}>
+                <div>This is popper content!</div>
+              </Popper>
+            </SistentThemeProvider>
+          </Row>
+          <p>
+            The `anchorEl` prop specifies the element to which the Popper will
+            be anchored. The `open` prop controls its visibility.
+          </p>
+          <h2>Styling and Positioning</h2>
+          <p>
+            You can customize the positioning of the Popper using the
+            `placement` prop to define where the Popper appears relative to the
+            anchor element.
+          </p>
+          <Row $Hcenter className="image-container">
+            <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
+              <Popper
+                open={true}
+                anchorEl={document.querySelector("button")}
+                placement="bottom"
+              >
+                <div>Popper positioned at the bottom!</div>
+              </Popper>
+            </SistentThemeProvider>
+          </Row>
+          <p>
+            The above example demonstrates a Popper positioned below the
+            reference button, providing flexibility in its placement.
+          </p>
+          <h2>Conclusion</h2>
+          <p>
+            The Popper component is essential for creating dynamic, contextually
+            relevant interfaces that enhance user experience. By utilizing the
+            Popper component effectively, developers can create intuitive and
+            interactive web applications.
+          </p>
+        </div>
+      </div>
+    </SistentLayout>
+  );
+};

From acd84450f41be065ddf46c658b21db33835b6db1 Mon Sep 17 00:00:00 2001
From: Vidit Kushwaha <120644015+Vidit-Kushwaha@users.noreply.github.com>
Date: Sat, 19 Oct 2024 15:10:53 +0000
Subject: [PATCH 2/3] few Enhancement and fixed position issue

Signed-off-by: Vidit Kushwaha <120644015+Vidit-Kushwaha@users.noreply.github.com>
---
 .../Sistent/components/popper/code.js         | 111 ++++++++----------
 .../Sistent/components/popper/guidance.js     |  34 +++---
 .../Sistent/components/popper/index.js        |  63 ++++++----
 3 files changed, 103 insertions(+), 105 deletions(-)

diff --git a/src/sections/Projects/Sistent/components/popper/code.js b/src/sections/Projects/Sistent/components/popper/code.js
index fd9425703495..b43e84bb3668 100644
--- a/src/sections/Projects/Sistent/components/popper/code.js
+++ b/src/sections/Projects/Sistent/components/popper/code.js
@@ -1,35 +1,38 @@
-import React, { useRef, useState } from "react";
+import React, { useState } from "react";
 import { navigate } from "gatsby";
-import { SistentThemeProvider, Popper, Button } from "@layer5/sistent";
+import { useLocation } from "@reach/router";
+import { SistentThemeProvider, Popper, Button, Box } 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";
 
 const codes = [
-  `<Button
-    variant="contained"
-    label="Toggle Popper"
-    size="medium"
-    onClick={handleClick}
-    ref={anchorRef}
-  />
-  <Popper
-    open={open}
-    anchorEl={anchorRef.current}
-    placement="top"
-  >
-    <div
-      style={{
-        padding: "10px",
-        backgroundColor: "#fff",
-        border: "1px solid #ccc",
-        borderRadius: "4px",
-      }}
-    >
-      I'm positioned above!
-    </div>
-  </Popper>`,
+  ` <SistentThemeProvider>
+      <Button
+        variant="contained"
+        label="Toggle Popper"
+        size="medium"
+        onClick={handleClick}
+        ref={anchorRef}
+      />
+      <Popper
+        open={open}
+        anchorEl={anchorRef.current}
+        placement="top"
+      >
+        <div
+          style={{
+            padding: "10px",
+            backgroundColor: "#fff",
+            border: "1px solid #ccc",
+            borderRadius: "4px",
+          }}
+        >
+          I'm positioned above!
+        </div>
+      </Popper>
+  </SistentThemeProvider>`,
   `<Button
     variant="contained"
     label="Toggle Popper"
@@ -57,11 +60,16 @@ const codes = [
 
 export const PooperCode = () => {
   const { isDark } = useStyledDarkMode();
+  const location = useLocation();
+
+  const [anchorEl, setAnchorEl] = useState(null);
+  const [placement, setPlacement] = useState("bottom");
   const [open, setOpen] = useState(false);
-  const anchorRef = useRef(null);
 
-  const handleClick = () => {
-    setOpen((prevOpen) => !prevOpen);
+  const handleClick = (newPlacement) => (event) => {
+    setAnchorEl(event.currentTarget);
+    setOpen((prev) => placement !== newPlacement || !prev);
+    setPlacement(newPlacement);
   };
 
   return (
@@ -89,7 +97,7 @@ export const PooperCode = () => {
           <TabButton
             className={
               location.pathname ===
-              "/projects/sistent/components/popper/guidance"
+                "/projects/sistent/components/popper/guidance"
                 ? "active"
                 : ""
             }
@@ -118,29 +126,23 @@ export const PooperCode = () => {
             <a id="Basic Popper">
               <h3>Basic Popper</h3>
             </a>
+            <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
+              <Popper open={open} anchorEl={anchorEl} placement={placement}>
+                <Box sx={{ border: 1, p: 1, bgcolor: "background.paper" }}>
+                  The content of the Popper.
+                </Box>
+              </Popper>
+            </SistentThemeProvider>
             <div className="showcase">
               <div className="items">
                 <Button
                   variant="contained"
                   label="Toggle Popper"
                   size="medium"
-                  onClick={handleClick}
-                  ref={anchorRef}
+                  onClick={handleClick("bottom")}
                 />
-                <Popper open={open}>
-                  <div
-                    style={{
-                      padding: "10px",
-                      backgroundColor: "#fff",
-                      border: "1px solid #ccc",
-                      borderRadius: "4px",
-                    }}
-                  >
-                    Hello, I'm a Popper!
-                  </div>
-                </Popper>
               </div>
-              <CodeBlock name="Basic Popper" code={codes[0]} />
+              <CodeBlock name="basic-popper" code={codes[0]} />
             </div>
             <a id="PositionedExample">
               <h3>Positioned Example</h3>
@@ -156,27 +158,10 @@ export const PooperCode = () => {
                   variant="contained"
                   label="Toggle Popper"
                   size="medium"
-                  onClick={handleClick}
-                  ref={anchorRef}
+                  onClick={handleClick("top")}
                 />
-                <Popper
-                  open={open}
-                  anchorEl={anchorRef.current}
-                  placement="top"
-                >
-                  <div
-                    style={{
-                      padding: "10px",
-                      backgroundColor: "#fff",
-                      border: "1px solid #ccc",
-                      borderRadius: "4px",
-                    }}
-                  >
-                    I'm positioned above!
-                  </div>
-                </Popper>
               </div>
-              <CodeBlock name="PositionedExample" code={codes[1]} />
+              <CodeBlock name="positioned-example" code={codes[1]} />
             </div>
           </SistentThemeProvider>
         </div>
diff --git a/src/sections/Projects/Sistent/components/popper/guidance.js b/src/sections/Projects/Sistent/components/popper/guidance.js
index c834a4ed2760..8a9e4a4c9dab 100644
--- a/src/sections/Projects/Sistent/components/popper/guidance.js
+++ b/src/sections/Projects/Sistent/components/popper/guidance.js
@@ -1,23 +1,29 @@
-import React, { useState, useRef } from "react";
+import React, { useState } from "react";
 import { navigate } from "gatsby";
+import { useLocation } from "@reach/router";
 import { SistentLayout } from "../../sistent-layout";
-import { SistentThemeProvider, Popper, Button } from "@layer5/sistent";
+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 anchorRef = useRef(null);
+  const [anchorEl, setAnchorEl] = useState(null);
 
-  const handleClick = () => {
+  const handleClick = (event) => {
+    setAnchorEl(event.currentTarget);
     setOpen((prevOpen) => !prevOpen);
   };
 
   return (
     <SistentLayout title="Popper">
-      <div>
+      <div className="content">
+        <a id="Identity">
+          <h2>Popper</h2>
+        </a>
         <p>
           The Popper component provides a mechanism for positioning content
           dynamically relative to a reference element. It is commonly used for
@@ -37,7 +43,7 @@ export const PopperGuidance = () => {
           <TabButton
             className={
               location.pathname ===
-              "/projects/sistent/components/popper/guidance"
+                "/projects/sistent/components/popper/guidance"
                 ? "active"
                 : ""
             }
@@ -105,19 +111,11 @@ export const PopperGuidance = () => {
                 label="Toggle Popper"
                 size="medium"
                 onClick={handleClick}
-                ref={anchorRef}
               />
-              <Popper open={open}>
-                <div
-                  style={{
-                    padding: "10px",
-                    backgroundColor: "#fff",
-                    border: "1px solid #ccc",
-                    borderRadius: "4px",
-                  }}
-                >
-                  Styled Popper content!
-                </div>
+              <Popper open={open} anchorEl={anchorEl}>
+                <Box sx={{ border: 1, p: 1, bgcolor: "background.paper" }}>
+                  The content of the Popper.
+                </Box>
               </Popper>
             </SistentThemeProvider>
           </Row>
diff --git a/src/sections/Projects/Sistent/components/popper/index.js b/src/sections/Projects/Sistent/components/popper/index.js
index 42f22c0e5d60..9931d3a4381b 100644
--- a/src/sections/Projects/Sistent/components/popper/index.js
+++ b/src/sections/Projects/Sistent/components/popper/index.js
@@ -1,8 +1,7 @@
-import React from "react";
+import React, { useState } from "react";
 import { navigate } from "gatsby";
 import { useLocation } from "@reach/router";
-
-import { SistentThemeProvider, Popper } from "@layer5/sistent";
+import { SistentThemeProvider, Popper, Button, Box } from "@layer5/sistent";
 import TabButton from "../../../../../reusecore/Button";
 import { SistentLayout } from "../../sistent-layout";
 import { Row } from "../../../../../reusecore/Layout";
@@ -12,6 +11,16 @@ export const SistentPopper = () => {
   const location = useLocation();
   const { isDark } = useStyledDarkMode();
 
+  const [anchorEl, setAnchorEl] = useState(null);
+  const [placement, setPlacement] = useState("bottom");
+  const [open, setOpen] = useState(false);
+
+  const handleClick = (newPlacement) => (event) => {
+    setAnchorEl(event.currentTarget);
+    setOpen((prev) => placement !== newPlacement || !prev);
+    setPlacement(newPlacement);
+  };
+
   return (
     <SistentLayout title="Popper">
       <div className="content">
@@ -37,7 +46,7 @@ export const SistentPopper = () => {
           <TabButton
             className={
               location.pathname ===
-              "/projects/sistent/components/popper/guidance"
+                "/projects/sistent/components/popper/guidance"
                 ? "active"
                 : ""
             }
@@ -75,23 +84,37 @@ export const SistentPopper = () => {
             <li>Dropdown menus for navigation or selections.</li>
             <li>Modals for confirmations or additional content.</li>
           </ul>
-          <h3>Basic Example</h3>
+          <a id="Basic Example">
+            <h3>Basic Example</h3>
+          </a>
           <p>
             Below is a simple example of how to use the Popper component to
             display content relative to a button.
           </p>
+          <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
+            <Popper open={open} anchorEl={anchorEl} placement={placement}>
+              <Box sx={{ border: 1, p: 1, bgcolor: "background.paper" }}>
+                The content of the Popper.
+              </Box>
+            </Popper>
+          </SistentThemeProvider>
           <Row $Hcenter className="image-container">
             <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
-              <Popper open={true} anchorEl={document.querySelector("button")}>
-                <div>This is popper content!</div>
-              </Popper>
+              <Button
+                variant="contained"
+                label="Toggle Popper"
+                size="medium"
+                onClick={handleClick("bottom")}
+              />
             </SistentThemeProvider>
           </Row>
           <p>
             The `anchorEl` prop specifies the element to which the Popper will
             be anchored. The `open` prop controls its visibility.
           </p>
-          <h2>Styling and Positioning</h2>
+          <a id="Styling and Positioning">
+            <h3>Styling and Positioning</h3>
+          </a>
           <p>
             You can customize the positioning of the Popper using the
             `placement` prop to define where the Popper appears relative to the
@@ -99,26 +122,18 @@ export const SistentPopper = () => {
           </p>
           <Row $Hcenter className="image-container">
             <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
-              <Popper
-                open={true}
-                anchorEl={document.querySelector("button")}
-                placement="bottom"
-              >
-                <div>Popper positioned at the bottom!</div>
-              </Popper>
+              <Button
+                variant="contained"
+                label="Toggle Popper"
+                size="medium"
+                onClick={handleClick("right")}
+              />
             </SistentThemeProvider>
           </Row>
           <p>
-            The above example demonstrates a Popper positioned below the
+            The above example demonstrates a Popper positioned right the
             reference button, providing flexibility in its placement.
           </p>
-          <h2>Conclusion</h2>
-          <p>
-            The Popper component is essential for creating dynamic, contextually
-            relevant interfaces that enhance user experience. By utilizing the
-            Popper component effectively, developers can create intuitive and
-            interactive web applications.
-          </p>
         </div>
       </div>
     </SistentLayout>

From 00de1c05514ade9b2ff91a5af99a48a0e915abdc Mon Sep 17 00:00:00 2001
From: Vidit Kushwaha <120644015+Vidit-Kushwaha@users.noreply.github.com>
Date: Tue, 22 Oct 2024 18:29:03 +0000
Subject: [PATCH 3/3] Added different position of popper in code section

Signed-off-by: Vidit Kushwaha <120644015+Vidit-Kushwaha@users.noreply.github.com>
---
 .../Sistent/components/popper/code.js         | 282 ++++++++++++++----
 1 file changed, 229 insertions(+), 53 deletions(-)

diff --git a/src/sections/Projects/Sistent/components/popper/code.js b/src/sections/Projects/Sistent/components/popper/code.js
index b43e84bb3668..7983121f6aeb 100644
--- a/src/sections/Projects/Sistent/components/popper/code.js
+++ b/src/sections/Projects/Sistent/components/popper/code.js
@@ -1,61 +1,141 @@
 import React, { useState } from "react";
 import { navigate } from "gatsby";
 import { useLocation } from "@reach/router";
-import { SistentThemeProvider, Popper, Button, Box } from "@layer5/sistent";
+import {
+  SistentThemeProvider,
+  Popper,
+  Button,
+  Box,
+  Grid,
+} 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";
 
 const codes = [
-  ` <SistentThemeProvider>
-      <Button
-        variant="contained"
-        label="Toggle Popper"
-        size="medium"
-        onClick={handleClick}
-        ref={anchorRef}
-      />
-      <Popper
-        open={open}
-        anchorEl={anchorRef.current}
-        placement="top"
-      >
-        <div
-          style={{
-            padding: "10px",
-            backgroundColor: "#fff",
-            border: "1px solid #ccc",
-            borderRadius: "4px",
-          }}
-        >
-          I'm positioned above!
-        </div>
-      </Popper>
-  </SistentThemeProvider>`,
   `<Button
     variant="contained"
     label="Toggle Popper"
     size="medium"
-    onClick={handleClick}
-    ref={anchorRef}
+    onClick={handleClick()}
   />
-  <Popper
-    open={open}
-    anchorEl={anchorRef.current}
-    placement="top"
-  >
-    <div
-      style={{
-        padding: "10px",
-        backgroundColor: "#fff",
-        border: "1px solid #ccc",
-        borderRadius: "4px",
-      }}
-    >
-      I'm positioned above!
-    </div>
-  </Popper>`,
+  <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
+    <Popper open={open} anchorEl={anchorEl}>
+      <Box sx={{ border: 1, p: 2, bgcolor: "background.paper" }}>
+        The content of the Popper.
+      </Box>
+    </Popper>
+  </SistentThemeProvider>`,
+  `<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
+    <Popper open={open} anchorEl={anchorEl} placement={placement}>
+      <Box sx={{ border: 1, p: 2, bgcolor: "background.paper" }}>
+        The content of the Popper.
+      </Box>
+    </Popper>
+  </SistentThemeProvider>
+  <Box sx={{ width: 500 }}>
+    <Grid container sx={{ justifyContent: "center" }}>
+      <Grid item>
+        <Button
+          variant="text"
+          label="top-start"
+          size="medium"
+          onClick={handleClick("top-start")}
+        />
+        <Button
+          variant="text"
+          label="top"
+          size="medium"
+          onClick={handleClick("top")}
+        />
+        <Button
+          variant="text"
+          label="top-end"
+          size="medium"
+          onClick={handleClick("top-end")}
+        />
+      </Grid>
+    </Grid>
+    <Grid container sx={{ justifyContent: "center" }}>
+      <Grid item xs={6}>
+        <Button
+          variant="text"
+          label="left-start"
+          size="medium"
+          onClick={handleClick("left-start")}
+        />
+        <br />
+        <Button
+          variant="text"
+          label="left"
+          size="medium"
+          onClick={handleClick("left")}
+        />
+        <br />
+        <Button
+          variant="text"
+          label="left-end"
+          size="medium"
+          onClick={handleClick("left-end")}
+        />
+      </Grid>
+      <Grid
+        item
+        container
+        xs={6}
+        direction="column"
+        sx={{ alignItems: "flex-end" }}
+      >
+        <Grid item>
+          <Button
+            variant="text"
+            label="right-start"
+            size="medium"
+            onClick={handleClick("right-start")}
+          />
+        </Grid>
+        <Grid item>
+          <Button
+            variant="text"
+            label="right"
+            size="medium"
+            onClick={handleClick("right")}
+          />
+        </Grid>
+        <Grid item>
+          <Button
+            variant="text"
+            label="right-end"
+            size="medium"
+            onClick={handleClick("right-end")}
+          />
+        </Grid>
+      </Grid>
+    </Grid>
+    <Grid container sx={{ justifyContent: "center" }}>
+      <Grid item>
+        <Button
+          variant="text"
+          label="bottom-start"
+          size="medium"
+          onClick={handleClick("bottom-start")}
+        />
+        <Button
+          variant="text"
+          label="bottom"
+          size="medium"
+          onClick={handleClick("bottom")}
+        />
+        <Button
+          variant="text"
+          label="bottom-end"
+          size="medium"
+          onClick={handleClick("bottom-end")}
+        />
+      </Grid>
+    </Grid>
+  </Box>`,
 ];
 
 export const PooperCode = () => {
@@ -97,7 +177,7 @@ export const PooperCode = () => {
           <TabButton
             className={
               location.pathname ===
-                "/projects/sistent/components/popper/guidance"
+              "/projects/sistent/components/popper/guidance"
                 ? "active"
                 : ""
             }
@@ -128,7 +208,7 @@ export const PooperCode = () => {
             </a>
             <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
               <Popper open={open} anchorEl={anchorEl} placement={placement}>
-                <Box sx={{ border: 1, p: 1, bgcolor: "background.paper" }}>
+                <Box sx={{ border: 1, p: 2, bgcolor: "background.paper" }}>
                   The content of the Popper.
                 </Box>
               </Popper>
@@ -144,7 +224,7 @@ export const PooperCode = () => {
               </div>
               <CodeBlock name="basic-popper" code={codes[0]} />
             </div>
-            <a id="PositionedExample">
+            <a id="Positioned Example">
               <h3>Positioned Example</h3>
             </a>
             <p>
@@ -154,12 +234,108 @@ export const PooperCode = () => {
             </p>
             <div className="showcase">
               <div className="items">
-                <Button
-                  variant="contained"
-                  label="Toggle Popper"
-                  size="medium"
-                  onClick={handleClick("top")}
-                />
+                <Box sx={{ width: 500 }}>
+                  <Grid container sx={{ justifyContent: "center" }}>
+                    <Grid item>
+                      <Button
+                        variant="text"
+                        label="top-start"
+                        size="medium"
+                        onClick={handleClick("top-start")}
+                      />
+                      <Button
+                        variant="text"
+                        label="top"
+                        size="medium"
+                        onClick={handleClick("top")}
+                      />
+                      <Button
+                        variant="text"
+                        label="top-end"
+                        size="medium"
+                        onClick={handleClick("top-end")}
+                      />
+                    </Grid>
+                  </Grid>
+                  <Grid container sx={{ justifyContent: "center" }}>
+                    <Grid item xs={6}>
+                      <Button
+                        variant="text"
+                        label="left-start"
+                        size="medium"
+                        onClick={handleClick("left-start")}
+                      />
+                      <br />
+                      <Button
+                        variant="text"
+                        label="left"
+                        size="medium"
+                        onClick={handleClick("left")}
+                      />
+                      <br />
+                      <Button
+                        variant="text"
+                        label="left-end"
+                        size="medium"
+                        onClick={handleClick("left-end")}
+                      />
+                    </Grid>
+                    <Grid
+                      item
+                      container
+                      xs={6}
+                      direction="column"
+                      sx={{ alignItems: "flex-end" }}
+                    >
+                      <Grid item>
+                        <Button
+                          variant="text"
+                          label="right-start"
+                          size="medium"
+                          onClick={handleClick("right-start")}
+                        />
+                      </Grid>
+                      <Grid item>
+                        <Button
+                          variant="text"
+                          label="right"
+                          size="medium"
+                          onClick={handleClick("right")}
+                        />
+                      </Grid>
+                      <Grid item>
+                        <Button
+                          variant="text"
+                          label="right-end"
+                          size="medium"
+                          onClick={handleClick("right-end")}
+                        />
+                      </Grid>
+                    </Grid>
+                  </Grid>
+                  <Grid container sx={{ justifyContent: "center" }}>
+                    <Grid item>
+                      <Button
+                        variant="text"
+                        label="bottom-start"
+                        size="medium"
+                        onClick={handleClick("bottom-start")}
+                      />
+                      <Button
+                        variant="text"
+                        label="bottom"
+                        size="medium"
+                        onClick={handleClick("bottom")}
+                      />
+                      <Button
+                        variant="text"
+                        label="bottom-end"
+                        size="medium"
+                        onClick={handleClick("bottom-end")}
+                      />
+                    </Grid>
+                  </Grid>
+                </Box>
               </div>
               <CodeBlock name="positioned-example" code={codes[1]} />
             </div>