@webitel/ui-sdk 0.9.65 → 1.0.2

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

@@ -1,20 +1,10 @@
-<!--https://codepen.io/adityapunjani/pen/YyQmBZ-->
+<!--https://codepen.io/zapdev/pen/MYJRaj-->
 
 <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>
+    <svg viewBox="0 0 24 24">
+      <circle cx="12" cy="12" r="8" />
+    </svg>
   </div>
 </template>
 
@@ -31,159 +21,50 @@ export default {
 </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);
+  width: 24px;
+  height: 24px;
 
-  &--main {
-    color: var(--main-color);
-  }
-  &--contrast {
-    color: var(--contrast-color);
+  svg {
+    animation: rotate 1.5s linear infinite;
+    height: 100%;
+    width: 100%;
   }
-}
-
-.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);
+  circle {
+    stroke-dasharray: 1, 200;
+    stroke-dashoffset: 0;
+    animation: dash 1.5s ease-in-out infinite 0s;
+    //color 6s ease-in-out infinite -0.75s
+    stroke-linecap: round;
+    fill: none;
+    stroke: var(--contrast-color);
+    stroke-width: 3;
   }
-  to {
-    transform: rotate(1080deg);
+  &--main circle {
+    stroke: var(--main-color);
   }
 }
 
-.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 rotate {
+  100% {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
   }
 }
 
-@keyframes right-spin {
-  from {
-    transform: rotate(-130deg);
+@keyframes dash {
+  0% {
+    stroke-dasharray: 1, 200;
+    stroke-dashoffset: 0;
   }
   50% {
-    transform: rotate(5deg);
+    stroke-dasharray: 89, 200;
+    stroke-dashoffset: -35;
   }
-  to {
-    transform: rotate(-130deg);
+  100% {
+    stroke-dasharray: 89, 200;
+    stroke-dashoffset: -124;
   }
 }
 </style>

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

@@ -1,8 +1,6 @@
 <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>
+  <wt-loader-sm class="wt-loader" v-if="size === 'sm'" :color="color"></wt-loader-sm>
+  <wt-loader-md class="wt-loader" v-else-if="size === 'md'"></wt-loader-md>
 </template>
 
 <script>

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

@@ -1,20 +1,9 @@
 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

@@ -1,25 +1,19 @@
 <template>
-  <button
+  <wt-button
     class="wt-rounded-action"
     :class="[
-      colorClass,
-        `wt-rounded-action--${size}`,
-      {
-        'wt-rounded-action--disabled': disabled,
-      }
+      { 'wt-rounded-action--disabled': disabled },
     ]"
-    type="button"
-    :disabled="disabled"
+    v-bind="{ ...$attrs, ...$props }"
+    color="secondary"
     @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>
+    <wt-icon
+      :icon="icon"
+      :color="iColor"
+      :size="size"
+    ></wt-icon>
+  </wt-button>
 </template>
 
 <script>
@@ -40,188 +34,42 @@ export default {
     size: {
       type: String,
       default: 'md',
+      options: ['sm', 'md'],
     },
     disabled: {
       type: Boolean,
       default: false,
     },
-    loading: {
-      type: Boolean,
-      default: false,
-    },
   },
   computed: {
-    colorClass() {
-      if (!this.disabled) return `${this.color}`;
-      return '';
-    },
-    computeIconColor() {
+    iColor() {
       if (this.iconColor) return this.iconColor;
-      switch (this.colorClass) {
-        case 'secondary':
-          return 'default';
+      if (this.disabled) return 'secondary-50';
+      switch (this.color) {
         case 'success':
-          return 'contrast';
-        case 'transfer':
-          return 'contrast';
+          return 'success';
+        case 'accent':
+          return 'accent';
         case 'danger':
-          return 'contrast';
+          return 'danger';
         default:
-          return 'active';
+          return 'default';
       }
     },
-    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);
-    }
+.wt-button.wt-rounded-action {
+  min-width: auto;
+  line-height: 0;
+  padding: var(--rounded-action-padding);
+
+  &:not(.wt-rounded-action--disabled) {
+    background: var(--rounded-action-bg-color);
+    box-shadow: var(--elevation-1);
   }
 }
 </style>

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

@@ -28,14 +28,14 @@
 
 <style lang="scss" scoped>
   .wt-tooltip {
-    @extend %typo-body-lg;
+    @extend %typo-body-1;
     display: inline-block;
     min-width: 0;
     padding: var(--tooltip-padding);
     color: var(--tooltip-light-text-color);
     background: var(--tooltip-light-bg-color);
     border-radius: var(--border-radius);
-    box-shadow: var(--box-shadow);
+    box-shadow: var(--tooltip-elevation);
     transition: var(--transition);
     opacity: 0;
     pointer-events: none;

package/src/components/index.js

@@ -3,7 +3,7 @@ import WtIcon from './atoms/wt-icon/wt-icon.vue';
 import WtIndicator from './atoms/wt-indicator/wt-indicator.vue';
 import WtInputInfo from './atoms/wt-input-info/wt-input-info.vue';
 import WtButton from './atoms/wt-button/wt-button.vue';
-import WtBadge from './atoms/wt-badge/wt-badge.vue';
+import WtChip from './atoms/wt-chip/wt-chip.vue';
 import WtDivider from './atoms/wt-divider/wt-divider.vue';
 import WtTooltip from './atoms/wt-tooltip/wt-tooltip.vue';
 import WtRoundedAction from './atoms/wt-rounded-action/wt-rounded-action.vue';
@@ -52,7 +52,7 @@ const Components = {
   WtIndicator,
   WtInputInfo,
   WtButton,
-  WtBadge,
+  WtChip,
   WtDivider,
   WtTooltip,
   WtLabel,

package/src/components/molecules/wt-button-select/wt-button-select.vue

@@ -83,6 +83,7 @@ export default {
 }
 
 .wt-button-select__select-btn {
+  min-width: auto;
   padding: var(--button-select-icon-button-padding);
   border-radius: 0 var(--border-radius) var(--border-radius) 0;
 
@@ -171,7 +172,7 @@ export default {
 
   // DISABLED MODE
   &.wt-button--disabled .wt-icon::v-deep .wt-icon__icon {
-    fill: var(--icon-color-disabled);
+    fill: var(--icon-color-secondary-50);
   }
 
   // OPEN AND SHUT ARROW