@commercetools-uikit/icon-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.
|
@@ -60,11 +60,10 @@ const getShapeStyles = (shape, size) => {
|
|
|
60
60
|
case 'square':
|
|
61
61
|
switch (size) {
|
|
62
62
|
case 'small':
|
|
63
|
-
return /*#__PURE__*/react.css("border-radius:", designSystem.designTokens.
|
|
63
|
+
return /*#__PURE__*/react.css("border-radius:", designSystem.designTokens.borderRadius2, ";" + ("" ), "" );
|
|
64
64
|
case 'medium':
|
|
65
|
-
return /*#__PURE__*/react.css("border-radius:", designSystem.designTokens.borderRadiusForButtonAsIconAsMedium, ";" + ("" ), "" );
|
|
66
65
|
case 'big':
|
|
67
|
-
return /*#__PURE__*/react.css("border-radius:", designSystem.designTokens.
|
|
66
|
+
return /*#__PURE__*/react.css("border-radius:", designSystem.designTokens.borderRadius4, ";" + ("" ), "" );
|
|
68
67
|
default:
|
|
69
68
|
return /*#__PURE__*/react.css("" , "" );
|
|
70
69
|
}
|
|
@@ -75,27 +74,31 @@ const getShapeStyles = (shape, size) => {
|
|
|
75
74
|
const getSizeStyles = size => {
|
|
76
75
|
switch (size) {
|
|
77
76
|
case 'small':
|
|
78
|
-
return /*#__PURE__*/react.css("height:", designSystem.designTokens.
|
|
77
|
+
return /*#__PURE__*/react.css("height:", designSystem.designTokens.heightForButtonAsSmall, ";width:", designSystem.designTokens.heightForButtonAsSmall, ";" + ("" ), "" );
|
|
79
78
|
case 'medium':
|
|
80
|
-
return /*#__PURE__*/react.css("height:", designSystem.designTokens.
|
|
79
|
+
return /*#__PURE__*/react.css("height:", designSystem.designTokens.heightForButtonAsMedium, ";width:", designSystem.designTokens.heightForButtonAsMedium, ";" + ("" ), "" );
|
|
81
80
|
case 'big':
|
|
82
|
-
return /*#__PURE__*/react.css("height:", designSystem.designTokens.
|
|
81
|
+
return /*#__PURE__*/react.css("height:", designSystem.designTokens.heightForButtonAsBig, ";width:", designSystem.designTokens.heightForButtonAsBig, ";" + ("" ), "" );
|
|
83
82
|
default:
|
|
84
83
|
return /*#__PURE__*/react.css("" , "" );
|
|
85
84
|
}
|
|
86
85
|
};
|
|
87
86
|
const getBaseStyles = (theme, isDisabled, isActive) => {
|
|
88
87
|
if (isDisabled) {
|
|
89
|
-
return /*#__PURE__*/react.css("&,&:hover{background-color:", designSystem.designTokens.backgroundColorForButtonWhenDisabled, ";border-color:", designSystem.designTokens.
|
|
88
|
+
return /*#__PURE__*/react.css("&,&:hover{background-color:", designSystem.designTokens.backgroundColorForButtonWhenDisabled, ";border-color:", designSystem.designTokens.colorSurface, ";color:", designSystem.designTokens.colorNeutral60, ";box-shadow:none;}" + ("" ), "" );
|
|
90
89
|
}
|
|
91
90
|
if (!theme || theme === 'default') {
|
|
92
|
-
return /*#__PURE__*/react.css("&:hover{background-color:", designSystem.designTokens.backgroundColorForButtonWhenHovered, ";box-shadow:", designSystem.designTokens.
|
|
91
|
+
return /*#__PURE__*/react.css("&:hover{background-color:", designSystem.designTokens.backgroundColorForButtonWhenHovered, ";box-shadow:", designSystem.designTokens.shadow0, ";}", isActive ? '&,' : '', " &:active{background-color:", designSystem.designTokens.backgroundColorForButtonWhenActive, ";box-shadow:", designSystem.designTokens.shadow0, ";border-color:", designSystem.designTokens.colorNeutral, ";}" + ("" ), "" );
|
|
93
92
|
}
|
|
94
93
|
switch (theme) {
|
|
94
|
+
// TODO: These custom colors where itroduced in the Merchant Center redign 2023
|
|
95
|
+
// We need to check with designers if we want to introduce them in our color palette
|
|
96
|
+
// #15A390 -> color-primary with 10% black opacity
|
|
97
|
+
// #057FCC -> color-info with 10% black opacity
|
|
95
98
|
case 'primary':
|
|
96
|
-
return /*#__PURE__*/react.css("&:hover{background-color:", designSystem.designTokens.
|
|
99
|
+
return /*#__PURE__*/react.css("&:hover{background-color:", designSystem.designTokens.colorPrimary, ";box-shadow:", designSystem.designTokens.shadow0, ";}", isActive ? '&,' : '', " &:active{background-color:#15a390;box-shadow:", designSystem.designTokens.shadow0, ";}", isActive ? '&,' : '', " &:hover,&:active{border-color:", designSystem.designTokens.colorNeutral, ";}" + ("" ), "" );
|
|
97
100
|
case 'info':
|
|
98
|
-
return /*#__PURE__*/react.css("&:hover{background-color:", designSystem.designTokens.
|
|
101
|
+
return /*#__PURE__*/react.css("&:hover{background-color:", designSystem.designTokens.colorInfo, ";box-shadow:", designSystem.designTokens.shadow0, ";}", isActive ? '&,' : '', " &:active{background-color:#057fcc;box-shadow:", designSystem.designTokens.shadow0, ";}", isActive ? '&,' : '', " &:hover,&:active{border-color:", designSystem.designTokens.colorNeutral, ";}" + ("" ), "" );
|
|
99
102
|
default:
|
|
100
103
|
{
|
|
101
104
|
return /*#__PURE__*/react.css("" , "" );
|
|
@@ -107,8 +110,8 @@ const getHoverStyles = (isDisabled, theme) => {
|
|
|
107
110
|
return /*#__PURE__*/react.css("&:hover{*{fill:", designSystem.designTokens.colorSurface, ";}}" + ("" ), "" );
|
|
108
111
|
};
|
|
109
112
|
|
|
110
|
-
function ownKeys(
|
|
111
|
-
function _objectSpread(
|
|
113
|
+
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; }
|
|
114
|
+
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; }
|
|
112
115
|
const defaultProps = {
|
|
113
116
|
type: 'button',
|
|
114
117
|
theme: 'default',
|
|
@@ -130,7 +133,7 @@ const IconButton = props => {
|
|
|
130
133
|
isToggleButton: props.isToggleButton,
|
|
131
134
|
isToggled: props.isToggled,
|
|
132
135
|
isDisabled: props.isDisabled,
|
|
133
|
-
css: [/*#__PURE__*/react.css("width:100%;height:100%;display:flex;align-items:center;justify-content:center;border:1px solid ", designSystem.designTokens.
|
|
136
|
+
css: [/*#__PURE__*/react.css("width:100%;height:100%;display:flex;align-items:center;justify-content:center;border:1px solid ", designSystem.designTokens.colorNeutral, ";background-color:", designSystem.designTokens.colorSurface, ";box-shadow:", designSystem.designTokens.shadow0, ";color:", designSystem.designTokens.colorSolid, ";transition:background-color ", designSystem.designTokens.transitionLinear80Ms, ",box-shadow 150ms ease-in-out;" + ("" ), "" ), getBaseStyles(props.theme, props.isDisabled, isActive), getShapeStyles('square', props.size), getSizeStyles(props.size), getHoverStyles(props.isDisabled, props.theme), "" , "" ],
|
|
134
137
|
children: props.icon && /*#__PURE__*/react$1.cloneElement(props.icon, {
|
|
135
138
|
size: props.size,
|
|
136
139
|
color: getIconThemeColor(props)
|
|
@@ -143,7 +146,7 @@ IconButton.displayName = 'IconButton';
|
|
|
143
146
|
var IconButton$1 = IconButton;
|
|
144
147
|
|
|
145
148
|
// NOTE: This string will be replaced on build time with the package version.
|
|
146
|
-
var version = "
|
|
149
|
+
var version = "18.0.0";
|
|
147
150
|
|
|
148
151
|
exports["default"] = IconButton$1;
|
|
149
152
|
exports.version = version;
|