feat(project): add radio component

src/components/Radio/Radio.module.scss

@@ -0,0 +1,62 @@
+@use '../../styles/variables';
+@use '../../styles/theme';
+
+.container {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+}
+
+.header {
+  flex: 1 1 100%;
+  margin-bottom: 4px;
+  font-family: theme.$body-font-family;
+  font-weight: 700;
+  text-align: left;
+}
+
+.radio {
+  display: flex;
+  justify-content: center;
+
+  > label {
+    margin: variables.$base-spacing / 2 variables.$base-spacing variables.$base-spacing / 2 variables.$base-spacing / 2;
+    font-family: theme.$body-font-family;
+    font-size: 14px;
+    cursor: pointer;
+  }
+
+  > input {
+    position: relative;
+    width: 20px;
+    height: 20px;
+    border-radius: 15px;
+    transition: all 0.1s;
+    appearance: none;
+
+    &:not(:checked) {
+      border: 2px solid theme.$input-resting-border-color;
+      &:hover {
+        border-color: theme.$input-hover-border-color;
+      }
+    }
+
+    &:checked {
+      width: 20px;
+      height: 20px;
+      border: 2px solid var(--primary-color);
+      &::after {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        width: 10px;
+        height: 10px;
+        background-color: var(--primary-color);
+        border: 2px solid transparent;
+        border-radius: 15px;
+        transform: translateX(-50%) translateY(-50%);
+        content: '';
+      }
+    }
+  }
+}

src/components/Radio/Radio.test.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+
+import Radio from './Radio';
+
+describe.skip('<Radio>', () => {
+  test('renders and matches snapshot', () => {
+    const { container } = render(<Radio />);
+
+    expect(container).toMatchSnapshot();
+  });
+});

src/components/Radio/Radio.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+
+import useOpaqueId from '../../hooks/useOpaqueId';
+
+import styles from './Radio.module.scss';
+
+type Props = {
+  name: string;
+  values?: string[];
+  onChange: React.ChangeEventHandler<HTMLInputElement>;
+  header?: string;
+};
+
+const Radio: React.FC<Props> = ({ name, onChange, header, values }: Props) => {
+  const id = useOpaqueId('radio', name);
+
+  return (
+    <div className={styles.container}>
+      {header && <span className={styles.header}>{header}</span>}
+      {values &&
+        values.map((value, index) => (
+          <div className={styles.radio} key={index}>
+            <input value={value} name={name} type="radio" id={id + value} onChange={onChange} />
+            <label htmlFor={id + value}>{value}</label>
+          </div>
+        ))}
+    </div>
+  );
+};
+
+export default Radio;