Merge pull request #2509 from anuradha9712/feat-chat-date-separator-c…

…omponent

feat(dateSeparator): add chat date separator component

core/components/molecules/chat/Chat.tsx

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import DateSeparator from './dateSeparator';
+import { BaseProps } from '@/utils/types';
+
+export interface ChatProps extends BaseProps {
+  /**
+   * React Node to be rendered inside `Chat`
+   */
+  children: React.ReactNode;
+}
+
+export const Chat = (props: ChatProps) => {
+  const { children, ...rest } = props;
+  return (
+    <div data-test="DesignSystem-Chat" {...rest}>
+      {children}
+    </div>
+  );
+};
+
+Chat.DateSeparator = DateSeparator;
+
+export default Chat;

core/components/molecules/chat/dateSeparator/DateSeparator.tsx

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import { Text } from '@/index';
+import { BaseProps } from '@/utils/types';
+import classNames from 'classnames';
+
+export interface DateSeparatorProps extends BaseProps {
+  /**
+   * Specifies the date to be displayed
+   */
+  date: React.ReactText;
+}
+
+const DateSeparator: React.FC<DateSeparatorProps> = (props) => {
+  const { date, className, ...rest } = props;
+  return (
+    <Text
+      appearance="subtle"
+      className={classNames('pt-7 pb-6 d-flex justify-content-center', className)}
+      role="separator"
+      aria-label={String(date)}
+      data-test="DesignSystem-Chat-DateSeparator"
+      {...rest}
+    >
+      {date}
+    </Text>
+  );
+};
+
+export default DateSeparator;

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

@@ -0,0 +1,36 @@
+import * as React from 'react';
+import { Chat } from '@/index';
+
+export const dateSeparator = () => {
+  return (
+    <Chat>
+      <Chat.DateSeparator date="May 21, 2024" />
+    </Chat>
+  );
+};
+
+const customCode = `() => {
+  return (
+    <Chat>
+      <Chat.DateSeparator date="May 21, 2024" />
+    </Chat>
+  )
+}`;
+
+export default {
+  title: 'Components/Chat/Separator/Date Separator',
+  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/dateSeparator/__tests__/DateSeparator.test.tsx

@@ -0,0 +1,63 @@
+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 date = '01 Jan 2025';
+
+const mapper = {
+  date: valueHelper(date, { required: true, iterate: false }),
+};
+
+describe('Chat Date Separator component snapshot', () => {
+  const testFunc = (props: Record<string, any>): void => {
+    const attr = filterUndefined(props) as Props;
+
+    it(testMessageHelper(attr), () => {
+      const { baseElement } = render(
+        <Chat>
+          <Chat.DateSeparator date={date} {...attr} />
+        </Chat>
+      );
+      expect(baseElement).toMatchSnapshot();
+    });
+  };
+
+  testHelper(mapper, testFunc);
+});
+
+describe('Chat Date Separator component', () => {
+  it('renders children', () => {
+    const { getByTestId } = render(
+      <Chat>
+        <Chat.DateSeparator date={date} />
+      </Chat>
+    );
+    expect(getByTestId('DesignSystem-Chat-DateSeparator')).toBeInTheDocument();
+    expect(getByTestId('DesignSystem-Chat-DateSeparator').textContent).toMatch(date);
+  });
+
+  describe('Chat Date Separator Component with overwrite class', () => {
+    it('overwrite Chat Date Separator class', () => {
+      const { getByTestId } = render(
+        <Chat>
+          <Chat.DateSeparator date={date} className="custom-class" />
+        </Chat>
+      );
+      expect(getByTestId('DesignSystem-Chat-DateSeparator')).toHaveClass('custom-class');
+    });
+  });
+
+  it('Chat Date Separator Component with overwrite data-test attribute', () => {
+    const testDataValue = 'DesignSystem-DateSeparator-TestValue';
+    const { getByTestId } = render(
+      <Chat>
+        <Chat.DateSeparator date={date} data-test={testDataValue} />
+      </Chat>
+    );
+
+    const dateElement = getByTestId(testDataValue);
+    expect(dateElement.getAttribute('data-test')).toBe(testDataValue);
+  });
+});

core/components/molecules/chat/dateSeparator/__tests__/__snapshots__/DateSeparator.test.tsx.snap

@@ -0,0 +1,22 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Chat Date Separator component snapshot 
+  date: "01 Jan 2025"
+ 1`] = `
+<body>
+  <div>
+    <div
+      data-test="DesignSystem-Chat"
+    >
+      <span
+        aria-label="01 Jan 2025"
+        class="Text Text--subtle Text--regular pt-7 pb-6 d-flex justify-content-center"
+        data-test="DesignSystem-Chat-DateSeparator"
+        role="separator"
+      >
+        01 Jan 2025
+      </span>
+    </div>
+  </div>
+</body>
+`;

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

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

core/components/molecules/chat/index.tsx

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

core/index.tsx

@@ -94,6 +94,7 @@ export { Combobox } from './components/organisms/combobox';
 export { Select } from './components/organisms/select';
 export { Menu } from './components/organisms/menu';
 export { KeyValuePair } from './components/molecules/keyValuePair';
+export { Chat } from './components/molecules/chat';
 
 export { AIButton } from './ai-components/AIButton';
 export { SaraSparkle } from './ai-components/SaraSparkle';

core/index.type.tsx

@@ -93,6 +93,7 @@ export { ComboboxProps } from './components/organisms/combobox';
 export { SelectProps } from './components/organisms/select';
 export { MenuProps } from './components/organisms/menu';
 export { KeyValuePairProps } from './components/molecules/keyValuePair';
+export { ChatProps } from './components/molecules/chat';
 
 export { SaraSparkleProps } from './ai-components/SaraSparkle';
 export { AIButtonProps } from './ai-components/AIButton';