backpack-ui/dist/components/iconCalloutGroup/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 _radium = require("radium");

var _radium2 = _interopRequireDefault(_radium);

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

var _colors2 = _interopRequireDefault(_colors);

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

var _dimensions2 = _interopRequireDefault(_dimensions);

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

var _mq2 = _interopRequireDefault(_mq);

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

var _iconCallout = require("../iconCallout");

var _iconCallout2 = _interopRequireDefault(_iconCallout);

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

var styles = {
  container: (0, _defineProperty3.default)({
    boxSizing: "border-box",
    display: "flex",
    justifyContent: "space-between",
    maxWidth: _dimensions2.default.maxWidth + "px"

  }, "@media (max-width: " + _mq2.default.max[960] + ")", {
    flexWrap: "wrap"
  })
};

var scopedStyles = {
  mediaQueries: (_mediaQueries = {}, (0, _defineProperty3.default)(_mediaQueries, "(max-width: " + _mq2.default.max[480] + ")", {
    ".IconCallout-icon": {
      fontSize: "71px !important"
    },

    ".Heading": {
      fontSize: "14px !important",
      marginTop: "13px !important"
    },

    ".IconCallout-copy": {
      display: "none !important"
    },

    ".MoreLink": {
      display: "none !important"
    }
  }), (0, _defineProperty3.default)(_mediaQueries, "(min-width: " + _mq2.default.min[480] + ") and (max-width: " + _mq2.default.max[960] + ")", {
    ".IconCallout-icon": {
      fontSize: "80px !important"
    }
  }), (0, _defineProperty3.default)(_mediaQueries, "(min-width: " + _mq2.default.min[480] + ") and (max-width: " + _mq2.default.max[960] + ")", {
    ".IconCallout a": {
      width: "80% !important"
    }
  }), (0, _defineProperty3.default)(_mediaQueries, "(max-width: " + _mq2.default.max[960] + ")", {
    ".IconCallout": {
      flex: "1 1 calc(100% / 2)",
      maxWidth: "none !important"
    },

    ".IconCallout:last-child": {
      marginTop: "82px !important"
    },

    ".IconCallout:nth-last-child(2)": {
      marginTop: "82px !important"
    }
  }), (0, _defineProperty3.default)(_mediaQueries, "(min-width: " + _mq2.default.min[960] + ")", {
    ".IconCallout": {
      marginLeft: "calc(" + (0, _grid.gutter)("static") + " / 2) !important",
      marginRight: "calc(" + (0, _grid.gutter)("static") + " / 2) !important"
    }
  }), _mediaQueries),

  // Ideally, the anchor styles would exist within IconCallout, but we don't
  // want to repeat the <Style> block for each IconCallout

  ".IconCallout a:hover .IconCallout-icon": {
    transform: "translateY(-5px)"
  },

  ".IconCallout a:hover .Heading": {
    color: _colors2.default.linkPrimary + " !important"
  }
};

function IconCalloutGroup(_ref) {
  var children = _ref.children;

  return _react2.default.createElement(
    "div",
    { className: "IconCalloutGroup", style: styles.container },
    _react2.default.createElement(_radium.Style, {
      scopeSelector: ".IconCalloutGroup",
      rules: scopedStyles
    }),
    children
  );
}

IconCalloutGroup.propTypes = {
  children: function children(props, propName, componentName) {
    var prop = props[propName];
    var error = null;

    _react2.default.Children.forEach(prop, function (child) {
      if (child.type !== _iconCallout2.default) {
        error = new Error(componentName + " children should be of type \"IconCallout\".");
      }

      if (child.type === _iconCallout2.default && _react2.default.Children.count.length > 4) {
        error = new Error(componentName + " should have no more than 4 children.");
      }
    });

    return error;
  }
};

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