Add Whirl component and tests

Author: mhnpd

src/experimental/whirl.tsx

@@ -54,6 +54,7 @@ export const Whirl: FunctionComponent<WhirlProps> = ({
       viewBox="0 0 100 100"
       className={wrapperClass}
       preserveAspectRatio="xMidYMid"
+      data-testid="whirl"
     >
       <g transform="translate(50,50)">
         <g transform="scale(0.8)">

test/experimantal/whirl.spec.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { Whirl } from '../../src/beta'
+
+describe('Whirl', () => {
+  test('renders Whirl component', () => {
+    render(<Whirl />);
+    const svgElement = screen.getByTestId('whirl');
+    expect(svgElement).toBeInTheDocument();
+  });
+
+  test('applies wrapperClass correctly', () => {
+    render(<Whirl wrapperClass="test-class" />);
+    const svgElement = screen.getByTestId('whirl');
+    expect(svgElement).toHaveClass('test-class');
+  });
+
+  test('applies wrapperStyle correctly', () => {
+    render(<Whirl wrapperStyle={{ backgroundColor: 'red' }} />);
+    const svgElement = screen.getByTestId('whirl');
+    expect(svgElement).toHaveStyle('background-color: red');
+  });
+
+  test('does not render when visible is false', () => {
+    render(<Whirl visible={false} />);
+    const svg = screen.queryByTestId('whirl');
+    expect(svg).not.toBeInTheDocument();
+  });
+});
+