Merge pull request #504 from clairenollet/feat/add-disabled-props-for-tiles

Feat/add disabled props for tiles

Author: laruiss

src/components/DsfrTile/DsfrTile.stories.js

@@ -27,6 +27,10 @@ export default {
       control: 'boolean',
       description: 'Permet le basculement de la tuile en mode horizontal',
     },
+    disabled: {
+      control: 'boolean',
+      description: 'Permet de rendre la tuile désactivée et non-cliquable',
+    },
     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"`)',
@@ -55,6 +59,7 @@ export const TuileSimple = (args) => ({
       :imgSrc="imgSrc"
       :description="description"
       :horizontal="horizontal"
+      :disabled="false"
       :to="to"
       :title-tag="titleTag"
     />
@@ -70,6 +75,7 @@ TuileSimple.args = {
   imgSrc: 'http://placekitten.com/g/200/200',
   description: 'Une tuile absolument formidable',
   horizontal: false,
+  disabled: false,
   to: '#',
   titleTag: 'h2',
 }

src/components/DsfrTile/DsfrTile.vue

@@ -18,6 +18,7 @@ export default defineComponent({
       type: String,
       default: undefined,
     },
+    disabled: Boolean,
     horizontal: Boolean,
     to: {
       type: [String, Object],
@@ -40,7 +41,10 @@ export default defineComponent({
 <template>
   <div
     class="fr-tile fr-enlarge-link"
-    :class="{ 'fr-tile--horizontal': horizontal }"
+    :class="{
+      'fr-tile--horizontal': horizontal,
+      'fr-tile--disabled': disabled,
+    }"
   >
     <div class="fr-tile__body">
       <component
@@ -51,12 +55,12 @@ export default defineComponent({
           v-if="isExternalLink"
           class="fr-tile__link"
           target="_blank"
-          :href="to"
+          :href="disabled ? '' : to"
         >{{ title }}</a>
         <RouterLink
           v-if="!isExternalLink"
           class="fr-tile__link so-test"
-          :to="to"
+          :to="disabled ? '' : to"
         >
           {{ title }}
         </RouterLink>
@@ -83,3 +87,12 @@ export default defineComponent({
 </template>
 
 <style src="@gouvfr/dsfr/dist/component/tile/tile.main.min.css" />
+<style scoped>
+.fr-tile.fr-tile--disabled {
+  background-color: var(--background-disabled-grey);
+  box-shadow: inset 0 0 0 1px var(--border-default-grey), inset 0 -0.25rem 0 0 var(--border-disabled-grey);
+}
+.fr-tile.fr-tile--disabled a {
+  cursor: not-allowed;
+}
+</style>

src/components/DsfrTile/DsfrTiles.spec.js

@@ -110,4 +110,44 @@ describe('DsfrTiles', () => {
     expect(titleEl.parentNode.parentNode.parentNode).toHaveClass('fr-tile--horizontal')
     expect(descriptionEl).toHaveClass('fr-tile__desc')
   })
+  it('should display 1 disabled and 1 enabled tile', async () => {
+    const title1 = 'Titre de la tuile 1'
+    const title2 = 'Titre de la tuile 2'
+    const imgSrc1 = 'https://placekitten.com/80/81'
+    const imgSrc2 = 'https://placekitten.com/80/82'
+    const description1 = 'Description 1'
+    const description2 = 'Description 2'
+
+    const tiles = [
+      {
+        title: title1,
+        imgSrc: imgSrc1,
+        description: description1,
+        disabled: true,
+        to: '/one',
+      },
+      {
+        title: title2,
+        imgSrc: imgSrc2,
+        description: description2,
+        to: '/two',
+      },
+    ]
+
+    const { getByText } = render(DsfrTiles, {
+      global: {
+        plugins: [router],
+      },
+      props: {
+        tiles,
+      },
+    })
+
+    await router.isReady()
+
+    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')
+  })
 })