@commercetools-uikit/secondary-icon-button 19.20.1 → 19.21.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.
- package/dist/commercetools-uikit-secondary-icon-button.cjs.dev.js +30 -15
- package/dist/commercetools-uikit-secondary-icon-button.cjs.prod.js +30 -15
- package/dist/commercetools-uikit-secondary-icon-button.esm.js +30 -15
- package/dist/declarations/src/secondary-icon-button.d.ts +1 -7
- package/package.json +6 -6
|
@@ -10,6 +10,7 @@ var _Object$getOwnPropertyDescriptors = require('@babel/runtime-corejs3/core-js-
|
|
|
10
10
|
var _Object$defineProperties = require('@babel/runtime-corejs3/core-js-stable/object/define-properties');
|
|
11
11
|
var _Object$defineProperty = require('@babel/runtime-corejs3/core-js-stable/object/define-property');
|
|
12
12
|
var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
|
|
13
|
+
var _objectWithoutProperties = require('@babel/runtime-corejs3/helpers/objectWithoutProperties');
|
|
13
14
|
var _pt = require('prop-types');
|
|
14
15
|
var _indexOfInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/index-of');
|
|
15
16
|
var _Object$keys = require('@babel/runtime-corejs3/core-js-stable/object/keys');
|
|
@@ -66,6 +67,7 @@ const getBaseStyles = props => {
|
|
|
66
67
|
return [_ref, getColorStyle(props), getDisabledStyle()];
|
|
67
68
|
};
|
|
68
69
|
|
|
70
|
+
const _excluded = ["color", "type", "size", "isDisabled"];
|
|
69
71
|
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; }
|
|
70
72
|
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context2, _context3; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context2 = ownKeys(Object(t), !0)).call(_context2, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context3 = ownKeys(Object(t))).call(_context3, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
|
|
71
73
|
const propsToOmit = ['type'];
|
|
@@ -86,25 +88,44 @@ const sizeMapping = {
|
|
|
86
88
|
medium: '30',
|
|
87
89
|
big: '40'
|
|
88
90
|
};
|
|
89
|
-
const SecondaryIconButton =
|
|
91
|
+
const SecondaryIconButton = _ref => {
|
|
90
92
|
var _context;
|
|
91
|
-
|
|
93
|
+
let _ref$color = _ref.color,
|
|
94
|
+
color = _ref$color === void 0 ? 'solid' : _ref$color,
|
|
95
|
+
_ref$type = _ref.type,
|
|
96
|
+
type = _ref$type === void 0 ? 'button' : _ref$type,
|
|
97
|
+
_ref$size = _ref.size,
|
|
98
|
+
size = _ref$size === void 0 ? '40' : _ref$size,
|
|
99
|
+
_ref$isDisabled = _ref.isDisabled,
|
|
100
|
+
isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
|
|
101
|
+
props = _objectWithoutProperties(_ref, _excluded);
|
|
102
|
+
const buttonAttributes = _objectSpread(_objectSpread({}, utils.filterInvalidAttributes(omit__default["default"](_objectSpread({
|
|
103
|
+
color,
|
|
104
|
+
type,
|
|
105
|
+
size,
|
|
106
|
+
isDisabled
|
|
107
|
+
}, props), propsToOmit))), {}, {
|
|
92
108
|
'data-track-component': 'SecondaryIconButton',
|
|
93
109
|
// if there is a divergence between `isDisabled` and `disabled`,
|
|
94
110
|
// we fall back to `isDisabled`
|
|
95
|
-
disabled:
|
|
111
|
+
disabled: isDisabled
|
|
96
112
|
});
|
|
97
|
-
utils.useWarning(!Boolean(_indexOfInstanceProperty__default["default"](_context = _Object$keys__default["default"](sizeMapping)).call(_context,
|
|
113
|
+
utils.useWarning(!Boolean(_indexOfInstanceProperty__default["default"](_context = _Object$keys__default["default"](sizeMapping)).call(_context, size) > -1), `SecondaryIconButton '${size}' value for 'size' property has been deprecated in favor of '${sizeMapping[size]}' Please update that value when using this component`);
|
|
98
114
|
return jsxRuntime.jsx(AccessibleButton__default["default"], {
|
|
99
115
|
as: props.as,
|
|
100
|
-
type:
|
|
116
|
+
type: type,
|
|
101
117
|
buttonAttributes: buttonAttributes,
|
|
102
118
|
label: props.label,
|
|
103
119
|
onClick: props.onClick,
|
|
104
|
-
isDisabled:
|
|
105
|
-
css: getBaseStyles(
|
|
120
|
+
isDisabled: isDisabled,
|
|
121
|
+
css: getBaseStyles(_objectSpread({
|
|
122
|
+
color,
|
|
123
|
+
type,
|
|
124
|
+
size,
|
|
125
|
+
isDisabled
|
|
126
|
+
}, props)),
|
|
106
127
|
children: props.icon && /*#__PURE__*/react$1.cloneElement(props.icon, {
|
|
107
|
-
size:
|
|
128
|
+
size: size
|
|
108
129
|
})
|
|
109
130
|
});
|
|
110
131
|
};
|
|
@@ -119,16 +140,10 @@ SecondaryIconButton.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
119
140
|
onClick: _pt__default["default"].func
|
|
120
141
|
} : {};
|
|
121
142
|
SecondaryIconButton.displayName = 'SecondaryIconButton';
|
|
122
|
-
SecondaryIconButton.defaultProps = {
|
|
123
|
-
color: 'solid',
|
|
124
|
-
type: 'button',
|
|
125
|
-
size: '40',
|
|
126
|
-
isDisabled: false
|
|
127
|
-
};
|
|
128
143
|
var SecondaryIconButton$1 = SecondaryIconButton;
|
|
129
144
|
|
|
130
145
|
// NOTE: This string will be replaced on build time with the package version.
|
|
131
|
-
var version = "19.
|
|
146
|
+
var version = "19.21.0";
|
|
132
147
|
|
|
133
148
|
exports["default"] = SecondaryIconButton$1;
|
|
134
149
|
exports.version = version;
|
|
@@ -10,6 +10,7 @@ var _Object$getOwnPropertyDescriptors = require('@babel/runtime-corejs3/core-js-
|
|
|
10
10
|
var _Object$defineProperties = require('@babel/runtime-corejs3/core-js-stable/object/define-properties');
|
|
11
11
|
var _Object$defineProperty = require('@babel/runtime-corejs3/core-js-stable/object/define-property');
|
|
12
12
|
var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
|
|
13
|
+
var _objectWithoutProperties = require('@babel/runtime-corejs3/helpers/objectWithoutProperties');
|
|
13
14
|
require('prop-types');
|
|
14
15
|
var _indexOfInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/index-of');
|
|
15
16
|
var _Object$keys = require('@babel/runtime-corejs3/core-js-stable/object/keys');
|
|
@@ -59,6 +60,7 @@ const getBaseStyles = props => {
|
|
|
59
60
|
return [_ref, getColorStyle(props), getDisabledStyle()];
|
|
60
61
|
};
|
|
61
62
|
|
|
63
|
+
const _excluded = ["color", "type", "size", "isDisabled"];
|
|
62
64
|
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; }
|
|
63
65
|
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context2, _context3; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context2 = ownKeys(Object(t), !0)).call(_context2, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context3 = ownKeys(Object(t))).call(_context3, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
|
|
64
66
|
const propsToOmit = ['type'];
|
|
@@ -79,40 +81,53 @@ const sizeMapping = {
|
|
|
79
81
|
medium: '30',
|
|
80
82
|
big: '40'
|
|
81
83
|
};
|
|
82
|
-
const SecondaryIconButton =
|
|
84
|
+
const SecondaryIconButton = _ref => {
|
|
83
85
|
var _context;
|
|
84
|
-
|
|
86
|
+
let _ref$color = _ref.color,
|
|
87
|
+
color = _ref$color === void 0 ? 'solid' : _ref$color,
|
|
88
|
+
_ref$type = _ref.type,
|
|
89
|
+
type = _ref$type === void 0 ? 'button' : _ref$type,
|
|
90
|
+
_ref$size = _ref.size,
|
|
91
|
+
size = _ref$size === void 0 ? '40' : _ref$size,
|
|
92
|
+
_ref$isDisabled = _ref.isDisabled,
|
|
93
|
+
isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
|
|
94
|
+
props = _objectWithoutProperties(_ref, _excluded);
|
|
95
|
+
const buttonAttributes = _objectSpread(_objectSpread({}, utils.filterInvalidAttributes(omit__default["default"](_objectSpread({
|
|
96
|
+
color,
|
|
97
|
+
type,
|
|
98
|
+
size,
|
|
99
|
+
isDisabled
|
|
100
|
+
}, props), propsToOmit))), {}, {
|
|
85
101
|
'data-track-component': 'SecondaryIconButton',
|
|
86
102
|
// if there is a divergence between `isDisabled` and `disabled`,
|
|
87
103
|
// we fall back to `isDisabled`
|
|
88
|
-
disabled:
|
|
104
|
+
disabled: isDisabled
|
|
89
105
|
});
|
|
90
|
-
utils.useWarning(!Boolean(_indexOfInstanceProperty__default["default"](_context = _Object$keys__default["default"](sizeMapping)).call(_context,
|
|
106
|
+
utils.useWarning(!Boolean(_indexOfInstanceProperty__default["default"](_context = _Object$keys__default["default"](sizeMapping)).call(_context, size) > -1), `SecondaryIconButton '${size}' value for 'size' property has been deprecated in favor of '${sizeMapping[size]}' Please update that value when using this component`);
|
|
91
107
|
return jsxRuntime.jsx(AccessibleButton__default["default"], {
|
|
92
108
|
as: props.as,
|
|
93
|
-
type:
|
|
109
|
+
type: type,
|
|
94
110
|
buttonAttributes: buttonAttributes,
|
|
95
111
|
label: props.label,
|
|
96
112
|
onClick: props.onClick,
|
|
97
|
-
isDisabled:
|
|
98
|
-
css: getBaseStyles(
|
|
113
|
+
isDisabled: isDisabled,
|
|
114
|
+
css: getBaseStyles(_objectSpread({
|
|
115
|
+
color,
|
|
116
|
+
type,
|
|
117
|
+
size,
|
|
118
|
+
isDisabled
|
|
119
|
+
}, props)),
|
|
99
120
|
children: props.icon && /*#__PURE__*/react$1.cloneElement(props.icon, {
|
|
100
|
-
size:
|
|
121
|
+
size: size
|
|
101
122
|
})
|
|
102
123
|
});
|
|
103
124
|
};
|
|
104
125
|
SecondaryIconButton.propTypes = {};
|
|
105
126
|
SecondaryIconButton.displayName = 'SecondaryIconButton';
|
|
106
|
-
SecondaryIconButton.defaultProps = {
|
|
107
|
-
color: 'solid',
|
|
108
|
-
type: 'button',
|
|
109
|
-
size: '40',
|
|
110
|
-
isDisabled: false
|
|
111
|
-
};
|
|
112
127
|
var SecondaryIconButton$1 = SecondaryIconButton;
|
|
113
128
|
|
|
114
129
|
// NOTE: This string will be replaced on build time with the package version.
|
|
115
|
-
var version = "19.
|
|
130
|
+
var version = "19.21.0";
|
|
116
131
|
|
|
117
132
|
exports["default"] = SecondaryIconButton$1;
|
|
118
133
|
exports.version = version;
|
|
@@ -6,6 +6,7 @@ import _Object$getOwnPropertyDescriptors from '@babel/runtime-corejs3/core-js-st
|
|
|
6
6
|
import _Object$defineProperties from '@babel/runtime-corejs3/core-js-stable/object/define-properties';
|
|
7
7
|
import _Object$defineProperty from '@babel/runtime-corejs3/core-js-stable/object/define-property';
|
|
8
8
|
import _defineProperty from '@babel/runtime-corejs3/helpers/esm/defineProperty';
|
|
9
|
+
import _objectWithoutProperties from '@babel/runtime-corejs3/helpers/esm/objectWithoutProperties';
|
|
9
10
|
import _pt from 'prop-types';
|
|
10
11
|
import _indexOfInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/index-of';
|
|
11
12
|
import _Object$keys from '@babel/runtime-corejs3/core-js-stable/object/keys';
|
|
@@ -47,6 +48,7 @@ const getBaseStyles = props => {
|
|
|
47
48
|
return [_ref, getColorStyle(props), getDisabledStyle()];
|
|
48
49
|
};
|
|
49
50
|
|
|
51
|
+
const _excluded = ["color", "type", "size", "isDisabled"];
|
|
50
52
|
function ownKeys(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
51
53
|
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context2, _context3; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context2 = ownKeys(Object(t), !0)).call(_context2, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context3 = ownKeys(Object(t))).call(_context3, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
52
54
|
const propsToOmit = ['type'];
|
|
@@ -67,25 +69,44 @@ const sizeMapping = {
|
|
|
67
69
|
medium: '30',
|
|
68
70
|
big: '40'
|
|
69
71
|
};
|
|
70
|
-
const SecondaryIconButton =
|
|
72
|
+
const SecondaryIconButton = _ref => {
|
|
71
73
|
var _context;
|
|
72
|
-
|
|
74
|
+
let _ref$color = _ref.color,
|
|
75
|
+
color = _ref$color === void 0 ? 'solid' : _ref$color,
|
|
76
|
+
_ref$type = _ref.type,
|
|
77
|
+
type = _ref$type === void 0 ? 'button' : _ref$type,
|
|
78
|
+
_ref$size = _ref.size,
|
|
79
|
+
size = _ref$size === void 0 ? '40' : _ref$size,
|
|
80
|
+
_ref$isDisabled = _ref.isDisabled,
|
|
81
|
+
isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
|
|
82
|
+
props = _objectWithoutProperties(_ref, _excluded);
|
|
83
|
+
const buttonAttributes = _objectSpread(_objectSpread({}, filterInvalidAttributes(omit(_objectSpread({
|
|
84
|
+
color,
|
|
85
|
+
type,
|
|
86
|
+
size,
|
|
87
|
+
isDisabled
|
|
88
|
+
}, props), propsToOmit))), {}, {
|
|
73
89
|
'data-track-component': 'SecondaryIconButton',
|
|
74
90
|
// if there is a divergence between `isDisabled` and `disabled`,
|
|
75
91
|
// we fall back to `isDisabled`
|
|
76
|
-
disabled:
|
|
92
|
+
disabled: isDisabled
|
|
77
93
|
});
|
|
78
|
-
useWarning(!Boolean(_indexOfInstanceProperty(_context = _Object$keys(sizeMapping)).call(_context,
|
|
94
|
+
useWarning(!Boolean(_indexOfInstanceProperty(_context = _Object$keys(sizeMapping)).call(_context, size) > -1), `SecondaryIconButton '${size}' value for 'size' property has been deprecated in favor of '${sizeMapping[size]}' Please update that value when using this component`);
|
|
79
95
|
return jsx(AccessibleButton, {
|
|
80
96
|
as: props.as,
|
|
81
|
-
type:
|
|
97
|
+
type: type,
|
|
82
98
|
buttonAttributes: buttonAttributes,
|
|
83
99
|
label: props.label,
|
|
84
100
|
onClick: props.onClick,
|
|
85
|
-
isDisabled:
|
|
86
|
-
css: getBaseStyles(
|
|
101
|
+
isDisabled: isDisabled,
|
|
102
|
+
css: getBaseStyles(_objectSpread({
|
|
103
|
+
color,
|
|
104
|
+
type,
|
|
105
|
+
size,
|
|
106
|
+
isDisabled
|
|
107
|
+
}, props)),
|
|
87
108
|
children: props.icon && /*#__PURE__*/cloneElement(props.icon, {
|
|
88
|
-
size:
|
|
109
|
+
size: size
|
|
89
110
|
})
|
|
90
111
|
});
|
|
91
112
|
};
|
|
@@ -100,15 +121,9 @@ SecondaryIconButton.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
100
121
|
onClick: _pt.func
|
|
101
122
|
} : {};
|
|
102
123
|
SecondaryIconButton.displayName = 'SecondaryIconButton';
|
|
103
|
-
SecondaryIconButton.defaultProps = {
|
|
104
|
-
color: 'solid',
|
|
105
|
-
type: 'button',
|
|
106
|
-
size: '40',
|
|
107
|
-
isDisabled: false
|
|
108
|
-
};
|
|
109
124
|
var SecondaryIconButton$1 = SecondaryIconButton;
|
|
110
125
|
|
|
111
126
|
// NOTE: This string will be replaced on build time with the package version.
|
|
112
|
-
var version = "19.
|
|
127
|
+
var version = "19.21.0";
|
|
113
128
|
|
|
114
129
|
export { SecondaryIconButton$1 as default, version };
|
|
@@ -49,13 +49,7 @@ export type TSecondaryButtonIconProps<TStringOrComponent extends ElementType = '
|
|
|
49
49
|
* passed to `<SecondaryIconButton>`: <SecondaryIconButton as={Link} to="/foo" label="Foo" />.
|
|
50
50
|
*/ ComponentPropsWithRef<TStringOrComponent>;
|
|
51
51
|
declare const SecondaryIconButton: {
|
|
52
|
-
<TStringOrComponent extends ElementType = "button">(props: TSecondaryButtonIconProps<TStringOrComponent>): import("@emotion/react/jsx-runtime").JSX.Element;
|
|
52
|
+
<TStringOrComponent extends ElementType = "button">({ color, type, size, isDisabled, ...props }: TSecondaryButtonIconProps<TStringOrComponent>): import("@emotion/react/jsx-runtime").JSX.Element;
|
|
53
53
|
displayName: string;
|
|
54
|
-
defaultProps: {
|
|
55
|
-
color: string;
|
|
56
|
-
type: string;
|
|
57
|
-
size: string;
|
|
58
|
-
isDisabled: boolean;
|
|
59
|
-
};
|
|
60
54
|
};
|
|
61
55
|
export default SecondaryIconButton;
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@commercetools-uikit/secondary-icon-button",
|
|
3
3
|
"description": "Secondary Icon Buttons are \"icon-only\" buttons and a restricted version of the `<IconButton>`. They trigger an action when clicked (`onClick` prop). You must also pass a label for accessibility reasons.",
|
|
4
|
-
"version": "19.
|
|
4
|
+
"version": "19.21.0",
|
|
5
5
|
"bugs": "https://github.com/commercetools/ui-kit/issues",
|
|
6
6
|
"repository": {
|
|
7
7
|
"type": "git",
|
|
@@ -21,11 +21,11 @@
|
|
|
21
21
|
"dependencies": {
|
|
22
22
|
"@babel/runtime": "^7.20.13",
|
|
23
23
|
"@babel/runtime-corejs3": "^7.20.13",
|
|
24
|
-
"@commercetools-uikit/accessible-button": "19.
|
|
25
|
-
"@commercetools-uikit/design-system": "19.
|
|
26
|
-
"@commercetools-uikit/spacings": "19.
|
|
27
|
-
"@commercetools-uikit/text": "19.
|
|
28
|
-
"@commercetools-uikit/utils": "19.
|
|
24
|
+
"@commercetools-uikit/accessible-button": "19.21.0",
|
|
25
|
+
"@commercetools-uikit/design-system": "19.21.0",
|
|
26
|
+
"@commercetools-uikit/spacings": "19.21.0",
|
|
27
|
+
"@commercetools-uikit/text": "19.21.0",
|
|
28
|
+
"@commercetools-uikit/utils": "19.21.0",
|
|
29
29
|
"@emotion/react": "^11.10.5",
|
|
30
30
|
"@emotion/styled": "^11.10.5",
|
|
31
31
|
"lodash": "4.17.21",
|