Ajout exemple champ numérique (#112)

Signed-off-by: Alexis Boulerice <[email protected]>

CHANGELOG.md

@@ -8,10 +8,14 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ### Added
 - Components - Message ciblé: Ajout de la variante hyperlien.
+- Components - Entree de données: Ajout d'exemple pour champ numérique (input type="number").
 
 ### Changed
 - Components - Entree de données: Ajustement espacement input + message d'erreur.
 
+### Fixed
+- Components - Entrée de données: Modification display du label pour corriger problème d'alignement avec ou sans popover.
+
 ### PatternLab
 - PL: Mise à jour des gabarits.
 - PL: Retrait composants flyout et cookie consent.

source/_patterns/02-components/entree-de-donnees/01-inputs.md

@@ -1,11 +1,3 @@
 ---
 title: Champ de texte
 ---
-
-## Tailles
-
-Les inputs par défaut sont de taille médium.
-
-## Validation
-
-Seuls les inputs sans icônes peuvent avoir une icône de validation. Dans ce cas il faut ajouter un <code>div</code> avec la classe <code>feedback-icon</code> et la classe de la validation soit <code>.valid-feedback</code> ou bien <code>.invalid-feedback</code>.

source/_patterns/02-components/entree-de-donnees/02-inputs-number.json

@@ -0,0 +1,85 @@
+{
+  "inputTextSize": [
+    {
+      "formGroupClass": "required",
+      "formGroupInputID": "form-control-number-default-one",
+      "formGroupInputRequired": true,
+      "formGroupInputLabel": "Libellé",
+      "formGroupPopover": true,
+      "formGroupInputPlaceholder": {
+        "text": "XX"
+      },
+      "formGroupInputHelpText": {
+        "id": "input-number-help-text-id",
+        "text": "Texte d'assistance"
+      },
+      "formGroupInputCounter": false
+    },
+    {
+      "formGroupClass": "required",
+      "formGroupInputID": "form-control-number-default-two",
+      "formGroupInputRequired": true,
+      "formGroupInputLabel": "Libellé",
+      "formGroupPopover": false,
+      "formGroupInputPlaceholder": {
+        "text": "XX"
+      },
+      "formGroupInputValue": "40",
+      "formGroupInputHelpText": {
+        "id": "input-number-help-text-id",
+        "text": "Texte d'assistance"
+      },
+      "formGroupInputCounter": {
+        "id": "input-number-caracter-count",
+        "text": "La valeur doit se situer entre 20 et 60"
+      },
+      "boundary": {
+        "min": 20,
+        "max": 60,
+        "step": 5
+      }
+    }
+  ],
+  "inputTextSizeValidation": [
+    {
+      "formGroupClass": "required",
+      "formGroupInputID": "form-control-number-default-error-one",
+      "formGroupInputClass": "is-invalid",
+      "formGroupInputRequired": true,
+      "formGroupInputLabel": "En erreur input vide",
+      "formGroupInputPlaceholder": false,
+      "formGroupInputHelpText": false,
+      "formGroupInputError": {
+        "id": "input-text-error-id",
+        "text": "Texte d'erreur",
+        "formAriaInputError": true
+      },
+      "boundary": {
+        "min": 10,
+        "max": 100
+      }
+    }
+  ],
+  "inputTextState": [
+    {
+      "formGroupClass": false,
+      "formGroupInputID": "form-control-input-number-disabled",
+      "formGroupInputLabel": "Désactivé",
+      "formGroupInputRequired": false,
+      "formGroupInputPlaceholder": "désactivé",
+      "formGroupInputHelpText": false,
+      "formGroupInputState": "disabled"
+    },
+    {
+      "formGroupClass": false,
+      "formGroupInputID": "form-control-input-number-readonly",
+      "formGroupInputLabel": "Read-only",
+      "formGroupInputClass": false,
+      "formGroupInputRequired": false,
+      "formGroupInputPlaceholder": "read-only",
+      "formGroupInputHelpText": false,
+      "formGroupInputState": "readonly",
+      "formGroupInputValue": "40"
+    }
+  ]
+}

source/_patterns/02-components/entree-de-donnees/02-inputs-number.md

@@ -0,0 +1,4 @@
+---
+title: Champ numérique
+---
+

source/_patterns/02-components/entree-de-donnees/02-inputs-number.mustache

@@ -0,0 +1,25 @@
+<div class="row">
+  {{# inputTextSize}}
+  <div class="col-xs-6 col-md-4">
+    {{> components-input-number }}
+  </div>
+  {{/ inputTextSize}}
+</div>
+
+<h4 class="pl-pattern-subtitle">Validation</h4>
+<div class="row">
+  {{# inputTextSizeValidation}}
+  <div class="col-xs-6 col-md-4">
+    {{> components-input-number }}
+  </div>
+  {{/ inputTextSizeValidation}}
+</div>
+
+<h4 class="pl-pattern-subtitle">États</h4>
+<div class="row">
+  {{# inputTextState}}
+  <div class="col-xs-6 col-md-4">
+    {{> components-input-number}}
+  </div>
+  {{/ inputTextState}}
+</div>

source/_patterns/02-components/entree-de-donnees/_input-number.mustache

@@ -0,0 +1,20 @@
+<div class="form-group {{formGroupClass}}">
+  {{# formGroupPopover}}<div class="label-has-popover">{{/ formGroupPopover}}
+  <label for="{{formGroupInputID}}">{{ formGroupInputLabel}}</label>
+  {{# formGroupPopover}}<div class="form-popover" aria-hidden="true" data-toggle="popover" data-placement="auto" title="Lorem ipsum" data-content="Lorem ipsum dolor sit amet, consectetur adipiscing elit. In nec quam ut erat scelerisque efficitur."><span class="icon icon-help" aria-hidden="true"></span><span class="sr-only">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In nec quam ut erat scelerisque efficitur.</span></div>{{/ formGroupPopover}}
+  {{# formGroupPopover}}</div>{{/ formGroupPopover}}
+  {{# formGroupInputHelpText}}
+    <span id="{{id}}" class="form-text">{{ text }}</span>
+  {{/ formGroupInputHelpText}}
+  <input type="number" class="form-control {{formGroupInputClass}}" id="{{ formGroupInputID }}" {{# formGroupInputValue}}value="{{ formGroupInputValue}}"{{/ formGroupInputValue}}{{# formGroupInputPlaceholder}} placeholder="{{ formGroupInputPlaceholder.text}}"{{/ formGroupInputPlaceholder}}{{# formGroupInputHelpText}} aria-describedby="{{id}}"{{/ formGroupInputHelpText}}{{#formGroupInputError}} aria-describedby="{{id}}" {{#formAriaInputError}} aria-invalid="true" {{/formAriaInputError}}{{/formGroupInputError}}{{# formGroupInputState}} {{ formGroupInputState}}{{/ formGroupInputState}}{{# formGroupInputRequired}} required{{/ formGroupInputRequired}}{{# boundary}}{{#min}} min="{{min}}"{{/min}}{{#max}} max="{{max}}"{{/max}}{{#step}} step="{{step}}"{{/step}}{{/boundary}}>
+  {{# formGroupInputCounter}}
+    <span id="{{id}}" class="form-text">{{ text }}</span>
+  {{/ formGroupInputCounter}}
+  {{# formGroupInputError}}
+    <div class="invalid-feedback" id={{formGroupInputError.id}}>
+        <span class="icon icon-exclamation icon-xs" aria-hidden="true"></span>
+        <span class="sr-only">Erreur</span>
+        {{ formGroupInputError.text }}
+    </div>
+  {{/ formGroupInputError}}
+</div>

source/css/scss/_forms.scss

@@ -13,6 +13,7 @@ label {
   font-weight: $font-weight-bold;
   color: $neutral-primary;
   margin-bottom: .5rem;
+  display: block;
   span {
     @include font-size($font-size-sm);
     font-weight: $font-weight-normal;