changes to fix doc rendering issue

components/timeout-modal/spec/TimeoutModal.stories.mdx

@@ -8,26 +8,30 @@ import readMe from '../README.md';
   component={ TimeoutModal }
   parameters={ {
     chromatic: { viewports: [640, 480] },
-    description: 'HODS timeout modal',
+    description: 'Inform a user their current session will soon time out.',
     jest: ['TimeoutModal'],
     notes: readMe,
      docs: {
         inlineStories: false,
         iframeHeight: 500,
-      }
+        story: {
+            inline: false,
+            iframeHeight: 500,
+        }
+      },
   } }
 />
 
 # timeout-modal
 
-HODS Timeout Modal
+Inform a user their current session will time out in 5 minutes.
 
 <Preview withToolbar>
   <Story name="5 Minutes Timeout Modal">
   <Page>
     <TimeoutModal
         isOpen={true}
-        timerDurationInSeconds={60}
+        timerDurationInSeconds={300}
         onTimeout={() => console.log("timed out")}
         onContinue={() => console.log("continue")}
         onSignout={() => console.log("sign out")}

components/timeout-modal/src/Timer.tsx

@@ -13,18 +13,16 @@ export const Timer: FC<TimerProps> = ({
     onTimeout,
     ...attrs
 }) => {
-    const [runTimer, setRunTimer] = useState(true)
     const [timer, setTimer] = useState(timerFrom);
     let formattedTimer = timer < 61 ? Math.ceil(timer / 20) * 20 : Math.ceil(timer / 60);
     const interval = useRef(null);
 
     useEffect(() => {
-        if(runTimer) interval.current = setInterval(() => setTimer((timer) => timer - 1), 1000);
-        else clearInterval(interval.current);
+        interval.current = setInterval(() => setTimer((timer) => timer - 1), 1000);
         return () => clearInterval(interval.current);
-    }, [runTimer])
+    }, [])
 
-    if(runTimer && timer == 0) {
+    if(timer == 0) {
         clearInterval(interval.current);
         onTimeout();
     }