implement <Input /> base component (fixes #44)

This commit is contained in:
Sérgio Ramos 2016-10-31 12:03:41 +00:00
parent bcbadbab24
commit fcd55d3c44
7 changed files with 168 additions and 2 deletions

View File

@ -0,0 +1,60 @@
const classNames = require('classnames');
const React = require('react');
const styles = require('./style.css');
const Input = ({
children,
className,
disabled = false,
id,
label,
onChange,
placeholder,
style,
type,
value
}) => {
const _label = label || children;
const _children = label && children ? children : null;
const cn = classNames(
className,
styles['input-group']
);
const labelledby = `${styles.label}-label`;
return (
<div className={cn}>
<label className={styles.label} htmlFor={id}>
{_label}
</label>
<input
aria-labelledby={labelledby}
className={styles.input}
disabled={disabled}
id={id}
onChange={onChange}
placeholder={placeholder}
type={type}
value={value}
/>
{_children}
</div>
);
};
Input.propTypes = {
children: React.PropTypes.node,
className: React.PropTypes.string,
disabled: React.PropTypes.bool,
id: React.PropTypes.string,
label: React.PropTypes.string,
onChange: React.PropTypes.func,
placeholder: React.PropTypes.string,
style: React.PropTypes.object,
type: React.PropTypes.string,
value: React.PropTypes.string
};
module.exports = Input;

View File

@ -0,0 +1,60 @@
# Input
## demo
```embed
const React = require('react');
const ReactDOM = require('react-dom/server');
const Base = require('../base');
const Container = require('../container');
const Row = require('../row');
const Column = require('../column');
const Input = require('./index.js');
nmodule.exports = ReactDOM.renderToString(
<Base>
<Row>
<Column>
<Input
placeholder='Enter email'
label='Email Address'
type='email'
>
<small>We'll never share your email with anyone else.</small>
</Input>
</Column>
</Row>
<Row>
<Column>
<Input placeholder='Password' type='password'>
Password
</Input>
</Column>
</Row>
</Base>
);
```
## usage
```js
const React = require('react');
const Radio = require('ui/radio');
module.exports = () => {
return (
<div>
<Input
placeholder='Enter email'
label='Email Address'
type='email'
>
<small>We'll never share your email with anyone else.</small>
</Input>
<Input placeholder='Password' type='password'>
Password
</Input>
</div>
);
}
```

View File

@ -0,0 +1,34 @@
~boxes: "../../shared/constants.js";
~colors: "../../shared/constants.js";
:root {
--background-color: ~colors.background;
--border-color: ~colors.border;
--border-selected-color: ~colors.borderSelected;
--border-radius: remCalc(~boxes.borderRadius);
--inset-box-shadow: ~boxes.insetShaddow;
}
.input-group {
& .input {
background: var(--background-color);
border: 1px solid var(--border-color);
box-shadow: var(--inset-box-shadow);
border-radius: var(--border-radius);
height: 50px;
width: 100%;
display: block;
visibility: visible;
padding-left: 15px;
padding-right: 15px;
&:focus {
border-color: var(--border-selected-color);
outline: none;
}
}
& .label {
color: #464646;
}
}

View File

@ -9,6 +9,7 @@ module.exports = {
Base: require('./components/base/readme.md'), Base: require('./components/base/readme.md'),
Container: require('./components/container/readme.md'), Container: require('./components/container/readme.md'),
Row: require('./components/row/readme.md'), Row: require('./components/row/readme.md'),
Input: require('./components/input/readme.md'),
Radio: require('./components/radio/readme.md'), Radio: require('./components/radio/readme.md'),
'Radio Group': require('./components/radio-group/readme.md'), 'Radio Group': require('./components/radio-group/readme.md'),
Column: require('./components/column/readme.md'), Column: require('./components/column/readme.md'),

View File

@ -9,6 +9,7 @@ module.exports = {
Tab: require('./components/tab'), Tab: require('./components/tab'),
Tabs: require('./components/tabs'), Tabs: require('./components/tabs'),
Toggle: require('./components/toggle'), Toggle: require('./components/toggle'),
Input: require('./components/input'),
Radio: require('./components/radio'), Radio: require('./components/radio'),
RadioGroup: require('./components/radio-group'), RadioGroup: require('./components/radio-group'),
Widget: require('./components/widget') Widget: require('./components/widget')

View File

@ -68,7 +68,8 @@ const sizes = {
const boxes = { const boxes = {
borderRadius: 4, borderRadius: 4,
bottomShaddow: '0 2px 0 0 rgba(0,0,0,0.05)' bottomShaddow: '0 2px 0 0 rgba(0, 0, 0, 0.05)',
insetShaddow: 'inset 0 3px 0 0 rgba(0, 0, 0, 0.05)'
}; };
const forms = { const forms = {
@ -79,7 +80,10 @@ const colors = {
brandPrimary: '#364acd', brandPrimary: '#364acd',
brandSecondary: '#160d42', brandSecondary: '#160d42',
grayLight: '#818a91', grayLight: '#818a91',
confirmation: '#38C647' confirmation: '#38C647',
background: '#ffffff',
border: '#D8D8D8',
borderSelected: '#1D35BC'
}; };
const typography = { const typography = {

View File

@ -89,3 +89,9 @@ test('renders <Widget> without exploding', (t) => {
const wrapper = shallow(<Widget />); const wrapper = shallow(<Widget />);
t.deepEqual(wrapper.length, 1); t.deepEqual(wrapper.length, 1);
}); });
test('renders <Input> without exploding', (t) => {
const Input = require('../src/components/input');
const wrapper = shallow(<Input />);
t.deepEqual(wrapper.length, 1);
});