From ec8742369520c5dce60df97c7a9080eace06c080 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julian-Samuel=20Geb=C3=BChr?= <julian-samuel@gebuehr.net>
Date: Mon, 8 May 2023 14:09:56 +0200
Subject: [PATCH] Add info NoteCard
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Julian-Samuel Gebühr <julian-samuel@gebuehr.net>
Co-Authored-By: Simon L. <szaimen@e.mail.de>
Co-Authored-By: Raimund Schlüßler <raimund.schluessler+github@mailbox.org>
---
 src/components/NcNoteCard/NcNoteCard.vue | 19 +++++++++++++++++--
 1 file changed, 17 insertions(+), 2 deletions(-)

diff --git a/src/components/NcNoteCard/NcNoteCard.vue b/src/components/NcNoteCard/NcNoteCard.vue
index 3711fc8b4f..e7b0c3a8d2 100644
--- a/src/components/NcNoteCard/NcNoteCard.vue
+++ b/src/components/NcNoteCard/NcNoteCard.vue
@@ -20,9 +20,10 @@
 
 <docs>
 This component is made to display additional information to the user. It is
-available in three versions:
+available in four versions:
 
 - success: Display a successful message
+- info: Display an informational message
 - warning: Display a warning to the user. This indicate that the action they want
 - error: Display an error message. For example
 
@@ -41,6 +42,10 @@ When using an error type,
 	<NcNoteCard type="success">
 		<p>You won</p>
 	</NcNoteCard>
+
+	<NcNoteCard type="info">
+		<p>For your information</p>
+	</NcNoteCard>
 </div>
 ```
 </docs>
@@ -66,6 +71,7 @@ When using an error type,
 import CheckboxMarkedCircle from 'vue-material-design-icons/CheckboxMarkedCircle.vue'
 import AlertDecagram from 'vue-material-design-icons/AlertDecagram.vue'
 import Alert from 'vue-material-design-icons/Alert.vue'
+import Information from 'vue-material-design-icons/Information.vue'
 
 export default {
 	name: 'NcNoteCard',
@@ -77,7 +83,7 @@ export default {
 		type: {
 			type: String,
 			default: 'warning',
-			validator: type => ['success', 'warning', 'error'].includes(type),
+			validator: type => ['success', 'info', 'warning', 'error'].includes(type),
 		},
 		showAlert: {
 			type: Boolean,
@@ -98,6 +104,8 @@ export default {
 				return AlertDecagram
 			case 'success':
 				return CheckboxMarkedCircle
+			case 'info':
+				return Information
 			case 'warning':
 				return Alert
 			default:
@@ -110,6 +118,8 @@ export default {
 				return 'var(--color-error)'
 			case 'success':
 				return 'var(--color-success)'
+			case 'info':
+				return 'var(--color-info)'
 			case 'warning':
 				return 'var(--color-warning)'
 			default:
@@ -143,6 +153,11 @@ export default {
 		--note-theme: var(--color-success);
 	}
 
+	&--info {
+		--note-background: rgba(var(--color-info-rgb), 0.1);
+		--note-theme: var(--color-info);
+	}
+
 	&--error {
 		--note-background: rgba(var(--color-error-rgb), 0.1);
 		--note-theme: var(--color-error);