Added List component to the sistent components page

src/sections/Pricing/feature_data.json

@@ -949,11 +949,11 @@
     "category": "Catalog",
     "functionOrder": "708",
     "function": "Approve Catalog Request",
-    "feature": "Change management for the curation of content published in the catalog.",
+    "feature": "Change management through a process of curation of content to be published in the catalog.",
     "subscription_tier": "Enterprise",
     "comparison_tiers": {
       "free": "",
-      "teamDesigner": "",
+      "teamDesigner": "x",
       "teamOperator": "",
       "enterprise": "x"
     },
@@ -1119,6 +1119,22 @@
     },
     "docs": "https://docs.layer5.io/cloud/getting-started/getting-started-with-layer5-account/#7-viewing-your-layer5-profile"
   },
+  {
+    "theme": "",
+    "categoryOrder": "9",
+    "category": "Managed Service Provider",
+    "functionOrder": "905",
+    "function": "Multi-tenancy",
+    "feature": "Hierarchical permissioning. Enforcement of tenancy.",
+    "subscription_tier": "",
+    "comparison_tiers": {
+      "free": "",
+      "teamDesigner": "",
+      "teamOperator": "",
+      "enterprise": ""
+    },
+    "docs": ""
+  },
   {
     "theme": "",
     "categoryOrder": "10",
@@ -1147,7 +1163,7 @@
       "free": "",
       "teamDesigner": "x",
       "teamOperator": "x",
-      "enterprise": "x"
+      "enterprise": ""
     },
     "docs": ""
   },

src/sections/Projects/Sistent/components/content.js

@@ -95,6 +95,14 @@ const componentsData = [
     url: "/projects/sistent/components/backdrop",
     src: "/backdrop",
   },
+  {
+    id: 13,
+    name: "List",
+    description:
+      "Lists are essential UI elements that allow items to be organized sequentially in a structured and readable way. They help users view, select, and interact with multiple items conveniently.",
+    url: "/projects/sistent/components/list",
+    src: "/list",
+  },
 ];
 
 module.exports = { componentsData };

src/sections/Projects/Sistent/components/index.js

@@ -9,7 +9,6 @@ import { FaArrowRight } from "@react-icons/all-files/fa/FaArrowRight";
 import { Link } from "gatsby";
 import { componentsData } from "./content";
 
-
 const SistentComponents = () => {
   const [searchQuery, setSearchQuery] = useState("");
   const { queryResults, searchData } = useDataList(

src/sections/Projects/Sistent/components/list/code-block.js

@@ -0,0 +1,20 @@
+import React, { useState } from "react";
+import Code from "../../../../../components/CodeBlock";
+
+export const CodeBlock = ({ name, code }) => {
+  const [showCode, setShowCode] = useState(false);
+  const onChange = () => {
+    setShowCode((prev) => !prev);
+  };
+  return (
+    <div className="show-code">
+      <input type="checkbox" name={name} id={name} onChange={onChange} />
+      <label htmlFor={name} className="label">
+        Show Code
+      </label>
+      {showCode && (
+        <Code codeString={code} language="javascript" />
+      )}
+    </div>
+  );
+};

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

@@ -0,0 +1,185 @@
+import React from "react";
+import { navigate } from "gatsby";
+import { useLocation } from "@reach/router";
+import { List, ListItemIcon, ListItemAvatar, ListItemText,ListItem,ListSubheader, ListItemButton, SistentThemeProvider, Divider } from "@layer5/sistent";
+import { CodeBlock } from "./code-block";
+import { SistentLayout } from "../../sistent-layout";
+import TabButton from "../../../../../reusecore/Button";
+import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode";
+
+const codes = [
+  // Basic List with List Items
+  `  <List>
+         <ListItem><ListItemText primary="Layer5 Sistent 1" /></ListItem> 
+         <ListItem><ListItemText primary="Layer5 Sistent 2" /></ListItem> 
+         <ListItem><ListItemText primary="Layer5 Sistent 3" /></ListItem> 
+  </List> `,
+  // List with Icons in List Items
+  `  <List>
+        <ListItem><ListItemIcon>🌟</ListItemIcon><ListItemText primary="Layer5 Sistent Starred" /></ListItem>
+        <ListItem><ListItemIcon>📅</ListItemIcon><ListItemText primary="Layer5 Sistent Calender" /></ListItem>
+        <ListItem><ListItemIcon>🔔</ListItemIcon><ListItemText primary="Layer5 Sistent Notification" /></ListItem>
+  </List> `,
+  // List with Avatars
+  `  <List>
+        <ListItem><ListItemAvatar>👤</ListItemAvatar><ListItemText primary="Layer5 Sistent User 1" /></ListItem>
+        <ListItem><ListItemAvatar>👩‍💻</ListItemAvatar><ListItemText primary="Layer5 Sistent User 2" /></ListItem>
+        <ListItem><ListItemAvatar>👤</ListItemAvatar><ListItemText primary="Layer5 Sistent User 3" /></ListItem>
+  </List> `,
+  // List with Subheader
+  `  <List>
+        <ListSubheader>Section 1</ListSubheader>
+        <ListItem><ListItemText primary="Layer5 Sistent A" /></ListItem>
+        <ListItem><ListItemText primary="Layer5 Sistent B" /></ListItem>      
+        <ListSubheader>Section 2</ListSubheader>
+        <ListItem><ListItemText primary="Layer5 Sistent C" /></ListItem>
+        <ListItem><ListItemText primary="Layer5 Sistent D" /></ListItem>
+  </List> `,
+  // List with Action Buttons
+  `  <List>
+        <ListItemButton onClick={() => alert("Clicked!")}> Layer5 Sistent Action 1</ListItemButton>
+        <ListItemButton onClick={() => alert("Clicked!")}>Layer5 Sistent Action 2</ListItemButton>
+  </List> `,
+];
+
+const ListCode = () => {
+  const location = useLocation();
+  const { isDark } = useStyledDarkMode();
+
+  return (
+    <SistentLayout title="List">
+      <div className="content">
+        <a id="Identity"><h2>List</h2></a>
+        <p>
+          The List component displays a list of items in a structured and
+          accessible manner. Variants include simple lists, lists with icons,
+          lists with avatars, and lists with action buttons.
+        </p>
+
+        <div className="filterBtns">
+          <TabButton
+            className={location.pathname === "/projects/sistent/components/list" ? "active" : ""}
+            onClick={() => navigate("/projects/sistent/components/list")}
+            title="Overview"
+          />
+          <TabButton
+            className={location.pathname === "/projects/sistent/components/list/guidance" ? "active" : ""}
+            onClick={() => navigate("/projects/sistent/components/list/guidance")}
+            title="Guidance"
+          />
+          <TabButton
+            className={location.pathname === "/projects/sistent/components/list/code" ? "active" : ""}
+            onClick={() => navigate("/projects/sistent/components/list/code")}
+            title="Code"
+          />
+        </div>
+        <div className="main-content">
+          {/* Simple List */}
+          <a id="Simple List"><h3>Simple List</h3></a>
+          <p>This is a basic list with plain text items.</p>
+          <div className="showcase">
+            <div className="items">
+
+              <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
+                <List>
+                  <ListItem><ListItemText primary="Layer5 Sistent Item 1" /></ListItem>
+                  <ListItem><ListItemText primary="Layer5 Sistent Item 2" /></ListItem>
+                  <ListItem><ListItemText primary="Layer5 Sistent Item 3" /></ListItem>
+                </List>
+              </SistentThemeProvider>
+
+            </div>
+            <CodeBlock name="simple-list" code={codes[0]} />
+          </div>
+
+          {/* List with Icons */}
+          <a id="List With Icons"><h3>List with Icons</h3></a>
+          <p>List items can be paired with icons to add visual cues.</p>
+          <div className="showcase">
+            <div className="items">
+              <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
+                <List>
+                  <ListItem>
+                    <ListItemIcon>🌟</ListItemIcon>
+                    <ListItemText primary="Layer5 Sistent Starred" />
+                  </ListItem>
+                  <ListItem>
+                    <ListItemIcon>📅</ListItemIcon>
+                    <ListItemText primary="Layer5 Sistent Calendar" />
+                  </ListItem>
+                  <ListItem>
+                    <ListItemIcon>🔔</ListItemIcon>
+                    <ListItemText primary="Layer5 Sistent Notification" />
+                  </ListItem>
+                </List>
+              </SistentThemeProvider>
+            </div>
+            <CodeBlock name="icon-list" code={codes[1]} />
+          </div>
+
+          {/* List with Avatars */}
+          <a id="List With Avatars"><h3>List with Avatars</h3></a>
+          <p>Use avatars for list items representing people or entities.</p>
+          <div className="showcase">
+            <div className="items">
+              <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
+                <List>
+                  <ListItem><ListItemAvatar>👤</ListItemAvatar><ListItemText primary="Layer5 Sistent User 1" /></ListItem>
+                  <ListItem><ListItemAvatar>👩‍💻</ListItemAvatar><ListItemText primary="Layer5 Sistent User 2" /></ListItem>
+                  <ListItem><ListItemAvatar>👩‍💻</ListItemAvatar><ListItemText primary="Layer5 Sistent User 3" /></ListItem>
+                </List>
+              </SistentThemeProvider>
+            </div>
+            <CodeBlock name="avatar-list" code={codes[2]} />
+          </div>
+
+          {/* List with Subheader */}
+          <a id="List With Subheader"><h3>List with Subheader</h3></a>
+          <p>Organize list items under different subheaders for better grouping.</p>
+          <div className="showcase">
+            <div className="items">
+              <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
+                <List>
+                  <ListSubheader>Section 1</ListSubheader>
+                  <ListItem>
+                    <ListItemText primary="Layer5 Sistent Item A" />
+                  </ListItem>
+                  <ListItem>
+                    <ListItemText primary="Layer5 Sistent Item B" />
+                  </ListItem>
+                  <Divider />
+                  <ListSubheader>Section 2</ListSubheader>
+                  <ListItem>
+                    <ListItemText primary="Layer5 Sistent Item C" />
+                  </ListItem>
+                  <ListItem>
+                    <ListItemText primary="Layer5 Sistent Item D" />
+                  </ListItem>
+                </List>
+              </SistentThemeProvider>
+            </div>
+            <CodeBlock name="subheader-list" code={codes[3]} />
+          </div>
+
+          {/* List with Action Buttons */}
+          <a id="List With ActionButtons"><h3>List with Action Buttons</h3></a>
+          <p>Lists can also have action buttons for added interactivity.</p>
+          <div className="showcase">
+            <div className="items">
+              <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
+                <List>
+                  {/* <ListItem text="Action Item 1" secondaryAction={<button>Action</button>} />
+                  <ListItem text="Action Item 2" secondaryAction={<button>More</button>} /> */}
+                  <ListItemButton onClick={() => alert("Layer5 List Item 1 Button Clicked!")}> Layer5 Sistent Action Item 1</ListItemButton>
+                  <ListItemButton onClick={() => alert("Layer5 List Item 2 Button Clicked!")}>Layer5 Sistent Action Item 2</ListItemButton>
+                </List>
+              </SistentThemeProvider>
+            </div>
+            <CodeBlock name="button-list" code={codes[4]} />
+          </div>
+        </div>
+      </div>
+    </SistentLayout>
+  );
+};
+export default ListCode;