vcc-ui/lib/components/slider/stories.js

VCC UI is a collection of React UI Components that can be used for developing front-end applications at Volvo Car Corporation.

"use strict";

var _react = _interopRequireDefault(require("react"));

var _react2 = require("@storybook/react");

var _addonKnobs = require("@storybook/addon-knobs");

var _ = require(".");

var _render = require("../../../stories/render");

var _themeProvider = require("../../theme-provider");

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

(0, _react2.storiesOf)("Slider", module).addDecorator(_render.render).addDecorator(_addonKnobs.withKnobs).addWithJSX("5 steps", function () {
  return _react.default.createElement(_.Slider, {
    onChange: function onChange(value) {
      // eslint-disable-next-line no-console
      console.log(value);
    },
    initialValue: 3,
    step: 1,
    minValue: 1,
    maxValue: 5
  });
}).addWithJSX("Fibonacci", function () {
  return _react.default.createElement(_.Slider, {
    initialValue: 1,
    onChange: function onChange(value) {
      // eslint-disable-next-line no-console
      console.log(value);
    },
    valueList: [0, 1, 2, 3, 5, 8, 13, 21, 34, 66, 89, 144]
  });
}).addWithJSX("with theme", function () {
  var themeValue = {
    sliderTrack: {
      borderRadius: "25px"
    }
  };
  var themePropsConfig = (0, _addonKnobs.object)("", themeValue);
  return _react.default.createElement(_themeProvider.ThemeProvider, {
    theme: themePropsConfig
  }, _react.default.createElement(_.Slider, {
    initialValue: 1,
    onChange: function onChange(value) {
      // eslint-disable-next-line no-console
      console.log(value);
    },
    valueList: [0, 1, 2, 3, 5, 8, 13, 21, 34, 66, 89, 144]
  }));
});