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

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

@@ -0,0 +1,172 @@
+<template>
+  <i
+    class="wt-icon"
+    :class="[
+       `wt-icon--size-${size}`,
+       `wt-icon--color-${color}`,
+       { 'wt-icon--disabled': disabled },
+     ]"
+  >
+    <svg class="wt-icon__icon">
+      <use :xlink:href="iconName"></use>
+    </svg>
+  </i>
+</template>
+
+<script setup>
+
+import { computed } from 'vue';
+
+const props = defineProps({
+  /**
+   * Icon name
+   * @example '<wt-icon icon="close"></wt-icon>'
+   */
+  icon: {
+    type: String,
+    required: true,
+  },
+  /**
+   * @values xs, sm (16px), md (24px), lg (32px), xl (40px), 2xl, 3xl
+   * @example '<wt-icon icon="close" size="sm"></wt-icon>'
+   */
+  size: {
+    type: String,
+    default: 'md',
+  },
+  /**
+   * @values 'default', 'active', 'disabled', 'primary', 'error', 'success', 'warning', 'on-dark', 'on-light', 'on-primary', 'info', 'chat', 'transfer', 'job'
+   */
+  color: {
+    type: String,
+    default: 'default',
+  },
+  /**
+   * inserts icon name prefix between "icon" and actual icon name ("icon" prop).
+   * Useful for library icons extension with project-level icons with this prefix in name
+   */
+  iconPrefix: {
+    type: String,
+    default: '',
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const iconName = computed(() => {
+  let name = '#';
+  if (props.iconPrefix) name += `${props.iconPrefix}-`;
+  return `${name}${props.icon}`;
+});
+</script>
+
+<style lang="scss">
+@import './variables.scss';
+</style>
+
+<style lang="scss" scoped>
+.wt-icon {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  transition: var(--transition);
+}
+
+/*svg instead of .icon to override styles by .icon-icon-name-size without any other seelectors*/
+svg {
+  display: block;
+  width: 100%;
+  height: 100%;
+  stroke-width: 0;
+  fill: var(--icon-color);
+  transition: var(--transition);
+}
+
+.wt-icon--color {
+  &-default .wt-icon__icon {
+    fill: var(--icon-color);
+  }
+  &-active .wt-icon__icon {
+    fill: var(--icon-active-color);
+  }
+  &-primary .wt-icon__icon {
+    fill: var(--icon-primary-color);
+  }
+  &-error .wt-icon__icon {
+    fill: var(--icon-error-color);
+  }
+  &-success .wt-icon__icon {
+    fill: var(--icon-success-color);
+  }
+  &-warning .wt-icon__icon {
+    fill: var(--icon-warning-color);
+  }
+  &-on-dark .wt-icon__icon {
+    fill: var(--icon-on-dark-color);
+  }
+  &-on-light .wt-icon__icon {
+    fill: var(--icon-on-light-color);
+  }
+  &-on-primary .wt-icon__icon {
+    fill: var(--icon-on-primary-color);
+  }
+  &-info .wt-icon__icon {
+    fill: var(--icon-info-color);
+  }
+  &-chat .wt-icon__icon {
+    fill: var(--icon-chat-color);
+  }
+  &-transfer .wt-icon__icon {
+    fill: var(--icon-transfer-color);
+  }
+  &-job .wt-icon__icon {
+    fill: var(--icon-job-color);
+  }
+  &-disabled .wt-icon__icon {
+    fill: var(--icon-disabled-color);
+  }
+}
+
+.wt-icon--disabled .wt-icon__icon {
+  fill: var(--icon-disabled-color);
+}
+
+.wt-icon--size {
+  &-3xl {
+    width: var(--icon-3xl-size);
+    height: var(--icon-3xl-size);
+  }
+
+  &-2xl {
+    width: var(--icon-2xl-size);
+    height: var(--icon-2xl-size);
+  }
+
+  &-xl {
+    width: var(--icon-xl-size);
+    height: var(--icon-xl-size);
+  }
+
+  &-lg {
+    width: var(--icon-lg-size);
+    height: var(--icon-lg-size);
+  }
+
+  &-md {
+    width: var(--icon-md-size);
+    height: var(--icon-md-size);
+  }
+
+  &-sm {
+    width: var(--icon-sm-size);
+    height: var(--icon-sm-size);
+  }
+
+  &-xs {
+    width: var(--icon-xs-size);
+    height: var(--icon-xs-size);
+  }
+}
+</style>

package/src/components/wt-icon-action/__tests__/WtIconAction.spec.js

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

package/src/components/wt-icon-action/_internals/__tests__/WtAddIconAction.spec.js

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

package/src/components/wt-icon-action/_internals/__tests__/WtDeleteIconAction.spec.js

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

package/src/components/wt-icon-action/_internals/__tests__/WtDownloadIconAction.spec.js

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

package/src/components/wt-icon-action/_internals/__tests__/WtEditIconAction.spec.js

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

package/src/components/wt-icon-action/_internals/__tests__/WtHistoryIconAction.spec.js

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

package/src/components/wt-icon-action/_internals/__tests__/WtRefreshIconAction.spec.js

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

package/src/components/wt-icon-action/_internals/wt-add-icon-action.vue

@@ -0,0 +1,27 @@
+<template>
+  <wt-tooltip>
+    <template v-slot:activator>
+      <wt-icon-btn
+        icon="plus"
+        :disabled="disabled"
+        @click="emit('click')"
+      ></wt-icon-btn>
+    </template>
+    {{ $t('webitelUI.iconAction.addActionHint') }}
+  </wt-tooltip>
+</template>
+
+<script setup>
+const props = defineProps({
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits(['click']);
+</script>
+
+<style scoped>
+
+</style>

package/src/components/wt-icon-action/_internals/wt-delete-icon-action.vue

@@ -0,0 +1,27 @@
+<template>
+  <wt-tooltip>
+    <template v-slot:activator>
+      <wt-icon-btn
+        icon="bucket"
+        :disabled="disabled"
+        @click="emit('click')"
+      ></wt-icon-btn>
+    </template>
+    {{ $t('webitelUI.iconAction.deleteActionHint') }}
+  </wt-tooltip>
+</template>
+
+<script setup>
+const props = defineProps({
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits(['click']);
+</script>
+
+<style scoped>
+
+</style>

package/src/components/wt-icon-action/_internals/wt-download-icon-action.vue

@@ -0,0 +1,27 @@
+<template>
+  <wt-tooltip>
+    <template v-slot:activator>
+      <wt-icon-btn
+        icon="download"
+        :disabled="disabled"
+        @click="emit('click')"
+      ></wt-icon-btn>
+    </template>
+    {{ $t('webitelUI.iconAction.downloadActionHint') }}
+  </wt-tooltip>
+</template>
+
+<script setup>
+const props = defineProps({
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits(['click']);
+</script>
+
+<style scoped>
+
+</style>

package/src/components/wt-icon-action/_internals/wt-edit-icon-action.vue

@@ -0,0 +1,27 @@
+<template>
+  <wt-tooltip>
+    <template v-slot:activator>
+      <wt-icon-btn
+        icon="edit"
+        :disabled="disabled"
+        @click="emit('click')"
+      ></wt-icon-btn>
+    </template>
+    {{ $t('webitelUI.iconAction.editActionHint') }}
+  </wt-tooltip>
+</template>
+
+<script setup>
+const props = defineProps({
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits(['click']);
+</script>
+
+<style scoped>
+
+</style>

package/src/components/wt-icon-action/_internals/wt-history-icon-action.vue

@@ -0,0 +1,27 @@
+<template>
+  <wt-tooltip>
+    <template v-slot:activator>
+      <wt-icon-btn
+        icon="history"
+        :disabled="disabled"
+        @click="emit('click')"
+      ></wt-icon-btn>
+    </template>
+    {{ $t('webitelUI.iconAction.historyActionHint') }}
+  </wt-tooltip>
+</template>
+
+<script setup>
+const props = defineProps({
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits(['click']);
+</script>
+
+<style scoped>
+
+</style>

package/src/components/wt-icon-action/_internals/wt-refresh-icon-action.vue

@@ -0,0 +1,27 @@
+<template>
+  <wt-tooltip>
+    <template v-slot:activator>
+      <wt-icon-btn
+        icon="refresh"
+        :disabled="disabled"
+        @click="emit('click')"
+      ></wt-icon-btn>
+    </template>
+    {{ $t('reusable.refresh') }}
+  </wt-tooltip>
+</template>
+
+<script setup>
+const props = defineProps({
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits(['click']);
+</script>
+
+<style scoped>
+
+</style>

package/src/components/wt-icon-action/wt-icon-action.vue

@@ -0,0 +1,54 @@
+<template>
+  <component
+    :is="actionComponent"
+    :disabled="disabled"
+    @click="emit('click')"
+  ></component>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+import WtDeleteIconAction from './_internals/wt-delete-icon-action.vue';
+import WtEditIconAction from './_internals/wt-edit-icon-action.vue';
+import WtAddIconAction from './_internals/wt-add-icon-action.vue';
+import WtHistoryIconAction from './_internals/wt-history-icon-action.vue';
+import WtDownloadIconAction from './_internals/wt-download-icon-action.vue';
+import WtRefreshIconAction from './_internals/wt-refresh-icon-action.vue';
+
+const props = defineProps({
+  action: {
+    type: String,
+    required: true,
+    options: ['delete', 'edit', 'add', 'history', 'download', 'refresh'],
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits(['click']);
+
+const actionComponent = computed(() => {
+  switch (props.action) {
+    case 'edit':
+      return WtEditIconAction;
+    case 'delete':
+      return WtDeleteIconAction;
+    case 'add':
+      return WtAddIconAction;
+    case 'history':
+      return WtHistoryIconAction;
+    case 'download':
+      return WtDownloadIconAction;
+    case 'refresh':
+      return WtRefreshIconAction;
+    default:
+      return WtEditIconAction;
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+
+</style>

package/src/components/wt-icon-btn/Readme.md

@@ -0,0 +1,10 @@
+### Note: all wt=icon props are passed as "$attrs"
+
+```vue
+const callAlert = () => window.alert('wt-icon-btn clicked');
+
+<wt-icon-btn
+  icon="edit"
+  @click="this.callAlert"
+></wt-icon-btn>
+```

package/src/components/{molecules/wt-icon-btn → wt-icon-btn}/__tests__/WtIconBtn.spec.js

@@ -1,6 +1,6 @@
 import { shallowMount } from '@vue/test-utils';
 import WtIconBtn from '../wt-icon-btn.vue';
-import WtIcon from '../../../atoms/wt-icon/wt-icon.vue';
+import WtIcon from '../../wt-icon/wt-icon.vue';
 
 describe('WtIconBtn', () => {
   it('renders a component', () => {
@@ -8,7 +8,7 @@ describe('WtIconBtn', () => {
       stubs: {
         WtIcon,
       },
-      propsData: { icon: 'bucket' },
+      props: { icon: 'bucket' },
     });
     expect(wrapper.classes('wt-icon-btn')).toBe(true);
   });

package/src/components/wt-icon-btn/_variables.scss

@@ -0,0 +1,9 @@
+
+:root {
+  --icon-btn-hover-color: var(--grey-darken-5);
+}
+
+:root.theme--dark {
+  --icon-btn-hover-color: var(--grey-lighten-5);
+}
+

package/src/components/wt-icon-btn/wt-icon-btn.vue

@@ -0,0 +1,47 @@
+<template>
+  <button
+    class="wt-icon-btn"
+    :class="{ 'wt-icon-btn--disabled': disabled }"
+    type="button"
+    @click="emit('click', $event)"
+  >
+    <wt-icon
+      v-bind="$attrs"
+      :disabled="disabled"
+    ></wt-icon>
+  </button>
+</template>
+
+<script setup>
+import WtIcon from '../wt-icon/wt-icon.vue';
+
+const props = defineProps({
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits(['click']);
+</script>
+
+<style lang="scss">
+@import './variables.scss';
+</style>
+
+<style lang="scss" scoped>
+.wt-icon-btn {
+  position: relative;
+  display: block;
+  width: fit-content;
+  line-height: 0;
+
+  &:hover .wt-icon--color-default :deep .wt-icon__icon {
+    fill: var(--icon-btn-hover-color);
+  }
+
+  &--disabled {
+    pointer-events: none;
+  }
+}
+</style>

package/src/components/{atoms/wt-indicator → wt-indicator}/__tests__/WtIndicator.spec.js

@@ -10,7 +10,7 @@ describe('WtIndicator', () => {
   it('renders a component text, if passed', () => {
     const content = 'Hello there!';
     const wrapper = shallowMount(WtIndicator, {
-      propsData: {
+      props: {
         text: content,
       },
     });
@@ -19,7 +19,7 @@ describe('WtIndicator', () => {
 
   it('changed indicator color, if prop is passed', () => {
     const wrapper = shallowMount(WtIndicator, {
-      propsData: {
+      props: {
         color: 'primary',
       },
     });

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

@@ -5,8 +5,8 @@
   --indicator-dot-offset: var(--spacing-2xs);
 
   --indicator-text-margin: var(--spacing-2xs);
-  
-  --indicator-primary-color: var(--accent-color);
+
+  --indicator-primary-color: var(--primary-color);
 
   --indicator-secondary-color: var(--secondary-color);
 
@@ -19,4 +19,4 @@
   --indicator-transfer-color: var(--transfer-color);
 
   --indicator-break-out-color: hsla(36, 90%, 50%, 1);
-}
+}

package/src/components/{atoms/wt-indicator → wt-indicator}/wt-indicator.vue

@@ -44,7 +44,12 @@ export default {
 };
 </script>
 
+<style lang="scss">
+@import './variables.scss';
+</style>
+
 <style lang="scss" scoped>
+
 .wt-indicator {
   display: flex;
   align-items: center;

package/src/components/{molecules/wt-input → wt-input}/__tests__/WtInput.spec.js

@@ -1,4 +1,4 @@
-import { shallowMount } from '@vue/test-utils';
+import { shallowMount, mount } from '@vue/test-utils';
 import WtInput from '../wt-input.vue';
 import WtLabel from '../../wt-label/wt-label.vue';
 
@@ -14,11 +14,11 @@ describe('WtInput', () => {
 
   it('renders label text when passed', () => {
     const label = 'Hello there';
-    const wrapper = shallowMount(WtInput, {
+    const wrapper = mount(WtInput, {
       stubs: {
         WtLabel,
       },
-      propsData: { label },
+      props: { label },
     });
     expect(wrapper.find('.wt-label').text()).toBe(label);
   });