From 848ee75c8328082c6f40588312309e74d5f5711f Mon Sep 17 00:00:00 2001 From: anuradha9712 Date: Wed, 29 May 2024 13:04:44 +0400 Subject: [PATCH] feat(sara): add new sara component --- .../Sara/__stories__/customSize.story.jsx | 18 + .../Sara/__stories__/index.story.jsx | 18 + .../Sara/__stories__/size.story.jsx | 41 ++ .../Sara/__stories__/state.story.jsx | 33 ++ .../Sara/__tests__/Sara.test.tsx | 33 ++ .../ai-components/Sara/assets/AI-Resting.json | 408 ++++++++++++++++++ core/ai-components/Sara/assets/AI-Sara.svg | 15 + core/ai-components/Sara/index.tsx | 65 +++ core/index.tsx | 1 + core/index.type.tsx | 1 + 10 files changed, 633 insertions(+) create mode 100644 core/ai-components/Sara/__stories__/customSize.story.jsx create mode 100644 core/ai-components/Sara/__stories__/index.story.jsx create mode 100644 core/ai-components/Sara/__stories__/size.story.jsx create mode 100644 core/ai-components/Sara/__stories__/state.story.jsx create mode 100644 core/ai-components/Sara/__tests__/Sara.test.tsx create mode 100644 core/ai-components/Sara/assets/AI-Resting.json create mode 100644 core/ai-components/Sara/assets/AI-Sara.svg create mode 100644 core/ai-components/Sara/index.tsx diff --git a/core/ai-components/Sara/__stories__/customSize.story.jsx b/core/ai-components/Sara/__stories__/customSize.story.jsx new file mode 100644 index 0000000000..c63d796443 --- /dev/null +++ b/core/ai-components/Sara/__stories__/customSize.story.jsx @@ -0,0 +1,18 @@ +import React from 'react'; +import { Sara } from '@/index'; + +export const CustomSize = () => { + return ; +}; + +export default { + title: 'Components/AI/Sara/Custom Size', + component: Sara, + parameters: { + docs: { + docPage: { + title: 'Sara', + }, + }, + }, +}; diff --git a/core/ai-components/Sara/__stories__/index.story.jsx b/core/ai-components/Sara/__stories__/index.story.jsx new file mode 100644 index 0000000000..faad45e20e --- /dev/null +++ b/core/ai-components/Sara/__stories__/index.story.jsx @@ -0,0 +1,18 @@ +import React from 'react'; +import { Sara } from '@/index'; + +export const All = () => { + return ; +}; + +export default { + title: 'Components/AI/Sara/All', + component: Sara, + parameters: { + docs: { + docPage: { + title: 'Sara', + }, + }, + }, +}; diff --git a/core/ai-components/Sara/__stories__/size.story.jsx b/core/ai-components/Sara/__stories__/size.story.jsx new file mode 100644 index 0000000000..8da15cb391 --- /dev/null +++ b/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 ( +
+
+
+ + + 32 + +
+
+ + + 48 + +
+
+ + + 64 + +
+
+
+ ); +}; + +export default { + title: 'Components/AI/Sara/Sizes', + component: Sara, + parameters: { + docs: { + docPage: { + title: 'Sara', + }, + }, + }, +}; diff --git a/core/ai-components/Sara/__stories__/state.story.jsx b/core/ai-components/Sara/__stories__/state.story.jsx new file mode 100644 index 0000000000..29e790deac --- /dev/null +++ b/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 ( +
+
+ + + Default + +
+
+ + + Resting + +
+
+ ); +}; + +export default { + title: 'Components/AI/Sara/States', + component: Sara, + parameters: { + docs: { + docPage: { + title: 'Sara', + }, + }, + }, +}; diff --git a/core/ai-components/Sara/__tests__/Sara.test.tsx b/core/ai-components/Sara/__tests__/Sara.test.tsx new file mode 100644 index 0000000000..a4a5a55789 --- /dev/null +++ b/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(); + const saraElement = getByTestId('DesignSystem-AI-Sara'); + expect(saraElement).toBeInTheDocument(); + }); + + it('calls onClick prop when Sara is clicked', () => { + const handleClick = jest.fn(); + const { getByTestId } = render(); + 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(); + const saraElement = getByTestId('sara-component'); + expect(saraElement.getAttribute('data-test')).toBe(testDataValue); + }); + + it('applies custom className', () => { + const customClass = 'custom-sara-class'; + const { getByTestId } = render(); + const saraElement = getByTestId('DesignSystem-AI-Sara'); + expect(saraElement).toHaveClass(customClass); + }); +}); diff --git a/core/ai-components/Sara/assets/AI-Resting.json b/core/ai-components/Sara/assets/AI-Resting.json new file mode 100644 index 0000000000..80b1f1753a --- /dev/null +++ b/core/ai-components/Sara/assets/AI-Resting.json @@ -0,0 +1,408 @@ +{ + "v": "4.8.0", + "meta": { + "g": "LottieFiles AE 3.5.4", + "a": "Anagh Sharma", + "k": "", + "d": "Progress indicator to be used for showing Sara when it is idle.", + "tc": "" + }, + "fr": 60, + "ip": 0, + "op": 360, + "w": 96, + "h": 96, + "nm": "S", + "assets": [ + { + "id": "comp_0", + "layers": [ + { + "ind": 1, + "ty": 4, + "nm": "S", + "sr": 1, + "ks": { + "o": { "a": 0, "k": 100 }, + "r": { + "a": 1, + "k": [ + { + "i": { "x": [0.833], "y": [0.833] }, + "o": { "x": [0.167], "y": [0.167] }, + "t": 0, + "s": [0] + }, + { "t": 360, "s": [360] } + ] + }, + "p": { "a": 0, "k": [48, 48, 0] }, + "a": { "a": 0, "k": [0, 0, 0] }, + "s": { "a": 0, "k": [100, 100, 100] } + }, + "ao": 0, + "ef": [ + { + "ty": 28, + "nm": "S", + "np": 8, + "en": 1, + "ef": [ + { "ty": 10, "nm": "T", "v": { "a": 0, "k": 2 } }, + { "ty": 7, "nm": "U", "v": { "a": 0, "k": 4 } }, + { "ty": 7, "nm": "I", "v": { "a": 0, "k": 0 } }, + { "ty": 7, "nm": "I", "v": { "a": 0, "k": 1 } }, + { "ty": 7, "nm": "C", "v": { "a": 0, "k": 1 } }, + { "ty": 7, "nm": "P", "v": { "a": 0, "k": 1 } } + ] + } + ], + "shapes": [ + { + "ty": "gr", + "it": [ + { + "ty": "rc", + "d": 1, + "s": { "a": 0, "k": [128, 128.055] }, + "p": { "a": 0, "k": [0, 0] }, + "r": { "a": 0, "k": 0 }, + "nm": "R" + }, + { + "ty": "st", + "c": { "a": 0, "k": [1, 1, 1, 1] }, + "o": { "a": 0, "k": 100 }, + "w": { "a": 0, "k": 0 }, + "lc": 1, + "lj": 1, + "ml": 4, + "nm": "S" + }, + { + "ty": "gf", + "o": { "a": 0, "k": 100 }, + "r": 1, + "g": { + "p": 3, + "k": { + "a": 0, + "k": [ + 0, 1, 0.761, 0.031, 0.5, 0.945, 0.435, 0.253, 1, 0.89, + 0.11, 0.475 + ] + } + }, + "s": { "a": 0, "k": [-19.515, -47.635] }, + "e": { "a": 0, "k": [13.662, 48.644] }, + "t": 1, + "nm": "G" + }, + { + "ty": "tr", + "p": { "a": 0, "k": [-0.019, -0.248] }, + "a": { "a": 0, "k": [0, 0] }, + "s": { "a": 0, "k": [100, 100] }, + "r": { "a": 0, "k": 0 }, + "o": { "a": 0, "k": 100 }, + "sk": { "a": 0, "k": 0 }, + "sa": { "a": 0, "k": 0 }, + "nm": "T" + } + ], + "nm": "R" + } + ], + "ip": 0, + "op": 480, + "st": 0 + }, + { + "ind": 2, + "ty": 4, + "nm": "F", + "sr": 1, + "ks": { + "o": { "a": 0, "k": 100 }, + "r": { "a": 0, "k": 0 }, + "p": { "a": 0, "k": [48, 47.996, 0] }, + "a": { "a": 0, "k": [0, 0, 0] }, + "s": { + "a": 1, + "k": [ + { + "i": { + "x": [0.833, 0.833, 0.833], + "y": [0.833, 0.833, 0.833] + }, + "o": { + "x": [0.167, 0.167, 0.167], + "y": [0.167, 0.167, 0.167] + }, + "t": 0, + "s": [90, 90, 100] + }, + { + "i": { + "x": [0.833, 0.833, 0.833], + "y": [0.833, 0.833, 0.833] + }, + "o": { + "x": [0.167, 0.167, 0.167], + "y": [0.167, 0.167, 0.167] + }, + "t": 25, + "s": [90, 90, 100] + }, + { + "i": { + "x": [0.833, 0.833, 0.833], + "y": [0.833, 0.833, 0.833] + }, + "o": { + "x": [0.167, 0.167, 0.167], + "y": [0.167, 0.167, 0.167] + }, + "t": 110, + "s": [100, 100, 100] + }, + { "t": 175, "s": [90, 90, 100] } + ] + } + }, + "ao": 0, + "shapes": [ + { + "ty": "gr", + "it": [ + { + "ind": 0, + "ty": "sh", + "ks": { + "a": 0, + "k": { + "i": [ + [0, 0], + [-6.612, 1.895], + [-7.835, 0], + [0, 0], + [-1.663, 6.671], + [-3.92, 6.787], + [0, 0], + [4.945, 4.776], + [3.915, 6.792], + [0, 0], + [6.608, -1.9], + [7.84, 0], + [0, 0], + [1.663, -6.676], + [3.92, -6.787], + [0, 0], + [-4.95, -4.776], + [-3.92, -6.787] + ], + "o": [ + [3.92, 6.787], + [1.663, 6.671], + [0, 0], + [7.84, 0], + [6.608, 1.895], + [0, 0], + [3.92, -6.787], + [4.945, -4.776], + [0, 0], + [-3.92, -6.787], + [-1.663, -6.676], + [0, 0], + [-7.835, 0], + [-6.612, -1.9], + [0, 0], + [-3.92, 6.792], + [-4.95, 4.776], + [0, 0] + ], + "v": [ + [-38.919, 28.571], + [-20.715, 35.89], + [-5.281, 47.996], + [5.28, 47.996], + [20.719, 35.89], + [38.917, 28.571], + [44.196, 19.425], + [41.436, 0], + [44.2, -19.425], + [38.917, -28.571], + [20.719, -35.886], + [5.28, -47.996], + [-5.281, -47.996], + [-20.715, -35.886], + [-38.919, -28.571], + [-44.197, -19.425], + [-41.432, 0], + [-44.197, 19.425] + ], + "c": true + } + }, + "nm": "P" + }, + { + "ty": "gf", + "o": { "a": 0, "k": 100 }, + "r": 1, + "g": { + "p": 3, + "k": { + "a": 0, + "k": [ + 0, 1, 0.761, 0.031, 0.5, 0.945, 0.435, 0.253, 1, 0.89, + 0.11, 0.475 + ] + } + }, + "s": { "a": 0, "k": [-19.515, -47.635] }, + "e": { "a": 0, "k": [13.662, 48.644] }, + "t": 1, + "nm": "G" + }, + { + "ty": "tr", + "p": { "a": 0, "k": [0, 0] }, + "a": { "a": 0, "k": [0, 0] }, + "s": { "a": 0, "k": [100, 100] }, + "r": { "a": 0, "k": 0 }, + "o": { "a": 0, "k": 100 }, + "sk": { "a": 0, "k": 0 }, + "sa": { "a": 0, "k": 0 }, + "nm": "T" + } + ], + "nm": "F" + } + ], + "ip": 0, + "op": 496, + "st": 0 + } + ] + } + ], + "layers": [ + { + "ind": 1, + "ty": 4, + "nm": "S", + "sr": 1, + "ks": { + "o": { "a": 0, "k": 100 }, + "r": { "a": 0, "k": 0 }, + "p": { "a": 0, "k": [48, 48, 0] }, + "a": { "a": 0, "k": [0, 0, 0] }, + "s": { + "a": 1, + "k": [ + { + "i": { "x": [0.833, 0.833, 0.833], "y": [0.833, 0.833, 0.833] }, + "o": { "x": [0.167, 0.167, 0.167], "y": [0.167, 0.167, 0.167] }, + "t": 0, + "s": [34, 34, 100] + }, + { + "i": { "x": [0.833, 0.833, 0.833], "y": [0.833, 0.833, 0.833] }, + "o": { "x": [0.167, 0.167, 0.167], "y": [0.167, 0.167, 0.167] }, + "t": 50, + "s": [41, 41, 100] + }, + { + "i": { "x": [0.833, 0.833, 0.833], "y": [0.833, 0.833, 0.833] }, + "o": { "x": [0.167, 0.167, 0.167], "y": [0.167, 0.167, 0.167] }, + "t": 110, + "s": [40, 40, 100] + }, + { "t": 150, "s": [34, 34, 100] } + ] + } + }, + "ao": 0, + "shapes": [ + { + "ty": "gr", + "it": [ + { + "ind": 0, + "ty": "sh", + "ks": { + "a": 0, + "k": { + "i": [ + [0, 41.421], + [41.421, 0], + [0, -41.421], + [-41.421, 0] + ], + "o": [ + [0, 41.421], + [41.421, 0], + [0, -41.421], + [-41.421, 0] + ], + "v": [ + [0, -75], + [-75, 0], + [0, 75], + [75, 0] + ], + "c": true + } + }, + "nm": "P" + }, + { + "ty": "fl", + "c": { "a": 0, "k": [1, 1, 1, 1] }, + "o": { "a": 0, "k": 100 }, + "r": 1, + "nm": "F" + }, + { + "ty": "tr", + "p": { "a": 0, "k": [0, 0] }, + "a": { "a": 0, "k": [0, 0] }, + "s": { "a": 0, "k": [100, 100] }, + "r": { "a": 0, "k": 0 }, + "o": { "a": 0, "k": 100 }, + "sk": { "a": 0, "k": 0 }, + "sa": { "a": 0, "k": 0 }, + "nm": "T" + } + ], + "nm": "S" + } + ], + "ip": 0, + "op": 396, + "st": 0 + }, + { + "ind": 3, + "ty": 0, + "nm": "C", + "refId": "comp_0", + "sr": 1, + "ks": { + "o": { "a": 0, "k": 100 }, + "r": { "a": 0, "k": 0 }, + "p": { "a": 0, "k": [48, 47.994, 0] }, + "a": { "a": 0, "k": [48, 48, 0] }, + "s": { "a": 0, "k": [90, 90, 100] } + }, + "ao": 0, + "w": 96, + "h": 96, + "ip": 0, + "op": 480, + "st": 0 + } + ], + "markers": [] +} diff --git a/core/ai-components/Sara/assets/AI-Sara.svg b/core/ai-components/Sara/assets/AI-Sara.svg new file mode 100644 index 0000000000..b64cea8b53 --- /dev/null +++ b/core/ai-components/Sara/assets/AI-Sara.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/core/ai-components/Sara/index.tsx b/core/ai-components/Sara/index.tsx new file mode 100644 index 0000000000..613091effb --- /dev/null +++ b/core/ai-components/Sara/index.tsx @@ -0,0 +1,65 @@ +import * as React from 'react'; +import { TSaraStates, TBaseHtmlProps } from '../common.type'; +import { Player } from '@lottiefiles/react-lottie-player'; +import AIResting from './assets/AI-Resting.json'; +import AILogo from './assets/AI-Sara.svg'; +import classNames from 'classnames'; + +export interface SaraProps extends TBaseHtmlProps { + /** + * Defines size of `Sara` + */ + size?: number; + /** + * Defines state of `Sara` + */ + state?: TSaraStates; + /** + * Specify alt text to the `Sara` for `default` state + */ + alt?: string; + /** + * Handler to be called when `Sara` is clicked + */ + onClick?: (event: React.MouseEvent) => void; + /** + * Adds custom class + */ + className?: string; + /** + * Stores custom testing data private to the component + */ + 'data-test'?: string; +} + +export const Sara = (props: SaraProps) => { + const { size, state, alt, className, ...rest } = props; + + const SaraClassNames = classNames( + { + 'align-bottom': state === 'default', + }, + className + ); + + if (state === 'default') { + return ( +
+ {alt} +
+ ); + } + + return ( +
+ +
+ ); +}; + +Sara.defaultProps = { + size: 32, + state: 'default', +}; + +export default Sara; diff --git a/core/index.tsx b/core/index.tsx index 6618d199cb..cc4564f07a 100644 --- a/core/index.tsx +++ b/core/index.tsx @@ -96,5 +96,6 @@ export { Menu } from './components/organisms/menu'; export { AIButton } from './ai-components/AIButton'; export { SaraSparkle } from './ai-components/SaraSparkle'; +export { Sara } from './ai-components/Sara'; export { version } from '../package.json'; diff --git a/core/index.type.tsx b/core/index.type.tsx index 44886dc4e0..6b24c43993 100644 --- a/core/index.type.tsx +++ b/core/index.type.tsx @@ -95,3 +95,4 @@ export { MenuProps } from './components/organisms/menu'; export { SaraSparkleProps } from './ai-components/SaraSparkle'; export { AIButtonProps } from './ai-components/AIButton'; +export { SaraProps } from './ai-components/Sara';