@occmundial/occ-atomic 2.0.0 → 3.0.0-beta.10

package/build/TextField/styles.js

@@ -3,27 +3,45 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
+exports["default"] = exports.objectToFontValue = void 0;
 
-var _hexRgba = _interopRequireDefault(require("hex-rgba"));
+var _fonts = _interopRequireDefault(require("../subatomic/fonts"));
 
-var _colors = _interopRequireDefault(require("../subatomic/colors"));
+var _colors = _interopRequireDefault(require("../tokens/colors.json"));
 
-var _fonts = _interopRequireDefault(require("../subatomic/fonts"));
+var _fonts2 = _interopRequireDefault(require("../tokens/fonts.json"));
+
+var _spacing = _interopRequireDefault(require("../tokens/spacing.json"));
 
-var _spacing = _interopRequireDefault(require("../subatomic/spacing"));
+var _borderRadius = _interopRequireDefault(require("../tokens/borderRadius.json"));
+
+var _shadows = _interopRequireDefault(require("../tokens/shadows.json"));
 
 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 placeholder = _fonts2["default"]['text-field-placeholder'];
+var label = _fonts2["default"]['text-field-label'];
+var assistiveText = _fonts2["default"]['text-field-assistive-text'];
+var TRANSITION = 'all cubic-bezier(0.25,0.46,0.45,0.94) 0.2s';
+var border = {
+  DEFAULT: "inset 0 0 0 1px ".concat(_colors["default"]['text-field'].border["default"]),
+  HOVER: "inset 0 0 0 1px ".concat(_colors["default"]['text-field'].border.hover),
+  FOCUS: "inset 0 0 0 2px ".concat(_colors["default"]['text-field'].border.focus),
+  ERROR: "inset 0 0 0 1px ".concat(_colors["default"]['text-field'].border.error)
+};
 
+var objectToFontValue = function objectToFontValue(font) {
+  return "".concat(font.fontWeight, " ").concat(font.fontSize, "/").concat(font.lineHeight, " ").concat(_fonts["default"].body);
+};
+
+exports.objectToFontValue = objectToFontValue;
 var _default = {
   container: {
-    position: 'relative',
-    marginBottom: _spacing["default"].tiny
+    position: 'relative'
   },
   top: {
-    height: _spacing["default"].base,
+    display: 'flex',
+    marginBottom: _spacing["default"]['size-2'],
     '&:after': {
       content: '""',
       clear: 'both'
@@ -32,75 +50,27 @@ var _default = {
   "default": {},
   disabled: {
     '& $input': {
-      borderColor: _colors["default"].inkLightest,
-      color: _colors["default"].inkLightest,
-      paddingTop: 9
-    },
-    '& $label': {
-      color: _colors["default"].inkLightest
-    },
-    '& $passIcon': {
-      cursor: 'auto'
+      background: _colors["default"]['text-field'].bg.disabled,
+      color: _colors["default"].text.corp.disabled
     }
   },
   focus: {
     '& $input': {
-      borderColor: _colors["default"].prim
-    },
-    '& $searchField': {
-      borderWidth: 2,
-      paddingLeft: _spacing["default"].tiny - 1
-    },
-    '& $searchFieldHasIcon': {
-      paddingLeft: 41
+      boxShadow: "".concat(border.FOCUS, ", ").concat(_shadows["default"]['focus-bright-blue'], " !important")
     }
   },
   error: {
     '& $input': {
-      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
+      boxShadow: border.ERROR
     }
   },
   label: {
-    fontWeight: 300,
-    fontFamily: _fonts["default"].body,
-    fontSize: 14,
-    lineHeight: 1.5,
-    color: _colors["default"].ink,
-    transition: '0.3s all',
-    '& a': {
-      color: _colors["default"].blue,
-      textDecoration: 'none',
-      outline: 'none'
-    }
-  },
-  left: {
-    "float": 'left'
-  },
-  right: {
-    "float": 'right'
+    font: objectToFontValue(label),
+    color: _colors["default"].text.corp.primary
   },
   counter: {
-    color: _colors["default"].inkLighter
+    font: objectToFontValue(assistiveText),
+    color: _colors["default"].text.corp.secondary
   },
   inputWrap: {
     boxSizing: 'border-box',
@@ -111,24 +81,21 @@ var _default = {
     display: 'flex',
     alignItems: 'center',
     width: '100%',
-    height: 40,
-    color: _colors["default"].ink,
-    fontFamily: _fonts["default"].body,
-    fontWeight: 300,
-    fontSize: 16,
-    lineHeight: 1.5,
-    background: _colors["default"].bgWhite,
-    border: "1px solid ".concat(_colors["default"].grey200),
-    borderRadius: 4,
-    padding: [_spacing["default"].tiny, _spacing["default"].small],
-    boxShadow: 'none',
+    height: 48,
+    color: _colors["default"].text.corp.primary,
+    font: objectToFontValue(placeholder),
+    background: _colors["default"]['text-field'].bg["default"],
+    border: 'none',
+    borderRadius: _borderRadius["default"]['br-xs'],
+    padding: [_spacing["default"]['size-1'], _spacing["default"]['size-4']],
+    boxShadow: border.DEFAULT,
     outline: 'none',
-    transition: '0.3s all',
+    transition: TRANSITION,
     appearance: 'none',
     '-webkit-appearance': 'none',
-    caretColor: _colors["default"].prim,
+    caretColor: _colors["default"].border.brand["default"],
     '&::placeholder': {
-      color: _colors["default"].inkLighter
+      color: _colors["default"].text.corp.secondary
     },
     '&::-webkit-outer-spin-button': {
       '-webkit-appearance': 'none',
@@ -140,6 +107,9 @@ var _default = {
     },
     '&[type=number]': {
       '-moz-appearance': 'textfield'
+    },
+    '&:hover': {
+      boxShadow: border.HOVER
     }
   },
   inputDisabled: {
@@ -147,118 +117,80 @@ var _default = {
     whiteSpace: 'nowrap'
   },
   hasRightIcon: {
-    marginRight: _spacing["default"].small
+    marginRight: _spacing["default"]['size-8']
   },
   select: {
     '&::-ms-expand': {
       display: 'none'
     },
-    paddingRight: 32,
+    paddingRight: _spacing["default"]['size-8'],
     '& optgroup': {
-      fontSize: 14,
-      fontWeight: 'normal',
-      lineHeight: 1.5,
-      color: _colors["default"].inkLight
+      font: objectToFontValue(label),
+      color: _colors["default"].text.corp.secondary
     },
     '& option': {
-      fontSize: 16,
-      lineHeight: 1.5,
-      color: _colors["default"].ink,
+      font: objectToFontValue(placeholder),
+      color: _colors["default"].text.corp.primary,
       '&:disabled': {
-        color: _colors["default"].inkLighter
+        color: _colors["default"].text.corp.disabled
       }
     },
     '&:invalid, & option[value=""]': {
-      color: _colors["default"].inkLighter
+      color: _colors["default"].text.corp.disabled
     }
   },
   textarea: {
     resize: 'none',
+    paddingg: [_spacing["default"]['size-3'], _spacing["default"]['size-4']],
     height: 120,
     alignItems: 'flex-start'
   },
   hasIcon: {
-    paddingLeft: 42
+    paddingLeft: _spacing["default"]['size-8']
   },
   hasPass: {
-    paddingRight: 42
+    paddingRight: _spacing["default"]['size-8']
   },
   icon: {
     position: 'absolute',
-    left: _spacing["default"].small,
+    left: _spacing["default"]['size-4'],
     top: '50%',
     transform: 'translateY(-50%)'
   },
-  passIcon: {
-    width: 24,
-    height: 24,
-    background: 'none',
-    border: 0,
-    padding: 3,
-    margin: 0,
+  rightButton: {
     position: 'absolute',
-    right: 12,
-    top: 8,
-    zIndex: 1,
-    outline: 0,
-    cursor: 'pointer'
+    right: _spacing["default"]['size-1'],
+    top: '50%',
+    transform: 'translateY(-50%)',
+    zIndex: 1
   },
   selectIcon: {
-    width: 18,
-    height: 24,
-    background: 'none',
-    border: 0,
-    padding: '3px 0',
-    margin: 0,
     position: 'absolute',
-    right: 12,
-    top: 8,
-    zIndex: 1,
-    outline: 0,
+    right: _spacing["default"]['size-4'],
+    top: '50%',
+    transform: 'translateY(-50%)',
     pointerEvents: 'none'
   },
   hasClear: {
-    paddingRight: 42
+    paddingRight: _spacing["default"]['size-8']
   },
-  clear: _defineProperty({
-    width: 24,
-    height: 24,
-    background: 'none',
-    border: 0,
-    padding: 0,
-    margin: 0,
-    position: 'absolute',
-    right: 12,
-    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
+  assistiveTextWrap: {
+    display: 'flex'
   },
-  errorAssistiveText: {
-    color: _colors["default"].errorText
+  assistiveText: {
+    font: objectToFontValue(assistiveText),
+    color: _colors["default"].text.corp.secondary
   },
-  errorIcon: {
-    marginBottom: -2
+  assistiveError: {
+    color: _colors["default"].text.error
   },
   bottom: {
-    height: 20,
-    marginTop: 4
-  },
-  searchField: {
-    height: _spacing["default"].large,
-    borderRadius: _spacing["default"].base,
-    borderColor: _colors["default"].grey600,
-    background: [_colors["default"].bgWhite, '!important']
-  },
-  searchFieldHasIcon: {}
+    display: 'flex',
+    justifyContent: 'space-between',
+    marginTop: _spacing["default"]['size-2']
+  }
 };
 exports["default"] = _default;

package/build/Tip/Tip.js

@@ -1,39 +1,26 @@
 "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 = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _isString = _interopRequireDefault(require("lodash/isString"));
-
-var _flatten = _interopRequireDefault(require("lodash/flatten"));
-
 var _Flexbox = _interopRequireDefault(require("../Flexbox"));
 
-var _Text = _interopRequireDefault(require("../Text"));
-
 var _Icon = _interopRequireDefault(require("../Icon"));
 
-var _colors = _interopRequireDefault(require("../subatomic/colors"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+var _Button = _interopRequireDefault(require("../Button"));
 
-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); }
+var _TipText = _interopRequireDefault(require("./TipText"));
 
-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; }
+var _colors = _interopRequireDefault(require("../tokens/colors.json"));
 
-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; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-var boldRegex = /\*(.*?)\*/g;
 var icons = {
   info: 'info-circle',
   warning: 'alert',
@@ -42,6 +29,13 @@ var icons = {
   promote: null
 };
 var PROMOTE = 'promote';
+var colorTextClasses = {
+  info: 'textInfo',
+  promote: 'textPromote',
+  warning: 'textWarning',
+  success: 'textSuccess',
+  error: 'textError'
+};
 /** 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) {
@@ -54,62 +48,12 @@ var Tip = function Tip(_ref) {
       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;
-    var result = children.split(boldRegex);
-    if (result.length === 1) return children;
-
-    for (var i = 1, length = result.length; i < length; i += 2) {
-      result[i] = boldMatch(result[i], i, theme);
-    }
-
-    return result;
-  };
-
-  var getTheme = function getTheme() {
-    if (theme === PROMOTE) return {
-      white: true
-    };
-    return _defineProperty({}, theme, true);
-  };
-
-  var boldMatch = function boldMatch(match, i) {
-    return /*#__PURE__*/_react["default"].createElement(_Text["default"], _extends({
-      key: i,
-      strong: true,
-      tag: "b"
-    }, getTheme()), match);
-  };
-
-  var getIconName = function getIconName() {
-    return icons[theme];
-  };
-
-  var renderText = function renderText() {
-    var textArray;
-    if (!Array.isArray(children)) textArray = [children];
-    var text = (0, _flatten["default"])(textArray.map(function (x) {
-      return (0, _isString["default"])(x) ? replaceStringToBold(x, theme) : x;
-    }));
-
-    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))));
-    }
-
-    return text;
-  };
-
+      cta = _ref.cta,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 'large' : _ref$size,
+      _ref$type = _ref.type,
+      type = _ref$type === void 0 ? 'alert' : _ref$type;
   return /*#__PURE__*/_react["default"].createElement("div", {
     id: id,
     className: className,
@@ -117,26 +61,34 @@ var Tip = function Tip(_ref) {
   }, /*#__PURE__*/_react["default"].createElement(_Flexbox["default"], {
     justifyContent: "start",
     display: "flex",
-    className: "".concat(classes.container, " ").concat(classes[theme]).concat(noBorderRadius ? " ".concat(classes.noBorderRadius) : '')
+    className: "".concat(classes.container, " ").concat(classes[theme]).concat(noBorderRadius ? " ".concat(classes.noBorderRadius) : '').concat(size === 'small' ? " ".concat(classes.small) : '')
   }, /*#__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(),
+    alignItems: "stretch",
+    className: type === 'banner' ? classes.bannerContent : ''
+  }, icon && theme !== PROMOTE && /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
+    iconName: icons[theme],
     className: classes.icon,
-    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"
-  }, getTheme()), renderText()))), onClose && /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
-    iconName: "cross",
+    colors: [theme === 'info' ? _colors["default"].icon.brand["default"] : _colors["default"].icon[theme]]
+  }), /*#__PURE__*/_react["default"].createElement(_Flexbox["default"], {
+    display: "flex",
+    direction: size === 'small' ? 'col' : 'row'
+  }, /*#__PURE__*/_react["default"].createElement(_TipText["default"], {
+    classes: "".concat(classes.normalText, " ").concat(classes[colorTextClasses[theme]]),
+    text: children
+  }), cta && /*#__PURE__*/_react["default"].createElement("a", {
+    className: "".concat(classes.cta, " ").concat(size === 'small' ? classes.ctaSmall : classes.ctaLarge, " ").concat(classes[colorTextClasses[theme]]),
+    href: cta.href,
+    target: cta.target,
+    onClick: cta.onClick
+  }, cta.text))), onClose && /*#__PURE__*/_react["default"].createElement(_Button["default"], {
     onClick: onClose,
-    colors: [theme === PROMOTE ? _colors["default"].bgWhite : _colors["default"]["".concat(theme, "Text")]],
-    className: spacedClose ? classes.spacedClose : null
+    className: classes.closeIcon,
+    size: type === 'banner' ? 'lg' : 'md',
+    icon: "x",
+    theme: theme === PROMOTE ? 'ghostWhite' : 'ghostGrey'
   })));
 };
 
@@ -151,6 +103,7 @@ Tip.propTypes = {
 
   /** 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,
+  size: _propTypes["default"].oneOf(['large', 'small']),
 
   /** Call to action. Appended after the children's text. */
   cta: _propTypes["default"].shape({
@@ -176,7 +129,8 @@ Tip.propTypes = {
   spacedClose: _propTypes["default"].bool,
   id: _propTypes["default"].string,
   className: _propTypes["default"].string,
-  style: _propTypes["default"].object
+  style: _propTypes["default"].object,
+  type: _propTypes["default"].oneOf(['alert', 'banner'])
 };
 var _default = Tip;
 exports["default"] = _default;

package/build/Tip/Tip.test.js

@@ -46,12 +46,6 @@ describe("Tip", function () {
     }));
     expect(wrapper.find('.icon').length).toBe(1);
   });
-  it('has bold text', function () {
-    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react["default"].createElement(_Tip["default"], {
-      classes: classes
-    }, "Text with *bold* text"));
-    expect(wrapper.find('b').length).toBe(1);
-  });
 });
 describe("TipJSS", function () {
   it('matches the snapshot', function () {

package/build/Tip/TipText/index.js

@@ -0,0 +1,41 @@
+"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 = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": 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; }
+
+var boldRegex = /\*(.*?)\*/g;
+
+var TipText = function TipText(_ref) {
+  var classes = _ref.classes,
+      text = _ref.text;
+  var result = (0, _react.useMemo)(function () {
+    return text.replace(boldRegex, function (_, txt) {
+      return txt;
+    });
+  }, [text]);
+  if (text === '' || typeof text !== 'string') return text;
+  return /*#__PURE__*/_react["default"].createElement("p", {
+    className: classes
+  }, result);
+};
+
+TipText.propTypes = {
+  classes: _propTypes["default"].string.isRequired,
+  text: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].node]).isRequired
+};
+var _default = TipText;
+exports["default"] = _default;