@commercetools-uikit/primary-button 19.4.0 → 19.6.0

package/dist/commercetools-uikit-primary-button.cjs.prod.js

@@ -2,7 +2,6 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _Object$keys = require('@babel/runtime-corejs3/core-js-stable/object/keys');
 var _Object$getOwnPropertySymbols = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols');
 var _filterInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/filter');
 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
 var _Object$defineProperty = require('@babel/runtime-corejs3/core-js-stable/object/define-property');
 var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
 require('prop-types');
+var _indexOfInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/index-of');
+var _Object$keys = require('@babel/runtime-corejs3/core-js-stable/object/keys');
+var _concatInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/concat');
 var react$1 = require('react');
 var omit = require('lodash/omit');
 var react = require('@emotion/react');
@@ -23,7 +25,6 @@ var jsxRuntime = require('@emotion/react/jsx-runtime');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 
-var _Object$keys__default = /*#__PURE__*/_interopDefault(_Object$keys);
 var _Object$getOwnPropertySymbols__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertySymbols);
 var _filterInstanceProperty__default = /*#__PURE__*/_interopDefault(_filterInstanceProperty);
 var _Object$getOwnPropertyDescriptor__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertyDescriptor);
@@ -31,6 +32,9 @@ var _forEachInstanceProperty__default = /*#__PURE__*/_interopDefault(_forEachIns
 var _Object$getOwnPropertyDescriptors__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertyDescriptors);
 var _Object$defineProperties__default = /*#__PURE__*/_interopDefault(_Object$defineProperties);
 var _Object$defineProperty__default = /*#__PURE__*/_interopDefault(_Object$defineProperty);
+var _indexOfInstanceProperty__default = /*#__PURE__*/_interopDefault(_indexOfInstanceProperty);
+var _Object$keys__default = /*#__PURE__*/_interopDefault(_Object$keys);
+var _concatInstanceProperty__default = /*#__PURE__*/_interopDefault(_concatInstanceProperty);
 var omit__default = /*#__PURE__*/_interopDefault(omit);
 var Inline__default = /*#__PURE__*/_interopDefault(Inline);
 var AccessibleButton__default = /*#__PURE__*/_interopDefault(AccessibleButton);
@@ -38,11 +42,13 @@ var AccessibleButton__default = /*#__PURE__*/_interopDefault(AccessibleButton);
 const getSizeStyles = size => {
   switch (size) {
     // rendering the same style for now to not introduce a breaking change
+    case '10':
     case 'small':
     case 'medium':
-      return /*#__PURE__*/react.css("height:", designSystem.designTokens.heightForButtonAsMedium, ";" + ("" ), "" );
+      return /*#__PURE__*/react.css("height:", designSystem.designTokens.heightForButtonAs30, ";" + ("" ), "" );
+    case '20':
     case 'big':
-      return /*#__PURE__*/react.css("height:", designSystem.designTokens.heightForButtonAsBig, ";" + ("" ), "" );
+      return /*#__PURE__*/react.css("height:", designSystem.designTokens.heightForButtonAs40, ";" + ("" ), "" );
     default:
       return /*#__PURE__*/react.css("" , "" );
   }
@@ -106,15 +112,33 @@ const getButtonStyles = (isDisabled, isActive, tone, size) => {
 };
 
 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; }
-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; }
+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; }
 const propsToOmit = ['type'];
+
+/**
+ * @deprecated Use sizes from `TSizes` instead.
+ */
+
+/**
+ * Available sizes for the PrimaryButton.
+ */
+
+/**
+ * Mapping of legacy sizes to new sizes.
+ */
+const sizeMapping = {
+  small: '10',
+  medium: '10',
+  big: '20'
+};
 const defaultProps = {
   type: 'button',
-  size: 'big',
+  size: '20',
   isToggleButton: false,
   tone: 'primary'
 };
 const PrimaryButton = props => {
+  var _context, _context2;
   const buttonAttributes = _objectSpread(_objectSpread({
     'data-track-component': 'PrimaryButton'
   }, utils.filterInvalidAttributes(omit__default["default"](props, propsToOmit))), {}, {
@@ -122,7 +146,7 @@ const PrimaryButton = props => {
     // we fall back to `isDisabled`
     disabled: props.isDisabled
   });
-  utils.useWarning(!Boolean(props.size === 'small'), 'PrimaryButton `small` value for `size` property has been renamed to `medium`. Please update that value when using this component');
+  utils.useWarning(!Boolean(_indexOfInstanceProperty__default["default"](_context = _Object$keys__default["default"](sizeMapping)).call(_context, props.size) > -1), _concatInstanceProperty__default["default"](_context2 = "PrimaryButton '".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"));
   const isActive = Boolean(props.isToggleButton && props.isToggled);
   return jsxRuntime.jsx(AccessibleButton__default["default"], {
     as: props.as,
@@ -141,7 +165,7 @@ const PrimaryButton = props => {
         css: /*#__PURE__*/react.css("margin:0 ", designSystem.designTokens.spacing10, " 0 0;display:flex;align-items:center;justify-content:center;" + ("" ), "" ),
         children: props.iconLeft && /*#__PURE__*/react$1.cloneElement(props.iconLeft, {
           color: props.isDisabled ? 'neutral60' : 'surface',
-          size: props.size === 'big' ? 'big' : 'medium'
+          size: props.size === 'big' || props.size === '20' ? '40' : '20'
         })
       }), jsxRuntime.jsx("span", {
         children: props.label
@@ -155,7 +179,7 @@ PrimaryButton.displayName = 'PrimaryButton';
 var PrimaryButton$1 = PrimaryButton;
 
 // NOTE: This string will be replaced on build time with the package version.
-var version = "19.4.0";
+var version = "19.6.0";
 
 exports["default"] = PrimaryButton$1;
 exports.version = version;