Ajustements étiquettes et badges. (#84)

Signed-off-by: Alexis Boulerice <[email protected]>
VilledeMontreal · Oct 13, 2023 · e370054 · e370054
1 parent e2ebb4c
commit e370054
Show file tree

Hide file tree

Showing 32 changed files with 214 additions and 488 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -9,6 +9,8 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 ## Changed
 - Retrait du tilde importer qui causait problème avec des versions récentes (15+ d'angular). Devrait être transparent dans des versions récentes de sass (dart-sass).
 - 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.
 
 ## Added
 - Styles - iconographie: Ajout des icones social-threads, social-twitch, social-vimeo.

diff --git a/source/_patterns/02-components/etiquette/02-etiquette-leger.json b/source/_patterns/02-components/etiquette/02-etiquette-leger.json
diff --git a/source/_patterns/02-components/etiquette/02-etiquette-leger.md b/source/_patterns/02-components/etiquette/02-etiquette-leger.md
diff --git a/source/_patterns/02-components/etiquette/04-etiquette-fort.mustache b/source/_patterns/02-components/etiquette/04-etiquette-fort.mustache
diff --git a/source/_patterns/02-components/etiquette/_etiquette.mustache b/source/_patterns/02-components/etiquette/_etiquette.mustache
diff --git a/...mponents/etiquette/04-etiquette-fort.json → ...-components/etiquettes/02-etiquettes.json b/...mponents/etiquette/04-etiquette-fort.json → ...-components/etiquettes/02-etiquettes.json
@@ -1,8 +1,8 @@
 {
-  "badges-strong": [
+  "badges": [
     {
       "badge": "Libellé",
-      "badgeClass": "badge-dark",
+      "badgeClass": false,
       "badge-sr-text": "",
       "badgeUrl": false,
       "badgeIconClass": false
@@ -36,10 +36,10 @@
       "badgeIconClass": false
     }
   ],
-  "badges-strong-icon": [
+  "badges-icon": [
     {
       "badge": "Libellé",
-      "badgeClass": "badge-dark badge-icon-left",
+      "badgeClass": "badge-icon-left",
       "badge-sr-text": "",
       "badgeUrl": false,
       "badgeIconClass": "icon-bolt"

diff --git a/source/_patterns/02-components/etiquettes/02-etiquettes.md b/source/_patterns/02-components/etiquettes/02-etiquettes.md
@@ -0,0 +1,5 @@
+## Utilisation
+Les Étiquettes sont des composantes simples qui servent à afficher un statut (exemple : en cours, archivé, etc.), un mot-clé ou bien une catégorie.
+
+### Variantes
+* Avec icône (.badge-icon-left)
diff --git a/...nts/etiquette/02-etiquette-leger.mustache → ...ponents/etiquettes/02-etiquettes.mustache b/...nts/etiquette/02-etiquette-leger.mustache → ...ponents/etiquettes/02-etiquettes.mustache
@@ -1,11 +1,11 @@
 <div class="pl-badge pl-mb-0">
-	{{# badges-light }}
+	{{# badges }}
 	  {{> components-etiquette }}
-	{{/ badges-light }}
+	{{/ badges }}
 </div>
 <h4 class="pl-pattern-subtitle">Avec icône</h4>
 <div class="pl-badge">
-	{{# badges-light-icon }}
+	{{# badges-icon }}
 	  {{> components-etiquette }}
-	{{/ badges-light-icon }}
+	{{/ badges-icon }}
 </div>
diff --git a/...nts/etiquette/05-etiquette-max-width.json → ...s/etiquettes/05-etiquettes-max-width.json b/...nts/etiquette/05-etiquette-max-width.json → ...s/etiquettes/05-etiquettes-max-width.json
diff --git a/...etiquette/05-etiquette-max-width.mustache → ...iquettes/05-etiquettes-max-width.mustache b/...etiquette/05-etiquette-max-width.mustache → ...iquettes/05-etiquettes-max-width.mustache
diff --git a/source/_patterns/02-components/etiquettes/_etiquette.mustache b/source/_patterns/02-components/etiquettes/_etiquette.mustache
@@ -0,0 +1,12 @@
+{{# badgeIconClass }}
+<span class="badge {{ badgeClass }}">
+  <span class="badge-label">{{ badge }}</span>
+  <span class="icon {{ badgeIconClass }}"></span>
+</span>
+{{/ badgeIconClass }}
+{{^ badgeIconClass }}
+  <span class="badge {{ badgeClass }}">{{ badge }}</span>
+{{/ badgeIconClass }}
+{{# badge-sr-text }}
+  <span class="sr-only">{{ badge-sr-text }}</span>
+{{/ badge-sr-text }}
diff --git a/source/_patterns/04-templates-citoyens/20-article/01-article.json b/source/_patterns/04-templates-citoyens/20-article/01-article.json
@@ -52,13 +52,11 @@
     "module-explainer-img-top": false,
     "module-explainer-img-bottom": false
   },
-  "module-etiquette": {
-    "badges-links": [
+  "module-links": {
+    "links": [
       {
-        "badge": "Libellé",
-        "badgeClass": "badge-secondary",
-        "badgeUrl": "#",
-        "badgeIconClass": false
+        "title": "Libellé",
+        "url": "#"
       }
     ]
   }

diff --git a/source/_patterns/04-templates-citoyens/20-article/01-article.mustache b/source/_patterns/04-templates-citoyens/20-article/01-article.mustache
@@ -36,18 +36,18 @@
           </div>
           {{/ module-content}}
 
-          {{# module-etiquette}}
-          <div class="badges-container mb-7">
+          {{# module-links}}
+          <div class="badges-container mb-8">
             <h2 class="h5 text-body">Recherche rapide</h2>
-            <ul class="list-inline">
-            {{# badges-links }}
-              <li class="list-inline-item">
-              {{> components-etiquette }}
+            <ul class="list-inline mb-n1 font-size-base-interface">
+            {{# links }}
+              <li class="list-inline-item mr-1 mb-1">
+                <a href="{{url}}" title="link title text">{{title}}</a>
               </li>
-            {{/ badges-links }}
+            {{/ links }}
             </ul>
           </div>
-          {{/ module-etiquette}}
+          {{/ module-links}}
         </div>
 
         {{# sidebarRight}}

diff --git a/source/_patterns/04-templates-citoyens/20-article/01-article~01-maximum.json b/source/_patterns/04-templates-citoyens/20-article/01-article~01-maximum.json
@@ -298,37 +298,27 @@
       }
     }
   },
-  "module-etiquette": {
-    "badges-links": [
+  "module-links": {
+    "links": [
       {
-        "badge": "Libellé",
-        "badgeClass": "badge-secondary",
-        "badgeUrl": "#",
-        "badgeIconClass": false
+        "title": "Libellé",
+        "url": "#"
       },
       {
-        "badge": "Libellé",
-        "badgeClass": "badge-secondary",
-        "badgeUrl": "#",
-        "badgeIconClass": false
+        "title": "Libellé",
+        "url": "#"
       },
       {
-        "badge": "Libellé",
-        "badgeClass": "badge-secondary",
-        "badgeUrl": "#",
-        "badgeIconClass": false
+        "title": "Libellé",
+        "url": "#"
       },
       {
-        "badge": "Libellé",
-        "badgeClass": "badge-secondary",
-        "badgeUrl": "#",
-        "badgeIconClass": false
+        "title": "Libellé",
+        "url": "#"
       },
       {
-        "badge": "Libellé",
-        "badgeClass": "badge-secondary",
-        "badgeUrl": "#",
-        "badgeIconClass": false
+        "title": "Libellé",
+        "url": "#"
       }
     ]
   },

diff --git a/source/_patterns/04-templates-citoyens/20-article/01-article~02-no-sidebar.json b/source/_patterns/04-templates-citoyens/20-article/01-article~02-no-sidebar.json
@@ -131,13 +131,11 @@
     "module-explainer-img-top": false,
     "module-explainer-img-bottom": false
   },
-  "module-etiquette": {
-    "badges-links": [
+  "module-links": {
+    "links": [
       {
-        "badge": "Libellé",
-        "badgeClass": "badge-secondary",
-        "badgeUrl": "#",
-        "badgeIconClass": false
+        "title": "Libellé",
+        "url": "#"
       }
     ]
   },

diff --git a/source/_patterns/04-templates-citoyens/26-evenement/01-evenement.json b/source/_patterns/04-templates-citoyens/26-evenement/01-evenement.json
@@ -49,31 +49,25 @@
     "module-documents": false,
     "module-partners": false,
     "module-video": false,
-    "module-etiquette": {
-      "badges-links": [
-        {
-          "badge": "Taxonomie Clientèle",
-          "badgeClass": "badge-secondary",
-          "badgeUrl": "#",
-          "badgeIconClass": false
-        },
-        {
-          "badge": "Taxonomie Type",
-          "badgeClass": "badge-secondary",
-          "badgeUrl": "#",
-          "badgeIconClass": false
-        },
-        {
-          "badge": "Taxonomie Catégorie principale",
-          "badgeClass": "badge-secondary",
-          "badgeUrl": "#",
-          "badgeIconClass": false
-        }
-      ]
-    },
     "module-map": false,
     "module-events": false
   },
+  "module-links": {
+    "links": [
+      {
+        "title": "Taxonomie Clientèle",
+        "url": "#"
+      },
+      {
+        "title": "Taxonomie Type",
+        "url": "#"
+      },
+      {
+        "title": "Taxonomie Catégorie principale",
+        "url": "#"
+      }
+    ]
+  },
   "sb-block-coordonnees": {
     "sidebarTitleClasses": "d-none d-lg-block",
     "sb-block-contact": [

diff --git a/source/_patterns/04-templates-citoyens/26-evenement/01-evenement.mustache b/source/_patterns/04-templates-citoyens/26-evenement/01-evenement.mustache
@@ -58,6 +58,19 @@
           {{> templates-citoyens-evenement-content}}
           </div>
           {{/ module-content}}
+
+          {{# module-links}}
+          <div class="badges-container mb-8">
+            <h2 class="h5 text-body">Recherche rapide</h2>
+            <ul class="list-inline mb-n1 font-size-base-interface">
+            {{# links }}
+              <li class="list-inline-item mr-1 mb-1">
+                <a href="{{url}}" title="link title text">{{title}}</a>
+              </li>
+            {{/ links }}
+            </ul>
+          </div>
+          {{/ module-links}}
         </div>
       </div>