Merge pull request #583 from dnum-mi/develop

Develop

src/common-types.ts

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

src/components/DsfrAlert/DsfrAlert.vue

@@ -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/DsfrCard/DsfrCard.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/DsfrErrorPage/DsfrErrorPage.stories.ts

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

@@ -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/DsfrSelect/DsfrSelect.stories.ts

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

@@ -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/index.ts

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