readme + examples

EitanElbaz · Jun 27, 2023 · f5a41f7 · f5a41f7
1 parent 1816915
commit f5a41f7
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 4 deletions.
diff --git a/README.md b/README.md
@@ -177,6 +177,11 @@ export type ComponentVisibility = {
             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,
         },
     ]}
 >

diff --git a/playground/src/pages/HiddenComponents.tsx b/playground/src/pages/HiddenComponents.tsx
@@ -15,6 +15,15 @@ const HiddenComponents = () => (
             pt={2}
             pb={8}
         >
+            <Box
+                id="middle"
+                position="absolute"
+                top="50%"
+                left="50%"
+                height={0}
+                width={0}
+                bgcolor="red"
+            />
             <Hero />
             <KitchenSink />
         </Box>

diff --git a/playground/src/tours/Home.tsx b/playground/src/tours/Home.tsx
@@ -163,10 +163,11 @@ export const HiddenComponentsTour: ReactGrandTourStep[] = [
     //     component: Hello,
     // },
     {
-        selector: `#${HomeStepIds.one}`,
-        content: "Welcome to React Grand Tour! I'm hiding the current step label on this step.",
-        preferredModalPosition: 'bottom',
-        hideCurrentStepLabel: true,
+        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}`,