@webitel/ui-sdk 0.1.11 → 0.1.112

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,98 @@
+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 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 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,
+};
+
+Object.keys(Components).forEach((name) => {
+  Vue.component(name, Components[name]);
+});
+
+export default Components;

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

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

@@ -0,0 +1,175 @@
+<template>
+  <div
+    class="wt-checkbox"
+    :class="{
+      'wt-checkbox--active': isChecked,
+      'wt-checkbox--outline': outline,
+      'wt-checkbox--disabled': disabled,
+    }"
+  >
+    <wt-label class="wt-checkbox__wrapper" v-bind="labelProps">
+      <input
+        class="wt-checkbox__input"
+        type="checkbox"
+        :value="value"
+        :checked="isChecked"
+        :disabled="disabled"
+        @change="inputHandler"
+      >
+      <span class="wt-checkbox__checkmark">
+      <wt-icon
+        :icon="checkboxIcon"
+        :color="iconColor"
+      ></wt-icon>
+    </span>
+      <!-- @slot Custom label markup -->
+      <slot name="label" v-bind="{ label, isChecked, disabled }">
+        <div v-if="label" class="wt-checkbox__label">{{ label }}</div>
+      </slot>
+    </wt-label>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'wt-checkbox',
+    model: {
+      prop: 'selected',
+      event: 'change',
+    },
+    props: {
+      value: {
+        type: [String, Boolean],
+        default: '',
+      },
+      selected: {
+        type: [Array, Boolean],
+        default: () => [],
+      },
+      label: {
+        type: String,
+        default: '',
+      },
+      disabled: {
+        type: Boolean,
+        default: false,
+      },
+      outline: {
+        type: Boolean,
+        default: false,
+      },
+      labelProps: {
+        type: Object,
+        description: 'Object with props, passed down to wt-label as props',
+      },
+    },
+    computed: {
+      isChecked() {
+        if (typeof this.selected === 'boolean') {
+          return this.selected;
+        }
+        return this.selected.includes(this.value);
+      },
+      checkboxIcon() {
+        return this.isChecked ? 'checkbox--checked' : 'checkbox';
+      },
+      iconColor() {
+        if (this.disabled) return 'disabled';
+        if (this.isChecked) return 'active';
+        return null;
+      },
+    },
+    methods: {
+      inputHandler() {
+        if (typeof this.selected === 'boolean') {
+          this.$emit('change', !this.selected);
+        } else {
+          let selected = [...this.selected];
+          if (selected.includes(this.value)) {
+            selected = selected.filter((value) => value !== this.value);
+          } else {
+            selected.push(this.value);
+          }
+          this.$emit('change', selected);
+        }
+      },
+    },
+  };
+</script>
+
+<style lang="scss" scoped>
+  .wt-checkbox {
+    @include width-fit-content;
+    box-sizing: border-box;
+  }
+
+  .wt-checkbox__wrapper {
+    position: relative;
+    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);
+  }
+
+  /* Hide the browser's default checkbox */
+  .wt-checkbox__input {
+    position: absolute;
+    width: 0;
+    height: 0;
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  .wt-checkbox:hover {
+    .wt-checkbox__label {
+      color: var(--form-label--hover-color);
+    }
+
+    ::v-deep .wt-icon__icon {
+      fill: var(--icon-color--hover);
+    }
+  }
+
+  .wt-checkbox--active {
+    .wt-checkbox__label {
+      color: var(--form-label--active-color);
+    }
+  }
+
+  .wt-checkbox--outline {
+    .wt-checkbox__label {
+      color: var(--form-outline-label-color);
+    }
+
+    ::v-deep .wt-icon__icon {
+      fill: var(--icon-outline-color);
+    }
+
+    &.wt-checkbox--active {
+      .wt-checkbox__label {
+        color: var(--form-label--active-color);
+      }
+
+      ::v-deep .wt-icon__icon {
+        fill: var(--icon-outline--active-color);
+      }
+    }
+  }
+
+  .wt-checkbox--disabled {
+    pointer-events: none;
+
+    .wt-checkbox__label {
+      color: var(--form-label--disabled-color);
+    }
+  }
+</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);
+  });
+});

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

@@ -0,0 +1,209 @@
+<template>
+  <div
+    class="wt-datepicker"
+    :class="{
+      'wt-datepicker--disabled': disabled,
+    }"
+  >
+    <wt-label :disabled="disabled" v-bind="labelProps">
+      <!-- @slot Custom input label -->
+      <slot name="label" v-bind="{ label }">{{ label }}</slot>
+    </wt-label>
+    <vue-datepicker
+      class="wt-datepicker__datepicker"
+      :value="+value"
+      :format="format"
+      :maximum-view="maximumView"
+      :disabled="disabled"
+      :disabled-dates="disabledDates"
+      :lang="lang"
+      calendar-button
+      monday-first
+      @input="$emit('change', $event.getTime())"
+    >
+    </vue-datepicker>
+  </div>
+</template>
+
+<script>
+  import VueDatepicker from 'vuejs-datepicker';
+
+  export default {
+    name: 'wt-datepicker',
+    components: {
+      VueDatepicker,
+    },
+    props: {
+      value: {
+        type: [String, Number],
+        default: 'Date.now()',
+      },
+      /**
+       * label above calendar input
+       */
+      label: {
+        type: String,
+        default: '',
+      },
+      format: {
+        type: [String, Function],
+      },
+      maximumView: {
+        type: String,
+        default: 'day',
+      },
+      disabled: {
+        type: Boolean,
+        default: false,
+      },
+      disabledDates: {
+        type: Object,
+      },
+      lang: {
+        type: String,
+        default: 'en',
+      },
+      labelProps: {
+        type: Object,
+        description: 'Object with props, passed down to wt-label as props',
+      },
+    },
+    model: {
+      prop: 'value',
+      event: 'change',
+    },
+  };
+</script>
+
+<style lang="scss" scoped>
+  .wt-label {
+    margin-bottom: var(--label-margin);
+    cursor: text;
+  }
+
+  ::v-deep .vdp-datepicker {
+    min-width: var(--datepicker-width);
+
+    // preview input
+    > div:first-child {
+      position: relative;
+
+      input {
+        @extend %typo-body-lg;
+        box-sizing: border-box;
+        width: 100%;
+        padding: var(--datepicker-padding);
+        border: var(--datepicker-border);
+        border-color: var(--form-border-color);
+        border-radius: var(--border-radius);
+      }
+
+      // arrow down icon
+      .vdp-datepicker__calendar-button {
+        position: absolute;
+        top: 50%;
+        right: var(--datepicker-icon-margin);
+        width: 24px;
+        height: 24px;
+        transform: translateY(-50%);
+
+        &:before {
+          content: '';
+          position: absolute;
+          width: 24px;
+          height: 24px;
+          background: url("../../../assets/icons/arrow-down--md.svg") center center;
+          background-size: contain;
+          transition: var(--transition);
+        }
+
+        // hide defaults
+        span {
+          display: none;
+        }
+      }
+
+      // calendar icon
+      &:before {
+        content: '';
+        position: absolute;
+        top: 50%;
+        left: var(--datepicker-icon-margin);
+        width: 24px;
+        height: 24px;
+        background: url("../../../assets/icons/calendar--md.svg") center center;
+        background-size: contain;
+        transform: translateY(-50%);
+        pointer-events: none;
+      }
+    }
+    @import '../../../css/components/molecules/wt-datepicker/datepicker-calendar';
+  }
+
+  .wt-datepicker:hover,
+  .wt-datepicker:focus-within {
+    .wt-label {
+      color: var(--form-label--hover-color);
+    }
+
+    ::v-deep .vdp-datepicker {
+      min-width: var(--datepicker-width);
+
+      // preview input
+      > div:first-child {
+
+        input {
+          border-color: var(--form-border--hover-color);
+        }
+
+        // arrow down icon
+        .vdp-datepicker__calendar-button:before {
+          background: url("../../../assets/icons/arrow-down--active--md.svg") center center;
+          background-size: contain;
+        }
+
+        // calendar icon
+        &:before {
+          background: url("../../../assets/icons/calendar--active--md.svg") center center;
+        }
+      }
+    }
+  }
+
+  .wt-datepicker:focus-within {
+    ::v-deep .vdp-datepicker {
+      // arrow down icon
+      .vdp-datepicker__calendar-button:before {
+        transform: rotate(180deg);
+      }
+    }
+  }
+
+  .wt-datepicker--disabled {
+    pointer-events: none;
+
+    ::v-deep .vdp-datepicker {
+      min-width: var(--datepicker-width);
+
+      // preview input
+      > div:first-child {
+
+        input {
+          background: var(--form-border--disabled-color);
+          border-color: var(--form-border--disabled-color);
+        }
+
+        // arrow down icon
+        .vdp-datepicker__calendar-button:before {
+          background: url("../../../assets/icons/arrow-down--disabled--md.svg") center center;
+          background-size: contain;
+        }
+
+        // calendar icon
+        &:before {
+          background: url("../../../assets/icons/calendar--disabled--md.svg") center center;
+        }
+      }
+    }
+  }
+</style>

package/src/components/molecules/wt-datetimepicker/__tests__/WtDatetimepicker.spec.js

@@ -0,0 +1,67 @@
+import { shallowMount } from '@vue/test-utils';
+import WtDatetimepicker from '../wt-datetimepicker.vue';
+import WtLabel from '../../wt-label/wt-label.vue';
+import WtIcon from '../../../atoms/wt-icon/wt-icon.vue';
+import WtButton from '../../../atoms/wt-button/wt-button.vue';
+
+describe('WtDatetimepicker', () => {
+  it('renders a component', () => {
+    const wrapper = shallowMount(WtDatetimepicker, {
+      stubs: {
+        WtLabel,
+        WtIcon,
+        WtButton,
+        WtTimepicker: true,
+      },
+    });
+    expect(wrapper.classes('wt-datetimepicker')).toBe(true);
+  });
+
+  it('renders label text when passed', () => {
+    const label = 'Hello there';
+    const wrapper = shallowMount(WtDatetimepicker, {
+      stubs: {
+        WtLabel,
+        WtIcon,
+        WtButton,
+        WtTimepicker: true,
+      },
+      propsData: { label },
+    });
+    expect(wrapper.find('.wt-label').text()).toBe(label);
+  });
+
+  it('opens form at preview click', async () => {
+    const wrapper = shallowMount(WtDatetimepicker, {
+      stubs: {
+        WtLabel,
+        WtIcon,
+        WtButton,
+        WtTimepicker: true,
+      },
+    });
+    expect(wrapper.find('.wt-datetimepicker__form').element).not.toBeVisible();
+    wrapper.find('.wt-datetimepicker__preview').trigger('click');
+    await wrapper.vm.$nextTick();
+    expect(wrapper.find('.wt-datetimepicker__form').element).toBeVisible();
+  });
+
+  it('Triggers change event after button "add" click', async () => {
+    const now = Date.now();
+    const wrapper = shallowMount(WtDatetimepicker, {
+      stubs: {
+        WtLabel,
+        WtIcon,
+        WtButton,
+        WtTimepicker: true,
+      },
+      propsData: {
+        value: now,
+      },
+    });
+    wrapper.find('.wt-datetimepicker__preview').trigger('click');
+    await wrapper.vm.$nextTick();
+    wrapper.find('.wt-datetimepicker__actions > .wt-button').trigger('click');
+    expect(wrapper.emitted().change.pop()).toEqual([now]);
+  });
+});