@retailmenot/anchor/ts/Alert/Alert.component.js

A React UI Library by RetailMeNot

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;
};
// REACT
import * as React from 'react';
// VENDOR
import { space as spaceStyles } from '@xstyled/system';
import classNames from 'classnames';
import styled, { css, } from '@xstyled/styled-components';
import { darken } from 'polished';
// COMPONENTS
import { Close } from '../Icon';
import { Typography } from '../Typography';
import { Button } from '../Button';
import { get } from '../utils/get/get';
import { cloneWithProps } from '../utils/cloneWithProps/cloneWithProps';
export var AlertTypes;
(function (AlertTypes) {
    AlertTypes["success"] = "SUCCESS";
    AlertTypes["info"] = "INFO";
    AlertTypes["warning"] = "WARNING";
    AlertTypes["error"] = "ERROR";
})(AlertTypes || (AlertTypes = {}));
const renderAlertTheme = (variant) => {
    return css `
        .anchor-alert-icon {
            ${({ theme }) => css({
        color: darken(0.2, get(theme, `colors.${variant.toLowerCase()}`)),
    })}
        }
    `;
};
const StyledAlert = styled('div') `
    box-sizing: border-box;
    position: relative;
    border-radius: base;
    font-family: base;
    padding: 0.5rem 1.5rem 0.5rem 0.5rem;
    ${({ variant }) => css({
    backgroundColor: `background.${variant.toLowerCase()}`,
    border: 'solid thin',
    borderColor: `borders.${variant.toLowerCase()}`,
})};
    ${({ variant }) => renderAlertTheme(variant)};

    .anchor-alert-close {
        position: absolute;
        top: 0;
        right: 0;

        &:active,
        &:hover,
        &:focus {
            background-color: transparent;
        }
    }

    h4,
    p {
        line-height: 1.2em;
        margin: 0;
        padding: 0;
    }

    h4 {
        padding-bottom: 0.75rem;
        &:last-child {
            padding-bottom: 0;
        }
    }
    ${spaceStyles};
`;
const renderMessageAndDescription = ({ message, description, }) => (React.createElement(React.Fragment, null,
    message && React.createElement(Typography, { as: "h4" }, message),
    description && (React.createElement(Typography, { as: "p", color: "text.light" }, description))));
const StyledIconContainer = styled('div') `
    box-sizing: border-box;
    display: flex;

    .anchor-alert-content {
        flex: 1 1 auto;
    }
    .anchor-icon {
        flex: 0 0 0;
        padding: 0 0.5rem 0 0;
    }
`;
export const Alert = (_a) => {
    var { className, children, onClose = () => null, message, description, closable, icon } = _a, props = __rest(_a, ["className", "children", "onClose", "message", "description", "closable", "icon"]);
    const [isHidden, setIsHidden] = React.useState(false);
    const handleClose = () => {
        setIsHidden(true);
        onClose();
    };
    return !isHidden ? (React.createElement(StyledAlert, Object.assign({ className: classNames('anchor-alert', className) }, props),
        closable && (React.createElement(Button, { className: "anchor-alert-close", size: "xs", circular: true, variant: "minimal", prefix: React.createElement(Close, { color: "rgba(0, 0, 0, 0.3)", scale: "sm" }), onClick: handleClose })),
        icon ? (React.createElement(StyledIconContainer, null,
            cloneWithProps(icon, {
                className: 'anchor-alert-icon',
            }),
            React.createElement("div", { className: "anchor-alert-content" }, renderMessageAndDescription({ message, description })))) : (renderMessageAndDescription({ message, description })))) : null;
};
//# sourceMappingURL=Alert.component.js.map