Add a stopped prop to home component, so story can have a consistent vrt

SmileyJames · Jun 27, 2021 · b530a3d · b530a3d
1 parent de2d84c
commit b530a3d
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 3 deletions.
diff --git a/app/src/Home.js b/app/src/Home.js
@@ -9,7 +9,7 @@ import NavBar from "components/navbar";
 import TypedBanner from "components/typed-banner";
 import CallToActionCard from "components/cta-card"
 
-const Home = () => {
+const Home = ({ stopped }) => {
   const { push } = useHistory();
   const [hideMenu, toggleMenu] = useReducer(o => !o, true)
 
@@ -40,7 +40,7 @@ const Home = () => {
         <HostForm compendium={compendium} onNewGame={onNewGame} />
         <JoinForm onJoinGame={onJoinGame} />
       </Flex>
-      <TypedBanner typedSentences={typedSentences}/>
+      <TypedBanner stopped={stopped} typedSentences={typedSentences}/>
       <Flex justifyContent="space-around" flexDirection="row" flexWrap="wrap">
         {
           compendium.map(

diff --git a/app/src/Home.stories.js b/app/src/Home.stories.js
@@ -11,4 +11,5 @@ const Template = (props) => (
 
 export const HomeStory = Template.bind({});
 HomeStory.args = {
+  stopped: true,
 };
diff --git a/app/src/components/typed-banner/TypedBanner.js b/app/src/components/typed-banner/TypedBanner.js
@@ -1,7 +1,7 @@
 import ReactTyped from "react-typed";
 import { Heading, Flex } from "rebass/styled-components";
 
-const TypedBanner = ({ typedSentences }) => (
+const TypedBanner = ({ typedSentences, stopped = false }) => (
   <Flex px="20%" py={5} my={4} backgroundColor="secondary">
     <Heading color="muted" sx={{ userSelect: "none" }}>
       <ReactTyped
@@ -11,6 +11,7 @@ const TypedBanner = ({ typedSentences }) => (
         backDelay={1}
         loop
         smartBackspace
+        stopped={stopped}
       />
     </Heading>
   </Flex>