Bump version; add engine constraint

README.md

@@ -12,10 +12,10 @@ Components for building React-based applications at Brown University.
 
 ```sh
 // npm
-npm i BrownUniversity/brown-university-components
+npm i BrownUniversity/brown-university-components#semver:^2.0.0
 
 // yarn
-yarn add git+https://github.com/BrownUniversity/brown-university-components.git#^1.7
+yarn add git+https://github.com/BrownUniversity/brown-university-components.git#^2.0.0
 ```
 
 #### Required Peer Dependencies

dist/es/components/Background.js

@@ -21,7 +21,7 @@ var Tag = styled(function (_ref) {
   return /*#__PURE__*/React.createElement("div", restProps);
 }).withConfig({
   displayName: "Background__Tag",
-  componentId: "uwuoy1-0"
+  componentId: "sc-uwuoy1-0"
 })(["background-image:url(\"", "\");background-repeat:repeat;background-size:1600px;background-color:", ";background-position-y:", "px;", ""], function (_ref2) {
   var url = _ref2.url;
   return url;

dist/es/components/Banner/BannerText.js

@@ -1,4 +1,7 @@
+var _excluded = ["mobileBreakpoint"];
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 import PropTypes from "prop-types";
 import React from "react";
 import styled from "styled-components";
@@ -9,9 +12,13 @@ var serif = typography.serif;
 /*
   inner Tag component
 */
-var Tag = styled.div.withConfig({
+var Tag = styled(function (_ref) {
+  var mobileBreakpoint = _ref.mobileBreakpoint,
+    restProps = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement("div", restProps);
+}).withConfig({
   displayName: "BannerText__Tag",
-  componentId: "lrk5yo-0"
+  componentId: "sc-lrk5yo-0"
 })(["color:", ";font-family:", ";font-size:1.9em;text-shadow:1px 1px 2px rgba(0,0,0,0.4);@media (min-width:", "px){font-size:2.5em;}"], colors.white, serif, function (props) {
   return props.mobileBreakpoint;
 });
@@ -20,8 +27,8 @@ var Tag = styled.div.withConfig({
   outer BannerText component
 */
 var BannerText = function BannerText(props) {
-  return /*#__PURE__*/React.createElement(BannerContext.Consumer, null, function (_ref) {
-    var mobileBreakpoint = _ref.mobileBreakpoint;
+  return /*#__PURE__*/React.createElement(BannerContext.Consumer, null, function (_ref2) {
+    var mobileBreakpoint = _ref2.mobileBreakpoint;
     return /*#__PURE__*/React.createElement(Tag, _extends({}, props, {
       mobileBreakpoint: mobileBreakpoint
     }));

dist/es/components/Banner/index.js

@@ -1,4 +1,5 @@
-var _excluded = ["color", "size", "src", "children", "mobileBreakpoint"];
+var _excluded = ["mobileBreakpoint", "size"],
+  _excluded2 = ["color", "size", "src", "children", "mobileBreakpoint"];
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
@@ -43,28 +44,33 @@ var BannerImage = styled.img.withConfig({
   displayName: "Banner__BannerImage",
   componentId: "sc-11l4cxl-2"
 })(["height:auto;min-width:320px;max-width:100%;width:100%;display:block;"]);
-var BannerChildrenWrapper = styled.div.withConfig({
+var BannerChildrenWrapper = styled(function (_ref2) {
+  var mobileBreakpoint = _ref2.mobileBreakpoint,
+    size = _ref2.size,
+    restProps = _objectWithoutProperties(_ref2, _excluded);
+  return /*#__PURE__*/React.createElement("div", restProps);
+}).withConfig({
   displayName: "Banner__BannerChildrenWrapper",
   componentId: "sc-11l4cxl-3"
 })(["position:absolute;text-align:center;width:100%;z-index:15;top:", ";@media (min-width:", "px){top:", ";}"], function (props) {
   return props.size === "small" ? "5%" : "35%";
 }, function (props) {
   return props.mobileBreakpoint;
-}, function (_ref2) {
-  var size = _ref2.size;
+}, function (_ref3) {
+  var size = _ref3.size;
   return size === "small" ? "20%" : "35%";
 });
 
 /*
   outer Banner component
 */
-var Banner = function Banner(_ref3) {
-  var color = _ref3.color,
-    size = _ref3.size,
-    src = _ref3.src,
-    children = _ref3.children,
-    mobileBreakpoint = _ref3.mobileBreakpoint,
-    restProps = _objectWithoutProperties(_ref3, _excluded);
+var Banner = function Banner(_ref4) {
+  var color = _ref4.color,
+    size = _ref4.size,
+    src = _ref4.src,
+    children = _ref4.children,
+    mobileBreakpoint = _ref4.mobileBreakpoint,
+    restProps = _objectWithoutProperties(_ref4, _excluded2);
   return /*#__PURE__*/React.createElement(BannerWrapper, _extends({}, restProps, {
     role: "banner"
   }), /*#__PURE__*/React.createElement(BannerImageColorWrapper, {

dist/es/components/Button.js

@@ -1,4 +1,6 @@
-var _excluded = ["tag"];
+var _excluded = ["color", "size", "uppercase", "rounded", "outline", "inverse"],
+  _excluded2 = ["tag", "color", "size", "uppercase", "rounded", "outline", "inverse"],
+  _excluded3 = ["tag", "color", "size", "uppercase", "rounded", "outline", "inverse"];
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
@@ -133,36 +135,45 @@ var getColorWithHover = function getColorWithHover(_ref7) {
   inner Tag component
 */
 // TODO: filter color prop with `as` usage (see `styled-components` issue 439)
-var Tag = styled.div.withConfig({
+var Tag = styled(function (_ref8) {
+  var color = _ref8.color,
+    size = _ref8.size,
+    uppercase = _ref8.uppercase,
+    rounded = _ref8.rounded,
+    outline = _ref8.outline,
+    inverse = _ref8.inverse,
+    restProps = _objectWithoutProperties(_ref8, _excluded);
+  return /*#__PURE__*/React.createElement("div", restProps);
+}).withConfig({
   displayName: "Button__Tag",
   componentId: "sc-4pqrql-0"
 })(["", " background-color:", ";border-radius:", ";box-shadow:inset 0 0 0 1px ", ";color:", ";cursor:", ";font-size:", ";opacity:", ";padding:", ";pointer-events:", ";text-transform:", ";", " &:hover,&:focus{background-color:", ";box-shadow:inset 0 0 0 1px ", ";color:", ";", "}"], buttonCSS, function (props) {
   return getBackgroundColor(props);
-}, function (_ref8) {
-  var rounded = _ref8.rounded;
+}, function (_ref9) {
+  var rounded = _ref9.rounded;
   return rounded ? "5px" : null;
 }, function (props) {
   return getBoxShadow(props);
 }, function (props) {
   return getColor(props);
-}, function (_ref9) {
-  var disabled = _ref9.disabled,
-    href = _ref9.href;
+}, function (_ref10) {
+  var disabled = _ref10.disabled,
+    href = _ref10.href;
   return disabled && !href ? "not-allowed" : "pointer";
 }, function (props) {
   return getFontSize(props);
-}, function (_ref10) {
-  var disabled = _ref10.disabled;
-  return disabled ? "0.45" : "1";
 }, function (_ref11) {
-  var href = _ref11.href;
-  return href ? "12px 25px 12px 20px" : "12px 25px";
+  var disabled = _ref11.disabled;
+  return disabled ? "0.45" : "1";
 }, function (_ref12) {
-  var disabled = _ref12.disabled,
-    href = _ref12.href;
-  return disabled && href ? "none" : "auto";
+  var href = _ref12.href;
+  return href ? "12px 25px 12px 20px" : "12px 25px";
 }, function (_ref13) {
-  var uppercase = _ref13.uppercase;
+  var disabled = _ref13.disabled,
+    href = _ref13.href;
+  return disabled && href ? "none" : "auto";
+}, function (_ref14) {
+  var uppercase = _ref14.uppercase;
   return uppercase ? "uppercase" : null;
 }, function (props) {
   return props.href && css(["&::after{", " ", " border-color:transparent transparent transparent ", ";}"], buttonAfterCSS, buttonAfterShiftCSS, getColor(props));
@@ -179,22 +190,50 @@ var Tag = styled.div.withConfig({
 /*
   outer Button component
 */
-var deriveTag = function deriveTag(_ref14) {
-  var tag = _ref14.tag,
-    href = _ref14.href;
+var deriveTag = function deriveTag(_ref15) {
+  var tag = _ref15.tag,
+    href = _ref15.href;
   if (tag === "button" && href) {
     return "a";
   }
   return tag;
 };
+function FilteredAs(props) {
+  /* eslint-disable react/prop-types */
+  var tag = props.tag,
+    color = props.color,
+    size = props.size,
+    uppercase = props.uppercase,
+    rounded = props.rounded,
+    outline = props.outline,
+    inverse = props.inverse,
+    restProps = _objectWithoutProperties(props, _excluded2);
+  /* eslint-enable react/prop-types */
+  var DerivedTag = deriveTag(props);
+  return /*#__PURE__*/React.createElement(DerivedTag, restProps);
+}
 var Button = function Button(props) {
   var tag = props.tag,
-    restProps = _objectWithoutProperties(props, _excluded);
-  var derivedTag = deriveTag(props);
+    color = props.color,
+    size = props.size,
+    uppercase = props.uppercase,
+    rounded = props.rounded,
+    outline = props.outline,
+    inverse = props.inverse,
+    restProps = _objectWithoutProperties(props, _excluded3);
+  var DerivedTag = deriveTag(props);
   return /*#__PURE__*/React.createElement(Tag, _extends({
-    as: derivedTag,
-    type: derivedTag === "button" && props.onClick ? "button" : undefined
-  }, restProps));
+    as: FilteredAs,
+    type: DerivedTag === "button" && props.onClick ? "button" : undefined
+  }, restProps, {
+    tag: tag,
+    color: color,
+    size: size,
+    uppercase: uppercase,
+    rounded: rounded,
+    outline: outline,
+    inverse: inverse
+  }));
 };
 Button.propTypes = {
   tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),

dist/es/components/Hamburger.js

@@ -1,6 +1,6 @@
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 var _excluded = ["color", "isOpen"],
-  _excluded2 = ["tag", "color", "ariaLabel", "onOpen", "onClose"];
+  _excluded2 = ["tag", "color", "ariaLabel", "onOpen", "onClose", "isOpen"];
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
@@ -120,6 +120,7 @@ var Hamburger = /*#__PURE__*/function (_Component) {
         ariaLabel = _this$props.ariaLabel,
         onOpen = _this$props.onOpen,
         onClose = _this$props.onClose,
+        isOpenProp = _this$props.isOpen,
         restProps = _objectWithoutProperties(_this$props, _excluded2);
       var isOpen = this.state.isOpen;
       var isButton = tag === "button";

dist/es/components/Nav/NavItem.js

@@ -1,4 +1,7 @@
+var _excluded = ["mobile", "sub"];
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 import PropTypes from "prop-types";
 import React from "react";
 import styled from "styled-components";
@@ -22,11 +25,16 @@ var getPadding = function getPadding(_ref) {
 /*
   inner Tag component
 */
-var Tag = styled.li.withConfig({
+var Tag = styled(function (_ref2) {
+  var mobile = _ref2.mobile,
+    sub = _ref2.sub,
+    restProps = _objectWithoutProperties(_ref2, _excluded);
+  return /*#__PURE__*/React.createElement("li", restProps);
+}).withConfig({
   displayName: "NavItem__Tag",
   componentId: "sc-1xpcbp5-0"
-})(["display:list-item;border-top:", ";padding:", ";"], function (_ref2) {
-  var mobile = _ref2.mobile;
+})(["display:list-item;border-top:", ";padding:", ";"], function (_ref3) {
+  var mobile = _ref3.mobile;
   return mobile && "0.5px solid #C8C8C880";
 }, function (props) {
   return getPadding(props);
@@ -36,9 +44,9 @@ var Tag = styled.li.withConfig({
   outer NavItem component
 */
 var NavItem = function NavItem(props) {
-  return /*#__PURE__*/React.createElement(NavContext.Consumer, null, function (_ref3) {
-    var mobile = _ref3.mobile,
-      sub = _ref3.sub;
+  return /*#__PURE__*/React.createElement(NavContext.Consumer, null, function (_ref4) {
+    var mobile = _ref4.mobile,
+      sub = _ref4.sub;
     return /*#__PURE__*/React.createElement(Tag, _extends({}, props, {
       mobile: mobile,
       sub: sub

dist/es/components/Nav/NavLink.js

@@ -1,4 +1,5 @@
-var _excluded = ["tag"];
+var _excluded = ["tag", "active", "navbar", "mobile", "sub", "color"],
+  _excluded2 = ["tag"];
 var _templateObject;
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
@@ -232,19 +233,32 @@ var deriveTag = function deriveTag(_ref15) {
   }
   return tag;
 };
-var NavLink = function NavLink(props) {
+function FilteredAs(props) {
+  // eslint-disable-next-line react/prop-types
   var tag = props.tag,
+    active = props.active,
+    navbar = props.navbar,
+    mobile = props.mobile,
+    sub = props.sub,
+    color = props.color,
     restProps = _objectWithoutProperties(props, _excluded);
+  var DerivedTag = deriveTag(props);
+  return /*#__PURE__*/React.createElement(DerivedTag, restProps);
+}
+var NavLink = function NavLink(props) {
+  var tag = props.tag,
+    restProps = _objectWithoutProperties(props, _excluded2);
   var derivedTag = deriveTag(props);
   return /*#__PURE__*/React.createElement(NavContext.Consumer, null, function (_ref16) {
     var navbar = _ref16.navbar,
       mobile = _ref16.mobile,
       sub = _ref16.sub,
       color = _ref16.color;
     return /*#__PURE__*/React.createElement(Tag, _extends({
-      as: derivedTag,
+      as: FilteredAs,
       type: derivedTag === "button" && props.onClick ? "button" : undefined
     }, restProps, {
+      tag: tag,
       navbar: navbar,
       mobile: mobile,
       sub: sub,

dist/es/components/Nav/index.js

@@ -56,7 +56,7 @@ var Tag = styled(function (_ref5) {
   return /*#__PURE__*/React.createElement("ul", restProps);
 }).withConfig({
   displayName: "Nav__Tag",
-  componentId: "axj96a-0"
+  componentId: "sc-axj96a-0"
 })(["list-style:none;margin:0;background-color:", ";display:", ";padding:", ";width:", ";"], function (props) {
   return getBackgroundColor(props);
 }, function (props) {

dist/es/components/Navbar/NavbarNav.js

@@ -27,14 +27,14 @@ var MobileCollapseWrapper = styled(function (_ref) {
   return /*#__PURE__*/React.createElement("div", restProps);
 }).withConfig({
   displayName: "NavbarNav__MobileCollapseWrapper",
-  componentId: "hl2s13-0"
+  componentId: "sc-hl2s13-0"
 })(["box-shadow:0 5px 10px 0 #00000026;left:0;position:absolute;top:75px;width:100%;background-color:", ";"], function (_ref2) {
   var color = _ref2.color;
   return colors[color];
 });
 var MobileNavWrapper = styled.div.withConfig({
   displayName: "NavbarNav__MobileNavWrapper",
-  componentId: "hl2s13-1"
+  componentId: "sc-hl2s13-1"
 })(["padding:0 7vw 1rem;", ";"], media.md(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    padding: 0 33px;\n  "]))));
 
 /*