From 9b043f44a0529d121afe7b5f84f7f8cacdcb9e03 Mon Sep 17 00:00:00 2001
From: "GitStart-Cal.com" <121884634+gitstart-calcom@users.noreply.github.com>
Date: Thu, 31 Aug 2023 19:11:01 +0000
Subject: [PATCH] fix: List storybook file is empty (fix-list) (#10965)

Co-authored-by: gitstart-calcom <gitstart@users.noreply.github.com>
---
 packages/ui/components/list/list.stories.mdx | 82 ++++++++++++++++++--
 1 file changed, 75 insertions(+), 7 deletions(-)

diff --git a/packages/ui/components/list/list.stories.mdx b/packages/ui/components/list/list.stories.mdx
index 805d7d95c2..a5cef93c14 100644
--- a/packages/ui/components/list/list.stories.mdx
+++ b/packages/ui/components/list/list.stories.mdx
@@ -10,20 +10,88 @@ import {
   VariantRow,
 } from "@calcom/storybook/components";
 
-import { List, ListItem } from "./List";
+import { List, ListItem, ListItemTitle, ListItemText } from "./List";
+
+export const listItems = [
+  { title: "Title 1", description: "Description 1" },
+  { title: "Title 2", description: "Description 2" },
+  { title: "Title 3", description: "Description 3" },
+];
 
 <Meta title="UI/List" component={List} />
 
-<Title title="List" suffix="Brief" subtitle="Version 2.0 — Last Update: 05 jan 2023" />
+<Title title="List" suffix="Brief" subtitle="Version 2.0 — Last Update: 24 Aug 2023" />
 
 ## Definition
 
-Sums it up nicely.
+The List component is used to render an unordered list with default styling
+
+## Structure
+
+List takes an array of objects to display a list in the UI
+### List
+<CustomArgsTable of={List} />
+
+### ListItem
+<CustomArgsTable of={ListItem} />
+
+<Examples>
+  <Example title="Default">
+    <List>
+      {listItems.map((item) => (
+        <ListItem rounded={false}>
+          <ListItemTitle className="mr-2">{item.title}</ListItemTitle>
+          <ListItemText>{item.description}</ListItemText>
+        </ListItem>
+      ))}
+    </List>
+  </Example>
+  <Example title="Round Container">
+    <List roundContainer={false}>
+      {listItems.map((item) => (
+        <ListItem rounded={false}>
+          <ListItemTitle className="mr-2">{item.title}</ListItemTitle>
+          <ListItemText>{item.description}</ListItemText>
+        </ListItem>
+      ))}
+    </List>
+  </Example>
+    <Example title="No Border Treatment">
+    <List noBorderTreatment={true}>
+      {listItems.map((item) => (
+        <ListItem rounded={false}>
+          <ListItemTitle className="mr-2">{item.title}</ListItemTitle>
+          <ListItemText>{item.description}</ListItemText>
+        </ListItem>
+      ))}
+    </List>
+  </Example>
+</Examples>
+
+<Title offset title="List" suffix="Variants" />
 
 <Canvas>
-  <Story name="List">
-    <VariantsTable titles={[]} columnMinWidth={150}>
-      <VariantRow variant="Default">TODO!</VariantRow>
-    </VariantsTable>
+  <Story
+    name="List"
+    args={{
+      roundContainer: true,
+      noBorderTreatment: false,
+      rounded: false,
+      expanded: false
+    }}>
+    {({ roundContainer, noBorderTreatment, rounded, expanded }) => (
+      <VariantsTable titles={["Default"]} columnMinWidth={150}>
+        <VariantRow>
+          <List roundContainer={roundContainer} noBorderTreatment={noBorderTreatment}>
+            {listItems.map((item) => (
+              <ListItem rounded={rounded} expanded={expanded}>
+                <ListItemTitle className="mr-2">{item.title}</ListItemTitle>
+                <ListItemText>{item.description}</ListItemText>
+              </ListItem>
+            ))}
+          </List>
+        </VariantRow>
+      </VariantsTable>
+    )}
   </Story>
 </Canvas>