@occmundial/occ-atomic 3.0.0-beta.26 → 3.0.0-beta.28

package/CHANGELOG.md

@@ -1,3 +1,23 @@
+# [3.0.0-beta.28](https://github.com/occmundial/occ-atomic/compare/v3.0.0-beta.27...v3.0.0-beta.28) (2024-07-08)
+
+
+### Bug Fixes
+
+* Add hover transition styles to link toaster ([dcb67ab](https://github.com/occmundial/occ-atomic/commit/dcb67aba17e6f669d5554f397c516aca687ebc53))
+* Move css to flexbox props ([cedb764](https://github.com/occmundial/occ-atomic/commit/cedb7644bdc88a19ca385e4a0d8902f19900eaf0))
+
+# [3.0.0-beta.27](https://github.com/occmundial/occ-atomic/compare/v3.0.0-beta.26...v3.0.0-beta.27) (2024-07-08)
+
+
+### Bug Fixes
+
+* CHanged outlines with shadows ([bba0c01](https://github.com/occmundial/occ-atomic/commit/bba0c01a54a13b1b405c2405eb1ab764cc1ab367))
+
+
+### Features
+
+*  Changed tag border to outline ([89ccbaf](https://github.com/occmundial/occ-atomic/commit/89ccbaf7f1d0c183940cfb3ef2fb8f270928aedf))
+
 # [3.0.0-beta.26](https://github.com/occmundial/occ-atomic/compare/v3.0.0-beta.25...v3.0.0-beta.26) (2024-07-05)
 
 

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

@@ -31,7 +31,7 @@ Object {
   },
   "error": Object {
     "background": "#fce8e8",
-    "border": "1px solid #FBDFDF",
+    "boxShadow": "inset 0px 0px 0px 1px #FBDFDF",
     "color": "#8b1313",
   },
   "errorIcon": Object {
@@ -39,7 +39,7 @@ Object {
   },
   "featured": Object {
     "background": "#0059CD",
-    "border": "1px solid rgba(255,255,255,0.2)",
+    "boxShadow": "inset 0px 0px 0px 1px rgba(255,255,255,0.2)",
     "color": "#fff",
   },
   "featuredIcon": Object {
@@ -55,7 +55,7 @@ Object {
   },
   "info": Object {
     "background": "#e3efff",
-    "border": "1px solid #b9d7ff",
+    "boxShadow": "inset 0px 0px 0px 1px #b9d7ff",
     "color": "#083CAE",
   },
   "infoIcon": Object {
@@ -76,7 +76,7 @@ Object {
   },
   "promo": Object {
     "background": "#080D39",
-    "border": "1px solid rgba(255,255,255,0.2)",
+    "boxShadow": "inset 0px 0px 0px 1px rgba(255,255,255,0.2)",
     "color": "#fff",
   },
   "promoIcon": Object {
@@ -94,7 +94,7 @@ Object {
   },
   "success": Object {
     "background": "#ebfbf1",
-    "border": "1px solid #d7f6e3",
+    "boxShadow": "inset 0px 0px 0px 1px #d7f6e3",
     "color": "#16542e",
   },
   "successIcon": Object {
@@ -123,7 +123,7 @@ Object {
   },
   "warning": Object {
     "background": "#fff8e9",
-    "border": "1px solid #fff1d3",
+    "boxShadow": "inset 0px 0px 0px 1px #fff1d3",
     "color": "#664a0e",
   },
   "warningIcon": Object {

package/build/Tag/styles.js

@@ -85,32 +85,32 @@ var _default = {
   featured: {
     color: text.white.primary,
     background: tag.featured.bg,
-    border: "1px solid ".concat(tag.featured.border)
+    boxShadow: "inset 0px 0px 0px 1px ".concat(tag.featured.border)
   },
   promo: {
     color: text.white.primary,
     background: tag.promo.bg,
-    border: "1px solid ".concat(tag.promo.border)
+    boxShadow: "inset 0px 0px 0px 1px ".concat(tag.promo.border)
   },
   success: {
     color: text.success,
     background: tag.success.bg,
-    border: "1px solid ".concat(tag.success.border)
+    boxShadow: "inset 0px 0px 0px 1px ".concat(tag.success.border)
   },
   info: {
     color: text.indigo.primary,
     background: tag.info.bg,
-    border: "1px solid ".concat(tag.info.border)
+    boxShadow: "inset 0px 0px 0px 1px ".concat(tag.info.border)
   },
   warning: {
     color: text.warning,
     background: tag.warning.bg,
-    border: "1px solid ".concat(tag.warning.border)
+    boxShadow: "inset 0px 0px 0px 1px ".concat(tag.warning.border)
   },
   error: {
     color: text.error,
     background: tag.error.bg,
-    border: "1px solid ".concat(tag.error.border)
+    boxShadow: "inset 0px 0px 0px 1px ".concat(tag.error.border)
   },
 
   /* Icon with themes */

package/build/Tip/Tip.js

@@ -81,7 +81,9 @@ var Tip = function Tip(_ref) {
     display: "flex",
     direction: size === 'small' ? 'col' : 'row',
     justifyContent: banner ? 'center' : 'start',
-    className: "".concat(classes.textContainer).concat(banner ? " ".concat(classes.maxWidth) : '')
+    alignSelf: "center",
+    flex: "1",
+    className: 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

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

@@ -138,7 +138,6 @@ Object {
     "outline": "1px solid #d7f6e3",
   },
   "textContainer": Object {
-    "alignSelf": "center",
     "flex": 1,
   },
   "textError": Object {

package/build/Tip/styles.js

@@ -147,8 +147,7 @@ var _default = {
     margin: 0
   },
   textContainer: {
-    flex: 1,
-    alignSelf: 'center'
+    flex: 1
   },
   growText: {
     flexGrow: 1

package/build/Toaster/Toast/Toast.js

@@ -35,6 +35,13 @@ var colorTextClasses = {
   success: 'textSuccess',
   error: 'textError'
 };
+var colorLinkClasses = {
+  info: 'linkInfo',
+  promote: 'linkPromote',
+  warning: 'linkWarning',
+  success: 'linkSuccess',
+  error: 'linkError'
+};
 
 var Toast = function Toast(_ref) {
   var classes = _ref.classes,
@@ -86,7 +93,7 @@ var Toast = function Toast(_ref) {
   }, 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]]),
+    className: "".concat(classes.actionText, " ").concat(classes[colorLinkClasses[theme]]),
     onClick: function onClick() {
       return onActionClick(action);
     }

package/build/Toaster/Toast/styles.js

@@ -91,6 +91,46 @@ var _default = {
   textPromote: {
     color: _colors["default"].text.white.primary
   },
+  linkInfo: {
+    color: _colors["default"].text.indigo.primary,
+    backgroundRepeat: 'no-repeat',
+    background: "linear-gradient(".concat(_colors["default"].link.brand.bg.hover, ", ").concat(_colors["default"].link.brand.bg.hover, ")"),
+    '&:active': {
+      background: "linear-gradient(".concat(_colors["default"].link.brand.bg.active, ", ").concat(_colors["default"].link.brand.bg.active, ")")
+    }
+  },
+  linkWarning: {
+    color: _colors["default"].text.warning,
+    backgroundRepeat: 'no-repeat',
+    background: "linear-gradient(".concat(_colors["default"].link.warning.bg.hover, ", ").concat(_colors["default"].link.warning.bg.hover, ")"),
+    '&:active': {
+      background: "linear-gradient(".concat(_colors["default"].link.warning.bg.active, ", ").concat(_colors["default"].link.warning.bg.active, ")")
+    }
+  },
+  linkSuccess: {
+    color: _colors["default"].text.success,
+    backgroundRepeat: 'no-repeat',
+    background: "linear-gradient(".concat(_colors["default"].link.success.bg.hover, ", ").concat(_colors["default"].link.success.bg.hover, ")"),
+    '&:active': {
+      background: "linear-gradient(".concat(_colors["default"].link.success.bg.active, ", ").concat(_colors["default"].link.success.bg.active, ")")
+    }
+  },
+  linkError: {
+    color: _colors["default"].text.error,
+    backgroundRepeat: 'no-repeat',
+    background: "linear-gradient(".concat(_colors["default"].link.error.bg.hover, ", ").concat(_colors["default"].link.error.bg.hover, ")"),
+    '&:active': {
+      background: "linear-gradient(".concat(_colors["default"].link.error.bg.active, ", ").concat(_colors["default"].link.error.bg.active, ")")
+    }
+  },
+  linkPromote: {
+    color: _colors["default"].text.white.primary,
+    backgroundRepeat: 'no-repeat',
+    background: "linear-gradient(".concat(_colors["default"].link.white.bg.hover, ", ").concat(_colors["default"].link.white.bg.hover, ")"),
+    '&:active': {
+      background: "linear-gradient(".concat(_colors["default"].link.white.bg.active, ", ").concat(_colors["default"].link.white.bg.active, ")")
+    }
+  },
   title: {
     font: (0, _styles.parseFontValue)(_fonts["default"]['alert-default']),
     margin: 0
@@ -117,6 +157,12 @@ var _default = {
     textDecoration: 'underline',
     cursor: 'pointer',
     alignSelf: 'start',
+    transition: 'all ease-out 150ms',
+    backgroundSize: '0%',
+    '&:hover': {
+      backgroundSize: '100%',
+      cursor: 'pointer'
+    },
     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']],

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-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-scenter-0-1-49 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 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-25 Flexbox-jbetween-0-1-37\\"><div class=\\"Flexbox-flex-0-1-25 Flexbox-acenter-0-1-42 Flexbox-scenter-0-1-54\\" style=\\"flex: 1;\\"><svg class=\\"Icon-icon-0-1-60 Icon-icon-0-1-57 undefined__check-circle Toast-icon-0-1-21\\" 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-25 Flexbox-jbetween-0-1-37 Flexbox-scenter-0-1-54 Toast-content-0-1-20\\" style=\\"flex: 1;\\"><div class=\\"Flexbox-flex-0-1-25 Flexbox-col-0-1-29\\"><p class=\\"Toast-title-0-1-18 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/functions.js

@@ -29,6 +29,10 @@ var toaster = {
     value.type = 'warning';
     this.addToast(value);
   },
+  promote: function promote(value) {
+    value.type = 'promote';
+    this.addToast(value);
+  },
   close: function close() {
     if (this.closeListener && !(0, _isEmpty["default"])(this.toast)) this.closeListener(this.toast);
   },

package/package.json

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