pds-dev-kit-web-test 2.7.155 → 2.7.156

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.
@@ -17,8 +17,10 @@ export type IconButtonProps = {
17
17
  type?: 'submit' | 'reset' | 'button';
18
18
  state?: 'normal' | 'disabled';
19
19
  tabIndex?: number;
20
+ useDefaultHoverStyle?: boolean;
21
+ useDefaultActiveStyle?: boolean;
20
22
  onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
21
23
  onMouseDown?: (e: React.MouseEvent<HTMLButtonElement>) => void;
22
24
  };
23
- declare function IconButton({ fillType, shapeType, baseSize, baseColorKey, overrideBaseColorHex, borderColorKey, iconSize, iconFillType, iconName, iconColorKey, overrideIconColorHex, shadow, colorTheme, type, state, tabIndex, onClick, onMouseDown }: IconButtonProps): JSX.Element;
25
+ declare function IconButton({ fillType, shapeType, baseSize, baseColorKey, overrideBaseColorHex, borderColorKey, iconSize, iconFillType, iconName, iconColorKey, overrideIconColorHex, shadow, colorTheme, type, state, tabIndex, useDefaultHoverStyle, useDefaultActiveStyle, onClick, onMouseDown }: IconButtonProps): JSX.Element;
24
26
  export default IconButton;
@@ -42,7 +42,7 @@ var jsx_runtime_1 = require("react/jsx-runtime");
42
42
  var styled_components_1 = __importStar(require("styled-components"));
43
43
  var hybrid_1 = require("../../hybrid");
44
44
  function IconButton(_a) {
45
- var _b = _a.fillType, fillType = _b === void 0 ? 'fill' : _b, _c = _a.shapeType, shapeType = _c === void 0 ? 'rectangle' : _c, _d = _a.baseSize, baseSize = _d === void 0 ? 'small' : _d, baseColorKey = _a.baseColorKey, overrideBaseColorHex = _a.overrideBaseColorHex, borderColorKey = _a.borderColorKey, _e = _a.iconSize, iconSize = _e === void 0 ? 24 : _e, _f = _a.iconFillType, iconFillType = _f === void 0 ? 'line' : _f, iconName = _a.iconName, iconColorKey = _a.iconColorKey, overrideIconColorHex = _a.overrideIconColorHex, _g = _a.shadow, shadow = _g === void 0 ? 'hidden' : _g, _h = _a.colorTheme, colorTheme = _h === void 0 ? 'none' : _h, _j = _a.type, type = _j === void 0 ? 'button' : _j, _k = _a.state, state = _k === void 0 ? 'normal' : _k, tabIndex = _a.tabIndex, onClick = _a.onClick, onMouseDown = _a.onMouseDown;
45
+ var _b = _a.fillType, fillType = _b === void 0 ? 'fill' : _b, _c = _a.shapeType, shapeType = _c === void 0 ? 'rectangle' : _c, _d = _a.baseSize, baseSize = _d === void 0 ? 'small' : _d, baseColorKey = _a.baseColorKey, overrideBaseColorHex = _a.overrideBaseColorHex, borderColorKey = _a.borderColorKey, _e = _a.iconSize, iconSize = _e === void 0 ? 24 : _e, _f = _a.iconFillType, iconFillType = _f === void 0 ? 'line' : _f, iconName = _a.iconName, iconColorKey = _a.iconColorKey, overrideIconColorHex = _a.overrideIconColorHex, _g = _a.shadow, shadow = _g === void 0 ? 'hidden' : _g, _h = _a.colorTheme, colorTheme = _h === void 0 ? 'none' : _h, _j = _a.type, type = _j === void 0 ? 'button' : _j, _k = _a.state, state = _k === void 0 ? 'normal' : _k, tabIndex = _a.tabIndex, _l = _a.useDefaultHoverStyle, useDefaultHoverStyle = _l === void 0 ? true : _l, _m = _a.useDefaultActiveStyle, useDefaultActiveStyle = _m === void 0 ? true : _m, onClick = _a.onClick, onMouseDown = _a.onMouseDown;
46
46
  var handleClick = function (e) {
47
47
  if (onClick) {
48
48
  onClick(e);
@@ -76,7 +76,7 @@ function IconButton(_a) {
76
76
  }
77
77
  return iconStateColorObj[fillType];
78
78
  };
79
- return ((0, jsx_runtime_1.jsx)(S_IconButton, __assign({ "x-pds-name": "IconButton", "x-pds-element-type": "component", "x-pds-device-type": "desktop", fillType: fillType, shapeType: shapeType, baseSize: baseSize, baseColorKey: baseColorKey, overrideBaseColorHex: overrideBaseColorHex, borderColorKey: borderColorKey, shadow: shadow, colorTheme: colorTheme, type: type, state: state, disabled: state === 'disabled', tabIndex: tabIndex, onClick: handleClick, onMouseDown: handleMouseDown }, { children: (0, jsx_runtime_1.jsx)(hybrid_1.Icon, { iconName: iconName, size: iconSize, colorKey: IconColorSelect(), overrideColorHex: overrideIconColorHex, fillType: iconFillType }) })));
79
+ return ((0, jsx_runtime_1.jsx)(S_IconButton, __assign({ "x-pds-name": "IconButton", "x-pds-element-type": "component", "x-pds-device-type": "desktop", fillType: fillType, shapeType: shapeType, baseSize: baseSize, baseColorKey: baseColorKey, overrideBaseColorHex: overrideBaseColorHex, borderColorKey: borderColorKey, shadow: shadow, colorTheme: colorTheme, type: type, state: state, disabled: state === 'disabled', tabIndex: tabIndex, useDefaultHoverStyle: useDefaultHoverStyle, useDefaultActiveStyle: useDefaultActiveStyle, onClick: handleClick, onMouseDown: handleMouseDown }, { children: (0, jsx_runtime_1.jsx)(hybrid_1.Icon, { iconName: iconName, size: iconSize, colorKey: IconColorSelect(), overrideColorHex: overrideIconColorHex, fillType: iconFillType }) })));
80
80
  }
81
81
  var fillDisabled = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n background-color: ", ";\n"], ["\n background-color: ", ";\n"])), function (_a) {
82
82
  var theme = _a.theme, baseColorKey = _a.baseColorKey;
@@ -84,21 +84,23 @@ var fillDisabled = (0, styled_components_1.css)(templateObject_1 || (templateObj
84
84
  ? ''
85
85
  : theme.ui_cpnt_button_fill_base_disabled;
86
86
  });
87
- var fill = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n background-color: ", ";\n\n &:hover:enabled {\n ", "\n }\n\n &:active:enabled {\n ", "\n }\n\n ", ";\n"], ["\n background-color: ", ";\n\n &:hover:enabled {\n ", "\n }\n\n &:active:enabled {\n ", "\n }\n\n ", ";\n"])), function (_a) {
87
+ var fill = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n background-color: ", ";\n\n ", "\n\n ", "\n\n ", ";\n"], ["\n background-color: ", ";\n\n ", "\n\n ", "\n\n ", ";\n"])), function (_a) {
88
88
  var theme = _a.theme, overrideBaseColorHex = _a.overrideBaseColorHex, baseColorKey = _a.baseColorKey;
89
89
  if (overrideBaseColorHex)
90
90
  return overrideBaseColorHex;
91
91
  return baseColorKey ? theme[baseColorKey] : theme.ui_cpnt_button_fill_base_primary;
92
92
  }, function (_a) {
93
- var theme = _a.theme, baseColorKey = _a.baseColorKey;
94
- return baseColorKey === 'ui_cpnt_button_fill_base_transparent'
95
- ? ''
96
- : "background-image: linear-gradient(\n to top,\n ".concat(theme.ui_cpnt_button_fill_on_base_hover, ",\n ").concat(theme.ui_cpnt_button_fill_on_base_hover, "\n );");
93
+ var useDefaultHoverStyle = _a.useDefaultHoverStyle, theme = _a.theme, baseColorKey = _a.baseColorKey;
94
+ return useDefaultHoverStyle &&
95
+ "\n &:hover:enabled {\n ".concat(baseColorKey === 'ui_cpnt_button_fill_base_transparent'
96
+ ? ''
97
+ : "background-image: linear-gradient(\n to top,\n ".concat(theme.ui_cpnt_button_fill_on_base_hover, ",\n ").concat(theme.ui_cpnt_button_fill_on_base_hover, "\n );"), "\n }\n ");
97
98
  }, function (_a) {
98
- var theme = _a.theme, baseColorKey = _a.baseColorKey;
99
- return baseColorKey === 'ui_cpnt_button_fill_base_transparent'
100
- ? ''
101
- : "background-image: linear-gradient(\n to top,\n ".concat(theme.ui_cpnt_button_fill_on_base_pressed, ",\n ").concat(theme.ui_cpnt_button_fill_on_base_pressed, "\n );");
99
+ var useDefaultActiveStyle = _a.useDefaultActiveStyle, theme = _a.theme, baseColorKey = _a.baseColorKey;
100
+ return useDefaultActiveStyle &&
101
+ "\n &:active:enabled {\n ".concat(baseColorKey === 'ui_cpnt_button_fill_base_transparent'
102
+ ? ''
103
+ : "background-image: linear-gradient(\n to top,\n ".concat(theme.ui_cpnt_button_fill_on_base_pressed, ",\n ").concat(theme.ui_cpnt_button_fill_on_base_pressed, "\n );"), "\n }\n ");
102
104
  }, function (_a) {
103
105
  var state = _a.state;
104
106
  return state === 'disabled' && fillDisabled;
@@ -110,7 +112,7 @@ var lineDisabled = (0, styled_components_1.css)(templateObject_3 || (templateObj
110
112
  var theme = _a.theme;
111
113
  return theme.ui_cpnt_button_line_border_disabled;
112
114
  });
113
- var line = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n background-color: ", ";\n border-color: ", ";\n\n ", ";\n\n &:hover:enabled {\n ", "\n }\n\n &:active:enabled {\n ", "\n }\n\n ", ";\n"], ["\n background-color: ", ";\n border-color: ", ";\n\n ", ";\n\n &:hover:enabled {\n ", "\n }\n\n &:active:enabled {\n ", "\n }\n\n ", ";\n"])), function (_a) {
115
+ var line = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n background-color: ", ";\n border-color: ", ";\n\n ", ";\n\n ", "\n\n ", "\n\n ", ";\n"], ["\n background-color: ", ";\n border-color: ", ";\n\n ", ";\n\n ", "\n\n ", "\n\n ", ";\n"])), function (_a) {
114
116
  var theme = _a.theme;
115
117
  return theme.ui_cpnt_button_line_base_default;
116
118
  }, function (_a) {
@@ -127,11 +129,13 @@ var line = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 =
127
129
  return '';
128
130
  }
129
131
  }, function (_a) {
130
- var theme = _a.theme;
131
- return "background-color: ".concat(theme.ui_cpnt_button_line_base_hover, "\n ;");
132
+ var useDefaultHoverStyle = _a.useDefaultHoverStyle, theme = _a.theme;
133
+ return useDefaultHoverStyle &&
134
+ "\n &:hover:enabled {\n background-color: ".concat(theme.ui_cpnt_button_line_base_hover, ";\n }\n ");
132
135
  }, function (_a) {
133
- var theme = _a.theme;
134
- return "background-color: ".concat(theme.ui_cpnt_button_line_base_pressed, "\n ;");
136
+ var useDefaultActiveStyle = _a.useDefaultActiveStyle, theme = _a.theme;
137
+ return useDefaultActiveStyle &&
138
+ "\n &:active:enabled {\n background-color: ".concat(theme.ui_cpnt_button_line_base_pressed, ";\n }\n ");
135
139
  }, function (_a) {
136
140
  var state = _a.state;
137
141
  return state === 'disabled' && lineDisabled;
@@ -58,7 +58,7 @@ var CustomNavigationNextBtn = function (_a) {
58
58
  buttonSize = 'xxlarge';
59
59
  iconSize = 48;
60
60
  }
61
- return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: nextButton && ((0, jsx_runtime_1.jsx)(S_NextButton, __assign({ className: "cb-contentscarousel-next-button", disabled: isDisabled, "$size": styles.nextBtnSize }, { children: (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { fillType: "fill", baseSize: buttonSize, iconSize: iconSize, shapeType: nextButton.shapeType, borderColorKey: nextButton.borderColorKey, overrideBaseColorHex: styles.nextBtnPrimaryColor, iconName: nextButton.iconName, iconFillType: "line", iconColorKey: nextButton.iconColorKey || 'ui_cpnt_icon_sys_black', overrideIconColorHex: styles.nextBtnSecondaryColor, shadow: nextButton.shadow, onClick: onClick }) }))) }));
61
+ return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: nextButton && ((0, jsx_runtime_1.jsx)(S_NextButton, __assign({ className: "cb-contentscarousel-next-button", disabled: isDisabled, "$size": styles.nextBtnSize }, { children: (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { fillType: "fill", baseSize: buttonSize, iconSize: iconSize, shapeType: nextButton.shapeType, borderColorKey: nextButton.borderColorKey, overrideBaseColorHex: styles.nextBtnPrimaryColor, iconName: nextButton.iconName, iconFillType: "line", iconColorKey: nextButton.iconColorKey || 'ui_cpnt_icon_sys_black', overrideIconColorHex: styles.nextBtnSecondaryColor, shadow: nextButton.shadow, useDefaultActiveStyle: false, useDefaultHoverStyle: false, onClick: onClick }) }))) }));
62
62
  };
63
63
  exports.CustomNavigationNextBtn = CustomNavigationNextBtn;
64
64
  var S_NextButton = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n cursor: pointer;\n\n ", ";\n"], ["\n cursor: pointer;\n\n ", ";\n"])), function (_a) {
@@ -58,7 +58,7 @@ var CustomNavigationPrevBtn = function (_a) {
58
58
  buttonSize = 'xxlarge';
59
59
  iconSize = 48;
60
60
  }
61
- return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: prevButton && ((0, jsx_runtime_1.jsx)(S_PrevButton, __assign({ className: "cb-contentscarousel-prev-button", disabled: isDisabled, "$size": styles.prevBtnSize }, { children: (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { fillType: "fill", baseSize: buttonSize, iconSize: iconSize, shapeType: prevButton.shapeType, borderColorKey: prevButton.borderColorKey, overrideBaseColorHex: styles.prevBtnPrimaryColor, iconName: prevButton.iconName, iconFillType: "line", iconColorKey: prevButton.iconColorKey || 'ui_cpnt_icon_sys_black', overrideIconColorHex: styles.prevBtnSecondaryColor, shadow: prevButton.shadow, onClick: onClick }) }))) }));
61
+ return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: prevButton && ((0, jsx_runtime_1.jsx)(S_PrevButton, __assign({ className: "cb-contentscarousel-prev-button", disabled: isDisabled, "$size": styles.prevBtnSize }, { children: (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { fillType: "fill", baseSize: buttonSize, iconSize: iconSize, shapeType: prevButton.shapeType, borderColorKey: prevButton.borderColorKey, overrideBaseColorHex: styles.prevBtnPrimaryColor, iconName: prevButton.iconName, iconFillType: "line", iconColorKey: prevButton.iconColorKey || 'ui_cpnt_icon_sys_black', overrideIconColorHex: styles.prevBtnSecondaryColor, shadow: prevButton.shadow, onClick: onClick, useDefaultActiveStyle: false, useDefaultHoverStyle: false }) }))) }));
62
62
  };
63
63
  exports.CustomNavigationPrevBtn = CustomNavigationPrevBtn;
64
64
  var S_PrevButton = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n cursor: pointer;\n\n ", ";\n"], ["\n cursor: pointer;\n\n ", ";\n"])), function (_a) {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pds-dev-kit-web-test",
3
- "version": "2.7.155",
3
+ "version": "2.7.156",
4
4
  "license": "MIT",
5
5
  "private": false,
6
6
  "main": "dist/index.js",