@cnamts/synapse 1.0.11 → 1.0.13

package/src/stories/Demarrer/SignalerUneAnomalie.stories.ts

@@ -0,0 +1,261 @@
+import { VExpansionPanels, VExpansionPanel, VExpansionPanelTitle, VExpansionPanelText } from 'vuetify/components'
+import SyAlert from '../../components/SyAlert/SyAlert.vue'
+import '../styles/shared.css'
+
+export default {
+	title: 'Démarrer/Signaler une anomalie',
+	component: SyAlert,
+}
+
+export const InfoIntro = {
+	render: () => {
+		return {
+			components: { SyAlert },
+			setup() {
+				return {}
+			},
+			template: `
+              <SyAlert type="info" variant="tonal" :closable="false">
+                <template #default>
+                  Après qualification, les anomalies mineures sont embarquées au fil de l'eau dans les sprints successifs selon la disponibilité de l'activité.<br/>À l'inverse, les anomalies majeures sont embarquées si l'activité le permet dès le prochain sprint.<br/>Aucune anomalie ne peut être embarquée en cours de sprint sauf dérogation.
+                </template>
+              </SyAlert>
+            `,
+		}
+	},
+	tags: ['!dev'],
+}
+
+export const InfoPratiques = {
+	render: () => {
+		return {
+			components: { SyAlert },
+			setup() {
+				return {}
+			},
+			template: `
+              <SyAlert type="info" variant="tonal" :closable="false" class="mt-6">
+                <template #default>Lorsque vous créez une reproduction minimale, supprimez tous les éléments,
+                  propriétés, variables, données et autres qui ne sont pas nécessaires pour reproduire l'anomalie. Cela
+                  facilitera le traitement du rapport et le temps qu’il faudra pour identifier puis résoudre l'anomalie.
+                </template>
+              </SyAlert>
+            `,
+		}
+	},
+	tags: ['!dev'],
+}
+
+export const AnomalieGraphique = {
+	render: () => {
+		return {
+			components: { VExpansionPanels, VExpansionPanel, VExpansionPanelTitle, VExpansionPanelText },
+			setup() {
+				return {}
+			},
+			template: `
+              <v-expansion-panels class="mt-6">
+                <v-expansion-panel>
+                  <v-expansion-panel-title>
+                    <p class="text-h5 text-primary">Anomalie graphique</p>
+                  </v-expansion-panel-title>
+                  <v-expansion-panel-text>
+                    <table>
+                      <thead>
+                      <tr style="background-color: rgb(12 65 154 / 10%)">
+                      <th style="width: 50%">Description</th>
+                      <th>Catégorie</th>
+                      <th>Action</th>
+                      </tr>
+                      </thead>
+                      <tbody>
+                          <tr>
+                            <td style="padding: 10px">L'anomalie graphique rend inutilisable le composant concerné.<br/>
+                              Le projet est bloqué et ne peut pas mettre en production sans ce correctif.<br/>
+                              Si l'anomalie rencontrée ne répond pas à ces critères merci d'utiliser le formulaire dédiée à l'anomalie mineure.</td>
+                            <td style="text-align: center;"><b>Majeure</b></td>
+                            <td style="text-align: center;">
+                              <v-btn style="text-decoration: none; color: rgb(2, 156, 253);" href="https://github.com/assurance-maladie-digital/design-system-v3/issues/new?template=bug_graphic_major.md" target="_blank">
+                                Créer un ticket
+                              </v-btn>
+                            </td>
+                          </tr>
+                          <tr>
+                            <td colspan="3">
+                              <hr style="height: 1px; background-color: #e6e6e6; border: 0;">
+                            </td>
+                          </tr>
+                          <tr>
+                            <td style="padding: 10px">Une différence existe entre le composant concerné dans sa globalité ou une fonctionnalité spécifique et sa représentation dans le fichier Synapse présent dans l'outil de maquettage Figma.</td>
+                            <td style="text-align: center;"><b>Mineure</b></td>
+                            <td style="text-align: center;">
+                              <v-btn style="text-decoration: none; color: rgb(2, 156, 253);" href="https://github.com/assurance-maladie-digital/design-system-v3/issues/new?template=bug_graphic_minor.md" target="_blank">
+                                Créer un ticket
+                              </v-btn>
+                            </td>
+                          </tr>
+                        </tbody>
+                    </table>
+                  </v-expansion-panel-text>
+                </v-expansion-panel>
+              </v-expansion-panels>
+            `,
+		}
+	},
+	tags: ['!dev'],
+}
+
+export const AnomalieFonctionnelle = {
+	render: () => {
+		return {
+			components: { VExpansionPanels, VExpansionPanel, VExpansionPanelTitle, VExpansionPanelText },
+			setup() {
+				return {}
+			},
+			template: `
+              <v-expansion-panels class="mt-2">
+                <v-expansion-panel>
+                  <v-expansion-panel-title>
+                    <p class="text-h5 text-primary">Anomalie fonctionnelle</p>
+                  </v-expansion-panel-title>
+                  <v-expansion-panel-text>
+                    <table>
+                      <thead>
+                      <tr style="background-color: rgb(12 65 154 / 10%)">
+                        <th style="width: 50%">Description</th>
+                        <th>Catégorie</th>
+                        <th>Action</th>
+                      </tr>
+                      </thead>
+                      <tbody>
+                      <tr>
+                        <td style="padding: 10px">L'anomalie fonctionnelle rend inutilisable le composant concerné.<br/>
+                          Le projet est bloqué et ne peut pas mettre en production sans ce correctif.<br/>
+                          Si l'anomalie rencontrée ne répond pas à ces critères merci d'utiliser le formulaire dédiée à
+                          l'anomalie mineure.
+                        </td>
+                        <td style="text-align: center;"><b>Majeure</b></td>
+                        <td style="text-align: center;">
+                          <v-btn style="text-decoration: none; color: rgb(2, 156, 253);"
+                                 href="https://github.com/assurance-maladie-digital/design-system-v3/issues/new?template=bug_functional_major.md"
+                                 target="_blank"
+                          >
+                            Créer un ticket
+                          </v-btn>
+                        </td>
+                      </tr>
+                      <tr>
+                        <td colspan="3">
+                          <hr style="height: 1px; background-color: #e6e6e6; border: 0;">
+                        </td>
+                      </tr>
+                      <tr>
+                        <td style="padding: 10px">Le composant concerné ou une fonctionnalité spécifique associée
+                          contient un bug de fonctionnement qui perturbe la qualité de son utilisation.
+                        </td>
+                        <td style="text-align: center;"><b>Mineure</b></td>
+                        <td style="text-align: center;">
+                          <v-btn style="text-decoration: none; color: rgb(2, 156, 253);"
+                                 href="https://github.com/assurance-maladie-digital/design-system-v3/issues/new?template=bug_functional_minor.md"
+                                 target="_blank"
+                          >
+                            Créer un ticket
+                          </v-btn>
+                        </td>
+                      </tr>
+                      </tbody>
+                    </table>
+                  </v-expansion-panel-text>
+                </v-expansion-panel>
+              </v-expansion-panels>
+            `,
+		}
+	},
+	tags: ['!dev'],
+}
+
+export const AnomalieAccessibilite = {
+	render: () => {
+		return {
+			components: { VExpansionPanels, VExpansionPanel, VExpansionPanelTitle, VExpansionPanelText },
+			setup() {
+				return {}
+			},
+			template: `
+              <v-expansion-panels class="mt-2">
+                <v-expansion-panel>
+                  <v-expansion-panel-title>
+                    <p class="text-h5 text-primary">Anomalie d'accessibilité</p>
+                  </v-expansion-panel-title>
+                  <v-expansion-panel-text>
+                    <table>
+                      <thead>
+                      <tr style="background-color: rgb(12 65 154 / 10%)">
+                      <th style="width: 50%">Description</th>
+                      <th>Catégorie</th>
+                      <th>Action</th>
+                      </tr>
+                      </thead>
+                      <tbody>
+                          <tr>
+                            <td style="padding: 10px">Le composant concerné ne respecte pas l'accessibilité numérique (RGAA) avec les critères paramétrable au niveau du design system.<br/>Dans le doute, vous pouvez consulter les rapports d'audit disponibles pour chaque composant dans la documentation en ligne présents sur les pages "Accessibilité".</td>
+                            <td style="text-align: center;"><b>Majeure</b></td>
+                            <td style="text-align: center;">
+                              <v-btn style="text-decoration: none; color: rgb(2, 156, 253);" href="https://github.com/assurance-maladie-digital/design-system-v3/issues/new?template=accessibility.md" target="_blank">
+                                Créer un ticket
+                              </v-btn>
+                            </td>
+                          </tr>
+                        </tbody>
+                    </table>
+                  </v-expansion-panel-text>
+                </v-expansion-panel>
+              </v-expansion-panels>
+            `,
+		}
+	},
+	tags: ['!dev'],
+}
+
+export const AnomalieDocumentaire = {
+	render: () => {
+		return {
+			components: { VExpansionPanels, VExpansionPanel, VExpansionPanelTitle, VExpansionPanelText },
+			setup() {
+				return {}
+			},
+			template: `
+              <v-expansion-panels class="mt-2">
+                <v-expansion-panel>
+                  <v-expansion-panel-title>
+                    <p class="text-h5 text-primary">Anomalie documentaire</p>
+                  </v-expansion-panel-title>
+                  <v-expansion-panel-text>
+                    <table>
+                      <thead>
+                      <tr style="background-color: rgb(12 65 154 / 10%)">
+                      <th style="width: 50%">Description</th>
+                      <th>Catégorie</th>
+                      <th>Action</th>
+                      </tr>
+                      </thead>
+                      <tbody>
+                          <tr>
+                            <td style="padding: 10px">La documentation technique d'un composant (ou toute autre sources d'information, ex: Figma…) contient une anomalie.</td>
+                            <td style="text-align: center;"><b>Mineure</b></td>
+                            <td style="text-align: center;">
+                              <v-btn style="text-decoration: none; color: rgb(2, 156, 253);" href="https://github.com/assurance-maladie-digital/design-system-v3/issues/new?template=documentation.md" target="_blank">
+                                Créer un ticket
+                              </v-btn>
+                            </td>
+                          </tr>
+                        </tbody>
+                    </table>
+                  </v-expansion-panel-text>
+                </v-expansion-panel>
+              </v-expansion-panels>
+            `,
+		}
+	},
+	tags: ['!dev'],
+}