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, 72 insertions, 0 deletions

diff --git a/src/components/atoms/flip/flip.test.tsx b/src/components/atoms/flip/flip.test.tsx
new file mode 100644
index 0000000..0fd986e
--- /dev/null
+++ b/src/components/atoms/flip/flip.test.tsx
@@ -0,0 +1,72 @@
+import { describe, expect, it } from '@jest/globals';
+import { render, screen as rtlScreen } from '@testing-library/react';
+import { Flip } from './flip';
+import { FlipSide } from './flip-side';
+
+describe('Flip', () => {
+  it('renders the back and front sides', () => {
+    const front = 'laboriosam sint rem';
+    const back = 'tempore autem ea';
+
+    render(
+      <Flip>
+        <FlipSide>{front}</FlipSide>
+        <FlipSide isBack>{back}</FlipSide>
+      </Flip>
+    );
+
+    expect(rtlScreen.getByText(front)).toBeInTheDocument();
+    expect(rtlScreen.getByText(back)).toBeInTheDocument();
+  });
+
+  it('can be animated horizontally', () => {
+    const front = 'repudiandae maiores sunt';
+    const back = 'facilis nostrum voluptatibus';
+
+    render(
+      <Flip direction="horizontal">
+        <FlipSide>{front}</FlipSide>
+        <FlipSide isBack>{back}</FlipSide>
+      </Flip>
+    );
+
+    expect(rtlScreen.getByText(front).parentElement).toHaveClass(
+      'wrapper--horizontal'
+    );
+  });
+
+  it('can be animated vertically', () => {
+    const front = 'quis et id';
+    const back = 'quis est itaque';
+
+    render(
+      <Flip direction="vertical">
+        <FlipSide>{front}</FlipSide>
+        <FlipSide isBack>{back}</FlipSide>
+      </Flip>
+    );
+
+    expect(rtlScreen.getByText(front).parentElement).toHaveClass(
+      'wrapper--vertical'
+    );
+  });
+
+  it('can be animated manually', () => {
+    const front = 'quis et id';
+    const back = 'quis est itaque';
+
+    render(
+      <Flip showBack>
+        <FlipSide>{front}</FlipSide>
+        <FlipSide isBack>{back}</FlipSide>
+      </Flip>
+    );
+
+    expect(rtlScreen.getByText(front).parentElement).toHaveClass(
+      'wrapper--manual'
+    );
+    expect(rtlScreen.getByText(front).parentElement).toHaveClass(
+      'wrapper--is-back'
+    );
+  });
+});