@cloud-ru/uikit-product-mobile-chips 0.8.36

package/src/helperComponents/ItemContent/styles.module.scss

@@ -0,0 +1,80 @@
+@use '@sbercloud/figma-tokens-cloud-platform/build/scss/components/styles-tokens-dropList';
+@use '@sbercloud/figma-tokens-cloud-platform/build/scss/components/styles-tokens-element';
+
+$sizes: 's', 'm', 'l';
+$typography: (
+  's': (
+    'label': styles-tokens-element.$sans-body-s,
+    'caption': styles-tokens-element.$sans-body-s,
+    'description': styles-tokens-element.$sans-body-s,
+    'separator': styles-tokens-element.$light-label-m,
+  ),
+  'm': (
+    'label': styles-tokens-element.$sans-body-m,
+    'caption': styles-tokens-element.$sans-body-s,
+    'description': styles-tokens-element.$sans-body-s,
+    'separator': styles-tokens-element.$light-label-l,
+  ),
+  'l': (
+    'label': styles-tokens-element.$sans-body-l,
+    'caption': styles-tokens-element.$sans-body-m,
+    'description': styles-tokens-element.$sans-body-m,
+    'separator': styles-tokens-element.$light-label-l,
+  ),
+);
+
+.headline {
+  display: flex;
+}
+
+.label {
+  overflow: hidden;
+  flex: 1;
+  color: styles-tokens-element.$sys-neutral-text-main;
+}
+
+.caption {
+  overflow: hidden;
+  color: styles-tokens-element.$sys-neutral-text-light;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.description {
+  color: styles-tokens-element.$sys-neutral-text-support;
+}
+
+.content {
+  overflow: hidden;
+  flex-grow: 1;
+  flex-shrink: 1;
+  box-sizing: border-box;
+
+  @each $size in $sizes {
+    &[data-size='#{$size}'] {
+      .headline {
+        @include styles-tokens-element.composite-var(styles-tokens-dropList.$drop-list, 'item', $size, 'headline');
+      }
+      .label {
+        @include styles-tokens-element.composite-var($typography, $size, 'label');
+
+        display: flex;
+        align-items: center;
+      }
+      .caption {
+        @include styles-tokens-element.composite-var($typography, $size, 'caption');
+      }
+      .description {
+        @include styles-tokens-element.composite-var($typography, $size, 'description');
+      }
+    }
+  }
+
+  &[data-disabled] {
+    .label,
+    .description,
+    .caption {
+      color: styles-tokens-element.$sys-neutral-text-disabled;
+    }
+  }
+}

package/src/helperComponents/index.ts

@@ -0,0 +1,2 @@
+export * from './ButtonClearValue';
+export * from './ItemContent';

package/src/index.ts

@@ -0,0 +1 @@
+export * from './components';

package/src/styles.module.scss

@@ -0,0 +1,113 @@
+@use '@sbercloud/figma-tokens-cloud-platform/build/scss/components/styles-tokens-element';
+
+@mixin chip-defaults {
+  cursor: pointer;
+
+  position: relative;
+
+  display: inline-flex;
+  align-items: center;
+
+  box-sizing: border-box;
+  width: max-content;
+  min-width: max-content;
+  margin: 0;
+  padding: 0;
+
+  text-decoration: none;
+  text-transform: none;
+
+  border-style: solid;
+  outline: 0;
+  outline-offset: 0;
+
+  .spinner {
+    display: inline-flex;
+  }
+}
+
+@mixin chip-anatomy-styles($chip-theme, $sizes, $typography, $contentClassName: null) {
+  @include icon-size;
+
+  .labelLayout {
+    display: inline-flex;
+    align-items: center;
+    min-width: 0;
+  }
+
+  @each $size in $sizes {
+    &[data-size='#{$size}'] {
+      .label {
+        @include styles-tokens-element.composite-var($typography, $size);
+      }
+
+      .labelLayout {
+        @include styles-tokens-element.composite-var($chip-theme, 'label-layout', $size);
+      }
+
+      @if ($contentClassName) {
+        .#{$contentClassName} {
+          @include styles-tokens-element.composite-var($chip-theme, 'container', $size);
+        }
+      }
+      @else {
+        @include styles-tokens-element.composite-var($chip-theme, 'container', $size);
+      }
+    }
+  }
+}
+
+@mixin icon-size {
+  .icon {
+    display: inline-flex;
+
+    svg {
+      width: styles-tokens-element.$icon-s !important; /* stylelint-disable-line declaration-no-important */
+      height: styles-tokens-element.$icon-s !important; /* stylelint-disable-line declaration-no-important */
+    }
+  }
+}
+
+@mixin chip-loading-state($chip-theme, $condition, $classNamesToHide, $contentClassName: null, $relativeSpinner: null) {
+  @if ($contentClassName) {
+    .#{$contentClassName} {
+      cursor: progress;
+    }
+  }
+
+ @else {
+    cursor: progress;
+  }
+
+  #{$condition} {
+    @if $classNamesToHide {
+      @each $className in $classNamesToHide {
+        .#{$className} {
+          @include styles-tokens-element.composite-var($chip-theme, 'label-layout', 'label', 'load-label-only');
+        }
+      }
+    }
+
+    .spinner {
+      @if not $relativeSpinner {
+        position: absolute;
+        top: 0;
+        left: 0;
+
+        width: 100%;
+        height: 100%;
+      }
+
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+  }
+}
+
+@mixin chip-outline {
+  @include styles-tokens-element.outline-var(styles-tokens-element.$container-focused-s);
+
+  outline-color: styles-tokens-element.$sys-available-complementary;
+  outline-offset: styles-tokens-element.$spacing-state-focus-offset;
+}

package/src/types.ts

@@ -0,0 +1,26 @@
+import { ReactElement } from 'react';
+
+import { ValueOf } from '@snack-uikit/utils';
+
+import { BUTTON_SIZE, SIZE, VARIANT } from './constants';
+
+export type Size = ValueOf<typeof SIZE>;
+
+export type ButtonSize = ValueOf<typeof BUTTON_SIZE>;
+
+export type Variant = ValueOf<typeof VARIANT>;
+
+export type BaseChipProps = {
+  /** Лейбл */
+  label: string;
+  /** Деактивирован ли компонент */
+  disabled?: boolean;
+  /** Состояние загрузки */
+  loading?: boolean;
+  /** Иконка */
+  icon?: ReactElement;
+  /** CSS-класс */
+  className?: string;
+  /** HTML tab index */
+  tabIndex?: number;
+};