WV-380 create controls that can show all of the display states for how it works wizard [MERGE READY]

package.json

@@ -115,6 +115,7 @@
     "@mui/styled-engine-sc": "^5.10.1",
     "@mui/styles": "^5.15.20",
     "@openreplay/tracker": "^8.1.1",
+    "@storybook/addon-actions": "^7.6.20",
     "@stripe/react-stripe-js": "^1.3.0",
     "@stripe/stripe-js": "^1.13.0",
     "classnames": "^2.3.1",

src/js/common/stories/HowItWorksWizard.stories.js

@@ -1,7 +1,11 @@
 import React, { useEffect, useState } from 'react';
+import { action } from '@storybook/addon-actions';
 import styled from 'styled-components';
 import HowItWorks from '../../components/CompleteYourProfile/HowItWorksWizard';
-import { action } from '@storybook/addon-actions';
+
+// WV-380: Created controls for the HowItWorks component allowing steps object to be modified,
+// multi-check on activeSteps,
+// and completed status to be toggled true/false.
 
 const initialSteps = [
   {
@@ -36,8 +40,6 @@ const initialSteps = [
   },
 ];
 
-// const activeStep = 1;
-
 export default {
   title: 'Design System/CompleteYourProfile',
   component: HowItWorks,
@@ -47,13 +49,9 @@ export default {
   argTypes: {
     activeStep: {
       control: { type: 'check' },
-      options: initialSteps.map(step => step.id),
+      options: initialSteps.map((step) => step.id),
       description: 'Select which steps are active',
     },
-    completed: {
-      control: { type: 'boolean' },
-      description: 'Toggle the completed status',
-    },
     steps: {
       control: 'object',
       description: 'Modify the steps',
@@ -80,18 +78,18 @@ const Container = styled.div`
 export const HowItWorksWizard = (args) => {
   const [steps, setSteps] = useState(args.steps);
   useEffect(() => {
-    setSteps(steps.map(step => ({
+    setSteps((prevSteps) => prevSteps.map((step) => ({
       ...step,
-      completed: args.completed && args.activeStep.includes(step.id),
+      completed: true && args.activeStep.includes(step.id),
     })));
     action(`Active Step Changed to: ${args.activeStep}`)();
   }, [args.activeStep]);
 
 
   const handleStepToggle = (index) => {
-    const updatedSteps = steps.map((step, i) =>
+    const updatedSteps = steps.map((step, i) => (
       i === index ? { ...step, completed: !step.completed } : step
-    );
+    ));
     setSteps(updatedSteps);
     action(`Step ${index + 1} Clicked - Completed: ${updatedSteps[index].completed}`)();
   };
@@ -102,13 +100,13 @@ export const HowItWorksWizard = (args) => {
         ...step,
         onClick: () => handleStepToggle(i),
       }))}
-      activeStep={args.activeStep}/>
+      activeStep={args.activeStep}
+      />
     </Container>
   );
 };
 
 HowItWorksWizard.args = {
   steps: initialSteps,
   activeStep: [1],
-  completed: false,
 };