From eb35514e1d1260dab1e9b067e9dcfaa68aec323f Mon Sep 17 00:00:00 2001
From: Ferdinand Thiessen <opensource@fthiessen.de>
Date: Fri, 2 Aug 2024 03:52:10 +0200
Subject: [PATCH] feat(NcNoteCard): Add `text` prop to pass the content of the
 note card

Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>
---
 src/components/NcNoteCard/NcNoteCard.vue | 43 +++++++++++++++---------
 1 file changed, 28 insertions(+), 15 deletions(-)

diff --git a/src/components/NcNoteCard/NcNoteCard.vue b/src/components/NcNoteCard/NcNoteCard.vue
index cbeb3a7571..b11d2e2481 100644
--- a/src/components/NcNoteCard/NcNoteCard.vue
+++ b/src/components/NcNoteCard/NcNoteCard.vue
@@ -14,30 +14,31 @@ available in four versions:
 
 When using an error type,
 
+### Usage
+
 ```vue
 <template>
 	<div>
-		<NcNoteCard type="warning">
-			<p>This is dangerous</p>
-		</NcNoteCard>
+		<NcNoteCard type="warning" text="This is dangerous" />
 
-		<NcNoteCard type="error" heading="Error">
-			<p>The server is not happy and reported the following error</p>
-		</NcNoteCard>
+		<NcNoteCard type="error"
+			heading="Error"
+			text="The server is not happy and reported the following error" />
 
-		<NcNoteCard type="success">
-			<p>You won</p>
-		</NcNoteCard>
+		<NcNoteCard type="success" text="You won" />
 
-		<NcNoteCard type="info">
-			<p>For your information</p>
-		</NcNoteCard>
+		<NcNoteCard type="info" text="For your information" />
 
-		<NcNoteCard type="warning">
+		<h4>Custom icon</h4>
+		<NcNoteCard type="warning" text="Custom icon usage">
 			<template #icon>
 				<Cog :size="20"/>
 			</template>
-			<p>Custom icon usage</p>
+		</NcNoteCard>
+
+		<h4>Custom content using the default slot</h4>
+		<NcNoteCard type="info">
+			Press <kbd>CTRL</kbd>+<kbd>C</kbd>
 		</NcNoteCard>
 	</div>
 </template>
@@ -69,7 +70,12 @@ When using an error type,
 			<h2 v-if="heading">
 				{{ heading }}
 			</h2>
-			<slot />
+			<!-- @slot The main content (overwrites the `text` prop) -->
+			<slot>
+				<p class="notecard__text">
+					{{ text }}
+				</p>
+			</slot>
 		</div>
 	</div>
 </template>
@@ -100,6 +106,13 @@ export default {
 			type: String,
 			default: '',
 		},
+		/**
+		 * The message text of the note card
+		 */
+		text: {
+			type: String,
+			default: '',
+		},
 	},
 	computed: {
 		shouldShowAlert() {