@webitel/ui-sdk 0.1.1 → 0.1.2-vue3

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,119 @@
+<template>
+  <div
+    class="wt-indicator"
+    :class="[
+      `wt-indicator--size-${size}`
+    ]"
+  >
+    <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', 'accent', 'disabled', 'success', 'danger', 'transfer', 'break-out', 'job'],
+    },
+    text: {
+      type: [String, Number],
+    },
+    size: {
+      type: String,
+      default: 'md',
+      options: ['sm', 'md'],
+    },
+  },
+
+  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-body-1;
+  margin-left: var(--indicator-text-margin);
+}
+
+.wt-indicator__indicator {
+  min-width: var(--indicator-dot-size);
+  height: var(--indicator-dot-size);
+  margin: var(--indicator-dot-offset);
+  background: var(--indicator-disabled-color);
+  border-radius: 50%;
+
+  &--primary,
+  &--accent {
+    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);
+  }
+
+  &--job {
+    background: var(--job-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/__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

@@ -23,9 +23,10 @@
 
 <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);
 
     &--invalid {
       color: var(--input-info--invalid-color);

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,73 @@
+<!--https://codepen.io/zapdev/pen/MYJRaj-->
+
+<template>
+  <div class="wt-loader--sm" :class="`wt-loader--sm--${color}`">
+    <svg viewBox="0 0 24 24">
+      <circle cx="12" cy="12" r="8" />
+    </svg>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    color: {
+      type: String,
+      default: 'contrast',
+      description: '["main", "contrast", "icon"]',
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.wt-loader--sm {
+  width: 24px;
+  height: 24px;
+
+  svg {
+    animation: rotate 1.5s linear infinite;
+    height: 100%;
+    width: 100%;
+  }
+
+  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;
+  }
+  &--main circle {
+    stroke: var(--main-color);
+  }
+  &--icon circle {
+    stroke: var(--icon-color);
+  }
+}
+
+@keyframes rotate {
+  100% {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes dash {
+  0% {
+    stroke-dasharray: 1, 200;
+    stroke-dashoffset: 0;
+  }
+  50% {
+    stroke-dasharray: 89, 200;
+    stroke-dashoffset: -35;
+  }
+  100% {
+    stroke-dasharray: 89, 200;
+    stroke-dashoffset: -124;
+  }
+}
+</style>

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

@@ -1,84 +1,32 @@
 <template>
-  <div class="wt-loader">
-    <svg class="wt-loader__svg" viewBox="0 0 80 80">
-      <rect class="wt-loader__svg__rect" x="8" y="8" width="64" height="64"></rect>
-    </svg>
-  </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>
+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>
-  // https://codepen.io/aaroniker/pen/omvYNZ
-  .wt-loader {
-    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__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-rounded-action/__tests__/WtRoundedAction.spec.js

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

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

@@ -0,0 +1,156 @@
+<template>
+  <wt-button
+    v-bind="{ ...$attrs, ...$props }"
+    :class="[
+      `wt-rounded-action--color-${color}`,
+      { 'wt-rounded-action--active': active },
+      { 'wt-rounded-action--disabled': disabled },
+      { 'wt-rounded-action--filled': filled },
+    ]"
+    :size="size"
+    color="secondary"
+    class="wt-rounded-action"
+    @click="$emit('click', $event)"
+  >
+    <wt-icon
+      :color="iColor"
+      :icon="icon"
+      :size="size"
+    ></wt-icon>
+  </wt-button>
+</template>
+
+<script>
+export default {
+  name: 'wt-rounded-action',
+  props: {
+    icon: {
+      type: String,
+    },
+    color: {
+      type: String,
+      options: ['secondary', 'accent', 'success', 'danger', 'hold', 'transfer'],
+    },
+    iconColor: {
+      type: String,
+      default: null,
+    },
+    size: {
+      type: String,
+      default: 'md',
+      options: ['sm', 'md'],
+    },
+    active: {
+      type: Boolean,
+      default: false,
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    filled: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  computed: {
+    iColor() {
+      if (this.iconColor) return this.iconColor;
+      if (this.disabled) return 'secondary-50';
+      if (this.color === 'secondary') return null; // dont change icon color
+      if (this.filled && this.color) return 'contrast';
+      return this.color;
+    },
+  },
+};
+</script>
+
+<!--not scoped to change .icon colors-->
+<style lang="scss" scoped>
+.wt-button.wt-rounded-action {
+  min-width: auto;
+  min-height: 0;
+  padding: var(--rounded-action-padding);
+  line-height: 0;
+  border: var(--btn-border);
+  border-color: transparent;
+  background: var(--rounded-action-bg-color);
+  box-shadow: var(--elevation-1);
+
+  &:hover {
+    background: var(--rounded-action-bg-color); // override default wt-button hover
+    box-shadow: var(--elevation-2);
+  }
+
+  &--active {
+    border-color: var(--icon-color);
+
+    &.wt-rounded-action--color-secondary {
+      border-color: var(--icon-color);
+    }
+
+    &.wt-rounded-action--color-accent {
+      border-color: var(--btn-accent--hover-color);
+    }
+
+    &.wt-rounded-action--color-success {
+      border-color: var(--btn-true--hover-color);
+    }
+
+    &.wt-rounded-action--color-danger {
+      border-color: var(--btn-false--hover-color);
+    }
+
+    &.wt-rounded-action--color-hold {
+      border-color: var(--btn-hold--hover-color);
+    }
+
+    &.wt-rounded-action--color-transfer {
+      border-color: var(--btn-transfer--hover-color);
+    }
+  }
+
+  &--filled {
+
+    &:hover {
+      box-shadow: var(--elevation-5);
+      border-color: var(--rounded-action-bg-color);
+    }
+
+    &.wt-rounded-action--color-secondary {
+      background-color: var(--btn-secondary-color);
+      border-color: var(--btn-secondary-color);
+    }
+
+    &.wt-rounded-action--color-accent {
+      background-color: var(--btn-accent--hover-color);
+      border-color: var(--btn-accent--hover-color);
+    }
+
+    &.wt-rounded-action--color-success {
+      background-color: var(--btn-true--hover-color);
+      border-color: var(--btn-true--hover-color);
+    }
+
+    &.wt-rounded-action--color-danger {
+      background-color: var(--btn-false--hover-color);
+      border-color: var(--btn-false--hover-color);
+    }
+
+    &.wt-rounded-action--color-hold {
+      background-color: var(--btn-false--hover-color);
+      border-color: var(--btn-false--hover-color);
+    }
+
+    &.wt-rounded-action--color-transfer {
+      background-color: var(--btn-false--hover-color);
+      border-color: var(--btn-false--hover-color);
+    }
+  }
+
+  &.wt-rounded-action--disabled {
+    border-color: transparent;
+    box-shadow: none;
+  }
+}
+</style>

package/src/components/atoms/wt-tooltip/__tests__/WtTooltip.spec.js

@@ -0,0 +1,30 @@
+import { shallowMount } from '@vue/test-utils';
+import WtTooltip from '../wt-tooltip.vue';
+
+describe('WtTooltip', () => {
+  it('renders a component', () => {
+    const wrapper = shallowMount(WtTooltip);
+    expect(wrapper.classes('wt-tooltip')).toBe(true);
+  });
+
+  // tooltip content is rendered outside of wt-tooltip compoent
+  it.skip('renders a component text, if passed', () => {
+    const content = 'Hello there!';
+    const wrapper = shallowMount(WtTooltip, {
+      slots: {
+        default: content,
+      },
+    });
+    expect(wrapper.find('.wt-tooltip').text()).toEqual(content);
+  });
+
+  it('changed tooltip color, if prop is passed', () => {
+    const wrapper = shallowMount(WtTooltip, {
+      propsData: {
+        contrast: true,
+      },
+    });
+    expect(wrapper.find('.wt-tooltip').classes())
+      .toContain('wt-tooltip--contrast');
+  });
+});