@hitachivantara/uikit-react-lab 4.0.1-next.0 → 4.0.1-next.3
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/dist/ImageCarousel/ImageCarousel.d.ts +11 -0
- package/dist/ImageCarousel/ImageCarousel.js +666 -0
- package/dist/ImageCarousel/ImageCarousel.js.map +1 -0
- package/dist/ImageCarousel/index.d.ts +2 -0
- package/dist/ImageCarousel/index.js +16 -0
- package/dist/ImageCarousel/index.js.map +1 -0
- package/dist/ImageCarousel/stories/resources/Ahsoka.jpg +0 -0
- package/dist/ImageCarousel/stories/resources/AnakinSkywalker.jpg +0 -0
- package/dist/ImageCarousel/stories/resources/BobaFett.jpg +0 -0
- package/dist/ImageCarousel/stories/resources/DarthVader.jpg +0 -0
- package/dist/ImageCarousel/stories/resources/MaceWindu.jpg +0 -0
- package/dist/ImageCarousel/stories/resources/ObiWan.png +0 -0
- package/dist/ImageCarousel/stories/resources/Panoramic.jpg +0 -0
- package/dist/ImageCarousel/stories/resources/Revan.jpg +0 -0
- package/dist/ImageCarousel/stories/resources/TheMandalorian.jpg +0 -0
- package/dist/ImageCarousel/stories/resources/Yoda.jpg +0 -0
- package/dist/ImageCarousel/styles.js +238 -0
- package/dist/ImageCarousel/styles.js.map +1 -0
- package/dist/StepNavigation/DefaultNavigation/DefaultNavigation.d.ts +58 -0
- package/dist/StepNavigation/DefaultNavigation/DefaultNavigation.js +156 -0
- package/dist/StepNavigation/DefaultNavigation/DefaultNavigation.js.map +1 -0
- package/dist/StepNavigation/DefaultNavigation/Step/Step.d.ts +32 -0
- package/dist/StepNavigation/DefaultNavigation/Step/Step.js +201 -0
- package/dist/StepNavigation/DefaultNavigation/Step/Step.js.map +1 -0
- package/dist/StepNavigation/DefaultNavigation/Step/index.d.ts +2 -0
- package/dist/StepNavigation/DefaultNavigation/Step/index.js +16 -0
- package/dist/StepNavigation/DefaultNavigation/Step/index.js.map +1 -0
- package/dist/StepNavigation/DefaultNavigation/Step/styles.js +53 -0
- package/dist/StepNavigation/DefaultNavigation/Step/styles.js.map +1 -0
- package/dist/StepNavigation/DefaultNavigation/index.d.ts +2 -0
- package/dist/StepNavigation/DefaultNavigation/index.js +16 -0
- package/dist/StepNavigation/DefaultNavigation/index.js.map +1 -0
- package/dist/StepNavigation/DefaultNavigation/styles.js +16 -0
- package/dist/StepNavigation/DefaultNavigation/styles.js.map +1 -0
- package/dist/StepNavigation/DefaultNavigation/utils.js +49 -0
- package/dist/StepNavigation/DefaultNavigation/utils.js.map +1 -0
- package/dist/StepNavigation/SimpleNavigation/Dot/Dot.d.ts +10 -0
- package/dist/StepNavigation/SimpleNavigation/Dot/Dot.js +176 -0
- package/dist/StepNavigation/SimpleNavigation/Dot/Dot.js.map +1 -0
- package/dist/StepNavigation/SimpleNavigation/Dot/index.d.ts +2 -0
- package/dist/StepNavigation/SimpleNavigation/Dot/index.js +16 -0
- package/dist/StepNavigation/SimpleNavigation/Dot/index.js.map +1 -0
- package/dist/StepNavigation/SimpleNavigation/Dot/styles.js +25 -0
- package/dist/StepNavigation/SimpleNavigation/Dot/styles.js.map +1 -0
- package/dist/StepNavigation/SimpleNavigation/SimpleNavigation.d.ts +58 -0
- package/dist/StepNavigation/SimpleNavigation/SimpleNavigation.js +159 -0
- package/dist/StepNavigation/SimpleNavigation/SimpleNavigation.js.map +1 -0
- package/dist/StepNavigation/SimpleNavigation/index.d.ts +2 -0
- package/dist/StepNavigation/SimpleNavigation/index.js +16 -0
- package/dist/StepNavigation/SimpleNavigation/index.js.map +1 -0
- package/dist/StepNavigation/SimpleNavigation/styles.js +16 -0
- package/dist/StepNavigation/SimpleNavigation/styles.js.map +1 -0
- package/dist/StepNavigation/SimpleNavigation/utils.js +31 -0
- package/dist/StepNavigation/SimpleNavigation/utils.js.map +1 -0
- package/dist/StepNavigation/StepNavigation.d.ts +43 -0
- package/dist/StepNavigation/StepNavigation.js +400 -0
- package/dist/StepNavigation/StepNavigation.js.map +1 -0
- package/dist/StepNavigation/index.d.ts +2 -0
- package/dist/StepNavigation/index.js +16 -0
- package/dist/StepNavigation/index.js.map +1 -0
- package/dist/StepNavigation/styles.js +41 -0
- package/dist/StepNavigation/styles.js.map +1 -0
- package/dist/StepNavigation/utils.js +15 -0
- package/dist/StepNavigation/utils.js.map +1 -0
- package/dist/index.d.ts +6 -0
- package/dist/index.js +19 -1
- package/dist/index.js.map +1 -1
- package/dist/legacy/ImageCarousel/ImageCarousel.d.ts +11 -0
- package/dist/legacy/ImageCarousel/ImageCarousel.js +624 -0
- package/dist/legacy/ImageCarousel/ImageCarousel.js.map +1 -0
- package/dist/legacy/ImageCarousel/index.d.ts +2 -0
- package/dist/legacy/ImageCarousel/index.js +2 -0
- package/dist/legacy/ImageCarousel/index.js.map +1 -0
- package/dist/legacy/ImageCarousel/stories/resources/Ahsoka.jpg +0 -0
- package/dist/legacy/ImageCarousel/stories/resources/AnakinSkywalker.jpg +0 -0
- package/dist/legacy/ImageCarousel/stories/resources/BobaFett.jpg +0 -0
- package/dist/legacy/ImageCarousel/stories/resources/DarthVader.jpg +0 -0
- package/dist/legacy/ImageCarousel/stories/resources/MaceWindu.jpg +0 -0
- package/dist/legacy/ImageCarousel/stories/resources/ObiWan.png +0 -0
- package/dist/legacy/ImageCarousel/stories/resources/Panoramic.jpg +0 -0
- package/dist/legacy/ImageCarousel/stories/resources/Revan.jpg +0 -0
- package/dist/legacy/ImageCarousel/stories/resources/TheMandalorian.jpg +0 -0
- package/dist/legacy/ImageCarousel/stories/resources/Yoda.jpg +0 -0
- package/dist/legacy/ImageCarousel/styles.js +228 -0
- package/dist/legacy/ImageCarousel/styles.js.map +1 -0
- package/dist/legacy/StepNavigation/DefaultNavigation/DefaultNavigation.d.ts +58 -0
- package/dist/legacy/StepNavigation/DefaultNavigation/DefaultNavigation.js +131 -0
- package/dist/legacy/StepNavigation/DefaultNavigation/DefaultNavigation.js.map +1 -0
- package/dist/legacy/StepNavigation/DefaultNavigation/Step/Step.d.ts +32 -0
- package/dist/legacy/StepNavigation/DefaultNavigation/Step/Step.js +181 -0
- package/dist/legacy/StepNavigation/DefaultNavigation/Step/Step.js.map +1 -0
- package/dist/legacy/StepNavigation/DefaultNavigation/Step/index.d.ts +2 -0
- package/dist/legacy/StepNavigation/DefaultNavigation/Step/index.js +2 -0
- package/dist/legacy/StepNavigation/DefaultNavigation/Step/index.js.map +1 -0
- package/dist/legacy/StepNavigation/DefaultNavigation/Step/styles.js +45 -0
- package/dist/legacy/StepNavigation/DefaultNavigation/Step/styles.js.map +1 -0
- package/dist/legacy/StepNavigation/DefaultNavigation/index.d.ts +2 -0
- package/dist/legacy/StepNavigation/DefaultNavigation/index.js +2 -0
- package/dist/legacy/StepNavigation/DefaultNavigation/index.js.map +1 -0
- package/dist/legacy/StepNavigation/DefaultNavigation/styles.js +8 -0
- package/dist/legacy/StepNavigation/DefaultNavigation/styles.js.map +1 -0
- package/dist/legacy/StepNavigation/DefaultNavigation/utils.js +41 -0
- package/dist/legacy/StepNavigation/DefaultNavigation/utils.js.map +1 -0
- package/dist/legacy/StepNavigation/SimpleNavigation/Dot/Dot.d.ts +10 -0
- package/dist/legacy/StepNavigation/SimpleNavigation/Dot/Dot.js +135 -0
- package/dist/legacy/StepNavigation/SimpleNavigation/Dot/Dot.js.map +1 -0
- package/dist/legacy/StepNavigation/SimpleNavigation/Dot/index.d.ts +2 -0
- package/dist/legacy/StepNavigation/SimpleNavigation/Dot/index.js +2 -0
- package/dist/legacy/StepNavigation/SimpleNavigation/Dot/index.js.map +1 -0
- package/dist/legacy/StepNavigation/SimpleNavigation/Dot/styles.js +18 -0
- package/dist/legacy/StepNavigation/SimpleNavigation/Dot/styles.js.map +1 -0
- package/dist/legacy/StepNavigation/SimpleNavigation/SimpleNavigation.d.ts +58 -0
- package/dist/legacy/StepNavigation/SimpleNavigation/SimpleNavigation.js +132 -0
- package/dist/legacy/StepNavigation/SimpleNavigation/SimpleNavigation.js.map +1 -0
- package/dist/legacy/StepNavigation/SimpleNavigation/index.d.ts +2 -0
- package/dist/legacy/StepNavigation/SimpleNavigation/index.js +2 -0
- package/dist/legacy/StepNavigation/SimpleNavigation/index.js.map +1 -0
- package/dist/legacy/StepNavigation/SimpleNavigation/styles.js +8 -0
- package/dist/legacy/StepNavigation/SimpleNavigation/styles.js.map +1 -0
- package/dist/legacy/StepNavigation/SimpleNavigation/utils.js +22 -0
- package/dist/legacy/StepNavigation/SimpleNavigation/utils.js.map +1 -0
- package/dist/legacy/StepNavigation/StepNavigation.d.ts +43 -0
- package/dist/legacy/StepNavigation/StepNavigation.js +364 -0
- package/dist/legacy/StepNavigation/StepNavigation.js.map +1 -0
- package/dist/legacy/StepNavigation/index.d.ts +2 -0
- package/dist/legacy/StepNavigation/index.js +2 -0
- package/dist/legacy/StepNavigation/index.js.map +1 -0
- package/dist/legacy/StepNavigation/styles.js +33 -0
- package/dist/legacy/StepNavigation/styles.js.map +1 -0
- package/dist/legacy/StepNavigation/utils.js +6 -0
- package/dist/legacy/StepNavigation/utils.js.map +1 -0
- package/dist/legacy/index.d.ts +6 -0
- package/dist/legacy/index.js +2 -0
- package/dist/legacy/index.js.map +1 -1
- package/dist/modern/ImageCarousel/ImageCarousel.d.ts +11 -0
- package/dist/modern/ImageCarousel/ImageCarousel.js +542 -0
- package/dist/modern/ImageCarousel/ImageCarousel.js.map +1 -0
- package/dist/modern/ImageCarousel/index.d.ts +2 -0
- package/dist/modern/ImageCarousel/index.js +2 -0
- package/dist/modern/ImageCarousel/index.js.map +1 -0
- package/dist/modern/ImageCarousel/stories/resources/Ahsoka.jpg +0 -0
- package/dist/modern/ImageCarousel/stories/resources/AnakinSkywalker.jpg +0 -0
- package/dist/modern/ImageCarousel/stories/resources/BobaFett.jpg +0 -0
- package/dist/modern/ImageCarousel/stories/resources/DarthVader.jpg +0 -0
- package/dist/modern/ImageCarousel/stories/resources/MaceWindu.jpg +0 -0
- package/dist/modern/ImageCarousel/stories/resources/ObiWan.png +0 -0
- package/dist/modern/ImageCarousel/stories/resources/Panoramic.jpg +0 -0
- package/dist/modern/ImageCarousel/stories/resources/Revan.jpg +0 -0
- package/dist/modern/ImageCarousel/stories/resources/TheMandalorian.jpg +0 -0
- package/dist/modern/ImageCarousel/stories/resources/Yoda.jpg +0 -0
- package/dist/modern/ImageCarousel/styles.js +241 -0
- package/dist/modern/ImageCarousel/styles.js.map +1 -0
- package/dist/modern/StepNavigation/DefaultNavigation/DefaultNavigation.d.ts +58 -0
- package/dist/modern/StepNavigation/DefaultNavigation/DefaultNavigation.js +123 -0
- package/dist/modern/StepNavigation/DefaultNavigation/DefaultNavigation.js.map +1 -0
- package/dist/modern/StepNavigation/DefaultNavigation/Step/Step.d.ts +32 -0
- package/dist/modern/StepNavigation/DefaultNavigation/Step/Step.js +179 -0
- package/dist/modern/StepNavigation/DefaultNavigation/Step/Step.js.map +1 -0
- package/dist/modern/StepNavigation/DefaultNavigation/Step/index.d.ts +2 -0
- package/dist/modern/StepNavigation/DefaultNavigation/Step/index.js +2 -0
- package/dist/modern/StepNavigation/DefaultNavigation/Step/index.js.map +1 -0
- package/dist/modern/StepNavigation/DefaultNavigation/Step/styles.js +43 -0
- package/dist/modern/StepNavigation/DefaultNavigation/Step/styles.js.map +1 -0
- package/dist/modern/StepNavigation/DefaultNavigation/index.d.ts +2 -0
- package/dist/modern/StepNavigation/DefaultNavigation/index.js +2 -0
- package/dist/modern/StepNavigation/DefaultNavigation/index.js.map +1 -0
- package/dist/modern/StepNavigation/DefaultNavigation/styles.js +6 -0
- package/dist/modern/StepNavigation/DefaultNavigation/styles.js.map +1 -0
- package/dist/modern/StepNavigation/DefaultNavigation/utils.js +41 -0
- package/dist/modern/StepNavigation/DefaultNavigation/utils.js.map +1 -0
- package/dist/modern/StepNavigation/SimpleNavigation/Dot/Dot.d.ts +10 -0
- package/dist/modern/StepNavigation/SimpleNavigation/Dot/Dot.js +123 -0
- package/dist/modern/StepNavigation/SimpleNavigation/Dot/Dot.js.map +1 -0
- package/dist/modern/StepNavigation/SimpleNavigation/Dot/index.d.ts +2 -0
- package/dist/modern/StepNavigation/SimpleNavigation/Dot/index.js +2 -0
- package/dist/modern/StepNavigation/SimpleNavigation/Dot/index.js.map +1 -0
- package/dist/modern/StepNavigation/SimpleNavigation/Dot/styles.js +18 -0
- package/dist/modern/StepNavigation/SimpleNavigation/Dot/styles.js.map +1 -0
- package/dist/modern/StepNavigation/SimpleNavigation/SimpleNavigation.d.ts +58 -0
- package/dist/modern/StepNavigation/SimpleNavigation/SimpleNavigation.js +121 -0
- package/dist/modern/StepNavigation/SimpleNavigation/SimpleNavigation.js.map +1 -0
- package/dist/modern/StepNavigation/SimpleNavigation/index.d.ts +2 -0
- package/dist/modern/StepNavigation/SimpleNavigation/index.js +2 -0
- package/dist/modern/StepNavigation/SimpleNavigation/index.js.map +1 -0
- package/dist/modern/StepNavigation/SimpleNavigation/styles.js +6 -0
- package/dist/modern/StepNavigation/SimpleNavigation/styles.js.map +1 -0
- package/dist/modern/StepNavigation/SimpleNavigation/utils.js +22 -0
- package/dist/modern/StepNavigation/SimpleNavigation/utils.js.map +1 -0
- package/dist/modern/StepNavigation/StepNavigation.d.ts +43 -0
- package/dist/modern/StepNavigation/StepNavigation.js +346 -0
- package/dist/modern/StepNavigation/StepNavigation.js.map +1 -0
- package/dist/modern/StepNavigation/index.d.ts +2 -0
- package/dist/modern/StepNavigation/index.js +2 -0
- package/dist/modern/StepNavigation/index.js.map +1 -0
- package/dist/modern/StepNavigation/styles.js +31 -0
- package/dist/modern/StepNavigation/styles.js.map +1 -0
- package/dist/modern/StepNavigation/utils.js +6 -0
- package/dist/modern/StepNavigation/utils.js.map +1 -0
- package/dist/modern/index.d.ts +6 -0
- package/dist/modern/index.js +2 -0
- package/dist/modern/index.js.map +1 -1
- package/package.json +6 -4
|
@@ -0,0 +1,179 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import PropTypes from "prop-types";
|
|
3
|
+
import clsx from "clsx";
|
|
4
|
+
import { withStyles } from "@mui/styles";
|
|
5
|
+
import { Level0Good, Level3Bad, HourGlass } from "@hitachivantara/uikit-react-icons";
|
|
6
|
+
import { HvAvatar, HvButton } from "@hitachivantara/uikit-react-core";
|
|
7
|
+
import { getColor } from "../utils";
|
|
8
|
+
import styles from "./styles";
|
|
9
|
+
/**
|
|
10
|
+
* Step element of "Default" Step Navigation root component
|
|
11
|
+
*/
|
|
12
|
+
|
|
13
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
14
|
+
|
|
15
|
+
const HvStep = ({
|
|
16
|
+
className,
|
|
17
|
+
classes,
|
|
18
|
+
state,
|
|
19
|
+
title,
|
|
20
|
+
onClick,
|
|
21
|
+
disabled,
|
|
22
|
+
size = "SM",
|
|
23
|
+
number = 1
|
|
24
|
+
}) => {
|
|
25
|
+
const iconSize = {
|
|
26
|
+
XS: "XS",
|
|
27
|
+
SM: "XS",
|
|
28
|
+
MD: "S",
|
|
29
|
+
LG: "M",
|
|
30
|
+
XL: "M"
|
|
31
|
+
}[size];
|
|
32
|
+
const squareL = {
|
|
33
|
+
Pending: 16,
|
|
34
|
+
Failed: 24,
|
|
35
|
+
Completed: 24
|
|
36
|
+
}[state];
|
|
37
|
+
const svgSize = {
|
|
38
|
+
XS: squareL - 8,
|
|
39
|
+
SM: squareL,
|
|
40
|
+
MD: squareL + 8,
|
|
41
|
+
LG: squareL + 16,
|
|
42
|
+
XL: squareL + 24
|
|
43
|
+
}[size];
|
|
44
|
+
const backgroundColor = getColor(state);
|
|
45
|
+
const color = state === "Pending" ? "atmo2" : undefined;
|
|
46
|
+
const semantic = state !== "Pending" ? backgroundColor : undefined;
|
|
47
|
+
const status = state === "Current" ? "atmo5" : undefined;
|
|
48
|
+
const IconComponent = {
|
|
49
|
+
Pending: HourGlass,
|
|
50
|
+
Failed: Level3Bad,
|
|
51
|
+
Completed: Level0Good
|
|
52
|
+
}[state];
|
|
53
|
+
return /*#__PURE__*/_jsx("div", {
|
|
54
|
+
className: clsx(className, classes.root, state !== "Current" && classes["not-current"]),
|
|
55
|
+
children: /*#__PURE__*/_jsx(HvButton, {
|
|
56
|
+
className: clsx(classes.ghost, state === "Current" && classes.ghostDisabled),
|
|
57
|
+
"aria-label": `step-${title}`,
|
|
58
|
+
icon: true,
|
|
59
|
+
overrideIconColors: false,
|
|
60
|
+
disabled: disabled !== null && disabled !== void 0 ? disabled : ["Current", "Disabled"].includes(state),
|
|
61
|
+
onClick: onClick,
|
|
62
|
+
children: /*#__PURE__*/_jsx(HvAvatar, {
|
|
63
|
+
className: clsx(classes.avatar, classes[size]),
|
|
64
|
+
backgroundColor: backgroundColor,
|
|
65
|
+
status: status,
|
|
66
|
+
size: size,
|
|
67
|
+
children: IconComponent ? /*#__PURE__*/_jsx(IconComponent, {
|
|
68
|
+
color: color,
|
|
69
|
+
semantic: semantic,
|
|
70
|
+
width: svgSize,
|
|
71
|
+
height: svgSize,
|
|
72
|
+
iconSize: iconSize
|
|
73
|
+
}) : number
|
|
74
|
+
})
|
|
75
|
+
})
|
|
76
|
+
});
|
|
77
|
+
};
|
|
78
|
+
|
|
79
|
+
process.env.NODE_ENV !== "production" ? HvStep.propTypes = {
|
|
80
|
+
/**
|
|
81
|
+
* Class names to be applied.
|
|
82
|
+
*/
|
|
83
|
+
className: PropTypes.string,
|
|
84
|
+
|
|
85
|
+
/**
|
|
86
|
+
* A Jss Object used to override or extend the styles applied.
|
|
87
|
+
*/
|
|
88
|
+
classes: PropTypes.shape({
|
|
89
|
+
/**
|
|
90
|
+
* Styles applied to the component root class.
|
|
91
|
+
*/
|
|
92
|
+
root: PropTypes.string,
|
|
93
|
+
|
|
94
|
+
/**
|
|
95
|
+
* Styles applied to the ghost class.
|
|
96
|
+
*/
|
|
97
|
+
ghost: PropTypes.string,
|
|
98
|
+
|
|
99
|
+
/**
|
|
100
|
+
* Styles applied to the ghostDisabled class.
|
|
101
|
+
*/
|
|
102
|
+
ghostDisabled: PropTypes.string,
|
|
103
|
+
|
|
104
|
+
/**
|
|
105
|
+
* Styles applied to the root element when step is not in "current" state.
|
|
106
|
+
*/
|
|
107
|
+
"not-current": PropTypes.string,
|
|
108
|
+
|
|
109
|
+
/**
|
|
110
|
+
* Styles applied to the root element when size is XS.
|
|
111
|
+
*/
|
|
112
|
+
XS: PropTypes.string,
|
|
113
|
+
|
|
114
|
+
/**
|
|
115
|
+
* Styles applied to the root element when size is SM.
|
|
116
|
+
*/
|
|
117
|
+
SM: PropTypes.string,
|
|
118
|
+
|
|
119
|
+
/**
|
|
120
|
+
* Styles applied to the root element when size is MD.
|
|
121
|
+
*/
|
|
122
|
+
MD: PropTypes.string,
|
|
123
|
+
|
|
124
|
+
/**
|
|
125
|
+
* Styles applied to the root element when size is LG.
|
|
126
|
+
*/
|
|
127
|
+
LG: PropTypes.string,
|
|
128
|
+
|
|
129
|
+
/**
|
|
130
|
+
* Styles applied to the root element when size is XL.
|
|
131
|
+
*/
|
|
132
|
+
XL: PropTypes.string,
|
|
133
|
+
|
|
134
|
+
/**
|
|
135
|
+
* Styles applied to the avatar element.
|
|
136
|
+
*/
|
|
137
|
+
avatar: PropTypes.string,
|
|
138
|
+
|
|
139
|
+
/**
|
|
140
|
+
* Styles applied to the title of a step element.
|
|
141
|
+
*/
|
|
142
|
+
stepTitle: PropTypes.string
|
|
143
|
+
}).isRequired,
|
|
144
|
+
|
|
145
|
+
/**
|
|
146
|
+
* Sets one of the standard sizes of the step
|
|
147
|
+
*/
|
|
148
|
+
size: PropTypes.oneOf(["XS", "SM", "MD", "LG", "XL"]),
|
|
149
|
+
|
|
150
|
+
/**
|
|
151
|
+
* State of the step. Values = {"Pending", "Failed", "Completed", "Current", "Disabled"}
|
|
152
|
+
*/
|
|
153
|
+
state: PropTypes.oneOf(["Pending", "Failed", "Completed", "Current", "Disabled"]).isRequired,
|
|
154
|
+
|
|
155
|
+
/**
|
|
156
|
+
* Title of the step.
|
|
157
|
+
*/
|
|
158
|
+
title: PropTypes.string.isRequired,
|
|
159
|
+
|
|
160
|
+
/**
|
|
161
|
+
* Number of the step.
|
|
162
|
+
*/
|
|
163
|
+
number: PropTypes.number,
|
|
164
|
+
|
|
165
|
+
/**
|
|
166
|
+
* Event onClick of the step.
|
|
167
|
+
*/
|
|
168
|
+
onClick: PropTypes.func,
|
|
169
|
+
|
|
170
|
+
/**
|
|
171
|
+
* Define if a step is disabled/enabled.
|
|
172
|
+
* If this property is not defined and the step is on state "Disabled", the step component will be disabled
|
|
173
|
+
*/
|
|
174
|
+
disabled: PropTypes.bool
|
|
175
|
+
} : void 0;
|
|
176
|
+
export default withStyles(styles, {
|
|
177
|
+
name: "HvStep"
|
|
178
|
+
})(HvStep);
|
|
179
|
+
//# sourceMappingURL=Step.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Step.js","names":["React","PropTypes","clsx","withStyles","Level0Good","Level3Bad","HourGlass","HvAvatar","HvButton","getColor","styles","HvStep","className","classes","state","title","onClick","disabled","size","number","iconSize","XS","SM","MD","LG","XL","squareL","Pending","Failed","Completed","svgSize","backgroundColor","color","undefined","semantic","status","IconComponent","root","ghost","ghostDisabled","includes","avatar","propTypes","string","shape","stepTitle","isRequired","oneOf","func","bool","name"],"sources":["../../../../../src/StepNavigation/DefaultNavigation/Step/Step.js"],"sourcesContent":["import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport clsx from \"clsx\";\n\nimport { withStyles } from \"@mui/styles\";\n\nimport { Level0Good, Level3Bad, HourGlass } from \"@hitachivantara/uikit-react-icons\";\nimport { HvAvatar, HvButton } from \"@hitachivantara/uikit-react-core\";\n\nimport { getColor } from \"../utils\";\nimport styles from \"./styles\";\n\n/**\n * Step element of \"Default\" Step Navigation root component\n */\nconst HvStep = ({\n className,\n classes,\n state,\n title,\n onClick,\n disabled,\n size = \"SM\",\n number = 1,\n}) => {\n const iconSize = {\n XS: \"XS\",\n SM: \"XS\",\n MD: \"S\",\n LG: \"M\",\n XL: \"M\",\n }[size];\n\n const squareL = {\n Pending: 16,\n Failed: 24,\n Completed: 24,\n }[state];\n\n const svgSize = {\n XS: squareL - 8,\n SM: squareL,\n MD: squareL + 8,\n LG: squareL + 16,\n XL: squareL + 24,\n }[size];\n\n const backgroundColor = getColor(state);\n\n const color = state === \"Pending\" ? \"atmo2\" : undefined;\n\n const semantic = state !== \"Pending\" ? backgroundColor : undefined;\n\n const status = state === \"Current\" ? \"atmo5\" : undefined;\n\n const IconComponent = {\n Pending: HourGlass,\n Failed: Level3Bad,\n Completed: Level0Good,\n }[state];\n\n return (\n <div\n className={clsx(className, classes.root, { [classes[\"not-current\"]]: state !== \"Current\" })}\n >\n <HvButton\n className={clsx(classes.ghost, { [classes.ghostDisabled]: state === \"Current\" })}\n aria-label={`step-${title}`}\n icon\n overrideIconColors={false}\n disabled={disabled ?? [\"Current\", \"Disabled\"].includes(state)}\n onClick={onClick}\n >\n <HvAvatar\n className={clsx(classes.avatar, classes[size])}\n backgroundColor={backgroundColor}\n status={status}\n size={size}\n >\n {IconComponent ? (\n <IconComponent\n color={color}\n semantic={semantic}\n width={svgSize}\n height={svgSize}\n iconSize={iconSize}\n />\n ) : (\n number\n )}\n </HvAvatar>\n </HvButton>\n </div>\n );\n};\n\nHvStep.propTypes = {\n /**\n * Class names to be applied.\n */\n className: PropTypes.string,\n /**\n * A Jss Object used to override or extend the styles applied.\n */\n classes: PropTypes.shape({\n /**\n * Styles applied to the component root class.\n */\n root: PropTypes.string,\n /**\n * Styles applied to the ghost class.\n */\n ghost: PropTypes.string,\n /**\n * Styles applied to the ghostDisabled class.\n */\n ghostDisabled: PropTypes.string,\n /**\n * Styles applied to the root element when step is not in \"current\" state.\n */\n \"not-current\": PropTypes.string,\n /**\n * Styles applied to the root element when size is XS.\n */\n XS: PropTypes.string,\n /**\n * Styles applied to the root element when size is SM.\n */\n SM: PropTypes.string,\n /**\n * Styles applied to the root element when size is MD.\n */\n MD: PropTypes.string,\n /**\n * Styles applied to the root element when size is LG.\n */\n LG: PropTypes.string,\n /**\n * Styles applied to the root element when size is XL.\n */\n XL: PropTypes.string,\n /**\n * Styles applied to the avatar element.\n */\n avatar: PropTypes.string,\n /**\n * Styles applied to the title of a step element.\n */\n stepTitle: PropTypes.string,\n }).isRequired,\n /**\n * Sets one of the standard sizes of the step\n */\n size: PropTypes.oneOf([\"XS\", \"SM\", \"MD\", \"LG\", \"XL\"]),\n /**\n * State of the step. Values = {\"Pending\", \"Failed\", \"Completed\", \"Current\", \"Disabled\"}\n */\n state: PropTypes.oneOf([\"Pending\", \"Failed\", \"Completed\", \"Current\", \"Disabled\"]).isRequired,\n /**\n * Title of the step.\n */\n title: PropTypes.string.isRequired,\n /**\n * Number of the step.\n */\n number: PropTypes.number,\n /**\n * Event onClick of the step.\n */\n onClick: PropTypes.func,\n /**\n * Define if a step is disabled/enabled.\n * If this property is not defined and the step is on state \"Disabled\", the step component will be disabled\n */\n disabled: PropTypes.bool,\n};\n\nexport default withStyles(styles, { name: \"HvStep\" })(HvStep);\n"],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","names":["default"],"sources":["../../../../../src/StepNavigation/DefaultNavigation/Step/index.js"],"sourcesContent":["export { default } from \"./Step\";\n"],"mappings":"AAAA,SAASA,OAAT,QAAwB,QAAxB"}
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
const styles = () => ({
|
|
2
|
+
root: {},
|
|
3
|
+
ghostDisabled: {},
|
|
4
|
+
ghost: {
|
|
5
|
+
"&:hover": {
|
|
6
|
+
backgroundColor: "transparent"
|
|
7
|
+
},
|
|
8
|
+
"&$ghostDisabled": {
|
|
9
|
+
cursor: "default"
|
|
10
|
+
},
|
|
11
|
+
"&$ghostDisabled&:hover": {
|
|
12
|
+
cursor: "default"
|
|
13
|
+
}
|
|
14
|
+
},
|
|
15
|
+
"not-current": {
|
|
16
|
+
margin: "-8px"
|
|
17
|
+
},
|
|
18
|
+
XS: {},
|
|
19
|
+
SM: {},
|
|
20
|
+
MD: {},
|
|
21
|
+
LG: {},
|
|
22
|
+
XL: {},
|
|
23
|
+
avatar: {
|
|
24
|
+
"&$XS": {
|
|
25
|
+
fontSize: "0.625rem"
|
|
26
|
+
},
|
|
27
|
+
"&$SM": {
|
|
28
|
+
fontSize: "1rem"
|
|
29
|
+
},
|
|
30
|
+
"&$MD": {
|
|
31
|
+
fontSize: "1.5rem"
|
|
32
|
+
},
|
|
33
|
+
"&$LG": {
|
|
34
|
+
fontSize: "2rem"
|
|
35
|
+
},
|
|
36
|
+
"&$XL": {
|
|
37
|
+
fontSize: "2.5rem"
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
});
|
|
41
|
+
|
|
42
|
+
export default styles;
|
|
43
|
+
//# sourceMappingURL=styles.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"styles.js","names":["styles","root","ghostDisabled","ghost","backgroundColor","cursor","margin","XS","SM","MD","LG","XL","avatar","fontSize"],"sources":["../../../../../src/StepNavigation/DefaultNavigation/Step/styles.js"],"sourcesContent":["const styles = () => ({\n root: {},\n ghostDisabled: {},\n ghost: {\n \"&:hover\": {\n backgroundColor: \"transparent\",\n },\n \"&$ghostDisabled\": {\n cursor: \"default\",\n },\n \"&$ghostDisabled&:hover\": {\n cursor: \"default\",\n },\n },\n \"not-current\": {\n margin: \"-8px\",\n },\n XS: {},\n SM: {},\n MD: {},\n LG: {},\n XL: {},\n avatar: {\n \"&$XS\": {\n fontSize: \"0.625rem\",\n },\n \"&$SM\": {\n fontSize: \"1rem\",\n },\n \"&$MD\": {\n fontSize: \"1.5rem\",\n },\n \"&$LG\": {\n fontSize: \"2rem\",\n },\n \"&$XL\": {\n fontSize: \"2.5rem\",\n },\n },\n});\n\nexport default styles;\n"],"mappings":"AAAA,MAAMA,MAAM,GAAG,OAAO;EACpBC,IAAI,EAAE,EADc;EAEpBC,aAAa,EAAE,EAFK;EAGpBC,KAAK,EAAE;IACL,WAAW;MACTC,eAAe,EAAE;IADR,CADN;IAIL,mBAAmB;MACjBC,MAAM,EAAE;IADS,CAJd;IAOL,0BAA0B;MACxBA,MAAM,EAAE;IADgB;EAPrB,CAHa;EAcpB,eAAe;IACbC,MAAM,EAAE;EADK,CAdK;EAiBpBC,EAAE,EAAE,EAjBgB;EAkBpBC,EAAE,EAAE,EAlBgB;EAmBpBC,EAAE,EAAE,EAnBgB;EAoBpBC,EAAE,EAAE,EApBgB;EAqBpBC,EAAE,EAAE,EArBgB;EAsBpBC,MAAM,EAAE;IACN,QAAQ;MACNC,QAAQ,EAAE;IADJ,CADF;IAIN,QAAQ;MACNA,QAAQ,EAAE;IADJ,CAJF;IAON,QAAQ;MACNA,QAAQ,EAAE;IADJ,CAPF;IAUN,QAAQ;MACNA,QAAQ,EAAE;IADJ,CAVF;IAaN,QAAQ;MACNA,QAAQ,EAAE;IADJ;EAbF;AAtBY,CAAP,CAAf;;AAyCA,eAAeb,MAAf"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","names":["default"],"sources":["../../../../src/StepNavigation/DefaultNavigation/index.js"],"sourcesContent":["export { default } from \"./DefaultNavigation\";\n"],"mappings":"AAAA,SAASA,OAAT,QAAwB,qBAAxB"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"styles.js","names":["styles","root"],"sources":["../../../../src/StepNavigation/DefaultNavigation/styles.js"],"sourcesContent":["const styles = () => ({\n root: {},\n});\n\nexport default styles;\n"],"mappings":"AAAA,MAAMA,MAAM,GAAG,OAAO;EACpBC,IAAI,EAAE;AADc,CAAP,CAAf;;AAIA,eAAeD,MAAf"}
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
const getColor = (state, theme) => {
|
|
2
|
+
var _theme$hv$palette$sem, _theme$hv, _theme$hv$palette, _theme$hv$palette$sem2, _theme$hv$palette$sem3, _theme$hv2, _theme$hv2$palette, _theme$hv2$palette$se, _theme$hv$palette$sem4, _theme$hv3, _theme$hv3$palette, _theme$hv3$palette$se, _theme$hv$palette$acc, _theme$hv4, _theme$hv4$palette, _theme$hv4$palette$ac, _theme$hv$palette$atm, _theme$hv5, _theme$hv5$palette, _theme$hv5$palette$at;
|
|
3
|
+
|
|
4
|
+
return {
|
|
5
|
+
Pending: (_theme$hv$palette$sem = theme === null || theme === void 0 ? void 0 : (_theme$hv = theme.hv) === null || _theme$hv === void 0 ? void 0 : (_theme$hv$palette = _theme$hv.palette) === null || _theme$hv$palette === void 0 ? void 0 : (_theme$hv$palette$sem2 = _theme$hv$palette.semantic) === null || _theme$hv$palette$sem2 === void 0 ? void 0 : _theme$hv$palette$sem2.sema3) !== null && _theme$hv$palette$sem !== void 0 ? _theme$hv$palette$sem : "sema3",
|
|
6
|
+
Failed: (_theme$hv$palette$sem3 = theme === null || theme === void 0 ? void 0 : (_theme$hv2 = theme.hv) === null || _theme$hv2 === void 0 ? void 0 : (_theme$hv2$palette = _theme$hv2.palette) === null || _theme$hv2$palette === void 0 ? void 0 : (_theme$hv2$palette$se = _theme$hv2$palette.semantic) === null || _theme$hv2$palette$se === void 0 ? void 0 : _theme$hv2$palette$se.sema4) !== null && _theme$hv$palette$sem3 !== void 0 ? _theme$hv$palette$sem3 : "sema4",
|
|
7
|
+
Completed: (_theme$hv$palette$sem4 = theme === null || theme === void 0 ? void 0 : (_theme$hv3 = theme.hv) === null || _theme$hv3 === void 0 ? void 0 : (_theme$hv3$palette = _theme$hv3.palette) === null || _theme$hv3$palette === void 0 ? void 0 : (_theme$hv3$palette$se = _theme$hv3$palette.semantic) === null || _theme$hv3$palette$se === void 0 ? void 0 : _theme$hv3$palette$se.sema1) !== null && _theme$hv$palette$sem4 !== void 0 ? _theme$hv$palette$sem4 : "sema1",
|
|
8
|
+
Current: (_theme$hv$palette$acc = theme === null || theme === void 0 ? void 0 : (_theme$hv4 = theme.hv) === null || _theme$hv4 === void 0 ? void 0 : (_theme$hv4$palette = _theme$hv4.palette) === null || _theme$hv4$palette === void 0 ? void 0 : (_theme$hv4$palette$ac = _theme$hv4$palette.accent) === null || _theme$hv4$palette$ac === void 0 ? void 0 : _theme$hv4$palette$ac.acce1) !== null && _theme$hv$palette$acc !== void 0 ? _theme$hv$palette$acc : "acce1",
|
|
9
|
+
Disabled: (_theme$hv$palette$atm = theme === null || theme === void 0 ? void 0 : (_theme$hv5 = theme.hv) === null || _theme$hv5 === void 0 ? void 0 : (_theme$hv5$palette = _theme$hv5.palette) === null || _theme$hv5$palette === void 0 ? void 0 : (_theme$hv5$palette$at = _theme$hv5$palette.atmosphere) === null || _theme$hv5$palette$at === void 0 ? void 0 : _theme$hv5$palette$at.atmo5) !== null && _theme$hv$palette$atm !== void 0 ? _theme$hv$palette$atm : "atmo5"
|
|
10
|
+
}[state];
|
|
11
|
+
};
|
|
12
|
+
|
|
13
|
+
const EXTRA_SMALL = {
|
|
14
|
+
container: 32,
|
|
15
|
+
avatar: 24
|
|
16
|
+
};
|
|
17
|
+
const SMALL = {
|
|
18
|
+
container: 40,
|
|
19
|
+
avatar: 32
|
|
20
|
+
};
|
|
21
|
+
const MEDIUM = {
|
|
22
|
+
container: 48,
|
|
23
|
+
avatar: 40
|
|
24
|
+
};
|
|
25
|
+
const LARGE = {
|
|
26
|
+
container: 60,
|
|
27
|
+
avatar: 52
|
|
28
|
+
};
|
|
29
|
+
const EXTRA_LARGE = {
|
|
30
|
+
container: 96,
|
|
31
|
+
avatar: 88
|
|
32
|
+
};
|
|
33
|
+
const stepSizes = {
|
|
34
|
+
XS: EXTRA_SMALL,
|
|
35
|
+
SM: SMALL,
|
|
36
|
+
MD: MEDIUM,
|
|
37
|
+
LG: LARGE,
|
|
38
|
+
XL: EXTRA_LARGE
|
|
39
|
+
};
|
|
40
|
+
export { getColor, stepSizes };
|
|
41
|
+
//# sourceMappingURL=utils.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"utils.js","names":["getColor","state","theme","Pending","hv","palette","semantic","sema3","Failed","sema4","Completed","sema1","Current","accent","acce1","Disabled","atmosphere","atmo5","EXTRA_SMALL","container","avatar","SMALL","MEDIUM","LARGE","EXTRA_LARGE","stepSizes","XS","SM","MD","LG","XL"],"sources":["../../../../src/StepNavigation/DefaultNavigation/utils.js"],"sourcesContent":["const getColor = (state, theme) =>\n ({\n Pending: theme?.hv?.palette?.semantic?.sema3 ?? \"sema3\",\n Failed: theme?.hv?.palette?.semantic?.sema4 ?? \"sema4\",\n Completed: theme?.hv?.palette?.semantic?.sema1 ?? \"sema1\",\n Current: theme?.hv?.palette?.accent?.acce1 ?? \"acce1\",\n Disabled: theme?.hv?.palette?.atmosphere?.atmo5 ?? \"atmo5\",\n }[state]);\n\nconst EXTRA_SMALL = { container: 32, avatar: 24 };\nconst SMALL = { container: 40, avatar: 32 };\nconst MEDIUM = { container: 48, avatar: 40 };\nconst LARGE = { container: 60, avatar: 52 };\nconst EXTRA_LARGE = { container: 96, avatar: 88 };\n\nconst stepSizes = {\n XS: EXTRA_SMALL,\n SM: SMALL,\n MD: MEDIUM,\n LG: LARGE,\n XL: EXTRA_LARGE,\n};\n\nexport { getColor, stepSizes };\n"],"mappings":"AAAA,MAAMA,QAAQ,GAAG,CAACC,KAAD,EAAQC,KAAR;EAAA;;EAAA,OACd;IACCC,OAAO,2BAAED,KAAF,aAAEA,KAAF,oCAAEA,KAAK,CAAEE,EAAT,mEAAE,UAAWC,OAAb,gFAAE,kBAAoBC,QAAtB,2DAAE,uBAA8BC,KAAhC,yEAAyC,OADjD;IAECC,MAAM,4BAAEN,KAAF,aAAEA,KAAF,qCAAEA,KAAK,CAAEE,EAAT,qEAAE,WAAWC,OAAb,gFAAE,mBAAoBC,QAAtB,0DAAE,sBAA8BG,KAAhC,2EAAyC,OAFhD;IAGCC,SAAS,4BAAER,KAAF,aAAEA,KAAF,qCAAEA,KAAK,CAAEE,EAAT,qEAAE,WAAWC,OAAb,gFAAE,mBAAoBC,QAAtB,0DAAE,sBAA8BK,KAAhC,2EAAyC,OAHnD;IAICC,OAAO,2BAAEV,KAAF,aAAEA,KAAF,qCAAEA,KAAK,CAAEE,EAAT,qEAAE,WAAWC,OAAb,gFAAE,mBAAoBQ,MAAtB,0DAAE,sBAA4BC,KAA9B,yEAAuC,OAJ/C;IAKCC,QAAQ,2BAAEb,KAAF,aAAEA,KAAF,qCAAEA,KAAK,CAAEE,EAAT,qEAAE,WAAWC,OAAb,gFAAE,mBAAoBW,UAAtB,0DAAE,sBAAgCC,KAAlC,yEAA2C;EALpD,EAMChB,KAND,CADc;AAAA,CAAjB;;AASA,MAAMiB,WAAW,GAAG;EAAEC,SAAS,EAAE,EAAb;EAAiBC,MAAM,EAAE;AAAzB,CAApB;AACA,MAAMC,KAAK,GAAG;EAAEF,SAAS,EAAE,EAAb;EAAiBC,MAAM,EAAE;AAAzB,CAAd;AACA,MAAME,MAAM,GAAG;EAAEH,SAAS,EAAE,EAAb;EAAiBC,MAAM,EAAE;AAAzB,CAAf;AACA,MAAMG,KAAK,GAAG;EAAEJ,SAAS,EAAE,EAAb;EAAiBC,MAAM,EAAE;AAAzB,CAAd;AACA,MAAMI,WAAW,GAAG;EAAEL,SAAS,EAAE,EAAb;EAAiBC,MAAM,EAAE;AAAzB,CAApB;AAEA,MAAMK,SAAS,GAAG;EAChBC,EAAE,EAAER,WADY;EAEhBS,EAAE,EAAEN,KAFY;EAGhBO,EAAE,EAAEN,MAHY;EAIhBO,EAAE,EAAEN,KAJY;EAKhBO,EAAE,EAAEN;AALY,CAAlB;AAQA,SAASxB,QAAT,EAAmByB,SAAnB"}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { StandardProps } from "@mui/material";
|
|
3
|
+
import { HvStepProps } from "../../DefaultNavigation/Step";
|
|
4
|
+
|
|
5
|
+
export type HvDotClassKey = "root";
|
|
6
|
+
|
|
7
|
+
export type HvDotProps = StandardProps<React.HTMLAttributes<HTMLDivElement>, HvDotClassKey> &
|
|
8
|
+
Pick<HvStepProps, "size" | "title" | "state" | "onClick" | "disabled">;
|
|
9
|
+
|
|
10
|
+
export default function HvDot(props: HvDotProps): JSX.Element | null;
|
|
@@ -0,0 +1,123 @@
|
|
|
1
|
+
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
|
|
2
|
+
|
|
3
|
+
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
4
|
+
|
|
5
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
6
|
+
|
|
7
|
+
import React, { useCallback, useMemo } from "react";
|
|
8
|
+
import PropTypes from "prop-types";
|
|
9
|
+
import clsx from "clsx";
|
|
10
|
+
import { HvButton } from "@hitachivantara/uikit-react-core";
|
|
11
|
+
import { withStyles, makeStyles } from "@mui/styles";
|
|
12
|
+
import { defaultColor, disabledColor, dotSizes } from "../utils";
|
|
13
|
+
import styles from "./styles";
|
|
14
|
+
/**
|
|
15
|
+
* Step element of "Simple" Step Navigation root component
|
|
16
|
+
*/
|
|
17
|
+
|
|
18
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
19
|
+
|
|
20
|
+
const HvDot = ({
|
|
21
|
+
classes,
|
|
22
|
+
className,
|
|
23
|
+
state,
|
|
24
|
+
title,
|
|
25
|
+
size,
|
|
26
|
+
onClick,
|
|
27
|
+
disabled
|
|
28
|
+
}) => {
|
|
29
|
+
const dotSize = dotSizes[size] * (state === "Current" ? 1.5 : 1);
|
|
30
|
+
const getBackgroundColor = useCallback(theme => state === "Disabled" ? disabledColor(theme) : defaultColor(theme), [state]);
|
|
31
|
+
const customClasses = useMemo(() => makeStyles(theme => {
|
|
32
|
+
const backgroundColor = getBackgroundColor(theme);
|
|
33
|
+
return {
|
|
34
|
+
ghostDisabled: {},
|
|
35
|
+
active: {},
|
|
36
|
+
ghost: _objectSpread(_objectSpread({}, styles.ghost), {}, {
|
|
37
|
+
width: dotSize,
|
|
38
|
+
height: dotSize,
|
|
39
|
+
backgroundColor,
|
|
40
|
+
"&:hover": {
|
|
41
|
+
backgroundColor
|
|
42
|
+
},
|
|
43
|
+
"&$ghostDisabled": _objectSpread(_objectSpread({}, styles.ghost["&$ghostDisabled"]), {}, {
|
|
44
|
+
backgroundColor
|
|
45
|
+
}),
|
|
46
|
+
"&$ghostDisabled&:hover": _objectSpread(_objectSpread({}, styles.ghost["&$ghostDisabled&:hover"]), {}, {
|
|
47
|
+
backgroundColor
|
|
48
|
+
})
|
|
49
|
+
})
|
|
50
|
+
};
|
|
51
|
+
}), [dotSize, getBackgroundColor])();
|
|
52
|
+
return /*#__PURE__*/_jsx(HvButton, {
|
|
53
|
+
className: clsx(classes.root, customClasses.ghost, (disabled !== null && disabled !== void 0 ? disabled : "Current Disabled".includes(state)) && customClasses.ghostDisabled, className, state === "Current" && customClasses.active),
|
|
54
|
+
"aria-label": `step-${title}`,
|
|
55
|
+
icon: true,
|
|
56
|
+
overrideIconColors: false,
|
|
57
|
+
disabled: disabled !== null && disabled !== void 0 ? disabled : ["Current", "Disabled"].includes(state),
|
|
58
|
+
onClick: onClick,
|
|
59
|
+
children: []
|
|
60
|
+
});
|
|
61
|
+
};
|
|
62
|
+
|
|
63
|
+
process.env.NODE_ENV !== "production" ? HvDot.propTypes = {
|
|
64
|
+
/**
|
|
65
|
+
* Class names to be applied.
|
|
66
|
+
*/
|
|
67
|
+
className: PropTypes.string,
|
|
68
|
+
|
|
69
|
+
/**
|
|
70
|
+
* A Jss Object used to override or extend the styles applied.
|
|
71
|
+
*/
|
|
72
|
+
classes: PropTypes.shape({
|
|
73
|
+
/**
|
|
74
|
+
* Styles applied to the component root class.
|
|
75
|
+
*/
|
|
76
|
+
root: PropTypes.string,
|
|
77
|
+
|
|
78
|
+
/**
|
|
79
|
+
* Styles applied to the active class.
|
|
80
|
+
*/
|
|
81
|
+
active: PropTypes.string,
|
|
82
|
+
|
|
83
|
+
/**
|
|
84
|
+
* Styles applied to the ghost class.
|
|
85
|
+
*/
|
|
86
|
+
ghost: PropTypes.string,
|
|
87
|
+
|
|
88
|
+
/**
|
|
89
|
+
* Styles applied to the ghostDisabled class.
|
|
90
|
+
*/
|
|
91
|
+
ghostDisabled: PropTypes.string
|
|
92
|
+
}).isRequired,
|
|
93
|
+
|
|
94
|
+
/**
|
|
95
|
+
* State of the step. Values = {"Pending", "Failed", "Completed", "Current", "Disabled"}
|
|
96
|
+
*/
|
|
97
|
+
state: PropTypes.oneOf(["Pending", "Failed", "Completed", "Current", "Disabled"]).isRequired,
|
|
98
|
+
|
|
99
|
+
/**
|
|
100
|
+
* Title of the step.
|
|
101
|
+
*/
|
|
102
|
+
title: PropTypes.string.isRequired,
|
|
103
|
+
|
|
104
|
+
/**
|
|
105
|
+
* Sets one of the standard sizes of the steps
|
|
106
|
+
*/
|
|
107
|
+
size: PropTypes.oneOf(["XS", "SM", "MD", "LG", "XL"]).isRequired,
|
|
108
|
+
|
|
109
|
+
/**
|
|
110
|
+
* Event onClick of the step.
|
|
111
|
+
*/
|
|
112
|
+
onClick: PropTypes.func,
|
|
113
|
+
|
|
114
|
+
/**
|
|
115
|
+
* Define if a step is disabled/enabled.
|
|
116
|
+
* If this property is not defined and the step is on state "Disabled", the step component will be disabled
|
|
117
|
+
*/
|
|
118
|
+
disabled: PropTypes.bool
|
|
119
|
+
} : void 0;
|
|
120
|
+
export default withStyles(styles, {
|
|
121
|
+
name: "HvDot"
|
|
122
|
+
})(HvDot);
|
|
123
|
+
//# sourceMappingURL=Dot.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Dot.js","names":["React","useCallback","useMemo","PropTypes","clsx","HvButton","withStyles","makeStyles","defaultColor","disabledColor","dotSizes","styles","HvDot","classes","className","state","title","size","onClick","disabled","dotSize","getBackgroundColor","theme","customClasses","backgroundColor","ghostDisabled","active","ghost","width","height","root","includes","propTypes","string","shape","isRequired","oneOf","func","bool","name"],"sources":["../../../../../src/StepNavigation/SimpleNavigation/Dot/Dot.js"],"sourcesContent":["import React, { useCallback, useMemo } from \"react\";\nimport PropTypes from \"prop-types\";\nimport clsx from \"clsx\";\n\nimport { HvButton } from \"@hitachivantara/uikit-react-core\";\nimport { withStyles, makeStyles } from \"@mui/styles\";\n\nimport { defaultColor, disabledColor, dotSizes } from \"../utils\";\nimport styles from \"./styles\";\n\n/**\n * Step element of \"Simple\" Step Navigation root component\n */\nconst HvDot = ({ classes, className, state, title, size, onClick, disabled }) => {\n const dotSize = dotSizes[size] * (state === \"Current\" ? 1.5 : 1);\n const getBackgroundColor = useCallback(\n (theme) => (state === \"Disabled\" ? disabledColor(theme) : defaultColor(theme)),\n [state]\n );\n const customClasses = useMemo(\n () =>\n makeStyles((theme) => {\n const backgroundColor = getBackgroundColor(theme);\n return {\n ghostDisabled: {},\n active: {},\n ghost: {\n ...styles.ghost,\n width: dotSize,\n height: dotSize,\n backgroundColor,\n \"&:hover\": {\n backgroundColor,\n },\n \"&$ghostDisabled\": {\n ...styles.ghost[\"&$ghostDisabled\"],\n backgroundColor,\n },\n \"&$ghostDisabled&:hover\": {\n ...styles.ghost[\"&$ghostDisabled&:hover\"],\n backgroundColor,\n },\n },\n };\n }),\n [dotSize, getBackgroundColor]\n )();\n return (\n <HvButton\n className={clsx(\n classes.root,\n customClasses.ghost,\n {\n [customClasses.active]: state === \"Current\",\n [customClasses.ghostDisabled]: disabled ?? [\"Current\", \"Disabled\"].includes(state),\n },\n className\n )}\n aria-label={`step-${title}`}\n icon\n overrideIconColors={false}\n disabled={disabled ?? [\"Current\", \"Disabled\"].includes(state)}\n onClick={onClick}\n >\n {[]}\n </HvButton>\n );\n};\n\nHvDot.propTypes = {\n /**\n * Class names to be applied.\n */\n className: PropTypes.string,\n /**\n * A Jss Object used to override or extend the styles applied.\n */\n classes: PropTypes.shape({\n /**\n * Styles applied to the component root class.\n */\n root: PropTypes.string,\n /**\n * Styles applied to the active class.\n */\n active: PropTypes.string,\n /**\n * Styles applied to the ghost class.\n */\n ghost: PropTypes.string,\n /**\n * Styles applied to the ghostDisabled class.\n */\n ghostDisabled: PropTypes.string,\n }).isRequired,\n /**\n * State of the step. Values = {\"Pending\", \"Failed\", \"Completed\", \"Current\", \"Disabled\"}\n */\n state: PropTypes.oneOf([\"Pending\", \"Failed\", \"Completed\", \"Current\", \"Disabled\"]).isRequired,\n /**\n * Title of the step.\n */\n title: PropTypes.string.isRequired,\n /**\n * Sets one of the standard sizes of the steps\n */\n size: PropTypes.oneOf([\"XS\", \"SM\", \"MD\", \"LG\", \"XL\"]).isRequired,\n /**\n * Event onClick of the step.\n */\n onClick: PropTypes.func,\n /**\n * Define if a step is disabled/enabled.\n * If this property is not defined and the step is on state \"Disabled\", the step component will be disabled\n */\n disabled: PropTypes.bool,\n};\n\nexport default withStyles(styles, { name: \"HvDot\" })(HvDot);\n"],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","names":["default"],"sources":["../../../../../src/StepNavigation/SimpleNavigation/Dot/index.js"],"sourcesContent":["export { default } from \"./Dot\";\n"],"mappings":"AAAA,SAASA,OAAT,QAAwB,OAAxB"}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
const styles = {
|
|
2
|
+
root: {
|
|
3
|
+
borderRadius: "50%",
|
|
4
|
+
zIndex: 1
|
|
5
|
+
},
|
|
6
|
+
ghostDisabled: {},
|
|
7
|
+
active: {},
|
|
8
|
+
ghost: {
|
|
9
|
+
"&$active": {
|
|
10
|
+
cursor: "default"
|
|
11
|
+
},
|
|
12
|
+
"&$active&:hover": {
|
|
13
|
+
cursor: "default"
|
|
14
|
+
}
|
|
15
|
+
}
|
|
16
|
+
};
|
|
17
|
+
export default styles;
|
|
18
|
+
//# sourceMappingURL=styles.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"styles.js","names":["styles","root","borderRadius","zIndex","ghostDisabled","active","ghost","cursor"],"sources":["../../../../../src/StepNavigation/SimpleNavigation/Dot/styles.js"],"sourcesContent":["const styles = {\n root: {\n borderRadius: \"50%\",\n zIndex: 1,\n },\n ghostDisabled: {},\n active: {},\n ghost: {\n \"&$active\": {\n cursor: \"default\",\n },\n \"&$active&:hover\": {\n cursor: \"default\",\n },\n },\n};\n\nexport default styles;\n"],"mappings":"AAAA,MAAMA,MAAM,GAAG;EACbC,IAAI,EAAE;IACJC,YAAY,EAAE,KADV;IAEJC,MAAM,EAAE;EAFJ,CADO;EAKbC,aAAa,EAAE,EALF;EAMbC,MAAM,EAAE,EANK;EAObC,KAAK,EAAE;IACL,YAAY;MACVC,MAAM,EAAE;IADE,CADP;IAIL,mBAAmB;MACjBA,MAAM,EAAE;IADS;EAJd;AAPM,CAAf;AAiBA,eAAeP,MAAf"}
|
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { StandardProps } from "@mui/material";
|
|
3
|
+
|
|
4
|
+
import { HvStepNavigationProps } from "../StepNavigation";
|
|
5
|
+
import { HvDotProps } from "./Dot";
|
|
6
|
+
|
|
7
|
+
export type HvSimpleNavigationClassKey = "root";
|
|
8
|
+
|
|
9
|
+
export type ComponentChildProps = {
|
|
10
|
+
stepsWidth: number;
|
|
11
|
+
navWidth: number;
|
|
12
|
+
separatorValues: {
|
|
13
|
+
minWidth: number;
|
|
14
|
+
maxWidth: number;
|
|
15
|
+
getColor: (state: HvDotProps["state"]) => any;
|
|
16
|
+
height: number;
|
|
17
|
+
};
|
|
18
|
+
stepValues: {
|
|
19
|
+
minSize: number;
|
|
20
|
+
maxSize: number;
|
|
21
|
+
StepComponent: React.ComponentType<HvDotProps>;
|
|
22
|
+
};
|
|
23
|
+
};
|
|
24
|
+
|
|
25
|
+
export type HvSimpleNavigationProps = StandardProps<
|
|
26
|
+
React.HTMLAttributes<HTMLDivElement>,
|
|
27
|
+
HvSimpleNavigationClassKey
|
|
28
|
+
> &
|
|
29
|
+
Pick<HvStepNavigationProps, "stepSize"> & {
|
|
30
|
+
/**
|
|
31
|
+
* Number of steps to show on the component.
|
|
32
|
+
*/
|
|
33
|
+
numSteps: number;
|
|
34
|
+
/**
|
|
35
|
+
* Returns a JSX.element of the titles container.
|
|
36
|
+
*/
|
|
37
|
+
getTitles: (
|
|
38
|
+
getTitleProps?: (params: {
|
|
39
|
+
state: HvDotProps["state"];
|
|
40
|
+
rawTitle: string;
|
|
41
|
+
number: number;
|
|
42
|
+
}) => { variant: string; title: string }
|
|
43
|
+
) => JSX.Element | null;
|
|
44
|
+
/**
|
|
45
|
+
* Returns dynamic width values of the component (width, titleWidth, separatorWidth).
|
|
46
|
+
*/
|
|
47
|
+
getDynamicValues: (stepsWidth: number) => {
|
|
48
|
+
width: number;
|
|
49
|
+
titleWidth: number;
|
|
50
|
+
separatorWidth: number;
|
|
51
|
+
};
|
|
52
|
+
/**
|
|
53
|
+
* Component to render Step Navigation with props = {separatorValues, stepValues, stepsWidth}
|
|
54
|
+
*/
|
|
55
|
+
children: React.FunctionComponent<ComponentChildProps>;
|
|
56
|
+
};
|
|
57
|
+
|
|
58
|
+
export default function HvSimpleNavigation(props: HvSimpleNavigationProps): JSX.Element | null;
|