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

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

@@ -0,0 +1,258 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`TextField matches the snapshot 1`] = `ShallowWrapper {}`;
+
+exports[`TextField styles matches the snapshot 1`] = `
+Object {
+  "alignRight": Object {
+    "textAlign": "right",
+  },
+  "assistiveText": Object {
+    "color": "#aaaaaa",
+    "fontSize": 12,
+    "fontWeight": 300,
+  },
+  "bottom": Object {
+    "height": 20,
+    "marginTop": 4,
+  },
+  "clear": Object {
+    "background": "none",
+    "border": 0,
+    "cursor": "pointer",
+    "height": 24,
+    "margin": 0,
+    "outline": 0,
+    "padding": 3,
+    "position": "absolute",
+    "right": 12,
+    "top": "50%",
+    "transform": "translateY(-50%)",
+    "width": 24,
+    "zIndex": 1,
+  },
+  "container": Object {
+    "marginBottom": 8,
+    "position": "relative",
+  },
+  "counter": Object {
+    "color": "#aaaaaa",
+  },
+  "default": Object {},
+  "disabled": Object {
+    "& $input": Object {
+      "borderColor": "#dddddd",
+      "color": "#dddddd",
+      "paddingTop": 9,
+    },
+    "& $label": Object {
+      "color": "#dddddd",
+    },
+    "& $passIcon": Object {
+      "cursor": "auto",
+    },
+  },
+  "error": Object {
+    "& $input": Object {
+      "background": "rgba(219, 55, 55, 0.04)",
+      "borderColor": "#db3737",
+      "color": "#db3737",
+    },
+    "& $searchField": Object {
+      "borderWidth": 2,
+      "color": "#222222",
+      "paddingLeft": 7,
+    },
+    "& $searchFieldHasIcon": Object {
+      "paddingLeft": 41,
+    },
+  },
+  "errorAssistiveText": Object {
+    "color": "#db3737",
+  },
+  "errorIcon": Object {
+    "marginBottom": -2,
+  },
+  "filled": Object {
+    "& $input": Object {
+      "borderColor": "#222222",
+      "borderWidth": 2,
+      "paddingLeft": 7,
+    },
+    "& $searchFieldHasIcon": Object {
+      "paddingLeft": 41,
+    },
+  },
+  "focus": Object {
+    "& $input": Object {
+      "borderColor": "#083cae",
+    },
+    "& $searchField": Object {
+      "borderWidth": 2,
+      "paddingLeft": 7,
+    },
+    "& $searchFieldHasIcon": Object {
+      "paddingLeft": 41,
+    },
+  },
+  "hasClear": Object {
+    "paddingRight": 42,
+  },
+  "hasIcon": Object {
+    "paddingLeft": 42,
+  },
+  "hasPass": Object {
+    "paddingRight": 42,
+  },
+  "hasRightIcon": Object {
+    "marginRight": 16,
+  },
+  "icon": Object {
+    "left": 16,
+    "position": "absolute",
+    "top": "50%",
+    "transform": "translateY(-50%)",
+  },
+  "input": Object {
+    "&::-webkit-inner-spin-button": Object {
+      "-webkit-appearance": "none",
+      "margin": 0,
+    },
+    "&::-webkit-outer-spin-button": Object {
+      "-webkit-appearance": "none",
+      "margin": 0,
+    },
+    "&::placeholder": Object {
+      "color": "#aaaaaa",
+    },
+    "&[type=number]": Object {
+      "-moz-appearance": "textfield",
+    },
+    "-webkit-appearance": "none",
+    "alignItems": "center",
+    "appearance": "none",
+    "background": "#ffffff",
+    "border": "1px solid #dddddd",
+    "borderRadius": 4,
+    "boxShadow": "none",
+    "boxSizing": "border-box",
+    "caretColor": "#083cae",
+    "color": "#222222",
+    "display": "flex",
+    "fontFamily": "'OccText', sans-serif",
+    "fontSize": 16,
+    "fontWeight": 300,
+    "height": 40,
+    "lineHeight": 1.5,
+    "outline": "none",
+    "padding": Array [
+      8,
+      16,
+    ],
+    "transition": "0.3s all",
+    "width": "100%",
+  },
+  "inputDisabled": Object {
+    "overflow": "hidden",
+    "whiteSpace": "nowrap",
+  },
+  "inputWrap": Object {
+    "boxSizing": "border-box",
+    "position": "relative",
+  },
+  "label": Object {
+    "& a": Object {
+      "color": "#1476fb",
+      "outline": "none",
+      "textDecoration": "none",
+    },
+    "color": "#222222",
+    "fontFamily": "'OccText', sans-serif",
+    "fontSize": 14,
+    "fontWeight": 300,
+    "lineHeight": 1.5,
+    "transition": "0.3s all",
+  },
+  "left": Object {
+    "float": "left",
+  },
+  "passIcon": Object {
+    "background": "none",
+    "border": 0,
+    "cursor": "pointer",
+    "height": 24,
+    "margin": 0,
+    "outline": 0,
+    "padding": 3,
+    "position": "absolute",
+    "right": 12,
+    "top": 8,
+    "width": 24,
+    "zIndex": 1,
+  },
+  "right": Object {
+    "float": "right",
+  },
+  "searchField": Object {
+    "background": Array [
+      "#ffffff",
+      "!important",
+    ],
+    "borderColor": "#777777",
+    "borderRadius": 24,
+    "height": 48,
+  },
+  "searchFieldHasIcon": Object {},
+  "select": Object {
+    "& optgroup": Object {
+      "color": "#777777",
+      "fontSize": 14,
+      "fontWeight": "normal",
+      "lineHeight": 1.5,
+    },
+    "& option": Object {
+      "&:disabled": Object {
+        "color": "#aaaaaa",
+      },
+      "color": "#222222",
+      "fontSize": 16,
+      "lineHeight": 1.5,
+    },
+    "&::-ms-expand": Object {
+      "display": "none",
+    },
+    "&:invalid, & option[value=\\"\\"]": Object {
+      "color": "#aaaaaa",
+    },
+    "paddingRight": 32,
+  },
+  "selectIcon": Object {
+    "background": "none",
+    "border": 0,
+    "height": 24,
+    "margin": 0,
+    "outline": 0,
+    "padding": "3px 0",
+    "pointerEvents": "none",
+    "position": "absolute",
+    "right": 12,
+    "top": 8,
+    "width": 18,
+    "zIndex": 1,
+  },
+  "textarea": Object {
+    "alignItems": "flex-start",
+    "height": 120,
+    "resize": "none",
+  },
+  "top": Object {
+    "&:after": Object {
+      "clear": "both",
+      "content": "\\"\\"",
+    },
+    "height": 24,
+  },
+}
+`;
+
+exports[`TextFieldJSS matches the snapshot 1`] = `ShallowWrapper {}`;

package/build/TextField/styles.js

@@ -15,6 +15,8 @@ var _spacing = _interopRequireDefault(require("../subatomic/spacing"));
 
 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 = {
   container: {
     position: 'relative',
@@ -44,6 +46,13 @@ var _default = {
   focus: {
     '& $input': {
       borderColor: _colors["default"].prim
+    },
+    '& $searchField': {
+      borderWidth: 2,
+      paddingLeft: _spacing["default"].tiny - 1
+    },
+    '& $searchFieldHasIcon': {
+      paddingLeft: 41
     }
   },
   error: {
@@ -51,12 +60,31 @@ var _default = {
       borderColor: _colors["default"].error,
       color: _colors["default"].errorText,
       background: (0, _hexRgba["default"])(_colors["default"].errorText, 4)
+    },
+    '& $searchField': {
+      borderWidth: 2,
+      color: _colors["default"].ink,
+      paddingLeft: _spacing["default"].tiny - 1
+    },
+    '& $searchFieldHasIcon': {
+      paddingLeft: 41
+    }
+  },
+  filled: {
+    '& $input': {
+      borderColor: _colors["default"].grey900,
+      borderWidth: 2,
+      paddingLeft: _spacing["default"].tiny - 1
+    },
+    '& $searchFieldHasIcon': {
+      paddingLeft: 41
     }
   },
   label: {
+    fontWeight: 300,
     fontFamily: _fonts["default"].body,
-    fontSize: 12,
-    lineHeight: '20px',
+    fontSize: 14,
+    lineHeight: 1.5,
     color: _colors["default"].ink,
     transition: '0.3s all',
     '& a': {
@@ -86,13 +114,13 @@ var _default = {
     height: 40,
     color: _colors["default"].ink,
     fontFamily: _fonts["default"].body,
-    fontWeight: 'normal',
-    fontSize: 14,
-    lineHeight: '24px',
+    fontWeight: 300,
+    fontSize: 16,
+    lineHeight: 1.5,
     background: _colors["default"].bgWhite,
     border: "1px solid ".concat(_colors["default"].grey200),
     borderRadius: 4,
-    padding: '8px 16px',
+    padding: [_spacing["default"].tiny, _spacing["default"].small],
     boxShadow: 'none',
     outline: 'none',
     transition: '0.3s all',
@@ -101,22 +129,40 @@ var _default = {
     caretColor: _colors["default"].prim,
     '&::placeholder': {
       color: _colors["default"].inkLighter
+    },
+    '&::-webkit-outer-spin-button': {
+      '-webkit-appearance': 'none',
+      margin: 0
+    },
+    '&::-webkit-inner-spin-button': {
+      '-webkit-appearance': 'none',
+      margin: 0
+    },
+    '&[type=number]': {
+      '-moz-appearance': 'textfield'
     }
   },
+  inputDisabled: {
+    overflow: 'hidden',
+    whiteSpace: 'nowrap'
+  },
+  hasRightIcon: {
+    marginRight: _spacing["default"].small
+  },
   select: {
     '&::-ms-expand': {
       display: 'none'
     },
     paddingRight: 32,
     '& optgroup': {
-      fontSize: 12,
+      fontSize: 14,
       fontWeight: 'normal',
-      lineHeight: '40px',
+      lineHeight: 1.5,
       color: _colors["default"].inkLight
     },
     '& option': {
-      fontSize: 14,
-      lineHeight: '40px',
+      fontSize: 16,
+      lineHeight: 1.5,
       color: _colors["default"].ink,
       '&:disabled': {
         color: _colors["default"].inkLighter
@@ -139,8 +185,9 @@ var _default = {
   },
   icon: {
     position: 'absolute',
-    left: _spacing["default"].gutter,
-    top: _spacing["default"].tiny
+    left: _spacing["default"].small,
+    top: '50%',
+    transform: 'translateY(-50%)'
   },
   passIcon: {
     width: 24,
@@ -173,7 +220,7 @@ var _default = {
   hasClear: {
     paddingRight: 42
   },
-  clear: {
+  clear: _defineProperty({
     width: 24,
     height: 24,
     background: 'none',
@@ -182,16 +229,19 @@ var _default = {
     margin: 0,
     position: 'absolute',
     right: 12,
-    top: 8,
+    top: '50%',
+    transform: 'translateY(-50%)',
     zIndex: 1,
     outline: 0,
     cursor: 'pointer'
-  },
+  }, "padding", 3),
   alignRight: {
     textAlign: 'right'
   },
   assistiveText: {
-    color: _colors["default"].inkLighter
+    color: _colors["default"].inkLighter,
+    fontSize: 12,
+    fontWeight: 300
   },
   errorAssistiveText: {
     color: _colors["default"].errorText
@@ -202,6 +252,13 @@ var _default = {
   bottom: {
     height: 20,
     marginTop: 4
-  }
+  },
+  searchField: {
+    height: _spacing["default"].large,
+    borderRadius: _spacing["default"].base,
+    borderColor: _colors["default"].grey600,
+    background: [_colors["default"].bgWhite, '!important']
+  },
+  searchFieldHasIcon: {}
 };
 exports["default"] = _default;

package/build/Tip/Tip.js

@@ -1,11 +1,13 @@
 "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 _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
@@ -23,11 +25,23 @@ var _colors = _interopRequireDefault(require("../subatomic/colors"));
 
 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; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 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 _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 boldRegex = /\*(.*?)\*/g;
+var icons = {
+  info: 'infoSolid',
+  warning: 'warningSolid',
+  success: 'checkSolid',
+  error: 'crossSolid',
+  promote: null
+};
+var PROMOTE = 'promote';
 /** Tip component with different themes (info, warning, success & error). You can pass a string or a react element as the children prop, but the bold regex will only work with strings. */
 
 var Tip = function Tip(_ref) {
@@ -37,7 +51,12 @@ var Tip = function Tip(_ref) {
       classes = _ref.classes,
       icon = _ref.icon,
       theme = _ref.theme,
-      children = _ref.children;
+      noBorderRadius = _ref.noBorderRadius,
+      center = _ref.center,
+      onClose = _ref.onClose,
+      spacedClose = _ref.spacedClose,
+      children = _ref.children,
+      cta = _ref.cta;
 
   var replaceStringToBold = function replaceStringToBold() {
     if (children === '') return children;
@@ -51,49 +70,74 @@ var Tip = function Tip(_ref) {
     return result;
   };
 
+  var getTheme = function getTheme() {
+    if (theme === PROMOTE) return {
+      white: true
+    };
+    return _defineProperty({}, theme, true);
+  };
+
   var boldMatch = function boldMatch(match, i) {
-    return _react["default"].createElement(_Text["default"], _extends({
+    return /*#__PURE__*/_react["default"].createElement(_Text["default"], _extends({
       key: i,
       strong: true,
       tag: "b"
-    }, themeObj), match);
+    }, getTheme()), match);
+  };
+
+  var getIconName = function getIconName() {
+    return icons[theme];
   };
 
   var renderText = function renderText() {
     var textArray;
     if (!Array.isArray(children)) textArray = [children];
-    return (0, _flatten["default"])(textArray.map(function (x) {
+    var text = (0, _flatten["default"])(textArray.map(function (x) {
       return (0, _isString["default"])(x) ? replaceStringToBold(x, theme) : x;
     }));
-  };
 
-  var getTheme = function getTheme() {
-    return _defineProperty({}, theme, true);
-  };
+    if (cta) {
+      text.push( /*#__PURE__*/_react["default"].createElement(_react.Fragment, null, ' ', /*#__PURE__*/_react["default"].createElement("a", {
+        className: classes.cta,
+        href: cta.href,
+        target: cta.target,
+        onClick: cta.onClick
+      }, /*#__PURE__*/_react["default"].createElement(_Text["default"], _extends({
+        tag: "span"
+      }, getTheme()), cta.text))));
+    }
 
-  var getIconColor = function getIconColor() {
-    return [_colors["default"]["".concat(theme, "Text")]];
+    return text;
   };
 
-  var themeObj = getTheme(theme);
-  return _react["default"].createElement("div", {
+  return /*#__PURE__*/_react["default"].createElement("div", {
     id: id,
     className: className,
     style: style
-  }, _react["default"].createElement(_Flexbox["default"], {
-    display: "flex",
+  }, /*#__PURE__*/_react["default"].createElement(_Flexbox["default"], {
     justifyContent: "start",
-    className: "".concat(classes.container, " ").concat(classes[theme])
-  }, icon && _react["default"].createElement(_Icon["default"], {
-    iconName: icon,
+    display: "flex",
+    className: "".concat(classes.container, " ").concat(classes[theme]).concat(noBorderRadius ? " ".concat(classes.noBorderRadius) : '')
+  }, /*#__PURE__*/_react["default"].createElement(_Flexbox["default"], {
+    display: "flex",
+    flex: "1",
+    justifyContent: center ? 'center' : null,
+    alignItems: "center"
+  }, icon && /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
+    iconName: getIconName(),
     className: classes.icon,
-    colors: getIconColor(theme)
-  }), _react["default"].createElement(_Flexbox["default"], {
-    flex: "1"
-  }, _react["default"].createElement(_Text["default"], _extends({
+    colors: [_colors["default"]["".concat(theme, "Text")]]
+  }), /*#__PURE__*/_react["default"].createElement("div", {
+    className: icon ? classes.textWithIcon : classes.text
+  }, /*#__PURE__*/_react["default"].createElement(_Text["default"], _extends({
     standard: true,
     tag: "div"
-  }, themeObj), renderText()))));
+  }, getTheme()), renderText()))), onClose && /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
+    iconName: "cross",
+    onClick: onClose,
+    colors: [theme === PROMOTE ? _colors["default"].bgWhite : _colors["default"]["".concat(theme, "Text")]],
+    className: spacedClose ? classes.spacedClose : null
+  })));
 };
 
 Tip.defaultProps = {
@@ -103,13 +147,33 @@ Tip.propTypes = {
   classes: _propTypes["default"].object.isRequired,
 
   /** Theme of the Tip. */
-  theme: _propTypes["default"].oneOf(['info', 'warning', 'success', 'error']),
+  theme: _propTypes["default"].oneOf(['info', 'warning', 'success', 'error', 'promote']),
 
   /** Text of the tip. If you put text between two * characters that text will be displayed as bold. */
   children: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].node]).isRequired,
 
-  /** Icon name to show on the left. */
-  icon: _propTypes["default"].string,
+  /** Call to action. Appended after the children's text. */
+  cta: _propTypes["default"].shape({
+    text: _propTypes["default"].string,
+    href: _propTypes["default"].string,
+    target: _propTypes["default"].string,
+    onClick: _propTypes["default"].func
+  }),
+
+  /** Boolean to show an icon. */
+  icon: _propTypes["default"].bool,
+
+  /** Cancel the default border radius. */
+  noBorderRadius: _propTypes["default"].bool,
+
+  /** Center Tip content. */
+  center: _propTypes["default"].bool,
+
+  /** Function to call on click of the x icon. */
+  onClose: _propTypes["default"].func,
+
+  /** Extra padding on the right of the x icon. */
+  spacedClose: _propTypes["default"].bool,
   id: _propTypes["default"].string,
   className: _propTypes["default"].string,
   style: _propTypes["default"].object

package/build/Tip/Tip.test.js

@@ -21,13 +21,13 @@ var reduceClasses = function reduceClasses(prev, curr) {
 var classes = Object.keys(_styles["default"]).reduce(reduceClasses, {});
 describe("Tip", function () {
   it('matches the snapshot', function () {
-    var wrapper = (0, _enzyme.shallow)(_react["default"].createElement(_Tip["default"], {
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_Tip["default"], {
       classes: classes
     }));
     expect(wrapper).toMatchSnapshot();
   });
   it('has the right theme', function () {
-    var wrapper = (0, _enzyme.shallow)(_react["default"].createElement(_Tip["default"], {
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_Tip["default"], {
       classes: classes,
       theme: "info"
     }));
@@ -40,14 +40,14 @@ describe("Tip", function () {
     expect(wrapper.find('.warning').length).toBe(1);
   });
   it('has an icon', function () {
-    var wrapper = (0, _enzyme.shallow)(_react["default"].createElement(_Tip["default"], {
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_Tip["default"], {
       classes: classes,
       icon: "search"
     }));
     expect(wrapper.find('.icon').length).toBe(1);
   });
   it('has bold text', function () {
-    var wrapper = (0, _enzyme.mount)(_react["default"].createElement(_Tip["default"], {
+    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react["default"].createElement(_Tip["default"], {
       classes: classes
     }, "Text with *bold* text"));
     expect(wrapper.find('b').length).toBe(1);
@@ -55,7 +55,7 @@ describe("Tip", function () {
 });
 describe("TipJSS", function () {
   it('matches the snapshot', function () {
-    var wrapper = (0, _enzyme.shallow)(_react["default"].createElement(_index["default"], null));
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_index["default"], null));
     expect(wrapper).toMatchSnapshot();
   });
 });