import _extends from "@babel/runtime/helpers/extends";
import React from 'react';
import { buttonKinds } from '../../prop-types/types';
import { AddCircleGlyph } from '@wfp/icons-react';
import markdown from './README.mdx';
import buttonTwig from './Button.twig';
import { twig } from 'twig';
import Button from '.';
export default {
  title: 'Components/UI Elements/Button',
  component: Button,
  markdown: 'hello',
  parameters: {
    componentSubtitle: 'Component',
    status: 'released',
    mdx: markdown,
    twig: buttonTwig
  }
};
export var ButtonRegular = function ButtonRegular(args) {
  return /*#__PURE__*/React.createElement(Button, args);
};
ButtonRegular.args = {
  children: 'Button'
};
ButtonRegular.parameters = {
  design: {
    type: 'figma',
    url: 'https://www.figma.com/file/jtKqyyMTOKgUTstiGvPZMl/?node-id=0%3A1'
  }
};
export var ButtonKind = function ButtonKind(args) {
  return /*#__PURE__*/React.createElement(React.Fragment, null, buttonKinds.map(function (e) {
    return /*#__PURE__*/React.createElement("div", {
      style: {
        display: 'inline-block',
        background: e === 'inverse' || e === 'inverse--primary' ? '#ccc' : '',
        padding: '0.3rem'
      }
    }, /*#__PURE__*/React.createElement(Button, _extends({}, args, {
      kind: e
    }), e));
  }));
};
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
    }
  }
};
export var ButtonIcon = function ButtonIcon(args) {
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
    icon: AddCircleGlyph,
    kind: "primary"
  }, "Button with icon"), " ", ' ', /*#__PURE__*/React.createElement(Button, _extends({}, args, {
    kind: "tertiary",
    icon: AddCircleGlyph
  })), " ", ' ', /*#__PURE__*/React.createElement(Button, _extends({}, args, {
    iconReverse: true,
    kind: "tertiary",
    icon: AddCircleGlyph
  }), "With iconReverse"));
};
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
    }
  }
};
export var Small = function Small(args) {
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
    small: true
  }, "Small button"), ' ', /*#__PURE__*/React.createElement(Button, _extends({}, args, {
    icon: AddCircleGlyph,
    kind: "tertiary",
    small: true
  }), "With icon"));
};
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
    }
  }
};
export var Large = function Large(args) {
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
    large: true
  }, "Large button"), ' ', /*#__PURE__*/React.createElement(Button, _extends({}, args, {
    icon: AddCircleGlyph,
    kind: "tertiary",
    large: true
  }), "With icon"));
};
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
    }
  }
};
export var CustomIcon = function CustomIcon(args) {
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
    large: true,
    icon: /*#__PURE__*/React.createElement("div", null, "Hello")
  }, "Large button"));
};
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
    }
  }
};