@itcase/ui 1.1.3 → 1.1.4
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.
- package/dist/components/Response.js +11 -7
- package/package.json +1 -1
|
@@ -21,13 +21,13 @@ var index = require('./Group.js');
|
|
|
21
21
|
var index$2 = require('./Text.js');
|
|
22
22
|
var index$1 = require('./Title.js');
|
|
23
23
|
var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
|
|
24
|
+
var useStyles = require('../hooks/useStyles.js');
|
|
24
25
|
require('./Icon.js');
|
|
25
26
|
require('./Link.js');
|
|
26
27
|
require('../constants/componentProps/textGradient.js');
|
|
27
28
|
require('../constants/componentProps/textStyle.js');
|
|
28
29
|
require('../constants/componentProps/type.js');
|
|
29
30
|
require('../constants/componentProps/underline.js');
|
|
30
|
-
require('../hooks/useStyles.js');
|
|
31
31
|
require('lodash/camelCase');
|
|
32
32
|
require('lodash/maxBy');
|
|
33
33
|
require('lodash/upperFirst');
|
|
@@ -144,19 +144,23 @@ function Response(props) {
|
|
|
144
144
|
prefix: 'border_type_',
|
|
145
145
|
propsKey: 'borderType'
|
|
146
146
|
});
|
|
147
|
+
const {
|
|
148
|
+
styles: responseStyles
|
|
149
|
+
} = useStyles.useStyles(props);
|
|
147
150
|
return /*#__PURE__*/React__default.default.createElement("div", {
|
|
148
|
-
className: clsx__default.default(className, 'response', fillClass, fillHoverClass, shapeClass, borderColorClass, borderColorHoverClass, borderWidthClass, borderTypeClass, set && `response_set_${set}`)
|
|
151
|
+
className: clsx__default.default(className, 'response', fillClass || responseConfig.appearance[appearance] && `fill_${responseConfig.appearance[appearance].fill}`.replace(/([A-Z])/g, '-$1').toLowerCase(), fillHoverClass || responseConfig.appearance[appearance] && `fill_hover_${responseConfig.appearance[appearance].fillHover}`.replace(/([A-Z])/g, '-$1').toLowerCase(), shapeClass || responseConfig.appearance[appearance] && `fill_hover_${responseConfig.appearance[appearance].shape}`.replace(/([A-Z])/g, '-$1').toLowerCase(), borderColorClass, borderColorHoverClass, borderWidthClass, borderTypeClass, set && `response_set_${set}`),
|
|
152
|
+
style: responseStyles
|
|
149
153
|
}, before, ImageComponent || responseConfig.appearance[appearance]?.imageSrc, /*#__PURE__*/React__default.default.createElement(index.Group, {
|
|
150
154
|
className: "response__desc",
|
|
151
155
|
width: "fill"
|
|
152
156
|
}, title && /*#__PURE__*/React__default.default.createElement(index$1.Title, {
|
|
153
157
|
className: "response__title",
|
|
154
|
-
size: titleTextSize || responseConfig.appearance[appearance]?.titleTextSize,
|
|
158
|
+
size: titleTextSize || responseConfig.appearance[appearance]?.titleTextSize || 'h2',
|
|
155
159
|
textColor: titleTextColor || responseConfig.appearance[appearance]?.titleTextColor,
|
|
156
|
-
textWeight: titleTextWeight || responseConfig.appearance[appearance]?.titleTextWeight
|
|
160
|
+
textWeight: titleTextWeight || responseConfig.appearance[appearance]?.titleTextWeight || '600'
|
|
157
161
|
}, title), message && /*#__PURE__*/React__default.default.createElement(index$2.Text, {
|
|
158
162
|
className: "response__message",
|
|
159
|
-
size: messageTextSize || responseConfig.appearance[appearance]?.messageTextSize,
|
|
163
|
+
size: messageTextSize || responseConfig.appearance[appearance]?.messageTextSize || 'xxl',
|
|
160
164
|
textColor: messageTextColor || responseConfig.appearance[appearance]?.messageTextColor
|
|
161
165
|
}, message)), (primaryButtonLabel || responseConfig.appearance[appearance]?.primaryButtonLabel || primaryButton || secondaryButtonLabel || responseConfig.appearance[appearance]?.secondaryButtonLabel || secondaryButton) && /*#__PURE__*/React__default.default.createElement(index.Group, {
|
|
162
166
|
className: "response__button",
|
|
@@ -173,7 +177,7 @@ function Response(props) {
|
|
|
173
177
|
labelTextSize: primaryButtonLabelTextSize || responseConfig.appearance[appearance]?.primaryButtonLabelTextSize,
|
|
174
178
|
shape: primaryButtonShape || responseConfig.appearance[appearance]?.primaryButtonShape,
|
|
175
179
|
size: primaryButtonSize || responseConfig.appearance[appearance]?.primaryButtonSize,
|
|
176
|
-
width: primaryButtonWidth || responseConfig.appearance[appearance]?.primaryButtonWidth,
|
|
180
|
+
width: primaryButtonWidth || responseConfig.appearance[appearance]?.primaryButtonWidth || 'fill',
|
|
177
181
|
onClick: onClickPrimaryButton
|
|
178
182
|
}) : primaryButton, secondaryButtonLabel || responseConfig.appearance[appearance]?.secondaryButtonLabel ? /*#__PURE__*/React__default.default.createElement(index$3.Button, {
|
|
179
183
|
after: secondaryButtonAfter,
|
|
@@ -187,7 +191,7 @@ function Response(props) {
|
|
|
187
191
|
labelTextSize: secondaryButtonLabelTextSize || responseConfig.appearance[appearance]?.secondaryButtonLabelTextSize,
|
|
188
192
|
shape: secondaryButtonShape || responseConfig.appearance[appearance]?.secondaryButtonShape,
|
|
189
193
|
size: secondaryButtonSize || responseConfig.appearance[appearance]?.secondaryButtonSize,
|
|
190
|
-
width: secondaryButtonWidth || responseConfig.appearance[appearance]?.secondaryButtonWidth,
|
|
194
|
+
width: secondaryButtonWidth || responseConfig.appearance[appearance]?.secondaryButtonWidth || 'fill',
|
|
191
195
|
onClick: onClickSecondaryButton
|
|
192
196
|
}) : secondaryButton), after);
|
|
193
197
|
}
|