feat(breakpoints): add breakpoints to oxygen

This can be approved to include breakpoint boundaries in the future.

Author: Seagyn Davis

lib/base-card/index.js

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _style = _interopRequireDefault(require("./style"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var BaseCard = function BaseCard(_ref) {
+  var children = _ref.children,
+      className = _ref.className,
+      shadow = _ref.shadow;
+  return _react["default"].createElement(_style["default"], {
+    className: className,
+    shadow: shadow
+  }, children);
+};
+
+BaseCard.propTypes = {
+  children: _propTypes["default"].node.isRequired,
+  className: _propTypes["default"].string,
+  shadow: _propTypes["default"].oneOf(['standard', 'diffuse', 'long', 'hard-long', 'thick', 'dark-thick'])
+};
+var _default = BaseCard;
+exports["default"] = _default;

lib/base-card/index.js.map

@@ -0,0 +1,51 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+
+var _colors = _interopRequireDefault(require("../colors"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj["default"] = obj; return newObj; } }
+
+var StandardShadow = (0, _styledComponents.css)(["box-shadow:0 9px 12px 0 rgba(7,0,37,0.07),0 2px 4px 0 rgba(7,0,37,0.06);"]);
+var DiffuseShadow = (0, _styledComponents.css)(["box-shadow:8px 13px 18px 0 rgba(7,0,37,0.05);"]);
+var LongShadow = (0, _styledComponents.css)(["box-shadow:0 13px 17px 0 rgba(7,0,37,0.09);"]);
+var HardLongShadow = (0, _styledComponents.css)(["box-shadow:0 15px 20px 0 rgba(7,0,37,0.15);"]);
+var ThickShadow = (0, _styledComponents.css)(["box-shadow:0 16px 21px 0 rgba(7,0,37,0.22);"]);
+var HardThickShadow = (0, _styledComponents.css)(["box-shadow:10px 25px 30px 0 rgba(7,0,37,0.4);"]);
+
+var _default = _styledComponents["default"].div.withConfig({
+  displayName: "style",
+  componentId: "sc-1hzmi6u-0"
+})(["background:", ";border-radius:4px;display:flex;justify-content:center;overflow:hidden;", ";"], _colors["default"].white, function (_ref) {
+  var shadow = _ref.shadow;
+
+  switch (shadow) {
+    case 'standard':
+      return StandardShadow;
+
+    case 'long':
+      return LongShadow;
+
+    case 'hard-long':
+      return HardLongShadow;
+
+    case 'thick':
+      return ThickShadow;
+
+    case 'hard-thick':
+      return HardThickShadow;
+
+    case 'diffuse':
+    default:
+      return DiffuseShadow;
+  }
+});
+
+exports["default"] = _default;

lib/base-card/style.js

@@ -0,0 +1,102 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _style = _interopRequireDefault(require("./style"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+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; }
+
+var Loading = function Loading(props) {
+  return _react["default"].createElement("svg", props, _react["default"].createElement("g", {
+    fill: "none",
+    fillRule: "evenodd",
+    strokeWidth: "3"
+  }, _react["default"].createElement("circle", {
+    cx: "22",
+    cy: "22",
+    r: "2"
+  }, _react["default"].createElement("animate", {
+    attributeName: "r",
+    begin: "0s",
+    dur: "1.8s",
+    values: "1; 20",
+    calcMode: "spline",
+    keyTimes: "0; 1",
+    keySplines: "0.165, 0.84, 0.44, 1",
+    repeatCount: "indefinite"
+  }), _react["default"].createElement("animate", {
+    attributeName: "stroke-opacity",
+    begin: "0s",
+    dur: "1.8s",
+    values: "1; 0",
+    calcMode: "spline",
+    keyTimes: "0; 1",
+    keySplines: "0.3, 0.61, 0.355, 1",
+    repeatCount: "indefinite"
+  })), _react["default"].createElement("circle", {
+    cx: "22",
+    cy: "22",
+    r: "2"
+  }, _react["default"].createElement("animate", {
+    attributeName: "r",
+    begin: "-0.9s",
+    dur: "1.8s",
+    values: "1; 20",
+    calcMode: "spline",
+    keyTimes: "0; 1",
+    keySplines: "0.165, 0.84, 0.44, 1",
+    repeatCount: "indefinite"
+  }), _react["default"].createElement("animate", {
+    attributeName: "stroke-opacity",
+    begin: "-0.9s",
+    dur: "1.8s",
+    values: "1; 0",
+    calcMode: "spline",
+    keyTimes: "0; 1",
+    keySplines: "0.3, 0.61, 0.355, 1",
+    repeatCount: "indefinite"
+  }))));
+};
+
+Loading.defaultProps = {
+  width: "22",
+  height: "22",
+  viewBox: "0 0 44 44",
+  xmlns: "http://www.w3.org/2000/svg",
+  stroke: "#fff"
+};
+
+var Button = function Button(_ref) {
+  var children = _ref.children,
+      loading = _ref.loading,
+      rest = _objectWithoutProperties(_ref, ["children", "loading"]);
+
+  return _react["default"].createElement(_style["default"], rest, children, loading && _react["default"].createElement(Loading, null));
+};
+
+Button.propTypes = {
+  color: _propTypes["default"].oneOf(['primary', 'secondary', 'warning', 'success']),
+  children: _propTypes["default"].any.isRequired,
+  loading: _propTypes["default"].bool,
+  size: _propTypes["default"].oneOf(['sm', 'md', 'lg']),
+  variant: _propTypes["default"].oneOf(['flat', 'outlined', 'text'])
+};
+Button.defaultProps = {
+  color: 'primary',
+  loading: false,
+  size: 'md',
+  variant: 'flat'
+};
+var _default = Button;
+exports["default"] = _default;

lib/base-card/style.js.map

@@ -0,0 +1,99 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+
+var _colors = _interopRequireDefault(require("../colors"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj["default"] = obj; return newObj; } }
+
+var BoxShadow = (0, _styledComponents.css)(["box-shadow:0 9px 7px 0 rgba(0,0,0,0.06),0 3px 4px 0 rgba(0,0,0,0.15);@media (hover:hover){&:hover{bottom:1px;box-shadow:0 11px 9px -1px rgba(0,0,0,0.06),0 5px 6px -1px rgba(0,0,0,0.15);}}"]);
+var Disabled = (0, _styledComponents.css)(["opacity:0.5;cursor:not-allowed;"]);
+var SmallButton = (0, _styledComponents.css)(["padding:7px 12px 7px;"]);
+var LargeButton = (0, _styledComponents.css)(["padding:16px 20px 16px;"]);
+var PrimaryButton = (0, _styledComponents.css)(["color:", ";background-color:", ";border:", ";"], function (_ref) {
+  var variant = _ref.variant;
+  return variant === 'flat' ? _colors["default"].white : _colors["default"].coral;
+}, function (_ref2) {
+  var variant = _ref2.variant;
+  return variant === 'flat' ? _colors["default"].coral : 'transparent';
+}, function (_ref3) {
+  var variant = _ref3.variant;
+  return variant !== 'text' ? "1px solid ".concat(_colors["default"].coral) : 'none';
+});
+var SecondaryButton = (0, _styledComponents.css)(["color:", ";background-color:", ";border:", ";"], function (_ref4) {
+  var variant = _ref4.variant;
+  return variant === 'flat' ? _colors["default"].white : _colors["default"].lighterStorm;
+}, function (_ref5) {
+  var variant = _ref5.variant;
+  return variant === 'flat' ? _colors["default"].lighterStorm : 'transparent';
+}, function (_ref6) {
+  var variant = _ref6.variant;
+  return variant !== 'text' ? "1px solid ".concat(_colors["default"].lighterStorm) : 'none';
+});
+var WarningButton = (0, _styledComponents.css)(["color:", ";background-color:", ";border:", ";"], function (_ref7) {
+  var variant = _ref7.variant;
+  return variant === 'flat' ? _colors["default"].white : _colors["default"].warning;
+}, function (_ref8) {
+  var variant = _ref8.variant;
+  return variant === 'flat' ? _colors["default"].warning : 'transparent';
+}, function (_ref9) {
+  var variant = _ref9.variant;
+  return variant !== 'text' ? "1px solid ".concat(_colors["default"].warning) : 'none';
+});
+var SuccessButton = (0, _styledComponents.css)(["color:", ";background-color:", ";border:", ";"], function (_ref10) {
+  var variant = _ref10.variant;
+  return variant === 'flat' ? _colors["default"].white : _colors["default"].ocean;
+}, function (_ref11) {
+  var variant = _ref11.variant;
+  return variant === 'flat' ? _colors["default"].ocean : 'transparent';
+}, function (_ref12) {
+  var variant = _ref12.variant;
+  return variant !== 'text' ? "1px solid ".concat(_colors["default"].ocean) : 'none';
+});
+
+var _default = _styledComponents["default"].button.withConfig({
+  displayName: "style",
+  componentId: "sc-1nqy8uv-0"
+})(["text-decoration:none;display:inline-block;border-radius:4px;text-align:center;line-height:1;cursor:pointer;padding:11px 16px 10px;margin:4px;font-size:15px;position:relative;bottom:0;transition:all 0.1s ease-out;outline:none;", ";& > svg{float:right;height:20px;margin:-2px -5px -5px 2px;width:20px;}", ";", ";", ";"], function (_ref13) {
+  var variant = _ref13.variant;
+  return variant !== 'text' ? BoxShadow : 'none';
+}, function (_ref14) {
+  var disabled = _ref14.disabled;
+  return disabled && Disabled;
+}, function (_ref15) {
+  var size = _ref15.size;
+
+  switch (size) {
+    case 'sm':
+      return SmallButton;
+
+    case 'lg':
+      return LargeButton;
+  }
+}, function (_ref16) {
+  var color = _ref16.color;
+
+  switch (color) {
+    case 'secondary':
+      return SecondaryButton;
+
+    case 'warning':
+      return WarningButton;
+
+    case 'success':
+      return SuccessButton;
+
+    case 'primary':
+    default:
+      return PrimaryButton;
+  }
+});
+
+exports["default"] = _default;