project-booster-vue 9.47.0 → 9.48.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "project-booster-vue",
-  "version": "9.47.0",
+  "version": "9.48.0",
   "private": false,
   "scripts": {
     "serve": "vue-cli-service serve",
@@ -32,12 +32,14 @@
   ],
   "dependencies": {
     "@contentful/rich-text-html-renderer": "15.0.0",
-    "@mozaic-ds/css-dev-tools": "1.24.0",
-    "@mozaic-ds/icons": "1.20.0",
-    "@mozaic-ds/styles": "1.24.1",
-    "@mozaic-ds/tokens": "1.22.0",
-    "@mozaic-ds/web-fonts": "1.22.0",
+    "@mozaic-ds/css-dev-tools": "^1.47.0",
+    "@mozaic-ds/icons": "^1.49.0",
+    "@mozaic-ds/styles": "^1.49.1",
+    "@mozaic-ds/tokens": "^1.47.0",
+    "@mozaic-ds/vue-3": "^0.35.1",
+    "@mozaic-ds/web-fonts": "^1.22.0",
     "@types/lodash.isempty": "4.4.6",
+    "@vue/test-utils": "^2.2.6",
     "@xstate/vue": "0.8.1",
     "ajv": "8.6.0",
     "axios": "0.25.0",
@@ -61,7 +63,7 @@
     "uuid": "8.3.2",
     "vee-validate": "4.4.5",
     "velocity-animate": "1.5.2",
-    "vue": "3.2.31",
+    "vue": "^3.2.41",
     "vue-router": "4.0.12",
     "vue3-cookies": "1.0.6",
     "vuex": "4.0.2",
@@ -130,7 +132,6 @@
     "@vue/eslint-config-prettier": "6.0.0",
     "@vue/eslint-config-standard": "6.0.0",
     "@vue/eslint-config-typescript": "10.0.0",
-    "@vue/test-utils": "2.0.0-rc.10",
     "axios-curl": "2.0.1",
     "babel-eslint": "10.1.0",
     "babel-jest": "26.6.3",
@@ -156,17 +157,21 @@
     "msw": "0.39.1",
     "msw-storybook-addon": "1.6.3",
     "mutationobserver-shim": "0.3.7",
-    "postcss": "8.3.11",
-    "postcss-loader": "4.2.0",
-    "postcss-scss": "4.0.1",
+    "postcss": "^8.4.18",
+    "postcss-html": "^1.5.0",
+    "postcss-loader": "^7.0.1",
+    "postcss-scss": "^4.0.5",
     "prettier": "2.5.0",
     "pretty-quick": "3.1.1",
     "puppeteer": "10.4.0",
     "semantic-release": "17.4.4",
     "semantic-release-gitmoji": "1.3.4",
-    "stylelint": "13.13.1",
-    "stylelint-config-prettier": "8.0.2",
-    "stylelint-config-standard": "22.0.0",
+    "stylelint": "^14.14.0",
+    "stylelint-config-prettier": "^8.0.2",
+    "stylelint-config-recommended-scss": "^7.0.0",
+    "stylelint-config-recommended-vue": "^1.4.0",
+    "stylelint-config-standard": "^22.0.0",
+    "stylelint-config-standard-scss": "^5.0.0",
     "stylelint-order": "4.1.0",
     "stylelint-scss": "3.21.0",
     "stylelint-webpack-plugin": "2.2.0",

package/src/assets/styles/common/layout/_color.scss

@@ -14,7 +14,6 @@ $themes: (
         'warning',
         'success'
 );
-
 $colors: get-token(color);
 
 @each $theme in $themes {

package/src/assets/styles/common/layout/_screens.scss

@@ -8,12 +8,9 @@ $screens: get-token(screen);
       @content;
     }
     /* stylelint-disable-next-line at-rule-empty-line-before, block-closing-brace-newline-after */
-  }
-
-  @else {
+  } @else {
     /* stylelint-disable-line at-rule-empty-line-before, block-closing-brace-newline-after */
-    @error "the `#{$size}` key does not exist in the screen map."
-      + "Please make sure to use an authorized value";
+    @error "the `#{$size}` key does not exist in the screen map." + "Please make sure to use an authorized value";
   }
 }
 
@@ -26,9 +23,7 @@ $major-screens: ('s', 'm', 'l', 'xl', 'xxl');
     @if $size == 's' {
       @content;
       /* stylelint-disable-next-line at-rule-empty-line-before, block-closing-brace-newline-after */
-    }
-
-    @else {
+    } @else {
       @include set-to-screen($size) {
         &\@from-#{$size} {
           @content;

package/src/assets/styles/common/layout/_spacing.scss

@@ -24,12 +24,10 @@ $magic-units-multipliers: (
   18,
   20
 );
-
 $spacing-properties: (
   'padding': 'p',
   'margin': 'm',
 );
-
 $spacing-directions: (
   'a': (
     '',
@@ -61,13 +59,9 @@ $spacing-directions: (
 
   @if $magic-unit-multiplier >= 1 {
     $magic-unit-label: 100 * $magic-unit-multiplier;
-  }
-
-  @else if $magic-unit-multiplier == 0 {
+  } @else if $magic-unit-multiplier == 0 {
     $magic-unit-label: '000';
-  }
-
-  @else {
+  } @else {
     $magic-unit-label: "0" + #{100 * $magic-unit-multiplier};
   }
 

package/src/assets/styles/kozikaza/_roboto-fonts-faces.scss

@@ -1,5 +1,5 @@
 @mixin import-font-families() {
-  @import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap');
+  @import 'https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap';
 }
 
 $font-weights: (
@@ -9,16 +9,14 @@ $font-weights: (
 );
 
 @mixin set-font-family() {
-  font-family: 'Roboto', sans-serif;
+  font-family: Roboto, sans-serif;
 }
 
 @mixin set-font-weight($weight: 'regular') {
   @if map-has-key($font-weights, $weight) {
     font-weight: map-get($font-weights, $weight);
     /* stylelint-disable-next-line */
-  }
-
-  @else {
+  } @else {
     @warn 'you are trying to use a font-weight that is not supported : "#{$weight}"';
   }
 }

package/src/components/appointment/PbAppointmentStartSection.vue

@@ -127,6 +127,7 @@ export default defineComponent({
 
 <style scoped lang="scss">
 @import 'pb-variables';
+
 $responsive-breakpoint: 'm';
 
 .pb-appointment-section {
@@ -145,6 +146,7 @@ $responsive-breakpoint: 'm';
     &-title {
       @include set-font-face('semi-bold');
       @include set-font-scale('09', 'm');
+
       color: $color-grey-900;
       text-align: start;
 
@@ -157,6 +159,7 @@ $responsive-breakpoint: 'm';
       &-title {
         @include set-font-face('regular');
         @include set-font-scale('07', 'm');
+
         color: $color-grey-800;
         margin-bottom: $mu075;
         margin-top: $mu200;

package/src/components/cards/PbCard.vue

@@ -400,6 +400,7 @@ $responsive-breakpoint: 's';
 
   &--clickable {
     @include set-box-shadow('m');
+
     border: transparent;
     transition: box-shadow 200ms;
   }

package/src/components/configurations/list/PbConfigurationsList.vue

@@ -207,7 +207,7 @@ $responsive-breakpoint: 'm';
 
 .pb-configurations-list {
   box-sizing: border-box;
-  margin: -$mu100;
+  margin: (-$mu100);
   padding: 0;
   width: calc(100% + 2 * #{$mu100});
 

package/src/components/estimates/PbEstimatesList.vue

@@ -228,7 +228,7 @@ $responsive-breakpoint: 'm';
   }
 
   &__cards-container {
-    margin: -$mu100;
+    margin: (-$mu100);
     max-width: none !important;
     padding: 0;
     width: calc(100% + 2 * #{$mu100});

package/src/components/items/PbItemCard.vue

@@ -61,6 +61,7 @@ $responsive-breakpoint: 's';
 
   &--clickable {
     @include set-box-shadow('m');
+
     border: transparent;
     transition: box-shadow 200ms;
   }

package/src/components/landing/PbProjectsLanding.vue

@@ -634,7 +634,7 @@ $responsive-breakpoint: 'm';
       }
 
       &--image-shadow {
-        box-shadow: -$mu100 $mu100 $color-primary-01-200;
+        box-shadow: (-$mu100) $mu100 $color-primary-01-200;
         display: none;
         margin-bottom: $mu100;
         margin-left: 1rem;
@@ -752,7 +752,7 @@ $responsive-breakpoint: 'm';
     width: calc(100% + 2 * #{$mu050});
 
     @include set-from-screen($responsive-breakpoint) {
-      margin: -$mu100 $mu100 $mu100 -#{$mu100};
+      margin: (-$mu100) $mu100 $mu100 -#{$mu100};
       width: calc(100% + 2 * #{$mu100});
     }
   }

package/src/components/landing/PbProjectsLandingEstimators.vue

@@ -186,7 +186,7 @@ $responsive-breakpoint: 'm';
     margin: -$mu050 $mu050 $mu050 -#{$mu050};
 
     @include set-from-screen($responsive-breakpoint) {
-      margin: -$mu100 $mu100 $mu100 -#{$mu100};
+      margin: (-$mu100) $mu100 $mu100 -#{$mu100};
     }
   }
 

package/src/components/loader/PbAnimableLoader.vue

@@ -169,7 +169,7 @@ $responsive-breakpoint: 'l';
     #circle2 {
       animation: rotate 2s linear infinite both;
       stroke: $color-primary-01-500;
-      stroke-dasharray: 31.415926;
+      stroke-dasharray: 31.4159;
       transform-origin: center;
       transition: transform 0.2s ease-out, stroke 0.2s ease-in-out;
 
@@ -199,19 +199,19 @@ $responsive-breakpoint: 'l';
   }
 
   250% {
-    stroke-dashoffset: 31.415926;
+    stroke-dashoffset: 31.4159;
   }
 
   50% {
-    stroke-dashoffset: 62.831853;
+    stroke-dashoffset: 62.8319;
   }
 
   75% {
-    stroke-dashoffset: 94.2477796;
+    stroke-dashoffset: 94.2478;
   }
 
   100% {
-    stroke-dashoffset: 125.66370614;
+    stroke-dashoffset: 125.6637;
   }
 }
 

package/src/components/media/PbMedia.vue

@@ -395,7 +395,7 @@ $responsive-breakpoint: 'l';
   }
 
   &__tabs {
-    box-shadow: 0px 10px 10px -10px $color-grey-200;
+    box-shadow: 0 10px 10px -10px $color-grey-200;
     margin-bottom: $mu250;
     width: 100%;
 

package/src/components/media/list/PbMediaList.vue

@@ -317,7 +317,7 @@ $responsive-breakpoint: 'l';
     width: calc(100% + 2 * #{$mu050});
 
     @include set-from-screen($responsive-breakpoint) {
-      margin: -$mu100;
+      margin: (-$mu100);
       width: calc(100% + 2 * #{$mu100});
     }
 

package/src/components/media/upload/PbMediaUpload.vue

@@ -720,6 +720,7 @@ $responsive-breakpoint: 'l';
 
     &-document-types {
       @include set-font-scale('05', 'm');
+
       color: $color-grey-900;
       display: flex;
       flex-direction: column;

package/src/components/mopinion/PbMOpinion.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id="surveyContent"></div>
+  <div id="survey-content"></div>
 </template>
 
 <script lang="ts">
@@ -14,7 +14,7 @@ export default defineComponent({
 
 $responsive-breakpoint: 'm';
 
-#surveyContent {
+#survey-content {
   width: 100%;
 
   :deep(.mopinion-survey-content) {

package/src/components/mozaic/buttons/MButton.vue

@@ -469,6 +469,7 @@ $responsive-breakpoint: 'm';
     }
   }
 }
+
 $text-primary: (
   'background': $color-grey-000,
   'font': $color-success-500,
@@ -482,7 +483,6 @@ $text-primary: (
     'border': transparent,
   ),
 );
-
 $text-primary-02: (
   'background': $color-grey-000,
   'font': $color-primary-02-500,

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

@@ -273,6 +273,7 @@ $responsive-breakpoint: 'm';
     box-sizing: border-box;
     max-height: 100%;
     padding-bottom: 0;
+
     /* Override mozaic */
     pointer-events: all;
     position: fixed;

package/src/components/pedagogy/PbPedagogy.vue

@@ -155,6 +155,7 @@ export default defineComponent({
 
 <style scoped lang="scss">
 @import 'pb-variables';
+
 $responsive-breakpoint: 'm';
 
 .pb-pedagogy {
@@ -235,6 +236,7 @@ $responsive-breakpoint: 'm';
       &-title {
         @include set-font-scale('07', 'm');
         @include set-font-face('semi-bold');
+
         margin-bottom: $mu100;
       }
     }
@@ -242,6 +244,7 @@ $responsive-breakpoint: 'm';
     &__button-informations {
       @include set-font-scale('07', 'm');
       @include set-font-face('semi-bold');
+
       margin-bottom: ($mu100 * -1);
       margin-top: $mu200;
     }

package/src/components/products/PbProducts.vue

@@ -151,6 +151,7 @@ $responsive-breakpoint: 'm';
 
 .pb-products {
   @include set-font-face('regular');
+
   flex-grow: 1;
   margin: 0 auto;
   padding: 0 $mu100;
@@ -176,13 +177,15 @@ $responsive-breakpoint: 'm';
   &__title {
     @include set-font-face('semi-bold');
     @include set-font-scale('07', 's');
+
     color: $color-grey-700;
     max-width: 100%;
-    padding: 0 0 0 0;
+    padding: 0;
     text-align: center;
 
     @include set-from-screen($responsive-breakpoint) {
       @include set-font-scale('08', 'm');
+
       padding: 0 $mu100 $mu100 $mu100;
       text-align: center;
       width: auto;

package/src/components/progress/PbProgressBar.vue

@@ -31,6 +31,7 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 @import 'pb-variables';
+
 $responsive-breakpoint: 'm';
 
 .progress-bar {

package/src/components/progress/PbProgressBarHeader.vue

@@ -34,6 +34,7 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 @import 'pb-variables';
+
 $responsive-breakpoint: 'm';
 
 .pb-progress-bar-header {

package/src/components/projects/project-hub/PbProjectHub.vue

@@ -1473,7 +1473,7 @@ $appear-duration: 100ms;
         width: calc(100% + 2 * #{$mu050});
 
         @include set-from-screen($responsive-breakpoint) {
-          margin: -$mu100;
+          margin: (-$mu100);
           width: calc(100% + 2 * #{$mu100});
         }
       }

package/src/components/projects/project-item-save/PbProjectItemSave.vue

@@ -490,6 +490,7 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 @import 'pb-variables';
+
 $responsive-breakpoint: 'm';
 
 .pb-project-item-save {
@@ -569,7 +570,6 @@ $responsive-breakpoint: 'm';
 
   :deep(.pb-loader__title .pb-loader__title-icon-container) {
     position: relative !important;
-    -webkit-transform: none !important;
     transform: none !important;
   }
 

package/src/components/projects/project-item-save/PbProjectItemSaveProjectsList.vue

@@ -113,6 +113,7 @@ export default defineComponent({
 
 <style scoped lang="scss">
 @import 'pb-variables';
+
 $responsive-breakpoint-l: 'l';
 
 .pb-project-item-project {

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

@@ -1469,7 +1469,7 @@ $appear-duration: 100ms;
         width: calc(100% + 2 * #{$mu050});
 
         @include set-from-screen($responsive-breakpoint) {
-          margin: -$mu100;
+          margin: (-$mu100);
           width: calc(100% + 2 * #{$mu100});
         }
       }

package/src/components/question/PbQuestion.vue

@@ -1174,6 +1174,7 @@ $answers-apparition-duration: '0.5s';
 
     :deep(.m-dialog__header) {
       @include set-font-scale('04', 'm');
+
       color: $color-grey-600;
       padding: $mu150 $mu350 $mu150 $mu150;
     }
@@ -1232,6 +1233,7 @@ $answers-apparition-duration: '0.5s';
 
       &-text {
         @include set-font-scale('04', 'l');
+
         color: $color-grey-600;
         margin-top: $mu050;
       }
@@ -1251,7 +1253,7 @@ $answers-apparition-duration: '0.5s';
     }
 
     &-footer {
-      box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.2);
+      box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);
       padding: $mu100;
     }
   }
@@ -1274,12 +1276,14 @@ $answers-apparition-duration: '0.5s';
 
 <style lang="scss">
 @import 'pb-variables';
+
 $responsive-breakpoint: 'm';
 
 .pb-question {
   &__dialog-help {
     &__title {
       @include set-font-scale('06', 'm');
+
       padding: $mu100 $mu250 $mu050 $mu250;
 
       @include set-from-screen($responsive-breakpoint) {
@@ -1289,6 +1293,7 @@ $responsive-breakpoint: 'm';
       h2 {
         @include set-font-scale('08', 'm');
         @include set-font-face('semi-bold');
+
         margin-bottom: $mu025;
       }