Skip to content

Commit

Permalink
Added List component to the sistent components page with required cha…
Browse files Browse the repository at this point in the history 
…nges

Signed-off-by: Roshan Goswami <[email protected]>
  • Loading branch information
@csengineer1990
csengineer1990 committed Dec 19, 2024
1 parent 7bca8c5 commit cc194c9
Show file tree
Hide file tree
Showing 5 changed files with 572 additions and 0 deletions.
1 change: 1 addition & 0 deletions src/sections/Projects/Sistent/components/content.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -101,6 +101,7 @@ const componentsData = [
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",
},
];

Expand Down
20 changes: 20 additions & 0 deletions src/sections/Projects/Sistent/components/list/code-block.js
View 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 }) => {
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>
);
};
199 changes: 199 additions & 0 deletions src/sections/Projects/Sistent/components/list/code.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,199 @@
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
` <SistentThemeProvider>
<List>
<ListItem><ListItemText primary="Layer5 Sistent 1" /></ListItem>
<ListItem><ListItemText primary="Layer5 Sistent 2" /></ListItem>
<ListItem><ListItemText primary="Layer5 Sistent 3" /></ListItem>
</List>
</SistentThemeProvider>`,

// List with Icons in List Items
` <SistentThemeProvider>
<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>
</SistentThemeProvider>`,

// List with Avatars
` <SistentThemeProvider>
<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>`,

// List with Subheader
` <SistentThemeProvider>
<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>
</SistentThemeProvider>`,

// List with Action Buttons
` <SistentThemeProvider>
<List>
<ListItemButton onClick={() => alert("Clicked!")}> Layer5 Sistent Action 1</ListItemButton>
<ListItemButton onClick={() => alert("Clicked!")}>Layer5 Sistent Action 2</ListItemButton>
</List>
</SistentThemeProvider>`,
];

const ListCode = () => {
const location = useLocation();
const { isDark } = useStyledDarkMode();

return (
<SistentLayout title="List">
<div className="content">
<a id="Identity"><h2>List</h2></a>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;
142 changes: 142 additions & 0 deletions src/sections/Projects/Sistent/components/list/guidance.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,142 @@
import React from "react";
import { navigate } from "gatsby";
import { useLocation } from "@reach/router";
import { SistentLayout } from "../../sistent-layout";
import TabButton from "../../../../../reusecore/Button";

const ListGuidance = () => {
const location = useLocation();

return (
<SistentLayout title="List">
<div className="content">
<a id="Identity">
<h2>List</h2>
</a>
<p>
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.
</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">
<p>
Lists can be used for various purposes, including displaying items, navigational menus, or highlighting features. The List component provides a flexible container for organizing related items in a vertical layout. It can be customized to display items with icons, buttons, avatars, and other interactive elements. This component is essential for organizing content in a structured, accessible format.
</p>

<a id="Usage Scenarios">
<h2>Usage Scenarios</h2>
</a>
<ul>
<li>Data Display : Present structured data like files, tasks, or messages using Lists.</li>
<li>Navigational Menus : Combine List Items with Buttons or Links for intuitive menus.</li>
<li>Interactive Content : Add action buttons to List Items for task management or settings. </li>
</ul>

<a id="Design Guidelines">
<h2>Design Guidelines</h2>
</a>

<p>Consistency</p>
<ul>
<li>Maintain a uniform structure across all List Items.</li>
<li>Use consistent padding and alignment for easy readability.</li>
</ul>
<p>Interactive Elements</p>
<ul>
<li>Use ListItemButton for click actions.</li>
<li> Ensure hover states and focus indicators are visually prominent.</li>
</ul>
<p>Accessibility</p>
<ul>
<li>Provide descriptive labels for screen readers.</li>
<li>Ensure all items are navigable via keyboard.</li>
</ul>

<a id="General Guidelines">
<h2>General Guidelines</h2>
</a>

<p>1. Purpose & Context</p>
<ul>
<li>Clearly define the purpose of the List (e.g., data grouping, navigation, task management).</li>
<li>Use Lists where a vertical layout enhances user understanding or accessibility.</li>
</ul>
<p>2. Spacing & Alignment</p>
<ul>
<li>Maintain consistent vertical spacing between items.</li>
<li>Align text, icons, and avatars for a clean, organized appearance.</li>
<li>Consistent spacing and alignment ensure list items are visually pleasing and easy to scan. Items should be aligned to the left, with adequate padding between elements.</li>
</ul>
<p>3. Interactive Design</p>
<ul>
<li>For interactive Lists, use actionable items like ListItemButton and ensure buttons or links have proper visual cues (hover/focus states).</li>
<li>Add affordances like icons or colors to signify item state (e.g., completed, active, or disabled).</li>
</ul>
<p>4. Accessibility</p>
<ul>
<li>Label all List Items using aria-label or aria-labelledby attributes for screen readers.</li>
<li>Ensure all interactive elements within a List are keyboard-navigable and have clear focus indicators.</li>
</ul>


<a id="Component-Specific Guidance">
<h2>Component-Specific Guidance</h2>
</a>
<p>1. List</p>
<ul>
<li>Use the List component as a wrapper for items, ensuring adequate padding and structure.</li>
<li>Keep Lists concise; avoid excessive scrolling by grouping items with ListSubheader.</li>
</ul>
<p>2. List Item</p>
<ul>
<li>Limit content to 1-2 lines of text for readability.</li>
<li>Use secondary text sparingly to avoid visual clutter.</li>
</ul>
<p>3. List Item Button</p>
<ul>
<li>Ensure actionable buttons have a clear purpose, communicated via labels or icons.</li>
<li>Avoid excessive buttons in a single List to prevent overwhelming users.</li>
</ul>
<p>4. List Item Icon</p>
<ul>
<li>Icons should be meaningful and contextually relevant (e.g., ✅ for completed tasks, 🔔 for notifications).</li>
<li>Align and size icons appropriately relative to the text.</li>
</ul>
<p>5. List Item Avatar</p>
<ul>
<li>Use avatars to represent users or entities visually</li>
<li>Provide accessible alternatives (e.g., initials or placeholders) when images are unavailable.</li>
</ul>
<p>6. List Item Text</p>
<ul>
<li>Maintain a clear hierarchy between primaryText (main content) and secondaryText (supporting details).</li>
<li>Ensure text is legible and does not dominate the layout.</li>
</ul>
<p>7. List Subheader</p>
<ul>
<li>Subheaders should describe the group of items succinctly.</li>
<li>Avoid excessive nesting of subheaders to prevent user confusion.</li>
</ul>
</div>
</div>
</SistentLayout>
);
};
export default ListGuidance;
Loading

0 comments on commit cc194c9

Please sign in to comment.