Introduce stepper dialog (#934)

A stepper dialog (also known as wizard), contains at least two steps that are displayed consecutively to the user and ask them for input. They are usually applied when the user input is more complex, is conditionally chained, or can be separated contextually into logical steps.

This contribution introduces a stepper dialog component, that is easy to build and extend, and simplifies the stepper dialog creation.

Author: sven1103

user-interface/front-end-components.md

@@ -1,7 +1,7 @@
 # Frontend components 
 Some visual aid of our custom view components structure.
 
-## Dialog window
+## App dialog
 
 ```mermaid
 ---
@@ -71,3 +71,70 @@ classDiagram
     }
 
 ```
+
+## Stepper dialog
+
+```mermaid
+
+classDiagram
+    
+    StepperDialogFooter ..|> NavigationListener
+    StepperDialogFooter --> StepperDialog
+    StepperDialog --> NavigationListener
+    DialogStep ..|> Step
+    StepperDialog --> AppDialog
+    StepperDialog --> Step
+    StepDisplay ..|> NavigationListener
+    StepDisplay --> StepperDialog
+    
+    
+    class Step {
+        <<interface>>
+        + name() String
+        + content() Component
+        + userInput() UserInput
+    }
+    
+    class AppDialog {
+        
+    }
+    
+    class DialogStep {
+        
+    }
+    
+    class StepperDialog {
+        AppDialog dialog
+        Step[] steps
+        + registerCancelAction(Action action)
+        + registerConfirmAction(Action action)
+        + registerNavigationListener(NavigationListener listener)
+        + setFooter(Component component)
+        + setHeader(Component component)
+        + setStepDisplay(Component component)
+        + cancel()
+        + confirm()
+        + next()
+        + previous()
+        
+    }
+    
+    class NavigationListener {
+        <<interface>>
+        + onNavigationUpdate(NavigationInfo info)
+    }
+    
+    class StepDisplay {
+        StepperDialog dialog
+    }
+    
+    class StepperDialogFooter {
+        DialogFooter currentState
+        StepperDialog dialog
+        
+    }
+
+```
+
+
+

user-interface/frontend/themes/datamanager/components/all.css

@@ -25,11 +25,16 @@ First some general property definitions
   --font-weight-medium: 500;
   --font-weight-semi-bold: 600;
   --font-weight-bold: 700;
+  --icon-color-primary: var(--lumo-primary-color);
   --icon-color-info: rgba(22, 118, 243, 1);
   --icon-color-error: rgba(255, 66, 56, 1);
   --icon-color-success: rgba(21, 193, 93, 1);
   --icon-color-warning: rgba(254, 201, 1, 1);
-  --icon-size-m: var(--lumo-icon-size-m);
+  --icon-color-default: rgba(28, 46, 69, 0.6);
+  --icon-size-xs: 1rem;
+  --icon-size-s: 1.25rem;
+  --icon-size-m: 1.5rem;
+  --icon-size-l: 2rem;
   --spacing-01: 0.125rem;
   --spacing-02: 0.25rem;
   --spacing-03: 0.5rem;
@@ -147,6 +152,16 @@ Body text
 Padding & gaps
 ***************************/
 
+.padding-left-right-02 {
+  padding-left: var(--spacing-02);
+  padding-right: var(--spacing-02);
+}
+
+.padding-left-right-03 {
+  padding-left: var(--spacing-03);
+  padding-right: var(--spacing-03);
+}
+
 .padding-left-right-04 {
   padding-left: var(--spacing-04);
   padding-right: var(--spacing-04);
@@ -187,6 +202,14 @@ Padding & gaps
   padding-bottom: var(--spacing-07);
 }
 
+.gap-02 {
+  gap: var(--spacing-02);
+}
+
+.gap-03 {
+  gap: var(--spacing-03);
+}
+
 .gap-04 {
   gap: var(--spacing-04);
 }
@@ -275,6 +298,35 @@ Dialog flavours
   color: var(--lumo-header-text-color);
 }
 
+.dialog-step-name-text {
+  font-size: var(--lumo-font-size-m);
+  font-weight: var(--font-weight-medium);
+  line-height: var(--lumo-line-height-xs);
+}
+
+.dialog-step-icon-arrow {
+  font-size: 12px;
+}
+
+.footer {
+  justify-content: flex-end;
+}
+
+.footer-intermediate {
+  justify-content: space-between;
+  width: 100%;
+}
+
+.full-width {
+  width: 100%;
+}
+
+.border-bottom-solid {
+  border-bottom-style: solid;
+  border-bottom-color: rgba(26, 56, 96, 0.1);
+  border-bottom-width: 1px;
+}
+
 /***************************
 Buttons
  **************************/
@@ -301,10 +353,68 @@ Icons
   color: var(--icon-color-warning)
 }
 
+.icon-size-xs {
+  height: var(--icon-size-xs);
+  width: var(--icon-size-xs);
+}
+
+.icon-size-s {
+  height: var(--icon-size-s);
+  width: var(--icon-size-s);
+}
+
 .icon-size-m {
   height: var(--icon-size-m);
+  width: var(--icon-size-m);
+}
+
+.icon-size-l {
+  height: var(--icon-size-l);
+  width: var(--icon-size-l);
+}
+
+.round {
+  border-radius: 50%;
+}
+
+.icon-background-color-default {
+  background-color: var(--icon-color-default);
 }
 
+.icon-background-color-primary {
+  background-color: var(--icon-color-primary);
+}
+
+.icon-color-default {
+  color: var(--icon-color-default);
+}
+
+.icon-text-white {
+  color: white;
+}
+
+.icon-text-inner {
+  font-size: 0.875rem;
+}
+
+.icon-label-text {
+  font-size: 0.875rem;
+}
+
+.icon-label-text-color-default {
+  color: var(--icon-color-default);
+}
+
+.icon-label-text-color-primary {
+  color: var(--icon-color-primary);
+}
+
+.icon-content-center {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  line-height: 1;
+}
 
 
 /****************************
@@ -315,11 +425,20 @@ Layout
   align-items: center;
 }
 
+.flex-align-items-bottom {
+  align-items: self-end;
+}
+
 .flex-horizontal {
   display: flex;
   flex-direction: row;
 }
 
+.flex-vertical {
+  display: flex;
+  flex-direction: column;
+}
+
 
 
 /****************************

user-interface/src/main/bundles/dev.bundle

@@ -9,7 +9,9 @@
 import com.vaadin.flow.router.Route;
 import com.vaadin.flow.server.auth.AnonymousAllowed;
 import com.vaadin.flow.spring.annotation.UIScope;
+import java.util.ArrayList;
 import java.util.Arrays;
+import java.util.List;
 import java.util.Objects;
 import life.qbic.datamanager.views.general.dialog.AppDialog;
 import life.qbic.datamanager.views.general.dialog.DialogBody;
@@ -18,6 +20,10 @@
 import life.qbic.datamanager.views.general.dialog.DialogSection;
 import life.qbic.datamanager.views.general.dialog.InputValidation;
 import life.qbic.datamanager.views.general.dialog.UserInput;
+import life.qbic.datamanager.views.general.dialog.stepper.Step;
+import life.qbic.datamanager.views.general.dialog.stepper.StepperDisplay;
+import life.qbic.datamanager.views.general.dialog.stepper.StepperDialog;
+import life.qbic.datamanager.views.general.dialog.stepper.StepperDialogFooter;
 import life.qbic.datamanager.views.general.icon.IconFactory;
 import org.springframework.context.annotation.Profile;
 import org.springframework.lang.NonNull;
@@ -38,6 +44,8 @@
 public class ComponentDemo extends Div {
 
   public static final String HEADING_2 = "heading-2";
+  public static final String GAP_04 = "gap-04";
+  public static final String FLEX_VERTICAL = "flex-vertical";
   Div title = new Div("Data Manager - Component Demo");
 
   public ComponentDemo() {
@@ -50,6 +58,7 @@ public ComponentDemo() {
     add(dialogShowCase(AppDialog.medium(), "Medium Dialog Type"));
     add(dialogShowCase(AppDialog.large(), "Large Dialog Type"));
     add(dialogSectionShowCase());
+    add(stepperDialogShowCase(threeSteps(), "Three steps example"));
   }
 
   private static Div dialogSectionShowCase() {
@@ -88,7 +97,7 @@ private static Div fontsShowCase() {
     Div header = new Div("Body Font Styles");
     header.addClassName(HEADING_2);
     container.add(header);
-    container.addClassNames("flex-vertical", "gap-04");
+    container.addClassNames(FLEX_VERTICAL, GAP_04);
 
     Arrays.stream(BodyFontStyles.fontStyles).forEach(fontStyle -> {
       Div styleHeader = new Div();
@@ -109,6 +118,69 @@ private static Div fontsShowCase() {
     return container;
   }
 
+  private static Div stepperDialogShowCase(List<Step> steps, String dialogTitle) {
+    Div content = new Div();
+    Div title = new Div("Stepper Dialog");
+    title.addClassName(HEADING_2);
+    Button showDialog = new Button("Show Stepper");
+    AppDialog dialog = AppDialog.medium();
+
+    DialogHeader.with(dialog, dialogTitle);
+    StepperDialog stepperDialog = StepperDialog.create(dialog, steps);
+    StepperDialogFooter.with(stepperDialog);
+
+    StepperDisplay.with(stepperDialog, steps.stream().map(Step::name).toList());
+
+    showDialog.addClickListener(listener -> stepperDialog.open());
+
+    content.add(title);
+    content.add(showDialog);
+    content.addClassNames(FLEX_VERTICAL, GAP_04);
+
+    Div confirmBox = new Div("Click the button and press 'Cancel' or 'Save'");
+    dialog.registerConfirmAction(() -> {
+      confirmBox.setText("Stepper dialog has been confirmed");
+      dialog.close();
+    });
+
+    dialog.registerCancelAction(() -> {
+      confirmBox.setText("Stepper dialog has been cancelled");
+      dialog.close();
+    });
+
+    content.add(confirmBox);
+
+    return content;
+  }
+
+  private static List<Step> threeSteps() {
+    List<Step> steps = new ArrayList<>();
+    for (int step= 0; step < 3; step++) {
+      int stepNumber = step + 1;
+      steps.add(new Step() {
+
+        final ExampleUserInput userInput = new ExampleUserInput("example step " + stepNumber );
+
+
+        @Override
+        public String name() {
+          return "Step " + stepNumber;
+        }
+
+        @Override
+        public com.vaadin.flow.component.Component component() {
+          return userInput;
+        }
+
+        @Override
+        public UserInput userInput() {
+          return userInput;
+        }
+      });
+    }
+    return steps;
+  }
+
   private static Div dialogShowCase(AppDialog dialog, String dialogType) {
     Div content = new Div();
     Div title = new Div();
@@ -142,7 +214,7 @@ private static Div dialogShowCase(AppDialog dialog, String dialogType) {
     });
 
     content.add(showDialog, confirmBox);
-    content.addClassNames("flex-vertical", "gap-04");
+    content.addClassNames(FLEX_VERTICAL, GAP_04);
     return content;
   }