From f5a41f7be519bd70c3729dcbc945b71567f21049 Mon Sep 17 00:00:00 2001
From: Eitan Elbaz <eitan.elbaz@uniledsolutions.com>
Date: Tue, 27 Jun 2023 16:31:55 +0100
Subject: [PATCH] readme + examples

---
 README.md                                 | 5 +++++
 playground/src/pages/HiddenComponents.tsx | 9 +++++++++
 playground/src/tours/Home.tsx             | 9 +++++----
 3 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/README.md b/README.md
index b55fae3..63d1aec 100644
--- 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
index ae66633..f917ec5 100644
--- 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
index d9d0d99..c11d67d 100644
--- 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}`,