chore: add labelled field component

3 files changed, 26 insertions, 14 deletions

diff --git a/src/components/atoms/forms/field.stories.tsx b/src/components/atoms/forms/field.stories.tsx
index 0406f10..02681e7 100644
--- a/src/components/atoms/forms/field.stories.tsx
+++ b/src/components/atoms/forms/field.stories.tsx
@@ -31,12 +31,9 @@ export default {
         type: 'text',
       },
       description: 'Field id.',
-      table: {
-        category: 'Options',
-      },
       type: {
         name: 'string',
-        required: false,
+        required: true,
       },
     },
     max: {
@@ -70,12 +67,9 @@ export default {
         type: 'text',
       },
       description: 'Field name.',
-      table: {
-        category: 'Options',
-      },
       type: {
         name: 'string',
-        required: false,
+        required: true,
       },
     },
     placeholder: {
@@ -171,6 +165,8 @@ const Template: ComponentStory<typeof FieldComponent> = (args) => (
 
 export const Field = Template.bind({});
 Field.args = {
+  id: 'field-storybook',
+  name: 'field-storybook',
   setValue: () => null,
   value: '',
 };
diff --git a/src/components/atoms/forms/field.test.tsx b/src/components/atoms/forms/field.test.tsx
index 5488220..a04a976 100644
--- a/src/components/atoms/forms/field.test.tsx
+++ b/src/components/atoms/forms/field.test.tsx
@@ -3,12 +3,28 @@ import Field from './field';
 
 describe('Field', () => {
   it('renders a text input', () => {
-    render(<Field type="text" value="" setValue={() => null} />);
+    render(
+      <Field
+        id="text-field"
+        name="text-field"
+        type="text"
+        value=""
+        setValue={() => null}
+      />
+    );
     expect(screen.getByRole('textbox')).toHaveAttribute('type', 'text');
   });
 
   it('renders a search input', () => {
-    render(<Field type="search" value="" setValue={() => null} />);
+    render(
+      <Field
+        id="search-field"
+        name="search-field"
+        type="search"
+        value=""
+        setValue={() => null}
+      />
+    );
     expect(screen.getByRole('searchbox')).toHaveAttribute('type', 'search');
   });
 });
diff --git a/src/components/atoms/forms/field.tsx b/src/components/atoms/forms/field.tsx
index 7d1ac93..513d2ba 100644
--- a/src/components/atoms/forms/field.tsx
+++ b/src/components/atoms/forms/field.tsx
@@ -1,7 +1,7 @@
 import { ChangeEvent, FC, SetStateAction } from 'react';
 import styles from './forms.module.scss';
 
-type FieldType =
+export type FieldType =
   | 'datetime-local'
   | 'email'
   | 'number'
@@ -12,7 +12,7 @@ type FieldType =
   | 'time'
   | 'url';
 
-type FieldProps = {
+export type FieldProps = {
   /**
    * Field state. Either enabled (false) or disabled (true).
    */
@@ -20,7 +20,7 @@ type FieldProps = {
   /**
    * Field id attribute.
    */
-  id?: string;
+  id: string;
   /**
    * Field maximum value.
    */
@@ -32,7 +32,7 @@ type FieldProps = {
   /**
    * Field name attribute.
    */
-  name?: string;
+  name: string;
   /**
    * Placeholder value.
    */