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

Lonely Planet's Components

"use strict";

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

var _react = require("react");

var _react2 = _interopRequireDefault(_react);

var _radium = require("radium");

var _radium2 = _interopRequireDefault(_radium);

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

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

var _heading2 = _interopRequireDefault(_heading);

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

var _font2 = _interopRequireDefault(_font);

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

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

var baseFontSize = 20;
var pMargin = 28 / baseFontSize + "em";
var ulMargin = 60 / baseFontSize + "em";

var scopedStyles = {
  "ContentBlock-text": {
    a: (0, _mixins.underlinedLink)(),
    "a:hover": (0, _mixins.underlinedLink)(_settings.color.blue),
    "a:active": (0, _mixins.underlinedLink)(_settings.color.blue),
    "a:focus": (0, _mixins.underlinedLink)(_settings.color.blue),

    strong: {
      fontWeight: "normal"
    },

    p: {
      marginBottom: pMargin,
      marginTop: pMargin
    },

    ul: {
      marginBottom: pMargin,
      marginLeft: ulMargin,
      marginTop: pMargin
    },

    ol: {
      marginBottom: pMargin,
      marginLeft: ulMargin,
      marginTop: pMargin
    }
  }
};

var styles = {
  container: {
    base: {
      fontSize: baseFontSize + "px"
    }
  },

  header: {
    base: {
      marginBottom: 18 / baseFontSize + "em"
    }
  },

  link: {
    container: {
      base: {
        fontSize: "11px", // Pixel value because it should always be 11px
        lineHeight: 1,
        marginBottom: 0,
        marginTop: 8 / baseFontSize + "em" }
    },

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

  text: {
    base: {
      fontFamily: (0, _font2.default)("miller"),
      fontSize: "1em",
      lineHeight: 36 / 20
    }
  }
};

/**
 * Content block component
 */
function ContentBlock(_ref) {
  var heading = _ref.heading;
  var headerLink = _ref.headerLink;
  var htmlContent = _ref.htmlContent;

  function markup() {
    return {
      __html: htmlContent
    };
  }

  return _react2.default.createElement(
    "section",
    {
      className: "ContentBlock",
      style: styles.container.base
    },
    _react2.default.createElement(_radium.Style, {
      scopeSelector: ".ContentBlock-text",
      rules: scopedStyles["ContentBlock-text"]
    }),
    heading && _react2.default.createElement(
      "header",
      { className: "ContentBlock-header", style: styles.header.base },
      _react2.default.createElement(
        _heading2.default,
        {
          level: 3,
          size: "small",
          weight: "thick",
          caps: true
        },
        heading
      ),
      headerLink && headerLink.label && headerLink.href && _react2.default.createElement(
        "p",
        { style: styles.link.container.base },
        _react2.default.createElement(
          "a",
          { style: styles.link.anchor.base, href: headerLink.href },
          headerLink.label
        )
      )
    ),
    _react2.default.createElement("div", {
      className: "ContentBlock-text",
      dangerouslySetInnerHTML: markup(),
      style: styles.text.base
    })
  );
}

ContentBlock.propTypes = {
  /**
   * Heading to describe the section
   */
  heading: _react2.default.PropTypes.string,

  /**
   * A link that will be placed under the heading
   */
  headerLink: _react2.default.PropTypes.shape({
    label: _react2.default.PropTypes.string,
    href: _react2.default.PropTypes.string
  }),

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

ContentBlock.defaultProps = {
  heading: "",

  headerLink: null,

  htmlContent: ""
};

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