Message ciblé: Ajout variante hyperlien (#111)

Signed-off-by: Alexis Boulerice <[email protected]>
VilledeMontreal · May 28, 2024 · 1ce58f1 · 1ce58f1
1 parent 582243b
commit 1ce58f1
Show file tree

Hide file tree

Showing 7 changed files with 125 additions and 13 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -6,6 +6,9 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [5.4.0] - Unreleased
 
+### Added
+- Components - Message ciblé: Ajout de la variante hyperlien.
+
 ### Changed
 - Components - Entree de données: Ajustement espacement input + message d'erreur.
 
@@ -18,7 +21,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 ## [5.3.0] - 2024-04-08
 
 ### Changed
-- Components Tuile: Modification Tuile en vedette (Espacement, breakpoint)
+- Components - Tuiles: Modification Tuile en vedette (Espacement, breakpoint)
 
 
 ## [5.2.0] - 2024-04-11
@@ -30,16 +33,16 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 ## [5.1.0] - 2024-03-22
 
 ### Changed
-- Components Accordeon: Ajustement structure accordeon et fix disabled state.
-- Components Étiquettes: Fusion de la variante light. Modification des schemas de couleurs des étiquettes.
-- Components Badge: Harmonisation des schémas de couleurs avec les étiquettes. Ajout d'une bordure.
-- Components Boutons: Ajustement couleur de fond des boutons secondaires et tertiaires (non inversés)
+- Components - Accordeon: Ajustement structure accordeon et fix disabled state.
+- Components - Étiquettes: Fusion de la variante light. Modification des schemas de couleurs des étiquettes.
+- Components - Badge: Harmonisation des schémas de couleurs avec les étiquettes. Ajout d'une bordure.
+- Components - Boutons: Ajustement couleur de fond des boutons secondaires et tertiaires (non inversés)
 - Styles: Passage de border-bottom à text-decoration pour la gestion des underline de liens.
 
 ### Added
 - Styles - iconographie: Ajout des icones social-threads, social-twitch, social-vimeo et social-x.
 - Styles - iconographie: Ajout des icones accessibilite, astuce, communiquer, demander, erreur, payer, permis, securite, signaler, trouver, trouverMap.
-- Components Accordeon: Ajout du bouton Tout ouvrir / Tout fermer avec exemple de script.
+- Components - Accordeon: Ajout du bouton Tout ouvrir / Tout fermer avec exemple de script.
 
 ### Fixed
 - Styles - typographie: correction bogue artefact sur lien avec la classe .is-external-link

diff --git a/source/_patterns/02-components/messages/01-alerts.json b/source/_patterns/02-components/messages/01-alerts.json
@@ -1,5 +1,5 @@
 {
-  "hasButtons": [
+  "messages": [
     {
       "dismissableAlert": true,
       "alertClass": "alert-info alert-with-icon alert-dismissible fade show",

diff --git a/source/_patterns/02-components/messages/01-alerts.mustache b/source/_patterns/02-components/messages/01-alerts.mustache
@@ -1,3 +1,3 @@
-{{# hasButtons}}
+{{# messages}}
 {{> components-alert}}
-{{/ hasButtons}}
+{{/ messages}}
diff --git a/source/_patterns/02-components/messages/02-alerts-hyperlien.md b/source/_patterns/02-components/messages/02-alerts-hyperlien.md
@@ -0,0 +1,7 @@
+---
+title: Message ciblé - Hyperlien
+---
+
+Mettre en avant une information spécifique.
+
+Variante hyperlien
diff --git a/source/_patterns/02-components/messages/02-alerts~hyperlien.json b/source/_patterns/02-components/messages/02-alerts~hyperlien.json
@@ -0,0 +1,69 @@
+{
+  "messages": [
+    {
+      "dismissableAlert": true,
+      "alertClass": "alert-info alert-with-icon alert-dismissible fade show",
+      "alertIcon": true,
+      "icon-name": "icon-info",
+      "iconAriaLabel": "Information",
+      "alertTitle": "Titre du message",
+      "alertText": "Description du message obligatoire avec <a href=\"#\" class=\"alert-link\">un lien facultatif</a> si besoin.",
+      "alertButtons": false,
+      "alertLink": {
+        "label": "Libellé"
+      }
+    },
+    {
+      "dismissableAlert": true,
+      "alertClass": "alert-success alert-with-icon alert-dismissible fade show",
+      "alertIcon": true,
+      "icon-name": "icon-check-circle",
+      "iconAriaLabel": "Succès",
+      "alertTitle": "Titre du message",
+      "alertText": "Description du message obligatoire avec <a href=\"#\" class=\"alert-link\">un lien facultatif</a> si besoin.",
+      "alertButtons": false,
+      "alertLink": {
+        "label": "Libellé"
+      }
+    },
+    {
+      "dismissableAlert": true,
+      "alertClass": "alert-warning alert-with-icon alert-dismissible fade show",
+      "alertIcon": true,
+      "icon-name": "icon-warning",
+      "iconAriaLabel": "Attention",
+      "alertTitle": "Titre du message",
+      "alertText": "Description du message obligatoire avec <a href=\"#\" class=\"alert-link\">un lien facultatif</a> si besoin.",
+      "alertButtons": false,
+      "alertLink": {
+        "label": "Libellé"
+      }
+    },
+    {
+      "dismissableAlert": true,
+      "alertClass": "alert-danger alert-with-icon alert-dismissible fade show",
+      "alertIcon": true,
+      "icon-name": "icon-error",
+      "iconAriaLabel": "Erreur",
+      "alertTitle": "Titre du message",
+      "alertText": "Description du message obligatoire avec <a href=\"#\" class=\"alert-link\">un lien facultatif</a> si besoin.",
+      "alertButtons": false,
+      "alertLink": {
+        "label": "Libellé"
+      }
+    },
+    {
+      "dismissableAlert": true,
+      "alertClass": "alert-danger alert-with-icon alert-dismissible fade show",
+      "alertIcon": true,
+      "icon-name": "icon-emergency",
+      "iconAriaLabel": "Urgence",
+      "alertTitle": "Titre du message",
+      "alertText": "Description du message obligatoire avec <a href=\"#\" class=\"alert-link\">un lien facultatif</a> si besoin.",
+      "alertButtons": false,
+      "alertLink": {
+        "label": "Libellé"
+      }
+    }
+  ]
+}
diff --git a/source/_patterns/02-components/messages/_alert.mustache b/source/_patterns/02-components/messages/_alert.mustache
@@ -18,6 +18,13 @@
     {{/ buttons}}
   </div>
   {{/ alertButtons}}
+  {{# alertLink}}
+  <div class="alert-actions">
+    <a href="#">
+      <span class="link-label">{{label}}</span><span class="icon-nowrap">&#65279;<span class="icon icon-arrow-right" aria-hidden="true"></span></span>
+    </a>
+  </div>
+  {{/ alertLink}}
   {{# alertIcon }}
   </div>
   {{/ alertIcon }}

diff --git a/source/css/scss/_messaging.scss b/source/css/scss/_messaging.scss
@@ -50,9 +50,31 @@
   }
 
   .alert-actions {
-    margin-top: .5rem;
+    margin-top: 1rem;
+    display: flex;
+    flex-wrap: wrap;
     .btn {
-      margin: .5rem 1rem .5rem 0;
+      margin: 0 1rem .5rem 0;
+    }
+    a {
+      display: inline !important;
+      margin-right: 0 !important;
+      text-decoration: none;
+      .icon-nowrap {
+        display: inline;
+        white-space: nowrap;
+        vertical-align: -6px;
+        line-height: 1;
+      }
+      .icon {
+        display: inline;
+        margin-left: 0.25rem;
+        margin-right: 0;
+      }
+      &:hover,
+      &:focus {
+        background-color: transparent;
+      }
     }
   }
 
@@ -116,9 +138,13 @@
     a,
     .alert-link {
       color: $color-dark;
-      border-bottom: $link-border-width solid $color-dark;
-      @include hover-focus {
+      .icon {
+        @include icon-color($color-dark);
+      }
+      &:hover,
+      &:focus {
         background-color: lighten($color-light, 4%);
+        text-decoration: underline;
       }
     }