@vcita/design-system 0.2.2 → 0.2.3

package/dist/@vcita/design-system.ssr.js

@@ -2975,14 +2975,18 @@ var __vue_component__$f = /*#__PURE__*/normalizeComponent({
       }
     },
     currentStepName: function currentStepName() {
-      return this.steps[this.currentStep - 1] && this.steps[this.currentStep - 1].name;
+      var _this$steps;
+
+      return (_this$steps = this.steps[this.currentStep - 1]) === null || _this$steps === void 0 ? void 0 : _this$steps.name;
     },
     nextStepName: function nextStepName() {
+      var _this$steps$this$curr;
+
       if (this.currentStep >= this.numOfSteps) {
         return;
       }
 
-      return "".concat(this.$dst("ds.progress_circular.next"), " ").concat(this.steps[this.currentStep] && this.steps[this.currentStep].name);
+      return "".concat(this.$dst("ds.progress_circular.next"), " ").concat((_this$steps$this$curr = this.steps[this.currentStep]) === null || _this$steps$this$curr === void 0 ? void 0 : _this$steps$this$curr.name);
     },
     numOfSteps: function numOfSteps() {
       return this.steps.length;
@@ -3033,8 +3037,8 @@ var __vue_staticRenderFns__$e = [];
 
 var __vue_inject_styles__$e = function __vue_inject_styles__(inject) {
   if (!inject) return;
-  inject("data-v-744643fe_0", {
-    source: "[data-v-744643fe]:root{--primary-font-family:Montserrat;--font-size-xxx-small:9px;--font-size-xx-small:12px;--font-size-x-small:13px;--font-size-small:14px;--font-size-small2:15px;--font-size-medium:18px;--font-size-medium1:22px;--font-size-medium2:24px;--font-size-large:28px;--font-weight-medium:400;--font-weight-medium2:500;--font-weight-large:600;--font-weight-large2:700;--font-weight-xl:800;--size-value0:0px;--size-value1:4px;--size-value2:8px;--size-value3:12px;--size-value4:16px;--size-value5:20px;--size-value6:24px;--size-value7:28px;--size-value8:32px;--size-value9:36px;--size-value10:40px;--size-value11:44px;--size-value12:48px;--size-value13:52px;--size-value14:56px;--size-value15:60px;--size-value16:64px;--size-value17:68px;--size-value18:72px;--size-value19:76px;--size-value20:80px;--border-radius:6px;--modal-desktop-offset:-112px;--modal-bg-color:#ffffff;--modal-box-shadow:0px 7px 8px -4px rgba(0, 0, 0, 0.2),2px 13px 19px 2px rgba(0, 0, 0, 0.14),0px 5px 24px rgba(0, 0, 0, 0.12);--modal-border-radius:10px;--modal-width-small:384px;--modal-width-medium:576px;--modal-width-large:816px;--avatar-x-sm:24px;--avatar-sm:32px;--avatar-md:40px;--avatar-lg:48px;--gray-darken-5:#212121;--gray-darken-4:#616161;--gray-darken-3:#757575;--gray-darken-2:#999999;--gray-darken-1:#b3b3b3;--gray:#cccccc;--gray-lighten-1:#e0e0e0;--gray-lighten-2:#ededed;--gray-lighten-3:#f7f7f7;--gray-lighten-4:#fafafa;--neutral:#586E8C;--neutral-lighten-1:#D6DBE6;--neutral-lighten-2:#EAEDF2;--neutral-lighten-3:#F8F9FB;--red:#F2514A;--red-lighten-1:#F79792;--red-lighten-2:#FBCBC9;--red-lighten-3:#FDE8E7;--yellow:#FFC511;--yellow-lighten-1:#FFDC70;--yellow-lighten-2:#FFEDB8;--yellow-lighten-3:#FFF7E0;--green:#54D28C;--green-lighten-1:#98E4BA;--green-lighten-2:#CFF8E1;--green-lighten-3:#EAFCF2;--blue:#478FFF;--blue-lighten-1:#91BCFF;--blue-lighten-2:#C8DDFF;--blue-lighten-3:#E7F0FF;--orange:#FF8F00;--orange-lighten-1:#FCB965;--orange-lighten-2:#FAD9B0;--orange-lighten-3:#F9EBDA;--shadow-1:0px 1px 4px rgba(0, 0, 0, 0.11);--shadow-2:0px 2px 5px rgba(0, 0, 0, 0.1),0px 2px 2px rgba(0, 0, 0, 0.06),0px 3px 1px -2px rgba(0, 0, 0, 0.06);--shadow-3:0px 3px 2px rgba(0, 0, 0, 0.101961);--shadow-4:0px 1px 1px rgba(0, 0, 0, 0.06),0px 3px 8px rgba(0, 0, 0, 0.15);--shadow-5:0px 4px 18px rgba(0, 0, 0, 0.1);--shadow-6:0px 1px 10px rgba(0, 0, 0, 0.12),0px 4px 7px rgba(0, 0, 0, 0.14),0px 2px 4px -1px rgba(0, 0, 0, 0.2);--shadow-7:0px 3px 5px -1px rgba(0, 0, 0, 0.2),0px 6px 10px rgba(0, 0, 0, 0.14),0px 1px 18px rgba(0, 0, 0, 0.12);--shadow-8:0px 5px 7px 3px rgba(0, 0, 0, 0.26);--shadow-9:0px 7px 8px -4px rgba(0, 0, 0, 0.2),2px 13px 19px 2px rgba(0, 0, 0, 0.14),0px 5px 24px rgba(0, 0, 0, 0.12)}.vc-mobile-wizard-progress .titles-container[data-v-744643fe]{margin:var(--size-value0) var(--size-value4)}.vc-mobile-wizard-progress .titles-container .current-step[data-v-744643fe]{font-weight:var(--font-weight-large2);font-size:var(--font-size-small2)}.vc-mobile-wizard-progress .titles-container .next-step[data-v-744643fe]{font-size:var(--font-size-x-small);color:var(--gray-darken-4)}",
+  inject("data-v-47502eba_0", {
+    source: "[data-v-47502eba]:root{--primary-font-family:Montserrat;--font-size-xxx-small:9px;--font-size-xx-small:12px;--font-size-x-small:13px;--font-size-small:14px;--font-size-small2:15px;--font-size-medium:18px;--font-size-medium1:22px;--font-size-medium2:24px;--font-size-large:28px;--font-weight-medium:400;--font-weight-medium2:500;--font-weight-large:600;--font-weight-large2:700;--font-weight-xl:800;--size-value0:0px;--size-value1:4px;--size-value2:8px;--size-value3:12px;--size-value4:16px;--size-value5:20px;--size-value6:24px;--size-value7:28px;--size-value8:32px;--size-value9:36px;--size-value10:40px;--size-value11:44px;--size-value12:48px;--size-value13:52px;--size-value14:56px;--size-value15:60px;--size-value16:64px;--size-value17:68px;--size-value18:72px;--size-value19:76px;--size-value20:80px;--border-radius:6px;--modal-desktop-offset:-112px;--modal-bg-color:#ffffff;--modal-box-shadow:0px 7px 8px -4px rgba(0, 0, 0, 0.2),2px 13px 19px 2px rgba(0, 0, 0, 0.14),0px 5px 24px rgba(0, 0, 0, 0.12);--modal-border-radius:10px;--modal-width-small:384px;--modal-width-medium:576px;--modal-width-large:816px;--avatar-x-sm:24px;--avatar-sm:32px;--avatar-md:40px;--avatar-lg:48px;--gray-darken-5:#212121;--gray-darken-4:#616161;--gray-darken-3:#757575;--gray-darken-2:#999999;--gray-darken-1:#b3b3b3;--gray:#cccccc;--gray-lighten-1:#e0e0e0;--gray-lighten-2:#ededed;--gray-lighten-3:#f7f7f7;--gray-lighten-4:#fafafa;--neutral:#586E8C;--neutral-lighten-1:#D6DBE6;--neutral-lighten-2:#EAEDF2;--neutral-lighten-3:#F8F9FB;--red:#F2514A;--red-lighten-1:#F79792;--red-lighten-2:#FBCBC9;--red-lighten-3:#FDE8E7;--yellow:#FFC511;--yellow-lighten-1:#FFDC70;--yellow-lighten-2:#FFEDB8;--yellow-lighten-3:#FFF7E0;--green:#54D28C;--green-lighten-1:#98E4BA;--green-lighten-2:#CFF8E1;--green-lighten-3:#EAFCF2;--blue:#478FFF;--blue-lighten-1:#91BCFF;--blue-lighten-2:#C8DDFF;--blue-lighten-3:#E7F0FF;--orange:#FF8F00;--orange-lighten-1:#FCB965;--orange-lighten-2:#FAD9B0;--orange-lighten-3:#F9EBDA;--shadow-1:0px 1px 4px rgba(0, 0, 0, 0.11);--shadow-2:0px 2px 5px rgba(0, 0, 0, 0.1),0px 2px 2px rgba(0, 0, 0, 0.06),0px 3px 1px -2px rgba(0, 0, 0, 0.06);--shadow-3:0px 3px 2px rgba(0, 0, 0, 0.101961);--shadow-4:0px 1px 1px rgba(0, 0, 0, 0.06),0px 3px 8px rgba(0, 0, 0, 0.15);--shadow-5:0px 4px 18px rgba(0, 0, 0, 0.1);--shadow-6:0px 1px 10px rgba(0, 0, 0, 0.12),0px 4px 7px rgba(0, 0, 0, 0.14),0px 2px 4px -1px rgba(0, 0, 0, 0.2);--shadow-7:0px 3px 5px -1px rgba(0, 0, 0, 0.2),0px 6px 10px rgba(0, 0, 0, 0.14),0px 1px 18px rgba(0, 0, 0, 0.12);--shadow-8:0px 5px 7px 3px rgba(0, 0, 0, 0.26);--shadow-9:0px 7px 8px -4px rgba(0, 0, 0, 0.2),2px 13px 19px 2px rgba(0, 0, 0, 0.14),0px 5px 24px rgba(0, 0, 0, 0.12)}.vc-mobile-wizard-progress .titles-container[data-v-47502eba]{margin:var(--size-value0) var(--size-value4)}.vc-mobile-wizard-progress .titles-container .current-step[data-v-47502eba]{font-weight:var(--font-weight-large2);font-size:var(--font-size-small2)}.vc-mobile-wizard-progress .titles-container .next-step[data-v-47502eba]{font-size:var(--font-size-x-small);color:var(--gray-darken-4)}",
     map: undefined,
     media: undefined
   });
@@ -3042,10 +3046,10 @@ var __vue_inject_styles__$e = function __vue_inject_styles__(inject) {
 /* scoped */
 
 
-var __vue_scope_id__$e = "data-v-744643fe";
+var __vue_scope_id__$e = "data-v-47502eba";
 /* module identifier */
 
-var __vue_module_identifier__$e = "data-v-744643fe";
+var __vue_module_identifier__$e = "data-v-47502eba";
 /* functional template */
 
 var __vue_is_functional_template__$e = false;
@@ -3427,14 +3431,32 @@ var __vue_is_functional_template__$b = false;
 var __vue_component__$b = /*#__PURE__*/normalizeComponent({
   render: __vue_render__$b,
   staticRenderFns: __vue_staticRenderFns__$b
-}, __vue_inject_styles__$b, __vue_script__$b, __vue_scope_id__$b, __vue_is_functional_template__$b, __vue_module_identifier__$b, false, undefined, createInjectorSSR, undefined);var script$a = {
-  name: 'VcTextField',
+}, __vue_inject_styles__$b, __vue_script__$b, __vue_scope_id__$b, __vue_is_functional_template__$b, __vue_module_identifier__$b, false, undefined, createInjectorSSR, undefined);//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+var script$a = {
   components: {
-    VcLayout: __vue_component__$u,
-    VcButton: __vue_component__$w,
-    VcIcon: __vue_component__$x,
     VTextField: lib.VTextField
   },
+
+  name: 'VcTextField',
+
   props: {
     type: {
       type: String,
@@ -3443,44 +3465,36 @@ var __vue_component__$b = /*#__PURE__*/normalizeComponent({
         return ['text', 'number'].includes(prop);
       }
     },
-    label: {
+    dataQa: {
       type: String,
-      default: ''
+      default: 'vc-text-field'
     },
-    step: {
+    label: {
       type: String,
-      default: '1'
+      default: ''
     },
     value: {
       type: [Number, String],
       default: ''
     },
-    min: {
-      type: Number,
-      default: -Infinity
+    counter: {
+      type: [Number, Boolean],
+      default: false
     },
-    max: {
+    maxlength: {
       type: Number,
-      default: Infinity
+      default: 100
     },
     rules: {
       type: Array
     },
-    color: {
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    hint: {
       type: String,
-      default: 'Primary'
-    }
-  },
-  methods: {
-    updateValue: function updateValue(num) {
-      var currVal = parseFloat(this.value);
-      currVal = parseFloat((currVal + num).toPrecision(this.step.length + 1));
-
-      if (currVal < parseFloat(this.min) || currVal > parseFloat(this.max)) {
-        return;
-      }
-
-      this.$emit('input', currVal.toString());
+      default: ''
     }
   }
 };/* script */
@@ -3498,58 +3512,25 @@ var __vue_render__$a = function __vue_render__() {
     staticClass: "VcTextInput",
     attrs: {
       "dense": "",
+      "data-qa": _vm.dataQa,
       "label": _vm.label,
       "rules": _vm.rules,
+      "disabled": _vm.disabled,
       "type": _vm.type,
+      "error": _vm.counter && _vm.maxlength && _vm.value.length > _vm.maxlength,
       "value": _vm.value,
-      "color": _vm.color,
-      "step": _vm.step,
+      "hint": _vm.hint,
+      "counter": _vm.counter,
+      "maxlength": _vm.maxlength,
+      "persistent-hint": "",
       "hide-details": "auto"
     },
     on: {
       "input": function input(data) {
         return _vm.$emit('input', data);
       }
-    },
-    scopedSlots: _vm._u([_vm.type === 'number' ? {
-      key: "append",
-      fn: function fn() {
-        return [_c('VcLayout', {
-          staticClass: "number-counter",
-          attrs: {
-            "column": ""
-          }
-        }, [_c('VcButton', {
-          attrs: {
-            "icon": "",
-            "data-qa": "VcTextFieldButtonUp",
-            "ripple": false,
-            "min-width": "44px",
-            "max-height": "25px"
-          },
-          on: {
-            "click": function click($event) {
-              _vm.updateValue(parseFloat(_vm.step));
-            }
-          }
-        }, [_c('VcIcon', [_vm._v("icon-caret-down fa-rotate-180")])], 1), _vm._v(" "), _c('VcButton', {
-          attrs: {
-            "icon": "",
-            "data-qa": "VcTextFieldButtonDown",
-            "ripple": false,
-            "min-width": "44px",
-            "max-height": "25px"
-          },
-          on: {
-            "click": function click($event) {
-              _vm.updateValue(-parseFloat(_vm.step));
-            }
-          }
-        }, [_c('VcIcon', [_vm._v("icon-caret-down")])], 1)], 1)];
-      },
-      proxy: true
-    } : null], null, true)
-  }, [_vm._v(" "), _vm._t("default")], 2);
+    }
+  });
 };
 
 var __vue_staticRenderFns__$a = [];
@@ -3557,12 +3538,8 @@ var __vue_staticRenderFns__$a = [];
 
 var __vue_inject_styles__$a = function __vue_inject_styles__(inject) {
   if (!inject) return;
-  inject("data-v-31ca7c6a_0", {
-    source: ".number-counter[data-v-31ca7c6a]{border-left:1px solid rgba(0,0,0,.12)}#app[dir=rtl] .number-counter[data-v-31ca7c6a]{border-left:none;border-right:1px solid rgba(0,0,0,.12)}",
-    map: undefined,
-    media: undefined
-  }), inject("data-v-31ca7c6a_1", {
-    source: ".VcTextInput.v-text-field{margin:0;padding:0}.VcTextInput.v-text-field label{letter-spacing:-.3px;font-size:15px;color:rgba(0,0,0,.4)}.VcTextInput.v-text-field .v-text-field__slot:first-child{margin:0 12px}.VcTextInput.v-text-field[prepend-inner-icon] .v-text-field__slot{padding:0}.VcTextInput.v-text-field.v-input--is-focused label,.VcTextInput.v-text-field.v-input--is-label-active label{font-size:14px;font-weight:400;font-stretch:normal;font-style:normal;line-height:1.17;letter-spacing:-.3px;color:rgba(0,0,0,.62)!important;transform:translateY(-100%) scale(.85);top:8px}.VcTextInput.v-text-field:not(.v-text-field--outlined) .v-text-field__slot{transition:margin-bottom .1s}.VcTextInput.v-text-field:not(.v-text-field--outlined).v-input--is-focused .v-text-field__slot,.VcTextInput.v-text-field:not(.v-text-field--outlined).v-input--is-label-active .v-text-field__slot{margin-bottom:-20px}.VcTextInput.v-text-field.v-input--is-focused .v-input__slot{border-color:currentColor}.VcTextInput.v-text-field .v-input__slot{min-height:52px!important;border-radius:6px;background-color:#fff!important;position:relative!important;border:solid 1px rgba(0,0,0,.12);transition:border-color,background-color .1s!important}.VcTextInput.v-text-field .v-input__slot:hover{border-color:currentColor}.VcTextInput.v-text-field .v-input__slot:after,.VcTextInput.v-text-field .v-input__slot:before{display:none}.VcTextInput.v-text-field.v-input--is-disabled .v-input__slot{background-color:rgba(0,0,0,.03)!important}.VcTextInput.v-text-field input{font-size:15px!important;font-weight:500}.VcTextInput.v-text-field .v-text-field__prefix{color:rgba(0,0,0,.54)!important}.VcTextInput.v-text-field .v-input__append-inner,.VcTextInput.v-text-field .v-input__prepend-inner{color:rgba(0,0,0,.4);margin:auto 12px auto 12px!important;max-width:20px;max-height:20px;padding:0!important}.VcTextInput.v-text-field .v-input__append-inner .v-input__icon,.VcTextInput.v-text-field .v-input__prepend-inner .v-input__icon{height:100%;max-width:100%;min-width:100%;max-height:100%;min-height:100%}.VcTextInput.v-text-field .v-input__append-inner i,.VcTextInput.v-text-field .v-input__prepend-inner i{color:rgba(0,0,0,.4)}.VcTextInput.v-text-field.error--text .v-input__slot{border:1px solid #f2514a}",
+  inject("data-v-027a8ee5_0", {
+    source: ".VcTextInput.v-text-field[data-v-027a8ee5]{font-family:var(--primary-font-family)}.VcTextInput.v-text-field[data-v-027a8ee5] .v-input__slot{padding:0 var(--size-value3);height:var(--size-value13);background:#fff;border:1px solid var(--gray-lighten-1);box-sizing:border-box;border-radius:6px}.VcTextInput.v-text-field[data-v-027a8ee5] .v-input__slot label{font-size:var(--font-size-small2);line-height:var(--size-value5);color:var(--gray-darken-3);font-weight:var(--font-weight-medium)}.VcTextInput.v-text-field[data-v-027a8ee5] .v-input__slot input{font-weight:var(--font-weight-medium2);font-size:var(--font-size-small2);line-height:var(--size-value5);color:var(--gray-darken-5)}.VcTextInput.v-text-field[data-v-027a8ee5] .v-input__slot:after,.VcTextInput.v-text-field[data-v-027a8ee5] .v-input__slot:before{display:none}.VcTextInput.v-text-field[data-v-027a8ee5] .v-input__slot:hover{border-color:var(--gray-darken-3)}.VcTextInput.v-text-field[data-v-027a8ee5] .v-input__slot:active,.VcTextInput.v-text-field[data-v-027a8ee5] .v-input__slot:focus,.VcTextInput.v-text-field[data-v-027a8ee5] .v-input__slot:focus-within{border:1px solid var(--v-secondary-base);box-shadow:0 0 0 3px var(--v-secondary-lighten1)}.VcTextInput.v-text-field[data-v-027a8ee5] .v-input__slot:active input,.VcTextInput.v-text-field[data-v-027a8ee5] .v-input__slot:focus input,.VcTextInput.v-text-field[data-v-027a8ee5] .v-input__slot:focus-within input{color:var(--gray-darken-3)}.VcTextInput.v-text-field[data-v-027a8ee5].error--text .v-input__slot{border-color:var(--red);color:unset;box-shadow:unset;font-size:var(--font-size-xx-small);line-height:var(--size-value4)}.VcTextInput.v-text-field[data-v-027a8ee5].v-input--is-focused label,.VcTextInput.v-text-field[data-v-027a8ee5].v-input--is-label-active label{font-size:var(--font-size-small);line-height:1.17;letter-spacing:-.3px;color:var(--gray-darken-4)!important;transform:translateY(-100%) scale(.85);top:var(--size-value2)}.VcTextInput.v-text-field[data-v-027a8ee5].v-input--is-focused .v-text-field__slot,.VcTextInput.v-text-field[data-v-027a8ee5].v-input--is-label-active .v-text-field__slot{margin-bottom:-14px}.VcTextInput.v-text-field[data-v-027a8ee5].v-input--is-disabled .v-input__slot{background:var(--gray-lighten-3);border:1px solid var(--gray-lighten-1)}.VcTextInput.v-text-field[data-v-027a8ee5].v-input--is-disabled .v-input__slot input,.VcTextInput.v-text-field[data-v-027a8ee5].v-input--is-disabled .v-input__slot label{color:var(--gray-darken-2)}.VcTextInput.v-text-field[data-v-027a8ee5]:not(.v-input--is-label-active):not(.v-input--is-focused) input{padding:var(--size-value2) 0}.VcTextInput.v-text-field[data-v-027a8ee5] .v-messages__message{line-height:var(--size-value4)}",
     map: undefined,
     media: undefined
   });
@@ -3570,10 +3547,10 @@ var __vue_inject_styles__$a = function __vue_inject_styles__(inject) {
 /* scoped */
 
 
-var __vue_scope_id__$a = "data-v-31ca7c6a";
+var __vue_scope_id__$a = "data-v-027a8ee5";
 /* module identifier */
 
-var __vue_module_identifier__$a = "data-v-31ca7c6a";
+var __vue_module_identifier__$a = "data-v-027a8ee5";
 /* functional template */
 
 var __vue_is_functional_template__$a = false;

package/init/DesignSystem.js

@@ -26,6 +26,8 @@ import {
     VRow,
     VSnackbar,
     VStepper,
+    VStepperContent,
+    VStepperItems,
     VStepperStep,
     VSwitch,
     VSubheader,
@@ -61,6 +63,8 @@ Vue.use(Vuetify, {
         VProgressCircular,
         VRow,
         VStepper,
+        VStepperContent,
+        VStepperItems,
         VStepperStep,
         VSnackbar,
         VSubheader,
@@ -72,7 +76,7 @@ Vue.use(Vuetify, {
 });
 
 const DesignSystem = ({theme = {}, options = {}} = {}, locale ='en') => {
-    const ds = {...options};
+    const ds = { ...(Vue.prototype.$ds || {}), ...options};
     // Make the options available to all the components
     Vue.prototype.$ds = ds;
     Vue.prototype.$log = Vue.prototype.$log || console.log;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vcita/design-system",
-  "version": "0.2.2",
+  "version": "0.2.3",
   "description": "vcita design system",
   "author": "vcita",
   "scripts": {

package/src/assets/logo.svg

@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 87.5 100"><defs><style>.cls-1{fill:#1697f6;}.cls-2{fill:#7bc6ff;}.cls-3{fill:#1867c0;}.cls-4{fill:#aeddff;}</style></defs><title>Artboard 46</title><polyline class="cls-1" points="43.75 0 23.31 0 43.75 48.32"/><polygon class="cls-2" points="43.75 62.5 43.75 100 0 14.58 22.92 14.58 43.75 62.5"/><polyline class="cls-3" points="43.75 0 64.19 0 43.75 48.32"/><polygon class="cls-4" points="64.58 14.58 87.5 14.58 43.75 100 43.75 62.5 64.58 14.58"/></svg>

package/src/components/VcButton/VcButton.stories.mdx.old

@@ -0,0 +1,40 @@
+import { Meta, Preview, Story, ArgsTable } from '@storybook/addon-docs';
+import VcButton from './VcButton';
+
+<Meta title="Buttons / VcButton" component={VcButton} argTypes={{
+    color: {
+        options: ["primary", "secondary"],
+        control: {type: "radio"}
+    }
+}}
+/>
+
+<style>{`
+      .subheading {
+        --mediumdark: '#999999';
+        font-weight: 900;
+        font-size: 14px;
+        color: #999;
+        letter-spacing: 3px;
+        line-height: 24px;
+        margin-bottom: 12px;
+        margin-top: 40px;
+      }
+`}</style>
+
+# VcButton Docs
+
+Some MDX docs for the `VcButton` component.
+
+<Preview>
+    <Story name="MDX experiment">
+        {{
+            components: {VcButton},
+            template: `<VcButton label="mdx story button" />`,
+        }}
+    </Story>
+</Preview>
+
+<ArgsTable of={VcButton} />
+
+<div className="subheading">CSS Variables</div>

package/src/components/VcExpansionPanels/VcExpansionPanels.stories.js

@@ -0,0 +1,36 @@
+import VcExpansionPanelsCmp from './VcExpansionPanels';
+
+const Template = (args, {argTypes}) => ({
+    components: {VcExpansionPanels: VcExpansionPanelsCmp},
+    props: Object.keys(argTypes),
+    template: `<div><VcExpansionPanels :param="param"/></div>`,
+})
+
+export const Playground = Template.bind({});
+
+// Set default values
+Playground.args = {
+    param: 'value',
+}
+
+export default {
+    title: 'VcExpansionPanels', // This will control the story sidebar position
+    id: 'VcExpansionPanels', // This will be the link to this component
+    component: VcExpansionPanelsCmp,
+    argTypes: {
+        param: {
+            options: ['value1', 'value2'],
+            control: {type: 'radio'}
+        },
+    },
+    parameters: {
+        design: {
+            type: 'figma',
+            url: 'https://www.figma.com',
+        },
+        status: {
+            type: 'beta', // 'beta' | 'stable' | 'deprecated' | 'releaseCandidate'
+            url: 'http://www.url.com/status', // will make the tag a link
+        },
+    },
+};

package/src/components/VcExpansionPanels/VcExpansionPanels.vue

@@ -0,0 +1,26 @@
+<template>
+  <v-expansion-panels>
+    <v-expansion-panel
+        v-for="(item,i) in 5"
+        :key="i"
+    >
+      <v-expansion-panel-header>
+        Item
+      </v-expansion-panel-header>
+      <v-expansion-panel-content>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+      </v-expansion-panel-content>
+    </v-expansion-panel>
+  </v-expansion-panels>
+</template>
+
+<script>
+export default {
+  name: "VcExpansionPanels",
+  props: {},
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>

package/src/components/VcHourInput/VcHourInput.stories.js

@@ -0,0 +1,36 @@
+// import VcHourInputCmp from './VcHourInput';
+//
+// const Template = (args, {argTypes}) => ({
+//     components: {VcHourInput: VcHourInputCmp},
+//     props: Object.keys(argTypes),
+//     template: '<div><VcHourInput :param="param" @onClick="onClick"/></div>',
+// })
+//
+// // export const Playground = Template.bind({});
+// //
+// // // Set default values
+// // Playground.args = {
+// //     param: 'value',
+// // }
+//
+// // export default {
+// //     title: 'VcHourInput',
+// //     id: 'VcHourInput',
+// //     component: VcHourInputCmp,
+// //     argTypes: {
+// //         param: {
+// //             options: ['value1', 'value2'],
+// //             control: {type: 'radio'}
+// //         },
+// //     },
+// //     parameters: {
+// //         design: {
+// //             type: 'figma',
+// //             url: 'https://www.figma.com',
+// //         },
+// //         status: {
+// //             type: 'beta', // 'beta' | 'stable' | 'deprecated' | 'releaseCandidate'
+// //             url: 'http://www.url.com/status', // will make the tag a link
+// //         },
+// //     },
+// // };

package/src/components/VcHourInput/VcHourInput.vue

@@ -0,0 +1,134 @@
+<template>
+  <TextInputWithSelect
+  :items="selectItems"
+  v-bind="$attrs"
+  v-on="$listeners"
+  :color="brandBgColor"
+  :menuProps="{
+    top: !$vuetify.breakpoint.mdAndUp,
+  }"
+  class="hour-picker"
+  @select-input="handleSelectInput"
+  @input="handleInput"
+  >
+    <input
+      v-if="!$vuetify.breakpoint.mdAndUp"
+      class="native-time-input"
+      @input="handleNativeInput"
+      type="time"/>
+  </TextInputWithSelect>
+  <!--  prepend-inner-icon="far fa-clock"-->
+  <!--  clearable-->
+  <!--  clear-icon="far fa-times-circle"-->
+</template>
+
+<script>
+  import TextInputWithSelect from "@/modules/common/components/TextInputWithSelect/TextInputWithSelect.vue"
+  import {convertTime12to24, convertTime24To12} from "@/modules/common/services/timeService.js"
+  export default {
+  components: {
+    TextInputWithSelect,
+  },
+  props: {
+    minutesInterval: {
+      type: Number,
+      default: 30,
+    },
+    amPmMode: {
+      type: Boolean,
+      required: true,
+    }
+  },
+  data() {
+    return {
+      shouldFilter: true,
+    }
+  },
+  created() {
+    this.shouldFilter = !this.$attrs.value
+  },
+  methods: {
+    filterFunc(value, item) {
+      return !this.shouldFilter || !value || item.toString().toLowerCase().indexOf(value.toString().toLowerCase()) !== -1
+    },
+    handleSelectInput() {
+      this.shouldFilter = false
+    },
+    handleInput(value) {
+      this.shouldFilter = !!value
+    },
+    handleNativeInput(e) {
+      let newValue = e.target.value
+      if(this.amPmMode) {
+        newValue = convertTime24To12(newValue)
+      } else {
+        newValue = convertTime12to24(newValue)
+      }
+      this.$emit('input', newValue)
+    }
+  },
+  computed: {
+    selectItems() {
+      var minutesInterval = this.minutesInterval;
+      var times = []; // time array
+      var startTime = 0; // start time
+      var ap = ['AM', 'PM']; // AM-PM
+
+      //loop to increment the time and push results in array
+      let dayLengthInMinutes = 24*60
+      for (let i=0; startTime < dayLengthInMinutes; i++) {
+        var hh = Math.floor(startTime / 60); // getting hours of day in 0-24 format
+        var mm = (startTime % 60); // getting minutes of the hour in 0-55 format
+        if(this.amPmMode) {
+          let hours = '';
+          if(hh === 0 || hh === 12) {
+            hours = '12'
+          } else {
+            hours = ("0" + (hh % 12)).slice(-2)
+          }
+
+          times[i] = hours + ':' + ("0" + mm).slice(-2) + ' ' + ap[Math.floor(hh / 12)]; // pushing data in array in [00:00 - 12:00 AM/PM format]
+        } else {
+          times[i] = `${hh.toString().padStart(2,0)}:${mm.toString().padStart(2,0)}`;
+        }
+
+        startTime = startTime + minutesInterval;
+      }
+      return times
+    },
+    brandBgColor() {
+      return this.$store && this.$store.getters['brandModule/secondaryColor'];
+    },
+
+  }
+}
+</script>
+
+<style lang="scss">
+  .hour-picker {
+    .native-time-input {
+      z-index: 7;
+      opacity: 0;
+      position: absolute;
+      top: 0;
+      width: 100%;
+      height: 100%;
+
+    }
+    .v-menu__content {
+      max-height: 240px;
+    }
+    input {
+      letter-spacing: -0.2px;
+    }
+    .v-input__prepend-inner, .v-input__append-inner {
+      height: unset;
+      width: unset;
+      min-width: unset;
+      i {
+        font-size: 19px;
+      }
+
+    }
+  }
+</style>