import _extends from "@babel/runtime/helpers/extends";
import React from 'react';
import { ToastNotification, InlineNotification, NotificationActionButton } from '../Notification';
import { notificationtypes } from '../../prop-types/types';
import markdown from './README.mdx';
export default {
  title: 'Components/UI Elements/Notification',
  component: NotificationActionButton,
  subcomponents: {
    ToastNotification: ToastNotification,
    InlineNotification: InlineNotification
  },
  parameters: {
    componentSubtitle: 'Component',
    status: 'released',
    mdx: markdown
  }
};
export var Toast = function Toast(args) {
  return /*#__PURE__*/React.createElement(ToastNotification, _extends({}, args, {
    caption: '00:00:00 AM',
    style: {
      minWidth: '30rem',
      marginBottom: '.5rem'
    }
  }));
};
Toast.args = {
  kind: 'error',
  lowContrast: false,
  role: 'alert',
  title: 'Notification title',
  subtitle: 'Subtitle text goes here.',
  iconDescription: 'describes the close button',
  statusIconDescription: 'describes the status icon',
  hideCloseButton: false
};
export var NotificationTypes = function NotificationTypes(args) {
  return /*#__PURE__*/React.createElement(React.Fragment, null, notificationtypes.map(function (e) {
    return /*#__PURE__*/React.createElement("div", {
      style: {
        display: 'inline-block',
        background: e === 'inverse' ? '#ccc' : '',
        padding: '0.3rem'
      }
    }, /*#__PURE__*/React.createElement(ToastNotification, _extends({}, args, {
      kind: e,
      caption: '00:00:00 AM',
      style: {
        minWidth: '30rem',
        marginBottom: '.5rem'
      }
    })));
  }));
};
NotificationTypes.args = {
  kind: 'error',
  lowContrast: false,
  role: 'alert',
  title: 'Notification title',
  subtitle: 'Subtitle text goes here.',
  iconDescription: 'describes the close button',
  statusIconDescription: 'describes the status icon',
  hideCloseButton: false
};
var hello = "\nBy specifying the `notificationTypes` prop with any of the types below, you can use different styles of the notification.\n\n| type   |  purpose  |\n|----------|-------------|\n| `inline` | Inline notifications show up in task flows, to notify users of the status of an action. They usually appear at the top of the primary content area. |\n| `toast` | Toasts are non-modal, time-based window elements used to display short messages; they usually appear at the top of the screen and disappear after a few seconds.  |\n\nBy changing the `kind` prop you can use different styles of the notification.\n\n| kind   |  Description  |\n|----------|-------------|\n| `info` | notification alert to give information |\n| `success` | notification alert to give success message  |\n| `warning` | notification alert to give warning message |\n| `error` | notification alert to give error message |\n";
NotificationTypes.story = {
  name: 'NotificationTypes',
  parameters: {
    markdown: 'hello',
    docs: {
      storyDescription: hello
    }
  }
};
export var ToastLowContrast = function ToastLowContrast(args) {
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ToastNotification, _extends({}, args, {
    kind: "success",
    style: {
      minWidth: '30rem',
      marginBottom: '.5rem'
    }
  })), /*#__PURE__*/React.createElement(ToastNotification, _extends({}, args, {
    kind: "error",
    style: {
      minWidth: '30rem',
      marginBottom: '.5rem'
    }
  })), /*#__PURE__*/React.createElement(ToastNotification, _extends({}, args, {
    kind: "warning",
    style: {
      minWidth: '30rem',
      marginBottom: '.5rem'
    }
  })), /*#__PURE__*/React.createElement(ToastNotification, _extends({}, args, {
    kind: "info",
    style: {
      minWidth: '30rem',
      marginBottom: '.5rem'
    }
  })));
};
ToastLowContrast.args = {
  lowContrast: true,
  caption: '00:00:00 AM',
  role: 'alert',
  title: 'Notification title',
  subtitle: 'Subtitle text goes here.',
  iconDescription: 'describes the close button',
  statusIconDescription: 'describes the status icon',
  hideCloseButton: false
};
ToastLowContrast.story = {
  parameters: {
    docs: {
      storyDescription: "Use `lowContrast` property to show notification in a low contrast styling"
    }
  }
};
export var Inline = function Inline(args) {
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(InlineNotification, _extends({}, args, {
    kind: "success",
    actions: /*#__PURE__*/React.createElement(NotificationActionButton, null, 'Action')
  })), /*#__PURE__*/React.createElement(InlineNotification, _extends({}, args, {
    kind: "error",
    actions: /*#__PURE__*/React.createElement(NotificationActionButton, null, 'Action')
  })), /*#__PURE__*/React.createElement(InlineNotification, _extends({}, args, {
    kind: "warning",
    actions: /*#__PURE__*/React.createElement(NotificationActionButton, null, 'Action')
  })), /*#__PURE__*/React.createElement(InlineNotification, _extends({}, args, {
    kind: "info",
    actions: /*#__PURE__*/React.createElement(NotificationActionButton, null, 'Action')
  })));
};
Inline.args = {
  role: 'alert',
  title: 'Notification title',
  subtitle: 'Subtitle text goes here.',
  iconDescription: 'describes the close button',
  statusIconDescription: 'describes the status icon'
};
Inline.story = {
  parameters: {
    docs: {
      storyDescription: "Set `notificationType` property to `inline` to style notifcation with an inline flow"
    }
  }
};
export var InlineLowContrast = function InlineLowContrast(args) {
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(InlineNotification, _extends({}, args, {
    kind: "success",
    actions: /*#__PURE__*/React.createElement(NotificationActionButton, null, 'Action')
  })), /*#__PURE__*/React.createElement(InlineNotification, _extends({}, args, {
    kind: "error",
    actions: /*#__PURE__*/React.createElement(NotificationActionButton, null, 'Action')
  })), /*#__PURE__*/React.createElement(InlineNotification, _extends({}, args, {
    kind: "warning",
    actions: /*#__PURE__*/React.createElement(NotificationActionButton, null, 'Action')
  })), /*#__PURE__*/React.createElement(InlineNotification, _extends({}, args, {
    kind: "info",
    actions: /*#__PURE__*/React.createElement(NotificationActionButton, null, 'Action')
  })));
};
InlineLowContrast.args = {
  role: 'alert',
  lowContrast: true,
  title: 'Notification title',
  subtitle: 'Subtitle text goes here.',
  iconDescription: 'describes the close button',
  statusIconDescription: 'describes the status icon'
};