From d1e92b416e75627a155ccdb45ea902a43a798329 Mon Sep 17 00:00:00 2001 From: Alex Windett Date: Wed, 26 Oct 2016 18:02:59 +0100 Subject: [PATCH] Radio Input - implimenting UI component and styling --- ui/src/components/radio/index.js | 46 +++++++++++++++++++++++++++++ ui/src/components/radio/readme.md | 42 +++++++++++++++++++++++++++ ui/src/components/radio/style.css | 48 +++++++++++++++++++++++++++++++ ui/src/docs.js | 1 + ui/src/index.js | 2 ++ 5 files changed, 139 insertions(+) create mode 100644 ui/src/components/radio/index.js create mode 100644 ui/src/components/radio/readme.md create mode 100644 ui/src/components/radio/style.css diff --git a/ui/src/components/radio/index.js b/ui/src/components/radio/index.js new file mode 100644 index 00000000..e032ea37 --- /dev/null +++ b/ui/src/components/radio/index.js @@ -0,0 +1,46 @@ +const classNames = require('classnames'); +const React = require('react'); +const styles = require('./style.css'); + +const Radio = ({ + name, + value, + label, + checked, + disabled = false, + className, + id, + onChange, + style +}) => { + + const cn = classNames( + className, + styles.radio + ); + + return ( + + ); +}; + +Radio.propTypes = { + className: React.PropTypes.string, + name: React.PropTypes.string, + value: React.PropTypes.string, + label: React.PropTypes.string, + checked: React.PropTypes.bool, + onChange: React.PropTypes.func +}; + +module.exports = Radio; diff --git a/ui/src/components/radio/readme.md b/ui/src/components/radio/readme.md new file mode 100644 index 00000000..95618e63 --- /dev/null +++ b/ui/src/components/radio/readme.md @@ -0,0 +1,42 @@ +# `` + +## 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 Radio = require('./index.js'); +const styles = require('./style.css'); + +nmodule.exports = ReactDOM.renderToString( + + + + + + + + + + +); +``` + + +## usage + +```js +const React = require('react'); +const Radio = require('ui/radio'); + +module.exports = () => { + return ( + + + ); +} +``` diff --git a/ui/src/components/radio/style.css b/ui/src/components/radio/style.css new file mode 100644 index 00000000..c6fce9df --- /dev/null +++ b/ui/src/components/radio/style.css @@ -0,0 +1,48 @@ +:root { + --radio-radius: 20px; +} + +.radio { + cursor: pointer; + + label { + display: block; + } + + & span { + margin-left: 30px; + margin-right: 20px; + position: relative; + + &:before { + content: ''; + border : calc( var(--radio-radius) / 4 ) solid white; + border-radius: 50%; + box-shadow: 0 0 0 1px #cfd1d1; + display: inline-block; + height: var(--radio-radius); + left: -30px; + position: absolute; + top: -1px; + width: var(--radio-radius); + } + } + + & input[type="radio"] { + display: none; + visibility: hidden; + + + &:checked { + & ~ span:before { + background: #D8D8D8; + border : calc( var(--radio-radius) / 4 ) solid white; + border-radius: 50%; + box-shadow: 0 0 0 1px #cfd1d1; + height: var(--radio-radius); + position: absolute; + width: var(--radio-radius); + } + } + } +} diff --git a/ui/src/docs.js b/ui/src/docs.js index fcea1f02..d32f966b 100644 --- a/ui/src/docs.js +++ b/ui/src/docs.js @@ -8,6 +8,7 @@ module.exports = { Base: require('./components/base/readme.md'), Container: require('./components/container/readme.md'), Row: require('./components/row/readme.md'), + Radio: require('./components/radio/readme.md'), Column: require('./components/column/readme.md'), Button: require('./components/button/readme.md'), Toggle: require('./components/toggle/readme.md'), diff --git a/ui/src/index.js b/ui/src/index.js index c41bc86c..f900d8aa 100644 --- a/ui/src/index.js +++ b/ui/src/index.js @@ -8,4 +8,6 @@ module.exports = { Toggle: require('./components/toggle'), Tab: require('./components/tab'), Tabs: require('./components/tabs') + Toggle: require('./components/toggle') + Radio: require('./components/radio'), };