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

Lonely Planet's Components

"use strict";

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

var _extends2 = require("babel-runtime/helpers/extends");

var _extends3 = _interopRequireDefault(_extends2);

var _objectWithoutProperties2 = require("babel-runtime/helpers/objectWithoutProperties");

var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);

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 _upperFirst = require("lodash/upperFirst");

var _upperFirst2 = _interopRequireDefault(_upperFirst);

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

var _font = require("../../utils/font");

var _font2 = _interopRequireDefault(_font);

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

var _icon2 = _interopRequireDefault(_icon);

var _createQAHook = require("../../utils/createQAHook");

var _createQAHook2 = _interopRequireDefault(_createQAHook);

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

var _ = { upperFirst: _upperFirst2.default };

var styles = {
  container: {
    base: (0, _objectAssign2.default)({}, (0, _mixins.blueLink)(), {
      backgroundColor: "transparent",
      border: 0,
      cursor: "pointer",
      display: "inline-block",
      fontFamily: (0, _font2.default)("benton"),
      fontSize: "13px",
      fontWeight: 400,
      lineHeight: 1,
      padding: 0,
      letterSpacing: "0.6px"
    }),

    caps: {
      fontWeight: 600,
      textTransform: "uppercase"
    },

    size: {
      small: {
        fontSize: "11px"
      }
    }
  },

  icon: {
    base: {
      position: "relative",
      top: -2 / 13 + "em",
      verticalAlign: "baseline"
    },

    size: {
      small: {
        top: -1 / 11 + "em"
      }
    }
  }
};

/**
 * MoreLink component
 *
 * @usage
 * <MoreLink href="/foo">View all tours</MoreLink>
 */
function MoreLink(_ref) {
  var href = _ref.href,
      size = _ref.size,
      children = _ref.children,
      onClick = _ref.onClick,
      caps = _ref.caps,
      hideIcon = _ref.hideIcon,
      isNested = _ref.isNested,
      style = _ref.style,
      arrowDirection = _ref.arrowDirection,
      target = _ref.target,
      qaHook = _ref.qaHook,
      rest = (0, _objectWithoutProperties3.default)(_ref, ["href", "size", "children", "onClick", "caps", "hideIcon", "isNested", "style", "arrowDirection", "target", "qaHook"]);

  var Element = "";

  if (isNested) {
    Element = "span";
  } else if (href) {
    Element = "a";
  } else {
    Element = "button";
  }

  var iconStyle = (0, _objectAssign2.default)({}, styles.icon.base, size && styles.icon.size[size], arrowDirection !== "left" && { marginLeft: ".5em" }, arrowDirection === "left" && { marginRight: ".5em" });

  var IconElement = (0, _icon2.default)("Chevron" + _.upperFirst(arrowDirection), {
    height: "6px",
    width: "6px",
    style: iconStyle
  });

  return _react2.default.createElement(
    Element,
    (0, _extends3.default)({
      className: "MoreLink",
      style: [styles.container.base, caps && styles.container.caps, size && styles.container.size[size], style],
      href: href,
      "data-testid": qaHook ? (0, _createQAHook2.default)(qaHook, "morelink", "" + (Element === "a" ? "link" : Element)) : null,
      target: target,
      onClick: onClick
    }, rest),
    !hideIcon && arrowDirection === "left" && IconElement,
    children,
    !hideIcon && arrowDirection !== "left" && IconElement
  );
}

MoreLink.propTypes = {
  /**
   * Content for the link
   */
  children: _propTypes2.default.node.isRequired,

  /**
   * Where the link should point to
   */
  href: _propTypes2.default.string,

  /**
   * Adjusts the font size
   */
  size: _propTypes2.default.oneOf(["", "small"]),

  /**
   * Fires onclick function
   */
  onClick: _propTypes2.default.func,

  /**
   * Applies textTransform and fontWeight CSS properties
   */
  caps: _propTypes2.default.bool,

  /**
   * If the arrow icon should be hidden
   */
  hideIcon: _propTypes2.default.bool,

  /**
   * If the link is nested within another link; makes the container a `span`
   */
  isNested: _propTypes2.default.bool,

  /**
   * Object to add override or positioning styles
   */
  style: _propTypes2.default.objectOf(_propTypes2.default.string, _propTypes2.default.number),

  /**
   * Direction of the arrow
   */
  arrowDirection: _propTypes2.default.oneOf(["up", "down", "left", "right"]),

  /**
   * Specifies where to open the linked document
   */
  target: _propTypes2.default.oneOf(["_blank", "_parent", "_self", "_top"]),

  /**
   * Specifies a qa hook to leverage
   */
  qaHook: _propTypes2.default.string
};

MoreLink.defaultProps = {
  href: null,
  size: "",
  onClick: null,
  caps: false,
  hideIcon: false,
  isNested: false,
  style: {},
  arrowDirection: "right",
  target: null,
  qaHook: null
};

MoreLink.styles = styles;

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