Ajustement exemple Toast et comportement de fermeture (#120)

Signed-off-by: Alexis Boulerice <alexis.boulerice@ville.montreal.qc.ca>
VilledeMontreal · Jun 5, 2024 · a19c466 · a19c466
1 parent 44f3858
commit a19c466
Show file tree

Hide file tree

Showing 6 changed files with 33 additions and 20 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -250,6 +250,10 @@
   //
   $('[data-toggle="tooltip"]').tooltip();
 
+  // Toggle Toast
+  //
+  $('.toast').toast();
+
 
   // Wizard
   //