fcad-core-dragon 2.0.0-beta.1 → 2.0.0-beta.10

package/.editorconfig

@@ -1,33 +1,8 @@
-# http://editorconfig.org
-root = true
-
-[*]
-indent_style = space
-indent_size = 2
-end_of_line = lf
+[*.{js,jsx,mjs,cjs,ts,tsx,mts,cts,vue,css,scss,sass,less,styl}]
 charset = utf-8
-trim_trailing_whitespace = true
+indent_size = 2
+indent_style = space
 insert_final_newline = true
-
-
-# The JSON files contain newlines inconsistently
-[*.json]
-insert_final_newline = ignore
-
-# Minified JavaScript files shouldn't be changed
-[**.min.js]
-indent_style = ignore
-insert_final_newline = ignore
-
-# Makefiles always use tabs for indentation
-[Makefile]
-indent_style = tab
-
-# Batch files use tabs for indentation
-[*.bat]
-indent_style = tab
-
-[*.md]
-trim_trailing_whitespace = false
- insert_final_newline = false
-
+trim_trailing_whitespace = true
+end_of_line = lf
+max_line_length = 80

package/.prettierrc

@@ -0,0 +1,11 @@
+{
+  "$schema": "https://www.schemastore.org/prettierrc.json",
+  "singleQuote": true,
+  "semi": false,
+  "tabWidth": 2,
+  "trailingComma": "none",
+  "arrowParens": "always",
+  "htmlWhitespaceSensitivity": "ignore",
+  "endOfLine": "auto",
+  "printWidth": 80
+}

package/.vscode/extensions.json

@@ -0,0 +1,8 @@
+{
+  "recommendations": [
+    "Vue.volar",
+    "dbaeumer.vscode-eslint",
+    "EditorConfig.EditorConfig",
+    "esbenp.prettier-vscode"
+  ]
+}

package/.vscode/settings.json

@@ -0,0 +1,16 @@
+{
+  "explorer.fileNesting.enabled": true,
+  "explorer.fileNesting.patterns": {
+    "tsconfig.json": "tsconfig.*.json, env.d.ts",
+    "vite.config.*": "jsconfig*, vitest.config.*, cypress.config.*, playwright.config.*",
+    "package.json": "package-lock.json, pnpm*, .yarnrc*, yarn*, .eslint*, eslint*, .oxlint*, oxlint*, .prettier*, prettier*, .editorconfig"
+  },
+  "editor.codeActionsOnSave": {
+    "source.fixAll": "explicit"
+  },
+  "editor.formatOnSave": true,
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "[vue]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  }
+}

package/CHANGELOG

@@ -1,3 +1,156 @@
+2.1.0-beta.6(20 novembre 2025)
+	Correction de l’affichage des listes déroulantes
+
+	Correction de la validation des object de quiz si le quiz n’est pas null il ne valide pas le contenu du pop-up neutre
+
+	Correction des titres dans les pop-ups de fin d’activité et de leçon (le titre est la maintenant)
+
+2.1.0-beta.5(22 octobre 2025)
+	Correction du problème de complétion avec les fenêtres latérales
+
+	Multiples corrections de l’accessibilité
+
+	Optimisation des dépendances (package.json)
+
+	Amélioration de quizrecall (récupération du data)
+
+2.1.0-beta.4(26 septembre 2025)
+	ajout du plugin ScrollTrigger à l’objet $gsap
+	
+
+2.1.0-beta.3(24 septembre 2025)
+	RUPTURE DE COMPATIBILITÉ : Ajout de Google Analytics (analytics_id dans app.vue) nouvelle dépendance : npm install vue-gtag@2.0.1
+
+	Tracking Analytics des événements play/end pour les lecteurs audio/vidéo
+
+	RUPTURE DE COMPATIBILITÉ : Nouvelle structure de données utilisées pour les lecteurs audio/vidéo
+
+	Correction du bogue de scroll au changement de page
+
+	Optimisation de la mise à jour de la valeur de currentPage dans le Store
+
+	Nouvelle fonctionnalité : Il est maintenant possible de redéfinir certains libellés spécifiques du FCAD (FIAG)
+
+	Tracking learninglocker pour les lecteurs audio/vidéo
+
+	Refactoring de la fonctionnalité "idle detector" et du calcul du temps passé sur une activité
+
+	Ajout d’informations supplémentaires affichées quand on active le debug mode
+
+
+2.1.0-beta.1(27 août 2025)
+	RUPTURE DE COMPATIBILITÉ : (structure de données des rétroactions). Seules les propriétés "title" et "hypertext" sont acceptées (anciennement "title", "hypertext_1" et "hypertext_2")
+
+	Ajout de Style pour le responsive de la carte audio 
+
+	Retrait du border sur les balises fieldset
+
+	Correction des styles texte à trous
+
+	Liste des changement de classe : 
+
+	container-quiz-radio => container_quiz_choix_unique
+  container-quiz-checkbox => container_quiz_choix_mul
+	container-quiz-texte-tableau => container_quiz_texte_tableau
+	container-quiz-text-area => container_quiz_reponse_ouverte
+	container-quiz-dropdown => container_quiz_dropdown
+	container-quiz-texte-troue-select => container_quiz_texte_troue_select
+	container-quiz-texte-troue => container_quiz_texte_troue
+
+	Pour les rétros la classe dynamic est sur le container
+	retro_inline_positive => retro_inline_retro_positive
+	retro_inline_negative => retro_inline_retro_negative
+	retro_inline_neutre => retro_inline_retro_neutre
+	reponseSelectionner => answerSlct
+	wrong_answer => badAnswer
+	correct_answer => goodAnswer
+
+2.0.3(27 août 2025)
+	HOTFIX Renommer app-comp-quiz en app-comp-quiz-next pour assurer la compatibilité avec les projets existants
+
+2.0.2(26 août 2025)
+	Exercices : Renommer app-comp-quiz-nx en app-comp-quiz pour assurer la compatibilité avec les projets existants
+
+	Exercices : Réécriture complète de la logique derrière les exercices
+
+2.0.2-beta.2(25 août 2025)
+	Exercices : Renommer app-comp-quiz-nx en app-comp-quiz pour assurer la compatibilité avec les projets existants
+
+2.0.2-beta.1(19 août 2025)
+	Exercices : Réécriture complète de la logique derrière les exercices
+
+	Rappel de réponse : Mise à jour automatique du contenu quand la réponse change
+
+	Accessibilité : Balise fieldset qui annonce la marche \ suivre quand on arrive sur un exercice
+
+	Lecteur audio : meilleur responsive
+
+	Ajout de composants Skeleton Loader (Vuetify) au moment du chargement du contenu des exercices
+
+	Nouveau nom de classe dans les exercices texte tableau
+
+2.0.1(12 août 2025)
+	carroussel : Changement du titre h3 pour une balise p avec une classe
+
+	TOC : Alignement vertical du libellé "terminé"
+
+2.0.1-beta.1(12 mai 2025)
+	Vitepress : La documentation du FCAD 2 est maintenant dans le dossier "documentation"
+
+	Correction de bogues avec les exercices à réponse ouverte, boutons radio et checkbox
+
+	Ajout de classe pour faciliter le css appliqué aux rétroactions
+
+2.0.0(31 mars 2025)
+	Menu : ponctuation des titres selon la langue (fr/en)
+
+	Fenêtre latérale : Le minimum de "branches" est maintenant 1 (était 2)
+
+	Fenêtre latérale : Bogue quand on la referme avec espace
+
+	Nouvelle fonctionnalité : Idle detector
+
+	Fenêtre progression : Bogue avec le path "activité 99", maintenant "conclusion"
+
+2.0.0-beta.9(03 mars 2025)
+	Correction de bogues (conflit toc/notes avec popup, ouverture simultanée de toc et notes)
+
+2.0.0-beta.8(25 février 2025)
+	Nettoyage des dépendances
+
+	Nettoyage commentaires et console.log
+
+2.0.0-beta.7(24 février 2025)
+	Règle un problème avec l’import dynamique des branches
+
+2.0.0-beta.6(21 février 2025)
+  Les projets SCORM fonctionnent maintenant avec FCAD 2
+
+	Amélioration de l’accessibilité
+
+	Nouvelle fonct. : Fenêtre latérale "custom"
+
+	Ménage des libellés
+
+	Optimisation des requêtes vers le LRS au chargement initial
+
+	Boutons d’embranchement sous forme de carte : acceptent maintenant le HTML
+
+	Internationalisation de Vuetify selon la langue de l’app
+
+2.0.0-beta.5(27 janvier 2025)
+  FIXES:
+    Corrections de divers Bugs Fonctionnalité et Accessiblité
+
+2.0.0-beta.3(24 octobre 2024)
+		Framework JS : Migration de Vue 2 à Vue 3
+
+    Framework CSS : Migration de Bootstrap-vue à Vuetify
+
+    Build tool : Migration de Webpack à Vite
+
+    Vuejs Store : Migration de VueX à Pinia
+
 1.3.0(17 avril 2023)
 
   [sprint 14.2]

package/README.md

@@ -1,51 +1,48 @@
-# fcad-core-ninja
-
-## Project setup
-
 ```
-npm install
+                                   ..                                                                          ..
+   oec :                         dF                                                                          dF
+  @88888                        '88bu.                                u.      .u    .                       '88bu.         .u    .                                  u.      u.    u.
+  8"*88%        .         u     '*88888bu                  .    ...ue888b   .d88B :@8c       .u             '*88888bu    .d88B :@8c        u          uL      ...ue888b   x@88k u@88c.
+  8b.      .udR88N     us888u.    ^"*8888N            .udR88N   888R Y888r ="8888f8888r   ud8888.             ^"*8888N  ="8888f8888r    us888u.   .ue888Nc..  888R Y888r ^"8888""8888"
+ u888888> <888'888k .@88 "8888"  beWE "888L          <888'888k  888R I888>   4888>'88"  :888'8888.           beWE "888L   4888>'88"  .@88 "8888" d88E`"888E`  888R I888>   8888  888R
+  8888R   9888 'Y"  9888  9888   888E  888E          9888 'Y"   888R I888>   4888> '    d888 '88%"           888E  888E   4888> '    9888  9888  888E  888E   888R I888>   8888  888R
+  8888P   9888      9888  9888   888E  888E          9888       888R I888>   4888>      8888.+"              888E  888E   4888>      9888  9888  888E  888E   888R I888>   8888  888R
+  *888>   9888      9888  9888   888E  888F 88888888 9888      u8888cJ888   .d888L .+   8888L      88888888  888E  888F  .d888L .+   9888  9888  888E  888E  u8888cJ888    8888  888R
+  4888    ?8888u../ 9888  9888  .888N..888  88888888 ?8888u../  "*888*P"    ^"8888*"    '8888c. .+ 88888888 .888N..888   ^"8888*"    9888  9888  888& .888E   "*888*P"    "*88*" 8888"
+  '888     "8888P'  "888*""888"  `"888*""             "8888P'     'Y"          "Y"       "88888%             `"888*""       "Y"      "888*""888" *888" 888&     'Y"         ""   'Y"
+   88R       "P'     ^Y"   ^Y'      ""                  "P'                                "YP'                 ""                    ^Y"   ^Y'   `"   "888E
+   88>                                                                                                                                           .dWi   `88E
+   48                                                                                                                                            4888~  J8%
+   '8                                                                                                                                             ^"===*"`
 ```
 
-## How to use
-
-### Install in project
+## Development
 
-In your project install this library by doing :
+### Install dependencies
 
 ```
-npm install fcad-core-dragon
+npm install
 ```
 
-### Use in project
-
-Now in your main.js do
+### Install yalc and nodemon globally
 
 ```
-import FcadCoreDragon from 'fcad-core-dragon' 
-
-Vue.use(FcadCoreDragon, {$options}) 
+npm install yalc nodemon -g
 ```
 
-#### $options Parameters
-
-$options to pass to library are:
-
-+ **i18n**: pass project **internationalization / Localisation** reference to library
-+ **router**: pass project **router** reference library
-+ **appSettings**: pass project **app setting** from  './app.settings.js' 
-+ **menuSettings**: pass project **menu settings** './src/menu.settings.js' 
+### Publish to the yalc store on file change (monitors js,vue,html,json filetypes)
 
+```
+npm run watch
+```
 
-In the components of your project you can now use the components of the library
+### Open a terminal in your target project and link fcad-core-dragon from the yalc store
 
 ```
-//Exemple in App.js of your project use component AppBase of Library 
-<app-base/>
+npm link fcad-core-dragon
 ```
 
-For more information check [documentation](https://fcaddocumentation.netlify.app/)
-
-### Compiles and minifies for production
+### Prepare a build for production (lands in dist folder)
 
 ```
 npm run build
@@ -57,16 +54,4 @@ npm run build
 npm run lint
 ```
 
-## Configurations
-
-Get the configurations files from [FCAD ressources](https://redmine.cegepadistance.ca/projects/fcad/wiki/Wiki) and
-add them in the root of your projects.
-.Zip containts:
-
- 1. Vue.config.js
- 2. .editorconfig
- 3. .gitignore
- 4. .eslintrc
- 5. .eslintignore
- 6. .prettierrc.js
-  
+For more information check the [documentation](https://fcaddocumentation.netlify.app/)

package/documentation/.vitepress/config.js

@@ -0,0 +1,114 @@
+import { defineConfig } from 'vitepress'
+
+// https://vitepress.dev/reference/site-config
+export default defineConfig({
+  title: 'FCAD 2',
+  description: 'La documentation technique du FCAD 2',
+  ignoreDeadLinks: true,
+  themeConfig: {
+    /* il8n */
+    lang: 'fr-CA',
+    outline: {
+      label: 'Contenu de la page'
+    },
+    docFooter: {
+      prev: 'Page précédente',
+      next: 'Page suivante'
+    },
+    darkModeSwitchTitle : 'Activer le thème sombre',
+    lightModeSwitchTitle : 'Activer le thème clair',
+    lastUpdated: {
+      text: 'Dernière modification ',
+      formatOptions: {
+        dateStyle: 'short',
+        timeStyle: 'short'
+      }
+    },
+    search: {
+      provider: 'local',
+      options:{
+        locales: {
+          root: {
+            translations: {
+              button: {
+                buttonText: 'Recherche',
+                buttonAriaLabel: 'Recherche'
+              },
+              modal: {
+                displayDetails: 'Afficher la vue détaillée',
+                resetButtonTitle: 'Réinitialiser',
+                backButtonTitle: 'Retour',
+                noResultsText: 'Aucun résultat trouvé pour',
+                footer: {
+                  selectText: 'accéder à la page',
+                  navigateText: 'parcourir les résultats',
+                  closeText: 'quitter la recherche',
+                }
+              }
+            }
+          }
+        }
+      }
+    },
+    /* END - il8n */
+
+    nav: [
+      { text: 'Accueil', link: '/' },
+      { text: 'Démarrage', link: '/demarrage' },
+      { text: 'Composants', link: '/composants' },
+      { text: 'Déploiement', link: '/deploiement' },
+      // { text: 'Examples', link: '/markdown-examples' }
+    ],
+    sidebar: [
+      { text: 'Composants critiques',
+        collapsed: true,
+        items: [
+          { text: 'app-base', link: '/composants_critiques/app-base' },
+          { text: 'app-base-module', link: '/composants_critiques/app-base-module' },
+          { text: 'app-base-page', link: '/composants_critiques/app-base-page' },
+          { text: 'main', link: '/composants_critiques/main' },
+        ]
+      },
+      {
+        text: 'Tous les composants',
+        collapsed: true,
+        items: [
+          { text: 'app-base-button', link: '/composants/app-base-button' },
+          { text: 'app-base-error-display', link: '/composants/app-base-error-display' },
+          { text: 'app-base-popover', link: '/composants/app-base-popover' },
+          { text: 'app-comp-audio', link: '/composants/app-comp-audio' },
+          { text: 'app-comp-branch-buttons', link: '/composants/app-comp-branch-buttons' },
+          { text: 'app-comp-button-progress', link: '/composants/app-comp-button-progress' },
+          { text: 'app-comp-carousel', link: '/composants/app-comp-carousel' },
+          { text: 'app-comp-container', link: '/composants/app-comp-container' },
+          { text: 'app-comp-input-checkbox-next', link: '/composants/app-comp-input-checkbox-next' },
+          { text: 'app-comp-input-dropdown-next', link: '/composants/app-comp-input-dropdown-next' },
+          { text: 'app-comp-input-radio-next', link: '/composants/app-comp-input-radio-next' },
+          { text: 'app-comp-input-text-next', link: '/composants/app-comp-input-text-next' },
+          { text: 'app-comp-input-text-table-next', link: '/composants/app-comp-input-text-table-next' },
+          { text: 'app-comp-input-text-to-fill-dropdown-next', link: '/composants/app-comp-input-text-to-fill-dropdown-next' },
+          { text: 'app-comp-input-text-to-fill-next', link: '/composants/app-comp-input-text-to-fill-next' },
+          { text: 'app-comp-jauge', link: '/composants/app-comp-jauge' },
+          { text: 'app-comp-menu', link: '/composants/app-comp-menu' },
+          { text: 'app-comp-menu-item', link: '/composants/app-comp-menu-item' },
+          { text: 'app-comp-navigation', link: '/composants/app-comp-navigation' },
+          { text: 'app-comp-note-call', link: '/composants/app-comp-note-call' },
+          { text: 'app-comp-note-credit', link: '/composants/app-comp-note-credit' },
+          { text: 'app-comp-play-bar-next', link: '/composants/app-comp-play-bar-next' },
+          { text: 'app-comp-play-bar-progress', link: '/composants/app-comp-play-bar-progress' },
+          { text: 'app-comp-pop-up-next', link: '/composants/app-comp-pop-up-next' },
+          { text: 'app-comp-quiz-next', link: '/composants/app-comp-quiz-next' },
+          { text: 'app-comp-quiz-recall', link: '/composants/app-comp-quiz-recall' },
+          // { text: 'app-comp-settings-menu', link: '/composants/app-comp-settings-menu' },
+          { text: 'app-comp-svg-next', link: '/composants/app-comp-svg-next' },
+          { text: 'app-comp-table-of-content', link: '/composants/app-comp-table-of-content' },
+          { text: 'app-comp-video-player', link: '/composants/app-comp-video-player' },
+        ]
+      }
+    ],
+
+    socialLinks: [
+      { icon: 'gitlab', link: 'https://git.crosemont.qc.ca/fcad/core/fcad-core-2' }
+    ]
+  }
+})

package/documentation/api-examples.md

@@ -0,0 +1,49 @@
+---
+outline: deep
+---
+
+# Runtime API Examples
+
+This page demonstrates usage of some of the runtime APIs provided by VitePress.
+
+The main `useData()` API can be used to access site, theme, and page data for the current page. It works in both `.md` and `.vue` files:
+
+```md
+<script setup>
+import { useData } from 'vitepress'
+
+const { theme, page, frontmatter } = useData()
+</script>
+
+## Results
+
+### Theme Data
+<pre>{{ theme }}</pre>
+
+### Page Data
+<pre>{{ page }}</pre>
+
+### Page Frontmatter
+<pre>{{ frontmatter }}</pre>
+```
+
+<script setup>
+import { useData } from 'vitepress'
+
+const { site, theme, page, frontmatter } = useData()
+</script>
+
+## Results
+
+### Theme Data
+<pre>{{ theme }}</pre>
+
+### Page Data
+<pre>{{ page }}</pre>
+
+### Page Frontmatter
+<pre>{{ frontmatter }}</pre>
+
+## More
+
+Check out the documentation for the [full list of runtime APIs](https://vitepress.dev/reference/runtime-api#usedata).

package/documentation/composants/app-base-button.md

@@ -0,0 +1,58 @@
+# Bouton de base
+
+Pour tous les boutons dans votre application, utiliser le bouton du FCAD. 
+
+
+
+## Aperçu
+
+Le FCAD génère un bouton à l'appel de la balise `<app-base-button/>`. Vous pouvez lui appliquer le style désiré en lui ajoutant une classe et/ou un *id*. Permet d'exécuter toute **Fonction** qui lui sera associée.
+
+## Référence du composant
+
+**AppBaseButton** 
+`<app-base-button/>`
+
+## Comportement
+
+De base le composant s'attend à exécuter une fonction. Il déclenche toutes les actions associées et émet l'évènement `click` (écoutable dans toute l'application). L'élément qui a été cliqué est aussi retourné en référence. Au clique, le bouton ajoute ou retire la classe `isClick` (qui peut servir pour créer un effet de toggle).  
+
+::: danger 👁️ Attention!
+
+Le bouton ne réagit pas au hover. Le bouton retourne l'information qu'au clique. Si vous développez un composant réactif au hover. Prenez cette information en compte 
+
+:::
+
+::: tip 💡 Note 
+Lorsque vous utilisez le bouton dans le développement d'un composant, pensez à rajouter son libellé au dictionnaire.
+:::
+
+## Paramètre 
+
+Voici les éléments paramétrables du bouton.
+
+| Propriété | Type             | Description                                                                                                                        | valeur par défaut | modifiable | 
+|:----------|:-----------------|:-----------------------------------------------------------------------------------------------------------------------------------|:-------|:-------------|
+| name | Props type String | Nom du bouton pour les lecteurs d'écran ce label est fourni par le dictionnaire de l'application et devrait être le même que le label du bouton |   Si vide : Bouton   | oui |
+| type | String | Type d'élément html |  button  | non |
+| class | String | Toutes les classes par défaut du bouton. Si vous désirez en ajouter, ajoutez les lors de l'appelle du composant |  btn  | non |
+| :class | Object | Classe réactive selon les actions demandées |  isClick  | non |
+| :disabled | Props type boolean | Donne état **disabled** au bouton. Utiliser pour désactiver le bouton. Attribut important pour les lecteurs d'écran. |  false  | non |
+| @click | function | Fonction qui émet le clique et retourne l'élément cliqué |  click  | non |
+
+### Évènements
+
+`click`: Événement native émit lorsqu’un bouton actif est cliqué. Retourne l'élément cliqué en référence.
+
+`focus`: Événement native émit lorsqu’un bouton actif est en focus. Retourne l'élément en référence.
+
+## Style
+
+`.btn`[class]
+
+  Par défaut, le composant n'a que la classe `btn`, qui sert à tous les boutons de base de l'application. L'ajout de classe et *id* pour modifier son style devront être ajouter à l'appelle du composant. 
+
+## Accessibilité
+
+Le bouton de base vient avec un niveau d'accessibilité de base. Lors de son usage utilisez ces [paramètres](#parametre) pour respecter le critère du WCAG. 
+

package/documentation/composants/app-base-error-display.md

@@ -0,0 +1,59 @@
+# Error Display
+
+Composant pour l'affichage d'erreurs en environnement de développement. 
+
+## Aperçu
+
+Ce composant n'est pas affiché pour les étudiants. Il sert plutôt à avertir l'intégrateur/développeurs qu'il a une erreur avec l'utilisant de l'application. 
+
+Il y a deux niveaux de couleur pour l`affichage d'erreurs: 
+
+- Rouge (niveau majeur): Indique une erreur qui brise le fonctionnement de l'application (l'application n'est plus navigable ou plus rien ne peut être affiché)
+- Jaune (niveau mineur): Indique la présence d`erreurs qui ne brisent pas l'application (il y a une erreur, mais on peut toujours naviguer dans l'application et certains éléments sont affichables).
+
+## Référence du composant
+
+**AppBaseErrorDisplay** 
+`<app-base-error-display/>`
+
+## Comportement 
+
+Le composant affiche un message avec la liste d`erreurs passées en paramètre lors de son appel.
+ 
+
+::: danger Important
+
+Vous ne devez pas faire la gestion de vos erreurs à l'intérieur du composant. Gérez plutôt vos erreurs dans votre composant et faites-les afficher en utilisant `<app-base-error-display/>`. 
+
+Ajoutez les messages d'erreurs qui conviennent à votre situation. Copiez et collez la structure et modifiez le message pour convenir à votre situation.
+
+:::
+
+::: tip 💡 Note
+
+Si vous jugez qu'utiliser le composant est trop pour l'erreur à afficher, vous pouvez toujours afficher l'erreur dans votre composant. Utilisez les styles présents dans la feuille de style pour garder l'uniformité du look.
+
+:::
+
+## Paramètre 
+
+Voici les éléments paramétrable d'Error Display.
+
+::: details <b>Props</b>
+
+| Propriété | Type  | Description   | valeur par défaut | valeur accepté | 
+|:----------|:-----------------|:-----------------------------------------------------------------------------------------------------------------------------------|:-------|:-------------|
+| errorMessage | String | Le type de message d'erreur à afficher | ' ' | 404 / errorPage / errorMenu / errorModule   | 
+| errorsList | Array | Liste des valeurs des erreurs que vous voulez afficher | tableau vide | un array de *string*  | 
+| docLink | String | lien url de référence pour plus d`information | [documentation](https://fcaddocumentation.netlify.com/guide/proceduries.html) | *string*  | 
+
+:::
+
+## Style
+
+Les classes et la structure sont déjà faites pour vous, si vous voulez rajouter un type d'erreur dupliquer la section avec sa structure. Vous remarquerez dans la feuille de style ce sont les seules couleurs en dur. Il en est ainsi pour ne pas créer d'erreur avec le style des cours. 
+
+## Accessibilité
+
+Ce composant sert seulement à éviter les codes 18 pour l'intégrateur, il n'est donc pas tenu d'être accessible.  
+