Merge pull request #580 from dnum-mi/feat/composant-page-erreur

feat: ✨ Création d'un composant page d'erreur

Author: laruiss

src/assets/img/technical-error.png

@@ -95,7 +95,7 @@ defineExpose({ goToTargetLink })
         v-if="buttons.length || linksGroup.length"
         class="fr-card__footer"
       >
-        <dsfr-button-group
+        <DsfrButtonGroup
           v-if="buttons.length"
           :buttons="buttons"
           inline-layout-when="lg"

src/components/DsfrCard/DsfrCard.vue

@@ -0,0 +1,61 @@
+import DsfrErrorPage from './DsfrErrorPage.vue'
+
+export default {
+  component: DsfrErrorPage,
+  title: 'Composants/DsfrErrorPage',
+  argTypes: {
+    title: {
+      control: 'text',
+      description: 'Conséquence de l\'erreur rencontrée.',
+    },
+    subtitle: {
+      control: 'text',
+      description: 'Code d\'erreur HTTP à l\'origine de l\'erreur rencontrée.',
+    },
+    description: {
+      control: 'text',
+      description: 'Description de l\'erreur et formule d\'excuses à l\'utilisateur.',
+    },
+    help: {
+      control: 'text',
+      description: 'Accompagnement de l\'utilisateur qui se retrouve confronté à l\'erreur.',
+    },
+    buttons: {
+      control: 'object',
+      description: 'Tableau d\'objets contenant les props des boutons d\'actions sur la page.',
+    },
+  }
+}
+
+export const PageErreur404 = (args) => ({
+  components: { DsfrErrorPage },
+  data () {
+    return args
+  },
+  template: `
+  <DsfrErrorPage
+    :title="title"
+    :subtitle="subtitle"
+    :description="description"
+    :help="help"
+    :buttons="buttons"
+  />
+  `,
+
+})
+
+PageErreur404.args = {
+  title: "Page non trouvée, ne paniquez pas",
+  subtitle: "Erreur 404 !",
+  description: "La page que vous recherchez n'existe pas ou l'url est erronée.",
+  help: "Bonne chance !",
+  buttons: [{
+    label: 'Page d\'accueil',
+    link: 'https://www.systeme-de-design.gouv.fr/',
+  },
+  {
+    label: 'Contactez-nous',
+    secondary: true,
+    link: 'https://www.systeme-de-design.gouv.fr/',
+  },],
+}

src/components/DsfrErrorPage/DsfrErrorPage.stories.ts

@@ -0,0 +1,81 @@
+<script lang="ts" setup>
+import { type DsfrButtonProps } from '../DsfrButton/DsfrButton.vue'
+import DsfrButtonGroup from '../DsfrButton/DsfrButtonGroup.vue'
+
+withDefaults(defineProps<{
+  title?: string
+  subtitle?: string
+  description?: string
+  help?: string
+  buttons: DsfrButtonProps[]
+}>(), {
+  title: 'Page non trouvée',
+  subtitle: 'Erreur 404',
+  description: 'La page que vous cherchez est introuvable. Excusez-nous pour la gêne occasionnée.',
+  help: 'Si vous avez tapé l\'adresse web dans le navigateur, vérifiez qu\'elle est correcte. La page n\'est peut être plus disponible.',
+  buttons: () => [],
+})
+</script>
+
+<template>
+  <div class="fr-container  flex">
+    <div class="half">
+      <h1 class="font-25">{{ title }}</h1>
+      <span class="block mt-15  mb-15">{{ subtitle }}</span>
+      <p class="font-125">{{ description }}</p>
+      <p>{{ help }}</p>
+      <DsfrButtonGroup
+        v-if="buttons?.length"
+        :buttons="buttons"
+        inline-layout-when="always"
+      />
+    </div>
+    <div class="half  self-center  text-center">
+      <img
+        class="error-img"
+        src="../../assets/img/technical-error.png"
+      >
+    </div>
+  </div>
+</template>
+
+<style scoped>
+
+  .flex {
+    display: flex;
+  }
+
+  .block {
+    display: flex;
+  }
+
+  .half {
+    max-width: 50%;
+    width: 50%;
+  }
+
+  .self-center {
+    align-self: center;
+  }
+
+  .text-center {
+    text-align: center;
+  }
+
+  .mt-15 {
+    margin-top: 1.5rem;
+  }
+
+  .mb-15 {
+    margin-bottom: 1.5rem;
+  }
+
+  .font-125 {
+    font-size: 1.25rem;
+  }
+
+  .font-25 {
+    font-size: 2.5rem;
+  }
+
+</style>