Skip to content

Commit ffa31a1

Browse files
Rajesh-Nagarajan-11Rajesh-Nagarajan-11
committed
guidance.js
Signed-off-by: Rajesh-Nagarajan-11 <rajeshnagarajan36@gmail.com>
1 parent b884209 commit ffa31a1

1 file changed

Lines changed: 142 additions & 0 deletions

File tree

  • src/sections/Projects/Sistent/components/list

‎src/sections/Projects/Sistent/components/list/guidance.js‎

Lines changed: 142 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,142 @@
1+
import React from "react";
2+
import { navigate } from "gatsby";
3+
import { useLocation } from "@reach/router";
4+
import { SistentLayout } from "../../sistent-layout";
5+
import TabButton from "../../../../../reusecore/Button";
6+
7+
const ListGuidance = () => {
8+
const location = useLocation();
9+
10+
return (
11+
<SistentLayout title="List">
12+
<div className="content">
13+
<a id="Identity">
14+
<h2>List</h2>
15+
</a>
16+
<p>
17+
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.
18+
</p>
19+
20+
<div className="filterBtns">
21+
<TabButton
22+
className={location.pathname === "/projects/sistent/components/list" ? "active" : ""}
23+
onClick={() => navigate("/projects/sistent/components/list")}
24+
title="Overview"
25+
/>
26+
<TabButton
27+
className={location.pathname === "/projects/sistent/components/list/guidance" ? "active" : ""}
28+
onClick={() => navigate("/projects/sistent/components/list/guidance")}
29+
title="Guidance"
30+
/>
31+
<TabButton
32+
className={location.pathname === "/projects/sistent/components/list/code" ? "active" : ""}
33+
onClick={() => navigate("/projects/sistent/components/list/code")}
34+
title="Code"
35+
/>
36+
</div>
37+
38+
<div className="main-content">
39+
<p>
40+
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.
41+
</p>
42+
43+
<a id="Usage Scenarios">
44+
<h2>Usage Scenarios</h2>
45+
</a>
46+
<ul>
47+
<li>Data Display : Present structured data like files, tasks, or messages using Lists.</li>
48+
<li>Navigational Menus : Combine List Items with Buttons or Links for intuitive menus.</li>
49+
<li>Interactive Content : Add action buttons to List Items for task management or settings. </li>
50+
</ul>
51+
52+
<a id="Design Guidelines">
53+
<h2>Design Guidelines</h2>
54+
</a>
55+
56+
<p>Consistency</p>
57+
<ul>
58+
<li>Maintain a uniform structure across all List Items.</li>
59+
<li>Use consistent padding and alignment for easy readability.</li>
60+
</ul>
61+
<p>Interactive Elements</p>
62+
<ul>
63+
<li>Use ListItemButton for click actions.</li>
64+
<li> Ensure hover states and focus indicators are visually prominent.</li>
65+
</ul>
66+
<p>Accessibility</p>
67+
<ul>
68+
<li>Provide descriptive labels for screen readers.</li>
69+
<li>Ensure all items are navigable via keyboard.</li>
70+
</ul>
71+
72+
<a id="General Guidelines">
73+
<h2>General Guidelines</h2>
74+
</a>
75+
76+
<p>1. Purpose & Context</p>
77+
<ul>
78+
<li>Clearly define the purpose of the List (e.g., data grouping, navigation, task management).</li>
79+
<li>Use Lists where a vertical layout enhances user understanding or accessibility.</li>
80+
</ul>
81+
<p>2. Spacing & Alignment</p>
82+
<ul>
83+
<li>Maintain consistent vertical spacing between items.</li>
84+
<li>Align text, icons, and avatars for a clean, organized appearance.</li>
85+
<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>
86+
</ul>
87+
<p>3. Interactive Design</p>
88+
<ul>
89+
<li>For interactive Lists, use actionable items like ListItemButton and ensure buttons or links have proper visual cues (hover/focus states).</li>
90+
<li>Add affordances like icons or colors to signify item state (e.g., completed, active, or disabled).</li>
91+
</ul>
92+
<p>4. Accessibility</p>
93+
<ul>
94+
<li>Label all List Items using aria-label or aria-labelledby attributes for screen readers.</li>
95+
<li>Ensure all interactive elements within a List are keyboard-navigable and have clear focus indicators.</li>
96+
</ul>
97+
98+
99+
<a id="Component-Specific Guidance">
100+
<h2>Component-Specific Guidance</h2>
101+
</a>
102+
<p>1. List</p>
103+
<ul>
104+
<li>Use the List component as a wrapper for items, ensuring adequate padding and structure.</li>
105+
<li>Keep Lists concise; avoid excessive scrolling by grouping items with ListSubheader.</li>
106+
</ul>
107+
<p>2. List Item</p>
108+
<ul>
109+
<li>Limit content to 1-2 lines of text for readability.</li>
110+
<li>Use secondary text sparingly to avoid visual clutter.</li>
111+
</ul>
112+
<p>3. List Item Button</p>
113+
<ul>
114+
<li>Ensure actionable buttons have a clear purpose, communicated via labels or icons.</li>
115+
<li>Avoid excessive buttons in a single List to prevent overwhelming users.</li>
116+
</ul>
117+
<p>4. List Item Icon</p>
118+
<ul>
119+
<li>Icons should be meaningful and contextually relevant (e.g., CheckIcon for completed tasks, NotificationsIcon for notifications).</li>
120+
<li>Align and size icons appropriately relative to the text.</li>
121+
</ul>
122+
<p>5. List Item Avatar</p>
123+
<ul>
124+
<li>Use avatars to represent users or entities visually</li>
125+
<li>Provide accessible alternatives (e.g., initials or placeholders) when images are unavailable.</li>
126+
</ul>
127+
<p>6. List Item Text</p>
128+
<ul>
129+
<li>Maintain a clear hierarchy between primaryText (main content) and secondaryText (supporting details).</li>
130+
<li>Ensure text is legible and does not dominate the layout.</li>
131+
</ul>
132+
<p>7. List Subheader</p>
133+
<ul>
134+
<li>Subheaders should describe the group of items succinctly.</li>
135+
<li>Avoid excessive nesting of subheaders to prevent user confusion.</li>
136+
</ul>
137+
</div>
138+
</div>
139+
</SistentLayout>
140+
);
141+
};
142+
export default ListGuidance;

0 commit comments

Comments
 (0)