project-booster-vue 9.33.2 → 9.34.0

package/package.json

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

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;