backpack-ui/dist/components/narrative/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 _mediaQueries;

var _react = require("react");

var _react2 = _interopRequireDefault(_react);

var _propTypes = require("prop-types");

var _propTypes2 = _interopRequireDefault(_propTypes);

var _radium = require("radium");

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

var _colors2 = _interopRequireDefault(_colors);

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

var _mq2 = _interopRequireDefault(_mq);

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

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

var _articleAuthor = require("../articleAuthor");

var _articleAuthor2 = _interopRequireDefault(_articleAuthor);

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

var _contentBlock2 = _interopRequireDefault(_contentBlock);

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

var _icon2 = _interopRequireDefault(_icon);

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

var mediaQuery = 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 = {}, (0, _defineProperty3.default)(_mediaQueries, "(min-width: " + mediaQuery + ")", {
    ".Icon": {
      fontSize: "4rem"
    }
  }), (0, _defineProperty3.default)(_mediaQueries, "(max-width: " + _mq2.default.max[768] + ")", {
    ".Narrative-content": {
      borderTop: "1px solid " + _colors2.default.borderPrimary,
      marginTop: "2rem",
      paddingTop: "2.5rem"
    },

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

    ".Narrative-profile": {
      borderBottom: "1px solid " + _colors2.default.borderPrimary,
      paddingBottom: (0, _grid.gutter)("static")
    }
  }), (0, _defineProperty3.default)(_mediaQueries, "(min-width: " + _mq2.default.min[768] + ")", {
    ".Narrative-content": {
      borderLeft: "2px solid rgba(" + (0, _color.rgb)(_colors2.default.linkPrimary) + ", .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 " + _colors2.default.borderPrimary,
      clear: "left",
      marginTop: "4.2rem",
      position: "relative",
      width: "100%"
    },

    ".Narrative-profile::before": {
      backgroundColor: _colors2.default.bgPrimary,
      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,
      htmlContent = _ref.htmlContent,
      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: _colors2.default.linkPrimary })
    ),
    _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(_articleAuthor2.default, {
          name: author.name,
          title: author.title,
          avatarSrc: author.avatar,
          href: author.url,
          orientation: "horizontal"
        })
      )
    )
  );
}

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

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

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

Narrative.defaultProps = {
  heading: "",
  htmlContent: "",
  author: null
};

Narrative.styles = scopedStyles;

exports.default = Narrative;