From 56d9a5ba463d02960066464dfd2b14d42663a358 Mon Sep 17 00:00:00 2001 From: Alex Windett Date: Wed, 11 Jan 2017 17:04:07 +0000 Subject: [PATCH] creating textarea component --- ui/src/components/textarea/index.js | 146 +++++++++++++++++++++++++++ ui/src/components/textarea/readme.md | 60 +++++++++++ ui/src/components/textarea/story.js | 24 +++++ ui/src/index.js | 1 + 4 files changed, 231 insertions(+) create mode 100644 ui/src/components/textarea/index.js create mode 100644 ui/src/components/textarea/readme.md create mode 100644 ui/src/components/textarea/story.js diff --git a/ui/src/components/textarea/index.js b/ui/src/components/textarea/index.js new file mode 100644 index 00000000..b7b0f0ad --- /dev/null +++ b/ui/src/components/textarea/index.js @@ -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}) : null; + + return ( +
+ + {_error} + + {_children} +
+ ); +}; + +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; diff --git a/ui/src/components/textarea/readme.md b/ui/src/components/textarea/readme.md new file mode 100644 index 00000000..e199c638 --- /dev/null +++ b/ui/src/components/textarea/readme.md @@ -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( + + + + + We'll never share your email with anyone else. + + + + + + + Password + + + + +); +``` + +## usage + +```js +const React = require('react'); +const Input = require('ui/input'); + +module.exports = () => { + return ( +
+ + We'll never share your email with anyone else. + + + Password + +
+ ); +} +``` diff --git a/ui/src/components/textarea/story.js b/ui/src/components/textarea/story.js new file mode 100644 index 00000000..d74a5ee3 --- /dev/null +++ b/ui/src/components/textarea/story.js @@ -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', () => ( + +