feat: add input field to design system

.storybook/preview.js

@@ -7,6 +7,7 @@ import { MockedProvider } from '@apollo/client/testing';
 // Import design system component styles for our Stories.
 import '../src/design-system/components/Badge/Badge.css';
 import '../src/design-system/components/Button/Button.css';
+import '../src/design-system/components/InputField/InputField.css';
 
 export const parameters = {
   actions: { argTypesRegex: '^on[A-Z].*' },

src/design-system/components/InputField/InputField.css

@@ -0,0 +1,8 @@
+.input-field {
+  display: block;
+  width: 100%;
+  margin-top: var(--space-3xs);
+  padding: var(--space-2xs);
+  color: var(--color-blue);
+  border: 1px solid var(--color-blue);
+}

src/design-system/components/InputField/InputField.stories.tsx

@@ -0,0 +1,24 @@
+import { Meta } from '@storybook/react';
+
+import InputField from './InputField';
+import React from 'react';
+
+export default {
+  title: 'Design-System/Form Elements/Input Field',
+  component: InputField,
+  args: {
+    placeholder: 'Enter a location e.g. London',
+  },
+  parameters: {
+    iframeHeight: 200,
+    docs: {
+      description: {
+        component:
+          'This component accepts data from the user and has the props associated with an input field',
+      },
+      iframeHeight: 200,
+    },
+  },
+} as Meta;
+
+export const Default = (args) => <InputField {...args} />;

src/design-system/components/InputField/InputField.tsx

@@ -0,0 +1,8 @@
+import { forwardRef } from 'react';
+
+const InputField = forwardRef<HTMLInputElement>((props, ref) => {
+  return <input ref={ref} className="input" {...props} />;
+});
+
+InputField.displayName = 'InputField';
+export default InputField;

src/design-system/components/InputField/index.tsx

@@ -0,0 +1,3 @@
+import InputField from './InputField';
+
+export default InputField;

src/design-system/components/stylesheet.css

@@ -1,2 +1,3 @@
 @import 'src/design-system/components/Badge/Badge.css';
 @import 'src/design-system/components/Button/Button.css';
+@import 'src/design-system/components/InputField/InputField.css';