Merge pull request #422 from indiana-university/feature/382/StepIndic…

…ator

feat: Implemented Step Indicator (#382)

src/components/PageContent/StepIndicator/Step.jsx

@@ -0,0 +1,69 @@
+/*
+Copyright (C) 2018 The Trustees of Indiana University
+SPDX-License-Identifier: BSD-3-Clause
+*/
+import classNames from "classnames";
+import * as PropTypes from "prop-types";
+import * as React from "react";
+import * as Rivet from "../../util/Rivet";
+import { TestUtils } from "../../util/TestUtils";
+
+const testIds = TestUtils.StepIndicator
+const Step = ({
+  children,
+  className,
+  current,
+  indicator,
+  label,
+  onClick,
+  testMode = false,
+  url,
+  variant,
+  ...attrs
+}) => {
+  const classNameArr = [
+    "rvt-steps__item",
+    className
+  ]
+  const indicatorClassNameArr = [
+    "rvt-steps__indicator",
+    variant ? `rvt-steps__indicator--${variant}` : ""
+  ]
+  return (
+    <li
+      className={classNames(classNameArr)}
+      {...(testMode && { "data-testid": testIds.step })}
+      {...attrs}
+    >
+      <a
+        className="rvt-steps__item-content"
+        {...(current && { "aria-current": "step" })}
+        {...(onClick && { onClick })}
+        href={url}
+      >
+        <span className="rvt-steps__label">{label}</span>
+        <span className={classNames(indicatorClassNameArr)}>{indicator}</span>
+      </a>
+    </li>
+  )
+};
+
+Step.displayName = "Step";
+Step.propTypes = {
+  /** Indicates item is current step */
+  current: PropTypes.bool,
+  /** An brief indicator for the step */
+  indicator: PropTypes.oneOfType([PropTypes.string, PropTypes.element]).isRequired,
+  /** Label for the step */
+  label: PropTypes.string.isRequired,
+  /** A click event for step */
+  onClick: PropTypes.func,
+  /** [Developer] Adds data-testId attributes for component testing */
+  testMode: PropTypes.bool,
+  /** A url for step */
+  url: PropTypes.string.isRequired,
+  /** The variant type which determines how the step is styled */
+  variant: PropTypes.oneOf(["success", "warning", "danger"])
+};
+
+export default Rivet.rivetize(Step);

src/components/PageContent/StepIndicator/Step.md

@@ -0,0 +1,3 @@
+Use the `StepIndicator.Step` to add items to `StepIndicator`. See `StepIndicator` for usage.
+
+

src/components/PageContent/StepIndicator/StepIndicator.jsx

@@ -0,0 +1,49 @@
+/*
+Copyright (C) 2018 The Trustees of Indiana University
+SPDX-License-Identifier: BSD-3-Clause
+*/
+import classNames from "classnames";
+import * as PropTypes from "prop-types";
+import * as React from "react";
+import * as Rivet from "../../util/Rivet";
+import { TestUtils } from "../../util/TestUtils";
+import Step from "./Step"
+
+const testIds = TestUtils.StepIndicator
+/**
+ * Show the user's position in and progress through a multi-step process
+ */
+const StepIndicator = ({
+  children,
+  className,
+  testMode = false,
+  variant,
+  ...attrs
+}) => {
+  const classNameArr = [
+    "rvt-steps",
+    variant === "vertical" ? "rvt-steps--vertical" : "",
+    className
+  ]
+  return (
+    <ol
+      className={classNames(classNameArr)}
+      {...(testMode && { "data-testid": testIds.container })}
+      {...attrs}
+    >
+      {children}
+    </ol>
+  )
+};
+
+StepIndicator.displayName = "StepIndicator";
+StepIndicator.propTypes = {
+  /** [Developer] Adds data-testId attributes for component testing */
+  testMode: PropTypes.bool,
+  /** The variant type which determines how the step indicator is styled */
+  variant: PropTypes.oneOf(["horizontal", "vertical"])
+};
+
+StepIndicator.Step = Step;
+
+export default Rivet.rivetize(StepIndicator);

src/components/PageContent/StepIndicator/StepIndicator.md

@@ -0,0 +1,39 @@
+Use the step indicator component to show the user’s position in and progress through a multi-step process.
+
+Step indicators are often used on application forms or workflow screens.
+
+View the [Rivet documentation for Step indicator](https://rivet.uits.iu.edu/components/step-indicator/).
+
+### Step Indicator Examples
+
+<!-- prettier-ignore-start -->
+```jsx
+<StepIndicator>
+    <Step indicator="1" label="Step 1" url="#" />
+    <Step indicator="2" label="Click Action" url="#" onClick={() =>  console.log('Step 2 Clicked') }/>
+    <Step indicator="3" label="Step 3" url="#" />
+</StepIndicator>
+```
+<!-- prettier-ignore-end -->
+
+<!-- prettier-ignore-start -->
+```jsx
+<StepIndicator variant="vertical">
+    <Step indicator="1" label="Step 1" url="#" />
+    <Step indicator="2" label="Step 2" url="#" />
+    <Step indicator="3" label="Step 3" url="#" />
+</StepIndicator>
+```
+<!-- prettier-ignore-end -->
+
+<!-- prettier-ignore-start -->
+```jsx
+<StepIndicator>
+    <Step indicator="1" label="Normal" />
+    <Step current indicator="2" label="Current" url="#" />
+    <Step indicator="3" label="Success" url="#" variant="success"/>
+    <Step indicator="4" label="Warning" url="#" variant="warning"/>
+    <Step indicator="5" label="Danger" url="#" variant="danger"/>
+</StepIndicator>
+```
+<!-- prettier-ignore-end -->