Implemented bare minimum list component

Co-authored-by: liwn9527

src/components/List/List.stories.tsx

@@ -0,0 +1,56 @@
+import React, { useState } from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { userEvent, within } from "@storybook/testing-library";
+import { expect } from "@storybook/jest";
+
+import { List } from "./List";
+import { ListItem } from "./ListItem/ListItem";
+
+const meta: Meta<typeof List> = {
+  title: "List",
+  component: List,
+};
+
+export default meta;
+
+export const Default: StoryObj<typeof meta> = {
+  render: () => {
+    const [workingIndex, setWorkingIndex] = useState(1);
+
+    return (
+      <>
+        <List>
+          <ListItem isCompleted={workingIndex >= 1} nthItem={1}>
+            Hello World
+          </ListItem>
+          <ListItem isCompleted={workingIndex >= 2} nthItem={2}>
+            Bonjour le monde
+          </ListItem>
+          <ListItem isCompleted={workingIndex >= 3} nthItem={3}>
+            你好, 世界
+          </ListItem>
+        </List>
+        <br />
+        <button type="button" onClick={() => setWorkingIndex(workingIndex + 1)}>
+          Complete
+        </button>
+      </>
+    );
+  },
+  play: ({ canvasElement }) => {
+    const canvas = within(canvasElement.parentElement);
+    const button = canvas.getByText("Complete");
+    const liEls = canvas.getAllByRole("listitem");
+
+    expect(liEls[0].ariaLabel).toBe("complete");
+    expect(liEls[1].ariaLabel).toBe("not complete");
+    expect(liEls[2].ariaLabel).toBe("not complete");
+
+    userEvent.click(button);
+
+    expect(liEls[0].ariaLabel).toBe("complete");
+    // change
+    expect(liEls[1].ariaLabel).toBe("complete");
+    expect(liEls[2].ariaLabel).toBe("not complete");
+  },
+};

src/components/List/List.styled.tsx

@@ -0,0 +1,9 @@
+import { styled } from "@storybook/theming";
+
+export const ListWrapper = styled.ul(() => ({
+  display: "flex",
+  flexDirection: "column",
+  rowGap: 16,
+  padding: 0,
+  margin: 0,
+}));

src/components/List/List.tsx

@@ -0,0 +1,10 @@
+import React from "react";
+import { ListWrapper } from "./List.styled";
+
+interface ListProps {
+  children: React.ReactNode;
+}
+
+export const List = ({ children }: ListProps) => {
+  return <ListWrapper>{children}</ListWrapper>;
+};

src/components/List/ListItem/ListItem.styled.tsx

@@ -0,0 +1,31 @@
+import { styled } from "@storybook/theming";
+
+export const ListItemWrapper = styled.li(() => ({
+  display: "flex",
+  alignItems: "flex-start",
+  columnGap: 12,
+}));
+
+export const ListItemContentWrapper = styled.div(({ theme }) => ({
+  fontFamily: theme.typography.fonts.base,
+  color: theme.color.darker,
+  fontSize: "13px",
+}));
+
+export const ListItemIndexWrapper = styled.div<{ isCompleted: boolean }>(
+  ({ isCompleted, theme }) => ({
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    border: !isCompleted && `1px solid ${theme.color.medium}`,
+    minWidth: 20,
+    width: 20,
+    height: 20,
+    borderRadius: "50%",
+    backgroundColor: isCompleted ? theme.color.green : "white",
+    fontFamily: theme.typography.fonts.base,
+    fontSize: 10,
+    fontWeight: 600,
+    color: theme.color.dark,
+  })
+);

src/components/List/ListItem/ListItem.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+import { Icons } from "@storybook/components";
+import {
+  ListItemContentWrapper,
+  ListItemIndexWrapper,
+  ListItemWrapper,
+} from "./ListItem.styled";
+
+interface ListItemProps {
+  children: React.ReactNode;
+  nthItem: number;
+  isCompleted?: boolean;
+}
+
+export const ListItem = ({ children, nthItem, isCompleted }: ListItemProps) => {
+  return (
+    <ListItemWrapper aria-label={isCompleted ? "complete" : "not complete"}>
+      <ListItemIndexWrapper isCompleted={isCompleted}>
+        {isCompleted ? <Icons icon="check" color="white" /> : nthItem}
+      </ListItemIndexWrapper>
+      <ListItemContentWrapper>{children}</ListItemContentWrapper>
+    </ListItemWrapper>
+  );
+};