Add StaticList to lab

.changeset/added-static-list.md

@@ -0,0 +1,20 @@
+---
+"@salt-ds/lab": minor
+---
+
+Added `StaticList`, `StaticListItem`, `StaticListItemContent` component to lab.
+
+```tsx
+<StaticList>
+  <StaticListItem>
+    <StaticListItemContent>
+      <Text>New static list feature updates are available in lab</Text>
+    </StaticListItemContent>
+  </StaticListItem>
+  <StaticListItem>
+    <StaticListItemContent>
+      <Text>New static list feature updates are available in lab</Text>
+    </StaticListItemContent>
+  </StaticListItem>
+</StaticList>
+```

packages/lab/src/index.ts

@@ -56,6 +56,7 @@ export * from "./responsive";
 export * from "./search-input";
 export * from "./skip-link";
 export * from "./slider";
+export * from "./static-list";
 export * from "./stepped-tracker";
 export * from "./stepper-input";
 export * from "./system-status";

packages/lab/src/static-list/StaticList.css

@@ -0,0 +1,3 @@
+.saltStaticList {
+  overflow-y: auto;
+}

packages/lab/src/static-list/StaticList.tsx

@@ -0,0 +1,37 @@
+import { makePrefixer } from "@salt-ds/core";
+import { useComponentCssInjection } from "@salt-ds/styles";
+import { useWindow } from "@salt-ds/window";
+import { clsx } from "clsx";
+import {
+  type ComponentPropsWithoutRef,
+  type ReactNode,
+  forwardRef,
+} from "react";
+
+import staticListCss from "./StaticList.css";
+
+const withBaseName = makePrefixer("saltStaticList");
+
+export interface StaticListProps extends ComponentPropsWithoutRef<"ul"> {
+  /**
+   * The list items to be rendered within the StaticList.
+   */
+  children: ReactNode;
+}
+
+export const StaticList = forwardRef<HTMLOListElement, StaticListProps>(
+  function StaticList({ children, className, ...rest }, ref) {
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+      testId: "salt-static-list",
+      css: staticListCss,
+      window: targetWindow,
+    });
+
+    return (
+      <ol className={clsx(withBaseName(), className)} ref={ref} {...rest}>
+        {children}
+      </ol>
+    );
+  },
+);

packages/lab/src/static-list/StaticListItem.css

@@ -0,0 +1,13 @@
+.saltStaticListItem {
+  list-style-type: none;
+  display: flex;
+  gap: var(--salt-spacing-100);
+  box-sizing: border-box;
+  padding: var(--salt-spacing-50) var(--salt-spacing-100);
+  min-height: calc(var(--salt-size-base) + var(--salt-spacing-100));
+}
+
+.saltStaticListItem > .saltIcon {
+  /* Workaround to ensure the icon and button are aligned.*/
+  min-height: var(--salt-size-base);
+}

packages/lab/src/static-list/StaticListItem.tsx

@@ -0,0 +1,30 @@
+import { makePrefixer } from "@salt-ds/core";
+import { useComponentCssInjection } from "@salt-ds/styles";
+import { useWindow } from "@salt-ds/window";
+import { clsx } from "clsx";
+import { type ComponentPropsWithoutRef, forwardRef } from "react";
+
+import staticListItemCss from "./StaticListItem.css";
+
+const withBaseName = makePrefixer("saltStaticListItem");
+
+export interface StaticListItemProps extends ComponentPropsWithoutRef<"li"> {}
+
+export const StaticListItem = forwardRef<HTMLLIElement, StaticListItemProps>(
+  function StaticListItem(props, ref) {
+    const { className, children, ...restProps } = props;
+
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+      testId: "salt-static-list-item",
+      css: staticListItemCss,
+      window: targetWindow,
+    });
+
+    return (
+      <li className={clsx(withBaseName(), className)} ref={ref} {...restProps}>
+        {children}
+      </li>
+    );
+  },
+);

packages/lab/src/static-list/StaticListItemContent.css

@@ -0,0 +1,10 @@
+.saltStaticListItemContent {
+  flex: 1 0;
+  margin: var(--salt-spacing-75) 0;
+  color: var(--salt-content-primary-foreground);
+  font-size: var(--salt-text-fontSize);
+  font-weight: var(--salt-text-fontWeight);
+  font-family: var(--salt-text-fontFamily);
+  line-height: var(--salt-text-lineHeight);
+  letter-spacing: var(--salt-text-letterSpacing);
+}

packages/lab/src/static-list/StaticListItemContent.tsx

@@ -0,0 +1,39 @@
+import { makePrefixer } from "@salt-ds/core";
+import { useComponentCssInjection } from "@salt-ds/styles";
+import { useWindow } from "@salt-ds/window";
+import { clsx } from "clsx";
+import {
+  type ComponentPropsWithoutRef,
+  type ForwardedRef,
+  type ReactNode,
+  forwardRef,
+} from "react";
+import staticListItemContent from "./StaticListItemContent.css";
+
+const withBaseName = makePrefixer("saltStaticListItemContent");
+
+export interface StaticListItemContentProps
+  extends ComponentPropsWithoutRef<"div"> {
+  /**
+   * The content of Static List Item
+   */
+  children?: ReactNode;
+}
+
+export const StaticListItemContent = forwardRef<
+  HTMLDivElement,
+  StaticListItemContentProps
+>(function StaticListItemContent({ children, className, ...restProps }, ref) {
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "salt-static-list-item-content",
+    css: staticListItemContent,
+    window: targetWindow,
+  });
+
+  return (
+    <div className={clsx(withBaseName(), className)} {...restProps} ref={ref}>
+      {children}
+    </div>
+  );
+});

packages/lab/src/static-list/index.ts

@@ -0,0 +1,3 @@
+export * from "./StaticList";
+export * from "./StaticListItem";
+export * from "./StaticListItemContent";

packages/lab/stories/assets/exampleData.ts

@@ -158,3 +158,35 @@ export const objectOptionsExampleData: objectOptionType[] = [
   { value: 30, text: "C Option", id: 3 },
   { value: 40, text: "D Option", id: 4 },
 ];
+
+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" },
+];

packages/lab/stories/static-list/static-list.qa.stories.tsx

@@ -0,0 +1,148 @@
+import { Button, Divider, StackLayout, Text, useId } from "@salt-ds/core";
+import { CalendarIcon, OverflowMenuIcon, VideoIcon } from "@salt-ds/icons";
+import {
+  StaticList,
+  StaticListItem,
+  StaticListItemContent,
+} from "@salt-ds/lab";
+import type { Meta, StoryFn } from "@storybook/react";
+import { clsx } from "clsx";
+import { QAContainer, type QAContainerProps } from "docs/components";
+import React, { Fragment } from "react";
+import { complexEventsData, eventsData } from "../assets/exampleData";
+
+export default {
+  title: "Lab/Static List/Static List QA",
+  component: StaticList,
+} as Meta<typeof StaticList>;
+
+export const AllExamples: StoryFn<QAContainerProps> = () => (
+  <QAContainer cols={4} width={1300} itemPadding={5} vertical transposeDensity>
+    <StaticList style={{ width: "320px" }}>
+      <StaticListItem>
+        <StaticListItemContent>Team meeting</StaticListItemContent>
+      </StaticListItem>
+    </StaticList>
+    <StaticList style={{ width: "320px" }}>
+      {eventsData.slice(0, 3).map((event, _index) => (
+        <StaticListItem key={event}>
+          <StaticListItemContent>
+            <Text>{event}</Text>
+          </StaticListItemContent>
+        </StaticListItem>
+      ))}
+    </StaticList>
+    <StaticList style={{ width: "320px" }}>
+      {complexEventsData.map(({ title, time }) => (
+        <StaticListItem key={title}>
+          <StaticListItemContent>
+            <StackLayout gap={0.5}>
+              <Text color="inherit">{title}</Text>
+              <Text styleAs="label" color="secondary">
+                {time}
+              </Text>
+            </StackLayout>
+          </StaticListItemContent>
+        </StaticListItem>
+      ))}
+    </StaticList>
+    <StaticList style={{ width: "320px" }}>
+      {complexEventsData.map(({ title, time }) => {
+        const id = useId();
+        return (
+          <StaticListItem key={title}>
+            <StaticListItemContent>
+              <StackLayout gap={0.5}>
+                <Text color="inherit" id={`label-${id}`}>
+                  {title}
+                </Text>
+                <Text
+                  styleAs="label"
+                  color="secondary"
+                  id={`secondary-label-${id}`}
+                >
+                  {time}
+                </Text>
+              </StackLayout>
+            </StaticListItemContent>
+            <Button
+              id={`information-button-${id}`}
+              appearance="transparent"
+              aria-label="Zoom information"
+              aria-labelledby={clsx(
+                `label-${id}`,
+                `secondary-label-${id}`,
+                `information-button-${id}`,
+              )}
+            >
+              <VideoIcon aria-hidden />
+            </Button>
+            <Button
+              id={`options-button-${id}`}
+              appearance="transparent"
+              aria-label="More options"
+              aria-labelledby={clsx(
+                `label-${id}`,
+                `secondary-label-${id}`,
+                `options-button-${id}`,
+              )}
+            >
+              <OverflowMenuIcon aria-hidden />
+            </Button>
+          </StaticListItem>
+        );
+      })}
+    </StaticList>
+    <StaticList style={{ width: "320px" }}>
+      {complexEventsData.map(({ title, time }) => (
+        <StaticListItem key={title}>
+          <CalendarIcon aria-hidden />
+          <StaticListItemContent>
+            <StackLayout gap={0.5}>
+              <Text color="inherit">{title}</Text>
+              <Text styleAs="label" color="secondary">
+                {time}
+              </Text>
+            </StackLayout>
+          </StaticListItemContent>
+        </StaticListItem>
+      ))}
+    </StaticList>
+    <StaticList style={{ width: "320px" }}>
+      {complexEventsData.map(({ title, time }, _index) => (
+        <Fragment key={title}>
+          <StaticListItem>
+            <StaticListItemContent>
+              <StackLayout gap={0.5}>
+                <Text color="inherit">{title}</Text>
+                <Text styleAs="label" color="secondary">
+                  {time}
+                </Text>
+              </StackLayout>
+            </StaticListItemContent>
+          </StaticListItem>
+          {_index < complexEventsData.length - 1 && (
+            <Divider variant="tertiary" aria-hidden />
+          )}
+        </Fragment>
+      ))}
+    </StaticList>
+  </QAContainer>
+);
+
+AllExamples.parameters = {
+  chromatic: {
+    disableSnapshot: false,
+    modes: {
+      theme: {
+        themeNext: "disable",
+      },
+      themeNext: {
+        themeNext: "enable",
+        corner: "rounded",
+        accent: "teal",
+        // Ignore headingFont given font is not loaded
+      },
+    },
+  },
+};