fix: Background color of the Card component #385

src/components/FwbCard/FwbCard.vue

@@ -1,7 +1,7 @@
 <template>
   <component
     :is="wrapperType"
-    :class="cardClasses"
+    :class="[cardClasses, props.class]"
     :href="href"
   >
     <img
@@ -41,6 +41,10 @@ const props = defineProps({
     type: String as PropType<CardsVariant>,
     default: 'default',
   },
+  class: {
+    type: String,
+    default: '',
+  },
 })
 
 const { cardClasses, horizontalImageClasses } = useCardsClasses(toRefs(props))

src/components/FwbCard/composables/useCardClasses.ts

@@ -5,6 +5,7 @@
 export type UseCardsClassesProps = {
   variant: Ref<CardsVariant>
   href?: Ref<string>
+  class?: Ref<string>
 }
 
 export function useCardsClasses (props: UseCardsClassesProps): {
@@ -13,17 +14,20 @@
 } {
   const cardClasses = computed(() => {
     let computedClasses = ''
+
     if (props.variant.value === 'image') {
-      computedClasses = 'max-w-sm bg-white rounded-lg border border-gray-200 shadow-md dark:bg-gray-800 dark:border-gray-700'
+      computedClasses = 'max-w-sm rounded-lg border border-gray-200 shadow-md dark:border-gray-700'
+    } else if (props.variant.value === 'default') {
+      computedClasses = 'block max-w-sm rounded-lg border border-gray-200 shadow-md dark:border-gray-700'
+    } else if (props.variant.value === 'horizontal') {
+      computedClasses = 'flex flex-col items-center rounded-lg border shadow-md md:flex-row md:max-w-xl dark:border-gray-700'
     }
 
-    if (props.variant.value === 'default') {
-      computedClasses = 'block max-w-sm bg-white rounded-lg border border-gray-200 shadow-md dark:bg-gray-800 dark:border-gray-700 '
-    } else if (props.variant.value === 'horizontal') {
-      computedClasses = 'flex flex-col items-center bg-white rounded-lg border shadow-md md:flex-row md:max-w-xl dark:border-gray-700 dark:bg-gray-800'
+    if (!props.class?.value || (!props.class.value.includes('bg-'))) {
+      computedClasses += ' bg-white dark:bg-gray-800';
     }
 
-    if (props.href?.value) {
+    if (props.href?.value && !props.class?.value) {
       computedClasses += ' hover:bg-gray-100 dark:hover:bg-gray-700'
     }