@widergy/energy-ui 3.127.0 → 3.128.1
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/UTCheckbox/UTCheckbox.mdx +13 -0
- package/dist/components/UTCheckbox/UTCheckbox.stories.js +238 -0
- package/dist/components/UTCheckbox/versions/V1/index.js +4 -2
- package/dist/components/UTCheckbox/versions/V1/theme.js +16 -0
- package/dist/components/UTIcon/theme.js +11 -10
- package/dist/components/UTSelectableCard/constants.js +2 -0
- package/dist/components/UTSelectableCard/index.js +10 -2
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,17 @@
|
|
|
1
|
+
## [3.128.1](https://github.com/widergy/energy-ui/compare/v3.128.0...v3.128.1) (2026-01-07)
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
### Bug Fixes
|
|
5
|
+
|
|
6
|
+
* checkbox ([#740](https://github.com/widergy/energy-ui/issues/740)) ([4a53159](https://github.com/widergy/energy-ui/commit/4a53159bac6e9b7f34ed40efd6f933436dc798ba))
|
|
7
|
+
|
|
8
|
+
# [3.128.0](https://github.com/widergy/energy-ui/compare/v3.127.0...v3.128.0) (2026-01-07)
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
### Features
|
|
12
|
+
|
|
13
|
+
* [AXCH-842] uticon and utselectable card features ([#729](https://github.com/widergy/energy-ui/issues/729)) ([0874a52](https://github.com/widergy/energy-ui/commit/0874a52d6973e0e21245c9a1bc730ceb4232cef7))
|
|
14
|
+
|
|
1
15
|
# [3.127.0](https://github.com/widergy/energy-ui/compare/v3.126.0...v3.127.0) (2026-01-06)
|
|
2
16
|
|
|
3
17
|
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { ArgTypes, Canvas, Description, Meta, Title } from '@storybook/blocks';
|
|
2
|
+
|
|
3
|
+
import * as UTCheckboxStories from './UTCheckbox.stories.js';
|
|
4
|
+
|
|
5
|
+
<Meta of={UTCheckboxStories} />
|
|
6
|
+
|
|
7
|
+
<Title>UTCheckbox</Title>
|
|
8
|
+
|
|
9
|
+
<Description of={UTCheckboxStories} />
|
|
10
|
+
|
|
11
|
+
<Canvas of={UTCheckboxStories.Playground} withToolbar />
|
|
12
|
+
|
|
13
|
+
<ArgTypes exclude={['classes']} />
|
|
@@ -0,0 +1,238 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = exports.VersionV1 = exports.VersionV0 = exports.Playground = void 0;
|
|
7
|
+
var _react = _interopRequireDefault(require("react"));
|
|
8
|
+
var _previewApi = require("@storybook/preview-api");
|
|
9
|
+
var _utils = require("stories/utils");
|
|
10
|
+
var _ = _interopRequireDefault(require("."));
|
|
11
|
+
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
12
|
+
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
|
|
13
|
+
var _default = exports.default = {
|
|
14
|
+
title: 'Energy-UI/UTCheckbox',
|
|
15
|
+
component: _.default,
|
|
16
|
+
args: {
|
|
17
|
+
version: 'V1',
|
|
18
|
+
title: 'Checkbox Label'
|
|
19
|
+
},
|
|
20
|
+
argTypes: {
|
|
21
|
+
version: {
|
|
22
|
+
control: 'inline-radio',
|
|
23
|
+
options: ['V0', 'V1'],
|
|
24
|
+
description: 'Versión del componente a utilizar.',
|
|
25
|
+
table: {
|
|
26
|
+
defaultValue: {
|
|
27
|
+
summary: 'V1'
|
|
28
|
+
},
|
|
29
|
+
type: {
|
|
30
|
+
summary: (0, _utils.joinArgTypes)(['V0', 'V1'])
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
},
|
|
34
|
+
value: {
|
|
35
|
+
control: 'boolean',
|
|
36
|
+
description: 'Estado del checkbox (marcado/no marcado).',
|
|
37
|
+
table: {
|
|
38
|
+
defaultValue: {
|
|
39
|
+
summary: 'false'
|
|
40
|
+
},
|
|
41
|
+
type: {
|
|
42
|
+
summary: 'boolean'
|
|
43
|
+
}
|
|
44
|
+
}
|
|
45
|
+
},
|
|
46
|
+
disabled: {
|
|
47
|
+
control: 'boolean',
|
|
48
|
+
description: 'Determina si el checkbox está deshabilitado.',
|
|
49
|
+
table: {
|
|
50
|
+
defaultValue: {
|
|
51
|
+
summary: 'false'
|
|
52
|
+
},
|
|
53
|
+
type: {
|
|
54
|
+
summary: 'boolean'
|
|
55
|
+
}
|
|
56
|
+
}
|
|
57
|
+
},
|
|
58
|
+
label: {
|
|
59
|
+
control: 'text',
|
|
60
|
+
description: 'Texto de la etiqueta.',
|
|
61
|
+
table: {
|
|
62
|
+
type: {
|
|
63
|
+
summary: 'string'
|
|
64
|
+
}
|
|
65
|
+
},
|
|
66
|
+
if: {
|
|
67
|
+
arg: 'version',
|
|
68
|
+
eq: 'V0'
|
|
69
|
+
}
|
|
70
|
+
},
|
|
71
|
+
color: {
|
|
72
|
+
control: 'select',
|
|
73
|
+
options: ['primary', 'secondary'],
|
|
74
|
+
description: 'Color del componente (Material-UI).',
|
|
75
|
+
table: {
|
|
76
|
+
defaultValue: {
|
|
77
|
+
summary: 'primary'
|
|
78
|
+
},
|
|
79
|
+
type: {
|
|
80
|
+
summary: (0, _utils.joinArgTypes)(['primary', 'secondary'])
|
|
81
|
+
}
|
|
82
|
+
},
|
|
83
|
+
if: {
|
|
84
|
+
arg: 'version',
|
|
85
|
+
eq: 'V0'
|
|
86
|
+
}
|
|
87
|
+
},
|
|
88
|
+
title: {
|
|
89
|
+
control: 'text',
|
|
90
|
+
description: 'Label para el checkbox.',
|
|
91
|
+
table: {
|
|
92
|
+
type: {
|
|
93
|
+
summary: 'string'
|
|
94
|
+
}
|
|
95
|
+
},
|
|
96
|
+
if: {
|
|
97
|
+
arg: 'version',
|
|
98
|
+
eq: 'V1'
|
|
99
|
+
}
|
|
100
|
+
},
|
|
101
|
+
variant: {
|
|
102
|
+
control: 'select',
|
|
103
|
+
options: ['default', 'button'],
|
|
104
|
+
description: 'Variante de estilo.',
|
|
105
|
+
table: {
|
|
106
|
+
defaultValue: {
|
|
107
|
+
summary: 'default'
|
|
108
|
+
},
|
|
109
|
+
type: {
|
|
110
|
+
summary: (0, _utils.joinArgTypes)(['default', 'button'])
|
|
111
|
+
}
|
|
112
|
+
},
|
|
113
|
+
if: {
|
|
114
|
+
arg: 'version',
|
|
115
|
+
eq: 'V1'
|
|
116
|
+
}
|
|
117
|
+
},
|
|
118
|
+
required: {
|
|
119
|
+
control: 'boolean',
|
|
120
|
+
description: 'Indica si el campo es obligatorio.',
|
|
121
|
+
table: {
|
|
122
|
+
defaultValue: {
|
|
123
|
+
summary: 'false'
|
|
124
|
+
},
|
|
125
|
+
type: {
|
|
126
|
+
summary: 'boolean'
|
|
127
|
+
}
|
|
128
|
+
},
|
|
129
|
+
if: {
|
|
130
|
+
arg: 'version',
|
|
131
|
+
eq: 'V1'
|
|
132
|
+
}
|
|
133
|
+
},
|
|
134
|
+
indeterminate: {
|
|
135
|
+
control: 'boolean',
|
|
136
|
+
description: 'Determina si el checkbox está en estado indeterminado.',
|
|
137
|
+
table: {
|
|
138
|
+
defaultValue: {
|
|
139
|
+
summary: 'false'
|
|
140
|
+
},
|
|
141
|
+
type: {
|
|
142
|
+
summary: 'boolean'
|
|
143
|
+
}
|
|
144
|
+
},
|
|
145
|
+
if: {
|
|
146
|
+
arg: 'version',
|
|
147
|
+
eq: 'V1'
|
|
148
|
+
}
|
|
149
|
+
},
|
|
150
|
+
withUpperTitle: {
|
|
151
|
+
control: 'boolean',
|
|
152
|
+
description: 'Determina si se debe mostrar el título superior.',
|
|
153
|
+
table: {
|
|
154
|
+
defaultValue: {
|
|
155
|
+
summary: 'false'
|
|
156
|
+
},
|
|
157
|
+
type: {
|
|
158
|
+
summary: 'boolean'
|
|
159
|
+
}
|
|
160
|
+
},
|
|
161
|
+
if: {
|
|
162
|
+
arg: 'version',
|
|
163
|
+
eq: 'V1'
|
|
164
|
+
}
|
|
165
|
+
},
|
|
166
|
+
reversed: {
|
|
167
|
+
control: 'boolean',
|
|
168
|
+
description: 'Invierte el orden del checkbox y la etiqueta.',
|
|
169
|
+
table: {
|
|
170
|
+
defaultValue: {
|
|
171
|
+
summary: 'false'
|
|
172
|
+
},
|
|
173
|
+
type: {
|
|
174
|
+
summary: 'boolean'
|
|
175
|
+
}
|
|
176
|
+
},
|
|
177
|
+
if: {
|
|
178
|
+
arg: 'version',
|
|
179
|
+
eq: 'V1'
|
|
180
|
+
}
|
|
181
|
+
},
|
|
182
|
+
icon: {
|
|
183
|
+
control: 'text',
|
|
184
|
+
description: 'Icono accesorio.',
|
|
185
|
+
table: {
|
|
186
|
+
type: {
|
|
187
|
+
summary: 'string'
|
|
188
|
+
}
|
|
189
|
+
},
|
|
190
|
+
if: {
|
|
191
|
+
arg: 'version',
|
|
192
|
+
eq: 'V1'
|
|
193
|
+
}
|
|
194
|
+
}
|
|
195
|
+
},
|
|
196
|
+
parameters: {
|
|
197
|
+
docs: {
|
|
198
|
+
description: {
|
|
199
|
+
component: 'Componente de checkbox que soporta dos versiones (V0 y V1) con diferentes estilos y funcionalidades.'
|
|
200
|
+
}
|
|
201
|
+
}
|
|
202
|
+
}
|
|
203
|
+
};
|
|
204
|
+
const Template = args => {
|
|
205
|
+
const [{
|
|
206
|
+
value
|
|
207
|
+
}, updateArgs] = (0, _previewApi.useArgs)();
|
|
208
|
+
const handleChange = newValue => {
|
|
209
|
+
updateArgs({
|
|
210
|
+
value: newValue
|
|
211
|
+
});
|
|
212
|
+
if (args.onChange) args.onChange(newValue);
|
|
213
|
+
};
|
|
214
|
+
return /*#__PURE__*/_react.default.createElement(_.default, _extends({}, args, {
|
|
215
|
+
value: value,
|
|
216
|
+
onChange: handleChange
|
|
217
|
+
}));
|
|
218
|
+
};
|
|
219
|
+
const Playground = exports.Playground = {
|
|
220
|
+
render: Template,
|
|
221
|
+
name: 'Playground'
|
|
222
|
+
};
|
|
223
|
+
const VersionV0 = exports.VersionV0 = {
|
|
224
|
+
args: {
|
|
225
|
+
version: 'V0',
|
|
226
|
+
label: 'Versión V0'
|
|
227
|
+
},
|
|
228
|
+
render: Template,
|
|
229
|
+
name: 'Versión V0'
|
|
230
|
+
};
|
|
231
|
+
const VersionV1 = exports.VersionV1 = {
|
|
232
|
+
args: {
|
|
233
|
+
version: 'V1',
|
|
234
|
+
title: 'Versión V1'
|
|
235
|
+
},
|
|
236
|
+
render: Template,
|
|
237
|
+
name: 'Versión V1'
|
|
238
|
+
};
|
|
@@ -67,7 +67,9 @@ const UTCheckbox = _ref => {
|
|
|
67
67
|
dataTestId
|
|
68
68
|
} : {
|
|
69
69
|
'data-testid': dataTestId
|
|
70
|
-
}, rootComponentProps), /*#__PURE__*/_react.default.createElement(
|
|
70
|
+
}, rootComponentProps), /*#__PURE__*/_react.default.createElement("div", {
|
|
71
|
+
className: classes.content
|
|
72
|
+
}, /*#__PURE__*/_react.default.createElement(BoxContainerComponent, _extends({
|
|
71
73
|
className: classes.boxContainer
|
|
72
74
|
}, variant === _constants.BUTTON_VARIANT ? {
|
|
73
75
|
'data-testid': checkboxDataTestId
|
|
@@ -91,7 +93,7 @@ const UTCheckbox = _ref => {
|
|
|
91
93
|
highlighted: shouldHighlightLabel,
|
|
92
94
|
icon: icon,
|
|
93
95
|
required: required
|
|
94
|
-
}, title), error && /*#__PURE__*/_react.default.createElement(_UTValidation.default, {
|
|
96
|
+
}, title)), error && /*#__PURE__*/_react.default.createElement(_UTValidation.default, {
|
|
95
97
|
className: classes.validation,
|
|
96
98
|
validationData: validationData
|
|
97
99
|
})));
|
|
@@ -15,6 +15,11 @@ const baseCheckBoxTheme = theme => ({
|
|
|
15
15
|
flexWrap: 'wrap',
|
|
16
16
|
gap: '0px'
|
|
17
17
|
},
|
|
18
|
+
content: {
|
|
19
|
+
display: 'flex',
|
|
20
|
+
flexDirection: 'row',
|
|
21
|
+
alignItems: 'center'
|
|
22
|
+
},
|
|
18
23
|
iconContainer: {
|
|
19
24
|
border: "2px solid ".concat(theme.Palette.gray['04']),
|
|
20
25
|
borderRadius: 5,
|
|
@@ -70,6 +75,12 @@ const conditionalStyles = _ref => {
|
|
|
70
75
|
}
|
|
71
76
|
})
|
|
72
77
|
},
|
|
78
|
+
content: {
|
|
79
|
+
...(reversed && {
|
|
80
|
+
flexDirection: 'row-reverse',
|
|
81
|
+
justifyContent: 'space-between'
|
|
82
|
+
})
|
|
83
|
+
},
|
|
73
84
|
iconContainer: {
|
|
74
85
|
...(error && {
|
|
75
86
|
borderColor: theme.Palette.error['04']
|
|
@@ -127,6 +138,7 @@ const retrieveStyle = _ref2 => {
|
|
|
127
138
|
const error = meta && (0, _form.shouldShowErrors)(meta);
|
|
128
139
|
const {
|
|
129
140
|
container,
|
|
141
|
+
content,
|
|
130
142
|
iconContainer,
|
|
131
143
|
boxContainer,
|
|
132
144
|
title
|
|
@@ -142,6 +154,10 @@ const retrieveStyle = _ref2 => {
|
|
|
142
154
|
});
|
|
143
155
|
return {
|
|
144
156
|
box: baseThemeStyles.box,
|
|
157
|
+
content: {
|
|
158
|
+
...baseThemeStyles.content,
|
|
159
|
+
...content
|
|
160
|
+
},
|
|
145
161
|
container: {
|
|
146
162
|
...baseThemeStyles.container,
|
|
147
163
|
...container
|
|
@@ -95,6 +95,7 @@ exports.getClassNames = getClassNames;
|
|
|
95
95
|
const retrieveStyle = _ref4 => {
|
|
96
96
|
var _theme$Palette$action2, _theme$Palette$action3, _theme$Palette$action4;
|
|
97
97
|
let {
|
|
98
|
+
areaColor,
|
|
98
99
|
color,
|
|
99
100
|
colorTheme,
|
|
100
101
|
shade,
|
|
@@ -107,16 +108,16 @@ const retrieveStyle = _ref4 => {
|
|
|
107
108
|
});
|
|
108
109
|
const border = "2px solid ".concat(borderColor);
|
|
109
110
|
const defaultBackgrounds = {
|
|
110
|
-
accent: ((_theme$Palette$action2 = theme.Palette.actions) === null || _theme$Palette$action2 === void 0 ? void 0 : _theme$Palette$action2.accent['01']) || theme.Palette.accent['01'],
|
|
111
|
-
dark: theme.Palette.light['03'],
|
|
112
|
-
error: theme.Palette.error['01'],
|
|
113
|
-
gray: theme.Palette.light['03'],
|
|
114
|
-
information: theme.Palette.information['01'],
|
|
115
|
-
light: theme.Palette.light['03'],
|
|
116
|
-
negative: ((_theme$Palette$action3 = theme.Palette.actions) === null || _theme$Palette$action3 === void 0 ? void 0 : _theme$Palette$action3.negative['01']) || theme.Palette.negative['01'],
|
|
117
|
-
neutral: ((_theme$Palette$action4 = theme.Palette.actions) === null || _theme$Palette$action4 === void 0 ? void 0 : _theme$Palette$action4.neutral['01']) || theme.Palette.neutral['01'],
|
|
118
|
-
success: theme.Palette.success['01'],
|
|
119
|
-
warning: theme.Palette.warning['01']
|
|
111
|
+
accent: areaColor || ((_theme$Palette$action2 = theme.Palette.actions) === null || _theme$Palette$action2 === void 0 ? void 0 : _theme$Palette$action2.accent['01']) || theme.Palette.accent['01'],
|
|
112
|
+
dark: areaColor || theme.Palette.light['03'],
|
|
113
|
+
error: areaColor || theme.Palette.error['01'],
|
|
114
|
+
gray: areaColor || theme.Palette.light['03'],
|
|
115
|
+
information: areaColor || theme.Palette.information['01'],
|
|
116
|
+
light: areaColor || theme.Palette.light['03'],
|
|
117
|
+
negative: areaColor || ((_theme$Palette$action3 = theme.Palette.actions) === null || _theme$Palette$action3 === void 0 ? void 0 : _theme$Palette$action3.negative['01']) || theme.Palette.negative['01'],
|
|
118
|
+
neutral: areaColor || ((_theme$Palette$action4 = theme.Palette.actions) === null || _theme$Palette$action4 === void 0 ? void 0 : _theme$Palette$action4.neutral['01']) || theme.Palette.neutral['01'],
|
|
119
|
+
success: areaColor || theme.Palette.success['01'],
|
|
120
|
+
warning: areaColor || theme.Palette.warning['01']
|
|
120
121
|
};
|
|
121
122
|
const variantStyles = Object.keys(defaultBackgrounds).reduce((acc, type) => {
|
|
122
123
|
acc["".concat(type, "Default")] = {
|
|
@@ -12,6 +12,7 @@ var _UTTooltip = _interopRequireDefault(require("../UTTooltip"));
|
|
|
12
12
|
var _WithTheme = _interopRequireDefault(require("../WithTheme"));
|
|
13
13
|
var _componentUtils = require("../../utils/componentUtils");
|
|
14
14
|
var _UTIcon = _interopRequireDefault(require("../UTIcon"));
|
|
15
|
+
var _UTAvatar = _interopRequireDefault(require("../UTAvatar"));
|
|
15
16
|
var _constants = require("./constants");
|
|
16
17
|
var _theme = require("./theme");
|
|
17
18
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
@@ -56,6 +57,8 @@ const UTSelectableCard = _ref => {
|
|
|
56
57
|
dataTestId,
|
|
57
58
|
description,
|
|
58
59
|
disabled = false,
|
|
60
|
+
avatar,
|
|
61
|
+
avatarProps = {},
|
|
59
62
|
Icon,
|
|
60
63
|
iconProps = {},
|
|
61
64
|
onClick,
|
|
@@ -71,12 +74,15 @@ const UTSelectableCard = _ref => {
|
|
|
71
74
|
}, iconProps)) : /*#__PURE__*/_react.default.createElement(Icon, {
|
|
72
75
|
className: "".concat(classes.icon, " ").concat(classNames.icon)
|
|
73
76
|
});
|
|
77
|
+
const AvatarComponent = avatar ? /*#__PURE__*/_react.default.createElement(_UTAvatar.default, _extends({
|
|
78
|
+
size: _constants.SIZES.LARGE
|
|
79
|
+
}, avatarProps)) : null;
|
|
74
80
|
return /*#__PURE__*/_react.default.createElement("div", {
|
|
75
|
-
className: "\n
|
|
81
|
+
className: "\n ".concat(classes.item, "\n ").concat(disabled ? "".concat(classes["".concat(appearance, "DisabledContainer")], " ").concat(classNames["".concat(appearance, "DisabledContainer")] || '') : selected ? "".concat(classes["".concat(appearance, "SelectedContainer")], " ").concat(classNames["".concat(appearance, "SelectedContainer")] || '') : "".concat(classes["".concat(appearance, "Apareance")], " ").concat(classNames["".concat(appearance, "Apareance")] || ''), "\n ").concat(classes["".concat(size, "Size")], "\n"),
|
|
76
82
|
"data-testid": dataTestId,
|
|
77
83
|
onClick: () => !disabled && onClick(),
|
|
78
84
|
role: "button"
|
|
79
|
-
}, Icon && IconComponent, /*#__PURE__*/_react.default.createElement("div", {
|
|
85
|
+
}, Icon && !avatar && IconComponent, avatar && !Icon && AvatarComponent, /*#__PURE__*/_react.default.createElement("div", {
|
|
80
86
|
className: "".concat(classes.textContainer, " ").concat(checkIcon && classes.textContainerWithCheckedIcon)
|
|
81
87
|
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
82
88
|
className: classes.column
|
|
@@ -113,6 +119,8 @@ UTSelectableCard.propTypes = {
|
|
|
113
119
|
title: _propTypes.string
|
|
114
120
|
}),
|
|
115
121
|
appearance: (0, _propTypes.oneOf)([_constants.APPEARANCES.GRAY, _constants.APPEARANCES.WHITE]),
|
|
122
|
+
avatar: _propTypes.bool,
|
|
123
|
+
avatarProps: (0, _propTypes.objectOf)(_propTypes.string),
|
|
116
124
|
checkIcon: _propTypes.bool,
|
|
117
125
|
classes: (0, _propTypes.objectOf)(_propTypes.string),
|
|
118
126
|
classNames: (0, _propTypes.objectOf)(_propTypes.string),
|