@widergy/energy-ui 3.128.0 → 3.128.2
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/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,17 @@
|
|
|
1
|
+
## [3.128.2](https://github.com/widergy/energy-ui/compare/v3.128.1...v3.128.2) (2026-01-09)
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
### Bug Fixes
|
|
5
|
+
|
|
6
|
+
* [AXCH-799] block tests in CI ([#734](https://github.com/widergy/energy-ui/issues/734)) ([1ef1d75](https://github.com/widergy/energy-ui/commit/1ef1d75213c36e899f97b6f85aaa39b2cb0157a5))
|
|
7
|
+
|
|
8
|
+
## [3.128.1](https://github.com/widergy/energy-ui/compare/v3.128.0...v3.128.1) (2026-01-07)
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
### Bug Fixes
|
|
12
|
+
|
|
13
|
+
* checkbox ([#740](https://github.com/widergy/energy-ui/issues/740)) ([4a53159](https://github.com/widergy/energy-ui/commit/4a53159bac6e9b7f34ed40efd6f933436dc798ba))
|
|
14
|
+
|
|
1
15
|
# [3.128.0](https://github.com/widergy/energy-ui/compare/v3.127.0...v3.128.0) (2026-01-07)
|
|
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
|