@webitel/ui-sdk 0.1.13 → 0.1.100

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>

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

@@ -0,0 +1,29 @@
+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);
+  });
+
+  it('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');
+  });
+});

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

@@ -0,0 +1,54 @@
+<template>
+  <span
+    class="wt-tooltip"
+    :class="{
+      'wt-tooltip--visible': visible,
+      'wt-tooltip--contrast': contrast
+    }"
+  >
+    <slot></slot>
+  </span>
+</template>
+
+<script>
+  export default {
+    name: 'wt-tooltip',
+    props: {
+      visible: {
+        type: Boolean,
+        default: false,
+      },
+      contrast: {
+        type: Boolean,
+        default: false,
+      },
+    },
+  };
+</script>
+
+<style lang="scss" scoped>
+  .wt-tooltip {
+    @extend %typo-body-lg;
+    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);
+    transition: var(--transition);
+    opacity: 0;
+    pointer-events: none;
+    z-index: var(--tooltip-z-index);
+
+    &--contrast {
+      color: var(--tooltip-dark-text-color);
+      background: var(--tooltip-dark-bg-color);
+    }
+
+    &--visible, &:hover {
+      opacity: 1;
+      pointer-events: auto;
+    }
+  }
+</style>

package/src/components/index.js

@@ -0,0 +1,102 @@
+import Vue from 'vue';
+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 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';
+import WtLoader from './atoms/wt-loader/wt-loader.vue';
+import WtContextMenu from './atoms/wt-context-menu/wt-context-menu.vue';
+
+import WtCheckbox from './molecules/wt-checkbox/wt-checkbox.vue';
+import WtDatepicker from './molecules/wt-datepicker/wt-datepicker.vue';
+import WtDatetimepicker from './molecules/wt-datetimepicker/wt-datetimepicker.vue';
+import WtIconBtn from './molecules/wt-icon-btn/wt-icon-btn.vue';
+import WtInput from './molecules/wt-input/wt-input.vue';
+import WtNotification from './molecules/wt-notification/wt-notification.vue';
+import WtPopup from './molecules/wt-popup/wt-popup.vue';
+import WtProgressBar from './molecules/wt-progress-bar/wt-progress-bar.vue';
+import WtRadio from './molecules/wt-radio/wt-radio.vue';
+import WtSearchBar from './molecules/wt-search-bar/wt-search-bar.vue';
+import WtSelect from './molecules/wt-select/wt-select.vue';
+import WtSlider from './molecules/wt-slider/wt-slider.vue';
+import WtSwitcher from './molecules/wt-switcher/wt-switcher.vue';
+import WtTabs from './molecules/wt-tabs/wt-tabs.vue';
+import WtTagsInput from './molecules/wt-tags-input/wt-tags-input.vue';
+import WtTimeInput from './molecules/wt-time-input/wt-time-input.vue';
+import WtTextarea from './molecules/wt-textarea/wt-textarea.vue';
+import WtTimepicker from './molecules/wt-timepicker/wt-timepicker.vue';
+import WtLabel from './molecules/wt-label/wt-label.vue';
+import WtButtonSelect from './molecules/wt-button-select/wt-button-select.vue';
+
+import WtAppHeader from './organisms/wt-app-header/wt-app-header.vue';
+import WtAppNavigator from './organisms/wt-app-header/wt-app-navigator.vue';
+import WtFiltersPanelWrapper from './organisms/wt-filters-panel-wrapper/wt-filters-panel-wrapper.vue';
+import WtHeaderActions from './organisms/wt-app-header/wt-header-actions.vue';
+import WtErrorPage from './organisms/wt-error-page/wt-error-page.vue';
+import WtHeadline from './organisms/wt-headline/wt-headline.vue';
+import WtNavigationBar from './organisms/wt-navigation-bar/wt-navigation-bar.vue';
+import WtNotificationsBar from './organisms/wt-notifications-bar/wt-notifications-bar.vue';
+import WtPageWrapper from './organisms/wt-page-wrapper/wt-page-wrapper.vue';
+import WtPagination from './organisms/wt-pagination/wt-pagination.vue';
+import WtPlayer from './organisms/wt-player/wt-player.vue';
+import WtStatusSelect from './organisms/wt-status-select/wt-status-select.vue';
+import WtTable from './organisms/wt-table/wt-table.vue';
+import WtTableActions from './organisms/wt-table-actions/wt-table-actions.vue';
+import WtTableColumnSelect from './organisms/wt-table-column-select/wt-table-column-select.vue';
+
+const Components = {
+  WtIcon,
+  WtIndicator,
+  WtInputInfo,
+  WtButton,
+  WtBadge,
+  WtDivider,
+  WtTooltip,
+  WtLabel,
+  WtLoader,
+  WtRoundedAction,
+  WtCheckbox,
+  WtDatepicker,
+  WtDatetimepicker,
+  WtIconBtn,
+  WtInput,
+  WtNotification,
+  WtPopup,
+  WtProgressBar,
+  WtRadio,
+  WtSearchBar,
+  WtSelect,
+  WtSlider,
+  WtSwitcher,
+  WtTabs,
+  WtTagsInput,
+  WtTimeInput,
+  WtTimepicker,
+  WtTextarea,
+  WtAppHeader,
+  WtHeadline,
+  WtNavigationBar,
+  WtAppNavigator,
+  WtFiltersPanelWrapper,
+  WtHeaderActions,
+  WtErrorPage,
+  WtNotificationsBar,
+  WtPageWrapper,
+  WtPagination,
+  WtPlayer,
+  WtStatusSelect,
+  WtTable,
+  WtTableActions,
+  WtTableColumnSelect,
+  WtButtonSelect,
+  WtContextMenu,
+};
+
+Object.keys(Components).forEach((name) => {
+  Vue.component(name, Components[name]);
+});
+
+export default Components;

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

@@ -0,0 +1,63 @@
+import { shallowMount } from '@vue/test-utils';
+import WtSelectButton from '../wt-button-select.vue';
+import WtContextMenu from '../../../atoms/wt-context-menu/wt-context-menu.vue';
+
+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 = shallowMount(WtSelectButton, {
+      slots: {
+        default: content,
+      },
+    });
+    expect(wrapper.find('.wt-button-select__button').text()).toBe(content);
+  });
+
+  it('context-menu is invisible at start', () => {
+    const wrapper = shallowMount(WtSelectButton, {
+      stubs: { WtContextMenu },
+    });
+    expect(wrapper.findComponent(WtContextMenu).classes('wt-context-menu--hidden')).toBe(true);
+  });
+
+  it('toggles isOpened, if select-btn is clicked', async () => {
+    const wrapper = shallowMount(WtSelectButton, {
+      stubs: { WtContextMenu },
+    });
+    wrapper.find('.wt-button-select__select-btn').vm.$emit('click');
+    await wrapper.vm.$nextTick();
+    expect(wrapper.findComponent(WtContextMenu).element.classList[1]).toBe(undefined);
+
+    wrapper.find('.wt-button-select__select-btn').vm.$emit('click');
+    await wrapper.vm.$nextTick();
+    expect(wrapper.findComponent(WtContextMenu).element.classList[1]).toBe('wt-context-menu--hidden');
+  });
+
+  it('hides context-menu on its click event', async () => {
+    const isOpened = true;
+    const options = ['1', '2'];
+    const wrapper = shallowMount(WtSelectButton, {
+      stubs: { WtContextMenu },
+      data: () => ({ isOpened }),
+      propsData: { options },
+    });
+    wrapper.findComponent({ name: 'WtContextMenu' }).vm.$emit('click', { option: '1' });
+    await wrapper.vm.$nextTick();
+    expect(wrapper.findComponent({ name: 'WtContextMenu' }).classes()).toContain('wt-context-menu--hidden');
+  });
+
+  it('should rotate the arrow', () => {
+    const wrapper = shallowMount(WtSelectButton, {
+      data: () => ({
+        isOpened: true,
+      }),
+    });
+    const wtIcon = wrapper.find('.wt-button-select__select-arrow');
+    expect(wtIcon.classes()).toContain('wt-button-select__select-arrow--active');
+  });
+});

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

@@ -0,0 +1,187 @@
+<template>
+  <div
+    class="wt-button-select"
+    v-clickaway="away">
+
+    <wt-button
+      class="wt-button-select__button"
+      v-bind="$attrs"
+      :disabled="disabled"
+      @click="$emit('click', $event)"
+    >
+      <slot></slot>
+    </wt-button>
+
+    <wt-button
+      class="wt-button-select__select-btn"
+      v-bind="$attrs"
+      :disabled="disabled"
+      :loading="false"
+      @click="isOpened = !isOpened"
+    >
+      <wt-icon
+        class="wt-button-select__select-arrow"
+        :class="{'wt-button-select__select-arrow--active': isOpened}"
+        icon="arrow-down"
+        :disabled="disabled"
+      ></wt-icon>
+    </wt-button>
+
+    <wt-context-menu
+      :visible="isOpened"
+      :options="options"
+      @click="selectOption"
+    ></wt-context-menu>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'wt-button-select',
+  data: () => ({
+    isOpened: false,
+  }),
+  props: {
+    // all buttons props are passed as "$attrs"
+    options: {
+      type: Array,
+      required: true,
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  methods: {
+    selectOption({ option, index }) {
+      this.$emit('click:option', option, index);
+      this.isOpened = false;
+    },
+    away() {
+      this.isOpened = false;
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.wt-button-select {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--button-select-buttons-gap);
+
+  .wt-context-menu {
+    position: absolute;
+    top: calc(100% + 1px);
+    left: 0;
+  }
+}
+
+.wt-button-select__button {
+  padding: var(--button-select-button-padding);
+  border-radius: var(--border-radius) 0 0 var(--border-radius);
+}
+
+.wt-button-select__select-btn {
+  padding: var(--button-select-icon-button-padding);
+  border-radius: 0 var(--border-radius) var(--border-radius) 0;
+
+  // NORMAL MODE
+  &:not(.wt-button--outline)::v-deep {
+    & .wt-icon__icon {
+      fill: var(--button-select-icon-color-dark);
+    }
+
+    // For secondary color, the icon color and icon hover color are the same as in primary color mode
+
+    &.danger,
+    &.success,
+    &.transfer {
+      .wt-icon__icon {
+        fill: var(--button-select-icon-color-ligth);
+      }
+    }
+  }
+
+  //OUTLINE MODE
+  &.wt-button--outline::v-deep {
+    & .wt-icon__icon {
+      fill: var(--button-select-icon-color-primary);
+    }
+
+    &:hover,
+    &:active {
+      .wt-icon__icon {
+        fill: var(--button-select-icon-color-primary--hover);
+      }
+    }
+
+    &.danger {
+      & .wt-icon__icon {
+        fill: var(--icon-color-danger)
+      }
+
+      &:hover,
+      &:active {
+        .wt-icon__icon {
+          fill: var(--button-select-icon-color-danger--hover);
+        }
+      }
+    }
+
+    &.success {
+      & .wt-icon__icon {
+        fill: var(--icon-color-success)
+      }
+
+      &:hover,
+      &:active {
+        .wt-icon__icon {
+          fill: var(--button-select-icon-color-success--hover);
+        }
+      }
+    }
+
+    &.transfer {
+      & .wt-icon__icon {
+        fill: var(--icon-color-transfer)
+      }
+
+      &:hover,
+      &:active {
+        .wt-icon__icon {
+          fill: var(--button-select-icon-color-transfer--hover);
+        }
+      }
+    }
+
+    &.secondary {
+      .wt-icon__icon {
+        fill: var(--button-select-icon-color-secondary);
+      }
+
+      &:hover,
+      &:active {
+        .wt-icon__icon {
+          fill: var(--button-select-icon-color-secondary--hover);
+        }
+      }
+    }
+  }
+
+  // DISABLED MODE
+  &.wt-button--disabled .wt-icon::v-deep .wt-icon__icon {
+    fill: var(--icon-color-disabled);
+  }
+
+  // OPEN AND SHUT ARROW
+  .wt-button-select__select-arrow {
+    display: flex;
+    transform: rotate(0);
+
+    &--active {
+      transform: rotate(180deg);
+    }
+  }
+}
+</style>

package/src/components/molecules/wt-checkbox/__tests__/WtCheckbox.spec.js

@@ -0,0 +1,41 @@
+import { shallowMount } from '@vue/test-utils';
+import WtCheckbox from '../wt-checkbox.vue';
+import WtLabel from '../../wt-label/wt-label.vue';
+import WtIcon from '../../../atoms/wt-icon/wt-icon.vue';
+
+describe('WtCheckbox', () => {
+  it('renders a component', () => {
+    const wrapper = shallowMount(WtCheckbox, {
+      stubs: {
+        WtLabel,
+        WtIcon,
+      },
+    });
+    expect(wrapper.classes('wt-checkbox')).toBe(true);
+  });
+
+  it('renders label text when passed', () => {
+    const label = 'Hello there';
+    const wrapper = shallowMount(WtCheckbox, {
+      stubs: {
+        WtLabel,
+        WtIcon,
+      },
+      propsData: { label },
+    });
+    expect(wrapper.find('.wt-checkbox__label').text()).toBe(label);
+  });
+
+  it('toggles passed value at click', () => {
+    const selected = true;
+    const wrapper = shallowMount(WtCheckbox, {
+      stubs: {
+        WtLabel,
+        WtIcon,
+      },
+      propsData: { selected },
+    });
+    wrapper.find('.wt-checkbox__wrapper').trigger('click');
+    expect(wrapper.emitted().change.pop()).toEqual([!selected]);
+  });
+});