From e97b60ec201d842daa7b6497a8cef1f92cffe184 Mon Sep 17 00:00:00 2001
From: Robert Wagner <rwwagner90@gmail.com>
Date: Tue, 19 Mar 2019 16:31:33 -0700
Subject: [PATCH 1/3] Add flipping tippy by default, scrollTo for demo

---
 docs/welcome/css/welcome.css | 5 +++--
 docs/welcome/js/welcome.js   | 1 +
 src/js/utils.js              | 6 ++++--
 3 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/docs/welcome/css/welcome.css b/docs/welcome/css/welcome.css
index 4943c0aaa..02813a003 100644
--- a/docs/welcome/css/welcome.css
+++ b/docs/welcome/css/welcome.css
@@ -185,8 +185,9 @@ pre {
   top: calc(50% - 16px);
 }
 
-.tippy-popper .shepherd-welcome:not(.shepherd-has-title) .shepherd-content header,
-.tippy-popper .shepherd-welcome:not(.shepherd-has-title) .shepherd-content .shepherd-header {
+.tippy-popper .shepherd-element:not(.shepherd-has-title) .shepherd-content header,
+.tippy-popper .shepherd-element:not(.shepherd-has-title) .shepherd-content .shepherd-header {
+  background: transparent;
   padding-bottom: 0;
 }
 
diff --git a/docs/welcome/js/welcome.js b/docs/welcome/js/welcome.js
index f2a8f1be9..f98a52bf1 100644
--- a/docs/welcome/js/welcome.js
+++ b/docs/welcome/js/welcome.js
@@ -11,6 +11,7 @@
   function setupShepherd () {
     const shepherd = new Shepherd.Tour({
       defaultStepOptions: {
+        scrollTo: true,
         showCancelLink: true
       },
       useModalOverlay: true
diff --git a/src/js/utils.js b/src/js/utils.js
index 9eb0cf4f3..2ecd8a15d 100644
--- a/src/js/utils.js
+++ b/src/js/utils.js
@@ -154,10 +154,12 @@ function _makeTippyInstance(attachToOptions) {
 function _makeAttachedTippyOptions(attachToOptions) {
   const resultingTippyOptions = {
     content: this.el,
-    placement: attachToOptions.on || 'right',
-    ...this.options.tippyOptions
+    flipOnUpdate: true,
+    placement: attachToOptions.on || 'right'
   };
 
+  Object.assign(resultingTippyOptions, this.options.tippyOptions);
+
   if (this.options.tippyOptions && this.options.tippyOptions.popperOptions) {
     Object.assign(defaultPopperOptions, this.options.tippyOptions.popperOptions);
   }

From c9dc8dc686b117f1a6e2b41df2f045d67abe2cba Mon Sep 17 00:00:00 2001
From: Robert Wagner <rwwagner90@gmail.com>
Date: Tue, 19 Mar 2019 16:45:23 -0700
Subject: [PATCH 2/3] Style arrows with title to be same color as header

---
 docs/welcome/css/welcome.css | 13 ++++++-------
 src/js/utils.js              |  5 +++++
 2 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/docs/welcome/css/welcome.css b/docs/welcome/css/welcome.css
index 02813a003..7ed321f50 100644
--- a/docs/welcome/css/welcome.css
+++ b/docs/welcome/css/welcome.css
@@ -47,7 +47,7 @@ body {
 
 .hero-outer {
   -webkit-box-sizing: border-box;
-          box-sizing: border-box;
+  box-sizing: border-box;
   display: table;
   height: 100%;
   padding: 20px 0;
@@ -164,6 +164,10 @@ pre {
   left: calc(50% - 16px);
 }
 
+.tippy-popper[x-placement^='bottom'] .shepherd-has-title-theme .tippy-arrow {
+  border-bottom-color: #e6e6e6;
+}
+
 .tippy-popper[x-placement^='left'] {
   margin-right: 16px;
 }
@@ -191,11 +195,6 @@ pre {
   padding-bottom: 0;
 }
 
-.tippy-popper .shepherd-welcome .shepherd-content header,
-.tippy-popper .shepherd-welcome .shepherd-content .shepherd-header {
-  background: #ffffff;
-}
-
-.tippy-popper .shepherd-welcome .shepherd-content .shepherd-text {
+.tippy-popper .shepherd-element .shepherd-content .shepherd-text {
   color: #336457;
 }
diff --git a/src/js/utils.js b/src/js/utils.js
index 2ecd8a15d..6a9fca48f 100644
--- a/src/js/utils.js
+++ b/src/js/utils.js
@@ -160,6 +160,11 @@ function _makeAttachedTippyOptions(attachToOptions) {
 
   Object.assign(resultingTippyOptions, this.options.tippyOptions);
 
+  if (this.options.title) {
+    const existingTheme = resultingTippyOptions.theme || '';
+    resultingTippyOptions.theme = `${existingTheme} shepherd-has-title`;
+  }
+
   if (this.options.tippyOptions && this.options.tippyOptions.popperOptions) {
     Object.assign(defaultPopperOptions, this.options.tippyOptions.popperOptions);
   }

From e46766a88c61c3db63df828896740e3009016a59 Mon Sep 17 00:00:00 2001
From: Robert Wagner <rwwagner90@gmail.com>
Date: Tue, 19 Mar 2019 16:54:41 -0700
Subject: [PATCH 3/3] Clean up empty space adding extra theme

---
 src/js/utils.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/js/utils.js b/src/js/utils.js
index 6a9fca48f..559d1211f 100644
--- a/src/js/utils.js
+++ b/src/js/utils.js
@@ -161,8 +161,8 @@ function _makeAttachedTippyOptions(attachToOptions) {
   Object.assign(resultingTippyOptions, this.options.tippyOptions);
 
   if (this.options.title) {
-    const existingTheme = resultingTippyOptions.theme || '';
-    resultingTippyOptions.theme = `${existingTheme} shepherd-has-title`;
+    const existingTheme = resultingTippyOptions.theme;
+    resultingTippyOptions.theme = existingTheme ? `${existingTheme} shepherd-has-title` : 'shepherd-has-title';
   }
 
   if (this.options.tippyOptions && this.options.tippyOptions.popperOptions) {