@webitel/ui-sdk 0.1.11 → 0.1.112

package/package.json

@@ -1,41 +1,62 @@
-{
-  "name": "@webitel/ui-sdk",
-  "version": "0.1.11",
-  "private": false,
-  "main": "./dist/@webitel/ui-sdk.common.js",
-  "files": [
-    "dist/*",
-    "src/locale/*",
-    "src/css/*",
-    "src/scripts/*"
-  ],
-  "scripts": {
-    "serve": "vue-cli-service serve",
-    "build": "vue-cli-service build",
-    "build-lib": "vue-cli-service build --target lib --name ui-sdk ./src/install.js",
-    "test:unit": "vue-cli-service test:unit",
-    "lint": "vue-cli-service lint --fix"
-  },
-  "dependencies": {
-    "core-js": "^3.6.5",
-    "vue": "^2.6.11",
-    "vue-i18n": "^8.18.2",
-    "vue-multiselect": "^2.1.6",
-    "vuejs-datepicker": "^1.6.2"
-  },
-  "devDependencies": {
-    "@vue/cli-plugin-babel": "~4.4.0",
-    "@vue/cli-plugin-eslint": "~4.4.0",
-    "@vue/cli-plugin-unit-jest": "~4.4.0",
-    "@vue/cli-service": "~4.4.0",
-    "@vue/eslint-config-airbnb": "^5.0.2",
-    "@vue/test-utils": "^1.0.3",
-    "babel-eslint": "^10.1.0",
-    "eslint": "^6.7.2",
-    "eslint-plugin-import": "^2.20.2",
-    "eslint-plugin-vue": "^6.2.2",
-    "node-sass": "^4.12.0",
-    "sass-loader": "^8.0.2",
-    "vue-template-compiler": "^2.6.11"
-  }
-}
+{
+  "name": "@webitel/ui-sdk",
+  "version": "0.1.112",
+  "private": false,
+  "scripts": {
+    "serve-lib": "vue-cli-service serve",
+    "build": "vue-cli-service build",
+    "test:unit": "vue-cli-service test:unit",
+    "lint": "vue-cli-service lint --fix",
+    "build-lib": "vue-cli-service build --target lib --name ui-sdk ./src/install.js",
+    "build-publish-lib": "npm run test:unit && npm run build-lib && npm publish --access public"
+  },
+  "main": "./dist/@webitel/ui-sdk.common.js",
+  "files": [
+    "dist/*",
+    "src/locale/*",
+    "src/css/*",
+    "src/components/*",
+    "src/enums/*",
+    "src/mixins/*",
+    "src/scripts/*",
+    "src/modules/*",
+    "src/store/*"
+  ],
+  "dependencies": {
+    "@johmun/vue-tags-input": "^2.1.0",
+    "bamboo-jest-reporter": "^1.0.3",
+    "core-js": "^3.6.5",
+    "csv-stringify": "^5.5.1",
+    "deep-copy": "^1.4.2",
+    "deep-equal": "^2.0.3",
+    "file-saver": "^2.0.2",
+    "jszip": "^3.5.0",
+    "jszip-utils": "^0.1.0",
+    "plyr": "3.6.2",
+    "sass": "^1.34.0",
+    "svg-sprite-loader": "^5.0.0",
+    "vue": "^2.6.11",
+    "vue-i18n": "^8.18.2",
+    "vue-multiselect": "^2.1.6",
+    "vue-router": "^3.2.0",
+    "vuejs-datepicker": "^1.6.2"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^5.11.4",
+    "@vue/cli-plugin-babel": "~4.4.0",
+    "@vue/cli-plugin-eslint": "~4.4.0",
+    "@vue/cli-plugin-router": "^4.5.4",
+    "@vue/cli-plugin-unit-jest": "~4.4.0",
+    "@vue/cli-service": "~4.4.0",
+    "@vue/eslint-config-airbnb": "^5.0.2",
+    "@vue/test-utils": "^1.0.3",
+    "babel-eslint": "^10.1.0",
+    "eslint": "^6.7.2",
+    "eslint-plugin-import": "^2.20.2",
+    "eslint-plugin-vue": "^6.2.2",
+    "sass-loader": "^10.2.0",
+    "svg-url-loader": "^6.0.0",
+    "vue-template-compiler": "^2.6.11",
+    "vuex": "^3.6.2"
+  }
+}

package/src/components/atoms/wt-badge/__tests__/WtBadge.spec.js

@@ -0,0 +1,19 @@
+import { shallowMount } from '@vue/test-utils';
+import WtBadge from '../wt-badge.vue';
+
+describe('WtBadge', () => {
+  it('renders a component', () => {
+    const wrapper = shallowMount(WtBadge);
+    expect(wrapper.classes('wt-badge')).toBe(true);
+  });
+
+  it('renders a badge content via default slot', () => {
+    const content = 'badge content';
+    const wrapper = shallowMount(WtBadge, {
+      slots: {
+        default: content,
+      },
+    });
+    expect(wrapper.find('.wt-badge').text()).toBe(content);
+  });
+});

package/src/components/atoms/wt-badge/wt-badge.vue

@@ -0,0 +1,23 @@
+<template>
+  <span class="wt-badge" :class="`wt-badge--${color}-color`">
+    <slot></slot>
+  </span>
+</template>
+
+<script>
+  export default {
+    name: 'wt-badge',
+    props: {
+      color: {
+        type: String,
+        default: 'main',
+        options: ['main', 'outline', 'accent', 'secondary', 'success', 'danger', 'transfer'],
+        notes: '"main" and "outline" are badge-specific colors',
+      },
+    },
+  };
+</script>
+
+<style lang="scss" scoped>
+  @import '../../../css/components/atoms/wt-badge/wt-badge';
+</style>

package/src/components/atoms/wt-button/__tests__/WtButton.spec.js

@@ -0,0 +1,29 @@
+import { shallowMount } from '@vue/test-utils';
+import WtButton from '../wt-button.vue';
+import WtLoader from '../../wt-loader/wt-loader.vue';
+
+describe('WtButton', () => {
+  it('renders a component', () => {
+    const wrapper = shallowMount(WtButton);
+    expect(wrapper.classes('wt-button')).toBe(true);
+  });
+
+  it('renders a button content via default slot', () => {
+    const content = 'button content';
+    const wrapper = shallowMount(WtButton, {
+      slots: {
+        default: content,
+      },
+    });
+    expect(wrapper.find('.wt-button').text()).toBe(content);
+  });
+
+  it('renders button spinner', () => {
+    const wrapper = shallowMount(WtButton, {
+      propsData: {
+        loading: true,
+      },
+    });
+    expect(wrapper.findComponent(WtLoader).exists()).toBe(true);
+  });
+});

package/src/components/atoms/wt-button/wt-button.vue

@@ -0,0 +1,212 @@
+<template>
+  <button
+    class="wt-button"
+    :class="[
+      colorClass,
+      {
+        'wt-button--outline': outline,
+        'wt-button--wide': wide,
+        'wt-button--large': large,
+        'wt-button--disabled': disabled,
+      }
+    ]"
+    type="button"
+    :disabled="disabled"
+    @click="$emit('click', $event)"
+  >
+    <wt-loader v-if="loading" size="sm" :color="loaderColor"/>
+    <slot v-else></slot>
+  </button>
+</template>
+
+<script>
+
+  export default {
+    name: 'wt-button',
+    props: {
+      color: {
+        type: String,
+        default: '',
+      },
+      disabled: {
+        type: Boolean,
+        default: false,
+      },
+      large: {
+        type: Boolean,
+        default: false,
+      },
+      outline: {
+        type: Boolean,
+        default: false,
+      },
+      wide: {
+        type: Boolean,
+        default: false,
+      },
+      loading: {
+        type: Boolean,
+        default: false,
+      },
+    },
+    computed: {
+      colorClass() {
+        if (!this.disabled) return `${this.color}`;
+        return '';
+      },
+      loaderColor() {
+        if (['success', 'transfer', 'danger'].includes(this.color)) return 'main';
+        return 'contrast';
+      },
+    },
+  };
+</script>
+
+<style lang="scss" scoped>
+  .wt-button {
+    @extend %typo-btn;
+    position: relative;
+    display: inline-block;
+    padding: var(--btn-padding);
+    border: var(--btn-border);
+    color: var(--btn-dark-font-color);
+    background: var(--btn-primary-color);
+    border-color: var(--btn-primary-color);
+    border-radius: var(--border-radius);
+    transition: var(--transition);
+    cursor: pointer;
+
+    &--wide {
+      width: 100%;
+    }
+
+    &--large {
+      @extend %typo-btn-lg;
+      padding: var(--btn-lg-padding); // 16px 30px - border
+    }
+
+    &--disabled {
+      color: var(--disabled-color);
+      background: var(--btn-disabled-bg-color);
+      border-color: var(--disabled-color);
+      cursor: auto;
+      pointer-events: none;
+    }
+
+    &:hover,
+    &:active {
+      background: var(--btn-primary--hover-color);
+      border-color: var(--btn-primary--hover-color);
+    }
+
+    &:not(&--outline) {
+      &.secondary {
+        color: var(--btn-secondary-color);
+        border-color: var(--btn-secondary-color);
+        background: var(--btn-secondary-bg-color);
+
+        &:hover,
+        &:active {
+          color: var(--btn-secondary--hover-color);
+          border-color: var(--btn-secondary--hover-color);
+          background: var(--btn-secondary-bg-color);
+        }
+      }
+
+      &.success {
+        color: var(--btn-light-font-color);
+        background: var(--btn-true-color);
+        border-color: var(--btn-true-color);
+
+        &:hover,
+        &:active {
+          background: var(--btn-true--hover-color);
+          border-color: var(--btn-true--hover-color);
+        }
+      }
+
+      &.transfer {
+        color: var(--btn-light-font-color);
+        background: var(--btn-transfer-color);
+        border-color: var(--btn-transfer-color);
+
+        &:hover,
+        &:active {
+          background: var(--btn-transfer--hover-color);
+          border-color: var(--btn-transfer--hover-color);
+        }
+      }
+
+      &.danger {
+        color: var(--btn-light-font-color);
+        background: var(--btn-false-color);
+        border-color: var(--btn-false-color);
+
+        &:hover,
+        &:active {
+          background: var(--btn-false--hover-color);
+          border-color: var(--btn-false--hover-color);
+        }
+      }
+    }
+
+    &--outline {
+      &:not(.wt-button--disabled) {
+        color: var(--btn-primary-color);
+        border-color: var(--btn-primary-color);
+        background: transparent;
+      }
+
+      &:hover,
+      &:active {
+        color: var(--btn-primary--hover-color);
+        border-color: var(--btn-primary--hover-color);
+        background: transparent;
+      }
+
+      &.secondary {
+        color: var(--btn-secondary-color);
+        border-color: var(--btn-secondary-color);
+
+        &:hover,
+        &:active {
+          color: var(--btn-secondary--hover-color);
+          border-color: var(--btn-secondary--hover-color);
+        }
+      }
+
+      &.success {
+        color: var(--btn-true-color);
+        border-color: var(--btn-true-color);
+
+        &:hover,
+        &:active {
+          color: var(--btn-true--hover-color);
+          border-color: var(--btn-true--hover-color);
+        }
+      }
+
+      &.transfer {
+        color: var(--btn-transfer-color);
+        border-color: var(--btn-transfer-color);
+
+        &:hover,
+        &:active {
+          color: var(--btn-transfer--hover-color);
+          border-color: var(--btn-transfer--hover-color);
+        }
+      }
+
+      &.danger {
+        color: var(--btn-false-color);
+        border-color: var(--btn-false-color);
+
+        &:hover,
+        &:active {
+          color: var(--btn-false--hover-color);
+          border-color: var(--btn-false--hover-color);
+        }
+      }
+    }
+  }
+</style>

package/src/components/atoms/wt-divider/__tests__/WtDivider.spec.js

@@ -0,0 +1,9 @@
+import { shallowMount } from '@vue/test-utils';
+import WtDivider from '../wt-divider.vue';
+
+describe('WtDivider', () => {
+  it('renders a component', () => {
+    const wrapper = shallowMount(WtDivider);
+    expect(wrapper.classes('wt-divider')).toBe(true);
+  });
+});

package/src/components/atoms/wt-divider/wt-divider.vue

@@ -0,0 +1,25 @@
+<template>
+  <hr class="wt-divider">
+</template>
+
+<script>
+  export default {
+    name: 'wt-divider',
+  };
+</script>
+
+<style lang="scss" scoped>
+  .wt-divider {
+    display: block;
+    box-sizing: border-box;
+    width: 100%;
+    max-width: 100%;
+    height: 0;
+    max-height: 0;
+    padding: 0;
+    margin: 0;
+    border: var(--divider-border);
+    border-color: var(--divider-border-color);
+    border-top-width: thin;
+  }
+</style>

package/src/components/atoms/wt-icon/__tests__/WtIcon.spec.js

@@ -0,0 +1,24 @@
+import { shallowMount } from '@vue/test-utils';
+import WtIcon from '../wt-icon.vue';
+
+describe('WtIcon', () => {
+  it('renders a component', () => {
+    const wrapper = shallowMount(WtIcon, {
+      propsData: {
+        icon: 'icon-name',
+      },
+    });
+    expect(wrapper.classes('wt-icon')).toBe(true);
+  });
+  it('correctly computes icon name', () => {
+    const iconName = '#_icon-jest-bucket--sm';
+    const wrapper = shallowMount(WtIcon, {
+      propsData: {
+        icon: 'bucket',
+        size: 'sm',
+        iconPrefix: 'jest',
+      },
+    });
+    expect(wrapper.vm.iconName).toBe(iconName);
+  });
+});

package/src/components/atoms/wt-icon/wt-icon.vue

@@ -0,0 +1,138 @@
+<!-- eslint-disable -->
+<template>
+  <i
+    class="wt-icon"
+    :class="[
+       `wt-icon--size-${size}`,
+       `wt-icon--color-${color}`,
+       { 'wt-icon--disabled': disabled }
+     ]"
+  >
+    <svg
+      class="wt-icon__icon"
+    >
+      <use
+        :xlink:href="iconName"
+      ></use>
+    </svg>
+  </i>
+</template>
+
+<script>
+export default {
+  name: 'wt-icon',
+  props: {
+    icon: {
+      type: String,
+      required: true,
+    },
+    size: {
+      type: String,
+      default: 'md',
+    },
+    color: {
+      type: String,
+      default: 'default',
+      options: ['default', 'contrast', 'active', 'disabled', 'success', 'danger', 'transfer', 'hold'],
+    },
+    iconPrefix: {
+      type: String,
+      default: '',
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  computed: {
+    iconName() {
+      let name = '#_icon';
+      if (this.iconPrefix) name += `-${this.iconPrefix}`;
+      return `${name}-${this.icon}--${this.size}`;
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.wt-icon {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  transition: var(--transition);
+}
+
+/*svg instead of .icon to override styles by .icon-icon-name-size without any other seelectors*/
+svg {
+  display: flex;
+  width: var(--icon-md-size);
+  height: var(--icon-md-size);
+  stroke-width: 0;
+  fill: var(--icon-color);
+  transition: var(--transition);
+}
+
+.wt-icon--color {
+  &-default .wt-icon__icon {
+    fill: var(--icon-color);
+  }
+
+  &-accent .wt-icon__icon {
+    fill: var(--icon-color-accent);
+  }
+
+  &-contrast .wt-icon__icon {
+    fill: var(--icon-color-contrast);
+  }
+
+  &-active .wt-icon__icon {
+    fill: var(--icon-color-active);
+  }
+
+  &-success .wt-icon__icon {
+    fill: var(--icon-color-success);
+  }
+
+  &-danger .wt-icon__icon {
+    fill: var(--icon-color-danger);
+  }
+
+  &-transfer .wt-icon__icon {
+    fill: var(--icon-color-transfer);
+  }
+
+  &-hold .wt-icon__icon {
+    fill: var(--icon-color-hold);
+  }
+
+  &-disabled .wt-icon__icon {
+    fill: var(--icon-color-disabled);
+  }
+}
+
+.wt-icon.wt-icon--disabled .wt-icon__icon {
+  fill: var(--icon-color-disabled);
+}
+
+.wt-icon--size {
+  &-xl .wt-icon__icon {
+    width: var(--icon-xl-size);
+    height: var(--icon-xl-size);
+  }
+
+  &-lg .wt-icon__icon {
+    width: var(--icon-lg-size);
+    height: var(--icon-lg-size);
+  }
+
+  &-md .wt-icon__icon {
+    width: var(--icon-md-size);
+    height: var(--icon-md-size);
+  }
+
+  &-sm .wt-icon__icon {
+    width: var(--icon-sm-size);
+    height: var(--icon-sm-size);
+  }
+}
+</style>

package/src/components/atoms/wt-indicator/__tests__/WtIndicator.spec.js

@@ -0,0 +1,29 @@
+import { shallowMount } from '@vue/test-utils';
+import WtIndicator from '../wt-indicator.vue';
+
+describe('WtIndicator', () => {
+  it('renders a component', () => {
+    const wrapper = shallowMount(WtIndicator);
+    expect(wrapper.classes('wt-indicator')).toBe(true);
+  });
+
+  it('renders a component text, if passed', () => {
+    const content = 'Hello there!';
+    const wrapper = shallowMount(WtIndicator, {
+      propsData: {
+        text: content,
+      },
+    });
+    expect(wrapper.find('.wt-indicator__text').text()).toEqual(content);
+  });
+
+  it('changed indicator color, if prop is passed', () => {
+    const wrapper = shallowMount(WtIndicator, {
+      propsData: {
+        color: 'primary',
+      },
+    });
+    expect(wrapper.find('.wt-indicator__indicator').classes())
+      .toContain('wt-indicator__indicator--primary');
+  });
+});