vcc-ui/lib/components/button/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 _decorators = require("../../../stories/decorators");

var _ = require("./");

var _block = require("../block");

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

var variant = {
  label: "Variant",
  options: {
    default: "default",
    outline: "outline",
    text: "text"
  },
  default: "default"
};
var arrow = {
  label: "Arrow",
  options: {
    none: null,
    right: "right",
    left: "left",
    up: "up",
    down: "down"
  },
  default: "right"
};
(0, _react2.storiesOf)("Actions/Button", module).addWithJSX("Primary", function () {
  return _react.default.createElement(_react.default.Fragment, null, _react.default.createElement(_.Button, {
    variant: (0, _addonKnobs.select)(variant.label, variant.options, variant.default),
    arrow: (0, _addonKnobs.select)(arrow.label, arrow.options, arrow.default),
    loading: (0, _addonKnobs.boolean)("Loading", false),
    intent: "primary"
  }, "default button"));
});
(0, _react2.storiesOf)("Actions/Button", module).addDecorator(_decorators.withDarkBackground).addWithJSX("On Dark", function () {
  return _react.default.createElement(_.Button, {
    variant: (0, _addonKnobs.select)(variant.label, variant.options, variant.default),
    arrow: (0, _addonKnobs.select)(arrow.label, arrow.options, arrow.default),
    intent: "primary-light"
  }, "Hello World");
});
(0, _react2.storiesOf)("Actions/Button", module).addWithJSX("Secondary", function () {
  return _react.default.createElement(_.Button, {
    variant: (0, _addonKnobs.select)(variant.label, variant.options, variant.default),
    arrow: (0, _addonKnobs.select)(arrow.label, arrow.options, arrow.default),
    intent: "secondary"
  }, "Hello World");
});
(0, _react2.storiesOf)("Actions/Button", module).addWithJSX("Destructive", function () {
  return _react.default.createElement(_.Button, {
    variant: (0, _addonKnobs.select)(variant.label, variant.options, variant.default),
    arrow: (0, _addonKnobs.select)(arrow.label, arrow.options, arrow.default),
    intent: "destructive"
  }, "Destroy Planet");
});
(0, _react2.storiesOf)("Actions/Button", module).addWithJSX("Link Button", function () {
  return _react.default.createElement(_react.default.Fragment, null, _react.default.createElement(_block.Block, {
    as: "p"
  }, "If ", _react.default.createElement("code", null, "href"), " property is passed the button will be renders as an", " ", _react.default.createElement("code", null, "<a/>"), " element"), _react.default.createElement(_block.Block, {
    extend: {
      marginBottom: "10px"
    }
  }, _react.default.createElement(_.Button, {
    arrow: "right",
    variant: "outline",
    href: "#"
  }, "This is a link"), " ", "vs", " ", _react.default.createElement(_.Button, {
    arrow: "right",
    variant: "outline"
  }, "This is button")), _react.default.createElement(_block.Block, null, _react.default.createElement(_.Button, {
    variant: (0, _addonKnobs.select)(variant.label, variant.options, variant.default),
    arrow: (0, _addonKnobs.select)(arrow.label, arrow.options, arrow.default),
    intent: "primary"
  }, "This is a button"), " ", "vs", " ", _react.default.createElement(_.Button, {
    arrow: "right",
    href: "123"
  }, "This is a link")));
});