@mozaic-ds/vue 0.37.2-beta.0 → 0.38.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mozaic-ds/vue",
-  "version": "0.37.2-beta.0",
+  "version": "0.38.0",
   "description": "Vue.js implementation of Mozaic Design System",
   "author": "Adeo - Mozaic Design System",
   "scripts": {
@@ -28,7 +28,7 @@
     "@mozaic-ds/icons": "1.52.0",
     "@mozaic-ds/styles": "1.53.0",
     "@mozaic-ds/web-fonts": "1.22.0",
-    "core-js": "^3.27.2",
+    "core-js": "^3.28.0",
     "libphonenumber-js": "^1.10.19",
     "vue": "^2.6.14",
     "vue-country-flag": "2.3.2"
@@ -42,14 +42,14 @@
     "@vue/compiler-sfc": "^3.2.45",
     "@vue/eslint-config-prettier": "^7.0.0",
     "babel-eslint": "^10.1.0",
-    "eslint": "^8.33.0",
+    "eslint": "^8.34.0",
     "eslint-config-prettier": "^8.6.0",
     "eslint-plugin-vue": "^9.9.0",
     "postcss": "^8.4.21",
     "postcss-loader": "^7.0.2",
     "postcss-scss": "^4.0.6",
-    "prettier": "^2.8.3",
-    "sass": "^1.58.0",
+    "prettier": "^2.8.4",
+    "sass": "^1.58.1",
     "sass-loader": "^13.2.0",
     "vue-template-compiler": "^2.7.14"
   },

package/src/components/autocomplete/MAutocomplete.vue

@@ -50,7 +50,6 @@
       :items="localItems"
       :multiple="multiple"
       :empty-search-label="emptySearchLabel"
-      :data-key-expr="dataKeyExpr"
       :data-text-expr="dataTextExpr"
       :data-value-expr="dataValueExpr"
       :max-width="maxWidth"
@@ -183,10 +182,6 @@ export default {
       type: String,
       default: 'No results found',
     },
-    dataKeyExpr: {
-      type: String,
-      default: 'id',
-    },
     dataTextExpr: {
       type: String,
       default: 'label',

package/src/components/checkbox/MCheckboxGroup.vue

@@ -1,6 +1,6 @@
 <template>
   <fieldset class="mc-field mc-field--group">
-    <legend class="mc-field__legend">
+    <legend v-if="legend" class="mc-field__legend">
       {{ legend }}
       <span
         v-if="requirementText"
@@ -63,7 +63,7 @@ export default {
      */
     legend: {
       type: String,
-      required: true,
+      default: undefined,
     },
     /**
      * Property used to manage the values checked by v-model
@@ -164,6 +164,19 @@ export default {
 </script>
 
 <style lang="scss">
-@import 'settings-tools/_all-settings';
-@import 'components/_c.fields';
+@import 'settings-tools/all-settings';
+@import 'components/c.fields';
+
+// TODO: temporary fix - should be put inside @mozaic-ds/styles
+.mc-field--group {
+  .mc-field {
+    &__container {
+      margin-top: 0;
+    }
+
+    &__legend {
+      margin-bottom: 1rem;
+    }
+  }
+}
 </style>

package/src/components/dropdown/MDropdown.vue

@@ -43,7 +43,6 @@
       :items="localItems"
       :multiple="multiple"
       :empty-search-label="emptySearchLabel"
-      :data-key-expr="dataKeyExpr"
       :data-text-expr="dataTextExpr"
       :data-value-expr="dataValueExpr"
       :max-width="maxWidth"
@@ -141,10 +140,6 @@ export default {
       type: String,
       default: 'No results found',
     },
-    dataKeyExpr: {
-      type: String,
-      default: 'id',
-    },
     dataTextExpr: {
       type: String,
       default: 'label',

package/src/components/header/MHeader.vue

@@ -151,7 +151,7 @@ export default {
     /** The size of title (l, s, m, or xl).*/
     size: {
       type: String,
-      default: 'l',
+      default: 'm',
       validator: (value) => ['s', 'm', 'l', 'xl'].includes(value),
     },
     /** Label of the back button. Useful for accessibilty reason */
@@ -237,44 +237,63 @@ export default {
 <style lang="scss">
 @import 'settings-tools/all-settings';
 @import 'components/c.divider';
+
+@mixin set-container-padding() {
+  padding-left: $mu200;
+  padding-right: $mu200;
+
+  @media (min-width: $screen-l) and (max-width: ($screen-xl - 1)) {
+    padding-left: $mu300;
+    padding-right: $mu300;
+  }
+}
+
 .mc-header {
   @include set-font-face();
+
   background-color: $color-grey-000;
-  z-index: 10;
+  z-index: 5;
+
   &__container {
+    @include set-container-padding();
+
     display: grid;
-    padding: $mu050 $mu150 $mu100;
-    @include set-from-screen('l') {
-      padding-left: $mu200;
-      padding-right: $mu200;
-    }
+    padding-top: $mu050;
+    padding-bottom: $mu100;
   }
+
   &__breadcrumb {
     grid-column: 1;
     grid-row: auto;
   }
+
   &__content {
     color: $color-font-darkest;
     grid-column: 1;
     grid-row: auto;
     padding-top: $mu050;
+
     &-main {
       display: flex;
       align-items: center;
       gap: $mu100;
+
       &:not(:only-child) {
         margin-bottom: $mu025;
       }
     }
+
     &-aside {
       display: flex;
       align-items: flex-start;
       flex-direction: column;
       gap: $mu050;
       padding-bottom: $mu050;
+
       &.can-navigate {
         padding-left: $mu300;
       }
+
       @include set-from-screen('l') {
         align-items: center;
         flex-direction: row;
@@ -283,8 +302,10 @@ export default {
       }
     }
   }
+
   &__back {
     @include unstyle-button();
+
     align-items: center;
     background-color: transparent;
     justify-content: center;
@@ -292,39 +313,48 @@ export default {
     display: flex;
     height: $mu200;
     width: $mu200;
+
     &-icon {
       color: $color-grey-800;
       height: $mu150;
       width: $mu150;
     }
+
     &-label {
       @include visually-hidden();
     }
   }
+
   &__title {
+    @include set-font-scale('08', 'm'); // 28px / 36px
+    @include set-font-weight('semi-bold');
+
     margin-top: 0;
     margin-bottom: 0;
+
     &--s {
       @include set-font-scale('07', 'm'); // 23px / 32px
     }
-    &--m {
-      @include set-font-scale('08', 'm'); // 28px / 36px
-    }
+
     &--l {
       @include set-font-scale('09', 'm'); // 34px / 44px
     }
+
     &--xl {
       @include set-font-scale('10', 'm'); // 41px / 56px
     }
   }
+
   &__subtitle {
     @include set-font-scale('05', 'm'); // 16px / 22px
   }
+
   &__actions,
   &__icons {
     display: flex;
     gap: $mu150;
   }
+
   &__actions {
     align-items: flex-end;
     align-self: flex-start;
@@ -333,40 +363,48 @@ export default {
     justify-self: end;
     margin-bottom: $mu050;
     min-height: $mu250;
+
     @include set-from-screen('l') {
       grid-column: 2;
       grid-row: 1;
       margin-bottom: 0;
     }
   }
+
   &__selector {
     &:not(:only-child) {
       @include set-divider('left', 'light', '100%', 's');
+
       padding-left: px-to-rem(25);
       position: relative;
     }
   }
+
   &__tabs {
-    padding-left: $mu200;
-    padding-right: $mu200;
+    @include set-container-padding();
   }
+
   // Modifiers
   &--shadow {
     @include set-box-shadow('s');
   }
+
   &--animate {
     left: 0;
     position: absolute;
     right: 0;
     transition: transform ease-out 0.4s;
   }
+
   &--sticky {
     position: sticky;
     top: 0;
   }
+
   &--up {
     transform: translateY(0);
   }
+
   &--down {
     transform: translateY(calc(-100% - 5px));
   }

package/src/components/listbox/MListBox.vue

@@ -63,10 +63,6 @@ export default {
       type: Boolean,
       default: false,
     },
-    dataKeyExpr: {
-      type: String,
-      default: 'id',
-    },
     dataTextExpr: {
       type: String,
       default: 'label',

package/src/components/radio/MRadioGroup.vue

@@ -1,6 +1,6 @@
 <template>
   <fieldset class="mc-field mc-field--group">
-    <legend class="mc-field__legend">
+    <legend v-if="legend" class="mc-field__legend">
       {{ legend }}
       <span
         v-if="requirementText"
@@ -48,7 +48,7 @@ export default {
   props: {
     legend: {
       type: String,
-      required: true,
+      default: null,
     },
     requirementText: {
       type: String,
@@ -106,6 +106,19 @@ export default {
 </script>
 
 <style lang="scss">
-@import 'settings-tools/_all-settings';
-@import 'components/_c.fields';
+@import 'settings-tools/all-settings';
+@import 'components/c.fields';
+
+// TODO: temporary fix - should be put inside @mozaic-ds/styles
+.mc-field--group {
+  .mc-field {
+    &__container {
+      margin-top: 0;
+    }
+
+    &__legend {
+      margin-bottom: 1rem;
+    }
+  }
+}
 </style>