@widergy/energy-ui 3.4.4 → 3.4.5
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 +7 -0
- package/dist/components/UTBanner/README.md +15 -0
- package/dist/components/UTHeader/README.md +27 -0
- package/dist/components/UTHeader/index.js +3 -1
- package/dist/components/UTStepper/README.md +22 -0
- package/dist/components/UTWorkflowContainer/versions/V1/README.md +33 -26
- package/dist/components/UTWorkflowContainer/versions/V1/index.js +6 -2
- package/dist/components/UTWorkflowContainer/versions/V1/styles.module.scss +15 -3
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,10 @@
|
|
|
1
|
+
## [3.4.5](https://github.com/widergy/energy-ui/compare/v3.4.4...v3.4.5) (2024-03-13)
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
### Bug Fixes
|
|
5
|
+
|
|
6
|
+
* added readmes ([#428](https://github.com/widergy/energy-ui/issues/428)) ([cf34a37](https://github.com/widergy/energy-ui/commit/cf34a377fe5908327b20686161e0be538864bd00))
|
|
7
|
+
|
|
1
8
|
## [3.4.4](https://github.com/widergy/energy-ui/compare/v3.4.3...v3.4.4) (2024-02-28)
|
|
2
9
|
|
|
3
10
|
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
# UTBanner
|
|
2
|
+
|
|
3
|
+
### Description
|
|
4
|
+
|
|
5
|
+
This component displays a banner with information
|
|
6
|
+
|
|
7
|
+
## Props
|
|
8
|
+
|
|
9
|
+
| Name | Type | Default | Description |
|
|
10
|
+
| ---------- | ---------------- | ------- | --------------------------------------------------------------------------- |
|
|
11
|
+
| children | element | | The contents that will be rendered inside the component. |
|
|
12
|
+
| classes | object of string | | Classes returned by UTBanner's own [theme](./theme.js#L40) `retrieveStyle`. |
|
|
13
|
+
| classNames | object of string | | Additional classes. |
|
|
14
|
+
| Icon | element | | Icon to be displayed at the left side of the banner. |
|
|
15
|
+
| iconProps | object | | Props to be passed onto the rendered icon. |
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
# UTHeader
|
|
2
|
+
|
|
3
|
+
### Description
|
|
4
|
+
|
|
5
|
+
This component displays a series of texts in different variants. It also handles a dropdown menu for actions in the top right corner
|
|
6
|
+
|
|
7
|
+
## Props
|
|
8
|
+
|
|
9
|
+
| Name | Type | Default | Description |
|
|
10
|
+
| ----------------- | ---------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
|
11
|
+
| actions | actionType | | Actions to be displayed in a dropdown menu at the top right corner, the first one that has the prop `main` as true will be displayed next to the menu with its own icon. |
|
|
12
|
+
| banner | bannerType | | If present, it will render a banner at the bottom. |
|
|
13
|
+
| classes | object of string | | Classes returned by UTHeader's own [theme](./theme.js#L40) `retrieveStyle`. |
|
|
14
|
+
| classNames | object of string | | Additional classes. |
|
|
15
|
+
| helpText | string | | Text that will be rendered above the banner. |
|
|
16
|
+
| requiredFieldInfo | string | | Text to display as a helper for required fields, it will be rendered below the description. |
|
|
17
|
+
| subtitle | string | | Text that will be rendered below the title. |
|
|
18
|
+
| tagline | string | | Text that will be rendered in uppercase on top of the title. |
|
|
19
|
+
| title | string | | Text that will be rendered between the stages and the content. |
|
|
20
|
+
| TitleIcon | element | | Icon that will be rendered on top of the title. |
|
|
21
|
+
|
|
22
|
+
### Custom Types
|
|
23
|
+
|
|
24
|
+
| Type | Shape |
|
|
25
|
+
| ---------- | ------------------------------------------------------------- |
|
|
26
|
+
| actionType | `{ label: string, onClick: func, main: bool, Icon: element }` |
|
|
27
|
+
| bannerType | `{ Icon: element, text: string }` |
|
|
@@ -66,7 +66,9 @@ const UTHeader = _ref => {
|
|
|
66
66
|
const openMenu = event => setMenuAnchor(event.target);
|
|
67
67
|
const closeMenu = () => setMenuAnchor();
|
|
68
68
|
const BANNER_ICON_SIZE = '20px';
|
|
69
|
-
return /*#__PURE__*/_react.default.createElement("div",
|
|
69
|
+
return /*#__PURE__*/_react.default.createElement("div", {
|
|
70
|
+
className: classes.outerContainer
|
|
71
|
+
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
70
72
|
className: "".concat(_stylesModule.default.container, " ").concat(!hasHeader && _stylesModule.default.containerMargin)
|
|
71
73
|
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
72
74
|
className: "".concat(_stylesModule.default.header, " ").concat((banner === null || banner === void 0 ? void 0 : banner.text) && _stylesModule.default.bottomPadding)
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
# UTStepper
|
|
2
|
+
|
|
3
|
+
### Description
|
|
4
|
+
|
|
5
|
+
This components displays a chain of rounded icons which can be gradually completed and represent progress through a series of steps
|
|
6
|
+
|
|
7
|
+
## Props
|
|
8
|
+
|
|
9
|
+
| Name | Type | Default | Description |
|
|
10
|
+
| ------------ | ---------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
11
|
+
| classes | object of string | | Classes returned by UTStepper's own [theme](./theme.js#L40) `retrieveStyle`. |
|
|
12
|
+
| classNames | object of string | | Additional classes. |
|
|
13
|
+
| currentStage | number | | Represents which stage id will be active. |
|
|
14
|
+
| stages | stageType | | Defines the structure of the stepper. It is required for each stage inside the array given to have a property `id`, the indicator will be ordered by id. Aditionally each stage is able to add a property `label` which will display at the bottom of the corresponding indicator. |
|
|
15
|
+
| stepperSize | 'S' \| 'L' | 'S' | Variant that defines whether to use small icons for the stepper indicator or large ones. It is required for the 'L' variant that every stage has a custom icon defined. If size is set to 'L' but there's at least one stage without a defined custom icon the size will be defaulted to 'S'. |
|
|
16
|
+
| withPadding | bool | | If false, the stepper indicator will occupy the full width of the container, rendering the first and last stage's label aligned towards the center. |
|
|
17
|
+
|
|
18
|
+
### Custom types
|
|
19
|
+
|
|
20
|
+
| Type | Shape |
|
|
21
|
+
| --------- | --------------------------------------------------------- |
|
|
22
|
+
| stageType | arrayOf( `{ id: number, label: string, Icon: element }` ) |
|
|
@@ -6,32 +6,39 @@ This component serves as a wrapper for each step of a workflow
|
|
|
6
6
|
|
|
7
7
|
## Props
|
|
8
8
|
|
|
9
|
-
| Name | Type | Default | Description
|
|
10
|
-
| ------------------ | ---------------- | ------- |
|
|
11
|
-
| backButton | buttonType | | Defines behaviour and/or rendering of the button on the left corner.
|
|
12
|
-
|
|
|
13
|
-
|
|
|
14
|
-
|
|
|
15
|
-
|
|
|
16
|
-
|
|
|
17
|
-
|
|
|
18
|
-
|
|
|
19
|
-
|
|
|
20
|
-
|
|
|
21
|
-
|
|
|
22
|
-
|
|
|
23
|
-
|
|
|
24
|
-
|
|
|
25
|
-
|
|
|
26
|
-
|
|
|
27
|
-
|
|
|
28
|
-
|
|
|
29
|
-
|
|
|
30
|
-
|
|
|
9
|
+
| Name | Type | Default | Description |
|
|
10
|
+
| ------------------ | ---------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
11
|
+
| backButton | buttonType | | Defines behaviour and/or rendering of the button on the left corner. |
|
|
12
|
+
| banner | bannerType | | If present, it will render a banner at the bottom of the header. |
|
|
13
|
+
| checkbox | checkboxType | | If present, it will render a checkbox above the bottom navigation. |
|
|
14
|
+
| children | element | | The contents that will be rendered inside the component. |
|
|
15
|
+
| classes | object of string | | Classes returned by UTWorkflowContainer's own [theme](./theme.js#L40) `retrieveStyle`. |
|
|
16
|
+
| classNames | object of string | | Additional classes. |
|
|
17
|
+
| currentStage | number | | Receives a number that represents which stage id will be active. It is up to the parent component to update this number accordingly. |
|
|
18
|
+
| currentStep | number | 1 | Receives a number that will fill up the progress bar proportionally to the number of steps given. It will also hide the backButton if its equal to 1. It is up to the parent component to update this number accordingly. |
|
|
19
|
+
| helpText | string | | Text that will be rendered at the bottom of the header. |
|
|
20
|
+
| headerActions | headerActionType | | Actions to be displayed in a dropdown menu at the corner of the header, the first one that has the prop `main` as true will be displayed next to the menu with its own icon. |
|
|
21
|
+
| nextButton | buttonTypes | | Defines behaviour and/or rendering of the button on the right corner. |
|
|
22
|
+
| onExit | function | | Cleanup function. |
|
|
23
|
+
| primaryAction | buttonType | | Defines behaviour and/or rendering for the button next to the `nextButton`. |
|
|
24
|
+
| requiredFieldInfo | string | | Text to display as a helper for required fields, it will be rendered below the description. |
|
|
25
|
+
| secondaryAction | buttonType | | Defines behaviour and/or rendering for the button next to the `backButton`. |
|
|
26
|
+
| stages | stageType | | Defines the structure of the stepper indicator at the top of the component. It is required for each element inside the array given to have a property `id`, the indicator will be ordered by id. Aditionally each stage is able to add a property `label` which will display at the bottom of the corresponding indicator. |
|
|
27
|
+
| stepperSize | 'S' \| 'L' | 'S' | Variant that defines whether to use small icons for the stepper indicator or large ones. It is required for the 'L' variant that every stage has a custom icon defined. If size is set to 'L' but there's at least one stage without a defined custom icon the size will be defaulted to 'S'. |
|
|
28
|
+
| stepsCount | number | | Receives a number that represent the total amount of steps. Its only purpose is for properly rendering the progressBar. |
|
|
29
|
+
| subtitle | string | | Text that will be rendered below the title. |
|
|
30
|
+
| tagline | string | | Text that will be rendered in uppercase on top of the title. |
|
|
31
|
+
| title | string | | Text that will be rendered between the stages and the content. It is required in order to show any other text header elements. |
|
|
32
|
+
| TitleIcon | element | | Icon that will be rendered on top of the title. |
|
|
33
|
+
| withIcon | bool | false | Defines whether the nextButton and backButton will aditionally have their own icons inside. |
|
|
34
|
+
| withStepperPadding | bool | true | If false, the stepper indicator will occupy the full width of the container, rendering the first and last stage's label aligned towards the center. |
|
|
31
35
|
|
|
32
36
|
### Custom types
|
|
33
37
|
|
|
34
|
-
| Type
|
|
35
|
-
|
|
|
36
|
-
| buttonType
|
|
37
|
-
|
|
|
38
|
+
| Type | Shape |
|
|
39
|
+
| ---------------- | ----------------------------------------------------------------------------------------------------------------- |
|
|
40
|
+
| buttonType | element \| `{ onClick: func, disabled: bool, label: string, buttonProps: object, Icon: bool \| element \| func }` |
|
|
41
|
+
| bannerType | `{ Icon: element, text: string }` |
|
|
42
|
+
| checkboxType | objectOf( UTCheckbox props ) |
|
|
43
|
+
| headerActionType | `{ label: string, onClick: func, main: bool, Icon: element }` |
|
|
44
|
+
| stageType | arrayOf( `{ id: number, label: string, Icon: element }` ) |
|
|
@@ -64,13 +64,18 @@ const UTWorkflowContainer = _ref => {
|
|
|
64
64
|
}), (title || isMobileOrTablet && (primaryAction || secondaryAction)) && /*#__PURE__*/_react.default.createElement(_UTHeader.default, {
|
|
65
65
|
actions: [...(headerActions || []), ...(isMobileOrTablet ? [primaryAction, secondaryAction].filter(action => action) : [])],
|
|
66
66
|
banner: title && banner,
|
|
67
|
+
classNames: {
|
|
68
|
+
outerContainer: _stylesModule.default.headerContainer
|
|
69
|
+
},
|
|
67
70
|
helpText: title && helpText,
|
|
68
71
|
requiredFieldInfo: title && requiredFieldInfo,
|
|
69
72
|
subititle: title && subtitle,
|
|
70
73
|
tagline: title && tagline,
|
|
71
74
|
title,
|
|
72
75
|
TitleIcon
|
|
73
|
-
}),
|
|
76
|
+
}), /*#__PURE__*/_react.default.createElement("div", {
|
|
77
|
+
className: _stylesModule.default.childrenContainer
|
|
78
|
+
}, children)), /*#__PURE__*/_react.default.createElement("div", {
|
|
74
79
|
className: "".concat(classes.bottomNav, " ").concat(_stylesModule.default.bottomNav)
|
|
75
80
|
}, checkbox && isMobileOrTablet && /*#__PURE__*/_react.default.createElement("div", {
|
|
76
81
|
className: _stylesModule.default.mobileCheckboxContainer
|
|
@@ -107,7 +112,6 @@ UTWorkflowContainer.propTypes = {
|
|
|
107
112
|
classNames: (0, _propTypes.objectOf)(_propTypes.string),
|
|
108
113
|
currentStage: _propTypes.number,
|
|
109
114
|
currentStep: _propTypes.number,
|
|
110
|
-
extraActions: _propTypes.element,
|
|
111
115
|
helpText: _propTypes.string,
|
|
112
116
|
headerActions: (0, _propTypes.arrayOf)(_types.buttonTypes),
|
|
113
117
|
nextButton: _types.buttonTypes,
|
|
@@ -7,18 +7,18 @@
|
|
|
7
7
|
box-sizing: border-box;
|
|
8
8
|
display: flex;
|
|
9
9
|
flex-direction: column;
|
|
10
|
+
flex-grow: 1;
|
|
10
11
|
height: 100%;
|
|
11
12
|
justify-content: space-between;
|
|
12
13
|
width: 100%;
|
|
13
|
-
flex-grow: 1;
|
|
14
14
|
}
|
|
15
15
|
|
|
16
16
|
.content {
|
|
17
17
|
display: flex;
|
|
18
18
|
flex-direction: column;
|
|
19
|
-
padding: 0 32px 16px;
|
|
20
|
-
max-width: 1200px;
|
|
21
19
|
height: 100%;
|
|
20
|
+
max-width: 1200px;
|
|
21
|
+
padding: 0 32px 16px;
|
|
22
22
|
width: calc(100% - 64px);
|
|
23
23
|
|
|
24
24
|
@media #{$tablet-mobile} {
|
|
@@ -27,6 +27,18 @@
|
|
|
27
27
|
}
|
|
28
28
|
}
|
|
29
29
|
|
|
30
|
+
.headerContainer, .childrenContainer {
|
|
31
|
+
@media #{$tablet-mobile} {
|
|
32
|
+
align-self: center;
|
|
33
|
+
max-width: 500px;
|
|
34
|
+
width: 100%;
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
.childrenContainer {
|
|
39
|
+
height: inherit
|
|
40
|
+
}
|
|
41
|
+
|
|
30
42
|
.progress {
|
|
31
43
|
height: 8px;
|
|
32
44
|
}
|