@carbon/vue 1.1.0 → 1.1.1

package/src/components/cv-file-uploader/cv-file-uploader.vue

@@ -1,13 +1,18 @@
 <template>
   <cv-form-item class="cv-file-uploader">
-    <strong class="bx--label">{{ label }}</strong>
+    <strong :class="componentsX ? 'bx--label' : 'bx--file--label'">
+      {{ label }}
+    </strong>
     <p class="bx--label-description">{{ helperText }}</p>
     <div class="bx--file" data-file>
       <label
         :for="uid"
-        class="bx--file-btn bx--btn bx--btn--secondary"
+        class="bx--file--btn bx--btn bx--btn--primary bx--btn--sm"
         role="button"
         tabindex="0"
+        @keydown.enter.prevent="onShow()"
+        @keydown.space.prevent
+        @keyup.space.prevent="onShow()"
         >{{ buttonLabel }}</label
       >
       <input
@@ -18,6 +23,8 @@
         data-file-uploader
         data-target="[data-file-container]"
         v-on="inputListeners"
+        ref="file-input"
+        tabindex="-1"
       />
       <div data-file-container class="bx--file-container">
         <div
@@ -32,10 +39,18 @@
               :data-for="uid"
               class="bx--file__state-container"
               :data-test="file.state"
-              wibble="banana"
             >
+              <cv-inline-loader
+                v-if="
+                  componentsX &&
+                    (file.state === 'uploading' || file.state === 'complete')
+                "
+                :active="file.state === 'uploading'"
+                loading-text
+                loaded-text
+              />
               <div
-                v-if="file.state === 'uploading'"
+                v-if="!componentsX && file.state === 'uploading'"
                 class="bx--loading"
                 tabindex="0"
                 style="width: 1rem; height: 1rem;"
@@ -45,7 +60,7 @@
                 </svg>
               </div>
               <svg
-                v-if="file.state === 'complete'"
+                v-if="!componentsX && file.state === 'complete'"
                 class="bx--file-complete"
                 fill-rule="evenodd"
                 height="16"
@@ -61,13 +76,32 @@
                 ></path>
               </svg>
               <svg
-                v-if="removable"
+                v-if="componentsX && removable"
                 class="bx--file-close"
-                fill-rule="evenodd"
                 role="button"
+                width="16"
+                height="16"
+                viewBox="0 0 16 16"
+                tabindex="0"
+                alt="Remove file"
+                arial-label="Remove file"
+                @click="remove(index)"
+                @keydown.enter.prevent="remove(index)"
+                @keydown.space.prevent
+                @keyup.space.prevent="remove(index)"
+              >
+                <path
+                  d="M12 4.7l-.7-.7L8 7.3 4.7 4l-.7.7L7.3 8 4 11.3l.7.7L8 8.7l3.3 3.3.7-.7L8.7 8z"
+                ></path>
+              </svg>
+              <svg
+                v-if="!componentsX && removable"
+                class="bx--file-close"
+                fill-rule="evenodd"
                 height="16"
                 width="16"
                 viewBox="0 0 16 16"
+                role="button"
                 tabindex="0"
                 alt="Remove file"
                 arial-label="Remove file"
@@ -92,6 +126,8 @@
 <script>
 import uidMixin from '../../mixins/uid-mixin';
 import CvFormItem from '../cv-form/cv-form-item';
+import { componentsX } from '../../_internal/_feature-flags';
+import CvInlineLoader from '../cv-inline-loader/cv-inline-loader';
 
 const CONSTS = {
   STATES: {
@@ -103,7 +139,7 @@ const CONSTS = {
 
 export default {
   name: 'CvFileUploader',
-  components: { CvFormItem },
+  components: { CvFormItem, CvInlineLoader },
   mixins: [uidMixin],
   inheritAttrs: false,
   props: {
@@ -124,6 +160,7 @@ export default {
   },
   data() {
     return {
+      componentsX,
       internalFiles: [],
     };
   },
@@ -165,6 +202,9 @@ export default {
       }
       this.$emit('change', this.internalFiles);
     },
+    onShow() {
+      this.$refs['file-input'].click();
+    },
   },
 };
 </script>

package/src/components/cv-inline-notification/cv-inline-notification.vue

@@ -1,14 +1,20 @@
 <template>
   <div
-    data-inline-notification
+    data-notification
     class="cv-inline-notification bx--inline-notification"
     :class="`bx--inline-notification--${kind.toLowerCase()}`"
     v-on="$listeners"
-    :aria-role="isAlert ? 'alert' : false"
+    :role="isAlert ? 'alert' : false"
     :aria-live="!isAlert ? 'polite' : false"
   >
     <div class="bx--inline-notification__details">
+      <component
+        v-if="componentsX"
+        :is="icon"
+        class="bx--inline-notification__icon"
+      />
       <cv-icon
+        v-else
         :href="`cv(${icon})`"
         class="bx--inline-notification__icon"
         width="16"
@@ -25,7 +31,9 @@
       class="bx--inline-notification__close-button"
       @click="$emit('close')"
     >
+      <Close16 v-if="componentsX" class="bx--inline-notification__close-icon" />
       <svg
+        v-else
         class="bx--inline-notification__close-icon"
         aria-label="close"
         width="10"
@@ -45,10 +53,20 @@
 <script>
 import notificationMixin from '../../mixins/notification-mixin';
 import CvIcon from '../cv-icon/_cv-icon';
+import { componentsX } from '../../_internal/_feature-flags';
+import ErrorFilled16 from '@carbon/icons-vue/lib/error--filled/16';
+import CheckmarkFilled16 from '@carbon/icons-vue/lib/checkmark--filled/16';
+import WarningAltFilled16 from '@carbon/icons-vue/lib/warning--filled/16';
+import Close16 from '@carbon/icons-vue/lib/close/16';
 
 export default {
   name: 'CvInlineNotification',
-  components: { CvIcon },
+  components: { CvIcon, Close16 },
+  data() {
+    return {
+      componentsX,
+    };
+  },
   mixins: [notificationMixin],
   props: {
     kind: {
@@ -61,13 +79,13 @@ export default {
     icon() {
       switch (this.kind) {
         case 'error':
-          return 'icon--error--solid';
+          return componentsX ? ErrorFilled16 : 'icon--error--solid';
         case 'warning':
-          return 'icon--warning--solid';
+          return componentsX ? WarningAltFilled16 : 'icon--warning--solid';
         case 'success':
-          return 'icon--checkmark--solid';
+          return componentsX ? CheckmarkFilled16 : 'icon--checkmark--solid';
         default:
-          return 'icon--info--solid';
+          return componentsX ? null : 'icon--info--solid';
       }
     },
   },

package/src/components/cv-loading/cv-loading.vue

@@ -11,13 +11,29 @@
     >
       <svg class="bx--loading__svg" viewBox="-75 -75 150 150">
         <title>Loading</title>
-        <circle cx="0" cy="0" r="37.5"></circle>
+        <circle
+          v-if="componentsX && small"
+          class="bx--loading__background"
+          cx="0"
+          cy="0"
+          r="37.5"
+        ></circle>
+        <circle
+          :class="{
+            'bx--loading__stroke': componentsX,
+          }"
+          cx="0"
+          cy="0"
+          r="37.5"
+        ></circle>
       </svg>
     </div>
   </div>
 </template>
 
 <script>
+import { componentsX } from '../../_internal/_feature-flags';
+
 export default {
   name: 'CvLoading',
   props: {
@@ -36,6 +52,7 @@ export default {
   },
   data() {
     return {
+      componentsX,
       stopped: false,
     };
   },

package/src/components/cv-modal/cv-modal.vue

@@ -27,7 +27,9 @@
           <slot name="title">Modal Title</slot>
         </h2>
         <button class="bx--modal-close" type="button" @click="hide" ref="close">
+          <Close16 v-if="componentsX" class="bx--modal-close__icon" />
           <cv-icon
+            v-else
             class="bx--modal-close__icon"
             href="cv(icon--close)"
             height="10px"
@@ -36,7 +38,7 @@
         </button>
       </div>
 
-      <div class="bx--modal-content">
+      <div class="bx--modal-content" ref="content">
         <slot name="content">
           <p>
             Passive modal notifications should only appear if there is an action
@@ -81,6 +83,8 @@
 import CvButton from '../cv-button/cv-button';
 import CvIcon from '../cv-icon/_cv-icon';
 import uidMixin from '../../mixins/uid-mixin';
+import Close16 from '@carbon/icons-vue/lib/close//16';
+import { componentsX } from '../../_internal/_feature-flags';
 
 export default {
   name: 'CvModal',
@@ -88,6 +92,7 @@ export default {
   components: {
     CvButton,
     CvIcon,
+    Close16,
   },
   props: {
     kind: {
@@ -99,6 +104,7 @@ export default {
   },
   data() {
     return {
+      componentsX,
       dataVisible: false,
     };
   },
@@ -119,14 +125,14 @@ export default {
   computed: {
     primaryKind() {
       if (this.kind === 'danger') {
-        return 'danger--primary';
+        return componentsX ? 'danger' : 'danger--primary';
       } else {
         return 'primary';
       }
     },
     secondaryKind() {
       if (this.kind === 'danger') {
-        return 'tertiary';
+        return componentsX ? 'secondary' : 'tertiary';
       } else {
         return 'secondary';
       }
@@ -149,7 +155,12 @@ export default {
       this.$refs.close.focus();
     },
     onShown() {
-      if (this.$slots['primary-button']) {
+      const focusEl = this.$refs.content.querySelector(
+        '[data-modal-primary-focus]'
+      );
+      if (focusEl) {
+        focusEl.focus();
+      } else if (this.$slots['primary-button']) {
         this.$refs.primary.$el.focus();
       } else if (this.$slots['secondary-button']) {
         this.$refs.secondary.$el.focus();

package/src/components/cv-number-input/cv-number-input.vue

@@ -15,7 +15,8 @@
           @click="doUp"
           type="button"
         >
-          <svg width="10" height="5" viewBox="0 0 10 5">
+          <CaretUpGlyph v-if="componentsX" />
+          <svg v-else width="10" height="5" viewBox="0 0 10 5">
             <path d="M0 5L5 .002 10 5z" fill-rule="evenodd"></path>
           </svg>
         </button>
@@ -24,7 +25,8 @@
           @click="doDown"
           type="button"
         >
-          <svg width="10" height="5" viewBox="0 0 10 5">
+          <CaretDownGlyph v-if="componentsX" />
+          <svg v-else width="10" height="5" viewBox="0 0 10 5">
             <path d="M0 0l5 4.998L10 0z" fill-rule="evenodd"></path>
           </svg>
         </button>
@@ -50,10 +52,14 @@
 <script>
 import uidMixin from '../../mixins/uid-mixin';
 import themeMixin from '../../mixins/theme-mixin';
+import { componentsX } from '../../_internal/_feature-flags';
+import CaretDownGlyph from '@carbon/icons-vue/lib/caret--down/index';
+import CaretUpGlyph from '@carbon/icons-vue/lib/caret--up/index';
 
 export default {
   name: 'CvNumberInput',
   mixins: [uidMixin, themeMixin],
+  components: { CaretDownGlyph, CaretUpGlyph },
   inheritAttrs: false,
   props: {
     helperText: { type: String, default: null },
@@ -75,6 +81,7 @@ export default {
   },
   data() {
     return {
+      componentsX,
       internalValue: this.value,
     };
   },

package/src/components/cv-tabs/cv-tabs.vue

@@ -8,16 +8,18 @@
       @keydown.right.prevent="moveRight"
       @keydown.left.prevent="moveLeft"
     >
-      <div class="bx--tabs-trigger" tabindex="0">
-        <a
-          href="javascript:void(0)"
-          class="bx--tabs-trigger-text"
-          tabindex="-1"
-        ></a>
-        <svg width="10" height="5" viewBox="0 0 10 5">
-          <path d="M0 0l5 4.998L10 0z" fill-rule="evenodd"></path>
-        </svg>
-      </div>
+      <cv-dropdown
+        class="bx--tabs-trigger"
+        :value="`${selectedIndex}`"
+        @change="onDropChange"
+      >
+        <cv-dropdown-item
+          v-for="(tab, index) in tabs"
+          :key="`drop-${index}`"
+          :value="`${index}`"
+          >{{ tab.label }}</cv-dropdown-item
+        >
+      </cv-dropdown>
       <ul class="bx--tabs__nav bx--tabs__nav--hidden" role="tablist">
         <li
           v-for="(tab, index) in tabs"
@@ -42,13 +44,19 @@
         </li>
       </ul>
     </nav>
-    <div class="cv-tabs__panels"><slot></slot></div>
+    <div class="cv-tabs__panels">
+      <slot></slot>
+    </div>
   </div>
 </template>
 
 <script>
+import CvDropdown from '../cv-dropdown/cv-dropdown';
+import CvDropdownItem from '../cv-dropdown/cv-dropdown-item';
+
 export default {
   name: 'CvTabs',
+  components: { CvDropdown, CvDropdownItem },
   data() {
     return {
       tabs: [],
@@ -64,6 +72,9 @@ export default {
     this.$on('cv:selected', srcComponent => this.onCvSelected(srcComponent));
   },
   methods: {
+    onDropChange(val) {
+      this.onTabClick(parseInt(val));
+    },
     onCvMount(srcComponent) {
       this.tabs.push(srcComponent);
       this.checkSelected();

package/src/components/cv-toast-notification/cv-toast-notification.vue

@@ -7,6 +7,11 @@
     :aria-role="isAlert ? 'alert' : false"
     :aria-live="!isAlert ? 'polite' : false"
   >
+    <component
+      v-if="componentsX"
+      :is="icon"
+      class="bx--toast-notification__icon"
+    />
     <div class="bx--toast-notification__details">
       <h3 class="bx--toast-notification__title">{{ title }}</h3>
       <p class="bx--toast-notification__subtitle">{{ subTitle }}</p>
@@ -18,7 +23,9 @@
       class="bx--toast-notification__close-button"
       @click="$emit('close')"
     >
+      <Close16 v-if="componentsX" class="bx--toast-notification__close-icon" />
       <svg
+        v-else
         class="bx--toast-notification-icon"
         aria-label="close"
         width="10"
@@ -37,9 +44,20 @@
 
 <script>
 import notificationMixin from '../../mixins/notification-mixin';
+import { componentsX } from '../../_internal/_feature-flags';
+import ErrorFilled16 from '@carbon/icons-vue/lib/error--filled/16';
+import CheckmarkFilled16 from '@carbon/icons-vue/lib/checkmark--filled/16';
+import WarningAltFilled16 from '@carbon/icons-vue/lib/warning--alt--filled/16';
+import Close16 from '@carbon/icons-vue/lib/close/16';
 
 export default {
   name: 'CvToastNotification',
+  components: { Close16 },
+  data() {
+    return {
+      componentsX,
+    };
+  },
   mixins: [notificationMixin],
   props: {
     caption: String,
@@ -49,6 +67,23 @@ export default {
       validator: val => ['error', 'info', 'warning', 'success'].includes(val),
     },
   },
+  computed: {
+    icon() {
+      if (this.componentsX) {
+        switch (this.kind) {
+          case 'error':
+            return ErrorFilled16;
+          case 'warning':
+            return WarningAltFilled16;
+          case 'success':
+            return CheckmarkFilled16;
+          default:
+            return null;
+        }
+      }
+      return null;
+    },
+  },
 };
 </script>