From 96771e4746fca906a6613dd45d63ef262d02bcc0 Mon Sep 17 00:00:00 2001 From: Roshan Goswami Date: Wed, 20 Nov 2024 13:29:52 +0530 Subject: [PATCH] Added List component to the sistent components page Signed-off-by: Roshan Goswami --- .../projects/sistent/components/list/code.js | 8 + .../sistent/components/list/guidance.js | 7 + .../projects/sistent/components/list/index.js | 6 + .../Projects/Sistent/components/index.js | 7 + .../Sistent/components/list/code-block.js | 21 ++ .../Projects/Sistent/components/list/code.js | 205 +++++++++++ .../Sistent/components/list/guidance.js | 335 ++++++++++++++++++ .../Projects/Sistent/components/list/index.js | 205 +++++++++++ 8 files changed, 794 insertions(+) create mode 100644 src/pages/projects/sistent/components/list/code.js create mode 100644 src/pages/projects/sistent/components/list/guidance.js create mode 100644 src/pages/projects/sistent/components/list/index.js create mode 100644 src/sections/Projects/Sistent/components/list/code-block.js create mode 100644 src/sections/Projects/Sistent/components/list/code.js create mode 100644 src/sections/Projects/Sistent/components/list/guidance.js create mode 100644 src/sections/Projects/Sistent/components/list/index.js diff --git a/src/pages/projects/sistent/components/list/code.js b/src/pages/projects/sistent/components/list/code.js new file mode 100644 index 000000000000..2e687c01408f --- /dev/null +++ b/src/pages/projects/sistent/components/list/code.js @@ -0,0 +1,8 @@ +import React from "react"; +import { ListCode } from "../../../../../sections/Projects/Sistent/components/list/code"; + +const ListCodePage = () => { + return ; +}; + +export default ListCodePage; diff --git a/src/pages/projects/sistent/components/list/guidance.js b/src/pages/projects/sistent/components/list/guidance.js new file mode 100644 index 000000000000..ad55c97baa0b --- /dev/null +++ b/src/pages/projects/sistent/components/list/guidance.js @@ -0,0 +1,7 @@ +import React from "react"; +import { ListGuidance } from "../../../../../sections/Projects/Sistent/components/list/guidance"; + +const ListGuidancePage = () => { + return ; +}; +export default ListGuidancePage; \ No newline at end of file diff --git a/src/pages/projects/sistent/components/list/index.js b/src/pages/projects/sistent/components/list/index.js new file mode 100644 index 000000000000..756a1910554a --- /dev/null +++ b/src/pages/projects/sistent/components/list/index.js @@ -0,0 +1,6 @@ +import React from "react"; +import SistentList from "../../../../../sections/Projects/Sistent/components/list"; +const SistentListPage = () => { + return ; +}; +export default SistentListPage; \ No newline at end of file diff --git a/src/sections/Projects/Sistent/components/index.js b/src/sections/Projects/Sistent/components/index.js index 749fb2c5e34e..9cd4424e246b 100644 --- a/src/sections/Projects/Sistent/components/index.js +++ b/src/sections/Projects/Sistent/components/index.js @@ -72,6 +72,13 @@ const componentsData = [ "ButtonGroup is a component that groups multiple buttons together.", url: "/projects/sistent/components/button-group", }, + { + id: 10, + 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", + }, ]; const SistentComponents = () => { diff --git a/src/sections/Projects/Sistent/components/list/code-block.js b/src/sections/Projects/Sistent/components/list/code-block.js new file mode 100644 index 000000000000..901a5d9c4748 --- /dev/null +++ b/src/sections/Projects/Sistent/components/list/code-block.js @@ -0,0 +1,21 @@ +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 ( +
+ + + {showCode && ( + + )} +
+ ); +}; \ No newline at end of file diff --git a/src/sections/Projects/Sistent/components/list/code.js b/src/sections/Projects/Sistent/components/list/code.js new file mode 100644 index 000000000000..de3faadd9bb6 --- /dev/null +++ b/src/sections/Projects/Sistent/components/list/code.js @@ -0,0 +1,205 @@ +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 { FaArrowRight,FaUser, FaFolder, FaFile } from "react-icons/fa"; +import TabButton from "../../../../../reusecore/Button"; +import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode"; + +const codes = [ + // Basic List with List Items + ` + + + + + + `, + + // List with Icons in List Items + ` + + 🌟 + 📅 + 🔔 + + `, + + // List with Avatars + ` + + 👤 + 👩‍💻 + 👤 + + `, + + // List with Subheader + ` + + Section 1 + + + Section 2 + + + + `, + + // List with Action Buttons + ` + + alert("Clicked!")}> Layer5 Sistent Action 1 + alert("Clicked!")}>Layer5 Sistent Action 2 + + `, +]; + +export const ListCode = () => { + const location = useLocation(); + const { isDark } = useStyledDarkMode(); + + return ( + +
+

List

 +

+ 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. +

+ +
+ navigate("/projects/sistent/components/list")} + title="Overview" + /> + navigate("/projects/sistent/components/list/guidance")} + title="Guidance" + /> + navigate("/projects/sistent/components/list/code")} + title="Code" + /> +
+
+ {/* Simple List */} +

Simple List

 +

This is a basic list with plain text items.

+
+
+ + + + + + + + + +
+ +
+ + {/* List with Icons */} +

List with Icons

 +

List items can be paired with icons to add visual cues.

+
+
+ + + {/* } primaryText="Document" /> + } primaryText="Folder" /> + } primaryText="Profile" /> */} + + 🌟 + + + + 📅 + + + + 🔔 + + + + +
+ +
+ + {/* List with Avatars */} +

List with Avatars

 +

Use avatars for list items representing people or entities.

+
+
+ + + {/* + + */} + 👤 + 👩‍💻 + 👩‍💻 + + +
+ +
+ + {/* List with Subheader */} +

List with Subheader

 +

Organize list items under different subheaders for better grouping.

+
+
+ + + Section 1 + + + + + + + + Section 2 + + + + + + + + +
+ +
+ + {/* List with Action Buttons */} +

List with Action Buttons

 +

Lists can also have action buttons for added interactivity.

+
+
+ + + {/* Action} /> + More} /> */} + alert("Clicked!")}> Layer5 Sistent Action Item 1 + alert("Clicked!")}>Layer5 Sistent Action Item 2 + + +
+ +
+
+
+ + ); +}; \ No newline at end of file diff --git a/src/sections/Projects/Sistent/components/list/guidance.js b/src/sections/Projects/Sistent/components/list/guidance.js new file mode 100644 index 000000000000..ccf870740acb --- /dev/null +++ b/src/sections/Projects/Sistent/components/list/guidance.js @@ -0,0 +1,335 @@ +import React from "react"; +import { navigate } from "gatsby"; +import { useLocation } from "@reach/router"; +//import { Row } from "../../../../../reusecore/Layout"; +//import { List, ListItemText,ListItem,SistentThemeProvider } from "@layer5/sistent"; +import { SistentLayout } from "../../sistent-layout"; + +import TabButton from "../../../../../reusecore/Button"; +//import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode"; + + +export const ListGuidance = () => { + const location = useLocation(); + //const { isDark } = useStyledDarkMode(); + + return ( + +
+ +

List

+ +

+ 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. +

+ +
+ navigate("/projects/sistent/components/list")} + title="Overview" + /> + navigate("/projects/sistent/components/list/guidance")} + title="Guidance" + /> + navigate("/projects/sistent/components/list/code")} + title="Code" + /> +
+ +
+

+ 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. +

+ + +

Usage Scenarios

+ +
    +
  • Data Display : Present structured data like files, tasks, or messages using Lists.
    • +
  • Navigational Menus : Combine List Items with Buttons or Links for intuitive menus.
    • +
  • Interactive Content : Add action buttons to List Items for task management or settings.
    • +
+ + +

Design Guidelines

+ + +

Consistency

+
    +
  • Maintain a uniform structure across all List Items.
    • +
  • Use consistent padding and alignment for easy readability.
    • +
+

Interactive Elements

+
    +
  • Use ListItemButton for click actions.
    • +
  • Ensure hover states and focus indicators are visually prominent.
    • +
+

Accessibility

+
    +
  • Provide descriptive labels for screen readers.
    • +
  • Ensure all items are navigable via keyboard.
    • +
+ + +

General Guidelines

+ + +

1. Purpose & Context

+
    +
  • Clearly define the purpose of the List (e.g., data grouping, navigation, task management).
    • +
  • Use Lists where a vertical layout enhances user understanding or accessibility.
    • +
+

2. Spacing & Alignment

+
    +
  • Maintain consistent vertical spacing between items.
    • +
  • Align text, icons, and avatars for a clean, organized appearance.
    • +
  • 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.
    • +
+

3. Interactive Design

+
    +
  • For interactive Lists, use actionable items like ListItemButton and ensure buttons or links have proper visual cues (hover/focus states).
    • +
  • Add affordances like icons or colors to signify item state (e.g., completed, active, or disabled).
    • +
+

4. Accessibility

+
    +
  • Label all List Items using aria-label or aria-labelledby attributes for screen readers.
    • +
  • Ensure all interactive elements within a List are keyboard-navigable and have clear focus indicators.
    • +
+ + + +

Component-Specific Guidance

+ +

1. List

+
    +
  • Use the List component as a wrapper for items, ensuring adequate padding and structure.
    • +
  • Keep Lists concise; avoid excessive scrolling by grouping items with ListSubheader.
    • +
+

2. List Item

+
    +
  • Limit content to 1-2 lines of text for readability.
    • +
  • Use secondary text sparingly to avoid visual clutter.
    • +
+

3. List Item Button

+
    +
  • Ensure actionable buttons have a clear purpose, communicated via labels or icons.
    • +
  • Avoid excessive buttons in a single List to prevent overwhelming users.
    • +
+

4. List Item Icon

+
    +
  • Icons should be meaningful and contextually relevant (e.g., ✅ for completed tasks, 🔔 for notifications).
    • +
  • Align and size icons appropriately relative to the text.
    • +
+

5. List Item Avatar

+
    +
  • Use avatars to represent users or entities visually
    • +
  • Provide accessible alternatives (e.g., initials or placeholders) when images are unavailable.
    • +
+

6. List Item Text

+
    +
  • Maintain a clear hierarchy between primaryText (main content) and secondaryText (supporting details).
    • +
  • Ensure text is legible and does not dominate the layout.
    • +
+

7. List Subheader

+
    +
  • Subheaders should describe the group of items succinctly.
    • +
  • Avoid excessive nesting of subheaders to prevent user confusion.
    • +
+
+
+ + ); +}; +/*export const ButtonGuidance = () => { + const location = useLocation(); + const { isDark } = useStyledDarkMode(); + + return ( + +
+ +

Button

+ +

+ A button is an interactive element that triggers a specific action, + takes users where they need to go, and points out what happens next in + a given flow. +

+
+ navigate("/projects/sistent/components/button")} + title="Overview" + /> + + navigate("/projects/sistent/components/button/guidance") + } + title="Guidance" + /> + navigate("/projects/sistent/components/button/code")} + title="Code" + /> +
+
+

+ For proper application, these buttons can be used for different + purposes to enable easier and consistent combination when guiding + users across digital experiences. +

+ +

Function

+ +

+ The function of different buttons is what determines its usage and + how well suited it is to be applied in a given scenario to solve an + existing problem or complete a pending task. Functions or roles that + can be assigned to buttons in a particular design include: +

+

Primary Button

+

+ Primary buttons are used for the most important actions on a page. + It should be the key button that helps the user navigate in a given + flow or while trying to perform a specific action. This could apply + in cases like when the user needs to submit a from, proceed to a new + page, or complete an action. The filled button serves as the primary + button. +

+ + +
+
+ + ); +}; +*/ \ No newline at end of file diff --git a/src/sections/Projects/Sistent/components/list/index.js b/src/sections/Projects/Sistent/components/list/index.js new file mode 100644 index 000000000000..2ec57257a8fd --- /dev/null +++ b/src/sections/Projects/Sistent/components/list/index.js @@ -0,0 +1,205 @@ +import React from "react"; +import { navigate } from "gatsby"; +import { useLocation } from "@reach/router"; + +import { SistentThemeProvider, List, ListItem, ListItemText, ListSubheader,ListItemButton, ListItemIcon, ListItemAvatar, Divider } from "@layer5/sistent"; +import TabButton from "../../../../../reusecore/Button"; +import { SistentLayout } from "../../sistent-layout"; +import { Row } from "../../../../../reusecore/Layout"; +import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode"; + +const SistentList = () => { + const location = useLocation(); + const { isDark } = useStyledDarkMode(); + + return ( + +
+ +

List

+ +

+ 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. +

+
+ navigate("/projects/sistent/components/list")} + title="Overview" + /> + navigate("/projects/sistent/components/list/guidance")} + title="Guidance" + /> + navigate("/projects/sistent/components/list/code")} + title="Code" + /> +
+
+ + +

The List component is a flexible and structured container for organizing content in vertical layouts. It supports various child components, such as List Items, Icons, Avatars, Buttons, and Subheaders, making it ideal for creating navigational menus, data displays, or interactive content groups.

+

+ The List component is designed to: +

+
    +
  • Organize Content: Provides a structured vertical layout for related items.
    • +
  • Interactive Elements: Add actionable buttons and components to enhance user interaction.
    • +
  • Customizable Design: Offers size variations, dense modes, and alignment options.
    • +
  • Accessibility: Ensures keyboard navigation and visual feedback for enhanced usability.
    • +
+

+ Components Overview: +

+ +
    +
  • List Item: Represents an individual item within the list.
    • +
  • List Item Button: A clickable button within a list item.
    • +
  • List Item Icon: Displays an icon associated with a list item.
    • +
  • List Item Avatar: Adds an avatar for visual representation within the list item.
    • +
  • List Item Text: Contains the primary and secondary text within a list item.
    • +
  • List Subheader: Provides a labeled header for grouping related list items.
    • + +
+

Types of List component

+

1. List

+

The base container for organizing related content in vertical layouts.

+

Basic Usage:

+ + + + + + + + + + + + + + + + + + +

2. List Item

+

+ Represents an individual entry in a list. Includes primary and optional secondary text. +

+ + + + + + + + + + + + + +

3. List Item Button

+

+ Adds interactivity to list items, making them actionable. +

+ + + + alert("Clicked!")}> + Layer5 Sistent Action Item 1 + + alert("Clicked!")}> + Layer5 Sistent Action Item2 + + + + + + +

4. List with Icons

+

+ Icons can be added to list items to enhance visual interest and provide additional meaning for each item. Enhances list items with visual elements for better context. +

+ + + + + 🌟 + + + + 📅 + + + + 🔔 + + + + ✅ + + + + ❌ + + + + + + +

List with Avatars

+

+ Avatars can be added to list items, which is particularly useful for representing people or items visually. Visually represents items with avatars for a user-friendly interface. +

+ + + + + 👤 + + + + 👩‍💻 + + + + + + +

6. List Subheader

+

+ Subheaders provide a way to label groups within a list, adding clarity and helping users navigate content. Groups and labels items within a list for better navigation and organization. +

+ + + + Section 1 + + + + + + + + Section 2 + + + + + + + + + +
+
+ + ); +}; +export default SistentList; +