@itcase/ui 1.8.27 → 1.8.30

package/dist/css/components/Tooltip/Tooltip.css

@@ -1,9 +1,25 @@
 .tooltip {
   width: fit-content;
+  min-width: 240px;
   position: relative;
   display: flex;
   visibility: hidden;
   opacity: 0%;
+  &__arrow {
+    width: var(--tooltip-arrow-width);
+    height: var(--tooltip-arrow-height);
+    border-radius: var(--tooltip-arrow-radius);
+    position: absolute;
+    content: '';
+    display: block;
+    z-index: 0;
+    background-color: var(--tooltip-arrow-color);
+  }
+  &__inner {
+    position: relative;
+    background-color: inherit;
+    z-index: 1;
+  }
 }
 
 @keyframes tooltipShowAnimation {
@@ -53,30 +69,43 @@
 }
 
 .tooltip {
-  &_type_arrow {
-    &::after {
-      width: var(--tooltip-arrow-width);
-      height: var(--tooltip-arrow-height);
-      border-radius: var(--tooltip-arrow-radius);
-      position: absolute;
-      content: '';
-      display: block;
-      z-index: 0;
-      background-color: var(--tooltip-arrow-color);
-    }
-    ^&__inner {
-      position: relative;
-      background-color: inherit;
-      z-index: 1;
+  &&_skeleton {
+    background-size: 200% !important;
+    border: none;
+    animation: tooltipSkeleton 3s infinite linear !important;
+    background-image: linear-gradient(
+      90deg,
+      var(--color-surface-fill-secondary),
+      var(--color-surface-fill-tertiary),
+      var(--color-surface-fill-secondary)
+    ) !important;
+    & * {
+      opacity: 0%;
     }
   }
 }
 
+@keyframes tooltipSkeleton {
+  0% {
+    background-position: 200%;
+  }
+  100% {
+    background-position: -200%;
+  }
+}
+
 .tooltip {
-  &_arrow_position {
+  &__arrow_position {
     &_top {
-      &::after {
-        left: 50%;
+      left: 50%;
+      top: 0;
+      transform: translate(
+          -50%,
+          calc(calc(var(--tooltip-arrow-width) / 2) * -1)
+        )
+        rotate(45deg);
+      &Left {
+        left: 0;
         top: 0;
         transform: translate(
             -50%,
@@ -84,34 +113,61 @@
           )
           rotate(45deg);
       }
+      &Right {
+        top: 0;
+        right: 0;
+        transform: translate(
+            -50%,
+            calc(calc(var(--tooltip-arrow-width) / 2) * -1)
+          )
+          rotate(45deg);
+      }
     }
     &_left {
-      &::after {
-        left: 0;
+      left: 0;
+      top: 50%;
+      transform: translate(
+          calc(calc(var(--tooltip-arrow-width) / 2) * -1),
+          -50%
+        )
+        rotate(45deg);
+      &Bottom {
         top: 50%;
-        transform: translate(
-            calc(calc(var(--tooltip-arrow-width) / 2) * -1),
-            -50%
-          )
+        right: 0;
+        transform: translate(calc(var(--tooltip-arrow-width) / 2), -50%)
+          rotate(45deg);
+      }
+      &Top {
+        top: 50%;
+        right: 0;
+        transform: translate(calc(var(--tooltip-arrow-width) / 2), -50%)
           rotate(45deg);
       }
     }
     &_right {
-      &::after {
+      top: 50%;
+      right: 0;
+      transform: translate(calc(var(--tooltip-arrow-width) / 2), -50%)
+        rotate(45deg);
+      &Bottom {
         top: 50%;
         right: 0;
         transform: translate(calc(var(--tooltip-arrow-width) / 2), -50%)
           rotate(45deg);
       }
-    }
-    &_bottom {
-      &::after {
-        left: 50%;
-        bottom: 0;
-        transform: translate(-50%, calc(var(--tooltip-arrow-width) / 2))
+      &Top {
+        top: 50%;
+        right: 0;
+        transform: translate(calc(var(--tooltip-arrow-width) / 2), -50%)
           rotate(45deg);
       }
     }
+    &_bottom {
+      left: 50%;
+      bottom: 0;
+      transform: translate(-50%, calc(var(--tooltip-arrow-width) / 2))
+        rotate(45deg);
+    }
   }
 }
 
@@ -153,22 +209,19 @@
 }
 
 :root {
-  --tooltip-size-m-padding: 0;
-  --tooltip-size-s-padding: 0;
-
-  --tooltip-size-m-gap: 0;
-  --tooltip-size-s-gap: 0;
-
   --tooltip-arrow-width: 14px;
   --tooltip-arrow-height: 14px;
   --tooltip-arrow-radius: 2px;
 
-  --tooltip-arrow-color: var(--color-surface-fill-primary);
   --tooltip-shape-rounded-default: 0;
 
   /* Size */
-  @each $size, $value in (xxl, xl, l, m, s, xs, xxs), (0, 0, 0, 0, 0, 0, 0) {
-    --tooltip-size-$(size)-padding: $value;
-    --tooltip-size-$(size)-gap: $value;
-  }
+  --tooltip-size-l-padding: 16px;
+  --tooltip-size-l-gap: 0;
+
+  --tooltip-size-m-padding: 12px;
+  --tooltip-size-m-gap: 0;
+
+  --tooltip-size-s-padding: 8px;
+  --tooltip-size-s-gap: 0;
 }

package/dist/css/components/Video/Video.css

@@ -10,7 +10,7 @@
   }
 }
 .video {
-  &&_type_cover {
+  &_poster {
     width: 100%;
     height: 100%;
     position: relative;

package/dist/css/styles/blur/blur.css

@@ -0,0 +1,9 @@
+.blur {
+  @each $val in 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60, 65, 75, 80, 85,
+    90, 95 {
+    &_$(val) {
+      /* stylelint-disable-next-line prettier/prettier */
+      backdrop-filter: blur($(val)px);
+    }
+  }
+}

package/dist/css/styles/border-color/border-color.css

@@ -1,4 +1,7 @@
 .border-color {
+  &_none {
+    border-color: transparent;
+  }
   @each $type in accent, primary, secondary, tertiary, quaternary, surface,
     error, success, warning, info, danger, gradient, disabled, hover, inverse {
     @each $color in primary, secondary, tertiary, quaternary, accent, disabled,

package/dist/css/styles/elevation/elevation.css

@@ -1,5 +1,5 @@
 .elevation {
-  @each $val in 1,2,4,6,8,12,16,24 {
+  @each $val in 1, 2, 4, 6, 8, 12, 16, 24 {
     &_$(val) {
       @mixin elevation-$(val);
     }

package/dist/css/styles/elevation/elevation_hover.css

@@ -1,6 +1,6 @@
 .elevation {
   &_hover {
-    @each $val in 1,2,4,6,8,12,16,24 {
+    @each $val in 1, 2, 4, 6, 8, 12, 16, 24 {
       &_$(val) {
         &:hover {
           @mixin elevation-$(val);

package/dist/css/styles/opacity/opacity.css

@@ -2,7 +2,8 @@
   @each $val in 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60, 65, 75, 80, 85,
     90, 95 {
     &_$(val) {
-      opacity: $(val) %;
+      /* stylelint-disable-next-line prettier/prettier */
+      opacity: $(val)%;
     }
   }
 }

package/dist/stories/AccordionOverview.mdx

@@ -0,0 +1,12 @@
+import { Meta, Story } from '@storybook/blocks'
+
+import * as AccordionStories from '../stories/AccordionDemo.stories'
+
+<Meta title="Molecules / Accordion / Overview" />
+
+# Accordion
+
+`Accordion` отображает горизонтальный выпадающий список аккордеон для раскрытия блоков с необходимой информацией внутри.
+
+<Story of={AccordionStories.Demo} />
+

package/dist/stories/AccordionPlayground.mdx

@@ -0,0 +1,10 @@
+import { Canvas, Controls, Meta } from '@storybook/blocks'
+
+import * as AccordionStories from '../stories/AccordionDemo.stories'
+
+<Meta title="Molecules / Accordion / Playground" />
+
+# Playground
+
+<Canvas sourceState="shown" of={AccordionStories.Demo} />
+<Controls of={AccordionStories.Demo} />

package/dist/stories/AvatarOverview.mdx

@@ -0,0 +1,19 @@
+import { Meta, Story, Canvas } from '@storybook/blocks'
+
+import * as AvatarStories from '../stories/AvatarDemo.stories'
+
+<Meta title="Molecules / Avatar / Overview" />
+
+# Avatar
+
+<Story of={AvatarStories.Demo} />
+
+# Avatar
+
+## Demo
+
+<Canvas sourceState="shown" of={AvatarStories.Demo} />
+
+## Skeleton
+
+<Canvas sourceState="shown" of={AvatarStories.Skeleton} />

package/dist/stories/AvatarPlayground.mdx

@@ -0,0 +1,10 @@
+import { Canvas, Controls, Meta } from '@storybook/blocks'
+
+import * as AvatarStories from '../stories/AvatarDemo.stories'
+
+<Meta title="Molecules / Avatar / Playground" />
+
+# Playground
+
+<Canvas sourceState="shown" of={AvatarStories.Demo} />
+<Controls of={AvatarStories.Demo} />

package/dist/stories/AvatarStackOverview.mdx

@@ -0,0 +1,13 @@
+import { Canvas, Meta } from '@storybook/blocks'
+import * as AvatarStackStories from '../stories/AvatarStackDemo.stories'
+
+<Meta title="Molecules / Avatar Stack / Overview" />
+
+# Avatar Stack
+
+
+## Demo
+<Canvas sourceState="shown" of={AvatarStackStories.Demo} />
+
+## Skeleton
+<Canvas sourceState="shown" of={AvatarStackStories.Skeleton} />

package/dist/stories/AvatarStackPlayground.mdx

@@ -0,0 +1,8 @@
+import { Canvas, Controls, Meta } from '@storybook/blocks'
+import * as AvatarStackStories from '../stories/AvatarStackDemo.stories'
+
+<Meta title="Molecules / Avatar Stack / Playground" />
+
+# Playground
+<Canvas sourceState="shown" of={AvatarStackStories.Demo} />
+<Controls of={AvatarStackStories.Demo} />

package/dist/stories/BadgeOverview.mdx

@@ -0,0 +1,13 @@
+import { Canvas, Meta } from '@storybook/blocks'
+import * as BadgeStories from '../stories/BadgeDemo.stories'
+
+<Meta title="Atoms / Badge / Overview" />
+
+# Badge
+`Badge` — используется для обозначения информации о количестве. Может входить в состав разных компонентов, например, `Icon`, `Tab`, `Tile` для обозначения количества чего-либо (сообщений, уведомлений, выбранных элементов списка).
+
+## Demo
+<Canvas sourceState="shown" of={BadgeStories.Demo} />
+
+## Skeleton
+<Canvas sourceState="shown" of={BadgeStories.Skeleton} />

package/dist/stories/BadgePlayground.mdx

@@ -0,0 +1,8 @@
+import { Canvas, Controls, Meta } from '@storybook/blocks'
+import * as BadgeStories from '../stories/BadgeDemo.stories'
+
+<Meta title="Atoms / Badge / Playground" />
+
+# Playground
+<Canvas sourceState="shown" of={BadgeStories.Demo} />
+<Controls of={BadgeStories.Demo} />

package/dist/stories/BreadcrumbsOverview.mdx

@@ -0,0 +1,14 @@
+import { Meta, Story } from '@storybook/blocks'
+
+import * as BreadcrumbsStories from '../stories/BreadcrumbsDemo.stories'
+
+<Meta title="Atoms / Breadcrumbs / Overview" />
+
+# Breadcrumbs
+
+`Breadcrubs` - это навигационные элементы на странице сайта,
+которые показывают текущее местоположение пользователя внутри структуры сайта
+
+<Story of={BreadcrumbsStories.Demo} />
+
+

package/dist/stories/{Plsyground.mdx → BreadcrumbsPlsyground.mdx}

@@ -1,6 +1,6 @@
 import { Canvas, Controls, Meta } from '@storybook/blocks'
 
-import * as BreadcrumbsStories from '../stories/Breadcrumbs.stories'
+import * as BreadcrumbsStories from '../stories/BreadcrumbsDemo.stories'
 
 <Meta title="Atoms / Breadcrumbs / Playground" />
 

package/dist/stories/ButtonOverview.mdx

@@ -0,0 +1,12 @@
+import { Meta, Story } from '@storybook/blocks'
+
+import * as ButtonStories from '../stories/ButtonDemo.stories'
+
+<Meta title="Atoms / Button / Overview" />
+
+# Button
+
+`Button` - это кнопка, предоставляет пользователю возможность совершить действие.
+Кнопка запускает действие, а текст или иконка информирует о том, что произойдет после нажатия.
+
+<Story of={ButtonStories.Demo} />

package/dist/stories/ButtonPlayground.mdx

@@ -0,0 +1,10 @@
+import { Canvas, Controls, Meta } from '@storybook/blocks'
+
+import * as ButtonStories from '../stories/ButtonDemo.stories'
+
+<Meta title="Atoms / Button / Playground" />
+
+# Playground
+
+<Canvas sourceState="off" of={ButtonStories.Demo} />
+<Controls of={ButtonStories.Demo} />

package/dist/stories/CellOverview.mdx

@@ -0,0 +1,21 @@
+import { Meta, Story } from '@storybook/blocks'
+
+import * as CellStories from '../stories/CellDemo.stories'
+
+<Meta title="Molecules / Cell / Overview" />
+
+# Cell
+
+`Cell` — это инфоблок, состоящий из заголовка и текста, вертикальная и горизонтальная реализация
+
+<Story of={CellStories.Demo} />
+
+## Vertical
+
+<Story of={CellStories.Vertical} />
+
+## Horizontal
+
+<Story of={CellStories.Horizontal} />
+
+

package/dist/stories/CellPlayground.mdx

@@ -0,0 +1,10 @@
+import { Canvas, Controls, Meta } from '@storybook/blocks'
+
+import * as CellStories from '../stories/CellDemo.stories'
+
+<Meta title="Molecules / Cell / Playground" />
+
+# Playground
+
+<Canvas sourceState="shown" of={CellStories.Demo} />
+<Controls of={CellStories.Demo} />

package/dist/stories/CheckboxOverview.mdx

@@ -0,0 +1,12 @@
+import { Meta, Story } from '@storybook/blocks'
+
+import * as CheckboxStories from '../stories/CheckboxDemo.stories'
+
+<Meta title="Atoms / Checkbox / Overview" />
+
+# Checkbox
+
+`Checkbox` позволяет выбрать несколько пунктов из списка вариантов или сделать выбор между двумя противоположными состояниями или свойствами.
+Клик по тексту или чекбоксу приводит к выбору пункта. Повторный клик приводит к отмене выбора.
+
+<Story of={CheckboxStories.Demo} />

package/dist/stories/CheckboxPlayground.mdx

@@ -0,0 +1,10 @@
+import { Canvas, Controls, Meta } from '@storybook/blocks'
+
+import * as CheckboxStories from '../stories/CheckboxDemo.stories'
+
+<Meta title="Atoms / Checkbox / Playground" />
+
+# Playground
+
+<Canvas sourceState="shown" of={CheckboxStories.Demo} />
+<Controls of={CheckboxStories.Demo} />

package/dist/stories/CheckmarkOverview.mdx

@@ -0,0 +1,12 @@
+import { Meta, Story } from '@storybook/blocks'
+import * as CheckmarkStories from '../stories/CheckmarkDemo.stories'
+
+<Meta title="Atoms / Checkmark / Overview" />
+
+# Checkmark
+
+`Checkmark` — показывает активен ли элемент.
+
+# Accent
+<Story of={CheckmarkStories.Demo} />
+

package/dist/stories/CheckmarkPlayground.mdx

@@ -0,0 +1,10 @@
+import { Canvas, Controls, Meta } from '@storybook/blocks'
+
+import * as CheckmarkStories from '../stories/CheckmarkDemo.stories'
+
+<Meta title="Atoms / Checkmark / Playground" />
+
+# Playground
+
+<Canvas sourceState="shown" of={CheckmarkStories.Demo} />
+<Controls of={CheckmarkStories.Demo} />

package/dist/stories/ChipsOverview.mdx

@@ -0,0 +1,37 @@
+import { Meta, Story, Canvas } from '@storybook/blocks'
+
+import * as ChipsStories from '../stories/ChipsAppearance.stories'
+
+<Meta title="Atoms / Chips / Overview" />
+
+# Chips
+
+`Chips` — это компактная альтернатива чекбоксам. Они позволяют пользователям выбирать несколько вариантов одновременно и в основном применяются на мобильных устройствах для переключений фильтров.
+Данный компонент может быть использован в компоненте множественного выбора (SelectMulti).
+
+<Canvas sourceState="shown"of={ChipsStories.Accent} />
+
+
+## Accent
+
+<Canvas sourceState="shown" of={ChipsStories.Accent} />
+
+## Primary
+
+<Canvas sourceState="shown" of={ChipsStories.Primary} />
+
+## Secondary
+
+<Canvas sourceState="shown" of={ChipsStories.Secondary} />
+
+## SurfacePrimary
+
+<Canvas sourceState="shown" of={ChipsStories.SurfacePrimary} />
+
+## SurfaceSecondary
+
+<Canvas sourceState="shown" of={ChipsStories.SurfaceSecondary} />
+
+## SurfaceTertiary
+
+<Canvas sourceState="shown" of={ChipsStories.SurfaceTertiary} />

package/dist/stories/ChipsPlayground.mdx

@@ -0,0 +1,10 @@
+import { Canvas, Controls, Meta } from '@storybook/blocks'
+
+import * as ChipsStories from '../stories/ChipsAppearance.stories'
+
+<Meta title="Atoms / Chips / Playground" />
+
+# Playground
+
+<Canvas sourceState="shown" of={ChipsStories.Accent} />
+<Controls of={ChipsStories.Accent} />

package/dist/stories/ChoiceOverview.mdx

@@ -0,0 +1,11 @@
+import { Meta, Story } from '@storybook/blocks'
+
+import * as ChoiceStories from '../stories/Choice.stories'
+
+<Meta title="Atoms / Choice / Overview" />
+
+# Choice
+
+`Choice` — это меню с вариантами выбора.
+
+<Story of={ChoiceStories.Default} />

package/dist/stories/ChoicePlayground.mdx

@@ -0,0 +1,10 @@
+import { Canvas, Controls, Meta } from '@storybook/blocks'
+
+import * as ChoiceStories from '../stories/Choice.stories'
+
+<Meta title="Atoms / Choice / Playground" />
+
+# Playground
+
+<Canvas sourceState="shown" of={ChoiceStories.Default} />
+<Controls of={ChoiceStories.Default} />

package/dist/stories/CodeOverview.mdx

@@ -0,0 +1,11 @@
+import { Meta, Story } from '@storybook/blocks'
+
+import * as CodeStories from '../stories/CodeDemo.stories'
+
+<Meta title="Atoms / Code / Overview" />
+
+# Code
+
+`Code` — используется для ввода пин-кода. Количество ячеек для кода определяется пропсом inputCount.
+
+<Story of={CodeStories.Demo} />

package/dist/stories/CodePlayground.mdx

@@ -0,0 +1,10 @@
+import { Canvas, Controls, Meta } from '@storybook/blocks'
+
+import * as CodeStories from '../stories/CodeDemo.stories'
+
+<Meta title="Atoms / Code / Playground" />
+
+# Playground
+
+<Canvas sourceState="shown" of={CodeStories.Demo} />
+<Controls of={CodeStories.Demo} />

package/dist/stories/CookiesWarningOverview.mdx

@@ -0,0 +1,13 @@
+import { Meta, Story } from '@storybook/blocks'
+
+import * as CookiesWarningStories from '../stories/CoockiesWarning.stories'
+
+<Meta title="Components / CookiesWarning / Overview" />
+
+# CookiesWarning
+
+`CookiesWarning` - используется для отображения предупрждения о файлах `cookie`
+
+<Story of={CookiesWarningStories.Demo} />
+
+

package/dist/stories/CookiesWarningPlayground.mdx

@@ -0,0 +1,11 @@
+import { Canvas, Controls, Meta } from '@storybook/blocks'
+
+import * as CookiesWarningStories from '../stories/CoockiesWarning.stories'
+
+<Meta title="Components / CookiesWarning / Playground" />
+
+# Playground
+
+<Canvas sourceState="shown" of={CookiesWarningStories.Demo} />
+<Controls of={CookiesWarningStories.Demo} />
+

package/dist/stories/DadataHintFieldOverview.mdx

@@ -0,0 +1,11 @@
+import { Meta, Story } from '@storybook/blocks'
+
+import * as DadataHintFieldStories from '../stories/DadataHintField.stories'
+
+<Meta title="Components / DadataHintField / Overview" />
+
+# DadataHintField
+
+`DadataHintField` - это текстовое поле для организаций(ru), которое выдает подсказки в выпадающем списке
+
+<Story of={DadataHintFieldStories.Demo} />

package/dist/stories/DatePeriodOverview.mdx

@@ -0,0 +1,9 @@
+import { Meta, Story } from '@storybook/blocks'
+
+import * as DatePeriodStories from  '../stories/DatePeriodDemo.stories'
+
+<Meta title="Molecules / DatePeriod / Overview" />
+
+# DatePeriod
+
+`DatePeriod` 

package/dist/stories/DatePeriodPlayground.mdx

@@ -0,0 +1,10 @@
+import { Canvas, Controls, Meta } from '@storybook/blocks'
+
+import * as DatePeriodStories from '../stories/DatePeriodDemo.stories'
+
+<Meta title="Molecules / DatePeriod / Playground" />
+
+# Playground
+
+<Canvas sourceState="shown" of={DatePeriodStories.Mp4} />
+<Controls of={DatePeriodStories.Mp4} />