examples for hiding components

EitanElbaz · Jun 27, 2023 · 1addd91 · 1addd91
1 parent 6360d09
commit 1addd91
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 10 deletions.
diff --git a/playground/src/App.tsx b/playground/src/App.tsx
@@ -32,12 +32,12 @@ const App = () => (
                     <Route path={Routes.custom}>
                         <CustomExample />
                     </Route>
-                    <Route path={Routes.home}>
-                        <Home />
-                    </Route>
                     <Route path={Routes.hiddenComponents}>
                         <HiddenComponents />
                     </Route>
+                    <Route path={Routes.home}>
+                        <Home />
+                    </Route>
                 </Switch>
             </BrowserRouter>
         </ThemeProvider>

diff --git a/playground/src/pages/HiddenComponents.tsx b/playground/src/pages/HiddenComponents.tsx
@@ -6,10 +6,7 @@ import Hero from 'components/Hero';
 import { HiddenComponentsTour } from 'tours';
 
 const HiddenComponents = () => (
-    <ReactGrandTour
-        steps={HiddenComponentsTour}
-        componentVisibility={{ hideCurrentStepLabel: true }}
-    >
+    <ReactGrandTour steps={HiddenComponentsTour}>
         <Box
             display="flex"
             alignItems="center"

diff --git a/playground/src/tours/Home.tsx b/playground/src/tours/Home.tsx
@@ -164,20 +164,24 @@ export const HiddenComponentsTour: ReactGrandTourStep[] = [
     // },
     {
         selector: `#${HomeStepIds.one}`,
-        content: 'Welcome to React Grand Tour!',
+        content: "Welcome to React Grand Tour! I'm hiding the current step label on this step.",
         preferredModalPosition: 'bottom',
         hideCurrentStepLabel: true,
     },
     {
         selector: `#${HomeStepIds.two}`,
         content:
-            "And this is a cool logo. Try scrolling down the page. You'll see an arrow appear. You can click anywhere in this modal to be taken back to the highlighted area.",
+            "And this is a cool logo. Try scrolling down the page. You'll see an arrow appear. You can click anywhere in this modal to be taken back to the highlighted area.\n\n I'm hiding the next & previous step buttons, but you can still use the arrow keys.",
+        hideNextStepButton: true,
+        hidePreviousStepButton: true,
     },
     {
         selector: `#${HomeStepIds.three}`,
-        content: 'The highlighted area will track moving objects',
+        content:
+            "The highlighted area will track moving objects. I'm hiding the step buttons here for fun",
         track: true,
         preferredModalPosition: 'right',
+        hideStepButtons: true,
     },
     {
         selector: `#${HomeStepIds.four}`,