@farm-investimentos/front-mfe-components 5.2.2 → 5.2.3

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@farm-investimentos/front-mfe-components",
-	"version": "5.2.2",
+	"version": "5.2.3",
 	"author": "farm investimentos",
 	"private": false,
 	"main": "./dist/front-mfe-components.common.js",

package/src/components/Stepper/StepperHeader/StepperHeader.scss

@@ -42,6 +42,12 @@ $step-height: 64px;
 			@include stepperHeaderStepColor(var(--v-error-base));
 		}
 
+		&.stepper__header-step--next {
+			i.mdi {
+				color: var(--v-gray-lighten1);
+			}
+		}
+
 		span {
 			margin-top: 8px;
 			text-align: center;
@@ -110,19 +116,15 @@ $step-height: 64px;
 			}
 
 			&.stepper__divider--previous-to-current {
-				background: linear-gradient(
-					to bottom,
-					var(--v-secondary-base),
-					var(--v-accent-base)
-				);
+				background: linear-gradient(to bottom,
+						var(--v-secondary-base),
+						var(--v-accent-base));
 			}
 
 			&.stepper__divider--previous-to-error {
-				background: linear-gradient(
-					to bottom,
-					var(--v-secondary-base),
-					var(--v-error-base)
-				);
+				background: linear-gradient(to bottom,
+						var(--v-secondary-base),
+						var(--v-error-base));
 			}
 		}
 	}
@@ -133,14 +135,15 @@ i.mdi {
 	border-radius: 50%;
 	width: 32px;
 	height: 32px;
-	display: block;
 
 	display: flex;
 	align-items: center;
 	justify-content: center;
+	color: white;
+	font-style: normal;
 
 	&:before {
 		font-size: 16px;
 		color: var(--v-gray-lighten1);
 	}
-}
+}

package/src/components/Stepper/StepperHeader/StepperHeader.vue

@@ -8,6 +8,7 @@
 						'stepper__header-step--current': isStepCurrent(index),
 						'stepper__header-step--previous': isStepPrevious(index),
 						'stepper__header-step--error': isStepError(index),
+						'stepper__header-step--next': isStepNext(index),
 					}"
 					:key="step.label"
 				>
@@ -16,8 +17,9 @@
 							mdi: true,
 							['mdi-' + step.icon]: true,
 						}"
-						v-if="step.icon"
-					/>
+					>
+						{{ step.icon ? '' : index + 1 }}
+					</i>
 					<span>
 						{{ step.label }}
 					</span>
@@ -89,6 +91,9 @@ export default Vue.extend({
 				this.isStepError(index + 1)
 			);
 		},
+		isStepNext(index: number): boolean {
+			return index + 1 > this.currentStep;
+		},
 	},
 });
 </script>

package/src/components/Stepper/StepperHeader/__tests__/StepperHeader.spec.js

@@ -43,5 +43,12 @@ describe('StepperHeader component', () => {
 			expect(component.hasDivider(4)).toBeFalsy();
 			expect(component.hasDivider(1)).toBeTruthy();
 		});
+
+		it('Should check if step is next', () => {
+			expect(component.isStepNext(4)).toBeTruthy();
+			expect(component.isStepNext(1)).toBeFalsy();
+		});
+
+		
 	});
 });

package/src/examples/Stepper/StepperHeader.stories.js

@@ -62,7 +62,24 @@ export const VerticalError = () => ({
 			currentStep: 3,
 		};
 	},
-	template: '<StepperHeader :steps="steps" :currentStep="currentStep" vertical :errorCurrentStepStatus="true" />',
+	template:
+		'<StepperHeader :steps="steps" :currentStep="currentStep" vertical :errorCurrentStepStatus="true" />',
+});
+
+export const Numbers = () => ({
+	components: { StepperHeader },
+	data() {
+		return {
+			steps: [
+				{ label: 'Solicitação de limite' },
+				{ label: 'Lista impeditiva' },
+				{ label: 'Lista pré-elegíveis' },
+				{ label: 'Fila de compliance' },
+			],
+			currentStep: 2,
+		};
+	},
+	template: '<StepperHeader :steps="steps" :currentStep="currentStep" />',
 });
 
 Primary.story = {
@@ -77,3 +94,6 @@ Error.story = {
 VerticalError.story = {
 	name: 'Vertical Error',
 };
+Numbers.story = {
+	name: 'Numbers',
+};