From 0405040dfbf56a8c6edf63f8aa70224ee6750665 Mon Sep 17 00:00:00 2001
From: fatemeh paghar <f.paghar@gmail.com>
Date: Sun, 17 Mar 2024 00:28:35 +0330
Subject: [PATCH] feat(lists component): add new with-icon state

---
 content/docs/typography/list.mdx |  6 +++
 examples/list/index.ts           |  1 +
 examples/list/list.icon.tsx      | 63 ++++++++++++++++++++++++++++++++
 src/components/List/List.tsx     |  3 +-
 src/components/List/ListItem.tsx | 24 ++++++++----
 src/components/List/theme.ts     |  7 ++++
 6 files changed, 96 insertions(+), 8 deletions(-)
 create mode 100644 examples/list/list.icon.tsx

diff --git a/content/docs/typography/list.mdx b/content/docs/typography/list.mdx
index 88dd2d226..ee523cd82 100644
--- a/content/docs/typography/list.mdx
+++ b/content/docs/typography/list.mdx
@@ -17,6 +17,12 @@ Use this example to create a default unordered list of items using the `List` co
 
 <Example name="list.root" />
 
+## Icons
+
+This example can be used to apply custom icons instead of the default bullets for the list items.
+
+<Example name="list.icon" />
+
 ## Nested
 
 Use this example to nested another list of items inside the parent list element.
diff --git a/examples/list/index.ts b/examples/list/index.ts
index 722aed02f..272fff7c8 100644
--- a/examples/list/index.ts
+++ b/examples/list/index.ts
@@ -1,5 +1,6 @@
 export { nested } from './list.nested';
 export { ordered } from './list.ordered';
+export { icon } from './list.icon';
 export { root } from './list.root';
 export { unstyled } from './list.unstyled';
 export { horizontal } from './list.horizontal';
diff --git a/examples/list/list.icon.tsx b/examples/list/list.icon.tsx
new file mode 100644
index 000000000..2c2be7296
--- /dev/null
+++ b/examples/list/list.icon.tsx
@@ -0,0 +1,63 @@
+import { type CodeData } from '~/components/code-demo';
+import { List, ListItem } from '~/src';
+import { HiCheckCircle } from 'react-icons/hi';
+
+const code = `
+'use client';
+
+import { List } from 'flowbite-react';
+import { HiCheckCircle } from 'react-icons/hi';
+
+function Component() {
+  return (
+    <List>
+      <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>
+  );
+}
+`;
+
+const codeRSC = `
+import { List, ListItem } from 'flowbite-react';
+import { HiCheckCircle } from 'react-icons/hi';
+
+function Component() {
+  return (
+    <List>
+      <ListItem icon={HiCheckCircle}>At least 10 characters (and up to 100 characters)</ListItem>
+      <ListItem icon={HiCheckCircle}>At least one lowercase character</ListItem>
+      <ListItem icon={HiCheckCircle}>Inclusion of at least one special character, e.g., ! @ # ?</ListItem>
+    </List>
+  );
+}
+`;
+
+function Component() {
+  return (
+    <List>
+      <ListItem icon={HiCheckCircle}>At least 10 characters (and up to 100 characters)</ListItem>
+      <ListItem icon={HiCheckCircle}>At least one lowercase character</ListItem>
+      <ListItem icon={HiCheckCircle}>Inclusion of at least one special character, e.g., ! @ # ?</ListItem>
+    </List>
+  );
+}
+
+export const icon: CodeData = {
+  type: 'single',
+  code: [
+    {
+      fileName: 'client',
+      language: 'tsx',
+      code,
+    },
+    {
+      fileName: 'server',
+      language: 'tsx',
+      code: codeRSC,
+    },
+  ],
+  githubSlug: 'list/list.icon.tsx',
+  component: <Component />,
+};
diff --git a/src/components/List/List.tsx b/src/components/List/List.tsx
index 6a05641f1..3c30b03b2 100644
--- a/src/components/List/List.tsx
+++ b/src/components/List/List.tsx
@@ -1,6 +1,6 @@
 import type { ComponentProps, FC, PropsWithChildren } from 'react';
 import { twMerge } from 'tailwind-merge';
-import type { FlowbiteStateColors } from '../..';
+import type { FlowbiteListItemTheme, FlowbiteStateColors } from '../..';
 import { mergeDeep } from '../../helpers/merge-deep';
 import { getTheme } from '../../theme-store';
 import type { DeepPartial } from '../../types';
@@ -8,6 +8,7 @@ import { ListItem } from './ListItem';
 
 export interface FlowbiteListTheme {
   root: FlowbiteListRootTheme;
+  item: FlowbiteListItemTheme;
 }
 
 export interface FlowbiteListRootTheme {
diff --git a/src/components/List/ListItem.tsx b/src/components/List/ListItem.tsx
index 407532637..eba65a383 100644
--- a/src/components/List/ListItem.tsx
+++ b/src/components/List/ListItem.tsx
@@ -1,20 +1,30 @@
-import type { FC, PropsWithChildren } from 'react';
+import type { ComponentProps, FC } from 'react';
 import { twMerge } from 'tailwind-merge';
 import { mergeDeep } from '../../helpers/merge-deep';
 import { getTheme } from '../../theme-store';
 import type { DeepPartial } from '../../types';
 
 export interface FlowbiteListItemTheme {
-  base: string;
+  icon: string;
+  withIcon: {
+    on: string;
+    off: string;
+  };
 }
 
-export interface ListItemProps extends PropsWithChildren {
-  theme?: DeepPartial<FlowbiteListItemTheme>;
+export interface ListItemProps extends ComponentProps<'li'> {
   className?: string;
+  icon?: FC<ComponentProps<'svg'>>;
+  theme?: DeepPartial<FlowbiteListItemTheme>;
 }
 
-export const ListItem: FC<ListItemProps> = ({ children, className, theme: customTheme = {} }) => {
-  const theme = mergeDeep(getTheme().listGroup.item, customTheme);
+export const ListItem: FC<ListItemProps> = ({ children, className, icon: Icon, theme: customTheme = {}, ...props }) => {
+  const theme = mergeDeep(getTheme().list.item, customTheme);
 
-  return <li className={twMerge(theme.base, className)}>{children}</li>;
+  return (
+    <li className={twMerge(theme.withIcon[Icon ? 'on' : 'off'], className)} {...props}>
+      {Icon && <Icon className={twMerge(theme.icon)} />}
+      {children}
+    </li>
+  );
 };
diff --git a/src/components/List/theme.ts b/src/components/List/theme.ts
index 20e243b80..89b00d9d9 100644
--- a/src/components/List/theme.ts
+++ b/src/components/List/theme.ts
@@ -11,4 +11,11 @@ export const listTheme: FlowbiteListTheme = {
     unstyled: 'list-none',
     nested: 'ps-5 mt-2',
   },
+  item: {
+    withIcon: {
+      off: '',
+      on: 'flex items-center',
+    },
+    icon: 'w-3.5 h-3.5 me-2 flex-shrink-0',
+  },
 };