stateless examples

package.json

@@ -79,6 +79,7 @@
     "rollup-plugin-uglify": "^6.0.4",
     "sass": "^1.26.11",
     "sass-loader": "^8.0.2",
+    "storybook-addon-state": "^1.0.3",
     "style-loader": "^1.2.1",
     "stylelint": "^13.12.0",
     "stylelint-config-recommended": "^3.0.0",

src/components/Input/indexStateless.jsx

@@ -0,0 +1,84 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import uuid from 'uuid/v4';
+import { Search } from 'react-feather';
+import InputError from '../InputError';
+
+const Input = ({
+	ariaLabel, ariaLabelSearchButton, className, disabled, error, errorMessage, handleChange, id, label, negative, placeholder, searchField, submitCallback, type, value, onFocus, onBlur, size,
+}) => {
+	const inputId = id || uuid();
+
+	const handleKeyDown = e => {
+		if (e.key === 'Enter') {
+			submitCallback(value);
+		}
+	};
+
+	return (
+		<div className={`ssb-input${negative ? ' negative' : ''}${error ? ' error' : ''}${size === 'lg' ? ' input-lg' : ''}${className ? ` ${className}` : ''}`}>
+			{label && <label htmlFor={inputId}>{label}</label>}
+			<div className="input-wrapper">
+				<input
+					id={inputId}
+					disabled={disabled}
+					type={type}
+					value={value}
+					onChange={handleChange}
+					onFocus={onFocus}
+					onBlur={onBlur}
+					placeholder={placeholder}
+					aria-label={ariaLabel}
+					className={searchField || error ? ' with-icon' : ''}
+					onKeyDown={searchField ? e => handleKeyDown(e) : undefined}
+				/>
+				{searchField && (
+					<button aria-label={ariaLabelSearchButton} className="icon-wrapper search-icon" onClick={() => submitCallback(value)}>
+						<Search size={size === 'lg' ? '72' : '18'} />
+					</button>
+				)}
+			</div>
+			{error && (errorMessage && (
+				<InputError negative={negative} errorMessage={errorMessage} />
+			))}
+		</div>
+	);
+};
+
+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;

src/components/Input/indexUpdateOnValueChange.jsx

@@ -0,0 +1,94 @@
+import React, { useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import uuid from 'uuid/v4';
+import { Search } from 'react-feather';
+import InputError from '../InputError';
+
+const Input = ({
+	ariaLabel, ariaLabelSearchButton, className, disabled, error, errorMessage, handleChange, id, label, negative, placeholder, searchField, submitCallback, type, value, onFocus, onBlur, size,
+}) => {
+	const [inputValue, setValue] = useState(value);
+	const inputId = id || uuid();
+
+	useEffect(() => {
+		setValue(value);
+	}, [value]);
+
+	const handleInputChange = e => {
+		setValue(e.target.value);
+		handleChange(e);
+	};
+
+	const handleKeyDown = e => {
+		if (e.key === 'Enter') {
+			submitCallback(inputValue);
+		}
+	};
+
+	return (
+		<div className={`ssb-input${negative ? ' negative' : ''}${error ? ' error' : ''}${size === 'lg' ? ' input-lg' : ''}${className ? ` ${className}` : ''}`}>
+			{label && <label htmlFor={inputId}>{label}</label>}
+			<div className="input-wrapper">
+				<input
+					id={inputId}
+					disabled={disabled}
+					type={type}
+					value={inputValue}
+					onChange={e => handleInputChange(e)}
+					onFocus={onFocus}
+					onBlur={onBlur}
+					placeholder={placeholder}
+					aria-label={ariaLabel}
+					className={searchField || error ? ' with-icon' : ''}
+					onKeyDown={searchField ? e => handleKeyDown(e) : undefined}
+				/>
+				{searchField && (
+					<button aria-label={ariaLabelSearchButton} className="icon-wrapper search-icon" onClick={() => submitCallback(inputValue)}>
+						<Search size={size === 'lg' ? '72' : '18'} />
+					</button>
+				)}
+			</div>
+			{error && (errorMessage && (
+				<InputError negative={negative} errorMessage={errorMessage} />
+			))}
+		</div>
+	);
+};
+
+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;

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 (
+			<div>
+				<Input label="orig" value={appValue} handleChange={updateValue} />
+				<Input lable="copy" value={appValue} />
+			</div>
+		);
+	})
 	.add('Default', () => (
 		<div style={{ width: '280px' }}>
 			<Input label="Input field" value={someValue} handleChange={handleChange} />

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 (
+			<div>
+				<Input label="orig" value={appValue} handleChange={updateValue} />
+				<Input lable="copy" value={appValue} />
+			</div>
+		);
+	})
+	.add('Default', () => (
+		<div style={{ width: '280px' }}>
+			<Input label="Input field" value={someValue} handleChange={handleChange} />
+		</div>
+	))
+	.add('Search field', () => (
+		<div style={{ width: '280px' }}>
+			<Input ariaLabel="Input field Search" ariaLabelSearchButton="Search" searchField submitCallback={handleSubmit} placeholder="Search text" />
+		</div>
+	))
+	.add('With value', () => (
+		<div style={{ width: '280px' }}>
+			<Input label="Input field" value="Already filled" />
+		</div>
+	))
+	.add('Disabled', () => (
+		<div style={{ width: '280px' }}>
+			<Input label="Input field" disabled />
+		</div>
+	))
+	.add('Error', () => (
+		<div style={{ width: '280px' }}>
+			<Input label="Input field" error errorMessage="Beklager, dette er feil" />
+		</div>
+	))
+	.add('Negative', () => (
+		<div style={{
+			width: '40em',
+			height: '20em',
+			background: '#274247',
+			display: 'flex',
+			flexDirection: 'column',
+			justifyContent: 'center',
+			alignItems: 'center',
+		}}
+		>
+			<Input label="Input field" negative value={someValue} handleChange={handleChange} />
+			<Input label="Input field" negative searchField submitCallback={handleSubmit} placeholder="Search text" />
+			<Input label="Input field" negative value={someValue} error errorMessage="Beklager, dette er feil" />
+		</div>
+	))
+	.add('Large input', () => (
+		<div style={{
+			width: '980px',
+			height: '240px',
+			background: '#ecfeed',
+			display: 'flex',
+			flexDirection: 'column',
+			justifyContent: 'center',
+			alignItems: 'center',
+		}}
+		>
+			<Input searchField size="lg" value="Lønn" />
+		</div>
+	));