project-booster-vue 9.14.2 → 9.15.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "project-booster-vue",
-  "version": "9.14.2",
+  "version": "9.15.0",
   "private": false,
   "scripts": {
     "serve": "vue-cli-service serve",

package/src/components/question/PbQuestion.vue

@@ -30,6 +30,25 @@
             @click="displayVideoGuide('')"
           />
         </div>
+        <div v-if="payload.viewModel.videoBlock" class="pb-question__video-block-container">
+          <div v-if="payload.viewModel.videoBlock" class="pb-question__video-block">
+            <div class="pb-question__video-block-image-container">
+              <m-image
+                class="pb-question__video-block-image"
+                :src="decorate(payload.viewModel.videoBlock.image)"
+                cover
+              />
+            </div>
+            <div class="pb-question__video-block-buttons-container">
+              <m-button
+                :label="decorate(payload.viewModel.videoBlock.buttonLabel)"
+                :left-icon="decorate(payload.viewModel.videoBlock.icon)"
+                theme="bordered-neutral"
+                @click="displayVideoGuide('')"
+              />
+            </div>
+          </div>
+        </div>
       </div>
       <m-container fluid class="pb-question__answers-container">
         <m-flexy class="pb-question__answers-container-flexy">
@@ -783,6 +802,85 @@ $answers-apparition-duration: '0.5s';
     }
   }
 
+  &__video-block {
+    @include set-border-radius('m');
+
+    border: 1px solid $color-grey-300;
+    display: flex;
+    flex-direction: column;
+    margin-top: $mu200;
+    max-height: 112px;
+    overflow: hidden;
+    position: relative;
+    width: 100%;
+
+    @include set-from-screen('s') {
+      flex-direction: column;
+      width: 100%;
+    }
+
+    @include set-from-screen('m') {
+      flex-direction: row;
+      max-height: unset;
+      width: 80%;
+    }
+
+    @include set-from-screen('l') {
+      flex-direction: row;
+      width: 75%;
+    }
+
+    @include set-from-screen('xl') {
+      flex-direction: row;
+      max-width: 768px;
+      width: 50%;
+    }
+
+    &-container {
+      align-items: center;
+      display: flex;
+      justify-content: center;
+    }
+
+    &-image-container {
+      width: 100%;
+
+      @include set-from-screen('s') {
+        width: 100%;
+      }
+
+      @include set-from-screen('m') {
+        width: 33%;
+      }
+    }
+
+    &-buttons-container {
+      align-items: center;
+      display: flex;
+      flex-grow: 1;
+      justify-content: center;
+      padding: $mu200 $mu100;
+      position: absolute;
+      width: 100%;
+
+      @include set-from-screen('s') {
+        padding: $mu200 $mu100;
+        width: 100%;
+      }
+
+      @include set-from-screen('m') {
+        padding: 0 $mu200;
+        position: static;
+        width: 66%;
+      }
+
+      @include set-from-screen('xl') {
+        padding: 0 $mu200;
+        width: 66%;
+      }
+    }
+  }
+
   &__answers-container {
     margin: 0 auto;
     max-width: 100%;

package/src/components/question/default-payload.json

@@ -3,7 +3,12 @@
     "hero": "The question hero",
     "label": "The question title",
     "subtitle": "The question subtitle",
-    "answersComponent": "PbCard"
+    "answersComponent": "PbCard",
+    "videoBlock": {
+      "buttonLabel": "Voir le guide en vidéo (1min)",
+      "icon": "https://storage.googleapis.com/project-booster-media/mozaic-icons/svg/Media_Play_24px.svg",
+      "image": "https://images.unsplash.com/photo-1577106777018-886191d770b2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1868&q=80"
+    }
   },
   "answers": {
     "ANSWER-1": {