@occmundial/occ-atomic 3.0.0-beta.20 → 3.0.0-beta.22

package/CHANGELOG.md

@@ -1,3 +1,27 @@
+# [3.0.0-beta.22](https://github.com/occmundial/occ-atomic/compare/v3.0.0-beta.21...v3.0.0-beta.22) (2024-06-26)
+
+
+### Features
+
+* Tag compnent and documentation updated ([718378f](https://github.com/occmundial/occ-atomic/commit/718378ffd916c98673a3b10f7b9ba827d806aa1c))
+
+# [3.0.0-beta.21](https://github.com/occmundial/occ-atomic/compare/v3.0.0-beta.20...v3.0.0-beta.21) (2024-06-25)
+
+
+### Bug Fixes
+
+* Add outline border and merge with beta ([a212aa3](https://github.com/occmundial/occ-atomic/commit/a212aa3f87471092a246925e79a9d787535b13ba))
+* Resolve conflicts ([99b08cb](https://github.com/occmundial/occ-atomic/commit/99b08cb290979fa7f1aad3dd2c04f65b1b494559))
+* Resolve conflicts ([81776b7](https://github.com/occmundial/occ-atomic/commit/81776b701b168e66a1f1dfa7b785227b40a76dc9))
+* Set md size for tip close icon ([759e6d1](https://github.com/occmundial/occ-atomic/commit/759e6d10842e2c55cf81d2aff57f60479e3a3395))
+* Set min width for desktop and conditionated on mouse events ([98857fd](https://github.com/occmundial/occ-atomic/commit/98857fd313d247e618c64dbbaacea93c6ab084ae))
+
+
+### Features
+
+* Add close icon prop and conditionated onclose func ([e456d38](https://github.com/occmundial/occ-atomic/commit/e456d384a82d4b6105e27bb36d693b43d5608c1c))
+* Update toaster with new design tokens ([88edaa8](https://github.com/occmundial/occ-atomic/commit/88edaa8fe5c3c04bc9f634f6a287c1614c893d15))
+
 # [3.0.0-beta.20](https://github.com/occmundial/occ-atomic/compare/v3.0.0-beta.19...v3.0.0-beta.20) (2024-06-25)
 
 

package/build/Tag/Tag.js

@@ -36,9 +36,9 @@ var Tag = function Tag(_ref) {
     alignItems: "center",
     wrap: "noWrap"
   }, iconName && /*#__PURE__*/_react["default"].createElement("span", {
-    className: "".concat(classes.icon, " ").concat(size ? classes["".concat(size, "Icon")] : classes.standardIcon, " ").concat(theme ? classes["".concat(theme, "Icon")] : classes.defaultIcon)
+    className: "".concat(classes.icon, " ").concat(size === 'big' ? classes.bigIcon : classes.standardIcon, " ").concat(theme ? classes["".concat(theme, "Icon")] : classes.defaultIcon)
   }), /*#__PURE__*/_react["default"].createElement("span", {
-    className: "".concat(classes.tagText, " ").concat(size ? classes["".concat(size, "TagText")] : classes.standardTagText)
+    className: classes.tagText
   }, children)));
 };
 

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

@@ -12,19 +12,15 @@ Object {
     "background": [Function],
   },
   "big": Object {
-    "borderRadius": 32,
-    "height": 40,
+    "minHeight": "32px",
     "padding": Array [
-      8,
-      16,
+      "8px",
+      "16px",
     ],
   },
   "bigIcon": Object {
-    "height": 18,
-    "width": 18,
-  },
-  "bigTagText": Object {
-    "fontSize": 16,
+    "height": "16px",
+    "width": "16px",
   },
   "default": Object {
     "background": "#f5f5f5",
@@ -34,23 +30,33 @@ Object {
     "background": [Function],
   },
   "error": Object {
-    "background": "#fcebeb",
-    "color": "#db3737",
+    "background": "#fce8e8",
+    "border": "1px solid #FBDFDF",
+    "color": "#8b1313",
   },
   "errorIcon": Object {
     "background": [Function],
   },
+  "featured": Object {
+    "background": "#0059CD",
+    "border": "1px solid rgba(255,255,255,0.2)",
+    "color": "#fff",
+  },
+  "featuredIcon": Object {
+    "background": [Function],
+  },
   "icon": Object {
     "backgroundRepeat": "no-repeat",
     "content": "\\"\\"",
     "display": "inline-block",
     "left": 0,
-    "marginRight": 4,
+    "marginRight": "4px",
     "paddingBottom": 0,
   },
   "info": Object {
-    "backgroundColor": "#efebf7",
-    "color": "#5736ab",
+    "background": "#e3efff",
+    "border": "1px solid #b9d7ff",
+    "color": "#083CAE",
   },
   "infoIcon": Object {
     "background": [Function],
@@ -63,46 +69,39 @@ Object {
     "background": [Function],
   },
   "medium": Object {
-    "height": 32,
     "padding": Array [
-      5,
-      12,
-      7,
-      12,
+      "8px",
+      "12px",
     ],
   },
-  "mediumIcon": Object {
-    "height": 18,
-    "width": 18,
+  "promo": Object {
+    "background": "#080D39",
+    "border": "1px solid rgba(255,255,255,0.2)",
+    "color": "#fff",
   },
-  "mediumTagText": Object {
-    "fontSize": 16,
+  "promoIcon": Object {
+    "background": [Function],
   },
   "standard": Object {
-    "height": 16,
     "padding": Array [
-      1,
-      8,
-      3,
-      8,
+      "2px",
+      "8px",
     ],
   },
   "standardIcon": Object {
-    "height": 12,
-    "width": 12,
-  },
-  "standardTagText": Object {
-    "fontSize": 10,
+    "height": "12px",
+    "width": "12px",
   },
   "success": Object {
-    "background": "#e6f5eb",
-    "color": "#009537",
+    "background": "#ebfbf1",
+    "border": "1px solid #d7f6e3",
+    "color": "#16542e",
   },
   "successIcon": Object {
     "background": [Function],
   },
   "tag": Object {
-    "borderRadius": 16,
+    "borderRadius": "9999px",
     "boxSizing": "border-box",
     "display": "inline-block",
     "lineHeight": "12px",
@@ -113,20 +112,19 @@ Object {
   "tagText": Object {
     "boxSizing": "border-box",
     "display": "inline-block",
-    "fontFamily": "'OccText', sans-serif",
+    "font": "400 10px/1.5 'OccText', sans-serif",
     "fontStretch": "normal",
     "fontStyle": "normal",
-    "fontWeight": "400",
     "letterSpacing": "normal",
-    "lineHeight": 1.5,
     "overflow": "hidden",
     "paddingRight": [Function],
     "position": "relative",
     "textAlign": "center",
   },
   "warning": Object {
-    "background": "#fffaed",
-    "color": "#e69000",
+    "background": "#fff8e9",
+    "border": "1px solid #fff1d3",
+    "color": "#664a0e",
   },
   "warningIcon": Object {
     "background": [Function],

package/build/Tag/styles.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
+exports["default"] = exports.objectToFontValue = void 0;
 
 var _colors = _interopRequireDefault(require("../subatomic/colors"));
 
@@ -11,67 +11,54 @@ var _fonts = _interopRequireDefault(require("../subatomic/fonts"));
 
 var _icons = _interopRequireDefault(require("../subatomic/icons"));
 
-var _spacing = _interopRequireDefault(require("../subatomic/spacing"));
+var _hexRgba = _interopRequireDefault(require("hex-rgba"));
 
-var _iconSizes = _interopRequireDefault(require("../subatomic/iconSizes"));
+var _borderRadius = _interopRequireDefault(require("../tokens/borderRadius.json"));
 
-var _hexRgba = _interopRequireDefault(require("hex-rgba"));
+var _spacing = _interopRequireDefault(require("../tokens/spacing.json"));
+
+var _fonts2 = _interopRequireDefault(require("../tokens/fonts.json"));
+
+var _colors2 = _interopRequireDefault(require("../tokens/colors.json"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-var infoLight = _colors["default"].infoLight,
-    infoText = _colors["default"].infoText,
-    successLight = _colors["default"].successLight,
-    successText = _colors["default"].successText,
-    warningLight = _colors["default"].warningLight,
-    warningText = _colors["default"].warningText,
-    errorLight = _colors["default"].errorLight,
-    errorText = _colors["default"].errorText,
-    grey900 = _colors["default"].grey900,
+var tag = _colors2["default"].tag,
+    text = _colors2["default"].text,
+    icon = _colors2["default"].icon;
+
+var objectToFontValue = function objectToFontValue(font) {
+  return "".concat(font.fontWeight, " ").concat(font.fontSize, "/").concat(font.lineHeight, " ").concat(_fonts["default"].body);
+};
+
+exports.objectToFontValue = objectToFontValue;
+var grey900 = _colors["default"].grey900,
     grey100 = _colors["default"].grey100,
     textLink = _colors["default"].textLink,
     bgWhite = _colors["default"].bgWhite;
-var xTiny = _spacing["default"].xTiny,
-    tiny = _spacing["default"].tiny,
-    small = _spacing["default"].small,
-    gutter = _spacing["default"].gutter,
-    medium = _spacing["default"].medium;
-var smallIcon = _iconSizes["default"].small;
-var paddingStandardTag = [1, tiny, 3, tiny],
-    paddingMediumTag = [5, gutter, 7, gutter],
-    paddingBigTag = [tiny, small],
-    tagTextLineHeight = 1.5,
-    tagTextStandardSize = 10,
-    tagTextMediumSize = 16,
-    tagTextBigSize = 16,
-    bigTagHeight = 40;
 var _default = {
   tag: {
     boxSizing: 'border-box',
     lineHeight: '12px',
     textAlign: 'center',
-    borderRadius: small,
+    borderRadius: _borderRadius["default"]['br-full'],
     position: 'relative',
     overflow: 'hidden',
     display: 'inline-block'
   },
   standard: {
-    padding: paddingStandardTag,
-    height: small
+    padding: [_spacing["default"]['size-0'], _spacing["default"]['size-2']]
   },
   medium: {
-    padding: paddingMediumTag,
-    height: medium
+    padding: [_spacing["default"]['size-2'], _spacing["default"]['size-3']]
   },
   big: {
-    padding: paddingBigTag,
-    height: bigTagHeight,
-    borderRadius: medium
+    minHeight: _spacing["default"]['size-6'],
+    padding: [_spacing["default"]['size-2'], _spacing["default"]['size-4']]
   },
   tagText: {
     boxSizing: 'border-box',
-    fontFamily: _fonts["default"].body,
-    fontWeight: '400',
+    font: objectToFontValue(_fonts2["default"]['heading-tag']),
     fontStyle: 'normal',
     fontStretch: 'normal',
     letterSpacing: 'normal',
@@ -79,20 +66,10 @@ var _default = {
     position: 'relative',
     overflow: 'hidden',
     display: 'inline-block',
-    lineHeight: tagTextLineHeight,
     paddingRight: function paddingRight(props) {
-      return props.iconName ? xTiny : 0;
+      return props.iconName ? _spacing["default"]['size-1'] : 0;
     }
   },
-  standardTagText: {
-    fontSize: tagTextStandardSize
-  },
-  mediumTagText: {
-    fontSize: tagTextMediumSize
-  },
-  bigTagText: {
-    fontSize: tagTextBigSize
-  },
   "default": {
     color: grey900,
     background: grey100
@@ -101,47 +78,57 @@ var _default = {
     color: grey900,
     background: bgWhite
   },
-  info: {
-    color: infoText,
-    backgroundColor: infoLight
+  link: {
+    color: textLink,
+    background: (0, _hexRgba["default"])(textLink, 10)
+  },
+  featured: {
+    color: text.white.primary,
+    background: tag.featured.bg,
+    border: "1px solid ".concat(tag.featured.border)
+  },
+  promo: {
+    color: text.white.primary,
+    background: tag.promo.bg,
+    border: "1px solid ".concat(tag.promo.border)
   },
   success: {
-    color: successText,
-    background: successLight
+    color: text.success,
+    background: tag.success.bg,
+    border: "1px solid ".concat(tag.success.border)
+  },
+  info: {
+    color: text.indigo.primary,
+    background: tag.info.bg,
+    border: "1px solid ".concat(tag.info.border)
   },
   warning: {
-    color: warningText,
-    background: warningLight
+    color: text.warning,
+    background: tag.warning.bg,
+    border: "1px solid ".concat(tag.warning.border)
   },
   error: {
-    color: errorText,
-    background: errorLight
-  },
-  link: {
-    color: textLink,
-    background: (0, _hexRgba["default"])(textLink, 10)
+    color: text.error,
+    background: tag.error.bg,
+    border: "1px solid ".concat(tag.error.border)
   },
 
   /* Icon with themes */
   icon: {
     display: 'inline-block',
-    marginRight: xTiny,
+    marginRight: _spacing["default"]['size-1'],
     content: '""',
     paddingBottom: 0,
     left: 0,
     backgroundRepeat: 'no-repeat'
   },
   standardIcon: {
-    width: gutter,
-    height: gutter
-  },
-  mediumIcon: {
-    width: smallIcon,
-    height: smallIcon
+    width: _spacing["default"]['size-3'],
+    height: _spacing["default"]['size-3']
   },
   bigIcon: {
-    width: smallIcon,
-    height: smallIcon
+    width: _spacing["default"]['size-4'],
+    height: _spacing["default"]['size-4']
   },
   defaultIcon: {
     background: function background(props) {
@@ -153,29 +140,39 @@ var _default = {
       return props.iconName ? _icons["default"].base(_icons["default"][props.iconName].icon([grey900])) : '';
     }
   },
-  infoIcon: {
+  linkIcon: {
     background: function background(props) {
-      return props.iconName ? _icons["default"].base(_icons["default"][props.iconName].icon([infoText])) : '';
+      return props.iconName ? _icons["default"].base(_icons["default"][props.iconName].icon([textLink])) : '';
+    }
+  },
+  featuredIcon: {
+    background: function background(props) {
+      return props.iconName ? _icons["default"].base(_icons["default"][props.iconName].icon([icon.inverse["default"]])) : '';
+    }
+  },
+  promoIcon: {
+    background: function background(props) {
+      return props.iconName ? _icons["default"].base(_icons["default"][props.iconName].icon([icon.inverse["default"]])) : '';
     }
   },
   successIcon: {
     background: function background(props) {
-      return props.iconName ? _icons["default"].base(_icons["default"][props.iconName].icon([successText])) : '';
+      return props.iconName ? _icons["default"].base(_icons["default"][props.iconName].icon([icon.success])) : '';
     }
   },
-  warningIcon: {
+  infoIcon: {
     background: function background(props) {
-      return props.iconName ? _icons["default"].base(_icons["default"][props.iconName].icon([warningText])) : '';
+      return props.iconName ? _icons["default"].base(_icons["default"][props.iconName].icon([icon.brand.bold])) : '';
     }
   },
-  errorIcon: {
+  warningIcon: {
     background: function background(props) {
-      return props.iconName ? _icons["default"].base(_icons["default"][props.iconName].icon([errorText])) : '';
+      return props.iconName ? _icons["default"].base(_icons["default"][props.iconName].icon([icon.warning])) : '';
     }
   },
-  linkIcon: {
+  errorIcon: {
     background: function background(props) {
-      return props.iconName ? _icons["default"].base(_icons["default"][props.iconName].icon([textLink])) : '';
+      return props.iconName ? _icons["default"].base(_icons["default"][props.iconName].icon([icon.error])) : '';
     }
   }
 };

package/build/Tip/Tip.js

@@ -87,6 +87,7 @@ var Tip = function Tip(_ref) {
     'data-testid': "".concat(testId, "__link")
   }), cta.text))), onClose && /*#__PURE__*/_react["default"].createElement(_Button["default"], _extends({
     onClick: onClose,
+    size: "md",
     className: size === 'small' ? classes.closeIconSmallMargin : classes.closeIconMargin,
     icon: "x",
     theme: theme === PROMOTE ? 'ghostWhite' : 'ghostGrey'

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

@@ -96,23 +96,18 @@ Object {
   },
   "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": "#fff8e9",

package/build/Tip/styles.js

@@ -55,24 +55,19 @@ var _default = {
     outline: "1px solid ".concat(_colors["default"].alert.neutral.border)
   },
   textInfo: {
-    color: _colors["default"].text.indigo.primary,
-    textDecorationColor: _colors["default"].text.indigo.primary
+    color: _colors["default"].text.indigo.primary
   },
   textWarning: {
-    color: _colors["default"].text.warning,
-    textDecorationColor: _colors["default"].text.warning
+    color: _colors["default"].text.warning
   },
   textSuccess: {
-    color: _colors["default"].text.success,
-    textDecorationColor: _colors["default"].text.success
+    color: _colors["default"].text.success
   },
   textError: {
-    color: _colors["default"].text.error,
-    textDecorationColor: _colors["default"].text.error
+    color: _colors["default"].text.error
   },
   textPromote: {
-    color: _colors["default"].text.white.primary,
-    textDecorationColor: _colors["default"].text.white.primary
+    color: _colors["default"].text.white.primary
   },
   icon: {
     marginRight: _spacing["default"]['size-2'],

package/build/Toaster/Toast/Toast.js

@@ -9,109 +9,114 @@ var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _Text = _interopRequireDefault(require("../../Text"));
-
 var _Icon = _interopRequireDefault(require("../../Icon"));
 
 var _Flexbox = _interopRequireDefault(require("../../Flexbox"));
 
-var _colors = _interopRequireDefault(require("../../subatomic/colors"));
+var _colors = _interopRequireDefault(require("../../tokens/colors.json"));
+
+var _Button = _interopRequireDefault(require("../../Button"));
 
 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); }
 
+var icons = {
+  info: 'info-circle',
+  warning: 'alert',
+  success: 'check-circle',
+  error: 'x-circle',
+  promote: null
+};
+var colorTextClasses = {
+  info: 'textInfo',
+  promote: 'textPromote',
+  warning: 'textWarning',
+  success: 'textSuccess',
+  error: 'textError'
+};
+
 var Toast = function Toast(_ref) {
   var classes = _ref.classes,
       theme = _ref.theme,
       title = _ref.title,
       description = _ref.description,
       action = _ref.action,
-      hasIcon = _ref.hasIcon,
       closing = _ref.closing,
       onClose = _ref.onClose,
       pauseTimer = _ref.pauseTimer,
-      resumeTimer = _ref.resumeTimer;
-
-  var getIconData = function getIconData() {
-    switch (theme) {
-      case 'success':
-        return {
-          icon: 'check-circle',
-          color: _colors["default"].bgWhite
-        };
-
-      case 'error':
-        return {
-          icon: 'x-circle',
-          color: _colors["default"].bgWhite
-        };
-
-      case 'info':
-        return {
-          icon: 'info-circle',
-          color: _colors["default"].bgWhite
-        };
-
-      case 'warning':
-        return {
-          icon: 'alert',
-          color: _colors["default"].grey900
-        };
-    }
-  };
-
-  var textColor = theme === 'warning' ? {} : {
-    white: true
-  };
-  var iconData = hasIcon ? getIconData() : null;
+      resumeTimer = _ref.resumeTimer,
+      closeIcon = _ref.closeIcon,
+      testId = _ref.testId;
 
   var onActionClick = function onActionClick(action) {
     action.onClick();
     onClose();
   };
 
-  return /*#__PURE__*/_react["default"].createElement("div", {
-    className: "".concat(classes.toast, " ").concat(classes[theme]).concat(closing ? " ".concat(classes.closing) : ''),
-    onMouseEnter: pauseTimer,
+  return /*#__PURE__*/_react["default"].createElement("div", _extends({
+    className: "".concat(classes.toast, " ").concat(classes[theme]).concat(closing ? " ".concat(classes.closing) : '')
+  }, !closeIcon && {
+    onMouseEnter: pauseTimer
+  }, !closeIcon && {
     onMouseLeave: resumeTimer
-  }, /*#__PURE__*/_react["default"].createElement(_Flexbox["default"], {
+  }), /*#__PURE__*/_react["default"].createElement(_Flexbox["default"], {
     display: "flex",
-    className: classes.content
+    justifyContent: "between"
   }, /*#__PURE__*/_react["default"].createElement(_Flexbox["default"], {
     display: "flex",
-    alignItems: "center"
-  }, hasIcon && /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
-    iconName: iconData.icon,
-    colors: [iconData.color],
-    className: classes.icon
-  }), /*#__PURE__*/_react["default"].createElement(_Flexbox["default"], {
+    alignItems: "center",
+    alignSelf: "center",
     flex: "1"
-  }, title && /*#__PURE__*/_react["default"].createElement(_Text["default"], _extends({
-    subheading: true
-  }, textColor), title), description && /*#__PURE__*/_react["default"].createElement(_Text["default"], textColor, description))), action && /*#__PURE__*/_react["default"].createElement("button", {
-    className: classes.action,
+  }, theme !== 'promote' && /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
+    iconName: icons[theme],
+    className: classes.icon,
+    colors: [theme === 'info' ? _colors["default"].icon.brand["default"] : _colors["default"].icon[theme]]
+  }), /*#__PURE__*/_react["default"].createElement(_Flexbox["default"], {
+    display: "flex",
+    flex: "1",
+    className: classes.content,
+    alignSelf: "start",
+    justifyContent: "between"
+  }, /*#__PURE__*/_react["default"].createElement(_Flexbox["default"], {
+    display: "flex",
+    direction: "col"
+  }, /*#__PURE__*/_react["default"].createElement("p", {
+    className: "".concat(classes.title, " ").concat(classes[colorTextClasses[theme]])
+  }, title), description && /*#__PURE__*/_react["default"].createElement("p", {
+    className: "".concat(classes.description, " ").concat(classes[colorTextClasses[theme]])
+  }, description)), action ? /*#__PURE__*/_react["default"].createElement("a", _extends({
+    className: "".concat(classes.actionText, " ").concat(classes[colorTextClasses[theme]]),
     onClick: function onClick() {
       return onActionClick(action);
     }
-  }, /*#__PURE__*/_react["default"].createElement(_Flexbox["default"], {
-    display: "flex",
-    alignItems: "center",
-    className: classes.actionWrap
-  }, /*#__PURE__*/_react["default"].createElement(_Text["default"], _extends({}, textColor, {
-    strong: true,
-    className: classes.actionText
-  }), action.label)))));
+  }, testId && {
+    'data-testid': "".concat(testId, "__link")
+  }), action.label) : null)), !action && closeIcon ? /*#__PURE__*/_react["default"].createElement(_Button["default"], _extends({
+    onClick: onClose,
+    className: classes.closeIcon,
+    icon: "x",
+    size: "md",
+    theme: theme === 'promote' ? 'ghostWhite' : 'ghostGrey'
+  }, testId && {
+    testId: "".concat(testId, "__close-icon")
+  })) : null));
 };
 
 Toast.propTypes = {
   classes: _propTypes["default"].object.isRequired,
   theme: _propTypes["default"].oneOf(['success', 'error', 'info', 'warning']),
-  title: _propTypes["default"].string,
+  title: _propTypes["default"].string.isRequired,
   description: _propTypes["default"].string,
   action: _propTypes["default"].object,
-  hasIcon: _propTypes["default"].bool,
-  onClose: _propTypes["default"].func.isRequired
+  closing: _propTypes["default"].bool,
+  pauseTimer: _propTypes["default"].func,
+  resumeTimer: _propTypes["default"].func,
+  onClose: _propTypes["default"].func.isRequired,
+  closeIcon: _propTypes["default"].bool,
+
+  /** 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 = Toast;
 exports["default"] = _default;

package/build/Toaster/Toast/styles.js

@@ -5,17 +5,21 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 
-var _colors = _interopRequireDefault(require("../../subatomic/colors"));
+var _colors = _interopRequireDefault(require("../../tokens/colors.json"));
 
-var _spacing = _interopRequireDefault(require("../../subatomic/spacing"));
+var _fonts = _interopRequireDefault(require("../../tokens/fonts.json"));
 
-var _shadows = _interopRequireDefault(require("../../subatomic/shadows"));
+var _spacing = _interopRequireDefault(require("../../tokens/spacing.json"));
+
+var _borderRadius = _interopRequireDefault(require("../../tokens/borderRadius.json"));
+
+var _shadows = _interopRequireDefault(require("../../tokens/shadows.json"));
 
 var _grid = _interopRequireDefault(require("../../subatomic/grid"));
 
-var _iconSizes = _interopRequireDefault(require("../../subatomic/iconSizes"));
+var _styles = require("../../Text/styles");
 
-var _toast, _icon, _action;
+var _toast;
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
@@ -33,16 +37,18 @@ var _default = {
     }
   },
   toast: (_toast = {
-    borderRadius: _spacing["default"].radius,
-    boxShadow: _shadows["default"].lvl5,
-    padding: [_spacing["default"].tiny, _spacing["default"].small],
+    borderRadius: _borderRadius["default"]['br-xs'],
+    boxShadow: _shadows["default"]['elevation-elevation-5'],
+    padding: _spacing["default"]['size-3'],
     pointerEvents: 'auto',
     zIndex: 1001,
     animation: 'slideToasterIn 0.3s ease-out',
-    transition: '0.3s all ease-out'
+    transition: '0.3s all ease-out',
+    outlineOffset: '-1px'
   }, _defineProperty(_toast, "@media screen and (min-width:".concat(_grid["default"].xs, "px)"), {
     maxWidth: 480,
-    padding: _spacing["default"].small
+    minWidth: 400,
+    padding: _spacing["default"]['size-4']
   }), _defineProperty(_toast, "@media screen and (max-width:".concat(_grid["default"].xs - 1, "px)"), {
     width: '100%'
   }), _toast),
@@ -51,54 +57,74 @@ var _default = {
     opacity: 0
   },
   success: {
-    background: _colors["default"].success
+    backgroundColor: _colors["default"].alert.success.bg,
+    outline: "1px solid ".concat(_colors["default"].alert.success.border)
   },
   error: {
-    background: _colors["default"].error
+    backgroundColor: _colors["default"].alert.error.bg,
+    outline: "1px solid ".concat(_colors["default"].alert.error.border)
   },
   warning: {
-    background: _colors["default"].warning
+    backgroundColor: _colors["default"].alert.warning.bg,
+    outline: "1px solid ".concat(_colors["default"].alert.warning.border)
   },
   info: {
-    background: _colors["default"].info
+    backgroundColor: _colors["default"].alert.info.bg,
+    outline: "1px solid ".concat(_colors["default"].alert.info.border)
+  },
+  promote: {
+    backgroundColor: _colors["default"].alert.neutral.bg,
+    outline: "1px solid ".concat(_colors["default"].alert.neutral.border)
+  },
+  textInfo: {
+    color: _colors["default"].text.indigo.primary
+  },
+  textWarning: {
+    color: _colors["default"].text.warning
+  },
+  textSuccess: {
+    color: _colors["default"].text.success
+  },
+  textError: {
+    color: _colors["default"].text.error
+  },
+  textPromote: {
+    color: _colors["default"].text.white.primary
   },
-  content: _defineProperty({}, "@media screen and (max-width:".concat(_grid["default"].xs - 1, "px)"), {
+  title: {
+    font: (0, _styles.parseFontValue)(_fonts["default"]['alert-default']),
+    margin: 0
+  },
+  description: {
+    font: (0, _styles.parseFontValue)(_fonts["default"]['alert-description']),
+    margin: [_spacing["default"]['size-1'], 0, 0]
+  },
+  content: _defineProperty({
     flexDirection: 'column'
+  }, "@media screen and (min-width:".concat(_grid["default"].xs, "px)"), {
+    flexDirection: 'row'
   }),
-  icon: (_icon = {
-    marginRight: _spacing["default"].small,
-    width: _iconSizes["default"].small,
-    height: _iconSizes["default"].small
-  }, _defineProperty(_icon, "@media screen and (min-width:".concat(_grid["default"].xs, "px)"), {
-    width: _iconSizes["default"].base,
-    height: _iconSizes["default"].base
-  }), _defineProperty(_icon, "@media screen and (max-width:".concat(_grid["default"].xs - 1, "px)"), {
-    display: 'none'
-  }), _icon),
-  action: (_action = {
-    marginTop: _spacing["default"].xTiny,
-    cursor: 'pointer',
-    background: 'none',
-    border: 'none'
-  }, _defineProperty(_action, "@media screen and (min-width:".concat(_grid["default"].xs, "px)"), {
-    margin: -_spacing["default"].small,
-    marginLeft: _spacing["default"].small,
-    padding: [0, _spacing["default"].small],
-    borderRadius: [0, _spacing["default"].radius, _spacing["default"].radius, 0],
-    borderLeft: '1px solid rgba(255, 255, 255, 0.1)',
-    transition: '0.3s all',
-    '&:hover': {
-      background: 'rgba(255, 255, 255, 0.15)'
-    }
-  }), _defineProperty(_action, "@media screen and (max-width:".concat(_grid["default"].xs - 1, "px)"), {
-    alignSelf: 'flex-end'
-  }), _action),
+  icon: {
+    marginRight: _spacing["default"]['size-2'],
+    alignSelf: 'start'
+  },
   actionWrap: {
     height: '100%'
   },
-  actionText: {
-    textTransform: 'uppercase',
-    whiteSpace: 'nowrap'
+  actionText: _defineProperty({
+    font: (0, _styles.parseFontValue)(_fonts["default"]['link-small-strong']),
+    whiteSpace: 'nowrap',
+    textDecoration: 'underline',
+    cursor: 'pointer',
+    alignSelf: 'start',
+    margin: [_spacing["default"]['size-2'], 0, 0]
+  }, "@media screen and (min-width:".concat(_grid["default"].xs, "px)"), {
+    margin: [0, 0, 0, _spacing["default"]['size-4']],
+    alignSelf: 'center'
+  }),
+  closeIcon: {
+    marginLeft: _spacing["default"]['size-4'],
+    alignSelf: 'center'
   }
 };
 exports["default"] = _default;

package/build/Toaster/Toaster.js

@@ -78,7 +78,7 @@ var Toaster = /*#__PURE__*/function (_React$Component) {
         toast: toast,
         toastId: toastId
       }, function () {
-        _this.addTimer();
+        if (!toast.closeIcon) _this.addTimer();
       });
     });
 
@@ -164,8 +164,9 @@ var Toaster = /*#__PURE__*/function (_React$Component) {
         title: toast.title,
         theme: toast.type,
         action: toast.action,
-        hasIcon: toast.hasIcon,
+        closeIcon: toast.closeIcon,
         closing: toast.closing,
+        testId: toast.testId,
         onClose: function onClose() {
           return _this2.onClose(toast);
         },

package/build/Toaster/Toaster.test.js

@@ -104,11 +104,14 @@ describe("Toaster", function () {
 
     _functions.toaster.success({
       title: 'Title',
-      action: action
+      action: action,
+      testId: "toaster-test"
     });
 
     wrapper.update();
-    wrapper.find('button').simulate('click');
+    wrapper.find({
+      "data-testid": 'toaster-test__link'
+    }).simulate('click');
     expect(action.onClick).toHaveBeenCalled();
     setTimeout(function () {
       wrapper.update();

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

@@ -1,5 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Toaster launches a toast 1`] = `"<div class=\\"container\\"><div class=\\"Toast-toast-0-1-1 Toast-success-0-1-3\\"><div class=\\"Flexbox-flex-0-1-12 Toast-content-0-1-7\\"><div class=\\"Flexbox-flex-0-1-12 Flexbox-acenter-0-1-29\\"><div class=\\"\\" style=\\"flex: 1;\\"><p class=\\"Text-text-0-1-44 Text-h5-0-1-50 Text-whitePrimary-0-1-70\\">Title</p></div></div></div></div></div>"`;
+exports[`Toaster launches a toast 1`] = `"<div class=\\"container\\"><div class=\\"Toast-toast-0-1-1 Toast-success-0-1-3\\"><div class=\\"Flexbox-flex-0-1-20 Flexbox-jbetween-0-1-32\\"><div class=\\"Flexbox-flex-0-1-20 Flexbox-acenter-0-1-37 Flexbox-scenter-0-1-49\\" style=\\"flex: 1;\\"><svg class=\\"Icon-icon-0-1-55 Icon-icon-0-1-52 undefined__check-circle Toast-icon-0-1-16\\" width=\\"24\\" height=\\"24\\" fill=\\"#38d373\\" style=\\"transition: 0.3s all;\\"><use xlink:href=\\"undefined#undefined__check-circle\\"></use></svg><div class=\\"Flexbox-flex-0-1-20 Flexbox-jbetween-0-1-32 Flexbox-sstart-0-1-47 Toast-content-0-1-15\\" style=\\"flex: 1;\\"><div class=\\"Flexbox-flex-0-1-20 Flexbox-col-0-1-24\\"><p class=\\"Toast-title-0-1-13 Toast-textSuccess-0-1-10\\">Title</p></div></div></div></div></div></div>"`;
 
 exports[`Toaster matches the snapshot 1`] = `"<div class=\\"container\\"></div>"`;

package/build/Toaster/styles.js

@@ -7,7 +7,7 @@ exports["default"] = void 0;
 
 var _grid = _interopRequireDefault(require("../subatomic/grid"));
 
-var _spacing = _interopRequireDefault(require("../subatomic/spacing"));
+var _spacing = _interopRequireDefault(require("../tokens/spacing.json"));
 
 var _container;
 
@@ -21,9 +21,9 @@ var _default = {
     zIndex: 1001,
     bottom: 0,
     left: 0,
-    padding: _spacing["default"].small
+    padding: _spacing["default"]['size-4']
   }, _defineProperty(_container, "@media screen and (min-width:".concat(_grid["default"].xs, "px)"), {
-    padding: _spacing["default"].medium
+    padding: _spacing["default"]['size-6']
   }), _defineProperty(_container, "@media screen and (max-width:".concat(_grid["default"].xs - 1, "px)"), {
     width: '100vw'
   }), _defineProperty(_container, "pointerEvents", 'none'), _container)

package/package.json

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