feat(Disclosure): allow use React.Node as summary (#1233)

gravity-ui · Dec 27, 2023 · 3180060 · 3180060
1 parent 13b921e
commit 3180060
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 3 deletions.
diff --git a/src/components/Disclosure/Disclosure.tsx b/src/components/Disclosure/Disclosure.tsx
@@ -29,7 +29,7 @@ export interface DisclosureProps extends QAProps {
     /** Control position */
     arrowPosition?: DisclosureArrowPosition;
     /** Content summary */
-    summary?: string;
+    summary?: React.ReactNode;
     /** Class name */
     className?: string;
     /** Content */

diff --git a/src/components/Disclosure/README.md b/src/components/Disclosure/README.md
@@ -12,7 +12,7 @@ Disclosure component that shows and hides enclosed content.
 | defaultExpanded | `Boolean`                     |          | `false` | Default opening state                                    |
 | expanded        | `Boolean`                     |          |         | Controlled opening state                                 |
 | arrowPosition   | `left` `right`                |          | `left`  | Control position                                         |
-| summary         | `String`                      |          |         | Content summary                                          |
+| summary         | `React.ReactNode`             |          |         | Content summary                                          |
 | keepMounted     | `Boolean`                     |          | `true`  | Keep content in DOM                                      |
 | onUpdate        | `(expanded: boolean) => void` |          |         | Callback fired when the expand/collapse state is changed |
 | children        | `React.ReactNode`             |          |         | Content                                                  |

diff --git a/src/components/Disclosure/__stories__/Disclosure.stories.tsx b/src/components/Disclosure/__stories__/Disclosure.stories.tsx
@@ -5,6 +5,7 @@ import type {Meta, StoryFn} from '@storybook/react';
 
 import {Button} from '../../Button';
 import {Icon} from '../../Icon';
+import {Label} from '../../Label';
 import type {DisclosureProps} from '../index';
 import {Disclosure} from '../index';
 
@@ -76,6 +77,7 @@ const CustomTemplate: StoryFn<DisclosureProps> = (args) => {
                     {(props) => <Button {...props}>Without content</Button>}
                 </Disclosure.Summary>
             </Disclosure>
+            <Disclosure {...args} summary={<Label>Default node summary</Label>} />
         </div>
     );
 };

diff --git a/src/components/Disclosure/__tests__/Disclosure .test.tsx b/src/components/Disclosure/__tests__/Disclosure .test.tsx
@@ -39,7 +39,7 @@ describe.only('Disclosure', () => {
         expect(disclosure).not.toBeDisabled();
     });
 
-    test('show given summary', () => {
+    test('show given string summary', () => {
         const content = 'Some content';
 
         render(<Disclosure summary={content} />);
@@ -48,6 +48,20 @@ describe.only('Disclosure', () => {
         expect(text).toBeVisible();
     });
 
+    test('show given node summary', () => {
+        const className = 'content';
+        const content = (
+            <div data-qa={qaId} className={className}>
+                Some content
+            </div>
+        );
+
+        render(<Disclosure summary={content} />);
+        const component = screen.getByTestId(qaId);
+
+        expect(component).toHaveClass(className);
+    });
+
     test('add className', () => {
         const className = 'my-class';