@hitachivantara/uikit-react-lab 3.52.3 → 3.55.0

package/dist/legacy/ImageCarousel/styles.js

@@ -0,0 +1,228 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+
+var styles = function styles(theme) {
+  var _notFullscreen, _img, _thumbnailSelected, _imageContainer;
+
+  return {
+    root: {
+      "&:not(.xs)": {
+        background: theme.hv.palette.atmosphere.atmo1,
+        display: "flex",
+        alignItems: "center",
+        flexDirection: "column",
+        margin: "0px",
+        paddingTop: "15px",
+        paddingBottom: "15px"
+      },
+      "&:not(.nxs)": {
+        width: "100%",
+        maxWidth: "500px",
+        height: "200px",
+        padding: "0px"
+      }
+    },
+    fullscreenStyle: {
+      width: "100vw",
+      height: "100vh",
+      position: "fixed",
+      padding: "10px 150px 10px 150px",
+      top: 0,
+      left: 0,
+      zIndex: 1300
+    },
+    closeButton: {
+      position: "absolute",
+      right: "25px"
+    },
+    selectedImage: {
+      "&:not(.contain)": {
+        objectFit: "cover"
+      },
+      "&:not(.cover)": {
+        objectFit: "contain"
+      },
+      "&:not(.xs)": {
+        width: "100%",
+        textAlign: "center",
+        "&:not(.fullscreen)": (_notFullscreen = {}, _defineProperty(_notFullscreen, theme.breakpoints.up("xs"), {
+          height: "150px",
+          minHeight: "150px"
+        }), _defineProperty(_notFullscreen, theme.breakpoints.up("sm"), {
+          height: "300px",
+          minHeight: "300px"
+        }), _defineProperty(_notFullscreen, theme.breakpoints.up("lg"), {
+          height: "450px",
+          minHeight: "450px"
+        }), _notFullscreen),
+        "&:not(.notFullscreen)": {
+          height: "100%"
+        }
+      },
+      "&:not(.nxs)": {
+        width: "100%",
+        textAlign: "center"
+      }
+    },
+    xsMode: {
+      width: "min-content",
+      height: "min-content",
+      margin: "0px",
+      textAlign: "center"
+    },
+    circles: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center"
+    },
+    xsCircles: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      position: "relative",
+      transform: "translateY(-63px)"
+    },
+    hidden: {
+      visibility: "hidden"
+    },
+    title: {
+      display: "flex",
+      alignItems: "flex-start",
+      width: "100%",
+      justifyContent: "space-between"
+    },
+    divCounter: {
+      width: "100%",
+      paddingTop: "10px",
+      paddingRight: "15px",
+      display: "flex",
+      justifyContent: "flex-end",
+      position: "relative",
+      bottom: "102%",
+      "&:not(.nxs)": {
+        right: "5%",
+        bottom: "262px",
+        padding: "0px"
+      }
+    },
+    counter: {
+      width: "45px",
+      backgroundColor: theme.hv.palette.base.base2
+    },
+    img: (_img = {
+      width: "100%",
+      height: "70px"
+    }, _defineProperty(_img, theme.breakpoints.up("lg"), {
+      height: "75px"
+    }), _defineProperty(_img, "textAlign", "center"), _defineProperty(_img, "objectFit", "cover"), _img),
+    thumbnailSelected: (_thumbnailSelected = {
+      width: "100%",
+      height: "70px"
+    }, _defineProperty(_thumbnailSelected, theme.breakpoints.up("lg"), {
+      height: "75px"
+    }), _defineProperty(_thumbnailSelected, "textAlign", "center"), _defineProperty(_thumbnailSelected, "objectFit", "cover"), _defineProperty(_thumbnailSelected, "borderStyle", "solid"), _defineProperty(_thumbnailSelected, "borderColor", theme.hv.palette.base.base2), _defineProperty(_thumbnailSelected, "opacity", "50%"), _thumbnailSelected),
+    thumbnailButton: _defineProperty({
+      width: "110px",
+      height: "70px",
+      padding: "0px 0px"
+    }, theme.breakpoints.up("lg"), {
+      width: "120px",
+      height: "75px"
+    }),
+    miniCircle: {
+      width: "5px",
+      height: "5px",
+      borderRadius: "50%",
+      backgroundColor: theme.hv.palette.atmosphere.atmo4,
+      display: "inline-block",
+      margin: "10px"
+    },
+    selectedCircle: {
+      width: "10px",
+      height: "10px",
+      borderRadius: "50%",
+      backgroundColor: theme.hv.palette.atmosphere.atmo5,
+      display: "inline-block",
+      margin: "10px"
+    },
+    xsSelectedCircle: {
+      width: "10px",
+      height: "10px",
+      borderRadius: "50%",
+      backgroundColor: theme.hv.palette.atmosphere.atmo3,
+      display: "inline-block",
+      margin: "10px"
+    },
+    lowButtons: {
+      width: "95%",
+      display: "inline-flex",
+      justifyContent: "space-between",
+      position: "relative",
+      top: "-50%",
+      transform: "translateY(-16px)",
+      "&:not(.nxs)": {
+        width: "90%",
+        top: "-99px"
+      }
+    },
+    imageContainer: (_imageContainer = {
+      width: "100%",
+      marginTop: "20px",
+      margin: "0px",
+      textAlign: "center",
+      padding: "0px"
+    }, _defineProperty(_imageContainer, theme.breakpoints.up("xs"), {
+      height: "150px",
+      minHeight: "150px"
+    }), _defineProperty(_imageContainer, theme.breakpoints.up("sm"), {
+      height: "300px",
+      minHeight: "300px"
+    }), _defineProperty(_imageContainer, theme.breakpoints.up("lg"), {
+      height: "450px",
+      minHeight: "450px"
+    }), _defineProperty(_imageContainer, "&:not(.notFullscreen)", {
+      height: "85%",
+      alignItems: "center"
+    }), _imageContainer),
+    button: {
+      backgroundColor: theme.hv.palette.atmosphere.atmo3
+    },
+    inputImage: _defineProperty({
+      width: "110px",
+      height: "70px",
+      padding: "0px 0px"
+    }, theme.breakpoints.up("lg"), {
+      width: "120px",
+      height: "75px"
+    }),
+    stack: {
+      "&:not(.xs)": {
+        width: "100%",
+        display: "flex",
+        alignSelf: "center",
+        height: "100%",
+        padding: "0px"
+      },
+      "&:not(.flag)": {
+        overflowX: "hidden"
+      },
+      "&:not(.nxs)": {
+        height: "200px",
+        display: "flex",
+        padding: "0px"
+      }
+    },
+    normalButtons: {
+      padding: "5px 0px"
+    },
+    panel: {
+      display: "flex",
+      width: "100%",
+      overflow: "hidden",
+      padding: "3px",
+      height: "75px"
+    }
+  };
+};
+
+export default styles;
+//# sourceMappingURL=styles.js.map

package/dist/legacy/ImageCarousel/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","names":["styles","theme","root","background","hv","palette","atmosphere","atmo1","display","alignItems","flexDirection","margin","paddingTop","paddingBottom","width","maxWidth","height","padding","fullscreenStyle","position","top","left","zIndex","closeButton","right","selectedImage","objectFit","textAlign","breakpoints","up","minHeight","xsMode","circles","justifyContent","xsCircles","transform","hidden","visibility","title","divCounter","paddingRight","bottom","counter","backgroundColor","base","base2","img","thumbnailSelected","thumbnailButton","miniCircle","borderRadius","atmo4","selectedCircle","atmo5","xsSelectedCircle","atmo3","lowButtons","imageContainer","marginTop","button","inputImage","stack","alignSelf","overflowX","normalButtons","panel","overflow"],"sources":["../../../src/ImageCarousel/styles.js"],"sourcesContent":["const styles = (theme) => ({\n  root: {\n    \"&:not(.xs)\": {\n      background: theme.hv.palette.atmosphere.atmo1,\n      display: \"flex\",\n      alignItems: \"center\",\n      flexDirection: \"column\",\n      margin: \"0px\",\n      paddingTop: \"15px\",\n      paddingBottom: \"15px\",\n    },\n    \"&:not(.nxs)\": {\n      width: \"100%\",\n      maxWidth: \"500px\",\n      height: \"200px\",\n      padding: \"0px\",\n    },\n  },\n  fullscreenStyle: {\n    width: \"100vw\",\n    height: \"100vh\",\n    position: \"fixed\",\n    padding: \"10px 150px 10px 150px\",\n    top: 0,\n    left: 0,\n    zIndex: 1300,\n  },\n  closeButton: {\n    position: \"absolute\",\n    right: \"25px\",\n  },\n  selectedImage: {\n    \"&:not(.contain)\": {\n      objectFit: \"cover\",\n    },\n    \"&:not(.cover)\": {\n      objectFit: \"contain\",\n    },\n    \"&:not(.xs)\": {\n      width: \"100%\",\n      textAlign: \"center\",\n      \"&:not(.fullscreen)\": {\n        [theme.breakpoints.up(\"xs\")]: {\n          height: \"150px\",\n          minHeight: \"150px\",\n        },\n        [theme.breakpoints.up(\"sm\")]: {\n          height: \"300px\",\n          minHeight: \"300px\",\n        },\n        [theme.breakpoints.up(\"lg\")]: {\n          height: \"450px\",\n          minHeight: \"450px\",\n        },\n      },\n      \"&:not(.notFullscreen)\": {\n        height: \"100%\",\n      },\n    },\n    \"&:not(.nxs)\": {\n      width: \"100%\",\n      textAlign: \"center\",\n    },\n  },\n  xsMode: {\n    width: \"min-content\",\n    height: \"min-content\",\n    margin: \"0px\",\n    textAlign: \"center\",\n  },\n  circles: {\n    display: \"flex\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n  },\n  xsCircles: {\n    display: \"flex\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    position: \"relative\",\n    transform: \"translateY(-63px)\",\n  },\n  hidden: {\n    visibility: \"hidden\",\n  },\n  title: {\n    display: \"flex\",\n    alignItems: \"flex-start\",\n    width: \"100%\",\n    justifyContent: \"space-between\",\n  },\n  divCounter: {\n    width: \"100%\",\n    paddingTop: \"10px\",\n    paddingRight: \"15px\",\n    display: \"flex\",\n    justifyContent: \"flex-end\",\n    position: \"relative\",\n    bottom: \"102%\",\n    \"&:not(.nxs)\": {\n      right: \"5%\",\n      bottom: \"262px\",\n      padding: \"0px\",\n    },\n  },\n  counter: {\n    width: \"45px\",\n    backgroundColor: theme.hv.palette.base.base2,\n  },\n  img: {\n    width: \"100%\",\n    height: \"70px\",\n    [theme.breakpoints.up(\"lg\")]: {\n      height: \"75px\",\n    },\n    textAlign: \"center\",\n    objectFit: \"cover\",\n  },\n  thumbnailSelected: {\n    width: \"100%\",\n    height: \"70px\",\n    [theme.breakpoints.up(\"lg\")]: {\n      height: \"75px\",\n    },\n    textAlign: \"center\",\n    objectFit: \"cover\",\n    borderStyle: \"solid\",\n    borderColor: theme.hv.palette.base.base2,\n    opacity: \"50%\",\n  },\n  thumbnailButton: {\n    width: \"110px\",\n    height: \"70px\",\n    padding: \"0px 0px\",\n    [theme.breakpoints.up(\"lg\")]: {\n      width: \"120px\",\n      height: \"75px\",\n    },\n  },\n  miniCircle: {\n    width: \"5px\",\n    height: \"5px\",\n    borderRadius: \"50%\",\n    backgroundColor: theme.hv.palette.atmosphere.atmo4,\n    display: \"inline-block\",\n    margin: \"10px\",\n  },\n  selectedCircle: {\n    width: \"10px\",\n    height: \"10px\",\n    borderRadius: \"50%\",\n    backgroundColor: theme.hv.palette.atmosphere.atmo5,\n    display: \"inline-block\",\n    margin: \"10px\",\n  },\n  xsSelectedCircle: {\n    width: \"10px\",\n    height: \"10px\",\n    borderRadius: \"50%\",\n    backgroundColor: theme.hv.palette.atmosphere.atmo3,\n    display: \"inline-block\",\n    margin: \"10px\",\n  },\n  lowButtons: {\n    width: \"95%\",\n    display: \"inline-flex\",\n    justifyContent: \"space-between\",\n    position: \"relative\",\n    top: \"-50%\",\n    transform: \"translateY(-16px)\",\n    \"&:not(.nxs)\": {\n      width: \"90%\",\n      top: \"-99px\",\n    },\n  },\n  imageContainer: {\n    width: \"100%\",\n    marginTop: \"20px\",\n    margin: \"0px\",\n    textAlign: \"center\",\n    padding: \"0px\",\n    [theme.breakpoints.up(\"xs\")]: {\n      height: \"150px\",\n      minHeight: \"150px\",\n    },\n    [theme.breakpoints.up(\"sm\")]: {\n      height: \"300px\",\n      minHeight: \"300px\",\n    },\n    [theme.breakpoints.up(\"lg\")]: {\n      height: \"450px\",\n      minHeight: \"450px\",\n    },\n    \"&:not(.notFullscreen)\": {\n      height: \"85%\",\n      alignItems: \"center\",\n    },\n  },\n  button: {\n    backgroundColor: theme.hv.palette.atmosphere.atmo3,\n  },\n  inputImage: {\n    width: \"110px\",\n    height: \"70px\",\n    padding: \"0px 0px\",\n    [theme.breakpoints.up(\"lg\")]: {\n      width: \"120px\",\n      height: \"75px\",\n    },\n  },\n  stack: {\n    \"&:not(.xs)\": {\n      width: \"100%\",\n      display: \"flex\",\n      alignSelf: \"center\",\n      height: \"100%\",\n      padding: \"0px\",\n    },\n    \"&:not(.flag)\": {\n      overflowX: \"hidden\",\n    },\n    \"&:not(.nxs)\": {\n      height: \"200px\",\n      display: \"flex\",\n      padding: \"0px\",\n    },\n  },\n  normalButtons: {\n    padding: \"5px 0px\",\n  },\n  panel: {\n    display: \"flex\",\n    width: \"100%\",\n    overflow: \"hidden\",\n    padding: \"3px\",\n    height: \"75px\",\n  },\n});\n\nexport default styles;\n"],"mappings":"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"}

package/dist/legacy/StepNavigation/DefaultNavigation/DefaultNavigation.d.ts

@@ -0,0 +1,58 @@
+import * as React from "react";
+import { StandardProps } from "@material-ui/core";
+
+import { HvStepNavigationProps } from "../StepNavigation";
+import { HvStepProps } from "./Step";
+
+export type HvDefaultNavigationClassKey = "root";
+
+export type ComponentChildProps = {
+  stepsWidth: number;
+  navWidth: number;
+  separatorValues: {
+    minWidth: number;
+    maxWidth: number;
+    getColor: (state: HvStepProps["state"]) => any;
+    height: number;
+  };
+  stepValues: {
+    minSize: number;
+    maxSize: number;
+    StepComponent: React.ComponentType<HvStepProps>;
+  };
+};
+
+export type HvDefaultNavigationProps = StandardProps<
+  React.HTMLAttributes<HTMLDivElement>,
+  HvDefaultNavigationClassKey
+> &
+  Pick<HvStepNavigationProps, "stepSize"> & {
+    /**
+     * Number of steps to show on the component.
+     */
+    numSteps: number;
+    /**
+     * Returns a JSX.element of the titles container.
+     */
+    getTitles: (
+      getTitleProps?: (params: {
+        state: HvStepProps["state"];
+        rawTitle: string;
+        number: number;
+      }) => { variant: string; title: string }
+    ) => JSX.Element | null;
+    /**
+     * Returns dynamic width values of the component (width, titleWidth, separatorWidth).
+     */
+    getDynamicValues: (stepsWidth: number) => {
+      width: number;
+      titleWidth: number;
+      separatorWidth: number;
+    };
+    /**
+     * Component to render Step Navigation with props = {separatorValues, stepValues, stepsWidth}
+     */
+    children: React.FunctionComponent<ComponentChildProps>;
+  };
+
+export default function HvDefaultNavigation(props: HvDefaultNavigationProps): JSX.Element | null;

package/dist/legacy/StepNavigation/DefaultNavigation/DefaultNavigation.js

@@ -0,0 +1,112 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["numSteps", "stepSize", "getTitles", "getDynamicValues", "children"];
+import React from "react";
+import PropTypes from "prop-types";
+import { useTheme, withStyles } from "@material-ui/core";
+import HvStep from "./Step";
+import { getColor as getStateColor, stepSizes } from "./utils";
+import styles from "./styles";
+/**
+ * Default Navigation
+ */
+
+var HvDefaultNavigation = function HvDefaultNavigation(_ref) {
+  var numSteps = _ref.numSteps,
+      stepSize = _ref.stepSize,
+      getTitles = _ref.getTitles,
+      getDynamicValues = _ref.getDynamicValues,
+      children = _ref.children,
+      other = _objectWithoutProperties(_ref, _excluded);
+
+  var theme = useTheme(); // step values
+
+  var _stepSizes$stepSize = stepSizes[stepSize],
+      maxSize = _stepSizes$stepSize.container,
+      minSize = _stepSizes$stepSize.avatar;
+  var StepComponent = HvStep; //
+
+  var stepsWidth = maxSize + minSize * (numSteps - 1);
+
+  var _getDynamicValues = getDynamicValues(stepsWidth),
+      width = _getDynamicValues.width,
+      titleWidth = _getDynamicValues.titleWidth,
+      separatorWidth = _getDynamicValues.separatorWidth; // separator values
+
+
+  var getColor = function getColor(state) {
+    return getStateColor(state === "Current" ? "Disabled" : state, theme);
+  };
+
+  var maxWidth = Math.max(titleWidth - minSize, separatorWidth);
+  var minWidth = Math.max(titleWidth - (maxSize + minSize) * 0.5, separatorWidth); //
+
+  var Steps = children;
+  var titles = getTitles(function (_ref2) {
+    var state = _ref2.state;
+    return {
+      variant: state === "Disabled" ? "disabledText" : "highlightText",
+      titleWidth: titleWidth
+    };
+  });
+  return /*#__PURE__*/React.createElement("div", other, /*#__PURE__*/React.createElement(Steps, {
+    stepsWidth: stepsWidth,
+    navWidth: width,
+    separatorValues: {
+      minWidth: minWidth,
+      maxWidth: maxWidth,
+      getColor: getColor,
+      height: 3
+    },
+    stepValues: {
+      minSize: minSize,
+      maxSize: maxSize,
+      StepComponent: StepComponent
+    }
+  }), titles);
+};
+
+process.env.NODE_ENV !== "production" ? HvDefaultNavigation.propTypes = {
+  /**
+   * Class names to be applied.
+   */
+  className: PropTypes.string,
+
+  /**
+   * A Jss Object used to override or extend the styles applied.
+   */
+  classes: PropTypes.shape({
+    /**
+     * Styles applied to the component root class.
+     */
+    root: PropTypes.string
+  }).isRequired,
+
+  /**
+   * Number of steps to show on the component.
+   */
+  numSteps: PropTypes.number.isRequired,
+
+  /**
+   * Sets one of the standard sizes of the steps
+   */
+  stepSize: PropTypes.oneOf(["XS", "SM", "MD", "LG", "XL"]).isRequired,
+
+  /**
+   * Returns dynamic width values of the component (width, titleWidth, separatorWidth).
+   */
+  getDynamicValues: PropTypes.func.isRequired,
+
+  /**
+   * Returns a JSX.element of the titles container.
+   */
+  getTitles: PropTypes.func.isRequired,
+
+  /**
+   * Component to render Step Navigation with props = {separatorValues, stepValues, stepsWidth}
+   */
+  children: PropTypes.elementType.isRequired
+} : void 0;
+export default withStyles(styles, {
+  name: "HvDefaultNavigation"
+})(HvDefaultNavigation);
+//# sourceMappingURL=DefaultNavigation.js.map

package/dist/legacy/StepNavigation/DefaultNavigation/DefaultNavigation.js.map

@@ -0,0 +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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"}

package/dist/legacy/StepNavigation/DefaultNavigation/Step/Step.d.ts

@@ -0,0 +1,32 @@
+import * as React from "react";
+import { StandardProps } from "@material-ui/core";
+import { HvButtonProps } from "@hitachivantara/uikit-react-core";
+
+export type HvStepClassKey = "root";
+
+export type HvStepProps = StandardProps<React.HTMLAttributes<HTMLDivElement>, HvStepClassKey> &
+  Pick<HvButtonProps, "onClick"> & {
+    /**
+     * State of the step. Values = {"Pending", "Failed", "Completed", "Current", "Disabled"}
+     */
+    state: "Pending" | "Failed" | "Completed" | "Current" | "Disabled";
+    /**
+     * Title of the step.
+     */
+    title: string;
+    /**
+     * Sets one of the standard sizes of the step
+     */
+    size?: "XS" | "SM" | "MD" | "LG" | "XL";
+    /**
+     * Number of the step.
+     */
+    number?: number;
+    /**
+     * Define if a step is disabled/enabled.
+     * If this property is not defined and the step is on state "Disabled", the step component will be disabled
+     */
+    disabled?: boolean;
+  };
+
+export default function HvStep(props: HvStepProps): JSX.Element | null;

package/dist/legacy/StepNavigation/DefaultNavigation/Step/Step.js

@@ -0,0 +1,176 @@
+import "core-js/modules/es.array.includes.js";
+import React from "react";
+import PropTypes from "prop-types";
+import clsx from "clsx";
+import { withStyles } from "@material-ui/core";
+import { Level0Good, Level3Bad, HourGlass } from "@hitachivantara/uikit-react-icons";
+import { HvAvatar, HvButton } from "@hitachivantara/uikit-react-core";
+import { getColor } from "../utils";
+import styles from "./styles";
+/**
+ * Step element of "Default" Step Navigation root component
+ */
+
+var HvStep = function HvStep(_ref) {
+  var className = _ref.className,
+      classes = _ref.classes,
+      state = _ref.state,
+      title = _ref.title,
+      onClick = _ref.onClick,
+      disabled = _ref.disabled,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? "SM" : _ref$size,
+      _ref$number = _ref.number,
+      number = _ref$number === void 0 ? 1 : _ref$number;
+  var iconSize = {
+    XS: "XS",
+    SM: "XS",
+    MD: "S",
+    LG: "M",
+    XL: "M"
+  }[size];
+  var squareL = {
+    Pending: 16,
+    Failed: 24,
+    Completed: 24
+  }[state];
+  var svgSize = {
+    XS: squareL - 8,
+    SM: squareL,
+    MD: squareL + 8,
+    LG: squareL + 16,
+    XL: squareL + 24
+  }[size];
+  var backgroundColor = getColor(state);
+  var color = state === "Pending" ? "atmo2" : undefined;
+  var semantic = state !== "Pending" ? backgroundColor : undefined;
+  var status = state === "Current" ? "atmo5" : undefined;
+  var IconComponent = {
+    Pending: HourGlass,
+    Failed: Level3Bad,
+    Completed: Level0Good
+  }[state];
+  return /*#__PURE__*/React.createElement("div", {
+    className: clsx(className, classes.root, state !== "Current" && classes["not-current"])
+  }, /*#__PURE__*/React.createElement(HvButton, {
+    className: clsx(classes.ghost, state === "Current" && classes.ghostDisabled),
+    "aria-label": "step-".concat(title),
+    icon: true,
+    overrideIconColors: false,
+    disabled: disabled !== null && disabled !== void 0 ? disabled : ["Current", "Disabled"].includes(state),
+    onClick: onClick
+  }, /*#__PURE__*/React.createElement(HvAvatar, {
+    className: clsx(classes.avatar, classes[size]),
+    backgroundColor: backgroundColor,
+    status: status,
+    size: size
+  }, IconComponent ? /*#__PURE__*/React.createElement(IconComponent, {
+    color: color,
+    semantic: semantic,
+    width: svgSize,
+    height: svgSize,
+    iconSize: iconSize
+  }) : number)));
+};
+
+process.env.NODE_ENV !== "production" ? HvStep.propTypes = {
+  /**
+   * Class names to be applied.
+   */
+  className: PropTypes.string,
+
+  /**
+   * A Jss Object used to override or extend the styles applied.
+   */
+  classes: PropTypes.shape({
+    /**
+     * Styles applied to the component root class.
+     */
+    root: PropTypes.string,
+
+    /**
+     * Styles applied to the ghost class.
+     */
+    ghost: PropTypes.string,
+
+    /**
+     * Styles applied to the ghostDisabled class.
+     */
+    ghostDisabled: PropTypes.string,
+
+    /**
+     * Styles applied to the root element when step is not in "current" state.
+     */
+    "not-current": PropTypes.string,
+
+    /**
+     * Styles applied to the root element when size is XS.
+     */
+    XS: PropTypes.string,
+
+    /**
+     * Styles applied to the root element when size is SM.
+     */
+    SM: PropTypes.string,
+
+    /**
+     * Styles applied to the root element when size is MD.
+     */
+    MD: PropTypes.string,
+
+    /**
+     * Styles applied to the root element when size is LG.
+     */
+    LG: PropTypes.string,
+
+    /**
+     * Styles applied to the root element when size is XL.
+     */
+    XL: PropTypes.string,
+
+    /**
+     * Styles applied to the avatar element.
+     */
+    avatar: PropTypes.string,
+
+    /**
+     * Styles applied to the title of a step element.
+     */
+    stepTitle: PropTypes.string
+  }).isRequired,
+
+  /**
+   * Sets one of the standard sizes of the step
+   */
+  size: PropTypes.oneOf(["XS", "SM", "MD", "LG", "XL"]),
+
+  /**
+   * State of the step. Values = {"Pending", "Failed", "Completed", "Current", "Disabled"}
+   */
+  state: PropTypes.oneOf(["Pending", "Failed", "Completed", "Current", "Disabled"]).isRequired,
+
+  /**
+   * Title of the step.
+   */
+  title: PropTypes.string.isRequired,
+
+  /**
+   * Number of the step.
+   */
+  number: PropTypes.number,
+
+  /**
+   * Event onClick of the step.
+   */
+  onClick: PropTypes.func,
+
+  /**
+   * Define if a step is disabled/enabled.
+   * If this property is not defined and the step is on state "Disabled", the step component will be disabled
+   */
+  disabled: PropTypes.bool
+} : void 0;
+export default withStyles(styles, {
+  name: "HvStep"
+})(HvStep);
+//# sourceMappingURL=Step.js.map