feat(ui) Add advanced list story

themesberg · Apr 17, 2024 · 96e56a9 · 96e56a9
1 parent e76c506
commit 96e56a9
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 0 deletions.
diff --git a/.changeset/tough-cobras-call.md 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
@@ -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>
+    </>
+  ),
+};