Todo

addon/components/pix-toast-container.hbs

@@ -0,0 +1,8 @@
+<div class="pix-toast-container">
+  {{#if this.pixToast.content}}
+    <PixToast
+      @message={{this.pixToast.content.message}}
+      @ariaLabelForCloseButton={{this.pixToast.content.ariaLabel}}
+    />
+  {{/if}}
+</div>

addon/components/pix-toast-container.js

@@ -0,0 +1,6 @@
+import Component from '@glimmer/component';
+import { service } from '@ember/service';
+
+export default class PixToastContainer extends Component {
+  @service pixToast;
+}

addon/components/pix-toast.hbs

@@ -1,12 +1,9 @@
-<div
-  class="pix-toast {{concat 'pix-toast--' this.type}} {{unless @showToast ' pix-toast--hidden'}}"
-  ...attributes
->
+<div class="pix-toast {{concat 'pix-toast--' this.type}}" ...attributes>
   <div class="pix-toast__icon {{concat 'pix-toast__icon--' this.type}}">
     <FaIcon @icon={{this.iconClass}} />
   </div>
   <p class="pix-toast__content">
-    {{yield}}
+    {{@message}}
   </p>
   <div class="pix-toast__close-button-container">
     <PixIconButton

addon/components/pix-toast.js

@@ -1,21 +1,25 @@
 import Component from '@glimmer/component';
 import { service } from '@ember/service';
 import { action } from '@ember/object';
+import { warn } from '@ember/debug';
 const TYPE_SUCCESS = 'success';
 const TYPE_ERROR = 'error';
 const TYPE_INFORMATION = 'information';
 const TYPE_WARNING = 'warning';
 
 export default class PixToast extends Component {
-  @service toast;
+  @service pixToast;
 
   get type() {
     const correctTypes = [TYPE_SUCCESS, TYPE_ERROR, TYPE_INFORMATION, TYPE_WARNING];
-    const isACorrectType = correctTypes.includes(this.args.type);
-    if (!isACorrectType) {
-      throw new Error('ERROR in PixToast component, you need to provide a type.');
-    }
-    return this.args.type;
+    warn(
+      'PixToast: you need to provide a type',
+      [correctTypes].includes(this.args.type),
+      {
+        id: 'pix-ui.toast.type.not-provided',
+      },
+    );
+    return this.args.type ?? 'success';
   }
 
   get iconClass() {
@@ -32,6 +36,6 @@ export default class PixToast extends Component {
   removeNotification(event) {
     event.preventDefault();
     event.stopPropagation();
-    this.toast.removeNotification(this.toast);
+    this.pixToast.removeNotification(this.pixToast.content);
   }
 }

addon/services/pix-toast.js

@@ -1,63 +1,65 @@
 import Service from '@ember/service';
-import { A } from '@ember/array';
 import EmberObject from '@ember/object';
+import { tracked } from '@glimmer/tracking';
 
 export default class ToastService extends Service {
-  content = A();
+  @tracked content= undefined;
+
   addNotification(options) {
     if (!options.message) {
       throw new Error('No notification message provided');
     }
 
-    const notification = EmberObject.create({
+    const toast =  EmberObject.create({
+      ariaLabel: options.ariaLabel,
       message: options.message,
       type: options.type || 'success',
       onClick: options.onClick,
       htmlContent: options.htmlContent || false,
     });
 
-    this.content.pushObject(notification);
+    this.content = toast;
 
-    return notification;
+    return toast;
   }
 
-  sendErrorNotification(message, options) {
+  sendErrorNotification({ message, options }) {
     return this.addNotification({
       ...options,
       message,
       type: 'error',
     });
   }
 
-  sendSuccessNotification(message, options) {
+  sendSuccessNotification({ message, options }) {
     return this.addNotification({
       ...options,
       message,
       type: 'success',
     });
   }
 
-  sendInformationNotification(message, options) {
+  sendInformationNotification({ message, options }) {
     return this.addNotification({
       ...options,
       message,
       type: 'information',
     });
   }
 
-  sendWarningNotification(message, options) {
+  sendWarningNotification({ message, options }) {
     return this.addNotification({
       ...options,
       message,
       type: 'warning',
     });
   }
 
-  removeNotification(notification) {
-    if (!notification) {
+  removeNotification(toast) {
+    if (!toast) {
       return;
     }
 
-    notification.set('dismiss', true);
+    toast.destroy();
   }
 }

addon/styles/_pix-toast.scss

@@ -1,19 +1,10 @@
 .pix-toast {
-  position: fixed;
-  right: 12px;
-  bottom: 30px;
-  z-index: 1000;
   display: flex;
   max-width: 400px;
   margin: 0 auto;
   border-radius: 5px;
   transition: all 0.3s ease-in-out;
 
-  &--hidden {
-    visibility: hidden;
-    opacity: 0;
-  }
-
   &--error {
     color: var(--pix-error-700);
     background-color: var(--pix-error-50);
@@ -138,3 +129,10 @@
     }
   }
 }
+
+.pix-toast-container {
+  position: fixed;
+  right: 12px;
+  bottom: 30px;
+  z-index: 1000;
+}

app/components/pix-toast-container.js

@@ -0,0 +1 @@
+export { default } from '@1024pix/pix-ui/components/pix-toast-container';

app/stories/pix-toast.stories.js

@@ -5,14 +5,9 @@ export default {
   render: (args) => ({
     template: hbs`<PixToast
   @type={{this.type}}
-  @showToast={{this.showToast}}
+  @message={{this.message}}
   @ariaLabelForCloseButton='Fermer'
-  @onCloseButtonClick={{fn (mut this.showToast)}}
->
-  ed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,
-  totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae
-  dicta sunt explicabo.
-</PixToast>`,
+/>`,
     context: args,
   }),
   argTypes: {
@@ -21,16 +16,6 @@ export default {
       description: 'Type de la notification : success, error, information, warning',
       type: { name: 'string', required: true },
     },
-    onCloseButtonClick: {
-      name: 'onCloseButtonClick',
-      description: 'Fonction à exécuter à la fermeture de la notification',
-      type: { name: 'function', required: true },
-    },
-    showToast: {
-      name: 'showToast',
-      description: "Gérer l'affichage de la notification",
-      type: { name: 'boolean', required: true },
-    },
     ariaLabelForCloseButton: {
       name: 'ariaLabelForCloseButton',
       description: 'Aria-label pour le bouton de fermeture de la notification',
@@ -42,34 +27,30 @@ export default {
 export const success = {
   args: {
     type: 'success',
-    showToast: true,
+    message: "ed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,\n  totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae\n  dicta sunt explicabo.",
     ariaLabelForCloseButton: 'Fermer',
-    onCloseButtonClick: () => {},
   },
 };
 export const error = {
   args: {
     type: 'error',
-    showToast: true,
+    message: "ed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,\n  totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae\n  dicta sunt explicabo.",
     ariaLabelForCloseButton: 'Fermer',
-    onCloseButtonClick: () => {},
   },
 };
 
 export const information = {
   args: {
     type: 'information',
-    showToast: true,
+    message: "ed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,\n  totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae\n  dicta sunt explicabo.",
     ariaLabelForCloseButton: 'Fermer',
-    onCloseButtonClick: () => {},
   },
 };
 
 export const warning = {
   args: {
     type: 'warning',
-    showToast: true,
+    message: "ed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,\n  totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae\n  dicta sunt explicabo.",
     ariaLabelForCloseButton: 'Fermer',
-    onCloseButtonClick: () => {},
   },
 };