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

Lonely Planet's Components

"use strict";

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

var _defineProperty2 = require("babel-runtime/helpers/defineProperty");

var _defineProperty3 = _interopRequireDefault(_defineProperty2);

var _base2, _base3;

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

var _capitalize2 = _interopRequireDefault(_capitalize);

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

var _colors2 = _interopRequireDefault(_colors);

var _link = require("../link");

var _link2 = _interopRequireDefault(_link);

var _mq = require("../../styles/mq");

var _mq2 = _interopRequireDefault(_mq);

var _typography = require("../../styles/typography");

var _text = require("../text");

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

var _strapline2 = _interopRequireDefault(_strapline);

var _grid = require("../../utils/grid");

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

var _propTypes3 = require("../../utils/propTypes");

var _propTypes4 = _interopRequireDefault(_propTypes3);

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

var _ = { capitalize: _capitalize2.default };

var styles = {
  container: {
    base: {
      position: "relative"
    },

    alignment: {
      center: {
        textAlign: "center"
      }
    },

    contained: {
      maxWidth: (0, _grid.span)(10, "static")
    }
  },

  heading: {
    base: (0, _defineProperty3.default)({
      letterSpacing: "-1px"
    }, "@media (max-width: " + _mq2.default.max[600] + ")", {
      fontSize: _typography.fontSizeHeading3 + "px",
      lineHeight: _typography.lineHeightHeading3
    })
  },

  title: {
    base: (_base2 = {
      color: _colors2.default.accentRed,
      marginBottom: "14px"

    }, (0, _defineProperty3.default)(_base2, "@media (min-width: " + _mq2.default.min[560] + ")", {
      display: "inline-block"
    }), (0, _defineProperty3.default)(_base2, "@media (min-width: " + _mq2.default.min[600] + ")", {
      marginBottom: "21px"
    }), _base2)
  },

  topChoice: {
    base: {
      color: _colors2.default.accentRed
    }
  },

  strapline: {
    base: (_base3 = {
      marginTop: "13px"

    }, (0, _defineProperty3.default)(_base3, "@media (max-width: " + _mq2.default.max[600] + ")", {
      paddingLeft: (0, _grid.gutter)("static"),
      paddingRight: (0, _grid.gutter)("static")
    }), (0, _defineProperty3.default)(_base3, "@media (min-width: " + _mq2.default.min[600] + ")", {
      marginTop: "14px"
    }), _base3)
  }
};

var PageHeader = function PageHeader(_ref) {
  var alignment = _ref.alignment,
      contained = _ref.contained,
      topChoice = _ref.topChoice,
      neighborhood = _ref.neighborhood,
      place = _ref.place,
      strapline = _ref.strapline,
      titleHref = _ref.titleHref,
      title = _ref.title,
      heading = _ref.heading,
      type = _ref.type,
      stars = _ref.stars,
      style = _ref.style;

  var TopChoiceText = topChoice && _react2.default.createElement(
    "span",
    { key: "topChoice" },
    _react2.default.createElement(
      "em",
      { style: styles.topChoice.base },
      "Top choice"
    )
  );

  var TypeText = topChoice || stars > 0 ? type.toLowerCase() : _.capitalize(type);

  var PlaceText = _react2.default.createElement(
    "span",
    { key: "placeText" },
    neighborhood ? TypeText + " in the " + neighborhood + " neighbourhood" : TypeText + " in " + place
  );

  var StarText = stars > 0 && _react2.default.createElement(
    "span",
    { key: "starRating" },
    stars,
    " star"
  );

  var straplineText = strapline || [TopChoiceText, " ", StarText, " ", PlaceText];

  var TitleContent = titleHref ? _react2.default.createElement(
    _link2.default,
    { to: titleHref, style: (0, _mixins.blueLink)() },
    title
  ) : title;

  return _react2.default.createElement(
    "header",
    {
      className: "PageHeader",
      style: [styles.container.base, alignment && styles.container.alignment[alignment], contained && styles.container.contained, style]
    },
    title && _react2.default.createElement(
      _text.TextUppercase,
      { style: styles.title.base },
      TitleContent
    ),
    _react2.default.createElement(
      _text.Heading,
      { level: 1, size: 1, weight: "medium", style: styles.heading.base },
      heading
    ),
    (type || strapline) && _react2.default.createElement(
      "div",
      { className: "PageHeader-strapline", style: styles.strapline.base },
      _react2.default.createElement(
        _strapline2.default,
        { size: "small", parent: "pageHeader" },
        straplineText
      )
    )
  );
};

PageHeader.propTypes = {
  /**
   * Text for the heading
   */
  heading: _propTypes2.default.string.isRequired,

  /**
   * Small title
   */
  title: _propTypes2.default.string,

  /**
   * URL for small title
   */
  titleHref: _propTypes2.default.string,

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

  /**
   * Override the strapline
   */
  strapline: _propTypes2.default.string,

  /**
   * 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,

  /**
   * Alignment for header text
   */
  alignment: _propTypes2.default.oneOf(["", "center"]),

  /**
   * Whether or not to set a max width on the header
   */
  contained: _propTypes2.default.bool,

  /**
   * Number of stars a poi has
   */
  stars: _propTypes2.default.number,

  /**
   * Apply custom styles
   */
  style: _propTypes4.default.style
};

PageHeader.defaultProps = {
  title: "",
  titleHref: "",
  topChoice: false,
  type: "",
  neighborhood: "",
  place: "",
  alignment: "",
  contained: false,
  stars: 0,
  style: null
};

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