@hitachivantara/uikit-react-lab 3.52.3 → 3.53.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/dist/StepNavigation/DefaultNavigation/DefaultNavigation.d.ts +58 -0
- package/dist/StepNavigation/DefaultNavigation/DefaultNavigation.js +130 -0
- package/dist/StepNavigation/DefaultNavigation/DefaultNavigation.js.map +1 -0
- package/dist/StepNavigation/DefaultNavigation/Step/Step.d.ts +27 -0
- package/dist/StepNavigation/DefaultNavigation/Step/Step.js +189 -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 +163 -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 +28 -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 +133 -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 +42 -0
- package/dist/StepNavigation/StepNavigation.js +377 -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 +3 -0
- package/dist/index.js +10 -1
- package/dist/index.js.map +1 -1
- package/dist/legacy/StepNavigation/DefaultNavigation/DefaultNavigation.d.ts +58 -0
- package/dist/legacy/StepNavigation/DefaultNavigation/DefaultNavigation.js +112 -0
- package/dist/legacy/StepNavigation/DefaultNavigation/DefaultNavigation.js.map +1 -0
- package/dist/legacy/StepNavigation/DefaultNavigation/Step/Step.d.ts +27 -0
- package/dist/legacy/StepNavigation/DefaultNavigation/Step/Step.js +169 -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 +122 -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 +21 -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 +113 -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 +42 -0
- package/dist/legacy/StepNavigation/StepNavigation.js +341 -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 +3 -0
- package/dist/legacy/index.js +1 -0
- package/dist/legacy/index.js.map +1 -1
- package/dist/modern/StepNavigation/DefaultNavigation/DefaultNavigation.d.ts +58 -0
- package/dist/modern/StepNavigation/DefaultNavigation/DefaultNavigation.js +111 -0
- package/dist/modern/StepNavigation/DefaultNavigation/DefaultNavigation.js.map +1 -0
- package/dist/modern/StepNavigation/DefaultNavigation/Step/Step.d.ts +27 -0
- package/dist/modern/StepNavigation/DefaultNavigation/Step/Step.js +168 -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 +111 -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 +21 -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 +110 -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 +42 -0
- package/dist/modern/StepNavigation/StepNavigation.js +324 -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 +3 -0
- package/dist/modern/index.js +1 -0
- package/dist/modern/index.js.map +1 -1
- package/package.json +3 -3
|
@@ -0,0 +1,112 @@
|
|
|
1
|
+
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
|
|
2
|
+
var _excluded = ["numSteps", "stepSize", "getTitles", "getDynamicValues", "children"];
|
|
3
|
+
import React from "react";
|
|
4
|
+
import PropTypes from "prop-types";
|
|
5
|
+
import { useTheme, withStyles } from "@material-ui/core";
|
|
6
|
+
import HvStep from "./Step";
|
|
7
|
+
import { getColor as getStateColor, stepSizes } from "./utils";
|
|
8
|
+
import styles from "./styles";
|
|
9
|
+
/**
|
|
10
|
+
* Default Navigation
|
|
11
|
+
*/
|
|
12
|
+
|
|
13
|
+
var HvDefaultNavigation = function HvDefaultNavigation(_ref) {
|
|
14
|
+
var numSteps = _ref.numSteps,
|
|
15
|
+
stepSize = _ref.stepSize,
|
|
16
|
+
getTitles = _ref.getTitles,
|
|
17
|
+
getDynamicValues = _ref.getDynamicValues,
|
|
18
|
+
children = _ref.children,
|
|
19
|
+
other = _objectWithoutProperties(_ref, _excluded);
|
|
20
|
+
|
|
21
|
+
var theme = useTheme(); // step values
|
|
22
|
+
|
|
23
|
+
var _stepSizes$stepSize = stepSizes[stepSize],
|
|
24
|
+
maxSize = _stepSizes$stepSize.container,
|
|
25
|
+
minSize = _stepSizes$stepSize.avatar;
|
|
26
|
+
var StepComponent = HvStep; //
|
|
27
|
+
|
|
28
|
+
var stepsWidth = maxSize + minSize * (numSteps - 1);
|
|
29
|
+
|
|
30
|
+
var _getDynamicValues = getDynamicValues(stepsWidth),
|
|
31
|
+
width = _getDynamicValues.width,
|
|
32
|
+
titleWidth = _getDynamicValues.titleWidth,
|
|
33
|
+
separatorWidth = _getDynamicValues.separatorWidth; // separator values
|
|
34
|
+
|
|
35
|
+
|
|
36
|
+
var getColor = function getColor(state) {
|
|
37
|
+
return getStateColor(state === "Current" ? "Disabled" : state, theme);
|
|
38
|
+
};
|
|
39
|
+
|
|
40
|
+
var maxWidth = Math.max(titleWidth - minSize, separatorWidth);
|
|
41
|
+
var minWidth = Math.max(titleWidth - (maxSize + minSize) * 0.5, separatorWidth); //
|
|
42
|
+
|
|
43
|
+
var Steps = children;
|
|
44
|
+
var titles = getTitles(function (_ref2) {
|
|
45
|
+
var state = _ref2.state;
|
|
46
|
+
return {
|
|
47
|
+
variant: state === "Disabled" ? "disabledText" : "highlightText",
|
|
48
|
+
titleWidth: titleWidth
|
|
49
|
+
};
|
|
50
|
+
});
|
|
51
|
+
return /*#__PURE__*/React.createElement("div", other, /*#__PURE__*/React.createElement(Steps, {
|
|
52
|
+
stepsWidth: stepsWidth,
|
|
53
|
+
navWidth: width,
|
|
54
|
+
separatorValues: {
|
|
55
|
+
minWidth: minWidth,
|
|
56
|
+
maxWidth: maxWidth,
|
|
57
|
+
getColor: getColor,
|
|
58
|
+
height: 3
|
|
59
|
+
},
|
|
60
|
+
stepValues: {
|
|
61
|
+
minSize: minSize,
|
|
62
|
+
maxSize: maxSize,
|
|
63
|
+
StepComponent: StepComponent
|
|
64
|
+
}
|
|
65
|
+
}), titles);
|
|
66
|
+
};
|
|
67
|
+
|
|
68
|
+
process.env.NODE_ENV !== "production" ? HvDefaultNavigation.propTypes = {
|
|
69
|
+
/**
|
|
70
|
+
* Class names to be applied.
|
|
71
|
+
*/
|
|
72
|
+
className: PropTypes.string,
|
|
73
|
+
|
|
74
|
+
/**
|
|
75
|
+
* A Jss Object used to override or extend the styles applied.
|
|
76
|
+
*/
|
|
77
|
+
classes: PropTypes.shape({
|
|
78
|
+
/**
|
|
79
|
+
* Styles applied to the component root class.
|
|
80
|
+
*/
|
|
81
|
+
root: PropTypes.string
|
|
82
|
+
}).isRequired,
|
|
83
|
+
|
|
84
|
+
/**
|
|
85
|
+
* Number of steps to show on the component.
|
|
86
|
+
*/
|
|
87
|
+
numSteps: PropTypes.number.isRequired,
|
|
88
|
+
|
|
89
|
+
/**
|
|
90
|
+
* Sets one of the standard sizes of the steps
|
|
91
|
+
*/
|
|
92
|
+
stepSize: PropTypes.oneOf(["XS", "SM", "MD", "LG", "XL"]).isRequired,
|
|
93
|
+
|
|
94
|
+
/**
|
|
95
|
+
* Returns dynamic width values of the component (width, titleWidth, separatorWidth).
|
|
96
|
+
*/
|
|
97
|
+
getDynamicValues: PropTypes.func.isRequired,
|
|
98
|
+
|
|
99
|
+
/**
|
|
100
|
+
* Returns a JSX.element of the titles container.
|
|
101
|
+
*/
|
|
102
|
+
getTitles: PropTypes.func.isRequired,
|
|
103
|
+
|
|
104
|
+
/**
|
|
105
|
+
* Component to render Step Navigation with props = {separatorValues, stepValues, stepsWidth}
|
|
106
|
+
*/
|
|
107
|
+
children: PropTypes.elementType.isRequired
|
|
108
|
+
} : void 0;
|
|
109
|
+
export default withStyles(styles, {
|
|
110
|
+
name: "HvDefaultNavigation"
|
|
111
|
+
})(HvDefaultNavigation);
|
|
112
|
+
//# sourceMappingURL=DefaultNavigation.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"DefaultNavigation.js","names":["React","PropTypes","useTheme","withStyles","HvStep","getColor","getStateColor","stepSizes","styles","HvDefaultNavigation","numSteps","stepSize","getTitles","getDynamicValues","children","other","theme","maxSize","container","minSize","avatar","StepComponent","stepsWidth","width","titleWidth","separatorWidth","state","maxWidth","Math","max","minWidth","Steps","titles","variant","navWidth","separatorValues","height","stepValues","propTypes","className","string","classes","shape","root","isRequired","number","oneOf","func","elementType","name"],"sources":["../../../../src/StepNavigation/DefaultNavigation/DefaultNavigation.js"],"sourcesContent":["import React from \"react\";\nimport PropTypes from \"prop-types\";\n\nimport { useTheme, withStyles } from \"@material-ui/core\";\n\nimport HvStep from \"./Step\";\nimport { getColor as getStateColor, stepSizes } from \"./utils\";\nimport styles from \"./styles\";\n\n/**\n * Default Navigation\n */\nconst HvDefaultNavigation = ({\n numSteps,\n stepSize,\n getTitles,\n getDynamicValues,\n children,\n ...other\n}) => {\n const theme = useTheme();\n\n // step values\n const { container: maxSize, avatar: minSize } = stepSizes[stepSize];\n const StepComponent = HvStep;\n //\n\n const stepsWidth = maxSize + minSize * (numSteps - 1);\n const { width, titleWidth, separatorWidth } = getDynamicValues(stepsWidth);\n\n // separator values\n const getColor = (state) => getStateColor(state === \"Current\" ? \"Disabled\" : state, theme);\n const maxWidth = Math.max(titleWidth - minSize, separatorWidth);\n const minWidth = Math.max(titleWidth - (maxSize + minSize) * 0.5, separatorWidth);\n //\n\n const Steps = children;\n\n const titles = getTitles(({ state }) => ({\n variant: state === \"Disabled\" ? \"disabledText\" : \"highlightText\",\n titleWidth,\n }));\n\n return (\n <div {...other}>\n <Steps\n {...{\n stepsWidth,\n navWidth: width,\n separatorValues: {\n minWidth,\n maxWidth,\n getColor,\n height: 3,\n },\n stepValues: {\n minSize,\n maxSize,\n StepComponent,\n },\n }}\n />\n {titles}\n </div>\n );\n};\n\nHvDefaultNavigation.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 }).isRequired,\n /**\n * Number of steps to show on the component.\n */\n numSteps: PropTypes.number.isRequired,\n /**\n * Sets one of the standard sizes of the steps\n */\n stepSize: PropTypes.oneOf([\"XS\", \"SM\", \"MD\", \"LG\", \"XL\"]).isRequired,\n /**\n * Returns dynamic width values of the component (width, titleWidth, separatorWidth).\n */\n getDynamicValues: PropTypes.func.isRequired,\n /**\n * Returns a JSX.element of the titles container.\n */\n getTitles: PropTypes.func.isRequired,\n /**\n * Component to render Step Navigation with props = {separatorValues, stepValues, stepsWidth}\n */\n children: PropTypes.elementType.isRequired,\n};\n\nexport default withStyles(styles, { name: \"HvDefaultNavigation\" })(HvDefaultNavigation);\n"],"mappings":"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"}
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { StandardProps } from "@material-ui/core";
|
|
3
|
+
import { HvButtonProps } from "@hitachivantara/uikit-react-core";
|
|
4
|
+
|
|
5
|
+
export type HvStepClassKey = "root";
|
|
6
|
+
|
|
7
|
+
export type HvStepProps = StandardProps<React.HTMLAttributes<HTMLDivElement>, HvStepClassKey> &
|
|
8
|
+
Pick<HvButtonProps, "onClick"> & {
|
|
9
|
+
/**
|
|
10
|
+
* State of the step. Values = {"Pending", "Failed", "Completed", "Current", "Disabled"}
|
|
11
|
+
*/
|
|
12
|
+
state: "Pending" | "Failed" | "Completed" | "Current" | "Disabled";
|
|
13
|
+
/**
|
|
14
|
+
* Title of the step.
|
|
15
|
+
*/
|
|
16
|
+
title: string;
|
|
17
|
+
/**
|
|
18
|
+
* Sets one of the standard sizes of the step
|
|
19
|
+
*/
|
|
20
|
+
size?: "XS" | "SM" | "MD" | "LG" | "XL";
|
|
21
|
+
/**
|
|
22
|
+
* Number of the step.
|
|
23
|
+
*/
|
|
24
|
+
number?: number;
|
|
25
|
+
};
|
|
26
|
+
|
|
27
|
+
export default function HvStep(props: HvStepProps): JSX.Element | null;
|
|
@@ -0,0 +1,169 @@
|
|
|
1
|
+
import "core-js/modules/es.array.includes.js";
|
|
2
|
+
import React from "react";
|
|
3
|
+
import PropTypes from "prop-types";
|
|
4
|
+
import clsx from "clsx";
|
|
5
|
+
import { withStyles } from "@material-ui/core";
|
|
6
|
+
import { Level0Good, Level3Bad, HourGlass } from "@hitachivantara/uikit-react-icons";
|
|
7
|
+
import { HvAvatar, HvButton } from "@hitachivantara/uikit-react-core";
|
|
8
|
+
import { getColor } from "../utils";
|
|
9
|
+
import styles from "./styles";
|
|
10
|
+
/**
|
|
11
|
+
* Step element of "Default" Step Navigation root component
|
|
12
|
+
*/
|
|
13
|
+
|
|
14
|
+
var HvStep = function HvStep(_ref) {
|
|
15
|
+
var className = _ref.className,
|
|
16
|
+
classes = _ref.classes,
|
|
17
|
+
state = _ref.state,
|
|
18
|
+
title = _ref.title,
|
|
19
|
+
onClick = _ref.onClick,
|
|
20
|
+
_ref$size = _ref.size,
|
|
21
|
+
size = _ref$size === void 0 ? "SM" : _ref$size,
|
|
22
|
+
_ref$number = _ref.number,
|
|
23
|
+
number = _ref$number === void 0 ? 1 : _ref$number;
|
|
24
|
+
var iconSize = {
|
|
25
|
+
XS: "XS",
|
|
26
|
+
SM: "XS",
|
|
27
|
+
MD: "S",
|
|
28
|
+
LG: "M",
|
|
29
|
+
XL: "M"
|
|
30
|
+
}[size];
|
|
31
|
+
var squareL = {
|
|
32
|
+
Pending: 16,
|
|
33
|
+
Failed: 24,
|
|
34
|
+
Completed: 24
|
|
35
|
+
}[state];
|
|
36
|
+
var svgSize = {
|
|
37
|
+
XS: squareL - 8,
|
|
38
|
+
SM: squareL,
|
|
39
|
+
MD: squareL + 8,
|
|
40
|
+
LG: squareL + 16,
|
|
41
|
+
XL: squareL + 24
|
|
42
|
+
}[size];
|
|
43
|
+
var backgroundColor = getColor(state);
|
|
44
|
+
var color = state === "Pending" ? "atmo2" : undefined;
|
|
45
|
+
var semantic = state !== "Pending" ? backgroundColor : undefined;
|
|
46
|
+
var status = state === "Current" ? "atmo5" : undefined;
|
|
47
|
+
var IconComponent = {
|
|
48
|
+
Pending: HourGlass,
|
|
49
|
+
Failed: Level3Bad,
|
|
50
|
+
Completed: Level0Good
|
|
51
|
+
}[state];
|
|
52
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
53
|
+
className: clsx(className, classes.root, state !== "Current" && classes["not-current"])
|
|
54
|
+
}, /*#__PURE__*/React.createElement(HvButton, {
|
|
55
|
+
className: clsx(classes.ghost, state === "Current" && classes.ghostDisabled),
|
|
56
|
+
"aria-label": "step-".concat(title),
|
|
57
|
+
icon: true,
|
|
58
|
+
overrideIconColors: false,
|
|
59
|
+
disabled: ["Current", "Disabled"].includes(state),
|
|
60
|
+
onClick: onClick
|
|
61
|
+
}, /*#__PURE__*/React.createElement(HvAvatar, {
|
|
62
|
+
className: clsx(classes.avatar, classes[size]),
|
|
63
|
+
backgroundColor: backgroundColor,
|
|
64
|
+
status: status,
|
|
65
|
+
size: size
|
|
66
|
+
}, IconComponent ? /*#__PURE__*/React.createElement(IconComponent, {
|
|
67
|
+
color: color,
|
|
68
|
+
semantic: semantic,
|
|
69
|
+
width: svgSize,
|
|
70
|
+
height: svgSize,
|
|
71
|
+
iconSize: iconSize
|
|
72
|
+
}) : number)));
|
|
73
|
+
};
|
|
74
|
+
|
|
75
|
+
process.env.NODE_ENV !== "production" ? HvStep.propTypes = {
|
|
76
|
+
/**
|
|
77
|
+
* Class names to be applied.
|
|
78
|
+
*/
|
|
79
|
+
className: PropTypes.string,
|
|
80
|
+
|
|
81
|
+
/**
|
|
82
|
+
* A Jss Object used to override or extend the styles applied.
|
|
83
|
+
*/
|
|
84
|
+
classes: PropTypes.shape({
|
|
85
|
+
/**
|
|
86
|
+
* Styles applied to the component root class.
|
|
87
|
+
*/
|
|
88
|
+
root: PropTypes.string,
|
|
89
|
+
|
|
90
|
+
/**
|
|
91
|
+
* Styles applied to the ghost class.
|
|
92
|
+
*/
|
|
93
|
+
ghost: PropTypes.string,
|
|
94
|
+
|
|
95
|
+
/**
|
|
96
|
+
* Styles applied to the ghostDisabled class.
|
|
97
|
+
*/
|
|
98
|
+
ghostDisabled: PropTypes.string,
|
|
99
|
+
|
|
100
|
+
/**
|
|
101
|
+
* Styles applied to the root element when step is not in "current" state.
|
|
102
|
+
*/
|
|
103
|
+
"not-current": PropTypes.string,
|
|
104
|
+
|
|
105
|
+
/**
|
|
106
|
+
* Styles applied to the root element when size is XS.
|
|
107
|
+
*/
|
|
108
|
+
XS: PropTypes.string,
|
|
109
|
+
|
|
110
|
+
/**
|
|
111
|
+
* Styles applied to the root element when size is SM.
|
|
112
|
+
*/
|
|
113
|
+
SM: PropTypes.string,
|
|
114
|
+
|
|
115
|
+
/**
|
|
116
|
+
* Styles applied to the root element when size is MD.
|
|
117
|
+
*/
|
|
118
|
+
MD: PropTypes.string,
|
|
119
|
+
|
|
120
|
+
/**
|
|
121
|
+
* Styles applied to the root element when size is LG.
|
|
122
|
+
*/
|
|
123
|
+
LG: PropTypes.string,
|
|
124
|
+
|
|
125
|
+
/**
|
|
126
|
+
* Styles applied to the root element when size is XL.
|
|
127
|
+
*/
|
|
128
|
+
XL: PropTypes.string,
|
|
129
|
+
|
|
130
|
+
/**
|
|
131
|
+
* Styles applied to the avatar element.
|
|
132
|
+
*/
|
|
133
|
+
avatar: PropTypes.string,
|
|
134
|
+
|
|
135
|
+
/**
|
|
136
|
+
* Styles applied to the title of a step element.
|
|
137
|
+
*/
|
|
138
|
+
stepTitle: PropTypes.string
|
|
139
|
+
}).isRequired,
|
|
140
|
+
|
|
141
|
+
/**
|
|
142
|
+
* Sets one of the standard sizes of the step
|
|
143
|
+
*/
|
|
144
|
+
size: PropTypes.oneOf(["XS", "SM", "MD", "LG", "XL"]),
|
|
145
|
+
|
|
146
|
+
/**
|
|
147
|
+
* State of the step. Values = {"Pending", "Failed", "Completed", "Current", "Disabled"}
|
|
148
|
+
*/
|
|
149
|
+
state: PropTypes.oneOf(["Pending", "Failed", "Completed", "Current", "Disabled"]).isRequired,
|
|
150
|
+
|
|
151
|
+
/**
|
|
152
|
+
* Title of the step.
|
|
153
|
+
*/
|
|
154
|
+
title: PropTypes.string.isRequired,
|
|
155
|
+
|
|
156
|
+
/**
|
|
157
|
+
* Number of the step.
|
|
158
|
+
*/
|
|
159
|
+
number: PropTypes.number,
|
|
160
|
+
|
|
161
|
+
/**
|
|
162
|
+
* Event onClick of the step.
|
|
163
|
+
*/
|
|
164
|
+
onClick: PropTypes.func
|
|
165
|
+
} : void 0;
|
|
166
|
+
export default withStyles(styles, {
|
|
167
|
+
name: "HvStep"
|
|
168
|
+
})(HvStep);
|
|
169
|
+
//# 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","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","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 \"@material-ui/core\";\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 = ({ className, classes, state, title, onClick, size = \"SM\", number = 1 }) => {\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={[\"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\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,45 @@
|
|
|
1
|
+
var styles = function styles() {
|
|
2
|
+
return {
|
|
3
|
+
root: {},
|
|
4
|
+
ghostDisabled: {},
|
|
5
|
+
ghost: {
|
|
6
|
+
"&:hover": {
|
|
7
|
+
backgroundColor: "transparent"
|
|
8
|
+
},
|
|
9
|
+
"&$ghostDisabled": {
|
|
10
|
+
cursor: "default"
|
|
11
|
+
},
|
|
12
|
+
"&$ghostDisabled&:hover": {
|
|
13
|
+
cursor: "default"
|
|
14
|
+
}
|
|
15
|
+
},
|
|
16
|
+
"not-current": {
|
|
17
|
+
margin: "-8px"
|
|
18
|
+
},
|
|
19
|
+
XS: {},
|
|
20
|
+
SM: {},
|
|
21
|
+
MD: {},
|
|
22
|
+
LG: {},
|
|
23
|
+
XL: {},
|
|
24
|
+
avatar: {
|
|
25
|
+
"&$XS": {
|
|
26
|
+
fontSize: "0.625rem"
|
|
27
|
+
},
|
|
28
|
+
"&$SM": {
|
|
29
|
+
fontSize: "1rem"
|
|
30
|
+
},
|
|
31
|
+
"&$MD": {
|
|
32
|
+
fontSize: "1.5rem"
|
|
33
|
+
},
|
|
34
|
+
"&$LG": {
|
|
35
|
+
fontSize: "2rem"
|
|
36
|
+
},
|
|
37
|
+
"&$XL": {
|
|
38
|
+
fontSize: "2.5rem"
|
|
39
|
+
}
|
|
40
|
+
}
|
|
41
|
+
};
|
|
42
|
+
};
|
|
43
|
+
|
|
44
|
+
export default styles;
|
|
45
|
+
//# 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,IAAMA,MAAM,GAAG,SAATA,MAAS;EAAA,OAAO;IACpBC,IAAI,EAAE,EADc;IAEpBC,aAAa,EAAE,EAFK;IAGpBC,KAAK,EAAE;MACL,WAAW;QACTC,eAAe,EAAE;MADR,CADN;MAIL,mBAAmB;QACjBC,MAAM,EAAE;MADS,CAJd;MAOL,0BAA0B;QACxBA,MAAM,EAAE;MADgB;IAPrB,CAHa;IAcpB,eAAe;MACbC,MAAM,EAAE;IADK,CAdK;IAiBpBC,EAAE,EAAE,EAjBgB;IAkBpBC,EAAE,EAAE,EAlBgB;IAmBpBC,EAAE,EAAE,EAnBgB;IAoBpBC,EAAE,EAAE,EApBgB;IAqBpBC,EAAE,EAAE,EArBgB;IAsBpBC,MAAM,EAAE;MACN,QAAQ;QACNC,QAAQ,EAAE;MADJ,CADF;MAIN,QAAQ;QACNA,QAAQ,EAAE;MADJ,CAJF;MAON,QAAQ;QACNA,QAAQ,EAAE;MADJ,CAPF;MAUN,QAAQ;QACNA,QAAQ,EAAE;MADJ,CAVF;MAaN,QAAQ;QACNA,QAAQ,EAAE;MADJ;IAbF;EAtBY,CAAP;AAAA,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,IAAMA,MAAM,GAAG,SAATA,MAAS;EAAA,OAAO;IACpBC,IAAI,EAAE;EADc,CAAP;AAAA,CAAf;;AAIA,eAAeD,MAAf"}
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
var getColor = function 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
|
+
var EXTRA_SMALL = {
|
|
14
|
+
container: 32,
|
|
15
|
+
avatar: 24
|
|
16
|
+
};
|
|
17
|
+
var SMALL = {
|
|
18
|
+
container: 40,
|
|
19
|
+
avatar: 32
|
|
20
|
+
};
|
|
21
|
+
var MEDIUM = {
|
|
22
|
+
container: 48,
|
|
23
|
+
avatar: 40
|
|
24
|
+
};
|
|
25
|
+
var LARGE = {
|
|
26
|
+
container: 60,
|
|
27
|
+
avatar: 52
|
|
28
|
+
};
|
|
29
|
+
var EXTRA_LARGE = {
|
|
30
|
+
container: 96,
|
|
31
|
+
avatar: 88
|
|
32
|
+
};
|
|
33
|
+
var 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,IAAMA,QAAQ,GAAG,SAAXA,QAAW,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,IAAMiB,WAAW,GAAG;EAAEC,SAAS,EAAE,EAAb;EAAiBC,MAAM,EAAE;AAAzB,CAApB;AACA,IAAMC,KAAK,GAAG;EAAEF,SAAS,EAAE,EAAb;EAAiBC,MAAM,EAAE;AAAzB,CAAd;AACA,IAAME,MAAM,GAAG;EAAEH,SAAS,EAAE,EAAb;EAAiBC,MAAM,EAAE;AAAzB,CAAf;AACA,IAAMG,KAAK,GAAG;EAAEJ,SAAS,EAAE,EAAb;EAAiBC,MAAM,EAAE;AAAzB,CAAd;AACA,IAAMI,WAAW,GAAG;EAAEL,SAAS,EAAE,EAAb;EAAiBC,MAAM,EAAE;AAAzB,CAApB;AAEA,IAAMK,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 "@material-ui/core";
|
|
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">;
|
|
9
|
+
|
|
10
|
+
export default function HvDot(props: HvDotProps): JSX.Element | null;
|
|
@@ -0,0 +1,122 @@
|
|
|
1
|
+
import "core-js/modules/es.object.keys.js";
|
|
2
|
+
import "core-js/modules/es.symbol.js";
|
|
3
|
+
import "core-js/modules/es.array.filter.js";
|
|
4
|
+
import "core-js/modules/es.object.to-string.js";
|
|
5
|
+
import "core-js/modules/es.object.get-own-property-descriptor.js";
|
|
6
|
+
import "core-js/modules/web.dom-collections.for-each.js";
|
|
7
|
+
import "core-js/modules/es.object.get-own-property-descriptors.js";
|
|
8
|
+
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
|
|
9
|
+
import "core-js/modules/es.string.includes.js";
|
|
10
|
+
import "core-js/modules/es.array.includes.js";
|
|
11
|
+
|
|
12
|
+
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; }
|
|
13
|
+
|
|
14
|
+
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; }
|
|
15
|
+
|
|
16
|
+
import React, { useCallback, useMemo } from "react";
|
|
17
|
+
import PropTypes from "prop-types";
|
|
18
|
+
import clsx from "clsx";
|
|
19
|
+
import { HvButton } from "@hitachivantara/uikit-react-core";
|
|
20
|
+
import { makeStyles, withStyles } from "@material-ui/core";
|
|
21
|
+
import { defaultColor, disabledColor, dotSizes } from "../utils";
|
|
22
|
+
import styles from "./styles";
|
|
23
|
+
/**
|
|
24
|
+
* Step element of "Simple" Step Navigation root component
|
|
25
|
+
*/
|
|
26
|
+
|
|
27
|
+
var HvDot = function HvDot(_ref) {
|
|
28
|
+
var classes = _ref.classes,
|
|
29
|
+
className = _ref.className,
|
|
30
|
+
state = _ref.state,
|
|
31
|
+
title = _ref.title,
|
|
32
|
+
size = _ref.size,
|
|
33
|
+
onClick = _ref.onClick;
|
|
34
|
+
var dotSize = dotSizes[size] * (state === "Current" ? 1.5 : 1);
|
|
35
|
+
var getBackgroundColor = useCallback(function (theme) {
|
|
36
|
+
return state === "Disabled" ? disabledColor(theme) : defaultColor(theme);
|
|
37
|
+
}, [state]);
|
|
38
|
+
var customClasses = useMemo(function () {
|
|
39
|
+
return makeStyles(function (theme) {
|
|
40
|
+
var backgroundColor = getBackgroundColor(theme);
|
|
41
|
+
return {
|
|
42
|
+
ghostDisabled: {},
|
|
43
|
+
active: {},
|
|
44
|
+
ghost: _objectSpread(_objectSpread({}, styles.ghost), {}, {
|
|
45
|
+
width: dotSize,
|
|
46
|
+
height: dotSize,
|
|
47
|
+
backgroundColor: backgroundColor,
|
|
48
|
+
"&$ghostDisabled": _objectSpread(_objectSpread({}, styles.ghost["&$ghostDisabled"]), {}, {
|
|
49
|
+
backgroundColor: backgroundColor
|
|
50
|
+
}),
|
|
51
|
+
"&$ghostDisabled&:hover": _objectSpread(_objectSpread({}, styles.ghost["&$ghostDisabled&:hover"]), {}, {
|
|
52
|
+
backgroundColor: backgroundColor
|
|
53
|
+
})
|
|
54
|
+
})
|
|
55
|
+
};
|
|
56
|
+
});
|
|
57
|
+
}, [dotSize, getBackgroundColor])();
|
|
58
|
+
return /*#__PURE__*/React.createElement(HvButton, {
|
|
59
|
+
className: clsx(classes.root, customClasses.ghost, className, "Current Disabled".includes(state) && customClasses.ghostDisabled, state === "Current" && customClasses.active),
|
|
60
|
+
"aria-label": "step-".concat(title),
|
|
61
|
+
icon: true,
|
|
62
|
+
overrideIconColors: false,
|
|
63
|
+
disabled: ["Current", "Disabled"].includes(state),
|
|
64
|
+
onClick: onClick
|
|
65
|
+
}, []);
|
|
66
|
+
};
|
|
67
|
+
|
|
68
|
+
process.env.NODE_ENV !== "production" ? HvDot.propTypes = {
|
|
69
|
+
/**
|
|
70
|
+
* Class names to be applied.
|
|
71
|
+
*/
|
|
72
|
+
className: PropTypes.string,
|
|
73
|
+
|
|
74
|
+
/**
|
|
75
|
+
* A Jss Object used to override or extend the styles applied.
|
|
76
|
+
*/
|
|
77
|
+
classes: PropTypes.shape({
|
|
78
|
+
/**
|
|
79
|
+
* Styles applied to the component root class.
|
|
80
|
+
*/
|
|
81
|
+
root: PropTypes.string,
|
|
82
|
+
|
|
83
|
+
/**
|
|
84
|
+
* Styles applied to the active class.
|
|
85
|
+
*/
|
|
86
|
+
active: PropTypes.string,
|
|
87
|
+
|
|
88
|
+
/**
|
|
89
|
+
* Styles applied to the ghost class.
|
|
90
|
+
*/
|
|
91
|
+
ghost: PropTypes.string,
|
|
92
|
+
|
|
93
|
+
/**
|
|
94
|
+
* Styles applied to the ghostDisabled class.
|
|
95
|
+
*/
|
|
96
|
+
ghostDisabled: PropTypes.string
|
|
97
|
+
}).isRequired,
|
|
98
|
+
|
|
99
|
+
/**
|
|
100
|
+
* State of the step. Values = {"Pending", "Failed", "Completed", "Current", "Disabled"}
|
|
101
|
+
*/
|
|
102
|
+
state: PropTypes.oneOf(["Pending", "Failed", "Completed", "Current", "Disabled"]).isRequired,
|
|
103
|
+
|
|
104
|
+
/**
|
|
105
|
+
* Title of the step.
|
|
106
|
+
*/
|
|
107
|
+
title: PropTypes.string.isRequired,
|
|
108
|
+
|
|
109
|
+
/**
|
|
110
|
+
* Sets one of the standard sizes of the steps
|
|
111
|
+
*/
|
|
112
|
+
size: PropTypes.oneOf(["XS", "SM", "MD", "LG", "XL"]).isRequired,
|
|
113
|
+
|
|
114
|
+
/**
|
|
115
|
+
* Event onClick of the step.
|
|
116
|
+
*/
|
|
117
|
+
onClick: PropTypes.func
|
|
118
|
+
} : void 0;
|
|
119
|
+
export default withStyles(styles, {
|
|
120
|
+
name: "HvDot"
|
|
121
|
+
})(HvDot);
|
|
122
|
+
//# sourceMappingURL=Dot.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Dot.js","names":["React","useCallback","useMemo","PropTypes","clsx","HvButton","makeStyles","withStyles","defaultColor","disabledColor","dotSizes","styles","HvDot","classes","className","state","title","size","onClick","dotSize","getBackgroundColor","theme","customClasses","backgroundColor","ghostDisabled","active","ghost","width","height","root","includes","propTypes","string","shape","isRequired","oneOf","func","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 { makeStyles, withStyles } from \"@material-ui/core\";\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 }) => {\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 \"&$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]: [\"Current\", \"Disabled\"].includes(state),\n },\n className\n )}\n aria-label={`step-${title}`}\n icon\n overrideIconColors={false}\n 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\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"}
|