feat: add custom class to ConnectionStatus component (#1924)

Author: MartinCupela

src/components/MessageList/ConnectionStatus.tsx

@@ -26,7 +26,11 @@ const UnMemoizedConnectionStatus = <
   }, [client, online]);
 
   return (
-    <CustomNotification active={!online} type='error'>
+    <CustomNotification
+      active={!online}
+      className='str-chat__connection-status-notification'
+      type='error'
+    >
       {t<string>('Connection failure, reconnecting now...')}
     </CustomNotification>
   );

src/components/MessageList/CustomNotification.tsx

@@ -1,19 +1,25 @@
 import React, { PropsWithChildren } from 'react';
+import clsx from 'clsx';
 
 export type CustomNotificationProps = {
   type: string;
   active?: boolean;
+  className?: string;
 };
 
 const UnMemoizedCustomNotification = (props: PropsWithChildren<CustomNotificationProps>) => {
-  const { active, children, type } = props;
+  const { active, children, className, type } = props;
 
   if (!active) return null;
 
   return (
     <div
       aria-live='polite'
-      className={`str-chat__custom-notification notification-${type} str-chat__notification`}
+      className={clsx(
+        `str-chat__custom-notification notification-${type}`,
+        `str-chat__notification`,
+        className,
+      )}
       data-testid='custom-notification'
     >
       {children}

src/components/MessageList/__tests__/CustomNotification.test.js

@@ -42,4 +42,16 @@ describe('CustomNotification', () => {
 
     expect(getByTestId('custom-notification').className).toContain(`notification-${type}`);
   });
+
+  it('should add custom class to className', () => {
+    const className = 'custom-classname-xxx';
+
+    const { getByTestId } = render(
+      <CustomNotification active={true} className={className}>
+        x
+      </CustomNotification>,
+    );
+
+    expect(getByTestId('custom-notification').className).toContain(className);
+  });
 });