add RadioButton

src/components/RadioButton/RadioButton.stories.tsx

@@ -0,0 +1,15 @@
+import { RadioButton } from './RadioButton';
+
+export default {
+ title: 'Components/Radio Button',
+ component: RadioButton,
+};
+
+export const _RadioButton = {
+ render: () => (
+ <>
+ <RadioButton radioId={'first'} />
+ <RadioButton radioId={'second'} />
+ </>
+ ),
+};

src/components/RadioButton/RadioButton.test.tsx

@@ -0,0 +1,12 @@
+import { render, screen } from '@testing-library/react';
+import { RadioButton } from './RadioButton';
+
+describe('Components | Buttons | Account Selector', () => {
+ test('it should render', () => {
+ render(<RadioButton radioId={'first'} />);
+
+ let radioButton = screen.getByTestId('radio-button');
+
+ expect(radioButton).toBeTruthy();
+ });
+});

src/components/RadioButton/RadioButton.tsx

@@ -0,0 +1,50 @@
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+import React from 'react';
+import { ComponentPropsWithoutRef } from 'react';
+
+export interface RadioButtonProps extends ComponentPropsWithoutRef<'div'> {
+ radioId: string;
+}
+
+export function RadioButton(props: RadioButtonProps) {
+ let { radioId, ...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
+ id={radioId}
+ name={radioId}
+ type="radio"
+ className={`before:content[''] peer relative h-5 w-5
+ cursor-pointer appearance-none rounded-full
+ border-2 border-gray-400
+ before:left-2/4 before:block before:h-12
+ before:w-12 before:-translate-y-2/4
+ before:-translate-x-2/4 before:rounded-full
+ before:bg-blue-gray-500 before:opacity-0
+ before:transition-opacity before:absolute before:top-2/4
+ checked:before:bg-green-500 transition-all
+ checked:border-green-500 hover:before:opacity-10`}
+ {...rest}
+ />
+ <div
+ className={`pointer-events-none absolute top-2/4 left-2/4
+ -translate-y-2/4 -translate-x-2/4 text-green-500
+ opacity-0 transition-opacity peer-checked:opacity-100`}
+ >
+ <svg
+ className="h-3.5 w-3.5"
+ viewBox="0 0 16 16"
+ fill="currentColor"
+ >
+ <circle data-name="ellipse" cx="8" cy="8" r="7"></circle>
+ </svg>
+ </div>
+ </label>
+ </div>
+ </div>
+ );
+}

src/components/RadioButton/index.ts

@@ -0,0 +1 @@
+export * from './RadioButton';

src/components/index.ts

@@ -11,3 +11,4 @@ export * from './Icons';
 export * from './Toggle';
 export * from './Balance';
 export * from './ThemeMode';
+export * from './RadioButton';