@webitel/ui-sdk 0.1.11 → 0.1.112

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);
+  });
+});

package/src/components/atoms/wt-rounded-action/wt-rounded-action.vue

@@ -0,0 +1,227 @@
+<template>
+  <button
+    class="wt-rounded-action"
+    :class="[
+      colorClass,
+        `wt-rounded-action--${size}`,
+      {
+        'wt-rounded-action--disabled': disabled,
+      }
+    ]"
+    type="button"
+    :disabled="disabled"
+    @click="$emit('click', $event)"
+  >
+    <wt-loader v-if="loading" size="sm" :color="loaderColor"/>
+    <slot v-else>
+      <wt-icon
+        :icon="icon"
+        :color="computeIconColor"
+      ></wt-icon>
+    </slot>
+  </button>
+</template>
+
+<script>
+export default {
+  name: 'wt-rounded-action',
+  props: {
+    icon: {
+      type: String,
+    },
+    color: {
+      type: String,
+      default: '',
+    },
+    iconColor: {
+      type: String,
+      default: null,
+    },
+    size: {
+      type: String,
+      default: 'md',
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    loading: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  computed: {
+    colorClass() {
+      if (!this.disabled) return `${this.color}`;
+      return '';
+    },
+    computeIconColor() {
+      if (this.iconColor) return this.iconColor;
+      switch (this.colorClass) {
+        case 'secondary':
+          return 'default';
+        case 'success':
+          return 'contrast';
+        case 'transfer':
+          return 'contrast';
+        case 'danger':
+          return 'contrast';
+        default:
+          return 'active';
+      }
+    },
+    loaderColor() {
+      if (['success', 'transfer', 'danger'].includes(this.color)) return 'main';
+      return 'contrast';
+    },
+  },
+};
+</script>
+
+<!--not scoped to change .icon colors-->
+<style lang="scss" scoped>
+.wt-rounded-action {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: var(--rounded-action-border);
+  color: var(--rounded-action-dark-font-color);
+  background: var(--rounded-action-primary-color);
+  border-color: var(--rounded-action-primary-color);
+  border-radius: 50%;
+  transition: var(--transition);
+  cursor: pointer;
+
+  &--sm {
+    width: var(--rounded-action-size--sm);
+    height: var(--rounded-action-size--sm);
+  }
+
+  &--md {
+    width: var(--rounded-action-size--md);
+    height: var(--rounded-action-size--md);
+  }
+
+  &--lg {
+    width: var(--rounded-action-size--lg);
+    height: var(--rounded-action-size--lg);
+  }
+
+  @media screen and (max-width: 1336px) {
+    .wt-icon.sm {
+      width: 14px;
+      height: 14px;
+    }
+
+    .wt-icon.md {
+      width: 20px;
+      height: 20px;
+    }
+
+    .wt-icon.lg {
+      width: 25px;
+      height: 25px;
+    }
+
+    &--sm {
+      width: calc(var(--rounded-action-size--sm) * 0.8);
+      height: calc(var(--rounded-action-size--sm) * 0.8);
+    }
+
+    &--md {
+      width: calc(var(--rounded-action-size--md) * 0.8);
+      height: calc(var(--rounded-action-size--md) * 0.8);
+    }
+
+    &--lg {
+      width: calc(var(--rounded-action-size--lg) * 0.8);
+      height: calc(var(--rounded-action-size--lg) * 0.8);
+    }
+  }
+
+  &--disabled {
+    color: var(--text--disabled-color);
+    background: var(--rounded-action-disabled-bg-color);
+    border-color: var(--disabled-color);
+    cursor: auto;
+    pointer-events: none;
+
+    .wt-icon ::v-deep .wt-icon__icon {
+      fill: var(--icon-color-disabled);
+    }
+  }
+
+  &:hover {
+    background: var(--rounded-action-primary--hover-color);
+    border-color: var(--rounded-action-primary--hover-color);
+  }
+
+  &.active,
+  &:active {
+    background: var(--rounded-action-primary--hover-color);
+    border-color: var(--rounded-action-primary--hover-color);
+  }
+
+  &.secondary {
+    border-color: var(--rounded-action-secondary-color);
+    background: var(--rounded-action-secondary-bg-color);
+
+    &:hover{
+      border-color: var(--rounded-action-secondary--hover-color);
+      background: var(--rounded-action-secondary-bg-color);
+
+      .wt-icon ::v-deep .wt-icon__icon {
+        fill: var(--icon-color--hover);
+      }
+    }
+
+    &.active,
+    &:active {
+      color: var(--text-primary-color);
+      border-color: var(--rounded-action-secondary--active-color);
+      background: var(--rounded-action-secondary-bg-color);
+
+      .wt-icon ::v-deep .wt-icon__icon {
+        fill: var(--icon-color-active);
+      }
+    }
+  }
+
+  &.success {
+    color: var(--text-contrast-color);
+    background: var(--rounded-action-true-color);
+    border-color: var(--rounded-action-true-color);
+
+    &:hover,
+    &:active {
+      background: var(--rounded-action-true--hover-color);
+      border-color: var(--rounded-action-true--hover-color);
+    }
+  }
+
+  &.transfer {
+    color: var(--text-contrast-color);
+    background: var(--rounded-action-transfer-color);
+    border-color: var(--rounded-action-transfer-color);
+
+    &:hover,
+    &:active {
+      background: var(--rounded-action-transfer--hover-color);
+      border-color: var(--rounded-action-transfer--hover-color);
+    }
+  }
+
+  &.danger {
+    color: var(--text-contrast-color);
+    background: var(--rounded-action-false-color);
+    border-color: var(--rounded-action-false-color);
+
+    &:hover,
+    &:active {
+      background: var(--rounded-action-false--hover-color);
+      border-color: var(--rounded-action-false--hover-color);
+    }
+  }
+}
+</style>