@occmundial/occ-atomic 2.0.0-beta.0 → 2.0.0-beta.2

package/build/Column/styles.js

@@ -0,0 +1,93 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _grid = _interopRequireDefault(require("../subatomic/grid"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var styles = {
+  col: {
+    boxSizing: 'border-box',
+    position: 'relative',
+    minHeight: '1px',
+    paddingRight: '15px',
+    paddingLeft: '15px'
+  }
+};
+
+var pushGrid = function pushGrid() {
+  var sm = "@media (min-width: ".concat(_grid["default"].sm, "px)");
+  var md = "@media (min-width: ".concat(_grid["default"].md, "px)");
+  var lg = "@media (min-width: ".concat(_grid["default"].lg, "px)");
+
+  for (var i = 1; i <= 12; i++) {
+    styles["xs".concat(i)] = {
+      "float": 'left',
+      width: "".concat(100 / 12 * i, "%")
+    };
+    styles["offset-xs".concat(i)] = {
+      marginLeft: "".concat(100 / 12 * i, "%")
+    };
+    styles["push-xs".concat(i)] = {
+      left: "".concat(100 / 12 * i, "%")
+    };
+    styles["pull-xs".concat(i)] = {
+      right: "".concat(100 / 12 * i, "%")
+    };
+  }
+
+  ;
+  styles[sm] = {};
+  styles[md] = {};
+  styles[lg] = {};
+
+  for (var _i = 1; _i <= 12; _i++) {
+    styles[sm]["sm".concat(_i)] = {
+      "float": 'left',
+      width: "".concat(100 / 12 * _i, "%")
+    };
+    styles[sm]["offset-sm".concat(_i)] = {
+      marginLeft: "".concat(100 / 12 * _i, "%")
+    };
+    styles[sm]["push-sm".concat(_i)] = {
+      left: "".concat(100 / 12 * _i, "%")
+    };
+    styles[sm]["pull-sm".concat(_i)] = {
+      right: "".concat(100 / 12 * _i, "%")
+    };
+    styles[md]["md".concat(_i)] = {
+      "float": 'left',
+      width: "".concat(100 / 12 * _i, "%")
+    };
+    styles[md]["offset-md".concat(_i)] = {
+      marginLeft: "".concat(100 / 12 * _i, "%")
+    };
+    styles[md]["push-md".concat(_i)] = {
+      left: "".concat(100 / 12 * _i, "%")
+    };
+    styles[md]["pull-md".concat(_i)] = {
+      right: "".concat(100 / 12 * _i, "%")
+    };
+    styles[lg]["lg".concat(_i)] = {
+      "float": 'left',
+      width: "".concat(100 / 12 * _i, "%")
+    };
+    styles[lg]["offset-lg".concat(_i)] = {
+      marginLeft: "".concat(100 / 12 * _i, "%")
+    };
+    styles[lg]["push-lg".concat(_i)] = {
+      left: "".concat(100 / 12 * _i, "%")
+    };
+    styles[lg]["pull-lg".concat(_i)] = {
+      right: "".concat(100 / 12 * _i, "%")
+    };
+  }
+};
+
+pushGrid();
+var _default = styles;
+exports["default"] = _default;

package/build/Container/Container.js

@@ -0,0 +1,50 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+/** The container should be used as the main content container. You can't use a container inside of another container, it will brake your grid. */
+var Container = function Container(_ref) {
+  var classes = _ref.classes,
+      children = _ref.children,
+      fluid = _ref.fluid,
+      onClick = _ref.onClick,
+      className = _ref.className,
+      id = _ref.id,
+      style = _ref.style;
+
+  if (process.env.NODE_ENV === 'development') {
+    console.warn('DEPRECATED: The Container component will be removed soon. Use the Grid component instead.');
+  }
+
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: "".concat(fluid ? classes.conFluid : classes.con).concat(className ? " ".concat(className) : ''),
+    style: style,
+    id: id,
+    onClick: onClick
+  }, children);
+};
+
+Container.propTypes = {
+  classes: _propTypes["default"].object,
+  children: _propTypes["default"].node,
+
+  /** By default, the Container component has a specified width for any screen size. The fluid property allows the Container to extend to a 100% width. */
+  fluid: _propTypes["default"].bool,
+
+  /** Function to call on click. This is not the best practice, but is an option if you need to use it. */
+  onClick: _propTypes["default"].func,
+  id: _propTypes["default"].string,
+  className: _propTypes["default"].string,
+  style: _propTypes["default"].object
+};
+var _default = Container;
+exports["default"] = _default;

package/build/Container/Container.test.js

@@ -0,0 +1,53 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _enzyme = require("enzyme");
+
+var _Container = _interopRequireDefault(require("./Container"));
+
+var _styles = _interopRequireDefault(require("./styles"));
+
+var _index = _interopRequireDefault(require("./index"));
+
+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 reduceClasses = function reduceClasses(prev, curr) {
+  return Object.assign({}, prev, _defineProperty({}, curr, curr));
+};
+
+var classes = Object.keys(_styles["default"]).reduce(reduceClasses, {});
+describe("Container", function () {
+  it('matches the snapshot', function () {
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_Container["default"], {
+      classes: classes
+    }));
+    expect(wrapper).toMatchSnapshot();
+  });
+  it('renders a regular container', function () {
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_Container["default"], {
+      classes: classes
+    }));
+    expect(wrapper.find('div').prop('className')).toEqual('con');
+  });
+  it('renders a fluid container', function () {
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_Container["default"], {
+      classes: classes,
+      fluid: true
+    }));
+    expect(wrapper.find('div').prop('className')).toEqual('conFluid');
+  });
+});
+describe("ContainerJSS", function () {
+  it('matches the snapshot', function () {
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_index["default"], null));
+    expect(wrapper).toMatchSnapshot();
+  });
+});
+describe("Container styles", function () {
+  it('matches the snapshot', function () {
+    expect(_styles["default"]).toMatchSnapshot();
+  });
+});

package/build/Container/__snapshots__/Container.test.js.snap

@@ -0,0 +1,43 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Container matches the snapshot 1`] = `ShallowWrapper {}`;
+
+exports[`Container styles matches the snapshot 1`] = `
+Object {
+  "@media (min-width: 1200px)": Object {
+    "con": Object {
+      "width": "1170px",
+    },
+  },
+  "@media (min-width: 768px)": Object {
+    "con": Object {
+      "width": "750px",
+    },
+  },
+  "@media (min-width: 992px)": Object {
+    "con": Object {
+      "width": "970px",
+    },
+  },
+  "con": Object {
+    "extend": "conFluid",
+    "margin": "0 auto",
+  },
+  "conFluid": Object {
+    "&:after": Object {
+      "clear": "both",
+    },
+    "&:before, &:after": Object {
+      "content": "\\"\\"",
+      "display": "table",
+    },
+    "boxSizing": "border-box",
+    "marginLeft": "auto",
+    "marginRight": "auto",
+    "paddingLeft": "15px",
+    "paddingRight": "15px",
+  },
+}
+`;
+
+exports[`ContainerJSS matches the snapshot 1`] = `ShallowWrapper {}`;

package/build/Container/index.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _reactJss = _interopRequireDefault(require("react-jss"));
+
+var _Container = _interopRequireDefault(require("./Container"));
+
+var _styles = _interopRequireDefault(require("./styles"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var _default = (0, _reactJss["default"])(_styles["default"])(_Container["default"]);
+
+exports["default"] = _default;

package/build/Container/styles.js

@@ -0,0 +1,49 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _grid = _interopRequireDefault(require("../subatomic/grid"));
+
+var _conFluid$con$Media;
+
+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 _default = (_conFluid$con$Media = {
+  conFluid: {
+    boxSizing: 'border-box',
+    paddingRight: '15px',
+    paddingLeft: '15px',
+    marginRight: 'auto',
+    marginLeft: 'auto',
+    '&:before, &:after': {
+      display: 'table',
+      content: '""'
+    },
+    '&:after': {
+      clear: 'both'
+    }
+  },
+  con: {
+    extend: 'conFluid',
+    margin: '0 auto'
+  }
+}, _defineProperty(_conFluid$con$Media, "@media (min-width: ".concat(_grid["default"].sm, "px)"), {
+  con: {
+    width: '750px'
+  }
+}), _defineProperty(_conFluid$con$Media, "@media (min-width: ".concat(_grid["default"].md, "px)"), {
+  con: {
+    width: '970px'
+  }
+}), _defineProperty(_conFluid$con$Media, "@media (min-width: ".concat(_grid["default"].lg, "px)"), {
+  con: {
+    width: '1170px'
+  }
+}), _conFluid$con$Media);
+
+exports["default"] = _default;

package/build/Droplist/Droplist.js

@@ -1,5 +1,7 @@
 "use strict";
 
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -17,11 +19,17 @@ var _cloneDeep = _interopRequireDefault(require("lodash/cloneDeep"));
 
 var _Text = _interopRequireDefault(require("../Text"));
 
+var _Icon = _interopRequireDefault(require("../Icon"));
+
+var _colors = _interopRequireDefault(require("../subatomic/colors"));
+
 var _functions = require("./functions");
 
+var _iconSizes = _interopRequireDefault(require("../subatomic/iconSizes"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+function _extends() { _extends = Object.assign || 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"); } }
 
@@ -29,36 +37,43 @@ function _defineProperties(target, props) { for (var i = 0; i < props.length; i+
 
 function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
 
-function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
+
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
 
-function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
 
 function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
 
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
 
 var arrowDown = 40;
 var arrowUp = 38;
 var enter = 13;
-/**
-* The Droplist component displays a list and filters it with the prop 'term'.
-* The value of 'term' es highlighted in every item that matches.
-* The array of objects needed to display the items needs a text and an id, and can contain a text that floats on the right. If you're going to group your items by category, you first need to set an array of groups, and each group must contain an array with the items.
-*/
-
-var Droplist =
-/*#__PURE__*/
-function (_React$Component) {
+var inkLighter = _colors["default"].inkLighter,
+    ink = _colors["default"].ink;
+var iconSmall = _iconSizes["default"].small;
+/**
+ * The Droplist component displays a list and filters it with the prop 'term'.
+ * The value of 'term' es highlighted in every item that matches.
+ * The array of objects needed to display the items needs a text and an id, and can contain a text that floats on the right. If you're going to group your items by category, you first need to set an array of groups, and each group must contain an array with the items.
+ */
+
+var Droplist = /*#__PURE__*/function (_React$Component) {
   _inherits(Droplist, _React$Component);
 
+  var _super = _createSuper(Droplist);
+
   function Droplist(props) {
     var _this;
 
     _classCallCheck(this, Droplist);
 
-    _this = _possibleConstructorReturn(this, _getPrototypeOf(Droplist).call(this, props));
+    _this = _super.call(this, props);
     (0, _classAutobind["default"])(_assertThisInitialized(_this));
     _this.state = {
       currentItem: -1,
@@ -151,7 +166,7 @@ function (_React$Component) {
             currentGroup: -1,
             currentItem: -1
           });
-          if (onEnter) onEnter(selectedItem);
+          if (onEnter && !selectedItem.disabled) onEnter(selectedItem);
         } else {
           var _selectedItem = items.find(function (item, i) {
             return i === currentItem;
@@ -160,7 +175,7 @@ function (_React$Component) {
           this.setState({
             currentItem: -1
           });
-          if (onEnter) onEnter(_selectedItem);
+          if (onEnter && !_selectedItem.disabled) onEnter(_selectedItem);
         }
       }
     }
@@ -390,35 +405,54 @@ function (_React$Component) {
           itemIdKey = _this$props5.itemIdKey,
           itemTextKey = _this$props5.itemTextKey,
           itemTextRightKey = _this$props5.itemTextRightKey,
-          term = _this$props5.term;
+          term = _this$props5.term,
+          testId = _this$props5.testId;
       var itemsDOM = items.map(function (item, i) {
         var index = (0, _functions.compareText)(item[itemTextKey], term);
 
         if (index >= 0) {
           var text = (0, _functions.separateText)(item[itemTextKey], index, term);
-          return _react["default"].createElement("div", {
+          return /*#__PURE__*/_react["default"].createElement("div", _extends({
             key: item[itemIdKey],
-            onClick: function onClick(e) {
+            onClick: !item.disabled ? function (e) {
               return _this4.onClick(item, e);
-            },
+            } : null,
             onMouseDown: function onMouseDown(e) {
               return _this4.onMouseDown(item, e);
             },
             onMouseUp: function onMouseUp(e) {
               return _this4.onMouseUp(item, e);
             },
-            className: "".concat(classes.item).concat(selectedGroup && currentItem === i ? " ".concat(classes.onFocus) : '')
-          }, _react["default"].createElement(_Text["default"], null, text[0].length ? text[0] : '', _react["default"].createElement(_Text["default"], {
+            className: "".concat(classes.item).concat(selectedGroup && currentItem === i ? " ".concat(classes.onFocus) : '').concat(!item.disabled ? " ".concat(classes.itemPointer) : '')
+          }, testId && {
+            'data-testid': "".concat(testId, "__droplist-item-").concat(i)
+          }), /*#__PURE__*/_react["default"].createElement("div", null, item.iconName && /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
+            iconName: item.iconName,
+            width: iconSmall,
+            height: iconSmall,
+            display: "inline-block",
+            className: classes.icon,
+            colors: [item.disabled ? inkLighter : ink]
+          }), /*#__PURE__*/_react["default"].createElement(_Text["default"], {
+            className: item.iconName ? classes.iconText : '',
+            low: item.disabled
+          }, text[0].length ? text[0] : '', /*#__PURE__*/_react["default"].createElement(_Text["default"], {
             tag: "b",
-            strong: true
-          }, text[1].length ? text[1] : ''), text[2].length ? text[2] : ''), item[itemTextRightKey] && _react["default"].createElement("span", {
+            strong: true,
+            low: item.disabled
+          }, text[1].length ? text[1] : ''), text[2].length ? text[2] : '', item.extraText && /*#__PURE__*/_react["default"].createElement(_Text["default"], {
+            tag: "span",
+            strong: true,
+            low: item.disabled,
+            className: "".concat(classes.extraText).concat(!item.disabled ? " ".concat(classes.extraTextColor) : '')
+          }, item.extraText))), item[itemTextRightKey] && /*#__PURE__*/_react["default"].createElement("span", {
             className: classes.right
-          }, _react["default"].createElement(_Text["default"], {
+          }, /*#__PURE__*/_react["default"].createElement(_Text["default"], {
             tag: "span",
             low: true
           }, item[itemTextRightKey])));
         } else {
-          return _react["default"].createElement("div", {
+          return /*#__PURE__*/_react["default"].createElement("div", _extends({
             key: item[itemIdKey],
             onClick: function onClick(e) {
               return _this4.onClick(item, e);
@@ -430,9 +464,21 @@ function (_React$Component) {
               return _this4.onMouseUp(item, e);
             },
             className: "".concat(classes.item).concat(selectedGroup && currentItem === i ? " ".concat(classes.onFocus) : '')
-          }, _react["default"].createElement(_Text["default"], null, item[itemTextKey]), item[itemTextRightKey] && _react["default"].createElement("span", {
+          }, testId && {
+            'data-testid': "".concat(testId, "__droplist-item-").concat(i)
+          }), /*#__PURE__*/_react["default"].createElement("div", null, item.iconName && /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
+            iconName: item.iconName,
+            width: 14,
+            height: 14,
+            display: "inline-block",
+            colors: [inkLighter]
+          }), /*#__PURE__*/_react["default"].createElement(_Text["default"], null, item[itemTextKey], item.extraText && /*#__PURE__*/_react["default"].createElement(_Text["default"], {
+            tag: "span",
+            strong: true,
+            className: classes.extraText
+          }, item.extraText))), item[itemTextRightKey] && /*#__PURE__*/_react["default"].createElement("span", {
             className: classes.right
-          }, _react["default"].createElement(_Text["default"], {
+          }, /*#__PURE__*/_react["default"].createElement(_Text["default"], {
             tag: "span",
             low: true
           }, item[itemTextRightKey])));
@@ -457,14 +503,14 @@ function (_React$Component) {
           groupNameKey = _this$props6.groupNameKey,
           groupIdKey = _this$props6.groupIdKey,
           groupItemsKey = _this$props6.groupItemsKey;
-      return _react["default"].createElement("div", {
+      return /*#__PURE__*/_react["default"].createElement("div", {
         className: "".concat(classes.block).concat(className ? " ".concat(className) : ''),
         id: id,
         style: style
       }, groups ? items.map(function (group, index) {
-        return _react["default"].createElement("div", {
+        return /*#__PURE__*/_react["default"].createElement("div", {
           key: group[groupIdKey]
-        }, _react["default"].createElement(_Text["default"], {
+        }, /*#__PURE__*/_react["default"].createElement(_Text["default"], {
           small: true,
           mid: true,
           className: classes.group
@@ -536,7 +582,10 @@ Droplist.propTypes = {
   isOnFocus: _propTypes["default"].bool,
   id: _propTypes["default"].string,
   className: _propTypes["default"].string,
-  style: _propTypes["default"].object
+  style: _propTypes["default"].object,
+
+  /** The testId property adds the data attribute data-testid to the main element and should be used for testing only. */
+  testId: _propTypes["default"].string
 };
 var _default = Droplist;
 exports["default"] = _default;