@webitel/ui-sdk 0.1.13 → 0.1.100

package/package.json

@@ -1,42 +1,64 @@
-{
-  "name": "@webitel/ui-sdk",
-  "version": "0.1.13",
-  "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",
-    "build-publish-lib": "npm run build-lib && npm publish --access public"
-  },
-  "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.100",
+  "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-observe-visibility": "^1.0.0",
+    "vue-router": "^3.2.0",
+    "vuejs-datepicker": "^1.6.2",
+    "webitel-sdk": "^0.1.91"
+  },
+  "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', 'secondary-50', '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,211 @@
+<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,
+      },
+      outline: {
+        type: Boolean,
+        default: false,
+      },
+      loading: {
+        type: Boolean,
+        default: false,
+      },
+      large: {
+        type: Boolean,
+        default: false,
+      },
+      wide: {
+        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-dark-font-color);
+        border-color: var(--btn-secondary-color);
+        background: var(--btn-secondary-color);
+
+        &:hover,
+        &:active {
+          color: var(--btn-dark-font-color);
+          border-color: var(--btn-secondary--hover-color);
+          background: var(--btn-secondary-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-context-menu/__tests__/WtContextMenu.spec.js

@@ -0,0 +1,43 @@
+import { shallowMount } from '@vue/test-utils';
+import WtContextMenu from '../wt-context-menu.vue';
+
+describe('WtContextMenu', () => {
+  const options = ['1', '2'];
+
+  it('renders a component', () => {
+    const wrapper = shallowMount(WtContextMenu);
+    expect(wrapper.classes('wt-context-menu')).toBe(true);
+  });
+
+  it('component is visible by default', () => {
+    const wrapper = shallowMount(WtContextMenu);
+    expect(wrapper.classes()).not.toContain('wt-context-menu--hidden');
+  });
+
+  it('component is invisible, if "visible" prop = false', () => {
+    const wrapper = shallowMount(WtContextMenu, {
+      propsData: { visible: false },
+    });
+    // Here we don't use "isVsisble()" because we hide our elements with "opacity: 0"
+    expect(wrapper.classes('wt-context-menu--hidden')).toBe(true);
+  });
+
+  it('correctly display the options length', () => {
+    const wrapper = shallowMount(WtContextMenu, {
+      propsData: { options },
+    });
+    expect(wrapper.findAll('.wt-context-menu__option').length).toBe(options.length);
+  });
+
+  it('should raise click event, and emit { option, index } when clicked', () => {
+    const emittingArgs = { option: '1', index: 0 };
+    const wrapper = shallowMount(WtContextMenu, {
+      propsData: { options },
+    });
+
+    wrapper.find('.wt-context-menu__option').trigger('click');
+    expect(wrapper.emitted().click).toBeTruthy();
+
+    expect(wrapper.emitted('click')[0][0]).toEqual(emittingArgs);
+  });
+});

package/src/components/atoms/wt-context-menu/wt-context-menu.vue

@@ -0,0 +1,78 @@
+<template>
+  <ul
+    class="wt-context-menu"
+    :class="{'wt-context-menu--hidden': !visible}"
+  >
+    <li
+      class="wt-context-menu__option-wrapper"
+      v-for="(option, index) in options"
+      :key="index"
+    >
+<!--      <a> click.prevent prevents redirect to # -->
+      <a
+        class="wt-context-menu__option"
+        href="#"
+        @click.prevent="$emit('click', { option, index })"
+        >
+        {{ option.text || option }}
+      </a>
+    </li>
+  </ul>
+</template>
+
+<script>
+export default {
+  name: 'wt-context-menu',
+  props: {
+    options: {
+      type: Array,
+      required: true,
+      description: '[{ text }] or [\'str\']',
+    },
+    visible: {
+      type: Boolean,
+      default: true,
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.wt-context-menu {
+  @extend %typo-body-md;
+  min-width: var(--context-menu-min-width);
+  max-width: var(--context-menu-max-width);
+  background-color: var(--context-menu-background-color);
+  border-radius: var(--border-radius);
+  box-shadow: var(--box-shadow);
+  transition: var(--transition);
+  z-index: 1;
+
+  &--hidden {
+    opacity: 0;
+    pointer-events: none;
+  }
+}
+
+.wt-context-menu__option-wrapper {
+  &:first-of-type {
+    border-radius: var(--border-radius) var(--border-radius) 0 0;
+  }
+  &:last-of-type {
+    border-radius: 0 0 var(--border-radius) var(--border-radius);
+  }
+  &:only-of-type {
+    border-radius: var(--border-radius);
+  }
+  &:hover {
+    background-color: var( --context-menu-option-color--hover);
+    transition: var(--transition);
+  }
+}
+
+.wt-context-menu__option {
+  display: block;
+  padding: var(--context-menu-option-padding);
+  cursor: pointer;
+}
+</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 = '#jest-bucket';
+    const wrapper = shallowMount(WtIcon, {
+      propsData: {
+        icon: 'bucket',
+        size: 'sm',
+        iconPrefix: 'jest',
+      },
+    });
+    expect(wrapper.vm.iconName).toBe(iconName);
+  });
+});