From a19c46600faf65770051a73937f9c01e791087c9 Mon Sep 17 00:00:00 2001
From: Alexis <alexis.boulerice@montreal.ca>
Date: Wed, 5 Jun 2024 09:31:17 -0400
Subject: [PATCH] Ajustement exemple Toast et comportement de fermeture (#120)

Signed-off-by: Alexis Boulerice <alexis.boulerice@ville.montreal.qc.ca>
---
 CHANGELOG.md                                  |  3 ++
 .../buttons/_button-icon.mustache             |  2 +-
 .../02-components/toasts/01-toasts.json       | 28 ++++++++-----------
 .../02-components/toasts/_toast.mustache      |  7 +++--
 source/css/scss/_toasts.scss                  |  9 ++++++
 source/js/vdm-bao.js                          |  4 +++
 6 files changed, 33 insertions(+), 20 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index cb0c962e9..92320f193 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -9,6 +9,9 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 ## Added
 - Components - Tuiles: Ajout d'une classe card-link-icon pour gerer le link label pour tuile horizontale document et tuile en vedette.
 
+## Fixed
+- Components - Toasts: Ajustement fonction fermeture et styles boutons.
+
 
 ## [5.4.0] - 2024-05-30
 
diff --git a/source/_patterns/02-components/buttons/_button-icon.mustache b/source/_patterns/02-components/buttons/_button-icon.mustache
index 7eb47253e..9d76f1f41 100644
--- a/source/_patterns/02-components/buttons/_button-icon.mustache
+++ b/source/_patterns/02-components/buttons/_button-icon.mustache
@@ -1,4 +1,4 @@
-<button type="{{ buttonType }}" class="btn {{ buttonClass }}" {{# ariaLabel}} aria-label="{{ariaLabel}}"{{/ariaLabel}}{{ buttonState }}{{# dataToggle }} data-toggle="{{dataToggle}}"{{/ dataToggle}}{{# dataTarget }} data-target="{{dataTarget}}"{{/ dataTarget}}{{# dataExtras}} {{{dataExtras}}}{{/dataExtras}}>
+<button type="{{ buttonType }}" class="btn {{ buttonClass }}" {{# ariaLabel}} aria-label="{{ariaLabel}}"{{/ ariaLabel}}{{ buttonState }}{{# dataToggle }} data-toggle="{{dataToggle}}"{{/ dataToggle}}{{# dataTarget }} data-target="{{dataTarget}}"{{/ dataTarget}}{{# dataExtras}} {{{dataExtras}}}{{/ dataExtras}}>
   {{# buttonIcon }}
     <span class="icon {{icon-name}}" aria-hidden="true"></span>
   {{/ buttonIcon}}
diff --git a/source/_patterns/02-components/toasts/01-toasts.json b/source/_patterns/02-components/toasts/01-toasts.json
index 2421978b1..69d8b7d16 100644
--- a/source/_patterns/02-components/toasts/01-toasts.json
+++ b/source/_patterns/02-components/toasts/01-toasts.json
@@ -10,29 +10,23 @@
       "toastClass": "toast-success",
       "toastIcon": "icon-check-circle",
       "toast-body": "Message qui définit la longueur de la boîte.",
-      "showActions": {
-        "btnAction": {
-          "buttonClass": false,
-          "buttonText": "Libellé"
-        }
+      "showActions": true,
+      "btnAction": {
+        "buttonClass": false,
+        "buttonText": "Libellé"
       }
     },
     {
       "toastClass": "toast-danger",
       "toastIcon": "icon-error",
       "toast-body": "Message qui définit la longueur de la boîte.",
-      "showActions": {
-        "btnSwapLabel": {
-          "buttonClass": "btn-swap-label-sm",
-          "buttonIconSr": false,
-          "buttonText": "Libellé",
-          "icon-name": "icon-refresh",
-          "buttonIcon": true,
-          "dataToggle": false,
-          "dataTarget": false
-        },
-        "btnDismiss": true
-      }
+      "showActions": true,
+      "btnSwapLabel": {
+        "buttonClass": "btn-swap-label-sm",
+        "buttonText": "Libellé",
+        "icon-name": "icon-refresh"
+      },
+      "btnDismiss": true
     }
   ]
 }
diff --git a/source/_patterns/02-components/toasts/_toast.mustache b/source/_patterns/02-components/toasts/_toast.mustache
index 434f3692d..5ccdc9ddb 100644
--- a/source/_patterns/02-components/toasts/_toast.mustache
+++ b/source/_patterns/02-components/toasts/_toast.mustache
@@ -1,4 +1,4 @@
-<div class="toast show{{# toastClass}} {{toastClass}}{{/toastClass}}" role="alert" aria-live="assertive" aria-atomic="true">
+<div class="toast fade show{{# toastClass}} {{toastClass}}{{/toastClass}}" role="alert" aria-live="assertive" aria-atomic="true">
   <div class="toast-icon">
     <span class="icon {{toastIcon}}" aria-hidden="true"></span>
   </div>
@@ -11,7 +11,10 @@
     {{> components-button}}
     {{/ btnAction}}
     {{# btnSwapLabel}}
-    {{> components-button-icon}}
+    <button type="button" class="btn {{ buttonClass }}" aria-label="{{ buttonText }}">
+      <span class="icon {{ icon-name }}" aria-hidden="true"></span>
+      <span class="btn-label">{{ buttonText }}</span>
+    </button>
     {{/ btnSwapLabel}}
     {{# btnDismiss}}
     <button type="button" class="btn btn-icon" data-dismiss="toast" aria-label="Fermer">
diff --git a/source/css/scss/_toasts.scss b/source/css/scss/_toasts.scss
index 411894ffd..8de5e80a5 100644
--- a/source/css/scss/_toasts.scss
+++ b/source/css/scss/_toasts.scss
@@ -14,8 +14,13 @@
     margin-bottom: $toast-padding-x;
   }
 
+  &.fade {
+    display: inline-flex;
+  }
+
   &.showing {
     opacity: 1;
+    display: inline-flex;
   }
 
   &.show {
@@ -53,10 +58,14 @@
   .btn + .btn {
     margin-left: .5rem;
   }
+
   .btn {
     @extend .btn-reversed;
     @extend .btn-squared;
     @extend .btn-tertiary;
+    .icon {
+      margin: 0;
+    }
 
     @each $breakpoint, $value in $grid-breakpoints {
       &.btn-swap-label-#{$breakpoint} {
diff --git a/source/js/vdm-bao.js b/source/js/vdm-bao.js
index d8f6e8617..98c3874c5 100755
--- a/source/js/vdm-bao.js
+++ b/source/js/vdm-bao.js
@@ -250,6 +250,10 @@
   //
   $('[data-toggle="tooltip"]').tooltip();
 
+  // Toggle Toast
+  //
+  $('.toast').toast();
+
 
   // Wizard
   //