Merge pull request #7002 from SplinterSword/collapseDocs

Collapse docs

Author: Rajesh-Nagarajan-11

src/components/SistentNavigation/content.js

@@ -45,86 +45,89 @@ export const content = [
   { id: 32, link: "/projects/sistent/components/circularprogress/guidance", text: "Circular Progress" },
   { id: 33, link: "/projects/sistent/components/circularprogress/code", text: "Circular Progress" },
 
-  { id: 34, link: "/projects/sistent/components/container", text: "Container" },
-  { id: 35, link: "/projects/sistent/components/container/guidance", text: "Container" },
-  { id: 36, link: "/projects/sistent/components/container/code", text: "Container" },
+  { id: 34, link: "/projects/sistent/components/collapse", text: "Collapse" },
+  { id: 35, link: "/projects/sistent/components/collapse/guidance", text: "Collapse" },
+  { id: 36, link: "/projects/sistent/components/collapse/code", text: "Collapse" },
 
-  { id: 37, link: "/projects/sistent/components/dialog", text: "Dialog" },
-  { id: 38, link: "/projects/sistent/components/dialog/guidance", text: "Dialog" },
-  { id: 39, link: "/projects/sistent/components/dialog/code", text: "Dialog" },
+  { id: 37, link: "/projects/sistent/components/container", text: "Container" },
+  { id: 38, link: "/projects/sistent/components/container/guidance", text: "Container" },
+  { id: 39, link: "/projects/sistent/components/container/code", text: "Container" },
 
-  { id: 40, link: "/projects/sistent/components/formcontrollabel", text: "FormControlLabel" },
-  { id: 41, link: "/projects/sistent/components/formcontrollabel/guidance", text: "FormControlLabel" },
-  { id: 42, link: "/projects/sistent/components/formcontrollabel/code", text: "FormControlLabel" },
+  { id: 40, link: "/projects/sistent/components/dialog", text: "Dialog" },
+  { id: 41, link: "/projects/sistent/components/dialog/guidance", text: "Dialog" },
+  { id: 42, link: "/projects/sistent/components/dialog/code", text: "Dialog" },
 
-  { id: 43, link: "/projects/sistent/components/grid", text: "Grid" },
-  { id: 44, link: "/projects/sistent/components/grid/guidance", text: "Grid" },
-  { id: 45, link: "/projects/sistent/components/grid/code", text: "Grid" },
+  { id: 43, link: "/projects/sistent/components/formcontrollabel", text: "FormControlLabel" },
+  { id: 44, link: "/projects/sistent/components/formcontrollabel/guidance", text: "FormControlLabel" },
+  { id: 45, link: "/projects/sistent/components/formcontrollabel/code", text: "FormControlLabel" },
 
-  { id: 46, link: "/projects/sistent/components/iconbutton", text: "IconButton" },
-  { id: 47, link: "/projects/sistent/components/iconbutton/guidance", text: "IconButton" },
-  { id: 48, link: "/projects/sistent/components/iconbutton/code", text: "IconButton" },
+  { id: 46, link: "/projects/sistent/components/grid", text: "Grid" },
+  { id: 47, link: "/projects/sistent/components/grid/guidance", text: "Grid" },
+  { id: 48, link: "/projects/sistent/components/grid/code", text: "Grid" },
 
-  { id: 49, link: "/projects/sistent/components/icons", text: "Icons" },
+  { id: 49, link: "/projects/sistent/components/iconbutton", text: "IconButton" },
+  { id: 50, link: "/projects/sistent/components/iconbutton/guidance", text: "IconButton" },
+  { id: 51, link: "/projects/sistent/components/iconbutton/code", text: "IconButton" },
 
-  { id: 50, link: "/projects/sistent/components/link", text: "Link" },
-  { id: 51, link: "/projects/sistent/components/link/guidance", text: "Link" },
-  { id: 52, link: "/projects/sistent/components/link/code", text: "Link" },
+  { id: 52, link: "/projects/sistent/components/icons", text: "Icons" },
 
-  { id: 53, link: "/projects/sistent/components/list", text: "List" },
-  { id: 54, link: "/projects/sistent/components/list/guidance", text: "List" },
-  { id: 55, link: "/projects/sistent/components/list/code", text: "List" },
+  { id: 53, link: "/projects/sistent/components/link", text: "Link" },
+  { id: 54, link: "/projects/sistent/components/link/guidance", text: "Link" },
+  { id: 55, link: "/projects/sistent/components/link/code", text: "Link" },
 
-  { id: 56, link: "/projects/sistent/components/modal", text: "Modal" },
-  { id: 57, link: "/projects/sistent/components/modal/guidance", text: "Modal" },
-  { id: 58, link: "/projects/sistent/components/modal/code", text: "Modal" },
+  { id: 56, link: "/projects/sistent/components/list", text: "List" },
+  { id: 57, link: "/projects/sistent/components/list/guidance", text: "List" },
+  { id: 58, link: "/projects/sistent/components/list/code", text: "List" },
 
-  { id: 59, link: "/projects/sistent/components/pagination", text: "Pagination" },
-  { id: 60, link: "/projects/sistent/components/pagination/guidance", text: "Pagination" },
-  { id: 61, link: "/projects/sistent/components/pagination/code", text: "Pagination" },
+  { id: 59, link: "/projects/sistent/components/modal", text: "Modal" },
+  { id: 60, link: "/projects/sistent/components/modal/guidance", text: "Modal" },
+  { id: 61, link: "/projects/sistent/components/modal/code", text: "Modal" },
 
-  { id: 62, link: "/projects/sistent/components/paper", text: "Paper" },
-  { id: 63, link: "/projects/sistent/components/paper/guidance", text: "Paper" },
-  { id: 64, link: "/projects/sistent/components/paper/code", text: "Paper" },
+  { id: 62, link: "/projects/sistent/components/pagination", text: "Pagination" },
+  { id: 63, link: "/projects/sistent/components/pagination/guidance", text: "Pagination" },
+  { id: 64, link: "/projects/sistent/components/pagination/code", text: "Pagination" },
 
-  { id: 65, link: "/projects/sistent/components/popper", text: "Popper" },
-  { id: 66, link: "/projects/sistent/components/popper/guidance", text: "Popper" },
-  { id: 67, link: "/projects/sistent/components/popper/code", text: "Popper" },
+  { id: 65, link: "/projects/sistent/components/paper", text: "Paper" },
+  { id: 66, link: "/projects/sistent/components/paper/guidance", text: "Paper" },
+  { id: 67, link: "/projects/sistent/components/paper/code", text: "Paper" },
 
-  { id: 68, link: "/projects/sistent/components/radiogroup", text: "RadioGroup" },
-  { id: 69, link: "/projects/sistent/components/radiogroup/guidance", text: "RadioGroup" },
-  { id: 70, link: "/projects/sistent/components/radiogroup/code", text: "RadioGroup" },
+  { id: 68, link: "/projects/sistent/components/popper", text: "Popper" },
+  { id: 69, link: "/projects/sistent/components/popper/guidance", text: "Popper" },
+  { id: 70, link: "/projects/sistent/components/popper/code", text: "Popper" },
 
-  { id: 71, link: "/projects/sistent/components/select", text: "Select" },
-  { id: 72, link: "/projects/sistent/components/select/guidance", text: "Select" },
-  { id: 73, link: "/projects/sistent/components/select/code", text: "Select" },
+  { id: 71, link: "/projects/sistent/components/radiogroup", text: "RadioGroup" },
+  { id: 72, link: "/projects/sistent/components/radiogroup/guidance", text: "RadioGroup" },
+  { id: 73, link: "/projects/sistent/components/radiogroup/code", text: "RadioGroup" },
 
-  { id: 74, link: "/projects/sistent/components/stepper", text: "Stepper" },
-  { id: 75, link: "/projects/sistent/components/stepper/guidance", text: "Stepper" },
-  { id: 76, link: "/projects/sistent/components/stepper/code", text: "Stepper" },
+  { id: 74, link: "/projects/sistent/components/select", text: "Select" },
+  { id: 75, link: "/projects/sistent/components/select/guidance", text: "Select" },
+  { id: 76, link: "/projects/sistent/components/select/code", text: "Select" },
 
-  { id: 77, link: "/projects/sistent/components/switch", text: "Switch" },
-  { id: 78, link: "/projects/sistent/components/switch/guidance", text: "Switch" },
-  { id: 79, link: "/projects/sistent/components/switch/code", text: "Switch" },
+  { id: 77, link: "/projects/sistent/components/stepper", text: "Stepper" },
+  { id: 78, link: "/projects/sistent/components/stepper/guidance", text: "Stepper" },
+  { id: 79, link: "/projects/sistent/components/stepper/code", text: "Stepper" },
 
-  { id: 80, link: "/projects/sistent/components/tabs", text: "Tabs" },
-  { id: 81, link: "/projects/sistent/components/tabs/guidance", text: "Tabs" },
-  { id: 82, link: "/projects/sistent/components/tabs/code", text: "Tabs" },
+  { id: 80, link: "/projects/sistent/components/switch", text: "Switch" },
+  { id: 81, link: "/projects/sistent/components/switch/guidance", text: "Switch" },
+  { id: 82, link: "/projects/sistent/components/switch/code", text: "Switch" },
 
-  { id: 83, link: "/projects/sistent/components/text-field", text: "Text Field" },
-  { id: 84, link: "/projects/sistent/components/text-field/guidance", text: "Text Field" },
-  { id: 85, link: "/projects/sistent/components/text-field/code", text: "Text Field" },
+  { id: 83, link: "/projects/sistent/components/tabs", text: "Tabs" },
+  { id: 84, link: "/projects/sistent/components/tabs/guidance", text: "Tabs" },
+  { id: 85, link: "/projects/sistent/components/tabs/code", text: "Tabs" },
 
-  { id: 86, link: "/projects/sistent/components/text-input", text: "Text Input" },
-  { id: 87, link: "/projects/sistent/components/text-input/guidance", text: "Text Input" },
-  { id: 88, link: "/projects/sistent/components/text-input/code", text: "Text Input" },
+  { id: 86, link: "/projects/sistent/components/text-field", text: "Text Field" },
+  { id: 87, link: "/projects/sistent/components/text-field/guidance", text: "Text Field" },
+  { id: 88, link: "/projects/sistent/components/text-field/code", text: "Text Field" },
 
-  { id: 89, link: "/projects/sistent/components/toolbar", text: "Toolbar" },
-  { id: 90, link: "/projects/sistent/components/toolbar/guidance", text: "Toolbar" },
-  { id: 91, link: "/projects/sistent/components/toolbar/code", text: "Toolbar" },
+  { id: 89, link: "/projects/sistent/components/text-input", text: "Text Input" },
+  { id: 90, link: "/projects/sistent/components/text-input/guidance", text: "Text Input" },
+  { id: 91, link: "/projects/sistent/components/text-input/code", text: "Text Input" },
 
-  { id: 92, link: "/projects/sistent/components/tooltip", text: "Tooltip" },
-  { id: 93, link: "/projects/sistent/components/tooltip/guidance", text: "Tooltip" },
-  { id: 94, link: "/projects/sistent/components/tooltip/code", text: "Tooltip" },
+  { id: 92, link: "/projects/sistent/components/toolbar", text: "Toolbar" },
+  { id: 93, link: "/projects/sistent/components/toolbar/guidance", text: "Toolbar" },
+  { id: 94, link: "/projects/sistent/components/toolbar/code", text: "Toolbar" },
 
+  { id: 95, link: "/projects/sistent/components/tooltip", text: "Tooltip" },
+  { id: 96, link: "/projects/sistent/components/tooltip/guidance", text: "Tooltip" },
+  { id: 97, link: "/projects/sistent/components/tooltip/code", text: "Tooltip" },
 ];

src/sections/Projects/Sistent/components/collapse/code.js

@@ -0,0 +1,149 @@
+import React, { useState } from "react";
+import { Collapse, Button, SistentThemeProvider } from "@sistent/sistent";
+import { SistentLayout } from "../../sistent-layout";
+import TabButton from "../../../../../reusecore/Button";
+import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode";
+import { CodeBlock } from "../button/code-block";
+import { navigate } from "gatsby";
+import { useLocation } from "@reach/router";
+
+const codes = [
+  "  <SistentThemeProvider>\n       <Button onClick={() => setExpanded(!expanded)}>\n         {expanded ? 'Collapse' : 'Expand'}\n       </Button>\n       <Collapse in={expanded}>\n         <div>Content to be collapsed/expanded</div>\n       </Collapse>\n  </SistentThemeProvider>",
+  "  <SistentThemeProvider>\n       <Button onClick={() => setExpanded(!expanded)}>\n         {expanded ? 'Collapse' : 'Expand'}\n       </Button>\n       <Collapse in={expanded}>\n         <div>Content that's expanded by default</div>\n       </Collapse>\n  </SistentThemeProvider>",
+  "  <SistentThemeProvider>\n       <Button onClick={() => setExpanded(!expanded)}>\n         {expanded ? 'Collapse' : 'Expand'}\n       </Button>\n       <Collapse in={expanded} unmountOnExit>\n         <div>Content that unmounts when collapsed</div>\n       </Collapse>\n  </SistentThemeProvider>",
+  "  <SistentThemeProvider>\n       <Button onClick={() => setExpanded(!expanded)}>\n         {expanded ? 'Fast Collapse' : 'Slow Expand'}\n       </Button>\n       <Collapse in={expanded} timeout={expanded ? 1000 : 300} easing={expanded ? 'cubic-bezier(0.4, 0, 0.2, 1)' : 'ease-out'}>\n         <div>Custom transition content</div>\n       </Collapse>\n  </SistentThemeProvider>",
+];
+
+const CollapseComponent = () => {
+  const { isDark } = useStyledDarkMode();
+  const location = useLocation();
+
+  const [expanded1, setExpanded1] = useState(false);
+  const [expanded2, setExpanded2] = useState(true);
+  const [expanded3, setExpanded3] = useState(false);
+  const [expanded4, setExpanded4] = useState(false);
+
+  return (
+    <SistentLayout title="Collapse">
+      <section className="content">
+        <a id="Identity">
+          <h2>Collapse</h2>
+        </a>
+        <p>
+          The Collapse component provides a smooth, animated way to show and hide content.
+          Below are various examples demonstrating its capabilities and usage patterns.
+        </p>
+
+        <div className="filterBtns">
+          <TabButton
+            className={
+              location.pathname === "/projects/sistent/components/collapse"
+                ? "active"
+                : ""
+            }
+            onClick={() => navigate("/projects/sistent/components/collapse")}
+            title="Overview"
+          />
+          <TabButton
+            className={
+              location.pathname === "/projects/sistent/components/collapse/guidance"
+                ? "active"
+                : ""
+            }
+            onClick={() => navigate("/projects/sistent/components/collapse/guidance")}
+            title="Guidance"
+          />
+          <TabButton
+            className={
+              location.pathname === "/projects/sistent/components/collapse/code"
+                ? "active"
+                : ""
+            }
+            onClick={() => navigate("/projects/sistent/components/collapse/code")}
+            title="Code"
+          />
+        </div>
+
+        <div className="main-content">
+          <p>
+            The Collapse component provides a smooth, animated way to show and hide content.
+            Below are various examples demonstrating its capabilities and usage patterns.
+          </p>
+          <a id="Basic Collapse">
+            <h2>Basic Collapse</h2>
+          </a>
+          <p>A simple collapsible section that can be toggled with a button click.</p>
+          <div className="showcase">
+            <div className="items">
+              <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
+                <Button variant="contained" onClick={() => setExpanded1(!expanded1)}>
+                  {expanded1 ? "Collapse" : "Expand"}
+                </Button>
+                <Collapse in={expanded1}>
+                  <div>Content to be collapsed/expanded</div>
+                </Collapse>
+              </SistentThemeProvider>
+            </div>
+            <CodeBlock name="collapse-basic" code={codes[0]} />
+          </div>
+
+          <a id="Default Expanded">
+            <h2>Default Expanded</h2>
+          </a>
+          <p>A collapsible section that starts expanded by default.</p>
+          <div className="showcase">
+            <div className="items">
+              <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
+                <Button variant="outlined" onClick={() => setExpanded2(!expanded2)}>
+                  {expanded2 ? "Collapse" : "Expand"}
+                </Button>
+                <Collapse in={expanded2}>
+                  <div>Content that's expanded by default</div>
+                </Collapse>
+              </SistentThemeProvider>
+            </div>
+            <CodeBlock name="collapse-default-expanded" code={codes[1]} />
+          </div>
+
+          <a id="Unmount on Exit">
+            <h2>Unmount on Exit</h2>
+          </a>
+          <p>Unmounts the content when collapsed for better performance with large content.</p>
+          <div className="showcase">
+            <div className="items">
+              <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
+                <Button variant="text" onClick={() => setExpanded3(!expanded3)}>
+                  {expanded3 ? "Collapse" : "Expand"}
+                </Button>
+                <Collapse in={expanded3} unmountOnExit>
+                  <div>Content that unmounts when collapsed</div>
+                </Collapse>
+              </SistentThemeProvider>
+            </div>
+            <CodeBlock name="collapse-unmount-on-exit" code={codes[2]} />
+          </div>
+
+          <a id="Custom Transition">
+            <h2>Custom Transition</h2>
+          </a>
+          <p>Customize the transition duration and easing function.</p>
+          <div className="showcase">
+            <div className="items">
+              <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
+                <Button variant="contained" onClick={() => setExpanded4(!expanded4)}>
+                  {expanded4 ? "Fast Collapse" : "Slow Expand"}
+                </Button>
+                <Collapse in={expanded4} timeout={expanded4 ? 1000 : 300} easing={expanded4 ? "cubic-bezier(0.4, 0, 0.2, 1)" : "ease-out"}>
+                  <div>Custom transition content</div>
+                </Collapse>
+              </SistentThemeProvider>
+            </div>
+            <CodeBlock name="collapse-custom-transition" code={codes[3]} />
+          </div>
+        </div>
+      </section>
+    </SistentLayout>
+  );
+};
+
+export default CollapseComponent;