lucid-ui/dist/cjs/components/Banner/Banner.js

A UI component library from AppNexus.

"use strict";
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
    return cooked;
};
var __assign = (this && this.__assign) || function () {
    __assign = Object.assign || function(t) {
        for (var s, i = 1, n = arguments.length; i < n; i++) {
            s = arguments[i];
            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
                t[p] = s[p];
        }
        return t;
    };
    return __assign.apply(this, arguments);
};
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.Banner = void 0;
var lodash_1 = __importDefault(require("lodash"));
var react_1 = __importDefault(require("react"));
var prop_types_1 = __importDefault(require("react-peek/prop-types"));
var react_transition_group_1 = require("react-transition-group");
var style_helpers_1 = require("../../util/style-helpers");
var component_types_1 = require("../../util/component-types");
var CloseIcon_1 = __importDefault(require("../Icon/CloseIcon/CloseIcon"));
var cx = style_helpers_1.lucidClassNames.bind('&-Banner');
var bool = prop_types_1.default.bool, element = prop_types_1.default.element, func = prop_types_1.default.func, node = prop_types_1.default.node, oneOf = prop_types_1.default.oneOf, string = prop_types_1.default.string;
var defaultProps = {
    icon: null,
    isCloseable: true,
    isFilled: true,
    isSmall: false,
    kind: 'default',
    onClose: lodash_1.default.noop,
    isClosed: false,
};
var Banner = function (props) {
    var icon = props.icon, kind = props.kind, className = props.className, children = props.children, isCloseable = props.isCloseable, isClosed = props.isClosed, isFilled = props.isFilled, isSmall = props.isSmall, onClose = props.onClose, passThroughs = __rest(props, ["icon", "kind", "className", "children", "isCloseable", "isClosed", "isFilled", "isSmall", "onClose"]);
    var handleClose = function (_a) {
        var event = _a.event, props = _a.props;
        onClose({ event: event, props: props });
    };
    var displayedIcon = null;
    if (icon) {
        displayedIcon = icon;
    }
    return (react_1.default.createElement(react_transition_group_1.CSSTransition, { in: !isClosed, classNames: cx('&'), timeout: 300, unmountOnExit: true },
        react_1.default.createElement("section", __assign({}, component_types_1.omitProps(passThroughs, undefined, lodash_1.default.keys(exports.Banner.propTypes)), { className: cx('&', {
                '&-has-icon': displayedIcon,
                '&-has-close': isCloseable,
                '&-primary': kind === 'primary',
                '&-success': kind === 'success',
                '&-warning': kind === 'warning',
                '&-danger': kind === 'danger',
                '&-info': kind === 'info',
                '&-small': isSmall,
                '&-filled': isFilled,
            }, className) }),
            displayedIcon ? (react_1.default.createElement("span", { className: cx('&-icon') }, displayedIcon)) : null,
            react_1.default.createElement("span", { className: cx('&-content') }, children),
            isCloseable ? (react_1.default.createElement(CloseIcon_1.default, { isClickable: true, size: 8, className: cx('&-close'), onClick: handleClose })) : null)));
};
exports.Banner = Banner;
exports.Banner.defaultProps = defaultProps;
exports.Banner.displayName = 'Banner';
exports.Banner.peek = {
    description: "\n\t\tA banner that displays a prominent message.\n\t",
    notes: {
        overview: "\n\t\t\tA banner that displays a prominent message.\n\t\t",
        intendedUse: "\n\t\t\tCommunicates information, success, a warning, or an error. \n\t\t\t\t\t\t\t\t\n\t\t\t**Styling notes**\n\t\t\t\n\t\t\t- Banners usually display at the top of a page.\n\t\t\t- Use the solid filled banner for single-line content.\n\t\t\t- Use the outlined banner for multi-line content.\n\t\t\t- Color use:\n\t\t\t\t- Use `kind:\"info\"` (blue) for information, like instructions for a feature.\n\t\t\t\t- Use `kind:\"success\"` (green) for success messages, like completing a task successfully.\n\t\t\t\t- Use `kind:\"warning\"` (yellow) for warnings, like a line item that is under-delivering.\n\t\t\t\t- Use `kind:\"danger\"` (orange) for danger messages, like an error message for missing required content.\n\t\t\t\t- Use grey banners for new feature announcements.\n\t\t",
        technicalRecommendations: "\n\t\t\tShort single-line content can be passed in as a simple string. Multi-line messages should be passed wrapped in a `<p>` tag.\n\t\t\tYou can apply styling as needed within a banner, for example using `strong`, `a href`, or `em`.\n\t\t",
    },
    categories: ['communication'],
};
exports.Banner.propTypes = {
    icon: element(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\t\tPass in a icon component for custom icons within `Banner`.\n\t"], ["\n\t\tPass in a icon component for custom icons within \\`Banner\\`.\n\t"]))),
    isCloseable: bool(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n\t\tSet this to `true` if you want to have a `x` close icon.\n\t"], ["\n\t\tSet this to \\`true\\` if you want to have a \\`x\\` close icon.\n\t"]))),
    isFilled: bool(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n\t\tDefaults to true.\n\t\tIf set to `false` the banner will not be filled in.\n\t"], ["\n\t\tDefaults to true.\n\t\tIf set to \\`false\\` the banner will not be filled in.\n\t"]))),
    isSmall: bool(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n\t\tIf set to `true` the banner have smaller padding on the inside.\n\t"], ["\n\t\tIf set to \\`true\\` the banner have smaller padding on the inside.\n\t"]))),
    className: string(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n\t\tClass names that are appended to the defaults.\n\t"], ["\n\t\tClass names that are appended to the defaults.\n\t"]))),
    children: node(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n\t\tAny valid React children.\n\t"], ["\n\t\tAny valid React children.\n\t"]))),
    kind: oneOf(['primary', 'success', 'warning', 'danger', 'info', 'default'])(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n\t\tStyle variations of the `Banner`.\n\t"], ["\n\t\tStyle variations of the \\`Banner\\`.\n\t"]))),
    onClose: func(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n\t\tCalled when the user closes the `Banner`.  Signature:\n\t\t`({ event, props }) => {}`\n\t"], ["\n\t\tCalled when the user closes the \\`Banner\\`.  Signature:\n\t\t\\`({ event, props }) => {}\\`\n\t"]))),
    isClosed: bool(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n\t\tControls the visibility of the `Banner`.\n\t"], ["\n\t\tControls the visibility of the \\`Banner\\`.\n\t"]))),
};
exports.default = exports.Banner;
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9;
//# sourceMappingURL=Banner.js.map