refactor: turn clickable property as individual property on step component

projects/ion/src/lib/core/types/steps.ts

@@ -9,6 +9,7 @@ export interface StepType {
   lines?: StepLines;
   clickableWhenHasError?: boolean;
   disabled?: boolean;
+  clickable?: boolean;
 }
 
 export interface StepLines {
@@ -20,7 +21,6 @@ export type StepConfig = {
   current: number;
   disabled?: boolean;
   steps: StepType[];
-  clickable?: boolean;
   direction?: DirectionType;
   preventStepChange?: boolean;
   indexChange?: EventEmitter<number>;

projects/ion/src/lib/step/step.component.html

@@ -4,17 +4,17 @@
   [ngClass]="'step-direction-' + direction"
 >
   <div
+    *ngFor="let step of steps; let index = index"
     [class]="'step ' + step.status"
     [class.clickable]="
-      clickable &&
+      step.clickable &&
       (!disabled || !step.disabled) &&
       step.status !== 'selected' &&
       (step.status !== 'error' ||
         (step.status === 'error' && step.clickableWhenHasError))
     "
     [class.disabled]="disabled || step.disabled"
     [attr.data-testid]="'step-' + step.index + '-' + step.status"
-    *ngFor="let step of steps; let index = index"
     (click)="goesTo(step.index)"
   >
     <ng-container

projects/ion/src/lib/step/step.component.spec.ts

@@ -26,6 +26,21 @@ const defaultValue: StepType[] = [
   },
 ];
 
+const clickableStepsMock: StepType[] = [
+  {
+    label: 'Step 1',
+    clickable: true,
+  },
+  {
+    label: 'Step 2',
+    clickable: true,
+  },
+  {
+    label: 'Step 3',
+    clickable: true,
+  },
+];
+
 const defaultProps: StepConfig = {
   current: 1,
   steps: defaultValue,
@@ -143,10 +158,9 @@ describe('Static IonStepsComponent', () => {
   );
   it('should go to step 3 when it be clicked', async () => {
     await sut({
-      clickable: true,
       disabled: false,
       current: 1,
-      steps: defaultValue,
+      steps: clickableStepsMock,
     });
     fireEvent.click(screen.getByTestId('step-3-default'));
     expect(screen.findByTestId('step-3-selected')).toBeTruthy();
@@ -167,11 +181,10 @@ describe('Static IonStepsComponent', () => {
   });
 
   it('should emit event when step 3 be clicked', async () => {
-    const steps: StepType[] = JSON.parse(JSON.stringify(defaultValue));
+    const steps: StepType[] = JSON.parse(JSON.stringify(clickableStepsMock));
     const indexChange = jest.fn();
     await sut({
       disabled: false,
-      clickable: true,
       current: 1,
       steps,
       indexChange: {
@@ -183,13 +196,12 @@ describe('Static IonStepsComponent', () => {
   });
 
   it('should not emit event when step 3 is disabled', async () => {
-    const steps: StepType[] = JSON.parse(JSON.stringify(defaultValue));
+    const steps: StepType[] = JSON.parse(JSON.stringify(clickableStepsMock));
     steps[2].disabled = true;
     const indexChange = jest.fn();
     await sut({
       disabled: false,
       current: 1,
-      clickable: true,
       steps,
       indexChange: {
         emit: indexChange,

projects/ion/src/lib/step/step.component.ts

@@ -7,7 +7,7 @@ import {
   Output,
   SimpleChanges,
 } from '@angular/core';
-import { StepStatus, StepType, StepConfig } from '../core/types';
+import { StepConfig, StepStatus, StepType } from '../core/types';
 
 @Component({
   selector: 'ion-steps',
@@ -18,7 +18,6 @@ export class IonStepsComponent implements OnInit, OnChanges {
   @Input() current: StepConfig['current'] = 1;
   @Input() steps: StepConfig['steps'];
   @Input() disabled: StepConfig['disabled'] = false;
-  @Input() clickable: StepConfig['clickable'];
   @Input() preventStepChange: StepConfig['preventStepChange'] = false;
   @Input() direction: StepConfig['direction'] = 'horizontal';
   @Output() indexChange: StepConfig['indexChange'] = new EventEmitter<number>();
@@ -72,7 +71,11 @@ export class IonStepsComponent implements OnInit, OnChanges {
   }
 
   goesTo(index: number): void {
-    if (this.clickable && !this.disabled && !this.steps[index - 1].disabled) {
+    if (
+      this.steps[index - 1].clickable &&
+      !this.disabled &&
+      !this.steps[index - 1].disabled
+    ) {
       this.indexChange.emit(index);
       if (!this.preventStepChange) {
         this.changeStep(index);

stories/Step.stories.ts

@@ -21,18 +21,12 @@ export default {
     },
     steps: {
       name: 'steps',
-      type: { name: 'array' },
     },
     disabled: {
       name: 'disabled',
       type: { name: 'boolean' },
       defaultValue: false,
     },
-    clickable: {
-      name: 'clickable',
-      type: { name: 'boolean' },
-      defaultValue: false,
-    },
     preventStepChange: {
       name: 'preventStepChange',
       type: { name: 'boolean' },
@@ -154,15 +148,15 @@ WithLongDescription.args = {
 
 export const PreventStepChange = Template.bind({});
 PreventStepChange.args = {
-  clickable: true,
   preventStepChange: true,
   steps: [
     {
       label: 'First',
       description: '(optional)',
+      clickable: true,
     },
-    { label: 'Second' },
-    { label: 'Third' },
+    { label: 'Second', clickable: true },
+    { label: 'Third', clickable: true },
   ],
 };
 
@@ -181,16 +175,16 @@ WithErrorInOtherStep.args = {
 
 export const WithStepClickableWhenHasError = Template.bind({});
 WithStepClickableWhenHasError.args = {
-  clickable: true,
   steps: [
     {
       label: 'First',
       description: '(optional)',
       status: 'error',
       clickableWhenHasError: true,
+      clickable: true,
     },
-    { label: 'Second', status: 'checked' },
-    { label: 'Third', status: 'selected' },
+    { label: 'Second', status: 'checked', clickable: true },
+    { label: 'Third', status: 'selected', clickable: true },
   ],
 };