UNPKG

@pantheon-systems/design-toolkit-react

Version:
64 lines (61 loc) 3.25 kB
import _defineProperty from '@babel/runtime/helpers/defineProperty'; import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties'; import PropTypes from 'prop-types'; import '../Buttons/index.js'; import NotificationStatusIcon from './NotificationStatusIcon.js'; import { jsxs, jsx } from 'react/jsx-runtime'; import CloseButton from '../Buttons/CloseButton.js'; var _excluded = ["children", "dismissCallback", "iconAlt", "isDismissible", "variant", "type"]; function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; } function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; } var notificationTypeStyles = { danger: 'bg-red-1 border-red-3 text-red-4', info: 'bg-blue-1 border-blue-3 text-blue-4', pantheor: 'bg-purple-1 border-purple-3 text-purple-4', success: 'bg-green-1 border-green-3 text-green-4', warning: 'bg-orange-1 border-orange-3 text-orange-5' }; var NotificationBase = function NotificationBase(_ref) { var children = _ref.children, dismissCallback = _ref.dismissCallback, iconAlt = _ref.iconAlt, isDismissible = _ref.isDismissible, variant = _ref.variant, type = _ref.type, rest = _objectWithoutProperties(_ref, _excluded); return /*#__PURE__*/jsxs("div", _objectSpread(_objectSpread({ className: "".concat(notificationTypeStyles[type], " border-solid border ").concat(variant === 'alert' && 'rounded', " mb-4 p-4 relative notification"), role: "alert" }, rest), {}, { children: [/*#__PURE__*/jsxs("span", { className: "flex flex-row mr-10", children: [/*#__PURE__*/jsx(NotificationStatusIcon, { alt: iconAlt, type: type }), /*#__PURE__*/jsx("span", { children: children })] }), isDismissible && /*#__PURE__*/jsx(CloseButton, { callback: dismissCallback, className: 'absolute text-opacity-60 right-4 text-lg top-2 hover:text-opacity-100', type: type })] })); }; NotificationBase.defaultProps = { dismissCallback: function dismissCallback() {}, iconAlt: '', isDismissible: false, variant: 'alert' }; NotificationBase.propTypes = { children: PropTypes.node.isRequired, dismissCallback: PropTypes.func, iconAlt: PropTypes.string, isDismissible: PropTypes.bool, type: PropTypes.oneOf(['danger', 'info', 'pantheor', 'success', 'warning']).isRequired, variant: PropTypes.oneOf(['alert', 'announcement']) }; var NotificationBase$1 = NotificationBase; export { NotificationBase$1 as default }; //# sourceMappingURL=NotificationBase.js.map