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

A UI component library from AppNexus.

import _ from 'lodash';
import React from 'react';
import PropTypes from 'react-peek/prop-types';
import { CSSTransition } from 'react-transition-group';
import { lucidClassNames } from '../../util/style-helpers';
import { omitProps } from '../../util/component-types';
import CloseIcon from '../Icon/CloseIcon/CloseIcon';
const cx = lucidClassNames.bind('&-Banner');
const { bool, element, func, node, oneOf, string } = PropTypes;
const defaultProps = {
    icon: null,
    isCloseable: true,
    isFilled: true,
    isSmall: false,
    kind: 'default',
    onClose: _.noop,
    isClosed: false,
};
export const Banner = (props) => {
    const { icon, kind, className, children, isCloseable, isClosed, isFilled, isSmall, onClose, ...passThroughs } = props;
    const handleClose = ({ event, props, }) => {
        onClose({ event, props });
    };
    let displayedIcon = null;
    if (icon) {
        displayedIcon = icon;
    }
    return (React.createElement(CSSTransition, { in: !isClosed, classNames: cx('&'), timeout: 300, unmountOnExit: true },
        React.createElement("section", Object.assign({}, omitProps(passThroughs, undefined, _.keys(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.createElement("span", { className: cx('&-icon') }, displayedIcon)) : null,
            React.createElement("span", { className: cx('&-content') }, children),
            isCloseable ? (React.createElement(CloseIcon, { isClickable: true, size: 8, className: cx('&-close'), onClick: handleClose })) : null)));
};
Banner.defaultProps = defaultProps;
Banner.displayName = 'Banner';
Banner.peek = {
    description: `
		A banner that displays a prominent message.
	`,
    notes: {
        overview: `
			A banner that displays a prominent message.
		`,
        intendedUse: `
			Communicates information, success, a warning, or an error. 
								
			**Styling notes**
			
			- Banners usually display at the top of a page.
			- Use the solid filled banner for single-line content.
			- Use the outlined banner for multi-line content.
			- Color use:
				- Use \`kind:"info"\` (blue) for information, like instructions for a feature.
				- Use \`kind:"success"\` (green) for success messages, like completing a task successfully.
				- Use \`kind:"warning"\` (yellow) for warnings, like a line item that is under-delivering.
				- Use \`kind:"danger"\` (orange) for danger messages, like an error message for missing required content.
				- Use grey banners for new feature announcements.
		`,
        technicalRecommendations: `
			Short single-line content can be passed in as a simple string. Multi-line messages should be passed wrapped in a \`<p>\` tag.
			You can apply styling as needed within a banner, for example using \`strong\`, \`a href\`, or \`em\`.
		`,
    },
    categories: ['communication'],
};
Banner.propTypes = {
    icon: element `
		Pass in a icon component for custom icons within \`Banner\`.
	`,
    isCloseable: bool `
		Set this to \`true\` if you want to have a \`x\` close icon.
	`,
    isFilled: bool `
		Defaults to true.
		If set to \`false\` the banner will not be filled in.
	`,
    isSmall: bool `
		If set to \`true\` the banner have smaller padding on the inside.
	`,
    className: string `
		Class names that are appended to the defaults.
	`,
    children: node `
		Any valid React children.
	`,
    kind: oneOf(['primary', 'success', 'warning', 'danger', 'info', 'default']) `
		Style variations of the \`Banner\`.
	`,
    onClose: func `
		Called when the user closes the \`Banner\`.  Signature:
		\`({ event, props }) => {}\`
	`,
    isClosed: bool `
		Controls the visibility of the \`Banner\`.
	`,
};
export default Banner;