"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.CustomIcon = exports.Large = exports.Small = exports.ButtonIcon = exports.ButtonKind = exports.ButtonRegular = exports.default = void 0;

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

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

var _types = require("../../prop-types/types");

var _iconsReact = require("@wfp/icons-react");

var _README = _interopRequireDefault(require("./README.mdx"));

var _Button = _interopRequireDefault(require("./Button.twig"));

var _twig = require("twig");

var _ = _interopRequireDefault(require("."));

var _default = {
  title: 'Components/UI Elements/Button',
  component: _.default,
  markdown: 'hello',
  parameters: {
    componentSubtitle: 'Component',
    status: 'released',
    mdx: _README.default,
    twig: _Button.default
  }
};
exports.default = _default;

var ButtonRegular = function ButtonRegular(args) {
  return /*#__PURE__*/_react.default.createElement(_.default, args);
};

exports.ButtonRegular = ButtonRegular;
ButtonRegular.args = {
  children: 'Button'
};
ButtonRegular.parameters = {
  design: {
    type: 'figma',
    url: 'https://www.figma.com/file/jtKqyyMTOKgUTstiGvPZMl/?node-id=0%3A1'
  }
};

var ButtonKind = function ButtonKind(args) {
  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, _types.buttonKinds.map(function (e) {
    return /*#__PURE__*/_react.default.createElement("div", {
      style: {
        display: 'inline-block',
        background: e === 'inverse' || e === 'inverse--primary' ? '#ccc' : '',
        padding: '0.3rem'
      }
    }, /*#__PURE__*/_react.default.createElement(_.default, (0, _extends2.default)({}, args, {
      kind: e
    }), e));
  }));
};

exports.ButtonKind = ButtonKind;
ButtonKind.args = {
  children: 'Button'
};
ButtonKind.parameters = {
  code: false
};
var hello = "\nBy changing the `kind` prop you can use different styles of the button.\n\n| kind   |  Description  |\n|----------|-------------|\n| `primary` | the principle call to action on the page |\n| `secondary` | secondary actions on each page   |\n| `tertiary` | simple actions on the page |\n| `accent` | very important actions and only once or twice on each page |\n| `danger` | a negative action (such as Delete) on the page |\n| `danger--primary` | a negative principle call to action (such as Delete) on the page |\n| `ghost` | in places where a regular button would draw too much attention and look similar to links |\n| `inverse--primary` | should be used on dark backgrounds |\n| `inverse` | should be used on dark backgrounds |\n| `navigation`| should be only used in the main navigation |\n";
ButtonKind.story = {
  name: 'Button kinds',
  parameters: {
    markdown: 'hello',
    layout: 'centered',
    docs: {
      storyDescription: hello
    }
  }
};

var ButtonIcon = function ButtonIcon(args) {
  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_.default, {
    icon: _iconsReact.AddCircleGlyph,
    kind: "primary"
  }, "Button with icon"), " ", ' ', /*#__PURE__*/_react.default.createElement(_.default, (0, _extends2.default)({}, args, {
    kind: "tertiary",
    icon: _iconsReact.AddCircleGlyph
  })), " ", ' ', /*#__PURE__*/_react.default.createElement(_.default, (0, _extends2.default)({}, args, {
    iconReverse: true,
    kind: "tertiary",
    icon: _iconsReact.AddCircleGlyph
  }), "With iconReverse"));
};

exports.ButtonIcon = ButtonIcon;
var helloButtonIcon = "\nWhen words are not enough, icons can be used in buttons to better communicate what the button does. Icons should be\nalways paired with text whenever possible.\n\n\nUse the `icon` and `iconDescription` prop to add an Icon to the Button. Refer to the [Icon](?selectedKind=Icon) documentation for usage.\n\nTo show the Icon on the left side use the `iconReverse` prop.\n\nUsing an Button with only an Icon while not beeing recommended can be achieved by leaving the Button text blank.\n";
ButtonIcon.story = {
  name: 'Button with icon',
  parameters: {
    docs: {
      storyDescription: helloButtonIcon
    }
  }
};

var Small = function Small(args) {
  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_.default, {
    small: true
  }, "Small button"), ' ', /*#__PURE__*/_react.default.createElement(_.default, (0, _extends2.default)({}, args, {
    icon: _iconsReact.AddCircleGlyph,
    kind: "tertiary",
    small: true
  }), "With icon"));
};

exports.Small = Small;
var helloButtonSmall = "\nSmall buttons may be used when there is not enough space for a\nregular sized button. This issue is most found in tables. Small button should have three words\nor less.\n";
Small.story = {
  name: 'small Button',
  parameters: {
    docs: {
      storyDescription: helloButtonSmall
    }
  }
};

var Large = function Large(args) {
  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_.default, {
    large: true
  }, "Large button"), ' ', /*#__PURE__*/_react.default.createElement(_.default, (0, _extends2.default)({}, args, {
    icon: _iconsReact.AddCircleGlyph,
    kind: "tertiary",
    large: true
  }), "With icon"));
};

exports.Large = Large;
var helloButtonLarge = "\nSmall buttons may be used when there is not enough space for a\nregular sized button. This issue is most found in tables. Small button should have three words\nor less.\n";
Large.story = {
  name: 'large Button',
  parameters: {
    docs: {
      storyDescription: helloButtonLarge
    }
  }
};

var CustomIcon = function CustomIcon(args) {
  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_.default, {
    large: true,
    icon: /*#__PURE__*/_react.default.createElement("div", null, "Hello")
  }, "Large button"));
};

exports.CustomIcon = CustomIcon;
var CustomIconText = "\nSmall buttons may be used when there is not enough space for a\nregular sized button. This issue is most found in tables. Small button should have three words\nor less.\n";
CustomIcon.story = {
  name: 'large Button',
  parameters: {
    docs: {
      storyDescription: CustomIconText
    }
  }
};