fix(core/workflow-steps): new added step state

[goncalosard]

Pull request checklist

Please check if your PR fulfills the following requirements:

• Tests for the changes have been added (for bug fixes / features)
• Docs have been reviewed and added / updated if needed (for bug fixes / features)
• Build (yarn build) was run locally and any changes were pushed
• Unit tests (yarn test) were run locally and passed
• Visual Regression Tests (yarn visual-regression) were run locally and passed
• Linting (npm lint) was run locally and passed

Pull request type

Please check the type of change your PR introduces:

• Bug fix
• Feature
• Refactoring (no functional changes, no API changes)
• Build related changes
• Documentation content changes
• Other (please describe):

What is the current behavior?

GitHub Issue Number: #423

What is the new behavior?

• Added MutationObserver to check if a new element was added to the slot, it will then update the state of the needed steps.

Used code for testing in Angular

• app.component.html

<ix-workflow-steps>
  <ix-workflow-step *ngFor="let step of steps" status="{{ step.name }}"
    >Step {{ step.id }}</ix-workflow-step
  >
</ix-workflow-steps>

<ix-button (click)="addstep()">Button</ix-button>

• app.component.ts

export class AppComponent {
  title = 'angular-test-app';

   steps = [
    {id: 1, name:'done'},
    {id: 2, name:'success'},
    {id: 3, name:'open'},
    {id: 4, name:'warning'},
    {id: 5, name:'error'},
  ];

  public addstep() {
    this.steps.push({ id: 6, name: 'success'})
  
  }
}

Does this introduce a breaking change?

• Yes
• No

Testing

Other information

[danielleroux]

Just tested it with the following code:

export class MyComponent {
  @State() steps = ['Test'];
  render() {
    return (
      <Host>
        <ix-workflow-steps>
          {this.steps.map((t) => (
            <ix-workflow-step>{t}</ix-workflow-step>
          ))}
        </ix-workflow-steps>
        <ix-button
          onClick={() => {
            this.steps = [...this.steps, 'Test 2', 'test 3'];
          }}
        >
          Add
        </ix-button>
      </Host>
    );
  }
}

The result:

[goncalosard]

@danielleroux Fixed. Tested with both examples.

[danielleroux]

@goncalosard I added some unit test cases