convert range-slider

ui/src/components/range-slider/index.js

@@ -1,30 +1,146 @@
-const classNames = require('classnames');
+const composers = require('../../shared/composers');
+const constants = require('../../shared/constants');
+const fns = require('../../shared/functions');
 const React = require('react');
-const styles = require('./style.css');
+const Styled = require('styled-components');
+
+const {
+  baseBox
+} = composers;
+
+const {
+  colors,
+  boxes
+} = constants;
+
+const {
+  remcalc
+} = fns;
+
+const {
+  default: styled,
+  css
+} = Styled;
+
+const rangeTrack = css`
+  background: ${colors.brandPrimary};
+  cursor: pointer;
+  height: ${remcalc(6)};
+  width: 100%;
+
+  ${baseBox({
+    radius: remcalc(25)
+  })}
+`;
+
+const rangeThumb = css`
+  -webkit-appearance: none;
+  background: #FFFFFF;
+  cursor: pointer;
+  height: remcalc(24);
+  position: relative;
+  top: -10px;
+  width: remcalc(36);
+
+  ${baseBox()}
+`;
+
+const rangeLower = css`
+  background: ${colors.brandPrimary};
+  height: 6px;
+
+  ${baseBox({
+    radius: remcalc(50),
+    border: 'none'
+  })}
+`;
+
+const rangeUpper = css`
+  background: #E6E6E6;
+  height: 6px;
+
+  ${baseBox({
+    radius: remcalc(50)
+  })}
+`;
+
+const StyledRange = styled.input`
+  -webkit-appearance: none;
+  border: none;
+  box-shadow: none;
+  display: block;
+  margin: ${remcalc('10 0')};
+  visibility: visible;
+  width: 100%;
+
+  &::-moz-focus-outer {
+    border: 0;
+  }
+
+  &::-moz-range-track {
+    ${rangeTrack}
+  }
+
+  &::-ms-track {
+    ${rangeTrack}
+  }
+
+  &::-webkit-slider-runnable-track {
+    ${rangeTrack}
+  }
+
+  &::-moz-range-thumb {
+    ${rangeThumb}
+  }
+
+  &::-ms-thumb {
+    ${rangeThumb}
+  }
+
+  &::-webkit-slider-thumb {
+    ${rangeThumb}
+  }
+
+  &::-moz-range-progress {
+    ${rangeLower}
+  }
+
+  &::-ms-fill-lower {
+    ${rangeLower}
+  }
+
+  &::-ms-fill-upper {
+    ${rangeUpper}
+  }
+
+  &:focus {
+    outline: none;
+  }
+
+  &:focus::-webkit-slider-runnable-track {
+    background: ${colors.brandPrimary};
+  }
+
+  &:focus::-ms-fill-lower {
+    ${rangeLower}
+  }
+
+  &:focus::-ms-fill-upper {
+    ${rangeUpper}
+  }
+`
 
 const RangeSlider = ({
   className,
   onChange,
   style
 }) => {
-
-  const slider = classNames(
-    className,
-    styles.range_input
-  );
-
-  // TODO: Get rid of inline styles
-  style = {
-    ...style,
-    display: 'block'
-  };
-
   return (
-    <input
-      className={slider}
+    <StyledRange
+      className={className}
       onChange={onChange}
       style={style}
-      type="range"
+      type='range'
     />
   );
 };

ui/src/components/range-slider/style.css

@@ -1,120 +0,0 @@
-@import "../../shared/mixins.css";
-
-~colors: "../../shared/constants.js";
-~boxes: "../../shared/constants.js";
-
-:root {
-  --primary-background: ~colors.brandPrimary;
-  --box-shaddow: ~boxes.bottomShaddow;
-  --box-border: ~boxes.border.unchecked;
-  --box-radius: ~boxes.borderRadius;
-}
-
-/*
-  MIXINS - Defining Mixins for slider
-*/
-@define-mixin range-track {
-  background: var(--primary-background);
-  cursor: pointer;
-  height: remcalc(6);
-  width: 100%;
-
-  @add-mixin create-base-box-properties remcalc(25);
-}
-
-@define-mixin range-thumb {
-  -webkit-appearance: none;
-  background: #FFFFFF;
-  cursor: pointer;
-  height: remcalc(24);
-  position: relative;
-  top: -10px;
-  width: remcalc(36);
-
-  @add-mixin create-base-box-properties;
-}
-
-@define-mixin range-lower {
-  background: var(--primary-background);
-  height: 6px;
-
-  @add-mixin create-base-box-properties remcalc(50), none;
-}
-
-@define-mixin range-upper {
-  background: #E6E6E6;
-  height: 6px;
-
-  @add-mixin create-base-box-properties remcalc(50);
-}
-
-/*
-  SELECTORS - Styleing variou psuedo selectos
-
-  TODO: Complied incorrectly when selectors are in a comma seperated list
-*/
-.range_input {
-  -webkit-appearance: none;
-  border: none;
-  box-shadow: none;
-  display: block; /* Try and figure out why display none is being set in doc.css */
-  margin: remcalc(10 0);
-  visibility: visible;
-  width: 100%;
-
-  &::-moz-focus-outer {
-    border: 0;
-  }
-
-  &::-moz-range-track {
-    @add-mixin range-track;
-  }
-
-  &::-ms-track {
-    @add-mixin range-track;
-  }
-
-  &::-webkit-slider-runnable-track {
-    @add-mixin range-track;
-  }
-
-  &::-moz-range-thumb {
-    @add-mixin range-thumb;
-  }
-
-  &::-ms-thumb {
-    @add-mixin range-thumb;
-  }
-
-  &::-webkit-slider-thumb {
-    @add-mixin range-thumb;
-  }
-
-  &::-moz-range-progress {
-    @add-mixin range-lower;
-  }
-
-  &::-ms-fill-lower {
-    @add-mixin range-lower;
-  }
-
-  &::-ms-fill-upper {
-    @add-mixin range-upper;
-  }
-
-  &:focus {
-    outline: none;
-  }
-
-  &:focus::-webkit-slider-runnable-track {
-    background: var(--primary-background);
-  }
-
-  &:focus::-ms-fill-lower {
-    @add-mixin range-lower;
-  }
-
-  &:focus::-ms-fill-upper {
-    @add-mixin range-upper;
-  }
-}

ui/src/index.js

@@ -13,7 +13,7 @@ module.exports = {
   // Notificaton: require('./components/notification'),
   // Input: require('./components/input'),
   // Icon: require('./components/icon'),
-  // RangeSlider: require('./components/range-slider'),
+  RangeSlider: require('./components/range-slider'),
   Radio: require('./components/radio'),
   // RadioGroup: require('./components/radio-group'),
   Select: require('./components/select'),

ui/src/shared/composers.js

@@ -33,7 +33,7 @@ module.exports = {
     radius = boxes.borderRadius,
     border = boxes.border.unchecked,
     shadow = boxes.bottomShaddow
-  }) => css`
+  } = {}) => css`
     border: ${border};
     border-radius: ${radius};
     box-shadow: ${shadow};

ui/stories/index.js

@@ -13,6 +13,7 @@ const {
   Row,
   Column,
   Avatar,
+  RangeSlider,
   Select,
   Tabs,
   Tab,
@@ -143,6 +144,11 @@ storiesOf('Radio', module)
     <Radio disabled />
   ));
 
+storiesOf('RangeSlider', module)
+  .add('Default', () => (
+    <RangeSlider />
+  ));
+
 storiesOf('Select', module)
   .add('Default', () => (
     <Select label='example select'>