allow titled toast message variant

ArkEcosystem · May 1, 2024 · 1b861e5 · 1b861e5
1 parent 011dcbf
commit 1b861e5
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 11 deletions.
diff --git a/resources/assets/css/_toasts.css b/resources/assets/css/_toasts.css
@@ -3,6 +3,10 @@
         @apply relative inline-flex flex-col sm:flex-row items-center max-w-4xl text-sm select-none text-theme-secondary-900 dark:text-theme-secondary-200 dark:bg-theme-secondary-800 rounded-xl overflow-hidden;
     }
 
+    .toast__titled {
+        @apply relative inline-flex flex-col items-center max-w-4xl text-sm select-none text-theme-secondary-900 dark:text-theme-secondary-200 dark:bg-theme-secondary-800 rounded-xl overflow-hidden;
+    }
+
     .toast-body {
         @apply p-4 text-left mr-4 sm:mt-0;
     }
@@ -11,11 +15,20 @@
         @apply space-x-2 flex items-center px-4 sm:px-0 py-2 sm:py-0 sm:justify-center flex-shrink-0 text-white w-full sm:w-12 sm:h-full;
     }
 
+    .toast-icon__titled {
+        @apply space-x-2 flex items-center px-4 py-2 flex-shrink-0 text-white w-full;
+    }
+
     .toast-button,
     .toast-spinner {
         @apply absolute sm:relative top-0 sm:top-auto right-0 sm:right-auto m-2.5 sm:my-0 sm:ml-0 flex items-center justify-center flex-shrink-0 mr-4 rounded text-theme-secondary-900 dark:text-white sm:dark:text-theme-secondary-600;
     }
 
+    .toast-button__titled,
+    .toast-spinner__titled {
+        @apply absolute top-0 right-0 m-2.5 flex items-center justify-center flex-shrink-0 mr-4 rounded text-theme-secondary-900 dark:text-white sm:dark:text-theme-secondary-600;
+    }
+
     .toast-info {
         @apply bg-theme-primary-50;
     }
@@ -32,19 +45,24 @@
         @apply bg-theme-success-50;
     }
 
-    .toast-info .toast-icon {
+    .toast-info .toast-icon,
+    .toast-info .toast-icon__titled {
         @apply bg-theme-primary-100 dark:bg-theme-primary-700 text-theme-primary-700 dark:text-white;
     }
-    .toast-warning .toast-icon {
+    .toast-warning .toast-icon,
+    .toast-warning .toast-icon__titled {
         @apply bg-theme-warning-100 dark:bg-theme-warning-700 text-theme-warning-900 dark:text-white;
     }
-    .toast-danger .toast-icon {
+    .toast-danger .toast-icon,
+    .toast-danger .toast-icon__titled {
         @apply bg-theme-danger-100 dark:bg-theme-danger-500 text-theme-danger-700 dark:text-white;
     }
-    .toast-hint .toast-icon {
+    .toast-hint .toast-icon,
+    .toast-hint .toast-icon__titled {
         @apply bg-theme-hint-100 dark:bg-theme-hint-700 text-theme-hint-700 dark:text-white;
     }
-    .toast-success .toast-icon {
+    .toast-success .toast-icon,
+    .toast-success .toast-icon__titled {
         @apply bg-theme-success-100 dark:bg-theme-success-700 text-theme-success-700 dark:text-white;
     }
 

diff --git a/resources/views/toast.blade.php b/resources/views/toast.blade.php
@@ -6,6 +6,7 @@
     'alpineClose' => false,
     'target' => null,
     'hideSpinner' => false,
+    'alwaysShowTitle' => false,
 ])
 
 @php
@@ -28,10 +29,30 @@
     ], $type);
 @endphp
 
-<div role="alert" aria-live="polite" {{ $attributes->class(['toast', $toastClass]) }}>
-    <span class="toast-icon">
-        <x-ark-icon :name="$icon" size="sm" />
-        <span class="text-sm font-semibold sm:hidden">{{ $title ?? trans('ui::toasts.'.$type) }}</span>
+<div
+    role="alert"
+    aria-live="polite"
+    {{ $attributes->class([
+        'toast' => ! $alwaysShowTitle,
+        'toast__titled' => $alwaysShowTitle,
+        $toastClass,
+    ]) }}
+>
+    <span @class([
+        'toast-icon' => ! $alwaysShowTitle,
+        'toast-icon__titled' => $alwaysShowTitle,
+    ])>
+        <x-ark-icon
+            :name="$icon"
+            size="sm"
+        />
+
+        <span @class([
+            'text-sm font-semibold',
+            'sm:hidden' => ! $alwaysShowTitle,
+        ])>
+            {{ $title ?? trans('ui::toasts.'.$type) }}
+        </span>
     </span>
 
     <div class="toast-body">
@@ -46,7 +67,10 @@
         @if ($wireClose) wire:click="{{ $wireClose }}" @endif
         @if ($alpineClose) @click="{{ $alpineClose }}" @endif
         type="button"
-        class="toast-button"
+        @class([
+            'toast-button' => ! $alwaysShowTitle,
+            'toast-button__titled' => $alwaysShowTitle,
+        ])
         @if ($target)
         wire:loading.remove
         wire:target="{{ $target }}"
@@ -57,7 +81,10 @@ class="toast-button"
 
     @unless ($hideSpinner)
         <div
-            class="toast-spinner"
+            @class([
+                'toast-spinner' => ! $alwaysShowTitle,
+                'toast-spinner__titled' => $alwaysShowTitle,
+            ])
             @if ($target)
             wire:loading
             wire:target="{{ $target }}"