hrm_ui_lib 1.0.0

package/src/assets/styles/components/_status.scss

@@ -0,0 +1,60 @@
+@use "../helpers/mixin";
+
+.status {
+  $this: &;
+
+  --ds-status-circle-size-lg: var(--ds-size-8);
+  --ds-status-circle-size-sm: var(--ds-size-6);
+
+  --ds-status-circle-bg-primary: var(--ds-color-icon-primary);
+  --ds-status-circle-bg-information: var(--ds-color-icon-info);
+  --ds-status-circle-bg-brand: var(--ds-color-icon-brand);
+  --ds-status-circle-bg-danger: var(--ds-color-icon-danger);
+  --ds-status-circle-bg-warning: var(--ds-color-icon-warning);
+  --ds-status-circle-bg-success: var(--ds-color-icon-success);
+  --ds-status-circle-bg-discovery: var(--ds-color-icon-discovery);
+  --ds-status-circle-bg-disabled: var(--ds-color-icon-disabled);
+
+  @include mixin.inline-flex;
+  @include mixin.align-items(center);
+
+  &__circle {
+    display: block;
+    border-radius: var(--ds-border-radius-full);
+    width: var(--ds-status-circle-size-lg);
+    min-width: var(--ds-status-circle-size-lg);
+    height: var(--ds-status-circle-size-lg);
+  }
+  &__circle--primary {
+    background-color: var(--ds-status-circle-bg-primary);
+  }
+  &__circle--information {
+    background-color: var(--ds-status-circle-bg-information);
+  }
+  &__circle--brand {
+    background-color: var(--ds-status-circle-bg-brand);
+  }
+  &__circle--danger {
+    background-color: var(--ds-status-circle-bg-danger);
+  }
+  &__circle--success {
+    background-color: var(--ds-status-circle-bg-success);
+  }
+  &__circle--warning {
+    background-color: var(--ds-status-circle-bg-warning);
+  }
+  &__circle--discovery {
+    background-color: var(--ds-status-circle-bg-discovery);
+  }
+  &__circle--disabled {
+    background-color: var(--ds-status-circle-bg-disabled);
+  }
+
+  &--small {
+    #{$this}__circle {
+      width: var(--ds-status-circle-size-sm);
+      min-width: var(--ds-status-circle-size-sm);
+      height: var(--ds-status-circle-size-sm);
+    }
+  }
+}

package/src/assets/styles/components/_svg-icons.scss

@@ -0,0 +1,54 @@
+@use "../helpers/mixin";
+
+.svg-icon {
+  @include mixin.flexbox;
+  @include mixin.align-items(center);
+  @include mixin.justify-content(center);
+  width: 1em;
+  height: 1em;
+  vertical-align: top;
+  font-size: var(--ds-size-24);
+
+  path {
+    pointer-events: none;
+  }
+
+  &__size {
+    $sizes: (
+      xxsmall: var(--ds-size-12),
+      xsmall: var(--ds-size-16),
+      small: var(--ds-size-20),
+      medium: var(--ds-size-24),
+      large: var(--ds-size-28),
+      xlarge: var(--ds-size-32),
+      xxlarge: var(--ds-size-48),
+    );
+    @each $key, $value in $sizes {
+      &-#{$key} {
+        font-size: $value;
+      }
+    }
+  }
+
+  &__type {
+    $types: (
+        primary: var(--ds-color-text-primary),
+        secondary: var(--ds-color-text-secondary),
+        tertiary: var(--ds-color-text-tertiary),
+        disabled: var(--ds-color-text-disabled),
+        selected: var(--ds-color-text-selected),
+        inverse: var(--ds-color-text-inverse),
+        brand: var(--ds-color-text-brand),
+        success: var(--ds-color-text-success),
+        information: var(--ds-color-text-info),
+        warning: var(--ds-color-text-warning),
+        danger: var(--ds-color-text-danger),
+        discovery: var(--ds-color-text-discovery),
+    );
+    @each $key, $value in $types {
+      &-#{$key} path {
+        fill: $value;
+      }
+    }
+  }
+}

package/src/assets/styles/components/_switcher.scss

@@ -0,0 +1,17 @@
+@use "../helpers/mixin";
+
+.switcher {
+  $this: &;
+
+  --ds-swither-inline-label-padding: var(--ds-space-16);
+
+  &--inline {
+    @include mixin.flexbox;
+    @include mixin.justify-content(space-between);
+    @include mixin.align-items(flex-start);
+
+    #{$this}__label {
+      padding-right: var(--ds-swither-inline-label-padding);
+    }
+  }
+}

package/src/assets/styles/components/_tab.scss

@@ -0,0 +1,203 @@
+@use "../helpers/mixin";
+
+.tab {
+  $this: &;
+
+  --ds-tab-color-default: var(--ds-color-text-secondary);
+  --ds-tab-color-hover: var(--ds-color-text-tertiary);
+  --ds-tab-color-disabled: var(--ds-color-text-disabled);
+  --ds-tab-color-selected: var(--ds-color-text-primary);
+
+  --ds-tab-icon-color-default: var(--ds-color-text-secondary);
+  --ds-tab-icon-color-hover: var(--ds-color-text-tertiary);
+  --ds-tab-icon-color-disabled: var(--ds-color-text-disabled);
+  --ds-tab-icon-color-selected: var(--ds-color-text-primary);
+
+  --ds-tab-size-lg: var(--ds-size-56);
+  --ds-tab-size-md: var(--ds-size-48);
+  --ds-tab-size-sm: var(--ds-size-32);
+  --ds-tab-font-size-lg: var(--ds-paragraph-md);
+  --ds-tab-font-size-md: var(--ds-paragraph-std);
+  --ds-tab-font-size-sm: var(--ds-paragraph-sm);
+  --ds-tab-font: var(--ds-font-weight-active) var(--ds-tab-font-size-lg)/1 var(--ds-font-family);
+
+  --ds-tab-border-size: 0;
+  --ds-tab-border-default: var(--ds-color-border-tertiary);
+  --ds-tab-border-selected: var(--ds-color-border-brand);
+
+  --ds-tab-margin: 0 var(--ds-space-24) 0 0;
+
+  @include mixin.inline-flex;
+  @include mixin.align-items(center);
+  @include mixin.justify-content(center);
+  flex: 1;
+  position: relative;
+  color: var(--ds-tab-color-default);
+  border-radius: var(--ds-badge-border-radius);
+  border-width: var(--ds-tab-border-size);
+  border-style: solid;
+  border-color: var(--ds-tab-border-default);
+  margin: var(--ds-tab-margin);
+
+  &:last-child {
+    margin: 0;
+  }
+
+  &:after {
+    content: '';
+    position: absolute;
+    bottom: -1px;
+    height: 2px;
+    width: 0;
+    background-color: var(--ds-tab-border-selected);
+    transition: width .3s linear;
+  }
+
+  &__icon {
+    color: var(--ds-tab-icon-color-default);
+  }
+
+  &__label {
+    font: var(--ds-tab-font);
+  }
+
+  &:not(&--selected, &--disabled):hover {
+    cursor: pointer;
+
+    #{$this}__icon {
+      color: var(--ds-tab-icon-color-hover);
+    }
+    #{$this}__label {
+      color: var(--ds-tab-color-hover);
+    }
+  }
+
+  &--disabled {
+    cursor: default;
+
+    #{$this}__icon {
+      color: var(--ds-tab-icon-color-disabled);
+    }
+    #{$this}__label {
+      color: var(--ds-tab-color-disabled);
+    }
+  }
+
+  &--selected {
+    cursor: default;
+
+    &:after {
+      width: 100%;
+    }
+
+    #{$this}__icon {
+      color: var(--ds-tab-icon-color-selected);
+    }
+
+    #{$this}__label {
+      color: var(--ds-tab-color-selected);
+    }
+  }
+
+  &--large {
+   height: var(--ds-tab-size-lg);
+
+    #{$this}__label {
+      font-size: var(--ds-tab-font-size-lg);
+    }
+  }
+  &--medium {
+    height: var(--ds-tab-size-md);
+
+    #{$this}__label {
+      font-size: var(--ds-tab-font-size-md);
+    }
+  }
+  &--small {
+    height: var(--ds-tab-size-sm);
+
+    #{$this}__label {
+      font-size: var(--ds-tab-font-size-sm);
+    }
+  }
+}
+
+.tabs-container {
+  --ds-tabs-primary-border-size: 0 0 1px 0;
+  --ds-tabs-primary-border-default: var(--ds-color-divider);
+
+  --ds-tabs-secondary-bg: var(--ds-color-bg-container-light);
+  --ds-tabs-secondary-padding: var(--ds-space-8);
+  --ds-tabs-secondary-border-radius: var(--border-radius-12);
+  --ds-tabs-secondary-tab-heightt: var(--ds-size-40);
+  --ds-tabs-secondary-tab-padding: var(--ds-space-10) var(--ds-space-12);
+  --ds-tabs-secondary-tab-margin: 0 var(--ds-space-8) 0 0;
+  --ds-tabs-secondary-tab-bg-default: transparent;
+  --ds-tabs-secondary-tab-bg-hover: var(--ds-color-bg-container-dark);
+  --ds-tabs-secondary-tab-bg-selected: var(--ds-color-bg-white);
+  --ds-tabs-secondary-tab-color-default: var(--ds-color-text-primary);
+  --ds-tabs-secondary-tab-color-hover: var(--ds-color-text-primary);
+  --ds-tabs-secondary-tab-color-selected: var(--ds-color-text-primary);
+  --ds-tabs-secondary-tab-border-size: 1px;
+  --ds-tabs-secondary-tab-border-default: transparent;
+  --ds-tabs-secondary-tab-border-hover: transparent;
+  --ds-tabs-secondary-tab-border-selected: var(--ds-color-border-tertiary);
+  --ds-tabs-secondary-tab-border-radius: var(--ds-border-radius-lg);
+
+  @include mixin.inline-flex;
+  @include mixin.align-items(flex-end);
+
+  &--primary {
+    border-width: var(--ds-tabs-primary-border-size);
+    border-style: solid;
+    border-color: var(--ds-tabs-primary-border-default);
+  }
+
+  &--secondary {
+    background-color: var(--ds-tabs-secondary-bg);
+    padding: var(--ds-tabs-secondary-padding);
+    border-radius: var(--ds-tabs-secondary-border-radius);
+
+    .tab {
+      padding: var(--ds-tabs-secondary-tab-padding);
+      height: var(--ds-tabs-secondary-tab-heightt);
+      margin: var(--ds-tabs-secondary-tab-margin);
+      border-width: var(--ds-tabs-secondary-tab-border-size);
+      border-style: solid;
+      background-color: var(--ds-tabs-secondary-tab-bg-default);
+      border-color: var(--ds-tabs-secondary-tab-border-default);
+      border-radius: var(--ds-tabs-secondary-tab-border-radius);
+      transition: background-color .3s linear, border-color .3s linear;
+
+      &:last-child {
+        margin: 0;
+      }
+
+      &:after {
+        content: none;
+      }
+
+      &__icon, &__label {
+        color: var(--ds-tabs-secondary-tab-color-default);
+      }
+
+      &:not(&--selected):hover {
+        background-color: var(--ds-tabs-secondary-tab-bg-hover);
+        border-color: var(--ds-tabs-secondary-tab-border-hover);
+
+        .tab__icon, .tab__label {
+          color: var(--ds-tabs-secondary-tab-color-hover);
+        }
+      }
+
+      &--selected {
+        background-color: var(--ds-tabs-secondary-tab-bg-selected);
+        border-color: var(--ds-tabs-secondary-tab-border-selected);
+
+        .tab__icon, .tab__label {
+          color: var(--ds-tabs-secondary-tab-color-selected);
+        }
+      }
+    }
+  }
+}

package/src/assets/styles/components/_table.scss

@@ -0,0 +1,99 @@
+@use "../helpers/mixin";
+
+.table-wrapper {
+  --ds-table-th-height: var(--ds-size-56);
+  --ds-table-td-height: var(--ds-size-56);
+
+  --ds-table-th-padding: 0 var(--ds-space-16);
+  --ds-table-td-padding: 0 var(--ds-space-16);
+
+  --ds-table-th-border-color: var(--ds-color-border-secondary);
+  --ds-table-td-border-color: var(--ds-color-border-secondary);
+  --ds-table-td-border-bottom-color: var(--ds-color-bg-container-lighter);
+  --ds-table-td-border-bottom-color-selected: var(--ds-color-border-selected);
+
+  --ds-table-th-bg-color: var(--ds-color-bg-white);
+  --ds-table-td-bg-color: var(--ds-color-bg-white);
+  --ds-table-td-bg-color-dark: var(--ds-color-bg-container-lighter);
+
+  table {
+    border-collapse: separate;
+    border-spacing: 0;
+    width: 100%;
+
+    thead {
+      tr {
+        th {
+          background-color: var(--ds-table-th-bg-color);
+          border-bottom: 1px solid var(--ds-table-th-border-color);
+          height: var(--ds-table-th-height);
+          padding: var(--ds-table-th-padding);
+          vertical-align: middle;
+
+         .unsorted__icon {
+           display: none;
+         }
+
+          &:hover {
+            .unsorted__icon {
+              display: block;
+            }
+          }
+        }
+      }
+    }
+
+    tbody {
+      tr {
+        &:nth-child(1n) {
+          td {
+            background-color: var(--ds-table-td-bg-color);
+          }
+        }
+
+        &:nth-child(2n) {
+          td {
+            background-color: var(--ds-table-td-bg-color-dark);
+          }
+        }
+
+        &.selected {
+          td {
+            border-bottom-color: var(--ds-table-td-border-bottom-color-selected);
+          }
+        }
+
+        td {
+          border-bottom: 1px solid var(--ds-table-td-border-bottom-color);
+          height: var(--ds-table-td-height);
+          padding: var(--ds-table-td-padding);
+          vertical-align: middle;
+        }
+      }
+    }
+  }
+
+  .fixed_header {
+    @include mixin.sticky(0, unset, unset, unset);
+    z-index: 2;
+  }
+
+  .fixed_checkbox {
+    @include mixin.sticky(unset, unset, unset, 0);
+
+    & + th, & + td {
+      padding-left: 0;
+    }
+  }
+
+  .fixed_column_left {
+    @include mixin.sticky(0, unset, unset, unset);
+    z-index: 1;
+    border-right: 1px solid var(--ds-table-td-border-color)
+  }
+
+  .fixed_column_right {
+    @include mixin.sticky(unset, 0, unset, unset);
+    border-left: 1px solid var(--ds-table-td-border-color)
+  }
+}

package/src/assets/styles/components/_textarea.scss

@@ -0,0 +1,122 @@
+@use "../helpers/mixin";
+
+.textarea {
+  $this: &;
+
+  //----------- component specific tokens -------------//
+
+  --ds-textarea-size: var(--ds-size-100);
+  --ds-textarea-padding: var(--ds-space-10) var(--ds-space-12);
+  --ds-textarea-font: var(--ds-font-weight-default) var(--ds-paragraph-std)/var(--ds-line-height-heading) var(--ds-font-family);
+
+  --ds-textarea-bg-default: var(--ds-color-bg-white);
+  --ds-textarea-bg-hover: var(--ds-color-bg-container-lighter);
+  --ds-textarea-bg-pressed: var(--ds-color-bg-white);
+  --ds-textarea-bg-focused: var(--ds-color-bg-white);
+  --ds-textarea-bg-activated: var(--ds-color-bg-white);
+  --ds-textarea-bg-validated: var(--ds-color-bg-white);
+  --ds-textarea-bg-invalid: var(--ds-color-bg-white);
+  --ds-textarea-bg-disabled: var(--ds-color-bg-white);
+
+  --ds-textarea-body-text-default: var(--ds-color-text-tertiary);
+  --ds-textarea-body-text-focused: var(--ds-color-text-primary);
+  --ds-textarea-body-text-activated: var(--ds-color-text-primary);
+  --ds-textarea-body-text-validated: var(--ds-color-text-primary);
+  --ds-textarea-body-text-invalid: var(--ds-color-text-primary);
+  --ds-textarea-body-text-disabled: var(--ds-color-text-disabled);
+
+  --ds-textarea-border-color-default: var(--ds-color-border-tertiary);
+  --ds-textarea-border-color-hover: var(--ds-color-border-secondary);
+  --ds-textarea-border-color-focused: var(--brand-700);
+  --ds-textarea-border-color-activated: var(--ds-color-border-tertiary);
+  --ds-textarea-border-color-validated: var(--ds-color-border-tertiary);
+  --ds-textarea-border-color-invalid: var(--ds-color-border-danger);
+  --ds-textarea-border-color-disabled: var(--ds-color-border-disabled);
+  --ds-textarea-border: var(--ds-border-thin) solid var(--ds-textarea-border-color-default);
+  --ds-textarea-border-radius: var(--ds-border-radius-lg);
+
+  --ds-textarea-transition: background-color .3s linear, color .3s linear, border-color .3s linear;
+
+  //----------//
+
+  textarea {
+    border: 0;
+    width: 100%;
+    outline: none;
+    font: var(--ds-textarea-font);
+    color: var(--ds-textarea-body-text-default);
+    transition: var(--ds-textarea-transition);
+    height: var(--ds-textarea-size);
+    border-radius: var(--ds-textarea-border-radius);
+    border: var(--ds-textarea-border);
+    background-color: var(--ds-textarea-bg-default);
+    padding: var(--ds-textarea-padding);
+    margin: var(--ds-textarea-margin);
+    resize: none;
+
+    &:-ms-input-placeholder {
+      color: var(--ds-textarea-body-text-default);
+    }
+    &::placeholder {
+      color: var(--ds-textarea-body-text-default);
+    }
+
+    &::-webkit-scrollbar {
+      width: 0;
+    }
+
+    &:valid {
+      color: var(--ds-textarea-body-text-validated);
+      background-color: var(--ds-textarea-bg-validatedd);
+      border-color: var(--ds-textarea-border-color-validated);
+    }
+
+    &:invalid {
+      color: var(--ds-textarea-body-text-invalid);
+      background-color: var(--ds-textarea-bg-invalid);
+      border-color: var(--ds-textarea-border-color-invalid);
+    }
+
+    &:hover {
+      background-color: var(--ds-textarea-bg-hover);
+      border-color: var(--ds-textarea-border-color-hover);
+    }
+
+    &:focus {
+      color: var(--ds-textarea-body-text-focused);
+      background-color: var(--ds-textarea-bg-focused);
+      border-color: var(--ds-textarea-border-color-focused);
+    }
+
+    &:active {
+      color: var(--ds-textarea-body-text-activated);
+      background-color: var(--ds-textarea-bg-activated);
+      border-color: var(--ds-textarea-border-color-activated);
+    }
+
+    &[disabled] {
+      cursor: default;
+      background-color: var(--ds-textarea-bg-default);
+      border-color: var(--ds-textarea-border-color-disabled);
+      color: var(--ds-textarea-body-text-disabled);
+
+      &:-ms-input-placeholder {
+        color: var(--ds-textarea-body-text-disabled);
+      }
+      &::placeholder {
+        color: var(--ds-textarea-body-text-disabled);
+      }
+    }
+  }
+
+  &__message {
+    @include mixin.flexbox;
+    @include mixin.align-items(center);
+    @include mixin.justify-content(space-between);
+  }
+
+  &__counter {
+    flex: 1;
+    text-align: right;
+  }
+}

package/src/assets/styles/components/_tooltip.scss

@@ -0,0 +1,117 @@
+@use "../helpers/mixin";
+
+.tooltip {
+  $this: &;
+
+  --ds-tooltip-bg: var(--ds-color-bg-white);
+  --ds-tooltip-color: var(--ds-color-text-inverse);
+  --ds-tooltip-padding: var(--ds-space-4) var(--ds-space-8);
+  --ds-tooltip-siz-lg: var(--ds-size-32);
+  --ds-tooltip-size-sm: var(--ds-size-24);
+  --ds-tooltip-border-radius: var(--ds-border-radius-xxs);
+  --ds-tooltip-max-width: var(--ds-size-240);
+
+  --ds-tooltip-arrow-size: var(--ds-size-4);
+  --ds-tooltip-arrow-position: var(--ds-space-20);
+  --ds-tooltip-arrow-bg: var(--ds-color-bg-white);
+  --ds-tooltip-shadow: 0px 2px 4px rgba(34, 34, 34, 0.16);
+
+  @include mixin.flexbox;
+  @include mixin.align-items(center);
+  position: fixed;
+  color: var(--ds-tooltip-color);
+  background-color: var(--ds-tooltip-bg);
+  border-radius: var(--ds-tooltip-border-radius);
+  filter: drop-shadow(#{var(--ds-tooltip-shadow)});
+  max-width: var(--ds-tooltip-max-width);
+  padding: var(--ds-tooltip-padding);
+  z-index: 9999;
+
+  &:after {
+    content: "";
+    position: absolute;
+    border-style: solid;
+    border-width: var(--ds-tooltip-arrow-size);
+  }
+
+  &--large {
+    min-height: var(--ds-tooltip-siz-lg);
+  }
+
+  &--small {
+    min-height: var(--ds-tooltip-size-sm);
+  }
+
+  &__inner {
+    word-break: break-word;
+  }
+
+  &--top {
+    &-left, &-center, &-right {
+      &:after {
+        top: 100%;
+        border-color: var(--ds-tooltip-arrow-bg) transparent transparent transparent;
+      }
+    }
+  }
+
+  &--bottom {
+    &-left, &-center, &-right {
+
+      &:after {
+        bottom: 100%;
+        border-color: transparent transparent var(--ds-tooltip-arrow-bg) transparent;
+      }
+    }
+  }
+
+  &--top, &--bottom {
+    &-left {
+
+      &:after {
+        left: var(--ds-tooltip-arrow-position);
+      }
+    }
+  }
+
+  &--top, &--bottom {
+    &-right {
+      &:after {
+        right: var(--ds-tooltip-arrow-position);
+      }
+    }
+  }
+
+  &--top, &--bottom {
+    &-center {
+      &:after {
+        left: 50%;
+        transform: translateX(-50%);
+      }
+    }
+  }
+
+  &--middle {
+    &-left, &-right {
+      &:after {
+        top: 50%;
+        transform: translateY(-50%);
+      }
+    }
+
+    &-left {
+      &:after {
+        left: 100%;
+        border-color: transparent transparent transparent var(--ds-tooltip-arrow-bg);
+      }
+    }
+
+    &-right {
+      &:after {
+        right: 100%;
+        border-color: transparent var(--ds-tooltip-arrow-bg) transparent transparent ;
+      }
+    }
+  }
+}
+