@webitel/ui-sdk 0.1.3 → 0.1.4-vue3

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

@@ -3,200 +3,286 @@
     class="wt-button"
     :class="[
       colorClass,
+      `wt-button--size-${size}`,
       {
+        'wt-button--contains-icon': containsIcon,
         'wt-button--outline': outline,
         'wt-button--wide': wide,
-        'wt-button--large': large,
+        'wt-button--rounded': rounded,
         'wt-button--disabled': disabled,
+        'wt-button--loading': loading,
       }
     ]"
     type="button"
     :disabled="disabled"
+    @click="$emit('click', $event)"
   >
-    <slot></slot>
+    <wt-loader
+      v-if="loading"
+      size="sm"
+      :color="loaderColor"
+    ></wt-loader>
+    <slot v-else></slot>
   </button>
 </template>
 
 <script>
-  export default {
-    name: 'wt-button',
-    props: {
-      color: {
-        type: String,
-        default: '',
-      },
-      disabled: {
-        type: Boolean,
-        default: false,
-      },
-      large: {
-        type: Boolean,
-        default: false,
-      },
-      outline: {
-        type: Boolean,
-        default: false,
-      },
-      wide: {
-        type: Boolean,
-        default: false,
-      },
+export default {
+  name: 'wt-button',
+  props: {
+    color: {
+      type: String,
+      default: 'accent',
+      options: ['accent', 'secondary', 'success', 'danger', 'transfer', 'job'],
     },
-    computed: {
-      colorClass() {
-        if (!this.disabled) return `${this.color}`;
-        return '';
-      },
+    disabled: {
+      type: Boolean,
+      default: false,
     },
-  };
+    outline: {
+      type: Boolean,
+      default: false,
+    },
+    loading: {
+      type: Boolean,
+      default: false,
+    },
+    size: {
+      type: String,
+      default: 'md',
+      options: ['sm', 'md'],
+    },
+    wide: {
+      type: Boolean,
+      default: false,
+    },
+    rounded: {
+      type: Boolean,
+      default: false,
+    },
+    containsIcon: {
+      type: Boolean,
+      default: false,
+      description: 'https://stackoverflow.com/a/11126701',
+    },
+  },
+  computed: {
+    colorClass() {
+      if (!this.disabled) return `${this.color}`;
+      return '';
+    },
+    loaderColor() {
+      if (['success', 'transfer', 'danger', 'job'].includes(this.color)) return 'main';
+      return 'contrast';
+    },
+  },
+};
 </script>
 
 <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-dark-font-color);
+  background-color: var(--btn-accent-color);
+  background-clip: padding-box;
+  border-radius: var(--border-radius);
+  transition: var(--transition);
+  cursor: pointer;
 
-  .wt-button {
-    @extend %typo-btn;
-    position: relative;
-    display: inline-block;
-    padding: var(--btn-padding);
-    border: var(--btn-border);
-    color: var(--btn-dark-font-color);
-    background: var(--btn-primary-color);
-    border-color: var(--btn-primary-color);
-    border-radius: var(--border-radius);
-    transition: var(--transition);
-    cursor: pointer;
-
-    &--wide {
-      width: 100%;
+  &--wide {
+    width: 100%;
+  }
+
+  &--rounded {
+    border-radius: var(--border-radius--pill);
+  }
+
+  // https://stackoverflow.com/a/11126701
+  &--contains-icon {
+    line-height: 0;
+  }
+
+  &--size {
+    &-sm {
+      padding: var(--btn-padding--size-sm);
     }
 
-    &--large {
-      @extend %typo-btn-lg;
-      padding: var(--btn-lg-padding); // 16px 30px - border
+    &-md {
+      padding: var(--btn-padding--size-md);
     }
+  }
 
-    &--disabled {
-      color: var(--disabled-color);
-      background: var(--btn-disabled-bg-color);
-      border-color: var(--disabled-color);
-      cursor: auto;
-      pointer-events: none;
+  &--loading {
+    pointer-events: none;
+  }
+
+  &:hover,
+  &:active {
+    background-color: var(--btn-accent--hover-color);
+    border-color: var(--btn-accent--hover-color);
+  }
+
+  &.secondary {
+    color: var(--btn-dark-font-color);
+    border-color: var(--btn-secondary-color);
+    background-color: var(--btn-secondary-color);
+
+    &:hover,
+    &:active {
+      color: var(--btn-dark-font-color);
+      border-color: var(--btn-secondary--hover-color);
+      background-color: var(--btn-secondary--hover-color);
     }
+  }
+
+  &.success {
+    color: var(--btn-light-font-color);
+    background-color: var(--btn-true-color);
+    border-color: var(--btn-true-color);
 
     &:hover,
     &:active {
-      background: var(--btn-primary--hover-color);
-      border-color: var(--btn-primary--hover-color);
+      background-color: var(--btn-true--hover-color);
+      border-color: var(--btn-true--hover-color);
     }
+  }
 
-    &:not(&--outline) {
-      &.secondary {
-        color: var(--btn-secondary-color);
-        border-color: var(--btn-secondary-color);
-        background: var(--btn-secondary-bg-color);
-
-        &:hover,
-        &:active {
-          color: var(--btn-secondary--hover-color);
-          border-color: var(--btn-secondary--hover-color);
-          background: var(--btn-secondary-bg-color);
-        }
-      }
+  &.transfer {
+    color: var(--btn-light-font-color);
+    background-color: var(--btn-transfer-color);
+    border-color: var(--btn-transfer-color);
 
-      &.success {
-        color: var(--btn-light-font-color);
-        background: var(--btn-true-color);
-        border-color: var(--btn-true-color);
+    &:hover,
+    &:active {
+      background-color: var(--btn-transfer--hover-color);
+      border-color: var(--btn-transfer--hover-color);
+    }
+  }
 
-        &:hover,
-        &:active {
-          background: var(--btn-true--hover-color);
-          border-color: var(--btn-true--hover-color);
-        }
-      }
+  &.job {
+    color: var(--btn-light-font-color);
+    background-color: var(--btn-job-color);
+    border-color: var(--btn-job-color);
 
-      &.transfer {
-        color: var(--btn-light-font-color);
-        background: var(--btn-transfer-color);
-        border-color: var(--btn-transfer-color);
+    &:hover,
+    &:active {
+      background-color: var(--btn-job--hover-color);
+      border-color: var(--btn-job--hover-color);
+    }
+  }
 
-        &:hover,
-        &:active {
-          background: var(--btn-transfer--hover-color);
-          border-color: var(--btn-transfer--hover-color);
-        }
-      }
+  &.danger {
+    color: var(--btn-light-font-color);
+    background-color: var(--btn-false-color);
+    border-color: var(--btn-false-color);
 
-      &.danger {
-        color: var(--btn-light-font-color);
-        background: var(--btn-false-color);
-        border-color: var(--btn-false-color);
+    &:hover,
+    &:active {
+      background-color: var(--btn-false--hover-color);
+      border-color: var(--btn-false--hover-color);
+    }
+  }
 
-        &:hover,
-        &:active {
-          background: var(--btn-false--hover-color);
-          border-color: var(--btn-false--hover-color);
-        }
+  &.wt-button--outline {
+    border: var(--btn-border);
+    padding: var(--btn-padding--outline);
+    background-color: transparent;
+    color: var(--btn-accent-color);
+    border-color: var(--btn-accent-color);
+
+    &.wt-button--size {
+      &-sm {
+        padding: var(--btn-padding--size-sm--outline);
       }
-    }
 
-    &--outline {
-      &:not(.wt-button--disabled) {
-        color: var(--btn-primary-color);
-        border-color: var(--btn-primary-color);
-        background: transparent;
+      &-md {
+        padding: var(--btn-padding--size-md--outline);
       }
+    }
+
+    &:hover,
+    &:active {
+      color: var(--btn-accent--hover-color);
+      border-color: var(--btn-accent--hover-color);
+      background-color: transparent;
+    }
+
+    &.secondary {
+      color: var(--btn-dark-font-color);
+      border-color: var(--btn-secondary-color);
 
       &:hover,
       &:active {
-        color: var(--btn-primary--hover-color);
-        border-color: var(--btn-primary--hover-color);
-        background: transparent;
+        border-color: var(--btn-secondary--hover-color);
+        background-color: transparent;
       }
+    }
 
-      &.secondary {
-        color: var(--btn-secondary-color);
-        border-color: var(--btn-secondary-color);
+    &.success {
+      color: var(--btn-true-color);
+      border-color: var(--btn-true-color);
 
-        &:hover,
-        &:active {
-          color: var(--btn-secondary--hover-color);
-          border-color: var(--btn-secondary--hover-color);
-        }
+      &:hover,
+      &:active {
+        color: var(--btn-true--hover-color);
+        border-color: var(--btn-true--hover-color);
+        background-color: transparent;
       }
+    }
 
-      &.success {
-        color: var(--btn-true-color);
-        border-color: var(--btn-true-color);
+    &.transfer {
+      color: var(--btn-transfer-color);
+      border-color: var(--btn-transfer-color);
 
-        &:hover,
-        &:active {
-          color: var(--btn-true--hover-color);
-          border-color: var(--btn-true--hover-color);
-        }
+      &:hover,
+      &:active {
+        color: var(--btn-transfer--hover-color);
+        border-color: var(--btn-transfer--hover-color);
+        background-color: transparent;
       }
+    }
 
-      &.transfer {
-        color: var(--btn-transfer-color);
-        border-color: var(--btn-transfer-color);
+    &.job {
+      color: var(--btn-job-color);
+      border-color: var(--btn-job-color);
 
-        &:hover,
-        &:active {
-          color: var(--btn-transfer--hover-color);
-          border-color: var(--btn-transfer--hover-color);
-        }
+      &:hover,
+      &:active {
+        color: var(--btn-job--hover-color);
+        border-color: var(--btn-job--hover-color);
+        background-color: transparent;
       }
+    }
 
-      &.danger {
-        color: var(--btn-false-color);
-        border-color: var(--btn-false-color);
+    &.danger {
+      color: var(--btn-false-color);
+      border-color: var(--btn-false-color);
 
-        &:hover,
-        &:active {
-          color: var(--btn-false--hover-color);
-          border-color: var(--btn-false--hover-color);
-        }
+      &:hover,
+      &:active {
+        color: var(--btn-false--hover-color);
+        border-color: var(--btn-false--hover-color);
+        background-color: transparent;
       }
     }
   }
+
+  &.wt-button--disabled {
+    color: var(--btn-disabled-font-color);
+    background-color: var(--btn-disabled-color);
+    border-color: var(--btn-disabled-color);
+    cursor: auto;
+    pointer-events: none;
+    box-shadow: none;
+  }
+
+  .wt-loader {
+    margin: auto;
+  }
+}
 </style>

package/src/components/atoms/wt-chip/__tests__/WtChip.spec.js

@@ -0,0 +1,19 @@
+import { shallowMount } from '@vue/test-utils';
+import WtChip from '../wt-chip.vue';
+
+describe('WtChip', () => {
+  it('renders a component', () => {
+    const wrapper = shallowMount(WtChip);
+    expect(wrapper.classes('wt-chip')).toBe(true);
+  });
+
+  it('renders a chip content via default slot', () => {
+    const content = 'chip content';
+    const wrapper = shallowMount(WtChip, {
+      slots: {
+        default: content,
+      },
+    });
+    expect(wrapper.find('.wt-chip').text()).toBe(content);
+  });
+});

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

@@ -0,0 +1,23 @@
+<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" scoped>
+  @import '../../../css/components/atoms/wt-chip/wt-chip';
+</style>

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

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

package/src/components/atoms/wt-context-menu/wt-context-menu.vue

@@ -0,0 +1,105 @@
+<template>
+  <v-dropdown
+    class="wt-context-menu"
+    :shown="visible"
+    :triggers="['click', 'touch']"
+    placement="bottom-end"
+  >
+    <slot name="activator"></slot>
+    <template #popper="{ hide }">
+      <ul
+        class="wt-context-menu__menu"
+        :style="`width: ${width}; min-width: ${minWidth}; max-width: ${maxWidth};`"
+      >
+        <li
+          class="wt-context-menu__option-wrapper"
+          v-for="(option, index) in options"
+          :key="index"
+        >
+          <!--      <a> click.prevent prevents redirect to # -->
+          <a
+            class="wt-context-menu__option"
+            href="#"
+            @click.prevent="handleOptionClick({ option, index, hide })"
+          >
+            <slot name="option" v-bind="option">
+              {{ option.text || option }}
+            </slot>
+          </a>
+        </li>
+      </ul>
+    </template>
+  </v-dropdown>
+</template>
+
+<script>
+export default {
+  name: 'wt-context-menu',
+  props: {
+    options: {
+      type: Array,
+      required: true,
+      description: '[{ text }] or [\'str\']',
+    },
+    visible: {
+      type: Boolean,
+      default: false,
+    },
+    width: {
+      type: [String],
+      default: 'auto',
+    },
+    minWidth: {
+      type: [String],
+      default: '160px',
+    },
+    maxWidth: {
+      type: [String],
+      default: '300px',
+    },
+  },
+  methods: {
+    handleOptionClick({ option, index, hide }) {
+      this.$emit('click', { option, index });
+      hide();
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.wt-context-menu {
+  line-height: 0;
+}
+
+.wt-context-menu__menu {
+  @extend %typo-body-2;
+  background-color: var(--context-menu-background-color);
+  border-radius: var(--border-radius);
+  box-shadow: var(--box-shadow);
+  transition: var(--transition);
+  z-index: 1;
+}
+
+.wt-context-menu__option-wrapper {
+  &:first-of-type {
+    border-radius: var(--border-radius) var(--border-radius) 0 0;
+  }
+  &:last-of-type {
+    border-radius: 0 0 var(--border-radius) var(--border-radius);
+  }
+  &:only-of-type {
+    border-radius: var(--border-radius);
+  }
+  &:hover {
+    background-color: var( --context-menu-option-color--hover);
+    transition: var(--transition);
+  }
+}
+
+.wt-context-menu__option {
+  display: block;
+  padding: var(--context-menu-option-padding);
+  cursor: pointer;
+}
+</style>

package/src/components/atoms/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/atoms/wt-divider/wt-divider.vue

@@ -9,8 +9,9 @@
 </script>
 
 <style lang="scss" scoped>
-  .divider {
+  .wt-divider {
     display: block;
+    box-sizing: border-box;
     width: 100%;
     max-width: 100%;
     height: 0;

package/src/components/atoms/wt-icon/__tests__/WtIcon.spec.js

@@ -0,0 +1,24 @@
+import { shallowMount } from '@vue/test-utils';
+import WtIcon from '../wt-icon.vue';
+
+describe('WtIcon', () => {
+  it('renders a component', () => {
+    const wrapper = shallowMount(WtIcon, {
+      propsData: {
+        icon: 'icon-name',
+      },
+    });
+    expect(wrapper.classes('wt-icon')).toBe(true);
+  });
+  it('correctly computes icon name', () => {
+    const iconName = '#jest-bucket';
+    const wrapper = shallowMount(WtIcon, {
+      propsData: {
+        icon: 'bucket',
+        size: 'sm',
+        iconPrefix: 'jest',
+      },
+    });
+    expect(wrapper.vm.iconName).toBe(iconName);
+  });
+});