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

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@farm-investimentos/front-mfe-components",
-	"version": "5.2.0",
+	"version": "5.2.3",
 	"author": "farm investimentos",
 	"private": false,
 	"main": "./dist/front-mfe-components.common.js",
@@ -27,11 +27,11 @@
 		"vuetify-dialog": "^2.0.17"
 	},
 	"devDependencies": {
-		"@socheatsok78/storybook-addon-vuetify": "^0.1.8",
-		"@storybook/addon-actions": "^6.3.6",
-		"@storybook/addon-essentials": "^6.3.6",
-		"@storybook/addon-links": "^6.3.6",
-		"@storybook/vue": "^6.3.6",
+		"@socheatsok78/storybook-addon-vuetify": "^0.1.9",
+		"@storybook/addon-actions": "^6.5.8",
+		"@storybook/addon-essentials": "^6.5.8",
+		"@storybook/addon-links": "^6.5.8",
+		"@storybook/vue": "^6.5.8",
 		"@types/jest": "^24.9.1",
 		"@typescript-eslint/eslint-plugin": "^4.18.0",
 		"@typescript-eslint/parser": "^4.18.0",

package/src/components/Logger/Logger.scss

@@ -1,5 +1,3 @@
-$fore-color: #858585;
-
 .logger {
     display: block;
 
@@ -15,5 +13,5 @@ $fore-color: #858585;
     height: 40px;
     margin: -4px 0 -4px 16px;
     width: 1px;
-    background-color: $fore-color;
+    background-color: var(--v-gray-lighten1);
 }

package/src/components/Logger/Logger.stories.js

@@ -11,6 +11,11 @@ export default {
 				`,
 			},
 		},
+
+		design: {
+			type: 'figma',
+			url: 'https://www.figma.com/file/XDwOALFs1s9uXPFVE7BP9B/%E2%9C%8D---Cr%C3%A9dito?node-id=4029%3A28672',
+		},
 		viewMode: 'docs',
 	},
 };

package/src/components/Logger/LoggerItem/LoggerItem.scss

@@ -1,9 +1,3 @@
-$line-color : #D6D6D6;
-$fore-color: #858585;
-$current-color: #5089DE;
-$success-color: #00B493;
-$error-color: #EA5455;
-
 @mixin loggerMessage($color) {
     >i.mdi {
         border-color: $color;
@@ -28,19 +22,18 @@ $error-color: #EA5455;
     }
 
     &.logger__item--error {
-        @include loggerMessage($error-color);
+        @include loggerMessage(var(--v-error-base));
     }
 
     &.logger__item--success {
-        @include loggerMessage($success-color);
+        @include loggerMessage(var(--v-secondary-base));
 
     }
 }
 
 
-
 .logger__item>i.mdi {
-    border: 1px solid $line-color;
+    border: 1px solid var(--v-gray-lighten2);
     border-radius: 50%;
     width: 32px;
     height: 32px;
@@ -50,8 +43,8 @@ $error-color: #EA5455;
     align-items: center;
     justify-content: center;
 
-    border-color: $fore-color;
-    background-color: $fore-color;
+    border-color: var(--v-gray-lighten1);
+    background-color: var(--v-gray-lighten1);
 
     &:before {
         font-size: 16px;

package/src/components/Logger/LoggerItem/LoggerItem.stories.js

@@ -11,6 +11,10 @@ export default {
 				`,
 			},
 		},
+		design: {
+			type: 'figma',
+			url: 'https://www.figma.com/file/XDwOALFs1s9uXPFVE7BP9B/%E2%9C%8D---Cr%C3%A9dito?node-id=4029%3A28672',
+		},
 		viewMode: 'docs',
 	},
 };

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

@@ -1,10 +1,19 @@
 $step-height: 64px;
-$line-color : #D6D6D6;
-$fore-color: #858585;
-$current-color: #5089DE;
-$previous-color: #00B493;
-$error-color: #EA5455;
-$vertical-step-width: 160px;
+
+@mixin stepperHeaderStepColor($color) {
+	i.mdi {
+		background-color: $color;
+		border-color: $color;
+	}
+
+	i.mdi:before {
+		color: white;
+	}
+}
+
+.horizontal-step-size .stepper__header--vertical {
+	width: 160px;
+}
 
 .stepper__header {
 	display: flex;
@@ -17,43 +26,25 @@ $vertical-step-width: 160px;
 		flex-direction: column;
 		align-items: center;
 		justify-items: center;
-		color: $fore-color;
+		color: var(--v-gray-lighten1);
 		font-size: 14px;
 		font-weight: 700;
 
 		&.stepper__header-step--previous {
-			color: $previous-color;
-
-			i.mdi {
-				border-color: $previous-color;
-			}
-
-			i.mdi:before {
-				color: $previous-color;
-			}
+			@include stepperHeaderStepColor(var(--v-secondary-base));
 		}
 
 		&.stepper__header-step--current {
-			color: $current-color;
-
-			i.mdi {
-				border-color: $current-color;
-			}
-
-			i.mdi:before {
-				color: $current-color;
-			}
+			@include stepperHeaderStepColor(var(--v-accent-base));
 		}
 
 		&.stepper__header-step--error {
-			color: $error-color;
+			@include stepperHeaderStepColor(var(--v-error-base));
+		}
 
+		&.stepper__header-step--next {
 			i.mdi {
-				border-color: $error-color;
-			}
-
-			i.mdi:before {
-				color: $error-color;
+				color: var(--v-gray-lighten1);
 			}
 		}
 
@@ -63,8 +54,6 @@ $vertical-step-width: 160px;
 		}
 	}
 
-
-
 	.stepper__divider--horizontal {
 		display: block;
 		flex: 1 1 0px;
@@ -73,25 +62,23 @@ $vertical-step-width: 160px;
 
 		border: none;
 		margin: 16px -16px 0;
-		background: $line-color;
+		background: var(--v-gray-lighten2);
 
 		&.stepper__divider--previous {
-			background: $previous-color;
+			background: var(--v-secondary-base);
 		}
 
 		&.stepper__divider--previous-to-current {
-			background: linear-gradient(to right, $previous-color, $current-color);
+			background: linear-gradient(to right, var(--v-secondary-base), var(--v-accent-base));
 		}
 
 		&.stepper__divider--previous-to-error {
-			background: linear-gradient(to right, $previous-color, $error-color);
+			background: linear-gradient(to right, var(--v-secondary-base), var(--v-error-base));
 		}
 	}
 
 	&.stepper__header--vertical {
 		display: block;
-		width: $vertical-step-width;
-
 
 		div.stepper__header-step {
 			width: 100%;
@@ -104,8 +91,10 @@ $vertical-step-width: 160px;
 			}
 
 			span {
-				display: block;
+				display: flex;
+				align-items: center;
 				width: calc(100% - 40px);
+				height: 32px;
 				clear: none;
 				float: left;
 				margin-top: 0;
@@ -120,37 +109,41 @@ $vertical-step-width: 160px;
 			height: 32px;
 			margin: -24px 0 8px 16px;
 			width: 1px;
-			background-color: $line-color;
+			background-color: var(--v-gray-lighten2);
 
 			&.stepper__divider--previous {
-				background-color: $previous-color;
+				background-color: var(--v-secondary-base);
 			}
 
 			&.stepper__divider--previous-to-current {
-				background: linear-gradient(to bottom, $previous-color, $current-color);
+				background: linear-gradient(to bottom,
+						var(--v-secondary-base),
+						var(--v-accent-base));
 			}
 
 			&.stepper__divider--previous-to-error {
-				background: linear-gradient(to bottom, $previous-color, $error-color);
+				background: linear-gradient(to bottom,
+						var(--v-secondary-base),
+						var(--v-error-base));
 			}
 		}
 	}
 }
 
 i.mdi {
-	border: 1px solid $line-color;
+	border: 1px solid var(--v-gray-lighten2);
 	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: $fore-color;
+		color: var(--v-gray-lighten1);
 	}
 }

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

@@ -11,6 +11,10 @@ export default {
 				`,
 			},
 		},
+		design: {
+			type: 'figma',
+			url: 'https://www.figma.com/file/XDwOALFs1s9uXPFVE7BP9B/%E2%9C%8D---Cr%C3%A9dito?node-id=4029%3A28672',
+		},
 		viewMode: 'docs',
 	},
 };
@@ -32,3 +36,5 @@ export const Primary = () => ({
 });
 
 Primary.storyName = 'Básico';
+
+//

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

@@ -1,39 +1,43 @@
 <template>
-	<section :class="{ stepper__header: true, 'stepper__header--vertical': vertical }">
-		<template v-for="(step, index) in steps">
-			<div
-				:class="{
-					'stepper__header-step': true,
-					'stepper__header-step--current': isStepCurrent(index),
-					'stepper__header-step--previous': isStepPrevious(index),
-					'stepper__header-step--error': isStepError(index),
-				}"
-				:key="step.label"
-			>
-				<i
+	<div class="horizontal-step-size">
+		<section :class="{ stepper__header: true, 'stepper__header--vertical': vertical }">
+			<template v-for="(step, index) in steps">
+				<div
 					:class="{
-						mdi: true,
-						['mdi-' + step.icon]: true,
+						'stepper__header-step': true,
+						'stepper__header-step--current': isStepCurrent(index),
+						'stepper__header-step--previous': isStepPrevious(index),
+						'stepper__header-step--error': isStepError(index),
+						'stepper__header-step--next': isStepNext(index),
 					}"
-					v-if="step.icon"
+					:key="step.label"
+				>
+					<i
+						:class="{
+							mdi: true,
+							['mdi-' + step.icon]: true,
+						}"
+					>
+						{{ step.icon ? '' : index + 1 }}
+					</i>
+					<span>
+						{{ step.label }}
+					</span>
+				</div>
+				<div
+					:class="{
+						'stepper__divider--horizontal': !vertical,
+						'stepper__divider--vertical': vertical,
+						'stepper__divider--previous': isStepPrevious(index),
+						'stepper__divider--previous-to-current': isStepPreviousToCurrent(index),
+						'stepper__divider--previous-to-error': isStepPreviousToError(index),
+					}"
+					v-if="hasDivider(index)"
+					:key="'divider_' + step.label"
 				/>
-				<span>
-					{{ step.label }}
-				</span>
-			</div>
-			<div
-				:class="{
-					'stepper__divider--horizontal': !vertical,
-					'stepper__divider--vertical': vertical,
-					'stepper__divider--previous': isStepPrevious(index),
-					'stepper__divider--previous-to-current': isStepPreviousToCurrent(index),
-					'stepper__divider--previous-to-error': isStepPreviousToError(index),
-				}"
-				v-if="hasDivider(index)"
-				:key="'divider_' + step.label"
-			/>
-		</template>
-	</section>
+			</template>
+		</section>
+	</div>
 </template>
 <script lang="ts">
 import Vue, { PropType } from 'vue';
@@ -87,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/Modal.stories.js

@@ -58,6 +58,54 @@ export const ModalSmall = () => ({
 	</div>`,
 });
 
+export const ModalExtremeSmall = () => ({
+	components: {
+		DialogHeader,
+		DialogFooter,
+	},
+	data() {
+		return {
+			showModalSmall: false,
+		};
+	},
+	template: `<div>
+	<v-dialog content-class="modal-default modal-default-x-small" v-model="showModalSmall">
+		<DialogHeader title="Exemplo" @onClose="showModalSmall = false;" />
+		<v-main class="pa-6 pt-12">
+			Place dialog content here!
+		</v-main>
+		<DialogFooter :hasConfirm="false" @onClose="showModalSmall = false;" />
+	</v-dialog>
+		<v-btn @click="showModalSmall = true;" color="secondary">
+			Clique para abrir
+		</v-btn>
+	</div>`,
+});
+
+export const ModalMedium = () => ({
+	components: {
+		DialogHeader,
+		DialogFooter,
+	},
+	data() {
+		return {
+			showModalSmall: false,
+		};
+	},
+	template: `<div>
+	<v-dialog content-class="modal-default modal-default-md" v-model="showModalSmall">
+		<DialogHeader title="Exemplo" @onClose="showModalSmall = false;" />
+		<v-main class="pa-6 pt-12">
+			Place dialog content here!
+		</v-main>
+		<DialogFooter :hasConfirm="false" @onClose="showModalSmall = false;" />
+	</v-dialog>
+		<v-btn @click="showModalSmall = true;" color="secondary">
+			Clique para abrir
+		</v-btn>
+	</div>`,
+});
+
 export const ModalScrollVertical = () => ({
 	components: {
 		DialogHeader,
@@ -181,4 +229,8 @@ ModalSmall.story = {
 
 ModalScrollVertical.storyName = 'Rolagem vertical';
 
-ModalScrollHorizontal.storyName = 'Rolagem horizontal';
+ModalScrollHorizontal.storyName = 'Rolagem horizontal';
+
+ModalExtremeSmall.storyName = 'Extra pequeno';
+
+ModalMedium.storyName = 'Médio';

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',
+};

package/src/scss/DefaultModal.scss

@@ -72,7 +72,16 @@
 			max-width: calc(392px - 2rem);
 		}
 	}
+
+	.v-dialog.modal-default.modal-default-md {
+		max-width: calc(600px - 2rem);
+
+		header {
+			max-width: calc(600px - 2rem);
+		}
+	}
 }
+
 @media screen and (max-width: 960px) {
 	.v-dialog.modal-default header {
 		max-width: calc(100% - 3rem);