feat(theme): card theme component

Author: Ricardo Lüders

src/lib/components/Card/Card.spec.tsx

@@ -43,7 +43,9 @@ describe('Components / Card', () => {
     it('should use `base` classes', () => {
       const theme = {
         card: {
-          base: 'text-blue-100',
+          root: {
+            base: 'text-blue-100',
+          },
         },
       };
       render(
@@ -58,7 +60,9 @@ describe('Components / Card', () => {
     it('should use `children` classes', () => {
       const theme = {
         card: {
-          children: 'text-blue-900',
+          root: {
+            children: 'text-blue-900',
+          },
         },
       };
       render(
@@ -76,9 +80,11 @@ describe('Components / Card', () => {
     it('should use `horizontal` classes', () => {
       const theme = {
         card: {
-          horizontal: {
-            off: 'text-blue-200',
-            on: 'text-blue-300',
+          root: {
+            horizontal: {
+              off: 'text-blue-200',
+              on: 'text-blue-300',
+            },
           },
         },
       };
@@ -98,7 +104,9 @@ describe('Components / Card', () => {
     it('should use `href` classes', () => {
       const theme = {
         card: {
-          href: 'text-blue-700',
+          root: {
+            href: 'text-blue-700',
+          },
         },
       };
       render(

src/lib/components/Card/Card.tsx

@@ -1,21 +1,29 @@
 import classNames from 'classnames';
 import type { ComponentProps, FC, PropsWithChildren } from 'react';
+import { DeepPartial } from '..';
+import { mergeDeep } from '../../helpers/mergeDeep';
 import { useTheme } from '../Flowbite/ThemeContext';
 
 export interface FlowbiteCardTheme {
+  root: FlowbiteCardRootTheme;
+  img: FlowbiteCardImageTheme;
+}
+
+export interface FlowbiteCardRootTheme {
   base: string;
   children: string;
   horizontal: {
     off: string;
     on: string;
   };
   href: string;
-  img: {
-    base: string;
-    horizontal: {
-      off: string;
-      on: string;
-    };
+}
+
+export interface FlowbiteCardImageTheme {
+  base: string;
+  horizontal: {
+    off: string;
+    on: string;
   };
 }
 
@@ -24,6 +32,7 @@ export interface CardProps extends PropsWithChildren<ComponentProps<'div'>> {
   href?: string;
   imgAlt?: string;
   imgSrc?: string;
+  theme?: DeepPartial<FlowbiteCardTheme>;
 }
 
 export const Card: FC<CardProps> = ({
@@ -33,16 +42,22 @@ export const Card: FC<CardProps> = ({
   href,
   imgAlt,
   imgSrc,
+  theme: customTheme = {},
   ...props
 }): JSX.Element => {
-  const theme = useTheme().theme.card;
-
   const Component = typeof href === 'undefined' ? 'div' : 'a';
   const theirProps = props as object;
 
+  const theme = mergeDeep(useTheme().theme.card, customTheme);
+
   return (
     <Component
-      className={classNames(theme.base, theme.horizontal[horizontal ? 'on' : 'off'], href && theme.href, className)}
+      className={classNames(
+        theme.root.base,
+        theme.root.horizontal[horizontal ? 'on' : 'off'],
+        href && theme.root.href,
+        className,
+      )}
       data-testid="flowbite-card"
       href={href}
       {...theirProps}
@@ -54,7 +69,7 @@ export const Card: FC<CardProps> = ({
           src={imgSrc}
         />
       )}
-      <div className={theme.children}>{children}</div>
+      <div className={theme.root.children}>{children}</div>
     </Component>
   );
 };

src/lib/theme/default.ts

@@ -269,13 +269,15 @@ const theme: FlowbiteTheme = {
     },
   },
   card: {
-    base: 'flex rounded-lg border border-gray-200 bg-white shadow-md dark:border-gray-700 dark:bg-gray-800',
-    children: 'flex h-full flex-col justify-center gap-4 p-6',
-    horizontal: {
-      off: 'flex-col',
-      on: 'flex-col md:max-w-xl md:flex-row',
+    root: {
+      base: 'flex rounded-lg border border-gray-200 bg-white shadow-md dark:border-gray-700 dark:bg-gray-800',
+      children: 'flex h-full flex-col justify-center gap-4 p-6',
+      horizontal: {
+        off: 'flex-col',
+        on: 'flex-col md:max-w-xl md:flex-row',
+      },
+      href: 'hover:bg-gray-100 dark:hover:bg-gray-700',
     },
-    href: 'hover:bg-gray-100 dark:hover:bg-gray-700',
     img: {
       base: '',
       horizontal: {