feat: APP-2988 - Implement StatePingAnimation core component (#126)

.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 = {

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

src/core/components/states/index.ts

@@ -1 +1,2 @@
 export * from './emptyState';
+export * from './statePingAnimation';

src/core/components/states/statePingAnimation/index.ts

@@ -0,0 +1,5 @@
+export {
+    StatePingAnimation,
+    type IStatePingAnimationProps,
+    type StatePingAnimationVariant,
+} from './statePingAnimation';

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();
+    });
+});

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>
+    );
+};

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;