Merge branch 'feature/show_hide_components' into develop

README.md

@@ -14,6 +14,7 @@
 - [Advanced Usage](#advanced-usage)
   - [Fast Moving Objects](#fast-moving-objects)
   - [Modal Anchoring](#modal-anchoring)
+  - [Component Visibility](#component-visibility)
   - [Style Overrides](#style-overrides)
   - [Overriding With Custom Components](#overriding-with-custom-components)
 
@@ -151,6 +152,43 @@ Want to highlight an element while anchoring the modal to its parent? No problem
 </ReactGrandTour>
 ```
 
+### Component Visibility
+
+You can force components to be hidden on a per step or per tour basis.
+
+The visibility prop on a step takes precedence over the hidden prop on the `ReactGrandTour` component.
+
+```jsx
+export type ComponentVisibility = {
+  hideCloseButton?: boolean;
+  hideCurrentStepLabel?: boolean;
+  hideNextStepButton?: boolean;
+  hidePreviousStepButton?: boolean;
+  hideStepButtons?: boolean;
+}
+
+<ReactGrandTour
+    // hides the close button for every step on the tour
+    hideCloseButton
+    steps={[
+        {
+            // hide the current step label for this particular step
+            hideCurrentStepLabel: true,
+            selector: '#my-step-id',
+            anchorSelector: '#my-step-id-parent',
+            content: 'Some Content',
+
+            // this can only be set on a step
+            // hide the see through window which wraps around your step's focused html element
+            // setting this to true will display a backdrop covering your entire screen
+            hideStepElementHighlight: false,
+        },
+    ]}
+>
+    <App />
+</ReactGrandTour>
+```
+
 ### Style Overrides
 
 To achieve the look you desire you don't have to override the CSS classes or provide custom components. You can also override a lot of colors using the `stylingOverrides` prop.

playground/paths.json

@@ -2,7 +2,7 @@
     "compilerOptions": {
         "baseUrl": "../",
         "paths": {
-            "react-grand-tour": ["./typings"],
+            "react-grand-tour": ["./dist"],
             "pages": ["./playground/src/pages"],
             "components": ["./playground/src/components"],
             "components/*": ["./playground/src/components/*"],

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>
@@ -31,6 +32,9 @@ const App = () => (
                     <Route path={Routes.custom}>
                         <CustomExample />
                     </Route>
+                    <Route path={Routes.hiddenComponents}>
+                        <HiddenComponents />
+                    </Route>
                     <Route path={Routes.home}>
                         <Home />
                     </Route>

playground/src/pages/HiddenComponents.tsx

@@ -0,0 +1,33 @@
+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}>
+        <Box
+            display="flex"
+            alignItems="center"
+            justifyContent="center"
+            flexDirection="column"
+            pt={2}
+            pb={8}
+        >
+            <Box
+                id="middle"
+                position="absolute"
+                top="50%"
+                left="50%"
+                height={0}
+                width={0}
+                bgcolor="red"
+            />
+            <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,107 @@ export const HomeSteps: ReactGrandTourStep[] = [
         component: Bye,
     },
 ];
+
+export const HiddenComponentsTour: ReactGrandTourStep[] = [
+    // {
+    //     selector: `#${HomeStepIds.one}`,
+    //     content: 'Welcome to React Grand Tour!',
+    //     component: Hello,
+    // },
+    {
+        selector: `#middle`,
+        content:
+            "Welcome to React Grand Tour! I'm hiding the current step label on this step. This is an example of how to show the backdrop instead of focusing on an element.",
+        preferredModalPosition: 'auto',
+        hideStepElementHighlight: 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.\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. I'm hiding the step buttons here for fun",
+        track: true,
+        preferredModalPosition: 'right',
+        hideStepButtons: true,
+    },
+    {
+        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,
+    },
+];

src/ReactGrandTour.tsx

@@ -2,6 +2,7 @@ import React, { useMemo, useCallback, useState, PropsWithChildren, useEffect } f
 import styles from './styles';
 import {
     ComponentOverrides,
+    ComponentVisibility,
     ReactGrandTourCloseReason,
     ReactGrandTourProps,
     ReactGrandTourStep,
@@ -28,6 +29,9 @@ const defaultShortcuts = {
     prevStep: ['ArrowLeft'],
 };
 
+const emptyStyles = {};
+const emptyVisibility = {};
+
 const ReactGrandTour: React.FC<Props> = ({
     children,
     open: defaultOpen = false,
@@ -49,8 +53,13 @@ const ReactGrandTour: React.FC<Props> = ({
     disableCloseOnEscape = false,
     disableCloseBtn = false,
     disableCloseOnBackdropClick = false,
-    stylingOverrides = {},
+    stylingOverrides = emptyStyles,
     keyboardShortcuts,
+    hideCloseButton,
+    hideCurrentStepLabel,
+    hideNextStepButton,
+    hidePreviousStepButton,
+    hideStepButtons,
 }) => {
     const [open, setOpen] = useState(defaultOpen);
     const [currentIndex, setCurrentIndex] = useState(openAt);
@@ -167,6 +176,7 @@ const ReactGrandTour: React.FC<Props> = ({
         };
     }, [onKeyUp]);
 
+    console.log(steps[currentIndex]);
     return (
         <ReactGrandTourContext.Provider
             value={{
@@ -186,6 +196,11 @@ const ReactGrandTour: React.FC<Props> = ({
                     <style>{styles(stylingOverrides)}</style>{' '}
                     <div className="__react-grand-tour__overlay" onClick={onBackdropClosed} />
                     <Step
+                        hideCloseButton={hideCloseButton}
+                        hideCurrentStepLabel={hideCurrentStepLabel}
+                        hideNextStepButton={hideNextStepButton}
+                        hidePreviousStepButton={hidePreviousStepButton}
+                        hideStepButtons={hideStepButtons}
                         {...steps[currentIndex]}
                         content={steps[currentIndex].content}
                         component={steps[currentIndex].component}

src/components/DialogWrapper.tsx

@@ -9,17 +9,23 @@ const DialogWrapper = ({
     previousStepButton,
     stepButtonWrapper,
     nextStepButton,
+
+    hideCloseButton,
+    hideCurrentStepLabel,
+    hideNextStepButton,
+    hidePreviousStepButton,
+    hideStepButtons,
 }: DialogWrapperProps) => (
     <div className="__react-grand-tour__modal">
         <div className="__react-grand-tour__modal-content">
             {arrow}
-            {currentStepLabel}
-            {closeButton}
+            {!hideCurrentStepLabel && currentStepLabel}
+            {!hideCloseButton && closeButton}
             {content}
             <div className="__react-grand-tour__page-selector">
-                {previousStepButton}
-                {stepButtonWrapper}
-                {nextStepButton}
+                {!hidePreviousStepButton && previousStepButton}
+                {!hideStepButtons && stepButtonWrapper}
+                {!hideNextStepButton && nextStepButton}
             </div>
         </div>
     </div>

src/components/Modal.tsx

@@ -1,19 +1,25 @@
 import React, { useMemo } from 'react';
 import FadeIn from './FadeIn';
-import { ArrowDirection, ComponentOverrides, ReactGrandTourProps } from '../types';
+import {
+    ArrowDirection,
+    ComponentOverrides,
+    ComponentVisibility,
+    ReactGrandTourProps,
+} from '../types';
 import CloseButton from './CloseButton';
 import { isSafari } from '../lib';
 
-export type ModalProps = Partial<ComponentOverrides> & {
-    arrowDirection: ArrowDirection;
-    stepIndex: number;
-    changeStep: (index: number) => void;
-    allSteps: number[];
-    close: ReactGrandTourProps['onClose'];
-    renderedContent: any;
-    scrollToElement: () => void;
-    track: boolean;
-};
+export type ModalProps = Partial<ComponentOverrides> &
+    ComponentVisibility & {
+        arrowDirection: ArrowDirection;
+        stepIndex: number;
+        changeStep: (index: number) => void;
+        allSteps: number[];
+        close: ReactGrandTourProps['onClose'];
+        renderedContent: any;
+        scrollToElement: () => void;
+        track: boolean;
+    };
 
 const Modal = ({
     arrowDirection,
@@ -32,6 +38,12 @@ const Modal = ({
     stepButtonWrapper: StepButtonWrapper,
     stepButton: StepButton,
     track,
+
+    hideCloseButton,
+    hideCurrentStepLabel,
+    hideNextStepButton,
+    hidePreviousStepButton,
+    hideStepButtons,
 }: ModalProps) => {
     const arrow = useMemo(() => <Arrow direction={arrowDirection} />, [Arrow, arrowDirection]);
     const currentStepLabel = useMemo(
@@ -45,9 +57,10 @@ const Modal = ({
                 goNext={() => changeStep(stepIndex + 1)}
                 skipTo={changeStep}
                 totalSteps={allSteps.length}
+                close={close}
             />
         ),
-        [stepIndex, changeStep, allSteps.length, NextStepButton],
+        [stepIndex, changeStep, allSteps.length, NextStepButton, close],
     );
     const previousStepButton = useMemo(
         () => (
@@ -56,9 +69,10 @@ const Modal = ({
                 goBack={() => changeStep(stepIndex - 1)}
                 skipTo={changeStep}
                 totalSteps={allSteps.length}
+                close={close}
             />
         ),
-        [stepIndex, changeStep, allSteps.length, PreviousStepButton],
+        [stepIndex, changeStep, allSteps.length, PreviousStepButton, close],
     );
     const stepButtonWrapper = useMemo(
         () => (
@@ -114,6 +128,12 @@ const Modal = ({
                             stepButtonWrapper,
                             stepIndex,
                             stepButtonComponent: StepButton,
+
+                            hideCloseButton,
+                            hideCurrentStepLabel,
+                            hideNextStepButton,
+                            hidePreviousStepButton,
+                            hideStepButtons,
                         }}
                     />
                 </div>