import React from 'react';
import { action } from '@storybook/addon-actions';
import styled from 'styled-components';
import ActionModal from '.';
import Illustration from '../../Atoms/Illustration';
import Typography from '../../Atoms/Typography';
import Button from '../Button';
export default {
  title: 'Molecules / Action Modal',
  parameters: {
    component: ActionModal
  }
};
var StyledContainer = styled.div.withConfig({
  displayName: "ActionModalstories__StyledContainer",
  componentId: "sc-405tkc-0"
})(["width:100%;height:100vh;box-sizing:border-box;background-color:#e6e6e6;"]);
export var Default = function Default() {
  return React.createElement(StyledContainer, null, React.createElement(ActionModal, {
    illustration: React.createElement(Illustration.Shareville240, {
      color: function color(t) {
        return t.color.actionModalSharevilleIllustration;
      },
      secondaryColor: function secondaryColor(t) {
        return t.color.actionModalSharevilleIllustrationSecondary;
      }
    }),
    title: "title",
    confirmButton: React.createElement(Button, {
      variant: "primary",
      onClick: action('onConfirm'),
      size: "l"
    }, "confirm"),
    cancelButton: React.createElement(Button, {
      variant: "neutral",
      onClick: action('onCancel')
    }, React.createElement(Typography, {
      color: function color(t) {
        return t.colorTokens.action.text_focus;
      },
      type: "secondary",
      weight: "bold"
    }, "skip tour"))
  }, "children are here"));
};
export var WithoutIllustration = function WithoutIllustration() {
  return React.createElement(StyledContainer, null, React.createElement(ActionModal, {
    title: "No Illustration",
    confirmButton: React.createElement(Button, {
      variant: "primary",
      onClick: action('onConfirm'),
      size: "l"
    }, "confirm")
  }, "children are here"));
};
export var WithConfirmButtonOnly = function WithConfirmButtonOnly() {
  return React.createElement(StyledContainer, null, React.createElement(ActionModal, {
    illustration: React.createElement(Illustration.Shareville240, {
      color: function color(t) {
        return t.color.actionModalSharevilleIllustration;
      },
      secondaryColor: function secondaryColor(t) {
        return t.color.actionModalSharevilleIllustrationSecondary;
      }
    }),
    title: "title",
    confirmButton: React.createElement(Button, {
      variant: "primary",
      onClick: action('onConfirm'),
      size: "l"
    }, "confirm")
  }, "children are here"));
};