@webitel/ui-sdk 0.1.2 → 0.1.3-vue3

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

@@ -1,54 +1,48 @@
 <template>
-  <span
-    class="wt-tooltip"
+  <v-tooltip
     :class="{
-      'wt-tooltip--visible': visible,
       '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></slot>
-  </span>
+    <slot name="activator"></slot>
+    <template #popper>
+      <slot></slot>
+    </template>
+  </v-tooltip>
 </template>
 
 <script>
-  export default {
-    name: 'wt-tooltip',
-    props: {
-      visible: {
-        type: Boolean,
-        default: false,
-      },
-      contrast: {
-        type: Boolean,
-        default: false,
-      },
+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 {
-    @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;
-    }
-  }
+.wt-tooltip {
+  display: inline-block;
+  line-height: 0;
+  height: fit-content;
+}
 </style>

package/src/components/index.js

@@ -1,12 +1,16 @@
 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 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 WtLabel from './atoms/wt-label/wt-label.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';
@@ -15,46 +19,92 @@ 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,
-  WtBadge,
+  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,
 };
 
-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,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]);
+  });
+});

package/src/components/molecules/wt-checkbox/wt-checkbox.vue

@@ -7,7 +7,7 @@
       'wt-checkbox--disabled': disabled,
     }"
   >
-    <wt-label class="wt-checkbox__wrapper">
+    <wt-label class="wt-checkbox__wrapper" v-bind="labelProps">
       <input
         class="wt-checkbox__input"
         type="checkbox"
@@ -17,7 +17,10 @@
         @change="inputHandler"
       >
       <span class="wt-checkbox__checkmark">
-      <wt-icon :icon="checkboxIcon"></wt-icon>
+      <wt-icon
+        :icon="checkboxIcon"
+        :color="iconColor"
+      ></wt-icon>
     </span>
       <!-- @slot Custom label markup -->
       <slot name="label" v-bind="{ label, isChecked, disabled }">
@@ -55,6 +58,10 @@
         type: Boolean,
         default: false,
       },
+      labelProps: {
+        type: Object,
+        description: 'Object with props, passed down to wt-label as props',
+      },
     },
     computed: {
       isChecked() {
@@ -66,6 +73,11 @@
       checkboxIcon() {
         return this.isChecked ? 'checkbox--checked' : 'checkbox';
       },
+      iconColor() {
+        if (this.disabled) return 'disabled';
+        if (this.isChecked) return 'active';
+        return null;
+      },
     },
     methods: {
       inputHandler() {
@@ -89,6 +101,10 @@
   .wt-checkbox {
     @include width-fit-content;
     box-sizing: border-box;
+
+    .wt-label {
+      cursor: pointer;
+    }
   }
 
   .wt-checkbox__wrapper {
@@ -96,12 +112,16 @@
     display: flex;
     align-items: center;
     user-select: none;
-    cursor: pointer;
+
+    .wt-checkbox__checkmark {
+      line-height: 0; // prevent icon height >> content
+    }
   }
 
   .wt-checkbox__label {
     margin-left: var(--checkbox-icon-margin);
     transition: var(--transition);
+    cursor: pointer;
   }
 
   /* Hide the browser's default checkbox */
@@ -119,7 +139,7 @@
     }
 
     ::v-deep .wt-icon__icon {
-      fill: var(--icon--hover-color);
+      fill: var(--icon-color--hover);
     }
   }
 
@@ -127,10 +147,6 @@
     .wt-checkbox__label {
       color: var(--form-label--active-color);
     }
-
-    ::v-deep .wt-icon__icon {
-      fill: var(--icon--active-color);
-    }
   }
 
   .wt-checkbox--outline {
@@ -159,9 +175,5 @@
     .wt-checkbox__label {
       color: var(--form-label--disabled-color);
     }
-
-    ::v-deep .wt-icon__icon {
-      fill: var(--icon--disabled-color);
-    }
   }
 </style>

package/src/components/molecules/wt-copy-action/__tests__/WtCopyAction.spec.js

@@ -0,0 +1,14 @@
+import { shallowMount } from '@vue/test-utils';
+import WtIconBtn from '../../wt-icon-btn/wt-icon-btn.vue';
+import WtCopyAction from '../wt-copy-action.vue';
+
+describe('WtCopyAction', () => {
+  it('renders a component', () => {
+    const wrapper = shallowMount(WtCopyAction, {
+      stubs: {
+        WtIconBtn,
+      },
+    });
+    expect(wrapper.classes('wt-copy-action')).toBe(true);
+  });
+});

package/src/components/molecules/wt-copy-action/wt-copy-action.vue

@@ -0,0 +1,63 @@
+<template>
+  <wt-tooltip class="wt-copy-action">
+    <template v-slot:activator>
+      <wt-icon-btn
+        v-bind="$attrs"
+        :icon="copied ? 'done' : 'copy'"
+        class="copy-action"
+        @click="copy"
+      ></wt-icon-btn>
+    </template>
+    {{ copied ? copiedTooltip : copyTooltip }}
+  </wt-tooltip>
+</template>
+
+<script>
+import copy from 'clipboard-copy';
+
+let copiedIdTimeout = null;
+
+export default {
+  name: 'wt-copy-action',
+  data: () => ({
+    copied: false,
+  }),
+  props: {
+    value: {
+      type: String,
+    },
+    tooltips: {
+      type: Object,
+      default: () => ({
+        copy: '',
+        copied: '',
+      }),
+    },
+  },
+  computed: {
+    copyTooltip() {
+      return this.tooltips.copy || this.$t('webitelUI.copyAction.copy');
+    },
+    copiedTooltip() {
+      return this.tooltips.copied || this.$t('webitelUI.copyAction.copied');
+    },
+  },
+  methods: {
+    async copy() {
+      try {
+        await copy(this.value);
+        this.copied = this.value;
+        if (copiedIdTimeout) window.clearTimeout(copiedIdTimeout);
+        copiedIdTimeout = setTimeout(() => {
+          this.copied = null;
+        }, 1500);
+      } catch (err) {
+        throw err;
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+</style>

package/src/components/molecules/wt-datepicker/__tests__/WtDatepicker.spec.js

@@ -0,0 +1,28 @@
+import { shallowMount } from '@vue/test-utils';
+import WtDatepicker from '../wt-datepicker.vue';
+import WtLabel from '../../wt-label/wt-label.vue';
+import WtIcon from '../../../atoms/wt-icon/wt-icon.vue';
+
+describe('WtDatepicker', () => {
+  it('renders a component', () => {
+    const wrapper = shallowMount(WtDatepicker, {
+      stubs: {
+        WtLabel,
+        WtIcon,
+      },
+    });
+    expect(wrapper.classes('wt-datepicker')).toBe(true);
+  });
+
+  it('renders label text when passed', () => {
+    const label = 'Hello there';
+    const wrapper = shallowMount(WtDatepicker, {
+      stubs: {
+        WtLabel,
+        WtIcon,
+      },
+      propsData: { label },
+    });
+    expect(wrapper.find('.wt-label').text()).toBe(label);
+  });
+});