Add first class support for secondary button

demo/js/welcome.js

@@ -10,7 +10,6 @@
 
   function setupShepherd() {
     var prefix = 'demo-';
-    var buttonSecondaryClass = prefix + 'shepherd-button-secondary';
     var shepherd = new Shepherd.Tour({
       defaultStepOptions: {
         classes: 'class-1 class-2',
@@ -37,14 +36,16 @@
         on: 'bottom'
       },
       classes: 'shepherd shepherd-welcome',
-      buttons: [{
-        action: shepherd.cancel,
-        classes: buttonSecondaryClass,
-        text: 'Exit'
-      }, {
-        action: shepherd.next,
-        text: 'Next'
-      }]
+      buttons: [
+        {
+          action: shepherd.cancel,
+          secondary: true,
+          text: 'Exit'
+        },
+        {
+          action: shepherd.next,
+          text: 'Next'
+        }]
     });
     shepherd.addStep('including', {
       title: 'Including',
@@ -53,14 +54,16 @@
         element: '.hero-including',
         on: 'bottom'
       },
-      buttons: [{
-        action: shepherd.back,
-        classes: buttonSecondaryClass,
-        text: 'Back'
-      }, {
-        action: shepherd.next,
-        text: 'Next'
-      }]
+      buttons: [
+        {
+          action: shepherd.back,
+          secondary: true,
+          text: 'Back'
+        }, {
+          action: shepherd.next,
+          text: 'Next'
+        }
+      ]
     });
     shepherd.addStep('creating', {
       title: 'Creating a Shepherd Tour',
@@ -69,14 +72,17 @@
         element: '.hero-example',
         on: 'right'
       },
-      buttons: [{
-        action: shepherd.back,
-        classes: buttonSecondaryClass,
-        text: 'Back'
-      }, {
-        action: shepherd.next,
-        text: 'Next'
-      }]
+      buttons: [
+        {
+          action: shepherd.back,
+          secondary: true,
+          text: 'Back'
+        },
+        {
+          action: shepherd.next,
+          text: 'Next'
+        }
+      ]
     });
     shepherd.addStep('attaching', {
       title: 'Attaching to Elements',
@@ -87,7 +93,7 @@
       },
       buttons: [{
         action: shepherd.back,
-        classes: buttonSecondaryClass,
+        secondary: true,
         text: 'Back'
       }, {
         action: shepherd.next,
@@ -99,7 +105,7 @@
       text: 'But attachment is totally optional!\n       Without a target, a tour step will create an element that\'s centered within the view.       Check out the <a href="https://shepherdjs.dev/docs/">documentation</a> to learn more.',
       buttons: [{
         action: shepherd.back,
-        classes: buttonSecondaryClass,
+        secondary: true,
         text: 'Back'
       }, {
         action: shepherd.next,
@@ -115,7 +121,7 @@
       },
       buttons: [{
         action: shepherd.back,
-        classes: buttonSecondaryClass,
+        secondary: true,
         text: 'Back'
       }, {
         action: shepherd.next,

docs-src/tutorials/02-usage.md

@@ -177,6 +177,7 @@ the step will execute. For example:
 - `buttons`: An array of buttons to add to the step. These will be rendered in a footer below the main body text. Each button in the array is an object of the format:
   - `text`: The HTML text of the button
   - `classes`: Extra classes to apply to the `<a>`
+  - `secondary`: A boolean, that when true, adds a `shepherd-button-secondary` class to the button
   - `action`: A function executed when the button is clicked on
   - `events`: A hash of events to bind onto the button, for example `{'mouseover': function(){}}`.  Adding a click event to `events` when you
   already have an `action` specified is not supported.

src/js/step.js

@@ -76,6 +76,7 @@ export class Step extends Evented {
    *   }
    * }
    * ```
+   * @param {boolean} options.buttons.button.secondary If true, a shepherd-button-secondary class is applied to the button
    * @param {string} options.buttons.button.text The HTML text of the button
    * @param {string} options.classes A string of extra classes to add to the step's content element.
    * @param {string} options.highlightClass An extra class to apply to the `attachTo` element when it is
@@ -230,6 +231,11 @@ export class Step extends Evented {
         const button = createFromHTML(
           `<button class="${this.styles.button.trim()} ${cfg.classes || ''}" tabindex="0">${cfg.text}</button>`
         );
+
+        if (cfg.secondary) {
+          button.classList.add(`${this.classPrefix}shepherd-button-secondary`);
+        }
+
         footer.appendChild(button);
         bindButtonEvents(cfg, button, this);
       });