@navinc/base-react-components
Version:
Nav's Pattern Library
14 lines (9 loc) • 912 B
Markdown
The FlowSteps component receives a flow of routes with corresponding icons and names,
as well as a reference to the current route within the component of which it is a child.
The component accepts a `flow` of steps along with a reference to the `currentPath` from an external router to keep the component aligned as the user moves from one step to the next.
When the index of the current route exceeds the indices of previous routes in the flow,
the icons representing these routes will turn gray and the icon SVG itself will become a check mark to indicate completion.
If an `endLocation` is passed, the flow stepper will render this as a last "dummy" step though it is the responsibility of the consuming component to push there and unmount the flow steps, as the endLocation will never be shown as `active`.
```
<FlowSteps flow={flowSteps} currentPath={location.pathname} endLocation={endLocation} />
```