@widergy/energy-ui 3.44.3 → 3.46.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.
- package/CHANGELOG.md +14 -0
- package/dist/components/UTBaseInputField/theme.js +6 -5
- package/dist/components/UTCheckbox/versions/V1/theme.js +5 -4
- package/dist/components/UTCreditCard/README.MD +16 -0
- package/dist/components/UTCreditCard/constants.js +29 -0
- package/dist/components/UTCreditCard/index.js +136 -0
- package/dist/components/UTCreditCard/styles.module.scss +36 -0
- package/dist/components/UTIcon/components/EnergyIcons/EnergyIconQuestionFilled.svg +3 -0
- package/dist/components/UTIcon/constants.js +17 -1
- package/dist/components/UTPasswordField/versions/V1/index.js +5 -1
- package/dist/components/UTStatusMessage/theme.js +28 -28
- package/dist/index.js +7 -0
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,17 @@
|
|
|
1
|
+
# [3.46.0](https://github.com/widergy/energy-ui/compare/v3.45.0...v3.46.0) (2024-12-02)
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
### Features
|
|
5
|
+
|
|
6
|
+
* ut credit card ([#535](https://github.com/widergy/energy-ui/issues/535)) ([29ee660](https://github.com/widergy/energy-ui/commit/29ee660cdddece438b99fc820f4e693b029a77e3))
|
|
7
|
+
|
|
8
|
+
# [3.45.0](https://github.com/widergy/energy-ui/compare/v3.44.3...v3.45.0) (2024-12-02)
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
### Features
|
|
12
|
+
|
|
13
|
+
* new energy icon added ([#537](https://github.com/widergy/energy-ui/issues/537)) ([5c098fb](https://github.com/widergy/energy-ui/commit/5c098fb4bc0657e9d0987c92987ca21a9e0c09e5))
|
|
14
|
+
|
|
1
15
|
## [3.44.3](https://github.com/widergy/energy-ui/compare/v3.44.2...v3.44.3) (2024-11-27)
|
|
2
16
|
|
|
3
17
|
|
|
@@ -64,6 +64,7 @@ const getBackgroundColorOnHover = _ref3 => {
|
|
|
64
64
|
return undefined;
|
|
65
65
|
};
|
|
66
66
|
const retrieveStyle = _ref4 => {
|
|
67
|
+
var _theme$Palette$action, _theme$Palette$action2, _theme$Palette$action3, _theme$Palette$action4, _theme$Palette$action5;
|
|
67
68
|
let {
|
|
68
69
|
alwaysShowPlaceholder,
|
|
69
70
|
disabled: receivedDisabled,
|
|
@@ -115,7 +116,7 @@ const retrieveStyle = _ref4 => {
|
|
|
115
116
|
...(!disabled && !readOnly && {
|
|
116
117
|
backgroundColor: theme.Palette.light['01'],
|
|
117
118
|
'& $inputContainer': {
|
|
118
|
-
borderColor: error ? "".concat(theme.Palette.error['04'], " !important") : "".concat(theme.Palette.accent['04'], " !important"),
|
|
119
|
+
borderColor: error ? "".concat(theme.Palette.error['04'], " !important") : "".concat(((_theme$Palette$action = theme.Palette.actions) === null || _theme$Palette$action === void 0 ? void 0 : _theme$Palette$action.accent['04']) || theme.Palette.accent['04'], " !important"),
|
|
119
120
|
borderWidth: '2px'
|
|
120
121
|
},
|
|
121
122
|
'& $input': {
|
|
@@ -146,12 +147,12 @@ const retrieveStyle = _ref4 => {
|
|
|
146
147
|
},
|
|
147
148
|
withValueRoot: {
|
|
148
149
|
...(variant === 'transparent' && !error && {
|
|
149
|
-
backgroundColor: theme.Palette.accent['01']
|
|
150
|
+
backgroundColor: ((_theme$Palette$action2 = theme.Palette.actions) === null || _theme$Palette$action2 === void 0 ? void 0 : _theme$Palette$action2.accent['01']) || theme.Palette.accent['01']
|
|
150
151
|
})
|
|
151
152
|
},
|
|
152
153
|
focusedInputContainer: {
|
|
153
154
|
...(!error && {
|
|
154
|
-
borderColor: "".concat(theme.Palette.accent['04'], " !important"),
|
|
155
|
+
borderColor: "".concat(((_theme$Palette$action3 = theme.Palette.actions) === null || _theme$Palette$action3 === void 0 ? void 0 : _theme$Palette$action3.accent['04']) || theme.Palette.accent['04'], " !important"),
|
|
155
156
|
borderWidth: '2px'
|
|
156
157
|
}),
|
|
157
158
|
...(error && {
|
|
@@ -164,7 +165,7 @@ const retrieveStyle = _ref4 => {
|
|
|
164
165
|
variant: 'body',
|
|
165
166
|
weight: 'regular'
|
|
166
167
|
}),
|
|
167
|
-
caretColor: theme.Palette.accent['04'],
|
|
168
|
+
caretColor: ((_theme$Palette$action4 = theme.Palette.actions) === null || _theme$Palette$action4 === void 0 ? void 0 : _theme$Palette$action4.accent['04']) || theme.Palette.accent['04'],
|
|
168
169
|
color: theme.Palette.dark['05'],
|
|
169
170
|
minHeight: '22px',
|
|
170
171
|
overflow: 'auto',
|
|
@@ -177,7 +178,7 @@ const retrieveStyle = _ref4 => {
|
|
|
177
178
|
userSelect: 'none'
|
|
178
179
|
},
|
|
179
180
|
'&::selection': {
|
|
180
|
-
backgroundColor: theme.Palette.accent['02']
|
|
181
|
+
backgroundColor: ((_theme$Palette$action5 = theme.Palette.actions) === null || _theme$Palette$action5 === void 0 ? void 0 : _theme$Palette$action5.accent['02']) || theme.Palette.accent['02']
|
|
181
182
|
},
|
|
182
183
|
'&:focus': {
|
|
183
184
|
'&::placeholder': {
|
|
@@ -28,6 +28,7 @@ const baseCheckBoxTheme = theme => ({
|
|
|
28
28
|
}
|
|
29
29
|
});
|
|
30
30
|
const conditionalStyles = _ref => {
|
|
31
|
+
var _theme$Palette$action, _theme$Palette$action2, _theme$Palette$action3, _theme$Palette$action4;
|
|
31
32
|
let {
|
|
32
33
|
value,
|
|
33
34
|
indeterminate,
|
|
@@ -57,8 +58,8 @@ const conditionalStyles = _ref => {
|
|
|
57
58
|
},
|
|
58
59
|
iconContainer: {
|
|
59
60
|
...((value === true || indeterminate) && {
|
|
60
|
-
backgroundColor: theme.Palette.accent['04'],
|
|
61
|
-
borderColor: theme.Palette.accent['04']
|
|
61
|
+
backgroundColor: ((_theme$Palette$action = theme.Palette.actions) === null || _theme$Palette$action === void 0 ? void 0 : _theme$Palette$action.accent['04']) || theme.Palette.accent['04'],
|
|
62
|
+
borderColor: ((_theme$Palette$action2 = theme.Palette.actions) === null || _theme$Palette$action2 === void 0 ? void 0 : _theme$Palette$action2.accent['04']) || theme.Palette.accent['04']
|
|
62
63
|
})
|
|
63
64
|
},
|
|
64
65
|
boxContainer: {
|
|
@@ -71,8 +72,8 @@ const conditionalStyles = _ref => {
|
|
|
71
72
|
...(variant !== _constants.BUTTON_VARIANT && {
|
|
72
73
|
'&:active': {
|
|
73
74
|
'& $box': {
|
|
74
|
-
backgroundColor: theme.Palette.accent['02'],
|
|
75
|
-
borderColor: theme.Palette.accent['03'],
|
|
75
|
+
backgroundColor: ((_theme$Palette$action3 = theme.Palette.actions) === null || _theme$Palette$action3 === void 0 ? void 0 : _theme$Palette$action3.accent['02']) || theme.Palette.accent['02'],
|
|
76
|
+
borderColor: ((_theme$Palette$action4 = theme.Palette.actions) === null || _theme$Palette$action4 === void 0 ? void 0 : _theme$Palette$action4.accent['03']) || theme.Palette.accent['03'],
|
|
76
77
|
borderWidth: 1,
|
|
77
78
|
overflow: 'hidden'
|
|
78
79
|
}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
# UTCreditCard
|
|
2
|
+
|
|
3
|
+
## Description
|
|
4
|
+
|
|
5
|
+
`UTCreditCard` is a flexible and customizable component designed for collecting and validating credit card information in a form. It allows users to input details such as card number, expiration date, and CVV in an easy-to-use interface. The component supports real-time validation of input fields, displaying error messages when invalid data is entered, and provides customizable labels.
|
|
6
|
+
|
|
7
|
+
## Props
|
|
8
|
+
|
|
9
|
+
| Name | Type | Default | Description |
|
|
10
|
+
| ----------- | ----------- | ------- | --------------------------------------------------------------------------- |
|
|
11
|
+
| `value` | object | | The current value of the component, usually an object representing the state. |
|
|
12
|
+
| `onChange` | func | | A required function that is called when the value changes. |
|
|
13
|
+
| `childKeys` | array | | An array of keys to access child elements or properties in the `value` object. |
|
|
14
|
+
| `error` | string | | Error message to display when there is a validation issue. |
|
|
15
|
+
| `texts` | object | | An object containing various text strings used within the component |
|
|
16
|
+
| `className` | string | | Custom class name to apply to the root element of the component. |
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.getFormater = exports.fields = exports.DEFAULT_TEXTS = exports.DEFAULT_CHILD_KEYS = void 0;
|
|
7
|
+
var _normalize = require("@widergy/web-utils/lib/normalize");
|
|
8
|
+
const fields = exports.fields = {
|
|
9
|
+
NUMBER: 'number',
|
|
10
|
+
EXPIRY: 'expiry',
|
|
11
|
+
CVC: 'cvc',
|
|
12
|
+
NAME: 'name'
|
|
13
|
+
};
|
|
14
|
+
const getFormater = (cardField, nameFiled, cvcField, expires) => ({
|
|
15
|
+
[cardField]: _normalize.formatCreditCardNumber,
|
|
16
|
+
[cvcField]: _normalize.formatCVC,
|
|
17
|
+
[expires]: _normalize.formatExpirationDate,
|
|
18
|
+
[nameFiled]: _normalize.normalizeName
|
|
19
|
+
});
|
|
20
|
+
exports.getFormater = getFormater;
|
|
21
|
+
const DEFAULT_CHILD_KEYS = exports.DEFAULT_CHILD_KEYS = ['cardNumber', 'holderName', 'securityCode', 'expMonth', 'expYear', 'expires'];
|
|
22
|
+
const DEFAULT_TEXTS = exports.DEFAULT_TEXTS = {
|
|
23
|
+
cardExpDate: 'Vencimiento',
|
|
24
|
+
cardNamePlaceholder: 'Nombre completo',
|
|
25
|
+
cvcTitle: 'Cod. seguridad',
|
|
26
|
+
expiryTitle: 'Vencimiento',
|
|
27
|
+
nameTitle: 'Nombre y apellido',
|
|
28
|
+
numberTitle: 'N° de tarjeta'
|
|
29
|
+
};
|
|
@@ -0,0 +1,136 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = void 0;
|
|
7
|
+
var _propTypes = require("prop-types");
|
|
8
|
+
var _reactCreditCards = _interopRequireDefault(require("react-credit-cards"));
|
|
9
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
10
|
+
var _UTPasswordField = _interopRequireDefault(require("../UTPasswordField"));
|
|
11
|
+
var _UTTextInput = _interopRequireDefault(require("../UTTextInput"));
|
|
12
|
+
require("react-credit-cards/es/styles-compiled.css");
|
|
13
|
+
var _constants = require("./constants");
|
|
14
|
+
var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
|
|
15
|
+
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
|
|
16
|
+
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
17
|
+
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
18
|
+
const UTCreditCard = _ref => {
|
|
19
|
+
var _value$expYearField;
|
|
20
|
+
let {
|
|
21
|
+
childKeys = _constants.DEFAULT_CHILD_KEYS,
|
|
22
|
+
className,
|
|
23
|
+
error,
|
|
24
|
+
onChange,
|
|
25
|
+
texts: {
|
|
26
|
+
cardExpDate,
|
|
27
|
+
cardNamePlaceholder,
|
|
28
|
+
cvcTitle,
|
|
29
|
+
expiryTitle,
|
|
30
|
+
nameTitle,
|
|
31
|
+
numberTitle
|
|
32
|
+
} = _constants.DEFAULT_TEXTS,
|
|
33
|
+
value = {}
|
|
34
|
+
} = _ref;
|
|
35
|
+
const [cardField, nameFiled, cvcField, expMonthField, expYearField, expires] = childKeys;
|
|
36
|
+
const formater = (0, _constants.getFormater)(cardField, nameFiled, cvcField, expires);
|
|
37
|
+
const [cvcVisibility, setCvcVisibility] = (0, _react.useState)(false);
|
|
38
|
+
const [values, setValues] = (0, _react.useReducer)((state, _ref2) => {
|
|
39
|
+
let {
|
|
40
|
+
field,
|
|
41
|
+
newVal
|
|
42
|
+
} = _ref2;
|
|
43
|
+
const formatedValue = formater[field](newVal, state[cardField]);
|
|
44
|
+
const newState = {
|
|
45
|
+
...state,
|
|
46
|
+
[field]: formatedValue
|
|
47
|
+
};
|
|
48
|
+
if (field === expires) {
|
|
49
|
+
newState[expMonthField] = formatedValue.substring(0, 2);
|
|
50
|
+
newState[expYearField] = "20".concat(formatedValue.substring(3, 5));
|
|
51
|
+
}
|
|
52
|
+
onChange(newState);
|
|
53
|
+
return newState;
|
|
54
|
+
}, {
|
|
55
|
+
[cardField]: '',
|
|
56
|
+
[nameFiled]: '',
|
|
57
|
+
[cvcField]: '',
|
|
58
|
+
[expMonthField]: '',
|
|
59
|
+
[expYearField]: '',
|
|
60
|
+
[expires]: value[expMonthField] ? "".concat(value[expMonthField], "/").concat((_value$expYearField = value[expYearField]) === null || _value$expYearField === void 0 ? void 0 : _value$expYearField.substring(2, 4)) : '',
|
|
61
|
+
...value
|
|
62
|
+
});
|
|
63
|
+
const [focused, setFocused] = (0, _react.useState)('');
|
|
64
|
+
const errors = error ? JSON.parse(error) : {};
|
|
65
|
+
const onChangeField = field => newVal => setValues({
|
|
66
|
+
field,
|
|
67
|
+
newVal
|
|
68
|
+
});
|
|
69
|
+
return /*#__PURE__*/_react.default.createElement("div", {
|
|
70
|
+
className: "".concat(_stylesModule.default.container, " ").concat(className)
|
|
71
|
+
}, /*#__PURE__*/_react.default.createElement(_reactCreditCards.default, {
|
|
72
|
+
cvc: cvcVisibility ? values[cvcField] : values[cvcField].replace(/./g, '*'),
|
|
73
|
+
expiry: values.expiry,
|
|
74
|
+
focused: focused,
|
|
75
|
+
locale: {
|
|
76
|
+
valid: cardExpDate
|
|
77
|
+
},
|
|
78
|
+
name: values[nameFiled],
|
|
79
|
+
number: values[cardField] || '',
|
|
80
|
+
placeholders: {
|
|
81
|
+
name: cardNamePlaceholder
|
|
82
|
+
}
|
|
83
|
+
}), /*#__PURE__*/_react.default.createElement("div", {
|
|
84
|
+
className: _stylesModule.default.fields
|
|
85
|
+
}, /*#__PURE__*/_react.default.createElement(_UTTextInput.default, {
|
|
86
|
+
error: errors[cardField],
|
|
87
|
+
onChange: onChangeField(cardField),
|
|
88
|
+
onFocus: () => setFocused(_constants.fields.NUMBER),
|
|
89
|
+
required: true,
|
|
90
|
+
title: numberTitle,
|
|
91
|
+
value: values[cardField],
|
|
92
|
+
version: "V1"
|
|
93
|
+
}), /*#__PURE__*/_react.default.createElement("div", {
|
|
94
|
+
className: _stylesModule.default.row
|
|
95
|
+
}, /*#__PURE__*/_react.default.createElement(_UTTextInput.default, {
|
|
96
|
+
classNames: {
|
|
97
|
+
container: _stylesModule.default.inRow
|
|
98
|
+
},
|
|
99
|
+
error: errors[expires],
|
|
100
|
+
onChange: onChangeField(expires),
|
|
101
|
+
onFocus: () => setFocused(_constants.fields.EXPIRY),
|
|
102
|
+
required: true,
|
|
103
|
+
title: expiryTitle,
|
|
104
|
+
value: values[expires],
|
|
105
|
+
version: "V1"
|
|
106
|
+
}), /*#__PURE__*/_react.default.createElement(_UTPasswordField.default, {
|
|
107
|
+
classNames: {
|
|
108
|
+
container: _stylesModule.default.inRow
|
|
109
|
+
},
|
|
110
|
+
error: errors[cvcField],
|
|
111
|
+
onChange: onChangeField(cvcField),
|
|
112
|
+
onVisibilityToggle: setCvcVisibility,
|
|
113
|
+
title: cvcTitle,
|
|
114
|
+
required: true,
|
|
115
|
+
onFocus: () => setFocused(_constants.fields.CVC),
|
|
116
|
+
value: values[cvcField],
|
|
117
|
+
version: "V1"
|
|
118
|
+
})), /*#__PURE__*/_react.default.createElement(_UTTextInput.default, {
|
|
119
|
+
error: errors[nameFiled],
|
|
120
|
+
onChange: onChangeField(nameFiled),
|
|
121
|
+
required: true,
|
|
122
|
+
onFocus: () => setFocused(_constants.fields.NAME),
|
|
123
|
+
title: nameTitle,
|
|
124
|
+
value: values[nameFiled],
|
|
125
|
+
version: "V1"
|
|
126
|
+
})));
|
|
127
|
+
};
|
|
128
|
+
UTCreditCard.propTypes = {
|
|
129
|
+
value: _propTypes.object,
|
|
130
|
+
onChange: _propTypes.func,
|
|
131
|
+
childKeys: _propTypes.array,
|
|
132
|
+
error: _propTypes.object,
|
|
133
|
+
texts: _propTypes.object,
|
|
134
|
+
className: _propTypes.string
|
|
135
|
+
};
|
|
136
|
+
var _default = exports.default = UTCreditCard;
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
@use '../../scss/variables/mediaQueries.module.scss' as *;
|
|
2
|
+
|
|
3
|
+
.container {
|
|
4
|
+
align-items: center;
|
|
5
|
+
display: flex;
|
|
6
|
+
flex-direction: row-reverse;
|
|
7
|
+
grid-gap: 32px;
|
|
8
|
+
justify-content: space-between;
|
|
9
|
+
|
|
10
|
+
@media #{$mobile} {
|
|
11
|
+
flex-direction: column;
|
|
12
|
+
grid-gap: 16px;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
:global(.rccs) {
|
|
16
|
+
align-self: center;
|
|
17
|
+
}
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
.row {
|
|
21
|
+
display: flex;
|
|
22
|
+
flex-direction: row;
|
|
23
|
+
grid-gap: 16px;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
.fields {
|
|
27
|
+
display: flex;
|
|
28
|
+
flex-direction: column;
|
|
29
|
+
grid-gap: 16px;
|
|
30
|
+
max-width: 500px;
|
|
31
|
+
width: 100%;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
.inRow {
|
|
35
|
+
flex-grow: 1;
|
|
36
|
+
}
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
<svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<path fill="currentColor" fill-rule="evenodd" clip-rule="evenodd" d="M10 2.28699C5.58172 2.28699 2 5.86871 2 10.287C2 14.7053 5.58172 18.287 10 18.287C14.4183 18.287 18 14.7053 18 10.287C18 5.86871 14.4183 2.28699 10 2.28699ZM0 10.287C0 4.76414 4.47715 0.286987 10 0.286987C15.5228 0.286987 20 4.76414 20 10.287C20 15.8098 15.5228 20.287 10 20.287C4.47715 20.287 0 15.8098 0 10.287ZM8.47476 4.63188C8.97416 4.38477 9.52411 4.25695 10.0813 4.2585C10.6385 4.26004 11.1877 4.39091 11.6857 4.64078C12.1838 4.89066 12.617 5.25273 12.9513 5.69848C13.2856 6.14424 13.5119 6.66152 13.6123 7.20959C13.7128 7.75766 13.6846 8.32156 13.5301 8.85689C13.3756 9.39223 13.0989 9.88439 12.7218 10.2946C12.3448 10.7049 11.8776 11.022 11.3572 11.221C11.3487 11.2242 11.3403 11.2273 11.3317 11.2303C11.2295 11.2663 11.1417 11.3345 11.0816 11.4247C11.0214 11.5149 10.9923 11.6221 10.9984 11.7303C11.0297 12.2817 10.608 12.7541 10.0566 12.7854C9.50523 12.8166 9.03288 12.395 9.0016 11.8436C8.97092 11.3026 9.11687 10.7662 9.41747 10.3153C9.71493 9.86909 10.1479 9.53049 10.6523 9.34928C10.8798 9.26062 11.084 9.12105 11.2493 8.94122C11.4169 8.75889 11.5399 8.54015 11.6086 8.30222C11.6772 8.06429 11.6897 7.81367 11.6451 7.57008C11.6005 7.3265 11.4999 7.0966 11.3513 6.89848C11.2027 6.70037 11.0102 6.53945 10.7888 6.42839C10.5675 6.31734 10.3234 6.25918 10.0758 6.25849C9.82811 6.2578 9.58369 6.31461 9.36173 6.42444C9.13978 6.53426 8.94634 6.69411 8.79666 6.8914C8.46284 7.33138 7.83555 7.41745 7.39557 7.08363C6.95559 6.74981 6.86952 6.12252 7.20334 5.68254C7.54013 5.23865 7.97535 4.87899 8.47476 4.63188ZM10 14.287C10.5523 14.287 11 14.7347 11 15.287V15.297C11 15.8493 10.5523 16.297 10 16.297C9.44771 16.297 9 15.8493 9 15.297V15.287C9 14.7347 9.44771 14.287 10 14.287Z" />
|
|
3
|
+
</svg>
|
|
@@ -179,6 +179,21 @@ EnergyIconTruck.defaultProps = {
|
|
|
179
179
|
stroke: "currentColor",
|
|
180
180
|
xmlns: "http://www.w3.org/2000/svg"
|
|
181
181
|
};
|
|
182
|
+
var EnergyIconQuestionFilled = function EnergyIconQuestionFilled(props) {
|
|
183
|
+
return /*#__PURE__*/_react.default.createElement("svg", props, /*#__PURE__*/_react.default.createElement("path", {
|
|
184
|
+
fill: "currentColor",
|
|
185
|
+
fillRule: "evenodd",
|
|
186
|
+
clipRule: "evenodd",
|
|
187
|
+
d: "M10 2.287a8 8 0 1 0 0 16 8 8 0 0 0 0-16Zm-10 8c0-5.523 4.477-10 10-10s10 4.477 10 10-4.477 10-10 10-10-4.477-10-10Zm8.475-5.655a3.6 3.6 0 1 1 2.857 6.598.5.5 0 0 0-.334.5 1 1 0 0 1-1.996.114 2.5 2.5 0 0 1 1.65-2.495 1.6 1.6 0 1 0-1.855-2.458 1 1 0 0 1-1.594-1.208 3.6 3.6 0 0 1 1.272-1.051ZM10 14.287a1 1 0 0 1 1 1v.01a1 1 0 1 1-2 0v-.01a1 1 0 0 1 1-1Z"
|
|
188
|
+
}));
|
|
189
|
+
};
|
|
190
|
+
EnergyIconQuestionFilled.defaultProps = {
|
|
191
|
+
width: "20",
|
|
192
|
+
height: "21",
|
|
193
|
+
viewBox: "0 0 20 21",
|
|
194
|
+
fill: "none",
|
|
195
|
+
xmlns: "http://www.w3.org/2000/svg"
|
|
196
|
+
};
|
|
182
197
|
const FILLED_ICON_COLOR = exports.FILLED_ICON_COLOR = 'transparent';
|
|
183
198
|
const DEFAULT_INTERNAL_SHADE = exports.DEFAULT_INTERNAL_SHADE = _Palette.COLOR_SHADES.shade02;
|
|
184
199
|
const DEFAULT_COLOR_THEME = exports.DEFAULT_COLOR_THEME = _Palette.COLOR_THEMES.dark;
|
|
@@ -194,5 +209,6 @@ const ENERGY_ICONS = exports.ENERGY_ICONS = {
|
|
|
194
209
|
EnergyIconConsumption,
|
|
195
210
|
EnergyIconHome,
|
|
196
211
|
EnergyIconSendFilled,
|
|
197
|
-
EnergyIconTruck
|
|
212
|
+
EnergyIconTruck,
|
|
213
|
+
EnergyIconQuestionFilled
|
|
198
214
|
};
|
|
@@ -15,10 +15,14 @@ function _extends() { return _extends = Object.assign ? Object.assign.bind() : f
|
|
|
15
15
|
const UTPasswordField = _ref => {
|
|
16
16
|
let {
|
|
17
17
|
type,
|
|
18
|
+
onVisibilityToggle,
|
|
18
19
|
...props
|
|
19
20
|
} = _ref;
|
|
20
21
|
const [isPasswordVisible, setIsPasswordVisible] = (0, _react.useState)(false);
|
|
21
|
-
const toggleVisibility = () =>
|
|
22
|
+
const toggleVisibility = () => {
|
|
23
|
+
onVisibilityToggle === null || onVisibilityToggle === void 0 || onVisibilityToggle(!isPasswordVisible);
|
|
24
|
+
setIsPasswordVisible(!isPasswordVisible);
|
|
25
|
+
};
|
|
22
26
|
const action = {
|
|
23
27
|
Icon: isPasswordVisible ? _constants.ICON_EYE : _constants.ICON_EYE_OFF,
|
|
24
28
|
onClick: toggleVisibility
|
|
@@ -6,49 +6,49 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
exports.retrieveStyle = void 0;
|
|
7
7
|
var _constants = require("./constants");
|
|
8
8
|
const getIconBackgroundColor = (colorTheme, theme) => {
|
|
9
|
-
var _theme$Palette, _theme$Palette2, _theme$Palette3, _theme$Palette4, _theme$Palette5, _theme$Palette6, _theme$Palette7, _theme$Palette8, _theme$Palette9, _theme$Palette10, _theme$Palette11, _theme$Palette12;
|
|
9
|
+
var _theme$Palette, _theme$Palette2, _theme$Palette3, _theme$Palette4, _theme$Palette5, _theme$Palette6, _theme$Palette7, _theme$Palette8, _theme$Palette9, _theme$Palette10, _theme$Palette11, _theme$Palette12, _theme$Palette13;
|
|
10
10
|
return {
|
|
11
|
-
[_constants.COLOR_THEMES.ACCENT]: (_theme$Palette = theme.Palette) === null || _theme$Palette === void 0 ? void 0 : _theme$Palette.accent['01'],
|
|
12
|
-
[_constants.COLOR_THEMES.DEFAULT]: (_theme$
|
|
13
|
-
[_constants.COLOR_THEMES.ERROR]: (_theme$
|
|
11
|
+
[_constants.COLOR_THEMES.ACCENT]: ((_theme$Palette = theme.Palette) === null || _theme$Palette === void 0 || (_theme$Palette = _theme$Palette.actions) === null || _theme$Palette === void 0 ? void 0 : _theme$Palette.accent['01']) || ((_theme$Palette2 = theme.Palette) === null || _theme$Palette2 === void 0 ? void 0 : _theme$Palette2.accent['01']),
|
|
12
|
+
[_constants.COLOR_THEMES.DEFAULT]: (_theme$Palette3 = theme.Palette) === null || _theme$Palette3 === void 0 ? void 0 : _theme$Palette3.light['03'],
|
|
13
|
+
[_constants.COLOR_THEMES.ERROR]: (_theme$Palette4 = theme.Palette) === null || _theme$Palette4 === void 0 ? void 0 : _theme$Palette4.error['01'],
|
|
14
14
|
[_constants.COLOR_THEMES.GRADIENT]: 'light',
|
|
15
|
-
[_constants.COLOR_THEMES.GRAY]: (_theme$
|
|
16
|
-
[_constants.COLOR_THEMES.IDENTITY_1]: (_theme$
|
|
17
|
-
[_constants.COLOR_THEMES.IDENTITY_2]: (_theme$
|
|
18
|
-
[_constants.COLOR_THEMES.IDENTITY_3]: (_theme$
|
|
19
|
-
[_constants.COLOR_THEMES.IDENTITY_4]: (_theme$
|
|
20
|
-
[_constants.COLOR_THEMES.INFO]: (_theme$
|
|
21
|
-
[_constants.COLOR_THEMES.NEGATIVE]: (_theme$
|
|
22
|
-
[_constants.COLOR_THEMES.SUCCESS]: (_theme$
|
|
23
|
-
[_constants.COLOR_THEMES.WARNING]: (_theme$
|
|
15
|
+
[_constants.COLOR_THEMES.GRAY]: (_theme$Palette5 = theme.Palette) === null || _theme$Palette5 === void 0 ? void 0 : _theme$Palette5.light['03'],
|
|
16
|
+
[_constants.COLOR_THEMES.IDENTITY_1]: (_theme$Palette6 = theme.Palette) === null || _theme$Palette6 === void 0 || (_theme$Palette6 = _theme$Palette6.identitySolid) === null || _theme$Palette6 === void 0 ? void 0 : _theme$Palette6['01'],
|
|
17
|
+
[_constants.COLOR_THEMES.IDENTITY_2]: (_theme$Palette7 = theme.Palette) === null || _theme$Palette7 === void 0 || (_theme$Palette7 = _theme$Palette7.identitySolid) === null || _theme$Palette7 === void 0 ? void 0 : _theme$Palette7['02'],
|
|
18
|
+
[_constants.COLOR_THEMES.IDENTITY_3]: (_theme$Palette8 = theme.Palette) === null || _theme$Palette8 === void 0 || (_theme$Palette8 = _theme$Palette8.identitySolid) === null || _theme$Palette8 === void 0 ? void 0 : _theme$Palette8['03'],
|
|
19
|
+
[_constants.COLOR_THEMES.IDENTITY_4]: (_theme$Palette9 = theme.Palette) === null || _theme$Palette9 === void 0 || (_theme$Palette9 = _theme$Palette9.identitySolid) === null || _theme$Palette9 === void 0 ? void 0 : _theme$Palette9['04'],
|
|
20
|
+
[_constants.COLOR_THEMES.INFO]: (_theme$Palette10 = theme.Palette) === null || _theme$Palette10 === void 0 ? void 0 : _theme$Palette10.information['01'],
|
|
21
|
+
[_constants.COLOR_THEMES.NEGATIVE]: (_theme$Palette11 = theme.Palette) === null || _theme$Palette11 === void 0 ? void 0 : _theme$Palette11.light['01'],
|
|
22
|
+
[_constants.COLOR_THEMES.SUCCESS]: (_theme$Palette12 = theme.Palette) === null || _theme$Palette12 === void 0 ? void 0 : _theme$Palette12.success['01'],
|
|
23
|
+
[_constants.COLOR_THEMES.WARNING]: (_theme$Palette13 = theme.Palette) === null || _theme$Palette13 === void 0 ? void 0 : _theme$Palette13.warning['01']
|
|
24
24
|
}[colorTheme];
|
|
25
25
|
};
|
|
26
26
|
const getBannerBackgroundColor = (colorTheme, theme) => {
|
|
27
|
-
var _theme$
|
|
27
|
+
var _theme$Palette14, _theme$Palette15, _theme$Palette16, _theme$Palette17, _theme$Palette18, _theme$Palette19, _theme$Palette20, _theme$Palette21, _theme$Palette22, _theme$Palette23, _theme$Palette24, _theme$Palette25, _theme$Palette26;
|
|
28
28
|
return {
|
|
29
|
-
[_constants.COLOR_THEMES.ACCENT]: (_theme$
|
|
30
|
-
[_constants.COLOR_THEMES.DEFAULT]: (_theme$
|
|
31
|
-
[_constants.COLOR_THEMES.ERROR]: (_theme$
|
|
29
|
+
[_constants.COLOR_THEMES.ACCENT]: ((_theme$Palette14 = theme.Palette) === null || _theme$Palette14 === void 0 || (_theme$Palette14 = _theme$Palette14.actions) === null || _theme$Palette14 === void 0 ? void 0 : _theme$Palette14.accent['03']) || ((_theme$Palette15 = theme.Palette) === null || _theme$Palette15 === void 0 ? void 0 : _theme$Palette15.accent['03']),
|
|
30
|
+
[_constants.COLOR_THEMES.DEFAULT]: (_theme$Palette16 = theme.Palette) === null || _theme$Palette16 === void 0 ? void 0 : _theme$Palette16.gray['05'],
|
|
31
|
+
[_constants.COLOR_THEMES.ERROR]: (_theme$Palette17 = theme.Palette) === null || _theme$Palette17 === void 0 ? void 0 : _theme$Palette17.error['03'],
|
|
32
32
|
[_constants.COLOR_THEMES.GRADIENT]: null,
|
|
33
|
-
[_constants.COLOR_THEMES.GRAY]: (_theme$
|
|
34
|
-
[_constants.COLOR_THEMES.IDENTITY_1]: (_theme$
|
|
35
|
-
[_constants.COLOR_THEMES.IDENTITY_2]: (_theme$
|
|
36
|
-
[_constants.COLOR_THEMES.IDENTITY_3]: (_theme$
|
|
37
|
-
[_constants.COLOR_THEMES.IDENTITY_4]: (_theme$
|
|
38
|
-
[_constants.COLOR_THEMES.INFO]: (_theme$
|
|
39
|
-
[_constants.COLOR_THEMES.NEGATIVE]: (_theme$
|
|
40
|
-
[_constants.COLOR_THEMES.SUCCESS]: (_theme$
|
|
41
|
-
[_constants.COLOR_THEMES.WARNING]: (_theme$
|
|
33
|
+
[_constants.COLOR_THEMES.GRAY]: (_theme$Palette18 = theme.Palette) === null || _theme$Palette18 === void 0 ? void 0 : _theme$Palette18.gray['03'],
|
|
34
|
+
[_constants.COLOR_THEMES.IDENTITY_1]: (_theme$Palette19 = theme.Palette) === null || _theme$Palette19 === void 0 || (_theme$Palette19 = _theme$Palette19.identitySolid) === null || _theme$Palette19 === void 0 ? void 0 : _theme$Palette19['01'],
|
|
35
|
+
[_constants.COLOR_THEMES.IDENTITY_2]: (_theme$Palette20 = theme.Palette) === null || _theme$Palette20 === void 0 || (_theme$Palette20 = _theme$Palette20.identitySolid) === null || _theme$Palette20 === void 0 ? void 0 : _theme$Palette20['02'],
|
|
36
|
+
[_constants.COLOR_THEMES.IDENTITY_3]: (_theme$Palette21 = theme.Palette) === null || _theme$Palette21 === void 0 || (_theme$Palette21 = _theme$Palette21.identitySolid) === null || _theme$Palette21 === void 0 ? void 0 : _theme$Palette21['03'],
|
|
37
|
+
[_constants.COLOR_THEMES.IDENTITY_4]: (_theme$Palette22 = theme.Palette) === null || _theme$Palette22 === void 0 || (_theme$Palette22 = _theme$Palette22.identitySolid) === null || _theme$Palette22 === void 0 ? void 0 : _theme$Palette22['04'],
|
|
38
|
+
[_constants.COLOR_THEMES.INFO]: (_theme$Palette23 = theme.Palette) === null || _theme$Palette23 === void 0 ? void 0 : _theme$Palette23.information['03'],
|
|
39
|
+
[_constants.COLOR_THEMES.NEGATIVE]: (_theme$Palette24 = theme.Palette) === null || _theme$Palette24 === void 0 ? void 0 : _theme$Palette24.light['01'],
|
|
40
|
+
[_constants.COLOR_THEMES.SUCCESS]: (_theme$Palette25 = theme.Palette) === null || _theme$Palette25 === void 0 ? void 0 : _theme$Palette25.success['03'],
|
|
41
|
+
[_constants.COLOR_THEMES.WARNING]: (_theme$Palette26 = theme.Palette) === null || _theme$Palette26 === void 0 ? void 0 : _theme$Palette26.warning['03']
|
|
42
42
|
}[colorTheme];
|
|
43
43
|
};
|
|
44
44
|
const retrieveStyle = _ref => {
|
|
45
|
-
var _theme$
|
|
45
|
+
var _theme$Palette27, _theme$Palette28;
|
|
46
46
|
let {
|
|
47
47
|
showBanner = true,
|
|
48
48
|
theme,
|
|
49
49
|
colorTheme = _constants.COLOR_THEMES.DEFAULT
|
|
50
50
|
} = _ref;
|
|
51
|
-
const gradient = "linear-gradient(45deg, ".concat((_theme$
|
|
51
|
+
const gradient = "linear-gradient(45deg, ".concat((_theme$Palette27 = theme.Palette) === null || _theme$Palette27 === void 0 || (_theme$Palette27 = _theme$Palette27.identityGradient) === null || _theme$Palette27 === void 0 ? void 0 : _theme$Palette27['01'], " 0%, ").concat((_theme$Palette28 = theme.Palette) === null || _theme$Palette28 === void 0 || (_theme$Palette28 = _theme$Palette28.identityGradient) === null || _theme$Palette28 === void 0 ? void 0 : _theme$Palette28['02'], " 100%);");
|
|
52
52
|
return {
|
|
53
53
|
iconContainer: {
|
|
54
54
|
alignItems: 'center',
|
package/dist/index.js
CHANGED
|
@@ -123,6 +123,12 @@ Object.defineProperty(exports, "UTConsumptionBar", {
|
|
|
123
123
|
return _UTConsumptionBar.default;
|
|
124
124
|
}
|
|
125
125
|
});
|
|
126
|
+
Object.defineProperty(exports, "UTCreditCard", {
|
|
127
|
+
enumerable: true,
|
|
128
|
+
get: function () {
|
|
129
|
+
return _UTCreditCard.default;
|
|
130
|
+
}
|
|
131
|
+
});
|
|
126
132
|
Object.defineProperty(exports, "UTCuit", {
|
|
127
133
|
enumerable: true,
|
|
128
134
|
get: function () {
|
|
@@ -456,6 +462,7 @@ var _UTCBUInput = _interopRequireDefault(require("./components/UTCBUInput"));
|
|
|
456
462
|
var _UTCheckbox = _interopRequireDefault(require("./components/UTCheckbox"));
|
|
457
463
|
var _UTCheckList = _interopRequireDefault(require("./components/UTCheckList"));
|
|
458
464
|
var _UTConsumptionBar = _interopRequireDefault(require("./components/UTConsumptionBar"));
|
|
465
|
+
var _UTCreditCard = _interopRequireDefault(require("./components/UTCreditCard"));
|
|
459
466
|
var _UTCuit = _interopRequireDefault(require("./components/UTCuit"));
|
|
460
467
|
var _UTDatePicker = _interopRequireDefault(require("./components/UTDatePicker"));
|
|
461
468
|
var _UTDialog = _interopRequireDefault(require("./components/UTDialog"));
|