shipshapecode · RobbieTheWagner · Feb 12, 2020 · Jan 8, 2020 · Jan 8, 2020 · Jan 8, 2020
diff --git a/.travis.yml b/.travis.yml
@@ -28,6 +28,7 @@ cache:
     - ~/.cache
 
 before_install:
+  - npm install -g yarn
   - yarn global add greenkeeper-lockfile@1
 
 install:

diff --git a/demo/js/welcome.js b/demo/js/welcome.js
@@ -23,7 +23,7 @@
       // This should add the first tour step
       steps: [
         {
-          text: '\n         <p>\n           Shepherd is a JavaScript library for guiding users through your app.\n           It uses <a href="http://tether.io/" data-test-tether-link>Tether</a>,\n           another open source library, to render dialogs for each tour "step".\n         </p>\n        \n         <p>\n           Among many things, Tether makes sure your steps never end up off screen or cropped by an overflow.\n           (Try resizing your browser to see what we mean.)\n         </p>\n',
+          text: '\n         <p>\n           Shepherd is a JavaScript library for guiding users through your app.\n           It uses <a href="https://popper.js.org/" data-test-popper-link>Popper.js</a>,\n           another open source library, to render dialogs for each tour "step".\n         </p>\n        \n         <p>\n           Among many things, Tether makes sure your steps never end up off screen or cropped by an overflow.\n           (Try resizing your browser to see what we mean.)\n         </p>\n',
           attachTo: {
             element: '.hero-welcome',
             on: 'bottom'

diff --git a/docs-src/tutorials/02-usage.md b/docs-src/tutorials/02-usage.md
@@ -104,6 +104,7 @@ const myTour = new Shepherd.Tour(options);
 
 ##### Tour Options
 
+- `classPrefix`: The prefix to add to all the `shepherd-*` class names.
 - `confirmCancel`: If true, will issue a `window.confirm` before cancelling
 - `confirmCancelMessage`: The message to display in the confirm dialog
 - `defaultStepOptions`: Default options for Steps created through `addStep`
@@ -117,17 +118,19 @@ dynamically generated `id` property -- which is also set on the `body` element a
 
 ##### Tour Methods
 
-- `addStep(options)`: Creates a new Step object with options, and returns the `Step` instance it created.
-If the options hash doesn't include an `id`, one will be generated.
+- `addStep(options)`: Creates a new Step object with options, and returns the `Step` instance it created. If the options hash doesn't include an `id`, one will be generated.
 You can also pass an existing `Step` instance rather than `options`, but note that Shepherd does not support a Step being attached to multiple Tours.
+- `addSteps([Steps])`: Add multiple steps to the tour
 - `getById(id)`: Return a step with a specific id
+- `isActive()`: Check if the tour is active
 - `next()`: Advance to the next step, in the order they were added
 - `back()`: Show the previous step, in the order they were added
 - `cancel()`: Trigger cancel on the current step, hiding it without advancing
 - `hide()`: Hide the current step
 - `show([id])`: Show the step specified by id (if it's a string), or index (if it's a number) provided.  Defaults to the first step.
 - `start()`: Show the first step and begin the tour
 - `getCurrentStep()`: Returns the currently shown step
+- `removeStep(id)`: Removes the step from the tour
 - `on(eventName, handler, [context])`: Bind an event
 - `off(eventName, [handler])`: Unbind an event
 - `once(eventName, handler, [context])`: Bind just the next instance of an event
@@ -210,6 +213,7 @@ You can also always manually advance the Tour by calling `myTour.next()`.
 - `highlightClass`: An extra class to apply to the `attachTo` element when it is highlighted (that is, when its step is active). You can then target that selector in your CSS.
 - `id`: The string to use as the `id` for the step. If an id is not passed one will be generated.
 - `modalOverlayOpeningPadding`: An amount of padding to add around the modal overlay opening
+- `popperOptions`: Extra options to pass to [Popper](https://popper.js.org/docs/v2/constructors/#options)
 - `showOn`: A function that, when it returns true, will show the step. If it returns false, the step will be skipped.
 - `scrollTo`: Should the element be scrolled to when this step is shown?
 - `scrollToHandler`: A function that lets you override the default `scrollTo` behavior and define a custom action to do the scrolling,
@@ -263,13 +267,6 @@ yourApp.on('some-event', () => {
 });
 ```
 
-### Rendering Tours in Specific Locations
-
-By default, tour steps will append their elements to the `body` element of the DOM. This is perfect for most use cases, but not always. If you need to have steps appended elsewhere you can take advantage of Tippy's
-[`appendTo` option](https://atomiks.github.io/tippyjs/#append-to-option) by defining it on the
-`tippyOptions` hash inside of each Step's options hash.
-
-
 ### 🔼 Displaying Arrows
 
 By default, Shepherd will generate and position an "arrow" element that points to the target
@@ -282,4 +279,4 @@ myTour.addStep({
 });
 ```
 
-Furthermore, while Shepherd provides some basic arrow styling, you can style it as you wish by targeting the `.popper__arrow` element.
+Furthermore, while Shepherd provides some basic arrow styling, you can style it as you wish by targeting the `.shepherd-arrow` element.
diff --git a/jest.config.js b/jest.config.js
@@ -44,9 +44,5 @@ module.exports = {
       }
     }],
     '.+\\.(css|styl|less|sass|scss)$': 'jest-transform-css'
-  },
-
-  transformIgnorePatterns: [
-    '/node_modules/(?!tether).+\\.js$'
-  ]
+  }
 };
diff --git a/landing/css/styles.css b/landing/css/styles.css
@@ -1,7 +1,5 @@
 @tailwind base;
-
 @tailwind components;
-
 @tailwind utilities;
 
 html, body {
@@ -154,40 +152,44 @@ pre {
   width: auto;
 }
 
+.shepherd-arrow::before {
+  display: none;
+}
+
 .shepherd-element .shepherd-arrow:after {
   content: url('../assets/img/arrow.svg');
   display: inline-block;
 }
 
-.shepherd-element.shepherd-element-attached-bottom.shepherd-element-attached-center .shepherd-arrow,
+.shepherd-element[data-popper-placement^='top'] .shepherd-arrow,
 .shepherd-element.shepherd-pinned-top .shepherd-arrow {
   bottom: -35px;
 }
 
-.shepherd-element.shepherd-element-attached-bottom.shepherd-element-attached-center .shepherd-arrow:after,
+.shepherd-element[data-popper-placement^='top'] .shepherd-arrow:after,
 .shepherd-element.shepherd-pinned-top .shepherd-arrow:after {
   transform: rotate(270deg);
 }
 
-.shepherd-element.shepherd-element-attached-top.shepherd-element-attached-center .shepherd-arrow {
+.shepherd-element[data-popper-placement^='bottom'] .shepherd-arrow {
   top: -35px;
 }
 
-.shepherd-element.shepherd-element-attached-top.shepherd-element-attached-center .shepherd-arrow:after {
+.shepherd-element[data-popper-placement^='bottom'] .shepherd-arrow:after {
   transform: rotate(90deg);
 }
 
-.shepherd-element.shepherd-element-attached-middle.shepherd-element-attached-right .shepherd-arrow,
+.shepherd-element[data-popper-placement^='left'] .shepherd-arrow,
 .shepherd-element.shepherd-pinned-left .shepherd-arrow {
   right: -35px;
 }
 
-.shepherd-element.shepherd-element-attached-middle.shepherd-element-attached-right .shepherd-arrow:after,
+.shepherd-element[data-popper-placement^='left'] .shepherd-arrow:after,
 .shepherd-element.shepherd-pinned-left .shepherd-arrow:after {
   transform: rotate(180deg);
 }
 
-.shepherd-element.shepherd-element-attached-middle.shepherd-element-attached-left .shepherd-arrow,
+.shepherd-element[data-popper-placement^='right'] .shepherd-arrow,
 .shepherd-element.shepherd-pinned-right .shepherd-arrow {
   left: -35px;
 }
@@ -221,17 +223,15 @@ pre {
   padding: 2rem;
 }
 
-.shepherd-text a,
-.shepherd-text a:visited,
+.shepherd-text a, .shepherd-text a:visited,
 .shepherd-text a:active {
   border-bottom: 1px dotted;
   border-bottom-color: rgba(0, 0, 0, 0.75);
   color: rgba(0, 0, 0, 0.75);
   text-decoration: none;
 }
 
-.shepherd-text a:hover,
-.shepherd-text a:visited:hover,
+.shepherd-text a:hover, .shepherd-text a:visited:hover,
 .shepherd-text a:active:hover {
   border-bottom-style: solid;
-}
+}
diff --git a/landing/css/welcome.css b/landing/css/welcome.css
@@ -5037,41 +5037,40 @@ pre {
   width: auto;
 }
 
+.shepherd-arrow::before {
+  display: none;
+}
+
 .shepherd-element .shepherd-arrow:after {
   content: url('../assets/img/arrow.svg');
   display: inline-block;
 }
 
-.shepherd-element.shepherd-element-attached-bottom.shepherd-element-attached-center .shepherd-arrow,
-.shepherd-element.shepherd-pinned-top .shepherd-arrow {
+.shepherd-element[data-popper-placement^='top'] .shepherd-arrow, .shepherd-element.shepherd-pinned-top .shepherd-arrow {
   bottom: -35px;
 }
 
-.shepherd-element.shepherd-element-attached-bottom.shepherd-element-attached-center .shepherd-arrow:after,
-.shepherd-element.shepherd-pinned-top .shepherd-arrow:after {
+.shepherd-element[data-popper-placement^='top'] .shepherd-arrow:after, .shepherd-element.shepherd-pinned-top .shepherd-arrow:after {
   transform: rotate(270deg);
 }
 
-.shepherd-element.shepherd-element-attached-top.shepherd-element-attached-center .shepherd-arrow {
+.shepherd-element[data-popper-placement^='bottom'] .shepherd-arrow {
   top: -35px;
 }
 
-.shepherd-element.shepherd-element-attached-top.shepherd-element-attached-center .shepherd-arrow:after {
+.shepherd-element[data-popper-placement^='bottom'] .shepherd-arrow:after {
   transform: rotate(90deg);
 }
 
-.shepherd-element.shepherd-element-attached-middle.shepherd-element-attached-right .shepherd-arrow,
-.shepherd-element.shepherd-pinned-left .shepherd-arrow {
+.shepherd-element[data-popper-placement^='left'] .shepherd-arrow, .shepherd-element.shepherd-pinned-left .shepherd-arrow {
   right: -35px;
 }
 
-.shepherd-element.shepherd-element-attached-middle.shepherd-element-attached-right .shepherd-arrow:after,
-.shepherd-element.shepherd-pinned-left .shepherd-arrow:after {
+.shepherd-element[data-popper-placement^='left'] .shepherd-arrow:after, .shepherd-element.shepherd-pinned-left .shepherd-arrow:after {
   transform: rotate(180deg);
 }
 
-.shepherd-element.shepherd-element-attached-middle.shepherd-element-attached-left .shepherd-arrow,
-.shepherd-element.shepherd-pinned-right .shepherd-arrow {
+.shepherd-element[data-popper-placement^='right'] .shepherd-arrow, .shepherd-element.shepherd-pinned-right .shepherd-arrow {
   left: -35px;
 }
 

diff --git a/landing/js/welcome.js b/landing/js/welcome.js
@@ -23,7 +23,7 @@
       // This should add the first tour step
       steps: [
         {
-          text: '\n         <p>\n           Shepherd is a JavaScript library for guiding users through your app.\n           It uses <a href="http://tether.io/" data-test-tether-link>Tether</a>,\n           another open source library, to render dialogs for each tour "step".\n         </p>\n        \n         <p>\n           Among many things, Tether makes sure your steps never end up off screen or cropped by an overflow.\n           (Try resizing your browser to see what we mean.)\n         </p>\n',
+          text: '\n         <p>\n           Shepherd is a JavaScript library for guiding users through your app.\n           It uses <a href="https://popper.js.org/" data-test-popper-link>Popper.js</a>,\n           another open source library, to render dialogs for each tour "step".\n         </p>\n        \n         <p>\n           Among many things, Tether makes sure your steps never end up off screen or cropped by an overflow.\n           (Try resizing your browser to see what we mean.)\n         </p>\n',
           attachTo: {
             element: '.hero-welcome',
             on: 'bottom'

diff --git a/package.json b/package.json
@@ -30,6 +30,7 @@
     "cy:open": "./node_modules/.bin/cypress open",
     "cy:run": "./node_modules/.bin/cypress run",
     "lint:js": "eslint . --ext js",
+    "postinstall": "patch-package",
     "rewrite-paths": "replace 'SF:.*src' 'SF:src' coverage/lcov.info",
     "start": "yarn watch",
     "start-test-server": "http-server -p 9002",
@@ -48,8 +49,8 @@
   "types": "src/types/shepherd.d.ts",
   "module": "dist/js/shepherd.esm.js",
   "dependencies": {
-    "smoothscroll-polyfill": "^0.4.4",
-    "tether": "^2.0.0-beta.5"
+    "@popperjs/core": "^2.0.3",
+    "smoothscroll-polyfill": "^0.4.4"
   },
   "devDependencies": {
     "@babel/core": "^7.8.4",
@@ -79,7 +80,9 @@
     "jsdoc": "^3.6.3",
     "jsdoc-template-ship-shape": "^0.1.1",
     "mutationobserver-shim": "^0.3.3",
+    "patch-package": "^6.2.0",
     "postcss": "^7.0.26",
+    "postinstall-postinstall": "^2.0.0",
     "replace": "^1.1.5",
     "rimraf": "^3.0.2",
     "rollup": "^1.31.0",

diff --git a/patches/rollup-plugin-eslint+7.0.0.patch b/patches/rollup-plugin-eslint+7.0.0.patch
@@ -0,0 +1,13 @@
+diff --git a/node_modules/rollup-plugin-eslint/index.js b/node_modules/rollup-plugin-eslint/index.js
+index 620bb21..3e703a6 100644
+--- a/node_modules/rollup-plugin-eslint/index.js
++++ b/node_modules/rollup-plugin-eslint/index.js
+@@ -33,7 +33,7 @@ function eslint(options = {}) {
+
+     transform(code, id) {
+       const file = normalizePath(id);
+-      if (cli.isPathIgnored(file) || !filter(id)) {
++      if (!filter(id) || cli.isPathIgnored(file)) {
+         return null;
+       }
+
diff --git a/src/js/components/shepherd-element.svelte b/src/js/components/shepherd-element.svelte
@@ -127,66 +127,48 @@
     opacity: 1;
   }
 
-  .shepherd-element, .shepherd-element *, .shepherd-element *:after, .shepherd-element *:before {
+  .shepherd-element, .shepherd-element *,
+  .shepherd-element *:after,
+  .shepherd-element *:before {
     box-sizing: border-box;
   }
 
-  .shepherd-element .shepherd-arrow {
-    border: 16px solid transparent;
-    content: '';
-    display: block;
-    height: 16px;
-    pointer-events: none;
+  .shepherd-arrow,
+  .shepherd-arrow::before {
     position: absolute;
     width: 16px;
-    z-index: 10000;
+    height: 16px;
+    z-index: -1;
   }
 
-  /**
-   * Arrow on bottom of tooltip centered horizontally
-   */
-  .shepherd-element.shepherd-element-attached-bottom.shepherd-element-attached-center .shepherd-arrow {
-    bottom: 0;
-    border-top-color: #fff;
-    left: 50%;
-    transform: translate(-50%, 100%);
+  .shepherd-arrow:before {
+    content: '';
+    transform: rotate(45deg);
+    background: #fff  ;
   }
 
-  /**
-   * Arrow on top of tooltip centered horizontally
-   */
-  .shepherd-element.shepherd-element-attached-top.shepherd-element-attached-center .shepherd-arrow {
-    border-bottom-color: #fff;
-    left: 50%;
-    top: 0;
-    transform: translate(-50%, -100%);
+  .shepherd-element[data-popper-placement^='top'] > .shepherd-arrow {
+    bottom: -8px;
   }
 
-  /**
-  * Arrow on top of tooltip centered horizontally, with title color
-  */
-  .shepherd-element.shepherd-element-attached-top.shepherd-element-attached-center.shepherd-has-title .shepherd-arrow {
-    border-bottom-color: #e6e6e6;
+  .shepherd-element[data-popper-placement^='bottom'] > .shepherd-arrow {
+    top: -8px;
   }
 
-  /**
-   * Arrow on left of tooltip, centered vertically
-   */
-  .shepherd-element.shepherd-element-attached-middle.shepherd-element-attached-left .shepherd-arrow {
-    border-right-color: #fff;
-    left: 0;
-    top: 50%;
-    transform: translate(-100%, -50%);
+  .shepherd-element[data-popper-placement^='left'] > .shepherd-arrow {
+    right: -8px;
+  }
+
+  .shepherd-element[data-popper-placement^='right'] > .shepherd-arrow {
+    left: -8px;
   }
 
+
   /**
-   * Arrow on right of tooltip, centered vertically
-   */
-  .shepherd-element.shepherd-element-attached-middle.shepherd-element-attached-right .shepherd-arrow {
-    border-left-color: #fff;
-    right: 0;
-    top: 50%;
-    transform: translate(100%, -50%);
+  * Arrow on top of tooltip centered horizontally, with title color
+  */
+  .shepherd-element.shepherd-has-title[data-popper-placement^='bottom'] > .shepherd-arrow::before {
+    background-color: #e6e6e6;
   }
 
   .shepherd-target-click-disabled.shepherd-enabled.shepherd-target,
@@ -208,7 +190,7 @@
   tabindex="0"
 >
     {#if step.options.arrow && step.options.attachTo && step.options.attachTo.element}
-      <div class="shepherd-arrow"></div>
+      <div class="shepherd-arrow" data-popper-arrow></div>
     {/if}
   <ShepherdContent
     {descriptionId}