@webitel/ui-sdk 0.1.3-vue3 → 0.1.4-vite

package/src/components/wt-expansion-panel/wt-expansion-panel.vue

@@ -0,0 +1,67 @@
+<template>
+  <div
+    :class="[{'wt-expansion-panel--opened':open},
+    `wt-expansion-panel--${props.size}`]"
+    class="wt-expansion-panel"
+  >
+    <div
+      class="wt-expansion-panel-header"
+      tabindex="0"
+      @click="open = !open"
+      @keypress.enter="open = !open"
+    >
+      <slot name="title"></slot>
+      <wt-icon
+        icon="arrow-right"
+      ></wt-icon>
+    </div>
+    <wt-expand-transition>
+      <div v-show="open">
+        <slot></slot>
+      </div>
+    </wt-expand-transition>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const props = defineProps({
+  size: {
+    type: String,
+    default: 'md',
+  },
+});
+
+const open = ref(true);
+</script>
+
+<style lang="scss" scoped>
+.wt-expansion-panel {
+  .wt-expansion-panel-header {
+    @extend %typo-subtitle-1;
+    display: flex;
+    align-items: center;
+    padding: var(--spacing-2xs) var(--spacing-xs);
+    cursor: pointer;
+    border-radius: var(--spacing-2xs);
+    background-color: var(--secondary-color-50);
+  }
+
+  .wt-icon {
+    margin-left: auto;
+  }
+
+  &--sm {
+    .wt-expansion-panel-header {
+      @extend %typo-subtitle-2;
+    }
+  }
+
+  &--opened {
+    .wt-icon {
+      transform: rotate(90deg);
+    }
+  }
+}
+</style>

package/src/components/{organisms/wt-filters-panel-wrapper → wt-filters-panel-wrapper}/wt-filters-panel-wrapper.vue

@@ -93,7 +93,7 @@ $filter-gap: 10px; // var(--spacing-xs)
     & {
       grid-template-columns: repeat(5, 1fr);
 
-      > *:nth-child(n+6) {
+      :deep(> *:nth-child(n+6)) {
         display: none;
       }
     }
@@ -103,7 +103,7 @@ $filter-gap: 10px; // var(--spacing-xs)
     & {
       grid-template-columns: repeat(4, 1fr);
 
-      > *:nth-child(n+5) {
+      :deep(> *:nth-child(n+5)) {
         display: none;
       }
     }
@@ -113,7 +113,7 @@ $filter-gap: 10px; // var(--spacing-xs)
     & {
       grid-template-columns: repeat(3, 1fr);
 
-      > *:nth-child(n+4) {
+      :deep(> *:nth-child(n+4)) {
         display: none;
       }
     }
@@ -123,7 +123,7 @@ $filter-gap: 10px; // var(--spacing-xs)
     & {
       grid-template-columns: repeat(2, 1fr);
 
-      > *:nth-child(n+3) {
+      :deep(> *:nth-child(n+3)) {
         display: none;
       }
     }
@@ -133,14 +133,14 @@ $filter-gap: 10px; // var(--spacing-xs)
     & {
       grid-template-columns: repeat(1, 1fr);
 
-      > *:nth-child(n+2) {
+      :deep(> *:nth-child(n+2)) {
         display: none;
       }
     }
   }
 }
 
-.filters-panel-wrapper--opened .filters-wrap > * {
+.filters-panel-wrapper--opened .filters-wrap :deep(> *) {
   display: block;
 }
 </style>

package/src/components/{organisms/wt-headline → wt-headline}/wt-headline.vue

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

package/src/components/wt-headline-nav/Readme.md

@@ -0,0 +1,9 @@
+```vue
+<wt-headline-nav
+  :path="[
+              { name: 'Admin' },
+              { name: 'Contact-center' },
+              { name: 'Queues', route: 'https://dev.webitel.com/contact-center/queues' },
+          ]"
+></wt-headline-nav>
+```

package/src/components/{organisms/wt-headline-nav → wt-headline-nav}/__tests__/wt-headline-nav.spec.js

@@ -4,7 +4,7 @@ import WtHeadlineNav from '../wt-headline-nav.vue';
 describe('WtHeadlineNav', () => {
   it('renders a component', () => {
     const wrapper = shallowMount(WtHeadlineNav, {
-      propsData: {
+      props: {
         path: [],
       },
     });

package/src/components/wt-headline-nav/_variables.scss

@@ -0,0 +1,8 @@
+
+:root {
+  --headline-nav-indicator-size: 4px;
+  --headline-nav-gap: var(--spacing-sm);
+  --headline-nav-dot-gap: var(--spacing-2xs);
+  --headline-nav-indicator-color: var(--icon-color);
+  --headline-nav-accent-indicator-color: var(--primary-color);
+}

package/src/components/{organisms/wt-headline-nav → wt-headline-nav}/wt-headline-nav.vue

@@ -1,16 +1,16 @@
 <template>
   <nav class="wt-headline-nav">
     <div
-      class="wt-headline-nav__wrapper"
       v-for="(singlePath, key) of path"
       :key="key"
+      class="wt-headline-nav__wrapper"
     >
       <span v-if="key !== 0" class="wt-headline-nav__indicator"></span>
       <h1 class="wt-headline-nav__title">
         <router-link
           v-if="singlePath.route"
-          class="wt-headline-nav__text wt-headline-nav__title-link"
           :to="singlePath.route"
+          class="wt-headline-nav__text wt-headline-nav__text--link"
         >{{ singlePath.name }}
         </router-link>
         <span v-else class="wt-headline-nav__text">{{ singlePath.name }}</span>
@@ -19,43 +19,57 @@
   </nav>
 </template>
 
-<script>
-export default {
-  name: 'wt-headline-nav',
-  props: {
-    path: {
-      type: Array,
-      required: true,
-      // PATH EXAMPLE
-      // default: () => [
-      //   { name: 'directory' },
-      //   { name: 'users', route: '/directory/users' },
-      //   { name: 'adm', route: '/directory/users/3' },
-      // ],
-    },
+<script setup>
+const props = defineProps({
+  /**
+   * PATH EXAMPLE
+   *  default: () => [
+   *      { name: 'directory' },
+   *      { name: 'users', route: '/directory/users' },
+   *      { name: 'adm', route: '/directory/users/3' },
+   *    ],
+   */
+  path: {
+    type: Array,
+    required: true,
   },
-};
+});
 </script>
 
+<style lang="scss">
+@import './variables.scss';
+</style>
+
 <style lang="scss" scoped>
 .wt-headline-nav {
   display: flex;
   align-items: center;
+  max-width: 100%;
+  gap: var(--headline-nav-gap);
 }
 
 .wt-headline-nav__wrapper {
   display: flex;
   align-items: center;
+  gap: var(--headline-nav-dot-gap);
 }
 
 .wt-headline-nav__indicator {
-  display: inline-block;
-  width: var(--headline-nav-indicator-size);
-  height: var(--headline-nav-indicator-size);
-  margin: 0 var(--headline-nav-indicator-margin);
-  background: var(--icon-color);
-  border-radius: 50%;
+  display: flex;
+  align-items: center;
   flex-shrink: 0;
+  justify-content: center;
+  width: var(--icon-md-size);
+  height: var(--icon-md-size);
+
+  &:before {
+    display: block;
+    width: var(--headline-nav-indicator-size);
+    height: var(--headline-nav-indicator-size);
+    content: '';
+    border-radius: 50%;
+    background: var(--headline-nav-indicator-color);
+  }
 }
 
 .wt-headline-nav__title {
@@ -63,23 +77,21 @@ export default {
 }
 
 .wt-headline-nav__text {
-  color: var(--text-outline-color);
+  color: var(--main-text-color);
 }
 
 .wt-headline-nav__wrapper:last-child {
   min-width: 0;
 
   .wt-headline-nav__indicator {
-    background: var(--icon-color-accent);
+    &:before {
+      background: var(--headline-nav-accent-indicator-color);
+    }
   }
 
   .wt-headline-nav__title {
     overflow: hidden;
     text-overflow: ellipsis;
   }
-
-  .wt-headline-nav__text {
-    color: var(--text-primary-color);
-  }
 }
 </style>

package/src/components/{molecules/wt-hint → wt-hint}/wt-hint.vue

@@ -3,7 +3,7 @@
     <template v-slot:activator>
       <wt-icon-btn
         icon="rounded-info"
-        color="outline"
+        :color="iconColor"
       ></wt-icon-btn>
     </template>
     <slot></slot>
@@ -13,6 +13,12 @@
 <script>
 export default {
   name: 'wt-hint',
+  props: {
+    iconColor: {
+      type: String,
+      default: 'outline',
+    },
+  }
 };
 </script>
 

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

@@ -0,0 +1,327 @@
+
+```vue
+<wt-icon icon="edit"></wt-icon>
+```
+
+Different color icons:
+```vue
+const colors = ['default', 'active', 'disabled', 'primary', 'error', 'success', 'warning', 'on-dark', 'on-light', 'on-primary', 'info', 'chat', 'transfer', 'job'];
+
+<div
+  style="display: flex; align-items: center; gap: 5px;"
+  v-for="color of this.colors"
+  :key="color"
+>
+<wt-icon
+  icon="edit"
+  size="lg"
+  :color="color"
+></wt-icon>
+{{ color }}
+</div>
+```
+
+## How does it work?
+
+Icons are located in <code>assets/icons/sprite</code> directory, in <code>SVG</code> format,
+without <code>width</code> and <code>height</code> attributes, but with <code>
+[viewBox](https://developer.mozilla.org/ru/docs/Web/SVG/Attribute/viewBox)
+</code> attribute.
+(<code>viewBox</code> is provided by designer in svg pic itself - so you just need to check it presence,
+by the way check for `width` `height` absence).
+
+For example:
+
+```
+const img = require('./docs/svg-icon-code-example.png');
+<img :src="this.img" alt="svg icon code example">
+```
+
+At build stage, <code><a href="https://github.com/JetBrains/svg-sprite-loader#svg-sprite-loader">svg-sprite-loader</a></code>
+collects all icons (looking for "All files`.svg` in all directories, which names include `sprite`,
+). This rule is described in <code>vue.config.js:</code>
+(from "Quick Start" icons installation section):
+
+<pre class="language-javascript"><code>
+config.module
+    .rule('svg')
+    .exclude.add(/^(.*sprite).*\.svg/); // same as in svg-sprite-loader
+
+config.module
+    .rule('svg-sprite')
+    .test(/^(.*sprite).*\.svg/) // same as in svg-url-loader
+    .use('svg-sprite-loader')
+    .loader('svg-sprite-loader');
+</code></pre>
+
+So that, all these icons are collected in one sprite. This sprite is injected in <code>index.html</code>.
+
+For example: (By the way, you can check it if you want to see, which icons were collected in this sprite):
+
+```
+const img = require('./docs/svg-sprite-in-dom.png');
+<img :src="this.img" alt="svg-sprite-in-dom">
+```
+
+Then, these icons can be used as:
+
+<pre class="language-html"><code>
+&lt;svg&gt;&lt;use xlink:href="#attach"&gt;&lt;/use&gt;&lt;/svg&gt;
+// or, using wt-icon component:
+&lt;wt-icon icon="attach"&gt;&lt;/wt-icon&gt;
+</code></pre>
+
+## How to install your custom icons to project?
+
+`svg-sprite-loader` webpack rule in <code>vue.config.js</code> also collects all icons from `sprite`
+directories in project and adds it to final sprite.
+
+*In fact, webitel-ui icons are added to sprite just cause they're imported from
+"sprite" directory - just in <code>node_modules</code>*
+
+For stylistic purposes, it's recommended to allocate icons in <code>src/(app?)/assets/icons/sprite/*</code>,
+So that developers and designer could find (and then check or update) them in any project.
+
+All icons from this directory should be imported in <code>index.js</code> in this directory
+(create `index.js` if it doesn't exist).
+
+Then, `index.html` should be imported in `main.js`:
+<pre class="language-javascript"><code>import './assets/icons/sprite';</code></pre>
+
+And, then, if you put some new icons in this directory, and import them in `index.js`,
+they automatically become available in project.
+
+### Simple TODO:
+* Create directory `src/(app?)/assets/icons/sprite/` (if doesn't exists)
+* in this folder, create `index.js` (if doesn't exists)
+* Import `index.js` to `>main.js` (if doesn't exists)
+* Put icon to this directory, and import it to `index.js`
+* That's all, you're awesome!
+
+## Icon sprites naming convention:
+
+App-specific icons are highly recommended to be named with the prefix corresponding to this application.
+
+The reason is: when you see an icon usage, you will be able to distinguish `svg` location:
+in this app, or library - and update it, if needed.
+*For example, if you want to move this icon from app to library, you just need to remove `icon-prefix` prop
+from all icon usages (and, of course, rename the icon file)*
+
+### Icon prefix corresponding to application:
+* **Webitel UI:** no prefix
+* **Admin:** `adm-`
+* **Workspace:** `ws-`
+* **Supervisor:** `sv-`
+* **History:** `hs-`
+* **Webitel CC UI:** `cc-`
+
+## How to clean up icons before adding them to project?
+
+After export from Figma, icons should be cleaned up to avoid a few issues.
+
+Use this checklist:
+1. **Remove** `width` and `height` from svg-tag
+```
+const img = require('./docs/cleanup-svg-width-height.png');
+<img :src="this.img" alt="Remove width and height">
+```
+
+2. **Check** `viewBox`: it's size should be square **(BUT DO NOT DELETE!)**
+
+If there's an issue, contact the designer.
+
+Incorrect:
+```
+const img = require('./docs/cleanup-svg-viewbox-incorrect.png');
+<img :src="this.img" alt="viewBox is incorrect">
+```
+
+Correct:
+```
+const img = require('./docs/cleanup-svg-viewbox-correct.png');
+<img :src="this.img" alt="viewBox is correct">
+```
+
+4. **Remove** `fill="none"` from svg-tag
+```
+const img = require('./docs/cleanup-svg-fill-none.png');
+<img :src="this.img" alt="Remove "fill=none"">
+```
+
+5. **Remove** all `fill=""` with default color
+
+*Default "fill" should be cleaned up, cause Figma adds it to icon by default, but we are
+changing this fill in styles to suit our needs.
+But! Specific colors should stay in svg-code. (for instance, red dot in `record` icon)*
+
+```
+const img = require('./docs/cleanup-svg-fill.png');
+<img :src="this.img" alt="Remove this fill">
+```
+
+```vue
+<template>
+  <div style="display: grid; grid-template-columns: repeat(auto-fit, 120px); grid-gap: var(--spacing-xs);">
+    <div
+      style="text-align: center; display: flex; flex-direction: column; align-items: center; gap: 5px;"
+      v-for="icon of this.icons"
+      :key="icon"
+    >
+      <wt-icon
+        :icon="icon"
+        size="xl"
+      ></wt-icon>
+      {{ icon }}
+    </div>
+  </div>
+</template>
+
+<script setup>
+const icons = [
+  'email',
+  'adfs',
+  'azure',
+  'instagram',
+  'zoom-in',
+  'zoom-out',
+  'send-arrow',
+  'close',
+  'close--filled',
+  'attach',
+  'mail',
+  'mail--color',
+  'telegram-bot',
+  'messenger-infobip',
+  'messenger-telegram',
+  'messenger-telegram--filled',
+  'messenger-facebook',
+  'messenger-facebook--filled',
+  'messenger-viber',
+  'messenger-viber--filled',
+  'messenger-web-chat',
+  'messenger-whatsapp',
+  'messenger-whatsapp--filled',
+  'messenger-messenger',
+  'meta',
+  'lock',
+  'move',
+  'queue-member',
+  'history',
+  'generate',
+  'google',
+  'rounded-info',
+  'copy',
+  'menu',
+  'clear',
+  'video-cam',
+  'video-cam-off',
+  'bell',
+  'bell-badged',
+  'star',
+  'star--filled',
+  'sound-on',
+  'sound-off',
+  'back',
+  'prompter',
+  'play',
+  'pause',
+  'stop',
+  'download',
+  'upload',
+  'filter',
+  'column-select',
+  'refresh',
+  'calendar',
+  'radio',
+  'radio--checked',
+  'checkbox',
+  'checkbox--checked',
+  'checkbox--checked--filled',
+  'eye--closed',
+  'eye--opened',
+  'numpad',
+  'settings',
+  'docs',
+  'logout',
+  'account',
+  'app-navigator',
+  'collapse',
+  'expand',
+  'bucket',
+  'tick',
+  'edit',
+  'plus',
+  'search',
+  'rec-off',
+  'rec',
+  'note',
+  'mic',
+  'mic-muted',
+  'hold',
+  'contacts',
+  'done',
+  'attention',
+
+  'call',
+  'call--filled',
+  'call-end',
+  'call-end--filled',
+  'call-transfer',
+  'call-transfer--filled',
+  'call-ringing',
+  'call-ringing--filled',
+  'call-missed',
+  'call-missed--filled',
+  'call-add-to',
+  'call-add-to--filled',
+  'call-disconnect',
+  'call-disconnect--filled',
+  'call-outbound',
+  'call-outbound--filled',
+  'call-inbound',
+  'call-inbound--filled',
+
+  'chat',
+  'chat--filled',
+  'chat-join',
+  'chat-transfer',
+  'chat-transfer--filled',
+  'chat-end',
+  'chat-end--filled',
+  'chat-group',
+  'chat-quick-response',
+  'chat-quick-response--filled',
+  'chat-send',
+  'chat-emoji',
+  'chat-reply',
+  'chat-message-status-sent',
+  'chat-message-status-read',
+
+  'job',
+  'job--accept',
+  'job--end',
+
+  'sort-arrow-down',
+  'sort-arrow-up',
+  'arrow-down',
+  'arrow-left',
+  'arrow-mix',
+  'arrow-right',
+  'arrow-up',
+  'tts-download',
+  'stt',
+  'stt-download',
+  'stt-search',
+  'scorecard',
+  'idle',
+  'pin',
+  'unpin',
+  'options',
+
+  'preview-tag-video',
+  'preview-tag-audio',
+  'preview-tag-application',
+  'preview-tag-image',
+].sort();
+</script>
+```

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

@@ -4,7 +4,7 @@ import WtIcon from '../wt-icon.vue';
 describe('WtIcon', () => {
   it('renders a component', () => {
     const wrapper = shallowMount(WtIcon, {
-      propsData: {
+      props: {
         icon: 'icon-name',
       },
     });
@@ -13,7 +13,7 @@ describe('WtIcon', () => {
   it('correctly computes icon name', () => {
     const iconName = '#jest-bucket';
     const wrapper = shallowMount(WtIcon, {
-      propsData: {
+      props: {
         icon: 'bucket',
         size: 'sm',
         iconPrefix: 'jest',

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

@@ -0,0 +1,31 @@
+
+:root {
+  --icon-3xl-size: 56px;
+  --icon-2xl-size: 48px;
+  --icon-xl-size: 40px;
+  --icon-lg-size: 32px;
+  --icon-md-size: 24px;
+  --icon-sm-size: 16px;
+  --icon-xs-size: 8px;
+
+  --icon-color: var(--grey-darken-2);
+  --icon-active-color: var(--grey-darken-4);
+  --icon-primary-color: var(--primary-color);
+  --icon-error-color: var(--error-color);
+  --icon-success-color: var(--success-color);
+  --icon-warning-color: var(--warning-color);
+  --icon-on-dark-color: var(--white);
+  --icon-on-light-color: var(--grey-darken-3);
+  --icon-on-primary-color: var(--on-primary-color);
+  --icon-info-color: var(--info-color);
+  --icon-chat-color: var(--chat-color);
+  --icon-transfer-color: var(--transfer-color);
+  --icon-job-color: var(--job-color);
+  --icon-disabled-color: var(--grey-lighten-4);
+}
+
+:root.theme--dark {
+  --icon-color: var(--grey-lighten-2);
+  --icon-active-color: var(--grey-lighten-4);
+  --icon-disabled-color: var(--grey-darken-2);
+}