refactor(ui): card component can pass props to its alert component

front/src/components/ui/Alert.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { type PastelProps, color } from '~/composables/color'
 
-type Props = PastelProps
+export type Props = PastelProps
 
 const props = defineProps<Props>()
 </script>

front/src/components/ui/Card.vue

@@ -7,6 +7,7 @@ import { type WidthProps, width } from '~/composables/width'
 
 import Pill from './Pill.vue'
 import Alert from './Alert.vue'
+import { type Props as AlertProps } from './Alert.vue'
 import Layout from './Layout.vue';
 import Spacer from './Spacer.vue';
 
@@ -17,6 +18,8 @@ const props = defineProps<{
   tags?: string[]
   image?: string | { src: string, style?: "withPadding" }
   icon?: string
+
+  alertProps?: AlertProps
 } & Partial<RouterLinkProps>
   & (PastelProps | ColorProps | DefaultProps)
   & RaisedProps
@@ -81,7 +84,7 @@ const attributes = computed(() =>
     <!-- Content -->
 
     <!--TODO: Pass Alert colors through to card.vue -->
-    <Alert blue v-if="$slots.alert" :class="$style.alert">
+    <Alert v-bind="alertProps" v-if="$slots.alert" :class="$style.alert">
       <slot name="alert" />
     </Alert>
 

front/ui-docs/components/ui/card.md

@@ -4,14 +4,12 @@
   import Layout from '~/components/ui/Layout.vue'
   import OptionsButton from '~/components/ui/button/Options.vue'
   import Spacer from '~/components/ui/Spacer.vue'
-  // import { useRoute } from 'vue-router'
 
   const alert = ( message: string ) => window.alert(message)
-  // const router = useRouter()
 </script>
 
 ```ts
-import Card from "~/components/ui/Card.vue"
+import Card from "~/components/ui/Card.vue";
 ```
 
 # Card
@@ -28,6 +26,8 @@ Funkwhale cards are used to contain textual information, links, and interactive
   tags?: string[]
   image?: string | { src: string, style?: "withPadding" }
   icon?: string
+
+  alertProps?: PastelProps
 } & Partial<RouterLinkProps>
   & (PastelProps | ColorProps | DefaultProps)
   & RaisedProps
@@ -185,7 +185,7 @@ You can combine this prop with any other prop configuration. If you combine it w
 ## Add an Alert
 
 ```vue-html{2-4}
-<Card title="Your Collection">
+<Card title="Your Collection" :alertProps="{ red: true }">
   <template #alert>
     Please annotate all items with the required metadata.
   </template>
@@ -193,11 +193,17 @@ You can combine this prop with any other prop configuration. If you combine it w
 ```
 
 <div class="preview">
-<Card title="Your Collection">
+<Card title="Your Collection" :alertProps="{ red: true }">
   <template #alert>Please annotate all items with the required metadata.</template>
 </Card>
 </div>
 
+::: info
+
+To add props to the alert, add the `alert-props` property to the card. Check out [the Alert component docs](/components/ui/alert) to find out which props are supported
+
+:::
+
 ## Add a topright action
 
 ```vue-html
@@ -331,6 +337,15 @@ title="For music lovers"
 Access your personal music collection from anywhere. Funkwhale gives you access to publication and sharing tools that you can use to promote your content across the web.
 </Card></div>
 
-### Sizes
+### Add color (optional)
 
-`large` (304px), `medium` (208px), `auto`, `small`
+- Choose a color: `default`, `primary`, `secondary`, `destructive`, or a Pastel (red, yellow, purple, green or blue)
+- Choose a variant: `raised`, `solid`, `outline`,...
+
+Read more: [Using Color](/using-color)
+
+### Set size (optional)
+
+`large` (304px), `medium` (208px), `auto`, `small`, ...
+
+Read more: [Using Width](/using-width)