@mozaic-ds/vue 0.27.0 → 0.28.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mozaic-ds/vue",
-  "version": "0.27.0",
+  "version": "0.28.1",
   "description": "Vue.js implementation of Mozaic Design System",
   "author": "Adeo - Mozaic Design System",
   "scripts": {
@@ -23,33 +23,34 @@
     "postinstall.js"
   ],
   "dependencies": {
-    "@mozaic-ds/css-dev-tools": "1.38.0",
-    "@mozaic-ds/icons": "1.41.0",
-    "@mozaic-ds/styles": "1.43.1",
-    "@mozaic-ds/web-fonts": "1.22.0",
-    "core-js": "^3.25.0",
-    "libphonenumber-js": "^1.10.13",
-    "postcss-scss": "^4.0.4",
+    "@mozaic-ds/css-dev-tools": "^1.44.0",
+    "@mozaic-ds/icons": "^1.44.0",
+    "@mozaic-ds/styles": "^1.44.0",
+    "@mozaic-ds/web-fonts": "^1.22.0",
+    "core-js": "^3.25.5",
+    "libphonenumber-js": "^1.10.14",
     "vue": "^2.6.14",
     "vue-country-flag": "2.3.2"
   },
   "devDependencies": {
-    "@babel/core": "^7.18.13",
-    "@babel/eslint-parser": "^7.18.9",
+    "@babel/core": "^7.19.3",
+    "@babel/eslint-parser": "^7.19.1",
+    "@rushstack/eslint-patch": "^1.2.0",
     "@vue/cli-plugin-babel": "~5.0.4",
     "@vue/cli-service": "~5.0.4",
-    "@vue/compiler-sfc": "^3.2.20",
-    "@vue/eslint-config-prettier": "^6.0.0",
+    "@vue/compiler-sfc": "^3.2.41",
+    "@vue/eslint-config-prettier": "^7.0.0",
     "babel-eslint": "^10.1.0",
-    "eslint": "^8.23.0",
+    "eslint": "^8.25.0",
     "eslint-config-prettier": "^8.5.0",
-    "eslint-plugin-vue": "^9.4.0",
-    "postcss": "^8.4.16",
-    "postcss-loader": "^4.3.0",
+    "eslint-plugin-vue": "^9.6.0",
+    "postcss": "^8.4.18",
+    "postcss-loader": "^7.0.1",
+    "postcss-scss": "^4.0.5",
     "prettier": "^2.7.1",
-    "sass": "^1.54.7",
-    "sass-loader": "^10.2.0",
-    "vue-template-compiler": "^2.7.10"
+    "sass": "^1.55.0",
+    "sass-loader": "^13.1.0",
+    "vue-template-compiler": "^2.7.13"
   },
   "bugs": {
     "url": "https://github.com/adeo/mozaic-vue/issues"

package/src/components/link/MLink.vue

@@ -1,6 +1,7 @@
 <template>
   <component
-    :is="router ? router : href && !disabled ? 'a' : 'span'"
+    :is="linkComponentName"
+    v-bind="linkComponentProps"
     :href="router ? null : href && !disabled ? href : null"
     class="mc-link"
     :class="setClasses"
@@ -37,7 +38,7 @@ export default {
 
   props: {
     router: {
-      type: [String, Object],
+      type: Object,
       default: null,
     },
     href: {
@@ -105,10 +106,20 @@ export default {
 
       return classes;
     },
+    linkComponentName() {
+      const isLinkValid = this.href && !this.disabled;
+      const routerComponent = this.router?.name ?? null;
+      const defaultComponent = isLinkValid ? 'a' : 'span';
+
+      return routerComponent ?? defaultComponent;
+    },
+    linkComponentProps() {
+      return this.router?.props ?? {};
+    },
   },
   methods: {
     onClick(event) {
-      if(!this.disabled){
+      if (!this.disabled) {
         this.$emit('click', event);
       }
     },

package/src/components/tabs/MTab.vue

@@ -18,11 +18,11 @@
           v-if="tab.router"
           v-bind="tab.attrs"
           :to="tab.to"
-          class="mc-tabs__link"
+          class="mc-tabs__element"
           :class="setLinkClass(tab)"
-          active-class="mc-tabs__link--selected"
+          active-class="mc-tabs__element--selected"
         >
-          {{ tab.text }}
+          <span class="mc-tabs__text">{{ tab.text }}</span>
         </component>
         <component
           :is="tab.href ? (tab.disabled ? 'span' : 'a') : 'button'"
@@ -32,14 +32,14 @@
           :href="tab.href ? (!tab.disabled ? tab.href : null) : null"
           :type="!tab.href ? 'button' : null"
           :disabled="!tab.href && tab.disabled ? true : null"
-          class="mc-tabs__link"
+          class="mc-tabs__element"
           role="tab"
           :aria-selected="tab.active ? 'true' : 'false'"
           :class="setLinkClass(tab)"
           v-bind="tab.attrs"
           @click="onTabClicked($event, tab, index)"
         >
-          {{ tab.text }}
+          <span class="mc-tabs__text">{{ tab.text }}</span>
         </component>
       </li>
     </ul>
@@ -106,7 +106,7 @@ export default {
         'mc-tabs--full': this.align === 'full',
         'mc-tabs--full-centered': this.align === 'centered',
         'mc-tabs--dropdown': this.type === 'dropdown',
-        'mc-tabs--no-shadow': !this.shadow,
+        'mc-tabs--no-divider': !this.shadow,
       };
     },
   },
@@ -151,17 +151,17 @@ export default {
   methods: {
     setLinkClass: function (tab) {
       return {
-        'mc-tabs__link--selected': tab.active,
-        'mc-tabs__link--disabled': tab.disabled,
+        'mc-tabs__element--selected': tab.active,
+        'mc-tabs__element--disabled': tab.disabled,
       };
     },
     setTabState(tab) {
-      this.tablist.querySelectorAll('.mc-tabs__link').forEach((el) => {
-        el.classList.remove('mc-tabs__link--selected');
+      this.tablist.querySelectorAll('.mc-tabs__element').forEach((el) => {
+        el.classList.remove('mc-tabs__element--selected');
         el.setAttribute('aria-selected', 'false');
       });
 
-      tab.classList.add('mc-tabs__link--selected');
+      tab.classList.add('mc-tabs__element--selected');
       tab.setAttribute('aria-selected', 'true');
     },
     getTabFromIndex: function (index) {

package/src/tokens/adeo/android/colors.xml

@@ -364,10 +364,14 @@
   <color name="color_stepper_title">#ff00919f</color>
   <color name="color_tabs_background">#ffffffff</color>
   <color name="color_tabs_shadow">#ff000000</color>
-  <color name="color_tabs_default">#ff191919</color>
+  <color name="color_tabs_default">#ff666666</color>
+  <color name="color_tabs_element_background">#ffeeeff1</color>
   <color name="color_tabs_hover">#ff004e57</color>
-  <color name="color_tabs_disabled">#ff666666</color>
-  <color name="color_tabs_active">#ff007f8c</color>
+  <color name="color_tabs_disabled_background">#ffcccccc</color>
+  <color name="color_tabs_active_background">#ffcfd2d8</color>
+  <color name="color_tabs_active_text">#ff333333</color>
+  <color name="color_tabs_selected_border">#ff000000</color>
+  <color name="color_tabs_selected_text">#ff000000</color>
   <color name="color_tabs_active_disabled">#ff91d5db</color>
   <color name="color_tag_text_light_background">#ffffffff</color>
   <color name="color_tag_text_light_border">#ff808080</color>

package/src/tokens/adeo/css/_variables.scss

@@ -360,10 +360,14 @@ $color-stepper-icon: var(--color-stepper-icon, #00919f);
 $color-stepper-title: var(--color-stepper-title, #00919f);
 $color-tabs-background: var(--color-tabs-background, #ffffff);
 $color-tabs-shadow: var(--color-tabs-shadow, #000000);
-$color-tabs-default: var(--color-tabs-default, #191919);
+$color-tabs-default: var(--color-tabs-default, #666666);
+$color-tabs-element-background: var(--color-tabs-element-background, #eeeff1);
 $color-tabs-hover: var(--color-tabs-hover, #004e57);
-$color-tabs-disabled: var(--color-tabs-disabled, #666666);
-$color-tabs-active: var(--color-tabs-active, #007f8c);
+$color-tabs-disabled-background: var(--color-tabs-disabled-background, #cccccc);
+$color-tabs-active-background: var(--color-tabs-active-background, #cfd2d8);
+$color-tabs-active-text: var(--color-tabs-active-text, #333333);
+$color-tabs-selected-border: var(--color-tabs-selected-border, #000000);
+$color-tabs-selected-text: var(--color-tabs-selected-text, #000000);
 $color-tabs-active-disabled: var(--color-tabs-active-disabled, #91d5db);
 $color-tag-text-light-background: var(--color-tag-text-light-background, #ffffff);
 $color-tag-text-light-border: var(--color-tag-text-light-border, #808080);

package/src/tokens/adeo/css/root.scss

@@ -182,7 +182,11 @@
   --color-tag-text-light-border: var(--color-grey-500);
   --color-tag-text-light-background: var(--color-grey-000);
   --color-tabs-active-disabled: var(--color-primary-01-200);
+  --color-tabs-selected-border: var(--color-grey-999);
+  --color-tabs-active-background: var(--color-primary-02-200);
+  --color-tabs-disabled-background: var(--color-grey-200);
   --color-tabs-hover: var(--color-primary-01-800);
+  --color-tabs-element-background: var(--color-primary-02-100);
   --color-tabs-shadow: var(--color-grey-999);
   --color-tabs-background: var(--color-grey-000);
   --color-stepper-title: var(--color-primary-01-500);
@@ -430,9 +434,9 @@
   --color-badge-info-text: var(--color-info-700);
   --color-badge-info-border: var(--color-info-500);
   --color-badge-info-background: var(--color-info-100);
-  --color-tabs-active: var(--color-font-primary-01);
-  --color-tabs-disabled: var(--color-font-light);
-  --color-tabs-default: var(--color-font-darker);
+  --color-tabs-selected-text: var(--color-font-darkest);
+  --color-tabs-active-text: var(--color-font-dark);
+  --color-tabs-default: var(--color-font-light);
   --color-fields-help: var(--color-font-light);
   --color-fields-requirement: var(--color-font-light);
   --color-fields-label: var(--color-font-dark);

package/src/tokens/adeo/ios/StyleDictionaryColor.h

@@ -369,9 +369,13 @@ ColorStepperTitle,
 ColorTabsBackground,
 ColorTabsShadow,
 ColorTabsDefault,
+ColorTabsElementBackground,
 ColorTabsHover,
-ColorTabsDisabled,
-ColorTabsActive,
+ColorTabsDisabledBackground,
+ColorTabsActiveBackground,
+ColorTabsActiveText,
+ColorTabsSelectedBorder,
+ColorTabsSelectedText,
 ColorTabsActiveDisabled,
 ColorTagTextLightBackground,
 ColorTagTextLightBorder,

package/src/tokens/adeo/ios/StyleDictionaryColor.m

@@ -379,10 +379,14 @@
 [UIColor colorWithRed:0.000f green:0.569f blue:0.624f alpha:1.000f],
 [UIColor colorWithRed:1.000f green:1.000f blue:1.000f alpha:1.000f],
 [UIColor colorWithRed:0.000f green:0.000f blue:0.000f alpha:1.000f],
-[UIColor colorWithRed:0.098f green:0.098f blue:0.098f alpha:1.000f],
-[UIColor colorWithRed:0.000f green:0.306f blue:0.341f alpha:1.000f],
 [UIColor colorWithRed:0.400f green:0.400f blue:0.400f alpha:1.000f],
-[UIColor colorWithRed:0.000f green:0.498f blue:0.549f alpha:1.000f],
+[UIColor colorWithRed:0.933f green:0.937f blue:0.945f alpha:1.000f],
+[UIColor colorWithRed:0.000f green:0.306f blue:0.341f alpha:1.000f],
+[UIColor colorWithRed:0.800f green:0.800f blue:0.800f alpha:1.000f],
+[UIColor colorWithRed:0.812f green:0.824f blue:0.847f alpha:1.000f],
+[UIColor colorWithRed:0.200f green:0.200f blue:0.200f alpha:1.000f],
+[UIColor colorWithRed:0.000f green:0.000f blue:0.000f alpha:1.000f],
+[UIColor colorWithRed:0.000f green:0.000f blue:0.000f alpha:1.000f],
 [UIColor colorWithRed:0.569f green:0.835f blue:0.859f alpha:1.000f],
 [UIColor colorWithRed:1.000f green:1.000f blue:1.000f alpha:1.000f],
 [UIColor colorWithRed:0.502f green:0.502f blue:0.502f alpha:1.000f],

package/src/tokens/adeo/ios/StyleDictionaryColor.swift

@@ -366,12 +366,16 @@ public class StyleDictionaryColor {
     public static let colorSuccess700 = UIColor(red: 0.000, green: 0.412, blue: 0.008, alpha: 1)
     public static let colorSuccess800 = UIColor(red: 0.012, green: 0.314, blue: 0.063, alpha: 1)
     public static let colorSuccess900 = UIColor(red: 0.008, green: 0.212, blue: 0.094, alpha: 1)
-    public static let colorTabsActive = UIColor(red: 0.000, green: 0.498, blue: 0.549, alpha: 1)
+    public static let colorTabsActiveBackground = UIColor(red: 0.812, green: 0.824, blue: 0.847, alpha: 1)
     public static let colorTabsActiveDisabled = UIColor(red: 0.569, green: 0.835, blue: 0.859, alpha: 1)
+    public static let colorTabsActiveText = UIColor(red: 0.200, green: 0.200, blue: 0.200, alpha: 1)
     public static let colorTabsBackground = UIColor(red: 1.000, green: 1.000, blue: 1.000, alpha: 1)
-    public static let colorTabsDefault = UIColor(red: 0.098, green: 0.098, blue: 0.098, alpha: 1)
-    public static let colorTabsDisabled = UIColor(red: 0.400, green: 0.400, blue: 0.400, alpha: 1)
+    public static let colorTabsDefault = UIColor(red: 0.400, green: 0.400, blue: 0.400, alpha: 1)
+    public static let colorTabsDisabledBackground = UIColor(red: 0.800, green: 0.800, blue: 0.800, alpha: 1)
+    public static let colorTabsElementBackground = UIColor(red: 0.933, green: 0.937, blue: 0.945, alpha: 1)
     public static let colorTabsHover = UIColor(red: 0.000, green: 0.306, blue: 0.341, alpha: 1)
+    public static let colorTabsSelectedBorder = UIColor(red: 0.000, green: 0.000, blue: 0.000, alpha: 1)
+    public static let colorTabsSelectedText = UIColor(red: 0.000, green: 0.000, blue: 0.000, alpha: 1)
     public static let colorTabsShadow = UIColor(red: 0.000, green: 0.000, blue: 0.000, alpha: 1)
     public static let colorTagLinkDarkActiveBackground = UIColor(red: 0.302, green: 0.302, blue: 0.302, alpha: 1)
     public static let colorTagLinkDarkBackground = UIColor(red: 0.098, green: 0.098, blue: 0.098, alpha: 1)

package/src/tokens/adeo/js/tokens.js

@@ -363,10 +363,14 @@ export const ColorStepperIcon = "#00919f";
 export const ColorStepperTitle = "#00919f";
 export const ColorTabsBackground = "#ffffff";
 export const ColorTabsShadow = "#000000";
-export const ColorTabsDefault = "#191919";
+export const ColorTabsDefault = "#666666";
+export const ColorTabsElementBackground = "#eeeff1";
 export const ColorTabsHover = "#004e57";
-export const ColorTabsDisabled = "#666666";
-export const ColorTabsActive = "#007f8c";
+export const ColorTabsDisabledBackground = "#cccccc";
+export const ColorTabsActiveBackground = "#cfd2d8";
+export const ColorTabsActiveText = "#333333";
+export const ColorTabsSelectedBorder = "#000000";
+export const ColorTabsSelectedText = "#000000";
 export const ColorTabsActiveDisabled = "#91d5db";
 export const ColorTagTextLightBackground = "#ffffff";
 export const ColorTagTextLightBorder = "#808080";

package/src/tokens/adeo/js/tokensObject.js

@@ -7739,11 +7739,11 @@ module.exports = {
         ]
       },
       "default": {
-        "value": "#191919",
+        "value": "#666666",
         "filePath": "node_modules/@mozaic-ds/tokens/properties/color/tabs.json",
         "isSource": true,
         "original": {
-          "value": "{color.font.darker.value}"
+          "value": "{color.font.light.value}"
         },
         "name": "ColorTabsDefault",
         "attributes": {
@@ -7757,6 +7757,29 @@ module.exports = {
           "default"
         ]
       },
+      "element": {
+        "background": {
+          "value": "#eeeff1",
+          "filePath": "node_modules/@mozaic-ds/tokens/properties/color/tabs.json",
+          "isSource": true,
+          "original": {
+            "value": "{color.primary-02.100.value}"
+          },
+          "name": "ColorTabsElementBackground",
+          "attributes": {
+            "category": "color",
+            "type": "tabs",
+            "item": "element",
+            "subitem": "background"
+          },
+          "path": [
+            "color",
+            "tabs",
+            "element",
+            "background"
+          ]
+        }
+      },
       "hover": {
         "value": "#004e57",
         "filePath": "node_modules/@mozaic-ds/tokens/properties/color/tabs.json",
@@ -7777,42 +7800,115 @@ module.exports = {
         ]
       },
       "disabled": {
-        "value": "#666666",
-        "filePath": "node_modules/@mozaic-ds/tokens/properties/color/tabs.json",
-        "isSource": true,
-        "original": {
-          "value": "{color.font.light.value}"
-        },
-        "name": "ColorTabsDisabled",
-        "attributes": {
-          "category": "color",
-          "type": "tabs",
-          "item": "disabled"
-        },
-        "path": [
-          "color",
-          "tabs",
-          "disabled"
-        ]
+        "background": {
+          "value": "#cccccc",
+          "filePath": "node_modules/@mozaic-ds/tokens/properties/color/tabs.json",
+          "isSource": true,
+          "original": {
+            "value": "{color.grey.200.value}"
+          },
+          "name": "ColorTabsDisabledBackground",
+          "attributes": {
+            "category": "color",
+            "type": "tabs",
+            "item": "disabled",
+            "subitem": "background"
+          },
+          "path": [
+            "color",
+            "tabs",
+            "disabled",
+            "background"
+          ]
+        }
       },
       "active": {
-        "value": "#007f8c",
-        "filePath": "node_modules/@mozaic-ds/tokens/properties/color/tabs.json",
-        "isSource": true,
-        "original": {
-          "value": "{color.font.primary-01.value}"
+        "background": {
+          "value": "#cfd2d8",
+          "filePath": "node_modules/@mozaic-ds/tokens/properties/color/tabs.json",
+          "isSource": true,
+          "original": {
+            "value": "{color.primary-02.200.value}"
+          },
+          "name": "ColorTabsActiveBackground",
+          "attributes": {
+            "category": "color",
+            "type": "tabs",
+            "item": "active",
+            "subitem": "background"
+          },
+          "path": [
+            "color",
+            "tabs",
+            "active",
+            "background"
+          ]
         },
-        "name": "ColorTabsActive",
-        "attributes": {
-          "category": "color",
-          "type": "tabs",
-          "item": "active"
+        "text": {
+          "value": "#333333",
+          "filePath": "node_modules/@mozaic-ds/tokens/properties/color/tabs.json",
+          "isSource": true,
+          "original": {
+            "value": "{color.font.dark.value}"
+          },
+          "name": "ColorTabsActiveText",
+          "attributes": {
+            "category": "color",
+            "type": "tabs",
+            "item": "active",
+            "subitem": "text"
+          },
+          "path": [
+            "color",
+            "tabs",
+            "active",
+            "text"
+          ]
+        }
+      },
+      "selected": {
+        "border": {
+          "value": "#000000",
+          "filePath": "node_modules/@mozaic-ds/tokens/properties/color/tabs.json",
+          "isSource": true,
+          "original": {
+            "value": "{color.grey.999.value}"
+          },
+          "name": "ColorTabsSelectedBorder",
+          "attributes": {
+            "category": "color",
+            "type": "tabs",
+            "item": "selected",
+            "subitem": "border"
+          },
+          "path": [
+            "color",
+            "tabs",
+            "selected",
+            "border"
+          ]
         },
-        "path": [
-          "color",
-          "tabs",
-          "active"
-        ]
+        "text": {
+          "value": "#000000",
+          "filePath": "node_modules/@mozaic-ds/tokens/properties/color/tabs.json",
+          "isSource": true,
+          "original": {
+            "value": "{color.font.darkest.value}"
+          },
+          "name": "ColorTabsSelectedText",
+          "attributes": {
+            "category": "color",
+            "type": "tabs",
+            "item": "selected",
+            "subitem": "text"
+          },
+          "path": [
+            "color",
+            "tabs",
+            "selected",
+            "text"
+          ]
+        }
       },
       "active-disabled": {
         "value": "#91d5db",

package/src/tokens/adeo/scss/_tokens.scss

@@ -364,10 +364,14 @@ $color-stepper-icon: #00919f !default;
 $color-stepper-title: #00919f !default;
 $color-tabs-background: #ffffff !default;
 $color-tabs-shadow: #000000 !default;
-$color-tabs-default: #191919 !default;
+$color-tabs-default: #666666 !default;
+$color-tabs-element-background: #eeeff1 !default;
 $color-tabs-hover: #004e57 !default;
-$color-tabs-disabled: #666666 !default;
-$color-tabs-active: #007f8c !default;
+$color-tabs-disabled-background: #cccccc !default;
+$color-tabs-active-background: #cfd2d8 !default;
+$color-tabs-active-text: #333333 !default;
+$color-tabs-selected-border: #000000 !default;
+$color-tabs-selected-text: #000000 !default;
 $color-tabs-active-disabled: #91d5db !default;
 $color-tag-text-light-background: #ffffff !default;
 $color-tag-text-light-border: #808080 !default;
@@ -1199,9 +1203,21 @@ $tokens: (
       'background': $color-tabs-background,
       'shadow': $color-tabs-shadow,
       'default': $color-tabs-default,
+      'element': (
+        'background': $color-tabs-element-background
+      ),
       'hover': $color-tabs-hover,
-      'disabled': $color-tabs-disabled,
-      'active': $color-tabs-active,
+      'disabled': (
+        'background': $color-tabs-disabled-background
+      ),
+      'active': (
+        'background': $color-tabs-active-background,
+        'text': $color-tabs-active-text
+      ),
+      'selected': (
+        'border': $color-tabs-selected-border,
+        'text': $color-tabs-selected-text
+      ),
       'active-disabled': $color-tabs-active-disabled
     ),
     'tag': (