@webitel/ui-sdk 0.9.65 → 1.0.2

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "@webitel/ui-sdk",
-  "version": "0.9.65",
+  "version": "1.0.2",
   "private": false,
   "scripts": {
     "serve-lib": "vue-cli-service serve",
-    "build": "vue-cli-service build",
+    "build": "vue-cli-service build --target lib --name ui-sdk ./src/install.js",
+    "build:app": "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"
+    "publish": "npm run test:unit && npm run build && npm publish --access public"
   },
   "main": "./dist/@webitel/ui-sdk.common.js",
   "files": [
@@ -41,7 +41,7 @@
     "vue-observe-visibility": "^1.0.0",
     "vue-router": "^3.2.0",
     "vuejs-datepicker": "^1.6.2",
-    "webitel-sdk": "^0.1.84"
+    "webitel-sdk": "^0.1.91"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^5.11.4",

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

@@ -3,10 +3,11 @@
     class="wt-button"
     :class="[
       colorClass,
+      `wt-button--size-${size}`,
       {
         'wt-button--outline': outline,
         'wt-button--wide': wide,
-        'wt-button--large': large,
+        'wt-button--rounded': rounded,
         'wt-button--disabled': disabled,
       }
     ]"
@@ -14,198 +15,234 @@
     :disabled="disabled"
     @click="$emit('click', $event)"
   >
-    <wt-loader v-if="loading" size="sm" :color="loaderColor"/>
+    <wt-loader
+      v-if="loading"
+      size="sm"
+      :color="loaderColor"
+    ></wt-loader>
     <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,
-      },
+export default {
+  name: 'wt-button',
+  props: {
+    color: {
+      type: String,
+      default: 'accent',
+      options: ['accent', 'secondary', 'success', 'danger', 'transfer'],
     },
-    computed: {
-      colorClass() {
-        if (!this.disabled) return `${this.color}`;
-        return '';
-      },
-      loaderColor() {
-        if (['success', 'transfer', 'danger'].includes(this.color)) return 'main';
-        return 'contrast';
-      },
+    disabled: {
+      type: Boolean,
+      default: false,
     },
-  };
+    outline: {
+      type: Boolean,
+      default: false,
+    },
+    loading: {
+      type: Boolean,
+      default: false,
+    },
+    size: {
+      type: String,
+      default: 'md',
+      options: ['sm', 'md'],
+    },
+    wide: {
+      type: Boolean,
+      default: false,
+    },
+    rounded: {
+      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%;
+.wt-button {
+  @extend %typo-button;
+  box-sizing: border-box;
+  position: relative;
+  display: inline-block;
+  min-width: var(--btn-min-width);
+  padding: var(--btn-padding);
+  color: var(--btn-dark-font-color);
+  background-color: var(--btn-accent-color);
+  background-clip: padding-box;
+  border-radius: var(--border-radius);
+  transition: var(--transition);
+  cursor: pointer;
+
+  &--wide {
+    width: 100%;
+  }
+
+  &--rounded {
+    border-radius: var(--border-radius--pill);
+  }
+
+  &--size {
+    &-sm {
+      padding: var(--btn-padding--size-sm);
     }
 
-    &--large {
-      @extend %typo-btn-lg;
-      padding: var(--btn-lg-padding); // 16px 30px - border
+    &-md {
+      padding: var(--btn-padding--size-md);
     }
+  }
 
-    &--disabled {
-      color: var(--disabled-color);
-      background: var(--btn-disabled-bg-color);
-      border-color: var(--disabled-color);
-      cursor: auto;
-      pointer-events: none;
+  &:hover,
+  &:active {
+    background-color: var(--btn-accent--hover-color);
+    border-color: var(--btn-accent--hover-color);
+  }
+
+  &.secondary {
+    color: var(--btn-dark-font-color);
+    border-color: var(--btn-secondary-color);
+    background-color: var(--btn-secondary-color);
+
+    &:hover,
+    &:active {
+      color: var(--btn-dark-font-color);
+      border-color: var(--btn-secondary--hover-color);
+      background-color: var(--btn-secondary--hover-color);
     }
+  }
+
+  &.success {
+    color: var(--btn-light-font-color);
+    background-color: var(--btn-true-color);
+    border-color: var(--btn-true-color);
 
     &:hover,
     &:active {
-      background: var(--btn-primary--hover-color);
-      border-color: var(--btn-primary--hover-color);
+      background-color: var(--btn-true--hover-color);
+      border-color: var(--btn-true--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);
-        }
-      }
+  &.transfer {
+    color: var(--btn-light-font-color);
+    background-color: var(--btn-transfer-color);
+    border-color: var(--btn-transfer-color);
 
-      &.success {
-        color: var(--btn-light-font-color);
-        background: var(--btn-true-color);
-        border-color: var(--btn-true-color);
+    &:hover,
+    &:active {
+      background-color: var(--btn-transfer--hover-color);
+      border-color: var(--btn-transfer--hover-color);
+    }
+  }
 
-        &:hover,
-        &:active {
-          background: var(--btn-true--hover-color);
-          border-color: var(--btn-true--hover-color);
-        }
-      }
+  &.danger {
+    color: var(--btn-light-font-color);
+    background-color: var(--btn-false-color);
+    border-color: var(--btn-false-color);
 
-      &.transfer {
-        color: var(--btn-light-font-color);
-        background: var(--btn-transfer-color);
-        border-color: var(--btn-transfer-color);
+    &:hover,
+    &:active {
+      background-color: var(--btn-false--hover-color);
+      border-color: var(--btn-false--hover-color);
+    }
+  }
 
-        &:hover,
-        &:active {
-          background: var(--btn-transfer--hover-color);
-          border-color: var(--btn-transfer--hover-color);
-        }
+  &.wt-button--outline {
+    border: var(--btn-border);
+    padding: var(--btn-padding--outline);
+    background-color: transparent;
+    color: var(--btn-accent-color);
+    border-color: var(--btn-accent-color);
+
+    &.wt-button--size {
+      &-sm {
+        padding: var(--btn-padding--size-sm--outline);
       }
 
-      &.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);
-        }
+      &-md {
+        padding: var(--btn-padding--size-md--outline);
       }
     }
 
-    &--outline {
-      &:not(.wt-button--disabled) {
-        color: var(--btn-primary-color);
-        border-color: var(--btn-primary-color);
-        background: transparent;
-      }
+    &:hover,
+    &:active {
+      color: var(--btn-accent--hover-color);
+      border-color: var(--btn-accent--hover-color);
+      background-color: transparent;
+    }
+
+    &.secondary {
+      color: var(--btn-dark-font-color);
+      border-color: var(--btn-secondary-color);
 
       &:hover,
       &:active {
-        color: var(--btn-primary--hover-color);
-        border-color: var(--btn-primary--hover-color);
-        background: transparent;
+        border-color: var(--btn-secondary--hover-color);
+        background-color: transparent;
       }
+    }
 
-      &.secondary {
-        color: var(--btn-secondary-color);
-        border-color: var(--btn-secondary-color);
+    &.success {
+      color: var(--btn-true-color);
+      border-color: var(--btn-true-color);
 
-        &:hover,
-        &:active {
-          color: var(--btn-secondary--hover-color);
-          border-color: var(--btn-secondary--hover-color);
-        }
+      &:hover,
+      &:active {
+        color: var(--btn-true--hover-color);
+        border-color: var(--btn-true--hover-color);
+        background-color: transparent;
       }
+    }
 
-      &.success {
-        color: var(--btn-true-color);
-        border-color: var(--btn-true-color);
+    &.transfer {
+      color: var(--btn-transfer-color);
+      border-color: var(--btn-transfer-color);
 
-        &:hover,
-        &:active {
-          color: var(--btn-true--hover-color);
-          border-color: var(--btn-true--hover-color);
-        }
+      &:hover,
+      &:active {
+        color: var(--btn-transfer--hover-color);
+        border-color: var(--btn-transfer--hover-color);
+        background-color: transparent;
       }
+    }
 
-      &.transfer {
-        color: var(--btn-transfer-color);
-        border-color: var(--btn-transfer-color);
+    &.danger {
+      color: var(--btn-false-color);
+      border-color: var(--btn-false-color);
 
-        &:hover,
-        &:active {
-          color: var(--btn-transfer--hover-color);
-          border-color: var(--btn-transfer--hover-color);
-        }
+      &:hover,
+      &:active {
+        color: var(--btn-false--hover-color);
+        border-color: var(--btn-false--hover-color);
+        background-color: transparent;
       }
+    }
+  }
 
-      &.danger {
-        color: var(--btn-false-color);
-        border-color: var(--btn-false-color);
+  &.wt-button--disabled {
+    color: var(--btn-disabled-font-color);
+    background-color: var(--btn-disabled-color);
+    border-color: var(--btn-disabled-color);
+    cursor: auto;
+    pointer-events: none;
+    box-shadow: none;
+  }
 
-        &:hover,
-        &:active {
-          color: var(--btn-false--hover-color);
-          border-color: var(--btn-false--hover-color);
-        }
-      }
-    }
+  .wt-loader {
+    margin: auto;
   }
+}
 </style>

package/src/components/atoms/wt-chip/__tests__/WtChip.spec.js

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

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

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

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

@@ -39,7 +39,7 @@ export default {
 
 <style lang="scss" scoped>
 .wt-context-menu {
-  @extend %typo-body-md;
+  @extend %typo-body-2;
   min-width: var(--context-menu-min-width);
   max-width: var(--context-menu-max-width);
   background-color: var(--context-menu-background-color);

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

@@ -101,6 +101,10 @@ svg {
     fill: var(--icon-color-hold);
   }
 
+  &-secondary-50 .wt-icon__icon {
+    fill: var(--icon-color-secondary-50);
+  }
+
   &-disabled .wt-icon__icon {
     fill: var(--icon-color-disabled);
   }

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

@@ -1,8 +1,15 @@
 <template>
-  <div class="wt-indicator">
+  <div
+    class="wt-indicator"
+    :class="[
+      `wt-indicator--size-${size}`
+    ]"
+  >
     <span
       class="wt-indicator__indicator"
-      :class="`wt-indicator__indicator--${color}`"
+      :class="[
+        `wt-indicator__indicator--${color}`,
+      ]"
     ></span>
     <div v-if="isText" class="wt-indicator__text">
       {{ text }}
@@ -19,10 +26,14 @@ export default {
       default: 'secondary',
       options: ['primary', 'secondary', 'disabled', 'success', 'danger', 'transfer', 'break-out'],
     },
-
     text: {
       type: [String, Number],
     },
+    size: {
+      type: String,
+      default: 'md',
+      options: ['sm', 'md'],
+    },
   },
 
   computed: {
@@ -40,13 +51,14 @@ export default {
 }
 
 .wt-indicator__text {
-  @extend %typo-strong-lg;
+  @extend %typo-body-1;
   margin-left: var(--indicator-text-margin);
 }
 
 .wt-indicator__indicator {
-  min-width: var(--indicator-size);
-  height: var(--indicator-size);
+  min-width: var(--indicator-dot-size);
+  height: var(--indicator-dot-size);
+  margin: var(--indicator-dot-offset);
   background: var(--indicator-disabled-color);
   border-radius: 50%;
 
@@ -78,4 +90,25 @@ export default {
     background: var(--indicator-break-out-color);
   }
 }
+
+.wt-indicator--size {
+  &-sm {
+    .wt-indicator__indicator {
+      min-width: var(--indicator-dot-size--size-sm);
+      height: var(--indicator-dot-size--size-sm);
+    }
+    .wt-indicator__text {
+      @extend %typo-caption;
+    }
+  }
+  &-md {
+    .wt-indicator__indicator {
+      min-width: var(--indicator-dot-size--size-md);
+      height: var(--indicator-dot-size--size-md);
+    }
+    .wt-indicator__text {
+      @extend %typo-body-1;
+    }
+  }
+}
 </style>

package/src/components/atoms/wt-input-info/wt-input-info.vue

@@ -23,7 +23,7 @@
 
 <style lang="scss" scoped>
   .wt-input-info {
-    @extend %typo-body-sm;
+    @extend %typo-caption;
     margin-top: var(--input-info-margin);
     color: var(--input-info-color);
     min-height: var(--input-info-min-height);