@occmundial/occ-atomic 3.0.0-beta.2 → 3.0.0-beta.21

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

@@ -5,75 +5,91 @@ exports[`SlideToggle matches the snapshot 1`] = `ShallowWrapper {}`;
 exports[`SlideToggle styles matches the snapshot 1`] = `
 Object {
   "checked": Object {
-    "& $icon": Object {
-      "background": "url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJCQkgdmlld0JveD0iMCAwIDI0IDI0IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyNCAyNDsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgoJCTxwYXRoIGZpbGw9IiMwMDZFRkYiIGQ9Ik0xOC4zLDcuM2wxLjQsMS40bC04LjcsOWMtMC40LDAuNC0xLDAuNC0xLjQsMC4xbC00LjMtMy42bDEuMy0xLjVsMy42LDNDMTAuMiwxNS42LDE4LjMsNy4zLDE4LjMsNy4zeiIvPgoJCTwvc3ZnPg==)",
-    },
     "& $slider": Object {
-      "left": 16,
+      "left": "calc(100% - 28px)",
+    },
+    "& $switchBg": Object {
+      "background": "#0059CD",
     },
-    "background": "#0059CD",
   },
   "cont": Object {
-    "&:focus $switch$checked": Object {
-      "background": "#0059CD",
-      "boxShadow": "0 0 0 8px rgba(0,110,255,0.3)",
+    "&:active $switch $switchBg": Object {
+      "boxShadow": "inset 0 0 0 2px rgba(255,255,255,0.2)",
     },
-    "&:focus $switch:not($checked)": Object {
-      "background": "#E9EEF8",
+    "&:focus-visible $switch": Object {
       "boxShadow": "0 0 0 8px hsl(221 91.2% 35.7% / 0.3)",
     },
-    "&:hover $switch$checked, &:active $switch$checked": Object {
-      "background": "#083CAE",
+    "&:focus-visible $switch$checked": Object {
+      "boxShadow": "0 0 0 8px rgba(0,110,255,0.3)",
     },
-    "&:hover $switch:not($checked), &:active $switch:not($checked)": Object {
+    "&:hover $switch $switchBg, &:active $switch $switchBg": Object {
       "background": "#CAD5EE",
     },
-    "alignItems": "start",
+    "&:hover $switch$checked $switchBg, &:active $switch$checked $switchBg": Object {
+      "background": "#083CAE",
+    },
+    "alignItems": "flex-start",
     "boxSizing": "border-box",
     "cursor": "pointer",
     "display": "flex",
     "outline": 0,
-    "paddingBottom": "8px",
-    "paddingTop": "8px",
   },
   "disabled": Object {
-    "& $icon": Object {
-      "background": "url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgogICAgICAgIAkgdmlld0JveD0iMCAwIDI0IDI0IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyNCAyNDsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgogICAgICAgIDxwYXRoIGZpbGw9IiNEM0Q0REMiIGQ9Ik0xMi4xLDEwLjhsNC42LTQuNkwxOCw3LjRMMTMuNCwxMmw0LjYsNC42TDE2LjcsMThsLTQuNi00LjZMNy40LDE4bC0xLjMtMS4zbDQuNi00LjZMNi4yLDcuNGwxLjMtMS4zTDEyLjEsMTAuOHoiLz4KICAgICAgICA8L3N2Zz4=)",
-    },
-    "& $switch": Object {
+    "& $switch $switchBg": Object {
       "background": "#EDEDF1",
+      "boxShadow": "inset 0 0 0 1px #D3D4DC",
     },
     "pointerEvents": "none",
   },
   "icon": Object {
-    "background": "url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgogICAgICAgIAkgdmlld0JveD0iMCAwIDI0IDI0IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyNCAyNDsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgogICAgICAgIDxwYXRoIGZpbGw9IiM4REE1REEiIGQ9Ik0xMi4xLDEwLjhsNC42LTQuNkwxOCw3LjRMMTMuNCwxMmw0LjYsNC42TDE2LjcsMThsLTQuNi00LjZMNy40LDE4bC0xLjMtMS4zbDQuNi00LjZMNi4yLDcuNGwxLjMtMS4zTDEyLjEsMTAuOHoiLz4KICAgICAgICA8L3N2Zz4=)",
-    "display": "block",
-    "height": "100%",
-    "transition": "0.3s all",
-    "width": "100%",
+    "margin": 4,
   },
   "label": Object {
-    "marginLeft": "8px",
+    "cursor": "pointer",
+    "marginLeft": "12px",
+  },
+  "labelWrap": Object {
+    "alignItems": "center",
+    "display": "flex",
+    "minHeight": 48,
+    "overflow": "hidden",
+    "paddingBottom": "4px",
+    "paddingTop": "4px",
   },
   "slider": Object {
     "background": "#fff",
     "borderRadius": "50%",
-    "cursor": "pointer",
-    "height": 20,
-    "left": 2,
+    "height": 24,
+    "left": 4,
     "position": "absolute",
-    "top": 2,
-    "transition": "0.3s all",
-    "width": 20,
+    "top": "50%",
+    "transform": "translateY(-50%)",
+    "transition": "all cubic-bezier(0.25,0.46,0.45,0.94) 0.2s",
+    "width": 24,
   },
   "switch": Object {
-    "background": "#E9EEF8",
-    "borderRadius": 34,
+    "borderRadius": "9999px",
     "display": "inline-block",
-    "height": "24px",
+    "flexShrink": 0,
+    "height": 32,
     "position": "relative",
-    "transition": "0.3s all",
-    "width": 38,
+    "transition": "all cubic-bezier(0.25,0.46,0.45,0.94) 0.2s",
+    "width": 52,
+  },
+  "switchBg": Object {
+    "background": "#E9EEF8",
+    "borderRadius": "9999px",
+    "boxShadow": "inset 0 0 0 1px rgba(255,255,255,0.2)",
+    "height": 32,
+    "transition": "all cubic-bezier(0.25,0.46,0.45,0.94) 0.2s",
+    "width": 52,
+  },
+  "switchWrap": Object {
+    "alignItems": "center",
+    "display": "flex",
+    "flexShrink": 0,
+    "height": 48,
+    "width": 52,
   },
 }
 `;

package/build/SlideToggle/styles.js

@@ -5,89 +5,109 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 
-var _icons = _interopRequireDefault(require("../subatomic/icons"));
-
 var _spacing = _interopRequireDefault(require("../tokens/spacing.json"));
 
 var _colors = _interopRequireDefault(require("../tokens/colors.json"));
 
 var _shadows = _interopRequireDefault(require("../tokens/shadows.json"));
 
+var _borderRadius = _interopRequireDefault(require("../tokens/borderRadius.json"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-var toggle = _colors["default"]["switch"],
-    icon = _colors["default"].icon;
+var toggle = _colors["default"]["switch"];
+var transition = 'all cubic-bezier(0.25,0.46,0.45,0.94) 0.2s';
+var contentHeight = 48;
+var toggleWidth = 52;
+var toggleHeight = 32;
+var sliderSize = 24;
 var _default = {
   cont: {
-    paddingTop: _spacing["default"]['size-2'],
-    paddingBottom: _spacing["default"]['size-2'],
     boxSizing: 'border-box',
     display: 'flex',
-    alignItems: 'start',
+    alignItems: 'flex-start',
     cursor: 'pointer',
     outline: 0,
-    '&:hover $switch$checked, &:active $switch$checked': {
-      background: toggle['selected']['bg']['hover']
+    '&:hover $switch $switchBg, &:active $switch $switchBg': {
+      background: toggle.unselected.bg.hover
     },
-    '&:focus $switch$checked': {
-      boxShadow: _shadows["default"]['focus-bright-blue'],
-      background: toggle['selected']['bg']['default']
+    '&:focus-visible $switch': {
+      boxShadow: _shadows["default"]['focus-indigo']
     },
-    '&:hover $switch:not($checked), &:active $switch:not($checked)': {
-      background: toggle['unselected']['bg']['hover']
+    '&:hover $switch$checked $switchBg, &:active $switch$checked $switchBg': {
+      background: toggle.selected.bg.hover
     },
-    '&:focus $switch:not($checked)': {
-      background: toggle['unselected']['bg']['default'],
-      boxShadow: _shadows["default"]['focus-indigo']
+    '&:active $switch $switchBg': {
+      boxShadow: "inset 0 0 0 2px ".concat(_colors["default"]["switch"].border["default"])
+    },
+    '&:focus-visible $switch$checked': {
+      boxShadow: _shadows["default"]['focus-bright-blue']
     }
   },
+  switchWrap: {
+    width: toggleWidth,
+    height: contentHeight,
+    display: 'flex',
+    alignItems: 'center',
+    flexShrink: 0
+  },
   "switch": {
     position: 'relative',
     display: 'inline-block',
-    width: 38,
-    height: _spacing["default"]['size-5'],
-    background: toggle['unselected']['bg']['default'],
-    borderRadius: 34,
-    transition: '0.3s all'
+    width: toggleWidth,
+    height: toggleHeight,
+    flexShrink: 0,
+    borderRadius: _borderRadius["default"]['br-full'],
+    transition: transition
+  },
+  switchBg: {
+    width: toggleWidth,
+    height: toggleHeight,
+    background: toggle.unselected.bg["default"],
+    boxShadow: "inset 0 0 0 1px ".concat(_colors["default"]["switch"].border["default"]),
+    borderRadius: _borderRadius["default"]['br-full'],
+    transition: transition
   },
   checked: {
-    background: toggle['selected']['bg']['default'],
-    '& $slider': {
-      left: 16
+    '& $switchBg': {
+      background: toggle.selected.bg["default"]
     },
-    '& $icon': {
-      background: _icons["default"].base(_icons["default"].check.icon([icon.brand.bold]))
+    '& $slider': {
+      left: "calc(100% - 28px)"
     }
   },
   slider: {
     position: 'absolute',
-    cursor: 'pointer',
-    top: 2,
-    left: 2,
-    width: 20,
-    height: 20,
+    top: '50%',
+    transform: 'translateY(-50%)',
+    left: 4,
+    width: sliderSize,
+    height: sliderSize,
     borderRadius: '50%',
-    background: toggle['bg']['default'],
-    transition: '0.3s all'
+    background: toggle.bg["default"],
+    transition: transition
   },
   icon: {
-    width: '100%',
-    height: '100%',
-    display: 'block',
-    background: _icons["default"].base(_icons["default"].cross.icon([icon.brand.disabled])),
-    transition: '0.3s all'
+    margin: 4
   },
   disabled: {
-    '& $switch': {
-      background: toggle['bg']['disabled']
-    },
-    '& $icon': {
-      background: _icons["default"].base(_icons["default"].cross.icon([icon["default"].disabled]))
+    '& $switch $switchBg': {
+      boxShadow: "inset 0 0 0 1px ".concat(_colors["default"]["switch"].border.disabled),
+      background: toggle.bg.disabled
     },
     pointerEvents: 'none'
   },
+  labelWrap: {
+    minHeight: contentHeight,
+    display: 'flex',
+    alignItems: 'center',
+    paddingTop: _spacing["default"]['size-1'],
+    paddingBottom: _spacing["default"]['size-1'],
+    overflow: 'hidden'
+  },
   label: {
-    marginLeft: _spacing["default"]['size-2']
+    marginLeft: _spacing["default"]['size-3'],
+    cursor: 'pointer'
   }
 };
 exports["default"] = _default;

package/build/Text/Text.js

@@ -194,8 +194,10 @@ var Text = /*#__PURE__*/function (_Component) {
       var _this$props2 = this.props,
           classes = _this$props2.classes,
           mid = _this$props2.mid,
-          low = _this$props2.low;
-      if (low) return classes.corpDisabled;else if (mid) return classes.corpSecondary;else return classes.corpPrimary;
+          low = _this$props2.low,
+          corpDisabled = _this$props2.corpDisabled,
+          corpSecondary = _this$props2.corpSecondary;
+      if (low || corpDisabled) return classes.corpDisabled;else if (mid | corpSecondary) return classes.corpSecondary;else return classes.corpPrimary;
     }
   }, {
     key: "getColor",

package/build/TextField/TextField.js

@@ -338,7 +338,9 @@ var TextField = /*#__PURE__*/function (_React$Component) {
           className: classes.rightButton
         });
       } else if (type == 'select') {
-        element = /*#__PURE__*/_react["default"].createElement(InputType, commonProps, /*#__PURE__*/_react["default"].createElement("option", {
+        element = /*#__PURE__*/_react["default"].createElement(InputType, _extends({}, commonProps, {
+          className: "".concat(commonProps.className, " ").concat(classes.pointer)
+        }), /*#__PURE__*/_react["default"].createElement("option", {
           value: "",
           disabled: true,
           hidden: true
@@ -410,14 +412,13 @@ var TextField = /*#__PURE__*/function (_React$Component) {
         height: 24,
         className: classes.icon,
         colors: [this.setIconColor()]
-      }), type == 'select' && /*#__PURE__*/_react["default"].createElement("div", {
-        className: classes.selectIcon
-      }, /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
+      }), type == 'select' && /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
         iconName: "chevron-down",
         width: 24,
         height: 24,
-        colors: disabled ? [_colors["default"].icon["default"].disabled] : [_colors["default"].icon["default"]["default"]]
-      })), element, type == 'password' && passIcon, value && clear && /*#__PURE__*/_react["default"].createElement(_Button["default"], _extends({
+        colors: disabled ? [_colors["default"].icon["default"].disabled] : [_colors["default"].icon["default"]["default"]],
+        className: classes.selectIcon
+      }), element, type == 'password' && passIcon, value && clear && /*#__PURE__*/_react["default"].createElement(_Button["default"], _extends({
         icon: "x",
         theme: "ghostGrey",
         size: "md",

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

@@ -115,6 +115,9 @@ Object {
     "color": "#080D39",
     "font": "400 14px/1.5 'OccText', sans-serif",
   },
+  "pointer": Object {
+    "cursor": "pointer",
+  },
   "rightButton": Object {
     "position": "absolute",
     "right": "4px",

package/build/TextField/styles.js

@@ -191,6 +191,9 @@ var _default = {
     display: 'flex',
     justifyContent: 'space-between',
     marginTop: _spacing["default"]['size-2']
+  },
+  pointer: {
+    cursor: 'pointer'
   }
 };
 exports["default"] = _default;

package/build/Tip/Tip.js

@@ -1,39 +1,28 @@
 "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"));
+var _Button = _interopRequireDefault(require("../Button"));
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+var _TipText = _interopRequireDefault(require("./TipText"));
 
-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 _colors = _interopRequireDefault(require("../tokens/colors.json"));
 
-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 _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); }
 
-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: 'info-circle',
   warning: 'alert',
@@ -42,6 +31,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) {
@@ -51,65 +47,13 @@ var Tip = function Tip(_ref) {
       classes = _ref.classes,
       icon = _ref.icon,
       theme = _ref.theme,
-      noBorderRadius = _ref.noBorderRadius,
-      center = _ref.center,
+      banner = _ref.banner,
       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,
+      testId = _ref.testId;
   return /*#__PURE__*/_react["default"].createElement("div", {
     id: id,
     className: className,
@@ -117,27 +61,39 @@ 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(banner ? " ".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(),
+    alignItems: "stretch"
+  }, 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',
+    justifyContent: banner ? 'center' : 'start',
+    className: "".concat(classes.textContainer).concat(banner ? " ".concat(classes.maxWidth) : '')
+  }, /*#__PURE__*/_react["default"].createElement(_TipText["default"], {
+    classes: "".concat(classes.normalText, " ").concat(classes[colorTextClasses[theme]]).concat(!banner ? " ".concat(classes.growText) : ''),
+    text: children
+  }), cta && /*#__PURE__*/_react["default"].createElement("a", _extends({
+    className: "".concat(classes.cta, " ").concat(classes[colorTextClasses[theme]]).concat(size === 'large' && banner ? " ".concat(classes.ctaBanner) : size === 'large' ? " ".concat(classes.ctaAlert) : ''),
+    href: cta.href,
+    target: cta.target,
+    onClick: cta.onClick
+  }, testId && {
+    'data-testid': "".concat(testId, "__link")
+  }), cta.text))), onClose && /*#__PURE__*/_react["default"].createElement(_Button["default"], _extends({
     onClick: onClose,
-    colors: [theme === PROMOTE ? _colors["default"].bgWhite : _colors["default"]["".concat(theme, "Text")]],
-    className: spacedClose ? classes.spacedClose : null
-  })));
+    size: "md",
+    className: size === 'small' ? classes.closeIconSmallMargin : classes.closeIconMargin,
+    icon: "x",
+    theme: theme === PROMOTE ? 'ghostWhite' : 'ghostGrey'
+  }, testId && {
+    testId: "".concat(testId, "__close-icon")
+  }))));
 };
 
 Tip.defaultProps = {
@@ -151,6 +107,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({
@@ -163,11 +120,8 @@ Tip.propTypes = {
   /** 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,
+  /** Sets content centered and remove border radius. */
+  banner: _propTypes["default"].bool,
 
   /** Function to call on click of the x icon. */
   onClose: _propTypes["default"].func,
@@ -176,7 +130,10 @@ Tip.propTypes = {
   spacedClose: _propTypes["default"].bool,
   id: _propTypes["default"].string,
   className: _propTypes["default"].string,
-  style: _propTypes["default"].object
+  style: _propTypes["default"].object,
+
+  /** The testId property adds the data attribute data-testid to the main element and should be used for testing only. */
+  testId: _propTypes["default"].string
 };
 var _default = Tip;
 exports["default"] = _default;

package/build/Tip/Tip.test.js

@@ -43,19 +43,42 @@ describe("Tip", function () {
     var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_Tip["default"], {
       classes: classes,
       icon: true
-    }));
+    }, "Alert text"));
     expect(wrapper.find('.icon').length).toBe(1);
   });
-  it('has bold text', function () {
+  it('has a close icon button', 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);
+      classes: classes,
+      icon: true,
+      onClose: function onClose() {
+        return console.log('Close');
+      },
+      testId: "alert-test"
+    }, "Tip text "));
+    expect(wrapper.find({
+      "data-testid": 'alert-test__close-icon'
+    }).length).toBe(1);
+  });
+  it('has a link', function () {
+    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react["default"].createElement(_Tip["default"], {
+      classes: classes,
+      icon: true,
+      cta: {
+        text: 'Click here.',
+        onClick: function onClick() {
+          return alert('CTA clicked!');
+        }
+      },
+      testId: "alert-test"
+    }, "Tip text "));
+    expect(wrapper.find({
+      "data-testid": 'alert-test__link'
+    }).length).toBe(1);
   });
 });
 describe("TipJSS", function () {
   it('matches the snapshot', function () {
-    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_index["default"], null));
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_index["default"], null, "Tip text "));
     expect(wrapper).toMatchSnapshot();
   });
 });

package/build/Tip/TipText/index.js

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var boldRegex = /\*(.*?)\*/g;
+
+var TipText = function TipText(_ref) {
+  var classes = _ref.classes,
+      text = _ref.text;
+  if (text === '' || typeof text !== 'string') return text;
+  return /*#__PURE__*/_react["default"].createElement("p", {
+    className: classes
+  }, text.replace(boldRegex, function (_, txt) {
+    return txt;
+  }));
+};
+
+TipText.propTypes = {
+  classes: _propTypes["default"].string.isRequired,
+  text: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].node]).isRequired
+};
+var _default = TipText;
+exports["default"] = _default;