@webitel/ui-sdk 0.1.1-vue3 → 0.1.2-vite

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

@@ -0,0 +1,205 @@
+<template>
+  <button
+    class="wt-button"
+    :class="[
+      colorClass,
+      `wt-button--size-${size}`,
+      {
+        'wt-button--contains-icon': containsIcon,
+        'wt-button--wide': wide,
+        'wt-button--disabled': disabled,
+        'wt-button--loading': loading,
+      }
+    ]"
+    type="button"
+    :disabled="disabled"
+    @click="$emit('click', $event)"
+  >
+    <wt-loader
+      v-if="loading"
+      size="sm"
+      :color="loaderColor"
+    ></wt-loader>
+    <slot v-else>no content provided</slot>
+  </button>
+</template>
+
+<script>
+export default {
+  name: 'wt-button',
+  props: {
+    /**
+     * @values 'primary', 'secondary', 'success', 'error', 'transfer', 'job', 'info'
+     * @example <wt-button color="success"></wt-button>
+     */
+    color: {
+      type: String,
+      default: 'primary',
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    loading: {
+      type: Boolean,
+      default: false,
+    },
+    /**
+     * @values 'sm', 'md'
+     * @example <wt-button size="sm"></wt-button>
+     */
+    size: {
+      type: String,
+      default: 'md',
+      options: ['sm', 'md'],
+    },
+    /**
+     * Stretches button to all available width
+     */
+    wide: {
+      type: Boolean,
+      default: false,
+    },
+    /**
+     * sets wt-button line-height to 0 to prevent height changing: [stack overflow](https://stackoverflow.com/a/11126701)
+     */
+    containsIcon: {
+      type: Boolean,
+      default: false,
+      description: 'https://stackoverflow.com/a/11126701',
+    },
+  },
+  emits: ['click'],
+  computed: {
+    colorClass() {
+      if (!this.disabled) return `${this.color}`;
+      return '';
+    },
+    loaderColor() {
+      if (['success', 'transfer', 'error', 'job'].includes(this.color)) return 'main';
+      return 'contrast';
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+@import './variables.scss';
+</style>
+
+<style lang="scss" scoped>
+.wt-button {
+  @extend %typo-button;
+  box-sizing: border-box;
+  position: relative;
+  display: inline-block;
+  min-width: var(--btn-min-width);
+  padding: var(--btn-padding);
+  color: var(--btn-primary-text-color);
+  background-color: var(--btn-primary-color);
+  background-clip: padding-box;
+  border-radius: var(--border-radius);
+  transition: var(--transition);
+  cursor: pointer;
+
+  &--wide {
+    width: 100%;
+  }
+
+  // https://stackoverflow.com/a/11126701
+  &--contains-icon {
+    line-height: 0;
+  }
+
+  &--loading {
+    pointer-events: none;
+  }
+
+  &--size {
+    &-sm {
+      padding: var(--btn-padding--size-sm);
+    }
+
+    &-md {
+      padding: var(--btn-padding);
+    }
+  }
+
+  &:hover,
+  &:active {
+    background-color: var(--btn-primary-hover-color);
+  }
+
+  &.secondary {
+    color: var(--btn-secondary-text-color);
+    background-color: var(--btn-secondary-color);
+
+    &:hover,
+    &:active {
+      background-color: var(--btn-secondary-hover-color);
+    }
+  }
+
+  &.success {
+    color: var(--btn-success-text-color);
+    background-color: var(--btn-success-color);
+
+    &:hover,
+    &:active {
+      background-color: var(--btn-success-hover-color);
+    }
+  }
+
+  &.info {
+    color: var(--btn-info-text-color);
+    background-color: var(--btn-info-color);
+
+    &:hover,
+    &:active {
+      background-color: var(--btn-info-hover-color);
+    }
+  }
+
+  &.job {
+    color: var(--btn-job-text-color);
+    background-color: var(--btn-job-color);
+
+    &:hover,
+    &:active {
+      background-color: var(--btn-job-hover-color);
+    }
+  }
+
+  &.transfer {
+    color: var(--btn-transfer-text-color);
+    background-color: var(--btn-transfer-color);
+
+    &:hover,
+    &:active {
+      background-color: var(--btn-transfer-hover-color);
+    }
+  }
+
+  &.error {
+    color: var(--btn-error-text-color);
+    background-color: var(--btn-error-color);
+
+    &:hover,
+    &:active {
+      background-color: var(--btn-error-hover-color);
+    }
+  }
+
+  &.wt-button--disabled {
+    color: var(--btn-disabled-text-color);
+    background-color: var(--btn-disabled-color);
+    cursor: auto;
+    pointer-events: none;
+    box-shadow: none;
+  }
+
+  .wt-loader {
+    margin: auto;
+  }
+}
+</style>

package/src/components/wt-button-select/Readme.md

@@ -0,0 +1,13 @@
+### Note: all buttons props are passed as "$attrs"
+
+Different colors
+
+```vue
+const options = [{ text: 'lorem ipsum' }, { text: 'dolor sit amet' }, { text: 'consectetur adipiscing elit' }];
+
+  <div style="display: flex; gap: var(--spacing-xs);">
+    <wt-button-select :options="this.options">Primary</wt-button-select>
+    <wt-button-select color="secondary" :options="this.options">Secondary</wt-button-select>
+    <wt-button-select disabled :options="this.options">Disabled</wt-button-select>
+  </div>
+``` 

package/src/components/{molecules/wt-button-select → wt-button-select}/__tests__/WtButtonSelect.spec.js

@@ -1,6 +1,13 @@
 import { shallowMount, mount } from '@vue/test-utils';
 import WtSelectButton from '../wt-button-select.vue';
 
+// helps to mock @floating-ui/vue autoUpdate method
+global.ResizeObserver = jest.fn().mockImplementation(() => ({
+  observe: jest.fn(),
+  unobserve: jest.fn(),
+  disconnect: jest.fn(),
+}));
+
 describe('WtSelectButton', () => {
   it('renders a component', () => {
     const wrapper = shallowMount(WtSelectButton);
@@ -9,7 +16,7 @@ describe('WtSelectButton', () => {
 
   it('renders a button content via default slot', () => {
     const content = 'button content';
-    const wrapper = shallowMount(WtSelectButton, {
+    const wrapper = mount(WtSelectButton, {
       slots: {
         default: content,
       },
@@ -17,12 +24,16 @@ describe('WtSelectButton', () => {
     expect(wrapper.find('.wt-button-select__button').text()).toBe(content);
   });
 
-  it('should rotate the arrow', () => {
+  it('should rotate the arrow', async () => {
     const wrapper = mount(WtSelectButton, {
-      data: () => ({
-        isOpened: true,
-      }),
+      props: {
+        options: [],
+      },
     });
+    const arrowBtn = wrapper.findAllComponents({ name: 'wt-button' })
+           .find((component) => component.classes().includes('wt-button-select__select-btn'));
+    arrowBtn.vm.$emit('click');
+    await wrapper.vm.$nextTick();
     const wtIcon = wrapper.find('.wt-button-select__select-arrow');
     expect(wtIcon.classes()).toContain('wt-button-select__select-arrow--active');
   });

package/src/components/wt-button-select/_variables.scss

@@ -0,0 +1,7 @@
+:root {
+  --button-select-button-padding: var(--spacing-xs) var(--spacing-sm);
+
+  --button-select-icon-button-padding: var(--spacing-xs);
+
+  --button-select-buttons-gap: 1px;
+}

package/src/components/wt-button-select/wt-button-select.vue

@@ -0,0 +1,130 @@
+<template>
+  <div
+    v-clickaway="atClickaway"
+    class="wt-button-select"
+  >
+    <wt-button
+      v-bind="$attrs"
+      :color="color"
+      :disabled="disabled"
+      class="wt-button-select__button"
+      @click="$emit('click', $event)"
+    >
+      <slot></slot>
+    </wt-button>
+
+    <wt-context-menu
+      :options="options"
+      :visible="isOpened"
+      @click="selectOption"
+    >
+      <template v-slot:activator>
+        <wt-button
+          v-bind="$attrs"
+          :color="color"
+          :disabled="disabled"
+          :loading="false"
+          class="wt-button-select__select-btn"
+          @click="isOpened = !isOpened"
+        >
+          <wt-icon
+            :class="{'wt-button-select__select-arrow--active': isOpened}"
+            :color="color === 'primary' ? 'on-primary' : 'default'"
+            :disabled="disabled"
+            class="wt-button-select__select-arrow"
+            icon="arrow-down"
+          ></wt-icon>
+        </wt-button>
+      </template>
+    </wt-context-menu>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const props = defineProps({
+  /**
+   * See context-menu component docs
+   */
+  options: {
+    type: Array,
+    required: true,
+  },
+  /**
+   * @values 'primary', 'secondary'
+   * @example <wt-button color="secondary"></wt-button>
+   */
+  color: {
+    type: String,
+    default: 'primary',
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits([
+  /**
+   * @event click
+   */
+  'click',
+  /**
+   * Click on option in context-menu
+   *
+   * @event click:option
+   *
+   * @property {object} option clicked option object
+   * @property {index} index clicked option index in options list
+   */
+  'click:option',
+]);
+
+const isOpened = ref(false);
+
+function selectOption({ option, index }) {
+  emit('click:option', option, index);
+  isOpened.value = false;
+}
+
+function atClickaway() {
+  isOpened.value = false;
+}
+
+</script>
+
+<style lang="scss">
+@import './variables.scss';
+</style>
+
+<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;
+
+  // 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 → wt-checkbox}/__tests__/WtCheckbox.spec.js

@@ -1,7 +1,7 @@
-import { shallowMount } from '@vue/test-utils';
+import { shallowMount, mount } 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';
+import WtIcon from '../../wt-icon/wt-icon.vue';
 
 describe('WtCheckbox', () => {
   it('renders a component', () => {
@@ -16,24 +16,24 @@ describe('WtCheckbox', () => {
 
   it('renders label text when passed', () => {
     const label = 'Hello there';
-    const wrapper = shallowMount(WtCheckbox, {
+    const wrapper = mount(WtCheckbox, {
       stubs: {
         WtLabel,
         WtIcon,
       },
-      propsData: { label },
+      props: { label },
     });
     expect(wrapper.find('.wt-checkbox__label').text()).toBe(label);
   });
 
   it('toggles passed value at click', () => {
     const selected = true;
-    const wrapper = shallowMount(WtCheckbox, {
+    const wrapper = mount(WtCheckbox, {
       stubs: {
         WtLabel,
         WtIcon,
       },
-      propsData: { selected },
+      props: { selected },
     });
     wrapper.find('.wt-checkbox__input').trigger('change');
     expect(wrapper.emitted().change[0]).toEqual([!selected]);

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

@@ -0,0 +1,191 @@
+<template>
+  <div
+    class="wt-checkbox"
+    :class="{
+      'wt-checkbox--active': isChecked,
+      'wt-checkbox--outline': outline,
+      'wt-checkbox--disabled': disabled,
+    }"
+  >
+    <wt-label
+      v-bind="labelProps"
+      class="wt-checkbox__wrapper"
+    >
+      <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
+        v-bind="{ label, isChecked, disabled }"
+        name="label"
+      >
+        <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',
+    },
+  },
+  emits: ['change'],
+  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">
+@import './variables.scss';
+</style>
+
+<style lang="scss" scoped>
+
+.wt-checkbox {
+  @include width-fit-content;
+  box-sizing: border-box;
+
+  .wt-label {
+    cursor: pointer;
+  }
+}
+
+.wt-checkbox__wrapper {
+  position: relative;
+  display: flex;
+  align-items: center;
+  user-select: none;
+
+  .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 */
+.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/{css/components/atoms → components}/wt-chip/wt-chip.scss

@@ -16,7 +16,7 @@
   }
 
   &--accent-color {
-    background: var(--accent-color);
+    background: var(--primary-color);
   }
 
   &--secondary-color {

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

@@ -0,0 +1,24 @@
+<template>
+  <span class="wt-chip" :class="`wt-chip--${color}-color`">
+    <slot></slot>
+  </span>
+</template>
+
+<script>
+export default {
+  name: 'wt-chip',
+  props: {
+    color: {
+      type: String,
+      default: 'main',
+      options: ['main', 'outline', 'accent', 'secondary', 'secondary-50', 'success', 'danger', 'transfer'],
+      notes: '"main" and "outline" are chip-specific colors',
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+@import './wt-chip.scss';
+@import './variables.scss';
+</style>

package/src/components/{atoms/wt-context-menu → wt-context-menu}/__tests__/WtContextMenu.spec.js

@@ -3,7 +3,7 @@ import WtContextMenu from '../wt-context-menu.vue';
 
 describe('WtContextMenu', () => {
   it('renders a component', () => {
-    const wrapper = shallowMount(WtContextMenu, { propsData: { options: [] } });
+    const wrapper = shallowMount(WtContextMenu, { props: { options: [] } });
     expect(wrapper.classes('wt-context-menu')).toBe(true);
   });
 });

package/src/{css/components/atoms → components}/wt-context-menu/_variables.scss

@@ -4,4 +4,6 @@
   --context-menu-background-color: var(--main-color);
 
   --context-menu-option-padding: var(--spacing-xs);
+
+  --context-menu-option-color--disabled: var(--text--disabled-color);
 }