backpack-ui/dist/components/poiPaginator/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 _heading = require("../heading");

var _heading2 = _interopRequireDefault(_heading);

var _paginatorButton = require("../paginatorButton");

var _paginatorButton2 = _interopRequireDefault(_paginatorButton);

var _strapline = require("../strapline");

var _strapline2 = _interopRequireDefault(_strapline);

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

var styles = {
  container: {
    base: {
      marginLeft: "auto",
      marginRight: "auto",
      textAlign: "center"
    }
  },

  title: {
    base: {
      color: _colors2.default.linkPrimary,
      fontWeight: "inherit"
    }
  },

  strapline: {
    base: {
      marginTop: ".7rem"
    }
  },

  button: {
    base: {
      marginTop: "2.7rem"
    }
  }
};

/**
 * PoiPaginator component
 */
function PoiPaginator(_ref) {
  var title = _ref.title,
      topChoice = _ref.topChoice,
      type = _ref.type,
      neighborhood = _ref.neighborhood,
      place = _ref.place,
      onClick = _ref.onClick,
      qaHook = _ref.qaHook;

  var TopChoiceText = void 0;
  var PlaceText = void 0;

  if (topChoice) {
    TopChoiceText = _react2.default.createElement(
      "em",
      { style: styles.topChoice },
      "Top choice ",
      type.toLowerCase()
    );
  } else {
    TopChoiceText = "" + type.toLowerCase();
  }

  if (neighborhood) {
    PlaceText = "located in the " + neighborhood + " neighbourhood";
  } else if (place) {
    PlaceText = "located in " + place;
  }

  return _react2.default.createElement(
    "div",
    { // eslint-disable-line jsx-a11y/no-static-element-interactions
      className: "PoiPaginator",
      style: [styles.container.base, onClick && { cursor: "pointer" }],
      onClick: onClick
    },
    _react2.default.createElement(
      _heading2.default,
      {
        level: 4,
        size: "medium",
        weight: "thin",
        importance: "high",
        override: {
          lineHeight: 34 / 26
        }
      },
      "You might also like ",
      _react2.default.createElement(
        "strong",
        { style: styles.title.base },
        title
      )
    ),
    type && _react2.default.createElement(
      "div",
      {
        className: "PoiPaginator-strapline",
        style: styles.strapline.base
      },
      _react2.default.createElement(
        _strapline2.default,
        {
          size: "tiny",
          color: "gray"
        },
        TopChoiceText,
        " ",
        PlaceText
      )
    ),
    _react2.default.createElement(
      "div",
      {
        className: "PoiPaginator-button",
        style: styles.button.base
      },
      _react2.default.createElement(_paginatorButton2.default, {
        direction: "down",
        color: "blue",
        shadow: "tight",
        size: "small",
        arrow: "triangle",
        onClick: onClick,
        qaHook: qaHook
      })
    )
  );
}

PoiPaginator.propTypes = {
  /**
   * Name of the POI
   */
  title: _propTypes2.default.string.isRequired,

  /**
   * Show the top choice text
   */
  topChoice: _propTypes2.default.bool,

  /**
   * Type of POI
   */
  type: _propTypes2.default.string,

  /**
   * Neighborhood where the POI is located
   */
  neighborhood: _propTypes2.default.string,

  /**
   * Where the POI is located, if neighborhood is null
   */
  place: _propTypes2.default.string,

  /**
   * Function to run on button click
   */
  onClick: _propTypes2.default.func,

  /**
   * Custom QA Hook to handle automated checks
   */
  qaHook: _propTypes2.default.bool
};

PoiPaginator.defaultProps = {
  title: "",
  topChoice: false,
  type: "",
  neighborhood: "",
  place: "",
  onClick: null,
  qaHook: false
};

PoiPaginator.styles = styles;

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