diff --git a/src/molecules/InfoElement/InfoElement.test.tsx b/src/molecules/InfoElement/InfoElement.test.tsx index 3bcd2991..5b7c17b4 100644 --- a/src/molecules/InfoElement/InfoElement.test.tsx +++ b/src/molecules/InfoElement/InfoElement.test.tsx @@ -62,3 +62,25 @@ test('Capitalizing content works as expected', () => { expect(screen.getByText(expectedContentString)).toBeInTheDocument(); }); + +test('Copyable / capitalize content and ReactElement throws error', () => { + console.error = vi.fn(); + expect(() => + render( + Click me!} + copyableContent + /> + ) + ).toThrowError(); + expect(() => + render( + Click me!} + capitalizeContent + /> + ) + ).toThrowError(); +}); diff --git a/src/molecules/InfoElement/InfoElement.tsx b/src/molecules/InfoElement/InfoElement.tsx index acdc4d67..79e46c35 100644 --- a/src/molecules/InfoElement/InfoElement.tsx +++ b/src/molecules/InfoElement/InfoElement.tsx @@ -5,50 +5,47 @@ import CopyText from 'src/molecules/InfoElement/CopyText'; export interface InfoElementProps { title: string; + content: string | ReactElement; + capitalizeContent?: boolean; + copyableContent?: boolean; } /** - * @param content - Text - * @param copyableContent - Should the content be copyable via hover - Defaults to false - * @param capitalizeContent - Should the content be capitalized - Defaults to false + * @param title - String + * @param content - String | ReactElement + * @param copyableContent - Should the content be copyable via hover - Defaults to false (only works when content is string) + * @param capitalizeContent - Should the content be capitalized - Defaults to false (only works when content is string) */ -interface TextInfoElementProps extends InfoElementProps { - content: string; - copyableContent?: boolean; - capitalizeContent?: boolean; -} +export const InfoElement = forwardRef( + ({ title, content, copyableContent, capitalizeContent }, ref) => { + if (typeof content !== 'string' && (copyableContent || capitalizeContent)) { + throw new Error( + 'copyableContent and capitalizeContent only works when content is string' + ); + } -interface CustomInfoElementProps extends InfoElementProps { - content: ReactElement; - copyableContent?: false; - capitalizeContent?: false; -} + const contentElement = + typeof content === 'string' ? ( + + {capitalizeContent ? content.toUpperCase() : content} + + ) : ( + content + ); -export const InfoElement = forwardRef< - HTMLDivElement, - TextInfoElementProps | CustomInfoElementProps ->(({ title, content, copyableContent, capitalizeContent }, ref) => { - const contentElement = - typeof content === 'string' ? ( - - {capitalizeContent ? content.toUpperCase() : content} - - ) : ( - content + return ( +
+ + {title?.toUpperCase()} + + {copyableContent && typeof content === 'string' ? ( + {contentElement} + ) : ( + contentElement + )} +
); - - return ( -
- - {title?.toUpperCase()} - - {copyableContent ? ( - {contentElement} - ) : ( - contentElement - )} -
- ); -}); + } +); InfoElement.displayName = 'InfoElement';