@commercetools-uikit/icon-button 12.2.2 → 12.2.9

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/README.md +1 -2
  2. package/dist/commercetools-uikit-icon-button.cjs.dev.js +49 -47
  3. package/dist/commercetools-uikit-icon-button.cjs.prod.js +37 -36
  4. package/dist/commercetools-uikit-icon-button.esm.js +35 -32
  5. package/dist/declarations/src/icon-button.d.ts +20 -20
  6. package/dist/declarations/src/icon-button.styles.d.ts +8 -8
  7. package/dist/declarations/src/index.d.ts +2 -2
  8. package/dist/declarations/src/version.d.ts +2 -2
  9. package/package.json +9 -13
package/dist/commercetools-uikit-icon-button.cjs.prod.js CHANGED
@@ -12,11 +12,12 @@ var _Object$defineProperties = require('@babel/runtime-corejs3/core-js-stable/ob
12
12
  var _Object$defineProperty = require('@babel/runtime-corejs3/core-js-stable/object/define-property');
13
13
  var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
14
14
  require('prop-types');
15
- var React = require('react');
15
+ var react$1 = require('react');
16
16
  var react = require('@emotion/react');
17
17
  var designSystem = require('@commercetools-uikit/design-system');
18
18
  var utils = require('@commercetools-uikit/utils');
19
19
  var AccessibleButton = require('@commercetools-uikit/accessible-button');
20
+ var jsxRuntime = require('@emotion/react/jsx-runtime');
20
21
 
21
22
  function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
22
23
 
@@ -28,7 +29,6 @@ var _forEachInstanceProperty__default = /*#__PURE__*/_interopDefault(_forEachIns
28
29
  var _Object$getOwnPropertyDescriptors__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertyDescriptors);
29
30
  var _Object$defineProperties__default = /*#__PURE__*/_interopDefault(_Object$defineProperties);
30
31
  var _Object$defineProperty__default = /*#__PURE__*/_interopDefault(_Object$defineProperty);
31
- var React__default = /*#__PURE__*/_interopDefault(React);
32
32
  var AccessibleButton__default = /*#__PURE__*/_interopDefault(AccessibleButton);
33
33
 
34
34
  var buttonSizes = {
@@ -58,14 +58,14 @@ var getIconThemeColor = function getIconThemeColor(props) {
58
58
 
59
59
  var getStateStyles = function getStateStyles(isDisabled, isActive, theme) {
60
60
  if (isDisabled) {
61
- var disabledStyle = /*#__PURE__*/react.css("background-color:", designSystem.customProperties.colorAccent98, ";border-color:", designSystem.customProperties.colorNeutral, ";color:", designSystem.customProperties.colorNeutral60, ";box-shadow:none;" + ("" ));
61
+ var disabledStyle = /*#__PURE__*/react.css("background-color:", designSystem.customProperties.colorAccent98, ";border-color:", designSystem.customProperties.colorNeutral, ";color:", designSystem.customProperties.colorNeutral60, ";box-shadow:none;" + ("" ), "" );
62
62
 
63
63
  switch (theme) {
64
64
  case 'info':
65
- return [disabledStyle, /*#__PURE__*/react.css("&:hover{border-color:", designSystem.customProperties.colorInfo85, ";background-color:", designSystem.customProperties.colorInfo85, ";}" + ("" ))];
65
+ return [disabledStyle, /*#__PURE__*/react.css("&:hover{border-color:", designSystem.customProperties.colorInfo85, ";background-color:", designSystem.customProperties.colorInfo85, ";}" + ("" ), "" )];
66
66
 
67
67
  case 'primary':
68
- return [disabledStyle, /*#__PURE__*/react.css("&:hover{border-color:", designSystem.customProperties.colorPrimary85, ";background-color:", designSystem.customProperties.colorPrimary85, ";}" + ("" ))];
68
+ return [disabledStyle, /*#__PURE__*/react.css("&:hover{border-color:", designSystem.customProperties.colorPrimary85, ";background-color:", designSystem.customProperties.colorPrimary85, ";}" + ("" ), "" )];
69
69
 
70
70
  default:
71
71
  return disabledStyle;
@@ -73,7 +73,7 @@ var getStateStyles = function getStateStyles(isDisabled, isActive, theme) {
73
73
  }
74
74
 
75
75
  if (isActive) {
76
- var activeStyle = /*#__PURE__*/react.css("box-shadow:", designSystem.customProperties.shadow9, ";background-color:", designSystem.customProperties.colorSurface, ";border-color:", designSystem.customProperties.colorSurface, ";&:hover{box-shadow:", designSystem.customProperties.shadow9, ";background-color:", designSystem.customProperties.colorNeutral95, ";border-color:", designSystem.customProperties.colorNeutral95, ";}" + ("" ));
76
+ var activeStyle = /*#__PURE__*/react.css("box-shadow:", designSystem.customProperties.shadow9, ";background-color:", designSystem.customProperties.colorSurface, ";border-color:", designSystem.customProperties.colorSurface, ";&:hover{box-shadow:", designSystem.customProperties.shadow9, ";background-color:", designSystem.customProperties.colorNeutral95, ";border-color:", designSystem.customProperties.colorNeutral95, ";}" + ("" ), "" );
77
77
 
78
78
  switch (theme) {
79
79
  case 'info':
@@ -81,19 +81,19 @@ var getStateStyles = function getStateStyles(isDisabled, isActive, theme) {
81
81
  /*#__PURE__*/
82
82
  // When the button is active and somehow is disabled it should have
83
83
  // a different color to indicate that it's active but can't receive any actions
84
- react.css("background-color:", designSystem.customProperties.colorInfo85, ";border-color:", designSystem.customProperties.colorInfo85, ";color:", designSystem.customProperties.colorSurface, ";box-shadow:", designSystem.customProperties.shadow9, ";" + ("" )), /*#__PURE__*/react.css("background-color:", designSystem.customProperties.colorInfo, ";border-color:", designSystem.customProperties.colorInfo, ";color:", designSystem.customProperties.colorSurface, ";&:hover{background-color:", designSystem.customProperties.colorInfo85, ";border-color:", designSystem.customProperties.colorInfo85, ";}" + ("" ))];
84
+ react.css("background-color:", designSystem.customProperties.colorInfo85, ";border-color:", designSystem.customProperties.colorInfo85, ";color:", designSystem.customProperties.colorSurface, ";box-shadow:", designSystem.customProperties.shadow9, ";" + ("" ), "" ), /*#__PURE__*/react.css("background-color:", designSystem.customProperties.colorInfo, ";border-color:", designSystem.customProperties.colorInfo, ";color:", designSystem.customProperties.colorSurface, ";&:hover{background-color:", designSystem.customProperties.colorInfo85, ";border-color:", designSystem.customProperties.colorInfo85, ";}" + ("" ), "" )];
85
85
 
86
86
  case 'primary':
87
87
  return [activeStyle, // When the button is active and somehow is disabled it should have
88
88
  // a different color to indicate that it's active but can't receive any actions
89
- isDisabled && /*#__PURE__*/react.css("background-color:", designSystem.customProperties.colorPrimary85, ";border-color:", designSystem.customProperties.colorPrimary85, ";color:", designSystem.customProperties.colorSurface, ";box-shadow:", designSystem.customProperties.shadow9, ";" + ("" )), /*#__PURE__*/react.css("background-color:", designSystem.customProperties.colorPrimary, ";color:", designSystem.customProperties.colorSurface, ";&:hover{background-color:", designSystem.customProperties.colorPrimary85, ";border-color:", designSystem.customProperties.colorPrimary85, ";}" + ("" ))];
89
+ isDisabled && /*#__PURE__*/react.css("background-color:", designSystem.customProperties.colorPrimary85, ";border-color:", designSystem.customProperties.colorPrimary85, ";color:", designSystem.customProperties.colorSurface, ";box-shadow:", designSystem.customProperties.shadow9, ";" + ("" ), "" ), /*#__PURE__*/react.css("background-color:", designSystem.customProperties.colorPrimary, ";color:", designSystem.customProperties.colorSurface, ";&:hover{background-color:", designSystem.customProperties.colorPrimary85, ";border-color:", designSystem.customProperties.colorPrimary85, ";}" + ("" ), "" )];
90
90
 
91
91
  default:
92
92
  return activeStyle;
93
93
  }
94
94
  }
95
95
 
96
- return /*#__PURE__*/react.css("&:hover{box-shadow:", designSystem.customProperties.shadow8, ";}&:active{box-shadow:", designSystem.customProperties.shadow9, ";background-color:", designSystem.customProperties.colorSurface, ";border-color:", designSystem.customProperties.colorSurface, ";}" + ("" ));
96
+ return /*#__PURE__*/react.css("&:hover{box-shadow:", designSystem.customProperties.shadow8, ";}&:active{box-shadow:", designSystem.customProperties.shadow9, ";background-color:", designSystem.customProperties.colorSurface, ";border-color:", designSystem.customProperties.colorSurface, ";}" + ("" ), "" );
97
97
  };
98
98
 
99
99
  var _ref = {
@@ -109,65 +109,65 @@ var getShapeStyles = function getShapeStyles(shape, size) {
109
109
  case 'square':
110
110
  switch (size) {
111
111
  case 'small':
112
- return /*#__PURE__*/react.css("border-radius:", designSystem.customProperties.borderRadius2, ";" + ("" ));
112
+ return /*#__PURE__*/react.css("border-radius:", designSystem.customProperties.borderRadius2, ";" + ("" ), "" );
113
113
 
114
114
  case 'medium':
115
- return /*#__PURE__*/react.css("border-radius:", designSystem.customProperties.borderRadius4, ";" + ("" ));
115
+ return /*#__PURE__*/react.css("border-radius:", designSystem.customProperties.borderRadius4, ";" + ("" ), "" );
116
116
 
117
117
  case 'big':
118
- return /*#__PURE__*/react.css("border-radius:", designSystem.customProperties.borderRadius6, ";" + ("" ));
118
+ return /*#__PURE__*/react.css("border-radius:", designSystem.customProperties.borderRadius6, ";" + ("" ), "" );
119
119
 
120
120
  default:
121
- return /*#__PURE__*/react.css("" );
121
+ return /*#__PURE__*/react.css("" , "" );
122
122
  }
123
123
 
124
124
  default:
125
- return /*#__PURE__*/react.css("" );
125
+ return /*#__PURE__*/react.css("" , "" );
126
126
  }
127
127
  };
128
128
 
129
129
  var getSizeStyles = function getSizeStyles(size) {
130
130
  switch (size) {
131
131
  case 'small':
132
- return /*#__PURE__*/react.css("height:", buttonSizes.small, ";width:", buttonSizes.small, ";" + ("" ));
132
+ return /*#__PURE__*/react.css("height:", buttonSizes.small, ";width:", buttonSizes.small, ";" + ("" ), "" );
133
133
 
134
134
  case 'medium':
135
- return /*#__PURE__*/react.css("height:", buttonSizes.medium, ";width:", buttonSizes.medium, ";" + ("" ));
135
+ return /*#__PURE__*/react.css("height:", buttonSizes.medium, ";width:", buttonSizes.medium, ";" + ("" ), "" );
136
136
 
137
137
  case 'big':
138
- return /*#__PURE__*/react.css("height:", buttonSizes.big, ";width:", buttonSizes.big, ";" + ("" ));
138
+ return /*#__PURE__*/react.css("height:", buttonSizes.big, ";width:", buttonSizes.big, ";" + ("" ), "" );
139
139
 
140
140
  default:
141
- return /*#__PURE__*/react.css("" );
141
+ return /*#__PURE__*/react.css("" , "" );
142
142
  }
143
143
  };
144
144
 
145
145
  var getThemeStyles = function getThemeStyles(theme) {
146
- if (!theme) return /*#__PURE__*/react.css("" );
147
- if (theme === 'default') return /*#__PURE__*/react.css("" );
146
+ if (!theme) return /*#__PURE__*/react.css("" , "" );
147
+ if (theme === 'default') return /*#__PURE__*/react.css("" , "" );
148
148
 
149
149
  switch (theme) {
150
150
  case 'primary':
151
- return /*#__PURE__*/react.css("&:hover{background-color:", designSystem.customProperties.colorPrimary, ";border-color:", designSystem.customProperties.colorPrimary, ";color:", designSystem.customProperties.colorSurface, ";}" + ("" ));
151
+ return /*#__PURE__*/react.css("&:hover{background-color:", designSystem.customProperties.colorPrimary, ";border-color:", designSystem.customProperties.colorPrimary, ";color:", designSystem.customProperties.colorSurface, ";}" + ("" ), "" );
152
152
 
153
153
  case 'info':
154
- return /*#__PURE__*/react.css("&:hover{background-color:", designSystem.customProperties.colorInfo, ";border-color:", designSystem.customProperties.colorInfo, ";color:", designSystem.customProperties.colorSurface, ";}" + ("" ));
154
+ return /*#__PURE__*/react.css("&:hover{background-color:", designSystem.customProperties.colorInfo, ";border-color:", designSystem.customProperties.colorInfo, ";color:", designSystem.customProperties.colorSurface, ";}" + ("" ), "" );
155
155
 
156
156
  default:
157
157
  {
158
- return /*#__PURE__*/react.css("" );
158
+ return /*#__PURE__*/react.css("" , "" );
159
159
  }
160
160
  }
161
161
  };
162
162
 
163
163
  var getHoverStyles = function getHoverStyles(isDisabled, theme) {
164
- if (theme === 'default' || isDisabled) return /*#__PURE__*/react.css("" );
165
- return /*#__PURE__*/react.css("&:hover{*{fill:", designSystem.customProperties.colorSurface, ";}}" + ("" ));
164
+ if (theme === 'default' || isDisabled) return /*#__PURE__*/react.css("" , "" );
165
+ return /*#__PURE__*/react.css("&:hover{*{fill:", designSystem.customProperties.colorSurface, ";}}" + ("" ), "" );
166
166
  };
167
167
 
168
- function ownKeys(object, enumerableOnly) { var keys = _Object$keys__default['default'](object); if (_Object$getOwnPropertySymbols__default['default']) { var symbols = _Object$getOwnPropertySymbols__default['default'](object); if (enumerableOnly) { symbols = _filterInstanceProperty__default['default'](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default['default'](object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
168
+ function ownKeys(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); if (enumerableOnly) { symbols = _filterInstanceProperty__default["default"](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default["default"](object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
169
169
 
170
- function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context; _forEachInstanceProperty__default['default'](_context = ownKeys(Object(source), true)).call(_context, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors__default['default']) { _Object$defineProperties__default['default'](target, _Object$getOwnPropertyDescriptors__default['default'](source)); } else { var _context2; _forEachInstanceProperty__default['default'](_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty__default['default'](target, key, _Object$getOwnPropertyDescriptor__default['default'](source, key)); }); } } return target; }
170
+ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context; _forEachInstanceProperty__default["default"](_context = ownKeys(Object(source), true)).call(_context, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors__default["default"]) { _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)); } else { var _context2; _forEachInstanceProperty__default["default"](_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } } return target; }
171
171
  var defaultProps = {
172
172
  type: 'button',
173
173
  theme: 'default',
@@ -183,7 +183,7 @@ var IconButton = function IconButton(props) {
183
183
  }, utils.filterInvalidAttributes(props));
184
184
 
185
185
  var isActive = Boolean(props.isToggleButton && props.isToggled);
186
- return react.jsx(AccessibleButton__default['default'], {
186
+ return jsxRuntime.jsx(AccessibleButton__default["default"], {
187
187
  as: props.as,
188
188
  buttonAttributes: buttonAttributes,
189
189
  type: props.type,
@@ -192,11 +192,12 @@ var IconButton = function IconButton(props) {
192
192
  isToggleButton: props.isToggleButton,
193
193
  isToggled: props.isToggled,
194
194
  isDisabled: props.isDisabled,
195
- css: [/*#__PURE__*/react.css("width:100%;height:100%;display:flex;align-items:center;justify-content:center;border:1px solid ", designSystem.customProperties.colorSurface, ";background-color:", designSystem.customProperties.colorSurface, ";box-shadow:", designSystem.customProperties.shadow7, ";color:", designSystem.customProperties.colorSolid, ";transition:background-color ", designSystem.customProperties.transitionLinear80Ms, ",box-shadow 150ms ease-in-out;" + ("" )), getStateStyles(props.isDisabled, isActive, props.theme), getShapeStyles(props.shape, props.size), getSizeStyles(props.size), getThemeStyles(props.theme), getHoverStyles(props.isDisabled, props.theme), "" ]
196
- }, props.icon && /*#__PURE__*/React__default['default'].cloneElement(props.icon, {
197
- size: props.size,
198
- color: getIconThemeColor(props)
199
- }));
195
+ css: [/*#__PURE__*/react.css("width:100%;height:100%;display:flex;align-items:center;justify-content:center;border:1px solid ", designSystem.customProperties.colorSurface, ";background-color:", designSystem.customProperties.colorSurface, ";box-shadow:", designSystem.customProperties.shadow7, ";color:", designSystem.customProperties.colorSolid, ";transition:background-color ", designSystem.customProperties.transitionLinear80Ms, ",box-shadow 150ms ease-in-out;" + ("" ), "" ), getStateStyles(props.isDisabled, isActive, props.theme), getShapeStyles(props.shape, props.size), getSizeStyles(props.size), getThemeStyles(props.theme), getHoverStyles(props.isDisabled, props.theme), "" , "" ],
196
+ children: props.icon && /*#__PURE__*/react$1.cloneElement(props.icon, {
197
+ size: props.size,
198
+ color: getIconThemeColor(props)
199
+ })
200
+ });
200
201
  };
201
202
 
202
203
  IconButton.propTypes = {};
@@ -204,8 +205,8 @@ IconButton.defaultProps = defaultProps;
204
205
  IconButton.displayName = 'IconButton';
205
206
  var IconButton$1 = IconButton;
206
207
 
207
- // NOTE: This string will be replaced in the `prepare` script by the `scripts/version.js` file.
208
- var version = '12.2.2';
208
+ // NOTE: This string will be replaced on build time with the package version.
209
+ var version = "12.2.9";
209
210
 
210
- exports['default'] = IconButton$1;
211
+ exports["default"] = IconButton$1;
211
212
  exports.version = version;