1
0
mirror of https://github.com/yldio/copilot.git synced 2024-11-11 05:40:11 +02:00

creating textarea component

This commit is contained in:
Alex Windett 2017-01-11 17:04:07 +00:00
parent 68b418c7d2
commit 56d9a5ba46
4 changed files with 231 additions and 0 deletions

View File

@ -0,0 +1,146 @@
const React = require('react');
const composers = require('../../shared/composers');
const constants = require('../../shared/constants');
const fns = require('../../shared/functions');
const Styled = require('styled-components');
const {
boxes,
colors
} = constants;
const {
remcalc
} = fns;
const {
baseBox
} = composers;
const {
default: styled
} = Styled;
const Label = styled.label`
color: ${props => props.error ? colors.alert : colors.fonts.regular}
`;
const InputField = styled.textarea`
background: ${colors.brandSecondary};
color: ${props => props.error ? colors.alert : colors.fonts.semibold}
display: block;
font-size: 16px;
padding: ${remcalc('15 18')};
visibility: visible;
width: 100%;
min-height: ${remcalc(96)};
${baseBox()};
border-color: ${props => props.error ? colors.alert : ''};
&:focus {
border-color: ${boxes.border.checked};
outline: none;
}
`;
const Error = styled.span`
float: right;
color: ${colors.alert};
font-size: ${remcalc(14)};
`;
const Textarea = ({
autoComplete,
autoFocus,
children,
className,
disabled = false,
error,
form,
id,
inputMode,
label,
labelledby,
list,
name,
onChange,
pattern,
placeholder,
readOnly,
required,
selectionDirection,
spellCheck,
style,
tabIndex,
type,
value
}) => {
const _label = label || children;
const _children = label && children ? children : null;
const _error = error ? (<Error>{error}</Error>) : null;
return (
<div>
<Label
error={error}
htmlFor={id}
>
{_label}
</Label>
{_error}
<InputField
aria-labelledby={labelledby}
autoComplete={autoComplete}
autoFocus={autoFocus}
disabled={disabled}
error={error}
form={form}
id={id}
inputMode={inputMode}
list={list}
name={name}
onChange={onChange}
pattern={pattern}
placeholder={placeholder}
readOnly={readOnly}
required={required}
selectionDirection={selectionDirection}
spellCheck={spellCheck}
tabIndex={tabIndex}
type={type}
value={value}
/>
{_children}
</div>
);
};
Textarea.propTypes = {
autoComplete: React.PropTypes.string,
autoFocus: React.PropTypes.bool,
children: React.PropTypes.node,
className: React.PropTypes.string,
disabled: React.PropTypes.bool,
error: React.PropTypes.string,
form: React.PropTypes.string,
id: React.PropTypes.string,
inputMode: React.PropTypes.string,
label: React.PropTypes.string,
labelledby: React.PropTypes.string,
list: React.PropTypes.string,
name: React.PropTypes.string,
onChange: React.PropTypes.func,
pattern: React.PropTypes.string,
placeholder: React.PropTypes.string,
readOnly: React.PropTypes.bool,
required: React.PropTypes.bool,
selectionDirection: React.PropTypes.string,
spellCheck: React.PropTypes.bool,
style: React.PropTypes.object,
tabIndex: React.PropTypes.string,
type: React.PropTypes.string,
value: React.PropTypes.string
};
module.exports = Textarea;

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 Input = require('ui/input');
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,24 @@
const React = require('react');
const {
storiesOf
} = require('@kadira/storybook');
const Base= require('../base');
const Textarea = require('./');
storiesOf('Textarea', module)
.add('Default', () => (
<Base>
<Textarea placeholder="I am the placeholder" />
</Base>
))
.add('Error', () => (
<Base>
<Textarea
error="Somethings missing"
placeholder="There was an error"
value="alexw/makeusproud.com"
/>
</Base>
));

View File

@ -24,5 +24,6 @@ module.exports = {
Tabs: require('./components/tabs'), Tabs: require('./components/tabs'),
Toggle: require('./components/toggle'), Toggle: require('./components/toggle'),
Tooltip: require('./components/tooltip'), Tooltip: require('./components/tooltip'),
Textarea: require('./components/textarea'),
Widget: require('./components/widget'), Widget: require('./components/widget'),
}; };