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

Lonely Planet's Components

"use strict";

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

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

var _react = require("react");

var _react2 = _interopRequireDefault(_react);

var _radium = require("radium");

var _radium2 = _interopRequireDefault(_radium);

var _capitalize = require("lodash/capitalize");

var _capitalize2 = _interopRequireDefault(_capitalize);

var _settings = require("../../../settings.json");

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

var _icon2 = _interopRequireDefault(_icon);

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

var _schema = require("../../utils/schema");

var _schema2 = _interopRequireDefault(_schema);

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

var _font2 = _interopRequireDefault(_font);

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

var _ = { capitalize: _capitalize2.default };

var styles = {
  container: {
    base: {
      color: _settings.color.lightText,
      fontFamily: (0, _font2.default)("benton"),
      fontSize: "14px",
      fontWeight: 400,
      lineHeight: 1
    }
  },

  item: {
    padded: {
      marginRight: 10 / 14 + "em"
    }
  },

  anchor: {
    base: (0, _mixins.blueLink)(),

    padded: {
      marginRight: 10 / 14 + "em"
    }
  }
};

var listMicroData = (0, _schema2.default)({
  itemType: "BreadcrumbList"
});

var itemMicroData = (0, _schema2.default)({
  itemProp: "itemListElement",
  itemType: "ListItem"
});

function linkMicroData(link) {
  if (link && link.type) {
    return (0, _schema2.default)({
      itemProp: "item",
      itemType: _.capitalize(link.type)
    });
  }

  return (0, _schema2.default)({
    itemProp: "item",
    itemType: "Thing"
  });
}

/**
 * Breadcrumb navigation component
 */
function Breadcrumbs(_ref) {
  var links = _ref.links;

  var items = links.map(function (link, index) {
    return _react2.default.createElement(
      "span",
      _extends({
        className: "Breadcrumbs-item",
        style: [index !== links.length - 1 && styles.item.padded],
        key: index
      }, itemMicroData),
      _react2.default.createElement(
        "a",
        _extends({
          style: [styles.anchor.base, index < links.length - 1 && styles.anchor.padded],
          href: "//www.lonelyplanet.com" + link.href,
          key: index
        }, linkMicroData(link)),
        _react2.default.createElement(
          "span",
          { itemProp: "name" },
          link.title
        )
      ),
      index < links.length - 1 && _react2.default.createElement(_icon2.default.ChevronRight, {
        width: 6 / 14 + "em",
        height: 6 / 14 + "em"
      }),
      _react2.default.createElement("meta", { itemProp: "position", content: index + 1 })
    );
  });

  return _react2.default.createElement(
    "nav",
    _extends({
      className: "Breadcrumbs",
      style: styles.container.base
    }, listMicroData),
    items
  );
}

Breadcrumbs.propTypes = {
  /**
   * An array of links for the navigation
   */
  links: _react2.default.PropTypes.arrayOf(_react2.default.PropTypes.shape({
    title: _react2.default.PropTypes.string,
    href: _react2.default.PropTypes.string,
    type: _react2.default.PropTypes.string
  })).isRequired
};

Breadcrumbs.defaultProps = {
  links: []
};

Breadcrumbs.styles = styles;

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