@massds/mayflower-react/dist/Tooltip/index.js

React versions of Mayflower design system UI components

"use strict";

exports.__esModule = true;
exports["default"] = void 0;

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

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

var _IconQuestionmark = _interopRequireDefault(require("../Icon/IconQuestionmark.js"));

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

/**
 * Tooltip module.
 * @module @massds/mayflower-react/Tooltip
 * @requires module:@massds/mayflower-assets/scss/02-molecules/tooltip
 * @requires module:@massds/mayflower-assets/scss/01-atoms/svg-icons
 * @requires module:@massds/mayflower-assets/scss/01-atoms/svg-loc-icons
 */
// eslint-disable-next-line import/no-unresolved
var Tooltip = function Tooltip(tooltip) {
  var HeadingTag = "h" + tooltip.level;
  var location = tooltip.location === 'above' ? 'ma__tooltip__modal--above' : 'ma__tooltip__modal--below';
  var openIcon = tooltip.openIcon ? /*#__PURE__*/_react["default"].createElement(_IconQuestionmark["default"], {
    height: 20,
    width: 20
  }) : '';
  return /*#__PURE__*/_react["default"].createElement("div", {
    className: "ma__tooltip"
  }, /*#__PURE__*/_react["default"].createElement("div", {
    className: "ma__tooltip__inner"
  }, /*#__PURE__*/_react["default"].createElement("input", {
    id: tooltip.controlId,
    type: "checkbox",
    className: "ma__tooltip__control",
    "aria-label": tooltip.info,
    "aria-hidden": "true"
  }), /*#__PURE__*/_react["default"].createElement("label", {
    htmlFor: tooltip.controlId,
    className: "ma__tooltip__open",
    "aria-labelledby": tooltip.controlId,
    "aria-hidden": "true"
  }, tooltip.openText, openIcon), /*#__PURE__*/_react["default"].createElement("section", {
    className: "ma__tooltip__modal " + location
  }, /*#__PURE__*/_react["default"].createElement("div", {
    className: "ma__tooltip__container"
  }, /*#__PURE__*/_react["default"].createElement("label", {
    htmlFor: "{{ tooltip.controlId }}",
    className: "ma__tooltip__close",
    tabIndex: "-1",
    "aria-labelledby": "{{ tooltip.controlId }}",
    "aria-hidden": "true"
  }, tooltip.closeText), /*#__PURE__*/_react["default"].createElement(HeadingTag, {
    className: "ma__tooltip__title"
  }, tooltip.title), /*#__PURE__*/_react["default"].createElement("div", {
    className: "ma__tooltip__message"
  }, tooltip.message)))));
};

Tooltip.defaultValue = {
  level: 2
};
Tooltip.propTypes = process.env.NODE_ENV !== "production" ? {
  /** Text to display to prompt user */
  openText: _propTypes["default"].string.isRequired,

  /** Text to display as close message. */
  closeText: _propTypes["default"].string.isRequired,

  /** Tooltip Message */
  message: _propTypes["default"].string.isRequired,

  /** Unique ID of tooltip */
  controlId: _propTypes["default"].string.isRequired,

  /** Position of tip ('' or above) */
  location: _propTypes["default"].string,

  /** description on link for screen readers */
  info: _propTypes["default"].string.isRequired,

  /** SVG icon */
  openIcon: _propTypes["default"].bool,

  /** Title of opened window */
  title: _propTypes["default"].string,

  /** Heading level of title. Default h2 */
  level: _propTypes["default"].number
} : {};
var _default = Tooltip;
exports["default"] = _default;
module.exports = exports.default;