Merge pull request #19 from storybookjs/valentin/list-component

Implemented bare minimum list component

src/components/List/List.stories.tsx

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

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,31 @@
+import React from "react";
+import { Icons } from "@storybook/components";
+import {
+  ListItemContentWrapper,
+  ListItemIndexWrapper,
+  ListItemWrapper,
+} from "./ListItem.styled";
+
+interface ListItemProps {
+  children: React.ReactNode;
+  index: number;
+  isCompleted?: boolean;
+}
+
+export const ListItem = ({ children, index, isCompleted }: ListItemProps) => {
+  return (
+    <ListItemWrapper>
+      <ListItemIndexWrapper
+        aria-label={isCompleted ? "complete" : "not complete"}
+        isCompleted={isCompleted}
+      >
+        {isCompleted ? (
+          <Icons width={10} height={10} icon="check" color="white" />
+        ) : (
+          index
+        )}
+      </ListItemIndexWrapper>
+      <ListItemContentWrapper>{children}</ListItemContentWrapper>
+    </ListItemWrapper>
+  );
+};