= () => {
return (
-
-
-
- Completed
-
-
- Active
-
-
- Warning
-
-
- Error
-
-
- Default
-
+
+
+
+
-
+
);
};
-export const SingleVertical: StoryFn = () => {
+export const HorizontalInteractiveUsingSteppedReducer: StoryFn<
+ typeof SteppedTracker
+> = () => {
+ const [state, dispatch] = useStepReducer([
+ { key: "step-1", label: "Step 1" },
+ { key: "step-2", label: "Step 2", stage: "active" },
+ { key: "step-3", label: "Step 3" },
+ ]);
+
return (
-
-
- Step One
-
-
- Step Two
-
-
- Step Three
-
-
- Step Four
-
-
+
+
+ {state.steps.map((step) => (
+
+ ))}
+
+
+ {state.started && (
+
+ )}
+ {!state.ended && (
+
+ )}
+
+
);
};
-export const BasicVertical: StoryFn = () => {
+export const Vertical: StoryFn = () => {
return (
-
-
- Step One
-
-
- Step Two
-
-
- Step Three
-
-
- Step Four
-
-
-
-
- Step One
-
-
- Step Two
-
-
- Step Three
-
-
- Step Four
-
-
-
-
- Step One
-
-
- Step Two
-
-
- Step Three
-
-
- Step Four
-
+
+
+
+
);
};
-export const AutoProgress: StoryFn = () => {
- const [activeStep, setActiveStep] = useState(0);
- const [steps, setSteps] = useState(sampleSteps);
- const totalSteps = steps.length;
-
- const onComplete = () => {
- if (activeStep < totalSteps - 1) {
- setActiveStep((old) => old + 1);
- }
-
- setSteps((old) =>
- old.map((step, i) =>
- i === activeStep
- ? {
- ...step,
- state: "completed",
- }
- : step,
- ),
- );
- };
-
- const onRefresh = () => {
- setActiveStep(0);
- setSteps(sampleSteps);
- };
-
+export const VerticalVariations: StoryFn = () => {
return (
-
-
- {steps.map(({ label, state }) => (
-
- {label}
-
- ))}
+
+
+
+
+
+
+
+
+
-
-
-
-
-
-
);
};
-export const WrappingLabel: StoryFn = () => {
+export const VerticalLongText: StoryFn = () => {
return (
-
-
- Step One
-
-
-
- Step Two: I am a label that wraps on smaller screen sizes
-
-
-
-
- Step Three: I am a label that wraps on smaller screen sizes
-
-
-
- Step Four
-
+
+
+
+
);
};
-export const NonSequentialProgress: StoryFn = () => {
- const [activeStep, setActiveStep] = useState(0);
- const [steps, setSteps] = useState(sampleSteps);
- const totalSteps = steps.length;
+export const VerticalDepth1: StoryFn = () => {
+ return (
+
+
+
+
+
+
+
+
+
+
+
- const onNext = () => {
- setActiveStep((old) => (old < steps.length - 1 ? old + 1 : old));
- };
+
+
+
+
+
+
+
+ );
+};
- const onPrevious = () => {
- setActiveStep((old) => (old > 0 ? old - 1 : old));
- };
+export const VerticalDepth2 = () => {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
- const onToggleStep = () => {
- setSteps((old) =>
- old.map((step, i) =>
- i === activeStep
- ? {
- ...step,
- state: step.state === "pending" ? "completed" : "pending",
- }
- : step,
- ),
- );
- };
+export const VerticalInteractiveUsingSteppedReducer: StoryFn<
+ typeof SteppedTracker
+> = () => {
+ const [state, dispatch] = useStepReducer(
+ [
+ {
+ id: "step-1",
+ label: "Step 1",
+ defaultExpanded: true,
+ substeps: [
+ { id: "step-1-1", label: "Step 1.1" },
+ { id: "step-1-2", label: "Step 1.2" },
+ {
+ id: "step-1-3",
+ label: "Step 1.3",
+ defaultExpanded: true,
+ substeps: [
+ { id: "step-1-3-1", label: "Step 1.3.1" },
+ { id: "step-1-3-2", label: "Step 1.3.2" },
+ {
+ id: "step-1-3-3",
+ label: "Step 1.3.3",
+ description: "This is just a description text",
+ },
+ ],
+ },
+ { id: "step-1-4", label: "Step 1.4" },
+ ],
+ },
+ { id: "step-2", label: "Step 2" },
+ { id: "step-3", label: "Step 3" },
+ ],
+ { activeStepId: "step-1-3-2" },
+ );
return (
-
-
- {steps.map(({ label, state }) => (
-
- {label}
-
+
+
+ {state.steps.map((step) => (
+
))}
-
-
-
-
-
+
+ {state.started && (
+
+ )}
+ {!state.ended && (
+
+ )}
+
+
+ {state.started && !state.ended && (
+ <>
+
+
+
+
+ )}
+
+
+ );
+};
+
+export const BareBones: StoryFn = () => {
+ return (
+
+
+
+
+
+
);
};
diff --git a/site/docs/components/stepped-tracker/accessibility.mdx b/site/docs/components/stepped-tracker/accessibility.mdx
index c3d732734d1..22ba7ab8fad 100644
--- a/site/docs/components/stepped-tracker/accessibility.mdx
+++ b/site/docs/components/stepped-tracker/accessibility.mdx
@@ -8,4 +8,29 @@ data:
$ref: ./#/data
---
-Stepped trackers use `aria-current="step"` to indicate the current active step.
+## Keyboard interactions
+
+Keyboard interactions apply to only Steppers with steps with nested substeps.
+In those cases the parent step renders automatically a button that allows
+for expanding or collapsing the substeps.
+
+
+
+
+- Moves the focus down to the next expand button.
+- By default all steps with substeps are collapsed, meaning only top level
+ expand buttons will be focusable. Initially the top most step will be focused.
+- If the substeps contain more substeps, the focus will move to the inside steps only if the parent is expanded.
+
+
+
+
+- Moves the focus up to the previous expand button.
+
+
+
+
+- Applicable to only steps with substeps. Those steps are in the collapsed state by default. Using this action on an the arrow button expands or collapses the step.
+
+
+
diff --git a/site/docs/components/stepped-tracker/examples.mdx b/site/docs/components/stepped-tracker/examples.mdx
index b580b902a16..94fa81603ad 100644
--- a/site/docs/components/stepped-tracker/examples.mdx
+++ b/site/docs/components/stepped-tracker/examples.mdx
@@ -1,65 +1,81 @@
---
-title:
- $ref: ./#/title
-layout: DetailComponent
-sidebar:
- exclude: true
-data:
- $ref: ./#/data
+ title:
+ $ref: ./#/title
+ layout: DetailComponent
+ sidebar:
+ exclude: true
+ data:
+ $ref: ./#/data
---
-
-
## Basic
-`SteppedTracker` contains multiple `TrackerStep` child components. Each `TrackerStep` indicates its current status through its icon and color. In addition, the connectors indicate the current active step and the user’s progress through the process.
-
-You can add a label to the `TrackerStep` using the `StepLabel` component.
-
-
-
-
-
-## Stage and Status
+
-`SteppedTracker` supports multiple `stage` and `status` values for each `TrackerStep` child component.
+The `SteppedTracker` component accepts `Step` components as children.
+You can change
-Available `stage` values are `"pending"` and `"completed"`. **Note:** `"active"` is not a valid value: the active step is defined by the `activeStep` prop on the `SteppedTracker` component.
+
-Available `status` values are `"warning"` and `"error"`.
+## Orientation
-When stage and status are both set, the order of precedence for which icon is show is as follows: "completed" > "active" > "error|warning" > "pending"
+### Horizontal (default)
-
+
-
+### Vertical
-## Vertical
+
-You can vertically orientate a stepped tracker, with labels displayed on the right of the icon in the step node.
+## Stage + Status
-### Best practices
+
-Use a vertical stepped tracker when horizontal space is limited in the context of the application or when there are a large number of steps in the process – for example, more than 8.
+The `Step` component changes based on the `stage` and `status` props.
+In case they are both set, `status` will take precedence over `stage`.
+These 2 props control various aspects of the component, such as:
+icon selection, description text color and track (connector) style.
-
-
-
+
-## Step progression
+## Nested Steps
-In normal circumstances, once the user completes a step, you should advance the active step, and change the status of the current active step in unison.
+
+ When using the `SteppedTracker` component in vertical orientation, you can
+ nest `Step` components other `Step` components. When done so, the parent
+ `Step` renders another `SteppedTracker` and places the nested `Steps`
+ (children) inside of it. Additionally an expand button is added on the parent
+ `Step` to expand or collapse the substeps. The parent Step containing the
+ active Step child children are to have a stage of `inprogress`.
+
-
+## Hook
-
+
-## Nonsequential progress
+The `SteppedTracker` and `Step` component are purely presentational components.
+If you want to control the state of the `SteppedTracker` you can utilize the `useStepReducer` hook.
-It may not be appropriate in some circumstances, but it's possible to control the state of steps and the active step independently if users can revisit previous steps or complete steps nonsequentially.
+
-
+
+ The `useStepReducer` hook is smart! If you add `stage: 'active'` to any step,
+ it will automatically determine the stages of all other steps (autoStage),
+ both before and after the active one. Inside the state object, you can find
+ useful properties such as `steps`, `flatSteps`, `activeStep`, `previousStep`,
+ `nextStep`, `started` and `ended`. The dispatch method as in the native
+ useReducer hook accepts an action object with a type. Acceptable action types
+ are: 'next', 'previous', 'warning', 'error' and 'clear'. The warning and error
+ types will set the status of the active step to 'warning' or 'error'. The
+ clear type will reset the status of the active step to undefined.
+
diff --git a/site/docs/components/stepped-tracker/index.mdx b/site/docs/components/stepped-tracker/index.mdx
index 0940d80c61d..b8b126f6c4d 100644
--- a/site/docs/components/stepped-tracker/index.mdx
+++ b/site/docs/components/stepped-tracker/index.mdx
@@ -1,7 +1,7 @@
---
-title: Stepped tracker
+title: Stepped Tracker
data:
- description: "`SteppedTracker` visually communicates a user’s progress through a linear process. It gives the user context about where they are in the process, indicating the remaining steps and the state of all steps. It can communicate new information, errors, warnings or successful completion of a process or task."
+ description: "`Stepped Tracker` visually communicates a user’s progress through a linear process. It gives the user context about where they are, which steps have they completed, if any errors or warnings have occurred, and how many steps are left."
sourceCodeUrl: "https://github.com/jpmorganchase/salt-ds/tree/main/packages/lab/src/stepped-tracker"
package:
name: "@salt-ds/lab"
@@ -17,11 +17,8 @@ data:
]
relatedComponents:
[
- { name: "Breadcrumbs", relationship: "similarTo" },
- { name: "Pagination", relationship: "similarTo" },
- { name: "Progress", relationship: "similarTo" },
- { name: "Icon", relationship: "contains" },
- { name: "Status indicator", relationship: "contains" },
+ { name: "SemanticIconProvider", relationship: "contains" },
+ { name: "Accordion", relationship: "similarTo" },
]
# Leave this as is
diff --git a/site/docs/components/stepped-tracker/usage.mdx b/site/docs/components/stepped-tracker/usage.mdx
index 06b897068f7..c534f95335f 100644
--- a/site/docs/components/stepped-tracker/usage.mdx
+++ b/site/docs/components/stepped-tracker/usage.mdx
@@ -22,14 +22,14 @@ data:
## Content
-Stepped tracker labels never truncate, only wrap. Therefore, ensure they're short and self-explanatory.
+Step labels never truncate, only wrap. Therefore, ensure they're short and self-explanatory.
## Import
To import `SteppedTracker` and related components from the lab Salt package, use:
```
-import { SteppedTracker, TrackerStep, StepLabel } from "@salt-ds/lab";
+import { SteppedTracker, Step, useStepReducer } from "@salt-ds/lab";
```
## Props
@@ -38,10 +38,10 @@ import { SteppedTracker, TrackerStep, StepLabel } from "@salt-ds/lab";
-### `TrackerStep`
+### `Step`
-
+
-### `StepLabel`
+### `useStepReducer`
-
+
diff --git a/site/src/examples/dialog/Sizes.tsx b/site/src/examples/dialog/Sizes.tsx
index d6d3f71f227..dcf3cc6eebb 100644
--- a/site/src/examples/dialog/Sizes.tsx
+++ b/site/src/examples/dialog/Sizes.tsx
@@ -11,7 +11,7 @@ import {
StackLayout,
useId,
} from "@salt-ds/core";
-import { StepLabel, SteppedTracker, TrackerStep } from "@salt-ds/lab";
+import { Step, SteppedTracker } from "@salt-ds/lab";
import { type ReactElement, useState } from "react";
const SmallDialog = (): ReactElement => {
@@ -206,19 +206,11 @@ const LargeDialog = (): ReactElement => {
/>
}
endItem={
-
-
- Beneficiary
-
-
- Amount
-
-
- Account
-
-
- Delivery
-
+
+
+
+
+
}
/>
diff --git a/site/src/examples/stepped-tracker/Basic.tsx b/site/src/examples/stepped-tracker/Basic.tsx
index ee11a27bbc3..ec61ffdee7d 100644
--- a/site/src/examples/stepped-tracker/Basic.tsx
+++ b/site/src/examples/stepped-tracker/Basic.tsx
@@ -1,73 +1,13 @@
import { StackLayout } from "@salt-ds/core";
-import { StepLabel, SteppedTracker, TrackerStep } from "@salt-ds/lab";
-import type { ReactElement } from "react";
+import { Step, SteppedTracker } from "@salt-ds/lab";
-export const Basic = (): ReactElement => {
+export const Basic = () => {
return (
-
-
-
- Step One
-
-
- Step Two
-
-
- Step Three
-
-
- Step Four
-
-
-
-
- Step One
-
-
- Step Two
-
-
- Step Three
-
-
- Step Four
-
-
-
-
- Step One
-
-
- Step Two
-
-
- Step Three
-
-
- Step Four
-
-
-
-
- Completed
-
-
- Active
-
-
- Warning
-
-
- Error
-
-
- Default
-
+
+
+
+
+
);
diff --git a/site/src/examples/stepped-tracker/Hook.tsx b/site/src/examples/stepped-tracker/Hook.tsx
new file mode 100644
index 00000000000..9123de1867e
--- /dev/null
+++ b/site/src/examples/stepped-tracker/Hook.tsx
@@ -0,0 +1,32 @@
+import { Button, FlexLayout } from "@salt-ds/core";
+import { StackLayout } from "@salt-ds/core";
+import {
+ Step,
+ type StepRecord,
+ SteppedTracker,
+ useStepReducer,
+} from "@salt-ds/lab";
+
+const initialSteps = [
+ { id: "step-1", label: "Step 1" },
+ { id: "step-2", label: "Step 2" },
+ { id: "step-3", label: "Step 3" },
+] as StepRecord[];
+
+export function Hook() {
+ const [state, dispatch] = useStepReducer(initialSteps);
+
+ return (
+
+
+ {state.steps.map((step) => (
+
+ ))}
+
+
+
+
+
+
+ );
+}
diff --git a/site/src/examples/stepped-tracker/HookAdvanced.tsx b/site/src/examples/stepped-tracker/HookAdvanced.tsx
new file mode 100644
index 00000000000..2f6185e9201
--- /dev/null
+++ b/site/src/examples/stepped-tracker/HookAdvanced.tsx
@@ -0,0 +1,101 @@
+import { Button, SegmentedButtonGroup, StackLayout } from "@salt-ds/core";
+import {
+ Step,
+ type StepRecord,
+ SteppedTracker,
+ useStepReducer,
+} from "@salt-ds/lab";
+
+const initialSteps: StepRecord[] = [
+ {
+ id: "step-1",
+ label: "Step 1",
+ defaultExpanded: true,
+ substeps: [
+ { id: "step-1-1", label: "Step 1.1" },
+ { id: "step-1-2", label: "Step 1.2" },
+ {
+ id: "step-1-3",
+ label: "Step 1.3",
+ defaultExpanded: true,
+ substeps: [
+ {
+ id: "step-1-3-1",
+ label: "Step 1.3.1",
+ stage: "active",
+ },
+ { id: "step-1-3-2", label: "Step 1.3.2" },
+ {
+ id: "step-1-3-3",
+ label: "Step 1.3.3",
+ description: "This is just a description text",
+ },
+ ],
+ },
+ { id: "step-1-4", label: "Step 1.4" },
+ ],
+ },
+ { id: "step-2", label: "Step 2" },
+ { id: "step-3", label: "Step 3" },
+];
+
+export const HookAdvanced = () => {
+ const [state, dispatch] = useStepReducer(initialSteps);
+
+ return (
+
+
+ {state.steps.map((step) => (
+
+ ))}
+
+
+ {state.started && (
+
+ )}
+ {!state.ended && (
+
+ )}
+
+
+ {state.started && !state.ended && (
+ <>
+
+
+
+
+ )}
+
+
+ );
+};
diff --git a/site/src/examples/stepped-tracker/NestedSteps.tsx b/site/src/examples/stepped-tracker/NestedSteps.tsx
new file mode 100644
index 00000000000..ad9bc61954c
--- /dev/null
+++ b/site/src/examples/stepped-tracker/NestedSteps.tsx
@@ -0,0 +1,31 @@
+import { StackLayout } from "@salt-ds/core";
+import { Step, SteppedTracker } from "@salt-ds/lab";
+
+export const NestedSteps = () => {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
diff --git a/site/src/examples/stepped-tracker/NonSequentialProgress.tsx b/site/src/examples/stepped-tracker/NonSequentialProgress.tsx
deleted file mode 100644
index 52acaba45bd..00000000000
--- a/site/src/examples/stepped-tracker/NonSequentialProgress.tsx
+++ /dev/null
@@ -1,81 +0,0 @@
-import { Button, FlexLayout, StackLayout } from "@salt-ds/core";
-import { StepLabel, SteppedTracker, TrackerStep } from "@salt-ds/lab";
-import { type ReactElement, useState } from "react";
-
-type Step = {
- label: string;
- stage: "pending" | "completed";
-};
-
-type Steps = Step[];
-
-const sampleSteps: Steps = [
- {
- label: "Step One",
- stage: "pending",
- },
- {
- label: "Step Two",
- stage: "pending",
- },
- {
- label: "Step Three",
- stage: "pending",
- },
- {
- label: "Step Four",
- stage: "pending",
- },
-];
-
-export const NonSequentialProgress = (): ReactElement => {
- const [activeStep, setActiveStep] = useState(0);
- const [steps, setSteps] = useState(sampleSteps);
- const totalSteps = steps.length;
-
- const onNext = () => {
- setActiveStep((old) => (old < steps.length - 1 ? old + 1 : old));
- };
-
- const onPrevious = () => {
- setActiveStep((old) => (old > 0 ? old - 1 : old));
- };
-
- const onToggleStep = () => {
- setSteps((old) =>
- old.map((step, i) =>
- i === activeStep
- ? {
- ...step,
- stage: step.stage === "pending" ? "completed" : "pending",
- }
- : step,
- ),
- );
- };
-
- return (
-
-
- {steps.map(({ label, stage }, key) => (
-
- {label}
-
- ))}
-
-
-
-
-
-
-
- );
-};
diff --git a/site/src/examples/stepped-tracker/OrientationHorizontal.tsx b/site/src/examples/stepped-tracker/OrientationHorizontal.tsx
new file mode 100644
index 00000000000..6dd3177e2c0
--- /dev/null
+++ b/site/src/examples/stepped-tracker/OrientationHorizontal.tsx
@@ -0,0 +1,14 @@
+import { StackLayout } from "@salt-ds/core";
+import { Step, SteppedTracker } from "@salt-ds/lab";
+
+export const OrientationHorizontal = () => {
+ return (
+
+
+
+
+
+
+
+ );
+};
diff --git a/site/src/examples/stepped-tracker/OrientationVertical.tsx b/site/src/examples/stepped-tracker/OrientationVertical.tsx
new file mode 100644
index 00000000000..44ad8322ed4
--- /dev/null
+++ b/site/src/examples/stepped-tracker/OrientationVertical.tsx
@@ -0,0 +1,14 @@
+import { StackLayout } from "@salt-ds/core";
+import { Step, SteppedTracker } from "@salt-ds/lab";
+
+export const OrientationVertical = () => {
+ return (
+
+
+
+
+
+
+
+ );
+};
diff --git a/site/src/examples/stepped-tracker/StageAndStatus.tsx b/site/src/examples/stepped-tracker/StageAndStatus.tsx
deleted file mode 100644
index da3549f5cd6..00000000000
--- a/site/src/examples/stepped-tracker/StageAndStatus.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import { StackLayout } from "@salt-ds/core";
-import { StepLabel, SteppedTracker, TrackerStep } from "@salt-ds/lab";
-import type { ReactElement } from "react";
-
-export const StageAndStatus = (): ReactElement => {
- return (
-
-
-
- Completed
-
-
- Active
-
-
- Warning
-
-
- Error
-
-
- Default
-
-
-
- );
-};
diff --git a/site/src/examples/stepped-tracker/StageStatus.tsx b/site/src/examples/stepped-tracker/StageStatus.tsx
new file mode 100644
index 00000000000..2425d2f8e94
--- /dev/null
+++ b/site/src/examples/stepped-tracker/StageStatus.tsx
@@ -0,0 +1,18 @@
+import { StackLayout } from "@salt-ds/core";
+import { Step, SteppedTracker } from "@salt-ds/lab";
+
+export const StageStatus = () => {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
diff --git a/site/src/examples/stepped-tracker/StepProgression.tsx b/site/src/examples/stepped-tracker/StepProgression.tsx
deleted file mode 100644
index 7276d821363..00000000000
--- a/site/src/examples/stepped-tracker/StepProgression.tsx
+++ /dev/null
@@ -1,82 +0,0 @@
-import { Button, FlexLayout, StackLayout, Tooltip } from "@salt-ds/core";
-import { RefreshIcon } from "@salt-ds/icons";
-import { StepLabel, SteppedTracker, TrackerStep } from "@salt-ds/lab";
-import { type ReactElement, useState } from "react";
-
-type Step = {
- label: string;
- stage: "pending" | "completed";
-};
-
-type Steps = Step[];
-
-const sampleSteps: Steps = [
- {
- label: "Step One",
- stage: "pending",
- },
- {
- label: "Step Two",
- stage: "pending",
- },
- {
- label: "Step Three",
- stage: "pending",
- },
- {
- label: "Step Four",
- stage: "pending",
- },
-];
-
-export const StepProgression = (): ReactElement => {
- const [activeStep, setActiveStep] = useState(0);
- const [steps, setSteps] = useState(sampleSteps);
- const totalSteps = steps.length;
-
- const onComplete = () => {
- if (activeStep < totalSteps - 1) {
- setActiveStep((old) => old + 1);
- }
-
- setSteps((old) =>
- old.map((step, i) =>
- i === activeStep
- ? {
- ...step,
- stage: "completed",
- }
- : step,
- ),
- );
- };
-
- const onRefresh = () => {
- setActiveStep(0);
- setSteps(sampleSteps);
- };
-
- return (
-
-
- {steps.map(({ label, stage }, key) => (
-
- {label}
-
- ))}
-
-
-
-
-
-
-
-
- );
-};
diff --git a/site/src/examples/stepped-tracker/Vertical.tsx b/site/src/examples/stepped-tracker/Vertical.tsx
deleted file mode 100644
index bde21779408..00000000000
--- a/site/src/examples/stepped-tracker/Vertical.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-import { StackLayout } from "@salt-ds/core";
-import { StepLabel, SteppedTracker, TrackerStep } from "@salt-ds/lab";
-import type { ReactElement } from "react";
-
-export const Vertical = (): ReactElement => {
- return (
-
-
-
- Step One
-
-
- Step Two
-
-
- Step Three
-
-
- Step Four
-
-
-
-
- Step One
-
-
- Step Two
-
-
- Step Three
-
-
- Step Four
-
-
-
-
- Step One
-
-
- Step Two
-
-
- Step Three
-
-
- Step Four
-
-
-
- );
-};
diff --git a/site/src/examples/stepped-tracker/index.ts b/site/src/examples/stepped-tracker/index.ts
index 38ef3cc446f..a7c31504369 100644
--- a/site/src/examples/stepped-tracker/index.ts
+++ b/site/src/examples/stepped-tracker/index.ts
@@ -1,5 +1,7 @@
export * from "./Basic";
-export * from "./StageAndStatus";
-export * from "./Vertical";
-export * from "./StepProgression";
-export * from "./NonSequentialProgress";
+export * from "./OrientationHorizontal";
+export * from "./OrientationVertical";
+export * from "./StageStatus";
+export * from "./NestedSteps";
+export * from "./Hook";
+export * from "./HookAdvanced";