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

A UI component library from AppNexus.

import _keys from "lodash/keys";
import _noop from "lodash/noop";

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }

function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }

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';
var cx = lucidClassNames.bind('&-Banner');
var bool = PropTypes.bool,
    element = PropTypes.element,
    func = PropTypes.func,
    node = PropTypes.node,
    oneOf = PropTypes.oneOf,
    string = PropTypes.string;
var defaultProps = {
  icon: null,
  isCloseable: true,
  isFilled: true,
  isSmall: false,
  kind: 'default',
  onClose: _noop,
  isClosed: false
};
export var Banner = function Banner(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 = _objectWithoutProperties(props, ["icon", "kind", "className", "children", "isCloseable", "isClosed", "isFilled", "isSmall", "onClose"]);

  var handleClose = function handleClose(_ref) {
    var event = _ref.event,
        props = _ref.props;
    onClose({
      event: event,
      props: props
    });
  };

  var displayedIcon = null;

  if (icon) {
    displayedIcon = icon;
  }

  return /*#__PURE__*/React.createElement(CSSTransition, {
    in: !isClosed,
    classNames: cx('&'),
    timeout: 300,
    unmountOnExit: true
  }, /*#__PURE__*/React.createElement("section", _extends({}, 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 ? /*#__PURE__*/React.createElement("span", {
    className: cx('&-icon')
  }, displayedIcon) : null, /*#__PURE__*/React.createElement("span", {
    className: cx('&-content')
  }, children), isCloseable ? /*#__PURE__*/React.createElement(CloseIcon, {
    isClickable: true,
    size: 8,
    className: cx('&-close'),
    onClick: handleClose
  }) : null));
};
Banner.defaultProps = defaultProps;
Banner.displayName = 'Banner';
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']
};
Banner.propTypes = {
  icon: element,
  isCloseable: bool,
  isFilled: bool,
  isSmall: bool,
  className: string,
  children: node,
  kind: oneOf(['primary', 'success', 'warning', 'danger', 'info', 'default']),
  onClose: func,
  isClosed: bool
};
export default Banner;