From 48deac0f62b770f5f49d842c21f9957bfd05806c Mon Sep 17 00:00:00 2001
From: Fabrice Francois <fabricevladimir@gmail.com>
Date: Wed, 13 Mar 2024 11:11:32 -0400
Subject: [PATCH] feat: APP-2988 - Implement StatePingAnimation core component
 (#126)

---
 .storybook/preview.tsx                        |  2 +-
 CHANGELOG.md                                  |  4 ++
 src/core/components/states/index.ts           |  1 +
 .../states/statePingAnimation/index.ts        |  5 +++
 .../statePingAnimation.test.tsx               | 16 ++++++++
 .../statePingAnimation/statePingAnimation.tsx | 41 +++++++++++++++++++
 .../statePingAnimations.stories.tsx           | 27 ++++++++++++
 7 files changed, 95 insertions(+), 1 deletion(-)
 create mode 100644 src/core/components/states/statePingAnimation/index.ts
 create mode 100644 src/core/components/states/statePingAnimation/statePingAnimation.test.tsx
 create mode 100644 src/core/components/states/statePingAnimation/statePingAnimation.tsx
 create mode 100644 src/core/components/states/statePingAnimation/statePingAnimations.stories.tsx

diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
index 45c1c56e7..ef9faff93 100644
--- a/.storybook/preview.tsx
+++ b/.storybook/preview.tsx
@@ -1,6 +1,6 @@
 import type { Preview } from '@storybook/react';
 import '../index.css';
-import { OdsModulesProvider } from '../src';
+import { OdsModulesProvider } from '../src/modules';
 import './style.css';
 
 const preview: Preview = {
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 359aa8277..8cbe74924 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,6 +7,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
+### Added
+
+-   Implement `StatePingAnimation` core component
+
 ## [1.0.20] - 2024-03-13
 
 ### Fixed
diff --git a/src/core/components/states/index.ts b/src/core/components/states/index.ts
index 9f06565e2..38ae11784 100644
--- a/src/core/components/states/index.ts
+++ b/src/core/components/states/index.ts
@@ -1 +1,2 @@
 export * from './emptyState';
+export * from './statePingAnimation';
diff --git a/src/core/components/states/statePingAnimation/index.ts b/src/core/components/states/statePingAnimation/index.ts
new file mode 100644
index 000000000..e8d93ba50
--- /dev/null
+++ b/src/core/components/states/statePingAnimation/index.ts
@@ -0,0 +1,5 @@
+export {
+    StatePingAnimation,
+    type IStatePingAnimationProps,
+    type StatePingAnimationVariant,
+} from './statePingAnimation';
diff --git a/src/core/components/states/statePingAnimation/statePingAnimation.test.tsx b/src/core/components/states/statePingAnimation/statePingAnimation.test.tsx
new file mode 100644
index 000000000..fe16fd538
--- /dev/null
+++ b/src/core/components/states/statePingAnimation/statePingAnimation.test.tsx
@@ -0,0 +1,16 @@
+import { render, screen } from '@testing-library/react';
+import { StatePingAnimation, type IStatePingAnimationProps } from './statePingAnimation';
+
+describe('<StatePingAnimation/> component', () => {
+    const createTestComponent = (props?: Partial<IStatePingAnimationProps>) => {
+        const completeProps = { ...props };
+
+        return <StatePingAnimation {...completeProps} />;
+    };
+
+    it('renders without crashing', () => {
+        render(createTestComponent());
+
+        expect(screen.getByTestId('statePingAnimation')).toBeInTheDocument();
+    });
+});
diff --git a/src/core/components/states/statePingAnimation/statePingAnimation.tsx b/src/core/components/states/statePingAnimation/statePingAnimation.tsx
new file mode 100644
index 000000000..74290b728
--- /dev/null
+++ b/src/core/components/states/statePingAnimation/statePingAnimation.tsx
@@ -0,0 +1,41 @@
+import classNames from 'classnames';
+import type React from 'react';
+import { type ComponentPropsWithoutRef } from 'react';
+
+export type StatePingAnimationVariant = 'primary' | 'info' | 'success' | 'warning' | 'critical';
+
+export interface IStatePingAnimationProps extends ComponentPropsWithoutRef<'span'> {
+    /**
+     * Variant of the ping animation
+     * @default primary
+     */
+    variant?: StatePingAnimationVariant;
+}
+
+const variantToBgClassName: Record<StatePingAnimationVariant, string> = {
+    info: 'bg-info-500',
+    primary: 'bg-primary-500',
+    success: 'bg-success-500',
+    warning: 'bg-warning-500',
+    critical: 'bg-critical-500',
+};
+
+export const StatePingAnimation: React.FC<IStatePingAnimationProps> = (props) => {
+    const { className, variant = 'primary', ...otherProps } = props;
+
+    return (
+        <span
+            data-testid="statePingAnimation"
+            className={classNames('relative flex size-3', className)}
+            {...otherProps}
+        >
+            <span
+                className={classNames(
+                    'absolute inline-flex size-full animate-ping rounded-full opacity-75',
+                    variantToBgClassName[variant],
+                )}
+            />
+            <span className={classNames('relative inline-flex size-3 rounded-full', variantToBgClassName[variant])} />
+        </span>
+    );
+};
diff --git a/src/core/components/states/statePingAnimation/statePingAnimations.stories.tsx b/src/core/components/states/statePingAnimation/statePingAnimations.stories.tsx
new file mode 100644
index 000000000..86f3189f1
--- /dev/null
+++ b/src/core/components/states/statePingAnimation/statePingAnimations.stories.tsx
@@ -0,0 +1,27 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { StatePingAnimation } from './statePingAnimation';
+
+const meta: Meta<typeof StatePingAnimation> = {
+    title: 'Core/Components/States/StatePingAnimation',
+    component: StatePingAnimation,
+    tags: ['autodocs'],
+    parameters: {
+        design: {
+            type: 'figma',
+            url: 'https://www.figma.com/file/P0GeJKqILL7UXvaqu5Jj7V/v1.1.0?type=design&node-id=15073-29243&mode=design&t=FQrFXBU8bQ7ug6dM-4',
+        },
+    },
+};
+
+type Story = StoryObj<typeof StatePingAnimation>;
+
+/**
+ * Default usage of the `StatePingAnimation`
+ */
+export const Default: Story = {
+    args: {
+        variant: 'info',
+    },
+};
+
+export default meta;