PR-722301: Adding Library Components.

src/components/Input/Input.stories.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { StoryFn, Meta } from '@storybook/react';
+import { Input } from '@components';
+
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default {
+  title: 'List Design System/Input',
+  component: Input,
+} as Meta<typeof Input>;
+
+// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
+const Template: StoryFn<typeof Input> = (args) => <Input {...args} />;
+
+export const Basic = Template.bind({});
+// More on args: https://storybook.js.org/docs/react/writing-stories/args
+Basic.args = {
+  placeholder: 'Basic Input',
+  onChange: (e) => { console.log(e.target.value) }
+};

src/components/Input/index.tsx

@@ -0,0 +1,22 @@
+import React, { FC, ChangeEventHandler } from 'react';
+import './style.scss';
+
+export type TInputProps = {
+    /**
+     * Is this the text you want to add to the input placeholder
+     */
+    placeholder?: string
+    /**
+     * Is this the onChange event of the input
+     */
+    onChange?: ChangeEventHandler<HTMLInputElement>
+};
+
+export const Input:FC<TInputProps> = ({
+    placeholder = '',
+    onChange = (e) => {}
+}) => {
+    return(
+        <input className='input' placeholder={placeholder} type='text' onChange={onChange} />
+    )
+}

src/components/Input/style.scss

@@ -0,0 +1,11 @@
+.input{
+    width: 100%;
+    height: 30px;
+    border: 1px solid #ccc;
+    border-radius: 50px;
+    font-size: 16px;
+    outline: none;
+    &:focus{
+        border: 1px solid #000;
+    }
+}