Add success-toast

app/components/success-toast.hbs

@@ -0,0 +1,19 @@
+<Toast>
+  <div class='inline-flex flex-shrink-0 justify-center items-center self-start'>
+    <Icons::Loading @spin={{true}} class='mr-4' />
+  </div>
+
+  <div>
+    {{@text}}
+  </div>
+
+  <button
+    type='button'
+    class='ml-auto self-start'
+    {{! data-dismiss-target='#toast-default' }}
+    aria-label='Close'
+    {{on 'click' @onClose}}
+  >
+    <Icons::Close />
+  </button>
+</Toast>

app/components/success-toast.js

@@ -0,0 +1,3 @@
+import Component from '@glimmer/component';
+
+export default class SuccessToastComponent extends Component {}

app/components/toast.hbs

@@ -2,26 +2,8 @@
   <div
     class='flex items-center p-4 w-full max-w-xs border rounded shadow-sm'
     role='alert'
-    {{did-insert this.registerInPlate}}
+    {{did-insert this.registerInQueue}}
   >
-    <div
-      class='inline-flex flex-shrink-0 justify-center items-center self-start'
-    >
-      <Icons::Loading @spin={{true}} class='mr-4' />
-    </div>
-
-    <div>
-      {{@text}}
-    </div>
-
-    <button
-      type='button'
-      class='ml-auto self-start'
-      {{! data-dismiss-target='#toast-default' }}
-      aria-label='Close'
-      {{on 'click' this.triggerOnClose}}
-    >
-      <Icons::Close />
-    </button>
+    {{yield (hash triggerOnClose=this.triggerOnClose)}}
   </div>
 {{/in-element}}

app/components/toast.js

@@ -12,7 +12,7 @@ export default class ToastComponent extends Component {
   }
 
   @action
-  registerInPlate() {
+  registerInQueue() {
     this.toasts.add(this);
 
     registerDestructor(this, () => {

app/services/toasts.js

@@ -1,12 +1,12 @@
 import Service from '@ember/service';
 import { tracked } from '@glimmer/tracking';
-import Toast from '../components/toast';
+import SuccessToast from '../components/success-toast';
 import { hbs } from 'ember-template-imports';
 import { fn } from '@ember/helper';
 
 export default class ToastsService extends Service {
   @tracked container = [];
-  @tracked plate = [];
+  @tracked queue = [];
 
   constructor() {
     super();
@@ -21,7 +21,7 @@ export default class ToastsService extends Service {
       this.container = this.container.filter((item) => item !== wrapper);
     };
 
-    const wrapper = hbs`<Toast @text={{text}} @onClose={{onClose}} />`;
+    const wrapper = hbs`<SuccessToast @text={{text}} @onClose={{onClose}} />`;
 
     this.container = this.container.concat([wrapper]);
   }

tests/integration/components/success-toast-test.js

@@ -0,0 +1,26 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'meiliadmin/tests/helpers';
+import { render } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+
+module('Integration | Component | success-toast', function (hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders', async function (assert) {
+    // Set any properties with this.set('myProperty', 'value');
+    // Handle any actions with this.set('myAction', function(val) { ... });
+
+    await render(hbs`<SuccessToast />`);
+
+    assert.dom(this.element).hasText('');
+
+    // Template block usage:
+    await render(hbs`
+      <SuccessToast>
+        template block text
+      </SuccessToast>
+    `);
+
+    assert.dom(this.element).hasText('template block text');
+  });
+});