@itcase/ui 1.8.27 → 1.8.29

package/dist/stories/HTMLContentPlayground.mdx

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

package/dist/stories/HeroTitleOverview.mdx

@@ -0,0 +1,36 @@
+import { Meta, Story, Canvas } from '@storybook/blocks'
+
+import * as HeroTitleSizeStories from '../stories/HeroTitleSize.stories'
+
+<Meta title="Atoms / Hero Title / Overview" />
+
+# Title
+
+`Title` отображает заголовки.
+
+<Story of={HeroTitleSizeStories.SizeH3} />
+
+
+## SizeH1
+
+<Canvas sourceState="shown" of={HeroTitleSizeStories.SizeH1} />
+
+## SizeH2
+
+<Canvas sourceState="shown" of={HeroTitleSizeStories.SizeH2} />
+
+## SizeH3
+
+<Canvas sourceState="shown" of={HeroTitleSizeStories.SizeH3} />
+
+## SizeH4
+
+<Canvas sourceState="shown" of={HeroTitleSizeStories.SizeH4} />
+
+## SizeH5
+
+<Canvas sourceState="shown" of={HeroTitleSizeStories.SizeH5} />
+
+## SizeH6
+
+<Canvas sourceState="shown" of={HeroTitleSizeStories.SizeH6} />

package/dist/stories/HeroTitlePlayground.mdx

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

package/dist/stories/IconOverview.mdx

@@ -0,0 +1,16 @@
+import { Meta, Story } from '@storybook/blocks'
+
+import * as IconStories from '../stories/IconDemo.stories'
+
+<Meta title="Atoms / Icon / Overview" />
+
+# Icon
+
+`Icon` — это часть визуального элемента. Может нести декоративную функцию, а также выступать в качестве кнопки и выполнять какое-либо действие.
+
+<Story of={IconStories.Demo} />
+
+Иконки представлены в различных размерах, основные: 14, 16, 24 и 40px. Цвет иконки определяется пропсом iconFill или iconStroke.
+С помощью пропса fillSize можно создать заливку вокруг иконки, fillSize бывают размером: 14, 16, 24, 32, 40, 48, 56, 60, 72px.
+
+<Story of={IconStories.Skeleton} />

package/dist/stories/IconPlayground.mdx

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

package/dist/stories/ImageOverview.mdx

@@ -0,0 +1,11 @@
+import { Meta, Story } from '@storybook/blocks'
+
+import * as ImageStories from '../stories/Image.stories.tsx'
+
+<Meta title="Atoms / Image / Overview" />
+
+# Image
+
+`Image` используется для отображения картинок.
+
+<Story of={ImageStories.Default} />

package/dist/stories/ImagePlayground.mdx

@@ -0,0 +1,10 @@
+import { Canvas, Controls, Meta } from '@storybook/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/InputOverview.mdx

@@ -0,0 +1,11 @@
+import { Meta, Story } from '@storybook/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/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/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/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/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/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/blocks'
+
+import * as LinkStories from '../stories/LinkDemo.stories'
+
+<Meta title="Components / 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/blocks'
+
+import * as LinkStories from '../stories/LinkDemo.stories'
+
+<Meta title="Components / 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, List, Story } from '@storybook/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/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/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/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/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/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/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/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/ModalOverview.mdx

@@ -0,0 +1,15 @@
+import { Meta, Canvas } from '@storybook/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/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/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/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/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/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/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

@@ -1,21 +1,11 @@
 import { Meta, Story } from '@storybook/blocks'
 
-import * as VideoStories from  '../stories/Video.stories'
+import * as TextareaStories from '../stories/Textarea.stories.tsx'
 
-<Meta title="Components / Video / Overview" />
+<Meta title="Atoms / Textarea / Overview" />
 
-# Video
+# Textarea
 
-`Video` - используется для встраивания видео в разных форматах в веб-приложения
+`Textarea` позволяет пользователю вводить и редактировать данные большого объема в текстовом виде.
 
-## Poster
-<Story of={VideoStories.Poster}/>
-
-## Mp4
-<Story of={VideoStories.Mp4}/>
-
-## Webm
-<Story of={VideoStories.Webm}/>
-
-## Ogv
-<Story of={VideoStories.Ogv}/>
+<Story of={TextareaStories.Demo} />

package/dist/stories/Playground.mdx

@@ -1,10 +1,10 @@
 import { Canvas, Controls, Meta } from '@storybook/blocks'
 
-import * as VideoStories from '../stories/Video.stories.tsx'
+import * as TextareaStories from '../stories/Textarea.stories.tsx'
 
-<Meta title="Components / Video / Playground" />
+<Meta title="Atoms / Textarea / Playground" />
 
 # Playground
 
-<Canvas sourceState="shown" of={VideoStories.Mp4} />
-<Controls of={VideoStories.Mp4} />
+<Canvas sourceState="shown" of={TextareaStories.Demo} />
+<Controls of={TextareaStories.Demo} />

package/dist/stories/RadioOverview.mdx

@@ -0,0 +1,12 @@
+import { Canvas, Controls, Meta, Story } from '@storybook/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/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/ResponseOverview.mdx

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

package/dist/stories/ResponsePlayground.mdx

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

package/dist/stories/SVGContentOverview.mdx

@@ -0,0 +1,15 @@
+import { Meta, Story } from '@storybook/blocks'
+
+import * as SVGContentStories from  '../stories/SVGContent.stories'
+
+<Meta title="Components / SVGContent / Overview" />
+
+# SVGContent
+
+`SVGContent` - это обёртка для отображения SVG-графики
+
+## Demo
+<Story of={SVGContentStories.Demo}/>
+
+## SVGReactComponent
+<Story of={SVGContentStories.SVGReactComponent}/>

package/dist/stories/SVGContentPlayground.mdx

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

package/dist/stories/SearchOverview.mdx

@@ -0,0 +1,11 @@
+import { Meta, Story } from '@storybook/blocks'
+
+import * as SearchInputStories from '../stories/SearchInputDemo.stories'
+
+<Meta title="Atoms / Search / Overview" />
+
+# SearchInput
+
+`SearchInput` позволяет пользователю вводить текст, чтобы найти соответствующий контент.
+
+<Story of={SearchInputStories.Demo} />

package/dist/stories/SearchPlayground.mdx

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

package/dist/stories/SegmentedOverview.mdx

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

package/dist/stories/SegmentedPlayground.mdx

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

package/dist/stories/SwiperOverview.mdx

@@ -0,0 +1,28 @@
+import { Meta, Story } from '@storybook/blocks'
+
+import * as SwiperStories from '../stories/Swiper.stories'
+
+<Meta title="Components / Swiper / Overview" />
+
+# Swiper
+
+`Swiper` - это список с поддержкой касаний, жестов и различных эффектов перелистывания.
+
+<Story of={SwiperStories.Demo} />
+
+## CustomButtons
+<Story of={SwiperStories.CustomButtons} />
+
+## WithPagination
+<Story of={SwiperStories.WithPagination} />
+
+## WithMousewheel
+<Story of={SwiperStories.WithMousewheel} />
+
+## Vertical
+<Story of={SwiperStories.Vertical} />
+
+## MultiSlides
+<Story of={SwiperStories.MultiSlides} />
+
+

package/dist/stories/SwiperPlayground.mdx

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