✨ Add ability to select card body through prop

Author: Frontendland

src/components/Card/Card.astro

@@ -11,6 +11,7 @@ const {
     titleTag = 'span',
     compact,
     className,
+    bodyClassName,
     secondary,
     ...rest
 } = Astro.props
@@ -19,7 +20,13 @@ const classes = [
     styles.card,
     secondary && styles.secondary,
     className
-].filter(Boolean).join(' ')
+]
+
+const bodyClasses = [
+    styles.body,
+    compact && styles.compact,
+    bodyClassName
+]
 
 const Component = element
 const Title = titleTag
@@ -29,7 +36,7 @@ const Title = titleTag
     {title && (
         <Title class:list={styles.title}>{title}</Title>
     )}
-    <div class:list={[styles.body, compact && styles.compact]}>
+    <div class:list={bodyClasses}>
         <slot />
     </div>
 </Component>

src/components/Card/Card.svelte

@@ -10,6 +10,7 @@
     export let titleTag: CardProps['titleTag'] = 'span'
     export let compact: CardProps['compact'] = false
     export let className: CardProps['className'] = ''
+    export let bodyClassName: CardProps['bodyClassName'] = ''
     export let secondary: CardProps['secondary'] = false
 
     const classes = classNames([
@@ -20,7 +21,8 @@
 
     const bodyClasses = classNames([
         styles.body,
-        compact && styles.compact
+        compact && styles.compact,
+        bodyClassName
     ])
 </script>
 

src/components/Card/Card.tsx

@@ -11,6 +11,7 @@ const Card = ({
     TitleTag = 'span',
     compact,
     className,
+    bodyClassName,
     secondary,
     children,
     ...rest
@@ -23,7 +24,8 @@ const Card = ({
 
     const bodyClasses = classNames([
         styles.body,
-        compact && styles.compact
+        compact && styles.compact,
+        bodyClassName
     ])
 
     return (

src/components/Card/card.ts

@@ -4,6 +4,7 @@ export type CardProps = {
     titleTag?: string
     compact?: boolean
     className?: string
+    bodyClassName?: string
     secondary?: boolean
     [key: string]: any
 }