Merge pull request #583 from dnum-mi/develop

Develop

Author: DaBadBunny

src/assets/img/technical-error.png

@@ -0,0 +1 @@
+export type TitleTag = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'

src/common-types.ts

@@ -1,14 +1,17 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 
-import { getRandomId } from '../../utils/random-utils'
+import { getRandomId } from '@/utils/random-utils'
+import { type TitleTag } from '@/common-types'
+
+export type DsfrAlertType = 'error' | 'success' | 'warning' | 'info'
 
 const props = withDefaults(defineProps<{
   id?: string,
-  type?: 'error' | 'success' | 'warning' | 'info',
+  type?: DsfrAlertType,
   title?: string,
   description: string,
-  titleTag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6',
+  titleTag?: TitleTag,
   small?: boolean,
   closed?: boolean,
   closeable?: boolean,

src/components/DsfrAlert/DsfrAlert.vue

@@ -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>

src/components/DsfrErrorPage/DsfrErrorPage.vue

@@ -31,6 +31,10 @@ export default {
       control: 'text',
       description: 'Message à afficher en situation de succès, sa présence change la couleur de la police d’écriture',
     },
+    defaultUnselectedText: {
+      control: 'text',
+      description: 'Texte de l’option sélectionnée par défaut si aucune option valide n’est sélectionnée',
+    },
     errorMessage: {
       control: 'text',
       description: 'Message à afficher en cas d’erreur, sa présence change la couleur de la police d’écriture',
@@ -103,6 +107,56 @@ ListeDeroulante.args = {
   required: false,
 }
 
+export const ListeDeroulanteEnAnglais = (args) => ({
+  components: {
+    DsfrSelect,
+  },
+
+  data () {
+    return {
+      ...args,
+    }
+  },
+
+  template: `
+    <DsfrSelect
+      :required="required"
+      :label="label"
+      :options="options"
+      :description="description"
+      :success-message="successMessage"
+      :error-message="errorMessage"
+      :disabled="disabled"
+      :defaultUnselectedText="defaultUnselectedText"
+      v-model="modelValue"
+    />
+  `,
+
+  watch: {
+    modelValue (newVal) {
+      this.onChange(newVal)
+    },
+  },
+
+})
+ListeDeroulanteEnAnglais.args = {
+  options: [
+    'Option 1',
+    'Option 2',
+    'Option 3',
+    'Option 4',
+    'Option 5',
+    'Option 6',
+  ],
+  label: 'Those are the options:',
+  description: 'I am a description',
+  successMessage: '',
+  errorMessage: '',
+  defaultUnselectedText: 'Please select an option',
+  disabled: false,
+  required: false,
+}
+
 export const ListeDeroulanteRequise = (args) => ({
   components: {
     DsfrSelect,
@@ -240,7 +294,6 @@ export const ListeDeroulanteInactive = (args) => ({
   },
 
 })
-
 ListeDeroulanteInactive.args = {
   options: [
     'Option 1',

src/components/DsfrSelect/DsfrSelect.stories.ts

@@ -16,6 +16,7 @@ const props = withDefaults(defineProps<{
   options?:(string | number | { value: string | number, text: string, disabled: boolean })[]
   successMessage?: string
   errorMessage?: string
+  defaultUnselectedText?: string
 }>(), {
   selectId: () => getRandomId('select'),
   modelValue: undefined,
@@ -24,6 +25,7 @@ const props = withDefaults(defineProps<{
   description: undefined,
   successMessage: '',
   errorMessage: '',
+  defaultUnselectedText: 'Sélectionnez une option',
 })
 
 defineEmits<{(e: 'update:modelValue', payload: string): void}>()
@@ -78,7 +80,7 @@ const messageType = computed(() => {
         disabled
         hidden
       >
-        Sélectionnez une option
+        {{ defaultUnselectedText }}
       </option>
 
       <option

src/components/DsfrSelect/DsfrSelect.vue

@@ -26,4 +26,5 @@ export default {
 export * from './components/index.js'
 export * from './utils/random-utils'
 export * from './composables.js'
+export * from './common-types.js'
 export * as icons from './icons.js'