vcc-ui/es/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.

import React from "react";
import { storiesOf } from "@storybook/react";
import { withKnobs, object } from "@storybook/addon-knobs";
import { Slider } from ".";
import { render } from "../../../stories/render";
import { ThemeProvider } from "../../theme-provider";
storiesOf("Slider", module).addDecorator(render).addDecorator(withKnobs).addWithJSX("5 steps", function () {
  return React.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.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 = object("", themeValue);
  return React.createElement(ThemeProvider, {
    theme: themePropsConfig
  }, React.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]
  }));
});