@cimpress/react-components/dist/src/Alert.js

React components to support the MCP styleguide

"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    var desc = Object.getOwnPropertyDescriptor(m, k);
    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
      desc = { enumerable: true, get: function() { return m[k]; } };
    }
    Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
    Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
    o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
    __setModuleDefault(result, mod);
    return result;
};
var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Alert = exports.AlertStateless = void 0;
const react_1 = __importStar(require("react"));
const css_1 = require("@emotion/css");
const cvar_1 = __importDefault(require("./theme/cvar"));
const CloseSvg_1 = __importDefault(require("./icons/CloseSvg"));
const WarningSvg_1 = __importDefault(require("./icons/WarningSvg"));
const ErrorSvg_1 = __importDefault(require("./icons/ErrorSvg"));
const InfoSvg_1 = __importDefault(require("./icons/InfoSvg"));
const SuccessSvg_1 = __importDefault(require("./icons/SuccessSvg"));
const FeatureFlags_1 = require("./FeatureFlags");
const alertColorMap = {
    success: 'color-background-success',
    info: 'color-background-info',
    warning: 'color-background-warning',
    danger: 'color-background-error',
};
const alertIconMap = {
    success: react_1.default.createElement(SuccessSvg_1.default, null),
    info: react_1.default.createElement(InfoSvg_1.default, null),
    warning: react_1.default.createElement(WarningSvg_1.default, null),
    danger: react_1.default.createElement(ErrorSvg_1.default, null),
};
const alertContentCss = (0, css_1.css) `
  padding: ${(0, cvar_1.default)('spacing-16')};
  align-self: center;
  flex: 1;
`;
const alertCloseCss = (0, css_1.css) `
  background-color: transparent;
  background-repeat: no-repeat;
  border: none;
  cursor: pointer;
  overflow: hidden;
  outline: none;
`;
const alertCloseWrapperCss = (0, css_1.css) `
  padding: ${(0, cvar_1.default)('spacing-16')} ${(0, cvar_1.default)('spacing-16')} ${(0, cvar_1.default)('spacing-16')} 0;
  text-align: center;
`;
const alertIconCss = (status) => (0, css_1.css) `
  padding: ${(0, cvar_1.default)('spacing-16')} ${(0, cvar_1.default)('spacing-8')};
  width: 40px;
  background-color: ${(0, cvar_1.default)(alertColorMap[status])};
  text-align: center;
`;
const alertCss = (status) => (0, css_1.css) `
  position: relative;
  display: flex;
  border: 1px solid ${(0, cvar_1.default)(alertColorMap[status])};
  border-radius: 2px;
  margin-bottom: ${(0, cvar_1.default)('spacing-16')};
  background: #fff;
`;
const alertNoOuterMarginCss = (0, css_1.css) `
  margin-bottom: 0;
`;
/** @internal */
const AlertStateless = (_a) => {
    var { status, message, title, dismissible = true, onDismiss, className } = _a, rest = __rest(_a, ["status", "message", "title", "dismissible", "onDismiss", "className"]);
    const { v17_noOuterSpacing } = (0, FeatureFlags_1.useFeatureFlags)();
    const dismissibleButton = dismissible ? (react_1.default.createElement("div", { className: alertCloseWrapperCss },
        react_1.default.createElement("button", { type: "button", className: alertCloseCss, onClick: onDismiss, "aria-label": "Close alert" },
            react_1.default.createElement(CloseSvg_1.default, null)))) : ('');
    return (react_1.default.createElement("div", Object.assign({ className: (0, css_1.cx)('crc-alert', alertCss(status || 'danger'), v17_noOuterSpacing && alertNoOuterMarginCss, className) }, rest),
        react_1.default.createElement("div", { className: alertIconCss(status || 'danger') }, alertIconMap[status || 'danger']),
        react_1.default.createElement("div", { className: alertContentCss },
            title ? (react_1.default.createElement("p", null,
                react_1.default.createElement("strong", null, title))) : null,
            message),
        dismissibleButton));
};
exports.AlertStateless = AlertStateless;
const Alert = (props) => {
    const { dismissible = true, dismissed = false, onDismiss } = props;
    const [localDismissed, setLocalDismissed] = (0, react_1.useState)(!!dismissed);
    (0, react_1.useEffect)(() => {
        setLocalDismissed(!!dismissed);
    }, [dismissed]);
    const onCloseClicked = (e) => {
        setLocalDismissed(true);
        onDismiss && onDismiss(e);
    };
    if (dismissible && localDismissed) {
        return null;
    }
    return react_1.default.createElement(exports.AlertStateless, Object.assign({}, props, { dismissible: dismissible, onDismiss: onCloseClicked }));
};
exports.Alert = Alert;
//# sourceMappingURL=Alert.js.map