@hipay/hipay-material-ui 3.4.2 → 3.5.0

package/src/Guideline/La_Console_HiPay/INTRODUCTION.md

@@ -0,0 +1 @@
+Bienvenue sur le **guide des bonnes pratiques** de **l'expérience utilisateur** (UX) de **La Console** ! Ce document a pour rôle d’accompagner toutes les parties prenantes de La Console HiPay dans leur prise en main du produit. Product Owners, Facilitateurs, Développeurs et Q.A’s, vous êtes au bon endroit pour tout savoir sur les bonnes pratiques en UX (user experience) design. Vous retrouverez différentes catégories dans le sommaire. Ce document est une ébauche et ne constitue pas la version finale du Guidelines. Vos retours sont les bienvenus en vue d’améliorer cet outil de travail.<br>Bonne recherche, et bon Design !

package/src/Guideline/La_Console_HiPay/L_AFFORDANCE.md

@@ -0,0 +1,5 @@
+L’**affordance** est la capacité d’un objet ou d’un système à évoquer son utilisation, sa fonction.
+
+« L’objectif de l’UX designer est de procurer la meilleure expérience possible à l’utilisateur, d’où l’intérêt de l’**affordance en UX design**. Le design graphique ne commence qu’après avoir analysé les attentes et besoins de l’utilisateur. À partir de ces données, le designer va créer le style adéquat et donner une importance plus ou moins grande aux éléments de l’interface. Qu’il s’agisse d’une application, d’un logiciel ou d’un site Internet, l’utilisateur veut accéder facilement et rapidement au contenu ou à la fonctionnalité. Il s’agit de l’y aider pour lui procurer une expérience positive et agréable du produit ou service. »
+
+<a href="https://www.usabilis.com/definition-affordance/" target="blank">En savoir plus sur l'affordance</a>

package/src/Guideline/La_Console_HiPay/L_ATOMIC_DESIGN.md

@@ -0,0 +1,11 @@
+L’Atomic Design est une méthode de design par composants. On ne conçoit plus des pages mais des éléments d’interface qui vont devoir trouver leur place dans des environnements aussi bien immenses (projections sur un mur) que tout petits (écrans de montre connectée). Nous ne devons donc plus penser en « écrans » ou en « pages » mais en systèmes de composants, en éléments modulaires, tout comme Google l’a fait avec le Material Design : une bibliothèque de composants qui s’adaptent aux différents supports. Dans l’hypothèse où La Console serait adaptée sur smartphone, designer son interface en atomic facilitera considérablement son adaptation sur les petits écrans. « Quand on conçoit en atomic, on doit toujours garder en tête qu’un même composant va pouvoir être décliné et ré-utilisé dans des contextes potentiellement très différents. »
+<br>En savoir plus :
+
+- <a href="https://medium.com/@audreyhacq/l-atomic-design-une-m%C3%A9thode-de-co-creation-prometteuse-bd9d5fc2b2ad" target="blank">L’atomic design, une méthode de co-création prometteuse</a>
+- <a href="https://medium.com/scribe/comment-concevoir-un-syst%C3%A8me-de-composants-en-atomic-design-770b910f4f32" target="blank">Comment concevoir un système de composants en atomic design ?</a>
+
+![Atomic_Design_image 1](public/guideline/img/1_sDxSLgzDI6IqrphNvGeUcg.png)
+
+
+
+![Atomic_Design_image_2](public/guideline/img/1_E8xw35qc9Iznt_3JB6o1Yg.jpeg)

package/src/Guideline/La_Console_HiPay/PERSONAS.md

@@ -0,0 +1,3 @@
+![Personas](public/guideline/img/Personas.jpg)
+
+<a href="https://drive.google.com/drive/folders/1o3cK0WkeQyoVpylQu89wKL_SM-vgZ94q" target="blank">Fichiers en ligne des personas</a>

package/src/Guideline/La_Console_HiPay/PERSONNALITE.md

@@ -0,0 +1,13 @@
+La Console HiPay est l’interface unique et centralisée permettant de visualiser, piloter et configurer l’ensemble des données de paiement. 5 mots qui définissent la Console Hipay :<br>
+PERSONNALISATION, ACCOMPAGNEMENT, ACCESSIBILITÉ, RESPONSIVE, VALORISATION.
+<div class="table-data">
+|                  | LES OBJECTIFS DE LA CONSOLE                                  |
+| ---------------- | ------------------------------------------------------------ |
+| Personnalisation | Coller au plus près aux usages de chaque utilisateur, en offrant la possibilité de personnaliser l'affichage des informations. |
+| Accompagnement   | Proposer une navigation ergonomique centrée sur la recherche ; et sur toutes les pages, une aide contextuelle à l’utilisateur ainsi qu’un formulaire pour remonter des dysfonctionnements ou proposer des idées. |
+| Accessibilité    | Avoir une interface claire, agréable et répondant aux principes de l’accessibilité afin de le rendre utilisable pour tous. |
+| Responsive       | S’adapter à toutes les pratiques en proposant une interface totalement responsive qui s’adapte à tous les supports : smartphones, tablettes ou grands écrans de supervision. |
+| Valorisation     | Valoriser les données pour les rendre plus accessibles.      |
+
+La Console Hipay s’adresse à différents types d’utilisateurs (Voir section Accessibilité > AIDE ET DOCUMENTATION > Identifier les différents utilisateurs).
+</div>

package/src/Guideline/Relation_Console_utilisateurs/VOIX_ET_TON/Degr/303/251_gravit/303/251.md

@@ -0,0 +1,17 @@
+- **Faible** : l'action émise par erreur peut être **facilement annulée** et **aucune donnée n'est perdue**.<br>Exemple : supprimer un filtre ou un champ de recherche
+
+Donc : **l'action n'a pas besoin d'être protégée** et n'est pas soumise à une couleur stricte. Elle peut être équipée d'un bouton neutre.
+
+
+
+- **Moyen** : l'action émise par erreur est **difficilement annulable** et va donc avoir un **fort impact émotionnel négatif sur l'utilisateur**.<br>Exemple :
+
+Donc :  **l'action doit être protégée** par une étape supplémentaire, **2 clics minimums**. Les boutons peuvent être soumis à un code couleur et stylisés. Si possible, affichez une snackbar avec la possibilité d'annuler l'action.
+
+
+
+- **Élevé** : l'action émise par erreur est **extrêmement difficile à annuler** voire **impossible du côté de l'utilisateur** ou bien **entraîne une perte de donnée irréversible**. L'impact émotionnel sur l'utilisateur est **dangereux pour l'image de l'outil**.<br>Exemple :
+
+Donc : **l'action doit être protégée** par une étape supplémentaire, **2 clics minimums**. Les boutons doivent être **soumis à un code couleur et stylisés**. Vous devez afficher une **fenêtre modale pour demander confirmation**.
+
+![Feux à l'horizontale](public/guideline/img/R17.jpg)

package/src/Guideline/Relation_Console_utilisateurs/VOIX_ET_TON/Messages_alerte.md

@@ -0,0 +1 @@
+Lorsque l'utilisateur fait une action sur La Console, et que cette **action** est dite « **destructice** », il est bon de **mettre en place un certain degré de gravité** (ou de sécurité).

package/src/Guideline/Relation_Console_utilisateurs/VOIX_ET_TON/Messages_erreur.md

@@ -0,0 +1,6 @@
+Lorsqu'une coquille intervient, il est important de dire à l'utilisateur ce qu'il se passe. Il faut être clair, précis et concis. Si possible, indiquez un moyen de résoudre le problème.<br>Les messages d'erreurs peuvent s'afficher via l'intermédiaire d'une « snackbar », d'une fenêtre modale, ou autour d'un champ. Ils peuvent être persistants, temporaires ou bien refermables.
+
+|                       MAUVAIS                       |                             BON                              |
+| :-------------------------------------------------: | :----------------------------------------------------------: |
+| Désolé, **le remboursement ne peut être effectué**. | Désolé, **le remboursement ne peut être effectué**. Nous faisons de notre mieux pour résoudre ce **problème technique**. Veuillez **réessayer plus tard**. |
+|                     Erreur 400                      | Nous n'avons pas été en mesure d'accéder à votre requête. Veuillez indiquer une **adresse E-mail valide**. |

package/src/Guideline/Visuel/COULEUR_ET_CONTRASTE/Bleu_HiPay.md

@@ -0,0 +1,5 @@
+« Quand on parle du bleu, on pense de suite au ciel et à la mer… deux éléments naturels qui font partie de notre quotidien. Cela est peut-être l’une des causes pour que le bleu soit la couleur préférée. Même si on n’adore pas le bleu, il est difficile de détester cette couleur universelle. ».
+
+![Logo-hipay Bleu et Jaune](public/guideline/img/Couleur4.jpg)
+
+En savoir plus : <a href="https://www.code-couleur.com/" target="blank">Code couleur</a>

package/src/Guideline/Visuel/COULEUR_ET_CONTRASTE/Contraste.md

@@ -0,0 +1,2 @@
+Le contraste est l’**un des moyens les plus efficaces** pour créer de l’intérêt sur une page web. Il s’agit pour la Console de jouer entre les couleurs afin de **créer de l’organisation**, de même qu’**une hiérarchie** entre tous les éléments de l’interface. Valentine devrait pouvoir accéder rapidement aux transactions marchandes grâce à l’outil de recherche, et nous devons lui indiquer quels sont les éléments avec lesquels elle peut interagir.<br>Calculer le ratio de contraste : <a href="http://colorsafe.co/" target="blank">Calculateur de ratio de contraste</a>
+<!--Work in progress-->

package/src/Guideline/Visuel/COULEUR_ET_CONTRASTE/Couleurs_communes.md

@@ -0,0 +1 @@
+![Les couleurs communes](public/guideline/img/Couleur.jpg)

package/src/Guideline/Visuel/COULEUR_ET_CONTRASTE/Couleurs_utilitaires.md

@@ -0,0 +1 @@
+![Les couleurs utilitaires](public/guideline/img/Couleur2.jpg)

package/src/Guideline/Visuel/COULEUR_ET_CONTRASTE/Lignes_tableaux_r/303/251sultats.md

@@ -0,0 +1 @@
+![Lignes dans les tableaux de résultats](public/guideline/img/Couleur3.jpg)

package/src/Guideline/Visuel/COULEUR_ET_CONTRASTE/Palette_couleur_comptes.md

@@ -0,0 +1 @@
+Les comptes marchands de La Console HiPay ont reçu une nouvelle palette de couleur ! Voir <a href="https://xd.adobe.com/view/e6e837ec-b63a-42dd-7df4-26d6b9198b2c-90d9/" target="blank">la palette de couleur des comptes</a> en ligne.

package/src/Guideline/Visuel/IC/303/224NES/IC/303/224NES.md

@@ -0,0 +1,104 @@
+<div class="table-data">
+| ACTIONS                                                      | TOOLTIPS(EN)/ BALISE ALT              | TOOLTIPS(FR)                                         | ICON LIB                                                  | ICON                                         | ICON LABEL             |
+| :----------------------------------------------------------- | :------------------------------------ | ---------------------------------------------------- | --------------------------------------------------------- | -------------------------------------------- | ---------------------- |
+| Partager                                                     | Share                                 | Partager                                             | [Material Design Icons](https://materialdesignicons.com/) | ![](public/guideline/img/share-variant.svg)  | share-variant          |
+| (Menu) Compte                                                | Account                               | Compte                                               | [LineAwesome](https://icons8.com/line-awesome)            |                                              | tag                    |
+| (Menu) Business                                              | Business                              | Business                                             | [LineAwesome](https://icons8.com/line-awesome)            |                                              | tags                   |
+| Modifier la période de référence                             | Set the period for all widgets        | Définir la période pour tous les widgets             | [Material Design Icons](https://materialdesignicons.com/) | ![](public/guideline/img/calendar-check.svg) | calendar-check         |
+| Modifier les données                                         | Set the data for all widgets          | Définir les données pour tous les widgets            | [Material Design Icons](https://materialdesignicons.com/) | ![](public/guideline/img/tag.svg)            | tag                    |
+| Accéder au magasin des widgets                               | Widget store                          | Magasin des widgets                                  | [Material Design Icons](https://materialdesignicons.com/) | ![](public/guideline/img/bulletin-board.svg) | bulletin-board         |
+| Affichage en mode vignette                                   | Thumbnail view                        | Affichage en mode vignette                           | [Material Design Icons](https://materialdesignicons.com/) |                                              | view-module            |
+| Affichage en mode tableau (liste)                            | List view                             | Affichage en mode tableau                            | [Material Design Icons](https://materialdesignicons.com/) |                                              | view-list              |
+| Agrandir un widget                                           | Enlarge                               | Agrandir                                             | [Material Design Icons](https://materialdesignicons.com/) |                                              | arrow-expand           |
+| Réduire un widget                                            | Reduce                                | Réduire                                              | [Material Design Icons](https://materialdesignicons.com/) |                                              | arrow-collapse         |
+| Compte des widgets présents sur d'autre tableau de bord      | Choose by other users                 | Choisit par d'autres utilisateurs                    | [Material Design Icons](https://materialdesignicons.com/) |                                              | heart-outline          |
+| Période de référence d'avant                                 | Before                                | Avant                                                | [Material Design Icons](https://materialdesignicons.com/) |                                              | chevron-left           |
+| Période de référence d'après                                 | After                                 | Après                                                | [Material Design Icons](https://materialdesignicons.com/) |                                              | chevron-right          |
+| Top                                                          | Top                                   | Top                                                  | [Material Design Icons](https://materialdesignicons.com/) |                                              | thumb-up               |
+| Flop                                                         | Flop                                  | Flop                                                 | [Material Design Icons](https://materialdesignicons.com/) |                                              | thumb-down             |
+| Check box                                                    | -                                     | -                                                    | [Material Design Icons](https://materialdesignicons.com/) |                                              | checkbox-blank-outline |
+| Check box active                                             | -                                     | -                                                    | [Material Design Icons](https://materialdesignicons.com/) |                                              | checkbox-marked        |
+| Radio bouton                                                 | -                                     | -                                                    | [Material Design Icons](https://materialdesignicons.com/) |                                              | radiobox-blank         |
+| Radio bouton actif                                           | -                                     | -                                                    | [Material Design Icons](https://materialdesignicons.com/) |                                              | checkbox-marked-circle |
+| Active                                                       | Active                                | Actif                                                | [Material Design Icons](https://materialdesignicons.com/) |                                              | eye                    |
+| Désactivé                                                    | Disabled                              | Désactivé                                            | [Material Design Icons](https://materialdesignicons.com/) |                                              | eye-off-outline        |
+| Edit                                                         | Edit user                             | Modifier l’utilisateur                               | [Material Design Icons](https://materialdesignicons.com/) |                                              | pencil                 |
+| Supprimer                                                    | Remove                                | Supprimer                                            | [Material Design Icons](https://materialdesignicons.com/icon/delete) |                                   | delete                 |
+| Réinitialiser le mot de passe                                | Reset password                        | Réinitialiser le mot de passe                        | [Material Design Icons](https://materialdesignicons.com/) |                                              | lock-reset             |
+| Utilisateur bloqué                                           | Request to reset the current password | Demande de réinitialisation du mot de passe en cours | [Material Design Icons](https://materialdesignicons.com/) |                                              | lock                   |
+| Gérer les colonnes d'un tableau                              | Manage columns                        | Gérer les colonnes                                   | [Material Design Icons](https://materialdesignicons.com/) |                                              | plus-circle            |
+| Ajouter un filtre dans la recherche avancée                  | Add filter                            | Ajouter un filtre                                    | [Material Design Icons](https://materialdesignicons.com/) |                                              | plus-circle            |
+| Supprimer (un tag, une ligne dans la recherche avancée, ...) | Remove                                | Supprimer                                            | [Material Design Icons](https://materialdesignicons.com/) |                                              | close-circle           |
+| Filtre                                                       | Filter                                | Filtre                                               | [Material Design Icons](https://materialdesignicons.com/) |                                              | filter                 |
+| Filtré                                                       | Filtered                              | Filtré                                               | [Material Design Icons](https://materialdesignicons.com/) |                                              | filter-outline         |
+| Filtrer                                                      | Filter                                | Filtrer                                              | [Material Design Icons](https://materialdesignicons.com/) |                                              | filter-outline         |
+| Glisser un ligne                                             | Drag and drop                         | Glisser-déposer                                      | [Material Design Icons](https://materialdesignicons.com/) |                                              | drap                   |
+| Donne accès aux filtres et option de tri d'un colonne dans un tableau | Filter, sort                          | Filtrer, trier                                       | [Material Design Icons](https://materialdesignicons.com/) |                                     | filter-variant         |
+| Tri alphabétique                                             | Alphabetically sort                   | Tri par ordre alphabétique                           | [Material Design Icons](https://materialdesignicons.com/) |                                              | sort-alphabetical      |
+| Tri numérique                                                | Numerically sort                      | Tri par ordre numérique                              | [Material Design Icons](https://materialdesignicons.com/) |                                              | sort-numeric           |
+| Réglage                                                      | Setting                               | Réglage                                              | [Material Design Icons](https://materialdesignicons.com/icon/cog)           |                            | cog                    |
+| Recherche / search                                           | -                                     | -                                                    | [Material Design Icons](https://materialdesignicons.com/) |                                              | magnify                |
+| Liste déroulante                                             | -                                     | -                                                    | [Material Design Icons](https://materialdesignicons.com/) |                                              | menu-down              |
+| Aide en ligne                                                | Help                                  | Aide en ligne                                        | [Material Design Icons](https://materialdesignicons.com/) |                                              | help-circle            |
+| Dans tous les comptes                                        | Everywhere                            | Partout                                              | [LineAwesome](https://icons8.com/line-awesome)            |                                              | archive                |
+| Notification                                                 | Notification                          | Notification                                         | [LineAwesome](https://icons8.com/line-awesome)            |                                              | bell-o                 |
+| Entre deux dates                                             | -                                     | -                                                    | [Material Design Icons](https://materialdesignicons.com/) |                                              | ray-start-arrow        |
+| Fermer                                                       | Close                                 | Fermer                                               | [Material Design Icons](https://materialdesignicons.com/) |                                              | window-close           |
+| Revenir                                                      | Return                                | Retour                                               | [Material Design Icons](https://materialdesignicons.com/) |                                              | arrow-left             |
+| Sauvegarder                                                  | Save                                  | Sauvegarder                                          | [Material Design Icons](https://materialdesignicons.com/) |                                              | star-outline           |
+| Sauvegardé                                                   | Saved                                 | Sauvergardé                                          | [Material Design Icons](https://materialdesignicons.com/) |                                              | star                   |
+| Mettre à jour les données                                    | Reload                                | Mettre à jour                                        | [Material Design Icons](https://materialdesignicons.com/) |                                              | reload                 |
+| télécharger                                                  | Download                              | Télécharger                                          | [Material Design Icons](https://materialdesignicons.com/) |                                              | download               |
+| Activité, historique                                         | History                               | Historique                                           | [Material Design Icons](https://materialdesignicons.com/) |                                              | history                |
+| Nouveauté                                                    | New                                   | Nouveauté                                            | [Material Design Icons](https://materialdesignicons.com/) |                                              | octogram               |
+| Valider                                                      | Check                                 | Valider                                              | [Material Design Icons](https://materialdesignicons.com/) |                                              | Check                  |
+| Valider plusieurs                                            | Check all                             | Valider tout                                         | [Material Design Icons](https://materialdesignicons.com/) |                                              | Check-all              |
+| Ouvrir dans un nouvel onglet                                 | Open in a new tab                     | Ouvrir dans un nouvel onglet                         | [Material Design Icons](https://materialdesignicons.com/) |                                              | Launch                 |
+| Page du logiciel                                             | Page                                  | Page                                                 | [Material Design Icons](https://materialdesignicons.com/) |                                              |                        |
+| (Menu) Profil utilisateur                                    | Profile                               | Profil                                               | [LineAwesome](https://icons8.com/line-awesome)            |                                              | User                   |
+| (Menu) Changer le mot de passe                               | Change password                       | Changer mot de passe                                 | [LineAwesome](https://icons8.com/line-awesome)            |                                              | Unlock-alt             |
+| (Menu) Se déconnecter                                        | Sign out                              | Se déconnecter                                       | [LineAwesome](https://icons8.com/line-awesome)            |                                              | Sign-out               |
+| (Menu) Tableau de bord                                       | Dashboard                             | Tableau de bord                                      | [LineAwesome](https://icons8.com/line-awesome)            |                                              | Home                   |
+| (Menu) Opération financière                                  | Financial operation                   | Opération financière                                 | [LineAwesome](https://icons8.com/line-awesome)            |                                              | check-circle           |
+| (Menu) Sentinel                                              | Sentinel                              | Sentinel                                             | [LineAwesome](https://icons8.com/line-awesome)            |                                              | shield                 |
+| (Menu) E-terminal                                            | E-terminal                            | E-terminal                                           | [LineAwesome](https://icons8.com/line-awesome)            |                                              | credit-card            |
+| (Menu) Integration                                           | Integration                           | Intégration                                          | [LineAwesome](https://icons8.com/line-awesome)            |                                              | code-fork              |
+| (Menu) Administration                                        | Administration                        | Administration                                       | [LineAwesome](https://icons8.com/line-awesome)            |                                              | unlock                 |
+| (Menu) HiPay Intelligence                                    | HiPay Intelligence                    | HiPay Intelligence                                   | [LineAwesome](https://icons8.com/line-awesome)            |                                              |                        |
+| Type Tout                                                    | All                                   | Tout                                                 | [LineAwesome](https://icons8.com/line-awesome)            |                                              |                        |
+| Type Transactions                                            | Transaction                           | Transaction                                          | [LineAwesome](https://icons8.com/line-awesome)            |                                              | paper-plane            |
+| Type Clients                                                 | Customer                              | Client                                               | [LineAwesome](https://icons8.com/line-awesome)            |                                              | user                   |
+| Type Widgets                                                 | Widget                                | Widget                                               | [LineAwesome](https://icons8.com/line-awesome)            |                                              | bulletin-board         |
+| Type Reversements                                            | Settlement                            | Reversement                                          | [LineAwesome](https://icons8.com/line-awesome)            |                                              |                        |
+| Type Factures                                                | Billing                               | Facture                                              | [LineAwesome](https://icons8.com/line-awesome)            |                                              |                        |
+| Type Opérations financières                                  | Financial operation                   | Opération financière                                 | [LineAwesome](https://icons8.com/line-awesome)            |                                              | check-circle           |
+| Type Utilisateurs                                            | User                                  | Utilisateur                                          | [LineAwesome](https://icons8.com/line-awesome)            |                                              | user-plus              |
+| Type Routes de paiement                                      | Payment route                         | Route de paiement                                    | [LineAwesome](https://icons8.com/line-awesome)            |                                              |                        |
+| Type Comptes et équipes                                      | Account & team                        | Comptes et équipes                                   | [LineAwesome](https://icons8.com/line-awesome)            |                                              |                        |
+| Type Catalogue                                               | Catalog                               | Catalogue                                            | [LineAwesome](https://icons8.com/line-awesome)            |                                              |                        |
+| Recherche ciblée                                             | Targeted search                       | Recherche ciblée                                     | [Material Design Icons](https://materialdesignicons.com/) |                                              | Cross Hairs GPS        |
+| Exclure de la recherche                                      | Exclude from search                   | Exclure de la recherche                              | [Material Design Icons](https://materialdesignicons.com/) |                                              | close-circle-outline   |
+| Copier                                                       | Copy                                  | Copier                                               | [Material Design Icons](https://materialdesignicons.com/) |                                              | content-duplicate      |
+| Analyse de données                                           | Data analytics                        | Analyse de données                                   | [Material Design Icons](https://materialdesignicons.com/) |                                              | Poll                   |
+| Methode Tout                                                 | All                                   | Tout                                                 | [Material Design Icons](https://materialdesignicons.com/) |                                              | cards-outline          |
+| Methode  Carte de crédit                                     | Credit card                           | Carte de crédit                                      | [Material Design Icons](https://materialdesignicons.com/) |                                              | credit-card            |
+| Methode Carte de débit                                       | Debit card                            | Carte de débit                                       | [Material Design Icons](https://materialdesignicons.com/) |                                              | credit-card-plus       |
+| Methode Opération bancaires en temps réel                    | Real-Time Banking                     | Opération bancaires en temps réel                    | [Material Design Icons](https://materialdesignicons.com/) |                                              | credit-card-off        |
+| Methode Portefeuille électronique                            | E-Wallet                              | Portefeuille électronique                            | [Material Design Icons](https://materialdesignicons.com/) |                                              | wallet                 |
+| Methode Carte prépayée                                       | Prepaid card                          | Carte prépayée                                       | [Material Design Icons](https://materialdesignicons.com/) |                                              | wallet-membership      |
+| Methode Facture en cours                                     | Open Invoice                          | Facture en cours                                     | [Material Design Icons](https://materialdesignicons.com/) |                                              | clipboard-outline      |
+| Methode Consommation des crédits                             | Credit consumption                    | Consommation des crédits                             | [Material Design Icons](https://materialdesignicons.com/) |                                              | book-minus             |
+| Methode Multi-paiement                                       | Mixpayment                            | Multi-paiement                                       | [Material Design Icons](https://materialdesignicons.com/) |                                              | credit-card-multiple   |
+| Methode Carte cadeau                                         | Gift card                             | Carte cadeau                                         | [Material Design Icons](https://materialdesignicons.com/) |                                              | wallet-giftcard        |
+| Methode Facturation directe au transporteur                  | Direct carrier billing                | Facturation directe au transporteur                  | [Material Design Icons](https://materialdesignicons.com/) |                                              | clipboard-check        |
+| Sentinel Empreinte d'appareil                                | Device finger point                   | Empreinte d'appareil                                 | [Material Design Icons](https://materialdesignicons.com/) |                                              | security-network       |
+| Sentinel Données de paiement                                 | Payment data                          | Données de paiement                                  | [Material Design Icons](https://materialdesignicons.com/) |                                              | wallet-membership      |
+| Sentinel Données personnalisées                              | Custom data                           | Données personnalisées                               | [Material Design Icons](https://materialdesignicons.com/) |                                              | tune                   |
+| Sentinel Règles combinées                                    | Rules combination                     | Règles combinées                                     | [Material Design Icons](https://materialdesignicons.com/) |                                              | vector-combine         |
+| Sentinel Vérifications de la vitesse                         | Velocity checks                       | Vérifications de la vitesse                          | [Material Design Icons](https://materialdesignicons.com/) |                                              | speedometer            |
+| Sentinel Limites de dépenses                                 | Spending limits                       | Limites de dépenses                                  |                                                           |                                              |                        |
+| Sentinel Vérification de la cohérence                        | Coherence checks                      | Vérification de la cohérence                         | [Material Design Icons](https://materialdesignicons.com/) |                                              | check-all              |
+| Sentinel Contrôle d'activité                                 | Activity checks                       | Contrôle d'activité                                  | [Material Design Icons](https://materialdesignicons.com/) |                                              | incognito              |
+| Sentinel Heure d'achat                                       | Time of purchase                      | Heure d'achat                                        | [Material Design Icons](https://materialdesignicons.com/) |                                              | clock                  |
+| Sentinel Limite de notation                                  | Scoring limits                        | Limite de notation                                   | [Material Design Icons](https://materialdesignicons.com/) |                                              | traffic-light          |
+</div>

package/src/Guideline/Visuel/MISE_EN_PAGE/Comportements_tableaux.md

@@ -0,0 +1,21 @@
+1. **Largeur entre 2 colonnes** : 16px (minimum). Cette largeur permet de laisser un vide, utile à la lecture et à la bonne compréhension des données.
+2. Les tableaux de Console sont conçus pour être lu aussi bien sur un **grand écran** que sur l’écran d’un **mobile**. De fait, lorsque le tableau « dépasse » l’écran, une **scroll barre horizontale** apparaît (les flèches du clavier permettent de faire glisser le tableau, à droite ou à gauche).
+3. **Entête fixe** : Figer l’intitulé des colonnes pour toujours garder le contexte (<a href="https://ant.design/components/table/#components-table-demo-fixed-columns-header" target="blank">exemple</a>)
+4. **Tri d’affichage figé** : dans l’exemple de l’affichage des transactions, la date sert de tri d’affichage. Toutes les transactions sont triées par date, la dernière transaction apparaît en haut de la liste. La ligne qui indique la date est « <a href="http://leafo.net/sticky-kit/#examples" target="blank">sticky</a> ». Ce qui permet de l’avoir toujours sous les yeux lorsque l’on scroll.
+   - **A NOTER :**
+     - [ ] Si le tri du tableau est modifié (au clic sur le titre d’une colonne), la ligne de date sticky est effacée.
+     - [ ] La ligne de date sticky fonctionne uniquement sur le tri par défaut (date de création de la transaction par exemple) et si l’utilisateur fait un tri sur une colonne de date quelconque.
+5. **Figer la première colonne** (incluant le rang, et les cases à cocher lorsqu’il s’agit d’un tableau avec sélection) : le défilement horizontal est inévitable lorsque l’on présente de grands ensembles de données. La première colonne est figée, c'est pourquoi nous recommandons à l’utilisateur de placer les données d'identification dans celle-ci. (<a href="https://ant.design/components/table/#components-table-demo-fixed-columns-header" target="blank">exemple</a>)
+   - En mode mobile, sur smartphone, la première colonne n’est pas figée.
+6. Les tableaux principaux fonctionnent en « <a href="https://infiniteajaxscroll.com/examples/basic/page1.html" target="blank">**scroll infini**</a> ».
+   - Lorsqu’une liste contient un nombre de résultats supérieur ou égal à 50 lignes, un loader apparaît si nécessaire, puis les résultats se chargent. Lorsque le chargement est rapide, ce loader est quasi invisible.
+   - A partir de 150 lignes chargées (soit l'équivalent de 3 écrans) ET lorsque l’utilisateur commence à scroll vers le haut, un bouton « Retour en haut » ("Back to top") apparaît en haut du tableau. Ce bouton est collé en haut. Il disparaît au bout de 4 secondes d’inactivité.
+7. Par défaut, **toutes les colonnes sont triables**. Le tri des colonnes permet à l’utilisateur d’organiser les lignes par ordre alphabétique et numérique. Lorsque l’on clique sur l’intitulé d’une colonne pour lancer le tri, l’intitulé devient un peu plus gras et un trait de la couleur primaire du thème le souligne. Une icône flèche permet de savoir si le tri se fait de A à Z ou de Z à A.
+8. Certaines colonnes sont également **filtrables**. Il s’agit des colonnes dont on maîtrise la liste exhaustive des données (ex. : pays, devises, marque de paiement, méthode de paiement, utilisateurs, etc.). Au clique sur l’intitulé, une modale s’ouvre : elle propose le tri et les filtres.
+9. Certaines listes permettent à l’utilisateur d’**ajouter des colonnes ou** de **réorganiser** les colonnes présentes. Cet outil permet à l’utilisateur de limiter les données aux informations essentielles et de faire varier l’affichage en fonction de leurs usages.
+10. La largeur des colonnes peut limiter l’affichage des données. Dans ce cas, on privilégiera l’utilisation **d’abréviations**. (Ex. : *239 330,12€, va devenir 239 330€, puis  239k€ avec, au hover, un tooltip qui affiche le nombre complet*).
+11. **Alignement des textes** : l'alignement joue un grand rôle dans la lisibilité de la table, la facilité avec laquelle l’utilisateur effectue des calculs dans son esprit et la comparaison entre différentes lignes.3 règles simples.
+    - Colonnes numériques alignées à droite (taux, valeur monétaire, volume, date, …)
+    - Colonnes de texte alignées à gauche
+    - Noms de colonne alignés en fonction du contenu de la colonne
+12. Certains tableaux permettent d’afficher un **résumé des données visuelles (données sélectionnées)** au-dessus de la liste : ce que l'on nomme « Bandeau d'analyse ». Cet espace permet à l'utilisateur de repérer les tendances et les problèmes dans leur ensemble.

package/src/Guideline/Visuel/MISE_EN_PAGE/Tableaux.md

@@ -0,0 +1 @@
+**Les données sont notre matière première.** Cependant, elles n'ont aucun sens sans la capacité de les visualiser et d'agir en conséquence. Les tableaux sont efficaces car la nature des applications d'entreprise exige que **les utilisateurs consultent** simultanément **les lignes de données**, analysent **les alertes**, comparent ces dernières et les examinent dans l'ordre spécifique de leur choix.

package/src/Guideline/Visuel/POLICE_D_/303/211CRITURE/Classe_graisse_Roboto.md

@@ -0,0 +1,10 @@
+<div class="table-data">
+| Classe des graisses de Roboto | Taille |
+| :---------------------------- | :----: |
+| Thin                          |  100   |
+| Light                         |  300   |
+| Regular                       |  400   |
+| Medium                        |  500   |
+| Bold                          |  700   |
+| Black                         |  900   |
+</div>

package/src/Guideline/Visuel/POLICE_D_/303/211CRITURE/Classe_taille_texte.md

@@ -0,0 +1,13 @@
+<div class="table-data">
+| Classe de la taille des textes | Taille(px) | Exemple                                                      |
+| :----------------------------- | :--------: | :----------------------------------------------------------- |
+| H1                             |     24     | Titre des pages                                              |
+| H2                             |     20     | Bienvenue (Dashboard)                                        |
+| H3                             |     18     | Menu(niv.1), titre des vignettes dans le magasin des widgets |
+| H4                             |     16     | Menu (niv.2), arborescence aide en ligne (niv.1)             |
+| H5                             |     14     | Menu (niv.2), arborescence aide en ligne (niv.2), HiPay Enterprise (Dashboard) |
+| Body 1                         |     15     | Autocomplétion de la recherche, historique de recherche, recherche sauvegardée, valeur d'un champ, ... |
+| Body 2                         |     14     | Texte (description des widgets, articles d'aide en ligne, messages d'alerte ...) |
+| Body 3                         |     13     | Valeurs des tableaux, comptes/Business                       |
+| Body 4                         |     12     | Intitulé des colonnes                                        |
+</div>

package/src/Guideline/Visuel/UTILISATION_DES_COULEURS_DANS_LA_CONSOLE_HIPAY/UTILISATION_DES_COULEURS_DANS_LA_CONSOLE_HIPAY.md

@@ -0,0 +1,3 @@
+<div class="ucouleur">
+![UTILISATION DES COULEURS DANS LA CONSOLE HIPAY](public/guideline/img/Ucouleur.jpg)
+</div>

package/src/Guideline/index.js

@@ -0,0 +1 @@
+// fake component to display guideline

package/src/HiAlertModal/HiAlertModal.js

@@ -0,0 +1,266 @@
+// @inheritedComponent Dialog
+
+import React, { useRef } from 'react';
+import PropTypes from 'prop-types';
+import Dialog from '@material-ui/core/Dialog';
+import DialogActions from '@material-ui/core/DialogActions';
+import DialogContent from '@material-ui/core/DialogContent';
+import DialogContentText from '@material-ui/core/DialogContentText';
+import DialogTitle from '@material-ui/core/DialogTitle';
+import { makeStyles } from '@material-ui/core/styles';
+import HiButton from '../HiButton';
+import HiIcon from '../HiIcon';
+import { escapeHTML } from '../utils/helpers';
+
+const useStyles = makeStyles(theme => ({
+    classContent: {
+        fontSize: 14,
+        lineHeight: '24px',
+        color: '#484848',
+        position: 'relative',
+    },
+    classDialogPaper: {
+        backgroundColor: theme.palette.background3,
+        minHeight: 248,
+        maxWidth: 280,
+        borderRadius: 2,
+    },
+    classCancelButton: {
+        margin: '0',
+    },
+    classSubmitButton: {
+        float: 'right',
+    },
+    classTitle: {
+        fontSize: 20,
+        fontFamily: theme.typography.fontFamily,
+        fontWeight: theme.typography.fontWeightLight,
+        lineHeight: '24px',
+    },
+    classAction: {
+        display: 'inline-block',
+        margin: '0',
+        padding: '0px 24px 24px 24px',
+    },
+    classDialogRoot: {
+        backgroundColor: 'rgba(0, 0, 0, 0.28)',
+    },
+    classBackgroundIcon: {
+        position: 'absolute',
+        top: 'calc(50%)',
+        left: '50%',
+        transform: 'translate(-50%, -50%)',
+        color: theme.palette.background2,
+        flex: '1',
+    },
+    backgroundIcon: props => {
+        return {
+            fontSize: `${props.iconSize}px !important`,
+        }
+    }
+}));
+
+/**
+ * Pop up d'alert
+ */
+const HiAlertModal = props => {
+    const {
+        backgroundIcon,
+        iconSize,
+        content,
+        labelCancelButton,
+        labelSubmitButton,
+        onCancelClick,
+        onSubmitClick,
+        open,
+        cancelColor,
+        submitColor,
+        title,
+        theme,
+        onClose,
+        submitActionsRef,
+        cancelActionsRef,
+        ...others
+    } = props;
+
+    const classes = useStyles(props);
+    const submitButtonRef = useRef(null);
+    const cancelButtonRef = useRef(null);
+
+    let thisCancelActionsRef = {...cancelActionsRef};
+    let thisSubmitActionsRef = {...submitActionsRef};
+
+    // Appelé si clic en dehors de la pop up
+    const handleOnClose = () => {
+        if (onClose) {
+            onClose();
+        }
+    };
+
+    const handleOnEntered = () => {
+        if (labelSubmitButton) {
+            submitButtonRef.current.focus();
+            thisSubmitActionsRef.focusVisible();
+        } else if (props.labelCancelButton) {
+            cancelButtonRef.current.focus();
+            thisCancelActionsRef.focusVisible();
+        }
+    }
+
+    // Render
+
+    let dialogContent = content;
+    if (typeof content === 'string') {
+        dialogContent = (<span
+            // eslint-disable-next-line react/no-danger
+            dangerouslySetInnerHTML={{
+                __html: escapeHTML(content),
+            }}
+        />);
+    }
+
+    let bgIcon;
+    if (backgroundIcon) {
+        const iconProps = {
+            color: "inherit",
+            className: classes.backgroundIcon,
+        };
+        if (typeof backgroundIcon === 'string') {
+            bgIcon = <HiIcon icon={backgroundIcon} {...iconProps} />;
+        } else if (typeof backgroundIcon === 'object') {
+            bgIcon = {...backgroundIcon};
+            bgIcon.props = {...iconProps};
+        }
+    }
+
+    return (
+        <Dialog
+            open={open}
+            onClose={handleOnClose}
+            onEntered={handleOnEntered}
+            classes={{ root: classes.classDialogRoot, paper: classes.classDialogPaper }}
+            {...others}
+        >
+            {bgIcon && (
+                <div className={classes.classBackgroundIcon}>
+                    {bgIcon}
+                </div>
+            )}
+            {title && (
+                <DialogTitle disableTypography classes={{ root: classes.classTitle }}>
+                    {title}
+                </DialogTitle>
+            )}
+            <DialogContent>
+                <DialogContentText classes={{ root: classes.classContent }}>
+                    {dialogContent}
+                </DialogContentText>
+            </DialogContent>
+            <DialogActions classes={{ root: classes.classAction }}>
+                {labelCancelButton && (
+                    <HiButton
+                        classes={{ root: classes.classCancelButton }}
+                        onClick={onCancelClick}
+                        color={cancelColor}
+                        innerRef={cancelButtonRef}
+                        action={actions => {
+                            thisCancelActionsRef = actions;
+                        }}
+                    >
+                        {labelCancelButton}
+                    </HiButton>
+                )}
+                {labelSubmitButton && (
+                    <HiButton
+                        classes={{ root: classes.classSubmitButton }}
+                        onClick={onSubmitClick}
+                        color={submitColor}
+                        innerRef={submitButtonRef}
+                        action={actions => {
+                            thisSubmitActionsRef = actions;
+                        }}
+                    >
+                        {labelSubmitButton}
+                    </HiButton>
+                )}
+            </DialogActions>
+        </Dialog>
+    );
+}
+
+HiAlertModal.propTypes = {
+    /**
+     * Icon à mettre en fond
+     */
+    backgroundIcon: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
+    /**
+     * The color of the cancel button. It supports those theme colors that make sense for this component.
+     */
+    cancelColor: PropTypes.oneOf([
+        'default',
+        'inherit',
+        'primary',
+        'secondary',
+        'positive',
+        'negative',
+        'middle',
+        'neutral',
+    ]),
+    /**
+     * Surcharge les classes du composant
+     */
+    classes: PropTypes.object,
+    /**
+     * Texte contenu dans la modal
+     */
+    content: PropTypes.oneOfType([PropTypes.string, PropTypes.object, PropTypes.node]),
+    /**
+     * Texte sur le bouton d'annulation
+     */
+    labelCancelButton: PropTypes.string,
+    /**
+     * Texte sur le bouton de soumission
+     */
+    labelSubmitButton: PropTypes.string,
+    /**
+     * Fonction de callback appelée au clic sur le bouton d'annulation
+     */
+    onCancelClick: PropTypes.func,
+    /**
+     * Fonction de callback appelée au clic en dehors de la pop up
+     */
+    onClose: PropTypes.func,
+    /**
+     * Fonction de callback appelée au clic sur le bouton de soumission
+     */
+    onSubmitClick: PropTypes.func,
+    /**
+     * pop up ouverte ou pas
+     */
+    open: PropTypes.bool.isRequired,
+    /**
+     * The color of the submit button. It supports those theme colors that make sense for this component.
+     */
+    submitColor: PropTypes.oneOf([
+        'default',
+        'inherit',
+        'primary',
+        'secondary',
+        'positive',
+        'negative',
+        'middle',
+        'neutral',
+    ]),
+    /**
+     * Titre de la modal
+     */
+    title: PropTypes.string,
+};
+
+HiAlertModal.defaultProps = {
+    content: '',
+    cancelColor: 'neutral',
+    submitColor: 'primary',
+};
+
+export default HiAlertModal;