feat(component): new Slider component (#144)

* Add slider component (WIP)

* Refactor and update slider

* Add test coverage

* Refactor code, update styling and snapshots

* Fix .stylelintrc file

* Fix comment

* Refactor scss file

* Refactor scss file, add knobs

* Refactor code

* Revert story changes

* Revert lock file changes

* Merge master

Author: igorarkhipenko

.stylelintrc

@@ -11,6 +11,9 @@
         "indentation": 4,
         "no-missing-end-of-source-newline": true,
         "selector-attribute-brackets-space-inside": "never",
+        "selector-pseudo-class-no-unknown": [true, {
+            ignorePseudoClasses: ["global"]
+        }],
         "selector-attribute-quotes": "always",
         "selector-max-id": 0,
         "unit-case": "lower",

package-lock.json

@@ -47,9 +47,10 @@
     "dependencies": {
         "@babel/polyfill": "7.0.0",
         "css-vars-ponyfill": "1.16.4",
+        "prop-types": "^15.7.2",
+        "rc-slider": "8.6.13",
         "downshift": "3.2.10",
         "fast-memoize": "2.5.1",
-        "prop-types": "^15.7.2",
         "react-modal": "3.9.1"
     },
     "peerDependencies": {

package.json

@@ -0,0 +1,31 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import RCSlider from 'rc-slider/lib/Slider';
+import './Slider.scss';
+
+const Slider = React.forwardRef((props, ref) => <RCSlider {...props} ref={ref} />);
+
+Slider.displayName = 'Slider';
+
+Slider.propTypes = {
+    /** Set initial value of slider */
+    initialValue: PropTypes.number,
+    /** The minimum value of the slider */
+    min: PropTypes.number,
+    /** The maximum value of the slider */
+    max: PropTypes.number,
+    /**
+     * Value to be added or subtracted on each step the slider makes.
+     * Must be greater than zero, and max - min should be evenly divisible by the step value.
+     */
+    step: PropTypes.number
+};
+
+Slider.defaultProps = {
+    initialValue: 0,
+    min: 0,
+    max: 100,
+    step: 1
+};
+
+export default Slider;

src/components/Slider/Slider.js

@@ -0,0 +1,67 @@
+// Definition of basic slider variables
+$slider-rail-height: 8px;
+$slider-handle-size: 24px;
+$slider-handle-border-width: 6px;
+
+// Centering adjustments of the handle on the rail
+$slider-handle-adjust-left: -($slider-handle-size / 2);
+$slider-handle-adjust-top: -(($slider-handle-size / 2) - ($slider-rail-height / 2));
+
+// Definitions of variables for paddings, shadows, etc.
+$slider-padding: 5px 0;
+$slider-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, .2);
+$slider-handle-box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.5);
+
+:global .rc-slider-track {
+    position: absolute;
+    height: $slider-rail-height;
+    border-radius: $slider-rail-height / 2;
+    background-color: var(--color-brand);
+    transition: background-color var(--transition-duration) ease;
+    box-shadow: $slider-box-shadow
+}
+
+:global .rc-slider-handle {
+    position: absolute;
+    width: $slider-handle-size;
+    height: $slider-handle-size;
+    margin-left: $slider-handle-adjust-left;
+    margin-top: $slider-handle-adjust-top;
+    border: solid $slider-handle-border-width white;
+    border-radius: 50%;
+    transition: background-color var(--transition-duration) ease;
+    background-color: var(--color-brand);
+    box-shadow: $slider-handle-box-shadow;
+
+    &:focus {
+        outline: none;
+    }
+}
+
+:global .rc-slider {
+    position: relative;
+    height: $slider-rail-height;
+    padding: $slider-padding;
+    width: 100%;
+
+    &:hover .rc-slider-track {
+        background-color: var(--color-brand-40);
+    }
+
+    &:hover .rc-slider-handle {
+        background-color: var(--color-primary);
+    }
+
+    * {
+        box-sizing: border-box;
+    }
+}
+
+:global .rc-slider-rail {
+    position: absolute;
+    width: 100%;
+    background-color: white;
+    height: $slider-rail-height;
+    border-radius: $slider-rail-height / 2;
+    box-shadow: $slider-box-shadow
+}

src/components/Slider/Slider.scss

@@ -0,0 +1,16 @@
+import React from 'react';
+import toJson from 'enzyme-to-json';
+import Slider from '../Slider';
+
+describe('Slider component', () => {
+    it('should render component correctly', () => {
+        const wrapper = mount(<Slider />);
+        expect(toJson(wrapper)).toMatchSnapshot();
+    });
+    it('should render correctly with ref', () => {
+        const ref = React.createRef();
+        mount(<Slider ref={ref} />);
+
+        expect(ref.current.props.Component.displayName).toEqual('Slider');
+    });
+});

src/components/Slider/__tests__/Slider.spec.js

@@ -0,0 +1,137 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Slider component should render component correctly 1`] = `
+<Slider
+  initialValue={0}
+  max={100}
+  min={0}
+  step={1}
+>
+  <ComponentEnhancer(undefined)
+    activeDotStyle={Object {}}
+    className=""
+    disabled={false}
+    dotStyle={Object {}}
+    dots={false}
+    handle={[Function]}
+    handleStyle={
+      Array [
+        Object {},
+      ]
+    }
+    included={true}
+    initialValue={0}
+    marks={Object {}}
+    max={100}
+    min={0}
+    onAfterChange={[Function]}
+    onBeforeChange={[Function]}
+    onChange={[Function]}
+    prefixCls="rc-slider"
+    railStyle={Object {}}
+    step={1}
+    trackStyle={
+      Array [
+        Object {},
+      ]
+    }
+    vertical={false}
+  >
+    <div
+      className="rc-slider"
+      onBlur={[Function]}
+      onFocus={[Function]}
+      onKeyDown={[Function]}
+      onMouseDown={[Function]}
+      onMouseUp={[Function]}
+      onTouchStart={[Function]}
+    >
+      <div
+        className="rc-slider-rail"
+        style={Object {}}
+      />
+      <Track
+        className="rc-slider-track"
+        included={true}
+        length={0}
+        offset={0}
+        style={Object {}}
+        vertical={false}
+      >
+        <div
+          className="rc-slider-track"
+          style={
+            Object {
+              "left": "0%",
+              "width": "0%",
+            }
+          }
+        />
+      </Track>
+      <Steps
+        activeDotStyle={Object {}}
+        dotStyle={Object {}}
+        dots={false}
+        included={true}
+        lowerBound={0}
+        marks={Object {}}
+        max={100}
+        min={0}
+        prefixCls="rc-slider"
+        step={1}
+        upperBound={0}
+        vertical={false}
+      >
+        <div
+          className="rc-slider-step"
+        />
+      </Steps>
+      <Handle
+        className="rc-slider-handle"
+        disabled={false}
+        key="0"
+        max={100}
+        min={0}
+        offset={0}
+        prefixCls="rc-slider"
+        style={Object {}}
+        value={0}
+        vertical={false}
+      >
+        <div
+          aria-disabled={false}
+          aria-valuemax={100}
+          aria-valuemin={0}
+          aria-valuenow={0}
+          className="rc-slider-handle"
+          onBlur={[Function]}
+          onKeyDown={[Function]}
+          onMouseDown={[Function]}
+          role="slider"
+          style={
+            Object {
+              "left": "0%",
+            }
+          }
+          tabIndex={0}
+        />
+      </Handle>
+      <Marks
+        className="rc-slider-mark"
+        included={true}
+        lowerBound={0}
+        marks={Object {}}
+        max={100}
+        min={0}
+        onClickLabel={[Function]}
+        upperBound={0}
+        vertical={false}
+      >
+        <div
+          className="rc-slider-mark"
+        />
+      </Marks>
+    </div>
+  </ComponentEnhancer(undefined)>
+</Slider>
+`;

src/components/Slider/__tests__/__snapshots__/Slider.spec.js.snap

@@ -0,0 +1 @@
+export { default } from './Slider';

src/components/Slider/index.js

@@ -25,4 +25,5 @@ export { Tabs, Tab, TabContent, TabItem, TabMenu } from './components/Tabs';
 export { default as Teaser } from './components/Teaser';
 export { Text, MarkedText } from './components/Text';
 export { default as TextArea } from './components/TextArea';
+export { default as Slider } from './components/Slider';
 export { default } from './utils/OneUI';

src/index.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { Slider } from '@textkernel/oneui';
+import { number, withKnobs } from '@storybook/addon-knobs';
+
+storiesOf('Slider', module)
+    .addDecorator(withKnobs)
+    .add(
+        'Slider',
+        () => (
+            <Slider
+                min={number('Min value', 0)}
+                max={number('Max value', 100)}
+                step={number('Step', 1)}
+                defaultValue={10}
+                onChange={value => console.log(value)}
+            />
+        ),
+        {
+            info: {
+                text: `
+                ## Usage information
+                This component is a wrapper around [rc-slider](https://github.com/react-component/slider).
+                
+                Full list of props available to pass you can find [here](https://github.com/react-component/slider#api).`
+            }
+        }
+    );