@webitel/ui-sdk 0.1.13 → 0.1.100

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

@@ -0,0 +1,134 @@
+<!-- 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 = '#';
+      if (this.iconPrefix) name += `${this.iconPrefix}-`;
+      return `${name}${this.icon}`;
+    },
+  },
+};
+</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: block;
+  width: 100%;
+  height: 100%;
+  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 {
+    width: var(--icon-xl-size);
+    height: var(--icon-xl-size);
+  }
+
+  &-lg {
+    width: var(--icon-lg-size);
+    height: var(--icon-lg-size);
+  }
+
+  &-md {
+    width: var(--icon-md-size);
+    height: var(--icon-md-size);
+  }
+
+  &-sm {
+    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');
+  });
+});

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

@@ -0,0 +1,81 @@
+<template>
+  <div class="wt-indicator">
+    <span
+      class="wt-indicator__indicator"
+      :class="`wt-indicator__indicator--${color}`"
+    ></span>
+    <div v-if="isText" class="wt-indicator__text">
+      {{ text }}
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'wt-indicator',
+  props: {
+    color: {
+      type: String,
+      default: 'secondary',
+      options: ['primary', 'secondary', 'disabled', 'success', 'danger', 'transfer', 'break-out'],
+    },
+
+    text: {
+      type: [String, Number],
+    },
+  },
+
+  computed: {
+    isText() {
+      return this.text !== undefined && this.text !== null && this.text !== '';
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.wt-indicator {
+  display: flex;
+  align-items: center;
+}
+
+.wt-indicator__text {
+  @extend %typo-strong-lg;
+  margin-left: var(--indicator-text-margin);
+}
+
+.wt-indicator__indicator {
+  min-width: var(--indicator-size);
+  height: var(--indicator-size);
+  background: var(--indicator-disabled-color);
+  border-radius: 50%;
+
+  &--primary {
+    background: var(--indicator-primary-color);
+  }
+
+  &--secondary {
+    background: var(--indicator-secondary-color);
+  }
+
+  &--disabled {
+    background: var(--indicator-disabled-color);
+  }
+
+  &--success {
+    background: var(--indicator-true-color);
+  }
+
+  &--danger {
+    background: var(--indicator-false-color);
+  }
+
+  &--transfer {
+    background: var(--indicator-transfer-color);
+  }
+
+  &--break-out {
+    background: var(--indicator-break-out-color);
+  }
+}
+</style>

package/src/components/atoms/wt-input-info/__tests__/WtInputInfo.spec.js

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

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

@@ -0,0 +1,35 @@
+<template>
+  <div
+    class="wt-input-info"
+    :class="{
+      'wt-input-info--invalid': invalid,
+    }"
+  >
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'wt-input-info',
+    props: {
+      invalid: {
+        type: Boolean,
+        default: false,
+      },
+    },
+  };
+</script>
+
+<style lang="scss" scoped>
+  .wt-input-info {
+    @extend %typo-body-sm;
+    margin-top: var(--input-info-margin);
+    color: var(--input-info-color);
+    min-height: var(--input-info-min-height);
+
+    &--invalid {
+      color: var(--input-info--invalid-color);
+    }
+  }
+</style>

package/src/components/atoms/wt-loader/__tests__/WtLoader.spec.js

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

package/src/components/atoms/wt-loader/_internals/wt-loader--md.vue

@@ -0,0 +1,83 @@
+<template>
+  <div class="wt-loader wt-loader--md">
+    <svg class="wt-loader--md__svg" viewBox="0 0 80 80">
+      <rect class="wt-loader--md__svg__rect" x="8" y="8" width="64" height="64"></rect>
+    </svg>
+  </div>
+</template>
+
+<script>
+  export default {
+  };
+</script>
+
+<style lang="scss" scoped>
+  // https://codepen.io/aaroniker/pen/omvYNZ
+  .wt-loader--md {
+    position: relative;
+    width: var(--loader-size);
+    height: var(--loader-size);
+    margin: auto;
+
+    &:before {
+      content: '';
+      width: var(--loader-dot-size);
+      height: var(--loader-dot-size);
+      display: block;
+      position: absolute;
+      top: 37px;
+      left: 19px;
+      transform: translate(-18px, -18px);
+      background: var(--loader-dot-color);
+      border-radius: 50%;
+      animation: dotRect var(--loader-animation-duration) linear infinite;
+    }
+
+    .wt-loader--md__svg {
+      display: block;
+      width: 100%;
+      height: 100%;
+
+      &__rect {
+        fill: none;
+        stroke: var(--loader-path-color);
+        stroke-width: 10px;
+        stroke-linejoin: round;
+        stroke-linecap: round;
+        stroke-dasharray: (256 / 4 * 3) (256 / 4) (256 / 4 * 3) (256 / 4);
+        stroke-dashoffset: 0;
+        animation: pathRect var(--loader-animation-duration) linear infinite;
+      }
+    }
+  }
+
+  @keyframes pathRect {
+    25% {
+      stroke-dashoffset: 64;
+    }
+    50% {
+      stroke-dashoffset: 128;
+    }
+    75% {
+      stroke-dashoffset: 192;
+    }
+    100% {
+      stroke-dashoffset: 256;
+    }
+  }
+
+  @keyframes dotRect {
+    25% {
+      transform: translate(0, 0);
+    }
+    50% {
+      transform: translate(18px, -18px);
+    }
+    75% {
+      transform: translate(0, -36px);
+    }
+    100% {
+      transform: translate(-18px, -18px);
+    }
+  }
+</style>

package/src/components/atoms/wt-loader/_internals/wt-loader--sm.vue

@@ -0,0 +1,189 @@
+<!--https://codepen.io/adityapunjani/pen/YyQmBZ-->
+
+<template>
+  <div class="wt-loader--sm" :class="`wt-loader--sm--${color}`">
+    <div class="wt-loader--sm__container active common">
+      <div class="wt-loader--sm__layer layer-1 common">
+        <div class="circle-clipper left common">
+          <div class="circle common" style="border-width:3px;"></div>
+        </div>
+        <div class="gap-patch common">
+          <div class="circle common" style="border-width:3px;"></div>
+        </div>
+        <div class="circle-clipper right common">
+          <div class="circle common" style="border-width:3px;"></div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    color: {
+      type: String,
+      default: 'contrast',
+      description: '["main", "contrast"]',
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.common {
+  display: inline-block;
+  position: relative;
+}
+
+.wt-loader--sm {
+  width: 14px;
+  height: 14px;
+  display: block;
+  position: relative;
+  text-align: initial;
+  color: var(--contrast-color);
+
+  &--main {
+    color: var(--main-color);
+  }
+  &--contrast {
+    color: var(--contrast-color);
+  }
+}
+
+.wt-loader--sm__container {
+  width: 100%;
+  height: 100%;
+  direction: ltr;
+}
+
+.wt-loader--sm__container.active {
+  animation: container-rotate 1568ms linear infinite;
+}
+
+@keyframes container-rotate {
+  to {
+    transform: rotate(360deg)
+  }
+}
+
+.wt-loader--sm__layer {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+}
+
+.active .wt-loader--sm__layer.layer-1 {
+  animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
+}
+
+@keyframes fill-unfill-rotate {
+  12.5% {
+    transform: rotate(135deg);
+  }
+  25% {
+    transform: rotate(270deg);
+  }
+  37.5% {
+    transform: rotate(405deg);
+  }
+  50% {
+    transform: rotate(540deg);
+  }
+  62.5% {
+    transform: rotate(675deg);
+  }
+  75% {
+    transform: rotate(810deg);
+  }
+  87.5% {
+    transform: rotate(945deg);
+  }
+  to {
+    transform: rotate(1080deg);
+  }
+}
+
+.gap-patch {
+  position: absolute;
+  box-sizing: border-box;
+  top: 0;
+  left: 45%;
+  width: 10%;
+  height: 100%;
+  overflow: hidden;
+  border-color: inherit;
+}
+
+.gap-patch .circle {
+  width: 1000%;
+  left: -450%;
+}
+
+.circle-clipper {
+  display: inline-block;
+  position: relative;
+  width: 50%;
+  height: 100%;
+  overflow: hidden;
+  border-color: inherit;
+}
+
+.circle-clipper .circle {
+  width: 200%;
+}
+
+.circle {
+  box-sizing: border-box;
+  height: 100%;
+  border-style: solid;
+  border-color: inherit;
+  border-bottom-color: transparent !important;
+  border-radius: 50%;
+  animation: none;
+}
+
+.circle-clipper.left .circle {
+  border-right-color: transparent !important;
+  transform: rotate(129deg);
+}
+
+.circle-clipper.right .circle {
+  left: -100%;
+  border-left-color: transparent !important;
+  transform: rotate(-129deg);
+}
+
+.active .circle-clipper.left .circle {
+  animation: left-spin 1333ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
+}
+
+.active .circle-clipper.right .circle {
+  animation: right-spin 1333ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
+}
+
+@keyframes left-spin {
+  from {
+    transform: rotate(130deg);
+  }
+  50% {
+    transform: rotate(-5deg);
+  }
+  to {
+    transform: rotate(130deg);
+  }
+}
+
+@keyframes right-spin {
+  from {
+    transform: rotate(-130deg);
+  }
+  50% {
+    transform: rotate(5deg);
+  }
+  to {
+    transform: rotate(-130deg);
+  }
+}
+</style>

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

@@ -0,0 +1,34 @@
+<template>
+  <div class="wt-loader">
+    <wt-loader-sm v-if="size === 'sm'" :color="color"></wt-loader-sm>
+    <wt-loader-md v-if="size === 'md'"></wt-loader-md>
+  </div>
+</template>
+
+<script>
+import WtLoaderSm from './_internals/wt-loader--sm.vue';
+import WtLoaderMd from './_internals/wt-loader--md.vue';
+
+  export default {
+    name: 'wt-loader',
+    components: {
+      WtLoaderSm,
+      WtLoaderMd,
+    },
+    props: {
+      size: {
+        type: String,
+        default: 'md',
+        description: '["sm", "md"]',
+      },
+      color: {
+        type: String,
+        default: 'contrast',
+        description: '["main", "contrast"]',
+      },
+    },
+  };
+</script>
+
+<style lang="scss" scoped>
+</style>

package/src/components/atoms/wt-rounded-action/__tests__/WtRoundedAction.spec.js

@@ -0,0 +1,20 @@
+import { shallowMount } from '@vue/test-utils';
+import WtRoundedAction from '../wt-rounded-action.vue';
+import WtLoader from '../../wt-loader/wt-loader.vue';
+
+describe('WtRoundedAction', () => {
+  it('renders a component', () => {
+    const wrapper = shallowMount(WtRoundedAction, { propsData: { icon: 'call' } });
+    expect(wrapper.classes('wt-rounded-action')).toBe(true);
+  });
+
+  it('renders button spinner', () => {
+    const wrapper = shallowMount(WtRoundedAction, {
+      propsData: {
+        icon: 'call',
+        loading: true,
+      },
+    });
+    expect(wrapper.findComponent(WtLoader).exists()).toBe(true);
+  });
+});