mirror of
https://github.com/yldio/copilot.git
synced 2024-11-11 05:40:11 +02:00
implement <Input /> base component (fixes #44)
This commit is contained in:
parent
bcbadbab24
commit
fcd55d3c44
60
ui/src/components/input/index.js
Normal file
60
ui/src/components/input/index.js
Normal 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;
|
60
ui/src/components/input/readme.md
Normal file
60
ui/src/components/input/readme.md
Normal 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>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
```
|
34
ui/src/components/input/style.css
Normal file
34
ui/src/components/input/style.css
Normal 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;
|
||||||
|
}
|
||||||
|
}
|
@ -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'),
|
||||||
|
@ -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')
|
||||||
|
@ -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 = {
|
||||||
|
@ -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);
|
||||||
|
});
|
||||||
|
Loading…
Reference in New Issue
Block a user