From 1a0167478964fb75ce993a8a358a8daecfef7d73 Mon Sep 17 00:00:00 2001
From: Kamran Ahmed <kamranahmed.se@gmail.com>
Date: Sun, 2 Jul 2023 14:41:45 +0100
Subject: [PATCH] Popover positioning example

---
 docs/src/components/CodeSample.tsx           |   1 -
 docs/src/content/guides/popover-position.mdx | 338 ++++++++++---------
 docs/src/content/guides/tour-progress.mdx    |   2 +
 3 files changed, 172 insertions(+), 169 deletions(-)

diff --git a/docs/src/components/CodeSample.tsx b/docs/src/components/CodeSample.tsx
index 8a2a904..d55f4bd 100644
--- a/docs/src/components/CodeSample.tsx
+++ b/docs/src/components/CodeSample.tsx
@@ -100,7 +100,6 @@ export function CodeSample(props: CodeSampleProps) {
     <div id={id} className={className}>
       {heading && <p className="text-lg -mt-0 font-medium text-black -mb-3 rounded-md">{heading}</p>}
       {children && <div className="-mb-4">{children}</div>}
-      {!children && <div className="mb-1"></div>}
       <button onClick={onClick} className="w-full rounded-md bg-black p-2 text-white">
         {buttonText}
       </button>
diff --git a/docs/src/content/guides/popover-position.mdx b/docs/src/content/guides/popover-position.mdx
index 7d1aae9..edbbdfc 100644
--- a/docs/src/content/guides/popover-position.mdx
+++ b/docs/src/content/guides/popover-position.mdx
@@ -30,182 +30,184 @@ driverObj.highlight({
   <p>Use the buttons below to show the popover.</p>
 </div>
 
-<CodeSample
-  buttonText={"Left Start"}
-  highlight={{
-    element: '#sample-box',
-    popover: {
-      title: 'Left Start Example',
-      description: 'We have side set to <mark>left</mark> and align set to <mark>start</mark>. PS, we can use HTML in the title and descriptions of popover.',
-      side: "left",
-      align: 'start'
-    }
-  }}
-  id={"left-start"}
-  client:load
-/>
+<div className="flex flex-wrap mt-3 gap-1 justify-start">
+  <CodeSample
+    buttonText={"Left Start"}
+    highlight={{
+      element: '#sample-box',
+      popover: {
+        title: 'Left Start Example',
+        description: 'We have side set to <mark>left</mark> and align set to <mark>start</mark>. PS, we can use HTML in the title and descriptions of popover.',
+        side: "left",
+        align: 'start'
+      }
+    }}
+    id={"left-start"}
+    client:load
+  />
 
-<CodeSample
-  buttonText={"Left Center"}
-  highlight={{
-    element: '#sample-box',
-    popover: {
-      title: 'Left Center Example',
-      description: 'We have side set to <mark>left</mark> and align set to <mark>center</mark>. PS, we can use HTML in the title and descriptions of popover.',
-      side: "left",
-      align: 'center'
-    }
-  }}
-  id={"left-start"}
-  client:load
-/>
+  <CodeSample
+    buttonText={"Left Center"}
+    highlight={{
+      element: '#sample-box',
+      popover: {
+        title: 'Left Center Example',
+        description: 'We have side set to <mark>left</mark> and align set to <mark>center</mark>. PS, we can use HTML in the title and descriptions of popover.',
+        side: "left",
+        align: 'center'
+      }
+    }}
+    id={"left-start"}
+    client:load
+  />
 
-<CodeSample
-  buttonText={"Left End"}
-  highlight={{
-    element: '#sample-box',
-    popover: {
-      title: 'Left End Example',
-      description: 'We have side set to <mark>left</mark> and align set to <mark>end</mark>. PS, we can use HTML in the title and descriptions of popover.',
-      side: "left",
-      align: 'end'
-    }
-  }}
-  id={"left-start"}
-  client:load
-/>
+  <CodeSample
+    buttonText={"Left End"}
+    highlight={{
+      element: '#sample-box',
+      popover: {
+        title: 'Left End Example',
+        description: 'We have side set to <mark>left</mark> and align set to <mark>end</mark>. PS, we can use HTML in the title and descriptions of popover.',
+        side: "left",
+        align: 'end'
+      }
+    }}
+    id={"left-start"}
+    client:load
+  />
 
-<CodeSample
-  buttonText={"Top Start"}
-  highlight={{
-    element: '#sample-box',
-    popover: {
-      title: 'Top Start Example',
-      description: 'We have side set to <mark>top</mark> and align set to <mark>start</mark>. PS, we can use HTML in the title and descriptions of popover.',
-      side: "top",
-      align: 'start'
-    }
-  }}
-  id={"top-start"}
-  client:load
-/>
+  <CodeSample
+    buttonText={"Top Start"}
+    highlight={{
+      element: '#sample-box',
+      popover: {
+        title: 'Top Start Example',
+        description: 'We have side set to <mark>top</mark> and align set to <mark>start</mark>. PS, we can use HTML in the title and descriptions of popover.',
+        side: "top",
+        align: 'start'
+      }
+    }}
+    id={"top-start"}
+    client:load
+  />
 
-<CodeSample
-  buttonText={"Top Center"}
-  highlight={{
-    element: '#sample-box',
-    popover: {
-      title: 'Top Center Example',
-      description: 'We have side set to <mark>top</mark> and align set to <mark>center</mark>. PS, we can use HTML in the title and descriptions of popover.',
-      side: "top",
-      align: 'center'
-    }
-  }}
-  id={"top-start"}
-  client:load
-/>
+  <CodeSample
+    buttonText={"Top Center"}
+    highlight={{
+      element: '#sample-box',
+      popover: {
+        title: 'Top Center Example',
+        description: 'We have side set to <mark>top</mark> and align set to <mark>center</mark>. PS, we can use HTML in the title and descriptions of popover.',
+        side: "top",
+        align: 'center'
+      }
+    }}
+    id={"top-start"}
+    client:load
+  />
 
-<CodeSample
-  buttonText={"Top End"}
-  highlight={{
-    element: '#sample-box',
-    popover: {
-      title: 'Top End Example',
-      description: 'We have side set to <mark>top</mark> and align set to <mark>end</mark>. PS, we can use HTML in the title and descriptions of popover.',
-      side: "top",
-      align: 'end'
-    }
-  }}
-  id={"top-start"}
-  client:load
-/>
+  <CodeSample
+    buttonText={"Top End"}
+    highlight={{
+      element: '#sample-box',
+      popover: {
+        title: 'Top End Example',
+        description: 'We have side set to <mark>top</mark> and align set to <mark>end</mark>. PS, we can use HTML in the title and descriptions of popover.',
+        side: "top",
+        align: 'end'
+      }
+    }}
+    id={"top-start"}
+    client:load
+  />
 
-<CodeSample
-  buttonText={"Right Start"}
-  highlight={{
-    element: '#sample-box',
-    popover: {
-      title: 'Right Start Example',
-      description: 'We have side set to <mark>right</mark> and align set to <mark>start</mark>. PS, we can use HTML in the title and descriptions of popover.',
-      side: "right",
-      align: 'start'
-    }
-  }}
-  id={"right-start"}
-  client:load
-/>
+  <CodeSample
+    buttonText={"Right Start"}
+    highlight={{
+      element: '#sample-box',
+      popover: {
+        title: 'Right Start Example',
+        description: 'We have side set to <mark>right</mark> and align set to <mark>start</mark>. PS, we can use HTML in the title and descriptions of popover.',
+        side: "right",
+        align: 'start'
+      }
+    }}
+    id={"right-start"}
+    client:load
+  />
 
-<CodeSample
-  buttonText={"Right Center"}
-  highlight={{
-    element: '#sample-box',
-    popover: {
-      title: 'Right Center Example',
-      description: 'We have side set to <mark>right</mark> and align set to <mark>center</mark>. PS, we can use HTML in the title and descriptions of popover.',
-      side: "right",
-      align: 'center'
-    }
-  }}
-  id={"right-start"}
-  client:load
-/>
+  <CodeSample
+    buttonText={"Right Center"}
+    highlight={{
+      element: '#sample-box',
+      popover: {
+        title: 'Right Center Example',
+        description: 'We have side set to <mark>right</mark> and align set to <mark>center</mark>. PS, we can use HTML in the title and descriptions of popover.',
+        side: "right",
+        align: 'center'
+      }
+    }}
+    id={"right-start"}
+    client:load
+  />
 
-<CodeSample
-  buttonText={"Right End"}
-  highlight={{
-    element: '#sample-box',
-    popover: {
-      title: 'Right End Example',
-      description: 'We have side set to <mark>right</mark> and align set to <mark>end</mark>. PS, we can use HTML in the title and descriptions of popover.',
-      side: "right",
-      align: 'end'
-    }
-  }}
-  id={"right-start"}
-  client:load
-/>
+  <CodeSample
+    buttonText={"Right End"}
+    highlight={{
+      element: '#sample-box',
+      popover: {
+        title: 'Right End Example',
+        description: 'We have side set to <mark>right</mark> and align set to <mark>end</mark>. PS, we can use HTML in the title and descriptions of popover.',
+        side: "right",
+        align: 'end'
+      }
+    }}
+    id={"right-start"}
+    client:load
+  />
 
-<CodeSample
-  buttonText={"Bottom Start"}
-  highlight={{
-    element: '#sample-box',
-    popover: {
-      title: 'Bottom Start Example',
-      description: 'We have side set to <mark>bottom</mark> and align set to <mark>start</mark>. PS, we can use HTML in the title and descriptions of popover.',
-      side: "bottom",
-      align: 'start'
-    }
-  }}
-  id={"bottom-start"}
-  client:load
-/>
+  <CodeSample
+    buttonText={"Bottom Start"}
+    highlight={{
+      element: '#sample-box',
+      popover: {
+        title: 'Bottom Start Example',
+        description: 'We have side set to <mark>bottom</mark> and align set to <mark>start</mark>. PS, we can use HTML in the title and descriptions of popover.',
+        side: "bottom",
+        align: 'start'
+      }
+    }}
+    id={"bottom-start"}
+    client:load
+  />
 
-<CodeSample
-  buttonText={"Bottom Center"}
-  highlight={{
-    element: '#sample-box',
-    popover: {
-      title: 'Bottom Center Example',
-      description: 'We have side set to <mark>bottom</mark> and align set to <mark>center</mark>. PS, we can use HTML in the title and descriptions of popover.',
-      side: "bottom",
-      align: 'center'
-    }
-  }}
-  id={"bottom-start"}
-  client:load
-/>
+  <CodeSample
+    buttonText={"Bottom Center"}
+    highlight={{
+      element: '#sample-box',
+      popover: {
+        title: 'Bottom Center Example',
+        description: 'We have side set to <mark>bottom</mark> and align set to <mark>center</mark>. PS, we can use HTML in the title and descriptions of popover.',
+        side: "bottom",
+        align: 'center'
+      }
+    }}
+    id={"bottom-start"}
+    client:load
+  />
 
-<CodeSample
-  buttonText={"Bottom End"}
-  highlight={{
-    element: '#sample-box',
-    popover: {
-      title: 'Bottom End Example',
-      description: 'We have side set to <mark>bottom</mark> and align set to <mark>end</mark>. PS, we can use HTML in the title and descriptions of popover.',
-      side: "bottom",
-      align: 'end'
-    }
-  }}
-  id={"right-start"}
-  client:load
-/>
\ No newline at end of file
+  <CodeSample
+    buttonText={"Bottom End"}
+    highlight={{
+      element: '#sample-box',
+      popover: {
+        title: 'Bottom End Example',
+        description: 'We have side set to <mark>bottom</mark> and align set to <mark>end</mark>. PS, we can use HTML in the title and descriptions of popover.',
+        side: "bottom",
+        align: 'end'
+      }
+    }}
+    id={"right-start"}
+    client:load
+  />
+</div>
\ No newline at end of file
diff --git a/docs/src/content/guides/tour-progress.mdx b/docs/src/content/guides/tour-progress.mdx
index 1d0cf27..145fcc4 100644
--- a/docs/src/content/guides/tour-progress.mdx
+++ b/docs/src/content/guides/tour-progress.mdx
@@ -45,6 +45,8 @@ Please note that `showProgress` is `false` by default. Also the default text for
   ```
 </CodeSample>
 
+<div className="mb-1.5"></div>
+
 <CodeSample
   buttonText={"Different Progress Text"}
   config={{