@webitel/ui-sdk 0.9.66 → 1.0.0

package/src/css/components/organisms/wt-headline/_variables.scss

@@ -1,7 +1,6 @@
 
 :root {
-  --headline-min-height: 64px;
-  --headline-padding: 12px 30px;
-  --headline-title-margin: 20px;
-  --headline-background: var(--main-primary-color);
+  --headline-min-height: 40px; // button/search-bar height
+  --headline-title-margin: var(--spacing-sm);
+  --headline-background: var(--main-color);
 }

package/src/css/components/organisms/wt-navigation-bar/_variables.scss

@@ -1,14 +1,14 @@
 :root {
-  --navigation-bar-width: 350px;
+  --navigation-bar-width: 340px;
   --navigation-bar-z-index: 10;
-  --navigation-bar-bg-color: var(--main-primary-color);
-  --navigation-bar-verical-padding: 15px;
-  --navigation-bar-horizontal-padding: 10px;
+  --navigation-bar-bg-color: var(--main-color);
+  --navigation-bar-padding: var(--spacing-sm);
 
-  --navigation-bar-header-padding: var(--navigation-bar-verical-padding) 15px;
-  --navigation-bar-list-padding: var(--navigation-bar-verical-padding) var(--navigation-bar-horizontal-padding);
-  --navigation-bar-link-padding: var(--navigation-bar-verical-padding) var(--navigation-bar-horizontal-padding);
-  --navigation-bar-subnav-padding-left: 40px;
+  --navigation-bar-header-padding: var(--spacing-xs);
+
+  --navigation-bar-list-padding: var(--navigation-bar-padding);
+  --navigation-bar-link-padding: var(--navigation-bar-padding);
+  --navigation-bar-subnav-padding-left: var(--spacing-lg);
   --navigation-bar-active-expansion-flag-width: 5px;
-  --navigation-bar-active-expansion-name-max-width: calc(100% - 24px - 10px); // 100% - icon - icon margin
-}
+  --navigation-bar-active-expansion-name-max-width: calc(100% - var(--icon-md-size) - var(--spacing-xs));
+}

package/src/css/components/organisms/wt-notifications-bar/_variables.scss

@@ -1,7 +1,7 @@
 
 :root {
   --notifications-bar-max-height: 60%;
-  --notifications-bar-corner-margin: 10px;
-  --notifications-bar-notifications-margin: 0 10px 10px auto;
+  --notifications-bar-corner-margin: var(--spacing-sm);
+  --notifications-bar-notifications-margin: 0 0 var(--spacing-xs) auto;
   --notifications-bar-z-index: 101;
 }

package/src/css/components/organisms/wt-page-wrapper/_variables.scss

@@ -1,5 +1,5 @@
 :root {
-  --page-wrapper-padding: 20px 30px;
-  --page-wrapper-section-margin: 20px;
-  --page-wrapper-main-section-padding: 20px 30px 30px;
+  --page-wrapper-padding: var(--spacing-sm);
+  --page-wrapper-section-padding: var(--spacing-sm);
+  --page-wrapper-section-gap: var(--spacing-sm);
 }

package/src/css/components/organisms/wt-pagination/_variables.scss

@@ -1,7 +1,5 @@
 
 :root {
-  --pagination-margin-right: 10px;
-  --pagination-size-text-margin-right: 10px;
+  --pagination-gap: var(--spacing-xs);
   --pagination-size-input-width: 70px;
-  --pagination-page-controls-margin: 10px;
 }

package/src/css/components/organisms/wt-player/_variables.scss

@@ -2,7 +2,7 @@
   --plyr-color-main: var(--main-accent-color);
   --plyr-audio-control-color: var(--icon-primary-color);
   // --plyr-control-toggle-checked-background: var(--main-primary-color);
-  --player-close-icon-transform-translate-x: var(--spacing--sm);
+  --player-close-icon-transform-translate-x: var(--spacing-xs);
   // "-1 * var" for use the negative value of a variable
-  --player-close-icon-transform-translate-y: calc(-1 * var(--spacing--md));
+  --player-close-icon-transform-translate-y: calc(-1 * var(--spacing-md));
 }

package/src/css/components/organisms/wt-status-select/_variables.scss

@@ -1,6 +1,6 @@
 
 :root {
-  --status-select-select-tags-padding: 9px 34px 9px 9px; // 34px = 24 + 10
-  --status-select--hover-color: var(--form-input-color);
-  --status-select-bg--hover-color: #F9F9F9; // zebra-like
+  --status-select-padding: 0 calc(var(--icon-size-md) + var(--spacing-xs)) 0 0; // reset wt-select padding, but preserve arrow icon padding
+  --status-select-option-color: var(--form-input-color);
+  --status-select-bg--hover-color: var(--secondary-color);
 }

package/src/css/components/organisms/wt-table/_variables.scss

@@ -2,15 +2,15 @@
 :root {
   --table-col-min-width: 140px;
 
-  --table-head-sort-arrow-margin: 10px;
-  --table-head-borer-bottom: 1px solid;
-  --table-head-borer-color: var(--main-outline-color);
+  --table-head-sort-arrow-margin: var(--spacing-xs);
+  --table-head-border: 1px solid;
+  --table-head-border-color: var(--secondary-color);
 
-  --table-min-height: 24px; // 24px icon size + 2 paddings
-  --table-column-gap: 20px;
-  --table-row-padding: 10px;
+  --table-min-height: 24px; // 24px icon size or body-1 lh
+  --table-column-gap: var(--spacing-sm);
+  --table-row-padding: var(--spacing-sm);
 
-  --table-primary-color: var(--main-primary-color);
-  --table--hover-color: var(--main-secondary-accent-color);
-  --table-secondary-color: #F9F9F9; // zebra
+  --table-primary-color: var(--main-color);
+  --table--hover-color: var(--accent-secondary-color);
+  --table-secondary-color: var(--secondary-color-50); // zebra
 }

package/src/css/components/organisms/wt-table-actions/_variables.scss

@@ -1,4 +1,5 @@
 
 :root {
-  --table-actions-icon-gap: 20px;
+  --table-actions-padding: var(--spacing-xs);
+  --table-actions-icon-gap: var(--spacing-xs);
 }

package/src/css/main.scss

@@ -1,8 +1,10 @@
-@import 'sizes/sizes';
-@import 'display-helpers/display-helpers';
 @import 'styleguide/styleguide';
-@import 'transitions/transitions';
+
 @import 'components/components';
+@import 'styleguide/display-helpers/display-helpers';
+
+
+@include wt-placeholder;
 
 :root {
   --transition: 0.2s;
@@ -20,11 +22,11 @@ html {
 }
 
 body {
+  @extend %typo-body-1;
+
   min-height: 100%;
   height: 100%;
   margin: 0;
-  font-family: 'Montserrat Regular', monospace;
-  font-size: 100%;
 }
 
 //main {

package/src/css/styleguide/_styleguide.scss

@@ -1,4 +1,9 @@
 @import './scroll';
-@import '../typography/typography';
-@import '../colors/colors';
-@import '../shadows/shadows';
+@import 'border-radius/border-radius';
+@import 'typography/typography';
+@import 'colors/colors';
+@import 'elevations/elevations';
+@import 'spacings/spacings';
+@import 'viewport-breakpoints/viewport-breakpoints';
+@import 'transitions/transitions';
+@import 'placeholder/placeholder';

package/src/css/styleguide/border-radius/_border-radius.scss

@@ -0,0 +1,4 @@
+:root {
+  --border-radius: var(--spacing-2xs);
+  --border-radius--pill: 50px;
+}

package/src/css/{colors → styleguide/colors}/_colors.scss

@@ -60,6 +60,7 @@
   --icon-color-danger: var(--false-color);
   --icon-color-transfer: var(--transfer-color);
   --icon-color-hold: var(--hold-color);
+  --icon-color-secondary-50: var(--secondary-color-50);
 
 
   --page-bg-color: hsla(var(--_page-bg-color), 1);
@@ -95,8 +96,8 @@
   --form-opacity--focus: var(--_opacity--focus);
   --form-opacity--disabled: var(--_opacity--disabled);
 
-  --form-placeholder-opacity: 0.4;
-  --form-placeholder-opacity--hover: 0.6;
+  --form-placeholder-opacity: 0.6;
+  --form-placeholder-opacity--focus: 0.4;
   --form-border-opacity--disabled: 0.05;
 
   --form-opacity--ouline--default: 0.4;
@@ -115,8 +116,8 @@
   --form-border--disabled-color: hsla(var(--_contrast-color), var(--form-border-opacity--disabled));
 
   --form-placeholder-color: hsla(var(--_contrast-color), var(--form-placeholder-opacity));
-  --form-placeholder--hover-color: hsla(var(--_contrast-color), var(--form-placeholder-opacity--hover));
-  --form-placeholder--disabled-color: hsla(var(--_contrast-color), var(--form-opacity--disabled));
+  --form-placeholder-color--focus: hsla(var(--_contrast-color), var(--form-placeholder-opacity--focus));
+  --form-placeholder-color--disabled: hsla(var(--_contrast-color), var(--form-opacity--disabled));
 
   // outline
   --form-outline-label-color: hsla(var(--_contrast-color), var(--form-opacity--default));
@@ -124,9 +125,6 @@
   --form-outline-border-color: hsla(var(--_contrast-color), var(--form-opacity--ouline--default));
   --form-outline-border--hover-color: hsla(var(--_contrast-color), var(--form-opacity--ouline--hover));
 
-  --form-outline-placeholder-color: hsla(var(--_contrast-color), var(--form-opacity--ouline--default));
-  --form-outline-placeholder--hover-color: hsla(var(--_contrast-color), var(--form-opacity--ouline--hover));
-
   // TEXT OPACITY
   --text-opacity--default: var(--_opacity--default);
   --text-opacity----outline--default: 0.7;

package/src/css/{display-helpers → styleguide/display-helpers}/_display-helpers.scss

@@ -1,3 +1,5 @@
+@import '../viewport-breakpoints/viewport-breakpoints';
+
 .d-none {
   display: none;
 }

package/src/css/styleguide/elevations/_elevations.scss

@@ -0,0 +1,13 @@
+:root {
+  --_elevation-color: hsla(0, 0%, 0%, 0.08);
+  --elevation-1: 0px 0px 2px 1px var(--_elevation-color);
+  --elevation-2: 0px 0px 4px 2px var(--_elevation-color);
+  --elevation-3: 0px 0px 6px 3px var(--_elevation-color);
+  --elevation-4: 0px 0px 8px 4px var(--_elevation-color);
+  --elevation-5: 0px 0px 10px 5px var(--_elevation-color);
+  --elevation-6: 0px 0px 12px 6px var(--_elevation-color);
+  --elevation-7: 0px 0px 14px 7px var(--_elevation-color);
+  --elevation-8: 0px 0px 16px 8px var(--_elevation-color);
+  --elevation-9: 0px 0px 18px 9px var(--_elevation-color);
+  --elevation-10: 0px 0px 20px 10px var(--_elevation-color);
+}

package/src/css/styleguide/fonts/_fonts.scss

@@ -0,0 +1,126 @@
+
+@font-face {
+  font-family: 'Montserrat';
+  src: url('../../../assets/fonts/Montserrat/Montserrat-Thin.ttf') format('truetype');
+  font-weight: 100;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Montserrat';
+  src: url('../../../assets/fonts/Montserrat/Montserrat-ThinItalic.ttf') format('truetype');
+  font-weight: 100;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: 'Montserrat';
+  src: url('../../../assets/fonts/Montserrat/Montserrat-ExtraLight.ttf') format('truetype');
+  font-weight: 200;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Montserrat';
+  src: url('../../../assets/fonts/Montserrat/Montserrat-ExtraLightItalic.ttf') format('truetype');
+  font-weight: 200;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: 'Montserrat';
+  src: url('../../../assets/fonts/Montserrat/Montserrat-Light.ttf') format('truetype');
+  font-weight: 300;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Montserrat';
+  src: url('../../../assets/fonts/Montserrat/Montserrat-LightItalic.ttf') format('truetype');
+  font-weight: 300;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: 'Montserrat';
+  src: url('../../../assets/fonts/Montserrat/Montserrat-Regular.ttf') format('truetype');
+  font-weight: 400;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Montserrat';
+  src: url('../../../assets/fonts/Montserrat/Montserrat-Italic.ttf') format('truetype');
+  font-weight: 400;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: 'Montserrat';
+  src: url('../../../assets/fonts/Montserrat/Montserrat-Medium.ttf') format('truetype');
+  font-weight: 500;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Montserrat';
+  src: url('../../../assets/fonts/Montserrat/Montserrat-MediumItalic.ttf') format('truetype');
+  font-weight: 500;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: 'Montserrat';
+  src: url('../../../assets/fonts/Montserrat/Montserrat-SemiBold.ttf') format('truetype');
+  font-weight: 600;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Montserrat';
+  src: url('../../../assets/fonts/Montserrat/Montserrat-SemiBoldItalic.ttf') format('truetype');
+  font-weight: 600;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: 'Montserrat';
+  src: url('../../../assets/fonts/Montserrat/Montserrat-Bold.ttf') format('truetype');
+  font-weight: 700;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Montserrat';
+  src: url('../../../assets/fonts/Montserrat/Montserrat-BoldItalic.ttf') format('truetype');
+  font-weight: 700;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: 'Montserrat';
+  src: url('../../../assets/fonts/Montserrat/Montserrat-ExtraBold.ttf') format('truetype');
+  font-weight: 800;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Montserrat';
+  src: url('../../../assets/fonts/Montserrat/Montserrat-ExtraBoldItalic.ttf') format('truetype');
+  font-weight: 800;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: 'Montserrat';
+  src: url('../../../assets/fonts/Montserrat/Montserrat-Black.ttf') format('truetype');
+  font-weight: 900;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Montserrat';
+  src: url('../../../assets/fonts/Montserrat/Montserrat-BlackItalic.ttf') format('truetype');
+  font-weight: 900;
+  font-style: italic;
+}

package/src/css/styleguide/placeholder/_placeholder.scss

@@ -0,0 +1,49 @@
+// https://stackoverflow.com/a/17181946/17782185
+// https://stackoverflow.com/a/49192800/17782185
+
+@mixin optional-at-root($sel) {
+  @at-root #{if(not &, $sel, selector-append(&, $sel))} {
+    @content;
+  }
+}
+
+$vendors: (':-webkit', '-moz', ':-moz', '-ms');
+
+@mixin wt-placeholder($style: '') {
+  @each $vendor in $vendors {
+    @include optional-at-root(':#{$vendor}-input-placeholder') {
+      font: inherit;
+      transition: var(--transition);
+
+      @if ($style == 'focus') {
+        color: var(--form-placeholder-color--focus);
+      } @else if ($style == 'disabled') {
+        color: var(--form-placeholder-color--disabled);
+      } @else {
+        color: var(--form-placeholder-color);
+      }
+
+      @content;
+    }
+  }
+}
+
+/*
+  Classes for direct extending in placeholder-like elements styling
+   (e.g. vue-multiselect .multiselect__placeholder which is technically a span)
+*/
+%wt-placeholder {
+  font: inherit;
+  transition: var(--transition);
+  color: var(--form-placeholder-color);
+}
+
+%wt-placeholder--focus {
+  @extend %wt-placeholder;
+  color: var(--form-placeholder-color--focus);
+}
+
+%wt-placeholder--disabled {
+  @extend %wt-placeholder;
+  color: var(--form-placeholder-color--disabled);
+}

package/src/css/styleguide/spacings/_spacings.scss

@@ -0,0 +1,15 @@
+:root {
+  // Start point
+  --_spacing-multiplicator: 8px;
+
+  // Spacings
+  --spacing-3xs: calc(var(--_spacing-multiplicator) / 4);
+  --spacing-2xs: calc(var(--_spacing-multiplicator) / 2);
+  --spacing-xs: calc(var(--_spacing-multiplicator) * 1);
+  --spacing-sm: calc(var(--_spacing-multiplicator) * 2);
+  --spacing-md: calc(var(--_spacing-multiplicator) * 3);
+  --spacing-lg: calc(var(--_spacing-multiplicator) * 4);
+  --spacing-xl: calc(var(--_spacing-multiplicator) * 5);
+  --spacing-2xl: calc(var(--_spacing-multiplicator) * 6);
+  --spacing-3xl: calc(var(--_spacing-multiplicator) * 7);
+}

package/src/css/styleguide/transitions/_transitions.scss

@@ -0,0 +1 @@
+@import 'fade/fade';

package/src/css/styleguide/typography/_typography.scss

@@ -0,0 +1,102 @@
+
+%typo-heading-1 {
+  font: {
+    family: 'Montserrat', monospace;
+    size: 32px;
+    weight: 600;
+  }
+  line-height: 48px;
+  letter-spacing: 0.28px; // 0.02em
+}
+
+%typo-heading-2 {
+  font: {
+    family: 'Montserrat', monospace;
+    size: 24px;
+    weight: 600;
+  }
+  line-height: 40px;
+  letter-spacing: 0.28px; // 0.02em
+}
+
+%typo-heading-3 {
+  font: {
+    family: 'Montserrat', monospace;
+    size: 20px;
+    weight: 600;
+  }
+  line-height: 32px;
+  letter-spacing: 0.28px; // 0.02em
+}
+
+%typo-subtitle-1 {
+  font: {
+    family: 'Montserrat', monospace;
+    size: 14px;
+    weight: 500;
+  }
+  line-height: 24px;
+  letter-spacing: 0.28px; // 0.02em
+}
+
+%typo-subtitle-2 {
+  font: {
+    family: 'Montserrat', monospace;
+    size: 12px;
+    weight: 500;
+  }
+  line-height: 20px;
+  letter-spacing: 0.28px; // 0.02em
+}
+
+%typo-body-1 {
+  font: {
+    family: 'Montserrat', monospace;
+    size: 14px;
+    weight: 400;
+  }
+  line-height: 24px;
+  letter-spacing: 0.56px; // 0.04em
+}
+
+%typo-body-2 {
+  font: {
+    family: 'Montserrat', monospace;
+    size: 12px;
+    weight: 400;
+  }
+  line-height: 20px;
+  letter-spacing: 0.16px; // 0.01em
+}
+
+%typo-button {
+  font: {
+    family: 'Montserrat', monospace;
+    size: 12px;
+    weight: 500;
+  }
+  text-transform: uppercase;
+  line-height: 24px;
+  letter-spacing: 0.96px; // 0.06em
+}
+
+%typo-caption {
+  font: {
+    family: 'Montserrat', monospace;
+    size: 10px;
+    weight: 400;
+  }
+  line-height: 16px;
+  letter-spacing: 0.48px; // 0.03em
+}
+
+%typo-overline {
+  font: {
+    family: 'Montserrat', monospace;
+    size: 12px;
+    weight: 500;
+  }
+  line-height: 20px;
+  text-transform: uppercase;
+  letter-spacing: 2.56px; // 0.16em
+}

package/src/components/atoms/wt-badge/__tests__/WtBadge.spec.js

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

package/src/css/components/atoms/wt-badge/_variables.scss

@@ -1,7 +0,0 @@
-
-:root {
-  --badge-padding: 5px 10px;
-  --badge-border-radius: 20px;
-  --badge-bg-color: var(--main-secondary-accent-color);
-  --badge-bg-color--outline: var(--main-outline-color);
-}

package/src/css/fonts/_fonts.scss

@@ -1,9 +0,0 @@
-@font-face {
-  font-family: 'Montserrat Semi';
-  src: url('../../assets/fonts/Montserrat/Montserrat-SemiBold.ttf') format('truetype');
-}
-
-@font-face {
-  font-family: 'Montserrat Regular';
-  src: url('../../assets/fonts/Montserrat/Montserrat-Regular.ttf') format('truetype');
-}

package/src/css/shadows/_shadows.scss

@@ -1,7 +0,0 @@
-:root {
-  --shadow-style-down-50: 0px 0px 1px rgba(0, 0, 0, 0.15), inset 1px 1px 1px rgba(0, 0, 0, 0.05);
-  --shadow-style-down-100: 0px 0px 1px rgba(0, 0, 0, 0.15), inset 1px 1px 1px rgba(0, 0, 0, 0.05), inset 0px 0px 8px rgba(0, 0, 0, 0.1);
-  --shadow-style-up-50: 1px 1px 2px rgba(0, 0, 0, 0.08), inset 1px 1px 1px #FFFFFF, inset -1px -1px 1px rgba(0, 0, 0, 0.05);
-  --shadow-style-up-100: 1px 1px 2px rgba(0, 0, 0, 0.05), -1px -1px 5px #FFFFFF, inset 1px 1px 1px #FFFFFF, inset -1px -1px 3px rgba(0, 0, 0, 0.1);
-  --shadow-style-font: 0px 0px 10px rgba(0, 0, 0, 0.1);
-}

package/src/css/sizes/_sizes.scss

@@ -1,2 +0,0 @@
-@import 'viewport-breakpoints';
-@import 'spacing';

package/src/css/sizes/_spacing.scss

@@ -1,33 +0,0 @@
-//@import './viewport-breakpoints';
-
-:root {
-  // Start point
-  --_spacing-multiplicity: 4px;
-
-  // Spacings
-  --spacing--xs: calc(var(--_spacing-multiplicity) * 1);
-  --spacing--sm: calc(var(--_spacing-multiplicity) * 2);
-  --spacing--md: calc(var(--_spacing-multiplicity) * 3);
-  --spacing--lg: calc(var(--_spacing-multiplicity) * 4);
-  --spacing--xl: calc(var(--_spacing-multiplicity) * 5);
-  --spacing--2xl: calc(var(--_spacing-multiplicity) * 6);
-  --spacing--3xl: calc(var(--_spacing-multiplicity) * 7);
-
-  // Border radius
-  --border-radius: var(--spacing--xs);
-
-  // DEPRECATED
-  --component-padding: var(--spacing--lg);
-  --component-spacing: var(--spacing--lg);
-  --icon-spacing: var(--spacing--sm);
-
-  //@media (#{$media} and #{$media-width-sm}) {
-  //  --component-padding: 10px;
-  //  --component-spacing: 10px;
-  //}
-  //
-  //@media (#{$media} and #{$media-width-xs}) {
-  //  --component-padding: 10px;
-  //  --component-spacing: 1px;
-  //}
-}

package/src/css/transitions/_transitions.scss

@@ -1 +0,0 @@
-@import "./fade/fade";