Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added the List component to the sistent components page and updated the content.js file. #6219

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
+656 −0
Open

Added the List component to the sistent components page and updated the content.js file. #6219

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 9 additions & 0 deletions src/sections/Projects/Sistent/components/content.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -111,6 +111,15 @@ const componentsData = [
url: "/projects/sistent/components/pagination",
src: "/pagination",
},
{
id: 15,
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 };
20 changes: 20 additions & 0 deletions src/sections/Projects/Sistent/components/list/code-block.js
View file
Open in desktop
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not require to create a separate file for code-block.js you can directly import, so delete this file

Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
import React, { useState } from "react";
import Code from "../../../../../components/CodeBlock";

export const CodeBlock = ({ name, code }) => {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

use existing codeblock and don't create a new one please

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>
);
};
274 changes: 274 additions & 0 deletions src/sections/Projects/Sistent/components/list/code.js
View file
Open in desktop
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can you include example for the List controls like checkbox?

Original file line number Diff line number Diff line change
@@ -0,0 +1,274 @@
import React, { useState } 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";
import ExpandLess from "@mui/icons-material/ExpandLess";
import ExpandMore from "@mui/icons-material/ExpandMore";
import Collapse from "@mui/material/Collapse";

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> `,
// Nested List Example
` <List sx={{ width: "100%", maxWidth: 360, padding: 2, bgcolor: "background.paper",}} component="nav" >
<ListSubheader component="div" id="nested-list-subheader"> Layer5 Main Section </ListSubheader>
<ListItemButton onClick={toggleOpen1}>
<ListItemText primary="Layer5 Main Item 1" />
{open1 ? <ExpandLess /> : <ExpandMore />}
</ListItemButton>
<Collapse in={open1} timeout="auto" unmountOnExit>
<List component="div" disablePadding sx={{ pl: 4 }}>
<ListItem> <ListItemText primary="Layer5 Sub Item 1.1" /></ListItem>
<ListItem> <ListItemText primary="Layer5 Sub Item 1.2" /></ListItem>
</List>
</Collapse>

<ListItemButton onClick={toggleOpen2}>
<ListItemText primary="Layer5 Main Item 2" />
{open2 ? <ExpandLess /> : <ExpandMore />}
</ListItemButton>
<Collapse in={open2} timeout="auto" unmountOnExit>
<List component="div" disablePadding sx={{ pl: 4 }}>
<ListItem><ListItemText primary="Layer5 Sub Item 2.1" /></ListItem>
<ListItem><ListItemText primary="Layer5 Sub Item 2.2" /></ListItem>
</List>
</Collapse>
</List> `,
];

const ListCode = () => {
const location = useLocation();
const { isDark } = useStyledDarkMode();
const [open1, setOpen1] = useState(false);
const [open2, setOpen2] = useState(false);

const toggleOpen1 = () => setOpen1((prev) => !prev);
const toggleOpen2 = () => setOpen2((prev) => !prev);

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>

{/* List with Nested Items */}
<a id="Nested List"><h3>List with Nested Items</h3></a>
<p>Lists can also be nested to represent hierarchical structures.</p>
<div className="showcase">
<div className="items">
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
<List
sx={{
width: "100%",
maxWidth: 360,
padding: 2,
bgcolor: "background.paper",
}}
component="nav"
>
<ListSubheader component="div" id="nested-list-subheader">
Layer5 Main Section
</ListSubheader>

{/* Main Item 1 with Nested Items */}
<ListItemButton onClick={toggleOpen1}>
<ListItemText primary="Layer5 Main Item 1" />
{open1 ? <ExpandLess /> : <ExpandMore />}
</ListItemButton>
<Collapse in={open1} timeout="auto" unmountOnExit>
<List component="div" disablePadding sx={{ pl: 4 }}>
<ListItem>
<ListItemText primary="Layer5 Sub Item 1.1" />
</ListItem>
<ListItem>
<ListItemText primary="Layer5 Sub Item 1.2" />
</ListItem>
</List>
</Collapse>

{/* Main Item 2 with Nested Items */}
<ListItemButton onClick={toggleOpen2}>
<ListItemText primary="Layer5 Main Item 2" />
{open2 ? <ExpandLess /> : <ExpandMore />}
</ListItemButton>
<Collapse in={open2} timeout="auto" unmountOnExit>
<List component="div" disablePadding sx={{ pl: 4 }}>
<ListItem>
<ListItemText primary="Layer5 Sub Item 2.1" />
</ListItem>
<ListItem>
<ListItemText primary="Layer5 Sub Item 2.2" />
</ListItem>
</List>
</Collapse>
</List>
</SistentThemeProvider>
</div>
<CodeBlock name="nested-list" code={codes[5]} />
</div>
</div>
</div>
</SistentLayout>
);
};
export default ListCode;
Loading