From 1ce58f16dabc51eebd7c807a63d6244c9f439240 Mon Sep 17 00:00:00 2001 From: Alexis Date: Tue, 28 May 2024 15:33:17 -0400 Subject: [PATCH] =?UTF-8?q?Message=20cibl=C3=A9:=20Ajout=20variante=20hype?= =?UTF-8?q?rlien=20(#111)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Alexis Boulerice --- CHANGELOG.md | 15 ++-- .../02-components/messages/01-alerts.json | 2 +- .../02-components/messages/01-alerts.mustache | 4 +- .../messages/02-alerts-hyperlien.md | 7 ++ .../messages/02-alerts~hyperlien.json | 69 +++++++++++++++++++ .../02-components/messages/_alert.mustache | 7 ++ source/css/scss/_messaging.scss | 34 +++++++-- 7 files changed, 125 insertions(+), 13 deletions(-) create mode 100755 source/_patterns/02-components/messages/02-alerts-hyperlien.md create mode 100644 source/_patterns/02-components/messages/02-alerts~hyperlien.json diff --git a/CHANGELOG.md b/CHANGELOG.md index cb01c7ae9..5bdc46eb2 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 be029239b..d7a668d43 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 591b39871..274ebeffc 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 000000000..bb418002e --- /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 000000000..60d7e98de --- /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 ebb8769dd..dc6ae3e6f 100644 --- a/source/_patterns/02-components/messages/_alert.mustache +++ b/source/_patterns/02-components/messages/_alert.mustache @@ -18,6 +18,13 @@ {{/ buttons}} {{/ alertButtons}} + {{# alertLink}} +
+ + {{label}} + +
+ {{/ alertLink}} {{# alertIcon }} {{/ alertIcon }} diff --git a/source/css/scss/_messaging.scss b/source/css/scss/_messaging.scss index b00e2cd85..75a4b73a8 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; } }