Mettre à jour les icônes pour les champs de saisie + message d'erreur c…

…lose #80 (#102) Signed-off-by: Sorina Ardelean <[email protected]>
VilledeMontreal · Apr 11, 2024 · 7304aa1 · 7304aa1
1 parent ee94e69
commit 7304aa1
Show file tree

Hide file tree

Showing 30 changed files with 459 additions and 147 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@villedemontreal/hochelaga",
   "description": "La boite à outils web",
-  "version": "5.1.0",
+  "version": "5.2.0",
   "publishConfig": {
     "access": "public"
   },

diff --git a/source/_patterns/02-components/entree-de-donnees/01-inputs.json b/source/_patterns/02-components/entree-de-donnees/01-inputs.json
@@ -6,6 +6,7 @@
       "formGroupInputRequired": true,
       "formGroupInputLabel": "Libellé",
       "formGroupPopover": true,
+      "formGroupBtnClear": true,
       "formGroupInputPlaceholder": {
         "text": "Placeholder"
       },
@@ -19,20 +20,22 @@
       }
     }
   ],
-  "inputTextSizeError": [
+  "inputTextSizeValidation": [
     {
       "formGroupClass": "required",
       "formGroupInputID": "form-control-default-error-one",
       "formGroupInputClass": "is-invalid",
       "formGroupInputRequired": true,
-      "formGroupInputLabel": "En erreur",
+      "formGroupBtnClear": true,
+      "formGroupInputLabel": "En erreur input vide",
       "formGroupInputPlaceholder": {
         "text": "Placeholder"
       },
       "formGroupInputHelpText": false,
       "formGroupInputError": {
         "id": "input-text-error-id",
-        "text": "Texte d'erreur"
+        "text": "Texte d'erreur",
+        "formAriaInputError": true
       }
     }
   ],
@@ -44,7 +47,8 @@
       "formGroupInputRequired": false,
       "formGroupInputPlaceholder": "désactivé",
       "formGroupInputHelpText": false,
-      "formGroupInputState": "disabled"
+      "formGroupInputState": "disabled",
+      "formGroupBtnClear": false
     },
     {
       "formGroupClass": false,
@@ -54,7 +58,8 @@
       "formGroupInputRequired": false,
       "formGroupInputPlaceholder": "read-only",
       "formGroupInputHelpText": false,
-      "formGroupInputState": "readonly"
+      "formGroupInputState": "readonly",
+      "formGroupBtnClear": false
     }
   ]
 }
diff --git a/source/_patterns/02-components/entree-de-donnees/01-inputs.mustache b/source/_patterns/02-components/entree-de-donnees/01-inputs.mustache
@@ -9,11 +9,28 @@
 
 <h4 class="pl-pattern-subtitle">Validation</h4>
 <div class="row">
-  {{# inputTextSizeError}}
+  {{# inputTextSizeValidation}}
   <div class="col-xs-6 col-md-4">
     {{> components-input-text }}
   </div>
-  {{/ inputTextSizeError}}
+  {{/ inputTextSizeValidation}}
+  <div class="col-xs-6 col-md-4">
+    <div class="form-group has-clear required">
+      <label for="form-group-input-clear">En erreur input rempli</label>
+      <div class="input-group-icon">
+        <input type="text" class="form-control is-invalid" id="form-group-input-clear-error" value="E98126-NN45" aria-invalid="true" aria-describedby="input-text-error-id" required>
+        <button class="btn-clear">
+          <span class="icon icon-x-circle icon-md" aria-hidden="true">
+          <span class="sr-only">Supprimer le texte saisi</span>
+        </button>
+      </div>
+      <div class="invalid-feedback" id="input-text-error-id">
+        <span class="icon icon-exclamation icon-xs" aria-hidden="true"></span>
+        <span class="sr-only">Erreur</span>
+        Texte d'erreur
+      </div>
+    </div>
+  </div>
 </div>
 
 <h4 class="pl-pattern-subtitle">États</h4>
@@ -29,8 +46,8 @@
       <div class="input-group-icon">
         <input type="text" class="form-control" id="form-group-input-clear" value="jonathan Levingston">
         <button class="btn-clear">
-          <span class="icon icon-x-circle-full icon-sm">
-          <span class="sr-only">Clear search input</span>
+          <span class="icon icon-x-circle icon-md" aria-hidden="true">
+          <span class="sr-only">Supprimer le texte saisi</span>
         </button>
       </div>
     </div>

diff --git a/source/_patterns/02-components/entree-de-donnees/01-textareas.json b/source/_patterns/02-components/entree-de-donnees/01-textareas.json
@@ -36,7 +36,8 @@
       "formGroupTextareaRows": "5",
       "formGroupInputError": {
         "id": "form-group-textarea-error-text",
-        "text": "Texte d'erreur"
+        "text": "Texte d'erreur",
+        "formAriaInputError": true
       }
     }
   ],
@@ -47,7 +48,7 @@
       "formGroupInputClass": false,
       "formGroupInputRequired": false,
       "formGroupInputLabel": "Libellé",
-      "formGroupInputPlaceholder":{
+      "formGroupInputPlaceholder": {
         "text": "Placeholder"
       },
       "formGroupInputHelpText": {

diff --git a/source/_patterns/02-components/entree-de-donnees/03-selects.json b/source/_patterns/02-components/entree-de-donnees/03-selects.json
@@ -9,12 +9,12 @@
         "defaultOption": "Option par défaut",
         "options": [
           {
-            "option-text" : "Option 1",
-            "option-value" : "option-1"
+            "option-text": "Option 1",
+            "option-value": "option-1"
           },
           {
-            "option-text" : "Option 2",
-            "option-value" : "option-2"
+            "option-text": "Option 2",
+            "option-value": "option-2"
           }
         ]
       },
@@ -35,18 +35,19 @@
         "defaultOption": "Option par défaut",
         "options": [
           {
-            "option-text" : "Option 1",
-            "option-value" : "option-1"
+            "option-text": "Option 1",
+            "option-value": "option-1"
           },
           {
-            "option-text" : "Option 2",
-            "option-value" : "option-2"
+            "option-text": "Option 2",
+            "option-value": "option-2"
           }
         ]
       },
       "formGroupInputError": {
         "id": "custom-select-error-text",
-        "text": "Texte d'erreur"
+        "text": "Texte d'erreur",
+        "formAriaInputError": true
       }
     }
   ]

diff --git a/source/_patterns/02-components/entree-de-donnees/04-fichier.mustache b/source/_patterns/02-components/entree-de-donnees/04-fichier.mustache
@@ -1 +1,2 @@
 {{> components-input-file-item-v2}}
+
diff --git a/source/_patterns/02-components/entree-de-donnees/04-fichier~apercu-off.json b/source/_patterns/02-components/entree-de-donnees/04-fichier~apercu-off.json
@@ -28,7 +28,7 @@
     "listUploadedItems": [
       {
         "media": {
-          "img" : false,
+          "img": false,
           "icon": {
             "icon-name": "icon-md icon-file-pdf"
           }
@@ -38,7 +38,7 @@
       },
       {
         "media": {
-          "img" : false,
+          "img": false,
           "icon": {
             "icon-name": "icon-md icon-file-pdf"
           }
@@ -48,7 +48,7 @@
       },
       {
         "media": {
-          "img" : false,
+          "img": false,
           "icon": {
             "icon-name": "icon-md icon-file"
           }

diff --git a/source/_patterns/02-components/entree-de-donnees/04-fichier~apercu-on.json b/source/_patterns/02-components/entree-de-donnees/04-fichier~apercu-on.json
@@ -28,7 +28,7 @@
     "listUploadedItems": [
       {
         "media": {
-          "img" : {
+          "img": {
             "src": "https://picsum.photos/id/1062/40/40",
             "alt": "Alt pour image #1."
           }
@@ -38,7 +38,7 @@
       },
       {
         "media": {
-          "img" : {
+          "img": {
             "src": "https://picsum.photos/id/1062/40/40",
             "alt": "Alt pour image #2."
           }
@@ -48,7 +48,7 @@
       },
       {
         "media": {
-          "img" : {
+          "img": {
             "src": "https://picsum.photos/id/1062/40/40",
             "alt": "Alt pour image #3."
           }

diff --git a/source/_patterns/02-components/entree-de-donnees/04-fichier~error.json b/source/_patterns/02-components/entree-de-donnees/04-fichier~error.json
@@ -0,0 +1,36 @@
+{
+  "formGroupClass": "required",
+  "formGroupInputID": "form-control-input-file-v2",
+  "formGroupInputLabel": "Libellé",
+  "formGroupInputHelpText": {
+    "id": "input-file-help-text",
+    "text": "Texte d'assistance."
+  },
+  "formGroupFileID": "file-droparea-v2",
+  "formGroupFileDropID": "form-group-file-upload",
+  "formGroupFileDropLabel": "Parcourir",
+  "formGroupFileDropHelpText": "ou déposer votre fichier ici",
+  "formGroupFileClass": "is-invalid",
+  "formGroupInputError": {
+    "id": "file-droparea-v2-error",
+    "text": "Texte d'erreur"
+  },
+  "dropdownMenu": {
+    "dropdownMenuClass": "dropdown-menu-right",
+    "dropdownMenuID": "dropdownMoreVertical-1",
+    "dropdownSection": [
+      {
+        "dropdownItem": [
+          {
+            "url": "#",
+            "dropdownItemLabel": "Libellé"
+          },
+          {
+            "url": "#",
+            "dropdownItemLabel": "Libellé"
+          }
+        ]
+      }
+    ]
+  }
+}
diff --git a/source/_patterns/02-components/entree-de-donnees/05-checkbox-wrapper.md b/source/_patterns/02-components/entree-de-donnees/05-checkbox-wrapper.md
diff --git a/source/_patterns/02-components/entree-de-donnees/05-checkbox.json b/source/_patterns/02-components/entree-de-donnees/05-checkbox.json
@@ -49,5 +49,95 @@
         "state": "disabled"
       }
     ]
+  },
+  "formCheckboxesWrapper": {
+    "formGroupLabel": "Libellé",
+    "formCheckboxItems": [
+      {
+        "class": "custom-control-card",
+        "id": "chk-card05-1",
+        "label": "<span class=\"card-title\">Libellé</span><p>Est est et dolores dolore sed justo ipsum et sit.</p>",
+        "state": false
+      },
+      {
+        "class": "custom-control-card",
+        "id": "chk-card06-3",
+        "label": "<span class=\"card-title\">Libellé</span><p>Est est et dolores dolore sed justo ipsum et sit.</p>",
+        "state": "checked"
+      },
+      {
+        "class": "custom-control-card",
+        "id": "chk-card06-4",
+        "label": "<span class=\"card-title\">Libellé</span><p>Est est et dolores dolore sed justo ipsum et sit.</p>",
+        "state": "disabled"
+      }
+    ]
+  },
+  "formCheckboxesValidation": {
+    "formGroupLabel": "Libellé",
+    "formGroupClass": "required",
+    "formGroupInputRequired": true,
+    "formGroupInputHelpText": {
+      "id": "checkbox-help-text-id",
+      "text": "Texte d'assistance"
+    },
+    "formGroupCheckboxesError": {
+      "id": "form-group-checkboxes-error",
+      "text": "Texte d'erreur"
+    },
+    "formGroupInputAriaText": {
+      "id": "form-group-checkboxes-error"
+    },
+    "formCheckboxItems": [
+      {
+        "class": "is-invalid",
+        "id": "chkv01-2",
+        "label": "Libellé",
+        "state": false
+      },
+      {
+        "class": "is-invalid",
+        "id": "chkv02-2",
+        "label": "Libellé",
+        "state": "checked"
+      },
+      {
+        "class": "is-invalid",
+        "id": "chkv03-2",
+        "label": "Libellé",
+        "state": "disabled"
+      }
+    ]
+  },
+  "formCheckboxesWrapperValidation": {
+    "formGroupLabel": "Libellé",
+    "formGroupClass": "required",
+    "formGroupCheckboxesError": {
+      "id": "form-group-checkboxes-error",
+      "text": "Texte d'erreur"
+    },
+    "formGroupInputAriaText": {
+      "id": "form-group-checkboxes-error"
+    },
+    "formCheckboxItems": [
+      {
+        "class": "custom-control-card is-invalid",
+        "id": "chkv-card05-1",
+        "label": "<span class=\"card-title\">Libellé</span><p>Est est et dolores dolore sed justo ipsum et sit.</p>",
+        "state": false
+      },
+      {
+        "class": "custom-control-card is-invalid",
+        "id": "chkv-card06-3",
+        "label": "<span class=\"card-title\">Libellé</span><p>Est est et dolores dolore sed justo ipsum et sit.</p>",
+        "state": "checked"
+      },
+      {
+        "class": "custom-control-card",
+        "id": "chvk-card06-4",
+        "label": "<span class=\"card-title\">Libellé</span><p>Est est et dolores dolore sed justo ipsum et sit.</p>",
+        "state": "disabled"
+      }
+    ]
   }
 }