fix(core/workflow-steps): single state (#464)

Co-authored-by: Daniel Leroux <daniel.leroux@siemens.com> Co-authored-by: Lukas Maurer <lukas.maurer@siemens.com>
siemens · Apr 18, 2023 · f4cf8b0 · f4cf8b0
1 parent 8ceaac6
commit f4cf8b0
Show file tree

Hide file tree

Showing 13 changed files with 133 additions and 99 deletions.
diff --git a/packages/core/component-doc.json b/packages/core/component-doc.json
@@ -9647,13 +9647,19 @@
         },
         {
           "name": "position",
-          "type": "\"first\" | \"last\" | \"undefined\"",
+          "type": "\"first\" | \"last\" | \"single\" | \"undefined\"",
           "mutable": false,
           "attr": "position",
           "reflectToAttr": false,
           "docs": "Activate navigation click",
-          "docsTags": [],
+          "docsTags": [
+            {
+              "name": "deprecated",
+              "text": "Will be changed to '@internal' in 2.0.0"
+            }
+          ],
           "default": "'undefined'",
+          "deprecation": "Will be changed to '@internal' in 2.0.0",
           "values": [
             {
               "value": "first",
@@ -9663,6 +9669,10 @@
               "value": "last",
               "type": "string"
             },
+            {
+              "value": "single",
+              "type": "string"
+            },
             {
               "value": "undefined",
               "type": "string"
@@ -9745,7 +9755,13 @@
       "styles": [],
       "slots": [],
       "parts": [],
-      "listeners": []
+      "listeners": [
+        {
+          "event": "click",
+          "capture": false,
+          "passive": true
+        }
+      ]
     },
     {
       "dirPath": "./src/components/workflow-steps",
@@ -9787,8 +9803,14 @@
           "attr": "linear",
           "reflectToAttr": false,
           "docs": "Select linear mode",
-          "docsTags": [],
+          "docsTags": [
+            {
+              "name": "deprecated",
+              "text": "Has no effect on component. Will get removed in 2.0.0"
+            }
+          ],
           "default": "false",
+          "deprecation": "Has no effect on component. Will get removed in 2.0.0",
           "values": [
             {
               "type": "boolean"

diff --git a/packages/core/src/components.d.ts b/packages/core/src/components.d.ts
@@ -1646,8 +1646,9 @@ export namespace Components {
         "disabled": boolean;
         /**
           * Activate navigation click
+          * @deprecated Will be changed to '@internal' in 2.0.0
          */
-        "position": 'first' | 'last' | 'undefined';
+        "position": 'first' | 'last' | 'single' | 'undefined';
         /**
           * Set selected
          */
@@ -1668,6 +1669,7 @@ export namespace Components {
         "clickable": boolean;
         /**
           * Select linear mode
+          * @deprecated Has no effect on component. Will get removed in 2.0.0
          */
         "linear": boolean;
         /**
@@ -1826,6 +1828,10 @@ export interface IxUploadCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLIxUploadElement;
 }
+export interface IxWorkflowStepCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLIxWorkflowStepElement;
+}
 export interface IxWorkflowStepsCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLIxWorkflowStepsElement;
@@ -4125,10 +4131,12 @@ declare namespace LocalJSX {
           * Set disabled
          */
         "disabled"?: boolean;
+        "onSelectedChanged"?: (event: IxWorkflowStepCustomEvent<HTMLIxWorkflowStepElement>) => void;
         /**
           * Activate navigation click
+          * @deprecated Will be changed to '@internal' in 2.0.0
          */
-        "position"?: 'first' | 'last' | 'undefined';
+        "position"?: 'first' | 'last' | 'single' | 'undefined';
         /**
           * Set selected
          */
@@ -4149,6 +4157,7 @@ declare namespace LocalJSX {
         "clickable"?: boolean;
         /**
           * Select linear mode
+          * @deprecated Has no effect on component. Will get removed in 2.0.0
          */
         "linear"?: boolean;
         /**

diff --git a/packages/core/src/components/workflow-step/workflow-step.scss b/packages/core/src/components/workflow-step/workflow-step.scss
@@ -7,10 +7,6 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-/*
- * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
- */
-
 @import 'common-variables';
 
 :host {
@@ -47,15 +43,23 @@
           margin: 0 auto 0 0;
         }
 
+        &.single {
+          width: 0;
+        }
+
         &.selected {
-          background-color: var(--theme-workflow-step-icon-default--color--selected);
+          background-color: var(
+            --theme-workflow-step-icon-default--color--selected
+          );
         }
 
         &.done {
           background-color: var(--theme-workflow-step-icon-done--color);
 
           &.selected {
-            background-color: var(--theme-workflow-step-icon-done--color--selected);
+            background-color: var(
+              --theme-workflow-step-icon-done--color--selected
+            );
           }
         }
 
@@ -112,6 +116,10 @@
           &.last {
             margin: 0 0 auto 0;
           }
+
+          &.single {
+            width: 0;
+          }
         }
       }
 
@@ -143,12 +151,14 @@
       background-color: var(--theme-workflow-step--background--disabled);
 
       .line {
-        background-color: var(--theme-workflow-step-icon-default--color--disabled) !important;
+        background-color: var(
+          --theme-workflow-step-icon-default--color--disabled
+        ) !important;
       }
 
       .text {
         color: var(--theme-workflow-step--color--disabled);
       }
     }
   }
-}
+}
diff --git a/packages/core/src/components/workflow-step/workflow-step.tsx b/packages/core/src/components/workflow-step/workflow-step.tsx
@@ -7,16 +7,15 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-/*
- * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
- */
-
 import {
   Component,
   Element,
+  Event,
+  EventEmitter,
   Fragment,
   h,
   Host,
+  Listen,
   Prop,
   State,
   Watch,
@@ -57,13 +56,20 @@ export class WorkflowStep {
 
   /**
    * Activate navigation click
+   *
+   * @deprecated Will be changed to '@internal' in 2.0.0
    */
-  @Prop() position: 'first' | 'last' | 'undefined' = 'undefined';
+  @Prop() position: 'first' | 'last' | 'single' | 'undefined' = 'undefined';
 
   @State() iconName: 'circle' | 'circle-dot' | 'success' | 'warning' | 'error' =
     'circle';
   @State() iconColor: string = 'workflow-step-icon-default--color';
 
+  /**
+   * @internal
+   */
+  @Event() selectedChanged: EventEmitter<HTMLIxWorkflowStepElement>;
+
   private customIconSlot: boolean;
 
   private select() {
@@ -131,6 +137,13 @@ export class WorkflowStep {
     );
   }
 
+  @Listen('click', { passive: true })
+  clickFunction() {
+    if (!this.disabled && this.clickable) {
+      this.selectedChanged.emit(this.hostElement);
+    }
+  }
+
   render() {
     const icons = !this.customIconSlot ? (
       <Fragment>

diff --git a/packages/core/src/components/workflow-steps/test/workflow-steps.spec.ts b/packages/core/src/components/workflow-steps/test/workflow-steps.spec.ts
@@ -40,10 +40,9 @@ describe('workflow-steps', () => {
     observerCallback([{ type: 'childList' }]);
 
     await page.waitForChanges();
-    expect(step).toEqualAttributes({
-      position: 'last',
-      selected: true,
-    });
+
+    expect(step.position).toEqual('single');
+    expect(step.selected).toEqual(true);
   });
 
   it('should re-render workflow steps', async () => {
@@ -62,33 +61,23 @@ describe('workflow-steps', () => {
     observerCallback([{ type: 'childList' }]);
     await page.waitForChanges();
 
-    expect(step).toEqualAttributes({
-      position: 'first',
-      selected: true,
-    });
+    expect(step.position).toEqual('first');
+    expect(step.selected).toEqual(true);
 
-    expect(step1).toEqualAttributes({
-      position: 'last',
-      selected: false,
-    });
+    expect(step1.position).toEqual('last');
+    expect(step1.selected).toEqual(false);
 
     page.root.querySelector('ix-workflow-steps').append(step2);
     observerCallback([{ type: 'childList' }]);
     await page.waitForChanges();
 
-    expect(step).toEqualAttributes({
-      position: 'first',
-      selected: true,
-    });
+    expect(step.position).toEqual('first');
+    expect(step.selected).toEqual(true);
 
-    expect(step1).toEqualAttributes({
-      position: 'undefined',
-      selected: false,
-    });
+    expect(step1.position).toEqual('undefined');
+    expect(step1.selected).toEqual(false);
 
-    expect(step2).toEqualAttributes({
-      position: 'last',
-      selected: false,
-    });
+    expect(step2.position).toEqual('last');
+    expect(step2.selected).toEqual(false);
   });
 });
diff --git a/packages/core/src/components/workflow-steps/workflow-steps.scss b/packages/core/src/components/workflow-steps/workflow-steps.scss
@@ -7,10 +7,6 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-/*
- * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
- */
-
 @import 'common-variables';
 
 :host {