From 0b332cbeb6621c99745fc5453e7716b478d56e7b Mon Sep 17 00:00:00 2001 From: Alex Windett Date: Mon, 31 Oct 2016 17:23:16 +0000 Subject: [PATCH] Range Slider - creating component --- ui/docs/containers/app/index.js | 1 + ui/src/components/range-slider/index.js | 35 ++++++++ ui/src/components/range-slider/readme.md | 37 ++++++++ ui/src/components/range-slider/style.css | 103 +++++++++++++++++++++++ ui/src/docs.js | 1 + ui/src/index.js | 1 + ui/src/shared/constants.js | 2 +- ui/webpack/base.js | 4 +- 8 files changed, 182 insertions(+), 2 deletions(-) create mode 100644 ui/src/components/range-slider/index.js create mode 100644 ui/src/components/range-slider/readme.md create mode 100644 ui/src/components/range-slider/style.css diff --git a/ui/docs/containers/app/index.js b/ui/docs/containers/app/index.js index e9adab85..7c3fbabd 100644 --- a/ui/docs/containers/app/index.js +++ b/ui/docs/containers/app/index.js @@ -7,6 +7,7 @@ const ReactRouter = require('react-router'); const Navigation = require('./navigation.js'); const Home = require('../home'); const Item = require('../item/'); +// const Item = require('../../../src/components/range-slider'); const { Base, diff --git a/ui/src/components/range-slider/index.js b/ui/src/components/range-slider/index.js new file mode 100644 index 00000000..f4ccdeb7 --- /dev/null +++ b/ui/src/components/range-slider/index.js @@ -0,0 +1,35 @@ +const classNames = require('classnames'); +const React = require('react'); +const styles = require('./style.css'); + +const RangeSlider = ({ + className, + style +}) => { + + const slider = classNames( + className, + styles.input + ); + + // TODO: Get rid of inline styles + style = { + ...style, + display: 'block' + }; + + return ( + + ); +}; + +RangeSlider.propTypes = { + className: React.PropTypes.string, + style: React.PropTypes.object +}; + +module.exports = RangeSlider; diff --git a/ui/src/components/range-slider/readme.md b/ui/src/components/range-slider/readme.md new file mode 100644 index 00000000..ddddfa70 --- /dev/null +++ b/ui/src/components/range-slider/readme.md @@ -0,0 +1,37 @@ +# `` + +## 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 RangeSlider = require('./index.js'); +const styles = require('./style.css'); + +nmodule.exports = ReactDOM.renderToString( + + + + + + + +); +``` + +## usage + +```js +const React = require('react'); +const RangeSlider = require('ui/range-slider'); + +module.exports = () => { + return ( + + ); +} +``` diff --git a/ui/src/components/range-slider/style.css b/ui/src/components/range-slider/style.css new file mode 100644 index 00000000..95294170 --- /dev/null +++ b/ui/src/components/range-slider/style.css @@ -0,0 +1,103 @@ +~colors: "../../shared/constants.js"; +~boxes: "../../shared/constants.js"; + +:root { + --primary-background: ~colors.brandPrimary; + --box-shaddow: ~boxes.bottomShaddow; + --box-border: ~boxes.border.unchecked; +} + +.input[type="range"] { + -webkit-appearance: none; + margin: 10px 0; + width: 100%; + + // Try and figure out why display none is being set in doc.css + display: block; + visibility: visible; + + &:focus { + outline: none; + } + &::-webkit-slider-runnable-track { + animate: 0.2s; + background: var(--primary-background); + border: var(--box-border); + border-radius: 25px; + box-shadow: var(--box-shaddow); + cursor: pointer; + height: 12.8px; + width: 100%; + } + &::-webkit-slider-thumb { + background: #ffffff; + border: solid 1px #d8d8d8; + border-radius: 4px; + box-shadow: var(--box-shaddow); + cursor: pointer; + display: inline-block; + height: 24px; + margin-top: -3.6px; + width: 36px; + -webkit-appearance: none; + } + &:focus::-webkit-slider-runnable-track { + background: var(--primary-background); + } + &::-moz-range-track { + animate: 0.2s; + background: var(--primary-background); + border: var(--box-border); + border-radius: 25px; + box-shadow: var(--box-shaddow); + cursor: pointer; + height: 12.8px; + width: 100%; + } + &::-moz-range-thumb { + background: #65001c; + box-shadow: var(--box-shaddow); + border: 0px solid #000000; + border-radius: 7px; + cursor: pointer; + height: 20px; + width: 39px; + } + &::-ms-track { + animate: 0.2s; + background: transparent; + borded: transparent; + border-width: 39px 0; + color: transparent; + cursor: pointer; + height: 12.8px; + width: 100%; + } + &::-ms-fill-lower { + background: var(--primary-background); + border: var(--box-border); + border-radius: 50px; + box-shadow: var(--box-shaddow); + } + &::-ms-fill-upper { + background: #e6e6e6; + border: var(--box-border); + border-radius: 50px; + box-shadow: var(--box-shaddow); + } + &::-ms-thumb { + background: #65001c; + border: 0px solid #000000; + border-radius: 7px; + box-shadow: var(--box-shaddow); + cursor: pointer; + height: 20px; + width: 39px; + } + &:focus::-ms-fill-lower { + background: var(--primary-background); + } + &:focus::-ms-fill-upper { + background: #e6e6e6; + } +} diff --git a/ui/src/docs.js b/ui/src/docs.js index b89f8803..be156257 100644 --- a/ui/src/docs.js +++ b/ui/src/docs.js @@ -14,6 +14,7 @@ module.exports = { 'Radio Group': require('./components/radio-group/readme.md'), Column: require('./components/column/readme.md'), Button: require('./components/button/readme.md'), + 'Range Slider': require('./components/range-slider/readme.md'), Toggle: require('./components/toggle/readme.md'), Checkbox: require('./components/checkbox/readme.md'), Tab: require('./components/tab/readme.md'), diff --git a/ui/src/index.js b/ui/src/index.js index b86ddad6..0f7f21f9 100644 --- a/ui/src/index.js +++ b/ui/src/index.js @@ -10,6 +10,7 @@ module.exports = { Tabs: require('./components/tabs'), Toggle: require('./components/toggle'), Input: require('./components/input'), + 'Range Slider': require('./components/range-slider/'), 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 ad86fbce..4dc16b9f 100644 --- a/ui/src/shared/constants.js +++ b/ui/src/shared/constants.js @@ -67,7 +67,7 @@ const sizes = { }; const boxes = { - borderRadius: 4, + borderRadius: '4px', bottomShaddow: '0 2px 0 0 rgba(0, 0, 0, 0.05)', insetShaddow: 'inset 0 3px 0 0 rgba(0, 0, 0, 0.05)', border: { diff --git a/ui/webpack/base.js b/ui/webpack/base.js index c7618fe4..fe88a8d7 100644 --- a/ui/webpack/base.js +++ b/ui/webpack/base.js @@ -24,7 +24,9 @@ const plugins = { require('postcss-cssnext')() ] }, - 'embed-markdown-loader': {} + 'embed-markdown-loader': { + mode: 'plain' + } } }) };