feat(components): add a generic Flip component

The flipping animation is used at several places so it makes sense to
use a single component to handle the animation. It will avoid styles
duplication.

1 files changed, 9 insertions, 6 deletions

diff --git a/src/components/molecules/forms/flipping-label/flipping-label.test.tsx b/src/components/molecules/forms/flipping-label/flipping-label.test.tsx
index 71ea2ba..d59c5f3 100644
--- a/src/components/molecules/forms/flipping-label/flipping-label.test.tsx
+++ b/src/components/molecules/forms/flipping-label/flipping-label.test.tsx
@@ -1,15 +1,18 @@
 import { describe, expect, it } from '@jest/globals';
-import { render, screen } from '../../../../../tests/utils';
+import { render, screen as rtlScreen } from '@testing-library/react';
+import { Icon } from '../../../atoms';
 import { FlippingLabel } from './flipping-label';
 
 describe('FlippingLabel', () => {
   it('renders a label', () => {
-    const ariaLabel = 'vero quo inventore';
+    const label = 'vero quo inventore';
     render(
-      <FlippingLabel aria-label={ariaLabel} isActive={false}>
-        <>Test</>
-      </FlippingLabel>
+      <FlippingLabel
+        icon={<Icon shape="arrow" />}
+        isActive={false}
+        label={label}
+      />
     );
-    expect(screen.getByLabelText(ariaLabel)).toBeInTheDocument();
+    expect(rtlScreen.getByText(label)).toBeInTheDocument();
   });
 });