@itcase/ui-web 1.9.77

package/dist/stories/ImagePlayground.mdx

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

package/dist/stories/InputNumberOverview.mdx

@@ -0,0 +1,11 @@
+import { Meta, Story } from '@storybook/addon-docs/blocks'
+
+import * as InputNumberStories from '../stories/InputNumberDefault.stories'
+
+<Meta title="Atoms / InputNumber / Overview" />
+
+# InputNumber
+
+`InputNumber` позволяет пользователю вводить число вручную или с помощью кнопок
+
+<Story of={InputNumberStories.Demo} />

package/dist/stories/InputNumberPlayground.mdx

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

package/dist/stories/InputOverview.mdx

@@ -0,0 +1,11 @@
+import { Meta, Story } from '@storybook/addon-docs/blocks'
+
+import * as InputStories from '../stories/Input.stories.tsx'
+
+<Meta title="Atoms / Input / Overview" />
+
+# Input
+
+`Input` позволяет пользователю вводить и редактировать данные в текстовом виде
+
+<Story of={InputStories.Demo} />

package/dist/stories/InputPasswordOverview.mdx

@@ -0,0 +1,11 @@
+import { Meta, Story } from '@storybook/addon-docs/blocks'
+
+import * as InputPasswordStories from '../stories/InputPassword.stories.tsx'
+
+<Meta title="Atoms / InputPassword / Overview" />
+
+# InputPassword
+
+`InputPassword` этот компонент используется для ввода пароля, имеет два состояния, в зависимости от того, скрыт пароль или нет.
+
+<Story of={InputPasswordStories.Hidden} />

package/dist/stories/InputPasswordPlayground.mdx

@@ -0,0 +1,10 @@
+import { Canvas, Controls, Meta } from '@storybook/addon-docs/blocks'
+
+import * as InputPasswordStories from '../stories/InputPassword.stories.tsx'
+
+<Meta title="Atoms / InputPassword / Playground" />
+
+# Playground
+
+<Canvas sourceState="shown" of={InputPasswordStories.Hidden} />
+<Controls of={InputPasswordStories.Hidden} />

package/dist/stories/InputPlayground.mdx

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

package/dist/stories/LabelOverview.mdx

@@ -0,0 +1,11 @@
+import { Meta, Story } from '@storybook/addon-docs/blocks'
+
+import * as LabelStories from '../stories/Label.stories.tsx'
+
+<Meta title="Atoms / Label / Overview" />
+
+# Label
+
+`Label` - это маленький компонент, который позволяет дополнить ваш компонент лейблом с описанием.
+
+<Story of={LabelStories.Demo} />

package/dist/stories/LabelPlayground.mdx

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

package/dist/stories/LinkOverview.mdx

@@ -0,0 +1,20 @@
+import { Meta, Story } from '@storybook/addon-docs/blocks'
+
+import * as LinkStories from '../stories/LinkDemo.stories'
+
+<Meta title="Atoms / Link" />
+
+# Link
+`Link` - это элемент, который позволяет пользователю перейти на другую страницу или ресурс
+
+## Demo
+<Story of={LinkStories.Demo} />
+
+## WithBeforeAfter
+<Story of={LinkStories.WithBeforeAfter} />
+
+## WithChildren
+<Story of={LinkStories.WithChildren} />
+
+## WithLinkComponent
+<Story of={LinkStories.WithLinkComponent} />

package/dist/stories/LinkPlayground.mdx

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

package/dist/stories/ListOverview.mdx

@@ -0,0 +1,14 @@
+import { Meta, Story } from '@storybook/addon-docs/blocks'
+
+import * as ListStories from '../stories/List.stories'
+import * as ListItemStories from '../stories/ListItem.stories'
+
+<Meta title="Typography / List" />
+
+# List
+`List` - это компонент, который позволяет отображать коллекцию элементов в виде списка
+<Story of={ListStories.Demo} />
+
+# List Item
+`ListItem` -  это элемент списка `List`
+<Story of={ListItemStories.Demo} />

package/dist/stories/ListPlayground.mdx

@@ -0,0 +1,10 @@
+import { Canvas, Controls, Meta } from '@storybook/addon-docs/blocks'
+
+import * as ListStories from '../stories/List.stories'
+
+<Meta title="Typography / List / Playground" />
+
+# Playground
+
+<Canvas sourceState="shown" of={ListStories.Demo} />
+<Controls of={ListStories.Demo} />

package/dist/stories/LoaderOverview.mdx

@@ -0,0 +1,11 @@
+import { Canvas, Controls, Meta, Story } from '@storybook/addon-docs/blocks'
+
+import * as LoaderStories from '../stories/LoaderDemo.stories'
+
+<Meta title="Atoms / Loader / Overview" />
+
+# Loader
+
+`Loader` - это компонент для визуального отображения состояния загрузки. Используется при загрузке данных, медленной обработке запроса или выполнения действия с задержкой.
+
+<Story of={LoaderStories.Demo} />

package/dist/stories/LoaderPlayground.mdx

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

package/dist/stories/LogoOverview.mdx

@@ -0,0 +1,24 @@
+import { Canvas, Controls, Meta, Story } from '@storybook/addon-docs/blocks'
+
+import * as LogoStories from '../stories/Logo.stories.tsx'
+import * as LogoSizeStories from '../stories/LogoSize.stories.tsx'
+
+<Meta title="Atoms / Logo / Overview" />
+
+# Logo
+
+`Logo` - отображает логотип компании, и зачастую явлется ссылкой на главную страницу.
+
+<Canvas sourceState="shown" of={LogoStories.Default} />
+
+## SizeS
+
+<Canvas sourceState="shown" of={LogoSizeStories.S} />
+
+## SizeM
+
+<Canvas sourceState="shown" of={LogoSizeStories.M} />
+
+## SizeL
+
+<Canvas sourceState="shown" of={LogoSizeStories.L} />

package/dist/stories/LogoPlayground.mdx

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

package/dist/stories/MenuItemOverview.mdx

@@ -0,0 +1,11 @@
+import { Canvas, Controls, Meta, Story } from '@storybook/addon-docs/blocks'
+
+import * as MenuItemStories from '../stories/MenuItemDemo.stories'
+
+<Meta title="Atoms / MenuItem / Overview" />
+
+# MenuItem
+
+`MenuItem` отображает элемент списка меню для выбора.
+
+<Story of={MenuItemStories.Default} />

package/dist/stories/MenuItemPlayground.mdx

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

package/dist/stories/MixinAnimation.mdx

@@ -0,0 +1,5 @@
+import { Meta } from '@storybook/addon-docs/blocks'
+
+<Meta title="Mixins / Animation" />
+
+# Animation

package/dist/stories/MixinDarkLight.mdx

@@ -0,0 +1,54 @@
+import { Meta } from '@storybook/addon-docs/blocks'
+
+<Meta title="Mixins / Dark-Light" />
+
+# Dark/Light
+
+Для работы с темами используются пакеты `postcss-dark-theme-class` и `postcss-mixins`
+
+```css
+:root {
+	@media (prefers-color-scheme: light) {
+		--color-test: hsla(51, 98%, 61%, 1);
+	}
+	@media (prefers-color-scheme: dark) {
+		--color-test: hsla(221, 95%, 40%, 1);
+	}
+}
+```
+
+# Миксины для указания `CSS`
+
+```css
+@define-mixin dark {
+  @media (prefers-color-scheme: dark) {
+    & {
+      @mixin-content;
+    }
+  }
+}
+
+@define-mixin light {
+  @media (prefers-color-scheme: light) {
+    & {
+      @mixin-content;
+    }
+  }
+  @mixin-content;
+}
+```
+
+# Пример использования
+
+```css
+.block {
+	width: 100px;
+	height: 100px;
+	@mixin dark {
+	    background: #000;
+	  }
+	@mixin light {
+	    background: #fff;
+	}
+}
+```

package/dist/stories/MixinElevation.mdx

@@ -0,0 +1,5 @@
+import { Meta } from '@storybook/addon-docs/blocks'
+
+<Meta title="Mixins / Elevation" />
+
+# Elevation

package/dist/stories/MixinFillGradient.mdx

@@ -0,0 +1,5 @@
+import { Meta } from '@storybook/addon-docs/blocks'
+
+<Meta title="Mixins / Fill Gradient" />
+
+# Fill Gradient

package/dist/stories/MixinTypography.mdx

@@ -0,0 +1,133 @@
+import { Meta } from '@storybook/addon-docs/blocks'
+
+<Meta title="Mixins / Typography" />
+
+# Typography
+
+
+Общие настройки для текста находятся в файле `fonts.css`
+
+Название переменных для шрифтов задаются в формате порядковых числительных за исключение шрифта для писем.
+
+```bash
+:root {
+  --font-primary: 'Inter', sans-serif;
+  --font-secondary: 'Roboto', sans-serif;
+  --font-email: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
+}
+```
+
+# Миксин `@font`
+
+В большинстве проектов используются отзывчивые шрифты с использованием миксина `@font` и пакетов: `postcss-mixins` и `postcss-responsive-type`
+
+```css
+@define-mixin font $fontWeight, $minFontSize, $minLineHeight, $minLetterSpacing, $maxFontSize, $maxLineHeight, $maxLetterSpacing, $fontFamily {
+  font-size: responsive $minFontSize $maxFontSize;
+  font-range: var(--min-max);
+  font-weight: $fontWeight;
+  font-family: $fontFamily;
+  line-height: responsive $minLineHeight $maxLineHeight;
+  line-height-range: var(--min-max);
+  letter-spacing: responsive $minLetterSpacing $maxLetterSpacing;
+  letter-spacing-range: var(--min-max);
+  @media (--desktop-super-huge) {
+    font-size: $maxFontSize;
+    line-height: $maxLineHeight;
+    letter-spacing: $maxLetterSpacing;
+  }
+}
+```
+
+## Параметры миксина `@font`
+
+- `$fontWeight`  — вес шрифта `default: normal`
+- `$minFontSize` — минимальная высота строки
+- `$minLineHeight` — максимальный высота строки
+- `$maxFontSize` — минимальная ширина буквы
+- `$minLetterSpacing` — максимальный размер шрифта `default: normal`
+- `$maxLineHeight` — максимальная высота строки
+- `$maxLetterSpacing` — максимальная ширина буквы `default: normal`
+- `$fontFamily` — шрифт
+
+## Использование миксина `@font`
+
+Создание миксинов текстовых стилей с использование миксина `@font`
+
+```css
+@define-mixin h1 $weight: normal, $minLetterSpacing: normal, $maxLetterSpacing: normal { {
+  @mixin font $fontWeight, 36px, 36px, $minLetterSpacing, 80px, 80px, $maxLetterSpacing, var(--font-primary);
+}
+
+@define-mixin h5 $weight: normal, $minLetterSpacing: normal, $maxLetterSpacing: normal { {
+  @mixin font $fontWeight, 24px, 28px, $minLetterSpacing, 48px, 48px, $maxLetterSpacing, var(--font-primary);
+}
+
+@define-mixin text-l $weight: normal, $minLetterSpacing: normal, $maxLetterSpacing: normal { {
+  @mixin font $fontWeight, 24px, 28px, $minLetterSpacing, 32px, 40px, $maxLetterSpacing, var(--font-secondary);
+}
+
+@define-mixin text-xs $weight: normal, $minLetterSpacing: normal, $maxLetterSpacing: normal { {
+  @mixin font $fontWeight, 16px, 20px, $minLetterSpacing, 16px, 20px, $maxLetterSpacing, var(--font-secondary);
+}
+```
+
+## Пример использования миксинов текстовых стилей
+
+```css
+.title-block {
+    color: var(--color-surface-text-primary);
+    @mixin h1 bold;
+}
+```
+
+# Создание миксинов на основе `Text Styles`
+в Figma
+
+Например в Figma доступны следующий текстовые стили:
+
+
+
+## Пример созданных миксинов
+
+```css
+@define-mixin h1 $fontWeight: normal {
+  @mixin font $fontWeight, 24px, 28px, 24px, 28px, var(--font-primary);
+}
+
+@define-mixin h3 $fontWeight: normal {
+  @mixin font $fontWeight, 17px, 22px, 17px, 22px, var(--font-primary);
+}
+
+@define-mixin p $fontWeight: normal {
+  @mixin font $fontWeight, 14px, 18px, 14px, 18px, var(--font-primary);
+}
+
+@define-mixin text-xs $fontWeight: normal {
+  @mixin font $fontWeight, 16px, 20px, 16px, 20px, var(--font-primary);
+}
+
+@define-mixin text-l $fontWeight: normal {
+  @mixin font $fontWeight, 10px, 12px, 10px, 12px, var(--font-primary);
+}
+```
+
+## Использование в `CSS`
+
+```css
+.title-block-h1 {
+    @mixin h1 bold;
+}
+
+.title-block-3 {
+    @mixin h3 600;
+}
+
+p {
+    @mixin p;
+}
+
+.desc {
+    @mixin text-l;
+}
+```

package/dist/stories/MixinUtils.mdx

@@ -0,0 +1,5 @@
+import { Meta } from '@storybook/addon-docs/blocks'
+
+<Meta title="Mixins / Utils" />
+
+# Utils

package/dist/stories/ModalOverview.mdx

@@ -0,0 +1,15 @@
+import { Meta, Canvas } from '@storybook/addon-docs/blocks'
+
+import * as ModalStories from '../stories/ModalDemo.stories'
+
+<Meta title="Molecules / Modal / Overview" />
+
+# Modal
+
+`Modal` - это карточка, на которой находится вся ключевая информация, более детальная отобразится при клике на нее.
+
+## Demo
+<Canvas sourceState="shown" of={ModalStories.Demo} />
+
+## Skeleton
+<Canvas sourceState="shown" of={ModalStories.Skeleton} />

package/dist/stories/ModalPlayground.mdx

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

package/dist/stories/ModalSheetBottomOverview.mdx

@@ -0,0 +1,9 @@
+import { Canvas, Controls, Meta, Story } from '@storybook/addon-docs/blocks'
+
+import * as ModalSheetBottomStories from '../stories/ModalSheetBottomDemo.stories'
+
+<Meta title="Molecules / ModalSheetBottom / Overview" />
+
+# ModalSheetBottom
+
+`ModalSheetBottom` - отображает компонент модального окна, всплывающего снизу экрана.

package/dist/stories/NotificationOverview.mdx

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

package/dist/stories/NotificationPlayground.mdx

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

package/dist/stories/OverlayOverview.mdx

@@ -0,0 +1,12 @@
+import { Meta, Story } from '@storybook/addon-docs/blocks'
+
+import * as OverlayStories from '../stories/OverlayDemo.stories'
+
+<Meta title="Atoms / Overlay" />
+
+# Overlay
+
+`Overlay` - это элемент пользовательского интерфейса, который накладывается на основной контент веб-страницы.
+Например, оверлей может использоваться для отображения модальных окон.
+
+<Story of={OverlayStories.Demo} />

package/dist/stories/OverlayPlayground.mdx

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

package/dist/stories/Overview.mdx

@@ -0,0 +1,11 @@
+import { Meta, Story } from '@storybook/addon-docs/blocks'
+
+import * as WarningStories from '../stories/WarningDemo.stories'
+
+<Meta title="Molecules / Warning / Overview" />
+
+# Warning
+
+`Warning` - это элемент, который предупреждает о каком-либо действии
+
+<Story of={WarningStories.Demo} />

package/dist/stories/Playground.mdx

@@ -0,0 +1,10 @@
+import { Canvas, Controls, Meta } from '@storybook/addon-docs/blocks'
+
+import * as WarningStories from '../stories/WarningDemo.stories.tsx'
+
+<Meta title="Molecules / Warning / Playground" />
+
+# Playground
+
+<Canvas sourceState="shown" of={WarningStories.Demo} />
+<Controls of={WarningStories.Demo} />

package/dist/stories/RadioOverview.mdx

@@ -0,0 +1,12 @@
+import { Canvas, Controls, Meta, Story } from '@storybook/addon-docs/blocks'
+
+import * as RadioStories from '../stories/RadioDemo.stories'
+
+<Meta title="Atoms / Radio / Overview" />
+
+# Radio
+
+`Radio` - позволяет выбрать один пункт из списка взаимоисключающих вариантов.
+Клик по тексту подписи или самой радиокнопке приводит к выбору пункта. При этом все остальные варианты не выбраны.
+
+<Story of={RadioStories.Demo} />

package/dist/stories/RadioPlayground.mdx

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

package/dist/stories/RangeSliderOverview.mdx

@@ -0,0 +1,12 @@
+import { Meta, Story } from '@storybook/addon-docs/blocks'
+
+import * as RangeSliderStories from  '../stories/RangeSliderDemo.stories'
+
+<Meta title="Molecules / RangeSlider / Overview" />
+
+# RangeSlider
+
+`RangeSlider` - это слайдер для выбора значений в заданном диапазоне
+
+## Demo
+<Story of={RangeSliderStories.Demo}/>

package/dist/stories/RangeSliderPlayground.mdx

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

package/dist/stories/ResponseOverview.mdx

@@ -0,0 +1,11 @@
+import { Meta, Story } from '@storybook/addon-docs/blocks'
+
+import * as ResponseStories from '../stories/ResponseDemo.stories'
+
+<Meta title="Molecules / Response / Overview" />
+
+# Response
+
+`Response` отображает статус, например, предупреждения или ошибки, напрямую влияющих на возможности пользователей выполнять определенные задачи.
+
+<Story of={ResponseStories.Demo} />