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

package/build/Input/styles.js

@@ -0,0 +1,202 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _colors = _interopRequireDefault(require("../subatomic/colors"));
+
+var _fonts = _interopRequireDefault(require("../subatomic/fonts"));
+
+var _icons = _interopRequireDefault(require("../subatomic/icons"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var _default = {
+  container: {
+    marginBottom: '16px',
+    paddingBottom: '11px',
+    position: 'relative'
+  },
+  "default": {
+    color: _colors["default"].grey4,
+    '& $input': {
+      borderColor: _colors["default"].grey1
+    },
+    '& $placeholder': {
+      top: '20px',
+      fontSize: '16px',
+      color: _colors["default"].grey6
+    }
+  },
+  disabled: {
+    color: _colors["default"].grey1,
+    '& $input': {
+      borderColor: _colors["default"].grey1,
+      color: _colors["default"].grey1
+    },
+    '& $placeholder': {
+      top: '20px',
+      fontSize: '16px',
+      color: _colors["default"].grey2
+    },
+    '& $pushHolder': {
+      left: '0'
+    }
+  },
+  focus: {
+    color: _colors["default"].blue,
+    '& $inputWrap:after': {
+      width: '100%',
+      left: '0'
+    },
+    '& $placeholder': {
+      color: _colors["default"].blue
+    },
+    '& $pushHolder': {
+      left: '0'
+    }
+  },
+  complete: {
+    color: _colors["default"].black2,
+    '& $input': {
+      borderColor: _colors["default"].black2
+    },
+    '& $placeholder': {
+      color: _colors["default"].black2
+    },
+    '& $pushHolder': {
+      left: '0'
+    }
+  },
+  correct: {
+    color: _colors["default"].green,
+    '& $input': {
+      borderColor: _colors["default"].green
+    },
+    '& $placeholder': {
+      color: _colors["default"].green
+    },
+    '& $pushHolder': {
+      left: '0'
+    }
+  },
+  error: {
+    color: _colors["default"].red,
+    '& $input': {
+      borderColor: _colors["default"].red
+    },
+    '& $placeholder': {
+      color: _colors["default"].red
+    },
+    '& $pushHolder': {
+      left: '0'
+    }
+  },
+  label: {
+    boxSizing: 'border-box',
+    "float": 'left',
+    display: 'inline-block',
+    maxWidth: '100%',
+    fontFamily: _fonts["default"].body,
+    fontSize: '11px',
+    fontWeight: 'normal',
+    marginBottom: '0',
+    transition: '0.3s all'
+  },
+  left: {
+    "float": 'left'
+  },
+  push: {
+    paddingTop: '15px'
+  },
+  counter: {
+    position: 'absolute',
+    top: '0',
+    right: '0'
+  },
+  placeholder: {
+    position: 'absolute',
+    pointerEvents: 'none',
+    fontSize: '11px',
+    top: '0'
+  },
+  pushHolder: {
+    left: '24px'
+  },
+  inputWrap: {
+    boxSizing: 'border-box',
+    position: 'relative',
+    '&:after': {
+      content: '""',
+      display: 'block',
+      position: 'absolute',
+      background: _colors["default"].blue,
+      transition: '0.3s all',
+      bottom: '0',
+      left: '50%',
+      width: '0',
+      height: '1px'
+    }
+  },
+  input: {
+    boxSizing: 'border-box',
+    display: 'flex',
+    alignItems: 'center',
+    width: '100%',
+    height: '34px',
+    color: _colors["default"].black,
+    fontFamily: _fonts["default"].body,
+    fontWeight: 'normal',
+    fontSize: '16px',
+    lineHeight: '16px',
+    background: 'transparent',
+    border: '0',
+    borderBottom: "1px solid ".concat(_colors["default"].grey1),
+    padding: '10px 0',
+    marginBottom: '4px',
+    outline: 'none',
+    transition: '0.3s all',
+    '&::placeholder': {
+      color: _colors["default"].grey6
+    }
+  },
+  textarea: {
+    padding: '5px 0',
+    lineHeight: '22px'
+  },
+  select: {
+    padding: '0',
+    appearance: 'none',
+    background: _icons["default"].base(_icons["default"].arrowDown.icon(['#4E6273'])),
+    backgroundSize: '24px 24px',
+    backgroundPosition: 'calc(100% - 5px) 5px'
+  },
+  expanded: {
+    height: '80px'
+  },
+  hasIcon: {
+    paddingLeft: '24px'
+  },
+  icon: {
+    position: 'absolute',
+    left: '0',
+    top: '19px'
+  },
+  hasClear: {
+    paddingRight: '24px'
+  },
+  clear: {
+    background: 'none',
+    border: '0',
+    padding: '0',
+    margin: '0',
+    position: 'absolute',
+    right: '0',
+    top: '20px',
+    outline: '0',
+    cursor: 'pointer'
+  }
+};
+exports["default"] = _default;

package/build/Input/stylesFlat.js

@@ -0,0 +1,74 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _colors = _interopRequireDefault(require("../subatomic/colors"));
+
+var _fonts = _interopRequireDefault(require("../subatomic/fonts"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var _default = {
+  container: {
+    position: 'relative'
+  },
+  "default": {},
+  disabled: {},
+  focus: {},
+  complete: {},
+  correct: {},
+  error: {},
+  label: {
+    fontFamily: _fonts["default"].body,
+    fontSize: '14px',
+    lineHeight: '24px',
+    color: _colors["default"].white
+  },
+  left: {},
+  push: {},
+  counter: {},
+  placeholder: {},
+  pushHolder: {},
+  inputWrap: {},
+  input: {
+    boxSizing: 'border-box',
+    display: 'block',
+    width: '100%',
+    height: '48px',
+    paddingLeft: '10px',
+    paddingRight: '10px',
+    background: _colors["default"].white,
+    color: _colors["default"].black,
+    fontFamily: _fonts["default"].body,
+    fontWeight: 'normal',
+    fontSize: '14px',
+    lineHeight: '24px',
+    border: '0',
+    borderRadius: '3px',
+    outline: 'none',
+    '&::placeholder': {
+      color: _colors["default"].grey7
+    }
+  },
+  textarea: {},
+  select: {},
+  expanded: {},
+  hasIcon: {},
+  icon: {},
+  hasClear: {},
+  clear: {
+    background: 'none',
+    border: '0',
+    padding: '0',
+    margin: '0',
+    position: 'absolute',
+    right: '10px',
+    top: '35px',
+    outline: '0',
+    cursor: 'pointer'
+  }
+};
+exports["default"] = _default;

package/build/Label/Label.js

@@ -0,0 +1,98 @@
+"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
+});
+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 }; }
+
+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, descriptor.key, descriptor); } }
+
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
+
+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 _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 _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 _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+
+/** Label component with different themes. The label can trigger some actions on click. */
+var Label = /*#__PURE__*/function (_React$Component) {
+  _inherits(Label, _React$Component);
+
+  var _super = _createSuper(Label);
+
+  function Label() {
+    _classCallCheck(this, Label);
+
+    return _super.apply(this, arguments);
+  }
+
+  _createClass(Label, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+          classes = _this$props.classes,
+          children = _this$props.children,
+          className = _this$props.className,
+          id = _this$props.id,
+          style = _this$props.style,
+          onClose = _this$props.onClose,
+          onClick = _this$props.onClick,
+          theme = _this$props.theme;
+      return /*#__PURE__*/_react["default"].createElement("label", {
+        className: "".concat(classes.label, " ").concat(theme ? classes[theme] : classes["default"]).concat(onClick ? " ".concat(classes.cursor) : '').concat(className ? " ".concat(className) : ''),
+        id: id,
+        style: style,
+        onClick: onClick
+      }, children, onClose && /*#__PURE__*/_react["default"].createElement("span", {
+        className: classes.close,
+        onClick: function onClick(e) {
+          e.stopPropagation();
+          onClose();
+        }
+      }));
+    }
+  }]);
+
+  return Label;
+}(_react["default"].Component);
+
+Label.defaultProps = {
+  theme: "default"
+};
+Label.propTypes = {
+  classes: _propTypes["default"].object,
+  children: _propTypes["default"].node,
+
+  /** Select a theme for the label (currently there's just the "default" theme). */
+  theme: _propTypes["default"].string,
+
+  /** Function to call when the label is clicked. */
+  onClick: _propTypes["default"].func,
+
+  /** If the label receives an onClose function it will display an 'x' icon on hover that will trigger this function when clicked. */
+  onClose: _propTypes["default"].func,
+  id: _propTypes["default"].string,
+  className: _propTypes["default"].string,
+  style: _propTypes["default"].object
+};
+var _default = Label;
+exports["default"] = _default;

package/build/Label/Label.test.js

@@ -0,0 +1,73 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _enzyme = require("enzyme");
+
+var _Label = _interopRequireDefault(require("./Label"));
+
+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("Label", function () {
+  it('matches the snapshot', function () {
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_Label["default"], {
+      classes: classes
+    }, "Label"));
+    expect(wrapper).toMatchSnapshot();
+  });
+  it('shows the children content', function () {
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_Label["default"], {
+      classes: classes
+    }, "Label"));
+    expect(wrapper.text()).toEqual('Label');
+  });
+  it('calls onClick function', function () {
+    var onClick = jest.fn();
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_Label["default"], {
+      classes: classes,
+      onClick: onClick
+    }, "Label"));
+    wrapper.simulate('click');
+    expect(onClick.mock.calls.length).toBe(1);
+  });
+  it('calls onClose function', function () {
+    var onClose = jest.fn();
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_Label["default"], {
+      classes: classes,
+      onClose: onClose
+    }, "Label"));
+    wrapper.find('span').simulate('click', {
+      stopPropagation: function stopPropagation() {}
+    });
+    expect(onClose.mock.calls.length).toBe(1);
+  });
+  it('has the right theme', function () {
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_Label["default"], {
+      classes: classes,
+      theme: "default"
+    }, "Label"));
+    expect(wrapper.prop('className')).toEqual('label default');
+  });
+});
+describe("LabelJSS", function () {
+  it('matches the snapshot', function () {
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_index["default"], null, "Label"));
+    expect(wrapper).toMatchSnapshot();
+  });
+});
+describe("Label styles", function () {
+  it('matches the snapshot', function () {
+    expect(_styles["default"]).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,82 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Label matches the snapshot 1`] = `ShallowWrapper {}`;
+
+exports[`Label styles matches the snapshot 1`] = `
+Object {
+  "blue": Object {
+    "& $close": Object {
+      "&:after": Object {
+        "background": "url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgogICAgICAgICAgICAJIHZpZXdCb3g9IjAgMCAyNCAyNCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMjQgMjQ7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KICAgICAgICAgICAgPHBvbHlnb24gZmlsbD0iI2ZmZmZmZiIgcG9pbnRzPSI1LjQsNCA0LDUuNCAxMC43LDEyLjEgNC4yLDE4LjYgNS42LDIwIDEyLjEsMTMuNSAxOC40LDE5LjggMTkuOCwxOC40IDEzLjUsMTIuMSAyMCw1LjYgMTguNiw0LjIKICAgICAgICAgICAgCTEyLjEsMTAuNyAiLz4KICAgICAgICAgICAgPC9zdmc+)",
+      },
+      "&:before": Object {
+        "background": "#083cae",
+      },
+    },
+    "background": "#083cae",
+    "borderColor": "#083cae",
+    "color": "#ffffff",
+  },
+  "close": Object {
+    "&:after": Object {
+      "background": "url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgogICAgICAgICAgICAJIHZpZXdCb3g9IjAgMCAyNCAyNCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMjQgMjQ7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KICAgICAgICAgICAgPHBvbHlnb24gZmlsbD0iI2FiYjZiZCIgcG9pbnRzPSI1LjQsNCA0LDUuNCAxMC43LDEyLjEgNC4yLDE4LjYgNS42LDIwIDEyLjEsMTMuNSAxOC40LDE5LjggMTkuOCwxOC40IDEzLjUsMTIuMSAyMCw1LjYgMTguNiw0LjIKICAgICAgICAgICAgCTEyLjEsMTAuNyAiLz4KICAgICAgICAgICAgPC9zdmc+)",
+      "content": "\\"\\"",
+      "height": "18px",
+      "left": "0",
+      "position": "absolute",
+      "top": "0",
+      "width": "18px",
+    },
+    "&:before": Object {
+      "background": "#ffffff",
+      "borderRadius": "50%",
+      "content": "\\"\\"",
+      "filter": "blur(10px)",
+      "height": "50px",
+      "left": "-16px",
+      "position": "absolute",
+      "top": "-16px",
+      "width": "50px",
+    },
+    "&:hover": Object {
+      "opacity": "1",
+    },
+    "borderRadius": "50%",
+    "cursor": "pointer",
+    "display": "block",
+    "height": "18px",
+    "opacity": "0",
+    "position": "absolute",
+    "right": "4px",
+    "top": "1px",
+    "transition": "0.3s all",
+    "width": "18px",
+  },
+  "cursor": Object {
+    "cursor": "pointer",
+  },
+  "default": Object {
+    "background": "#ffffff",
+    "borderColor": "#979797",
+    "color": "#979797",
+  },
+  "label": Object {
+    "border": "1px solid",
+    "borderRadius": "11px",
+    "boxSizing": "border-box",
+    "display": "inline-block",
+    "fontFamily": "'OccText', sans-serif",
+    "fontSize": "11px",
+    "fontWeight": "normal",
+    "height": "22px",
+    "lineHeight": "20px",
+    "marginRight": "5px",
+    "overflow": "hidden",
+    "padding": "0 15px",
+    "position": "relative",
+    "textAlign": "center",
+  },
+}
+`;
+
+exports[`LabelJSS matches the snapshot 1`] = `ShallowWrapper {}`;

package/build/Label/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 _Label = _interopRequireDefault(require("./Label"));
+
+var _styles = _interopRequireDefault(require("./styles"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var _default = (0, _reactJss["default"])(_styles["default"])(_Label["default"]);
+
+exports["default"] = _default;

package/build/Label/styles.js

@@ -0,0 +1,90 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _colors = _interopRequireDefault(require("../subatomic/colors"));
+
+var _fonts = _interopRequireDefault(require("../subatomic/fonts"));
+
+var _icons = _interopRequireDefault(require("../subatomic/icons"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var _default = {
+  label: {
+    boxSizing: 'border-box',
+    fontFamily: _fonts["default"].body,
+    fontSize: '11px',
+    fontWeight: 'normal',
+    display: 'inline-block',
+    height: '22px',
+    lineHeight: '20px',
+    textAlign: 'center',
+    borderRadius: '11px',
+    padding: '0 15px',
+    border: '1px solid',
+    position: 'relative',
+    overflow: 'hidden',
+    marginRight: '5px'
+  },
+  cursor: {
+    cursor: 'pointer'
+  },
+  "default": {
+    color: _colors["default"].grey8,
+    background: _colors["default"].white,
+    borderColor: _colors["default"].grey8
+  },
+  blue: {
+    color: _colors["default"].white,
+    background: _colors["default"].prim,
+    borderColor: _colors["default"].prim,
+    '& $close': {
+      '&:before': {
+        background: _colors["default"].prim
+      },
+      '&:after': {
+        background: _icons["default"].base(_icons["default"].close.icon([_colors["default"].white]))
+      }
+    }
+  },
+  close: {
+    width: '18px',
+    height: '18px',
+    display: 'block',
+    position: 'absolute',
+    top: '1px',
+    right: '4px',
+    transition: '0.3s all',
+    borderRadius: '50%',
+    opacity: '0',
+    cursor: 'pointer',
+    '&:hover': {
+      opacity: '1'
+    },
+    '&:before': {
+      content: '""',
+      width: '50px',
+      height: '50px',
+      background: _colors["default"].white,
+      filter: 'blur(10px)',
+      position: 'absolute',
+      borderRadius: '50%',
+      top: '-16px',
+      left: '-16px'
+    },
+    '&:after': {
+      content: '""',
+      width: '18px',
+      height: '18px',
+      background: _icons["default"].base(_icons["default"].close.icon(['#abb6bd'])),
+      position: 'absolute',
+      top: '0',
+      left: '0'
+    }
+  }
+};
+exports["default"] = _default;