From 1e52329a741d6fdd53851968347de4ae7d249eb4 Mon Sep 17 00:00:00 2001
From: Vladislav Denisov <deni.vladislav@gmail.com>
Date: Mon, 24 Jun 2024 13:16:06 +0300
Subject: [PATCH] docs(sdds-serv): TextArea docs added

---
 .../docs/components/TextArea.mdx              | 87 +++++++++++++++++++
 1 file changed, 87 insertions(+)
 create mode 100644 website/sdds-serv-docs/docs/components/TextArea.mdx

diff --git a/website/sdds-serv-docs/docs/components/TextArea.mdx b/website/sdds-serv-docs/docs/components/TextArea.mdx
new file mode 100644
index 0000000000..e043b93278
--- /dev/null
+++ b/website/sdds-serv-docs/docs/components/TextArea.mdx
@@ -0,0 +1,87 @@
+---
+id: textarea
+title: TextArea
+---
+
+import { PropsTable, Description } from '@site/src/components';
+
+# TextArea
+<Description name="TextArea" />
+<PropsTable name="TextArea" exclude={['$isFocused']} />
+
+## Использование
+Компонент `TextArea` может содержать иконку (или кнопку) справа.
+Для этого используйте свойство `contentRight`:
+
+```tsx live
+import React from 'react';
+import { TextArea } from '@salutejs/sdds-serv';
+import { IconDownload } from '@salutejs/plasma-icons';
+
+export function App() {
+    return (
+        <div>
+            <TextArea
+                placeholder="Положение иконки"
+                defaultValue="Справа"
+                contentRight={<IconDownload />}
+            />
+        </div>
+    );
+}
+```
+
+Также можно регулировать высоту и ширину, используя свойства `height` и `width`, 
+указав значения в `rem` или соответствующие свойствам css значения.
+
+## Autoresize
+Также можно включить автоматическое регулирование высоты поля ввода по длине контента внутри (параметра `value`).
+Для этого необходимо использовать свойство `autoResize`.
+
+В этом режиме можно указать крайние значения высоты поля ввода, используя свойства `autoMin`, `autoMax`,
+указав их в `rem`.
+
+```tsx live
+import React from 'react';
+import { TextArea } from '@salutejs/sdds-serv';
+
+export function App() {
+    const [value, setValue] = React.useState('Значение');
+
+    return (
+        <div>
+            <TextArea
+                placeholder="Введите значение"
+                value={value}
+                onChange={(e) => {
+                    setValue(e.target.value);
+                }}
+                autoResize
+                minAuto={3}
+                maxAuto={5}
+            />
+        </div>
+    );
+}
+```
+
+### Подсказка
+Для вывода подсказки снизу от поля используйте свойство `leftHelper` и/или `rightHelper`.
+
+```tsx live
+import React from 'react';
+import { TextArea } from '@salutejs/sdds-serv';
+
+export function App() {
+    return (
+        <div>
+            <TextArea
+                placeholder="Введите значение"
+                defaultValue="Значение"
+                leftHelper="Подсказка снизу слева"
+                rightHelper="Подсказка снизу справа"
+            />
+        </div>
+    );
+}
+```