diff --git a/web-ui/package.json b/web-ui/package.json
index 0c29bcc59e..4a4e4d0e94 100644
--- a/web-ui/package.json
+++ b/web-ui/package.json
@@ -56,7 +56,8 @@
"serve": "vite preview",
"start": "vite",
"storybook": "storybook dev -p 6006",
- "test": "vitest"
+ "test": "vitest",
+ "update-test": "vitest -u"
},
"eslintConfig": {
"extends": "react-app"
diff --git a/web-ui/src/components/reviews/periods/ReviewPeriodStepper.jsx b/web-ui/src/components/reviews/periods/ReviewPeriodStepper.jsx
new file mode 100644
index 0000000000..b3c9a26e93
--- /dev/null
+++ b/web-ui/src/components/reviews/periods/ReviewPeriodStepper.jsx
@@ -0,0 +1,28 @@
+import React, { useEffect, useState } from 'react';
+import Box from '@mui/material/Box';
+import Stepper from '@mui/material/Stepper';
+import Step from '@mui/material/Step';
+import StepLabel from '@mui/material/StepLabel';
+import optionsArr from './reviewStatus.json';
+
+export default function ReviewPeriodStepper({ reviewPeriod }) {
+ const [activeIndex, setActiveIndex] = useState(0);
+
+ useEffect(() => {
+ let revPeriod = reviewPeriod?.reviewStatus;
+ const index = optionsArr.findIndex(opt => opt.option === revPeriod);
+ setActiveIndex(index);
+ }, [reviewPeriod]);
+
+ return (
+
+
+ {optionsArr.map(({ label, option }) => (
+
+ {label}
+
+ ))}
+
+
+ );
+}
diff --git a/web-ui/src/components/reviews/periods/ReviewPeriodStepper.stories.jsx b/web-ui/src/components/reviews/periods/ReviewPeriodStepper.stories.jsx
new file mode 100644
index 0000000000..11eba1b0bf
--- /dev/null
+++ b/web-ui/src/components/reviews/periods/ReviewPeriodStepper.stories.jsx
@@ -0,0 +1,36 @@
+import React from 'react';
+import ReviewPeriodStepper from './ReviewPeriodStepper';
+
+export default {
+ component: ReviewPeriodStepper,
+ title: 'Check Ins/Review Period Stepper',
+ decorators: [
+ ReviewPeriodStepper => (
+
+
+
+ )
+ ]
+};
+
+const Template = args => {
+ return ;
+};
+
+const reviewPeriodStepperData = {
+ reviewPeriod: {
+ id: "b0b8a6f3-2d15-4923-8552-2f729f58ea0f",
+ name: "Test",
+ reviewStatus: "OPEN",
+ launchDate: "2024-05-03T15:53:56.673Z",
+ selfReviewCloseDate: "2024-05-03T15:53:56.673Z",
+ closeDate: "2024-05-03T15:53:56.673Z",
+ reviewTemplateId: "d1e94b60-47c4-4945-87d1-4dc88f088e57",
+ selfReviewTemplateId: "d1e94b60-47c4-4945-87d1-4dc88f088e57"
+ }
+};
+
+export const ReviewPeriodSteppers = Template.bind({});
+ReviewPeriodSteppers.args = {
+ ...reviewPeriodStepperData
+};
diff --git a/web-ui/src/components/reviews/periods/ReviewPeriodStepper.test.jsx b/web-ui/src/components/reviews/periods/ReviewPeriodStepper.test.jsx
new file mode 100644
index 0000000000..58281b485a
--- /dev/null
+++ b/web-ui/src/components/reviews/periods/ReviewPeriodStepper.test.jsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import ReviewPeriodStepper from './ReviewPeriodStepper';
+import { AppContextProvider } from '../../../context/AppContext';
+
+const reviewPeriod = {
+ id: "b0b8a6f3-2d15-4923-8552-2f729f58ea0f",
+ name: "Test",
+ reviewStatus: 'OPEN',
+ launchDate: "2024-05-03T15:53:56.673Z",
+ selfReviewCloseDate: "2024-05-03T15:53:56.673Z",
+ closeDate: "2024-05-03T15:53:56.673Z",
+ reviewTemplateId: "d1e94b60-47c4-4945-87d1-4dc88f088e57",
+ selfReviewTemplateId: "d1e94b60-47c4-4945-87d1-4dc88f088e57"
+}
+it('renders correctly', () => {
+ snapshot(
+
+
+
+ );
+});
\ No newline at end of file
diff --git a/web-ui/src/components/reviews/periods/__snapshots__/ReviewPeriodStepper.test.jsx.snap b/web-ui/src/components/reviews/periods/__snapshots__/ReviewPeriodStepper.test.jsx.snap
new file mode 100644
index 0000000000..852a79a92f
--- /dev/null
+++ b/web-ui/src/components/reviews/periods/__snapshots__/ReviewPeriodStepper.test.jsx.snap
@@ -0,0 +1,183 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`renders correctly 1`] = `
+
+
+
+
+
+
+
+
+
+
+ Planning
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Awaiting Approval
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Open
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Closed
+
+
+
+
+
+
+