Add ID to Slices

1024pix · Nov 27, 2020 · 088c147 · 088c147
1 parent 28d7e65
commit 088c147
Show file tree

Hide file tree

Showing 6 changed files with 27 additions and 6 deletions.
diff --git a/components/slices/Article.vue b/components/slices/Article.vue
@@ -1,5 +1,5 @@
 <template>
-  <div :style="[background]">
+  <div :id="id" :style="[background]">
     <div
       class="article"
       :class="{
@@ -70,6 +70,7 @@
 
 <script>
 import CtaButton from '../CtaButton'
+import textToId from '@/services/text-to-id'
 
 export default {
   name: 'Article',
@@ -109,6 +110,9 @@ export default {
         this.content.article_background && this.content.article_background.url
       )
     },
+    id() {
+      return textToId(this.content.article_title[0].text)
+    },
     isOnlyTextLayout() {
       return this.content.article_layout === 'only-text'
     },

diff --git a/components/slices/LatestNews.vue b/components/slices/LatestNews.vue
@@ -1,5 +1,5 @@
 <template>
-  <section class="latest-news">
+  <section :id="id" class="latest-news">
     <prismic-rich-text
       v-if="shouldDisplayTitle && hasTitle"
       class="latest-news__title"
@@ -30,6 +30,7 @@
 
 <script>
 import NewsItemCard from '../NewsItemCard'
+import textToId from '@/services/text-to-id'
 
 export default {
   name: 'LatestNews',
@@ -60,6 +61,9 @@ export default {
         this.slice.primary.latest_news_items.length
       )
     },
+    id() {
+      return textToId(this.slice.primary.latest_news_title[0].text)
+    },
   },
   methods: {},
 }

diff --git a/components/slices/MultipleBlock.vue b/components/slices/MultipleBlock.vue
@@ -1,5 +1,5 @@
 <template>
-  <section :class="blockClass" :style="[background]">
+  <section :id="id" :class="blockClass" :style="[background]">
     <prismic-rich-text
       v-if="hasTitle && shouldDisplayTitle"
       :class="`${blockClass}__title`"
@@ -44,6 +44,7 @@ import {
   EXTRA_LARGE_SCREEN_MIN_WIDTH,
   DESKTOP_MIN_WIDTH,
 } from '~/config/breakpoints'
+import textToId from '@/services/text-to-id'
 
 export default {
   name: 'MultipleBlock',
@@ -67,6 +68,9 @@ export default {
     blockClass() {
       return this.slice.primary.block_style
     },
+    id() {
+      return textToId(this.slice.primary.block_title[0].text)
+    },
     items() {
       return this.slice.items
     },

diff --git a/components/slices/PartnersLogos.vue b/components/slices/PartnersLogos.vue
@@ -1,5 +1,5 @@
 <template>
-  <section class="partners-logos">
+  <section :id="id" class="partners-logos">
     <prismic-rich-text
       v-if="hasTitle && shouldDisplayTitle"
       class="partners-logos__title"
@@ -19,6 +19,8 @@
 </template>
 
 <script>
+import textToId from '@/services/text-to-id'
+
 export default {
   name: 'PartnersLogosSlice',
   props: {
@@ -28,6 +30,9 @@ export default {
     },
   },
   computed: {
+    id() {
+      return textToId(this.slice.primary.logos_title[0].text)
+    },
     items() {
       return this.slice.items
     },

diff --git a/components/slices/Stat.vue b/components/slices/Stat.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="stat">
+  <div :id="id" class="stat">
     <prismic-rich-text :field="content.block_title" />
     <prismic-rich-text :field="content.block_presentation" />
     <chart-section :data="chartData" />
@@ -8,6 +8,7 @@
 
 <script>
 import ChartSection from '~/components/ChartSection'
+import textToId from '@/services/text-to-id'
 
 export default {
   name: 'StatSlice',
@@ -27,7 +28,9 @@ export default {
     data() {
       return this.slice.items
     },
-
+    id() {
+      return textToId(this.content.block_title[0].text)
+    },
     chartData() {
       function backgroundColorFrom(color) {
         const hex = color.replace('#', '')

diff --git a/tests/components/slices/Stat.test.js b/tests/components/slices/Stat.test.js
@@ -37,6 +37,7 @@ describe('Stat slice', () => {
           propsData: {
             slice: {
               primary: {
+                block_title: [{ text: 'Title of Data' }],
                 block_data_name: [{ text: 'Data name' }],
                 block_graph_color: '#4700ff',
               },