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

Optimizely's Component Library.

import _pt from "prop-types";

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

import Icon from "react-oui-icons";
import classNames from "classnames";
import React from "react";
import Button from "../Button";
import { getAssistiveTextFromColorClass } from "../../utils/accessibility";

var renderDismissButton = function renderDismissButton(onDismiss, testSection) {
  return React.createElement("div", {
    className: "oui-butterbar__close"
  }, React.createElement(Button, {
    style: "plain",
    size: "small",
    ariaLabel: "Close alert",
    testSection: "".concat(testSection, "-dismiss"),
    onClick: onDismiss
  }, React.createElement(Icon, {
    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 = getAssistiveTextFromColorClass(type);
  var alignClass = "oui-butterbar ".concat(colorClassName, " ").concat(alignmentClassName).trim();
  var classes = classNames(_defineProperty({}, "".concat(alignClass), true), className);
  var dismissBtn = isDismissible ? renderDismissButton(onDismiss, testSection) : null;
  return React.createElement("div", _extends({
    "data-oui-component": true,
    className: classes,
    "data-test-section": testSection,
    "aria-label": butterbarAriaLabel,
    role: "alert"
  }, props), children, dismissBtn);
};

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