import React from 'react';
import { action } from '@storybook/addon-actions';
import { Provider } from '../../../../common/Links/ReactRouterLinkHelper';
import { Button, Flexbox, Icon } from '../../../..';
import { Display } from '../../../../common/Display';
export default {
  title: 'Molecules / Button / Button',
  parameters: {
    component: Button
  }
};
export var LinkLookingLikeAButton = {
  render: function render() {
    return React.createElement(Provider, null, React.createElement(Display, {
      items: [{
        title: 'Reset',
        component: React.createElement(Button, {
          to: "/route1"
        }, "To Route1")
      }, {
        title: 'Submit',
        component: React.createElement(Button, {
          to: "/route2",
          variant: "secondary"
        }, "To Route2")
      }]
    }));
  },
  name: 'Link looking like a button'
};
export var LinkLookingLikeAButtonThatIsFullWidth = {
  render: function render() {
    return React.createElement(Provider, null, React.createElement(Button, {
      to: "/overview",
      onClick: action('clicked'),
      fullWidth: true
    }, "Button"));
  },
  name: 'Link looking like a button that is full width'
};
export var LinksLookingLikeButtonsComposedInAGroup = {
  render: function render() {
    return React.createElement(Provider, null, React.createElement(Flexbox, {
      container: true,
      gap: 2
    }, React.createElement(Flexbox, {
      item: true,
      flex: "1"
    }, React.createElement(Button, {
      to: "/route1",
      onClick: action('submit'),
      fullWidth: true
    }, "Submit")), React.createElement(Flexbox, {
      item: true,
      flex: "1"
    }, React.createElement(Button, {
      to: "/route2",
      onClick: action('reset'),
      variant: "secondary",
      fullWidth: true
    }, "Reset"))));
  },
  name: 'Links looking like buttons composed in a group'
};
export var LinkLookingLikeAButtonWithRelAsNofollow = {
  render: function render() {
    return React.createElement(Provider, null, React.createElement(Button, {
      to: "/overview",
      rel: "nofollow",
      onClick: action('clicked'),
      fullWidth: true
    }, "Button"));
  },
  name: 'Link looking like a button with rel as nofollow'
};
export var ExternalLinkLookingLikeAButton = {
  render: function render() {
    return React.createElement(Provider, null, React.createElement(Button, {
      to: "//www.google.com",
      external: true,
      rel: "nofollow",
      onClick: action('clicked'),
      fullWidth: true
    }, "Button"));
  },
  name: 'External link looking like a button'
};
export var DisabledLinkLookingLikeAButton = {
  render: function render() {
    return React.createElement(Provider, null, React.createElement(Button, {
      fullWidth: true,
      onClick: action('clicked'),
      size: "m",
      to: "/overview",
      variant: "secondary",
      disabled: true
    }, "Button"));
  },
  name: 'Disabled link looking like a button'
};
export var LinkLookingLikeAButtonWithWithColors = {
  render: function render() {
    return React.createElement(Provider, null, React.createElement(React.Fragment, null, React.createElement(Display, {
      title: "Primary",
      items: [{
        title: 't => t.color.cta',
        component: React.createElement(Button, {
          to: "/overview",
          color: function color(t) {
            return t.color.cta;
          },
          onClick: action('clicked')
        }, "Button")
      }, {
        title: 't => t.color.negative',
        component: React.createElement(Button, {
          to: "/overview",
          color: function color(t) {
            return t.color.negative;
          },
          onClick: action('clicked')
        }, "Button")
      }]
    }), React.createElement(Display, {
      title: "Secondary",
      items: [{
        title: 't => t.color.cta',
        component: React.createElement(Button, {
          variant: "secondary",
          to: "/overview",
          color: function color(t) {
            return t.color.cta;
          },
          onClick: action('clicked')
        }, "Button")
      }, {
        title: 't => t.color.negative',
        component: React.createElement(Button, {
          variant: "secondary",
          to: "/overview",
          color: function color(t) {
            return t.color.negative;
          },
          onClick: action('clicked')
        }, "Button")
      }]
    })));
  },
  name: 'Link looking like a button with with colors'
};
export var NeutralButtonLookingLikeLinkUnderlineOnHover = {
  render: function render() {
    return React.createElement(Provider, null, React.createElement(Display, {
      items: [{
        title: 'Reset',
        component: React.createElement(Button, {
          variant: "neutral",
          to: "/route1"
        }, "To Route1")
      }, {
        title: 'Reset icon right',
        component: React.createElement(Button, {
          icon: React.createElement(Icon.ArrowDown16, null),
          iconPlacement: "right",
          variant: "neutral",
          to: "/route1"
        }, "To Route1")
      }]
    }));
  },
  name: 'Neutral button looking like link'
};