Added List component to the sistent components page #6086
+2,024
−33
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -959,38 +959,6 @@ | |
| }, | ||
| "docs": "https://docs.layer5.io/cloud/catalog/" | ||
| }, | ||
| { | ||
| "theme": "", | ||
| "categoryOrder": "", | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> | ||
|
There was a problem hiding this comment. @csengineer1990 If you could provide a nested list code example, here is example link There was a problem hiding this comment. Should I add the nested list code example only in the code.js file, or should I also include it in the overview section to explain the concept of nested lists? |
||
| <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; | ||
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
their is a
aand unwanted indentation under the code section of the list It appears to be unpleasant.There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
ok, sir.