+ );
+};
+
+Input.defaultProps = {
+ className: '',
+ disabled: false,
+ error: false,
+ handleChange: () => {},
+ onFocus: () => {},
+ onBlur: () => {},
+ negative: false,
+ searchField: false,
+ submitCallback: () => {},
+ type: 'text',
+ ariaLabelSearchButton: 'search',
+ value: '',
+};
+
+Input.propTypes = {
+ ariaLabel: PropTypes.string,
+ ariaLabelSearchButton: PropTypes.string,
+ className: PropTypes.string,
+ disabled: PropTypes.bool,
+ error: PropTypes.bool,
+ errorMessage: PropTypes.string,
+ handleChange: PropTypes.func,
+ onFocus: PropTypes.func,
+ onBlur: PropTypes.func,
+ id: PropTypes.string,
+ label: PropTypes.string,
+ negative: PropTypes.bool,
+ placeholder: PropTypes.string,
+ searchField: PropTypes.bool,
+ size: PropTypes.string,
+ submitCallback: PropTypes.func,
+ type: PropTypes.string,
+ value: PropTypes.string,
+};
+
+export default Input;
diff --git a/src/components/Input/input.story.jsx b/src/components/Input/input.story.jsx
index 04b080db..c01e556d 100644
--- a/src/components/Input/input.story.jsx
+++ b/src/components/Input/input.story.jsx
@@ -1,6 +1,7 @@
import React from 'react';
import { storiesOf } from '@storybook/react';
import centered from '@storybook/addon-centered/react';
+import useState from 'storybook-addon-state';
import Input from './index';
let someValue = '';
@@ -13,6 +14,25 @@ const handleSubmit = e => {
};
storiesOf('Input', module).addDecorator(centered)
+ .add('with state', () => {
+ /**
+ * Just an example to show Input component works fine when the app state
+ * (which supplies the prop value) changes. Here appValue is shared across
+ * two components and updating one reflects in the other
+ */
+ const [appValue, setAppValue] = useState('appVal', '');
+
+ const updateValue = value => {
+ setAppValue(value);
+ };
+
+ return (
+
+
+
+
+ );
+ })
.add('Default', () => (
diff --git a/src/components/Input/inputStateless.story.jsx b/src/components/Input/inputStateless.story.jsx
new file mode 100644
index 00000000..a80df653
--- /dev/null
+++ b/src/components/Input/inputStateless.story.jsx
@@ -0,0 +1,90 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import centered from '@storybook/addon-centered/react';
+import useState from 'storybook-addon-state';
+import Input from './index';
+
+let someValue = '';
+const handleChange = e => {
+ someValue = e.target.value;
+};
+
+const handleSubmit = e => {
+ console.log(e.target.value);
+};
+
+storiesOf('Input', module).addDecorator(centered)
+ .add('with state', () => {
+ /**
+ * Just an example to show Input component works fine when the app state
+ * (which supplies the prop value) changes. Here appValue is shared across
+ * two components and updating one reflects in the other
+ */
+ const [appValue, setAppValue] = useState('appVal', '');
+
+ const updateValue = e => {
+ setAppValue(e.target.value);
+ };
+
+ return (
+
+
+
+
+ );
+ })
+ .add('Default', () => (
+
+
+
+ ))
+ .add('Search field', () => (
+
+
+
+ ))
+ .add('With value', () => (
+
+
+
+ ))
+ .add('Disabled', () => (
+
+
+
+ ))
+ .add('Error', () => (
+
+
+
+ ))
+ .add('Negative', () => (
+
+
+
+
+
+ ))
+ .add('Large input', () => (
+
+
+
+ ));
diff --git a/src/components/Input/inputUpdateOnValueChange.story.jsx b/src/components/Input/inputUpdateOnValueChange.story.jsx
new file mode 100644
index 00000000..5b94867f
--- /dev/null
+++ b/src/components/Input/inputUpdateOnValueChange.story.jsx
@@ -0,0 +1,90 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import centered from '@storybook/addon-centered/react';
+import useState from 'storybook-addon-state';
+import Input from './indexUpdateOnValueChange';
+
+let someValue = '';
+const handleChange = e => {
+ someValue = e.target.value;
+};
+
+const handleSubmit = e => {
+ console.log(e);
+};
+
+storiesOf('Input', module).addDecorator(centered)
+ .add('with state', () => {
+ /**
+ * Just an example to show Input component works fine when the app state
+ * (which supplies the prop value) changes. Here appValue is shared across
+ * two components and updating one reflects in the other
+ */
+ const [appValue, setAppValue] = useState('appVal', '');
+
+ const updateValue = value => {
+ setAppValue(value);
+ };
+
+ return (
+