feat: CProgress: add size prop

- deprecated height prop - display warning message when it is used,
- correct shared props,
- update test and typings
- cleanup

Author: woothu

src/components/index.d.ts

@@ -446,8 +446,7 @@ export declare class CPagination extends Vue {
   responsive?: boolean
 }
 
-export declare class CProgress extends Vue {
-  height?: string
+export declare class CProgressBar extends Vue {
   color?: string
   striped?: boolean
   animated?: boolean
@@ -458,7 +457,11 @@ export declare class CProgress extends Vue {
   value?: number
 }
 
-export declare class CProgressBar extends CProgress {}
+export declare class CProgress extends CProgressBar {
+  height?: string
+  size?: string
+}
+
 
 type ContentFlat = [NodeFlat]
 declare interface NodeFlat {

src/components/progress/CProgress.vue

@@ -1,5 +1,8 @@
 <template>
-  <div class="progress" :style="{ height }">
+  <div 
+    :class="['progress', size && `progress-${size}`]" 
+    :style="{ height }"
+  >
     <slot>
       <CProgressBar :value="value"/>
     </slot>
@@ -8,12 +11,27 @@
 
 <script>
 import CProgressBar from './CProgressBar'
-import props from './progress-props'
+import shared from './shared-props'
+
+const props = {
+  ...shared,
+  height: String,
+  size: {
+    type: String,
+    validator: val => ['', 'xs', 'sm'].includes(val)
+  },
+}
 
 export default {
   name:'CProgress',
   components: { CProgressBar },
   props,
+  mounted () {
+    /* istanbul ignore next */ 
+    if (this.height && process && process.env && process.env.NODE_ENV === 'development') {
+      console.error("CProgress component: 'height' prop is deprecated and will be removed in the next version. Use 'size' prop instead or pass custom height in 'style' attribute.")
+    }
+  },
   provide () {
     const progress = {}
     Object.defineProperty(progress, 'props', {

src/components/progress/CProgressBar.vue

@@ -12,28 +12,26 @@
 </template>
 
 <script>
-import props from './progress-props'
+import props from './shared-props'
+
 export default {
   name: 'CProgressBar',
   props,
   inject: {
     progress: {
-      default: undefined
+      default: { props: {} }
     }
   },
   computed: {
     directlyDeclaredProps () {
       return Object.keys(this.$options.propsData)
     },
-    injectedProps () {
-      return this.progress && this.progress.props ? this.progress.props : {}
-    },
     props () {
       return Object.keys(props).reduce((computedProps, key) => {
         const propIsDirectlyDeclared = this.directlyDeclaredProps.includes(key)
-        const parentPropExists = this.injectedProps[key] !== undefined
-        const propIsInherited = parentPropExists && !propIsDirectlyDeclared
-        computedProps[key] = propIsInherited ? this.injectedProps[key] : this[key]
+        const parentPropExists = this.progress.props[key] !== undefined
+        const isInherited = parentPropExists && !propIsDirectlyDeclared
+        computedProps[key] = isInherited ? this.progress.props[key] : this[key]
         return computedProps
       }, {})
     },

src/components/progress/progress-props.js renamed to src/components/progress/shared-props.js

@@ -1,6 +1,4 @@
 export default {
-  height: String,
-  // These props can be inherited via the child CProgressBar(s)
   color: String,
   striped: Boolean,
   animated: Boolean,

src/components/progress/tests/CProgress.spec.js

@@ -6,7 +6,9 @@ const defaultWrapper = mount(Component)
 const customWrapper = mount(Component, {
   propsData: {
     color: 'black',
-    value: 20
+    value: 20,
+    size: 'sm',
+    height: '2rem'
   },
   attrs: {
     class: 'test'

src/components/progress/tests/__snapshots__/CProgress.spec.js.snap

@@ -20,6 +20,7 @@ exports[`CProgress renders correctly 1`] = `
 exports[`CProgress renders correctly 2`] = `
 <div
   class="test"
+  style="height: 2rem;"
 >
   <div
     aria-valuemax="100"