@bufferapp/components - npm Package Compare versions

InputStateless/index.jsx

InputStateless/story.jsx

5

CHANGELOG.md

		# Changelog

		## 2.2.0 (June 26, 2018)

		- Add `InputStateless` and modify `Input` so that the focus styling works
		- Fix font stylying and sizing of `Select`

		## 2.1.5 (June 6, 2018)
		@@ -4,0 +9,0 @@

1

index.js

		@@ -9,2 +9,3 @@ // if you need a component export it here
		export Input from './Input';
		export InputStateless from './InputStateless';
		export InputAutocomplete from './InputAutocomplete';
		@@ -11,0 +12,0 @@ export InputDate from './InputDate';

143

Input/index.jsx

		import React from 'react';
		import PropTypes from 'prop-types';
		import { calculateStyles } from '../lib/utils';
		import {
		fontFamily,
		fontSize,
		} from '../style/font';
		import {
		borderRadius,
		borderWidth,
		} from '../style/border';
		import {
		geyser,
		torchRed,
		curiousBlue,
		} from '../style/color';
		import Text from '../Text';
		import InputStateless from '../InputStateless';
		import PseudoClassComponent from '../PseudoClassComponent';

		/* eslint-disable react/prop-types */
		class Input extends PseudoClassComponent {
		render() {
		const { children, ...rest } = this.props;
		return (
		<InputStateless
		{...rest}
		hovered={this.state.hovered}
		focused={this.state.focused}
		onMouseEnter={() => this.handleMouseEnter()}
		onMouseLeave={() => this.handleMouseLeave()}
		onFocus={() => this.handleFocus()}
		onBlur={() => this.handleBlur()}
		>
		{children}
		</InputStateless>
		);
		}
		}

		const labelStyle = {
		marginBottom: '0.5rem',
		};

		const errorStyle = {
		marginTop: '0.5rem',
		};

		const renderLabel = ({ label }) => (
		label ? (
		<div style={labelStyle}>
		<Text>{label}</Text>
		</div>
		) : null
		);

		const renderError = ({ error, touched }) => (
		error && touched ? (
		<div style={errorStyle}>
		<Text color={'torchRed'}>{ error }</Text>
		</div>
		) : null
		);

		/* eslint-enable react/prop-types */

		const Input = ({
		input,
		label,
		meta,
		placeholder,
		type,
		focused,
		onFocus,
		onBlur,
		}) => {
		const style = calculateStyles({
		default: {
		fontFamily,
		fontSize,
		padding: '0.5rem',
		borderRadius,
		border: `${borderWidth} solid ${geyser}`,
		width: '100%',
		boxSizing: 'border-box',
		outline: 0,
		},
		focused: {
		borderColor: curiousBlue,
		},
		error: {
		borderColor: torchRed,
		},
		}, {
		focused,
		error: meta.error && meta.touched,
		});
		return (
		<div>
		{renderLabel({ label })}
		<input
		style={style}
		disabled={meta.submitting}
		value={input.value}
		onChange={input.onChange}
		placeholder={placeholder}
		type={type}
		onFocus={onFocus}
		onBlur={onBlur}
		/>
		{renderError(meta)}
		</div>
		);
		};

		Input.commonPropTypes = {
		input: PropTypes.shape({
		value: PropTypes.string,
		}),
		label: PropTypes.string,
		meta: PropTypes.shape({
		error: PropTypes.string,
		touched: PropTypes.bool,
		submitting: PropTypes.bool,
		}),
		placeholder: PropTypes.string,
		focused: PropTypes.bool,
		onFocus: PropTypes.func,
		onBlur: PropTypes.func,
		};

		Input.propTypes = {
		...Input.commonPropTypes,
		type: PropTypes.oneOf([
		'text',
		'password',
		'email',
		]),
		};

		Input.defaultProps = {
		input: {},
		meta: {},
		type: 'text',
		};

		export default Input;

59

Input/story.jsx

		@@ -7,63 +7,6 @@ import React from 'react';

		const input = {
		value: 'user123',
		onChange: action('on-change'),
		};

		storiesOf('Input', module)
		.addDecorator(checkA11y)
		.add('default', () => (
		<Input input={input} />
		))
		.add('with label', () => (
		<Input input={input} label={'Username'} />
		))
		.add('with error', () => (
		<Input
		label={'Username'}
		input={input}
		meta={{
		error: 'unknown user',
		touched: true,
		}}
		/>
		))
		.add('with placeholder', () => (
		<Input
		label={'Username'}
		placeholder={'ex: kitteh1234'}
		/>
		))
		.add('with type = password', () => (
		<Input
		input={input}
		type={'password'}
		/>
		))
		.add('with type = email', () => (
		<Input
		input={{
		value: 'test@test.com',
		onChange: action('on-change'),
		}}
		type={'email'}
		/>
		))
		.add('with submitting = true', () => (
		<Input
		input={input}
		meta={{
		submitting: true,
		}}
		/>
		))
		.add('focused', () => (
		<Input input={input} focused />
		))
		.add('onFocus + onBlur', () => (
		<Input
		input={input}
		onFocus={action('on-focus')}
		onBlur={action('on-blur')}
		/>
		<Input />
		));

9

InputEmail/index.jsx

		import React from 'react';
		import Input from '../Input';
		import InputStateless from '../InputStateless';

		@@ -9,5 +10,2 @@ const InputEmail = ({
		placeholder,
		focused,
		onFocus,
		onBlur,
		}) =>
		@@ -20,11 +18,8 @@ <Input
		type={'email'}
		focused={focused}
		onFocus={onFocus}
		onBlur={onBlur}
		/>;

		InputEmail.propTypes = {
		...Input.commonPropTypes,
		...InputStateless.commonPropTypes,
		};

		export default InputEmail;

10

InputEmail/story.jsx

		@@ -43,12 +43,2 @@ import React from 'react';
		/>
		))
		.add('focused', () => (
		<InputEmail input={input} focused />
		))
		.add('onFocus + onBlur', () => (
		<InputEmail
		input={input}
		onFocus={action('on-focus')}
		onBlur={action('on-blur')}
		/>
		));

9

InputPassword/index.jsx

		import React from 'react';
		import Input from '../Input';
		import InputStateless from '../InputStateless';

		@@ -8,5 +9,2 @@ const InputPassword = ({
		meta,
		focused,
		onFocus,
		onBlur,
		}) =>
		@@ -18,11 +16,8 @@ <Input
		type={'password'}
		focused={focused}
		onFocus={onFocus}
		onBlur={onBlur}
		/>;

		InputPassword.propTypes = {
		...Input.commonPropTypes,
		...InputStateless.commonPropTypes,
		};

		export default InputPassword;

10

InputPassword/story.jsx

		@@ -37,12 +37,2 @@ import React from 'react';
		/>
		))
		.add('focused', () => (
		<InputPassword input={input} focused />
		))
		.add('onFocus + onBlur', () => (
		<InputPassword
		input={input}
		onFocus={action('on-focus')}
		onBlur={action('on-blur')}
		/>
		));

2

package.json

		{
		"name": "@bufferapp/components",
		"version": "2.1.6",
		"version": "2.2.0",
		"description": "A shared set of UI Components",
		@@ -5,0 +5,0 @@ "main": "index.js",

30

Select/index.jsx

		@@ -7,6 +7,6 @@ import React from 'react';
		mystic,
		shuttleGray,
		} from '../style/color';
		import {
		fontSizeSmall,
		fontSize,
		fontFamily,
		} from '../style/font';
		@@ -21,3 +21,3 @@ import {

		const height = 2;
		const height = 2.3;

		@@ -35,3 +35,3 @@ const defaultIconStyle = {

		const RangeIcon = () =>
		const RangeIcon = () => (
		<div
		@@ -60,3 +60,3 @@ style={{
		>
		<ArrowUpIcon size={'small'} />
		<ArrowUpIcon size="small" />
		</div>
		@@ -69,10 +69,12 @@ <div
		>
		<ArrowDownIcon size={'small'} />
		<ArrowDownIcon size="small" />
		</div>
		</div>;
		</div>
		);

		const DefaultIcon = () =>
		const DefaultIcon = () => (
		<div style={defaultIconStyle}>
		<ArrowDownIcon />
		</div>;
		</div>
		);

		@@ -110,3 +112,4 @@ /* eslint-disable react/prop-types */
		padding: '0 1.5rem 0 0.5rem',
		fontSize: fontSizeSmall,
		fontFamily,
		fontSize,
		background: transparent,
		@@ -120,2 +123,3 @@ border: `${borderWidth} solid ${mystic}`,
		color: colors[color],
		outline: 'none',
		},
		@@ -156,7 +160,7 @@ noStyle: {
		{
		options.map(option =>
		options.map(option => (
		<option key={option.value.toString()} value={option.value}>
		{option.name}
		</option>,
		)
		</option>
		))
		}
		@@ -163,0 +167,0 @@ </select>

__snapshots__/snapshot.test.js.snap

Sorry, the diff of this file is not supported yet

.storybook/preview-head.html

Sorry, the diff of this file is not supported yet

@bufferapp/components - npm Package Compare versions

Improved metrics