Merge pull request #2511 from anuradha9712/feat-chat-new-message-comp…

…onent

feat(newMessage): add chat new message separator component

core/components/molecules/chat/Chat.tsx

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

core/components/molecules/chat/newMessage/NewMessage.tsx

@@ -0,0 +1,36 @@
+import * as React from 'react';
+import { Text } from '@/index';
+import styles from '@css/components/chatSeparator.module.css';
+import { BaseProps } from '@/utils/types';
+import classNames from 'classnames';
+
+export interface NewMessageProps extends BaseProps {
+  /**
+   * Text to be rendered inside `NewMessage`
+   */
+  text: string;
+}
+
+const NewMessage: React.FC<NewMessageProps> = (props) => {
+  const { text, className, ...rest } = props;
+  const classes = classNames('py-6 d-flex justify-content-center align-items-center cursor-pointer', className);
+
+  return (
+    <div
+      data-test="DesignSystem-Chat-NewMessage"
+      className={classes}
+      role="button"
+      aria-label={text}
+      aria-live="polite"
+      {...rest}
+    >
+      <span className={styles['NewMessage-Divider--left']} />
+      <Text appearance="link" weight="strong" size="small">
+        {text}
+      </Text>
+      <span className={styles['NewMessage-Divider--right']} />
+    </div>
+  );
+};
+
+export default NewMessage;

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

@@ -0,0 +1,36 @@
+import * as React from 'react';
+import { Chat } from '@/index';
+
+export const newMessage = () => {
+  return (
+    <Chat>
+      <Chat.NewMessage text="2 New Messages" />
+    </Chat>
+  );
+};
+
+const customCode = `() => {
+  return (
+    <Chat>
+      <Chat.NewMessage text="2 New Messages" />
+    </Chat>
+  )
+}`;
+
+export default {
+  title: 'Components/Chat/Separator/New 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/newMessage/__tests__/NewMessage.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 New Messages';
+
+const mapper = {
+  text: valueHelper(text, { required: true, iterate: false }),
+};
+
+describe('Chat New Message component snapshot', () => {
+  const testFunc = (props: Record<string, any>): void => {
+    const attr = filterUndefined(props) as Props;
+
+    it(testMessageHelper(attr), () => {
+      const { baseElement } = render(
+        <Chat>
+          <Chat.NewMessage text={text} {...attr} />
+        </Chat>
+      );
+      expect(baseElement).toMatchSnapshot();
+    });
+  };
+
+  testHelper(mapper, testFunc);
+});
+
+describe('Chat New Message component', () => {
+  it('renders children', () => {
+    const { getByTestId } = render(
+      <Chat>
+        <Chat.NewMessage text={text} />
+      </Chat>
+    );
+    expect(getByTestId('DesignSystem-Chat-NewMessage')).toBeInTheDocument();
+    expect(getByTestId('DesignSystem-Chat-NewMessage').textContent).toMatch(text);
+  });
+
+  it('overwrite Chat New Message class', () => {
+    const { getByTestId } = render(
+      <Chat>
+        <Chat.NewMessage text={text} className="custom-class" />
+      </Chat>
+    );
+    expect(getByTestId('DesignSystem-Chat-NewMessage')).toHaveClass('custom-class');
+  });
+
+  it('Chat New Message Component with overwrite data-test attribute', () => {
+    const testDataValue = 'DesignSystem-NewMessage-TestValue';
+    const { getByTestId } = render(
+      <Chat>
+        <Chat.NewMessage text={text} data-test={testDataValue} />
+      </Chat>
+    );
+
+    const messageElement = getByTestId(testDataValue);
+    expect(messageElement.getAttribute('data-test')).toBe(testDataValue);
+  });
+});

core/components/molecules/chat/newMessage/__tests__/__snapshots__/NewMessage.test.tsx.snap

@@ -0,0 +1,34 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Chat New Message component snapshot 
+  text: "2 New Messages"
+ 1`] = `
+<body>
+  <div>
+    <div
+      data-test="DesignSystem-Chat"
+    >
+      <div
+        aria-label="2 New Messages"
+        aria-live="polite"
+        class="py-6 d-flex justify-content-center align-items-center cursor-pointer"
+        data-test="DesignSystem-Chat-NewMessage"
+        role="button"
+      >
+        <span
+          class="NewMessage-Divider--left"
+        />
+        <span
+          class="Text Text--link Text--strong Text--small"
+          data-test="DesignSystem-Text"
+        >
+          2 New Messages
+        </span>
+        <span
+          class="NewMessage-Divider--right"
+        />
+      </div>
+    </div>
+  </div>
+</body>
+`;

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

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

css/src/components/chatSeparator.module.css

@@ -7,3 +7,17 @@
   background-color: var(--primary);
   cursor: pointer;
 }
+
+.NewMessage-Divider--left {
+  flex: 1;
+  height: var(--spacing-xs);
+  background-color: var(--primary);
+  margin-right: var(--spacing-2);
+}
+
+.NewMessage-Divider--right {
+  flex: 1;
+  height: var(--spacing-xs);
+  background-color: var(--primary);
+  margin-left: var(--spacing-2);
+}