@commercetools-uikit/icon-button 19.5.0 → 19.6.0

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 (6) hide show
  1. package/README.md +1 -1
  2. package/dist/commercetools-uikit-icon-button.cjs.dev.js +64 -38
  3. package/dist/commercetools-uikit-icon-button.cjs.prod.js +51 -25
  4. package/dist/commercetools-uikit-icon-button.esm.js +62 -38
  5. package/dist/declarations/src/icon-button.d.ts +4 -2
  6. package/package.json +6 -6
package/dist/commercetools-uikit-icon-button.cjs.prod.js CHANGED
@@ -2,7 +2,11 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
+ var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
6
+ require('prop-types');
7
+ var _indexOfInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/index-of');
5
8
  var _Object$keys = require('@babel/runtime-corejs3/core-js-stable/object/keys');
9
+ var _concatInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/concat');
6
10
  var _Object$getOwnPropertySymbols = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols');
7
11
  var _filterInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/filter');
8
12
  var _Object$getOwnPropertyDescriptor = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor');
@@ -10,8 +14,6 @@ var _forEachInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/in
10
14
  var _Object$getOwnPropertyDescriptors = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors');
11
15
  var _Object$defineProperties = require('@babel/runtime-corejs3/core-js-stable/object/define-properties');
12
16
  var _Object$defineProperty = require('@babel/runtime-corejs3/core-js-stable/object/define-property');
13
- var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
14
- require('prop-types');
15
17
  var react$1 = require('react');
16
18
  var react = require('@emotion/react');
17
19
  var designSystem = require('@commercetools-uikit/design-system');
@@ -21,7 +23,9 @@ var jsxRuntime = require('@emotion/react/jsx-runtime');
21
23
 
22
24
  function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
23
25
 
26
+ var _indexOfInstanceProperty__default = /*#__PURE__*/_interopDefault(_indexOfInstanceProperty);
24
27
  var _Object$keys__default = /*#__PURE__*/_interopDefault(_Object$keys);
28
+ var _concatInstanceProperty__default = /*#__PURE__*/_interopDefault(_concatInstanceProperty);
25
29
  var _Object$getOwnPropertySymbols__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertySymbols);
26
30
  var _filterInstanceProperty__default = /*#__PURE__*/_interopDefault(_filterInstanceProperty);
27
31
  var _Object$getOwnPropertyDescriptor__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertyDescriptor);
@@ -33,21 +37,21 @@ var AccessibleButton__default = /*#__PURE__*/_interopDefault(AccessibleButton);
33
37
 
34
38
  // Gets the color which the icon should have based on context of button's state/cursor behavior
35
39
  const getIconThemeColor = props => {
36
- var _props$icon;
37
- const isActive = props.isToggleButton && props.isToggled;
38
-
39
- // if button has a theme, icon should be white when hovering/clicking
40
- if (props.theme !== 'default' && isActive) {
41
- if (props.isDisabled) {
42
- return 'neutral60';
43
- }
44
- return 'surface';
40
+ let iconColor = '';
41
+ switch (true) {
42
+ case props.isDisabled:
43
+ iconColor = 'neutral60';
44
+ break;
45
+ case props.theme === 'primary':
46
+ iconColor = 'surface';
47
+ break;
48
+ case props.theme === 'info':
49
+ iconColor = 'surface';
50
+ break;
51
+ default:
52
+ iconColor = 'primary';
45
53
  }
46
-
47
- // if button is disabled, icon should be neutral60
48
- if (props.isDisabled) return 'neutral60';
49
- // if button is not disabled nor has a theme, return icon's default color
50
- return (_props$icon = props.icon) === null || _props$icon === void 0 ? void 0 : _props$icon.props.theme;
54
+ return iconColor;
51
55
  };
52
56
  var _ref = {
53
57
  name: "18wgrk7",
@@ -60,8 +64,12 @@ const getShapeStyles = (shape, size) => {
60
64
  case 'square':
61
65
  switch (size) {
62
66
  case 'small':
67
+ case '10':
68
+ case '20':
63
69
  return /*#__PURE__*/react.css("border-radius:", designSystem.designTokens.borderRadius2, ";" + ("" ), "" );
64
70
  case 'medium':
71
+ case '30':
72
+ case '40':
65
73
  case 'big':
66
74
  return /*#__PURE__*/react.css("border-radius:", designSystem.designTokens.borderRadius4, ";" + ("" ), "" );
67
75
  default:
@@ -74,11 +82,19 @@ const getShapeStyles = (shape, size) => {
74
82
  const getSizeStyles = size => {
75
83
  switch (size) {
76
84
  case 'small':
77
- return /*#__PURE__*/react.css("height:", designSystem.designTokens.heightForButtonAsSmall, ";width:", designSystem.designTokens.heightForButtonAsSmall, ";" + ("" ), "" );
85
+ return /*#__PURE__*/react.css("height:", designSystem.designTokens.heightForButtonAs10, ";width:", designSystem.designTokens.heightForButtonAs10, ";" + ("" ), "" );
78
86
  case 'medium':
79
- return /*#__PURE__*/react.css("height:", designSystem.designTokens.heightForButtonAsMedium, ";width:", designSystem.designTokens.heightForButtonAsMedium, ";" + ("" ), "" );
87
+ return /*#__PURE__*/react.css("height:", designSystem.designTokens.heightForButtonAs30, ";width:", designSystem.designTokens.heightForButtonAs30, ";" + ("" ), "" );
80
88
  case 'big':
81
- return /*#__PURE__*/react.css("height:", designSystem.designTokens.heightForButtonAsBig, ";width:", designSystem.designTokens.heightForButtonAsBig, ";" + ("" ), "" );
89
+ return /*#__PURE__*/react.css("height:", designSystem.designTokens.heightForButtonAs40, ";width:", designSystem.designTokens.heightForButtonAs40, ";" + ("" ), "" );
90
+ case '10':
91
+ return /*#__PURE__*/react.css("height:", designSystem.designTokens.heightForButtonAs10, ";width:", designSystem.designTokens.heightForButtonAs10, ";" + ("" ), "" );
92
+ case '20':
93
+ return /*#__PURE__*/react.css("height:", designSystem.designTokens.heightForButtonAs20, ";width:", designSystem.designTokens.heightForButtonAs20, ";" + ("" ), "" );
94
+ case '30':
95
+ return /*#__PURE__*/react.css("height:", designSystem.designTokens.heightForButtonAs30, ";width:", designSystem.designTokens.heightForButtonAs30, ";" + ("" ), "" );
96
+ case '40':
97
+ return /*#__PURE__*/react.css("height:", designSystem.designTokens.heightForButtonAs40, ";width:", designSystem.designTokens.heightForButtonAs40, ";" + ("" ), "" );
82
98
  default:
83
99
  return /*#__PURE__*/react.css("" , "" );
84
100
  }
@@ -88,7 +104,7 @@ const getBaseStyles = (theme, isDisabled, isActive) => {
88
104
  return /*#__PURE__*/react.css("&,&:hover{background-color:", designSystem.designTokens.colorTransparent, ";border-color:", designSystem.designTokens.colorSurface, ";color:", designSystem.designTokens.colorNeutral60, ";box-shadow:none;}" + ("" ), "" );
89
105
  }
90
106
  if (!theme || theme === 'default') {
91
- return /*#__PURE__*/react.css("&:hover{background-color:", designSystem.designTokens.backgroundColorForButtonWhenHovered, ";box-shadow:", designSystem.designTokens.shadow0, ";}", isActive ? '&,' : '', " &:active{background-color:", designSystem.designTokens.backgroundColorForButtonWhenActive, ";box-shadow:", designSystem.designTokens.shadow0, ";border-color:", designSystem.designTokens.borderColorForButtonAsSecondary, ";}" + ("" ), "" );
107
+ return /*#__PURE__*/react.css("background-color:transparent;&:hover{background-color:", designSystem.designTokens.backgroundColorForButtonWhenHovered, ";box-shadow:", designSystem.designTokens.shadow0, ";}", isActive ? '&,' : '', " &:active{background-color:", designSystem.designTokens.backgroundColorForButtonWhenActive, ";box-shadow:", designSystem.designTokens.shadow0, ";border-color:", designSystem.designTokens.borderColorForButtonAsSecondary, ";}" + ("" ), "" );
92
108
  }
93
109
  switch (theme) {
94
110
  // TODO: These custom colors where itroduced in the Merchant Center redign 2023
@@ -96,9 +112,9 @@ const getBaseStyles = (theme, isDisabled, isActive) => {
96
112
  // #15A390 -> color-primary with 10% black opacity
97
113
  // #057FCC -> color-info with 10% black opacity
98
114
  case 'primary':
99
- return /*#__PURE__*/react.css("&:hover{background-color:", designSystem.designTokens.colorPrimary40, ";box-shadow:", designSystem.designTokens.shadow0, ";}", isActive ? '&,' : '', " &:active{background-color:", designSystem.designTokens.colorPrimary, ";box-shadow:", designSystem.designTokens.shadow0, ";}", isActive ? '&,' : '', " &:hover,&:active{border-color:", designSystem.designTokens.colorNeutral, ";}" + ("" ), "" );
115
+ return /*#__PURE__*/react.css("background-color:", designSystem.designTokens.colorPrimary, ";&:hover{background-color:", designSystem.designTokens.colorPrimary40, ";box-shadow:", designSystem.designTokens.shadow0, ";}", isActive ? '&,' : '', " &:active{background-color:", designSystem.designTokens.colorPrimary25, ";box-shadow:", designSystem.designTokens.shadow0, ";}", isActive ? '&,' : '', " &:hover,&:active{border-color:", designSystem.designTokens.colorNeutral, ";}" + ("" ), "" );
100
116
  case 'info':
101
- return /*#__PURE__*/react.css("&:hover{background-color:", designSystem.designTokens.colorInfo, ";box-shadow:", designSystem.designTokens.shadow0, ";}", isActive ? '&,' : '', " &:active{background-color:#057fcc;box-shadow:", designSystem.designTokens.shadow0, ";}", isActive ? '&,' : '', " &:hover,&:active{border-color:", designSystem.designTokens.colorNeutral, ";}" + ("" ), "" );
117
+ return /*#__PURE__*/react.css("background-color:", designSystem.designTokens.colorInfo, ";&:hover{background-color:", designSystem.designTokens.colorInfo50, ";box-shadow:", designSystem.designTokens.shadow0, ";}", isActive ? '&,' : '', " &:active{background-color:", designSystem.designTokens.colorInfo40, ";box-shadow:", designSystem.designTokens.shadow0, ";}", isActive ? '&,' : '', " &:hover,&:active{border-color:", designSystem.designTokens.colorNeutral, ";}" + ("" ), "" );
102
118
  default:
103
119
  {
104
120
  return /*#__PURE__*/react.css("" , "" );
@@ -111,15 +127,25 @@ const getHoverStyles = (isDisabled, theme) => {
111
127
  };
112
128
 
113
129
  function ownKeys(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
114
- function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
130
+ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context3, _context4; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context3 = ownKeys(Object(t), !0)).call(_context3, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context4 = ownKeys(Object(t))).call(_context4, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
131
+ /**
132
+ * Mapping of legacy sizes to new sizes.
133
+ */
134
+ const sizeMapping = {
135
+ small: '10',
136
+ medium: '30',
137
+ big: '40'
138
+ };
115
139
  const defaultProps = {
116
140
  type: 'button',
117
141
  theme: 'default',
118
- size: 'big',
142
+ size: '40',
119
143
  shape: 'round',
120
144
  isToggleButton: false
121
145
  };
122
146
  const IconButton = props => {
147
+ var _context, _context2;
148
+ utils.useWarning(!Boolean(_indexOfInstanceProperty__default["default"](_context = _Object$keys__default["default"](sizeMapping)).call(_context, props.size) > -1), _concatInstanceProperty__default["default"](_context2 = "IconButton '".concat(props.size, "' value for 'size' property has been deprecated in favor of '")).call(_context2, sizeMapping[props.size], "' Please update that value when using this component"));
123
149
  const buttonAttributes = _objectSpread({
124
150
  'data-track-component': 'IconButton'
125
151
  }, utils.filterInvalidAttributes(props));
@@ -146,7 +172,7 @@ IconButton.displayName = 'IconButton';
146
172
  var IconButton$1 = IconButton;
147
173
 
148
174
  // NOTE: This string will be replaced on build time with the package version.
149
- var version = "19.5.0";
175
+ var version = "19.6.0";
150
176
 
151
177
  exports["default"] = IconButton$1;
152
178
  exports.version = version;