@central-design-system/components 4.0.0-alpha.3 → 4.0.0-alpha.5

package/src/components/CdsSelect/CdsSelect.scss

@@ -0,0 +1,149 @@
+@use 'sass:math';
+@use 'sass:selector';
+@use '../../styles/tools';
+@use './styles/CdsSelect.variables' as *;
+
+@include tools.layer('components') {
+  .cds-select {
+    .cds-field {
+      .cds-text-input__prefix,
+      .cds-text-input__suffix,
+      .cds-field__input,
+      &.cds-field {
+        cursor: pointer;
+      }
+    }
+
+    .cds-field {
+      .cds-field__input {
+        > input {
+          position: absolute;
+          right: 0;
+          left: 0;
+          flex: 0 0;
+          align-self: center;
+          width: 100%;
+          padding-inline: inherit;
+          pointer-events: none;
+          caret-color: transparent;
+          opacity: 1;
+          transition: none;
+        }
+      }
+    }
+
+    .cds-field--dirty {
+      .cds-select__selection {
+        margin-inline-end: $select-selection-inline-gap;
+      }
+    }
+
+    .cds-select__selection-text {
+      @include tools.ellipsis;
+    }
+
+    &__content {
+      overflow: hidden;
+
+      @at-root #{selector.append('.cds-menu > .cds-overlay__content', &)} {
+        padding-inline: $select-content-padding-inline;
+        border-radius: $select-content-border-radius;
+
+        &:has(.cds-list--slim) {
+          padding-inline: 0;
+        }
+      }
+
+      > .cds-surface {
+        display: flex;
+        flex-direction: column;
+      }
+    }
+
+    &__mask {
+      background: $select-mask-background;
+    }
+
+    &__selections {
+      display: contents;
+    }
+
+    &__selection {
+      display: inline-flex;
+      align-items: center;
+      max-width: 100%;
+      line-height: inherit;
+      letter-spacing: inherit;
+    }
+
+    &--ellipsis {
+      .cds-field__input {
+        flex-wrap: nowrap;
+      }
+
+      .cds-select__selections {
+        display: block;
+        flex: 1 1 auto;
+        align-self: center;
+        min-width: 0;
+
+        @include tools.ellipsis;
+      }
+
+      .cds-select__selection {
+        display: inline;
+        max-width: none;
+      }
+
+      .cds-select__selection-text {
+        display: inline;
+        overflow: visible;
+      }
+    }
+
+    &__menu-icon {
+      margin-inline-start: 4px;
+      transition: $select-transition;
+
+      .cds-select--active-menu & {
+        transform: rotate(180deg);
+      }
+    }
+
+    .cds-select__selection {
+      &:first-child {
+        margin-inline-start: 0;
+      }
+    }
+
+    &--selected {
+      .cds-field {
+        .cds-field__input {
+          > input {
+            opacity: 0;
+          }
+        }
+      }
+    }
+
+    &--native {
+      .cds-field {
+        position: relative;
+      }
+
+      .cds-select__menu-icon {
+        cursor: pointer;
+      }
+
+      .cds-select__native {
+        position: absolute;
+        inset: 0;
+        z-index: 2;
+        width: 100%;
+        height: 100%;
+        cursor: pointer;
+        opacity: 0;
+      }
+    }
+  }
+}

package/src/components/CdsSelect/styles/_CdsSelect.variables.scss

@@ -0,0 +1,7 @@
+@use '../../../styles/settings';
+
+$select-content-border-radius: var(--cds-border-radius-200) !default;
+$select-content-padding-inline: var(--cds-spacing-100) !default;
+$select-mask-background: rgb(var(--cds-color-content-placeholder)) !default;
+$select-selection-inline-gap: var(--cds-spacing-50) !default;
+$select-transition: .2s settings.$standard-easing !default;

package/src/components/CdsSelectionControl/CdsSelectionControl.scss

@@ -0,0 +1,104 @@
+@use 'sass:map';
+@use '../../styles/settings';
+@use '../../styles/tools';
+
+@include tools.layer('components') {
+  .cds-selection-control {
+    position: relative;
+    display: grid;
+    flex: 1 0;
+
+    // Контрол занимает только строку лейбла: так он центрируется по ней,
+    // а не по всему блоку «лейбл + описание».
+    grid-template:
+        "control label" max-content
+        ".       description" max-content
+        / max-content max-content;
+    align-items: center;
+    justify-content: start;
+    contain: layout;
+    user-select: none;
+
+    &:not(:has(.cds-selection-control__description)) {
+      grid-template: "control label" / max-content max-content;
+    }
+
+    &--disabled {
+      pointer-events: none;
+    }
+
+    &--inline {
+      display: inline-flex;
+      flex: 0 0 auto;
+      min-width: 0;
+      max-width: 100%;
+
+      .cds-label {
+        width: auto;
+      }
+    }
+  }
+
+  .cds-selection-control__wrapper {
+    position: relative;
+    display: inline-flex;
+    flex: none;
+    grid-area: control;
+    align-items: center;
+    justify-content: center;
+    width: var(--cds-selection-control-width);
+    height: var(--cds-selection-control-height);
+  }
+
+  // Размеры CdsInput задают метке и описанию нижний отступ
+  // (`.cds-input--size-* .cds-label`): в поле ввода они стоят над контролом,
+  // а здесь метка — сбоку от него, и отступ сдвигает её вверх относительно
+  // контрола. Расстояние между меткой и описанием задаёт `row-gap` у корня.
+  // Селекторы трёхклассовые, чтобы перебить правила размеров.
+  .cds-selection-control .cds-selection-control__label.cds-label,
+  .cds-selection-control .cds-selection-control__description.cds-description {
+    margin-block-end: 0;
+  }
+
+  .cds-selection-control__label {
+    grid-area: label;
+    height: 100%;
+    overflow-wrap: anywhere;
+    white-space: normal;
+    opacity: 1;
+  }
+
+  .cds-selection-control__description {
+    grid-area: description;
+    height: 100%;
+    overflow-wrap: anywhere;
+    white-space: normal;
+    opacity: 1;
+  }
+
+  .cds-selection-control__icon {
+    display: inline-flex;
+    align-items: flex-start;
+    justify-content: center;
+  }
+
+  .cds-selection-control__input {
+    position: relative;
+    display: flex;
+    flex: none;
+    justify-content: flex-start;
+    width: var(--cds-selection-control-width);
+    height: var(--cds-selection-control-height);
+
+    input {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      margin: 0;
+      cursor: pointer;
+      opacity: 0;
+    }
+  }
+}

package/src/components/CdsSelectionControlGroup/CdsSelectionControlGroup.scss

@@ -0,0 +1,17 @@
+@use '../../styles/tools';
+
+@include tools.layer('components') {
+  .cds-selection-control-group {
+    display: flex;
+    flex-direction: column;
+    grid-area: control;
+
+    &--horizontal {
+      flex-flow: row wrap;
+
+      .cds-label {
+        margin-block-end: 0;
+      }
+    }
+  }
+}

package/src/components/CdsSkeletonLoader/CdsSkeletonLoader.scss

@@ -0,0 +1,292 @@
+@use '../../styles/tools';
+@use './styles/CdsSkeletonLoader.variables' as *;
+
+@include tools.layer('components') {
+  .cds-skeleton-loader {
+    position: relative;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    vertical-align: top;
+    border-radius: $skeleton-loader-border-radius;
+
+    &__bone {
+      position: relative;
+      display: flex;
+      flex: 1 1 100%;
+      flex-wrap: wrap;
+      align-items: center;
+      overflow: hidden;
+
+      &::after {
+        position: absolute;
+        top: 0;
+        left: 0;
+        z-index: 1;
+        width: 100%;
+        height: 100%;
+        content: '';
+        background: $skeleton-loader-bone-background;
+        transform: $skeleton-loader-loading-transform;
+        animation: $skeleton-loader-loading-animation;
+      }
+    }
+
+    &__actions {
+      justify-content: end;
+    }
+
+    &__avatar,
+    &__button,
+    &__chip,
+    &__divider,
+    &__heading,
+    &__block,
+    &__text {
+      background: $skeleton-loader-text-background;
+    }
+
+    &__list-item,
+    &__list-item-avatar,
+    &__list-item-text,
+    &__list-item-two-line,
+    &__list-item-avatar-two-line,
+    &__list-item-three-line,
+    &__list-item-avatar-three-line {
+      border-radius: $skeleton-loader-border-radius;
+    }
+
+    &--boilerplate {
+      .cds-skeleton-loader__bone {
+        &::after {
+          display: none;
+        }
+      }
+    }
+
+    &--is-loading {
+      overflow: hidden;
+      background: $skeleton-loader-background;
+    }
+
+    &--tile {
+      border-radius: 0;
+
+      .cds-skeleton-loader__bone {
+        border-radius: 0;
+      }
+    }
+  }
+
+  // Types
+  .cds-skeleton-loader {
+    &__avatar {
+      flex: 0 1 auto;
+      width: $skeleton-loader-avatar-width;
+      min-width: $skeleton-loader-avatar-width;
+      max-width: $skeleton-loader-avatar-width;
+      height: $skeleton-loader-avatar-height;
+      min-height: $skeleton-loader-avatar-height;
+      max-height: $skeleton-loader-avatar-height;
+      margin: $skeleton-loader-avatar-margin;
+      border-radius: 50%;
+
+      + .cds-skeleton-loader__bone {
+        flex: 1 1 auto;
+        margin-inline-start: 0;
+      }
+
+      + .cds-skeleton-loader__sentences,
+      + .cds-skeleton-loader__paragraph {
+        > .cds-skeleton-loader__text {
+          margin-inline-start: 0;
+        }
+      }
+    }
+
+    &__button {
+      max-width: $skeleton-loader-button-width;
+      height: $skeleton-loader-button-height;
+      margin: $skeleton-loader-gutter;
+      border-radius: $skeleton-loader-button-border-radius;
+
+      + .cds-skeleton-loader__button {
+        margin-left: 0;
+      }
+    }
+
+    &__chip {
+      max-width: $skeleton-loader-chip-width;
+      height: $skeleton-loader-chip-height;
+      margin: $skeleton-loader-gutter;
+      border-radius: $skeleton-loader-chip-border-radius;
+
+      + .cds-skeleton-loader__bone {
+        flex: 1 1 auto;
+        margin-inline-start: 0;
+      }
+
+      + .cds-skeleton-loader__sentences,
+      + .cds-skeleton-loader__paragraph {
+        > .cds-skeleton-loader__text {
+          margin-inline-start: 0;
+        }
+      }
+    }
+
+    &__date-picker {
+      width: $skeleton-loader-date-picker-width;
+      min-width: $skeleton-loader-date-picker-width;
+      max-width: $skeleton-loader-date-picker-width;
+      border-radius: $skeleton-loader-date-picker-border-radius;
+
+      .cds-skeleton-loader__list-item:first-child {
+        .cds-skeleton-loader__text {
+          width: $skeleton-loader-date-picker-text-width;
+          max-width: $skeleton-loader-date-picker-text-max-width;
+        }
+
+        .cds-skeleton-loader__heading {
+          width: $skeleton-loader-date-picker-heading-width;
+          max-width: $skeleton-loader-date-picker-heading-max-width;
+        }
+      }
+    }
+
+    &__date-picker-days {
+      flex-wrap: wrap;
+      justify-content: center;
+      margin: $skeleton-loader-date-picker-calendar-margin;
+
+      .cds-skeleton-loader__avatar {
+        width: $skeleton-loader-date-picker-day-width;
+        min-width: $skeleton-loader-date-picker-day-width;
+        max-width: $skeleton-loader-date-picker-day-width;
+        height: $skeleton-loader-date-picker-day-height;
+        min-height: $skeleton-loader-date-picker-day-height;
+        max-height: $skeleton-loader-date-picker-day-height;
+        margin: $skeleton-loader-date-picker-days-margin;
+        border-radius: 0;
+      }
+    }
+
+    &__date-picker-options {
+      flex-wrap: nowrap;
+
+      .cds-skeleton-loader__text {
+        flex: 1 1 auto;
+      }
+
+      .cds-skeleton-loader__actions {
+        justify-content: center;
+      }
+    }
+
+    &__divider {
+      height: $skeleton-loader-divider-height;
+      border-radius: $skeleton-loader-divider-border-radius;
+    }
+
+    &__heading {
+      height: $skeleton-loader-heading-height;
+      margin: $skeleton-loader-gutter;
+      border-radius: $skeleton-loader-heading-border-radius;
+
+      + .cds-skeleton-loader__subtitle {
+        margin-top: calc($skeleton-loader-gutter * -1);
+      }
+    }
+
+    &__block {
+      height: $skeleton-loader-image-height;
+      border-radius: 0;
+    }
+
+    &__card {
+      .cds-skeleton-loader__block {
+        border-right: 0;
+      }
+    }
+
+    &__list-item {
+      margin: $skeleton-loader-gutter;
+
+      .cds-skeleton-loader__text {
+        margin: 0;
+      }
+    }
+
+    &__subtitle {
+      max-width: $skeleton-loader-subtitle-max-width;
+
+      > .cds-skeleton-loader__text {
+        height: $skeleton-loader-subtitle-text-height;
+        border-radius: $skeleton-loader-subtitle-text-border-radius;
+      }
+    }
+
+    &__text {
+      height: $skeleton-loader-text-height;
+      margin: $skeleton-loader-text-margin;
+      border-radius: $skeleton-loader-text-border-radius;
+
+      + .cds-skeleton-loader__text {
+        max-width: $skeleton-loader-text-two-text-max-width;
+        margin-top: $skeleton-loader-text-two-text-margin-top;
+
+        + .cds-skeleton-loader__text {
+          max-width: $skeleton-loader-text-three-text-max-width;
+        }
+      }
+    }
+
+    &__table-thead {
+      justify-content: space-between;
+
+      .cds-skeleton-loader__heading {
+        max-width: $skeleton-loader-table-thead-width;
+        margin-top: $skeleton-loader-gutter;
+      }
+    }
+
+    &__table-tfoot {
+      flex-wrap: nowrap;
+
+      > .cds-skeleton-loader__text.cds-skeleton-loader__bone {
+        margin-top: $skeleton-loader-gutter;
+      }
+    }
+
+    &__table-row {
+      flex-wrap: nowrap;
+      align-items: baseline;
+      justify-content: space-evenly;
+      margin: $skeleton-loader-table-row-margin;
+
+      > .cds-skeleton-loader__text.cds-skeleton-loader__bone {
+        margin-inline: $skeleton-loader-table-row-text-margin $skeleton-loader-table-row-text-margin;
+      }
+
+      + .cds-skeleton-loader__divider {
+        margin: 0 $skeleton-loader-gutter;
+      }
+    }
+
+    &__table-cell {
+      display: flex;
+      align-items: center;
+      width: $skeleton-loader-table-cell-width;
+      height: $skeleton-loader-table-cell-height;
+
+      .cds-skeleton-loader__text {
+        margin-bottom: 0;
+      }
+    }
+  }
+}
+
+@keyframes loading {
+  100% {
+    transform: translateX(100%);
+  }
+}

package/src/components/CdsSkeletonLoader/styles/_CdsSkeletonLoader.variables.scss

@@ -0,0 +1,52 @@
+@use '../../../styles/tools';
+
+$skeleton-loader-background: rgb(var(--cds-color-fill-secondary)) !default;
+$skeleton-loader-text-background: rgb(var(--cds-color-fill-secondary-active)) !default;
+$skeleton-loader-border-radius: var(--cds-border-radius-300) !default;
+$skeleton-loader-loading-animation: loading 1.5s infinite !default;
+$skeleton-loader-bone-background: linear-gradient(
+  90deg,
+  rgb(255 255 255 / 0%),
+  rgb(255 255 255 / 30%),
+  rgb(255 255 255 / 0%)
+) !default;
+$skeleton-loader-loading-transform: translateX(-100%) !default;
+$skeleton-loader-gutter: var(--cds-spacing-300) !default;
+$skeleton-loader-avatar-margin: var(--cds-spacing-200) var(--cds-spacing-400) !default;
+$skeleton-loader-avatar-width: tools.to-rem(40px) !default;
+$skeleton-loader-avatar-height: tools.to-rem(40px) !default;
+$skeleton-loader-button-border-radius: var(--cds-border-radius-200) !default;
+$skeleton-loader-button-height: tools.to-rem(32px) !default;
+$skeleton-loader-button-width: tools.to-rem(96px) !default;
+$skeleton-loader-chip-border-radius: var(--cds-border-radius-300) !default;
+$skeleton-loader-chip-height: tools.to-rem(24px) !default;
+$skeleton-loader-chip-width: tools.to-rem(64px) !default;
+$skeleton-loader-date-picker-width: tools.to-rem(248px) !default;
+$skeleton-loader-date-picker-calendar-margin: var(--cds-spacing-50) !default;
+$skeleton-loader-date-picker-border-radius: inherit !default;
+$skeleton-loader-date-picker-days-margin: var(--cds-spacing-50) !default;
+$skeleton-loader-date-picker-heading-max-width: tools.to-rem(248px) !default;
+$skeleton-loader-date-picker-heading-width: 40% !default;
+$skeleton-loader-date-picker-text-max-width: tools.to-rem(88px) !default;
+$skeleton-loader-date-picker-text-width: 20% !default;
+$skeleton-loader-date-picker-day-width: tools.to-rem(32px) !default;
+$skeleton-loader-date-picker-day-height: tools.to-rem(32px) !default;
+$skeleton-loader-divider-border-radius: 1px !default;
+$skeleton-loader-divider-height: 1px !default;
+$skeleton-loader-heading-border-radius: tools.to-rem(12px) !default;
+$skeleton-loader-heading-height: tools.to-rem(24px) !default;
+$skeleton-loader-image-height: tools.to-rem(150px) !default;
+$skeleton-loader-subtitle-max-width: 70% !default;
+$skeleton-loader-subtitle-text-height: tools.to-rem(16px) !default;
+$skeleton-loader-subtitle-text-border-radius: tools.to-rem(8px) !default;
+$skeleton-loader-text-border-radius: tools.to-rem(6px) !default;
+$skeleton-loader-text-height: tools.to-rem(8px) !default;
+$skeleton-loader-text-margin: var(--cds-spacing-200) !default;
+$skeleton-loader-text-two-text-margin-top: calc(var(--cds-spacing-100) * -1) !default;
+$skeleton-loader-text-two-text-max-width: 50% !default;
+$skeleton-loader-text-three-text-max-width: 70% !default;
+$skeleton-loader-table-thead-width: 10% !default;
+$skeleton-loader-table-row-margin: 0 var(--cds-spacing-200) !default;
+$skeleton-loader-table-row-text-margin: var(--cds-spacing-200) !default;
+$skeleton-loader-table-cell-height: tools.to-rem(12px) !default;
+$skeleton-loader-table-cell-width: tools.to-rem(88px) !default;

package/src/components/CdsSlideGroup/CdsSlideGroup.scss

@@ -0,0 +1,63 @@
+@use '../../styles/tools';
+@use '../../styles/settings';
+@use './styles/CdsSlideGroup.variables' as *;
+
+@include tools.layer('components') {
+  .cds-slide-group {
+    display: flex;
+    overflow: hidden;
+
+    &--vertical {
+      max-height: inherit;
+
+      &,
+      .cds-slide-group__container,
+      .cds-slide-group__content {
+        flex-direction: column;
+      }
+
+      .cds-slide-group__container {
+        overflow: hidden auto;
+      }
+    }
+  }
+
+  .cds-slide-group__container {
+    display: flex;
+    flex: 1 1 auto;
+    contain: content;
+    overflow: auto hidden;
+    scrollbar-color: rgb(0 0 0 / 0%);
+    scrollbar-width: none;
+
+    &::-webkit-scrollbar {
+      display: none
+    }
+  }
+
+  .cds-slide-group__content {
+    position: relative;
+    display: flex;
+    flex: 1 0 auto;
+    white-space: nowrap;
+    transition: 0.2s all settings.$standard-easing;
+
+    > * {
+      white-space: initial;
+    }
+  }
+
+  .cds-slide-group__next,
+  .cds-slide-group__prev {
+    display: flex;
+    flex: 0 1 $slide-group-prev-basis;
+    align-items: center;
+    justify-content: center;
+    min-width: $slide-group-prev-basis;
+    cursor: pointer;
+
+    &--disabled {
+      pointer-events: none;
+    }
+  }
+}

package/src/components/CdsSlideGroup/styles/_CdsSlideGroup.variables.scss

@@ -0,0 +1 @@
+$slide-group-prev-basis: 32px !default;