Skip to content

Commit d8844c5

Browse files
ivancheprasovivancheprasov
committed
feat: added landing docs for Disclosure component
1 parent 52fafbd commit d8844c5

File tree

2 files changed

+655
-68
lines changed

2 files changed

+655
-68
lines changed

‎src/components/Disclosure/README-ru.md‎

Lines changed: 331 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,48 +1,272 @@
1-
## Disclosure
1+
<!--GITHUB_BLOCK-->
2+
3+
# Disclosure
4+
5+
<!--/GITHUB_BLOCK-->
6+
7+
```tsx
8+
import {Disclosure} from '@gravity-ui/uikit';
9+
```
210

311
`Disclosure` — компонент раскрытия, который показывает и скрывает вложенный контент.
412

5-
### Свойства
13+
<!--GITHUB_BLOCK-->
14+
15+
## Базовый пример
16+
17+
```tsx
18+
<Disclosure summary="Summary">Content</Disclosure>
19+
```
20+
21+
<!--/GITHUB_BLOCK-->
22+
23+
## Управление состоянием раскрытия
24+
25+
Вы можете управлять состоянием раскрытия компонента, используя свойства `expanded` и `onUpdate`.
26+
27+
Пример управления состоянием:
28+
29+
<!--LANDING_BLOCK
30+
31+
<ExampleBlock
32+
code={`
33+
function ControlledDisclosure() {
34+
const [expanded, setExpanded] = React.useState(true);
35+
36+
return (
37+
<Disclosure summary="Summary" expanded={expanded} onUpdate={setExpanded}>
38+
Content
39+
</Disclosure>
40+
);
41+
}
42+
`}>
43+
<UIKit.Disclosure summary="Summary" defaultExpanded>
44+
Content
45+
</UIKit.Disclosure>
46+
</ExampleBlock>
47+
48+
LANDING_BLOCK-->
49+
50+
<!--GITHUB_BLOCK-->
51+
52+
```tsx
53+
function ControlledDisclosure() {
54+
const [expanded, setExpanded] = React.useState(true);
55+
56+
return (
57+
<Disclosure summary="Summary" expanded={expanded} onUpdate={setExpanded}>
58+
Content
59+
</Disclosure>
60+
);
61+
}
62+
```
63+
64+
<!--/GITHUB_BLOCK-->
65+
66+
## Размер
67+
68+
Используйте свойство `size` для управления размером `Disclosure`. Размер по умолчанию — `m`.
69+
70+
<!--LANDING_BLOCK
671
7-
| Имя | Тип | Обязательное | Значение по умолчанию | Описание |
8-
| :-------------- | :---------------------------- | :----------: | :-------------------- | :--------------------------------------------------------------- |
9-
| size | `m` `l` `xl` | | `m` | Размер раскрытия. |
10-
| className | `String` | | | Имя CSS-класса корневого элемента. |
11-
| disabled | `Boolean` | | `false` | Отключенное состояние. |
12-
| defaultExpanded | `Boolean` | | `false` | Состояние раскрытия по умолчанию. |
13-
| expanded | `Boolean` | | | Контролируемое состояние раскрытия. |
14-
| arrowPosition | `start` `end` | | `left` | Положение контрола. |
15-
| summary | `React.ReactNode` | | | Краткое описание контента. |
16-
| keepMounted | `Boolean` | | `true` | Сохранение контента в DOM. |
17-
| onUpdate | `(expanded: boolean) => void` | | | Обратный вызов, срабатывающий при изменении состояния раскрытия. |
18-
| children | `React.ReactNode` | | | Контент. |
19-
| qa | `String` | | | Идентификатор для тестирования. |
72+
<ExampleBlock
73+
code={`
74+
<Disclosure summary="Middle size" size="m">
75+
Content
76+
</Disclosure>
77+
<Disclosure summary="Large size" size="l">
78+
Content
79+
</Disclosure>
80+
<Disclosure summary="Extra large size" size="xl">
81+
Content
82+
</Disclosure>
83+
`}
84+
>
85+
<UIKit.Flex gap={4} alignItems="center">
86+
<UIKit.Disclosure summary="Middle size" size="m">
87+
Content
88+
</UIKit.Disclosure>
89+
<UIKit.Disclosure summary="Large size" size="l">
90+
Content
91+
</UIKit.Disclosure>
92+
<UIKit.Disclosure summary="Extra large size" size="xl">
93+
Content
94+
</UIKit.Disclosure>
95+
</UIKit.Flex>
96+
</ExampleBlock>
97+
98+
LANDING_BLOCK-->
99+
100+
<!--GITHUB_BLOCK-->
101+
102+
```tsx
103+
<Disclosure summary="Middle size" size="m">
104+
Content
105+
</Disclosure>
106+
<Disclosure summary="Large size" size="l">
107+
Content
108+
</Disclosure>
109+
<Disclosure summary="Extra large size" size="xl">
110+
Content
111+
</Disclosure>
112+
```
113+
114+
<!--/GITHUB_BLOCK-->
20115

21-
### Свойства Disclosure.Summary
116+
## Позиция стрелки
22117

23-
| Имя | Тип | Обязательное | Значение по умолчанию | Описание |
24-
| :------- | :---------------------------------------------- | :----------: | :-------------------- | :------------------------------ |
25-
| children | `(props, defaultSummary) => React.ReactElement` | Да | | Функция рендеринга. |
26-
| qa | `String` | | `disclosure-summary` | Идентификатор для тестирования. |
118+
`left`: Стрелка расположена слева от заголовка (используется по умолчанию).
27119

28-
### Свойства Disclosure.Details
120+
`right`: Стрелка расположена справа от заголовка.
29121

30-
| Имя | Тип | Обязательное | Значение по умолчанию | Описание |
31-
| :------- | :---------------- | :----------: | :-------------------- | :------------------------------ |
32-
| children | `React.ReactNode` | Да | | Контент |
33-
| qa | `String` | | `disclosure-details` | Идентификатор для тестирования. |
122+
`start`: Стрелка расположена в начале заголовка (отличается от `left` при использовании RTL).
34123

35-
### Примеры
124+
`end`: Стрелка расположена в конце заголовка (отличается от `right` при использовании RTL).
36125

37-
Базовый пример:
126+
<!--LANDING_BLOCK
38127
39-
```jsx
40-
<Disclosure summary="summary">Content</Disclosure>
128+
<ExampleBlock
129+
code={`
130+
<Disclosure summary="Summary with left arrow" arrowPosition="left">
131+
Content
132+
</Disclosure>
133+
<Disclosure summary="Summary with right arrow" arrowPosition="right">
134+
Content
135+
</Disclosure>
136+
<Disclosure summary="Summary with start arrow" arrowPosition="start">
137+
Content
138+
</Disclosure>
139+
<Disclosure summary="Summary with end arrow" arrowPosition="end">
140+
Content
141+
</Disclosure>
142+
`}
143+
>
144+
<UIKit.Flex gap={4} alignItems="flex-start">
145+
<UIKit.Flex gap={4} direction="column">
146+
<UIKit.Disclosure summary="Summary with left arrow" arrowPosition="left">
147+
Content
148+
</UIKit.Disclosure>
149+
<UIKit.Disclosure summary="Summary with start arrow" arrowPosition="start">
150+
Content
151+
</UIKit.Disclosure>
152+
</UIKit.Flex>
153+
<UIKit.Flex gap={4} direction="column">
154+
<UIKit.Disclosure summary="Summary with right arrow" arrowPosition="right">
155+
Content
156+
</UIKit.Disclosure>
157+
<UIKit.Disclosure summary="Summary with end arrow" arrowPosition="end">
158+
Content
159+
</UIKit.Disclosure>
160+
</UIKit.Flex>
161+
</UIKit.Flex>
162+
</ExampleBlock>
163+
164+
LANDING_BLOCK-->
165+
166+
<!--GITHUB_BLOCK-->
167+
168+
```tsx
169+
<Disclosure summary="Summary with left arrow" arrowPosition="left">
170+
Content
171+
</Disclosure>
172+
<Disclosure summary="Summary with right arrow" arrowPosition="right">
173+
Content
174+
</Disclosure>
175+
<Disclosure summary="Summary with start arrow" arrowPosition="start">
176+
Content
177+
</Disclosure>
178+
<Disclosure summary="Summary with end arrow" arrowPosition="end">
179+
Content
180+
</Disclosure>
41181
```
42182

43-
Пример с пользовательским кратким описанием:
183+
<!--/GITHUB_BLOCK-->
184+
185+
## Пользовательский контент
44186

45-
```jsx
187+
Используйте компонент `Disclosure.Summary` для создания пользовательского заголовка и компонент `Disclosure.Details` для заполнения пользовательского контента.
188+
189+
<!--LANDING_BLOCK
190+
191+
<ExampleBlock
192+
code={`
193+
<Disclosure>
194+
<Disclosure.Summary>
195+
{(props) => (
196+
<Button {...props}>
197+
<Icon data={Check} size={14} />
198+
Custom summary
199+
<Icon data={Check} size={14} />
200+
</Button>
201+
)}
202+
</Disclosure.Summary>
203+
<div>Custom details</div>
204+
<div>More custom details</div>
205+
</Disclosure>
206+
<Disclosure summary="Summary">
207+
<Disclosure.Summary>
208+
{(_props, defaultButton) => (
209+
<Flex gap={4}>
210+
{defaultButton}
211+
<Icon data={Check} size={14} />
212+
</Flex>
213+
)}
214+
</Disclosure.Summary>
215+
<Disclosure.Details>
216+
Custom Details
217+
</Disclosure.Details>
218+
</Disclosure>
219+
`}>
220+
<UIKit.Flex gap={4} alignItems="center">
221+
<UIKit.Disclosure>
222+
<UIKit.Disclosure.Summary>
223+
{(props) => (
224+
<UIKit.Button {...props}>
225+
<UIKit.Icon
226+
data={() => (
227+
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M13.488 3.43a.75.75 0 0 1 .081 1.058l-6 7a.75.75 0 0 1-1.1.042l-3.5-3.5A.75.75 0 0 1 4.03 6.97l2.928 2.927 5.473-6.385a.75.75 0 0 1 1.057-.081" clip-rule="evenodd"/></svg>
228+
)}
229+
size={14}
230+
/>
231+
Custom summary
232+
<UIKit.Icon
233+
data={() => (
234+
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M13.488 3.43a.75.75 0 0 1 .081 1.058l-6 7a.75.75 0 0 1-1.1.042l-3.5-3.5A.75.75 0 0 1 4.03 6.97l2.928 2.927 5.473-6.385a.75.75 0 0 1 1.057-.081" clip-rule="evenodd"/></svg>
235+
)}
236+
size={14}
237+
/>
238+
</UIKit.Button>
239+
)}
240+
</UIKit.Disclosure.Summary>
241+
<div>Custom details</div>
242+
<div>More custom details</div>
243+
</UIKit.Disclosure>
244+
<UIKit.Disclosure summary="Summary">
245+
<UIKit.Disclosure.Summary>
246+
{(_props, defaultButton) => (
247+
<UIKit.Flex gap={4}>
248+
{defaultButton}
249+
<UIKit.Icon
250+
data={() => (
251+
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M13.488 3.43a.75.75 0 0 1 .081 1.058l-6 7a.75.75 0 0 1-1.1.042l-3.5-3.5A.75.75 0 0 1 4.03 6.97l2.928 2.927 5.473-6.385a.75.75 0 0 1 1.057-.081" clip-rule="evenodd"/></svg>
252+
)}
253+
size={14}
254+
/>
255+
</UIKit.Flex>
256+
)}
257+
</UIKit.Disclosure.Summary>
258+
<UIKit.Disclosure.Details>
259+
Custom Details
260+
</UIKit.Disclosure.Details>
261+
</UIKit.Disclosure>
262+
</UIKit.Flex>
263+
</ExampleBlock>
264+
265+
LANDING_BLOCK-->
266+
267+
<!--GITHUB_BLOCK-->
268+
269+
```tsx
46270
<Disclosure>
47271
<Disclosure.Summary>
48272
{(props) => (
@@ -58,7 +282,7 @@
58282
</Disclosure>
59283
```
60284

61-
```jsx
285+
```tsx
62286
<Disclosure>
63287
<Disclosure.Summary>
64288
{(_props, defaultButton) => (
@@ -68,6 +292,80 @@
68292
</Flex>
69293
)}
70294
</Disclosure.Summary>
71-
Details
295+
<Disclosure.Details>
296+
Custom Details
297+
</Disclosure.Details>
72298
</Disclosure>
73299
```
300+
301+
<!--/GITHUB_BLOCK-->
302+
303+
## Отключенное состояние
304+
305+
`Disclosure` может быть отключен с помощью свойства `disabled`.
306+
307+
<!--LANDING_BLOCK
308+
309+
<ExampleBlock
310+
code={`
311+
<Disclosure summary="Summary" disabled>
312+
Content
313+
</Disclosure>
314+
`}
315+
>
316+
<UIKit.Disclosure summary="Summary" disabled>
317+
Content
318+
</UIKit.Disclosure>
319+
</ExampleBlock>
320+
321+
LANDING_BLOCK-->
322+
323+
<!--GITHUB_BLOCK-->
324+
325+
```tsx
326+
<Disclosure summary="Summary" disabled>
327+
Content
328+
</Disclosure>
329+
```
330+
331+
<!--/GITHUB_BLOCK-->
332+
333+
## Свойства
334+
335+
### Disclosure
336+
337+
| Имя | Описание |Тип | Значение по умолчанию |
338+
| :-------------- | :------------------------------------------------------------- | :--------------------------------- | :-------------------- |
339+
| size | Размер раскрытия |`"m"` `"l"` `"xl"` | `"m"` |
340+
| className | Имя CSS-класса корневого элемента |`string` | |
341+
| disabled | Отключенное состояние |`boolean` | `false` |
342+
| defaultExpanded | Состояние раскрытия по умолчанию |`boolean` | `false` |
343+
| expanded | Контролируемое состояние раскрытия | `boolean` | |
344+
| arrowPosition | Положение контрола |`"start"` `"end"` `"left"` `"right"`| `"left"` |
345+
| summary | Краткое описание контента |`React.ReactNode` | |
346+
| keepMounted | Сохранение контента в DOM | `boolean` | `true` |
347+
| onUpdate | Обратный вызов, срабатывающий при изменении состояния раскрытия | `(expanded: boolean) => void` | |
348+
| onSummaryKeyDown| Обратный вызов, срабатывающий при фокусе заголовка |`(e: React.KeyboardEvent<HTMLButtonElement>) => void`| |
349+
| children | Контент | `React.ReactNode` | |
350+
| qa | Идентификатор для тестирования | `string` | |
351+
352+
### Disclosure.Summary
353+
354+
| Имя | Описание | Тип | Значение по умолчанию |
355+
| :------- | :------------------------------ |:---------------------------------------------- | :-------------------- |
356+
| children | Функция рендеринга |`(props, defaultSummary) => React.ReactElement` | |
357+
| qa | Идентификатор для тестирования |`string` | `disclosure-summary` |
358+
359+
### Disclosure.Details
360+
361+
| Имя | Описание | Тип | Значение по умолчанию |
362+
| :------- | :------------------------------ | :---------------- | :-------------------- |
363+
| children | Контент | `React.ReactNode` | |
364+
| qa | Идентификатор для тестирования | `string` | `disclosure-details` |
365+
366+
## CSS API
367+
368+
| Name | Description |
369+
| :----------------------------------- | :------------------------------------------ |
370+
| `--g-disclosure-text-color` | Цвет текста заголовка trigger |
371+
| `--g-disclosure-text-color-disabled` | Цвет текста заблокированного заголовка |

0 commit comments

Comments
 (0)