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

package/build/TextField/styles.js

@@ -5,8 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 
-var _reactJss = require("react-jss");
-
 var _hexRgba = _interopRequireDefault(require("hex-rgba"));
 
 var _colors = _interopRequireDefault(require("../subatomic/colors"));
@@ -17,7 +15,9 @@ var _spacing = _interopRequireDefault(require("../subatomic/spacing"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-var _default = (0, _reactJss.createUseStyles)({
+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',
     marginBottom: _spacing["default"].tiny
@@ -29,12 +29,16 @@ var _default = (0, _reactJss.createUseStyles)({
       clear: 'both'
     }
   },
+  "default": {},
   disabled: {
     '& $input': {
       borderColor: _colors["default"].inkLightest,
       color: _colors["default"].inkLightest,
       paddingTop: 9
     },
+    '& $label': {
+      color: _colors["default"].inkLightest
+    },
     '& $passIcon': {
       cursor: 'auto'
     }
@@ -42,6 +46,13 @@ var _default = (0, _reactJss.createUseStyles)({
   focus: {
     '& $input': {
       borderColor: _colors["default"].prim
+    },
+    '& $searchField': {
+      borderWidth: 2,
+      paddingLeft: _spacing["default"].tiny - 1
+    },
+    '& $searchFieldHasIcon': {
+      paddingLeft: 41
     }
   },
   error: {
@@ -50,15 +61,34 @@ var _default = (0, _reactJss.createUseStyles)({
       color: _colors["default"].errorText,
       background: (0, _hexRgba["default"])(_colors["default"].errorText, 4)
     },
-    '& $input::placeholder': {
-      color: _colors["default"].error
+    '& $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: {
-    lineHeight: '20px',
+    fontWeight: 300,
+    fontFamily: _fonts["default"].body,
+    fontSize: 14,
+    lineHeight: 1.5,
+    color: _colors["default"].ink,
     transition: '0.3s all',
     '& a': {
-      color: _colors["default"].textLink,
+      color: _colors["default"].blue,
       textDecoration: 'none',
       outline: 'none'
     }
@@ -69,6 +99,9 @@ var _default = (0, _reactJss.createUseStyles)({
   right: {
     "float": 'right'
   },
+  counter: {
+    color: _colors["default"].inkLighter
+  },
   inputWrap: {
     boxSizing: 'border-box',
     position: 'relative'
@@ -81,9 +114,9 @@ var _default = (0, _reactJss.createUseStyles)({
     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,
@@ -95,24 +128,41 @@ var _default = (0, _reactJss.createUseStyles)({
     '-webkit-appearance': 'none',
     caretColor: _colors["default"].prim,
     '&::placeholder': {
-      color: _colors["default"].inkLighter,
-      transition: '0.3s all'
+      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: _spacing["default"].medium,
+    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
@@ -135,33 +185,34 @@ var _default = (0, _reactJss.createUseStyles)({
   },
   icon: {
     position: 'absolute',
-    left: _spacing["default"].gutter,
-    top: _spacing["default"].tiny
+    left: _spacing["default"].small,
+    top: '50%',
+    transform: 'translateY(-50%)'
   },
   passIcon: {
-    width: _spacing["default"].base,
-    height: _spacing["default"].base,
+    width: 24,
+    height: 24,
     background: 'none',
     border: 0,
     padding: 3,
     margin: 0,
     position: 'absolute',
     right: 12,
-    top: _spacing["default"].tiny,
+    top: 8,
     zIndex: 1,
     outline: 0,
     cursor: 'pointer'
   },
   selectIcon: {
     width: 18,
-    height: _spacing["default"].base,
+    height: 24,
     background: 'none',
     border: 0,
     padding: '3px 0',
     margin: 0,
     position: 'absolute',
     right: 12,
-    top: _spacing["default"].tiny,
+    top: 8,
     zIndex: 1,
     outline: 0,
     pointerEvents: 'none'
@@ -169,30 +220,45 @@ var _default = (0, _reactJss.createUseStyles)({
   hasClear: {
     paddingRight: 42
   },
-  clear: {
-    width: _spacing["default"].base,
-    height: _spacing["default"].base,
+  clear: _defineProperty({
+    width: 24,
+    height: 24,
     background: 'none',
     border: 0,
     padding: 0,
     margin: 0,
     position: 'absolute',
     right: 12,
-    top: _spacing["default"].tiny,
+    top: '50%',
+    transform: 'translateY(-50%)',
     zIndex: 1,
     outline: 0,
     cursor: 'pointer'
-  },
+  }, "padding", 3),
   alignRight: {
     textAlign: 'right'
   },
+  assistiveText: {
+    color: _colors["default"].inkLighter,
+    fontSize: 12,
+    fontWeight: 300
+  },
+  errorAssistiveText: {
+    color: _colors["default"].errorText
+  },
   errorIcon: {
     marginBottom: -2
   },
   bottom: {
     height: 20,
-    marginTop: _spacing["default"].xTiny
-  }
-});
-
+    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();
   });
 });

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

@@ -0,0 +1,49 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Tip matches the snapshot 1`] = `ShallowWrapper {}`;
+
+exports[`Tip styles matches the snapshot 1`] = `
+Object {
+  "container": Object {
+    "alignItems": "center",
+    "borderRadius": 6,
+    "padding": 16,
+  },
+  "cta": Object {
+    "cursor": "pointer",
+    "textDecoration": "underline",
+  },
+  "error": Object {
+    "backgroundColor": "#fcebeb",
+  },
+  "icon": Object {
+    "marginRight": 8,
+  },
+  "info": Object {
+    "backgroundColor": "#efebf7",
+  },
+  "noBorderRadius": Object {
+    "borderRadius": 0,
+  },
+  "promote": Object {
+    "backgroundColor": "#222222",
+  },
+  "spacedClose": Object {
+    "marginRight": 48,
+  },
+  "success": Object {
+    "backgroundColor": "#e6f5eb",
+  },
+  "text": Object {
+    "maxWidth": "100%",
+  },
+  "textWithIcon": Object {
+    "maxWidth": "calc(100% - 32px)",
+  },
+  "warning": Object {
+    "backgroundColor": "#fffaed",
+  },
+}
+`;
+
+exports[`TipJSS matches the snapshot 1`] = `ShallowWrapper {}`;

package/build/Tip/styles.js

@@ -5,41 +5,61 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 
-var _hexRgba = _interopRequireDefault(require("hex-rgba"));
-
 var _spacing = _interopRequireDefault(require("../subatomic/spacing"));
 
 var _colors = _interopRequireDefault(require("../subatomic/colors"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-var info = _colors["default"].info,
-    warning = _colors["default"].warning,
-    success = _colors["default"].success,
-    error = _colors["default"].error;
+var infoLight = _colors["default"].infoLight,
+    warningLight = _colors["default"].warningLight,
+    successLight = _colors["default"].successLight,
+    errorLight = _colors["default"].errorLight,
+    grey900 = _colors["default"].grey900;
 var radius = _spacing["default"].radius,
+    large = _spacing["default"].large,
+    medium = _spacing["default"].medium,
     small = _spacing["default"].small,
     tiny = _spacing["default"].tiny;
-var alpha = 10;
 var _default = {
   container: {
     padding: small,
-    borderRadius: radius
+    borderRadius: radius,
+    alignItems: 'center'
+  },
+  noBorderRadius: {
+    borderRadius: 0
   },
   info: {
-    backgroundColor: (0, _hexRgba["default"])(info, alpha)
+    backgroundColor: infoLight
   },
   warning: {
-    backgroundColor: (0, _hexRgba["default"])(warning, alpha)
+    backgroundColor: warningLight
   },
   success: {
-    backgroundColor: (0, _hexRgba["default"])(success, alpha)
+    backgroundColor: successLight
   },
   error: {
-    backgroundColor: (0, _hexRgba["default"])(error, alpha)
+    backgroundColor: errorLight
+  },
+  promote: {
+    backgroundColor: grey900
   },
   icon: {
     marginRight: tiny
+  },
+  text: {
+    maxWidth: '100%'
+  },
+  textWithIcon: {
+    maxWidth: "calc(100% - ".concat(medium, "px)")
+  },
+  spacedClose: {
+    marginRight: large
+  },
+  cta: {
+    textDecoration: 'underline',
+    cursor: 'pointer'
   }
 };
 exports["default"] = _default;