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 _ = 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 size = {
  label: 'Size',
  options: {
    small: 'small',
    medium: 'medium',
    large: 'large'
  },
  default: 'medium'
};
(0, _react2.storiesOf)('Actions/Button', module).addWithJSX('Primary', function () {
  return _react.default.createElement(_react.default.Fragment, null, _react.default.createElement(_.Button, {
    disabled: (0, _addonKnobs.boolean)('disabled', false),
    variant: (0, _addonKnobs.select)(variant.label, variant.options, variant.default),
    size: (0, _addonKnobs.select)(size.label, size.options, size.default),
    loading: (0, _addonKnobs.boolean)('Loading', false),
    intent: "primary"
  }, "default button"));
});
(0, _react2.storiesOf)('Actions/Button', module).addWithJSX('Secondary', function () {
  return _react.default.createElement(_.Button, {
    disabled: (0, _addonKnobs.boolean)('disabled', false),
    variant: (0, _addonKnobs.select)(variant.label, variant.options, variant.default),
    size: (0, _addonKnobs.select)(size.label, size.options, size.default),
    intent: "secondary"
  }, "Hello World");
});
(0, _react2.storiesOf)('Actions/Button', module).addWithJSX('Destructive', function () {
  return _react.default.createElement(_.Button, {
    disabled: (0, _addonKnobs.boolean)('disabled', false),
    variant: (0, _addonKnobs.select)(variant.label, variant.options, variant.default),
    size: (0, _addonKnobs.select)(size.label, size.options, size.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, {
    disabled: (0, _addonKnobs.boolean)('disabled', false),
    size: (0, _addonKnobs.select)(size.label, size.options, size.default),
    variant: "outline",
    href: "#"
  }, "This is a link"), ' ', "vs", ' ', _react.default.createElement(_.Button, {
    disabled: (0, _addonKnobs.boolean)('disabled', false),
    size: (0, _addonKnobs.select)(size.label, size.options, size.default),
    variant: "outline"
  }, "This is button")), _react.default.createElement(_block.Block, null, _react.default.createElement(_.Button, {
    disabled: (0, _addonKnobs.boolean)('disabled', false),
    size: (0, _addonKnobs.select)(size.label, size.options, size.default),
    intent: "primary"
  }, "This is a button"), ' ', "vs", ' ', _react.default.createElement(_.Button, {
    size: (0, _addonKnobs.select)(size.label, size.options, size.default),
    disabled: (0, _addonKnobs.boolean)('disabled', false),
    href: "123"
  }, "This is a link")));
});