Improve title prop to message component

Author: Kubit

src/components/message/__tests__/message.test.tsx

@@ -75,6 +75,7 @@ describe('Message component', () => {
   });
 
   it('Should render tag and extra action', async () => {
+    const title = { content: <div>Title React Node</div> };
     const { container } = renderProvider(
       <Message
         {...mockPropsWithTagAndExtraAction}
@@ -84,6 +85,7 @@ describe('Message component', () => {
           status: 'NORMAL',
           content: 'Tag',
         }}
+        title={title}
       />
     );
 

src/components/message/messageStandAlone.tsx

@@ -88,6 +88,27 @@ const MessageStandAloneComponent = (
     );
   };
 
+  const buildTitle = () => {
+    return typeof props.title?.content === 'string' ? (
+      <MessageTextStyled
+        aria-errormessage={props.ariaMessageId}
+        extraPaddingGap={!!props.closeIcon}
+        styles={props.styles.closeIcon}
+      >
+        <Text
+          component={TextComponentType.PARAGRAPH}
+          customTypography={props.styles.title}
+          dataTestId={`${props.dataTestId}Title`}
+          {...props.title}
+        >
+          {props.title.content}
+        </Text>
+      </MessageTextStyled>
+    ) : (
+      props.title?.content
+    );
+  };
+
   return (
     <ParentContainerStyled aria-live={ariaLive} styles={props.styles}>
       {props.open && (
@@ -118,22 +139,7 @@ const MessageStandAloneComponent = (
             withIcon={!!props.closeIcon}
             onClick={props.titleAndContentContainerProps?.onClick}
           >
-            {props.title && (
-              <MessageTextStyled
-                aria-errormessage={props.ariaMessageId}
-                extraPaddingGap={!!props.closeIcon}
-                styles={props.styles.closeIcon}
-              >
-                <Text
-                  component={TextComponentType.PARAGRAPH}
-                  customTypography={props.styles.title}
-                  dataTestId={`${props.dataTestId}Title`}
-                  {...props.title}
-                >
-                  {props.title.content}
-                </Text>
-              </MessageTextStyled>
-            )}
+            {props.title && buildTitle()}
             {props.tag?.content && buildTag()}
             <MessageContentStyled isLargeMessage={isLargeMessage} styles={props.styles}>
               {buildContent()}

src/components/message/types/message.ts

@@ -25,7 +25,7 @@ export type MessageContentType = Omit<IText<string>, 'children'> & {
 };
 
 export type MessageTitleType = Omit<IText<string>, 'children'> & {
-  content: string;
+  content: React.ReactNode;
 };
 
 export type MessageTagType = Omit<ITag, 'children'> & {