diff --git a/CHANGELOG.md b/CHANGELOG.md
index cb01c7ae..5bdc46eb 100644
--- 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
index be029239..d7a668d4 100644
--- 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
index 591b3987..274ebeff 100644
--- 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
new file mode 100755
index 00000000..bb418002
--- /dev/null
+++ 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
new file mode 100644
index 00000000..60d7e98d
--- /dev/null
+++ 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 un lien facultatif 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 un lien facultatif 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 un lien facultatif 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 un lien facultatif 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 un lien facultatif 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
index ebb8769d..dc6ae3e6 100644
--- a/source/_patterns/02-components/messages/_alert.mustache
+++ b/source/_patterns/02-components/messages/_alert.mustache
@@ -18,6 +18,13 @@
{{/ buttons}}
{{/ alertButtons}}
+ {{# alertLink}}
+
+ {{/ alertLink}}
{{# alertIcon }}
{{/ alertIcon }}
diff --git a/source/css/scss/_messaging.scss b/source/css/scss/_messaging.scss
index b00e2cd8..75a4b73a 100755
--- 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;
}
}