@retailmenot/anchor/esm/alert.js

A React UI Library by RetailMeNot

import { c as _slicedToArray, a as _taggedTemplateLiteral } from './anchor-chunk-7b9d8557.js';
import { a as __rest } from './anchor-chunk-27f34e54.js';
import { a as cloneWithProps } from './anchor-chunk-20e4020f.js';
import { a as get } from './anchor-chunk-6ebffda8.js';
import { darken } from 'polished';
import { forwardRef, createElement, useContext, useState, Children, Fragment, useEffect, useRef, createRef, Component, cloneElement, useReducer, PureComponent, isValidElement, createContext, useImperativeHandle } from 'react';
import classNames from 'classnames';
import styled, { css } from '@xstyled/styled-components';
import { space } from '@xstyled/system';
import './addevent.js';
import './anchor-chunk-25c07228.js';
import './arrowback.js';
import './arrowforward.js';
import './avataricon.js';
import './avataroutline.js';
import './barcode.js';
import './bulletlist.js';
import './calendar.js';
import './camera.js';
import './cart.js';
import './cashback.js';
import './cells.js';
import './chat.js';
import './check.js';
import './checksmall.js';
import './chevrondown.js';
import './chevrondownsmall.js';
import './chevronleft.js';
import './chevronleftsmall.js';
import './chevronright.js';
import './chevronrightsmall.js';
import './chevronup.js';
import './chevronupsmall.js';
import './clock.js';
import { Close } from './close.js';
import './closesmall.js';
import './commentmore.js';
import './creditcard.js';
import './crosshairs.js';
import './cut.js';
import './disabled.js';
import './dislike.js';
import './download.js';
import './ellipses.js';
import './ellipsesvertical.js';
import './envelope.js';
import './envelopeopen.js';
import './error.js';
import './expand.js';
import './gear.js';
import './giftcard.js';
import './hamburger.js';
import './heart.js';
import './heartoutline.js';
import './home.js';
import './info.js';
import './infooutline.js';
import './laptop.js';
import './lightning.js';
import './like.js';
import './listicon.js';
import './lock.js';
import './map.js';
import './marker.js';
import './markeroutline.js';
import './mobile.js';
import './news.js';
import './pencil.js';
import './play.js';
import './plus.js';
import './plussmall.js';
import './print.js';
import './question.js';
import './questionoutline.js';
import './refresh.js';
import './retailmenotlogo.js';
import './sadface.js';
import './search.js';
import './share.js';
import './sliders.js';
import './star.js';
import './starhalf.js';
import './staroutline.js';
import './success.js';
import './successoutline.js';
import './tag.js';
import './upload.js';
import './tagadd.js';
import { a as Typography } from './anchor-chunk-5b0bbe0b.js';
import './anchor-chunk-cd7ef49a.js';
import { a as Button } from './anchor-chunk-e1ca097b.js';

function _templateObject3() {
  var data = _taggedTemplateLiteral(["\n    box-sizing: border-box;\n    display: flex;\n\n    .anchor-alert-content {\n        flex: 1 1 auto;\n    }\n    .anchor-icon {\n        flex: 0 0 0;\n        padding: 0 0.5rem 0 0;\n    }\n"]);

  _templateObject3 = function _templateObject3() {
    return data;
  };

  return data;
}

function _templateObject2() {
  var data = _taggedTemplateLiteral(["\n    box-sizing: border-box;\n    position: relative;\n    border-radius: base;\n    font-family: base;\n    padding: 0.5rem 1.5rem 0.5rem 0.5rem;\n    ", ";\n    ", ";\n\n    .anchor-alert-close {\n        position: absolute;\n        top: 0;\n        right: 0;\n\n        &:active,\n        &:hover,\n        &:focus {\n            background-color: transparent;\n        }\n    }\n\n    h4,\n    p {\n        line-height: 1.2em;\n        margin: 0;\n        padding: 0;\n    }\n\n    h4 {\n        padding-bottom: 0.75rem;\n        &:last-child {\n            padding-bottom: 0;\n        }\n    }\n    ", ";\n"]);

  _templateObject2 = function _templateObject2() {
    return data;
  };

  return data;
}

function _templateObject() {
  var data = _taggedTemplateLiteral(["\n        .anchor-alert-icon {\n            ", "\n        }\n    "]);

  _templateObject = function _templateObject() {
    return data;
  };

  return data;
}
var AlertTypes;

(function (AlertTypes) {
  AlertTypes["success"] = "SUCCESS";
  AlertTypes["info"] = "INFO";
  AlertTypes["warning"] = "WARNING";
  AlertTypes["error"] = "ERROR";
})(AlertTypes || (AlertTypes = {}));

var renderAlertTheme = function renderAlertTheme(variant) {
  return css(_templateObject(), function (_ref) {
    var theme = _ref.theme;
    return css({
      color: darken(0.2, get(theme, "colors.".concat(variant.toLowerCase())))
    });
  });
};

var StyledAlert = styled('div')(_templateObject2(), function (_ref2) {
  var variant = _ref2.variant;
  return css({
    backgroundColor: "background.".concat(variant.toLowerCase()),
    border: 'solid thin',
    borderColor: "borders.".concat(variant.toLowerCase())
  });
}, function (_ref3) {
  var variant = _ref3.variant;
  return renderAlertTheme(variant);
}, space);

var renderMessageAndDescription = function renderMessageAndDescription(_ref4) {
  var message = _ref4.message,
      description = _ref4.description;
  return createElement(Fragment, null, message && createElement(Typography, {
    as: "h4"
  }, message), description && createElement(Typography, {
    as: "p",
    color: "text.light"
  }, description));
};

var StyledIconContainer = styled('div')(_templateObject3());
var Alert = function Alert(_a) {
  var className = _a.className,
      children = _a.children,
      _a$onClose = _a.onClose,
      onClose = _a$onClose === void 0 ? function () {
    return null;
  } : _a$onClose,
      message = _a.message,
      description = _a.description,
      closable = _a.closable,
      icon = _a.icon,
      props = __rest(_a, ["className", "children", "onClose", "message", "description", "closable", "icon"]);

  var _React$useState = useState(false),
      _React$useState2 = _slicedToArray(_React$useState, 2),
      isHidden = _React$useState2[0],
      setIsHidden = _React$useState2[1];

  var handleClose = function handleClose() {
    setIsHidden(true);
    onClose();
  };

  return !isHidden ? createElement(StyledAlert, Object.assign({
    className: classNames('anchor-alert', className)
  }, props), closable && createElement(Button, {
    className: "anchor-alert-close",
    size: "xs",
    circular: true,
    variant: "minimal",
    prefix: createElement(Close, {
      color: "rgba(0, 0, 0, 0.3)",
      scale: "sm"
    }),
    onClick: handleClose
  }), icon ? createElement(StyledIconContainer, null, cloneWithProps(icon, {
    className: 'anchor-alert-icon'
  }), createElement("div", {
    className: "anchor-alert-content"
  }, renderMessageAndDescription({
    message: message,
    description: description
  }))) : renderMessageAndDescription({
    message: message,
    description: description
  })) : null;
};

export { Alert, AlertTypes };
//# sourceMappingURL=alert.js.map