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

React components to support the MCP styleguide

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;
};
import React, { useEffect, useState } from 'react';
import { cx, css } from '@emotion/css';
import cvar from './theme/cvar';
import CloseSvg from './icons/CloseSvg';
import WarningSvg from './icons/WarningSvg';
import ErrorSvg from './icons/ErrorSvg';
import InfoSvg from './icons/InfoSvg';
import SuccessSvg from './icons/SuccessSvg';
import { useFeatureFlags } from './FeatureFlags';
const alertColorMap = {
    success: 'color-background-success',
    info: 'color-background-info',
    warning: 'color-background-warning',
    danger: 'color-background-error',
};
const alertIconMap = {
    success: React.createElement(SuccessSvg, null),
    info: React.createElement(InfoSvg, null),
    warning: React.createElement(WarningSvg, null),
    danger: React.createElement(ErrorSvg, null),
};
const alertContentCss = css `
  padding: ${cvar('spacing-16')};
  align-self: center;
  flex: 1;
`;
const alertCloseCss = css `
  background-color: transparent;
  background-repeat: no-repeat;
  border: none;
  cursor: pointer;
  overflow: hidden;
  outline: none;
`;
const alertCloseWrapperCss = css `
  padding: ${cvar('spacing-16')} ${cvar('spacing-16')} ${cvar('spacing-16')} 0;
  text-align: center;
`;
const alertIconCss = (status) => css `
  padding: ${cvar('spacing-16')} ${cvar('spacing-8')};
  width: 40px;
  background-color: ${cvar(alertColorMap[status])};
  text-align: center;
`;
const alertCss = (status) => css `
  position: relative;
  display: flex;
  border: 1px solid ${cvar(alertColorMap[status])};
  border-radius: 2px;
  margin-bottom: ${cvar('spacing-16')};
  background: #fff;
`;
const alertNoOuterMarginCss = css `
  margin-bottom: 0;
`;
/** @internal */
export const AlertStateless = (_a) => {
    var { status, message, title, dismissible = true, onDismiss, className } = _a, rest = __rest(_a, ["status", "message", "title", "dismissible", "onDismiss", "className"]);
    const { v17_noOuterSpacing } = useFeatureFlags();
    const dismissibleButton = dismissible ? (React.createElement("div", { className: alertCloseWrapperCss },
        React.createElement("button", { type: "button", className: alertCloseCss, onClick: onDismiss, "aria-label": "Close alert" },
            React.createElement(CloseSvg, null)))) : ('');
    return (React.createElement("div", Object.assign({ className: cx('crc-alert', alertCss(status || 'danger'), v17_noOuterSpacing && alertNoOuterMarginCss, className) }, rest),
        React.createElement("div", { className: alertIconCss(status || 'danger') }, alertIconMap[status || 'danger']),
        React.createElement("div", { className: alertContentCss },
            title ? (React.createElement("p", null,
                React.createElement("strong", null, title))) : null,
            message),
        dismissibleButton));
};
export const Alert = (props) => {
    const { dismissible = true, dismissed = false, onDismiss } = props;
    const [localDismissed, setLocalDismissed] = useState(!!dismissed);
    useEffect(() => {
        setLocalDismissed(!!dismissed);
    }, [dismissed]);
    const onCloseClicked = (e) => {
        setLocalDismissed(true);
        onDismiss && onDismiss(e);
    };
    if (dismissible && localDismissed) {
        return null;
    }
    return React.createElement(AlertStateless, Object.assign({}, props, { dismissible: dismissible, onDismiss: onCloseClicked }));
};
//# sourceMappingURL=Alert.js.map