Update to carbon10 3 0 (#436)

* chore: update to carbon 10.3.0
* chore: run yarn format

package.json

@@ -31,25 +31,25 @@
     "@ascendancyy/vue-cli-plugin-stylelint": "^1.1.2",
     "@commitlint/cli": "^7.6.1",
     "@commitlint/config-conventional": "^7.6.0",
-    "@vue/cli-plugin-babel": "^3.7.0",
-    "@vue/cli-plugin-eslint": "^3.7.0",
-    "@vue/cli-plugin-unit-jest": "^3.7.0",
-    "@vue/cli-service": "^3.7.0",
+    "@vue/cli-plugin-babel": "^3.8.0",
+    "@vue/cli-plugin-eslint": "^3.8.0",
+    "@vue/cli-plugin-unit-jest": "^3.8.0",
+    "@vue/cli-service": "^3.8.0",
     "@vue/eslint-config-prettier": "^4.0.1",
     "@vue/test-utils": "^1.0.0-beta.20",
     "babel-eslint": "^10.0.1",
     "eslint": "^5.16.0",
     "eslint-plugin-vue": "^5.2.2",
-    "husky": "^2.3.0",
+    "husky": "^2.4.0",
     "jest": "^24.8.0",
     "jest-config": "^24.8.0",
     "jest-runtime": "^24.8.0",
     "jest-serializer-vue": "^2.0.2",
     "jest-transform-stub": "^2.0.0",
     "lerna": "^3.14.1",
-    "lint-staged": "^8.1.7",
+    "lint-staged": "^8.2.0",
     "node-sass": "^4.12.0",
-    "prettier": "^1.17.1",
+    "prettier": "^1.18.0",
     "sass-loader": "^7.1.0",
     "stylelint": "^10.0.1",
     "stylelint-config-property-sort-order-smacss": "^4.0.2",

packages/core/package.json

@@ -62,9 +62,9 @@
   },
   "sideEffects": true,
   "dependencies": {
-    "@carbon/icons-vue": "10.3.0-rc.2",
-    "carbon-components": "10.3.0-rc.2",
-    "flatpickr": "4.5.7",
+    "@carbon/icons-vue": "10.3.0",
+    "carbon-components": "10.3.0",
+    "flatpickr": "4.6.1",
     "vue": "^2.6.10"
   },
   "devDependencies": {

packages/core/src/components/cv-ui-shell/cv-button-menu.vue

@@ -0,0 +1,66 @@
+<template>
+  <button
+    v-on="$listeners"
+    class="cv-button-menu bx--header__action"
+    :class="dataActive ? 'bx--header__action--active' : ''"
+    type="button"
+    aria-haspopup="true"
+    :aria-controls="ariaControls"
+    :aria-expanded="active"
+    @click="gaToggle"
+    @focusout="gaFocusout"
+  >
+    <slot />
+  </button>
+</template>
+
+<script>
+import uidMixin from '../../mixins/uid-mixin';
+
+export default {
+  name: 'CvButtonMenu',
+  mixins: [uidMixin],
+  props: {
+    active: Boolean,
+    ariaControls: { type: String, required: true },
+  },
+  mounted() {
+    this.$parent.$emit('cv:panel-control-mounted', this);
+  },
+  beforeDestroy() {
+    this.$parent.$emit('cv:panel-control-beforeDestroy', this);
+  },
+  data() {
+    return {
+      dataActive: this.active,
+    };
+  },
+  watch: {
+    expanded() {
+      if (this.active !== this.dataActive) {
+        this.gaToggle();
+      }
+    },
+  },
+  computed: {
+    internalActive: {
+      get() {
+        return this.dataActive;
+      },
+      set(val) {
+        // do not emit 'cv:panel-control-toggle'
+        this.dataActive = val;
+      },
+    },
+  },
+  methods: {
+    gaToggle() {
+      this.$el.focus();
+      this.$parent.$emit('cv:panel-control-toggle', this);
+    },
+    gaFocusout(ev) {
+      this.$parent.$emit('cv:panel-control-focusout', this, ev);
+    },
+  },
+};
+</script>

packages/core/src/components/cv-ui-shell/cv-header.vue

@@ -23,9 +23,7 @@ export default {
   },
   mounted() {
     console.warn(
-      `${
-        this.$vnode.componentOptions.Ctor.extendOptions.name
-      } - Under review. This component isn't quite ready. Hopefully no features will get broken but this cannot be guarenteed.`
+      `${this.$vnode.componentOptions.Ctor.extendOptions.name} - Under review. This component isn't quite ready. Hopefully no features will get broken but this cannot be guarenteed.`
     );
   },
   data() {

packages/core/yarn.lock

@@ -7,10 +7,10 @@
   resolved "https://registry.yarnpkg.com/@carbon/icon-helpers/-/icon-helpers-10.2.0.tgz#f58ab1d14b8b63d485d31e7d785d25057eac5409"
   integrity sha512-PAxu8KMuSrifF4VCW7N7bgu/QKG/Q4T9ojWUEqI0zKjTCkJnzEZTYgK1FrWAdE1uAdAwLlbPIjzIS/QzP15Uvw==
 
-"@carbon/[email protected]-rc.2":
-  version "10.3.0-rc.2"
-  resolved "https://registry.yarnpkg.com/@carbon/icons-vue/-/icons-vue-10.3.0-rc.2.tgz#1d0fb8afbfc3c0019960c0ec199257680dac33e9"
-  integrity sha512-6fWtsyNLc+uC4/IcucO/CvxvPf6ES/QmxbG7QkprdIg9/Oe4GDTjcv1Pj1KTSbnJGLJ25q0LXlKs7TOLtNoINA==
+"@carbon/[email protected]":
+  version "10.3.0"
+  resolved "https://registry.yarnpkg.com/@carbon/icons-vue/-/icons-vue-10.3.0.tgz#537e707c679bd69f8b61ce97691b742d6dfaa643"
+  integrity sha512-tZJ2ZsgGi6jfX65F6LDjha3ttkrGp7UJdqapGuPuHY+kooDPr9HVlabp3BoAJXA2w8t2XK3zqSdk1lJu/txg/A==
   dependencies:
     "@carbon/icon-helpers" "10.2.0"
 
@@ -1043,10 +1043,10 @@ caniuse-lite@^1.0.30000955, caniuse-lite@^1.0.30000957:
   resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30000960.tgz#ec48297037e5607f582f246ae7b12bee66a78999"
   integrity sha512-7nK5qs17icQaX6V3/RYrJkOsZyRNnroA4+ZwxaKJzIKy+crIy0Mz5CBlLySd2SNV+4nbUZeqeNfiaEieUBu3aA==
 
-[email protected]-rc.2:
-  version "10.3.0-rc.2"
-  resolved "https://registry.yarnpkg.com/carbon-components/-/carbon-components-10.3.0-rc.2.tgz#b3a10eb5fa3b62ef0e2350f32247667e315c41ca"
-  integrity sha512-8hwIk8ffFKUFr4eTiibgq8CV3H9sV2hKxP2WEcu3Kw2LZmcoC3uA5X57oLnNf39OQYV5RPZzCzc5Lhb3FsKIfQ==
+[email protected]:
+  version "10.3.0"
+  resolved "https://registry.yarnpkg.com/carbon-components/-/carbon-components-10.3.0.tgz#a2a77b97d1afb8ac5379bbf3584e2643c3f09b7e"
+  integrity sha512-Azs+jaxDKsRmI+zmrWwahDkcfZLD1/rPSqek03UeDkhQsd/i/dOeeE4DnjMwhLGuDj/lvfeKC3eLks/cqyUKwg==
   dependencies:
     carbon-icons "^7.0.7"
     flatpickr "4.5.7"
@@ -2480,6 +2480,11 @@ [email protected]:
   resolved "https://registry.yarnpkg.com/flatpickr/-/flatpickr-4.5.7.tgz#6efc0d93c65547aa77294205c67830ebabe3565c"
   integrity sha512-JqPfihUc9A/j9QAsh6otoARmMyUauPE17vRBEG+ThJwbl8zAq4ssGpxlPK3wWM/i8EFxkHg9UuVo0ds7XluKxw==
 
+[email protected]:
+  version "4.6.1"
+  resolved "https://registry.yarnpkg.com/flatpickr/-/flatpickr-4.6.1.tgz#9eb498ab805dd27f5ae02e1ac6ac6c099ce45e94"
+  integrity sha512-3ULSxbXmcMIRzer/2jLNweoqHpwDvsjEawO2FUd9UFR8uPwLM+LruZcPDpuZStcEgbQKhuFOfXo4nYdGladSNw==
+
 flush-write-stream@^1.0.0:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/flush-write-stream/-/flush-write-stream-1.1.1.tgz#8dd7d873a1babc207d94ead0c2e0e44276ebf2e8"

packages/data-viz/src/data-viz/cv-bar-graph/cv-bar-graph.vue

@@ -293,9 +293,7 @@ export default {
 
   mounted() {
     console.warn(
-      `${
-        this.$vnode.componentOptions.Ctor.extendOptions.name
-      } - Under review. This component isn't quite ready. Hopefully no features will get broken but this cannot be guarenteed.`
+      `${this.$vnode.componentOptions.Ctor.extendOptions.name} - Under review. This component isn't quite ready. Hopefully no features will get broken but this cannot be guarenteed.`
     );
     this.updateGraph();
   },

packages/data-viz/src/data-viz/cv-gauge/cv-gauge.vue

@@ -139,9 +139,7 @@ export default {
   },
   mounted() {
     console.warn(
-      `${
-        this.$vnode.componentOptions.Ctor.extendOptions.name
-      } - Under review. This component isn't quite ready. Hopefully no features will get broken but this cannot be guarenteed.`
+      `${this.$vnode.componentOptions.Ctor.extendOptions.name} - Under review. This component isn't quite ready. Hopefully no features will get broken but this cannot be guarenteed.`
     );
 
     const svg = d3

packages/data-viz/src/data-viz/cv-pie-chart/cv-pie-chart.vue

@@ -132,9 +132,7 @@ export default {
   },
   mounted() {
     console.warn(
-      `${
-        this.$vnode.componentOptions.Ctor.extendOptions.name
-      } - Under review. This component isn't quite ready. Hopefully no features will get broken but this cannot be guarenteed.`
+      `${this.$vnode.componentOptions.Ctor.extendOptions.name} - Under review. This component isn't quite ready. Hopefully no features will get broken but this cannot be guarenteed.`
     );
 
     this.g = d3.select('g').attr('transform', `translate(${this.width / 2}, ${this.height / 2})`);

storybook/_storybook/utils/knobs-helper.js

@@ -62,9 +62,9 @@ const parsePreKnobs = (preKnobs, includes, excludes, variantExtra) => {
             break;
           case 'slot':
             if (preKnob.slot.name && preKnob.slot.name.length) {
-              knobs.group[preKnob.group] += `${prefix}<template slot="${preKnob.slot.name}">${
-                preKnob.slot.value
-              }</template>`;
+              knobs.group[
+                preKnob.group
+              ] += `${prefix}<template slot="${preKnob.slot.name}">${preKnob.slot.value}</template>`;
             } else {
               knobs.group[preKnob.group] += `${prefix}${preKnob.slot.value}`;
             }

storybook/package.json

@@ -8,20 +8,20 @@
     "build": "build-storybook"
   },
   "dependencies": {
-    "@carbon/icons-vue": "10.3.0-rc.2",
-    "carbon-components": "10.3.0-rc.2",
+    "@carbon/icons-vue": "10.3.0",
+    "carbon-components": "10.3.0",
     "vue": "^2.6.10"
   },
   "devDependencies": {
-    "@babel/core": "^7.4.0",
+    "@babel/core": "^7.4.5",
     "@carbon/vue": "^2.5.0-rc.0",
-    "@storybook/addon-actions": "^5.0.3",
-    "@storybook/addon-knobs": "^5.0.3",
-    "@storybook/addon-notes": "^5.0.3",
-    "@storybook/addon-options": "^5.0.3",
-    "@storybook/addon-storysource": "^5.0.3",
-    "@storybook/vue": "^5.0.3",
-    "autoprefixer": "^9.4.10",
+    "@storybook/addon-actions": "^5.1.3",
+    "@storybook/addon-knobs": "^5.1.3",
+    "@storybook/addon-notes": "^5.1.3",
+    "@storybook/addon-options": "^5.1.3",
+    "@storybook/addon-storysource": "^5.1.3",
+    "@storybook/vue": "^5.1.3",
+    "autoprefixer": "^9.6.0",
     "babel-loader": "^7.0.0",
     "babel-plugin-transform-object-from-destructuring": "^1.0.3",
     "babel-plugin-transform-object-rest-spread": "^6.26.0",

storybook/stories/cv-content-switcher-story.js

@@ -100,15 +100,9 @@ for (const story of storySet) {
 
       const templateString = `
   <cv-content-switcher${settings.group.attr}>
-    <cv-content-switcher-button owner-id="csb-1" :selected="isSelected(0)" ${
-      settings.group.icon
-    }>Button Name 1</cv-content-switcher-button>
-    <cv-content-switcher-button owner-id="csb-2" :selected="isSelected(1)" ${
-      settings.group.icon
-    }>Button Name 2</cv-content-switcher-button>
-    <cv-content-switcher-button owner-id="csb-3" :selected="isSelected(2)" v-if="toggle3" ${settings.group.attr3t} ${
-        settings.group.icon
-      }>Button Name 3</cv-content-switcher-button>
+    <cv-content-switcher-button owner-id="csb-1" :selected="isSelected(0)" ${settings.group.icon}>Button Name 1</cv-content-switcher-button>
+    <cv-content-switcher-button owner-id="csb-2" :selected="isSelected(1)" ${settings.group.icon}>Button Name 2</cv-content-switcher-button>
+    <cv-content-switcher-button owner-id="csb-3" :selected="isSelected(2)" v-if="toggle3" ${settings.group.attr3t} ${settings.group.icon}>Button Name 3</cv-content-switcher-button>
   </cv-content-switcher>
 
   <section style="margin: 10px 0;">
@@ -179,15 +173,9 @@ for (const story of storySet) {
 
       const templateString = `
   <cv-content-switcher${settings.group.attr}>
-    <cv-content-switcher-button content-selector=".content-1" :selected="isSelected(0)" ${
-      settings.group.icon
-    }>Button Name 1</cv-content-switcher-button>
-    <cv-content-switcher-button content-selector=".content-2" :selected="isSelected(1)" ${
-      settings.group.icon
-    }>Button Name 2</cv-content-switcher-button>
-    <cv-content-switcher-button content-selector=".content-3" :selected="isSelected(2)" v-if="toggle3" ${
-      settings.group.icon
-    }>Button Name 3</cv-content-switcher-button>
+    <cv-content-switcher-button content-selector=".content-1" :selected="isSelected(0)" ${settings.group.icon}>Button Name 1</cv-content-switcher-button>
+    <cv-content-switcher-button content-selector=".content-2" :selected="isSelected(1)" ${settings.group.icon}>Button Name 2</cv-content-switcher-button>
+    <cv-content-switcher-button content-selector=".content-3" :selected="isSelected(2)" v-if="toggle3" ${settings.group.icon}>Button Name 3</cv-content-switcher-button>
   </cv-content-switcher>
 
   <section style="margin: 10px 0;">

storybook/stories/cv-header-story.js

@@ -167,9 +167,7 @@ for (const story of storySet) {
       const settings = story.knobs();
 
       // ----------------------------------------------------------------
-      const templateString = `<cv-header aria-label="Carbon header">${settings.group.headerName}${
-        settings.group.headerNav
-      }${settings.group.headerActions}
+      const templateString = `<cv-header aria-label="Carbon header">${settings.group.headerName}${settings.group.headerNav}${settings.group.headerActions}
   <template slot="right-panels" v-if="areRightPanels">
     ${settings.group.rightPanels}
   </template>