@webitel/ui-sdk 23.9.2 → 23.12.2

package/package.json

@@ -1,16 +1,18 @@
 {
   "name": "@webitel/ui-sdk",
-  "version": "23.09.2",
+  "version": "23.12.2",
   "private": false,
   "scripts": {
-    "serve-lib": "vue-cli-service serve",
     "build": "vue-cli-service build --target lib --name ui-sdk ./src/install.js",
-    "build:app": "vue-cli-service build",
     "test:unit": "vue-cli-service test:unit",
     "lint": "vue-cli-service lint --fix",
+    "build:app": "vue-cli-service build",
+    "prepare": "husky install",
     "publish-lib": "npm run test:unit && npm run build && npm publish --access public",
     "publish-lib:testless": "npm run build && npm publish --access public",
-    "prepare": "husky install"
+    "serve-lib": "vue-cli-service serve",
+    "styleguide": "vue-cli-service styleguidist",
+    "styleguide:build": "vue-cli-service styleguidist:build"
   },
   "main": "./dist/@webitel/ui-sdk.common.js",
   "files": [
@@ -36,6 +38,7 @@
     "@vuelidate/core": "^2.0.0",
     "@vuelidate/validators": "^2.0.0",
     "@vuepic/vue-datepicker": "^4.4.0",
+    "@vueuse/components": "^10.5.0",
     "clipboard-copy": "^4.0.1",
     "core-js": "^3.6.5",
     "csv-stringify": "^5.5.3",
@@ -59,6 +62,7 @@
   },
   "devDependencies": {
     "@babel/eslint-parser": "^7.17.0",
+    "@babel/preset-react": "^7.22.15",
     "@testing-library/jest-dom": "^5.16.2",
     "@vue/cli-plugin-babel": "~5.0.8",
     "@vue/cli-plugin-eslint": "~5.0.8",
@@ -78,6 +82,7 @@
     "sass": "^1.51.0",
     "sass-loader": "^12.6.0",
     "svg-sprite-loader": "^6.0.11",
+    "vue-cli-plugin-styleguidist": "~4.72.4",
     "vuex": "^4.1.0"
   },
   "overrides": {

package/src/components/wt-app-header/_variables.scss

@@ -2,6 +2,7 @@
 :root {
   --wt-app-header-min-height: 56px;
   --wt-app-header-padding: var(--spacing-sm);
+  --wt-app-header-background: var(--dp-9-surface-color);
 
   --wt-app-header-content-gap: var(--spacing-sm);
   --wt-app-header-content-panel-margin: var(--spacing-2xs);

package/src/components/wt-app-header/wt-app-header.vue

@@ -24,6 +24,6 @@ export default {
   min-height: var(--wt-app-header-min-height); // fixed height because anything can be put inside slot, so padding won't work properly
   padding: var(--wt-app-header-padding);
   box-sizing: border-box;
-  background: var(--header-color);
+  background: var(--wt-app-header-background);
 }
 </style>

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

@@ -0,0 +1,23 @@
+### Different colors:
+```vue
+<div style="display: grid; grid-template-columns: 140px; gap: var(--spacing-xs);">
+  <wt-button>Primary</wt-button>
+  <wt-button color="secondary">Secondary</wt-button>
+  <wt-button disabled>Disabled</wt-button>
+  <wt-button color="success">Success</wt-button>
+  <wt-button color="error">Error</wt-button>
+  <wt-button color="transfer">Transfer</wt-button>
+  <wt-button color="job">Job</wt-button>
+  <wt-button color="info">info</wt-button>
+</div>
+```
+
+### Small button:
+```vue
+    <wt-button size="sm">Small button</wt-button>
+```
+
+### Wide button:
+```vue
+    <wt-button wide>Wide button</wt-button>
+```

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

@@ -1,48 +1,71 @@
 :root {
   --btn-min-width: 90px;
-  --btn-border-size: 2px;
   --btn-padding: var(--spacing-xs) var(--spacing-sm);
-
-  --btn-padding--size-md: var(--btn-padding);
   --btn-padding--size-sm: var(--spacing-2xs) var(--spacing-xs);
 
-  --btn-padding--outline:
-    calc(var(--spacing-xs) - var(--btn-border-size))
-    calc(var(--spacing-sm) - var(--btn-border-size));
-  --btn-padding--size-md--outline: var(--btn-padding--outline);
-  --btn-padding--size-sm--outline:
-    calc(var(--spacing-2xs) - var(--btn-border-size))
-    calc(var(--spacing-xs) - var(--btn-border-size));
+  // COLORS
+  --btn-primary-color: var(--primary-color);
+  --btn-primary-hover-color: var(--primary-hover-color);
+  --btn-primary-text-color: var(--on-primary-color);
 
-  --btn-border: var(--btn-border-size) solid;
+  --btn-secondary-color: var(--dp-10-surface-color);
+  --btn-secondary-hover-color: var(--dp-14-surface-color);
+  --btn-secondary-text-color: var(--grey-darken-4);
 
-  // BUTTON COLORS
-  --btn-dark-font-color: var(--text-primary-color);
-  --btn-light-font-color: var(--text-contrast-color);
+  --btn-success-color: var(--success-color);
+  --btn-success-hover-color: var(--success-hover-color);
+  --btn-success-text-color: var(--grey-lighten-5);
 
-  --btn-accent-color: hsla(var(--_accent-color), var(--_opacity--default));
-  --btn-accent--hover-color: hsla(var(--_accent-color), var(--_opacity--hover));
+  --btn-info-color: var(--info-color);
+  --btn-info-hover-color: var(--info-hover-color);
+  --btn-info-text-color: var(--grey-lighten-5);
 
-  --btn-secondary-color: hsla(var(--_secondary-color), var(--_opacity--default));
-  --btn-secondary--hover-color: hsla(var(--_secondary-color), var(--_opacity--hover));
+  --btn-job-color: var(--job-color);
+  --btn-job-hover-color: var(--job-hover-color);
+  --btn-job-text-color: var(--grey-lighten-5);
 
-  --btn-secondary-50-color: var(--secondary-color-50);
+  --btn-error-color: var(--error-color);
+  --btn-error-hover-color: var(--error-hover-color);
+  --btn-error-text-color: var(--grey-lighten-5);
 
-  --btn-disabled-font-color: var(--secondary-color-50);
-  --btn-disabled-color: hsla(var(--_secondary-color-hue), 15%, 75%, var(--_opacity--active));
+  --btn-transfer-color: var(--transfer-color);
+  --btn-transfer-hover-color: var(--transfer-hover-color);
+  --btn-transfer-text-color: var(--on-transfer-color);
 
-  --btn-true-color: var(--true-color);
-  --btn-true--hover-color: var(--true--hover-color);
+  --btn-disabled-color: var(--dp-16-surface-color);
+  --btn-disabled-text-color: var(--grey-darken-1);
+}
 
-  --btn-false-color: var(--false-color);
-  --btn-false--hover-color: var(--false--hover-color);
+:root.theme--dark {
+  // COLORS
+  --btn-primary-color: var(--primary-color);
+  --btn-primary-hover-color: var(--primary-hover-color);
+  --btn-primary-text-color: var(--on-primary-color);
 
-  --btn-hold-color: var(--hold-color);
-  --btn-hold--hover-color: var(--hold--hover-color);
+  --btn-secondary-color: var(--dp-10-surface-color);
+  --btn-secondary-hover-color: var(--dp-14-surface-color);
+  --btn-secondary-text-color: var(--grey-lighten-4);
 
-  --btn-transfer-color: var(--transfer-color);
-  --btn-transfer--hover-color: var(--transfer--hover-color);
+  --btn-success-color: var(--success-color);
+  --btn-success-hover-color: var(--success-hover-color);
+  --btn-success-text-color: var(--grey-lighten-5);
+
+  --btn-info-color: var(--info-color);
+  --btn-info-hover-color: var(--info-hover-color);
+  --btn-info-text-color: var(--grey-lighten-5);
 
   --btn-job-color: var(--job-color);
-  --btn-job--hover-color: var(--job--hover-color);
+  --btn-job-hover-color: var(--job-hover-color);
+  --btn-job-text-color: var(--grey-lighten-5);
+
+  --btn-error-color: var(--error-color);
+  --btn-error-hover-color: var(--error-hover-color);
+  --btn-error-text-color: var(--grey-lighten-5);
+
+  --btn-transfer-color: var(--transfer-color);
+  --btn-transfer-hover-color: var(--transfer-hover-color);
+  --btn-transfer-text-color: var(--on-transfer-color);
+
+  --btn-disabled-color: var(--dp-16-surface-color);
+  --btn-disabled-text-color: var(--grey-lighten-1);
 }

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

@@ -6,9 +6,7 @@
       `wt-button--size-${size}`,
       {
         'wt-button--contains-icon': containsIcon,
-        'wt-button--outline': outline,
         'wt-button--wide': wide,
-        'wt-button--rounded': rounded,
         'wt-button--disabled': disabled,
         'wt-button--loading': loading,
       }
@@ -22,7 +20,7 @@
       size="sm"
       :color="loaderColor"
     ></wt-loader>
-    <slot v-else></slot>
+    <slot v-else>no content provided</slot>
   </button>
 </template>
 
@@ -30,36 +28,41 @@
 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: 'accent',
-      options: ['accent', 'secondary', 'secondary-50', 'success', 'danger', 'transfer', 'job'],
+      default: 'primary',
     },
     disabled: {
       type: Boolean,
       default: false,
     },
-    outline: {
-      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,
     },
-    rounded: {
-      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,
@@ -73,7 +76,7 @@ export default {
       return '';
     },
     loaderColor() {
-      if (['success', 'transfer', 'danger', 'job'].includes(this.color)) return 'main';
+      if (['success', 'transfer', 'error', 'job'].includes(this.color)) return 'main';
       return 'contrast';
     },
   },
@@ -85,7 +88,6 @@ export default {
 </style>
 
 <style lang="scss" scoped>
-
 .wt-button {
   @extend %typo-button;
   box-sizing: border-box;
@@ -93,8 +95,8 @@ export default {
   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);
+  color: var(--btn-primary-text-color);
+  background-color: var(--btn-primary-color);
   background-clip: padding-box;
   border-radius: var(--border-radius);
   transition: var(--transition);
@@ -104,197 +106,93 @@ export default {
     width: 100%;
   }
 
-  &--rounded {
-    border-radius: var(--border-radius--pill);
-  }
-
   // 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--size-md);
+      padding: var(--btn-padding);
     }
   }
 
-  &--loading {
-    pointer-events: none;
-  }
-
   &:hover,
   &:active {
-    background-color: var(--btn-accent--hover-color);
-    border-color: var(--btn-accent--hover-color);
+    background-color: var(--btn-primary-hover-color);
   }
 
   &.secondary {
-    color: var(--btn-dark-font-color);
-    border-color: var(--btn-secondary-color);
+    color: var(--btn-secondary-text-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);
-    }
-  }
-
-  &.secondary-50 {
-    color: var(--btn-dark-font-color);
-    border-color: var(--btn-secondary-50-color);
-    background-color: var(--btn-secondary-50-color);
-
-    &:hover,
-    &:active {
-      color: var(--btn-dark-font-color);
-      border-color: var(--btn-secondary-color);
-      background-color: var(--btn-secondary-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);
+    color: var(--btn-success-text-color);
+    background-color: var(--btn-success-color);
 
     &:hover,
     &:active {
-      background-color: var(--btn-true--hover-color);
-      border-color: var(--btn-true--hover-color);
+      background-color: var(--btn-success-hover-color);
     }
   }
 
-  &.transfer {
-    color: var(--btn-light-font-color);
-    background-color: var(--btn-transfer-color);
-    border-color: var(--btn-transfer-color);
+  &.info {
+    color: var(--btn-info-text-color);
+    background-color: var(--btn-info-color);
 
     &:hover,
     &:active {
-      background-color: var(--btn-transfer--hover-color);
-      border-color: var(--btn-transfer--hover-color);
+      background-color: var(--btn-info-hover-color);
     }
   }
 
   &.job {
-    color: var(--btn-light-font-color);
+    color: var(--btn-job-text-color);
     background-color: var(--btn-job-color);
-    border-color: var(--btn-job-color);
 
     &:hover,
     &:active {
-      background-color: var(--btn-job--hover-color);
-      border-color: var(--btn-job--hover-color);
+      background-color: var(--btn-job-hover-color);
     }
   }
 
-  &.danger {
-    color: var(--btn-light-font-color);
-    background-color: var(--btn-false-color);
-    border-color: var(--btn-false-color);
+  &.transfer {
+    color: var(--btn-transfer-text-color);
+    background-color: var(--btn-transfer-color);
 
     &:hover,
     &:active {
-      background-color: var(--btn-false--hover-color);
-      border-color: var(--btn-false--hover-color);
+      background-color: var(--btn-transfer-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);
-      }
-
-      &-md {
-        padding: var(--btn-padding--size-md--outline);
-      }
-    }
+  &.error {
+    color: var(--btn-error-text-color);
+    background-color: var(--btn-error-color);
 
     &: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 {
-        border-color: var(--btn-secondary--hover-color);
-        background-color: transparent;
-      }
-    }
-
-    &.success {
-      color: var(--btn-true-color);
-      border-color: var(--btn-true-color);
-
-      &:hover,
-      &:active {
-        color: var(--btn-true--hover-color);
-        border-color: var(--btn-true--hover-color);
-        background-color: transparent;
-      }
-    }
-
-    &.transfer {
-      color: var(--btn-transfer-color);
-      border-color: var(--btn-transfer-color);
-
-      &:hover,
-      &:active {
-        color: var(--btn-transfer--hover-color);
-        border-color: var(--btn-transfer--hover-color);
-        background-color: transparent;
-      }
-    }
-
-    &.job {
-      color: var(--btn-job-color);
-      border-color: var(--btn-job-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);
-
-      &:hover,
-      &:active {
-        color: var(--btn-false--hover-color);
-        border-color: var(--btn-false--hover-color);
-        background-color: transparent;
-      }
+      background-color: var(--btn-error-hover-color);
     }
   }
 
   &.wt-button--disabled {
-    color: var(--btn-disabled-font-color);
+    color: var(--btn-disabled-text-color);
     background-color: var(--btn-disabled-color);
-    border-color: var(--btn-disabled-color);
     cursor: auto;
     pointer-events: none;
     box-shadow: none;

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/wt-button-select/_variables.scss

@@ -4,15 +4,4 @@
   --button-select-icon-button-padding: var(--spacing-xs);
 
   --button-select-buttons-gap: 1px;
-
-  --button-select-icon-color-primary: var(--btn-accent-color);
-  --button-select-icon-color-secondary: var(--btn-secondary-color);
-  --button-select-icon-color-dark: var(--btn-dark-font-color);
-  --button-select-icon-color-ligth: var(--main-color);
-
-  --button-select-icon-color-primary--hover: var(--btn-accent--hover-color);
-  --button-select-icon-color-danger--hover: var(--btn-false--hover-color);
-  --button-select-icon-color-success--hover: var(--btn-true--hover-color);
-  --button-select-icon-color-transfer--hover: var(--btn-transfer--hover-color);
-  --button-select-icon-color-secondary--hover: var(--btn-secondary--hover-color);
 }