Add examples for styling

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.10-next.0",
+    "driver.js": "1.1.11-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.10-next.0
-    version: 1.1.10-next.0
+    specifier: 1.1.11-next.0
+    version: 1.1.11-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].10-next.0:
-    resolution: {integrity: sha512-ohPvCv3l9Sv/RfePefnOd90W3a0TRi/Z4GsgwO3eyHI9/BQRxHWpzmpGfG9yh16re9T6Lb2V4qQ4vPnn72gV9g==}
+  /[email protected].11-next.0:
+    resolution: {integrity: sha512-9Yyk79pqzoFE+NfNZf3vMx7/GHV9mkHhi9C48Xy9XUWSne9J96yrC4oDgc6Wr1aCVrR3uH5IEDmuc/fJjF7LWw==}
     dev: false
 
   /[email protected]:

docs/src/components/CodeSample.tsx

@@ -43,12 +43,11 @@ function mountDummyElement() {
 
 function attachFirstButton(popover: PopoverDOM) {
   const firstButton = document.createElement("button");
-  firstButton.innerText = "First";
+  firstButton.innerText = "Go to First";
   popover.footerButtons.appendChild(firstButton);
 
-  console.log(firstButton);
   firstButton.addEventListener("click", () => {
-    console.log('clicked');
+    window.driverObj.drive(0);
   });
 }
 

docs/src/content/guides/buttons.mdx

@@ -229,6 +229,77 @@ You can use the `onNextClick`, `onPreviousClick` and `onCloseClick` callbacks to
     ]
   });
 
+  driverObj.drive();
+  ```
+</CodeSample>
+
+## Custom Buttons
+
+You can add custom buttons using `onPopoverRendered` callback. This callback is called every time a popover is rendered. In the following example, we are adding a custom button that takes the user to the first step.
+
+
+<CodeSample
+  buttonText={"Run Example"}
+  config={{
+    prevBtnText: '&larr; Previous',
+    nextBtnText: 'Next &rarr;',
+    doneBtnText: 'Done',
+    showButtons: ['next', 'previous'],
+  }}
+  tour={[
+    {
+      element: '#demo-hook-theme',
+      popover: {
+        align: 'start',
+        side: 'left',
+        title: 'More Control with Hooks',
+        description: 'You can use onPopoverRendered hook to modify the popover DOM. Here we are adding a custom button to the popover which takes the user to the first step.'
+      }
+    },
+    {
+      element: 'h1',
+      popover: {
+        align: 'start',
+        side: 'bottom',
+        title: 'Style However You Want',
+        description: 'You can use the default class names and override the styles or you can pass a custom class name to the popoverClass option either globally or per step.'
+      }
+    },
+    {
+      element: 'p a',
+      popover: {
+        align: 'start',
+        side: 'left',
+        title: 'Style However You Want',
+        description: 'You can use the default class names and override the styles or you can pass a custom class name to the popoverClass option either globally or per step.'
+      }
+    }
+  ]}
+  id={"demo-hook-theme"}
+  client:load
+>
+  ```js
+  import { driver } from "driver.js";
+  import "driver.js/dist/driver.css";
+
+  const driverObj = driver({
+    // Get full control over the popover rendering.
+    // Here we are adding a custom button that takes
+    // user to the first step.
+    onPopoverRendered: (popover, { config, state }) => {
+      const firstButton = document.createElement("button");
+      firstButton.innerText = "Go to First";
+      popover.footerButtons.appendChild(firstButton);
+
+      firstButton.addEventListener("click", () => {
+        driverObj.drive(0);
+      });
+    },
+    steps: [
+      // ..
+    ]
+  });
+
   driverObj.drive();
   ```
 </CodeSample>

docs/src/content/guides/configuration.mdx

@@ -63,7 +63,7 @@ type Popover = {
   // Parameter is an object with references to
   // the popover DOM elements such as buttons
   // title, descriptions, body, etc.
-  onPopoverRendered?: (popover: PopoverDOM) => void;
+  onPopoverRendered?: (popover: PopoverDOM, options: { config: Config; state: State }) => void;
 
   // Callbacks for button clicks. You can use
   // these to add custom behavior to the buttons.
@@ -166,7 +166,7 @@ type Config = {
   // PopoverDOM is an object with references to
   // the popover DOM elements such as buttons
   // title, descriptions, body, container etc.
-  onPopoverRendered?: (popover: PopoverDOM) => void;
+  onPopoverRendered?: (popover: PopoverDOM, options: { config: Config; state: State }) => void;
 
   // Hooks to run before and after highlighting
   // each step. Each hook receives the following

docs/src/content/guides/styling-popover.mdx

@@ -72,11 +72,76 @@ We have added a few examples below but have a look at the [theming section](/doc
   ```
 </CodeSample>
 
+Here is the CSS used for the above example:
+
+```css
+.driver-popover.driverjs-theme {
+  background-color: #fde047;
+  color: #000;
+}
+
+.driver-popover.driverjs-theme .driver-popover-title {
+  font-size: 20px;
+}
+
+.driver-popover.driverjs-theme .driver-popover-title,
+.driver-popover.driverjs-theme .driver-popover-description,
+.driver-popover.driverjs-theme .driver-popover-progress-text {
+  color: #000;
+}
+
+.driver-popover.driverjs-theme button {
+  flex: 1;
+  text-align: center;
+  background-color: #000;
+  color: #ffffff;
+  border: 2px solid #000;
+  text-shadow: none;
+  font-size: 14px;
+  padding: 5px 8px;
+  border-radius: 6px;
+}
+
+.driver-popover.driverjs-theme button:hover {
+  background-color: #000;
+  color: #ffffff;
+}
+
+.driver-popover.driverjs-theme .driver-popover-navigation-btns {
+  justify-content: space-between;
+  gap: 3px;
+}
+
+.driver-popover.driverjs-theme .driver-popover-close-btn {
+  color: #9b9b9b;
+}
+
+.driver-popover.driverjs-theme .driver-popover-close-btn:hover {
+  color: #000;
+}
+
+.driver-popover.driverjs-theme .driver-popover-arrow-side-left.driver-popover-arrow {
+  border-left-color: #fde047;
+}
+
+.driver-popover.driverjs-theme .driver-popover-arrow-side-right.driver-popover-arrow {
+  border-right-color: #fde047;
+}
+
+.driver-popover.driverjs-theme .driver-popover-arrow-side-top.driver-popover-arrow {
+  border-top-color: #fde047;
+}
+
+.driver-popover.driverjs-theme .driver-popover-arrow-side-bottom.driver-popover-arrow {
+  border-bottom-color: #fde047;
+}
+```
+
 <br/>
 
 <CodeSample
-  heading="Using Hook"
-  buttonText={"Driver.js Website Theme"}
+  heading="Using Hook to Modify"
+  buttonText={"Manipulating Popover DOM"}
   config={{
     prevBtnText: '&larr; Previous',
     nextBtnText: 'Next &rarr;',
@@ -89,8 +154,8 @@ We have added a few examples below but have a look at the [theming section](/doc
       popover: {
         align: 'start',
         side: 'left',
-        title: 'Style However You Want',
-        description: 'You can use the default class names and override the styles or you can pass a custom class name to the popoverClass option either globally or per step.'
+        title: 'More Control with Hooks',
+        description: 'You can use onPopoverRendered hook to modify the popover DOM. Here we are adding a custom button to the popover which takes the user to the first step.'
       }
     },
     {
@@ -120,15 +185,23 @@ We have added a few examples below but have a look at the [theming section](/doc
   import "driver.js/dist/driver.css";
 
   const driverObj = driver({
-  popoverClass: 'driverjs-theme'
-});
-
-  driverObj.highlight({
-  element: '#demo-theme',
-  popover: {
-  title: 'Style However You Want',
-  description: 'You can use the default class names and override the styles or you can pass a custom class name to the popoverClass option either globally or per step.'
-}
-});
+    // Get full control over the popover rendering.
+    // Here we are adding a custom button that takes
+    // the user to the first step.
+    onPopoverRendered: (popover, { config, state }) => {
+      const firstButton = document.createElement("button");
+      firstButton.innerText = "Go to First";
+      popover.footerButtons.appendChild(firstButton);
+
+      firstButton.addEventListener("click", () => {
+        driverObj.drive(0);
+      });
+    },
+    steps: [
+      // ..
+    ]
+  });
+
+  driverObj.drive();
   ```
 </CodeSample>

docs/src/content/guides/theming.mdx

@@ -53,6 +53,10 @@ Here is the list of classes applied to the popover which you can use in conjunct
 .driver-popover-next-btn {}
 ```
 
+Visit the [example page](/docs/styling-popover) for a demo that modifies the popover styles.
+
+## Modifying Popover DOM
+
 Alternatively, you can also use the `onPopoverRendered` hook to modify the popover DOM before it is displayed. The hook is called with the popover DOM as the first argument.
 
 ```typescript

src/popover.ts

@@ -1,6 +1,6 @@
 import { bringInView } from "./utils";
-import { DriverHook, getConfig } from "./config";
-import { getState, setState } from "./state";
+import { Config, DriverHook, getConfig } from "./config";
+import { getState, setState, State } from "./state";
 import { DriveStep } from "./driver";
 import { onDriverClick } from "./events";
 import { emit } from "./emitter";
@@ -28,7 +28,7 @@ export type Popover = {
   prevBtnText?: string;
 
   // Called after the popover is rendered
-  onPopoverRendered?: (popover: PopoverDOM) => void;
+  onPopoverRendered?: (popover: PopoverDOM, opts: { config: Config; state: State }) => void;
 
   // Button callbacks
   onNextClick?: DriverHook;
@@ -208,7 +208,10 @@ export function renderPopover(element: Element, step: DriveStep) {
 
   const onPopoverRendered = step.popover?.onPopoverRendered || getConfig("onPopoverRendered");
   if (onPopoverRendered) {
-    onPopoverRendered(popover);
+    onPopoverRendered(popover, {
+      config: getConfig(),
+      state: getState(),
+    });
   }
 }