From 78e80250da17d8cf9a58082bfaac62be5fdb4dd9 Mon Sep 17 00:00:00 2001
From: "clement.debroize" <clement.debroize@interieur.gouv.fr>
Date: Mon, 28 Aug 2023 16:19:02 +0200
Subject: [PATCH] =?UTF-8?q?feat:=20:sparkles:=20Mise=20=C3=A0=20jour=20du?=
 =?UTF-8?q?=20composant=20Tuile?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/DsfrTile/DsfrTile.spec.ts    |  4 +-
 src/components/DsfrTile/DsfrTile.stories.ts | 56 +++++++++++-
 src/components/DsfrTile/DsfrTile.vue        | 95 ++++++++++++++-------
 src/components/DsfrTile/DsfrTiles.spec.ts   |  8 +-
 4 files changed, 123 insertions(+), 40 deletions(-)

diff --git a/src/components/DsfrTile/DsfrTile.spec.ts b/src/components/DsfrTile/DsfrTile.spec.ts
index a8d99fbd..776700e4 100644
--- a/src/components/DsfrTile/DsfrTile.spec.ts
+++ b/src/components/DsfrTile/DsfrTile.spec.ts
@@ -37,7 +37,7 @@ describe('DsfrTile', () => {
     const titleEl = getByText(title)
     const descriptionEl = getByText(description)
 
-    expect(titleEl.parentElement.parentElement.parentElement).not.toHaveClass('fr-tile--horizontal')
+    expect(titleEl.parentElement.parentElement.parentElement.parentElement).not.toHaveClass('fr-tile--horizontal')
     expect(descriptionEl).toHaveClass('fr-tile__desc')
   })
 
@@ -65,7 +65,7 @@ describe('DsfrTile', () => {
     const titleEl = getByText(title)
     const descriptionEl = getByText(description)
 
-    expect(titleEl.parentNode.parentNode.parentNode).toHaveClass('fr-tile--horizontal')
+    expect(titleEl.parentNode.parentNode.parentNode.parentNode).toHaveClass('fr-tile--horizontal')
     expect(descriptionEl).toHaveClass('fr-tile__desc')
   })
 })
diff --git a/src/components/DsfrTile/DsfrTile.stories.ts b/src/components/DsfrTile/DsfrTile.stories.ts
index 166df242..b57dedb9 100644
--- a/src/components/DsfrTile/DsfrTile.stories.ts
+++ b/src/components/DsfrTile/DsfrTile.stories.ts
@@ -19,14 +19,50 @@ export default {
       control: 'text',
       description: 'Court texte visant à expliquer l’existence de votre tuile',
     },
+    details: {
+      control: 'text',
+      description: 'Court texte optionnel si besoin de détails supplémentaire',
+    },
     horizontal: {
       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"',
+    },
+    verticalAtLg: {
+      control: 'boolean',
+      description: 'Permet le basculement de la tuile en mode vertical au point de rupture "lg"',
+    },
+    small: {
+      control: 'boolean',
+      description: 'Permet d’afficher la tuile dans un plus petit format',
+    },
     disabled: {
       control: 'boolean',
       description: 'Permet de rendre la tuile désactivée et non-cliquable',
     },
+    download: {
+      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)',
+    },
+    noBorder: {
+      control: 'boolean',
+      description: 'Variante de tuile sans bordure',
+    },
+    noBackground: {
+      control: 'boolean',
+      description: 'Variante de tuile sans arrière-plan',
+    },
+    shadow: {
+      control: 'boolean',
+      description: 'Variante de tuile avec ombre portée',
+    },
+    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"`)',
@@ -54,8 +90,17 @@ export const TuileSimple = (args) => ({
       :title="title"
       :imgSrc="imgSrc"
       :description="description"
+      :details="details"
       :horizontal="horizontal"
+      :verticalAtMd="verticalAtMd"
+      :verticalAtLg="verticalAtLg"
+      :small="small"
       :disabled="false"
+      :download="download"
+      :noBorder="noBorder"
+      :noBackground="noBackground"
+      :shadow="shadow"
+      :grey="grey"
       :to="to"
       :title-tag="titleTag"
     />
@@ -64,10 +109,19 @@ export const TuileSimple = (args) => ({
 })
 TuileSimple.args = {
   title: 'Ma formidable tuile',
-  imgSrc: 'http://placekitten.com/g/200/200',
+  imgSrc: 'http://placekitten.com/g/80/80',
   description: 'Une tuile absolument formidable',
+  details: 'Quelques détails',
   horizontal: false,
+  verticalAtMd: false,
+  verticalAtLg: false,
+  small: false,
   disabled: false,
+  download: false,
+  noBorder: false,
+  noBackground: false,
+  shadow: false,
+  grey: false,
   to: '#',
   titleTag: 'h2',
 }
diff --git a/src/components/DsfrTile/DsfrTile.vue b/src/components/DsfrTile/DsfrTile.vue
index 2b1e1c6e..d36bfd3f 100644
--- a/src/components/DsfrTile/DsfrTile.vue
+++ b/src/components/DsfrTile/DsfrTile.vue
@@ -6,9 +6,18 @@ export type DsfrTileProps = {
   title?: string
   imgSrc?: string
   description?: string
+  details?: string
   disabled?: boolean
   horizontal?: boolean
-  to?: RouteLocationRaw,
+  verticalAtMd?: boolean
+  verticalAtLg?: boolean
+  small?: boolean
+  download?: boolean
+  noBorder?: boolean
+  noBackground?: boolean
+  shadow?: boolean
+  grey?: boolean
+  to?: RouteLocationRaw
   titleTag?: string
 }
 
@@ -16,6 +25,7 @@ const props = withDefaults(defineProps<DsfrTileProps>(), {
   title: 'Titre de la tuile',
   imgSrc: undefined,
   description: undefined,
+  details: undefined,
   to: '#',
   titleTag: 'h3',
 })
@@ -29,46 +39,65 @@ const isExternalLink = computed(() => {
   <div
     class="fr-tile fr-enlarge-link"
     :class="{
+      'fr-tile--vertical@md': verticalAtMd,
+      'fr-tile--vertical@lg': verticalAtLg,
       'fr-tile--horizontal': horizontal,
       'fr-tile--disabled': disabled,
+      'fr-tile--sm': small,
+      'fr-tile--no-icon': !imgSrc,
+      'fr-tile--download': download,
+      'fr-tile--no-border': noBorder,
+      'fr-tile--no-background': noBackground,
+      'fr-tile--shadow': shadow,
+      'fr-tile--grey': grey,
     }"
   >
     <div class="fr-tile__body">
-      <component
-        :is="titleTag"
-        class="fr-tile__title"
-      >
-        <a
-          v-if="isExternalLink"
-          class="fr-tile__link"
-          target="_blank"
-          :href="disabled ? '' : (to as string)"
-        >{{ title }}</a>
-        <RouterLink
-          v-if="!isExternalLink"
-          class="fr-tile__link so-test"
-          :to="disabled ? '' : to"
+      <div class="fr-tile__content">
+        <component
+          :is="titleTag"
+          class="fr-tile__title"
         >
-          {{ title }}
-        </RouterLink>
-      </component>
-      <p
-        v-if="description"
-        class="fr-tile__desc"
-      >
-        {{ description }}
-      </p>
+          <a
+            v-if="isExternalLink"
+            target="_blank"
+            :href="disabled ? '' : (to as string)"
+          >
+            {{ title }}
+          </a>
+          <RouterLink
+            v-if="!isExternalLink"
+            :to="disabled ? '' : to"
+          >
+            {{ title }}
+          </RouterLink>
+        </component>
+        <p
+          v-if="description"
+          class="fr-tile__desc"
+        >
+          {{ description }}
+        </p>
+        <p
+          v-if="details"
+          class="fr-tile__detail"
+        >
+          {{ details }}
+        </p>
+      </div>
     </div>
-    <div
-      v-if="imgSrc"
-      class="fr-tile__pictogram"
-    >
-      <img
-        :src="imgSrc"
-        class="fr-responsive-img"
-        alt=""
+    <div class="fr-tile__header">
+      <div
+        v-if="imgSrc"
+        class="fr-tile__pictogram"
       >
-    <!-- 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 -->
+        <img
+          :src="imgSrc"
+          alt=""
+          class="fr-artwork"
+        >
+      <!-- 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>
     </div>
   </div>
 </template>
diff --git a/src/components/DsfrTile/DsfrTiles.spec.ts b/src/components/DsfrTile/DsfrTiles.spec.ts
index cd38368a..b469276e 100644
--- a/src/components/DsfrTile/DsfrTiles.spec.ts
+++ b/src/components/DsfrTile/DsfrTiles.spec.ts
@@ -64,7 +64,7 @@ describe('DsfrTiles', () => {
     const titleEl = getByText(title1)
     const descriptionEl = getByText(description1)
 
-    expect(titleEl.parentNode.parentNode.parentNode).not.toHaveClass('fr-tile--horizontal')
+    expect(titleEl.parentNode.parentNode.parentNode.parentNode).not.toHaveClass('fr-tile--horizontal')
     expect(descriptionEl).toHaveClass('fr-tile__desc')
   })
 
@@ -107,7 +107,7 @@ describe('DsfrTiles', () => {
     const titleEl = getByText(title1)
     const descriptionEl = getByText(description2)
 
-    expect(titleEl.parentNode.parentNode.parentNode).toHaveClass('fr-tile--horizontal')
+    expect(titleEl.parentNode.parentNode.parentNode.parentNode).toHaveClass('fr-tile--horizontal')
     expect(descriptionEl).toHaveClass('fr-tile__desc')
   })
   it('should display 1 disabled and 1 enabled tile', async () => {
@@ -147,7 +147,7 @@ describe('DsfrTiles', () => {
 
     const titleEl1 = getByText(title1)
     const titleEl2 = getByText(title2)
-    expect(titleEl1.parentNode.parentNode.parentNode).toHaveClass('fr-tile--disabled')
-    expect(titleEl2.parentNode.parentNode.parentNode).not.toHaveClass('fr-tile--disabled')
+    expect(titleEl1.parentNode.parentNode.parentNode.parentNode).toHaveClass('fr-tile--disabled')
+    expect(titleEl2.parentNode.parentNode.parentNode.parentNode).not.toHaveClass('fr-tile--disabled')
   })
 })