From e1e534ef39917e593f67ad9bef2d063bffa59d37 Mon Sep 17 00:00:00 2001
From: ShallowRed <48523123+ShallowRed@users.noreply.github.com>
Date: Mon, 18 Sep 2023 12:26:09 +0200
Subject: [PATCH 1/4] =?UTF-8?q?feat:=20=E2=9C=A8=20Nouvelle=20impl=C3=A9me?=
 =?UTF-8?q?ntation=20du=20composant=20DsfrTile?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

BREAKING CHANGE: Les props 'verticalAtMd' et 'verticalAtLg' n'existent plus
---
 src/components/DsfrTile/DsfrTile.spec.ts    | 24 ++++++
 src/components/DsfrTile/DsfrTile.stories.ts | 81 +++++++++++----------
 src/components/DsfrTile/DsfrTile.vue        | 40 +++++-----
 src/components/DsfrTile/DsfrTiles.spec.ts   | 38 ++++++++++
 4 files changed, 126 insertions(+), 57 deletions(-)

diff --git a/src/components/DsfrTile/DsfrTile.spec.ts b/src/components/DsfrTile/DsfrTile.spec.ts
index 776700e4..ad9ddc44 100644
--- a/src/components/DsfrTile/DsfrTile.spec.ts
+++ b/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')
+  })
 })
diff --git a/src/components/DsfrTile/DsfrTile.stories.ts b/src/components/DsfrTile/DsfrTile.stories.ts
index b57dedb9..68ef94fb 100644
--- a/src/components/DsfrTile/DsfrTile.stories.ts
+++ b/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',
 }
diff --git a/src/components/DsfrTile/DsfrTile.vue b/src/components/DsfrTile/DsfrTile.vue
index d36bfd3f..1f1a5d84 100644
--- a/src/components/DsfrTile/DsfrTile.vue
+++ b/src/components/DsfrTile/DsfrTile.vue
@@ -9,16 +9,16 @@ export type DsfrTileProps = {
   details?: string
   disabled?: boolean
   horizontal?: boolean
-  verticalAtMd?: boolean
-  verticalAtLg?: boolean
-  small?: boolean
+  vertical?: 'md' | 'lg'
+  to?: RouteLocationRaw,
+  titleTag?: string
   download?: boolean
+  small?: boolean
+  icon?: boolean
   noBorder?: boolean
-  noBackground?: boolean
   shadow?: boolean
+  noBackground?: boolean
   grey?: boolean
-  to?: RouteLocationRaw
-  titleTag?: string
 }
 
 const props = withDefaults(defineProps<DsfrTileProps>(), {
@@ -26,8 +26,11 @@ const props = withDefaults(defineProps<DsfrTileProps>(), {
   imgSrc: undefined,
   description: undefined,
   details: undefined,
+  horizontal: false,
+  vertical: undefined,
   to: '#',
   titleTag: 'h3',
+  icon: true,
 })
 
 const isExternalLink = computed(() => {
@@ -38,19 +41,20 @@ const isExternalLink = computed(() => {
 <template>
   <div
     class="fr-tile fr-enlarge-link"
-    :class="{
-      'fr-tile--vertical@md': verticalAtMd,
-      'fr-tile--vertical@lg': verticalAtLg,
-      'fr-tile--horizontal': horizontal,
+    :class="[{
       'fr-tile--disabled': disabled,
-      'fr-tile--sm': small,
-      'fr-tile--no-icon': !imgSrc,
+      'fr-tile--sm': small === true,
+      'fr-tile--horizontal': horizontal === true,
+      'fr-tile--vertical': horizontal === false || vertical === 'md' || vertical === 'lg',
+      'fr-tile--vertical@md': vertical === 'md',
+      'fr-tile--vertical@lg': vertical === 'lg',
       'fr-tile--download': download,
+      'fr-tile--no-icon': icon === false,
       'fr-tile--no-border': noBorder,
       'fr-tile--no-background': noBackground,
       'fr-tile--shadow': shadow,
       'fr-tile--grey': grey,
-    }"
+    },]"
   >
     <div class="fr-tile__body">
       <div class="fr-tile__content">
@@ -60,13 +64,15 @@ const isExternalLink = computed(() => {
         >
           <a
             v-if="isExternalLink"
+            class="fr-tile__link"
             target="_blank"
+            :download="download"
             :href="disabled ? '' : (to as string)"
-          >
-            {{ title }}
-          </a>
+          >{{ title }}</a>
           <RouterLink
             v-if="!isExternalLink"
+            :download="download"
+            class="fr-tile__link so-test"
             :to="disabled ? '' : to"
           >
             {{ title }}
@@ -93,8 +99,8 @@ const isExternalLink = computed(() => {
       >
         <img
           :src="imgSrc"
-          alt=""
           class="fr-artwork"
+          alt=""
         >
       <!-- L'alternative de l'image (attribut alt) doit à priori rester vide car l'image est illustrative et ne doit pas être restituée aux technologies d’assistance. Vous pouvez toutefois remplir l'alternative si vous estimer qu'elle apporte une information essentielle à la compréhension du contenu non présente dans le texte -->
       </div>
diff --git a/src/components/DsfrTile/DsfrTiles.spec.ts b/src/components/DsfrTile/DsfrTiles.spec.ts
index b469276e..dce6b4c3 100644
--- a/src/components/DsfrTile/DsfrTiles.spec.ts
+++ b/src/components/DsfrTile/DsfrTiles.spec.ts
@@ -150,4 +150,42 @@ describe('DsfrTiles', () => {
     expect(titleEl1.parentNode.parentNode.parentNode.parentNode).toHaveClass('fr-tile--disabled')
     expect(titleEl2.parentNode.parentNode.parentNode.parentNode).not.toHaveClass('fr-tile--disabled')
   })
+
+  it('should display a tile with a download link and one without', async () => {
+    const title1 = 'Titre de la tuile 1'
+    const title2 = 'Titre de la tuile 2'
+    const imgSrc = 'https://placekitten.com/80/80'
+
+    const tiles = [
+      {
+        title: title1,
+        imgSrc,
+        disabled: true,
+        to: '/one',
+        download: true,
+      },
+      {
+        title: title2,
+        imgSrc,
+        to: '/two',
+        download: false,
+      },
+    ]
+
+    const { getByText } = render(DsfrTiles, {
+      global: {
+        plugins: [router],
+      },
+      props: {
+        tiles,
+      },
+    })
+
+    await router.isReady()
+
+    const titleEl1 = getByText(title1)
+    const titleEl2 = getByText(title2)
+    expect(titleEl1).toHaveAttribute('download', 'true')
+    expect(titleEl2).toHaveAttribute('download', 'false')
+  })
 })

From 1edebe4f10598c95d3f07e527d2b22677de7b3f3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Stanislas=20Ormi=C3=A8res?= <stan@stormier.ninja>
Date: Mon, 16 Oct 2023 15:30:38 +0200
Subject: [PATCH 2/4] chore: :label: improve typing

---
 src/components/DsfrTable/DsfrTable.vue        | 18 ++++++++----------
 src/components/DsfrTable/DsfrTableHeaders.vue |  6 +++---
 2 files changed, 11 insertions(+), 13 deletions(-)

diff --git a/src/components/DsfrTable/DsfrTable.vue b/src/components/DsfrTable/DsfrTable.vue
index 65158ade..95709f66 100644
--- a/src/components/DsfrTable/DsfrTable.vue
+++ b/src/components/DsfrTable/DsfrTable.vue
@@ -2,12 +2,12 @@
 import { 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)
@@ -33,12 +32,12 @@ const returnLowestLimit = () => currentPage.value * optionSelected.value - optio
 const returnHighestLimit = () => currentPage.value * optionSelected.value
 let truncatedResults = props.rows.slice(returnLowestLimit(), returnHighestLimit())
 
-watch(() => optionSelected.value, (newVal, OldVal) => {
+watch(() => optionSelected.value, (newVal) => {
   props.rows.length > optionSelected.value ? pageCount.value = Math.ceil(props.rows.length / newVal) : pageCount.value = 1
   truncatedResults = props.rows.slice(returnLowestLimit(), returnHighestLimit())
 })
 
-watch(() => currentPage.value, (newVal, OldVal) => {
+watch(() => currentPage.value, () => {
   truncatedResults = props.rows.slice(returnLowestLimit(), returnHighestLimit())
 })
 
@@ -54,7 +53,6 @@ const goNextPage = () => {
   }
 }
 const goLastPage = () => { currentPage.value = pageCount.value }
-
 </script>
 
 <template>
@@ -85,7 +83,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">
diff --git a/src/components/DsfrTable/DsfrTableHeaders.vue b/src/components/DsfrTable/DsfrTableHeaders.vue
index 59f2ec9d..33b76ac9 100644
--- a/src/components/DsfrTable/DsfrTableHeaders.vue
+++ b/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>

From 390749814610a212abd68b2c70dbab4ed0bfb742 Mon Sep 17 00:00:00 2001
From: Gilderic DERUETTE <gilderic.deruette@kleegroup.com>
Date: Mon, 9 Oct 2023 12:14:08 +0200
Subject: [PATCH 3/4] =?UTF-8?q?fix([DsfrTable]):=20:bug:=20Le=20tableau=20?=
 =?UTF-8?q?ne=20devrait=20pas=20=C3=AAtre=20tronqu=C3=A9=20lorsque=20la=20?=
 =?UTF-8?q?pagination=20n'est=20pas=20activ=C3=A9e?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Fix: #622
---
 src/components/DsfrTable/DsfrTable.vue | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

diff --git a/src/components/DsfrTable/DsfrTable.vue b/src/components/DsfrTable/DsfrTable.vue
index 95709f66..6d5a8dc7 100644
--- a/src/components/DsfrTable/DsfrTable.vue
+++ b/src/components/DsfrTable/DsfrTable.vue
@@ -1,5 +1,5 @@
 <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 DsfrTableHeadersProps } from './DsfrTableHeaders.vue'
@@ -30,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) => {
-  props.rows.length > optionSelected.value ? pageCount.value = Math.ceil(props.rows.length / newVal) : pageCount.value = 1
-  truncatedResults = props.rows.slice(returnLowestLimit(), returnHighestLimit())
+watch(() => optionSelected.value, (newVal, OldVal) => {
+  pageCount.value = props.rows.length > optionSelected.value ? Math.ceil(props.rows.length / newVal) : 1
 })
 
-watch(() => currentPage.value, () => {
-  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 }

From f1c3def59876a8188ab42c1e747263954aa8e904 Mon Sep 17 00:00:00 2001
From: chahmeldine <diallcherif@gmail.com>
Date: Thu, 21 Sep 2023 16:09:13 +0200
Subject: [PATCH 4/4] feat: :sparkles: Nouveau composant back to top

---
 .../DsfrBackToTop/DsfrBackToTop.spec.ts       | 23 ++++++++
 .../DsfrBackToTop/DsfrBackToTop.stories.ts    | 58 +++++++++++++++++++
 .../DsfrBackToTop/DsfrBackToTop.vue           | 19 ++++++
 src/components/index.ts                       |  1 +
 4 files changed, 101 insertions(+)
 create mode 100644 src/components/DsfrBackToTop/DsfrBackToTop.spec.ts
 create mode 100644 src/components/DsfrBackToTop/DsfrBackToTop.stories.ts
 create mode 100644 src/components/DsfrBackToTop/DsfrBackToTop.vue

diff --git a/src/components/DsfrBackToTop/DsfrBackToTop.spec.ts b/src/components/DsfrBackToTop/DsfrBackToTop.spec.ts
new file mode 100644
index 00000000..42c28c89
--- /dev/null
+++ b/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}`)
+  })
+})
diff --git a/src/components/DsfrBackToTop/DsfrBackToTop.stories.ts b/src/components/DsfrBackToTop/DsfrBackToTop.stories.ts
new file mode 100644
index 00000000..5fb1113d
--- /dev/null
+++ b/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 = {
+}
diff --git a/src/components/DsfrBackToTop/DsfrBackToTop.vue b/src/components/DsfrBackToTop/DsfrBackToTop.vue
new file mode 100644
index 00000000..0f12a37e
--- /dev/null
+++ b/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>
diff --git a/src/components/index.ts b/src/components/index.ts
index dbad22cf..9756cb50 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -1,3 +1,4 @@
+export { default as DsfrBackToTop } from './DsfrBackToTop/DsfrBackToTop.vue'
 export { default as DsfrAccordion } from './DsfrAccordion/DsfrAccordion.vue'
 export { default as DsfrAccordionsGroup } from './DsfrAccordion/DsfrAccordionsGroup.vue'
 export { default as DsfrAlert } from './DsfrAlert/DsfrAlert.vue'