chore: WIP

packages/design-system/src/List/List.constants.ts

@@ -0,0 +1,7 @@
+import { CLASS_NAME_PREFIX } from "__config__/constants";
+
+export const ListClassName = `${CLASS_NAME_PREFIX}-list`;
+export const ListItemClassName = `${CLASS_NAME_PREFIX}-listitem`;
+export const ListItemTitleClassName = `${ListItemClassName}__title`;
+export const ListItemIDescClassName = `${ListItemClassName}__idesc`;
+export const ListItemBDescClassName = `${ListItemClassName}__bdesc`;

packages/design-system/src/List/List.mdx

@@ -0,0 +1,93 @@
+import { Canvas, Meta } from '@storybook/blocks';
+
+import * as ListStories from './List.stories';
+
+<Meta of={ListStories} />
+
+# List
+
+List is a set of interactive actions or choices. It consists of items displayed in a uniform single-column layout, allowing space for icons, labels and text.
+
+## Anatomy
+
+![ListItem anatomy](./docs/list-item-anatomy.png)
+
+1. Container. 
+2. The Start icon represents a visual indicator related to the action item.
+3. "Label" is the label for the action item.
+4. The End icon could show more options or relevant actions connected to the list.
+
+## Overview
+
+Action lists offer a wide range of practical applications:
+- In page sidebars, they effectively present individual actions, manage local navigation.
+- Action lists facilitate organizational clarity through section dividers, headers for categorization, and dividers for each individual item.
+- Action Lists dynamically adjust to the size of their parent container, ensuring a consistent single-column layout across various screen dimensions.
+
+## Usage Guidelines
+
+**Navigation Bars**: Utilize Action Lists in navigation bars to provide users with quick access to common actions, such as profile settings, notifications, or account-related functions.
+
+**Action List** can encompass a variety of layouts, including variations like "horizontal," "vertical," "stacked," and "grid," each tailored to the specific user interface and design preferences. These variations offer flexibility in presenting interactive actions or choices to users in a visually pleasing and efficient manner.
+
+## Action vs Menu
+- **Action List:** No additional user interaction required; actions are directly accessible and visible.
+- **Menu Component:** Requires a triggering action to display the menu, revealing a list of options or actions, which provides a more organized approach for presenting complex sets of choices.
+
+**Action List**:
+An Action List typically doesn't have any dependencies on user actions. It's a straightforward list of actions that are presented to the user, usually as icons or labels, without requiring any additional interactions. Users can click or tap directly on the action they want to perform.
+
+**Menu Component**:
+A Menu Component often depends on a specific user action to trigger its appearance. This could be a click, hover, or tap action. When the user performs the triggering action, the menu opens, revealing a list of options or actions, often in a hierarchical structure. The menu closes when the user selects an option, clicks outside the menu, or performs a designated close action.
+
+## Grouping and Sorting
+Group related actions together, and consider using dividers or headers to visually separate different groups. Provide sorting options if the list is extensive.
+
+## State
+![ListItem states](./docs/list-item-state.png)
+
+## Examples
+![ListItem examples](./docs/list-item-example.png)
+
+## Interaction
+![ListItem interaction](./docs/list-item-interaction.png)
+
+## Spacing
+![ListItem spacing](./docs/list-item-spacing.png)
+
+## Sizing
+### Sizing Variants
+#### Medium
+The small variant is designed for constrained spaces, such as sidebars or mobile screens.
+![ListItem spacing](./docs/list-item-medium.png)
+#### Large
+The large variant maximizes item visibility and provides ample space for detailed descriptions. It's ideal for expansive layouts like dashboards.
+![ListItem spacing](./docs/list-item-large.png)
+
+## Description
+Description on the Right
+![ListItem spacing](./docs/list-item-description-right.png)
+
+**When to Use:**
+
+- **Limited Horizontal Space:** If you have a limited amount of horizontal space available for each item, placing the description on the right can be more space-efficient.
+- **Emphasis on Titles:** If the titles of the items are more important than their descriptions, placing descriptions on the right allows the titles to be more prominent and visible.
+
+**Considerations:**
+
+- **Text Length:** Ensure that the descriptions are concise enough to fit comfortably beside the titles without creating a cluttered appearance.
+- **Visual Balance:** Maintain visual balance by using appropriate spacing between the title, description, and any other components
+
+## Description on the Bottom
+
+**When to Use:**
+
+- **Rich Descriptions:** If the descriptions are detailed and provide crucial information that users need to make decisions, placing them at the bottom allows for more space to present this information.
+- **Engagement and Exploration:** If you want users to engage more deeply with the content and read the descriptions, placing them at the bottom encourages users to scroll down and explore each item.
+- **Visual Appeal:** If you want to create a visually engaging layout with a clear separation between titles and descriptions, placing descriptions at the bottom can achieve this.
+
+**Considerations:**
+
+- **Vertical Space:** Be mindful of the vertical space available, especially if the list is expected to be long. Scrolling through multiple items with descriptions at the bottom might require more user effort.
+
+In essence, the decision between placing descriptions on the right or at the bottom depends on the content's nature, the available space, and the desired user behavior.

packages/design-system/src/List/List.stories.tsx

@@ -0,0 +1,74 @@
+import React from "react";
+
+import { List } from "./List";
+
+export default {
+  title: "Design System/List",
+  component: List,
+  decorators: [
+    (Story) => (
+      <div
+        style={{
+          width: "350px",
+          margin: "0 auto",
+          height: "200px",
+        }}
+      >
+        {Story()}
+      </div>
+    ),
+  ],
+};
+
+// eslint-disable-next-line react/function-component-definition
+const Template = (args) => {
+  return <List {...args} />;
+};
+
+export const ListStory = Template.bind({});
+ListStory.storyName = "List";
+ListStory.args = {
+  items: [
+    {
+      startIcon: "box-3-line",
+      title: "Action item 1",
+      endIcon: "arrow-right-s-line",
+      description: "inline",
+      descriptionType: "inline",
+    },
+    {
+      startIcon: "box-3-line",
+      title: "Action item 2",
+      endIcon: "comment-context-menu",
+      description: "inline",
+      descriptionType: "inline",
+    },
+    {
+      startIcon: "box-3-line",
+      title: "Action item 3",
+      endIcon: "arrow-right-s-line",
+      hasError: true,
+    },
+    {
+      startIcon: "box-3-line",
+      title: "Action item 4",
+      endIcon: "arrow-right-s-line",
+      isDisabled: true,
+    },
+    {
+      startIcon: "box-3-line",
+      title: "Action item 5",
+      endIcon: "arrow-right-s-line",
+    },
+    {
+      startIcon: "box-3-line",
+      title: "Action item 6",
+      description: "block",
+    },
+    {
+      startIcon: "box-3-line",
+      title: "Action item 6 more text more text more text more text more text",
+      description: "block",
+    },
+  ],
+};

packages/design-system/src/List/List.styles.tsx

@@ -0,0 +1,105 @@
+import styled, { css } from "styled-components";
+import { ListSizes } from "./List.types";
+
+const Variables = css`
+  --list-item-font-size: var(--ads-v2-font-size-4);
+`;
+
+const Sizes = {
+  md: css`
+    --listitem-title-font-size: var(--ads-v2-font-size-4);
+  `,
+  lg: css`
+    --listitem-title-font-size: var(--ads-v2-font-size-10);
+  `,
+};
+
+export const StyledList = styled.div`
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  padding: 2px;
+`;
+
+export const StyledListItem = styled.div<{ size: ListSizes }>`
+  ${Variables};
+
+  display: flex;
+  padding: 8px;
+  width: 100%;
+  align-items: center;
+  gap: 8px;
+  cursor: pointer;
+  border-radius: var(--ads-v2-border-radius);
+  box-sizing: border-box;
+
+  ${({ size }) => Sizes[size]}
+
+  .text-overflow {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+  &:hover {
+    background-color: var(--ads-v2-color-bg-subtle);
+  }
+
+  &:active {
+    background-color: var(--ads-v2-color-bg-muted);
+  }
+
+  &[data-selected="true"] {
+    background-color: var(--ads-v2-color-bg-muted);
+  }
+
+  /* disabled style */
+  &[data-disabled="true"] {
+    cursor: not-allowed;
+    opacity: var(--ads-v2-opacity-disabled);
+  }
+
+  /* Focus styles */
+  &:focus-visible {
+    outline: var(--ads-v2-border-width-outline) solid
+      var(--ads-v2-color-outline);
+    outline-offset: var(--ads-v2-offset-outline);
+  }
+`;
+
+export const StartIconWrapper = styled.div`
+  align-self: flex-start;
+`;
+
+export const TooltipTextWrapper = styled.div`
+  display: flex;
+  min-width: 0;
+`;
+
+export const ContentWrapper = styled.div`
+  display: flex;
+  gap: 8px;
+`;
+
+export const ContentTextWrapper = styled.div`
+  display: flex;
+  gap: 8px;
+  flex: 1;
+  min-width: 0;
+`;
+
+export const DescriptionWrapper = styled.div`
+  flex-direction: column;
+  min-width: 0;
+  gap: 8px;
+  display: flex;
+`;
+
+export const InlineDescriptionWrapper = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  min-width: 0;
+  gap: 8px;
+  flex: 1;
+`;