Add usecases and examples

docs/src/components/FeatureMarquee.tsx

@@ -9,6 +9,7 @@ const featureList = [
   "Light-weight",
   "Feature Rich",
   "Highly Customizable",
+  "Supports all Major Browsers",
   "Easy to use",
   "Accessible",
   "Frameworks Ready",
@@ -21,7 +22,7 @@ export function FeatureMarquee() {
       <p className="py-4 text-2xl whitespace-nowrap">
         { featureList.map((featureItem, index) => (
           <React.Fragment key={index}>
-            { featureItem } <span className="mx-3">&middot;</span>
+            { featureItem }<span className="mx-3">&middot;</span>
           </React.Fragment>
         ))}
       </p>

docs/src/components/UsecaseItem.astro

@@ -0,0 +1,18 @@
+---
+export interface Props {
+  title: string;
+  description: string;
+}
+
+const { title, description } = Astro.props;
+---
+
+<div class="flex flex-col gap-4">
+  <span class="border-b-2 border-b-yellow-300 block w-[50px]"></span>
+  <h3 class="text-3xl font-bold text-yellow-300">
+    { title }
+  </h3>
+  <p class="text-xl text-gray-300">
+    { description }
+  </p>
+</div>

docs/src/components/examples/ExampleButton.tsx

@@ -0,0 +1,16 @@
+type ExampleButtonProps = {
+  onClick: () => void;
+  text: string;
+};
+
+export function ExampleButton(props: ExampleButtonProps) {
+  const { onClick, text } = props;
+
+  return (
+    <button
+      onClick={onClick}
+      className="bg-transparent rounded-xl py-2 px-4 font-medium text-yellow-300 border-2 border-yellow-300 text-lg hover:bg-yellow-300 hover:text-black transition-colors duration-100">
+      { text }
+    </button>
+  );
+}

docs/src/pages/index.astro

@@ -2,6 +2,8 @@
 import BaseLayout from "../layouts/BaseLayout.astro";
 import { FeatureMarquee } from "../components/FeatureMarquee";
 import Container from "../components/Container.astro";
+import UsecaseItem from "../components/UsecaseItem.astro";
+import { ExampleButton } from "../components/examples/ExampleButton";
 ---
 <BaseLayout>
   <div class="bg-yellow-300">
@@ -27,46 +29,52 @@ import Container from "../components/Container.astro";
     <FeatureMarquee client:load />
   </div>
 
-  <div class="py-24 bg-black text-white">
+  <div class="py-32 bg-black text-white">
     <Container>
-      <h2 class="text-5xl font-bold mb-4">Usecases</h2>
-      <p class="text-2xl mb-16 text-gray-300">Due to it's extensive API, driver.js can be used for a wide range of use cases.</p>
+      <h2 class="text-6xl font-bold mb-6">Examples</h2>
+      <p class="text-2xl text-gray-300 mb-12">Here are just a few examples; find more <a
+        class="text-yellow-300 underline underline-offset-4" href="#">in the documentation</a>.</p>
+
+      <div class="flex flex-wrap gap-3">
+        <ExampleButton text="Animated Tour" />
+        <ExampleButton text="Non-Animated Tour" />
+        <ExampleButton text="Asynchronous Tour" />
+        <ExampleButton text="Confirm on Exit" />
+        <ExampleButton text="Show Progress" />
+        <ExampleButton text="Simple Element Highlight" />
+        <ExampleButton text="Prevent Tour from Closing" />
+        <ExampleButton text="Selective Popover Buttons" />
+        <ExampleButton text="Overlay Color" />
+        <ExampleButton text="Popover Positioning" />
+        <ExampleButton text="Customizing Popover" />
+        <ExampleButton text="Hooks for Everything" />
+        <a href="/"
+           class="items-center flex text-lg text-gray-900 bg-yellow-300 rounded-xl px-5 hover:bg-yellow-500 hover:text-black">
+          and much more ...
+        </a>
+      </div>
+
+      <p class="text-2xl my-14 text-gray-300">Due to it's extensive API, driver.js can be used for a wide range of use
+        cases.</p>
       <div class="grid grid-cols-1 md:grid-cols-2 gap-12">
-        <div class="flex flex-col gap-4">
-          <span class="border-b border-b-yellow-300 block w-[50px]"></span>
-          <h3 class="text-3xl font-bold text-yellow-300">Onboard Users</h3>
-          <p class="text-xl text-gray-300">
-            Onboard your users by explaining how to use your product and answer common
-            questions.
-          </p>
-        </div>
-
-        <div class="flex flex-col gap-4">
-          <span class="border-b border-b-yellow-300 block w-[50px]"></span>
-          <h3 class="text-3xl font-bold text-yellow-300">
-            Remove Distractions
-          </h3>
-          <p class="text-xl text-gray-300">
-            With highlight feature, you can remove distractions and focus your users attention on what matters.
-          </p>
-        </div>
-
-        <div class="flex flex-col gap-4">
-          <span class="border-b border-b-yellow-300 block w-[50px]"></span>
-          <h3 class="text-3xl font-bold text-yellow-300">Contextual Help</h3>
-          <p class="text-xl text-gray-300">
-            Provide contextual help for your users, explain how to use your product and answer common questions.
-          </p>
-        </div>
-
-        <div class="flex flex-col gap-4">
-          <span class="border-b border-b-yellow-300 block w-[50px]"></span>
-          <h3 class="text-3xl font-bold text-yellow-300">Feature Adoption</h3>
-          <p class="text-xl text-gray-300">
-            Highlight new features, explain how to use them and make sure your users don't miss them.
-          </p>
-        </div>
+        <UsecaseItem
+          title="Onboard Users"
+          description="Onboard your users by explaining how to use your product and answer common questions."
+        />
+        <UsecaseItem
+          title="Remove Distractions"
+          description="With highlight feature, you can remove distractions and focus your users attention on what matters."
+        />
+        <UsecaseItem
+          title="Contextual Help"
+          description="Provide contextual help for your users, explain how to use your product and answer common questions."
+        />
+        <UsecaseItem
+          title="Feature Adoption"
+          description="Highlight new features, explain how to use them and make sure your users don't miss them."
+        />
       </div>
     </Container>
   </div>
+
 </BaseLayout>

src/popover.ts

@@ -102,7 +102,6 @@ export function renderPopover(element: Element, step: DriveStep) {
   const showFooter =
     showButtonsConfig?.includes("next") ||
     showButtonsConfig?.includes("previous") ||
-    showButtonsConfig?.includes("close") ||
     showProgressConfig;
 
   popover.closeButton.style.display = showButtonsConfig.includes("close") ? "block" : "none";
@@ -160,7 +159,10 @@ export function renderPopover(element: Element, step: DriveStep) {
         // If the user has provided a custom callback, call it
         // otherwise, emit the event.
         if (onNextClick) {
-          return onNextClick(element, step);
+          return onNextClick(element, step, {
+            config: getConfig(),
+            state: getState(),
+          });
         } else {
           return emit("nextClick");
         }
@@ -168,7 +170,10 @@ export function renderPopover(element: Element, step: DriveStep) {
 
       if (target.classList.contains("driver-popover-prev-btn")) {
         if (onPrevClick) {
-          return onPrevClick(element, step);
+          return onPrevClick(element, step, {
+            config: getConfig(),
+            state: getState(),
+          });
         } else {
           return emit("prevClick");
         }
@@ -176,7 +181,10 @@ export function renderPopover(element: Element, step: DriveStep) {
 
       if (target.classList.contains("driver-popover-close-btn")) {
         if (onCloseClick) {
-          return onCloseClick(element, step);
+          return onCloseClick(element, step, {
+            config: getConfig(),
+            state: getState(),
+          });
         } else {
           return emit("closeClick");
         }