[FEATURE] Ajouter un ID sur les slices pour faire des liens dessus (PIX-1576).

components/SliceZone.vue

@@ -5,25 +5,25 @@
         <prismic-rich-text :field="slice.primary.text" />
       </template>
       <template v-if="slice.slice_type === 'pop-in'">
-        <pop-in-campaigns :slice="slice" />
+        <pop-in-campaigns :slice="slice" :index-for-id="index" />
       </template>
       <template v-if="slice.slice_type === 'banner'">
-        <page-banner :slice="slice"></page-banner>
+        <page-banner :slice="slice" :index-for-id="index" />
       </template>
       <template v-if="slice.slice_type === 'article'">
-        <article-slice :slice="slice" :button-class="'section-demo__button'" />
+        <article-slice :slice="slice" :index-for-id="index" />
       </template>
       <template v-if="slice.slice_type === 'multiple_block'">
-        <multiple-block-slice :slice="slice" />
+        <multiple-block-slice :slice="slice" :index-for-id="index" />
       </template>
       <template v-if="slice.slice_type === 'partners_logos'">
-        <partners-logos-slice :slice="slice" />
+        <partners-logos-slice :slice="slice" :index-for-id="index" />
       </template>
       <template v-if="slice.slice_type === 'latest_news'">
-        <latest-news-slice :slice="slice" />
+        <latest-news-slice :slice="slice" :index-for-id="index" />
       </template>
       <template v-if="slice.slice_type === 'stat'">
-        <stat :slice="slice" />
+        <stat :slice="slice" :index-for-id="index" />
       </template>
     </section>
   </div>

components/slices/Article.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :style="[background]">
+  <div :id="`slice-${indexForId}`" :style="[background]">
     <div
       class="article"
       :class="{
@@ -81,6 +81,10 @@ export default {
       type: Object,
       default: null,
     },
+    indexForId: {
+      type: Number,
+      default: 0,
+    },
   },
   computed: {
     content() {

components/slices/LatestNews.vue

@@ -1,5 +1,5 @@
 <template>
-  <section class="latest-news">
+  <section :id="`slice-${indexForId}`" class="latest-news">
     <prismic-rich-text
       v-if="shouldDisplayTitle && hasTitle"
       class="latest-news__title"
@@ -41,6 +41,10 @@ export default {
       type: Object,
       default: null,
     },
+    indexForId: {
+      type: Number,
+      default: 0,
+    },
   },
   computed: {
     shouldDisplayTitle() {

components/slices/MultipleBlock.vue

@@ -1,5 +1,9 @@
 <template>
-  <section :class="blockClass" :style="[background]">
+  <section
+    :id="`slice-${indexForId}`"
+    :class="blockClass"
+    :style="[background]"
+  >
     <prismic-rich-text
       v-if="hasTitle && shouldDisplayTitle"
       :class="`${blockClass}__title`"
@@ -52,6 +56,10 @@ export default {
       type: Object,
       default: null,
     },
+    indexForId: {
+      type: Number,
+      default: 0,
+    },
   },
   data() {
     return {

components/slices/PageBanner.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :style="[background]">
+  <div :id="`slice-${indexForId}`" :style="[background]">
     <section class="banner row-block">
       <div class="row-block__main-content">
         <prismic-rich-text
@@ -59,6 +59,10 @@ export default {
       type: Object,
       default: null,
     },
+    indexForId: {
+      type: Number,
+      default: 0,
+    },
   },
   computed: {
     background() {

components/slices/PartnersLogos.vue

@@ -1,5 +1,5 @@
 <template>
-  <section class="partners-logos">
+  <section :id="`slice-${indexForId}`" class="partners-logos">
     <prismic-rich-text
       v-if="hasTitle && shouldDisplayTitle"
       class="partners-logos__title"
@@ -26,6 +26,10 @@ export default {
       type: Object,
       default: null,
     },
+    indexForId: {
+      type: Number,
+      default: 0,
+    },
   },
   computed: {
     items() {

components/slices/PopInCampaigns.vue

@@ -1,5 +1,9 @@
 <template>
-  <div class="pop-in-campaigns" :class="{ collapse: isClosed }">
+  <div
+    :id="`slice-${indexForId}`"
+    class="pop-in-campaigns"
+    :class="{ collapse: isClosed }"
+  >
     <div
       class="pop-in-campaigns-content"
       v-on="isClosed ? { click: togglePopIn } : {}"
@@ -39,6 +43,10 @@ export default {
       type: Object,
       default: null,
     },
+    indexForId: {
+      type: Number,
+      default: 0,
+    },
   },
   data() {
     return {

components/slices/Stat.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="stat">
+  <div :id="`slice-${indexForId}`" class="stat">
     <prismic-rich-text :field="content.block_title" />
     <prismic-rich-text :field="content.block_presentation" />
     <chart-section :data="chartData" />
@@ -19,6 +19,10 @@ export default {
       type: Object,
       default: null,
     },
+    indexForId: {
+      type: Number,
+      default: 0,
+    },
   },
   computed: {
     content() {