optimizely-oui/dist/js/components/ButterBar/index.js

Optimizely's Component Library.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;

var _propTypes = _interopRequireDefault(require("prop-types"));

var _reactOuiIcons = _interopRequireDefault(require("react-oui-icons"));

var _classnames = _interopRequireDefault(require("classnames"));

var _react = _interopRequireDefault(require("react"));

var _Button = _interopRequireDefault(require("../Button"));

var _accessibility = require("../../utils/accessibility");

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

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 _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

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; }

var renderDismissButton = function renderDismissButton(onDismiss, testSection) {
  return _react["default"].createElement("div", {
    className: "oui-butterbar__close"
  }, _react["default"].createElement(_Button["default"], {
    style: "plain",
    size: "small",
    ariaLabel: "Close alert",
    testSection: "".concat(testSection, "-dismiss"),
    onClick: onDismiss
  }, _react["default"].createElement(_reactOuiIcons["default"], {
    name: "close",
    size: "small"
  })));
};

var ButterBar = function ButterBar(_ref) {
  var _ref$alignment = _ref.alignment,
      alignment = _ref$alignment === void 0 ? "left" : _ref$alignment,
      children = _ref.children,
      className = _ref.className,
      isDismissible = _ref.isDismissible,
      testSection = _ref.testSection,
      _ref$type = _ref.type,
      type = _ref$type === void 0 ? "brand" : _ref$type,
      _ref$onDismiss = _ref.onDismiss,
      onDismiss = _ref$onDismiss === void 0 ? function () {
    return null;
  } : _ref$onDismiss,
      props = _objectWithoutProperties(_ref, ["alignment", "children", "className", "isDismissible", "testSection", "type", "onDismiss"]);

  var colorClassName = "oui-butterbar--".concat(type);
  var alignmentClassName = "oui-text--".concat(alignment);
  var butterbarAriaLabel = (0, _accessibility.getAssistiveTextFromColorClass)(type);
  var alignClass = "oui-butterbar ".concat(colorClassName, " ").concat(alignmentClassName).trim();
  var classes = (0, _classnames["default"])(_defineProperty({}, "".concat(alignClass), true), className);
  var dismissBtn = isDismissible ? renderDismissButton(onDismiss, testSection) : null;
  return _react["default"].createElement("div", _extends({
    "data-oui-component": true,
    className: classes,
    "data-test-section": testSection,
    "aria-label": butterbarAriaLabel,
    role: "alert"
  }, props), children, dismissBtn);
};

ButterBar.propTypes = {
  alignment: _propTypes["default"].oneOf(["left", "center"]),
  children: _propTypes["default"].any,
  className: _propTypes["default"].string,
  isDismissible: _propTypes["default"].bool,
  testSection: _propTypes["default"].string,
  type: _propTypes["default"].oneOf(["bad-news", "brand", "good-news", "warning"]),
  onDismiss: _propTypes["default"].func
};
var _default = ButterBar;
exports["default"] = _default;