@webitel/ui-sdk 0.1.7 → 0.1.8-vue3

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

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

@@ -0,0 +1,48 @@
+<template>
+  <v-tooltip
+    :class="{
+      'wt-tooltip--contrast': contrast
+    }"
+    :placement="placement"
+    :popper-class="[
+      'wt-tooltip__popper',
+       { 'wt-tooltip--contrast__popper': contrast },
+       popperClass,
+     ]"
+    :triggers="['hover', 'focus', 'touch']"
+    class="wt-tooltip"
+  >
+    <slot name="activator"></slot>
+    <template #popper>
+      <slot></slot>
+    </template>
+  </v-tooltip>
+</template>
+
+<script>
+export default {
+  name: 'wt-tooltip',
+  props: {
+    contrast: {
+      type: Boolean,
+      default: false,
+    },
+    placement: {
+      type: String,
+      default: 'auto',
+    },
+    popperClass: {
+      type: String,
+      default: '',
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.wt-tooltip {
+  display: inline-block;
+  line-height: 0;
+  height: fit-content;
+}
+</style>

package/src/components/index.js

@@ -0,0 +1,110 @@
+import Vue from 'vue';
+import WtAvatar from './atoms/wt-avatar/wt-avatar.vue';
+import WtBadge from './atoms/wt-badge/wt-badge.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 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';
+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 WtHint from './molecules/wt-hint/wt-hint.vue';
+import WtCopyAction from './molecules/wt-copy-action/wt-copy-action.vue';
+import WtLoadBar from './molecules/wt-load-bar/wt-load-bar.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 WtHeadlineNav from './organisms/wt-headline-nav/wt-headline-nav.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 = {
+  WtAvatar,
+  WtBadge,
+  WtIcon,
+  WtIndicator,
+  WtInputInfo,
+  WtButton,
+  WtChip,
+  WtDivider,
+  WtTooltip,
+  WtLabel,
+  WtLoader,
+  WtRoundedAction,
+  WtCheckbox,
+  WtDatepicker,
+  WtDatetimepicker,
+  WtIconBtn,
+  WtInput,
+  WtHint,
+  WtNotification,
+  WtPopup,
+  WtProgressBar,
+  WtRadio,
+  WtSearchBar,
+  WtSelect,
+  WtSlider,
+  WtSwitcher,
+  WtTabs,
+  WtTagsInput,
+  WtTimeInput,
+  WtTimepicker,
+  WtTextarea,
+  WtAppHeader,
+  WtHeadline,
+  WtHeadlineNav,
+  WtNavigationBar,
+  WtAppNavigator,
+  WtFiltersPanelWrapper,
+  WtHeaderActions,
+  WtErrorPage,
+  WtNotificationsBar,
+  WtPageWrapper,
+  WtPagination,
+  WtPlayer,
+  WtStatusSelect,
+  WtTable,
+  WtTableActions,
+  WtTableColumnSelect,
+  WtButtonSelect,
+  WtContextMenu,
+  WtCopyAction,
+  WtLoadBar,
+};
+
+export default Components;

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

@@ -0,0 +1,29 @@
+import { shallowMount, mount } from '@vue/test-utils';
+import WtSelectButton from '../wt-button-select.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('should rotate the arrow', () => {
+    const wrapper = mount(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,184 @@
+<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-context-menu
+      :options="options"
+      :visible="isOpened"
+      @click="selectOption"
+    >
+      <template v-slot:activator>
+        <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>
+      </template>
+    </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-button-select__button {
+  padding: var(--button-select-button-padding);
+  border-radius: var(--border-radius) 0 0 var(--border-radius);
+}
+
+.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;
+
+  // 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-secondary-50);
+  }
+
+  // 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__input').trigger('change');
+    expect(wrapper.emitted().change[0]).toEqual([!selected]);
+  });
+});