"use strict";

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

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.InlineLowContrast = exports.Inline = exports.ToastLowContrast = exports.NotificationTypes = exports.Toast = exports.default = void 0;

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

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

var _Notification = require("../Notification");

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

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

var _default = {
  title: 'Components/UI Elements/Notification',
  component: _Notification.NotificationActionButton,
  subcomponents: {
    ToastNotification: _Notification.ToastNotification,
    InlineNotification: _Notification.InlineNotification
  },
  parameters: {
    componentSubtitle: 'Component',
    status: 'released',
    mdx: _README.default
  }
};
exports.default = _default;

var Toast = function Toast(args) {
  return /*#__PURE__*/_react.default.createElement(_Notification.ToastNotification, (0, _extends2.default)({}, args, {
    caption: '00:00:00 AM',
    style: {
      minWidth: '30rem',
      marginBottom: '.5rem'
    }
  }));
};

exports.Toast = Toast;
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
};

var NotificationTypes = function NotificationTypes(args) {
  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, _types.notificationtypes.map(function (e) {
    return /*#__PURE__*/_react.default.createElement("div", {
      style: {
        display: 'inline-block',
        background: e === 'inverse' ? '#ccc' : '',
        padding: '0.3rem'
      }
    }, /*#__PURE__*/_react.default.createElement(_Notification.ToastNotification, (0, _extends2.default)({}, args, {
      kind: e,
      caption: '00:00:00 AM',
      style: {
        minWidth: '30rem',
        marginBottom: '.5rem'
      }
    })));
  }));
};

exports.NotificationTypes = NotificationTypes;
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
    }
  }
};

var ToastLowContrast = function ToastLowContrast(args) {
  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Notification.ToastNotification, (0, _extends2.default)({}, args, {
    kind: "success",
    style: {
      minWidth: '30rem',
      marginBottom: '.5rem'
    }
  })), /*#__PURE__*/_react.default.createElement(_Notification.ToastNotification, (0, _extends2.default)({}, args, {
    kind: "error",
    style: {
      minWidth: '30rem',
      marginBottom: '.5rem'
    }
  })), /*#__PURE__*/_react.default.createElement(_Notification.ToastNotification, (0, _extends2.default)({}, args, {
    kind: "warning",
    style: {
      minWidth: '30rem',
      marginBottom: '.5rem'
    }
  })), /*#__PURE__*/_react.default.createElement(_Notification.ToastNotification, (0, _extends2.default)({}, args, {
    kind: "info",
    style: {
      minWidth: '30rem',
      marginBottom: '.5rem'
    }
  })));
};

exports.ToastLowContrast = ToastLowContrast;
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"
    }
  }
};

var Inline = function Inline(args) {
  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Notification.InlineNotification, (0, _extends2.default)({}, args, {
    kind: "success",
    actions: /*#__PURE__*/_react.default.createElement(_Notification.NotificationActionButton, null, 'Action')
  })), /*#__PURE__*/_react.default.createElement(_Notification.InlineNotification, (0, _extends2.default)({}, args, {
    kind: "error",
    actions: /*#__PURE__*/_react.default.createElement(_Notification.NotificationActionButton, null, 'Action')
  })), /*#__PURE__*/_react.default.createElement(_Notification.InlineNotification, (0, _extends2.default)({}, args, {
    kind: "warning",
    actions: /*#__PURE__*/_react.default.createElement(_Notification.NotificationActionButton, null, 'Action')
  })), /*#__PURE__*/_react.default.createElement(_Notification.InlineNotification, (0, _extends2.default)({}, args, {
    kind: "info",
    actions: /*#__PURE__*/_react.default.createElement(_Notification.NotificationActionButton, null, 'Action')
  })));
};

exports.Inline = Inline;
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"
    }
  }
};

var InlineLowContrast = function InlineLowContrast(args) {
  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Notification.InlineNotification, (0, _extends2.default)({}, args, {
    kind: "success",
    actions: /*#__PURE__*/_react.default.createElement(_Notification.NotificationActionButton, null, 'Action')
  })), /*#__PURE__*/_react.default.createElement(_Notification.InlineNotification, (0, _extends2.default)({}, args, {
    kind: "error",
    actions: /*#__PURE__*/_react.default.createElement(_Notification.NotificationActionButton, null, 'Action')
  })), /*#__PURE__*/_react.default.createElement(_Notification.InlineNotification, (0, _extends2.default)({}, args, {
    kind: "warning",
    actions: /*#__PURE__*/_react.default.createElement(_Notification.NotificationActionButton, null, 'Action')
  })), /*#__PURE__*/_react.default.createElement(_Notification.InlineNotification, (0, _extends2.default)({}, args, {
    kind: "info",
    actions: /*#__PURE__*/_react.default.createElement(_Notification.NotificationActionButton, null, 'Action')
  })));
};

exports.InlineLowContrast = InlineLowContrast;
InlineLowContrast.args = {
  role: 'alert',
  lowContrast: true,
  title: 'Notification title',
  subtitle: 'Subtitle text goes here.',
  iconDescription: 'describes the close button',
  statusIconDescription: 'describes the status icon'
};