refactor(components): rewrite form components

3 files changed, 47 insertions, 0 deletions

diff --git a/src/components/atoms/forms/fields/checkbox/checkbox.test.tsx b/src/components/atoms/forms/fields/checkbox/checkbox.test.tsx
new file mode 100644
index 0000000..658799a
--- /dev/null
+++ b/src/components/atoms/forms/fields/checkbox/checkbox.test.tsx
@@ -0,0 +1,33 @@
+import { render, screen } from '../../../../../../tests/utils';
+import { Checkbox } from './checkbox';
+
+const doNothing = () => {
+  // Do nothing
+};
+
+describe('Checkbox', () => {
+  it('renders an unchecked checkbox', () => {
+    render(
+      <Checkbox
+        id="checkbox"
+        name="checkbox"
+        onChange={doNothing}
+        value="checkbox"
+      />
+    );
+    expect(screen.getByRole('checkbox')).not.toBeChecked();
+  });
+
+  it('renders a checked checkbox', () => {
+    render(
+      <Checkbox
+        id="checkbox"
+        isChecked
+        name="checkbox"
+        onChange={doNothing}
+        value="checkbox"
+      />
+    );
+    expect(screen.getByRole('checkbox')).toBeChecked();
+  });
+});
diff --git a/src/components/atoms/forms/fields/checkbox/checkbox.tsx b/src/components/atoms/forms/fields/checkbox/checkbox.tsx
new file mode 100644
index 0000000..2ac3809
--- /dev/null
+++ b/src/components/atoms/forms/fields/checkbox/checkbox.tsx
@@ -0,0 +1,13 @@
+import { FC } from 'react';
+import { BooleanField, BooleanFieldProps } from '../boolean-field';
+
+export type CheckboxProps = Omit<BooleanFieldProps, 'type'>;
+
+/**
+ * Checkbox component
+ *
+ * Render a checkbox input type.
+ */
+export const Checkbox: FC<CheckboxProps> = (props) => (
+  <BooleanField {...props} type="checkbox" />
+);
diff --git a/src/components/atoms/forms/fields/checkbox/index.ts b/src/components/atoms/forms/fields/checkbox/index.ts
new file mode 100644
index 0000000..8d78b3e
--- /dev/null
+++ b/src/components/atoms/forms/fields/checkbox/index.ts
@@ -0,0 +1 @@
+export * from './checkbox';