fix(ui) actual advanced story book

themesberg · Apr 17, 2024 · 2b4d01a · 2b4d01a
1 parent 96e56a9
commit 2b4d01a
Showing 1 changed file with 79 additions and 8 deletions.
diff --git a/packages/ui/src/components/List/List.stories.tsx b/packages/ui/src/components/List/List.stories.tsx
@@ -1,12 +1,9 @@
 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";
 
-
-
-
-
 export default {
   title: "Components/List",
   component: List,
@@ -117,11 +114,85 @@ 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 icon={HiCheckCircle}>At least 10 characters (and up to 100 characters)</List.Item>
-      <List.Item icon={HiCheckCircle}>At least one lowercase character</List.Item>
-      <List.Item icon={HiCheckCircle}>Inclusion of at least one special character, e.g., ! @ # ?</List.Item>
+      <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>
     </>
   ),
-};
+};