@webitel/ui-sdk 0.1.13 → 0.1.100

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