"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.MixinsStacked = exports.MixinsStackee = exports.MixinsSpacing = exports.DarkBackgroundFocusStyles = exports.FocusStyles = exports.BorderRadius = exports.AsALink = exports.Default = exports["default"] = void 0;

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

var _styledComponents = _interopRequireDefault(require("styled-components"));

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

var _unstyledButton = require("./unstyled-button.component");

var _unstyledButton2 = _interopRequireDefault(require("./unstyled-button.mdx"));

var _index = require("../../../primitives/index");

var _span = require("../../typography/span");

var _branding = require("../../../mixins/branding");

var _marginChecker = require("../../../mixins/spacing/story-support/margin-checker");

var _paddingChecker = require("../../../mixins/spacing/story-support/padding-checker");

var _stackeeChecker = require("../../../mixins/stackee/story-support/stackee-checker");

var _stackedChecker = require("../../../mixins/stacking/story-support/stacked-checker");

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

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

var _default = {
  component: _unstyledButton.UnstyledButton,
  title: 'Components/Actions/Unstyled Button',
  parameters: {
    docs: {
      page: _unstyledButton2["default"]
    }
  }
};
exports["default"] = _default;
var DEFAULT_PROPS = {
  onClick: (0, _addonActions.action)('unstyled button clicked')
};

var Default = function Default() {
  return /*#__PURE__*/_react["default"].createElement(_unstyledButton.UnstyledButton, DEFAULT_PROPS, "I am an unstyled button.");
};

exports.Default = Default;

var AsALink = function AsALink() {
  return /*#__PURE__*/_react["default"].createElement(_unstyledButton.UnstyledButton, _extends({}, DEFAULT_PROPS, {
    href: "https://wealthsimple.com",
    target: "_blank"
  }), "I am an unstyled link");
};

exports.AsALink = AsALink;

var BorderRadius = function BorderRadius() {
  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_unstyledButton.UnstyledButton, _extends({}, DEFAULT_PROPS, {
    borderRadius: 10
  }), "With 10px border radius"), /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement(_unstyledButton.UnstyledButton, _extends({}, DEFAULT_PROPS, {
    borderRadius: 40
  }), "With 40px border radius"));
};

exports.BorderRadius = BorderRadius;

var FocusStyles = function FocusStyles() {
  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_unstyledButton.UnstyledButton, DEFAULT_PROPS, "I am an unstyled button with a regular focus state."), /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement(_unstyledButton.UnstyledButton, _extends({}, DEFAULT_PROPS, {
    insetFocus: true
  }), "I am an unstyled button with a inset focus state."));
};

exports.FocusStyles = FocusStyles;

var DarkBackgroundFocusStyles = function DarkBackgroundFocusStyles() {
  return /*#__PURE__*/_react["default"].createElement(_index.Box, {
    colorName: "brand-secondary-fg",
    spacing: ['p2']
  }, /*#__PURE__*/_react["default"].createElement(_unstyledButton.UnstyledButton, _extends({}, DEFAULT_PROPS, {
    isDarkMode: true
  }), /*#__PURE__*/_react["default"].createElement(_span.Span, {
    colorName: "brand-secondary-bg"
  }, "I am an unstyled button with a dark mode focus state.")));
};

exports.DarkBackgroundFocusStyles = DarkBackgroundFocusStyles;
var BorderedUnstyledButton = (0, _styledComponents["default"])(_unstyledButton.UnstyledButton).withConfig({
  displayName: "BorderedUnstyledButton",
  componentId: "sc-186kc1e-0"
})(["background:", ";border:solid ", " 1px;color:", ";"], (0, _branding.getPaletteColor)('brand-secondary-bg'), (0, _branding.getPaletteColor)('brand-secondary-fg'), (0, _branding.getPaletteColor)('brand-secondary-fg'));

var MixinsSpacing = function MixinsSpacing() {
  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_marginChecker.MarginChecker, _extends({
    Component: BorderedUnstyledButton
  }, DEFAULT_PROPS), "Click me"), /*#__PURE__*/_react["default"].createElement(_paddingChecker.PaddingChecker, _extends({
    Component: BorderedUnstyledButton
  }, DEFAULT_PROPS), "Click me"));
};

exports.MixinsSpacing = MixinsSpacing;

var MixinsStackee = function MixinsStackee() {
  return /*#__PURE__*/_react["default"].createElement(_stackeeChecker.StackeeChecker, _extends({
    Component: BorderedUnstyledButton
  }, DEFAULT_PROPS), "Click me");
};

exports.MixinsStackee = MixinsStackee;

var MixinsStacked = function MixinsStacked() {
  return /*#__PURE__*/_react["default"].createElement(_stackedChecker.StackedChecker, _extends({
    Component: BorderedUnstyledButton
  }, DEFAULT_PROPS, {
    spacing: "p1"
  }));
};

exports.MixinsStacked = MixinsStacked;