From 9b2eee6dedd11ba070cc82a42a6306f24d8e0c27 Mon Sep 17 00:00:00 2001
From: Rob de Kort <rob@studio1902.nl>
Date: Mon, 10 Feb 2025 09:24:15 +0100
Subject: [PATCH] Re-use notification partial for form error handling

---
 .../components/_notification.antlers.html     | 33 +++++++++++--------
 .../views/page_builder/_form.antlers.html     |  5 +--
 2 files changed, 22 insertions(+), 16 deletions(-)

diff --git a/export/resources/views/components/_notification.antlers.html b/export/resources/views/components/_notification.antlers.html
index 73e1362e..b5888f13 100644
--- a/export/resources/views/components/_notification.antlers.html
+++ b/export/resources/views/components/_notification.antlers.html
@@ -1,8 +1,8 @@
 {{#
     @name Notification
     @desc The notification component. Currently used in `resources/views/page_builder/_form.antlers.html`.
-    @param* content The notification content.
     @param* type The type of notification: `success`, `notice`, or `error`.
+    @param content The notification content.
     @param class Add custom CSS classes.
 #}}
 
@@ -18,6 +18,7 @@
         )}}
         {{ class }}
     "
+    {{ slot:attributes }}
 >
     <div class="flex">
         <div class="shrink-0">
@@ -37,19 +38,23 @@
             }}
         </div>
         <div class="ml-3">
-            <h3
-                class="
-                    text-sm leading-5 font-bold
-                    {{ switch(
-                        (type == 'success') => 'text-green-800',
-                        (type == 'notice') => 'text-yellow-800',
-                        (type == 'error') => 'text-red-800',
-                        () => 'text-gray-800'
-                    )}}
-                "
-            >
-                {{ content }}
-            </h3>
+            {{ if content }}
+                <h3
+                    class="
+                        text-sm leading-5 font-bold
+                        {{ switch(
+                            (type == 'success') => 'text-green-800',
+                            (type == 'notice') => 'text-yellow-800',
+                            (type == 'error') => 'text-red-800',
+                            () => 'text-gray-800'
+                        )}}
+                    "
+                >
+                    {{ content }}
+                </h3>
+            {{ /if }}
+
+            {{ slot }}
         </div>
     </div>
 </div>
diff --git a/export/resources/views/page_builder/_form.antlers.html b/export/resources/views/page_builder/_form.antlers.html
index 04b5c4bd..3cfcd2fa 100644
--- a/export/resources/views/page_builder/_form.antlers.html
+++ b/export/resources/views/page_builder/_form.antlers.html
@@ -17,7 +17,8 @@
                 <div x-data="formHandler()" class="flex flex-col gap-8" x-cloak>
                     {{# Error notifications. #}}
                     <template x-if="form.hasErrors && submitted">
-                        <div id="summary" role="group" class="rounded-sm border p-4 bg-red-50 border-red-700">
+                        {{ partial:components/notification type="error" }}
+                            {{ slot:attributes }}id="summary" role="group"{{ /slot:attributes }}
                             <h3 class="mb-2 leading-5 font-bold text-red-700">{{ trans:strings.form_error }}</h3>
                             <ul class="list-disc list-inside marker:text-red-700">
                                 <template x-for="(error, index) in form.errors">
@@ -26,7 +27,7 @@ <h3 class="mb-2 leading-5 font-bold text-red-700">{{ trans:strings.form_error }}
                                     </li>
                                 </template>
                             </ul>
-                        </div>
+                        {{ /partial:components/notification }}
                     </template>
 
                     {{# Success notifications. #}}