backpack-ui/dist/components/container/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 _classnames = require("classnames");

var _classnames2 = _interopRequireDefault(_classnames);

var _dimensions = require("../../styles/dimensions");

var _dimensions2 = _interopRequireDefault(_dimensions);

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

var _mq2 = _interopRequireDefault(_mq);

var _spacing = require("../../styles/spacing");

var _spacing2 = _interopRequireDefault(_spacing);

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

var maxWidth = _dimensions2.default.maxWidth + _spacing2.default.gutter * 4;
var mediaQuery = maxWidth * 0.0625 + "em";

var styles = "\n  .container {\n    box-sizing: border-box;\n    max-width: " + _dimensions2.default.maxWidth + "px;\n    margin-left: auto;\n    margin-right: auto;\n    position: relative;\n  }\n\n  .container::after {\n    content: \" \";\n    display: block;\n    clear: both;\n  }\n\n  @media (max-width: " + _mq2.default.max[480] + ") {\n    .container {\n      padding-left: " + _spacing2.default.gutter / 2 + "px;\n      padding-right: " + _spacing2.default.gutter / 2 + "px;\n    }\n  }\n\n  @media (min-width: " + _mq2.default.min[480] + ") {\n    .container {\n      margin-left: " + _spacing2.default.gutter + "px;\n      margin-right: " + _spacing2.default.gutter + "px;\n    }\n  }\n\n  @media (min-width: " + _mq2.default.min[1080] + ") {\n    .container {\n      margin-left: " + _spacing2.default.gutter * 2 + "px;\n      margin-right: " + _spacing2.default.gutter * 2 + "px;\n    }\n  }\n\n  @media(min-width: " + mediaQuery + ") {\n    .container {\n      margin-left: auto;\n      margin-right: auto;\n    }\n  }\n";

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

var Container = function Container(_ref) {
  var children = _ref.children,
      id = _ref.id,
      className = _ref.className,
      qaHook = _ref.qaHook,
      style = _ref.style;
  return _react2.default.createElement(
    "div",
    {
      id: id,
      className: (0, _classnames2.default)("container", className),
      "data-testid": qaHook,
      style: style
    },
    _react2.default.createElement("style", { dangerouslySetInnerHTML: markup(styles) }),
    children
  );
};

Container.propTypes = {
  children: _propTypes2.default.node.isRequired,
  id: _propTypes2.default.string,
  className: _propTypes2.default.string,
  qaHook: _propTypes2.default.string,
  style: _propTypes2.default.objectOf(_propTypes2.default.object)
};

Container.defaultProps = {
  qaHook: null
};

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