@widergy/energy-ui 3.108.0 → 3.110.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 CHANGED
@@ -1,3 +1,17 @@
1
+ # [3.110.0](https://github.com/widergy/energy-ui/compare/v3.109.0...v3.110.0) (2025-10-07)
2
+
3
+
4
+ ### Features
5
+
6
+ * [COLB-77] utbuttongroup label and iconadornment fix ([#698](https://github.com/widergy/energy-ui/issues/698)) ([96b6af0](https://github.com/widergy/energy-ui/commit/96b6af0699daad00025b4982785e116f8649f6f3))
7
+
8
+ # [3.109.0](https://github.com/widergy/energy-ui/compare/v3.108.0...v3.109.0) (2025-10-07)
9
+
10
+
11
+ ### Features
12
+
13
+ * [COLB-77] uticon storybook ([#697](https://github.com/widergy/energy-ui/issues/697)) ([c698764](https://github.com/widergy/energy-ui/commit/c698764d6fa08d8e83b98423ef033321f22798e4))
14
+
1
15
  # [3.108.0](https://github.com/widergy/energy-ui/compare/v3.107.2...v3.108.0) (2025-10-02)
2
16
 
3
17
 
@@ -13,6 +13,7 @@ var _utils = require("./utils");
13
13
  function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
14
14
  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); }
15
15
  const IconAdornment = _ref => {
16
+ var _inputStyle$root;
16
17
  let {
17
18
  changeIconOnError = true,
18
19
  changeOnError,
@@ -34,7 +35,7 @@ const IconAdornment = _ref => {
34
35
  size: _constants.ICON_SIZE
35
36
  }, (0, _utils.getIconColorProps)(effectiveChangeOnError, changeOnFocus, colorTheme, error, focused, shade))) : /*#__PURE__*/_react.default.createElement(Icon, {
36
37
  size: _constants.ICON_SIZE,
37
- fill: inputStyle.root.color
38
+ fill: inputStyle === null || inputStyle === void 0 || (_inputStyle$root = inputStyle.root) === null || _inputStyle$root === void 0 ? void 0 : _inputStyle$root.color
38
39
  });
39
40
  };
40
41
  IconAdornment.propTypes = {
@@ -29,7 +29,8 @@ const UTButtonGroup = _ref => {
29
29
  dataTestId,
30
30
  Icon,
31
31
  id,
32
- onClick
32
+ onClick,
33
+ label
33
34
  } = _ref2;
34
35
  return /*#__PURE__*/_react.default.createElement(_UTButton.default, {
35
36
  colorTheme: colorTheme,
@@ -39,13 +40,15 @@ const UTButtonGroup = _ref => {
39
40
  onClick: onClick,
40
41
  size: size,
41
42
  variant: selected === id ? 'filled' : 'text'
42
- });
43
+ }, label);
43
44
  }));
44
45
  };
45
46
  UTButtonGroup.propTypes = {
46
47
  actions: (0, _propTypes.arrayOf)((0, _propTypes.shape)({
48
+ dataTestId: _propTypes.string,
47
49
  Icon: (0, _propTypes.oneOfType)([_propTypes.string, _propTypes.element]),
48
50
  id: (0, _propTypes.oneOfType)([_propTypes.number, _propTypes.string]),
51
+ label: _propTypes.string,
49
52
  onClick: _propTypes.func
50
53
  })).isRequired,
51
54
  classes: (0, _propTypes.objectOf)(_propTypes.string),
@@ -0,0 +1,201 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.default = exports.Variants = exports.Flags = exports.Default = void 0;
7
+ var _react = _interopRequireDefault(require("react"));
8
+ var _utils = require("stories/utils");
9
+ var _Palette = require("../../constants/Palette");
10
+ var _constants = require("./constants");
11
+ var _ = _interopRequireDefault(require("."));
12
+ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
13
+ 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); }
14
+ const ICON_EXAMPLES = ['IconHome', 'IconBolt', 'IconDroplet', 'IconCar', 'IconReceipt', 'IconArchive', 'IconUser', 'IconBell', 'IconInfoCircle'];
15
+ const ICON_FILLED_EXAMPLES = ['IconHomeFilled', 'IconBoltFilled', 'IconDropletFilled', 'IconCarFilled', 'IconReceiptFilled', 'IconArchiveFilled', 'IconUserFilled', 'IconBellFilled', 'IconInfoCircleFilled'];
16
+ const ENERGY_ICON_EXAMPLES = ['EnergyIconBottledGas', 'EnergyIconBottledGasPlus', 'EnergyIconCar', 'EnergyIconCarbonFootprint', 'EnergyIconCart', 'EnergyIconChatSparkFilled', 'EnergyIconEdit', 'EnergyIconHome', 'EnergyIconMessageEdit', 'EnergyIconQuestionFilled', 'EnergyIconSendFilled', 'EnergyIconTruck', 'EnergyIconConsumptionBoxPlusFilled', 'EnergyIconConsumptionBoxRightFilled', 'EnergyIconConsumptionBoxMinusFilled'];
17
+ const FLAG_EXAMPLES = [
18
+ // South America
19
+ 'AR', 'BO', 'BR', 'CL', 'CO', 'EC', 'GY', 'PY', 'PE', 'SR', 'UY', 'VE',
20
+ // North & Central America
21
+ 'CA', 'CR', 'CU', 'DO', 'GT', 'HN', 'JM', 'MX', 'NI', 'PA', 'PR', 'SV', 'US',
22
+ // Europe
23
+ 'AL', 'AT', 'BE', 'BG', 'CH', 'CY', 'CZ', 'DE', 'DK', 'EE', 'ES', 'FI', 'FR', 'GB', 'GR', 'HR', 'HU', 'IE', 'IS', 'IT', 'LT', 'LU', 'LV', 'MT', 'NL', 'NO', 'PL', 'PT', 'RO', 'RS', 'SE', 'SI', 'SK', 'UA',
24
+ // Africa
25
+ 'DZ', 'EG', 'ET', 'GH', 'KE', 'MA', 'NG', 'SN', 'ZA', 'TZ', 'UG', 'ZM', 'ZW',
26
+ // Middle East
27
+ 'AE', 'IL', 'IQ', 'IR', 'JO', 'KW', 'LB', 'OM', 'QA', 'SA', 'SY', 'TR',
28
+ // Asia
29
+ 'BD', 'CN', 'HK', 'ID', 'IN', 'JP', 'KH', 'KR', 'LA', 'MY', 'NP', 'PH', 'PK', 'SG', 'TH', 'TW', 'VN',
30
+ // Oceania
31
+ 'AU', 'FJ', 'NZ', 'PG', 'WS'];
32
+ var _default = exports.default = {
33
+ component: _.default,
34
+ argTypes: {
35
+ area: {
36
+ control: 'boolean',
37
+ description: 'Determina si el ícono renderiza un área redondeada a su alrededor',
38
+ table: {
39
+ defaultValue: {
40
+ summary: false
41
+ },
42
+ type: {
43
+ summary: 'boolean'
44
+ }
45
+ }
46
+ },
47
+ colorTheme: {
48
+ control: {
49
+ type: 'select'
50
+ },
51
+ options: [...Object.values(_Palette.COLOR_THEMES), undefined],
52
+ description: 'Define el theme de la paleta para el ícono',
53
+ table: {
54
+ type: {
55
+ summary: (0, _utils.joinArgTypes)(Object.keys(_Palette.COLOR_THEMES))
56
+ }
57
+ }
58
+ },
59
+ fillShade: {
60
+ control: {
61
+ type: 'select'
62
+ },
63
+ options: [...Object.values(_Palette.COLOR_SHADES), undefined],
64
+ description: 'Define la shade de la paleta para el fill del icono',
65
+ table: {
66
+ type: {
67
+ summary: (0, _utils.joinArgTypes)(Object.keys(_Palette.COLOR_SHADES))
68
+ }
69
+ }
70
+ },
71
+ fillTheme: {
72
+ control: {
73
+ type: 'select'
74
+ },
75
+ options: [...Object.values(_Palette.COLOR_THEMES), undefined],
76
+ description: 'Define el theme de la paleta para el fill del ícono',
77
+ table: {
78
+ type: {
79
+ summary: (0, _utils.joinArgTypes)(Object.keys(_Palette.COLOR_THEMES))
80
+ }
81
+ }
82
+ },
83
+ name: {
84
+ control: 'text',
85
+ description: 'El nombre del ícono en TablerIcons',
86
+ table: {
87
+ type: {
88
+ summary: 'string'
89
+ }
90
+ }
91
+ },
92
+ shade: {
93
+ control: {
94
+ type: 'select'
95
+ },
96
+ options: [...Object.values(_Palette.COLOR_SHADES), undefined],
97
+ description: 'Define la shade de la paleta para el ícono',
98
+ table: {
99
+ type: {
100
+ summary: (0, _utils.joinArgTypes)(Object.keys(_Palette.COLOR_SHADES))
101
+ }
102
+ }
103
+ },
104
+ size: {
105
+ control: {
106
+ type: 'number',
107
+ min: 0,
108
+ max: 100
109
+ },
110
+ description: 'Tamaño del icono',
111
+ table: {
112
+ type: {
113
+ summary: 'number'
114
+ }
115
+ }
116
+ },
117
+ variant: {
118
+ control: {
119
+ type: 'select'
120
+ },
121
+ description: 'Variante del ícono',
122
+ options: ['default', 'outlined'],
123
+ table: {
124
+ type: {
125
+ summary: (0, _utils.joinArgTypes)(['default', 'outlined'])
126
+ }
127
+ }
128
+ }
129
+ }
130
+ };
131
+ const Default = exports.Default = {
132
+ name: 'Playground',
133
+ args: {
134
+ name: 'IconHome',
135
+ area: false,
136
+ colorTheme: undefined,
137
+ fillShade: undefined,
138
+ fillTheme: undefined,
139
+ shade: undefined,
140
+ size: undefined,
141
+ variant: _constants.DEFAULT_VARIANT
142
+ }
143
+ };
144
+ const Variants = exports.Variants = {
145
+ args: {},
146
+ render: args => /*#__PURE__*/_react.default.createElement("div", {
147
+ style: {
148
+ display: 'flex',
149
+ flexDirection: 'column',
150
+ gap: '16px'
151
+ }
152
+ }, /*#__PURE__*/_react.default.createElement("div", null, "Normal Icons", ICON_EXAMPLES.map(name => /*#__PURE__*/_react.default.createElement("div", {
153
+ key: name,
154
+ style: {
155
+ display: 'flex',
156
+ gap: '16px',
157
+ flexWrap: 'wrap'
158
+ }
159
+ }, Object.keys(_Palette.COLOR_THEMES).map(colorTheme => /*#__PURE__*/_react.default.createElement(_.default, _extends({
160
+ key: colorTheme,
161
+ name: name,
162
+ colorTheme: colorTheme
163
+ }, args)))))), /*#__PURE__*/_react.default.createElement("div", null, "Filled Icons", ICON_FILLED_EXAMPLES.map(name => /*#__PURE__*/_react.default.createElement("div", {
164
+ key: name,
165
+ style: {
166
+ display: 'flex',
167
+ gap: '16px',
168
+ flexWrap: 'wrap'
169
+ }
170
+ }, Object.keys(_Palette.COLOR_THEMES).map(colorTheme => /*#__PURE__*/_react.default.createElement(_.default, _extends({
171
+ key: colorTheme,
172
+ name: name,
173
+ colorTheme: colorTheme
174
+ }, args)))))), /*#__PURE__*/_react.default.createElement("div", null, "Energy Icons", ENERGY_ICON_EXAMPLES.map(name => /*#__PURE__*/_react.default.createElement("div", {
175
+ key: name,
176
+ style: {
177
+ display: 'flex',
178
+ gap: '16px',
179
+ flexWrap: 'wrap'
180
+ }
181
+ }, Object.keys(_Palette.COLOR_THEMES).map(colorTheme => /*#__PURE__*/_react.default.createElement(_.default, _extends({
182
+ key: colorTheme,
183
+ name: name,
184
+ colorTheme: colorTheme
185
+ }, args)))))))
186
+ };
187
+ const Flags = exports.Flags = {
188
+ args: {
189
+ size: 100
190
+ },
191
+ render: args => /*#__PURE__*/_react.default.createElement("div", {
192
+ style: {
193
+ display: 'flex',
194
+ gap: '16px',
195
+ flexWrap: 'wrap'
196
+ }
197
+ }, FLAG_EXAMPLES.map(name => /*#__PURE__*/_react.default.createElement(_.default, _extends({
198
+ key: name,
199
+ name: name
200
+ }, args))))
201
+ };
@@ -0,0 +1,6 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor"
2
+ class="icon icon-tabler icons-tabler-filled icon-tabler-bolt">
3
+ <path stroke="none" d="M0 0h24v24H0z" fill="none" />
4
+ <path
5
+ d="M13 2l.018 .001l.016 .001l.083 .005l.011 .002h.011l.038 .009l.052 .008l.016 .006l.011 .001l.029 .011l.052 .014l.019 .009l.015 .004l.028 .014l.04 .017l.021 .012l.022 .01l.023 .015l.031 .017l.034 .024l.018 .011l.013 .012l.024 .017l.038 .034l.022 .017l.008 .01l.014 .012l.036 .041l.026 .027l.006 .009c.12 .147 .196 .322 .218 .513l.001 .012l.002 .041l.004 .064v6h5a1 1 0 0 1 .868 1.497l-.06 .091l-8 11c-.568 .783 -1.808 .38 -1.808 -.588v-6h-5a1 1 0 0 1 -.868 -1.497l.06 -.091l8 -11l.01 -.013l.018 -.024l.033 -.038l.018 -.022l.009 -.008l.013 -.014l.04 -.036l.028 -.026l.008 -.006a1 1 0 0 1 .402 -.199l.011 -.001l.027 -.005l.074 -.013l.011 -.001l.041 -.002z" />
6
+ </svg>
@@ -0,0 +1,6 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor"
2
+ class="icon icon-tabler icons-tabler-filled icon-tabler-flame">
3
+ <path stroke="none" d="M0 0h24v24H0z" fill="none" />
4
+ <path
5
+ d="M10 2c0 -.88 1.056 -1.331 1.692 -.722c1.958 1.876 3.096 5.995 1.75 9.12l-.08 .174l.012 .003c.625 .133 1.203 -.43 2.303 -2.173l.14 -.224a1 1 0 0 1 1.582 -.153c1.334 1.435 2.601 4.377 2.601 6.27c0 4.265 -3.591 7.705 -8 7.705s-8 -3.44 -8 -7.706c0 -2.252 1.022 -4.716 2.632 -6.301l.605 -.589c.241 -.236 .434 -.43 .618 -.624c1.43 -1.512 2.145 -2.924 2.145 -4.78" />
6
+ </svg>
@@ -0,0 +1,6 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor"
2
+ class="icon icon-tabler icons-tabler-filled icon-tabler-presentation">
3
+ <path stroke="none" d="M0 0h24v24H0z" fill="none" />
4
+ <path
5
+ d="M21 3a1 1 0 0 1 0 2v9a3 3 0 0 1 -3 3h-5v2h2a1 1 0 0 1 0 2h-6a1 1 0 0 1 0 -2h2v-2h-5a3 3 0 0 1 -3 -3v-9a1 1 0 1 1 0 -2zm-4.293 4.293a1 1 0 0 0 -1.414 0l-2.293 2.292l-1.293 -1.292a1 1 0 0 0 -1.414 0l-3 3a1 1 0 0 0 0 1.414l.094 .083a1 1 0 0 0 1.32 -.083l2.293 -2.292l1.293 1.292a1 1 0 0 0 1.414 0l3 -3a1 1 0 0 0 0 -1.414" />
6
+ </svg>
@@ -311,6 +311,54 @@ EnergyIconTruck.defaultProps = {
311
311
  stroke: "currentColor",
312
312
  xmlns: "http://www.w3.org/2000/svg"
313
313
  };
314
+ var EnergyIconFlameFilled = function EnergyIconFlameFilled(props) {
315
+ return /*#__PURE__*/_react.default.createElement("svg", props, /*#__PURE__*/_react.default.createElement("path", {
316
+ d: "M0 0h24v24H0z",
317
+ fill: "none"
318
+ }), /*#__PURE__*/_react.default.createElement("path", {
319
+ d: "M10 2c0-.88 1.056-1.331 1.692-.722 1.958 1.876 3.096 5.995 1.75 9.12l-.08.174.012.003c.625.133 1.203-.43 2.303-2.173l.14-.224a1 1 0 0 1 1.582-.153C18.733 9.46 20 12.402 20 14.295 20 18.56 16.409 22 12 22s-8-3.44-8-7.706c0-2.252 1.022-4.716 2.632-6.301l.605-.589c.241-.236.434-.43.618-.624C9.285 5.268 10 3.856 10 2"
320
+ }));
321
+ };
322
+ EnergyIconFlameFilled.defaultProps = {
323
+ xmlns: "http://www.w3.org/2000/svg",
324
+ width: "24",
325
+ height: "24",
326
+ viewBox: "0 0 24 24",
327
+ fill: "currentColor",
328
+ className: "icon icon-tabler icons-tabler-filled icon-tabler-flame"
329
+ };
330
+ var EnergyIconBoltFilled = function EnergyIconBoltFilled(props) {
331
+ return /*#__PURE__*/_react.default.createElement("svg", props, /*#__PURE__*/_react.default.createElement("path", {
332
+ d: "M0 0h24v24H0z",
333
+ fill: "none"
334
+ }), /*#__PURE__*/_react.default.createElement("path", {
335
+ d: "m13 2 .018.001.016.001.083.005.011.002h.011l.038.009.052.008.016.006.011.001.029.011.052.014.019.009.015.004.028.014.04.017.021.012.022.01.023.015.031.017.034.024.018.011.013.012.024.017.038.034.022.017.008.01.014.012.036.041.026.027.006.009c.12.147.196.322.218.513l.001.012.002.041L14 3v6h5a1 1 0 0 1 .868 1.497l-.06.091-8 11C11.24 22.371 10 21.968 10 21v-6H5a1 1 0 0 1-.868-1.497l.06-.091 8-11 .01-.013.018-.024.033-.038.018-.022.009-.008.013-.014.04-.036.028-.026.008-.006a1 1 0 0 1 .402-.199l.011-.001.027-.005.074-.013.011-.001.041-.002z"
336
+ }));
337
+ };
338
+ EnergyIconBoltFilled.defaultProps = {
339
+ xmlns: "http://www.w3.org/2000/svg",
340
+ width: "24",
341
+ height: "24",
342
+ viewBox: "0 0 24 24",
343
+ fill: "currentColor",
344
+ className: "icon icon-tabler icons-tabler-filled icon-tabler-bolt"
345
+ };
346
+ var EnergyIconPresentationFilled = function EnergyIconPresentationFilled(props) {
347
+ return /*#__PURE__*/_react.default.createElement("svg", props, /*#__PURE__*/_react.default.createElement("path", {
348
+ d: "M0 0h24v24H0z",
349
+ fill: "none"
350
+ }), /*#__PURE__*/_react.default.createElement("path", {
351
+ d: "M21 3a1 1 0 0 1 0 2v9a3 3 0 0 1-3 3h-5v2h2a1 1 0 0 1 0 2H9a1 1 0 0 1 0-2h2v-2H6a3 3 0 0 1-3-3V5a1 1 0 1 1 0-2zm-4.293 4.293a1 1 0 0 0-1.414 0L13 9.585l-1.293-1.292a1 1 0 0 0-1.414 0l-3 3a1 1 0 0 0 0 1.414l.094.083a1 1 0 0 0 1.32-.083L11 10.415l1.293 1.292a1 1 0 0 0 1.414 0l3-3a1 1 0 0 0 0-1.414"
352
+ }));
353
+ };
354
+ EnergyIconPresentationFilled.defaultProps = {
355
+ xmlns: "http://www.w3.org/2000/svg",
356
+ width: "24",
357
+ height: "24",
358
+ viewBox: "0 0 24 24",
359
+ fill: "currentColor",
360
+ className: "icon icon-tabler icons-tabler-filled icon-tabler-presentation"
361
+ };
314
362
  const FILLED_ICON_COLOR = exports.FILLED_ICON_COLOR = 'transparent';
315
363
  const DEFAULT_INTERNAL_SHADE = exports.DEFAULT_INTERNAL_SHADE = _Palette.COLOR_SHADES.shade02;
316
364
  const DEFAULT_COLOR_THEME = exports.DEFAULT_COLOR_THEME = _Palette.COLOR_THEMES.dark;
@@ -334,5 +382,8 @@ const ENERGY_ICONS = exports.ENERGY_ICONS = {
334
382
  EnergyIconTruck,
335
383
  EnergyIconConsumptionBoxPlusFilled,
336
384
  EnergyIconConsumptionBoxRightFilled,
337
- EnergyIconConsumptionBoxMinusFilled
385
+ EnergyIconConsumptionBoxMinusFilled,
386
+ EnergyIconFlameFilled,
387
+ EnergyIconBoltFilled,
388
+ EnergyIconPresentationFilled
338
389
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@widergy/energy-ui",
3
- "version": "3.108.0",
3
+ "version": "3.110.0",
4
4
  "description": "Widergy Web Components",
5
5
  "author": "widergy",
6
6
  "license": "MIT",