@webitel/ui-sdk 0.1.2 → 0.1.3-vite

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

@@ -0,0 +1,28 @@
+import { shallowMount, mount } from '@vue/test-utils';
+import WtDatepicker from '../wt-datepicker.vue';
+import WtLabel from '../../wt-label/wt-label.vue';
+import WtIcon from '../../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 = mount(WtDatepicker, {
+      stubs: {
+        WtLabel,
+        WtIcon,
+      },
+      props: { label },
+    });
+    expect(wrapper.find('.wt-label').text()).toBe(label);
+  });
+});

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

@@ -0,0 +1,56 @@
+:root {
+  /*General*/
+  --dp-font-family: 'Montserrat';
+  --dp-border-radius: var(--border-radius); /*Configurable border-radius*/
+  --dp-cell-border-radius: var(--border-radius); /*Specific border radius for the calendar cell*/
+
+  /*Sizing*/
+  --dp-button-heigh: 32px; /*Size for buttons in overlays*/
+  --dp-month-year-row-height: 24px; /*Height of the month-year select row*/
+  --dp-month-year-row-button-size: 24px; /*Specific height for the next/previous buttons*/
+  --dp-button-icon-height: var(--icon-md-size); /*Icon sizing in buttons*/
+  --dp-cell-size: 24px; /*Width and height of calendar cell*/
+  --dp-cell-padding: var(--spacing-2xs); /*Padding in the cell*/
+  --dp-common-padding: var(--spacing-xs); /*Common padding used*/
+  --dp-input-icon-padding: calc(var(--icon-md-size) + 2 * var(--spacing-xs)); /*Padding on the left side of the input if icon is present*/
+  --dp-input-padding: calc(var(--spacing-xs) - 1px) calc(var(--icon-md-size) + 2 * var(--spacing-xs)); /*Padding in the input*/
+  //--dp-menu-min-width: 260px; /*Adjust the min width of the menu*/
+  --dp-action-buttons-padding: 2px 5px; /*Adjust padding for the action buttons in action row*/
+  --dp-row-maring: var(--spacing-3xs); /*Adjust the spacing between rows in the calendar*/
+  --dp-calendar-header-cell-padding: 0.5rem; /*Adjust padding in calendar header cells*/
+  --dp-two-calendars-spacing: 10px; /*Space between multiple calendars*/
+  --dp-overlay-col-padding: 3px; /*Padding in the overlay column*/
+  --dp-time-inc-dec-button-size: 24px; /*Sizing for arrow buttons in the time picker*/
+
+  /*Font sizes*/
+  --dp-font-size: 12px; /*Default font-size*/
+  --dp-preview-font-size: 12px; /*Font size of the date preview in the action row*/
+  --dp-time-font-size: 12px; /*Font size in the time picker*/
+
+  /*Transitions*/
+  --dp-animation-duration: var(--transition); /*Transition duration*/
+  --dp-menu-appear-transition-timing: cubic-bezier(.4, 0, 1, 1); /*Timing on menu appear animation*/
+  --dp-transition-timing: ease-out; /*Timing on slide animations*/
+}
+
+.dp__theme_light {
+  --dp-background-color: var(--main-color);
+  --dp-text-color: var(--contrast-color);
+  --dp-hover-color: var(--secondary-color-50);
+  --dp-hover-text-color: var(--contrast-color);
+  --dp-hover-icon-color: var(--icon-color--hover);
+  --dp-primary-color: var(--primary-color);
+  --dp-primary-text-color: var(--main-color);
+  --dp-secondary-color: var(--secondary-color);
+  --dp-border-color: var(--form-border-color);
+  --dp-menu-border-color: transparent;
+  --dp-border-color-hover: var(--form-border--hover-color);
+  --dp-disabled-color: var(--disabled-color);
+  //--dp-scroll-bar-background: #f3f3f3;
+  //--dp-scroll-bar-color: #959595;
+  --dp-success-color: var(--true-color);
+  //--dp-success-color-disabled: #a3d9b1;
+  --dp-icon-color: var(--icon-color);
+  --dp-danger-color: var(--false-color);
+  //--dp-highlight-color: rgba(25, 118, 210, 0.1);
+}

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

@@ -0,0 +1,240 @@
+<template>
+  <div
+    :class="{
+      'wt-datepicker--disabled': disabled,
+    }"
+    class="wt-datepicker"
+  >
+    <wt-label
+      v-bind="labelProps"
+      :disabled="disabled"
+    >
+      <!-- @slot Custom input label -->
+      <slot
+        v-bind="{ label }"
+        name="label"
+      >{{ label }}</slot>
+    </wt-label>
+    <vue-datepicker
+      v-bind="{ ...$attrs, ...$props }"
+      ref="datepicker"
+      :locale="$i18n.locale === 'ua' ? 'uk' : $i18n.locale"
+      :model-value="+value"
+      :placeholder="label || placeholder"
+      class="wt-datepicker__datepicker"
+      :format="isDateTime ? 'dd/MM/yyyy HH:mm' : 'dd/MM/yyyy'"
+      :close-on-auto-apply="false"
+      auto-apply
+      @closed="isOpened = false"
+      @open="isOpened = true"
+      @update:model-value="emit('input', $event.getTime())"
+    >
+      <template v-slot:input-icon>
+        <wt-icon
+          :color="disabled ? 'disabled' : 'default'"
+          icon="calendar"
+        ></wt-icon>
+      </template>
+      <template v-slot:clear-icon>
+        <wt-icon
+          :class="{ 'wt-datepicker__open-arrow--opened': isOpened }"
+          :color="disabled ? 'disabled' : 'default'"
+          class="wt-datepicker__open-arrow"
+          icon="arrow-down"
+        ></wt-icon>
+      </template>
+      <template v-slot:arrow-left>
+        <wt-icon-btn
+          icon="arrow-left"
+        ></wt-icon-btn>
+      </template>
+      <template v-slot:arrow-right>
+        <wt-icon-btn
+          icon="arrow-right"
+        ></wt-icon-btn>
+      </template>
+      <template
+        v-if="isDateTime"
+        v-slot:time-picker="{ time, updateTime }"
+      >
+        <div class="datepicker__timepicker">
+          <wt-time-input
+            :value="time.hours"
+            max-value="23"
+            @input="updateTime"
+          ></wt-time-input>
+          :
+          <wt-time-input
+            :value="time.minutes"
+            max-value="59"
+            @input="updateTime($event, false)"
+          ></wt-time-input>
+        </div>
+      </template>
+    </vue-datepicker>
+  </div>
+</template>
+
+<script setup>
+import VueDatepicker from '@vuepic/vue-datepicker';
+import '@vuepic/vue-datepicker/dist/main.css';
+import { ref } from 'vue';
+
+const props = defineProps({
+  mode: {
+    type: String,
+    default: 'date',
+    options: ['date', 'datetime'],
+  },
+  value: {
+    type: [String, Number],
+    default: 'Date.now()',
+  },
+  /**
+   * label above calendar input
+   */
+  label: {
+    type: String,
+    default: '',
+  },
+  placeholder: {
+    type: String,
+    default: '',
+  },
+  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',
+  },
+});
+const emit = defineEmits(['input']);
+
+const isOpened = ref(false);
+const datepicker = ref(null); // template ref
+
+const isDateTime = props.mode === 'datetime';
+</script>
+
+<style lang="scss">
+@import './variables.scss';
+</style>
+
+<style lang="scss" scoped>
+
+.wt-datepicker :deep(.dp__main) {
+  .dp__input_icon {
+    left: var(--spacing-xs);
+    line-height: 0;
+  }
+
+  .dp__clear_icon {
+    right: var(--spacing-xs);
+    line-height: 0;
+  }
+
+  .dp__input {
+    @extend %typo-body-1;
+  }
+
+  .dp__arrow_top {
+    display: none;
+  }
+
+  /*
+  don't know why but month or year selection doesn't work
+  suppose its related to compatibility build
+   */
+  .dp__month_year_wrap {
+    pointer-events: none;
+  }
+
+  .dp__month_year_select,
+  .dp__cell_inner {
+    @extend %typo-body-2;
+  }
+
+  // reset right/left arrow hover
+  .dp__inner_nav:hover {
+    background: inherit;
+  }
+
+  .dp__menu {
+    box-sizing: border-box;
+    min-width: 196px;
+    width: 196px;
+    padding: var(--spacing-xs);
+    border-radius: var(--border-radius);
+    box-shadow: var(--elevation-10);
+  }
+
+  .dp__calendar_wrap {
+    gap: var(--spacing-2xs);
+  }
+
+  .dp__calendar_header_item {
+    @extend %typo-subtitle-2;
+  }
+
+  .dp__calendar_header_separator {
+    background: var(--secondary-color);
+  }
+
+  .dp__calendar_header,
+  .dp__calendar_row {
+    gap: var(--spacing-3xs);
+  }
+
+  // switch to time view
+  .dp__button {
+    display: none;
+  }
+
+  .dp__action_row {
+    flex-direction: column;
+    gap: var(--spacing-xs);
+  }
+
+  .dp__selection_preview,
+  .dp__action_buttons {
+    width: 100%;
+  }
+
+  .dp__selection_preview {
+    text-align: center;
+  }
+
+  .dp__action_buttons {
+    display: flex;
+    gap: var(--spacing-xs);
+  }
+}
+
+.datepicker__timepicker {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+  margin-top: var(--spacing-xs);
+
+  .wt-time-input {
+    flex-grow: 1;
+  }
+}
+
+.wt-datepicker__open-arrow {
+  transition: var(--transition);
+
+  &--opened {
+    transform: rotate(180deg);
+  }
+}
+</style>

package/src/components/wt-divider/__tests__/WtDivider.spec.js

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

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

@@ -0,0 +1,5 @@
+
+:root {
+  --divider-border: 1px solid;
+  --divider-border-color: var(--page-bg-color);
+}

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

@@ -0,0 +1,30 @@
+<template>
+  <hr class="wt-divider">
+</template>
+
+<script>
+export default {
+  name: 'wt-divider',
+};
+</script>
+
+<style lang="scss">
+@import './variables.scss';
+</style>
+
+<style lang="scss" scoped>
+
+.wt-divider {
+  display: block;
+  box-sizing: border-box;
+  width: 100%;
+  max-width: 100%;
+  height: 0;
+  max-height: 0;
+  padding: 0;
+  margin: 0;
+  border: var(--divider-border);
+  border-color: var(--divider-border-color);
+  border-top-width: thin;
+}
+</style>

package/src/components/wt-dummy/__tests__/WtDummy.spec.js

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

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

@@ -0,0 +1,73 @@
+<template>
+  <div class="wt-dummy">
+    <div class="wt-dummy__img">
+      <img
+        :src="src || dummy"
+        :width="size"
+        :height="size"
+        alt="dummy-picture"
+      >
+    </div>
+    <p
+      v-if="!hiddenText"
+      class="wt-dummy__text">{{ text || $t('webitelUI.dummy.text') }}</p>
+    <wt-button
+      v-if="showAction"
+      @click="emits('create')"
+      >{{ buttonText || $t('reusable.add') }}
+    </wt-button>
+  </div>
+</template>
+
+<script setup>
+import dummy from '../../assets/components/molecules/wt-dummy/dummy.svg';
+
+const props = defineProps({
+  src: {
+    type: String,
+  },
+  text: {
+    type: String,
+  },
+  buttonText: {
+    type: String,
+  },
+  showAction: {
+    type: Boolean,
+    default: false,
+  },
+  size: {
+    type: [String, Number],
+    default: 200,
+  },
+  hiddenText: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emits = defineEmits([
+  'create',
+]);
+
+</script>
+
+<style lang="scss" scoped>
+.wt-dummy {
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-sm);
+
+  &__img {
+    height: 200px;
+    width: 200px;
+  }
+
+  &__text {
+    @extend %typo-body-1;
+  }
+}
+</style>

package/src/components/wt-error-page/__tests__/wt-error-page.spec.js

@@ -0,0 +1,17 @@
+import { shallowMount } from '@vue/test-utils';
+import ErrorPage from '../wt-error-page.vue';
+
+describe('Error Page', () => {
+  it('renders a component', () => {
+    const wrapper = shallowMount(ErrorPage, { props: { type: '' } });
+    expect(wrapper.exists()).toBe(true);
+  });
+  it('renders a component with 404 type', () => {
+    const wrapper = shallowMount(ErrorPage, { props: { type: '404' } });
+    expect(wrapper.exists()).toBe(true);
+  });
+  it('renders a component with 403 type', () => {
+    const wrapper = shallowMount(ErrorPage, { props: { type: '403' } });
+    expect(wrapper.exists()).toBe(true);
+  });
+});

package/src/components/wt-error-page/wt-error-page.vue

@@ -0,0 +1,104 @@
+<template>
+  <section class="wt-error-page">
+    <article class="wt-error-page__wrapper">
+      <img
+        class="wt-error-page__img"
+        :src="errorPic.src"
+        :alt="errorPic.alt"
+      >
+      <h2
+        class="wt-error-page__title">{{ errorTitle }}</h2>
+      <p class="wt-error-page__text">{{ errorText }}</p>
+      <wt-button
+        class="wt-error-page__action"
+        @click="$emit('back')"
+      >{{ $t('webitelUI.errorPages.goBack') }}
+      </wt-button>
+    </article>
+  </section>
+</template>
+
+<script>
+import pic403 from '../../assets/components/organisms/wt-error-page/403.svg';
+import pic404 from '../../assets/components/organisms/wt-error-page/404.svg';
+
+export default {
+  name: 'wt-error-page',
+  props: {
+    type: {
+      type: String,
+      required: true,
+      options: ['403', '404'],
+    },
+  },
+  computed: {
+    errorPic() {
+      switch (this.type) {
+        case '403':
+          return { src: pic403, alt: 'Forbidden pic' };
+        case '404':
+          return { src: pic404, alt: 'Not found pic' };
+        default:
+          return '';
+      }
+    },
+    errorTitle() {
+      switch (this.type) {
+        case '403':
+          return this.$t('webitelUI.errorPages.page403.title');
+        case '404':
+          return this.$t('webitelUI.errorPages.page404.title');
+        default:
+          return '';
+      }
+    },
+    errorText() {
+      switch (this.type) {
+        case '403':
+          return this.$t('webitelUI.errorPages.page403.text');
+        case '404':
+          return this.$t('webitelUI.errorPages.page404.text');
+        default:
+          return '';
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.wt-error-page {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 100vw;
+  min-height: 100vh;
+  padding: 90px;
+  background: var(--main-color);
+
+  &__wrapper {
+    text-align: center;
+    //color: var(--text-contrast-color);
+  }
+
+  &__img {
+    max-width: 65vw;
+    width: 778px;
+    user-select: none;
+  }
+
+  &__title {
+    text-transform: uppercase;
+    margin-top: 69px;
+  }
+
+  &__text {
+    margin-top: 21px;
+  }
+
+  &__action {
+    margin-top: 40px;
+  }
+}
+</style>

package/src/components/wt-expansion-panel/__tests__/WtExpansionPanel.spec.js

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

package/src/components/wt-expansion-panel/wt-expansion-panel.vue

@@ -0,0 +1,67 @@
+<template>
+  <div
+    :class="[{'wt-expansion-panel--opened':open},
+    `wt-expansion-panel--${props.size}`]"
+    class="wt-expansion-panel"
+  >
+    <div
+      class="wt-expansion-panel-header"
+      tabindex="0"
+      @click="open = !open"
+      @keypress.enter="open = !open"
+    >
+      <slot name="title"></slot>
+      <wt-icon
+        icon="arrow-right"
+      ></wt-icon>
+    </div>
+    <wt-expand-transition>
+      <div v-show="open">
+        <slot></slot>
+      </div>
+    </wt-expand-transition>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const props = defineProps({
+  size: {
+    type: String,
+    default: 'md',
+  },
+});
+
+const open = ref(true);
+</script>
+
+<style lang="scss" scoped>
+.wt-expansion-panel {
+  .wt-expansion-panel-header {
+    @extend %typo-subtitle-1;
+    display: flex;
+    align-items: center;
+    padding: var(--spacing-2xs) var(--spacing-xs);
+    cursor: pointer;
+    border-radius: var(--spacing-2xs);
+    background-color: var(--secondary-color-50);
+  }
+
+  .wt-icon {
+    margin-left: auto;
+  }
+
+  &--sm {
+    .wt-expansion-panel-header {
+      @extend %typo-subtitle-2;
+    }
+  }
+
+  &--opened {
+    .wt-icon {
+      transform: rotate(90deg);
+    }
+  }
+}
+</style>

package/src/components/wt-filters-panel-wrapper/__tests__/WtFiltersPanelWrapper.spec.js

@@ -0,0 +1,24 @@
+import { shallowMount } from '@vue/test-utils';
+import FiltersPanelWrapper from '../wt-filters-panel-wrapper.vue';
+
+describe('Filters Panel Wrapper', () => {
+  it('renders a component', () => {
+    const wrapper = shallowMount(FiltersPanelWrapper);
+    expect(wrapper.exists()).toBe(true);
+  });
+  it('emits "reset" event at wt-table-actions "filterReset" event', () => {
+    const wrapper = shallowMount(FiltersPanelWrapper);
+    wrapper.findComponent({ name: 'wt-table-actions' })
+    .vm.$emit('input', 'filterReset');
+    expect(wrapper.emitted().reset).toBeTruthy();
+  });
+  it(`toggles "filters-panel-wrapper--opened" class at
+   wt-table-actions "settings" event`, async () => {
+    const wrapper = shallowMount(FiltersPanelWrapper);
+    expect(wrapper.classes().includes('filters-panel-wrapper--opened')).toBe(false);
+    wrapper.findComponent({ name: 'wt-table-actions' })
+    .vm.$emit('input', 'settings');
+    await wrapper.vm.$nextTick();
+    expect(wrapper.classes().includes('filters-panel-wrapper--opened')).toBe(true);
+  });
+});