Merge pull request #625 from dnum-mi/develop

Develop

src/components/DsfrBackToTop/DsfrBackToTop.spec.ts

@@ -0,0 +1,23 @@
+import { render } from '@testing-library/vue'
+import DsfrBackToTop from './DsfrBackToTop.vue'
+
+describe('DsfrBackToTop', () => {
+  it('should render a success BackToTop', async () => {
+    const label = 'Haut de page'
+    const expectClass = 'fr-link fr-icon-arrow-up-fill'
+    const position = 'left'
+
+    const { getByText } = render(DsfrBackToTop, {
+      props: {
+        label,
+        position,
+      },
+    })
+
+    const anchorElement = getByText(label)
+    expect(anchorElement).toBeDefined()
+    // Verifier si a possède la class attendu
+    expect(anchorElement).toHaveClass(expectClass)
+    expect(anchorElement).toHaveClass(`fr-link--icon-${position}`)
+  })
+})

src/components/DsfrBackToTop/DsfrBackToTop.stories.ts

@@ -0,0 +1,58 @@
+import DsfrBackToTop from './DsfrBackToTop.vue'
+
+/**
+ * [Voir quand l’utiliser sur la documentation du DSFR](https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/retour-en-haut-de-page/)
+ */
+export default {
+  component: DsfrBackToTop,
+  title: 'Composants/DsfrBackToTop',
+  argTypes: {
+    label: {
+      control: 'text',
+      description: 'Titre (texte)',
+    },
+    position: {
+      options: ['left', 'right'],
+      control: 'select',
+      description: '(Optionnel) **Position** de la fleche îcone : `left` (à gauche), `right` (à droite)',
+    },
+  },
+}
+
+export const BackToTop = (args) => ({
+  components: {
+    DsfrBackToTop,
+  },
+  data () {
+    return args
+  },
+  template: `
+      <DsfrBackToTop :label="label" :position="position"/>
+    `,
+})
+BackToTop.args = {
+  position: 'left',
+  label: 'Haut de page',
+}
+
+export const TousLesBacktoTop = (args) => ({
+  components: {
+    DsfrBackToTop,
+  },
+  data () {
+    return args
+  },
+  template: `
+      <p>
+      <DsfrBackToTop label="Haut de page" position="left"/>
+      </p>
+      <p>
+      <DsfrBackToTop label="Haut de page" position="right"/>
+      </p>
+      <p>
+      <DsfrBackToTop label="Haut" position="right"/>
+      </p>
+    `,
+})
+TousLesBacktoTop.args = {
+}

src/components/DsfrBackToTop/DsfrBackToTop.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+withDefaults(defineProps<{
+  label?: string
+  position?: 'right' | 'left'
+}>(), {
+  position: 'right',
+  label: 'Haut de page',
+})
+</script>
+
+<template>
+  <a
+    class="fr-link fr-icon-arrow-up-fill"
+    :class="`fr-link--icon-${position}`"
+    href="#top"
+  >
+    {{ label }}
+  </a>
+</template>

src/components/DsfrTable/DsfrTable.vue

@@ -1,13 +1,13 @@
 <script lang="ts" setup>
-import { ref, watch } from 'vue'
+import { computed, ref, watch } from 'vue'
 import DsfrTableRow, { type DsfrTableRowProps } from './DsfrTableRow.vue'
 import DsfrTableHeaders from './DsfrTableHeaders.vue'
-import { type DsfrTableHeaderProps } from './DsfrTableHeader.vue'
+import { type DsfrTableHeadersProps } from './DsfrTableHeaders.vue'
 
 const props = withDefaults(defineProps<{
   title?: string
-  headers?:(DsfrTableHeaderProps | string)[]
-  rows?: (DsfrTableRowProps | string)[]
+  headers?: DsfrTableHeadersProps
+  rows?:(DsfrTableRowProps | string[])[]
   noCaption?: boolean
   pagination?: boolean
   defaultCurrentPage?: number
@@ -20,9 +20,8 @@ const props = withDefaults(defineProps<{
   defaultOptionSelected: 10,
 })
 
-const getRowData = (row: (DsfrTableRowProps | string | ({component: string} & Record<string, any>))) => {
-  // @ts-ignore TODO: find a way to improve types here
-  return row.rowData || row
+const getRowData = (row: (DsfrTableRowProps | string[])) => {
+  return Array.isArray(row) ? row : row.rowData
 }
 
 const currentPage = ref(props.defaultCurrentPage)
@@ -31,15 +30,17 @@ const pageCount = ref(props.rows.length > optionSelected.value ? Math.ceil(props
 const paginationOptions = [5, 10, 25, 50, 100]
 const returnLowestLimit = () => currentPage.value * optionSelected.value - optionSelected.value
 const returnHighestLimit = () => currentPage.value * optionSelected.value
-let truncatedResults = props.rows.slice(returnLowestLimit(), returnHighestLimit())
 
 watch(() => optionSelected.value, (newVal, OldVal) => {
-  props.rows.length > optionSelected.value ? pageCount.value = Math.ceil(props.rows.length / newVal) : pageCount.value = 1
-  truncatedResults = props.rows.slice(returnLowestLimit(), returnHighestLimit())
+  pageCount.value = props.rows.length > optionSelected.value ? Math.ceil(props.rows.length / newVal) : 1
 })
 
-watch(() => currentPage.value, (newVal, OldVal) => {
-  truncatedResults = props.rows.slice(returnLowestLimit(), returnHighestLimit())
+const truncatedResults = computed(() => {
+    if(props.pagination) {
+      return props.rows.slice(returnLowestLimit(), returnHighestLimit())
+    }
+
+    return props.rows;
 })
 
 const goFirstPage = () => { currentPage.value = 1 }
@@ -54,7 +55,6 @@ const goNextPage = () => {
   }
 }
 const goLastPage = () => { currentPage.value = pageCount.value }
-
 </script>
 
 <template>
@@ -85,7 +85,7 @@ const goLastPage = () => { currentPage.value = pageCount.value }
             v-for="(row, i) of truncatedResults"
             :key="i"
             :row-data="getRowData(row)"
-            :row-attrs="typeof row === 'string' ? {} : row.rowAttrs"
+            :row-attrs="'rowAttrs' in row ? row.rowAttrs : {}"
           />
         </template>
         <tr v-if="pagination">

src/components/DsfrTable/DsfrTableHeaders.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import DsfrTableHeader, { DsfrTableHeaderProps } from './DsfrTableHeader.vue'
 
-type Header = DsfrTableHeaderProps & { text?: string }
+export type DsfrTableHeadersProps = (string | (DsfrTableHeaderProps & { text?: string }))[]
 
 defineProps<{
-  headers:(DsfrTableHeaderProps | string)[]
+  headers: DsfrTableHeadersProps
 }>()
 </script>
 
@@ -15,7 +15,7 @@ defineProps<{
     <DsfrTableHeader
       v-for="(header, i) of headers"
       :key="i"
-      :header="(header as Header).text || (header as string)"
+      :header="(typeof header === 'object' ? header : {}).text || (header as string)"
       :header-attrs="(header as DsfrTableHeaderProps).headerAttrs"
     />
   </tr>

src/components/DsfrTile/DsfrTile.spec.ts

@@ -68,4 +68,28 @@ describe('DsfrTile', () => {
     expect(titleEl.parentNode.parentNode.parentNode.parentNode).toHaveClass('fr-tile--horizontal')
     expect(descriptionEl).toHaveClass('fr-tile__desc')
   })
+
+  it('should display a tile with a download link', async () => {
+    const title = 'Titre de la tuile'
+    const imgSrc = 'https://placekitten.com/80/80'
+    const description = 'Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dol'
+    const download = true
+    const { getByText } = render(DsfrTile, {
+      global: {
+        plugins: [router],
+      },
+      props: {
+        title,
+        imgSrc,
+        description,
+        download,
+        to: 'https://placekitten.com/80/80',
+      },
+    })
+
+    await router.isReady()
+
+    const titleEl = getByText(title)
+    expect(titleEl).toHaveAttribute('download', 'true')
+  })
 })

src/components/DsfrTile/DsfrTile.stories.ts

@@ -27,49 +27,52 @@ export default {
       control: 'boolean',
       description: 'Permet le basculement de la tuile en mode horizontal',
     },
-    verticalAtMd: {
-      control: 'boolean',
-      description: 'Permet le basculement de la tuile en mode vertical au point de rupture "md"',
+    vertical: {
+      options: ['md', 'lg'],
+      control: {
+        type: 'select',
+      },
+      description: 'Permet le basculement de la tuile en mode vertical, selon le point de rupture "md" ou "lg" spécifié',
     },
-    verticalAtLg: {
+    disabled: {
       control: 'boolean',
-      description: 'Permet le basculement de la tuile en mode vertical au point de rupture "lg"',
+      description: 'Permet de rendre la tuile désactivée et non-cliquable',
     },
-    small: {
+    to: {
+      control: 'text',
+      description: 'Lien vers lequel la tuile pointe. Peut être une string ou objet à donner à `RouterLink` ou un lien externe (`string` commençant par `"http"`)',
+    },
+    titleTag: {
+      control: 'text',
+      description: 'Permet de choisir la balise contenant le titre de la tuile (h3 par défaut)',
+    },
+    download: {
       control: 'boolean',
-      description: 'Permet d’afficher la tuile dans un plus petit format',
+      description: 'Permet de passer la tuile en mode téléchargement',
     },
-    disabled: {
+    small: {
       control: 'boolean',
-      description: 'Permet de rendre la tuile désactivée et non-cliquable',
+      description: 'Permet de basculer la tuile en petit format',
     },
-    download: {
+    icon: {
       control: 'boolean',
-      description: 'Variante de tuile indiquant que le lien permet de télécharger un fichier (la tuile de téléchargement est obligatoirement horizontale)',
+      description: 'Permet de désactiver l\'icone associée au lien',
     },
     noBorder: {
       control: 'boolean',
-      description: 'Variante de tuile sans bordure',
+      description: 'Permet de désactiver la bordure de la tuile',
     },
-    noBackground: {
+    shadow: {
       control: 'boolean',
-      description: 'Variante de tuile sans arrière-plan',
+      description: 'Permet d\'ajouter une ombre portée à la tuile',
     },
-    shadow: {
+    noBackground: {
       control: 'boolean',
-      description: 'Variante de tuile avec ombre portée',
+      description: 'Permet de désactiver la couleur de fond de la tuile',
     },
     grey: {
       control: 'boolean',
-      description: 'Variante de tuile plus contrastée avec arrière-plan grisé',
-    },
-    to: {
-      control: 'text',
-      description: 'Lien vers lequel la tuile pointe. Peut être une string ou objet à donner à `RouterLink` ou un lien externe (`string` commençant par `"http"`)',
-    },
-    titleTag: {
-      control: 'text',
-      description: 'Permet de choisir la balise contenant le titre de la tuile (h3 par défaut)',
+      description: 'Permet de passer le fond de la tuile en gris',
     },
   },
 }
@@ -92,36 +95,34 @@ export const TuileSimple = (args) => ({
       :description="description"
       :details="details"
       :horizontal="horizontal"
-      :verticalAtMd="verticalAtMd"
-      :verticalAtLg="verticalAtLg"
-      :small="small"
+      :vertical="vertical"
       :disabled="false"
+      :to="to"
+      :title-tag="titleTag"
       :download="download"
-      :noBorder="noBorder"
-      :noBackground="noBackground"
+      :small="small"
+      :icon="icon"
+      :no-border="noBorder"
       :shadow="shadow"
+      :no-background="noBackground"
       :grey="grey"
-      :to="to"
-      :title-tag="titleTag"
     />
   `,
 
 })
 TuileSimple.args = {
   title: 'Ma formidable tuile',
-  imgSrc: 'http://placekitten.com/g/80/80',
+  imgSrc: 'http://placekitten.com/g/200/200',
   description: 'Une tuile absolument formidable',
-  details: 'Quelques détails',
   horizontal: false,
-  verticalAtMd: false,
-  verticalAtLg: false,
-  small: false,
   disabled: false,
+  to: '#',
+  titleTag: 'h2',
   download: false,
+  small: false,
+  icon: false,
   noBorder: false,
-  noBackground: false,
   shadow: false,
+  noBackground: false,
   grey: false,
-  to: '#',
-  titleTag: 'h2',
 }