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

package/CHANGELOG.md

@@ -1,3 +1,18 @@
+# [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)
+
+
+### Bug Fixes
+
+* Align title if not description ([ef6a12a](https://github.com/occmundial/occ-atomic/commit/ef6a12a1dba3d5440220cfe2798801d7d08c441c))
+
+# [3.0.0-beta.25](https://github.com/occmundial/occ-atomic/compare/v3.0.0-beta.24...v3.0.0-beta.25) (2024-07-03)
+
+
+### Bug Fixes
+
+* Add hover styles to alert link action ([1e7efde](https://github.com/occmundial/occ-atomic/commit/1e7efde311085677f43c5057769d406c88d13c33))
+* Move hover styles to cta classname ([b457e9b](https://github.com/occmundial/occ-atomic/commit/b457e9b639627361ee4b272dc64663457d67a60f))
+
 # [3.0.0-beta.24](https://github.com/occmundial/occ-atomic/compare/v3.0.0-beta.23...v3.0.0-beta.24) (2024-06-28)
 
 

package/build/Avatar/Avatar.js

@@ -97,7 +97,7 @@ var Avatar = /*#__PURE__*/function (_React$Component) {
       var isEditable = onEdit || onClick;
       var handleClick = isEditable ? onClick || onEdit : undefined;
       var tabIndexValue = isEditable && !disabled ? 0 : undefined;
-      var combinedClasses = "".concat(classes.circle, " ").concat(isEditable ? "".concat(classes.editable, " ") : '').concat(disabled ? "".concat(classes.disabled, " ") : '', " ").concat(className);
+      var combinedClasses = "".concat(classes.circle).concat(isEditable ? " ".concat(classes.editable) : '').concat(disabled ? " ".concat(classes.disabled) : '').concat(className ? " ".concat(className) : '');
       return /*#__PURE__*/_react["default"].createElement("div", {
         id: id,
         className: combinedClasses,

package/build/Avatar/AvatarContent/AvatarContent.js

@@ -52,7 +52,7 @@ var AvatarContent = function AvatarContent(_ref) {
   return /*#__PURE__*/_react["default"].createElement("div", {
     className: classes.wrap
   }, /*#__PURE__*/_react["default"].createElement("div", {
-    className: "".concat(classes.cont, " ").concat(onClick ? " ".concat(classes.clickable) : '').concat(onEdit ? " ".concat(classes.editable) : '').concat(disabled ? " ".concat(classes.disabled) : '').concat(photo ? " ".concat(classes.photo) : '').concat(photo && (onClick || onEdit) ? " ".concat(classes.hoverPhoto) : '', "\n                "),
+    className: "".concat(classes.cont).concat(onClick ? " ".concat(classes.clickable) : '').concat(onEdit ? " ".concat(classes.editable) : '').concat(disabled ? " ".concat(classes.disabled) : '').concat(photo ? " ".concat(classes.photo) : '').concat(photo && (onClick || onEdit) ? " ".concat(classes.hoverPhoto) : ''),
     style: photo ? {
       background: "url('".concat(photo, "') no-repeat center center / cover")
     } : null

package/build/Tip/Tip.js

@@ -38,6 +38,13 @@ var colorTextClasses = {
   success: 'textSuccess',
   error: 'textError'
 };
+var colorLinkClasses = {
+  info: 'linkInfo',
+  promote: 'linkPromote',
+  warning: 'linkWarning',
+  success: 'linkSuccess',
+  error: 'linkError'
+};
 /** 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) {
@@ -79,7 +86,7 @@ var Tip = function Tip(_ref) {
     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) : ''),
+    className: "".concat(classes.cta, " ").concat(classes[colorLinkClasses[theme]]).concat(size === 'large' && banner ? " ".concat(classes.ctaBanner) : size === 'large' ? " ".concat(classes.ctaAlert) : ''),
     href: cta.href,
     target: cta.target,
     onClick: cta.onClick

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

@@ -24,7 +24,12 @@ Object {
     "padding": "12px",
   },
   "cta": Object {
+    "&:hover": Object {
+      "backgroundSize": "100%",
+      "cursor": "pointer",
+    },
     "alignSelf": "start",
+    "backgroundSize": "0%",
     "cursor": "pointer",
     "font": "400 14px/1.5 'OccText', sans-serif",
     "margin": Array [
@@ -34,6 +39,7 @@ Object {
     ],
     "textDecoration": "underline",
     "textWrap": "nowrap",
+    "transition": "all ease-out 150ms",
   },
   "ctaAlert": Object {
     "alignSelf": "center",
@@ -68,6 +74,46 @@ Object {
     "backgroundColor": "#e3efff",
     "outline": "1px solid #b9d7ff",
   },
+  "linkError": Object {
+    "&:active": Object {
+      "background": "linear-gradient(hsl(0 81.3% 51.8% / 0.2), hsl(0 81.3% 51.8% / 0.2))",
+    },
+    "background": "linear-gradient(hsl(0 81.3% 51.8% / 0.1), hsl(0 81.3% 51.8% / 0.1))",
+    "backgroundRepeat": "no-repeat",
+    "color": "#8b1313",
+  },
+  "linkInfo": Object {
+    "&:active": Object {
+      "background": "linear-gradient(hsl(221 91.2% 35.7% / 0.2), hsl(221 91.2% 35.7% / 0.2))",
+    },
+    "background": "linear-gradient(hsl(221 91.2% 35.7% / 0.1), hsl(221 91.2% 35.7% / 0.1))",
+    "backgroundRepeat": "no-repeat",
+    "color": "#083CAE",
+  },
+  "linkPromote": Object {
+    "&:active": Object {
+      "background": "linear-gradient(rgba(255,255,255,0.3), rgba(255,255,255,0.3))",
+    },
+    "background": "linear-gradient(rgba(255,255,255,0.2), rgba(255,255,255,0.2))",
+    "backgroundRepeat": "no-repeat",
+    "color": "#fff",
+  },
+  "linkSuccess": Object {
+    "&:active": Object {
+      "background": "linear-gradient(hsl(143 63.8% 52.4% / 0.2), hsl(143 63.8% 52.4% / 0.2))",
+    },
+    "background": "linear-gradient(hsl(143 63.8% 52.4% / 0.1), hsl(143 63.8% 52.4% / 0.1))",
+    "backgroundRepeat": "no-repeat",
+    "color": "#16542e",
+  },
+  "linkWarning": Object {
+    "&:active": Object {
+      "background": "linear-gradient(hsl(41.1 100% 57.1% / 0.2), hsl(41.1 100% 57.1% / 0.2))",
+    },
+    "background": "linear-gradient(hsl(41.1 100% 57.1% / 0.1), hsl(41.1 100% 57.1% / 0.1))",
+    "backgroundRepeat": "no-repeat",
+    "color": "#664a0e",
+  },
   "maxWidth": Object {
     "margin": Array [
       0,

package/build/Tip/styles.js

@@ -69,6 +69,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, ")")
+    }
+  },
   icon: {
     marginRight: _spacing["default"]['size-2'],
     flexShrink: 0
@@ -85,7 +125,13 @@ var _default = {
     cursor: 'pointer',
     textWrap: 'nowrap',
     margin: [_spacing["default"]['size-2'], 0, 0],
-    alignSelf: 'start'
+    alignSelf: 'start',
+    transition: 'all ease-out 150ms',
+    backgroundSize: '0%',
+    '&:hover': {
+      backgroundSize: '100%',
+      cursor: 'pointer'
+    }
   },
   ctaAlert: {
     margin: [0, 0, 0, _spacing["default"]['size-4']],

package/build/Toaster/Toast/Toast.js

@@ -76,7 +76,7 @@ var Toast = function Toast(_ref) {
     display: "flex",
     flex: "1",
     className: classes.content,
-    alignSelf: "start",
+    alignSelf: description ? 'start' : 'center',
     justifyContent: "between"
   }, /*#__PURE__*/_react["default"].createElement(_Flexbox["default"], {
     display: "flex",

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-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 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 matches the snapshot 1`] = `"<div class=\\"container\\"></div>"`;

package/build/tokens/colors.json

@@ -437,6 +437,12 @@
         "hover": "hsl(221 91.2% 35.7% / 0.1)",
         "active": "hsl(221 91.2% 35.7% / 0.2)"
       }
+    },
+    "white": {
+      "bg": {
+        "hover": "rgba(255,255,255,0.2)",
+        "active": "rgba(255,255,255,0.3)"
+      }
     }
   },
   "nav": {

package/package.json

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