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

Lonely Planet's Components

"use strict";

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

var _mediaQueries;

var _react = require("react");

var _react2 = _interopRequireDefault(_react);

var _radium = require("radium");

var _radium2 = _interopRequireDefault(_radium);

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

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

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

var _iconCallout2 = _interopRequireDefault(_iconCallout);

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

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

var styles = {
  container: _defineProperty({
    boxSizing: "border-box",
    display: "flex",
    justifyContent: "space-between",
    maxWidth: _settings.grid.container

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

var scopedStyles = {
  mediaQueries: (_mediaQueries = {}, _defineProperty(_mediaQueries, "(max-width: " + _settings.media.max["480"] + ")", {
    ".IconCallout-icon": {
      fontSize: "71px !important"
    },

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

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

    ".MoreLink": {
      display: "none !important"
    }
  }), _defineProperty(_mediaQueries, "(min-width: " + _settings.media.min["480"] + ") and (max-width: " + _settings.media.max["960"] + ")", {
    ".IconCallout-icon": {
      fontSize: "80px !important"
    }
  }), _defineProperty(_mediaQueries, "(min-width: " + _settings.media.min["480"] + ") and (max-width: " + _settings.media.max["960"] + ")", {
    ".IconCallout a": {
      width: "80% !important"
    }
  }), _defineProperty(_mediaQueries, "(max-width: " + _settings.media.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"
    }
  }), _defineProperty(_mediaQueries, "(min-width: " + _settings.media.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: _settings.color.blue + " !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);