feat: ✨ Mise à jour du composant Tuile

dnum-mi · Aug 28, 2023 · c185e79 · c185e79
1 parent 9fa8f99
commit c185e79
Show file tree

Hide file tree

Showing 4 changed files with 66 additions and 40 deletions.
diff --git 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
@@ -19,10 +19,18 @@ 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',
     },
+    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',
@@ -54,7 +62,9 @@ export const TuileSimple = (args) => ({
       :title="title"
       :imgSrc="imgSrc"
       :description="description"
+      :details="details"
       :horizontal="horizontal"
+      :small="small"
       :disabled="false"
       :to="to"
       :title-tag="titleTag"
@@ -64,9 +74,11 @@ 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,
+  small: false,
   disabled: false,
   to: '#',
   titleTag: 'h2',

diff --git a/src/components/DsfrTile/DsfrTile.vue b/src/components/DsfrTile/DsfrTile.vue
@@ -6,16 +6,19 @@ export type DsfrTileProps = {
   title?: string
   imgSrc?: string
   description?: string
+  details?: string
   disabled?: boolean
   horizontal?: boolean
-  to?: RouteLocationRaw,
+  small?: boolean,
+  to?: RouteLocationRaw
   titleTag?: string
 }
 
 const props = withDefaults(defineProps<DsfrTileProps>(), {
   title: 'Titre de la tuile',
   imgSrc: undefined,
   description: undefined,
+  details: undefined,
   to: '#',
   titleTag: 'h3',
 })
@@ -31,44 +34,55 @@ const isExternalLink = computed(() => {
     :class="{
       'fr-tile--horizontal': horizontal,
       'fr-tile--disabled': disabled,
+      'fr-tile--sm': small,
     }"
   >
     <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
@@ -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')
   })
 })