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

Lonely Planet's Components

"use strict";

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

var _keys = require("babel-runtime/core-js/object/keys");

var _keys2 = _interopRequireDefault(_keys);

var _typeof2 = require("babel-runtime/helpers/typeof");

var _typeof3 = _interopRequireDefault(_typeof2);

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 _objectAssign = require("object-assign");

var _objectAssign2 = _interopRequireDefault(_objectAssign);

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

var _colors2 = _interopRequireDefault(_colors);

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

var _timing2 = _interopRequireDefault(_timing);

var _mixins = require("../../utils/mixins");

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

var _icon2 = _interopRequireDefault(_icon);

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

var baseFontSize = 11;

var styles = {
  container: {
    base: {
      color: _colors2.default.textPrimary,
      display: "flex",
      fontSize: baseFontSize + "px",
      lineHeight: 1
    }
  },

  link: {
    base: {
      color: "inherit",
      display: "flex",
      flex: 1,
      overflow: "hidden",
      paddingBottom: 20 / baseFontSize + "em",
      paddingTop: 20 / baseFontSize + "em",
      transition: "color " + _timing2.default.fast + " ease-in-out",

      ":hover": { color: _colors2.default.linkPrimary },
      ":active": { color: _colors2.default.linkPrimary },
      ":focus": (0, _objectAssign2.default)({}, (0, _mixins.outline)(), { color: _colors2.default.linkPrimary })
    },

    call: {
      paddingRight: 5 / baseFontSize + "em"
    },

    website: {
      paddingLeft: 5 / baseFontSize + "em"
    }
  },

  icon: {
    base: {
      fontSize: 25 / baseFontSize + "em"
    }
  },

  label: {
    base: {
      display: "block",
      flex: 1,
      fontWeight: 600,
      marginLeft: 12 / baseFontSize + "em",
      overflow: "hidden"
    },

    strong: {
      color: _colors2.default.linkPrimary,
      display: "block",
      fontWeight: 400,
      marginTop: 4 / baseFontSize + "em",
      overflow: "hidden",
      textOverflow: "ellipsis",
      whiteSpace: "nowrap"
    }
  }
};

function getTelephone(phone) {
  if ((typeof phone === "undefined" ? "undefined" : (0, _typeof3.default)(phone)) === "object") {
    return (0, _keys2.default)(phone).map(function (t, i) {
      return i === 0 && phone[t];
    });
  }

  return phone && typeof phone === "string" ? phone : "";
}

function ContactBar(_ref) {
  var phone = _ref.phone,
      website = _ref.website,
      qaHook = _ref.qaHook;

  var telephone = getTelephone(phone);

  return _react2.default.createElement(
    "div",
    {
      className: "ContactBar",
      style: styles.container.base
    },
    telephone && _react2.default.createElement(
      "a",
      {
        className: "ContactBar-phone",
        href: "tel:" + telephone,
        style: [styles.link.base, styles.link.call],
        "data-testid": qaHook ? "phone-link" : null,
        key: "phone"
      },
      _react2.default.createElement(_icon2.default, { name: "mobile", style: styles.icon.base }),
      _react2.default.createElement(
        "span",
        { style: styles.label.base },
        "Call ",
        _react2.default.createElement(
          "strong",
          { style: styles.label.strong },
          telephone
        )
      )
    ),
    website && _react2.default.createElement(
      "a",
      {
        className: "ContactBar-website",
        href: website,
        style: [styles.link.base, styles.link.website],
        key: "website",
        "data-testid": qaHook ? "website-link" : null
      },
      _react2.default.createElement(_icon2.default, { name: "globe", style: styles.icon.base }),
      _react2.default.createElement(
        "span",
        { style: styles.label.base },
        "Visit ",
        _react2.default.createElement(
          "strong",
          { style: styles.label.strong },
          website
        )
      )
    )
  );
}

ContactBar.propTypes = {
  /**
   * Phone number for POI
   */
  phone: _propTypes2.default.oneOf([_propTypes2.default.string, _propTypes2.default.object]),

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

  /**
   * QA Hook for custom data hook
   */
  qaHook: _propTypes2.default.bool
};

ContactBar.defaultProps = {
  phone: "",
  website: "",
  qaHook: false
};

ContactBar.styles = styles;

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