@farm-investimentos/front-mfe-components 6.3.1 → 6.3.4

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@farm-investimentos/front-mfe-components",
-	"version": "6.3.1",
+	"version": "6.3.4",
 	"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/Buttons/DefaultButton/DefaultButton.scss

@@ -103,6 +103,7 @@
             &:hover {
                 color: var(--v-#{$color}-base);
             }
+
             i.mdi {
                 color: var(--v-#{$color}-base);
             }
@@ -132,27 +133,29 @@
         }
     }
 
-    .farm-btn--outlined#{'.farm-btn--' + $color} {
-        border: 1px solid var(--v-#{$color}-base);
-        background: white;
-        color: var(--v-#{$color}-base);
-
-        .farm-btn__content i.mdi {
+    :not(.farm-btn--disabled){
+        &.farm-btn--outlined#{'.farm-btn--' + $color} {
+            border: 1px solid var(--v-#{$color}-base);
+            background: white;
             color: var(--v-#{$color}-base);
+    
+            .farm-btn__content i.mdi {
+                color: var(--v-#{$color}-base);
+            }
         }
 
-    }
-
-    .farm-btn--plain#{'.farm-btn--' + $color} {
-        border: none;
-        background: white;
-        color: var(--v-#{$color}-base);
-
-        .farm-btn__content i.mdi {
+        &.farm-btn--plain#{'.farm-btn--' + $color} {
+            border: none;
+            background: white;
             color: var(--v-#{$color}-base);
+    
+            .farm-btn__content i.mdi {
+                color: var(--v-#{$color}-base);
+            }
         }
-
     }
+
+    
 }
 
 .farm-btn--elevated {

package/src/components/Collapsible/Collapsible.scss

@@ -20,7 +20,7 @@
 
 	&__title {
 		font-size: 1.25rem;
-		color: #1c1c1c;
+		color: var(--v-primary-base);
 
 		@media screen and (max-width: 600px) {
 			font-size: 0.9rem;
@@ -28,27 +28,13 @@
 	}
 
 	&__icon {
-		i {
-			font-size: 1.625rem;
-		}
+
 		&--main {
 			margin-right: 0.5rem;
-			i {
-				color: #00b493;
-			}
-			@media screen and (max-width: 600px) {
-				i {
-					font-size: 1.5rem;
-					color: #00b493;
-				}
-			}
 		}
 
 		&--arrow {
 			margin-left: 0.5rem;
-			i {
-				color: #1c1c1c;
-			}
 		}
 	}
 
@@ -62,7 +48,8 @@
 .fade-leave-active {
 	transition: opacity 0.3s ease-in-out;
 }
+
 .fade-enter,
 .fade-leave-to {
 	opacity: 0;
-}
+}

package/src/components/Collapsible/Collapsible.vue

@@ -3,25 +3,18 @@
 		<div class="collapsible__header" @click="onToggleCollapsible(status)">
 			<div class="collapsible__content-title">
 				<div class="collapsible__icon collapsible__icon--main" v-if="icon !== ''">
-					<i
-						:class="{
-							mdi: true,
-							['mdi-' + icon]: true,
-						}"
-					></i>
+					<farm-icon color="secondary" size="1.625rem">
+						{{ icon }}
+					</farm-icon>
 				</div>
 				<h3 class="collapsible__title">
 					{{ title }}
 				</h3>
 			</div>
 			<div class="collapsible__icon collapsible__icon--arrow">
-				<i
-					:class="{
-						mdi: true,
-						['mdi-menu-down']: !status,
-						['mdi-menu-up']: status,
-					}"
-				></i>
+				<farm-icon size="1.625rem" color="primary">
+					{{ arrowIcon }}
+				</farm-icon>
 			</div>
 		</div>
 		<transition name="fade">
@@ -34,8 +27,13 @@
 
 <script lang="ts">
 import Vue from 'vue';
+import Icon from '../Icon';
 
 export default Vue.extend({
+	name: 'farm-collapsible',
+	components: {
+		'farm-icon': Icon,
+	},
 	props: {
 		title: {
 			type: String,
@@ -55,6 +53,11 @@ export default Vue.extend({
 			status: this.$props.open,
 		};
 	},
+	computed: {
+		arrowIcon() {
+			return this.status ? 'menu-up' : 'menu-down';
+		},
+	},
 	methods: {
 		onToggleCollapsible(status: boolean): void {
 			this.status = !status;

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/Icon/Icon.vue

@@ -37,6 +37,12 @@ export default Vue.extend({
 		},
 	},
 
+	data() {
+		return {
+			icon: '',
+		};
+	},
+
 	computed: {
 		classes() {
 			const obj = {};
@@ -48,18 +54,30 @@ export default Vue.extend({
 				...obj,
 			};
 		},
-		icon() {
-			if (!this.$slots.default) {
-				return '';
-			}
-			return this.$slots.default[0].text!.trim();
+		fontSize() {
+			return isNaN(this.size) ? this.size : `${this.size}px`;
 		},
 	},
 	mounted() {
 		if (this.size !== 'default' && !breakPoints.includes(this.size)) {
-			this.$el.style.fontSize = this.size;
+			this.$el.style.fontSize = this.fontSize;
 		}
 	},
+	created() {
+		this.checkForSlotContent();
+	},
+	beforeUpdate() {
+		this.checkForSlotContent();
+	},
+	methods: {
+		checkForSlotContent() {
+			if (!this.$slots.default) {
+				this.icon = '';
+				return;
+			}
+			this.icon = this.$slots.default[0].text!.trim();
+		},
+	},
 });
 </script>
 <style lang="scss" scoped>

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

@@ -18,5 +18,13 @@ describe('Icon component', () => {
 		it('get classes', () => {
 			expect(component.classes).toBeDefined();
 		});
+
+		it('get icon', () => {
+			expect(component.icon).toEqual('');
+		});
+
+		it('get fontSize', () => {
+			expect(component.fontSize).toEqual('default');
+		});
 	});
 });

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();
+			});
+		});
+	});
 });