start on new playground page

playground/src/App.tsx

@@ -5,6 +5,7 @@ import { Routes } from 'routes';
 import Home from './pages/Home';
 import CustomExample from './pages/CustomExample';
 import GitHubBtn from './components/GitHubBtn';
+import HiddenComponents from './pages/HiddenComponents';
 
 const App = () => (
     <StylesProvider injectFirst>
@@ -34,6 +35,9 @@ const App = () => (
                     <Route path={Routes.home}>
                         <Home />
                     </Route>
+                    <Route path={Routes.hiddenComponents}>
+                        <HiddenComponents />
+                    </Route>
                 </Switch>
             </BrowserRouter>
         </ThemeProvider>

playground/src/pages/HiddenComponents.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { Box } from '@material-ui/core';
+import { ReactGrandTour } from 'react-grand-tour';
+import KitchenSink from 'components/KitchenSink';
+import Hero from 'components/Hero';
+import { HiddenComponentsTour } from 'tours';
+
+const HiddenComponents = () => (
+    <ReactGrandTour
+        steps={HiddenComponentsTour}
+        componentVisibility={{ hideCurrentStepLabel: true }}
+    >
+        <Box
+            display="flex"
+            alignItems="center"
+            justifyContent="center"
+            flexDirection="column"
+            pt={2}
+            pb={8}
+        >
+            <Hero />
+            <KitchenSink />
+        </Box>
+    </ReactGrandTour>
+);
+
+export default HiddenComponents;

playground/src/pages/index.ts

@@ -1,2 +1,3 @@
 export { default as Home } from './Home';
 export { default as CustomExample } from './CustomExample';
+export { default as HiddenComponents } from './HiddenComponents';

playground/src/routes.ts

@@ -1,4 +1,5 @@
 export const Routes = {
     home: '/ReactGrandTour',
     custom: '/ReactGrandTour/custom',
+    hiddenComponents: '/ReactGrandTour/hidden',
 };

playground/src/tours/Home.tsx

@@ -155,3 +155,102 @@ export const HomeSteps: ReactGrandTourStep[] = [
         component: Bye,
     },
 ];
+
+export const HiddenComponentsTour: ReactGrandTourStep[] = [
+    // {
+    //     selector: `#${HomeStepIds.one}`,
+    //     content: 'Welcome to React Grand Tour!',
+    //     component: Hello,
+    // },
+    {
+        selector: `#${HomeStepIds.one}`,
+        content: 'Welcome to React Grand Tour!',
+        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.",
+    },
+    {
+        selector: `#${HomeStepIds.three}`,
+        content: 'The highlighted area will track moving objects',
+        track: true,
+        preferredModalPosition: 'right',
+    },
+    {
+        selector: `#${HomeStepIds.four}`,
+        anchorSelector: `#${HomeStepIds.fourContainer}`,
+        content:
+            'The highlighted area will track moving objects, but the modal stays anchored to its container.',
+        track: true,
+    },
+    {
+        selector: `#${HomeStepIds.verticalOne}`,
+        content: 'The highlighted area will track the size of objects which change shape.',
+        track: true,
+    },
+    {
+        selector: `#${HomeStepIds.horizontalOne}`,
+        content:
+            "The highlighted area will track the size of objects which change shape. Even when it's their width!",
+        track: true,
+    },
+    {
+        selector: `#${HomeStepIds.horVertOne}`,
+        content: 'And when they change in both directions.',
+        track: true,
+    },
+    {
+        selector: `#${HomeStepIds.verticalTwo}`,
+        anchorSelector: `#${HomeStepIds.expandCollapseContainerTwo}`,
+        content: 'The highlighted area will track the size of objects which change shape.',
+        track: true,
+    },
+    {
+        selector: `#${HomeStepIds.horizontalTwo}`,
+        anchorSelector: `#${HomeStepIds.expandCollapseContainerTwo}`,
+        content:
+            "The highlighted area will track the size of objects which change shape. Even when it's their width!",
+        track: true,
+    },
+    {
+        selector: `#${HomeStepIds.horVertTwo}`,
+        anchorSelector: `#${HomeStepIds.expandCollapseContainerTwo}`,
+        content: 'And when they change in both directions.',
+        track: true,
+    },
+    {
+        selector: `#row-1-col-1`,
+        content: 'I can even handle really wide scrolling content.',
+    },
+    {
+        selector: `#row-4-col-20`,
+        content: 'Just like that 😏',
+    },
+    {
+        selector: `#row-1-col-1`,
+        content: 'And that 😱',
+    },
+    {
+        selector: `#${HomeStepIds.prefRight}`,
+        content: 'I prefer to position this modal on the right',
+        preferredModalPosition: 'right',
+    },
+    {
+        selector: `#${HomeStepIds.prefLeft}`,
+        content: "I prefer to position this modal on the left, but there isn't enough space 😞",
+        preferredModalPosition: 'left',
+    },
+    {
+        selector: `#${HomeStepIds.prefTop}`,
+        content: 'I prefer to position this modal on top',
+        preferredModalPosition: 'top',
+    },
+    {
+        selector: `#${HomeStepIds.bye}`,
+        content: '',
+        component: Bye,
+    },
+];