From 99845adfedd41e520655290a31403b90795b699c Mon Sep 17 00:00:00 2001
From: fatemeh paghar <66066475+paghar@users.noreply.github.com>
Date: Wed, 19 Jun 2024 14:23:44 +0200
Subject: [PATCH] feat(ui) Add advanced list story (#1361)

* feat(ui) Add advanced list story

* fix(ui) actual advanced story book

* fix delete unneccesary changeset
---
 .../ui/src/components/List/List.stories.tsx   | 87 +++++++++++++++++++
 1 file changed, 87 insertions(+)

diff --git a/packages/ui/src/components/List/List.stories.tsx b/packages/ui/src/components/List/List.stories.tsx
index 00b5ebc11..fc2b72d22 100644
--- a/packages/ui/src/components/List/List.stories.tsx
+++ b/packages/ui/src/components/List/List.stories.tsx
@@ -1,5 +1,6 @@
 import type { Meta, StoryFn } from "@storybook/react";
 import { HiCheckCircle } from "react-icons/hi";
+import { Avatar } from "../Avatar";
 import type { ListProps } from "./List";
 import { List } from "./List";
 
@@ -109,3 +110,89 @@ WithIconList.args = {
     </>
   ),
 };
+
+export const AdvancedList = Template.bind({});
+AdvancedList.storyName = "Advanced";
+AdvancedList.args = {
+  unstyled: true,
+  className: "max-w-md divide-y divide-gray-200 dark:divide-gray-700",
+  children: (
+    <>
+      <List.Item className="pb-3 sm:pb-4">
+        <div className="flex items-center space-x-4 rtl:space-x-reverse">
+          <Avatar
+            img="https://flowbite.com/docs/images/people/profile-picture-1.jpg"
+            alt="Neil image"
+            rounded
+            size="sm"
+          />
+          <div className="min-w-0 flex-1">
+            <p className="truncate text-sm font-medium text-gray-900 dark:text-white">Neil Sims</p>
+            <p className="truncate text-sm text-gray-500 dark:text-gray-400">email@flowbite.com</p>
+          </div>
+          <div className="inline-flex items-center text-base font-semibold text-gray-900 dark:text-white">$320</div>
+        </div>
+      </List.Item>
+      <List.Item className="py-3 sm:py-4">
+        <div className="flex items-center space-x-4 rtl:space-x-reverse">
+          <Avatar
+            img="https://flowbite.com/docs/images/people/profile-picture-3.jpg"
+            alt="Neil image"
+            rounded
+            size="sm"
+          />
+          <div className="min-w-0 flex-1">
+            <p className="truncate text-sm font-medium text-gray-900 dark:text-white">Bonnie Green</p>
+            <p className="truncate text-sm text-gray-500 dark:text-gray-400">email@flowbite.com</p>
+          </div>
+          <div className="inline-flex items-center text-base font-semibold text-gray-900 dark:text-white">$3467</div>
+        </div>
+      </List.Item>
+      <List.Item className="py-3 sm:py-4">
+        <div className="flex items-center space-x-4 rtl:space-x-reverse">
+          <Avatar
+            img="https://flowbite.com/docs/images/people/profile-picture-2.jpg"
+            alt="Neil image"
+            rounded
+            size="sm"
+          />
+          <div className="min-w-0 flex-1">
+            <p className="truncate text-sm font-medium text-gray-900 dark:text-white">Michael Gough</p>
+            <p className="truncate text-sm text-gray-500 dark:text-gray-400">email@flowbite.com</p>
+          </div>
+          <div className="inline-flex items-center text-base font-semibold text-gray-900 dark:text-white">$67</div>
+        </div>
+      </List.Item>
+      <List.Item className="py-3 sm:py-4">
+        <div className="flex items-center space-x-4 rtl:space-x-reverse">
+          <Avatar
+            img="https://flowbite.com/docs/images/people/profile-picture-5.jpg"
+            alt="Neil image"
+            rounded
+            size="sm"
+          />
+          <div className="min-w-0 flex-1">
+            <p className="truncate text-sm font-medium text-gray-900 dark:text-white">Thomas Lean</p>
+            <p className="truncate text-sm text-gray-500 dark:text-gray-400">email@flowbite.com</p>
+          </div>
+          <div className="inline-flex items-center text-base font-semibold text-gray-900 dark:text-white">$2367</div>
+        </div>
+      </List.Item>
+      <List.Item className="pb-0 pt-3 sm:pt-4">
+        <div className="flex items-center space-x-4 rtl:space-x-reverse">
+          <Avatar
+            img="https://flowbite.com/docs/images/people/profile-picture-4.jpg"
+            alt="Neil image"
+            rounded
+            size="sm"
+          />
+          <div className="min-w-0 flex-1">
+            <p className="truncate text-sm font-medium text-gray-900 dark:text-white">Lana Byrd</p>
+            <p className="truncate text-sm text-gray-500 dark:text-gray-400">email@flowbite.com</p>
+          </div>
+          <div className="inline-flex items-center text-base font-semibold text-gray-900 dark:text-white">$367</div>
+        </div>
+      </List.Item>
+    </>
+  ),
+};