From 2490be5f508c1aa58c2253202779caf1bc59381e Mon Sep 17 00:00:00 2001
From: lilyanB <l.bastien@massa.net>
Date: Thu, 1 Jun 2023 15:12:35 +0200
Subject: [PATCH] add RadioButton

---
 .../RadioButton/RadioButton.stories.tsx       | 10 ++++++
 .../RadioButton/RadioButton.test.tsx          | 13 ++++++++
 src/components/RadioButton/RadioButton.tsx    | 32 +++++++++++++++++++
 src/components/RadioButton/index.ts           |  1 +
 src/components/index.ts                       |  1 +
 5 files changed, 57 insertions(+)
 create mode 100644 src/components/RadioButton/RadioButton.stories.tsx
 create mode 100644 src/components/RadioButton/RadioButton.test.tsx
 create mode 100644 src/components/RadioButton/RadioButton.tsx
 create mode 100644 src/components/RadioButton/index.ts

diff --git a/src/components/RadioButton/RadioButton.stories.tsx b/src/components/RadioButton/RadioButton.stories.tsx
new file mode 100644
index 00000000..cb0de2e9
--- /dev/null
+++ b/src/components/RadioButton/RadioButton.stories.tsx
@@ -0,0 +1,10 @@
+import { RadioButton } from './RadioButton';
+
+export default {
+  title: 'Components/Radio Button',
+  component: RadioButton,
+};
+
+export const _RadioButton = {
+  render: () => <RadioButton />,
+};
diff --git a/src/components/RadioButton/RadioButton.test.tsx b/src/components/RadioButton/RadioButton.test.tsx
new file mode 100644
index 00000000..f071597d
--- /dev/null
+++ b/src/components/RadioButton/RadioButton.test.tsx
@@ -0,0 +1,13 @@
+import '@testing-library/jest-dom';
+import { render, screen } from '@testing-library/react';
+import { RadioButton } from './RadioButton';
+
+describe('Components | Buttons | Account Selector', () => {
+  test('it should render', () => {
+    render(<RadioButton />);
+
+    let radioButton = screen.getByTestId('radio-button');
+
+    expect(radioButton).toBeInTheDocument();
+  });
+});
diff --git a/src/components/RadioButton/RadioButton.tsx b/src/components/RadioButton/RadioButton.tsx
new file mode 100644
index 00000000..2ba60100
--- /dev/null
+++ b/src/components/RadioButton/RadioButton.tsx
@@ -0,0 +1,32 @@
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+import React from 'react';
+import { ComponentPropsWithoutRef } from 'react';
+
+export type RadioButtonProps = ComponentPropsWithoutRef<'div'>;
+
+export function RadioButton(props: RadioButtonProps) {
+  let { ...rest } = props;
+
+  return (
+    <div data-testid="radio-button">
+      <div className="inline-flex items-center">
+        <label className="relative flex cursor-pointer items-center rounded-full p-3">
+          <input
+            type="radio"
+            className={`peer relative h-5 w-5
+                    cursor-pointer appearance-none rounded-full
+                    border-2 border-gray-400 checked:border-green-500`}
+            {...rest}
+          />
+          <div
+            className={`pointer-events-none absolute top-2/4 left-2/4
+                      -translate-y-2/4 -translate-x-2/4 bg-green-500
+                      w-2.5 h-2.5 rounded-full opacity-0
+                      transition-opacity peer-checked:opacity-100`}
+          ></div>
+        </label>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/RadioButton/index.ts b/src/components/RadioButton/index.ts
new file mode 100644
index 00000000..35533913
--- /dev/null
+++ b/src/components/RadioButton/index.ts
@@ -0,0 +1 @@
+export * from './RadioButton';
diff --git a/src/components/index.ts b/src/components/index.ts
index 2558e0f5..dd750a65 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -11,3 +11,4 @@ export * from './Icons';
 export * from './Toggle';
 export * from './Balance';
 export * from './ThemeMode';
+export * from './RadioButton';