feat: add ability to skip steps

DiscipleTools · Dec 18, 2024 · 42f565a · 42f565a
1 parent fad3dc6
commit 42f565a
Show file tree

Hide file tree

Showing 8 changed files with 49 additions and 3 deletions.
diff --git a/dt-core/admin/components/setup-wizard-celebration.js b/dt-core/admin/components/setup-wizard-celebration.js
@@ -8,6 +8,11 @@ export class SetupWizardCelebration extends OpenLitElement {
     };
   }
 
+  constructor() {
+    super();
+    this.translations = window.setupWizardShare.translations;
+  }
+
   back() {
     this.dispatchEvent(new CustomEvent('back'));
   }
@@ -38,6 +43,8 @@ export class SetupWizardCelebration extends OpenLitElement {
           </a>
         </div>
         <setup-wizard-controls
+          hideSkip
+          nextLabel=${this.translations.finish}
           @next=${this.next}
           @back=${this.back}
         ></setup-wizard-controls>

diff --git a/dt-core/admin/components/setup-wizard-controls.js b/dt-core/admin/components/setup-wizard-controls.js
@@ -5,8 +5,10 @@ export class SetupWizardControls extends OpenLitElement {
   static get properties() {
     return {
       hideBack: { type: Boolean },
+      hideSkip: { type: Boolean },
       backLabel: { type: String },
       nextLabel: { type: String },
+      skipLabel: { type: String },
     };
   }
   back() {
@@ -15,16 +17,26 @@ export class SetupWizardControls extends OpenLitElement {
   next() {
     this.dispatchEvent(new CustomEvent('next'));
   }
+  skip() {
+    this.dispatchEvent(new CustomEvent('skip'));
+  }
   render() {
     return html`
       <div class="cluster" position="end">
+        ${this.hideSkip
+          ? ''
+          : html`
+              <button @click=${this.skip} class="btn-outline">
+                ${this.skipLabel ?? 'Skip'}
+              </button>
+            `}
         ${this.hideBack
           ? ''
           : html`
-              <button @click=${this.back}>${this.backLabel ?? 'back'}</button>
+              <button @click=${this.back}>${this.backLabel ?? 'Back'}</button>
             `}
         <button @click=${this.next} class="btn-primary">
-          ${this.nextLabel ?? 'next'}
+          ${this.nextLabel ?? 'Next'}
         </button>
       </div>
     `;

diff --git a/dt-core/admin/components/setup-wizard-intro.js b/dt-core/admin/components/setup-wizard-intro.js
@@ -41,6 +41,7 @@ export class SetupWizardIntro extends OpenLitElement {
         </div>
         <setup-wizard-controls
           hideBack
+          hideSkip
           @next=${this.next}
           @back=${this.back}
         ></setup-wizard-controls>

diff --git a/dt-core/admin/components/setup-wizard-modules.js b/dt-core/admin/components/setup-wizard-modules.js
@@ -71,6 +71,9 @@ export class SetupWizardModules extends OpenLitElement {
         break;
     }
   }
+  skip() {
+    this.dispatchEvent(new CustomEvent('next'));
+  }
   nextLabel() {
     return this.translations.next;
   }
@@ -164,8 +167,10 @@ export class SetupWizardModules extends OpenLitElement {
         <setup-wizard-controls
           nextLabel=${this.nextLabel()}
           backLabel=${this.translations.back}
+          skipLabel=${this.translations.skip}
           @next=${this.next}
           @back=${this.back}
+          @skip=${this.skip}
         ></setup-wizard-controls>
       </div>
     `;

diff --git a/dt-core/admin/components/setup-wizard-plugins.js b/dt-core/admin/components/setup-wizard-plugins.js
@@ -28,6 +28,9 @@ export class SetupWizardPlugins extends OpenLitElement {
   back() {
     this.dispatchEvent(new CustomEvent('back'));
   }
+  skip() {
+    this.dispatchEvent(new CustomEvent('next'));
+  }
   async next() {
     const plugins_to_install = this.plugins.filter((plugin) => plugin.selected);
 
@@ -123,6 +126,7 @@ export class SetupWizardPlugins extends OpenLitElement {
           nextLabel="install and activate selected plugins"
           @next=${this.next}
           @back=${this.back}
+          @skip=${this.skip}
         ></setup-wizard-controls>
       </div>
     `;

diff --git a/dt-core/admin/components/setup-wizard-use-cases.js b/dt-core/admin/components/setup-wizard-use-cases.js
@@ -77,6 +77,9 @@ export class SetupWizardUseCases extends OpenLitElement {
         break;
     }
   }
+  skip() {
+    this.dispatchEvent(new CustomEvent('next'));
+  }
   nextLabel() {
     switch (this.stage) {
       case 'work':
@@ -167,8 +170,10 @@ export class SetupWizardUseCases extends OpenLitElement {
           ?hideBack=${this.firstStep && this.stage === 'prompt'}
           nextLabel=${this.nextLabel()}
           backLabel=${this.translations.back}
+          skipLabel=${this.translations.skip}
           @next=${this.next}
           @back=${this.back}
+          @skip=${this.skip}
         ></setup-wizard-controls>
       </div>
     `;

diff --git a/dt-core/admin/components/setup-wizard.js b/dt-core/admin/components/setup-wizard.js
@@ -60,7 +60,7 @@ export class SetupWizard extends LitElement {
         border-radius: 8px;
         cursor: pointer;
         background-color: var(--default-color);
-        transition: background-color 120ms linear;
+        transition: all 120ms linear;
       }
       button:hover,
       button:active,
@@ -165,6 +165,16 @@ export class SetupWizard extends LitElement {
       .btn-primary:active {
         background-color: var(--primary-hover-color);
       }
+      .btn-outline {
+        border: 1px solid transparent;
+        background-color: transparent;
+        color: var(--primary-color);
+      }
+      .btn-outline:hover,
+      .btn-outline:focus {
+        border-color: var(--primary-color);
+        background-color: transparent;
+      }
       .btn-card {
         background-color: var(--primary-color);
         color: var(--default-color);

diff --git a/dt-core/admin/menu/menu-setup-wizard.php b/dt-core/admin/menu/menu-setup-wizard.php
@@ -59,6 +59,8 @@ public function enqueue_scripts(){
                 'submit' => esc_html__( 'Submit', 'disciple_tools' ),
                 'confirm' => esc_html__( 'Confirm', 'disciple_tools' ),
                 'back' => esc_html__( 'Back', 'disciple_tools' ),
+                'skip' => esc_html__( 'Skip', 'disciple_tools' ),
+                'finish' => esc_html__( 'Finish', 'disciple_tools' ),
             ],
             'steps' => $this->setup_wizard_steps(),
             'data' => $this->setup_wizard_data(),