@widergy/energy-ui 3.85.1 → 3.86.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/UTDocumentWizard/constants.js +1 -3
- package/dist/components/UTDocumentWizard/index.js +3 -4
- package/dist/components/UTLabel/README.md +30 -25
- package/dist/components/UTLabel/constants.js +1 -0
- package/dist/components/UTLabel/index.js +4 -1
- package/dist/components/UTLabel/styles.module.scss +15 -0
- package/dist/components/UTPanel/versions/V1/README.md +6 -0
- package/dist/components/UTPanel/versions/V1/index.js +29 -2
- package/dist/components/UTPanel/versions/V1/styles.module.scss +7 -0
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,17 @@
|
|
|
1
|
+
# [3.86.0](https://github.com/widergy/energy-ui/compare/v3.85.2...v3.86.0) (2025-07-11)
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
### Features
|
|
5
|
+
|
|
6
|
+
* [SFPE-406] UTPanel Pagination and MainStatus ([#639](https://github.com/widergy/energy-ui/issues/639)) ([2d726ad](https://github.com/widergy/energy-ui/commit/2d726ad8e41c8289d640871c53b24fe99368ab8b))
|
|
7
|
+
|
|
8
|
+
## [3.85.2](https://github.com/widergy/energy-ui/compare/v3.85.1...v3.85.2) (2025-07-10)
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
### Bug Fixes
|
|
12
|
+
|
|
13
|
+
* [CX-844] utility widergy visual fixes ([#636](https://github.com/widergy/energy-ui/issues/636)) ([c322070](https://github.com/widergy/energy-ui/commit/c322070bd6d841ae31e0d5ac2d13e41164556437))
|
|
14
|
+
|
|
1
15
|
## [3.85.1](https://github.com/widergy/energy-ui/compare/v3.85.0...v3.85.1) (2025-07-08)
|
|
2
16
|
|
|
3
17
|
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.SLIDE_PROPS = exports.PREV = exports.NEXT = exports.
|
|
6
|
+
exports.SLIDE_PROPS = exports.PREV = exports.NEXT = exports.LAST_OPTION_PROPS = void 0;
|
|
7
7
|
const SLIDE_PROPS = exports.SLIDE_PROPS = {
|
|
8
8
|
style: {
|
|
9
9
|
borderTopLeftRadius: '16px',
|
|
@@ -15,7 +15,5 @@ const LAST_OPTION_PROPS = exports.LAST_OPTION_PROPS = {
|
|
|
15
15
|
marginRight: '4px'
|
|
16
16
|
}
|
|
17
17
|
};
|
|
18
|
-
const LOADING_SIZE = exports.LOADING_SIZE = 80;
|
|
19
|
-
const LOADING_THICKNESS = exports.LOADING_THICKNESS = 5;
|
|
20
18
|
const NEXT = exports.NEXT = 'next';
|
|
21
19
|
const PREV = exports.PREV = 'prev';
|
|
@@ -8,7 +8,7 @@ var _react = _interopRequireWildcard(require("react"));
|
|
|
8
8
|
var _propTypes = require("prop-types");
|
|
9
9
|
var _UTTabs = _interopRequireDefault(require("../UTTabs"));
|
|
10
10
|
var _UTLabel = _interopRequireDefault(require("../UTLabel"));
|
|
11
|
-
var
|
|
11
|
+
var _UTLoading = _interopRequireDefault(require("../UTLoading"));
|
|
12
12
|
var _UTSheet = _interopRequireDefault(require("../UTSheet"));
|
|
13
13
|
var _useScreenSize = require("../../utils/useScreenSize");
|
|
14
14
|
var _utils = require("./utils");
|
|
@@ -150,9 +150,8 @@ const UTDocumentWizard = _ref => {
|
|
|
150
150
|
className: _stylesModule.default.scrollContainer
|
|
151
151
|
}, isChangingTab && /*#__PURE__*/_react.default.createElement("div", {
|
|
152
152
|
className: _stylesModule.default.loadingContainer
|
|
153
|
-
}, /*#__PURE__*/_react.default.createElement(
|
|
154
|
-
|
|
155
|
-
thickness: _constants.LOADING_THICKNESS
|
|
153
|
+
}, /*#__PURE__*/_react.default.createElement(_UTLoading.default, {
|
|
154
|
+
loading: true
|
|
156
155
|
})), !isChangingTab && actualPage && /*#__PURE__*/_react.default.createElement(_PageWizard.default, {
|
|
157
156
|
canvasRef: canvasRef,
|
|
158
157
|
classNames: classNames,
|
|
@@ -4,16 +4,18 @@ Component used for displaying text values and markdown.
|
|
|
4
4
|
|
|
5
5
|
## Props
|
|
6
6
|
|
|
7
|
-
|
|
8
|
-
|
|
|
9
|
-
|
|
|
10
|
-
|
|
|
11
|
-
|
|
|
12
|
-
|
|
|
13
|
-
|
|
|
14
|
-
|
|
|
15
|
-
|
|
|
16
|
-
|
|
|
7
|
+
|
|
8
|
+
| Name | Type | Default | Description |
|
|
9
|
+
| ------------------- | -------- | ------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
10
|
+
| align | string | 'left' | Alignment of the text content. Accepts values like 'left', 'center', 'right', or 'justify'. |
|
|
11
|
+
| className | string | | Additional classes. |
|
|
12
|
+
| classes | string | | Classes returned by UTLabel's own[theme](./theme.js#L40) `retrieveStyle`. |
|
|
13
|
+
| colorTheme | string | 'primary' | Color theme to style the UTLabel. Has to be defined in the proyect theme.[Example](#colortheme). |
|
|
14
|
+
| markdownRenderers | object | [MARKDOWN_RENDERERS](./constants.js#L36) | ⚠️ Requires`withMarkdown` to be set to `true` <br />Object mapping tag names to React components. The keys in components are HTML equivalents for the things you write with markdown [List of tags](#markdown-renderers). |
|
|
15
|
+
| title | string | | [Title global attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/title). |
|
|
16
|
+
| variant | string | 'body' | Defines html component to use. For a list of available variants, check[here](#variants). Font sizes can be overwritten (⚠️ for the entire proyect) through the proyect's theme. |
|
|
17
|
+
| weight | string | 'regular' | Defines font-weight to be used. For a list of available options, check[here](#font-weights). |
|
|
18
|
+
| withMarkdown | bool | false | Tells the component whether or not to render text inside as markdown. |
|
|
17
19
|
|
|
18
20
|
## Examples
|
|
19
21
|
|
|
@@ -37,24 +39,25 @@ UTLabel: {
|
|
|
37
39
|
|
|
38
40
|
### Markdown renderers
|
|
39
41
|
|
|
40
|
-
|
|
41
|
-
|
|
|
42
|
-
|
|
|
43
|
-
| `
|
|
44
|
-
| `
|
|
42
|
+
|
|
43
|
+
| markdown | component |
|
|
44
|
+
| --------------------------- | ------------------------------------------ |
|
|
45
|
+
| `blockquote` | `blockquote` |
|
|
46
|
+
| `break` | `br` |
|
|
47
|
+
| `code`, `inlineCode` | `code`, `pre`**\*** |
|
|
45
48
|
| `definition` | **†** |
|
|
46
|
-
| `emphasis` | `em`
|
|
49
|
+
| `emphasis` | `em` |
|
|
47
50
|
| `heading` | `h1`, `h2`, `h3`, `h4`, `h5`, `h6`**§** |
|
|
48
51
|
| `image`, `imageReference` | `img`**†** |
|
|
49
52
|
| `link`, `linkReference` | `a`**†** |
|
|
50
53
|
| `list` | `ol`, `ul`**¶** |
|
|
51
|
-
| `listItem` | `li`
|
|
52
|
-
| `paragraph` | `p`
|
|
53
|
-
| `strong` | `strong`
|
|
54
|
-
| `text` |
|
|
55
|
-
| `thematicBreak` | `hr`
|
|
54
|
+
| `listItem` | `li` |
|
|
55
|
+
| `paragraph` | `p` |
|
|
56
|
+
| `strong` | `strong` |
|
|
57
|
+
| `text` | |
|
|
58
|
+
| `thematicBreak` | `hr` |
|
|
56
59
|
|
|
57
|
-
-
|
|
60
|
+
- **\*** It’s possible to differentiate between code based on the `inline`
|
|
58
61
|
prop.
|
|
59
62
|
Block code is also wrapped in a `pre`
|
|
60
63
|
- **†** Resource (`[text](url)`) and reference (`[text][id]`) style links and
|
|
@@ -92,7 +95,7 @@ There are some extra props passed.
|
|
|
92
95
|
- `inline` (`boolean?`)
|
|
93
96
|
— set to `true` for inline code
|
|
94
97
|
- `className` (`string?`)
|
|
95
|
-
— set to `language-js` or so when using ` ```js
|
|
98
|
+
— set to `language-js` or so when using ` ```js`
|
|
96
99
|
- `h1`, `h2`, `h3`, `h4`, `h5`, `h6`
|
|
97
100
|
- `level` (`number` beween 1 and 6)
|
|
98
101
|
— heading rank
|
|
@@ -141,8 +144,9 @@ info.
|
|
|
141
144
|
|
|
142
145
|
### variants
|
|
143
146
|
|
|
147
|
+
|
|
144
148
|
| Variant | Component | Default font size |
|
|
145
|
-
|
|
|
149
|
+
| ----------- | ----------- | ------------------- |
|
|
146
150
|
| title1 | h1 | 30px |
|
|
147
151
|
| title2 | h2 | 24px |
|
|
148
152
|
| title3 | h3 | 22px |
|
|
@@ -156,8 +160,9 @@ info.
|
|
|
156
160
|
|
|
157
161
|
### font-weights
|
|
158
162
|
|
|
163
|
+
|
|
159
164
|
| Name | Weight |
|
|
160
|
-
|
|
|
165
|
+
| ------------ | -------- |
|
|
161
166
|
| thin | 100 |
|
|
162
167
|
| extralight | 200 |
|
|
163
168
|
| light | 300 |
|
|
@@ -15,12 +15,14 @@ var _UTSkeleton = _interopRequireDefault(require("../UTSkeleton"));
|
|
|
15
15
|
var _WithTheme = _interopRequireDefault(require("../WithTheme"));
|
|
16
16
|
var _constants = require("./constants");
|
|
17
17
|
var _theme = require("./theme");
|
|
18
|
+
var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
|
|
18
19
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
19
20
|
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
|
|
20
21
|
/* eslint-disable react/no-children-prop */
|
|
21
22
|
|
|
22
23
|
const UTLabel = _ref => {
|
|
23
24
|
let {
|
|
25
|
+
align,
|
|
24
26
|
children,
|
|
25
27
|
className,
|
|
26
28
|
classes: theme,
|
|
@@ -36,7 +38,7 @@ const UTLabel = _ref => {
|
|
|
36
38
|
className
|
|
37
39
|
}), [theme, className]);
|
|
38
40
|
return /*#__PURE__*/_react.default.createElement(_UTSkeleton.default, null, /*#__PURE__*/_react.default.createElement(Component, {
|
|
39
|
-
className: "".concat(classes.root, " ").concat(classes.className).trim(),
|
|
41
|
+
className: "".concat(classes.root, " ").concat(_stylesModule.default["".concat(align, "Alignment")] || '', " ").concat(classes.className).trim(),
|
|
40
42
|
"data-testid": dataTestId,
|
|
41
43
|
title: title
|
|
42
44
|
}, withMarkdown && /*#__PURE__*/_react.default.createElement(_reactMarkdown.default, {
|
|
@@ -51,6 +53,7 @@ const UTLabel = _ref => {
|
|
|
51
53
|
};
|
|
52
54
|
UTLabel.defaultProps = _constants.DEFAULT_PROPS;
|
|
53
55
|
UTLabel.propTypes = {
|
|
56
|
+
align: _propTypes.string,
|
|
54
57
|
classes: (0, _propTypes.objectOf)(_propTypes.string),
|
|
55
58
|
className: _propTypes.string,
|
|
56
59
|
dataTestId: _propTypes.string,
|
|
@@ -34,3 +34,9 @@ Component used for displaying a side panel.
|
|
|
34
34
|
| subtitle | string | | Subtitle to show |
|
|
35
35
|
| title | string | | Title to show |
|
|
36
36
|
| titleProps | object | {} | UTLabel props for title. Default props: variant="title2" weight="medium" |
|
|
37
|
+
| collapsablePanel | bool | false | Indicates if panel can be collapsed when inline mode is enabled |
|
|
38
|
+
| inline | bool | false | Indicates if panel should be rendered inline instead of as a modal |
|
|
39
|
+
| paginationProps | object | {} | Object containing pagination configuration: nextButton (UTButton props), backButton (UTButton props), currentPage (number), totalPages (number) |
|
|
40
|
+
| showMainStatus | bool | false | Shows a status indicator next to the title |
|
|
41
|
+
| showPagination | bool | false | Shows pagination controls in the header |
|
|
42
|
+
| statusProps | object | {} | Props passed to UTStatus component when showMainStatus is true |
|
|
@@ -12,6 +12,7 @@ var _propTypes = require("prop-types");
|
|
|
12
12
|
var _isArray = _interopRequireDefault(require("lodash/isArray"));
|
|
13
13
|
var _isEmpty = _interopRequireDefault(require("lodash/isEmpty"));
|
|
14
14
|
var _UTButton = _interopRequireDefault(require("../../../UTButton"));
|
|
15
|
+
var _UTStatus = _interopRequireDefault(require("../../../UTStatus"));
|
|
15
16
|
var _UTLabel = _interopRequireDefault(require("../../../UTLabel"));
|
|
16
17
|
var _UTMenu = _interopRequireDefault(require("../../../UTMenu"));
|
|
17
18
|
var _index = _interopRequireDefault(require("../../../UTProgressBar/index.js"));
|
|
@@ -55,11 +56,15 @@ const UTPanel = _ref => {
|
|
|
55
56
|
onEndReachedCallback,
|
|
56
57
|
onOpen = () => {},
|
|
57
58
|
open,
|
|
59
|
+
paginationProps = {},
|
|
58
60
|
panelSide,
|
|
59
61
|
perfectScrollbarOptions,
|
|
60
62
|
secondaryActionDataTestId = panel.secondaryAction,
|
|
63
|
+
showMainStatus = false,
|
|
64
|
+
showPagination = false,
|
|
61
65
|
singleHeaderItemsColumn = false,
|
|
62
66
|
size = 'M',
|
|
67
|
+
statusProps = {},
|
|
63
68
|
stepsCount,
|
|
64
69
|
subtitle = '',
|
|
65
70
|
title = '',
|
|
@@ -75,6 +80,12 @@ const UTPanel = _ref => {
|
|
|
75
80
|
const secondaryActionAsMenu = (0, _isArray.default)(headerSecondaryActionButton);
|
|
76
81
|
const panelIsCollapsible = collapsablePanel && inline;
|
|
77
82
|
const panelIsCollapsed = panelIsCollapsible && !open;
|
|
83
|
+
const {
|
|
84
|
+
nextButton = {},
|
|
85
|
+
backButton = {},
|
|
86
|
+
currentPage = 1,
|
|
87
|
+
totalPages = 1
|
|
88
|
+
} = paginationProps;
|
|
78
89
|
const {
|
|
79
90
|
closeButton: closeButtonClass,
|
|
80
91
|
headerContainer: headerContainerClass,
|
|
@@ -112,7 +123,17 @@ const UTPanel = _ref => {
|
|
|
112
123
|
className: _stylesModule.default.controlAreaContainer
|
|
113
124
|
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
114
125
|
className: _stylesModule.default.controlAreaBar
|
|
115
|
-
},
|
|
126
|
+
}, showPagination && /*#__PURE__*/_react.default.createElement("div", {
|
|
127
|
+
className: _stylesModule.default.paginationContainer
|
|
128
|
+
}, /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
|
|
129
|
+
colorTheme: "gray"
|
|
130
|
+
}, "".concat(currentPage, " / ").concat(totalPages)), /*#__PURE__*/_react.default.createElement(_UTButton.default, _extends({
|
|
131
|
+
Icon: "IconChevronLeft",
|
|
132
|
+
variant: "text"
|
|
133
|
+
}, backButton)), /*#__PURE__*/_react.default.createElement(_UTButton.default, _extends({
|
|
134
|
+
Icon: "IconChevronRight",
|
|
135
|
+
variant: "text"
|
|
136
|
+
}, nextButton))), (panelIsCollapsible || !hideCloseButton) && /*#__PURE__*/_react.default.createElement(_UTButton.default, {
|
|
116
137
|
classNames: {
|
|
117
138
|
icon: iconCloseClass,
|
|
118
139
|
root: closeButtonClass
|
|
@@ -141,7 +162,7 @@ const UTPanel = _ref => {
|
|
|
141
162
|
dataTestId: titleDataTestId,
|
|
142
163
|
variant: "title2",
|
|
143
164
|
weight: "medium"
|
|
144
|
-
}, titleProps), title), collapsableHeader && /*#__PURE__*/_react.default.createElement(_UTButton.default, {
|
|
165
|
+
}, titleProps), title), showMainStatus && /*#__PURE__*/_react.default.createElement(_UTStatus.default, statusProps, statusProps.label), collapsableHeader && /*#__PURE__*/_react.default.createElement(_UTButton.default, {
|
|
145
166
|
Icon: collapseHeader ? 'IconChevronUp' : 'IconChevronDown',
|
|
146
167
|
onClick: () => setCollapseHeader(!collapseHeader),
|
|
147
168
|
size: "small",
|
|
@@ -231,8 +252,14 @@ UTPanel.propTypes = {
|
|
|
231
252
|
secondaryActionDataTestId: _propTypes.string,
|
|
232
253
|
singleHeaderItemsColumn: _propTypes.bool,
|
|
233
254
|
size: (0, _propTypes.oneOf)(Object.keys(_constants.SIZES)),
|
|
255
|
+
showMainStatus: _propTypes.bool,
|
|
256
|
+
statusProps: _propTypes.object,
|
|
234
257
|
stepsCount: _propTypes.number,
|
|
258
|
+
showPagination: _propTypes.bool,
|
|
259
|
+
currentPage: _propTypes.number,
|
|
260
|
+
totalPages: _propTypes.number,
|
|
235
261
|
subtitle: _propTypes.string,
|
|
262
|
+
paginationProps: _propTypes.object,
|
|
236
263
|
title: _propTypes.string,
|
|
237
264
|
titleDataTestId: _propTypes.string,
|
|
238
265
|
titleProps: _propTypes.object
|