project-booster-vue 9.33.1 → 9.35.0

package/package.json

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

package/src/components/mozaic/layer/MLayer.vue

@@ -280,7 +280,7 @@ $responsive-breakpoint: 'm';
     top: 0;
 
     &--is-visible {
-      transform: translateX(0);
+      transform: translateX(0) !important;
     }
 
     &--is-hidden {

package/src/components/pedagogy/PbPedagogy.vue

@@ -240,7 +240,7 @@ $responsive-breakpoint: 'm';
     &__button-informations {
       @include set-font-scale('07', 'm');
       @include set-font-face('semi-bold');
-      margin-bottom: calc($mu100 * -1);
+      margin-bottom: ($mu100 * -1);
       margin-top: $mu200;
     }
   }

package/src/components/projects/projects-list/PbProjectsList.vue

@@ -1,7 +1,13 @@
 <template>
   <m-flex class="pb-projects-list" ref="pbProjectsList" direction="column">
+    <m-link
+      :label="linkLabel"
+      class="pb-projects-list__back-button"
+      :left-icon="BACK_ICON"
+      @click.prevent="window.history.go(-1)"
+    />
     <m-flex class="pb-projects-list__title-container" direction="column">
-      <m-flex justify-content="space-between" wrap full-width>
+      <m-flex justify-content="space-between" align-items="center" wrap full-width>
         <m-heading :label="title" size="s" underline-color="primary-01" />
         <m-button
           class="pb-projects-list__hero-button"
@@ -182,6 +188,7 @@ import MButton from '../../../components/mozaic/buttons/MButton.vue';
 import MContainer from '../../../components/mozaic/grid/MContainer.vue';
 import MFlex from './../../../components/mozaic/flex/MFlex.vue';
 import MFlexy from '../../../components/mozaic/grid/MFlexy.vue';
+import MLink from './../../../components/mozaic/link/MLink.vue';
 import MFlexyCol from '../../../components/mozaic/grid/MFlexyCol.vue';
 import MHeading from '../../../components/mozaic/heading/MHeading.vue';
 import MIcon from '../../../components/mozaic/icon/MIcon.vue';
@@ -190,6 +197,9 @@ import PbAnimableLoader from '../../../components/loader/PbAnimableLoader.vue';
 import PbCard from '../../../components/cards/PbCard.vue';
 import { Project } from '@/types/pb/Project';
 
+const BACK_ICON =
+  'https://storage.googleapis.com/project-booster-media/mozaic-icons/svg/Navigation_Arrow_Arrow--Left_16px.svg';
+
 const PLUS_ICON =
   'https://storage.googleapis.com/project-booster-media/mozaic-icons/svg/Navigation_Control_More_32px.svg';
 const PROJECT_ICON =
@@ -210,6 +220,7 @@ export default defineComponent({
     MNotification,
     PbAnimableLoader,
     PbCard,
+    MLink,
   },
 
   props: {
@@ -234,6 +245,13 @@ export default defineComponent({
       type: Boolean,
       default: true,
     },
+    /**
+     * Link label
+     */
+    linkLabel: {
+      type: String,
+      default: 'Retour',
+    },
   },
 
   data: () => ({
@@ -243,6 +261,7 @@ export default defineComponent({
     showProjectDialog: false,
     window,
     showMoreButtonAnimationDelay: 0,
+    BACK_ICON,
   }),
 
   computed: {
@@ -353,6 +372,15 @@ $responsive-breakpoint: 'm';
     padding-right: 0;
   }
 
+  &__back-button {
+    justify-content: flex-start;
+    margin-top: $mu200;
+
+    @include set-from-screen($responsive-breakpoint) {
+      margin-top: 0;
+    }
+  }
+
   &--fade {
     &-enter-active {
       transition: opacity 0.3s;

package/src/components/warning-message/PbWarningMessage.vue

@@ -17,10 +17,19 @@
       {{ payload.viewModel.label }}
     </div>
 
-    <div class="pb-warning-message__container--background">
+    <div class="pb-warning-message__head" v-if="payload.viewModel.headBlock">
+      <div class="pb-warning-message__head__image">
+        <img :src="payload.viewModel.headBlock.image" alt="Icon" />
+      </div>
+      <div class="pb-warning-message__head__text">
+        <p>{{ payload.viewModel.headBlock.text }}</p>
+      </div>
+    </div>
+
+    <div class="pb-warning-message__container--background" v-if="payload">
       <m-flex class="pb-warning-message__container__message">
         <div class="pb-warning-message__container__message__left">
-          <img :data-src="injectIcon(WARNING_ICON)" id="pb-warning-message-icon" alt="Icon" />
+          <img :data-src="injectIcon()" id="pb-warning-message-icon" alt="Icon" />
         </div>
         <div class="pb-warning-message__container__message__right">
           <h3>{{ payload.viewModel.subtitle }}</h3>
@@ -100,6 +109,7 @@ import { ScenarioStepAnswer } from '@/types/pb/Scenario';
 import SVGInjector from 'svg-injector';
 import { WarningMessagePayloadAction } from '@/types/pb/WarningMessage';
 import { DialogContent } from './dialogContent';
+import { string } from 'yup';
 const BACK_ICON =
   'https://storage.googleapis.com/project-booster-media/mozaic-icons/svg/Navigation_Arrow_Arrow--Left_16px.svg';
 const WARNING_ICON =
@@ -151,21 +161,31 @@ export default defineComponent({
       type: Object as PropType<Map<string, ScenarioStepAnswer[]>>,
       default: () => new Map<string, ScenarioStepAnswer[]>(),
     },
+    /**
+     * Component icon
+     */
+    icon: {
+      type: string,
+      default: () => WARNING_ICON,
+    },
   },
   methods: {
-    injectIcon(icon: string) {
+    injectIcon() {
       this.$nextTick(() => {
-        const element = document.getElementById('pb-warning-message-icon');
+        const element = document.querySelector('#pb-warning-message-icon');
         if (element) {
           SVGInjector(element, {
             each: function (svg) {
-              (svg as any).setAttribute('fill', '#C65200');
+              if (svg) {
+                console.log(svg);
+                (svg as any).setAttribute('fill', '#C65200');
+              }
             },
           });
         }
       });
 
-      return icon;
+      return this.icon;
     },
     callAction(action: WarningMessagePayloadAction) {
       if (action.type === 'STEP') {
@@ -280,6 +300,23 @@ $responsive-breakpoint: 'm';
     padding: 0 0 $mu250 0;
   }
 
+  &__head {
+    &__image {
+      width: 240px;
+
+      img {
+        height: auto;
+        width: 100%;
+      }
+    }
+
+    &__text {
+      @include set-font-face('semi-bold');
+      @include set-font-scale('05', 's');
+      text-align: center;
+    }
+  }
+
   &__container__message__right {
     h3 {
       @include set-font-face('semi-bold');

package/src/components/warning-message/with-modal.json

@@ -13,6 +13,10 @@
           "contentHtml": "Mon contenu de modal ici"
         }
       }
+    },
+    "headBlock": {
+      "image": "https://storage.googleapis.com/project-booster-media/new-house/Estimation%20Construction%20Neuve%20-%20Localisation.png",
+      "text": "Isolation des combles perdus"
     }
   },
   "callToActions": [