[FEATURE] Adding Scoped classNames in Driver and Popover level (#138)

This PR is related to adding scoped classNames into the driver-popover-item.
I temporary wrapped it in a React Component which handles this isolation in order to protect
from getting to the style css collision problem since the selectors are shared between all usages.

You can specifiy the className in the Driver instance options and at the popover options level. classNames of popover will
be merged with the general driver className if exist.

demo/index.html

@@ -208,6 +208,7 @@ driver.defineSteps([
   {
     element: '#first-element-introduction',
     popover: {
+      className: 'first-step-popover-class',
       title: 'Title on Popover',
       description: 'Body of the popover',
       position: 'left'
@@ -273,6 +274,7 @@ driver.highlight({
       <h4>Driver Definition</h4>
       <p>Here are the options that Driver understands</p>
       <pre><code class="javascript">const driver = new Driver({
+  className: 'scoped-class', // className to wrap driver.js popover
   animate: true,  // Animate while changing highlighted element
   opacity: 0.75,  // Background opacity (0 means only popovers and without overlay)
   padding: 10,    // Distance of element from around the edges
@@ -301,14 +303,15 @@ driver.highlight({
       <p>Here are the set of options that you can pass in each step i.e. an item in array of steps or the object that
         you pass to <code>highlight</code> method</p>
       <pre><code class="javascript">const stepDefinition = {
-  element: '#some-item',  // Query selector string or Node to be highlighted
-  popover: {              // There will be no popover if empty or not given
-    title: 'Title',       // Title on the popover
+  element: '#some-item',        // Query selector string or Node to be highlighted
+  popover: {                    // There will be no popover if empty or not given
+    className: 'popover-class', // className to wrap this specific step popover in addition to the general className in Driver options
+    title: 'Title',             // Title on the popover
     description: 'Description', // Body of the popover
-    showButtons: false,      // Do not show control buttons in footer
-    closeBtnText: 'Close',   // Text on the close button for this step
-    nextBtnText: 'Next',     // Next button text for this step
-    prevBtnText: 'Previous', // Previous button text for this step
+    showButtons: false,         // Do not show control buttons in footer
+    closeBtnText: 'Close',      // Text on the close button for this step
+    nextBtnText: 'Next',        // Next button text for this step
+    prevBtnText: 'Previous',    // Previous button text for this step
   }
 };
 </code></pre>

demo/scripts/demo.js

@@ -6,6 +6,7 @@ document.addEventListener('DOMContentLoaded', function () {
     {
       element: document.getElementById('driver-demo-head'),
       popover: {
+        className: 'scoped-driver-popover',
         title: 'Before we start',
         description: 'This is just one use-case, make sure to check out the rest of the docs below.',
         nextBtnText: 'Okay, Start!',
@@ -101,7 +102,8 @@ document.addEventListener('DOMContentLoaded', function () {
     animate: false,
     opacity: 0.8,
     padding: 5,
-    showButtons: true
+    showButtons: true,
+    className: 'boring-scope'
   });
 
   boringTourDriver.defineSteps(tourSteps);

readme.md

@@ -146,6 +146,7 @@ driver.defineSteps([
   {
     element: '#first-element-introduction',
     popover: {
+      className: 'first-step-popover-class',
       title: 'Title on Popover',
       description: 'Body of the popover',
       position: 'left'
@@ -238,6 +239,7 @@ Here are the options that Driver understands:
 
 ```javascript
 const driver = new Driver({
+  className: 'scoped-class',        // className to wrap driver.js popover
   animate: true,                    // Whether to animate or not
   opacity: 0.75,                    // Background opacity (0 means only popovers and without overlay)
   padding: 10,                      // Distance of element from around the edges
@@ -270,6 +272,7 @@ const stepDefinition = {
   element: '#some-item',        // Query selector string or Node to be highlighted
   stageBackground: '#ffffff',   // This will override the one set in driver
   popover: {                    // There will be no popover if empty or not given
+    className: 'popover-class', // className to wrap this specific step popover in addition to the general className in Driver options
     title: 'Title',             // Title on the popover
     description: 'Description', // Body of the popover
     showButtons: false,         // Do not show control buttons in footer

src/common/constants.js

@@ -32,8 +32,8 @@ export const CLASS_BTN_DISABLED = 'driver-disabled';
 export const ANIMATION_DURATION_MS = 400;
 
 // language=HTML
-export const POPOVER_HTML = `
-  <div id="${ID_POPOVER}">
+export const POPOVER_HTML = (className = '') => `
+  <div id="${ID_POPOVER} ${className}">
     <div class="${CLASS_POPOVER_TIP}"></div>
     <div class="${CLASS_POPOVER_TITLE}">Popover Title</div>
     <div class="${CLASS_POPOVER_DESCRIPTION}">Popover Description</div>

src/core/popover.js

@@ -54,7 +54,7 @@ export default class Popover extends Element {
   attachNode() {
     let popover = this.document.getElementById(ID_POPOVER);
     if (!popover) {
-      popover = createNodeFromString(POPOVER_HTML);
+      popover = createNodeFromString(POPOVER_HTML(this.options.className));
       document.body.appendChild(popover);
     }
 

src/index.js

@@ -370,9 +370,15 @@ export default class Driver {
 
     let popover = null;
     if (elementOptions.popover && elementOptions.popover.title) {
+      const mergedClassNames = [
+        this.options.className,
+        elementOptions.popover.className,
+      ].filter(c => c).join(' ');
+
       const popoverOptions = {
         ...this.options,
         ...elementOptions.popover,
+        className: mergedClassNames,
         totalCount: allSteps.length,
         currentIndex: index,
         isFirst: index === 0,