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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/build/Tip/Tip.js +3 -1
  3. package/build/Tip/__snapshots__/Tip.test.js.snap +0 -1
  4. package/build/Tip/styles.js +1 -2
  5. package/build/Toaster/Toast/Toast.js +8 -1
  6. package/build/Toaster/Toast/styles.js +46 -0
  7. package/build/Toaster/__snapshots__/Toaster.test.js.snap +1 -1
  8. package/build/Toaster/functions.js +4 -0
  9. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,3 +1,11 @@
1
+ # [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)
2
+
3
+
4
+ ### Bug Fixes
5
+
6
+ * Add hover transition styles to link toaster ([dcb67ab](https://github.com/occmundial/occ-atomic/commit/dcb67aba17e6f669d5554f397c516aca687ebc53))
7
+ * Move css to flexbox props ([cedb764](https://github.com/occmundial/occ-atomic/commit/cedb7644bdc88a19ca385e4a0d8902f19900eaf0))
8
+
1
9
  # [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)
2
10
 
3
11
 
package/build/Tip/Tip.js CHANGED
@@ -81,7 +81,9 @@ var Tip = function Tip(_ref) {
81
81
  display: "flex",
82
82
  direction: size === 'small' ? 'col' : 'row',
83
83
  justifyContent: banner ? 'center' : 'start',
84
- className: "".concat(classes.textContainer).concat(banner ? " ".concat(classes.maxWidth) : '')
84
+ alignSelf: "center",
85
+ flex: "1",
86
+ className: banner ? " ".concat(classes.maxWidth) : ''
85
87
  }, /*#__PURE__*/_react["default"].createElement(_TipText["default"], {
86
88
  classes: "".concat(classes.normalText, " ").concat(classes[colorTextClasses[theme]]).concat(!banner ? " ".concat(classes.growText) : ''),
87
89
  text: children
package/build/Tip/__snapshots__/Tip.test.js.snap CHANGED
@@ -138,7 +138,6 @@ Object {
138
138
  "outline": "1px solid #d7f6e3",
139
139
  },
140
140
  "textContainer": Object {
141
- "alignSelf": "center",
142
141
  "flex": 1,
143
142
  },
144
143
  "textError": Object {
package/build/Tip/styles.js CHANGED
@@ -147,8 +147,7 @@ var _default = {
147
147
  margin: 0
148
148
  },
149
149
  textContainer: {
150
- flex: 1,
151
- alignSelf: 'center'
150
+ flex: 1
152
151
  },
153
152
  growText: {
154
153
  flexGrow: 1
package/build/Toaster/Toast/Toast.js CHANGED
@@ -35,6 +35,13 @@ var colorTextClasses = {
35
35
  success: 'textSuccess',
36
36
  error: 'textError'
37
37
  };
38
+ var colorLinkClasses = {
39
+ info: 'linkInfo',
40
+ promote: 'linkPromote',
41
+ warning: 'linkWarning',
42
+ success: 'linkSuccess',
43
+ error: 'linkError'
44
+ };
38
45
 
39
46
  var Toast = function Toast(_ref) {
40
47
  var classes = _ref.classes,
@@ -86,7 +93,7 @@ var Toast = function Toast(_ref) {
86
93
  }, title), description && /*#__PURE__*/_react["default"].createElement("p", {
87
94
  className: "".concat(classes.description, " ").concat(classes[colorTextClasses[theme]])
88
95
  }, description)), action ? /*#__PURE__*/_react["default"].createElement("a", _extends({
89
- className: "".concat(classes.actionText, " ").concat(classes[colorTextClasses[theme]]),
96
+ className: "".concat(classes.actionText, " ").concat(classes[colorLinkClasses[theme]]),
90
97
  onClick: function onClick() {
91
98
  return onActionClick(action);
92
99
  }
package/build/Toaster/Toast/styles.js CHANGED
@@ -91,6 +91,46 @@ var _default = {
91
91
  textPromote: {
92
92
  color: _colors["default"].text.white.primary
93
93
  },
94
+ linkInfo: {
95
+ color: _colors["default"].text.indigo.primary,
96
+ backgroundRepeat: 'no-repeat',
97
+ background: "linear-gradient(".concat(_colors["default"].link.brand.bg.hover, ", ").concat(_colors["default"].link.brand.bg.hover, ")"),
98
+ '&:active': {
99
+ background: "linear-gradient(".concat(_colors["default"].link.brand.bg.active, ", ").concat(_colors["default"].link.brand.bg.active, ")")
100
+ }
101
+ },
102
+ linkWarning: {
103
+ color: _colors["default"].text.warning,
104
+ backgroundRepeat: 'no-repeat',
105
+ background: "linear-gradient(".concat(_colors["default"].link.warning.bg.hover, ", ").concat(_colors["default"].link.warning.bg.hover, ")"),
106
+ '&:active': {
107
+ background: "linear-gradient(".concat(_colors["default"].link.warning.bg.active, ", ").concat(_colors["default"].link.warning.bg.active, ")")
108
+ }
109
+ },
110
+ linkSuccess: {
111
+ color: _colors["default"].text.success,
112
+ backgroundRepeat: 'no-repeat',
113
+ background: "linear-gradient(".concat(_colors["default"].link.success.bg.hover, ", ").concat(_colors["default"].link.success.bg.hover, ")"),
114
+ '&:active': {
115
+ background: "linear-gradient(".concat(_colors["default"].link.success.bg.active, ", ").concat(_colors["default"].link.success.bg.active, ")")
116
+ }
117
+ },
118
+ linkError: {
119
+ color: _colors["default"].text.error,
120
+ backgroundRepeat: 'no-repeat',
121
+ background: "linear-gradient(".concat(_colors["default"].link.error.bg.hover, ", ").concat(_colors["default"].link.error.bg.hover, ")"),
122
+ '&:active': {
123
+ background: "linear-gradient(".concat(_colors["default"].link.error.bg.active, ", ").concat(_colors["default"].link.error.bg.active, ")")
124
+ }
125
+ },
126
+ linkPromote: {
127
+ color: _colors["default"].text.white.primary,
128
+ backgroundRepeat: 'no-repeat',
129
+ background: "linear-gradient(".concat(_colors["default"].link.white.bg.hover, ", ").concat(_colors["default"].link.white.bg.hover, ")"),
130
+ '&:active': {
131
+ background: "linear-gradient(".concat(_colors["default"].link.white.bg.active, ", ").concat(_colors["default"].link.white.bg.active, ")")
132
+ }
133
+ },
94
134
  title: {
95
135
  font: (0, _styles.parseFontValue)(_fonts["default"]['alert-default']),
96
136
  margin: 0
@@ -117,6 +157,12 @@ var _default = {
117
157
  textDecoration: 'underline',
118
158
  cursor: 'pointer',
119
159
  alignSelf: 'start',
160
+ transition: 'all ease-out 150ms',
161
+ backgroundSize: '0%',
162
+ '&:hover': {
163
+ backgroundSize: '100%',
164
+ cursor: 'pointer'
165
+ },
120
166
  margin: [_spacing["default"]['size-2'], 0, 0]
121
167
  }, "@media screen and (min-width:".concat(_grid["default"].xs, "px)"), {
122
168
  margin: [0, 0, 0, _spacing["default"]['size-4']],
package/build/Toaster/__snapshots__/Toaster.test.js.snap CHANGED
@@ -1,5 +1,5 @@
1
1
  // Jest Snapshot v1, https://goo.gl/fbAQLP
2
2
 
3
- 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>"`;
3
+ 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>"`;
4
4
 
5
5
  exports[`Toaster matches the snapshot 1`] = `"<div class=\\"container\\"></div>"`;
package/build/Toaster/functions.js CHANGED
@@ -29,6 +29,10 @@ var toaster = {
29
29
  value.type = 'warning';
30
30
  this.addToast(value);
31
31
  },
32
+ promote: function promote(value) {
33
+ value.type = 'promote';
34
+ this.addToast(value);
35
+ },
32
36
  close: function close() {
33
37
  if (this.closeListener && !(0, _isEmpty["default"])(this.toast)) this.closeListener(this.toast);
34
38
  },
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@occmundial/occ-atomic",
3
- "version": "3.0.0-beta.27",
3
+ "version": "3.0.0-beta.28",
4
4
  "description": "Collection of shareable styled React components for OCC applications.",
5
5
  "homepage": "http://occmundial.github.io/occ-atomic",
6
6
  "main": "build/index.js",