@webitel/ui-sdk 0.1.2 → 0.1.3-vite

package/src/components/wt-avatar/wt-avatar.vue

@@ -0,0 +1,187 @@
+<template>
+  <div
+    class="wt-avatar"
+    :class="[`wt-avatar--size-${size}`]"
+  >
+    <wt-badge
+      v-if="badge"
+      :color-variable="badgeColorVar"
+      :icon-badge="isDnd ? 'dnd' : null"
+    ></wt-badge>
+    <div
+      class="wt-avatar__letters"
+      v-if="isLetterAvatar"
+      :style="{ background: `var(${avatarLettersBackground})` }"
+    >
+      {{ avatarLetters }}
+    </div>
+    <img
+      v-else
+      class="wt-avatar__img"
+      :src="imgSrc"
+      alt="avatar"
+    >
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+import defaultAvatar from '../../assets/components/atoms/wt-avatar/default-avatar.svg';
+import AbstractUserStatus from '../../enums/AbstractUserStatus/AbstractUserStatus.enum';
+
+const props = defineProps({
+  src: {
+    type: String,
+  },
+  size: {
+    type: String,
+    default: 'md',
+    options: ['xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl'],
+  },
+  badge: {
+    type: Boolean,
+    default: false,
+  },
+  username: {
+    type: String,
+    description: 'If passed, avatar is letter-based (if not passed src)',
+  },
+  status: {
+    type: String,
+    options: AbstractUserStatus,
+    default: AbstractUserStatus.OFFLINE,
+  },
+});
+
+const isLetterAvatar = computed(() => !props.src && props.username);
+
+const avatarLetters = computed(() => {
+  if (!props.username) return false;
+  const abbreviation = props.username.split(' ').map((word) => word.at(0).toUpperCase()).join('');
+  return abbreviation.length > 2 ? abbreviation.at(0).concat(abbreviation.at(-1)) : abbreviation;
+});
+
+const avatarLettersBackground = computed(() => {
+  // en.concat(uk)
+  const letterList = [
+    { letters: 'AB'.concat('АБВ'), color: '--avatar-letters-p1-color' },
+    { letters: 'CD'.concat('ГҐД'), color: '--avatar-letters-p2-color' },
+    { letters: 'EF'.concat('ЕЄЖ'), color: '--avatar-letters-p3-color' },
+    { letters: 'GH'.concat('ЗИІ'), color: '--avatar-letters-p4-color' },
+    { letters: 'IJ'.concat('ЇЙК'), color: '--avatar-letters-p5-color' },
+    { letters: 'KL'.concat('ЛМН'), color: '--avatar-letters-p6-color' },
+    { letters: 'MN'.concat('ОПР'), color: '--avatar-letters-p7-color' },
+    { letters: 'OP'.concat('СТУ'), color: '--avatar-letters-p8-color' },
+    { letters: 'QR'.concat('ФХЦ'), color: '--avatar-letters-p9-color' },
+    { letters: 'ST'.concat('ЧШЩ'), color: '--avatar-letters-p10-color' },
+    { letters: 'UV'.concat('ЬЮЯ'), color: '--avatar-letters-p11-color' },
+    { letters: 'WX'.concat(''), color: '--avatar-letters-p12-color' },
+    { letters: 'YZ'.concat(''), color: '--avatar-letters-p13-color' },
+  ];
+  const searchedLetter = letterList.find(({ letters }) => letters.includes(avatarLetters.value.at(0).toUpperCase()));
+  return (searchedLetter && searchedLetter.color) || '--avatar-letters-p1-color';
+});
+
+const imgSrc = computed(() => props.src || defaultAvatar);
+
+const isDnd = computed(() => props.status === AbstractUserStatus.DND);
+
+const badgeColorVar = computed(() => {
+  switch (props.status) {
+    case AbstractUserStatus.ACTIVE:
+      return 'online-color';
+    case AbstractUserStatus.DND:
+      return 'dnd-color';
+    case AbstractUserStatus.BUSY:
+      return 'busy-color';
+    case AbstractUserStatus.OFFLINE:
+      return 'offline-color';
+    default:
+      return 'offline-color';
+  }
+});
+</script>
+
+<style lang="scss">
+@import './variables.scss';
+</style>
+
+<style lang="scss" scoped>
+
+%wt-avatar-typo-sm {
+  font-size: 12px;
+}
+
+%wt-avatar-typo-lg {
+  font-size: 20px;
+}
+
+%wt-avatar-typo-2xl {
+  font-size: 36px;
+}
+
+%wt-avatar-typo-3xl {
+  font-size: 48px;
+}
+
+.wt-avatar {
+  position: relative;
+  width: var(--avatar-size);
+  height: var(--avatar-size);
+  user-select: none;
+  border-radius: 50%;
+
+  &__letters {
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--avatar-font-color);
+    border-radius: 50%;
+  }
+
+  &__img {
+    width: 100%;
+    height: 100%;
+  }
+
+  &--size-xs {
+    width: var(--avatar-size--size-xs);
+    height: var(--avatar-size--size-xs);
+  }
+
+  &--size-sm {
+    @extend %wt-avatar-typo-sm;
+    width: var(--avatar-size--size-sm);
+    height: var(--avatar-size--size-sm);
+  }
+
+  &--size-md {
+    width: var(--avatar-size--size-md);
+    height: var(--avatar-size--size-md);
+  }
+
+  &--size-lg {
+    @extend %wt-avatar-typo-lg;
+    width: var(--avatar-size--size-lg);
+    height: var(--avatar-size--size-lg);
+  }
+
+  &--size-xl {
+    width: var(--avatar-size--size-xl);
+    height: var(--avatar-size--size-xl);
+  }
+
+  &--size-2xl {
+    @extend %wt-avatar-typo-2xl;
+    width: var(--avatar-size--size-2xl);
+    height: var(--avatar-size--size-2xl);
+  }
+
+  &--size-3xl {
+    @extend %wt-avatar-typo-3xl;
+    width: var(--avatar-size--size-3xl);
+    height: var(--avatar-size--size-3xl);
+  }
+}
+</style>

package/src/components/wt-badge/__tests__/wt-badge.spec.js

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

package/src/components/wt-badge/_variables.scss

@@ -0,0 +1,3 @@
+:root {
+  --wt-badge-size: var(--spacing-xs);
+}

package/src/components/wt-badge/wt-badge.vue

@@ -0,0 +1,59 @@
+<template>
+  <aside
+    class="wt-badge"
+    :class="{ 'wt-badge--outside': outside }"
+    :style="{ background: iconBadge ? `url(${this.showIconBadge})` : `var(--${colorVariable})` }"
+  ></aside>
+</template>
+
+<script>
+import BadgeDnd from '../../assets/icons/badge-dnd.svg';
+
+export default {
+  name: 'wt-badge',
+  props: {
+    colorVariable: {
+      type: String,
+      default: 'false-color',
+      description: 'see all available colors in webitel-ui docs',
+    },
+    outside: {
+      type: Boolean,
+      default: false,
+    },
+    iconBadge: {
+      type: String,
+    },
+  },
+  computed: {
+    showIconBadge() {
+      switch (this.iconBadge) {
+        case 'dnd':
+          return BadgeDnd;
+        default:
+          return null;
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+@import './variables.scss';
+</style>
+
+<style lang="scss" scoped>
+
+.wt-badge {
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: var(--wt-badge-size);
+  height: var(--wt-badge-size);
+  border-radius: 50%;
+
+  &--outside {
+    transform: translate(100%, -100%);
+  }
+}
+</style>

package/src/components/wt-button/Readme.md

@@ -0,0 +1,23 @@
+### Different colors:
+```vue
+<div style="display: grid; grid-template-columns: 140px; gap: var(--spacing-xs);">
+  <wt-button>Primary</wt-button>
+  <wt-button color="secondary">Secondary</wt-button>
+  <wt-button disabled>Disabled</wt-button>
+  <wt-button color="success">Success</wt-button>
+  <wt-button color="error">Error</wt-button>
+  <wt-button color="transfer">Transfer</wt-button>
+  <wt-button color="job">Job</wt-button>
+  <wt-button color="info">info</wt-button>
+</div>
+```
+
+### Small button:
+```vue
+    <wt-button size="sm">Small button</wt-button>
+```
+
+### Wide button:
+```vue
+    <wt-button wide>Wide button</wt-button>
+```

package/src/components/wt-button/__tests__/WtButton.spec.js

@@ -0,0 +1,29 @@
+import { shallowMount } from '@vue/test-utils';
+import WtButton from '../wt-button.vue';
+import WtLoader from '../../wt-loader/wt-loader.vue';
+
+describe('WtButton', () => {
+  it('renders a component', () => {
+    const wrapper = shallowMount(WtButton);
+    expect(wrapper.classes('wt-button')).toBe(true);
+  });
+
+  it('renders a button content via default slot', () => {
+    const content = 'button content';
+    const wrapper = shallowMount(WtButton, {
+      slots: {
+        default: content,
+      },
+    });
+    expect(wrapper.find('.wt-button').text()).toBe(content);
+  });
+
+  it('renders button spinner', () => {
+    const wrapper = shallowMount(WtButton, {
+      props: {
+        loading: true,
+      },
+    });
+    expect(wrapper.findComponent(WtLoader).exists()).toBe(true);
+  });
+});

package/src/components/wt-button/_variables.scss

@@ -0,0 +1,41 @@
+:root {
+  --btn-min-width: 90px;
+  --btn-padding: var(--spacing-xs) var(--spacing-sm);
+  --btn-padding--size-sm: var(--spacing-2xs) var(--spacing-xs);
+
+  // COLORS
+  --btn-primary-color: var(--primary-color);
+  --btn-primary-hover-color: var(--primary-hover-color);
+  --btn-primary-text-color: var(--on-primary-color);
+
+  --btn-secondary-color: var(--dp-10-surface-color);
+  --btn-secondary-hover-color: var(--dp-14-surface-color);
+  --btn-secondary-text-color: var(--grey-darken-4);
+
+  --btn-success-color: var(--success-color);
+  --btn-success-hover-color: var(--success-hover-color);
+  --btn-success-text-color: var(--grey-lighten-5);
+
+  --btn-info-color: var(--info-color);
+  --btn-info-hover-color: var(--info-hover-color);
+  --btn-info-text-color: var(--grey-lighten-5);
+
+  --btn-job-color: var(--job-color);
+  --btn-job-hover-color: var(--job-hover-color);
+  --btn-job-text-color: var(--grey-lighten-5);
+
+  --btn-error-color: var(--error-color);
+  --btn-error-hover-color: var(--error-hover-color);
+  --btn-error-text-color: var(--grey-lighten-5);
+
+  --btn-transfer-color: var(--transfer-color);
+  --btn-transfer-hover-color: var(--transfer-hover-color);
+  --btn-transfer-text-color: var(--on-transfer-color);
+
+  --btn-disabled-color: var(--dp-16-surface-color);
+  --btn-disabled-text-color: var(--grey-darken-1);
+}
+
+:root.theme--dark {
+  --btn-secondary-text-color: var(--grey-lighten-4);
+}

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

@@ -0,0 +1,205 @@
+<template>
+  <button
+    class="wt-button"
+    :class="[
+      colorClass,
+      `wt-button--size-${size}`,
+      {
+        'wt-button--contains-icon': containsIcon,
+        'wt-button--wide': wide,
+        'wt-button--disabled': disabled,
+        'wt-button--loading': loading,
+      }
+    ]"
+    type="button"
+    :disabled="disabled"
+    @click="$emit('click', $event)"
+  >
+    <wt-loader
+      v-if="loading"
+      size="sm"
+      :color="loaderColor"
+    ></wt-loader>
+    <slot v-else>no content provided</slot>
+  </button>
+</template>
+
+<script>
+export default {
+  name: 'wt-button',
+  props: {
+    /**
+     * @values 'primary', 'secondary', 'success', 'error', 'transfer', 'job', 'info'
+     * @example <wt-button color="success"></wt-button>
+     */
+    color: {
+      type: String,
+      default: 'primary',
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    loading: {
+      type: Boolean,
+      default: false,
+    },
+    /**
+     * @values 'sm', 'md'
+     * @example <wt-button size="sm"></wt-button>
+     */
+    size: {
+      type: String,
+      default: 'md',
+      options: ['sm', 'md'],
+    },
+    /**
+     * Stretches button to all available width
+     */
+    wide: {
+      type: Boolean,
+      default: false,
+    },
+    /**
+     * sets wt-button line-height to 0 to prevent height changing: [stack overflow](https://stackoverflow.com/a/11126701)
+     */
+    containsIcon: {
+      type: Boolean,
+      default: false,
+      description: 'https://stackoverflow.com/a/11126701',
+    },
+  },
+  emits: ['click'],
+  computed: {
+    colorClass() {
+      if (!this.disabled) return `${this.color}`;
+      return '';
+    },
+    loaderColor() {
+      if (['success', 'transfer', 'error', 'job'].includes(this.color)) return 'main';
+      return 'contrast';
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+@import './variables.scss';
+</style>
+
+<style lang="scss" scoped>
+.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-primary-text-color);
+  background-color: var(--btn-primary-color);
+  background-clip: padding-box;
+  border-radius: var(--border-radius);
+  transition: var(--transition);
+  cursor: pointer;
+
+  &--wide {
+    width: 100%;
+  }
+
+  // https://stackoverflow.com/a/11126701
+  &--contains-icon {
+    line-height: 0;
+  }
+
+  &--loading {
+    pointer-events: none;
+  }
+
+  &--size {
+    &-sm {
+      padding: var(--btn-padding--size-sm);
+    }
+
+    &-md {
+      padding: var(--btn-padding);
+    }
+  }
+
+  &:hover,
+  &:active {
+    background-color: var(--btn-primary-hover-color);
+  }
+
+  &.secondary {
+    color: var(--btn-secondary-text-color);
+    background-color: var(--btn-secondary-color);
+
+    &:hover,
+    &:active {
+      background-color: var(--btn-secondary-hover-color);
+    }
+  }
+
+  &.success {
+    color: var(--btn-success-text-color);
+    background-color: var(--btn-success-color);
+
+    &:hover,
+    &:active {
+      background-color: var(--btn-success-hover-color);
+    }
+  }
+
+  &.info {
+    color: var(--btn-info-text-color);
+    background-color: var(--btn-info-color);
+
+    &:hover,
+    &:active {
+      background-color: var(--btn-info-hover-color);
+    }
+  }
+
+  &.job {
+    color: var(--btn-job-text-color);
+    background-color: var(--btn-job-color);
+
+    &:hover,
+    &:active {
+      background-color: var(--btn-job-hover-color);
+    }
+  }
+
+  &.transfer {
+    color: var(--btn-transfer-text-color);
+    background-color: var(--btn-transfer-color);
+
+    &:hover,
+    &:active {
+      background-color: var(--btn-transfer-hover-color);
+    }
+  }
+
+  &.error {
+    color: var(--btn-error-text-color);
+    background-color: var(--btn-error-color);
+
+    &:hover,
+    &:active {
+      background-color: var(--btn-error-hover-color);
+    }
+  }
+
+  &.wt-button--disabled {
+    color: var(--btn-disabled-text-color);
+    background-color: var(--btn-disabled-color);
+    cursor: auto;
+    pointer-events: none;
+    box-shadow: none;
+  }
+
+  .wt-loader {
+    margin: auto;
+  }
+}
+</style>

package/src/components/wt-button-select/Readme.md

@@ -0,0 +1,13 @@
+### Note: all buttons props are passed as "$attrs"
+
+Different colors
+
+```vue
+const options = [{ text: 'lorem ipsum' }, { text: 'dolor sit amet' }, { text: 'consectetur adipiscing elit' }];
+
+  <div style="display: flex; gap: var(--spacing-xs);">
+    <wt-button-select :options="this.options">Primary</wt-button-select>
+    <wt-button-select color="secondary" :options="this.options">Secondary</wt-button-select>
+    <wt-button-select disabled :options="this.options">Disabled</wt-button-select>
+  </div>
+``` 

package/src/components/wt-button-select/__tests__/WtButtonSelect.spec.js

@@ -0,0 +1,40 @@
+import { shallowMount, mount } from '@vue/test-utils';
+import WtSelectButton from '../wt-button-select.vue';
+
+// helps to mock @floating-ui/vue autoUpdate method
+global.ResizeObserver = jest.fn().mockImplementation(() => ({
+  observe: jest.fn(),
+  unobserve: jest.fn(),
+  disconnect: jest.fn(),
+}));
+
+describe('WtSelectButton', () => {
+  it('renders a component', () => {
+    const wrapper = shallowMount(WtSelectButton);
+    expect(wrapper.classes('wt-button-select')).toBe(true);
+  });
+
+  it('renders a button content via default slot', () => {
+    const content = 'button content';
+    const wrapper = mount(WtSelectButton, {
+      slots: {
+        default: content,
+      },
+    });
+    expect(wrapper.find('.wt-button-select__button').text()).toBe(content);
+  });
+
+  it('should rotate the arrow', async () => {
+    const wrapper = mount(WtSelectButton, {
+      props: {
+        options: [],
+      },
+    });
+    const arrowBtn = wrapper.findAllComponents({ name: 'wt-button' })
+           .find((component) => component.classes().includes('wt-button-select__select-btn'));
+    arrowBtn.vm.$emit('click');
+    await wrapper.vm.$nextTick();
+    const wtIcon = wrapper.find('.wt-button-select__select-arrow');
+    expect(wtIcon.classes()).toContain('wt-button-select__select-arrow--active');
+  });
+});

package/src/components/wt-button-select/_variables.scss

@@ -0,0 +1,7 @@
+:root {
+  --button-select-button-padding: var(--spacing-xs) var(--spacing-sm);
+
+  --button-select-icon-button-padding: var(--spacing-xs);
+
+  --button-select-buttons-gap: 1px;
+}