Merge pull request #2205 from anuradha9712/feat-sara-component

feat(sara): add new sara component

core/ai-components/Sara/__stories__/customSize.story.jsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { Sara } from '@/index';
+
+export const CustomSize = () => {
+  return <Sara size={100} />;
+};
+
+export default {
+  title: 'Components/AI/Sara/Custom Size',
+  component: Sara,
+  parameters: {
+    docs: {
+      docPage: {
+        title: 'Sara',
+      },
+    },
+  },
+};

core/ai-components/Sara/__stories__/index.story.jsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { Sara } from '@/index';
+
+export const All = () => {
+  return <Sara />;
+};
+
+export default {
+  title: 'Components/AI/Sara/All',
+  component: Sara,
+  parameters: {
+    docs: {
+      docPage: {
+        title: 'Sara',
+      },
+    },
+  },
+};

core/ai-components/Sara/__stories__/size.story.jsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import { Sara, Text } from '@/index';
+
+export const Sizes = () => {
+  return (
+    <div>
+      <div className="d-flex justify-content-between align-items-center w-75">
+        <div className="d-flex flex-column align-items-center text-align-center w-100">
+          <Sara />
+          <Text appearance="subtle" className="mt-6">
+            32
+          </Text>
+        </div>
+        <div className="d-flex flex-column align-items-center text-align-center w-100">
+          <Sara size={48} />
+          <Text appearance="subtle" className="mt-6">
+            48
+          </Text>
+        </div>
+        <div className="d-flex flex-column align-items-center text-align-center w-100">
+          <Sara size={64} />
+          <Text appearance="subtle" className="mt-6">
+            64
+          </Text>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default {
+  title: 'Components/AI/Sara/Sizes',
+  component: Sara,
+  parameters: {
+    docs: {
+      docPage: {
+        title: 'Sara',
+      },
+    },
+  },
+};

core/ai-components/Sara/__stories__/state.story.jsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { Sara, Text } from '@/index';
+
+export const States = () => {
+  return (
+    <div className="d-flex w-75">
+      <div className="d-flex flex-column align-items-center text-align-center w-100">
+        <Sara />
+        <Text appearance="subtle" className="mt-6">
+          Default
+        </Text>
+      </div>
+      <div className="d-flex flex-column align-items-center text-align-center w-100">
+        <Sara state="resting" />
+        <Text appearance="subtle" className="mt-6">
+          Resting
+        </Text>
+      </div>
+    </div>
+  );
+};
+
+export default {
+  title: 'Components/AI/Sara/States',
+  component: Sara,
+  parameters: {
+    docs: {
+      docPage: {
+        title: 'Sara',
+      },
+    },
+  },
+};

core/ai-components/Sara/__tests__/Sara.test.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+import { Sara } from '../index';
+
+describe('Sara Component', () => {
+  it('renders with default props', () => {
+    const { getByTestId } = render(<Sara />);
+    const saraElement = getByTestId('DesignSystem-AI-Sara');
+    expect(saraElement).toBeInTheDocument();
+  });
+
+  it('calls onClick prop when Sara is clicked', () => {
+    const handleClick = jest.fn();
+    const { getByTestId } = render(<Sara onClick={handleClick} />);
+    const saraElement = getByTestId('DesignSystem-AI-Sara');
+    fireEvent.click(saraElement);
+    expect(handleClick).toHaveBeenCalledTimes(1);
+  });
+
+  it('applies `data-test` attribute properly', () => {
+    const testDataValue = 'sara-component';
+    const { getByTestId } = render(<Sara data-test={testDataValue} />);
+    const saraElement = getByTestId('sara-component');
+    expect(saraElement.getAttribute('data-test')).toBe(testDataValue);
+  });
+
+  it('applies custom className', () => {
+    const customClass = 'custom-sara-class';
+    const { getByTestId } = render(<Sara className={customClass} state="resting" />);
+    const saraElement = getByTestId('DesignSystem-AI-Sara');
+    expect(saraElement).toHaveClass(customClass);
+  });
+});