Add buttons examples

docs/package.json

@@ -16,7 +16,7 @@
     "@types/react": "^18.0.21",
     "@types/react-dom": "^18.0.6",
     "astro": "^2.7.0",
-    "driver.js": "1.1.9-next.0",
+    "driver.js": "1.1.10-next.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "react-fast-marquee": "^1.6.0",

docs/pnpm-lock.yaml

@@ -24,8 +24,8 @@ dependencies:
     specifier: ^2.7.0
     version: 2.7.0
   driver.js:
-    specifier: 1.1.9-next.0
-    version: 1.1.9-next.0
+    specifier: 1.1.10-next.0
+    version: 1.1.10-next.0
   react:
     specifier: ^18.0.0
     version: 18.0.0
@@ -1386,8 +1386,8 @@ packages:
   /[email protected]:
     resolution: {integrity: sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==}
 
-  /[email protected].9-next.0:
-    resolution: {integrity: sha512-WZQO71gGUGx5It0wwizXVp2IJTrO+LSBPGFu8NdwGPmHwHaLAqwLev33GfTYfwN9g3F+TvZM1r9R5BqCkSiqcA==}
+  /[email protected].10-next.0:
+    resolution: {integrity: sha512-ohPvCv3l9Sv/RfePefnOd90W3a0TRi/Z4GsgwO3eyHI9/BQRxHWpzmpGfG9yh16re9T6Lb2V4qQ4vPnn72gV9g==}
     dev: false
 
   /[email protected]:

docs/src/components/CodeSample.tsx

@@ -61,6 +61,28 @@ export function CodeSample(props: CodeSampleProps) {
         };
       }
 
+      if (id === "logger-events") {
+        config!.onNextClick = () => {
+          console.log("next clicked");
+        };
+
+        config!.onNextClick = () => {
+          console.log("Next Button Clicked");
+          // Implement your own functionality here
+          driverObj.moveNext();
+        };
+        config!.onPrevClick = () => {
+          console.log("Previous Button Clicked");
+          // Implement your own functionality here
+          driverObj.movePrevious();
+        };
+        config!.onCloseClick = () => {
+          console.log("Close Button Clicked");
+          // Implement your own functionality here
+          driverObj.destroy();
+        };
+      }
+
       if (tour?.[2]?.popover?.title === "Next Step is Async") {
         tour[2].popover.onNextClick = () => {
           mountDummyElement();

docs/src/content/guides/buttons.mdx

@@ -185,23 +185,13 @@ You can use the `onNextClick`, `onPreviousClick` and `onCloseClick` callbacks to
 
 <CodeSample
   buttonText={"Show Example"}
-  config={{
-    onNextClick: () => {
-      alert('Next Button Clicked');
-    },
-    onPrevClick:() => {
-      alert('Previous Button Clicked');
-    },
-    onCloseClick:() => {
-      alert('Close Button Clicked');
-    },
-  }}
+  config={{}}
   tour={[
     {
-      element: '#code-sample-4',
+      element: '#logger-events',
       popover: {
-        title: 'Popover Title',
-        description: 'Popover Description'
+        title: 'Events Logged',
+        description: 'Look at your console for the events logged'
       }
     },
     {
@@ -212,7 +202,7 @@ You can use the `onNextClick`, `onPreviousClick` and `onCloseClick` callbacks to
       }
     }
   ]}
-  id={"code-sample-4"}
+  id={"logger-events"}
   client:load>
   ```js
   import { driver } from "driver.js";