backpack-ui/dist/components/toolbar/index.js

Lonely Planet's Components

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _react = require("react");

var _react2 = _interopRequireDefault(_react);

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

var _propTypes2 = _interopRequireDefault(_propTypes);

var _radium = require("radium");

var _radium2 = _interopRequireDefault(_radium);

var _colors = require("../../styles/colors");

var _colors2 = _interopRequireDefault(_colors);

var _timing = require("../../styles/timing");

var _timing2 = _interopRequireDefault(_timing);

var _icon = require("../icon");

var _icon2 = _interopRequireDefault(_icon);

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

var hover = {
  color: _colors2.default.linkPrimary
};

var styles = {
  container: {
    base: {
      alignItems: "center",
      borderBottom: 1 / 14 + "em solid " + _colors2.default.borderPrimary,
      borderTop: 1 / 14 + "em solid " + _colors2.default.borderPrimary,
      color: _colors2.default.textPrimary,
      display: "flex",
      fontSize: "14px",
      fontWeight: 600,
      lineHeight: 1,
      paddingTop: 37 / 14 + "em",
      paddingBottom: 35 / 14 + "em"
    }
  },

  link: {
    base: {
      color: "currentColor",
      display: "block",
      flexGrow: 1,
      textAlign: "center",
      transition: "color " + _timing2.default.default,

      ":hover": hover,
      ":active": hover,
      ":focus": hover
    }
  },

  icon: {
    base: {
      fontSize: 25 / 14 + "em",
      marginBottom: 8 / 14 + "em"
    }
  }
};

/**
 * Toolbar component
 */
function Toolbar(_ref) {
  var phone = _ref.phone,
      website = _ref.website,
      directions = _ref.directions,
      qaHook = _ref.qaHook;

  return _react2.default.createElement(
    "div",
    {
      className: "Toolbar",
      style: styles.container.base
    },
    phone && _react2.default.createElement(
      "a",
      {
        href: "tel:",
        style: styles.link.base,
        key: "phone",
        "data-testid": qaHook ? "toolbar-tel-link" : null
      },
      _react2.default.createElement(
        "div",
        {
          className: "Toolbar-icon",
          style: styles.icon.base
        },
        _react2.default.createElement(_icon2.default.Mobile, null)
      ),
      "Call"
    ),
    website && _react2.default.createElement(
      "a",
      {
        href: website,
        style: styles.link.base,
        key: "website",
        "data-testid": qaHook ? "toolbar-website-icon" : null
      },
      _react2.default.createElement(
        "div",
        {
          className: "Toolbar-icon",
          style: styles.icon.base
        },
        _react2.default.createElement(_icon2.default.Globe, null)
      ),
      "Visit"
    ),
    directions && _react2.default.createElement(
      "a",
      {
        href: website,
        style: styles.link.base,
        key: "directions",
        "data-testid": qaHook ? "toolbar-directions-link" : null
      },
      _react2.default.createElement(
        "div",
        {
          className: "Toolbar-icon",
          style: styles.icon.base
        },
        _react2.default.createElement(_icon2.default.Compass, null)
      ),
      "Map"
    )
  );
}

Toolbar.propTypes = {
  /**
   * Phone number for POI
   */
  phone: _propTypes2.default.string,

  /**
   * Website URL for POI
   */
  website: _propTypes2.default.string,

  /**
   * Address or coordinates for POI
   */
  directions: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.arrayOf(_propTypes2.default.string, _propTypes2.default.number)]),

  /**
   * QA Hook
   */
  qaHook: _propTypes2.default.bool
};

Toolbar.defaultProps = {
  phone: "",

  website: "",

  directions: "",

  qaHook: false
};

Toolbar.styles = styles;

exports.default = (0, _radium2.default)(Toolbar);