Merge pull request #2510 from anuradha9712/feat-chat-unread-message-c…

…omponent

feat(unreadMessage): add chat unread message separator component

core/components/molecules/chat/Chat.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import DateSeparator from './dateSeparator';
+import UnreadMessage from './unreadMessage';
 import { BaseProps } from '@/utils/types';
 
 export interface ChatProps extends BaseProps {
@@ -19,5 +20,6 @@ export const Chat = (props: ChatProps) => {
 };
 
 Chat.DateSeparator = DateSeparator;
+Chat.UnreadMessage = UnreadMessage;
 
 export default Chat;

core/components/molecules/chat/unreadMessage/UnreadMessage.tsx

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import { Icon, Text } from '@/index';
+import styles from '@css/components/chatSeparator.module.css';
+import { BaseProps } from '@/utils/types';
+import classNames from 'classnames';
+
+export interface UnreadMessageProps extends BaseProps {
+  /**
+   * Text to be rendered inside `UnreadMessage`
+   */
+  text: string;
+}
+
+const UnreadMessage: React.FC<UnreadMessageProps> = (props) => {
+  const { text, className, ...rest } = props;
+
+  const wrapperClass = classNames('d-flex align-items-center justify-content-center my-4', className);
+
+  return (
+    <div data-test="DesignSystem-Chat-UnreadMessage" className={wrapperClass} {...rest}>
+      <span className={styles['Chat-UnreadMessage']} role="button" aria-label={text}>
+        <Icon appearance="white" name="arrow_Downward" className="mr-3" />
+        <Text appearance="white" weight="strong" data-test="DesignSystem-Chat-UnreadMessage-Text">
+          {text}
+        </Text>
+      </span>
+    </div>
+  );
+};
+
+export default UnreadMessage;

core/components/molecules/chat/unreadMessage/__stories__/all.story.jsx

@@ -0,0 +1,36 @@
+import * as React from 'react';
+import { Chat } from '@/index';
+
+export const unreadMessage = () => {
+  return (
+    <Chat>
+      <Chat.UnreadMessage text="2 Unread Messages" />
+    </Chat>
+  );
+};
+
+const customCode = `() => {
+  return (
+    <Chat>
+      <Chat.UnreadMessage text="2 Unread Messages" />
+    </Chat>
+  )
+}`;
+
+export default {
+  title: 'Components/Chat/Separator/Unread Message',
+  component: Chat,
+  subcomponents: {
+    'Chat.DateSeparator': Chat.DateSeparator,
+    'Chat.NewMessage': Chat.NewMessage,
+    'Chat.UnreadMessage': Chat.UnreadMessage,
+  },
+  parameters: {
+    docs: {
+      docPage: {
+        title: 'Chat',
+        customCode,
+      },
+    },
+  },
+};

core/components/molecules/chat/unreadMessage/__tests__/UnreadMessage.test.tsx

@@ -0,0 +1,61 @@
+import * as React from 'react';
+import { render } from '@testing-library/react';
+import { testHelper, filterUndefined, valueHelper, testMessageHelper } from '@/utils/testHelper';
+import { Chat } from '@/index';
+import { ChatProps as Props } from '@/index.type';
+
+const text = '2 Unread Messages';
+
+const mapper = {
+  text: valueHelper(text, { required: true, iterate: false }),
+};
+
+describe('Chat Unread Message component snapshot', () => {
+  const testFunc = (props: Record<string, any>): void => {
+    const attr = filterUndefined(props) as Props;
+
+    it(testMessageHelper(attr), () => {
+      const { baseElement } = render(
+        <Chat>
+          <Chat.UnreadMessage text={text} {...attr} />
+        </Chat>
+      );
+      expect(baseElement).toMatchSnapshot();
+    });
+  };
+
+  testHelper(mapper, testFunc);
+});
+
+describe('Chat Unread Message component', () => {
+  it('renders children', () => {
+    const { getByTestId } = render(
+      <Chat>
+        <Chat.UnreadMessage text={text} />
+      </Chat>
+    );
+    expect(getByTestId('DesignSystem-Chat-UnreadMessage')).toBeInTheDocument();
+    expect(getByTestId('DesignSystem-Chat-UnreadMessage').textContent).toMatch(text);
+  });
+
+  it('overwrite Chat Unread Message class', () => {
+    const { getByTestId } = render(
+      <Chat>
+        <Chat.UnreadMessage text={text} className="custom-class" />
+      </Chat>
+    );
+    expect(getByTestId('DesignSystem-Chat-UnreadMessage')).toHaveClass('custom-class');
+  });
+
+  it('Chat Unread Message Component with overwrite data-test attribute', () => {
+    const testDataValue = 'DesignSystem-UnreadMessage-TestValue';
+    const { getByTestId } = render(
+      <Chat>
+        <Chat.UnreadMessage text={text} data-test={testDataValue} />
+      </Chat>
+    );
+
+    const dateElement = getByTestId(testDataValue);
+    expect(dateElement.getAttribute('data-test')).toBe(testDataValue);
+  });
+});

core/components/molecules/chat/unreadMessage/__tests__/__snapshots__/UnreadMessage.test.tsx.snap

@@ -0,0 +1,39 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Chat Unread Message component snapshot 
+  text: "2 Unread Messages"
+ 1`] = `
+<body>
+  <div>
+    <div
+      data-test="DesignSystem-Chat"
+    >
+      <div
+        class="d-flex align-items-center justify-content-center my-4"
+        data-test="DesignSystem-Chat-UnreadMessage"
+      >
+        <span
+          aria-label="2 Unread Messages"
+          class="Chat-UnreadMessage"
+          role="button"
+        >
+          <i
+            class="material-symbols material-symbols-rounded Icon Icon--white mr-3"
+            data-test="DesignSystem-Icon"
+            role="button"
+            style="font-size: 16px; width: 16px;"
+          >
+            arrow_Downward
+          </i>
+          <span
+            class="Text Text--white Text--strong Text--regular"
+            data-test="DesignSystem-Chat-UnreadMessage-Text"
+          >
+            2 Unread Messages
+          </span>
+        </span>
+      </div>
+    </div>
+  </div>
+</body>
+`;

core/components/molecules/chat/unreadMessage/index.tsx

@@ -0,0 +1,2 @@
+export { default } from './UnreadMessage';
+export * from './UnreadMessage';

css/src/components/chatSeparator.module.css

@@ -0,0 +1,9 @@
+.Chat-UnreadMessage {
+  border-radius: var(--spacing-2);
+  padding: var(--spacing-s) var(--spacing-l) var(--spacing-s) var(--spacing);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--primary);
+  cursor: pointer;
+}