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 _propTypes = require("prop-types");

var _propTypes2 = _interopRequireDefault(_propTypes);

var _radium = require("radium");

var _radium2 = _interopRequireDefault(_radium);

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

var _colors2 = _interopRequireDefault(_colors);

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

var _font2 = _interopRequireDefault(_font);

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

var _createQAHook = require("../../utils/createQAHook");

var _createQAHook2 = _interopRequireDefault(_createQAHook);

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

var _heading2 = _interopRequireDefault(_heading);

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)(_colors2.default.linkPrimary),
    "a:active": (0, _mixins.underlinedLink)(_colors2.default.linkPrimary),
    "a:focus": (0, _mixins.underlinedLink)(_colors2.default.linkPrimary),

    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" // Using baseFontSize here instead of 11px because it should be sized relative to container
      }
    },

    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,
      headerLink = _ref.headerLink,
      htmlContent = _ref.htmlContent,
      qaHook = _ref.qaHook;

  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, "data-testid": qaHook ? (0, _createQAHook2.default)(headerLink.label, "header", "link") : null, 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: _propTypes2.default.string,

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

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

  /**
   * QA Hook
   */
  qaHook: _propTypes2.default.bool
};

ContentBlock.defaultProps = {
  heading: "",

  headerLink: null,

  htmlContent: "",

  qaHook: null
};

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