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

Lonely Planet's Components

"use strict";

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

var _mediaQueries;

var _react = require("react");

var _react2 = _interopRequireDefault(_react);

var _radium = require("radium");

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

var _contentBlock = require("../contentBlock");

var _contentBlock2 = _interopRequireDefault(_contentBlock);

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

var _icon2 = _interopRequireDefault(_icon);

var _profile = require("../profile");

var _profile2 = _interopRequireDefault(_profile);

var _color = require("../../utils/color");

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

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

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

var mq = 667 * 0.0625 + "em";

var maxWidth = (0, _grid.add)([(0, _grid.span)(7, "static"), (0, _grid.gutter)("static")], "static");

var scopedStyles = {
  ".Icon": {
    fontSize: "3rem"
  },

  mediaQueries: (_mediaQueries = {}, _defineProperty(_mediaQueries, "(min-width: " + mq + ")", {
    ".Icon": {
      fontSize: "4rem"
    }
  }), _defineProperty(_mediaQueries, "(max-width: " + _settings.media.max["768"] + ")", {
    ".Narrative-content": {
      borderTop: "1px solid " + _settings.color.gray,
      marginTop: "2rem",
      paddingTop: "2.5rem"
    },

    ".Narrative-aside": {
      textAlign: "center"
    },

    ".Narrative-profile": {
      borderBottom: "1px solid " + _settings.color.gray,
      paddingBottom: (0, _grid.gutter)("static")
    }
  }), _defineProperty(_mediaQueries, "(min-width: " + _settings.media.min["768"] + ")", {
    ".Narrative-content": {
      borderLeft: "2px solid rgba(" + (0, _color.rgb)(_settings.color.blue) + ", .4)",
      float: "left",
      paddingLeft: (0, _grid.gutter)("static"),
      width: (0, _grid.percentage)((0, _grid.add)([(0, _grid.span)(6, "static"), (0, _grid.gutter)("static")], "static"), maxWidth)
    },

    ".Narrative-aside": {
      float: "left",
      width: (0, _grid.percentage)((0, _grid.span)(1, "static"), maxWidth)
    },

    ".Narrative-profile": {
      borderTop: "1px solid " + _settings.color.gray,
      clear: "left",
      marginTop: "4.2rem",
      position: "relative",
      width: "100%"
    },

    ".Narrative-profile::before": {
      backgroundColor: _settings.color.white,
      content: "''",
      display: "block",
      height: "calc(100% + 2.2rem)",
      left: "-3.2rem",
      position: "absolute",
      top: "-2.2rem",
      width: ".2rem"
    }
  }), _mediaQueries)
};

/**
 * Intro narrative for POI
 */
function Narrative(_ref) {
  var heading = _ref.heading;
  var htmlContent = _ref.htmlContent;
  var author = _ref.author;

  return _react2.default.createElement(
    "div",
    { className: "Narrative" },
    _react2.default.createElement(_radium.Style, {
      scopeSelector: ".Narrative",
      rules: scopedStyles
    }),
    _react2.default.createElement(
      "aside",
      { className: "Narrative-aside" },
      _react2.default.createElement(_icon2.default.DiamondLogo, { fill: _settings.color.blue })
    ),
    _react2.default.createElement(
      "div",
      { className: "Narrative-content" },
      _react2.default.createElement(_contentBlock2.default, {
        heading: heading,
        htmlContent: htmlContent
      }),
      author && _react2.default.createElement(
        "div",
        { className: "Narrative-profile" },
        _react2.default.createElement(_profile2.default, {
          name: author.name,
          title: author.title,
          avatar: author.avatar,
          profileUrl: author.url,
          orientation: "horizontal",
          size: "small"
        })
      )
    )
  );
}

Narrative.propTypes = {
  /**
   * Title of the narrative
   */
  heading: _react2.default.PropTypes.string.isRequired,

  /**
   * HTML formatted content
   */
  htmlContent: _react2.default.PropTypes.string.isRequired,

  /**
   * Author object
   */
  author: _react2.default.PropTypes.shape({
    name: _react2.default.PropTypes.string,
    title: _react2.default.PropTypes.string,
    avatar: _react2.default.PropTypes.string,
    url: _react2.default.PropTypes.string
  })
};

Narrative.defaultProps = {
  heading: "",

  htmlContent: "",

  author: null
};

Narrative.styles = scopedStyles;

exports.default = Narrative;