mpana/copilot
1
0
Fork 0
mirror of https://github.com/yldio/copilot.git synced 2024-11-11 05:40:11 +02:00
Code Issues Releases Wiki Activity

implimenting text input component

Browse Source
This commit is contained in:
Alex Windett 2016-12-12 10:43:30 +00:00
parent 43af2d0785
commit e792c86852
2 changed files with 29 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
ui/src/components/input/index.js
View File

@ -1,42 +1,40 @@
const React = require('react');
const composers = require('../../shared/composers'); const composers = require('../../shared/composers');
const constants = require('../../shared/constants'); const constants = require('../../shared/constants');
const fns = require('../../shared/functions'); const fns = require('../../shared/functions');
const React = require('react');
const Styled = require('styled-components'); const Styled = require('styled-components');
const {
remcalc
} = fns;
const { const {
baseBox baseBox
} = composers; } = composers;
const {
colors
} = constants;
const {
rndId
} = fns;
const { const {
default: styled default: styled
} = Styled; } = Styled;
const StyledLabel = styled.label` const Label = styled.label`
color: #464646; color: #464646;
`; `;
const StyledInput = styled.input` const InputField = styled.input`
background: ${colors.background}; background: ${constants.colors.background};
display: block; display: block;
height: 50px; font-size: 16px;
padding-left: 15px; height: ${remcalc(50)};
padding-right: 15px; padding-left: ${remcalc(15)};
padding-right: ${remcalc(15)};
visibility: visible; visibility: visible;
width: 100%; width: 100%;
${baseBox()} ${baseBox()}
:focus { &:focus {
border-color: ${colors.borderSelected}; border-color: ${constants.colors.borderSelected};
outline: none; outline: none;
} }
`; `;
@ -48,9 +46,10 @@ const Input = ({
className, className,
disabled = false, disabled = false,
form, form,
id = rndId(), id,
inputMode, inputMode,
label, label,
labelledby,
list, list,
name, name,
onChange, onChange,
@ -68,14 +67,12 @@ const Input = ({
const _label = label || children; const _label = label || children;
const _children = label && children ? children : null; const _children = label && children ? children : null;
const labelledby = `${rndId()}-label`;
return ( return (
<div className={className}> <div>
<StyledLabel htmlFor={id}> <Label htmlFor={id}>
{_label} {_label}
</StyledLabel> </Label>
<StyledInput <InputField
aria-labelledby={labelledby} aria-labelledby={labelledby}
autoComplete={autoComplete} autoComplete={autoComplete}
autoFocus={autoFocus} autoFocus={autoFocus}
@ -111,6 +108,7 @@ Input.propTypes = {
id: React.PropTypes.string, id: React.PropTypes.string,
inputMode: React.PropTypes.string, inputMode: React.PropTypes.string,
label: React.PropTypes.string, label: React.PropTypes.string,
labelledby: React.PropTypes.string,
list: React.PropTypes.string, list: React.PropTypes.string,
name: React.PropTypes.string, name: React.PropTypes.string,
onChange: React.PropTypes.func, onChange: React.PropTypes.func,

6
ui/stories/index.js
View File

@ -25,6 +25,7 @@ const {
Widget, Widget,
Radio, Radio,
RadioGroup RadioGroup
Input
} = require('../src/'); } = require('../src/');
const styles = { const styles = {
@ -266,6 +267,11 @@ storiesOf('Toggle', module)
<Toggle /> <Toggle />
)); ));
storiesOf('Input', module)
.add('default', () => (
<Input placeholder="I am the placeholder" />
));
storiesOf('Widget', module) storiesOf('Widget', module)
.add('single', () => ( .add('single', () => (
<Widget <Widget