From fcd55d3c44a32b91b5cea35a0e6b813e9a624fb6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Se=CC=81rgio=20Ramos?= Date: Mon, 31 Oct 2016 12:03:41 +0000 Subject: [PATCH] implement base component (fixes #44) --- ui/src/components/input/index.js | 60 +++++++++++++++++++++++++++++++ ui/src/components/input/readme.md | 60 +++++++++++++++++++++++++++++++ ui/src/components/input/style.css | 34 ++++++++++++++++++ ui/src/docs.js | 1 + ui/src/index.js | 1 + ui/src/shared/constants.js | 8 +++-- ui/test/index.js | 6 ++++ 7 files changed, 168 insertions(+), 2 deletions(-) create mode 100644 ui/src/components/input/index.js create mode 100644 ui/src/components/input/readme.md create mode 100644 ui/src/components/input/style.css diff --git a/ui/src/components/input/index.js b/ui/src/components/input/index.js new file mode 100644 index 00000000..14b4b4c1 --- /dev/null +++ b/ui/src/components/input/index.js @@ -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 ( +
+ + + {_children} +
+ ); +}; + +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; diff --git a/ui/src/components/input/readme.md b/ui/src/components/input/readme.md new file mode 100644 index 00000000..ac4cde82 --- /dev/null +++ b/ui/src/components/input/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 Radio = require('ui/radio'); + +module.exports = () => { + return ( +
+ + We'll never share your email with anyone else. + + + Password + +
+ ); +} +``` diff --git a/ui/src/components/input/style.css b/ui/src/components/input/style.css new file mode 100644 index 00000000..30fe6f77 --- /dev/null +++ b/ui/src/components/input/style.css @@ -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; + } +} diff --git a/ui/src/docs.js b/ui/src/docs.js index 8c9d8d36..b89f8803 100644 --- a/ui/src/docs.js +++ b/ui/src/docs.js @@ -9,6 +9,7 @@ module.exports = { Base: require('./components/base/readme.md'), Container: require('./components/container/readme.md'), Row: require('./components/row/readme.md'), + Input: require('./components/input/readme.md'), Radio: require('./components/radio/readme.md'), 'Radio Group': require('./components/radio-group/readme.md'), Column: require('./components/column/readme.md'), diff --git a/ui/src/index.js b/ui/src/index.js index 643817da..b86ddad6 100644 --- a/ui/src/index.js +++ b/ui/src/index.js @@ -9,6 +9,7 @@ module.exports = { Tab: require('./components/tab'), Tabs: require('./components/tabs'), Toggle: require('./components/toggle'), + Input: require('./components/input'), Radio: require('./components/radio'), RadioGroup: require('./components/radio-group'), Widget: require('./components/widget') diff --git a/ui/src/shared/constants.js b/ui/src/shared/constants.js index df90b756..7a6c6399 100644 --- a/ui/src/shared/constants.js +++ b/ui/src/shared/constants.js @@ -68,7 +68,8 @@ const sizes = { const boxes = { 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 = { @@ -79,7 +80,10 @@ const colors = { brandPrimary: '#364acd', brandSecondary: '#160d42', grayLight: '#818a91', - confirmation: '#38C647' + confirmation: '#38C647', + background: '#ffffff', + border: '#D8D8D8', + borderSelected: '#1D35BC' }; const typography = { diff --git a/ui/test/index.js b/ui/test/index.js index 61458643..10230abf 100644 --- a/ui/test/index.js +++ b/ui/test/index.js @@ -89,3 +89,9 @@ test('renders without exploding', (t) => { const wrapper = shallow(); t.deepEqual(wrapper.length, 1); }); + +test('renders without exploding', (t) => { + const Input = require('../src/components/input'); + const wrapper = shallow(); + t.deepEqual(wrapper.length, 1); +});