feat(ui) Add advanced list story (#1361)

* feat(ui) Add advanced list story

* fix(ui) actual advanced story book

* fix delete unneccesary changeset

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 protected]</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 protected]</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 protected]</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 protected]</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 protected]</p>
+          </div>
+          <div className="inline-flex items-center text-base font-semibold text-gray-900 dark:text-white">$367</div>
+        </div>
+      </List.Item>
+    </>
+  ),
+};