@webitel/ui-sdk 0.1.11 → 0.1.112

package/src/components/molecules/wt-progress-bar/wt-progress-bar.vue

@@ -0,0 +1,80 @@
+<template>
+  <div class="wt-progress-bar" :class="[{
+      'wt-progress-bar--overflow': isOverflow,
+     },
+     `wt-progress-bar--${color}`
+     ]">
+    <span class="wt-progress-bar__progress" :style="`width: ${this.progressWidth}%;`"></span>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'wt-progress-bar',
+  props: {
+    max: {
+      type: Number,
+      default: 100,
+    },
+    value: {
+      type: Number,
+      default: 0,
+    },
+    color: {
+      type: String,
+      default: 'primary',
+      options: ['primary', 'secondary', 'success', 'danger'],
+    },
+  },
+  computed: {
+    progress() {
+      return (this.value * 100) / this.max;
+    },
+    isOverflow() {
+      return this.progress >= 100;
+    },
+    progressWidth() {
+      return this.isOverflow ? 100 : this.progress;
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.wt-progress-bar {
+  box-sizing: border-box;
+  width: 100%;
+  position: relative;
+  padding: var(--progress-bar-padding);
+  line-height: 0;
+  border-radius: var(--border-radius);
+  box-shadow: var(--progress-bar-box-shadow);
+}
+
+.wt-progress-bar__progress {
+  display: inline-block;
+  height: var(--progress-bar-height);
+  will-change: width;
+  background: var(--accent-color);
+  border-radius: var(--border-radius) 0 0 var(--border-radius);
+  transition: var(--transition);
+  box-shadow: var(--progress-bar-box-shadow);
+}
+
+.wt-progress-bar--primary .wt-progress-bar__progress {
+  background: var(--progress-bar-bg-color--primary);
+}
+.wt-progress-bar--secondary .wt-progress-bar__progress {
+  background: var(--progress-bar-bg-color--secondary);
+}
+.wt-progress-bar--success .wt-progress-bar__progress {
+  background: var(--progress-bar-bg-color--success);
+}
+.wt-progress-bar--danger .wt-progress-bar__progress {
+  background: var(--progress-bar-bg-color--danger);
+}
+
+.wt-progress-bar--overflow .wt-progress-bar__progress {
+  border-radius: var(--border-radius);
+}
+</style>

package/src/components/molecules/wt-radio/__tests__/WtRadio.spec.js

@@ -0,0 +1,42 @@
+import { shallowMount } from '@vue/test-utils';
+import WtRadio from '../wt-radio.vue';
+import WtLabel from '../../wt-label/wt-label.vue';
+import WtIcon from '../../../atoms/wt-icon/wt-icon.vue';
+
+describe('WtRadio', () => {
+  it('renders a component', () => {
+    const wrapper = shallowMount(WtRadio, {
+      stubs: {
+        WtLabel,
+        WtIcon,
+      },
+    });
+    expect(wrapper.classes('wt-radio')).toBe(true);
+  });
+
+  it('renders label text when passed', () => {
+    const label = 'Hello there';
+    const wrapper = shallowMount(WtRadio, {
+      stubs: {
+        WtLabel,
+        WtIcon,
+      },
+      propsData: { label },
+    });
+    expect(wrapper.find('.wt-radio__label').text()).toBe(label);
+  });
+
+  it('toggles passed value at click', () => {
+    const selected = '';
+    const value = 'jest';
+    const wrapper = shallowMount(WtRadio, {
+      stubs: {
+        WtLabel,
+        WtIcon,
+      },
+      propsData: { selected, value },
+    });
+    wrapper.find('.wt-radio__wrapper').trigger('click');
+    expect(wrapper.emitted().input.pop()).toEqual([value]);
+  });
+});

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

@@ -0,0 +1,168 @@
+<template>
+  <div
+    class="wt-radio"
+    :class="{
+      'wt-radio--active': isChecked,
+      'wt-radio--outline': outline,
+      'wt-radio--disabled': disabled,
+    }"
+  >
+    <wt-label class="wt-radio__wrapper">
+      <input
+        class="wt-radio__input"
+        type="radio"
+        :value="value"
+        :checked="isChecked"
+        :disabled="disabled"
+        @input="inputHandler"
+      >
+      <span class="wt-radio__checkmark">
+      <wt-icon :icon="radioIcon"></wt-icon>
+    </span>
+      <!-- @slot Custom input label -->
+      <slot name="label" v-bind="{ label, isChecked, disabled }">
+        <div v-if="label" class="wt-radio__label">{{ label }}</div>
+      </slot>
+    </wt-label>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'wt-radio',
+    props: {
+      // value, set by radio
+      value: {
+        type: [String, Number, Boolean],
+        default: '',
+      },
+      // currently selected value
+      selected: {
+        type: [String, Number, Boolean],
+        default: '',
+      },
+      label: {
+        type: String,
+        default: '',
+      },
+      required: {
+        type: Boolean,
+        default: false,
+      },
+      disabled: {
+        type: Boolean,
+        default: false,
+      },
+      outline: {
+        type: Boolean,
+        default: false,
+      },
+    },
+    model: {
+      prop: 'selected',
+      event: 'input',
+    },
+    computed: {
+      isChecked() {
+        return this.value === this.selected;
+      },
+      radioIcon() {
+        return this.isChecked ? 'radio--checked' : 'radio';
+      },
+    },
+    methods: {
+      inputHandler() {
+        this.$emit('input', this.value);
+      },
+    },
+  };
+</script>
+
+<style lang="scss" scoped>
+  /* Customize the label (the container) */
+  .wt-radio {
+    @include width-fit-content;
+    box-sizing: border-box;
+  }
+
+  .wt-radio__wrapper {
+    position: relative;
+    display: flex;
+    align-items: center;
+    user-select: none;
+    cursor: pointer;
+  }
+
+  .wt-radio__label {
+    margin-left: var(--radio-icon-margin);
+    transition: var(--transition);
+  }
+
+  /* Hide the browser's default radio button */
+  .wt-radio__input {
+    position: absolute;
+    width: 0;
+    height: 0;
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  .wt-radio:hover {
+    .wt-radio__label {
+      color: var(--form-label--hover-color);
+    }
+
+    ::v-deep .wt-icon__icon {
+      fill: var(--icon-color--hover);
+    }
+  }
+
+  .wt-radio--active {
+    .wt-radio__label {
+      color: var(--form-label--active-color);
+    }
+
+    ::v-deep .wt-icon__icon {
+      fill: var(--icon-color-active);
+    }
+  }
+
+  .wt-radio--outline {
+    .wt-radio__label {
+      color: var(--form-outline-label-color);
+    }
+
+    ::v-deep .wt-icon__icon {
+      fill: var(--icon-outline-color);
+    }
+
+    &.wt-radio--active {
+      .wt-radio__label {
+        color: var(--form-label--active-color);
+      }
+
+      ::v-deep .wt-icon__icon {
+        fill: var(--icon-outline--active-color);
+      }
+    }
+
+    &:hover {
+
+      ::v-deep .wt-icon__icon {
+        fill: var(--icon-outline--hover-color);
+      }
+    }
+  }
+
+  .wt-radio--disabled {
+    pointer-events: none;
+
+    .wt-radio__label {
+      color: var(--form-label--disabled-color);
+    }
+
+    ::v-deep .wt-icon__icon {
+      fill: var(--icon-color-disabled);
+    }
+  }
+</style>

package/src/components/molecules/wt-search-bar/__tests__/WtSearchBar.spec.js

@@ -0,0 +1,36 @@
+import { shallowMount } from '@vue/test-utils';
+import WtSearchBar from '../wt-search-bar.vue';
+
+describe('WtSearchBar', () => {
+  it('renders a component', () => {
+    const wrapper = shallowMount(WtSearchBar, {
+      stubs: {
+        WtIcon: true,
+        WtIconBtn: true,
+      },
+    });
+    expect(wrapper.classes('wt-search-bar')).toBe(true);
+  });
+
+  it('debounces search event when debounce prop is true', async (done) => {
+    const props = {
+      value: '',
+      debounce: true,
+      debounceDelay: 100,
+    };
+    const wrapper = shallowMount(WtSearchBar, {
+      stubs: {
+        WtIcon: true,
+        WtIconBtn: true,
+      },
+      props,
+    });
+    props.value = 'val';
+    wrapper.setProps(props);
+    expect(wrapper.emitted().search).toBeFalsy();
+    await setTimeout(() => {
+      expect(wrapper.emitted().search[0].length).toBe(1);
+      done();
+    }, 1000);
+  });
+});

package/src/components/molecules/wt-search-bar/wt-search-bar.vue

@@ -0,0 +1,203 @@
+<template>
+  <div
+    class="wt-search-bar"
+    :class="{
+      'wt-search-bar--outline': outline,
+    }"
+  >
+    <div class="wt-search-bar__wrapper">
+      <input
+        class="wt-search-bar__input"
+        :value="value"
+        :placeholder="placeholder"
+        type="search"
+        v-on="listeners"
+      >
+      <wt-icon
+        class="wt-search-bar__search-icon"
+        icon="search"
+      ></wt-icon>
+      <wt-icon-btn
+        class="wt-search-bar__reset-icon-btn"
+        :class="{ 'hidden': !value }"
+        icon="remove-rounded"
+        size="sm"
+        @click="$emit('input', '')"
+      ></wt-icon-btn>
+    </div>
+  </div>
+</template>
+
+<script>
+  import debounce from '../../../scripts/debounce';
+
+  export default {
+    name: 'wt-search-bar',
+    props: {
+      /**
+       * Current search-bar value (`v-model`)
+       */
+      value: {
+        type: String,
+        default: '',
+      },
+      /**
+       * search-bar placeholder
+       */
+      placeholder: {
+        type: String,
+        default: 'Search',
+      },
+      debounce: {
+        type: Boolean,
+        default: false,
+      },
+      debounceDelay: {
+        type: Number,
+        default: 1000,
+      },
+      outline: {
+        type: Boolean,
+        default: false,
+      },
+    },
+
+    watch: {
+      value() {
+        this.search.call(this);
+      },
+    },
+
+    created() {
+      if (this.debounce) {
+        this.search = debounce(this.search, this.debounceDelay);
+      }
+    },
+
+    computed: {
+      listeners() {
+        return {
+          ...this.$listeners,
+          input: (event) => this.$emit('input', event.target.value),
+          keyup: this.handleKeyup,
+        };
+      },
+    },
+
+    methods: {
+      search() {
+        this.$emit('search', this.value);
+      },
+      handleKeyup(event) {
+        if (event.key === 'Enter') {
+          this.$emit('enter');
+          event.preventDefault();
+        } else if (event.key === 'Esc') {
+          this.$emit('input', '');
+          event.preventDefault();
+        }
+      },
+    },
+  };
+</script>
+
+<style lang="scss" scoped>
+  .wt-search-bar {
+    cursor: text;
+  }
+
+  .wt-search-bar__wrapper {
+    position: relative;
+  }
+
+  .wt-search-bar__search-icon {
+    position: absolute;
+    top: 50%;
+    left: var(--input-icon-margin);
+    transform: translateY(-50%);
+    pointer-events: none;
+  }
+
+  .wt-search-bar__reset-icon-btn {
+    position: absolute;
+    top: 50%;
+    right: var(--input-icon-margin);
+    transform: translateY(-50%);
+
+    .wt-search-bar:not(:focus-within) & {
+      opacity: 0;
+      pointer-events: none;
+    }
+  }
+
+  .wt-search-bar__input {
+    @extend %typo-body-lg;
+
+    display: block;
+    width: 100%;
+    box-sizing: border-box;
+    padding: var(--search-bar-padding);
+    color: var(--form-input-color);
+    border: var(--input-border);
+    border-color: var(--form-border-color);
+    border-radius: var(--border-radius);
+    transition: var(--transition);
+
+    &::placeholder {
+      color: var(--form-placeholder-color)
+    }
+
+    .wt-search-bar:hover &,
+    &:focus {
+      border-color: var(--form-border--hover-color);
+
+      &::placeholder {
+        color: var(--form-placeholder--hover-color)
+      }
+    }
+
+    .wt-search-bar--outline & {
+      border-color: var(--form-outline-border-color);
+
+      &::placeholder {
+        color: var(--form-outline-placeholder-color)
+      }
+    }
+
+    .wt-search-bar--outline:hover &,
+    .wt-search-bar--outline &:focus {
+      border-color: var(--form-outline-border--hover-color);
+
+      &::placeholder {
+        color: var(--form-outline-placeholder--hover-color)
+      }
+    }
+  }
+
+  /* make icons black */
+  .wt-search-bar:hover ::v-deep .wt-icon__icon,
+  .wt-search-bar:focus-within ::v-deep .wt-icon__icon {
+    fill: var(--icon-color--hover);
+  }
+
+  /* clears the 'X' from Internet Explorer */
+  .wt-search-bar__input::-ms-clear {
+    display: none;
+    width: 0;
+    height: 0;
+  }
+
+  .wt-search-bar__input::-ms-reveal {
+    display: none;
+    width: 0;
+    height: 0;
+  }
+
+  /* clears the 'X' from Chrome */
+  .wt-search-bar__input::-webkit-search-decoration,
+  .wt-search-bar__input::-webkit-search-cancel-button,
+  .wt-search-bar__input::-webkit-search-results-button,
+  .wt-search-bar__input::-webkit-search-results-decoration {
+    display: none;
+  }
+</style>

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

@@ -0,0 +1,53 @@
+import { shallowMount } from '@vue/test-utils';
+import WtSelect from '../wt-select.vue';
+import WtLabel from '../../wt-label/wt-label.vue';
+
+describe('WtSelect', () => {
+  it('renders a component', () => {
+    const wrapper = shallowMount(WtSelect, {
+      stubs: {
+        WtLabel,
+        WtIcon: true,
+      },
+    });
+    expect(wrapper.classes('wt-select')).toBe(true);
+  });
+
+  it('renders label text when passed', () => {
+    const label = 'Hello there';
+    const wrapper = shallowMount(WtSelect, {
+      stubs: {
+        WtLabel,
+        WtIcon: true,
+      },
+      propsData: { label },
+    });
+    expect(wrapper.find('.wt-label').text()).toBe(label);
+  });
+
+  it('Correctly computes internal search options', () => {
+    const options = ['1', '2'];
+    const wrapper = shallowMount(WtSelect, {
+      stubs: {
+        WtLabel,
+        WtIcon: true,
+      },
+      propsData: { options },
+    });
+    expect(wrapper.vm.selectOptions).toBe(options);
+  });
+
+  it('Correctly computes internal search options', async () => {
+    const options = ['1', '2'];
+    const searchOptions = ['1'];
+    const wrapper = shallowMount(WtSelect, {
+      stubs: {
+        WtLabel,
+        WtIcon: true,
+      },
+      propsData: { options, internalSearch: false, search: () => searchOptions },
+    });
+    await wrapper.vm.$nextTick();
+    expect(wrapper.vm.selectOptions).toBe(searchOptions);
+  });
+});