Use popper based shepherd.js

index.js

@@ -32,11 +32,12 @@ module.exports = {
           }
         };
       },
-      'tether-shepherd'() {
+      'shepherd.js'() {
         return {
           srcDir: 'dist',
           import: {
             include: [
+              'js/popper.js',
               'js/shepherd.js',
               this.theme
             ],

package.json

@@ -49,9 +49,8 @@
     "ember-cli-babel": "^6.6.0",
     "ember-cli-node-assets": "0.2.2",
     "ember-getowner-polyfill": "2.2.0",
-    "ember-tether": "1.0.0",
     "fastboot-transform": "^0.1.3",
-    "tether-shepherd": "1.8.1"
+    "shepherd.js": "^2.0.0-beta.2"
   },
   "devDependencies": {
     "@html-next/flexi-config": "^2.1.1",
@@ -100,10 +99,7 @@
   },
   "ember-addon": {
     "configPath": "tests/dummy/config",
-    "demoURL": "http://ember-shepherd.shipshape.io/",
-    "after": [
-      "ember-tether"
-    ]
+    "demoURL": "http://ember-shepherd.shipshape.io/"
   },
   "greenkeeper": {
     "ignore": [

tests/acceptance/ember-shepherd-test.js

@@ -134,7 +134,7 @@ module('Acceptance | Tour functionality tests', function(hooks) {
     await click('.toggleHelpModal');
 
     assert.ok(document.body.classList.contains('shepherd-active'), 'Body gets class of shepherd-active, when shepherd becomes active');
-    assert.equal(document.querySelectorAll('.shepherd-enabled').length, 2, 'attachTo element and tour have shepherd-enabled class');
+    assert.equal(document.querySelectorAll('.shepherd-enabled').length, 1, 'attachTo element has the shepherd-enabled class');
     assert.ok(document.querySelector('#shepherdOverlay'), '#shepherdOverlay exists, since modal');
   });
 
@@ -146,7 +146,7 @@ module('Acceptance | Tour functionality tests', function(hooks) {
     await click('.toggleHelpNonmodal');
 
     assert.ok(document.body.classList.contains('shepherd-active'), 'Body gets class of shepherd-active, when shepherd becomes active');
-    assert.equal(document.querySelectorAll('.shepherd-enabled').length, 2, 'attachTo element and tour get shepherd-enabled class');
+    assert.equal(document.querySelectorAll('.shepherd-enabled').length, 1, 'attachTo element has the shepherd-enabled class');
     assert.notOk(document.querySelector('#shepherdOverlay'), '#shepherdOverlay should not exist, since non-modal');
   });
 
@@ -158,15 +158,15 @@ module('Acceptance | Tour functionality tests', function(hooks) {
     await click('.toggleHelpModal');
     await click(document.querySelector('.shepherd-content .next-button'));
 
-    assert.ok(document.querySelector('.shepherd-enabled .back-button'), 'Ensure that the back button appears');
+    assert.ok(document.querySelector('.shepherd-open .back-button'), 'Ensure that the back button appears');
 
     await click(document.querySelector('.shepherd-content .back-button'));
 
-    assert.notOk(document.querySelector('.shepherd-enabled .back-button'), 'Ensure that the back button disappears');
+    assert.notOk(document.querySelector('.shepherd-open .back-button'), 'Ensure that the back button disappears');
 
     await click(document.querySelector('.shepherd-content .cancel-button'));
 
-    assert.notOk(document.querySelector('.shepherd-enabled [class^=shepherd-button]'), 'Ensure that all buttons are gone, after exit');
+    assert.notOk(document.querySelector('.shepherd-open [class^=shepherd-button]'), 'Ensure that all buttons are gone, after exit');
   });
 
   test('Highlight applied', async function(assert) {
@@ -539,7 +539,7 @@ module('Acceptance | Tour functionality tests', function(hooks) {
 
     tour.show('usage');
 
-    assert.equal(document.querySelector('.shepherd-enabled.shepherd-open .shepherd-text').textContent,
+    assert.equal(document.querySelector('.shepherd-open .shepherd-text').textContent,
       'To use the tour service, simply inject it into your application and use it like this example.',
       'Usage step shown');
   });

tests/dummy/app/styles/app.scss

@@ -80,28 +80,6 @@ a {
 
 .shepherd-element {
   &.shepherd-theme-arrows {
-    &.shepherd-element-attached-bottom {
-      &.shepherd-element-attached-center {
-        .shepherd-content:before {
-          border-top-color: $background1;
-          bottom: 100%;
-          left: 50%;
-          margin-left: -16px;
-        }
-      }
-    }
-
-    &.shepherd-element-attached-top {
-      &.shepherd-element-attached-center {
-        .shepherd-content:before {
-          border-bottom-color: $background1;
-          bottom: 100%;
-          left: 50%;
-          margin-left: -16px;
-        }
-      }
-    }
-
     &.shepherd-has-title {
       header {
         background-color: $whiteish;
@@ -118,6 +96,26 @@ a {
       }
     }
 
+    &[x-placement^="bottom"] {
+      .popper__arrow {
+        border-bottom-color: $background1;
+      }
+
+      &.shepherd-has-title .popper__arrow {
+        border-bottom-color: $whiteish;
+      }
+    }
+
+    &[x-placement^="top"] {
+      .popper__arrow {
+        border-top-color: $background1;
+      }
+
+      &.shepherd-has-title .popper__arrow {
+        border-top-color: $whiteish;
+      }
+    }
+
     .shepherd-content {
       background-color: $background1;
 
@@ -146,6 +144,10 @@ a {
   font-size: 0.75em;
   line-height: 0.75em;
   padding-top: 1em;
+
+  &.shepherd-button-secondary {
+    background-color: $whiteish;
+  }
 }
 
 h1,

yarn.lock

@@ -3359,14 +3359,6 @@ ember-template-lint@^0.8.16:
     resolve "^1.1.3"
     strip-bom "^3.0.0"
 
-ember-tether@1.0.0-beta.3:
-  version "1.0.0-beta.3"
-  resolved "https://registry.yarnpkg.com/ember-tether/-/ember-tether-1.0.0-beta.3.tgz#444d846b62cba642e20b09ebb55305325a1d50c3"
-  dependencies:
-    ember-cli-babel "^6.6.0"
-    ember-cli-node-assets "^0.2.2"
-    tether "^1.4.0"
-
 ember-try-config@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/ember-try-config/-/ember-try-config-3.0.0.tgz#012d8c90cae9eb624e2b62040bf7e76a1aa58edc"
@@ -6917,6 +6909,10 @@ pluralize@^7.0.0:
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/pluralize/-/pluralize-7.0.0.tgz#298b89df8b93b0221dbf421ad2b1b1ea23fc6777"
 
+popper.js@^1.14.3:
+  version "1.14.3"
+  resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.14.3.tgz#1438f98d046acf7b4d78cd502bf418ac64d4f095"
+
 portfinder@^1.0.7:
   version "1.0.13"
   resolved "https://registry.yarnpkg.com/portfinder/-/portfinder-1.0.13.tgz#bb32ecd87c27104ae6ee44b5a3ccbf0ebb1aede9"
@@ -7991,6 +7987,12 @@ shellwords@^0.1.0:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/shellwords/-/shellwords-0.1.1.tgz#d6b9181c1a48d397324c84871efbcfc73fc0654b"
 
+shepherd.js@^2.0.0-beta.2:
+  version "2.0.0-beta.2"
+  resolved "https://registry.yarnpkg.com/shepherd.js/-/shepherd.js-2.0.0-beta.2.tgz#91ad84a796f337585a8efca157cfaccb571b878a"
+  dependencies:
+    popper.js "^1.14.3"
+
 signal-exit@^3.0.0, signal-exit@^3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.2.tgz#b5fdc08f1287ea1178628e415e25132b73646c6d"
@@ -8780,16 +8782,6 @@ testem@^2.2.0:
     tap-parser "^5.1.0"
     xmldom "^0.1.19"
 
-tether-shepherd@1.8.1:
-  version "1.8.1"
-  resolved "https://registry.yarnpkg.com/tether-shepherd/-/tether-shepherd-1.8.1.tgz#4fd9b2fdd9059f04b6c4249456d5ae145a3e9223"
-  dependencies:
-    tether "^1.0.1"
-
-tether@^1.0.1, tether@^1.4.0:
-  version "1.4.3"
-  resolved "https://registry.yarnpkg.com/tether/-/tether-1.4.3.tgz#fd547024c47b6e5c9b87e1880f997991a9a6ad54"
-
 text-encoding@^0.6.4:
   version "0.6.4"
   resolved "https://registry.yarnpkg.com/text-encoding/-/text-encoding-0.6.4.tgz#e399a982257a276dae428bb92845cb71bdc26d19"