@commercetools-uikit/secondary-button 19.4.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 (5) hide show
  1. package/dist/commercetools-uikit-secondary-button.cjs.dev.js +38 -22
  2. package/dist/commercetools-uikit-secondary-button.cjs.prod.js +25 -9
  3. package/dist/commercetools-uikit-secondary-button.esm.js +36 -22
  4. package/dist/declarations/src/secondary-button.d.ts +4 -2
  5. package/package.json +6 -6
package/dist/commercetools-uikit-secondary-button.cjs.prod.js CHANGED
@@ -2,7 +2,6 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- var _Object$keys = require('@babel/runtime-corejs3/core-js-stable/object/keys');
6
5
  var _Object$getOwnPropertySymbols = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols');
7
6
  var _filterInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/filter');
8
7
  var _Object$getOwnPropertyDescriptor = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor');
@@ -12,6 +11,9 @@ var _Object$defineProperties = require('@babel/runtime-corejs3/core-js-stable/ob
12
11
  var _Object$defineProperty = require('@babel/runtime-corejs3/core-js-stable/object/define-property');
13
12
  var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
14
13
  require('prop-types');
14
+ var _indexOfInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/index-of');
15
+ var _Object$keys = require('@babel/runtime-corejs3/core-js-stable/object/keys');
16
+ var _concatInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/concat');
15
17
  var react$1 = require('react');
16
18
  var reactRouterDom = require('react-router-dom');
17
19
  var react = require('@emotion/react');
@@ -23,7 +25,6 @@ var jsxRuntime = require('@emotion/react/jsx-runtime');
23
25
 
24
26
  function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
25
27
 
26
- var _Object$keys__default = /*#__PURE__*/_interopDefault(_Object$keys);
27
28
  var _Object$getOwnPropertySymbols__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertySymbols);
28
29
  var _filterInstanceProperty__default = /*#__PURE__*/_interopDefault(_filterInstanceProperty);
29
30
  var _Object$getOwnPropertyDescriptor__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertyDescriptor);
@@ -31,6 +32,9 @@ var _forEachInstanceProperty__default = /*#__PURE__*/_interopDefault(_forEachIns
31
32
  var _Object$getOwnPropertyDescriptors__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertyDescriptors);
32
33
  var _Object$defineProperties__default = /*#__PURE__*/_interopDefault(_Object$defineProperties);
33
34
  var _Object$defineProperty__default = /*#__PURE__*/_interopDefault(_Object$defineProperty);
35
+ var _indexOfInstanceProperty__default = /*#__PURE__*/_interopDefault(_indexOfInstanceProperty);
36
+ var _Object$keys__default = /*#__PURE__*/_interopDefault(_Object$keys);
37
+ var _concatInstanceProperty__default = /*#__PURE__*/_interopDefault(_concatInstanceProperty);
34
38
  var Inline__default = /*#__PURE__*/_interopDefault(Inline);
35
39
  var AccessibleButton__default = /*#__PURE__*/_interopDefault(AccessibleButton);
36
40
 
@@ -63,10 +67,12 @@ const getThemeStyles = theme => {
63
67
  };
64
68
  const getSizeStyles = size => {
65
69
  switch (size) {
70
+ case '10':
66
71
  case 'medium':
67
- return /*#__PURE__*/react.css("height:", designSystem.designTokens.heightForButtonAsMedium, ";" + ("" ), "" );
72
+ return /*#__PURE__*/react.css("height:", designSystem.designTokens.heightForButtonAs30, ";" + ("" ), "" );
73
+ case '20':
68
74
  case 'big':
69
- return /*#__PURE__*/react.css("height:", designSystem.designTokens.heightForButtonAsBig, ";" + ("" ), "" );
75
+ return /*#__PURE__*/react.css("height:", designSystem.designTokens.heightForButtonAs40, ";" + ("" ), "" );
70
76
  default:
71
77
  return /*#__PURE__*/react.css("" , "" );
72
78
  }
@@ -81,7 +87,15 @@ const getToneStyles = (tone, isDisabled, isActive) => {
81
87
  };
82
88
 
83
89
  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; }
84
- 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; }
90
+ 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; }
91
+ /**
92
+ * Mapping of legacy sizes to new sizes.
93
+ */
94
+ const sizeMapping = {
95
+ small: '10',
96
+ medium: '10',
97
+ big: '20'
98
+ };
85
99
  // Gets the color which the icon sho√uld have based on context of button's state/cursor behavior
86
100
  const getIconColor = props => {
87
101
  var _props$iconLeft;
@@ -97,10 +111,11 @@ const defaultProps = {
97
111
  type: 'button',
98
112
  theme: 'default',
99
113
  tone: 'secondary',
100
- size: 'big',
114
+ size: '20',
101
115
  isToggleButton: false
102
116
  };
103
117
  const SecondaryButton = props => {
118
+ var _context, _context2;
104
119
  const isActive = Boolean(props.isToggleButton && props.isToggled);
105
120
  const shouldUseLinkTag = !props.isDisabled && Boolean(props.to);
106
121
  const buttonAttributes = _objectSpread(_objectSpread({
@@ -108,7 +123,8 @@ const SecondaryButton = props => {
108
123
  }, utils.filterInvalidAttributes(props)), shouldUseLinkTag ? {
109
124
  to: props.to
110
125
  } : {});
111
- const containerStyles = [/*#__PURE__*/react.css("display:flex;align-items:center;padding:0 ", designSystem.designTokens.spacing30, ";height:", designSystem.designTokens.heightForButtonAsBig, ";" + ("" ), "" ), /*#__PURE__*/react.css("display:inline-flex;background-color:", designSystem.designTokens.colorSurface, ";border:1px solid ", designSystem.designTokens.colorNeutral, ";border-radius:", designSystem.designTokens.borderRadius4, ";box-shadow:", designSystem.designTokens.shadow0, ";color:", designSystem.designTokens.colorSolid, ";transition:background-color ", designSystem.designTokens.transitionLinear80Ms, ",box-shadow ", designSystem.designTokens.transitionEaseinout150Ms, ";" + ("" ), "" ), getThemeStyles(props.theme), getStateStyles(props.isDisabled, isActive, props.tone), getSizeStyles(props.size), getToneStyles(props.tone, props.isDisabled, isActive)];
126
+ utils.useWarning(!Boolean(_indexOfInstanceProperty__default["default"](_context = _Object$keys__default["default"](sizeMapping)).call(_context, props.size) > -1), _concatInstanceProperty__default["default"](_context2 = "SecondaryButton '".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"));
127
+ const containerStyles = [/*#__PURE__*/react.css("display:flex;align-items:center;padding:0 ", designSystem.designTokens.spacing30, ";height:", designSystem.designTokens.heightForButtonAs40, ";" + ("" ), "" ), /*#__PURE__*/react.css("display:inline-flex;background-color:", designSystem.designTokens.colorSurface, ";border:1px solid ", designSystem.designTokens.colorNeutral, ";border-radius:", designSystem.designTokens.borderRadius4, ";box-shadow:", designSystem.designTokens.shadow0, ";color:", designSystem.designTokens.colorSolid, ";transition:background-color ", designSystem.designTokens.transitionLinear80Ms, ",box-shadow ", designSystem.designTokens.transitionEaseinout150Ms, ";" + ("" ), "" ), getThemeStyles(props.theme), getStateStyles(props.isDisabled, isActive, props.tone), getSizeStyles(props.size), getToneStyles(props.tone, props.isDisabled, isActive)];
112
128
  return jsxRuntime.jsx(AccessibleButton__default["default"], {
113
129
  as: shouldUseLinkTag ? reactRouterDom.Link : props.as,
114
130
  type: props.type,
@@ -126,7 +142,7 @@ const SecondaryButton = props => {
126
142
  css: /*#__PURE__*/react.css("margin:0 ", designSystem.designTokens.spacing10, " 0 0;display:flex;align-items:center;justify-content:center;" + ("" ), "" ),
127
143
  children: props.iconLeft && /*#__PURE__*/react$1.cloneElement(props.iconLeft, {
128
144
  color: getIconColor(props),
129
- size: props.size === 'big' ? 'big' : 'medium'
145
+ size: props.size === 'big' || props.size === '20' ? '40' : '20'
130
146
  })
131
147
  }), jsxRuntime.jsx("span", {
132
148
  children: props.label
@@ -140,7 +156,7 @@ SecondaryButton.defaultProps = defaultProps;
140
156
  var SecondaryButton$1 = SecondaryButton;
141
157
 
142
158
  // NOTE: This string will be replaced on build time with the package version.
143
- var version = "19.4.0";
159
+ var version = "19.6.0";
144
160
 
145
161
  exports["default"] = SecondaryButton$1;
146
162
  exports.version = version;