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

Lonely Planet's Components

"use strict";

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

var _react = require("react");

var _react2 = _interopRequireDefault(_react);

var _moreLink = require("../moreLink");

var _moreLink2 = _interopRequireDefault(_moreLink);

var _heading = require("../heading");

var _heading2 = _interopRequireDefault(_heading);

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

var _font2 = _interopRequireDefault(_font);

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

var styles = {
  day: {
    base: {
      fontSize: "20px",
      lineHeight: 36 / 20,
      marginTop: 27 / 20 + "em"
    }
  },

  title: {
    base: {
      fontSize: "1em",
      lineHeight: "inherit"
    }
  },

  description: {
    base: {
      fontFamily: (0, _font2.default)("miller"),
      marginTop: -4 / 20 + "em"
    }
  }
};

function TourItinerary(_ref) {
  var itinerary = _ref.itinerary;
  var link = _ref.link;

  return _react2.default.createElement(
    "div",
    { className: "TourItinerary" },
    itinerary.map(function (day, index) {
      return _react2.default.createElement(
        "div",
        { key: index, className: "TourItinerary-day", style: styles.day.base },
        _react2.default.createElement(
          _heading2.default,
          {
            level: 3,
            weight: "thick",
            override: styles.title.base
          },
          day.title
        ),
        _react2.default.createElement(
          "p",
          { style: styles.description.base },
          day.description
        )
      );
    }),
    link && _react2.default.createElement(
      "div",
      { style: { marginTop: "8px" } },
      _react2.default.createElement(
        _moreLink2.default,
        { href: link, size: "small", caps: true },
        "Full itinerary"
      )
    )
  );
}

TourItinerary.propTypes = {
  /**
   * Array of objects for each day of the tour
   */
  itinerary: _react.PropTypes.arrayOf(_react2.default.PropTypes.shape({
    day: _react2.default.PropTypes.number,
    description: _react2.default.PropTypes.string,
    title: _react2.default.PropTypes.string
  })).isRequired,

  /**
   * Link to full itinerary
   */
  link: _react.PropTypes.string
};

TourItinerary.defaultProps = {
  itinerary: [],

  link: ""
};

exports.default = TourItinerary;