@commercetools-uikit/primary-button 17.0.1 → 18.0.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-primary-button.cjs.dev.js +62 -17
  2. package/dist/commercetools-uikit-primary-button.cjs.prod.js +45 -16
  3. package/dist/commercetools-uikit-primary-button.esm.js +62 -17
  4. package/dist/declarations/src/primary-button.d.ts +1 -1
  5. package/package.json +6 -6
package/dist/commercetools-uikit-primary-button.cjs.prod.js CHANGED
@@ -35,53 +35,82 @@ var omit__default = /*#__PURE__*/_interopDefault(omit);
35
35
  var Inline__default = /*#__PURE__*/_interopDefault(Inline);
36
36
  var AccessibleButton__default = /*#__PURE__*/_interopDefault(AccessibleButton);
37
37
 
38
- /* eslint-disable import/prefer-default-export */
39
38
  const getSizeStyles = size => {
40
39
  switch (size) {
41
40
  // rendering the same style for now to not introduce a breaking change
42
41
  case 'small':
43
42
  case 'medium':
44
- return /*#__PURE__*/react.css("height:", designSystem.designTokens.heightForButtonAsMedium, ";border-radius:", designSystem.designTokens.borderRadiusForButtonAsMedium, ";padding:", designSystem.designTokens.paddingForButtonAsMedium, ";" + ("" ), "" );
43
+ return /*#__PURE__*/react.css("height:", designSystem.designTokens.heightForButtonAsMedium, ";border-radius:", designSystem.designTokens.borderRadiusForButtonAsMedium, ";" + ("" ), "" );
45
44
  case 'big':
46
- return /*#__PURE__*/react.css("height:", designSystem.designTokens.heightForButtonAsBig, ";border-radius:", designSystem.designTokens.borderRadiusForButtonAsBig, ";padding:", designSystem.designTokens.paddingForButtonAsBig, ";" + ("" ), "" );
45
+ return /*#__PURE__*/react.css("height:", designSystem.designTokens.heightForButtonAsBig, ";border-radius:", designSystem.designTokens.borderRadiusForButtonAsBig, ";" + ("" ), "" );
47
46
  default:
48
47
  return /*#__PURE__*/react.css("" , "" );
49
48
  }
50
49
  };
50
+ var _ref = {
51
+ name: "vs1rjk",
52
+ styles: "background-color:#b3003e;&:focus,&:hover{background-color:#cc0047;}"
53
+ } ;
54
+ var _ref2 = {
55
+ name: "dx7qb5",
56
+ styles: "background-color:#dc630a;&:focus,&:hover{background-color:#e7680d;}"
57
+ } ;
58
+ var _ref3 = {
59
+ name: "235xut",
60
+ styles: "background-color:#15a390;&:focus,&:hover{background-color:#17ab97;}"
61
+ } ;
51
62
  const getButtonStyles = (isDisabled, isActive, tone, size) => {
52
- const baseStyles = /*#__PURE__*/react.css("align-items:center;color:", designSystem.designTokens.colorSurface, ";transition:background-color ", designSystem.designTokens.transitionLinear80Ms, ";", getSizeStyles(size), ";" + ("" ), "" );
63
+ const baseStyles = /*#__PURE__*/react.css("align-items:center;color:", designSystem.designTokens.colorSurface, ";transition:background-color ", designSystem.designTokens.transitionLinear80Ms, ";padding:", designSystem.designTokens.paddingForButton, ";", getSizeStyles(size), ";" + ("" ), "" );
53
64
  // "disabled" takes precendece over "active"
54
65
  if (isDisabled) {
55
- return [baseStyles, /*#__PURE__*/react.css("&,&:active,&:hover{background-color:", designSystem.designTokens.backgroundColorForButtonWhenDisabled, ";color:", designSystem.designTokens.colorNeutral60, ";box-shadow:", designSystem.designTokens.shadowForButtonWhenDisabled, ";}" + ("" ), "" )];
66
+ return [baseStyles, /*#__PURE__*/react.css("&,&:active,&:hover{background-color:", designSystem.designTokens.backgroundColorForButtonWhenDisabled, ";color:", designSystem.designTokens.colorNeutral60, ";box-shadow:", designSystem.designTokens.shadow0, ";}" + ("" ), "" )];
56
67
  }
57
68
  if (isActive) {
58
- const baseActiveStyles = [baseStyles, /*#__PURE__*/react.css("box-shadow:", designSystem.designTokens.shadowForButtonWhenActive, ";&:hover,&:focus{box-shadow:", designSystem.designTokens.shadowForButtonWhenFocused, ";}" + ("" ), "" )];
69
+ const baseActiveStyles = [baseStyles, /*#__PURE__*/react.css("box-shadow:", designSystem.designTokens.shadow0, ";&:hover,&:focus{box-shadow:", designSystem.designTokens.shadow0, ";}" + ("" ), "" )];
59
70
  switch (tone) {
60
71
  case 'primary':
61
- return [baseActiveStyles, /*#__PURE__*/react.css("background-color:", designSystem.designTokens.backgroundColorForButtonAsPrimaryWhenActive, ";&:focus,&:hover{background-color:", designSystem.designTokens.backgroundColorForButtonAsPrimaryWhenHovered, ";}" + ("" ), "" )];
72
+ // TODO: This custom colors where itroduced in the Merchant Center redign 2023
73
+ // We need to check with designers if we want to introduce them in our color palette
74
+ // They are 'color-primary' with 10% and 5% black opacity
75
+ return [baseActiveStyles, _ref3];
62
76
  case 'urgent':
63
- return [baseActiveStyles, /*#__PURE__*/react.css("background-color:", designSystem.designTokens.backgroundColorForButtonAsUrgentWhenActive, ";&:focus,&:hover{background-color:", designSystem.designTokens.backgroundColorForButtonAsUrgentWhenHovered, ";}" + ("" ), "" )];
77
+ // TODO: This custom colors where itroduced in the Merchant Center redign 2023
78
+ // We need to check with designers if we want to introduce them in our color palette
79
+ // They are 'color-warning' with 10% and 5% black opacity
80
+ return [baseActiveStyles, _ref2];
64
81
  case 'critical':
65
- return [baseActiveStyles, /*#__PURE__*/react.css("background-color:", designSystem.designTokens.backgroundColorForButtonAsCriticalWhenActive, ";&:focus,&:hover{background-color:", designSystem.designTokens.backgroundColorForButtonAsCriticalWhenHovered, ";}" + ("" ), "" )];
82
+ // TODO: This custom colors where itroduced in the Merchant Center redign 2023
83
+ // We need to check with designers if we want to introduce them in our color palette
84
+ // They are 'color-error' with 10% and 5% black opacity
85
+ return [baseActiveStyles, _ref];
66
86
  default:
67
87
  return baseActiveStyles;
68
88
  }
69
89
  }
70
- const baseDefaultStyles = [baseStyles, /*#__PURE__*/react.css("box-shadow:", designSystem.designTokens.shadowForButton, ";&:hover,&:focus{box-shadow:", designSystem.designTokens.shadowForButtonWhenFocused, ";}&:active{box-shadow:", designSystem.designTokens.shadowForButtonWhenActive, ";}" + ("" ), "" )];
90
+ const baseDefaultStyles = [baseStyles, /*#__PURE__*/react.css("box-shadow:", designSystem.designTokens.shadow0, ";&:hover,&:focus{box-shadow:", designSystem.designTokens.shadow0, ";}&:active{box-shadow:", designSystem.designTokens.shadow0, ";}" + ("" ), "" )];
71
91
  switch (tone) {
72
92
  case 'primary':
73
- return [baseDefaultStyles, /*#__PURE__*/react.css("background-color:", designSystem.designTokens.colorPrimary, ";&:focus,&:hover{background-color:", designSystem.designTokens.backgroundColorForButtonAsPrimaryWhenHovered, ";}&:active{background-color:", designSystem.designTokens.backgroundColorForButtonAsPrimaryWhenActive, ";}" + ("" ), "" )];
93
+ // TODO: This custom colors where itroduced in the Merchant Center redign 2023
94
+ // We need to check with designers if we want to introduce them in our color palette
95
+ // They are 'color-primary' with 10% and 5% black opacity
96
+ return [baseDefaultStyles, /*#__PURE__*/react.css("background-color:", designSystem.designTokens.colorPrimary, ";&:focus,&:hover{background-color:#17ab97;}&:active{background-color:#15a390;}" + ("" ), "" )];
74
97
  case 'urgent':
75
- return [baseDefaultStyles, /*#__PURE__*/react.css("background-color:", designSystem.designTokens.colorWarning, ";&:focus,&:hover{background-color:", designSystem.designTokens.backgroundColorForButtonAsUrgentWhenHovered, ";}&:active{background-color:", designSystem.designTokens.backgroundColorForButtonAsUrgentWhenActive, ";}" + ("" ), "" )];
98
+ // TODO: This custom colors where itroduced in the Merchant Center redign 2023
99
+ // We need to check with designers if we want to introduce them in our color palette
100
+ // They are 'color-warning' with 10% and 5% black opacity
101
+ return [baseDefaultStyles, /*#__PURE__*/react.css("background-color:", designSystem.designTokens.colorWarning, ";&:focus,&:hover{background-color:#e7680d;}&:active{background-color:#dc630a;}" + ("" ), "" )];
76
102
  case 'critical':
77
- return [baseDefaultStyles, /*#__PURE__*/react.css("background-color:", designSystem.designTokens.colorError, ";&:focus,&:hover{background-color:", designSystem.designTokens.backgroundColorForButtonAsCriticalWhenHovered, ";}&:active{background-color:", designSystem.designTokens.backgroundColorForButtonAsCriticalWhenActive, ";}" + ("" ), "" )];
103
+ // TODO: These custom colors where itroduced in the Merchant Center redign 2023
104
+ // We need to check with designers if we want to introduce them in our color palette
105
+ // They are 'color-error' with 10% and 5% black opacity
106
+ return [baseDefaultStyles, /*#__PURE__*/react.css("background-color:", designSystem.designTokens.colorError, ";&:focus,&:hover{background-color:#cc0047;}&:active{background-color:#b3003e;}" + ("" ), "" )];
78
107
  default:
79
108
  return baseDefaultStyles;
80
109
  }
81
110
  };
82
111
 
83
- 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; }
84
- function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
112
+ 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; }
113
+ 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; }
85
114
  const propsToOmit = ['type'];
86
115
  const defaultProps = {
87
116
  type: 'button',
@@ -130,7 +159,7 @@ PrimaryButton.displayName = 'PrimaryButton';
130
159
  var PrimaryButton$1 = PrimaryButton;
131
160
 
132
161
  // NOTE: This string will be replaced on build time with the package version.
133
- var version = "17.0.1";
162
+ var version = "18.0.0";
134
163
 
135
164
  exports["default"] = PrimaryButton$1;
136
165
  exports.version = version;