@commercetools-uikit/icon-button 15.2.4 → 15.4.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 (5) hide show
  1. package/dist/commercetools-uikit-icon-button.cjs.dev.js +26 -65
  2. package/dist/commercetools-uikit-icon-button.cjs.prod.js +20 -60
  3. package/dist/commercetools-uikit-icon-button.esm.js +27 -66
  4. package/dist/declarations/src/icon-button.styles.d.ts +2 -3
  5. package/package.json +6 -6
package/dist/commercetools-uikit-icon-button.cjs.prod.js CHANGED
@@ -31,12 +31,7 @@ var _Object$defineProperties__default = /*#__PURE__*/_interopDefault(_Object$def
31
31
  var _Object$defineProperty__default = /*#__PURE__*/_interopDefault(_Object$defineProperty);
32
32
  var AccessibleButton__default = /*#__PURE__*/_interopDefault(AccessibleButton);
33
33
 
34
- var buttonSizes = {
35
- small: '16px',
36
- medium: '24px',
37
- big: '32px'
38
- }; // Gets the color which the icon should have based on context of button's state/cursor behavior
39
-
34
+ // Gets the color which the icon should have based on context of button's state/cursor behavior
40
35
  var getIconThemeColor = function getIconThemeColor(props) {
41
36
  var _props$icon;
42
37
 
@@ -56,46 +51,6 @@ var getIconThemeColor = function getIconThemeColor(props) {
56
51
  return (_props$icon = props.icon) === null || _props$icon === void 0 ? void 0 : _props$icon.props.theme;
57
52
  };
58
53
 
59
- var getStateStyles = function getStateStyles(isDisabled, isActive, theme) {
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;" + ("" ), "" );
62
-
63
- switch (theme) {
64
- case 'info':
65
- return [disabledStyle, /*#__PURE__*/react.css("&:hover{border-color:", designSystem.customProperties.colorInfo85, ";background-color:", designSystem.customProperties.colorInfo85, ";}" + ("" ), "" )];
66
-
67
- case 'primary':
68
- return [disabledStyle, /*#__PURE__*/react.css("&:hover{border-color:", designSystem.customProperties.colorPrimary85, ";background-color:", designSystem.customProperties.colorPrimary85, ";}" + ("" ), "" )];
69
-
70
- default:
71
- return disabledStyle;
72
- }
73
- }
74
-
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, ";}" + ("" ), "" );
77
-
78
- switch (theme) {
79
- case 'info':
80
- return [activeStyle, isDisabled &&
81
- /*#__PURE__*/
82
- // When the button is active and somehow is disabled it should have
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, ";}" + ("" ), "" )];
85
-
86
- case 'primary':
87
- return [activeStyle, // When the button is active and somehow is disabled it should have
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, ";}" + ("" ), "" )];
90
-
91
- default:
92
- return activeStyle;
93
- }
94
- }
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, ";}" + ("" ), "" );
97
- };
98
-
99
54
  var _ref = {
100
55
  name: "18wgrk7",
101
56
  styles: "border-radius:50%"
@@ -109,13 +64,13 @@ var getShapeStyles = function getShapeStyles(shape, size) {
109
64
  case 'square':
110
65
  switch (size) {
111
66
  case 'small':
112
- return /*#__PURE__*/react.css("border-radius:", designSystem.customProperties.borderRadius2, ";" + ("" ), "" );
67
+ return /*#__PURE__*/react.css("border-radius:", designSystem.designTokens.borderRadiusForButtonAsIconAsSmall, ";" + ("" ), "" );
113
68
 
114
69
  case 'medium':
115
- return /*#__PURE__*/react.css("border-radius:", designSystem.customProperties.borderRadius4, ";" + ("" ), "" );
70
+ return /*#__PURE__*/react.css("border-radius:", designSystem.designTokens.borderRadiusForButtonAsIconAsMedium, ";" + ("" ), "" );
116
71
 
117
72
  case 'big':
118
- return /*#__PURE__*/react.css("border-radius:", designSystem.customProperties.borderRadius6, ";" + ("" ), "" );
73
+ return /*#__PURE__*/react.css("border-radius:", designSystem.designTokens.borderRadiusForButtonAsIconAsBig, ";" + ("" ), "" );
119
74
 
120
75
  default:
121
76
  return /*#__PURE__*/react.css("" , "" );
@@ -129,29 +84,34 @@ var getShapeStyles = function getShapeStyles(shape, size) {
129
84
  var getSizeStyles = function getSizeStyles(size) {
130
85
  switch (size) {
131
86
  case 'small':
132
- return /*#__PURE__*/react.css("height:", buttonSizes.small, ";width:", buttonSizes.small, ";" + ("" ), "" );
87
+ return /*#__PURE__*/react.css("height:", designSystem.designTokens.heightForButtonAsIconAsSmall, ";width:", designSystem.designTokens.heightForButtonAsIconAsSmall, ";" + ("" ), "" );
133
88
 
134
89
  case 'medium':
135
- return /*#__PURE__*/react.css("height:", buttonSizes.medium, ";width:", buttonSizes.medium, ";" + ("" ), "" );
90
+ return /*#__PURE__*/react.css("height:", designSystem.designTokens.heightForButtonAsIconAsMedium, ";width:", designSystem.designTokens.heightForButtonAsIconAsMedium, ";" + ("" ), "" );
136
91
 
137
92
  case 'big':
138
- return /*#__PURE__*/react.css("height:", buttonSizes.big, ";width:", buttonSizes.big, ";" + ("" ), "" );
93
+ return /*#__PURE__*/react.css("height:", designSystem.designTokens.heightForButtonAsIconAsBig, ";width:", designSystem.designTokens.heightForButtonAsIconAsBig, ";" + ("" ), "" );
139
94
 
140
95
  default:
141
96
  return /*#__PURE__*/react.css("" , "" );
142
97
  }
143
98
  };
144
99
 
145
- var getThemeStyles = function getThemeStyles(theme) {
146
- if (!theme) return /*#__PURE__*/react.css("" , "" );
147
- if (theme === 'default') return /*#__PURE__*/react.css("" , "" );
100
+ var getBaseStyles = function getBaseStyles(theme, isDisabled, isActive) {
101
+ if (isDisabled) {
102
+ return /*#__PURE__*/react.css("&,&:hover{background-color:", designSystem.designTokens.backgroundColorForButtonWhenDisabled, ";border-color:", designSystem.designTokens.borderColorForButtonAsIconWhenDisabled, ";color:", designSystem.designTokens.colorNeutral60, ";box-shadow:none;}" + ("" ), "" );
103
+ }
104
+
105
+ if (!theme || theme === 'default') {
106
+ return /*#__PURE__*/react.css("&:hover{background-color:", designSystem.designTokens.backgroundColorForButtonWhenHovered, ";box-shadow:", designSystem.designTokens.shadowForButtonWhenHovered, ";}", isActive ? '&,' : '', " &:active{background-color:", designSystem.designTokens.backgroundColorForButtonWhenActive, ";box-shadow:", designSystem.designTokens.shadowForButtonWhenActive, ";border-color:", designSystem.designTokens.borderColorForButtonAsIcon, ";}" + ("" ), "" );
107
+ }
148
108
 
149
109
  switch (theme) {
150
110
  case 'primary':
151
- return /*#__PURE__*/react.css("&:hover{background-color:", designSystem.customProperties.colorPrimary, ";border-color:", designSystem.customProperties.colorPrimary, ";color:", designSystem.customProperties.colorSurface, ";}" + ("" ), "" );
111
+ return /*#__PURE__*/react.css("&:hover{background-color:", designSystem.designTokens.backgroundColorForButtonAsIconAsPrimaryWhenHovered, ";box-shadow:", designSystem.designTokens.shadowForButtonWhenHovered, ";}", isActive ? '&,' : '', " &:active{background-color:", designSystem.designTokens.backgroundColorForButtonAsIconAsPrimaryWhenActive, ";box-shadow:", designSystem.designTokens.shadowForButtonWhenActive, ";}", isActive ? '&,' : '', " &:hover,&:active{border-color:", designSystem.designTokens.borderColorForButtonAsIconAsPrimary, ";}" + ("" ), "" );
152
112
 
153
113
  case 'info':
154
- return /*#__PURE__*/react.css("&:hover{background-color:", designSystem.customProperties.colorInfo, ";border-color:", designSystem.customProperties.colorInfo, ";color:", designSystem.customProperties.colorSurface, ";}" + ("" ), "" );
114
+ return /*#__PURE__*/react.css("&:hover{background-color:", designSystem.designTokens.backgroundColorForButtonAsIconAsInfoWhenHovered, ";box-shadow:", designSystem.designTokens.shadowForButtonWhenHovered, ";}", isActive ? '&,' : '', " &:active{background-color:", designSystem.designTokens.backgroundColorForButtonAsIconAsInfoWhenActive, ";box-shadow:", designSystem.designTokens.shadowForButtonWhenActive, ";}", isActive ? '&,' : '', " &:hover,&:active{border-color:", designSystem.designTokens.borderColorForButtonAsIconAsInfo, ";}" + ("" ), "" );
155
115
 
156
116
  default:
157
117
  {
@@ -162,7 +122,7 @@ var getThemeStyles = function getThemeStyles(theme) {
162
122
 
163
123
  var getHoverStyles = function getHoverStyles(isDisabled, theme) {
164
124
  if (theme === 'default' || isDisabled) return /*#__PURE__*/react.css("" , "" );
165
- return /*#__PURE__*/react.css("&:hover{*{fill:", designSystem.customProperties.colorSurface, ";}}" + ("" ), "" );
125
+ return /*#__PURE__*/react.css("&:hover{*{fill:", designSystem.designTokens.colorSurface, ";}}" + ("" ), "" );
166
126
  };
167
127
 
168
128
  function ownKeys(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); 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; }
@@ -192,7 +152,7 @@ var IconButton = function IconButton(props) {
192
152
  isToggleButton: props.isToggleButton,
193
153
  isToggled: props.isToggled,
194
154
  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), "" , "" ],
155
+ css: [/*#__PURE__*/react.css("width:100%;height:100%;display:flex;align-items:center;justify-content:center;border:1px solid ", designSystem.designTokens.borderColorForButtonAsIcon, ";background-color:", designSystem.designTokens.colorSurface, ";box-shadow:", designSystem.designTokens.shadowForButton, ";color:", designSystem.designTokens.colorSolid, ";transition:background-color ", designSystem.designTokens.transitionLinear80Ms, ",box-shadow 150ms ease-in-out;" + ("" ), "" ), getBaseStyles(props.theme, props.isDisabled, isActive), getShapeStyles(props.shape, props.size), getSizeStyles(props.size), getHoverStyles(props.isDisabled, props.theme), "" , "" ],
196
156
  children: props.icon && /*#__PURE__*/react$1.cloneElement(props.icon, {
197
157
  size: props.size,
198
158
  color: getIconThemeColor(props)
@@ -206,7 +166,7 @@ IconButton.displayName = 'IconButton';
206
166
  var IconButton$1 = IconButton;
207
167
 
208
168
  // NOTE: This string will be replaced on build time with the package version.
209
- var version = "15.2.4";
169
+ var version = "15.4.0";
210
170
 
211
171
  exports["default"] = IconButton$1;
212
172
  exports.version = version;