From b0313f9842bb9c109dc2e05345da1be8f8aa3b9d Mon Sep 17 00:00:00 2001
From: Hannah <76073097+hannahouazzane@users.noreply.github.com>
Date: Thu, 14 Sep 2023 15:16:43 +0100
Subject: [PATCH] feat: add input field to design system

---
 .storybook/preview.js                         |  1 +
 .../components/InputField/InputField.css      |  8 +++++++
 .../InputField/InputField.stories.tsx         | 24 +++++++++++++++++++
 .../components/InputField/InputField.tsx      |  8 +++++++
 .../components/InputField/index.tsx           |  3 +++
 src/design-system/components/stylesheet.css   |  1 +
 6 files changed, 45 insertions(+)
 create mode 100644 src/design-system/components/InputField/InputField.css
 create mode 100644 src/design-system/components/InputField/InputField.stories.tsx
 create mode 100644 src/design-system/components/InputField/InputField.tsx
 create mode 100644 src/design-system/components/InputField/index.tsx

diff --git a/.storybook/preview.js b/.storybook/preview.js
index b8aef7430..3798ba03c 100644
--- a/.storybook/preview.js
+++ b/.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].*' },
diff --git a/src/design-system/components/InputField/InputField.css b/src/design-system/components/InputField/InputField.css
new file mode 100644
index 000000000..23b0acb7f
--- /dev/null
+++ b/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);
+}
diff --git a/src/design-system/components/InputField/InputField.stories.tsx b/src/design-system/components/InputField/InputField.stories.tsx
new file mode 100644
index 000000000..282266f79
--- /dev/null
+++ b/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} />;
diff --git a/src/design-system/components/InputField/InputField.tsx b/src/design-system/components/InputField/InputField.tsx
new file mode 100644
index 000000000..8fadef2ce
--- /dev/null
+++ b/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;
diff --git a/src/design-system/components/InputField/index.tsx b/src/design-system/components/InputField/index.tsx
new file mode 100644
index 000000000..22109d5b7
--- /dev/null
+++ b/src/design-system/components/InputField/index.tsx
@@ -0,0 +1,3 @@
+import InputField from './InputField';
+
+export default InputField;
diff --git a/src/design-system/components/stylesheet.css b/src/design-system/components/stylesheet.css
index f5105cac9..667a33b81 100644
--- a/src/design-system/components/stylesheet.css
+++ b/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';