From 96e56a918838696d783e3d93548a8cf760712c15 Mon Sep 17 00:00:00 2001
From: paghar <f.paghar@gmail.com>
Date: Sat, 13 Apr 2024 21:01:27 +0330
Subject: [PATCH] feat(ui) Add advanced list story

---
 .changeset/tough-cobras-call.md                  |  5 +++++
 packages/ui/src/components/List/List.stories.tsx | 16 ++++++++++++++++
 2 files changed, 21 insertions(+)
 create mode 100644 .changeset/tough-cobras-call.md

diff --git a/.changeset/tough-cobras-call.md b/.changeset/tough-cobras-call.md
new file mode 100644
index 0000000000..10a59362ce
--- /dev/null
+++ b/.changeset/tough-cobras-call.md
@@ -0,0 +1,5 @@
+---
+"flowbite-react": major
+---
+
+Advanced list story
diff --git a/packages/ui/src/components/List/List.stories.tsx b/packages/ui/src/components/List/List.stories.tsx
index 00b5ebc110..00e5f84417 100644
--- a/packages/ui/src/components/List/List.stories.tsx
+++ b/packages/ui/src/components/List/List.stories.tsx
@@ -3,6 +3,10 @@ import { HiCheckCircle } from "react-icons/hi";
 import type { ListProps } from "./List";
 import { List } from "./List";
 
+
+
+
+
 export default {
   title: "Components/List",
   component: List,
@@ -109,3 +113,15 @@ WithIconList.args = {
     </>
   ),
 };
+
+export const AdvancedList = Template.bind({});
+AdvancedList.storyName = "Advanced";
+AdvancedList.args = {
+  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>
+    </>
+  ),
+};
\ No newline at end of file