import "core-js/modules/es6.object.assign";
import "core-js/modules/web.dom.iterable";
import "core-js/modules/es6.array.iterator";
import "core-js/modules/es6.object.keys";

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }

import React from 'react';
import PropTypes from 'prop-types';
import { Button, Icon } from "./..";
/**
 * @category communication
 * @component alert
 * @variations collab-ui-react
 */

var Alert = function Alert(props) {
  var closable = props.closable,
      message = props.message,
      onHide = props.onHide,
      show = props.show,
      title = props.title,
      type = props.type,
      otherProps = _objectWithoutPropertiesLoose(props, ["closable", "message", "onHide", "show", "title", "type"]);

  return show && React.createElement("div", {
    className: "cui-alert cui-alert--" + type
  }, React.createElement("div", {
    className: "cui-alert__icon"
  }), React.createElement("div", {
    className: 'cui-alert__content'
  }, React.createElement("div", {
    className: "cui-alert__title"
  }, title), React.createElement("div", {
    className: "cui-alert__message"
  }, message)), closable && React.createElement("div", {
    className: "cui-alert__button"
  }, React.createElement(Button, _extends({
    circle: true,
    onClick: onHide,
    size: 44
  }, otherProps), React.createElement(Icon, {
    name: "cancel_16"
  }))));
};

Alert.defaultProps = {
  closable: false,
  message: '',
  onHide: null,
  title: '',
  type: 'info'
};
Alert.propTypes = {
  /**
   *  To show/hide Close CTA of the Alert.
   */
  closable: PropTypes.bool,

  /**
   * optional Alert Message
   */
  message: PropTypes.string,

  /**
   * callback function invoked on close of the Alert. Alert can be closed on click of cross button or esc key.
   * onHide is mandatory props, if not passed Alert can not be closed.
   */
  onHide: PropTypes.func,

  /**
   * show/hide Alert.
   */
  show: PropTypes.bool.isRequired,

  /**
   * optional Alert Title
   */
  title: PropTypes.string,

  /**
   * size of the Alert.
   */
  type: PropTypes.oneOf(['info', 'success', 'warning', 'error'])
};
Alert.displayName = 'Alert';
export default Alert;
/**
* @name Alerts
* @description Create the type of Alert (info, success, warning, or error) by passing in the type prop.
*
* @category communication
* @component alert
* @section default
*
* @js

import {
  Button,
  AlertContainer
} from '@collab-ui/react';

export default class Default extends React.PureComponent {
  state = {
    alertMessage: 'Who\'s awesome?  You are!'
  }

  render() {
    let alertContainer;
    return (
      <section>
        <div>
          <div className='row'>
            <Button
              ariaLabel='Click to Open'
              onClick={() => alertContainer.info(
                'Alert',
                this.state.alertMessage,
                () => console.log('onHide info'),
                { ariaLabel: 'Close Alert' }
              )}
              children='Info/Default'
              color='primary'
            />
          </div>
          <div className='row'>
            <br />
            <Button
              ariaLabel='Click to Open'
              onClick={() => alertContainer.success(
                'Alert',
                this.state.alertMessage,
                () => console.log('onHide info'),
                { ariaLabel: 'Close Alert' }
              )}
              children='Success'
              color='primary'
            />
          </div>
          <div className='row'>
            <br />
            <Button
              ariaLabel='Click to Open'
              onClick={() => alertContainer.warning(
                'Alert',
                this.state.alertMessage,
                () => console.log('onHide info'),
                { ariaLabel: 'Close Alert' }
              )}
              children='Warning'
              color='primary'
            />
          </div>
          <div className='row'>
            <br />
            <Button
              ariaLabel='Click to Open'
              onClick={() => alertContainer.error(
                'Alert',
                this.state.alertMessage,
                () => console.log('onHide info'),
                { ariaLabel: 'Close Alert' }
              )}
              children='Error'
              color='primary'
            />
          </div>
        </div>
        <br />
        <AlertContainer
          ref={ref => alertContainer = ref}
          orderNewest={false}
        />
      </section>
    );
  }
}

**/