"use strict";

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

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

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

var _addonActions = require("@storybook/addon-actions");

var _ButtonRow = _interopRequireDefault(require("../ButtonRow"));

var _index = _interopRequireDefault(require("./index.js"));

var _Link = _interopRequireDefault(require("../Link"));

var _ArrowsInline = _interopRequireDefault(require("../ArrowsInline"));

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

var stories = (0, _react2.storiesOf)("Forms|Buttons/Default Button", module);
stories.addDecorator(_addonKnobs.withKnobs).addDecorator(function (story) {
  return _react["default"].createElement("div", {
    id: "root-preview"
  }, story());
});
stories.add("Knobs", function () {
  return _react["default"].createElement(_index["default"], {
    style: (0, _addonKnobs.select)("style", {
      highlight: "highlight",
      danger: "danger",
      "danger-outline": "danger-outline",
      outline: "outline",
      "outline-reverse": "outline-reverse",
      plain: "plain",
      toggle: "toggle",
      underline: "underline",
      unstyled: "unstyled"
    }, "highlight"),
    isDisabled: (0, _addonKnobs["boolean"])("isDisabled", false),
    isActive: (0, _addonKnobs["boolean"])("isActive", false),
    isLoading: (0, _addonKnobs["boolean"])("isLoading", false),
    width: (0, _addonKnobs.select)("width", {
      "default": "default",
      full: "full"
    }, "default"),
    size: (0, _addonKnobs.select)("size", {
      tiny: "tiny",
      small: "small",
      large: "large",
      narrow: "narrow",
      tight: "tight"
    }, "narrow")
  }, (0, _addonKnobs.text)("customize me!", "customize me!"));
}).add("All buttons", function () {
  return _react["default"].createElement(_ButtonRow["default"], {
    centerGroup: [_react["default"].createElement(_index["default"], {
      key: "1",
      isActive: false,
      width: "default"
    }, "Button"), _react["default"].createElement(_index["default"], {
      key: "2",
      isActive: false,
      style: "highlight",
      width: "default"
    }, "Highlight"), _react["default"].createElement(_index["default"], {
      key: "3",
      isActive: false,
      style: "danger",
      width: "default"
    }, "Danger"), _react["default"].createElement(_index["default"], {
      key: "4",
      isActive: false,
      style: "danger-outline",
      width: "default"
    }, "Danger Outline"), _react["default"].createElement(_index["default"], {
      key: "5",
      isActive: false,
      style: "outline",
      width: "default"
    }, "Outline"), _react["default"].createElement(_index["default"], {
      key: "6",
      isActive: false,
      style: "plain",
      width: "default"
    }, "Plain"), _react["default"].createElement(_index["default"], {
      key: "7",
      isActive: (0, _addonKnobs["boolean"])("Toggle button isActive", false),
      style: "toggle",
      width: "default"
    }, "Toggle"), _react["default"].createElement(_index["default"], {
      key: "8",
      isActive: false,
      style: "underline",
      width: "default"
    }, "Underline")]
  });
}).add("Disabled", function () {
  return _react["default"].createElement(_ButtonRow["default"], {
    centerGroup: [_react["default"].createElement(_index["default"], {
      key: "1",
      isDisabled: true,
      width: "default"
    }, "Button"), _react["default"].createElement(_index["default"], {
      key: "2",
      isDisabled: true,
      style: "highlight",
      width: "default"
    }, "Highlight"), _react["default"].createElement(_index["default"], {
      key: "3",
      isDisabled: true,
      style: "danger",
      width: "default"
    }, "Danger"), _react["default"].createElement(_index["default"], {
      key: "4",
      isDisabled: true,
      style: "danger-outline",
      width: "default"
    }, "Danger Outline"), _react["default"].createElement(_index["default"], {
      key: "5",
      isDisabled: true,
      style: "outline",
      width: "default"
    }, "Outline"), _react["default"].createElement(_index["default"], {
      key: "6",
      isDisabled: true,
      style: "plain",
      width: "default"
    }, "Plain"), _react["default"].createElement(_index["default"], {
      key: "7",
      isDisabled: true,
      style: "toggle",
      width: "default"
    }, "Toggle"), _react["default"].createElement(_index["default"], {
      key: "8",
      isDisabled: true,
      style: "underline",
      width: "default"
    }, "Underline")]
  });
}).add("Underline button with Arrow Icon", function () {
  return _react["default"].createElement(_index["default"], {
    style: "underline",
    width: "default"
  }, "Underline Button", _react["default"].createElement(_ArrowsInline["default"], {
    direction: "down"
  }));
}).add("Sizes variations", function () {
  return _react["default"].createElement(_ButtonRow["default"], {
    centerGroup: [_react["default"].createElement(_index["default"], {
      key: "1",
      width: "default",
      size: "tiny"
    }, "Tiny Button"), _react["default"].createElement(_index["default"], {
      key: "2",
      width: "default",
      size: "small"
    }, "Small Button"), _react["default"].createElement(_index["default"], {
      key: "3",
      width: "default",
      size: "large"
    }, "Large Button"), _react["default"].createElement(_index["default"], {
      key: "4",
      width: "default",
      size: "narrow"
    }, "Narrow Button"), _react["default"].createElement(_index["default"], {
      key: "5",
      width: "default",
      size: "tight"
    }, "Tight Button")]
  });
}).add("With icon", function () {
  return _react["default"].createElement(_ButtonRow["default"], {
    centerGroup: [_react["default"].createElement(_index["default"], {
      key: "1",
      width: "default",
      style: "highlight",
      onClick: (0, _addonActions.action)("I have been clicked"),
      leftIcon: "add"
    }, "Left icon"), _react["default"].createElement(_index["default"], {
      key: "2",
      width: "default",
      style: "highlight",
      onClick: (0, _addonActions.action)("I have been clicked"),
      rightIcon: "external"
    }, "Right icon"), _react["default"].createElement(_index["default"], {
      key: "3",
      style: (0, _addonKnobs.select)("style", {
        highlight: "highlight",
        danger: "danger",
        "danger-outline": "danger-outline",
        outline: "outline",
        "outline-reverse": "outline-reverse",
        plain: "plain",
        toggle: "toggle",
        underline: "underline",
        unstyled: "unstyled"
      }, "danger"),
      isDisabled: (0, _addonKnobs["boolean"])("isDisabled", false),
      isActive: (0, _addonKnobs["boolean"])("isActive", false),
      isLoading: (0, _addonKnobs["boolean"])("isLoading", false),
      width: (0, _addonKnobs.select)("width", {
        "default": "default",
        full: "full"
      }, "default"),
      size: (0, _addonKnobs.select)("size", {
        tiny: "tiny",
        small: "small",
        regular: "regular",
        large: "large",
        narrow: "narrow",
        tight: "tight"
      }, "regular"),
      onClick: (0, _addonActions.action)("I have been clicked"),
      leftIcon: (0, _addonKnobs.select)("leftIcon", {
        add: "add",
        archive: "archive",
        "arrow-left": "arrow-left",
        audiences: "audiences",
        bell: "bell",
        ban: "ban",
        calendar: "calendar",
        check: "check",
        close: "close",
        download: "download",
        elipsis: "elipsis",
        exit: "exit",
        external: "external",
        save: "save"
      }, "calendar")
    }, (0, _addonKnobs.text)("customize me!", "customize me!")), _react["default"].createElement(_index["default"], {
      key: "1",
      width: "default",
      style: "outline",
      size: "small",
      onClick: (0, _addonActions.action)("I have been clicked"),
      rightIcon: "calendar"
    }, "Small icon")]
  });
}).add("Button without an onClick", function () {
  return _react["default"].createElement(_index["default"], {
    isLink: true
  }, "Faux Button");
}).add("Button without an onClick (disabled)", function () {
  return _react["default"].createElement(_index["default"], {
    isLink: true,
    isDisabled: true
  }, "Faux Button");
}).add("Button that looks like a Link", function () {
  return _react["default"].createElement(_index["default"], {
    style: "unstyled",
    onClick: (0, _addonActions.action)("Saying hi!")
  }, _react["default"].createElement(_Link["default"], null, "Say Hi"));
}).add("Loading Button that disables on click", function () {
  return _react["default"].createElement(_index["default"], {
    style: "highlight",
    isLoading: (0, _addonKnobs["boolean"])("isLoading", true),
    onClick: (0, _addonActions.action)("I have been clicked")
  }, "Create Campaign");
}).add("Loading Button that disables on click with custom text", function () {
  return _react["default"].createElement(_index["default"], {
    style: "highlight",
    isLoading: (0, _addonKnobs["boolean"])("isLoading", true),
    loadingText: (0, _addonKnobs.text)("loadingText", "Creating Campaign"),
    onClick: (0, _addonActions.action)("I have been clicked")
  }, "Create Campaign");
});