feat: add new toast component with icons

Author: Lewis Youl

app/javascript/controllers/toast_controller.js

@@ -2,8 +2,7 @@ import { Controller } from 'stimulus';
 import axios from 'axios';
 
 export default class extends Controller {
-  static targets = ["toast", "message"];
-  static classes = ["notice", "alert"];
+  static targets = ["toast", "message", "noticeIcon", "alertIcon"];
 
   connect() {
     this.element[this.identifier] = this
@@ -34,15 +33,35 @@ export default class extends Controller {
 
   display(message, type = 'notice') {
     this.messageTarget.innerHTML = message
-    this.element.classList.remove(this.noticeClass, this.alertClass)
-    this.element.classList.add(this[`${type}Class`])
+    this.displayIconForToastType(type)
+    this.showToast()
+  }
+  
+  showToast() {
     this.toastTarget.classList.remove('hidden')
-    setTimeout(() => this.hideToast(), 3000)
+
+    this.setToastTimeout()
   }
 
   hideToast() {
     this.toastTarget.classList.add('hidden')
   }
+
+  displayIconForToastType(type) {
+    this.iconTargets.forEach(this.hideIcon)
+
+    this[`${type}IconTarget`].classList.remove('hidden')
+  }
+
+  hideIcon(iconTarget) {
+    iconTarget.classList.add('hidden')
+  }
+
+  setToastTimeout() {
+    const toastTimeoutInMilliseconds = 10000
+
+    setTimeout(() => this.hideToast(), toastTimeoutInMilliseconds)
+  }
 
   get notice() {
     return this.data.get('notice')
@@ -51,4 +70,8 @@ export default class extends Controller {
   get alert() {
     return this.data.get('alert')
   }
+
+  get iconTargets() {
+    return [this.noticeIconTarget, this.alertIconTarget]
+  }
 }

app/views/shared/_toast.html.erb

@@ -3,8 +3,6 @@
 <div
   class="z-20 fixed bottom-0 left-0 right-0 mx-auto mb-4 max-w-sm w-full bg-white shadow-lg rounded-lg pointer-events-auto ring-1 ring-black ring-opacity-5 overflow-hidden hidden"
   id="toast"
-  data-toast-notice-class="''"
-  data-toast-alert-class="''"
   data-controller="toast"
   data-toast-target="toast"
   data-toast-notice="<%= notice %>"
@@ -13,20 +11,21 @@
   <div class="p-4">
     <div class="flex items-start">
       <div class="flex-shrink-0">
-        <!-- Heroicon name: outline/check-circle -->
-        <svg class="h-6 w-6 text-green-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
+        <svg data-toast-target="noticeIcon" class="hidden h-6 w-6 text-green-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
           <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
         </svg>
+        <svg data-toast-target="alertIcon" class="hidden w-6 h-6 text-red-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+        </svg>
       </div>
       <div class="ml-3 w-0 flex-1 pt-0.5">
-        <p class="text-sm font-medium text-gray-900" data-toast-target="message">
-          Successfully saved!
-        </p>
+        <p class="text-sm font-medium text-gray-900" data-toast-target="message"></p>
       </div>
       <div class="ml-4 flex-shrink-0 flex">
-        <button class="bg-white rounded-md inline-flex text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
-          <span class="sr-only">Close</span>
-          <!-- Heroicon name: solid/x -->
+        <button
+          class="bg-white rounded-md inline-flex text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
+          data-action="click->toast#hideToast"
+        >
           <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
             <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" />
           </svg>