= () => {
+ return (
+
+ {complexEventsData.map(({ title, time }, _index) => (
+
+
+
+
+ {title}
+
+ {time}
+
+
+
+
+ {_index < complexEventsData.length - 1 && (
+
+ )}
+
+ ))}
+
+ );
+};
diff --git a/site/docs/components/static-list/accessibility.mdx b/site/docs/components/static-list/accessibility.mdx
new file mode 100644
index 0000000000..30ecb0de36
--- /dev/null
+++ b/site/docs/components/static-list/accessibility.mdx
@@ -0,0 +1,23 @@
+---
+title:
+ $ref: ./#/title
+layout: DetailComponent
+sidebar:
+ exclude: true
+data:
+ $ref: ./#/data
+---
+
+## Best practices
+
+You must check and test any focusable elements inside the static list content accordingly.
+
+## Keyboard interactions
+
+
+
+
+This action navigates through the interactive elements within the static list.
+
+
+
diff --git a/site/docs/components/static-list/examples.mdx b/site/docs/components/static-list/examples.mdx
new file mode 100644
index 0000000000..04308d4e7f
--- /dev/null
+++ b/site/docs/components/static-list/examples.mdx
@@ -0,0 +1,62 @@
+---
+title:
+ $ref: ./#/title
+layout: DetailComponent
+sidebar:
+ exclude: true
+data:
+ $ref: ./#/data
+---
+
+
+
+
+
+## Default
+
+The default `Static list` allows users to show non-interactive list items.
+
+
+
+
+
+## Complex label
+
+For complex labels, you can add additional elements to provide further context or descriptions for each list item.
+
+**Note:** To ensure correct spacing when using buttons or icons, wrap your static content inside `StaticListItemContent`.
+
+
+
+
+
+## With icons
+
+[`Icons`](/salt/components/icon) can be used to help users quickly identify the related contents inside the `StaticListItem`.
+
+### Best practices
+
+- Icons should be displayed before labels.
+- Use icons consistently across all static list items within the same group.
+
+
+
+
+
+## With buttons
+
+You can use [`Button`](/salt/components/button) to add actions to the `StaticListItem`s.
+
+**Note:** Buttons should be associated to the list item content using `aria-label` or `aria-labelledby`.
+
+
+
+
+
+## With dividers
+
+You can separate the list of `StaticListItem`s by adding a [`Divider`](../divider) component between items.
+
+
+
+
diff --git a/site/docs/components/static-list/index.mdx b/site/docs/components/static-list/index.mdx
new file mode 100644
index 0000000000..b8e1ed02a2
--- /dev/null
+++ b/site/docs/components/static-list/index.mdx
@@ -0,0 +1,13 @@
+---
+title: Static list
+data:
+ description: "`StaticList` manages the layout of non-interactive list items, providing a structured and composable way to display content. It's ideal for use in patterns like file upload or checkout baskets."
+ sourceCodeUrl: "https://github.com/jpmorganchase/salt-ds/blob/main/packages/lab/src/static-list"
+ package:
+ name: "@salt-ds/lab"
+ initialVersion: "1.0.0-alpha.48"
+ alsoKnownAs: ["List"]
+ relatedComponents: [{ name: "Listbox", relationship: "similarTo" }]
+
+layout: DetailComponent
+---
diff --git a/site/docs/components/static-list/usage.mdx b/site/docs/components/static-list/usage.mdx
new file mode 100644
index 0000000000..c80f6428ad
--- /dev/null
+++ b/site/docs/components/static-list/usage.mdx
@@ -0,0 +1,33 @@
+---
+title:
+ $ref: ./#/title
+layout: DetailComponent
+sidebar:
+ exclude: true
+data:
+ $ref: ./#/data
+---
+
+## Using the component
+
+### When to use
+
+- To present a set of static list items. It can be used with a [`FileDropZone`](/salt/components/file-drop-zone) to show the list of files added. It can also be used to create a shopping cart list.
+
+### When not to use
+
+- If you need to create an interactive list, use the [`ListBox`](../list-box) component.
+
+## Content
+
+- Always use sentence case for static list item labels.
+- Keep static list item labels short and concise.
+- Keep static list secondary item labels short and concise.
+
+## Import
+
+To import `StaticList` and related components from the lab Salt package, use:
+
+```
+import { StaticList, StaticListItem, StaticListItemContent } from "@salt-ds/lab";
+```
diff --git a/site/src/examples/static-list/ComplexLabel.tsx b/site/src/examples/static-list/ComplexLabel.tsx
new file mode 100644
index 0000000000..e26764214e
--- /dev/null
+++ b/site/src/examples/static-list/ComplexLabel.tsx
@@ -0,0 +1,31 @@
+import { StackLayout, Text } from "@salt-ds/core";
+import {
+ StaticList,
+ StaticListItem,
+ StaticListItemContent,
+} from "@salt-ds/lab";
+import React, { type ReactElement } from "react";
+import { type ListEvent, complexEventsData } from "./exampleData";
+
+const ListItem = ({ title, time }: ListEvent) => (
+
+
+
+ {title}
+
+ {time}
+
+
+
+
+);
+
+export const ComplexLabel = (): ReactElement => (
+
+
+ {complexEventsData.map((event) => (
+
+ ))}
+
+
+);
diff --git a/site/src/examples/static-list/Default.tsx b/site/src/examples/static-list/Default.tsx
new file mode 100644
index 0000000000..24cccc0a7e
--- /dev/null
+++ b/site/src/examples/static-list/Default.tsx
@@ -0,0 +1,39 @@
+import { Button, StackLayout, Text } from "@salt-ds/core";
+import { StaticList, StaticListItem } from "@salt-ds/lab";
+import React, { type ReactElement, useState } from "react";
+import { eventsData } from "./exampleData";
+
+const ListItem = ({ event }: { event: string }) => (
+
+ {event}
+
+);
+
+export const Default = (): ReactElement => {
+ const [listCount, setListCount] = useState(3);
+
+ const handleListItem = () => {
+ setListCount((prev) => prev + 1);
+ };
+ const handleReset = () => {
+ setListCount(3);
+ };
+ return (
+
+
+
+
+
+
+ {eventsData.slice(0, listCount).map((event, _index) => (
+
+ ))}
+
+
+ );
+};
diff --git a/site/src/examples/static-list/WithButtons.tsx b/site/src/examples/static-list/WithButtons.tsx
new file mode 100644
index 0000000000..6d055ce3ee
--- /dev/null
+++ b/site/src/examples/static-list/WithButtons.tsx
@@ -0,0 +1,69 @@
+import { Button, StackLayout, Text, useId } from "@salt-ds/core";
+import {
+ EditIcon,
+ NoteIcon,
+ OverflowMenuIcon,
+ TearOutIcon,
+ VideoIcon,
+} from "@salt-ds/icons";
+import {
+ StaticList,
+ StaticListItem,
+ StaticListItemContent,
+} from "@salt-ds/lab";
+import { clsx } from "clsx";
+import React, { type ReactElement } from "react";
+import { type ListEvent, complexEventsData } from "./exampleData";
+
+const ListItem = ({ title, time }: ListEvent) => {
+ const id = useId();
+
+ return (
+
+
+
+
+ {title}
+
+
+ {time}
+
+
+
+
+
+
+ );
+};
+
+export const WithButtons = (): ReactElement => (
+
+
+ {complexEventsData.map((event) => (
+
+ ))}
+
+
+);
diff --git a/site/src/examples/static-list/WithDividers.tsx b/site/src/examples/static-list/WithDividers.tsx
new file mode 100644
index 0000000000..9315f83dc1
--- /dev/null
+++ b/site/src/examples/static-list/WithDividers.tsx
@@ -0,0 +1,36 @@
+import { Divider, StackLayout, Text } from "@salt-ds/core";
+import {
+ StaticList,
+ StaticListItem,
+ StaticListItemContent,
+} from "@salt-ds/lab";
+import React, { Fragment, type ReactElement } from "react";
+import { type ListEvent, complexEventsData } from "./exampleData";
+
+const ListItem = ({ title, time }: ListEvent) => (
+
+
+
+ {title}
+
+ {time}
+
+
+
+
+);
+
+export const WithDividers = (): ReactElement => (
+
+
+ {complexEventsData.map((event, _index) => (
+
+
+ {_index < complexEventsData.length - 1 && (
+
+ )}
+
+ ))}
+
+
+
+ {complexEventsData.map((event) => (
+
+ ))}
+
+
+);
diff --git a/site/src/examples/static-list/exampleData.ts b/site/src/examples/static-list/exampleData.ts
new file mode 100644
index 0000000000..98bc4f474b
--- /dev/null
+++ b/site/src/examples/static-list/exampleData.ts
@@ -0,0 +1,31 @@
+export const eventsData = [
+ "Team meeting",
+ "Meeting with John",
+ "Optional meeting",
+ "External meeting",
+ "Team lunch",
+ "Training event",
+ "Coffee break",
+ "Conference",
+ "Meeting with Jane",
+];
+
+export type ListEvent = {
+ title: string;
+ time: string;
+ link?: string;
+};
+export const complexEventsData = [
+ { title: "Team meeting", time: "09:00 to 10:00", link: "#" },
+ {
+ title: "Meeting with John",
+ time: "10:00 to 11:00",
+ link: "#",
+ },
+ {
+ title: "Optional meeting",
+ time: "11:00 to 12:00",
+ link: "#",
+ },
+ { title: "Team lunch", time: "12:00 to 13:00" },
+];
diff --git a/site/src/examples/static-list/index.ts b/site/src/examples/static-list/index.ts
new file mode 100644
index 0000000000..8b46801be4
--- /dev/null
+++ b/site/src/examples/static-list/index.ts
@@ -0,0 +1,5 @@
+export * from "./WithDividers";
+export * from "./WithIcons";
+export * from "./Default";
+export * from "./WithButtons";
+export * from "./ComplexLabel";