[FEATURE] Ajouter un nouveau slice logos (PIX-1199).

Merge pull request #186 from 1024pix/pix-1199-new-logo-block

components/SliceZone.vue

@@ -53,6 +53,9 @@
       <template v-if="slice.slice_type === 'process'">
         <process-slice :slice="slice" />
       </template>
+      <template v-if="slice.slice_type === 'partners_logos'">
+        <partners-logos-slice :slice="slice" />
+      </template>
     </section>
   </div>
 </template>
@@ -68,6 +71,7 @@ import PopInCampaigns from '@/components/slices/PopInCampaigns'
 import PageSection from '@/components/slices/PageSection'
 import WebSnippet from '@/components/slices/WebSnippet'
 import FeaturesSlice from '@/components/slices/Features'
+import PartnersLogosSlice from '@/components/slices/PartnersLogos'
 
 export default {
   name: 'SliceZone',
@@ -82,6 +86,7 @@ export default {
     WebSnippet,
     FeaturesSlice,
     ProcessSlice,
+    PartnersLogosSlice,
   },
   props: {
     slices: {

components/slices/PartnersLogos.vue

@@ -0,0 +1,121 @@
+<template>
+  <section class="partners-logos">
+    <prismic-rich-text
+      v-if="hasTitle && shouldDisplayTitle"
+      class="partners-logos__title"
+      :field="title"
+    />
+    <prismic-rich-text v-else class="sr-only" :field="title" />
+    <div class="partners-logos__wrapper">
+      <div
+        v-for="(item, itemIndex) in items"
+        :key="`item-${itemIndex}`"
+        class="partners-logos-wrapper__item"
+      >
+        <pix-image :field="item.logos_image" />
+      </div>
+    </div>
+  </section>
+</template>
+
+<script>
+export default {
+  name: 'PartnersLogosSlice',
+  props: {
+    slice: {
+      type: Object,
+      default: null,
+    },
+  },
+  computed: {
+    items() {
+      return this.slice.items
+    },
+    shouldDisplayTitle() {
+      return this.slice.primary.logos_should_display_title
+    },
+    hasTitle() {
+      return (
+        this.slice.primary.logos_title.length &&
+        this.slice.primary.logos_title[0].text.length
+      )
+    },
+    title() {
+      return this.slice.primary.logos_title
+    },
+  },
+}
+</script>
+
+<style lang="scss">
+.partners-logos {
+  margin: 0 16px;
+
+  &__title h2 {
+    font-family: $font-open-sans;
+    font-weight: $font-normal;
+    color: $blue-5;
+    letter-spacing: 0.00938rem;
+    text-align: center;
+    font-size: 1.75rem;
+    height: 40px;
+    line-height: 40px;
+    margin-top: 24px;
+    margin-bottom: 24px;
+  }
+
+  &__wrapper {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: 32px;
+  }
+}
+
+.partners-logos-wrapper {
+  &__item {
+    img {
+      margin: 0 5px;
+    }
+  }
+}
+
+@include device-is('tablet') {
+  .partners-logos {
+    margin: 0 32px;
+  }
+}
+
+@include device-is('desktop') {
+  .partners-logos {
+    &__title h2 {
+      margin-bottom: 48px;
+    }
+
+    &__wrapper {
+      margin-bottom: 60px;
+    }
+  }
+
+  .partners-logos-wrapper {
+    &__item {
+      img {
+        margin: 0 8px;
+      }
+    }
+  }
+}
+
+@include device-is('large-screen') {
+  .partners-logos {
+    max-width: 1920px;
+
+    &__title h2 {
+      font-size: 2.125rem;
+      height: 49px;
+      line-height: 49px;
+    }
+  }
+}
+</style>

components/slices/Process.vue

@@ -15,18 +15,21 @@
       <div
         v-for="(itemsByRow, rowIndex) in rows"
         :key="`row-${rowIndex}`"
-        class="wrapper__row"
+        class="process-wrapper__row"
       >
         <div
           v-for="(item, itemIndex) in itemsByRow"
           :key="`item-${itemIndex}`"
-          class="wrapper__item"
+          class="process-wrapper__item"
         >
           <pix-image v-if="hasImage(item)" :field="item.item_image" />
           <div>
-            <prismic-rich-text class="item__title" :field="item.item_title" />
             <prismic-rich-text
-              class="item__description"
+              class="process-wrapper-item__title"
+              :field="item.item_title"
+            />
+            <prismic-rich-text
+              class="process-wrapper-item__description"
               :field="item.item_description"
             />
           </div>
@@ -163,7 +166,7 @@ export default {
   }
 }
 
-.wrapper {
+.process-wrapper {
   &__row {
     display: flex;
     align-items: center;
@@ -201,7 +204,7 @@ export default {
   }
 }
 
-.item {
+.process-wrapper-item {
   &__title h1 {
     width: 175px;
     color: $grey-1;
@@ -239,7 +242,7 @@ export default {
     }
   }
 
-  .wrapper__item {
+  .process-wrapper__item {
     margin-bottom: 40px;
 
     div:first-of-type {
@@ -268,7 +271,7 @@ export default {
     }
   }
 
-  .wrapper {
+  .process-wrapper {
     &__row {
       flex-direction: row;
       justify-content: center;
@@ -279,10 +282,7 @@ export default {
       &:first-of-type {
         margin-left: 56px;
       }
-
       padding: 32px 24px 56px 24px;
-      height: 273px;
-
       display: block;
       margin-right: 56px;
       margin-bottom: 0;
@@ -295,7 +295,7 @@ export default {
     }
   }
 
-  .item {
+  .process-wrapper-item {
     &__title h1 {
       width: 245px;
       font-size: 1.25rem;
@@ -320,7 +320,7 @@ export default {
     justify-content: space-around;
   }
 
-  .wrapper {
+  .process-wrapper {
     &__item {
       &:first-of-type {
         margin-left: 0;
@@ -342,7 +342,7 @@ export default {
     }
   }
 
-  .item {
+  .process-wrapper-item {
     &__description {
       margin-top: 8px;
       width: 245px;