@occmundial/occ-atomic 3.0.0-beta.6 → 3.0.0-beta.8

package/CHANGELOG.md

@@ -1,3 +1,31 @@
+# [3.0.0-beta.8](https://github.com/occmundial/occ-atomic/compare/v3.0.0-beta.7...v3.0.0-beta.8) (2024-06-06)
+
+
+### Bug Fixes
+
+* Add border for promote alert ([5050f18](https://github.com/occmundial/occ-atomic/commit/5050f187b60f98118654ecbbe3e2cba7b29790ab))
+* Add min height to tip container ([579d263](https://github.com/occmundial/occ-atomic/commit/579d26306d59ce73b5084f9cd632dd12ed162fc5))
+* Resolve conflicts ([0a15dfa](https://github.com/occmundial/occ-atomic/commit/0a15dfa8d8da38a724d71622809f0e02c5bed0e9))
+
+
+### Features
+
+* Render tip in banner component ([239e2c8](https://github.com/occmundial/occ-atomic/commit/239e2c82c23d79698bd912931b314ceddf252fb4))
+* Update tip component with new design tokens ([b2367fc](https://github.com/occmundial/occ-atomic/commit/b2367fcaade288609df4c841c91fb308841ae4b0))
+
+
+### Performance Improvements
+
+* Memoize text replace in tip text component ([69180ce](https://github.com/occmundial/occ-atomic/commit/69180ce9cb1e812769e31a837257d8c8e6f24199))
+
+# [3.0.0-beta.7](https://github.com/occmundial/occ-atomic/compare/v3.0.0-beta.6...v3.0.0-beta.7) (2024-06-06)
+
+
+### Bug Fixes
+
+* Fix radio styles and add a form nav behavior ([59f0320](https://github.com/occmundial/occ-atomic/commit/59f03207a45b1ec27e02970668cffe2cfd5931a9))
+* Ignore tab index if radio element is disabled ([e479098](https://github.com/occmundial/occ-atomic/commit/e4790982a127408a474f688a4647612ef8fbb446))
+
 # [3.0.0-beta.6](https://github.com/occmundial/occ-atomic/compare/v3.0.0-beta.5...v3.0.0-beta.6) (2024-06-05)
 
 

package/build/Banner/Banner.js

@@ -9,17 +9,9 @@ var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _Flexbox = _interopRequireDefault(require("../Flexbox"));
-
-var _WindowSize = _interopRequireDefault(require("../WindowSize"));
-
-var _Text = _interopRequireDefault(require("../Text"));
-
-var _Icon = _interopRequireDefault(require("../Icon"));
-
 var _grid = _interopRequireDefault(require("../subatomic/grid"));
 
-var _colors = _interopRequireDefault(require("../subatomic/colors"));
+var _Tip = _interopRequireDefault(require("../Tip"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
@@ -27,38 +19,27 @@ var Banner = function Banner(_ref) {
   var id = _ref.id,
       style = _ref.style,
       className = _ref.className,
-      classes = _ref.classes,
       children = _ref.children,
       onClose = _ref.onClose,
-      winWidth = _ref.winWidth;
-  var isMobile = winWidth < _grid["default"].xs;
-  return /*#__PURE__*/_react["default"].createElement("div", {
+      winWidth = _ref.winWidth,
+      cta = _ref.cta,
+      _ref$theme = _ref.theme,
+      theme = _ref$theme === void 0 ? 'promote' : _ref$theme;
+  return /*#__PURE__*/_react["default"].createElement(_Tip["default"], {
     id: id,
+    style: style,
     className: className,
-    style: style
-  }, /*#__PURE__*/_react["default"].createElement(_Flexbox["default"], {
-    display: "flex",
-    className: classes.container
-  }, /*#__PURE__*/_react["default"].createElement(_Flexbox["default"], {
-    flex: "1",
-    className: classes.textFlex
-  }, /*#__PURE__*/_react["default"].createElement(_Text["default"], {
-    white: true,
-    small: isMobile,
-    tag: "div",
-    className: classes.textBanner
-  }, children)), /*#__PURE__*/_react["default"].createElement(_Flexbox["default"], {
-    className: classes.iconFlex
-  }, /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
-    iconName: "close",
-    colors: [_colors["default"].bgWhite],
-    onClick: onClose,
-    className: classes.icon
-  }))));
+    onClose: onClose,
+    size: winWidth < _grid["default"].xs ? 'small' : 'large',
+    center: true,
+    type: "banner",
+    cta: cta,
+    theme: theme,
+    icon: true
+  }, children);
 };
 
 Banner.propTypes = {
-  classes: _propTypes["default"].object.isRequired,
   winWidth: _propTypes["default"].number,
 
   /** Text of the tip. If you put text between two * characters that text will be displayed as bold. */
@@ -68,9 +49,14 @@ Banner.propTypes = {
   id: _propTypes["default"].string,
   className: _propTypes["default"].string,
   style: _propTypes["default"].object,
-  onClose: _propTypes["default"].func
+  onClose: _propTypes["default"].func,
+  cta: _propTypes["default"].shape({
+    text: _propTypes["default"].string,
+    href: _propTypes["default"].string,
+    target: _propTypes["default"].string,
+    onClick: _propTypes["default"].func
+  }),
+  theme: _propTypes["default"].oneOf(['info', 'warning', 'success', 'error', 'promote'])
 };
-
-var _default = (0, _WindowSize["default"])(Banner);
-
+var _default = Banner;
 exports["default"] = _default;

package/build/Radio/Radio.js

@@ -13,6 +13,8 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _Text = _interopRequireDefault(require("../Text"));
 
+var _Tag = _interopRequireDefault(require("../Tag"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": 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); }
@@ -75,6 +77,14 @@ var Radio = /*#__PURE__*/function (_React$Component) {
         if (onChange) onChange(option.value);
       }
     }
+  }, {
+    key: "handleKeyDown",
+    value: function handleKeyDown(e, option) {
+      if (e.keyCode == 13 || e.keyCode == 32) {
+        e.preventDefault();
+        this.onChange(option);
+      }
+    }
   }, {
     key: "render",
     value: function render() {
@@ -87,6 +97,7 @@ var Radio = /*#__PURE__*/function (_React$Component) {
           id = _this$props.id,
           textOverflow = _this$props.textOverflow,
           className = _this$props.className,
+          alignLeft = _this$props.alignLeft,
           style = _this$props.style;
       return /*#__PURE__*/_react["default"].createElement("div", {
         id: id
@@ -94,7 +105,10 @@ var Radio = /*#__PURE__*/function (_React$Component) {
         return /*#__PURE__*/_react["default"].createElement("div", _extends({
           id: option.trk,
           key: option.value,
-          tabIndex: -1,
+          tabIndex: option.disabled ? -1 : 0,
+          onKeyDown: function onKeyDown(e) {
+            return _this2.handleKeyDown(e, option);
+          },
           "data-testid": option.testId
         }, option.testId && {
           'data-value': selected == option.value ? 1 : 0
@@ -109,12 +123,15 @@ var Radio = /*#__PURE__*/function (_React$Component) {
           id: option.trk
         }), option.label && /*#__PURE__*/_react["default"].createElement(_Text["default"], {
           tag: "label",
-          className: "".concat(classes.label).concat(textOverflow ? " ".concat(classes.overflow) : '')
+          className: "".concat(classes.label).concat(textOverflow ? " ".concat(classes.overflow) : '').concat(alignLeft ? " ".concat(classes.alignLeft) : '')
         }, option.label), option.right && /*#__PURE__*/_react["default"].createElement(_Text["default"], {
           tag: "label",
           corpSecondary: true,
           className: classes.right
-        }, option.right));
+        }, option.right), option.tag && /*#__PURE__*/_react["default"].createElement(_Tag["default"], {
+          theme: "link",
+          className: classes.tag
+        }, option.tag));
       }));
     }
   }]);
@@ -139,6 +156,7 @@ Radio.propTypes = {
     value: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
     label: _propTypes["default"].string,
     right: _propTypes["default"].string,
+    tag: _propTypes["default"].string,
     trk: _propTypes["default"].string,
 
     /** The testId property adds the data attribute data-testid to
@@ -146,6 +164,9 @@ Radio.propTypes = {
     testId: _propTypes["default"].string
   })),
 
+  /** Align the content to the left */
+  alignLeft: _propTypes["default"].bool,
+
   /** Use this prop to overflow the text of the label, adding '...' and the end. */
   textOverflow: _propTypes["default"].bool,
 

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

@@ -15,6 +15,9 @@ Object {
       },
     },
   },
+  "alignLeft": Object {
+    "flex": "none",
+  },
   "cont": Object {
     "&$active": Object {
       "&:active": Object {
@@ -24,7 +27,6 @@ Object {
         "& $radio:before": Object {
           "borderColor": "#0047A5",
           "borderWidth": "3px",
-          "boxShadow": "initial",
         },
       },
       "&:focus $radio:before": Object {
@@ -37,7 +39,6 @@ Object {
         },
         "& $radio:before": Object {
           "borderColor": "#0047A5",
-          "boxShadow": "initial",
         },
       },
     },
@@ -56,7 +57,7 @@ Object {
         "boxShadow": "initial",
       },
     },
-    "alignItems": "start",
+    "alignItems": "center",
     "boxSizing": "border-box",
     "cursor": "pointer",
     "display": "flex",
@@ -122,8 +123,11 @@ Object {
       "position": "absolute",
       "top": "50%",
       "transform": "translate(-50%, -50%)",
+      "transition": "0.3s all",
       "width": 20,
     },
+    "alignItems": "center",
+    "display": "flex",
     "height": "24px",
     "position": "relative",
     "width": "24px",
@@ -131,6 +135,11 @@ Object {
   "right": Object {
     "float": "right",
     "marginLeft": "8px",
+    "pointerEvents": "none",
+  },
+  "tag": Object {
+    "marginLeft": "8px",
+    "pointerEvents": "none",
   },
 }
 `;

package/build/Radio/styles.js

@@ -20,7 +20,7 @@ var _default = {
     paddingBottom: _spacing["default"]['size-2'],
     boxSizing: 'border-box',
     display: 'flex',
-    alignItems: 'start',
+    alignItems: 'center',
     cursor: 'pointer',
     outline: '0',
     '&$active': {
@@ -30,8 +30,7 @@ var _default = {
       },
       '&:hover': {
         '& $radio:before': {
-          borderColor: radio['selected']['border']['hover'],
-          boxShadow: 'initial'
+          borderColor: radio['selected']['border']['hover']
         },
         '& $radio:after': {
           background: radio['selected']['bg']['hover']
@@ -40,8 +39,7 @@ var _default = {
       '&:active': {
         '& $radio:before': {
           borderColor: radio['selected']['border']['hover'],
-          borderWidth: '3px',
-          boxShadow: 'initial'
+          borderWidth: '3px'
         },
         '& $radio:after': {
           background: radio['selected']['bg']['hover']
@@ -49,10 +47,6 @@ var _default = {
       }
     },
     '&:not($active)': {
-      '&:focus $radio:before': {
-        borderColor: radio['unselected']['border']['default'],
-        boxShadow: _shadows["default"]['focus-bright-blue']
-      },
       '&:hover $radio:before': {
         borderColor: radio['unselected']['border']['hover'],
         boxShadow: 'initial'
@@ -61,6 +55,10 @@ var _default = {
         borderColor: radio['unselected']['border']['hover'],
         borderWidth: '2px',
         boxShadow: 'initial'
+      },
+      '&:focus $radio:before': {
+        borderColor: radio['unselected']['border']['default'],
+        boxShadow: _shadows["default"]['focus-bright-blue']
       }
     }
   },
@@ -68,6 +66,8 @@ var _default = {
     width: _spacing["default"]['size-5'],
     height: _spacing["default"]['size-5'],
     position: 'relative',
+    display: 'flex',
+    alignItems: 'center',
     '&:before': {
       content: '""',
       boxSizing: 'border-box',
@@ -79,7 +79,8 @@ var _default = {
       left: '50%',
       transform: 'translate(-50%, -50%)',
       border: "1px solid ".concat(radio['unselected']['border']['default']),
-      background: radio['bg']['default']
+      background: radio['bg']['default'],
+      transition: '0.3s all'
     },
     '&:after': {
       content: '""',
@@ -136,12 +137,20 @@ var _default = {
   },
   right: {
     marginLeft: _spacing["default"]['size-2'],
-    "float": 'right'
+    "float": 'right',
+    pointerEvents: 'none'
   },
   overflow: {
     overflow: 'hidden',
     textOverflow: 'ellipsis',
     whiteSpace: 'nowrap'
+  },
+  tag: {
+    marginLeft: _spacing["default"]['size-2'],
+    pointerEvents: 'none'
+  },
+  alignLeft: {
+    flex: 'none'
   }
 };
 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;
+  if (text === '' || typeof text !== 'string') return text;
+  var result = (0, _react.useMemo)(function () {
+    return text.replace(boldRegex, function (_, txt) {
+      return txt;
+    });
+  }, [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;

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

@@ -4,44 +4,111 @@ exports[`Tip matches the snapshot 1`] = `ShallowWrapper {}`;
 
 exports[`Tip styles matches the snapshot 1`] = `
 Object {
+  "bannerContent": Object {
+    "margin": "auto",
+    "maxWidth": "1200px",
+  },
+  "closeIcon": Object {
+    "marginLeft": "16px",
+  },
   "container": Object {
     "alignItems": "center",
-    "borderRadius": 6,
-    "padding": 16,
+    "borderRadius": "4px",
+    "minHeight": "56px",
+    "outlineOffset": "-1px",
+    "padding": Array [
+      "8px",
+      "16px",
+    ],
   },
   "cta": Object {
     "cursor": "pointer",
+    "font": "400 14px/1.5 'OccText', sans-serif",
     "textDecoration": "underline",
+    "textWrap": "nowrap",
+  },
+  "ctaLarge": Object {
+    "alignSelf": "center",
+    "marginLeft": "16px",
+  },
+  "ctaSmall": Object {
+    "alignSelf": "start",
+    "margin": Array [
+      "8px",
+      0,
+      0,
+    ],
   },
   "error": Object {
-    "backgroundColor": "#fcebeb",
+    "backgroundColor": "#fce8e8",
+    "outline": "1px solid #FBDFDF",
   },
   "icon": Object {
-    "marginRight": 8,
+    "flexShrink": 0,
+    "marginRight": "8px",
   },
   "info": Object {
-    "backgroundColor": "#efebf7",
+    "backgroundColor": "#e3efff",
+    "outline": "1px solid #b9d7ff",
+  },
+  "largePadding": Object {
+    "padding": "12px",
   },
   "noBorderRadius": Object {
     "borderRadius": 0,
   },
+  "normalText": Object {
+    "display": "inline-block",
+    "font": "400 14px/1.5 'OccText', sans-serif",
+    "margin": 0,
+  },
   "promote": Object {
-    "backgroundColor": "#222222",
+    "backgroundColor": "#000",
+    "outline": "1px solid rgba(255,255,255,0.2)",
   },
-  "spacedClose": Object {
-    "marginRight": 48,
+  "small": Object {
+    "maxWidth": 360,
+    "padding": "12px",
+  },
+  "smallPadding": Object {
+    "padding": "8px",
   },
   "success": Object {
-    "backgroundColor": "#e6f5eb",
+    "backgroundColor": "#ebfbf1",
+    "outline": "1px solid #d7f6e3",
   },
   "text": Object {
     "maxWidth": "100%",
   },
-  "textWithIcon": Object {
-    "maxWidth": "calc(100% - 32px)",
+  "textContainer": Object {
+    "padding": Array [
+      "12px",
+      0,
+    ],
+  },
+  "textError": Object {
+    "color": "#8b1313",
+    "textDecorationColor": "#8b1313",
+  },
+  "textInfo": Object {
+    "color": "#083CAE",
+    "textDecorationColor": "#083CAE",
+  },
+  "textPromote": Object {
+    "color": "#fff",
+    "textDecorationColor": "#fff",
+  },
+  "textSuccess": Object {
+    "color": "#16542e",
+    "textDecorationColor": "#16542e",
+  },
+  "textWarning": Object {
+    "color": "#664a0e",
+    "textDecorationColor": "#664a0e",
   },
   "warning": Object {
-    "backgroundColor": "#fffaed",
+    "backgroundColor": "#fff8e9",
+    "outline": "1px solid #fff1d3",
   },
 }
 `;

package/build/Tip/styles.js

@@ -5,61 +5,114 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 
-var _spacing = _interopRequireDefault(require("../subatomic/spacing"));
+var _colors = _interopRequireDefault(require("../tokens/colors.json"));
 
-var _colors = _interopRequireDefault(require("../subatomic/colors"));
+var _fonts = _interopRequireDefault(require("../tokens/fonts.json"));
+
+var _spacing = _interopRequireDefault(require("../tokens/spacing.json"));
+
+var _borderRadius = _interopRequireDefault(require("../tokens/borderRadius.json"));
+
+var _styles = require("../Text/styles");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-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 _default = {
   container: {
-    padding: small,
-    borderRadius: radius,
-    alignItems: 'center'
+    padding: [_spacing["default"]['size-2'], _spacing["default"]['size-4']],
+    borderRadius: _borderRadius["default"]['br-xs'],
+    minHeight: '56px',
+    alignItems: 'center',
+    outlineOffset: '-1px'
   },
   noBorderRadius: {
     borderRadius: 0
   },
   info: {
-    backgroundColor: infoLight
+    backgroundColor: _colors["default"].alert.info.bg,
+    outline: "1px solid ".concat(_colors["default"].alert.info.border)
   },
   warning: {
-    backgroundColor: warningLight
+    backgroundColor: _colors["default"].alert.warning.bg,
+    outline: "1px solid ".concat(_colors["default"].alert.warning.border)
   },
   success: {
-    backgroundColor: successLight
+    backgroundColor: _colors["default"].alert.success.bg,
+    outline: "1px solid ".concat(_colors["default"].alert.success.border)
   },
   error: {
-    backgroundColor: errorLight
+    backgroundColor: _colors["default"].alert.error.bg,
+    outline: "1px solid ".concat(_colors["default"].alert.error.border)
   },
   promote: {
-    backgroundColor: grey900
+    backgroundColor: _colors["default"].alert.neutral.bg,
+    outline: "1px solid ".concat(_colors["default"].alert.neutral.border)
+  },
+  textInfo: {
+    color: _colors["default"].text.indigo.primary,
+    textDecorationColor: _colors["default"].text.indigo.primary
+  },
+  textWarning: {
+    color: _colors["default"].text.warning,
+    textDecorationColor: _colors["default"].text.warning
+  },
+  textSuccess: {
+    color: _colors["default"].text.success,
+    textDecorationColor: _colors["default"].text.success
+  },
+  textError: {
+    color: _colors["default"].text.error,
+    textDecorationColor: _colors["default"].text.error
+  },
+  textPromote: {
+    color: _colors["default"].text.white.primary,
+    textDecorationColor: _colors["default"].text.white.primary
   },
   icon: {
-    marginRight: tiny
+    marginRight: _spacing["default"]['size-2'],
+    flexShrink: 0
   },
   text: {
     maxWidth: '100%'
   },
-  textWithIcon: {
-    maxWidth: "calc(100% - ".concat(medium, "px)")
+  closeIcon: {
+    marginLeft: _spacing["default"]['size-4']
   },
-  spacedClose: {
-    marginRight: large
+  smallPadding: {
+    padding: _spacing["default"]['size-2']
+  },
+  largePadding: {
+    padding: _spacing["default"]['size-3']
   },
   cta: {
     textDecoration: 'underline',
-    cursor: 'pointer'
+    font: (0, _styles.parseFontValue)(_fonts["default"]['alert-default']),
+    cursor: 'pointer',
+    textWrap: 'nowrap'
+  },
+  ctaLarge: {
+    marginLeft: _spacing["default"]['size-4'],
+    alignSelf: 'center'
+  },
+  ctaSmall: {
+    margin: [_spacing["default"]['size-2'], 0, 0],
+    alignSelf: 'start'
+  },
+  normalText: {
+    font: (0, _styles.parseFontValue)(_fonts["default"]['alert-default']),
+    display: 'inline-block',
+    margin: 0
+  },
+  textContainer: {
+    padding: [_spacing["default"]['size-3'], 0]
+  },
+  small: {
+    maxWidth: 360,
+    padding: _spacing["default"]['size-3']
+  },
+  bannerContent: {
+    maxWidth: '1200px',
+    margin: 'auto'
   }
 };
 exports["default"] = _default;

package/build/tokens/colors.json

@@ -343,7 +343,7 @@
     },
     "info": {
       "bg": "#e3efff",
-      "border": "#e3efff"
+      "border": "#b9d7ff"
     },
     "neutral": {
       "bg": "#000",
@@ -402,7 +402,7 @@
     },
     "info": {
       "bg": "#e3efff",
-      "border": "#e3efff"
+      "border": "#b9d7ff"
     },
     "featured": {
       "border": "rgba(255,255,255,0.2)",
@@ -567,7 +567,7 @@
       "subtle": "#d7f6e3"
     },
     "info": {
-      "subtle": "#e3efff"
+      "subtle": "#b9d7ff"
     }
   },
   "text": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@occmundial/occ-atomic",
-  "version": "3.0.0-beta.6",
+  "version": "3.0.0-beta.8",
   "description": "Collection of shareable styled React components for OCC applications.",
   "homepage": "http://occmundial.github.io/occ-atomic",
   "main": "build/index.js",