@hipay/hipay-material-ui 3.4.1 → 3.5.0

package/public/guideline/img/calendar-check.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path d="M19,19H5V8H19M19,3H18V1H16V3H8V1H6V3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5A2,2 0 0,0 19,3M16.53,11.06L15.47,10L10.59,14.88L8.47,12.76L7.41,13.82L10.59,17L16.53,11.06Z" /></svg>

package/public/guideline/img/share-variant.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path d="M18,16.08C17.24,16.08 16.56,16.38 16.04,16.85L8.91,12.7C8.96,12.47 9,12.24 9,12C9,11.76 8.96,11.53 8.91,11.3L15.96,7.19C16.5,7.69 17.21,8 18,8A3,3 0 0,0 21,5A3,3 0 0,0 18,2A3,3 0 0,0 15,5C15,5.24 15.04,5.47 15.09,5.7L8.04,9.81C7.5,9.31 6.79,9 6,9A3,3 0 0,0 3,12A3,3 0 0,0 6,15C6.79,15 7.5,14.69 8.04,14.19L15.16,18.34C15.11,18.55 15.08,18.77 15.08,19C15.08,20.61 16.39,21.91 18,21.91C19.61,21.91 20.92,20.61 20.92,19A2.92,2.92 0 0,0 18,16.08Z" /></svg>

package/public/guideline/img/tag.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path d="M5.5,7A1.5,1.5 0 0,1 4,5.5A1.5,1.5 0 0,1 5.5,4A1.5,1.5 0 0,1 7,5.5A1.5,1.5 0 0,1 5.5,7M21.41,11.58L12.41,2.58C12.05,2.22 11.55,2 11,2H4C2.89,2 2,2.89 2,4V11C2,11.55 2.22,12.05 2.59,12.41L11.58,21.41C11.95,21.77 12.45,22 13,22C13.55,22 14.05,21.77 14.41,21.41L21.41,14.41C21.78,14.05 22,13.55 22,13C22,12.44 21.77,11.94 21.41,11.58Z" /></svg>

package/public/guideline/style.css

@@ -0,0 +1,112 @@
+div[data-testid=sidebar] li{
+  color: red;
+}
+
+section[data-testid=section-section-guideline] *{
+  font-family: "Roboto", "-apple-system", "BlinkMacSystemFont", "Segoe UI", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+}
+
+section[data-testid=section-section-guideline] p, section[data-testid=section-section-guideline] li{
+  font-size: 14px;
+}
+
+section[data-testid=section-section-guideline] img {
+  padding-top: 8px;
+    width: 100%;
+}
+
+section[data-testid=section-section-guideline] h2{
+  border-bottom: 1px solid #EEEEEE;
+  padding-bottom: 16px;
+}
+
+section[data-testid=section-section-guideline] h3{
+  border-bottom: 1px solid #EEEEEE;
+  padding-bottom: 16px;
+}
+
+section[data-testid=section-section-guideline] h6{
+  font-style: normal;
+  border-bottom: 1px solid #EEEEEE;
+  padding-bottom: 4px;
+  font-weight: 500;
+}
+section[data-testid=section-section-guideline] tr:nth-child(odd) {
+  background-color: #F8F9FB;
+
+}
+
+section[data-testid=section-section-guideline] table{
+  border-collapse: collapse;
+  margin: 25px auto;
+  font-size: 0.9em;
+  border-radius: 8px 8px 0 0;
+  overflow: hidden;
+  box-shadow: 0 0 16px rgba(0, 0, 0, 0.15);
+  width: 100%;
+  table-layout: fixed;
+}
+
+section[data-testid=section-section-guideline] .table-data img{
+  width: 25%;
+  margin-left: auto;
+  margin-right: auto;
+  display: block;
+}
+
+section[data-testid=section-section-guideline] td{
+  border: 1px solid;
+  padding: 12px 8px;
+  border-color: #EEE;
+  vertical-align: middle;
+}
+
+section[data-testid=section-section-guideline] th{
+  border: 1px solid;
+  text-align: center;
+}
+
+section[data-testid=section-section-guideline] h1,section[data-testid=section-section-guideline] h2,section[data-testid=section-section-guideline] h3,section[data-testid=section-section-guideline] h4,section[data-testid=section-section-guideline] h5 {
+  font-weight: bolder;
+}
+
+section[data-testid=section-section-guideline] thead th:nth-child(even) {
+    background: #00AF00;
+    border-color: #00AF00;
+    padding: 0px 8px;
+    font-weight: bold;
+}
+
+section[data-testid=section-section-guideline] thead th:nth-child(odd) {
+    background: #D50000;
+    border-color: #D50000;
+    padding: 0px 8px;
+    font-weight: bold;
+}
+
+section[data-testid=section-section-guideline] thead th{
+  border-color: #EEE;
+  color: #FFF;
+}
+
+section[data-testid=section-section-guideline] div.table-data th{
+  background: #00ADE9;
+  border-color: #EEE;
+  color: #000;
+}
+
+section[data-testid=section-section-guideline] .connecteurs_logiques{
+  max-width: 75%;
+  height: auto;
+  margin-left: auto;
+  margin-right: auto;
+  display: block;
+}
+
+section[data-testid=section-section-guideline] .ucouleur{
+  max-width: 85%;
+  height: auto;
+  margin-left: auto;
+  margin-right: auto;
+  display: block;
+}

package/public/index.html

@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <link rel="stylesheet"
+          href="https://maxcdn.icons8.com/fonts/line-awesome/1.1/css/line-awesome-font-awesome.min.css">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
+    <!--
+      manifest.json provides metadata used when your web app is installed on a
+      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>React App</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>

package/public/manifest.json

@@ -0,0 +1,15 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}

package/scripts/copy-files.js

@@ -0,0 +1,140 @@
+/* eslint-disable no-console */
+const path = require('path');
+const fse = require('fs-extra');
+const glob = require('glob');
+
+const packagePath = process.cwd();
+const buildPath = path.join(packagePath, './build');
+const srcPath = path.join(packagePath, './src');
+
+async function includeFileInBuild(file) {
+    const sourcePath = path.resolve(packagePath, file);
+    const targetPath = path.resolve(buildPath, path.basename(file));
+    await fse.copy(sourcePath, targetPath);
+    console.log(`Copied ${sourcePath} to ${targetPath}`);
+}
+
+/**
+ * Puts a package.json into every immediate child directory of rootDir.
+ * That package.json contains information about esm for bundlers so that imports
+ * like import Typography from '@material-ui/core/Typography' are tree-shakeable.
+ *
+ * It also tests that an this import can be used in typescript by checking
+ * if an index.d.ts is present at that path.
+ *
+ * @param {string} rootDir
+ */
+async function createModulePackages({ from, to }) {
+    const directoryPackages = glob.sync('*/index.js', { cwd: from }).map(path.dirname);
+
+    await Promise.all(
+        directoryPackages.map(async directoryPackage => {
+            const packageJson = {
+                sideEffects: false,
+                module: path.join('../esm', directoryPackage, 'index.js'),
+                // typings: './index.d.ts',
+            };
+            const packageJsonPath = path.join(to, directoryPackage, 'package.json');
+
+            // const [typingsExist] = await Promise.all([
+            //     fse.exists(path.join(to, directoryPackage, 'index.d.ts')),
+            //     fse.writeFile(packageJsonPath, JSON.stringify(packageJson, null, 2)),
+            // ]);
+            //
+            // if (!typingsExist) {
+            //     throw new Error(`index.d.ts for ${directoryPackage} is missing`);
+            // }
+
+            return packageJsonPath;
+        }),
+    );
+}
+
+async function typescriptCopy({ from, to }) {
+    if (!(await fse.exists(to))) {
+        console.warn(`path ${to} does not exists`);
+        return [];
+    }
+
+    const files = glob.sync('**/*.d.ts', { cwd: from });
+    const cmds = files.map(file => fse.copy(path.resolve(from, file), path.resolve(to, file)));
+    return Promise.all(cmds);
+}
+
+async function createPackageFile() {
+    const packageData = await fse.readFile(path.resolve(packagePath, './package.json'), 'utf8');
+    const { nyc, scripts, devDependencies, workspaces, ...packageDataOther } = JSON.parse(
+        packageData,
+    );
+    const newPackageData = {
+        ...packageDataOther,
+        private: false,
+        main: './index.js',
+        module: './esm/index.js',
+        // typings: './index.d.ts',
+    };
+    const targetPath = path.resolve(buildPath, './package.json');
+
+    await fse.writeFile(targetPath, JSON.stringify(newPackageData, null, 2), 'utf8');
+    console.log(`Created package.json in ${targetPath}`);
+
+    return newPackageData;
+}
+
+async function prepend(file, string) {
+    const data = await fse.readFile(file, 'utf8');
+    await fse.writeFile(file, string + data, 'utf8');
+}
+
+async function addLicense(packageData) {
+    const license = `/** @license Material-UI v${packageData.version}
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+`;
+    await Promise.all(
+        [
+            './index.js',
+            './esm/index.js',
+            './umd/material-ui.development.js',
+            './umd/material-ui.production.min.js',
+        ].map(async file => {
+            try {
+                await prepend(path.resolve(buildPath, file), license);
+            } catch (err) {
+                if (err.code === 'ENOENT') {
+                    console.log(`Skipped license for ${file}`);
+                } else {
+                    throw err;
+                }
+            }
+        }),
+    );
+}
+
+async function run() {
+    try {
+        const packageData = await createPackageFile();
+
+        await Promise.all(
+            [
+                './README.md',
+                // '../../CHANGELOG.md',
+                // './LICENSE',
+            ].map(file => includeFileInBuild(file)),
+        );
+
+        await addLicense(packageData);
+
+        // TypeScript
+        await typescriptCopy({ from: srcPath, to: buildPath });
+
+        await createModulePackages({ from: srcPath, to: buildPath });
+    } catch (err) {
+        console.error(err);
+        process.exit(1);
+    }
+}
+
+run();

package/scripts/export-coverage.sh

@@ -0,0 +1,6 @@
+#!/bin/bash
+set -ev
+
+if [ ! -z "${COVERALLS_REPO_TOKEN}" ]; then
+  cat ./test/coverage/lcov.info | ./node_modules/coveralls/bin/coveralls.js
+fi

package/scripts/rollup.config.js

@@ -0,0 +1,60 @@
+import nodeResolve from 'rollup-plugin-node-resolve';
+import commonjs from 'rollup-plugin-commonjs';
+import babel from 'rollup-plugin-babel';
+import replace from 'rollup-plugin-replace';
+import json from 'rollup-plugin-json';
+import nodeGlobals from 'rollup-plugin-node-globals';
+import { uglify } from 'rollup-plugin-uglify';
+import { sizeSnapshot } from 'rollup-plugin-size-snapshot';
+
+const input = './src/index.js';
+const name = 'hipay-material-ui';
+const globals = {
+  react: 'React',
+  'react-dom': 'ReactDOM',
+};
+const babelOptions = {
+  exclude: /node_modules/,
+  // We are using @babel/plugin-transform-runtime
+  runtimeHelpers: true,
+  configFile: '../../babel.config.js',
+};
+const commonjsOptions = {
+  ignoreGlobal: true,
+  include: /node_modules/,
+  exclude: '*.json',
+};
+const jsonOptions = {
+
+};
+
+export default [
+  {
+    input,
+    output: { file: `build/umd/${name}.development.js`, format: 'umd', name, globals },
+    external: Object.keys(globals),
+    plugins: [
+      nodeResolve(),
+      babel(babelOptions),
+      json(jsonOptions),
+      commonjs(commonjsOptions),
+      nodeGlobals(),
+      replace({ 'process.env.NODE_ENV': JSON.stringify('development') }),
+    ],
+  },
+  {
+    input,
+    output: { file: `build/umd/${name}.production.min.js`, format: 'umd', name, globals },
+    external: Object.keys(globals),
+    plugins: [
+      nodeResolve(),
+      babel(babelOptions),
+      json(jsonOptions),
+      commonjs(commonjsOptions),
+      nodeGlobals(),
+      replace({ 'process.env.NODE_ENV': JSON.stringify('production') }),
+      sizeSnapshot(),
+      uglify(),
+    ],
+  },
+];

package/sonar-project.properties

@@ -0,0 +1,24 @@
+# must be unique in a given SonarQube instance
+sonar.projectKey=hipay-material-ui
+
+# this is the name and version displayed in the SonarQube UI. Was mandatory prior to SonarQube 6.1.
+sonar.projectName=HiPay Material UI
+sonar.projectVersion=1.0
+
+# Path is relative to the sonar-project.properties file. Replace "\" by "/" on Windows.
+# This property is optional if sonar.modules is set.
+sonar.language=js
+sonar.sources=packages/hipay-material-ui/src
+sonar.exclusions=**/nodes_modules/**,**/build/**
+sonar.coverage.exclusions=**test**
+sonar.cpd.exclusions=**test**
+sonar.scm.provider=git
+sonar.javascript.lcov.reportPaths=test/coverage/lcov.info
+
+# Sonar GitLab Plugin
+# the issues limit are only on the commit analysis
+sonar.gitlab.project_id=git@gitlab.hipay.org:backend/hipay-material-ui.git
+sonar.gitlab.max_blocker_issues_gate=0
+sonar.gitlab.max_critical_issues_gate=0
+sonar.gitlab.max_major_issues_gate=0
+sonar.gitlab.max_minor_issues_gate=0

package/src/App.css

@@ -0,0 +1,33 @@
+.App {
+  text-align: center;
+}
+
+.App-logo {
+  animation: App-logo-spin infinite 20s linear;
+  height: 40vmin;
+  pointer-events: none;
+}
+
+.App-header {
+  background-color: #282c34;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-size: calc(10px + 2vmin);
+  color: white;
+}
+
+.App-link {
+  color: #61dafb;
+}
+
+@keyframes App-logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}

package/src/App.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import logo from './logo.svg';
+import './App.css';
+
+function App() {
+  return (
+    <div className="App">
+      <header className="App-header">
+        <img src={logo} className="App-logo" alt="logo" />
+        <p>
+          Edit <code>src/App.js</code> and save to reload.
+        </p>
+        <a
+          className="App-link"
+          href="https://reactjs.org"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          Learn React
+        </a>
+      </header>
+    </div>
+  );
+}
+
+export default App;

package/src/App.test.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './App';
+
+it('renders without crashing', () => {
+  const div = document.createElement('div');
+  ReactDOM.render(<App />, div);
+  ReactDOM.unmountComponentAtNode(div);
+});

package/src/Guideline/Accessibilit/303/251/AIDE_ET_DOCUMENTATION/Am/303/251liorez_lisibilit/303/251/Enrichissez_structure.md

@@ -0,0 +1,3 @@
+Brisez les parties complexes en utilisant des connecteurs logiques (en effet, cependant, de sorte que, en premier lieu, etc.).<div class="connecteurs_logiques">![Connecteurs_logiques](public/guideline/img/Connecteurs_logiques.jpg)</div>
+
+**NB :** Évitez la répétition lors de longs paragraphes tel que « Pour faire A, faites B puis pour faire C, faites D enfin pour faire Z, faites Y. Etc. »

package/src/Guideline/Accessibilit/303/251/AIDE_ET_DOCUMENTATION/Am/303/251liorez_lisibilit/303/251//303/211vitez_/303/251criture_saccad/303/251e.md

@@ -0,0 +1,5 @@
+Utilisez des conjonctions de coordination (mais, ou, est, donc, or, ni, car) ou bien des prépositions afin d’éviter de diviser les instructions.
+
+|                           MAUVAIS                            |                             BON                              |
+| :----------------------------------------------------------: | :----------------------------------------------------------: |
+| Sélectionnez la période. Seules les transactions comprises entre ces dates s'affichent. | Sélectionnez la période afin de n’afficher que les transitions comprises entre ces dates. |

package/src/Guideline/Accessibilit/303/251/AIDE_ET_DOCUMENTATION/Captures_/303/251crans.md

@@ -0,0 +1 @@
+Ne **JAMAIS** utiliser de **capture d'écran** pour illustrer quoi que ce soit (une action, un résultat, etc.). La Console HiPay est un outil **personnalisable**, les écrans et les configurations changent d'un utilisateur à un autre. En revanche, vous pouvez utiliser les icônes en noir et blanc.

package/src/Guideline/Accessibilit/303/251/AIDE_ET_DOCUMENTATION/Clarifiez_actions/Mentionnez_/303/251tapes.md

@@ -0,0 +1 @@
+Cas 1. Progression au sein d’une série d’étapes : utilisez la phrase « **Lorsque vous avez…** » ou « **Après avoir…** » ; à éviter « Une fois que vous avez… ».<br/>Cas 2. Progression entre les tâches : débutez la section avec la phrase « **Maintenant que vous avez…** » ou « **Après avoir…** » ; à éviter « Dès que vous avez… ».

package/src/Guideline/Accessibilit/303/251/AIDE_ET_DOCUMENTATION/Clarifiez_actions/Regroupez_r/303/251sultats.md

@@ -0,0 +1,5 @@
+Dans le cas où vous avez besoin de spécifier le résultat qu’une action doit donner, décrivez le résultat dans la même étape. De manière générale, on ne le spécifie pas sauf si ce dernier est surprenant ou inattendu.
+
+| MAUVAIS                                                      | BON                                                          |
+| :----------------------------------------------------------- | :----------------------------------------------------------- |
+| 1. Cliquez sur le widget<br>2. La fenêtre s'agrandit<br>3. Personnalisez le widget | 1. Cliquez sur l'icône, la fenêtre s'agrandit<br/>2. Personnalisez le widget |

package/src/Guideline/Accessibilit/303/251/AIDE_ET_DOCUMENTATION/Clarifiez_actions/Utilisez_verbes.md

@@ -0,0 +1,9 @@
+Lorsque vous demandez à l’utilisateur de valider un choix de haute importance, utilisez :
+
+1. « **Assurez-vous **» dans le cas où la tâche en cours ne sera pas terminée et qu’il reste d’autres demandes ; évitez d’utiliser « vérifiez que… ».
+2. « **Confirmez** » dans le cas ou l’utilisateur à déjà été informé de faire telle action et vous le lui rappelez maintenant.
+
+|                           MAUVAIS                            |                             BON                              |
+| :----------------------------------------------------------: | :----------------------------------------------------------: |
+| Vérifiez que vous avez bien renseigné tous les champs avant de continuer. | Assurez-vous d’avoir bien renseigné tous les champs avant de continuer. |
+| Cliquez sur le bouton « Confirmer » pour envoyer ce formulaire. |             Confirmez l’envoi de ce formulaire.              |

package/src/Guideline/Accessibilit/303/251/AIDE_ET_DOCUMENTATION/Expliquez_t/303/242ches/Introduisez_le_sujet.md

@@ -0,0 +1 @@
+Il faut que vous donniez du contexte ! Demandez-vous quelles informations l’utilisateur doit connaître avant de s’attaquer aux instructions.

package/src/Guideline/Accessibilit/303/251/AIDE_ET_DOCUMENTATION/Expliquez_t/303/242ches/Num/303/251rotez_les_/303/251tapes.md

@@ -0,0 +1,6 @@
+Séparez les instructions en plusieurs étapes numérotées. Dans un premier temps, cela aide à garder l’attention de l’utilisateur, dans un second temps cela l’aide à alterner entre l’aide en ligne et Console. Point important : maximum 8 étapes par listes. Si une tâche en requiert plus divisez-la en plusieurs listes avec pour chacune un titre.
+
+|                           MAUVAIS                            |                             BON                              |
+| :----------------------------------------------------------: | :----------------------------------------------------------: |
+| 1.<br/>2.<br/>3.<br/>4.<br/>5.<br/>6.<br/>7.<br/>8.<br/>9.<br/>10. | Créer son compte<br/>1.<br/>2.<br/>3.<br/>4.<br/>5.<br/>Sécuriser son compte<br/>1. <br/>2.<br/>3.<br/>4.<br/>5. |
+| 1. Depuis votre tableau de bord, cliquez sur le Widget<br> concerné puis supprimez-le à l’aide de l’icône poubelle,<br> enfin confirmez la demande. | 1. Depuis votre tableau de bord, cliquez sur le Widget concerné.<br/>2. Supprimez-le à l’aide de l’icône poubelle.<br/>3. Confirmez la demande. |

package/src/Guideline/Accessibilit/303/251/AIDE_ET_DOCUMENTATION/Expliquez_t/303/242ches/T/303/242ches_inclusives.md

@@ -0,0 +1,37 @@
+Il faut dire à l’utilisateur ce qu’il peut faire avec le produit. Et non pas ce que le produit peut faire.<br/>Certes, la finalité est la même, mais la manière d’y arriver est différente. Il faut garder à l’esprit que l’utilisateur ne vient pas pour se documenter sur les différentes fonctionnalités du produit.
+
+|                           MAUVAIS                            |                             BON                              |
+| :----------------------------------------------------------: | :----------------------------------------------------------: |
+| HiPay Sentinel offre la possibilité à son utilisateur de gérer ses transactions en toute sécurité. | Accédez à HiPay Sentinel afin de protéger vos transactions des tentatives de fraude. |
+
+
+
+Évitez de demander à l’utilisateur de « trouver » ou « rechercher » quelque chose.
+
+|                           MAUVAIS                            |                             BON                              |
+| :----------------------------------------------------------: | :----------------------------------------------------------: |
+| Recherchez l’onglet Widget puis cliquez sur celui que vous souhaitez ajouter. | Dans l’onglet Widget, cliquez sur celui que vous voulez ajouter. |
+
+
+
+Utilisez le verbe d’action « **sélectionner** » lorsque l’utilisateur doit faire un choix entre un nombre défini de fonctionnalités, notamment lorsqu’il s’agit d’une liste ou un d’un menu déroulant.<br/>Quant au verbe d’action « **choisir** », sa place se situe plus dans un choix ouvert.
+
+|                           MAUVAIS                            |                             BON                              |
+| :----------------------------------------------------------: | :----------------------------------------------------------: |
+| Depuis le menu déroulant, choisissez le filtre qui vous convient. | Depuis le menu déroulant, sélectionnez le filtre qui vous convient. |
+
+
+
+Soyez direct. Ne les embarrassez pas avec les formalités telles que : « si vous souhaitez… » ou « vous pouvez… ».
+
+|                           MAUVAIS                            |                             BON                              |
+| :----------------------------------------------------------: | :----------------------------------------------------------: |
+| Si vous souhaitez changer de compte, vous pouvez cliquer sur le bouton « TOUS LES COMPTES ». | Si vous voulez changer de compte, cliquez sur le bouton « TOUS LES COMPTES ». |
+
+
+
+Évitez d’utiliser le verbe « désirer » à la voix passive, à la place de « **vouloir** » à la voix active qui est plus direct et plus inclusif.
+
+|                           MAUVAIS                            |                             BON                              |
+| :----------------------------------------------------------: | :----------------------------------------------------------: |
+| Sélectionnez la période désirée dans les filtres de recherche. | Sélectionnez la période que vous voulez définir dans les filtres de recherche. |

package/src/Guideline/Accessibilit/303/251/AIDE_ET_DOCUMENTATION/Expliquez_t/303/242ches//303/211crire_liste.md

@@ -0,0 +1,20 @@
+La rédaction d'une **liste** **ouverte par deux points** « : » dans un article d'aide en ligne répond à **plusieurs règles typographiques** :
+
+- **p**as de majuscule sur la première lettre de chaque item (sauf nom propre),
+- une virgule à la fin de chaque item**,**
+- un point à la fin du dernier item**.**
+
+| MAUVAIS                                                      | BON                                                          |
+| ------------------------------------------------------------ | :----------------------------------------------------------- |
+| Les raisons d’un refus peuvent être nombreuses :<br/>• Limite de crédit dépassée<br/>• Carte expirée<br/>• Date d'expiration incorrecte<br/>• Solde insuffisant | Les raisons d’un refus peuvent être nombreuses :<br>• limite de crédit dépassée,<br>• carte expirée,<br/>• date d'expiration incorrecte,<br/>• solde insuffisant. |
+
+
+
+Une **liste simple** qui **n'est pas ouverte pas deux points** « : » doit être écrite **comme une phrase**.
+
+- **U**ne majuscule en début de phrase.
+- Un point en fin de phrase**.**
+
+| MAUVAIS                                                      | BON                                                          |
+| ------------------------------------------------------------ | :----------------------------------------------------------- |
+| Les raisons d’un refus peuvent être nombreuses.<br/>• limite de crédit dépassée,<br/>• carte expirée,<br/>• date d'expiration incorrecte,<br/>• solde insuffisant. | Les raisons d’un refus peuvent être nombreuses.<br>• Limite de crédit dépassée.<br>• Carte expirée.<br/>• Date d'expiration incorrecte.<br/>• Solde insuffisant. |

package/src/Guideline/Accessibilit/303/251/AIDE_ET_DOCUMENTATION/Identifier_les_diff/303/251rents_utilisateurs.md

@@ -0,0 +1,8 @@
+<div class="table-data">
+| Utilisateurs            | Caractéristiques                                             | Attentes                                                     |
+| ----------------------- | ------------------------------------------------------------ | ------------------------------------------------------------ |
+| Les prospects           | \- N’ont pas encore adhéré à la Console Hipay                | \- Un rapide guide d’introduction vidéo<br/>\- Une vue d’ensemble conceptuelle |
+| Les novices             | \- Viennent d’adhérer à la Console Hipay<br/>\- Pas très à l’aise avec l’outil informatique<br/>\- Avec peu de connaissance dans le paiement | \- Pas mal d’aide pour la prise en main.<br/>\- Une définition des termes techniques et fonctionnels.<br/>\- Une vue d’ensemble conceptuelle et des tutoriels (vidéo/ visuels).<br/>\- Une aide en ligne contextuelle. |
+| Les expérimentés        | \- Utilisent La Console depuis pas mal de temps.<br/>\- À l’aise avec l’outil informatique.<br/>\- À l’aise avec le métier du paiement.<br/>\- Capables de personnaliser leur interface avec un peu d’aide en ligne. | \- Une définition des termes techniques.<br/>\- Une vue d’ensemble conceptuelle.<br/>\- Des tutoriels plus avancés.<br/>\- Une aide en ligne contextuelle. |
+| Les experts (technique) | \- Très expérimentés et super à l’aise avec l’outil.<br/>\- Savent effectuer une recherche experte sur la Console.<br/>\- Savent comment résoudre les différents problèmes rencontrés sur La Console.<br/>\- Se documentent via les articles d’information et d’aide en ligne.<br/>\- Capables de personnaliser leur interface sans aide en ligne. | \- Les procédures d’instruction.<br/>\- Avoir accès aux API.<br/>\- Des liens vers d’autres sources d’information. |
+</div>

package/src/Guideline/Accessibilit/303/251/AIDE_ET_DOCUMENTATION/Structurez_/303/251l/303/251ments.md

@@ -0,0 +1,5 @@
+Pour les éléments qui font l’objet de conditions, commencez votre phrase par « **Si** », de telle sorte que l’utilisateur n’ai pas besoin de lire toute la phrase pour se rendre compte que la condition ne s’applique pas pour son cas.<br/>Enfin, vous avez la possibilité d’ajouter « **Alors** » pour lui permettre de mieux identifier d’une part, la condition, et d'autre part l’issue.
+
+|                     MAUVAIS                      |                           BON                           |
+| :----------------------------------------------: | :-----------------------------------------------------: |
+| Cliquez sur A, B, et C si vous avez besoin de D. | Si vous avez besoin de D, alors cliquez sur A, B, et C. |

package/src/Guideline/Accessibilit/303/251/AIDE_ET_DOCUMENTATION/Utilisez_des_titres/Astuces_pour_concevoir_vos_titres.md

@@ -0,0 +1,23 @@
+Évitez d’écrire le fameux « comment » ("How to" en anglais). Vous pouvez déroger à la règle lorsqu’il s’agit d’une F.A.Q ou lorsque le titre nécessite ce mot pour des raisons spécifiques. Exemple : « Comment HiPay établit une relation de confiance avec ses utilisateurs ? ».
+
+|               MAUVAIS                |            BON             |
+| :----------------------------------: | :------------------------: |
+| Comment effectuer un remboursement ? | Effectuer un remboursement |
+
+
+
+Gardez de la cohérence entre les différents titres d’une même partie.
+
+|                           MAUVAIS                            |                             BON                              |
+| :----------------------------------------------------------: | :----------------------------------------------------------: |
+| —> Effectuer un remboursement<br/>   —> Comment choisir le destinataire<br/>      —> Le choix du mode de paiement<br/>         —> La date de la transaction | —> Effectuer un remboursement<br/>   —> Choisir le destinataire<br/>      —> Sélectionner un mode de paiement<br/>         —> Fixer la date de la transaction |
+
+
+
+Ne mettez pas de point à la fin d’un titre. Ne mettez pas non plus de capitale sur tous les noms communs, sauf lorsqu’il s’agit d’un terme spécifique à La Console.
+
+|             MAUVAIS              |               BON                |
+| :------------------------------: | :------------------------------: |
+|   Effectuer un remboursement.    |    Effectuer un remboursement    |
+| Sélectionner un Mode de Paiement | Sélectionner un mode de paiement |
+|     Accéder à hipay sentinel     |     Accéder à HiPay Sentinel     |