@farm-investimentos/front-mfe-components 6.3.2 → 6.3.3

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@farm-investimentos/front-mfe-components",
-	"version": "6.3.2",
+	"version": "6.3.3",
 	"author": "farm investimentos",
 	"private": false,
 	"main": "./dist/front-mfe-components.common.js",
@@ -22,7 +22,7 @@
 	],
 	"dependencies": {
 		"core-js": "^3.8.3",
-		"vue": "^2.6.14",
+		"vue": "^2.7.0",
 		"vuetify": "^2.4.5",
 		"vuetify-dialog": "^2.0.17"
 	},
@@ -50,7 +50,7 @@
 		"storybook-addon-designs": "^6.2.1",
 		"typescript": "~4.1.5",
 		"v-mask": "^2.3.0",
-		"vue-template-compiler": "^2.6.14"
+		"vue-template-compiler": "^2.7.0"
 	},
 	"browserslist": [
 		"> 1%",

package/src/components/DialogFooter/DialogFooter.scss

@@ -0,0 +1,30 @@
+@import '../../configurations/functions';
+@import '../../configurations/mixins';
+
+.farm-dialog__footer {
+    border-top: 1px solid var(--v-gray-lighten2);
+    padding: 1rem;
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-end;
+}
+
+.farm-btn {
+    margin-left: gutter();
+    margin-top: 0;
+}
+
+@include for-sm-breakpoint {
+    .farm-btn {
+        margin-left: 0;
+        margin-top: gutter();
+    }
+
+    .farm-dialog__footer {
+        flex-direction: column;
+
+        .farm-btn:first-of-type {
+            margin-top: 0;
+        }
+    }
+}

package/src/components/DialogFooter/DialogFooter.vue

@@ -1,6 +1,6 @@
 <template>
-	<div class="v-dialog__footer d-flex flex-column flex-sm-row justify-end">
-		<farm-btn @click="$emit('onClose')" v-if="hasCancel" color="primary" outlined>
+	<div class="farm-dialog__footer">
+		<farm-btn v-if="hasCancel" color="primary" outlined @click="$emit('onClose')">
 			{{ closeLabel }}
 		</farm-btn>
 		<farm-btn
@@ -8,15 +8,12 @@
 			:key="button.label"
 			:color="button.color"
 			:outlined="button.outlined"
-			:depressed="button.outlined"
 			:disabled="button.disabled"
-			class="ml-sm-3 mt-3 mt-sm-0"
 			@click="$emit(button.listener ? button.listener : '')"
 		>
 			{{ button.label }}
 		</farm-btn>
 		<farm-btn
-			class="ml-sm-3 mt-3 mt-sm-0"
 			v-if="hasConfirm"
 			:color="confirmColor"
 			:disabled="isConfirmDisabled"
@@ -28,13 +25,16 @@
 	</div>
 </template>
 
-<script>
+<script lang="ts">
+import Vue, { PropType } from 'vue';
 import DefaultButton from '../Buttons/DefaultButton';
+import IExtraButton from './IExtraButton';
+
 /**
  * Footer de dialog/modal
  */
-export default {
-	name: 'DialogFooter',
+export default Vue.extend({
+	name: 'farm-dialog-foote',
 	components: {
 		'farm-btn': DefaultButton,
 	},
@@ -89,12 +89,15 @@ export default {
 			default: false,
 		},
 		/**
-		 * lista de botões extra
+		 * lista de botões extra (IExtraButton)
 		 */
 		extraButtons: {
-			type: Array,
+			type: Array as PropType<Array<IExtraButton>>,
 			default: () => [],
 		},
 	},
-};
+});
 </script>
+<style lang="scss" scoped>
+@import 'DialogFooter';
+</style>

package/src/components/DialogFooter/IExtraButton.ts

@@ -0,0 +1,9 @@
+interface IExtraButton {
+	label: string;
+	color: string;
+	outlined: boolean;
+	disabled: boolean;
+	listener: Function | null;
+}
+
+export default IExtraButton;

package/src/components/Logger/Logger.scss

@@ -1,17 +1,25 @@
 .logger {
-    display: block;
-
-    .logger__item {
-        float: left;
-        clear: both;
-    }
+	display: flex;
+	flex-direction: column;
 }
-
 .logger__divider {
-    float: left;
-    clear: both;
-    height: 40px;
-    margin: -4px 0 -4px 16px;
-    width: 1px;
-    background-color: var(--v-gray-lighten1);
-}
+	height: 40px;
+	margin: -4px 0 -4px 16px;
+	width: 1px;
+
+	&.logger__divider--success {
+		background: var(--v-secondary-base);
+	}
+
+	&.logger__divider--error {
+		background: var(--v-error-base);
+	}
+
+	&.logger__divider--error-to-success {
+		background: linear-gradient(to bottom, var(--v-error-base), var(--v-secondary-base));
+	}
+
+	&.logger__divider--success-to-error {
+		background: linear-gradient(to bottom, var(--v-secondary-base), var(--v-error-base));
+	}
+}

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

@@ -21,13 +21,11 @@ export default {
 };
 
 export const Primary = () => ({
-	components: { Logger },
+	components: { 'farm-logger': Logger },
 	data() {
 		return {};
 	},
-	template: `<Logger>
-	
-	</Logger>`,
+	template: `<farm-logger />`,
 });
 
 Primary.storyName = 'Básico';

package/src/components/Logger/Logger.vue

@@ -2,8 +2,19 @@
 	<section class="logger">
 		<template v-for="(item, index) in items">
 			<LoggerItem :item="item" :key="index" />
-			<div v-if="hasDivider(index)" class="logger__divider" :key="'divider_' + index">
-			</div>
+			<div
+				:class="{
+					'logger__divider--success': isPreviousLogAndCurrentLogSuccess(index),
+					'logger__divider--error': isPreviousLogAndCurrentLogError(index),
+					'logger__divider--success-to-error':
+						isPreviousLogErrorAndCurrentLogSuccess(index),
+					'logger__divider--error-to-success':
+						isPreviousLogSuccessAndCurrentLogError(index),
+				}"
+				v-if="hasDivider(index)"
+				class="logger__divider"
+				:key="'divider_' + index"
+			></div>
 		</template>
 	</section>
 </template>
@@ -15,11 +26,34 @@ import LoggerItem from './LoggerItem/';
 export default Vue.extend({
 	name: 'farm-logger',
 	components: { LoggerItem },
-	props: { items: { required: true, type: Array as PropType<Array<ILoggerItem>> } },
+	props: {
+		/*
+		 * List of logger items
+		 */
+		items: { required: true, type: Array as PropType<Array<ILoggerItem>> },
+	},
 	methods: {
 		hasDivider(index: number): boolean {
 			return index < this.items.length - 1;
 		},
+		isPreviousLogAndCurrentLogError(index: number): boolean {
+			return this.isError(index) && this.isError(index + 1);
+		},
+		isPreviousLogAndCurrentLogSuccess(index: number): boolean {
+			return this.isSuccess(index) && this.isSuccess(index + 1);
+		},
+		isPreviousLogErrorAndCurrentLogSuccess(index: number): boolean {
+			return this.isSuccess(index) && this.isError(index + 1);
+		},
+		isPreviousLogSuccessAndCurrentLogError(index: number): boolean {
+			return this.isError(index) && this.isSuccess(index + 1);
+		},
+		isError(index: number): boolean {
+			return this.items[index].status === 'error';
+		},
+		isSuccess(index: number): boolean {
+			return this.items[index].status === 'success';
+		},
 	},
 });
 </script>

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

@@ -20,7 +20,7 @@ export default {
 };
 
 export const Primary = () => ({
-	components: { LoggerItem },
+	components: { 'farm-logger-item': LoggerItem },
 	data() {
 		return {
 			item: {
@@ -32,7 +32,7 @@ export const Primary = () => ({
 			},
 		};
 	},
-	template: `<LoggerItem :item="item" />`,
+	template: `<farm-logger-item :item="item" />`,
 });
 
 Primary.storyName = 'Básico';

package/src/components/Logger/LoggerItem/LoggerItem.vue

@@ -6,12 +6,7 @@
 			'logger__item--success': item.status === 'success',
 		}"
 	>
-		<i
-			:class="{
-				mdi: true,
-				[mdiIconName]: true,
-			}"
-		/>
+		<farm-icon>{{ mdiIconName }}</farm-icon>
 		<div>
 			<span class="logger__date">
 				{{ item.formattedDate }}
@@ -29,25 +24,32 @@
 <script lang="ts">
 import Vue, { PropType } from 'vue';
 import ILoggerItem from './ILoggerItem';
+import Icon from '../../Icon';
 
 export default Vue.extend({
 	name: 'farm-logger-item',
+	components: {
+		'farm-icon': Icon,
+	},
 	props: {
+		/**
+		 * Logger item
+		 */
 		item: { required: true, type: Object as PropType<ILoggerItem> },
 	},
 	computed: {
 		mdiIconName() {
 			if (this.item.icon) {
-				return `mdi-${this.item.icon}`;
+				return `${this.item.icon}`;
 			}
-			if(!this.item.status) {
+			if (!this.item.status) {
 				return '';
 			}
-			return `mdi-${this.item.status === 'success' ? 'check' : 'close'}`;
+			return `${this.item.status === 'success' ? 'check' : 'close'}`;
 		},
 	},
 });
 </script>
-<style lang="sass" scoped>
+<style lang="scss" scoped>
 @import './LoggerItem.scss'
 </style>

package/src/components/Logger/LoggerItem/__tests__/LoggerItem.spec.js

@@ -28,7 +28,7 @@ describe('LoggerItem component', () => {
 					icon: 'aaa',
 				},
 			});
-			expect(component.mdiIconName).toEqual('mdi-aaa');
+			expect(component.mdiIconName).toEqual('aaa');
 		});
 
 		it('Should return success icon', async () => {
@@ -37,7 +37,7 @@ describe('LoggerItem component', () => {
 					status: 'success',
 				},
 			});
-			expect(component.mdiIconName).toEqual('mdi-check');
+			expect(component.mdiIconName).toEqual('check');
 		});
 
 		it('Should return success icon', async () => {
@@ -46,7 +46,7 @@ describe('LoggerItem component', () => {
 					status: 'error',
 				},
 			});
-			expect(component.mdiIconName).toEqual('mdi-close');
+			expect(component.mdiIconName).toEqual('close');
 		});
 
 	});

package/src/components/Logger/__tests__/Logger.spec.js

@@ -3,6 +3,7 @@ import Logger from '../Logger';
 
 describe('Logger component', () => {
 	let wrapper;
+	let component;
 
 	beforeEach(() => {
 		wrapper = shallowMount(Logger, {
@@ -15,12 +16,107 @@ describe('Logger component', () => {
 						formattedDate: '13/06/2022  20:40',
 						status: 'error',
 					},
+					{
+						icon: 'book',
+						message: 'Recusado entre as pré elegíveis',
+						userName: 'Cleyton Rasta',
+						formattedDate: '13/06/2022  20:40',
+						status: 'error',
+					},
+					{
+						icon: 'book',
+						message: 'Aceito entre as pré elegíveis',
+						userName: 'Cleyton Rasta',
+						formattedDate: '13/06/2022  20:40',
+						status: 'success',
+					},
+					{
+						icon: 'book',
+						message: 'Aceito entre as pré elegíveis',
+						userName: 'Cleyton Rasta',
+						formattedDate: '13/06/2022  20:40',
+						status: 'success',
+					},
+					{
+						icon: 'book',
+						message: 'Recusado entre as pré elegíveis',
+						userName: 'Cleyton Rasta',
+						formattedDate: '13/06/2022  20:40',
+						status: 'error',
+					},
 				],
 			},
 		});
+		component = wrapper.vm;
 	});
 
 	test('Logger created', () => {
 		expect(wrapper).toBeDefined();
 	});
+
+	describe('Methods', () => {
+		describe('hasDivider', () => {
+			it('should return true when it has a next item', () => {
+				expect(component.hasDivider(0)).toBeTruthy();
+			});
+
+			it('should return false when it has not a next item', () => {
+				expect(component.hasDivider(4)).toBeFalsy();
+			});
+		});
+
+		describe('isPreviousLogAndCurrentLogError', () => {
+			it('should return true', () => {
+				expect(component.isPreviousLogAndCurrentLogError(0)).toBeTruthy();
+			});
+
+			it('should return false', () => {
+				expect(component.isPreviousLogAndCurrentLogError(1)).toBeFalsy();
+			});
+		});
+
+		describe('isPreviousLogAndCurrentLogSuccess', () => {
+			it('should return true', () => {
+				expect(component.isPreviousLogAndCurrentLogSuccess(2)).toBeTruthy();
+			});
+			it('should return false', () => {
+				expect(component.isPreviousLogAndCurrentLogSuccess(0)).toBeFalsy();
+			});
+		});
+
+		describe('isPreviousLogErrorAndCurrentLogSuccess', () => {
+			it('should return true', () => {
+				expect(component.isPreviousLogErrorAndCurrentLogSuccess(3)).toBeTruthy();
+			});
+			it('should return false', () => {
+				expect(component.isPreviousLogErrorAndCurrentLogSuccess(2)).toBeFalsy();
+			});
+		});
+		describe('isPreviousLogSuccessAndCurrentLogError', () => {
+			it('should return true', () => {
+				expect(component.isPreviousLogSuccessAndCurrentLogError(1)).toBeTruthy();
+			});
+			it('should false', () => {
+				expect(component.isPreviousLogSuccessAndCurrentLogError(2)).toBeFalsy();
+			});
+		});
+
+		describe('isError', () => {
+			it('should true when the status is error', () => {
+				expect(component.isError(1)).toBeTruthy();
+			});
+			it('should false when the status is success', () => {
+				expect(component.isError(2)).toBeFalsy();
+			});
+		});
+
+		describe('isSuccess', () => {
+			it('should return true when the status is success', () => {
+				expect(component.isSuccess(2)).toBeTruthy();
+			});
+			it('should false when the status is error', () => {
+				expect(component.isSuccess(1)).toBeFalsy();
+			});
+		});
+	});
 });

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

@@ -1,12 +1,12 @@
 $step-height: 64px;
 
 @mixin stepperHeaderStepColor($color) {
-	i.mdi {
+	.farm-icon, .farm-icon__number {
 		background-color: $color;
 		border-color: $color;
 	}
 
-	i.mdi:before {
+	.farm-icon:before, .farm-icon__number {
 		color: white;
 	}
 }
@@ -43,12 +43,12 @@ $step-height: 64px;
 		}
 
 		&.stepper__header-step--next {
-			i.mdi {
+			.farm-icon, .farm-icon__number {
 				color: var(--v-gray-lighten1);
 			}
 		}
 
-		span {
+		span:not(.farm-icon__number) {
 			margin-top: 8px;
 			text-align: center;
 		}
@@ -78,7 +78,8 @@ $step-height: 64px;
 	}
 
 	&.stepper__header--vertical {
-		display: block;
+		display: flex;
+		flex-direction: column;
 
 		div.stepper__header-step {
 			width: 100%;
@@ -86,11 +87,11 @@ $step-height: 64px;
 			clear: both;
 			height: 64px;
 
-			i.mdi {
+			.farm-icon {
 				float: left;
 			}
 
-			span {
+			span:not(.farm-icon__number) {
 				display: flex;
 				align-items: center;
 				width: calc(100% - 40px);
@@ -130,7 +131,8 @@ $step-height: 64px;
 	}
 }
 
-i.mdi {
+.farm-icon,
+.farm-icon__number {
 	border: 1px solid var(--v-gray-lighten2);
 	border-radius: 50%;
 	width: 32px;

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

@@ -20,7 +20,7 @@ export default {
 };
 
 export const Primary = () => ({
-	components: { StepperHeader },
+	components: { 'farm-stepper-header': StepperHeader },
 	data() {
 		return {
 			steps: [
@@ -32,9 +32,7 @@ export const Primary = () => ({
 			currentStep: 3,
 		};
 	},
-	template: '<StepperHeader :steps="steps" :currentStep="currentStep" />',
+	template: '<farm-stepper-header :steps="steps" :currentStep="currentStep" />',
 });
 
 Primary.storyName = 'Básico';
-
-//

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

@@ -12,14 +12,12 @@
 					}"
 					:key="step.label"
 				>
-					<i
-						:class="{
-							mdi: true,
-							['mdi-' + step.icon]: true,
-						}"
-					>
-						{{ step.icon ? '' : index + 1 }}
-					</i>
+					<farm-icon v-if="step.icon">
+						{{ step.icon }}
+					</farm-icon>
+					<span v-else class="farm-icon__number">
+						{{ index + 1 }}
+					</span>
 					<span>
 						{{ step.label }}
 					</span>
@@ -42,9 +40,13 @@
 <script lang="ts">
 import Vue, { PropType } from 'vue';
 import IStep from './IStep';
+import Icon from '../../Icon';
 
 export default Vue.extend({
 	name: 'farm-stepper-header',
+	components: {
+		'farm-icon': Icon,
+	},
 	props: {
 		/**
 		 * Steps

package/src/configurations/_functions.scss

@@ -0,0 +1,5 @@
+@import './variables';
+
+@function gutter($key: 'default') {
+    @return map-get($gutters, $key)
+}

package/src/configurations/_mixins.scss

@@ -0,0 +1,5 @@
+@mixin for-sm-breakpoint {
+    @media (max-width: 599px) {
+        @content;
+    }
+}

package/src/configurations/_variables.scss

@@ -1,2 +1,15 @@
 $colors: primary, secondary, error, extra, accent, info, success, gray, yellow, white;
-$sizes: ("xs": 12px, "sm": 16px , "md": 24px, "lg": 36px, "xl": 40px);
+$sizes: (
+    "xs": 12px,
+    "sm": 16px,
+    "md": 24px,
+    "lg": 36px,
+    "xl": 40px
+);
+$gutters: (
+    "xs": 4px,
+    'sm': 8px,
+    "default": 12px,
+    'md': 16px,
+    "lg": 36px,
+    "xl": 40px);

package/src/examples/Logger/Logger.stories.js

@@ -38,6 +38,18 @@ export const Primary = () => ({
 					formattedDate: '13/06/2022  20:40',
 					status: 'success',
 				},
+				{
+					message: 'Recusado entre as pré elegíveis',
+					userName: 'Cleyton Rasta',
+					formattedDate: '13/06/2022  20:40',
+					status: 'error',
+				},
+				{
+					message: 'Recusado entre as pré elegíveis',
+					userName: 'Cleyton Rasta',
+					formattedDate: '13/06/2022  20:40',
+					status: 'error',
+				},
 			],
 		};
 	},