@farm-investimentos/front-mfe-components 11.10.7 → 11.11.1

package/package.json

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

package/src/components/Checkbox/Checkbox.stories.js

@@ -32,6 +32,30 @@ export const Primary = () => ({
 	</div>`,
 });
 
+export const Value = () => ({
+	data() {
+		return {
+			option1: 'option1',
+			option2: 'option2',
+			option3: 'option3',
+		};
+	},
+	template: `<div>
+	<div class="d-flex">
+	<farm-checkbox v-model="option1" value="1" class="mr-2" /> 
+		option1 : {{option1}}
+	</div>
+	<div class="d-flex align-center">
+	<farm-checkbox v-model="option2" value="2" class="mr-2 my-2" /> 
+		option2 : {{option2}}
+	</div>
+	<div class="d-flex">
+	<farm-checkbox v-model="option3" value="3" class="mr-2" /> 
+		option3 : {{option3}}
+	</div>
+	</div>`,
+});
+
 export const DefaultCheck = () => ({
 	data() {
 		return {
@@ -120,4 +144,4 @@ export const Indeterminate = () => ({
 	template: `<div>
 		<farm-checkbox :indeterminate="true" v-model="isChecked" :value="true"  />
 	</div>`,
-});
+});

package/src/components/DatePicker/DatePicker.stories.js

@@ -7,7 +7,8 @@ export default {
 		docs: {
 			description: {
 				component: `Input Date Picker<br />
-				selector: <em>farm-input-datepicker</em>
+				selector: <em>farm-input-datepicker</em><br />
+				<span style="color: var(--farm-primary-base);">ready for use</span>
 				`,
 			},
 		},

package/src/components/DatePicker/DatePicker.vue

@@ -12,13 +12,14 @@
 			<farm-textfield-v2
 				icon="calendar"
 				v-model="fieldRange"
+				autocomplete="off"
 				:readonly="readonly"
 				:mask="`${readonly ? '' : '##/##/####'}`"
-				autocomplete="off"
 				:id="inputId"
 				:rules="[checkMax, checkMin, checkRequire]"
 				@keyup="keyUpInput"
-				@click="menuField = true"
+				@click="openDatepicker"
+				@onClickIcon="openDatepicker"
 			/>
 		</template>
 		<v-date-picker
@@ -31,7 +32,7 @@
 			:max="max"
 			:min="min"
 		>
-			<farm-btn outlined color="secondary" @click="menuField = false" title="Fechar">
+			<farm-btn outlined color="secondary" @click="closeDatepicker" title="Fechar">
 				Fechar
 			</farm-btn>
 			<farm-btn outlined class="ml-2" @click="clear"> Limpar </farm-btn>
@@ -57,23 +58,29 @@ export default Vue.extend({
 	},
 	props: {
 		/**
-		 * String usada no como id do input e for do label
+		 * Input's id
 		 */
 		inputId: {
 			type: String,
 			required: true,
 		},
 		/**
-		 * Variável usada como v-model
+		 * v-model bind
 		 */
 		value: {
 			type: String,
 			default: '',
 		},
+		/**
+		 * Max date (ISO format)
+		 */
 		max: {
 			type: String,
 			default: null,
 		},
+		/**
+		 * Min date (ISO format)
+		 */
 		min: {
 			type: String,
 			default: null,
@@ -173,6 +180,12 @@ export default Vue.extend({
 			const arr = onlyDMY.split('/');
 			return new Date(arr[2], arr[1] - 1, arr[0]);
 		},
+		openDatepicker() {
+			this.menuField = true;
+		},
+		closeDatepicker() {
+			this.menuField = false;
+		},
 	},
 	computed: {
 		inputVal: {

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

@@ -34,4 +34,16 @@ describe('DatePicker component', () => {
 			expect(wrapper.emitted().input).toBeDefined();
 		});
 	});
+
+	describe('methods', () => {
+		it('openDatepicker', () => {
+			component.openDatepicker();
+			expect(component.menuField).toBeTruthy();
+		});
+
+		it('closeDatepicker', () => {
+			component.closeDatepicker();
+			expect(component.menuField).toBeFalsy();
+		});
+	});
 });

package/src/components/Logger/Logger.scss

@@ -2,24 +2,43 @@
 	display: flex;
 	flex-direction: column;
 }
+
 .logger__divider {
 	height: 40px;
 	margin: -4px 0 -4px 16px;
 	width: 1px;
 
-	&.logger__divider--success {
+	&.logger__divider--success-to-success  {
 		background: var(--farm-primary-base);
 	}
 
-	&.logger__divider--error {
+	&.logger__divider--error-to-error {
 		background: var(--farm-error-base);
 	}
 
-	&.logger__divider--error-to-success {
-		background: linear-gradient(to bottom, var(--farm-error-base), var(--farm-primary-base));
+	&.logger__divider--info-to-info {
+		background: var(--farm-error-base);
 	}
 
 	&.logger__divider--success-to-error {
 		background: linear-gradient(to bottom, var(--farm-primary-base), var(--farm-error-base));
 	}
-}
+	&.logger__divider--success-to-info {
+		background: linear-gradient(to bottom, var(--farm-error-base), var(--farm-info-base));
+	}
+
+	&.logger__divider--error-to-success {
+		background: linear-gradient(to bottom, var(--farm-error-base), var(--farm-primary-base));
+	}
+	&.logger__divider--error-to-info {
+		background: linear-gradient(to bottom, var(--farm-error-base), var(--farm-info-base));
+	}
+
+	&.logger__divider--info-to-success {
+		background: linear-gradient(to bottom, var(--farm-info-base), var(--farm-primary-base));
+	}
+	&.logger__divider--info-to-error {
+		background: linear-gradient(to bottom, var(--farm-info-base), var(--farm-error-base));
+	}
+	
+}

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

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

package/src/components/Logger/Logger.vue

@@ -5,13 +5,8 @@
 			<div
 				v-if="hasDivider(index)"
 				:class="{
-					'logger__divider': true,
-					'logger__divider--success': isPreviousLogAndCurrentLogSuccess(index),
-					'logger__divider--error': isPreviousLogAndCurrentLogError(index),
-					'logger__divider--success-to-error':
-						isPreviousLogErrorAndCurrentLogSuccess(index),
-					'logger__divider--error-to-success':
-						isPreviousLogSuccessAndCurrentLogError(index),
+					logger__divider: true,
+					[dividerCssClass(index)]: true,
 				}"
 				:key="'divider_' + index"
 			></div>
@@ -34,23 +29,10 @@ export default Vue.extend({
 		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';
+		dividerCssClass(index: number): string {
+			const previous = this.items[index].status;
+			const next = this.items[index + 1].status;
+			return `logger__divider--${previous}-to-${next}`;
 		},
 	},
 });

package/src/components/Logger/LoggerItem/ILoggerItem.ts

@@ -4,6 +4,7 @@ interface ILoggerItem {
 	formattedDate: string;
 	message: string;
 	status: string;
+	extraMessage?: string;
 	details: Function;
 }
 

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

@@ -27,7 +27,10 @@
 
     &.logger__item--success {
         @include loggerMessage(var(--farm-primary-base));
+    }
 
+    &.logger__item--info {
+        @include loggerMessage(var(--farm-info-base));
     }
 }
 
@@ -53,7 +56,8 @@
 }
 
 .logger__date,
-.logger__username {
+.logger__username,
+.logger__extramessage {
     font-size: 10px;
     font-weight: 400;
 }

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

@@ -60,6 +60,34 @@ export const Error = () => ({
 	template: `<farm-logger-item :item="item" />`,
 });
 
+export const Info = () => ({
+	data() {
+		return {
+			item: {
+				message: 'Recusado entre as pré elegíveis',
+				userName: 'Cleyton Rasta',
+				formattedDate: '13/06/2022  20:40',
+				status: 'info',
+			},
+		};
+	},
+	template: `<farm-logger-item :item="item" />`,
+});
+
+export const ExtraMessage = () => ({
+	data() {
+		return {
+			item: {
+				message: 'Recusado entre as pré elegíveis',
+				extraMessage: 'More text',
+				formattedDate: '13/06/2022  20:40',
+				status: 'info',
+			},
+		};
+	},
+	template: `<farm-logger-item :item="item" />`,
+});
+
 export const CustomIcon = () => ({
 	data() {
 		return {

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

@@ -2,8 +2,7 @@
 	<section
 		class="logger__item"
 		:class="{
-			'logger__item--error': item.status === 'error',
-			'logger__item--success': item.status === 'success',
+			['logger__item--' + item.status]: true,
 		}"
 	>
 		<farm-icon>{{ mdiIconName }}</farm-icon>
@@ -14,10 +13,13 @@
 			<span class="logger__message">
 				{{ item.message }}
 			</span>
-			<span class="logger__username">
+			<span v-if="item.userName" class="logger__username">
 				<i class="mdi mdi-account-circle" />
 				{{ item.userName }}
 			</span>
+			<span class="logger__extramessage">
+				{{ item.extraMessage }}
+			</span>
 		</div>
 		<farm-btn
 			v-if="hasDetails"
@@ -25,14 +27,15 @@
 			title="Ver Detalhes"
 			:color="buttonColor"
 			@click="callDetails"
-			>
-				Ver Detalhes
-			</farm-btn>
+		>
+			Ver Detalhes
+		</farm-btn>
 	</section>
 </template>
 <script lang="ts">
 import Vue, { PropType } from 'vue';
 import ILoggerItem from './ILoggerItem';
+import mappingIconKeys from './mappingIconKeys';
 
 export default Vue.extend({
 	name: 'farm-logger-item',
@@ -41,6 +44,7 @@ export default Vue.extend({
 		 * Logger item
 		 */
 		item: { required: true, type: Object as PropType<ILoggerItem> },
+		customIcon: { type: String, required: false },
 	},
 	methods: {
 		callDetails(): void {
@@ -55,7 +59,8 @@ export default Vue.extend({
 			if (!this.item.status) {
 				return '';
 			}
-			return `${this.item.status === 'success' ? 'check' : 'close'}`;
+
+			return this.item.status ? mappingIconKeys[this.item.status] : 'error';
 		},
 		buttonColor(): string {
 			if (this.item.status === 'success') {

package/src/components/Logger/LoggerItem/mappingIconKeys.ts

@@ -0,0 +1,5 @@
+export default {
+	success: 'check',
+	info: 'timer-sand',
+	error: 'close',
+};

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

@@ -65,57 +65,10 @@ describe('Logger component', () => {
 			});
 		});
 
-		describe('isPreviousLogAndCurrentLogError', () => {
+		describe('dividerCssClass', () => {
 			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();
+				expect(component.dividerCssClass(0)).toEqual('logger__divider--error-to-error');
+				expect(component.dividerCssClass(1)).toEqual('logger__divider--error-to-success');
 			});
 		});
 	});

package/src/components/RangeDatePicker/RangeDatePicker.stories.js

@@ -8,8 +8,9 @@ export default {
 	parameters: {
 		docs: {
 			description: {
-				component: `Range I put Date Picker<br />
-				selector: <em>farm-input-rangedatepicker</em>
+				component: `Range Input Date Picker<br />
+				selector: <em>farm-input-rangedatepicker</em><br />
+				<span style="color: var(--farm-primary-base);">ready for use</span>
 				`,
 			},
 		},

package/src/components/RangeDatePicker/RangeDatePicker.vue

@@ -16,7 +16,8 @@
 				readonly
 				:id="inputId"
 				:rules="required ? [requiredRule] : []"
-				@click="menuField = true"
+				@click="openDatepicker"
+				@onClickIcon="openDatepicker"
 			/>
 		</template>
 		<v-date-picker
@@ -30,7 +31,7 @@
 			color="secondary"
 			locale="pt-br"
 		>
-			<farm-btn outlined color="secondary" @click="menuField = false" title="Fechar">
+			<farm-btn outlined color="secondary" @click="closeDatepicker" title="Fechar">
 				Fechar
 			</farm-btn>
 			<farm-btn outlined class="ml-2" @click="clear()" title="Limpar"> Limpar</farm-btn>
@@ -134,6 +135,12 @@ export default Vue.extend({
 			this.dateField = [];
 			this.save();
 		},
+		openDatepicker() {
+			this.menuField = true;
+		},
+		closeDatepicker() {
+			this.menuField = false;
+		},
 	},
 	computed: {
 		inputVal: {

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

@@ -3,6 +3,7 @@ import RangeDatePicker from '../RangeDatePicker';
 
 describe('RangeDatePicker component', () => {
 	let wrapper;
+	let component;
 
 	beforeEach(() => {
 		wrapper = shallowMount(RangeDatePicker, {
@@ -10,6 +11,7 @@ describe('RangeDatePicker component', () => {
 				inputId: 'someid',
 			},
 		});
+		component = wrapper.vm;
 	});
 
 	test('Created hook', () => {
@@ -29,9 +31,21 @@ describe('RangeDatePicker component', () => {
 				min: '2022-01-17',
 				max: '2022-01-31',
 			});
-			expect(wrapper.vm.inputId).toBe('someid');
-			expect(wrapper.vm.min).toBe('2022-01-17');
-			expect(wrapper.vm.max).toBe('2022-01-31');
+			expect(component.inputId).toBe('someid');
+			expect(component.min).toBe('2022-01-17');
+			expect(component.max).toBe('2022-01-31');
+		});
+	});
+
+	describe('methods', () => {
+		it('openDatepicker', () => {
+			component.openDatepicker();
+			expect(component.menuField).toBeTruthy();
+		});
+
+		it('closeDatepicker', () => {
+			component.closeDatepicker();
+			expect(component.menuField).toBeFalsy();
 		});
 	});
 });

package/src/components/layout/Basic.stories.js

@@ -35,7 +35,7 @@ export const Structure = () => ({
 		<farm-row>
 			<farm-col md="6" lg="3">
 				coluna 1
-			</farm-col>›
+			</farm-col>
 			<farm-col md="6" lg="3">
 				coluna 2
 			</farm-col>
@@ -46,6 +46,28 @@ export const Structure = () => ({
 				coluna 4
 			</farm-col>
 		</farm-row>
+
+		<farm-row>
+			<farm-col lg="2">
+				coluna 1
+			</farm-col>
+			<farm-col lg="2">
+				coluna 2
+			</farm-col>
+			<farm-col lg="2">
+				coluna 3
+			</farm-col>
+			<farm-col lg="2">
+				coluna 4
+			</farm-col>
+			<farm-col lg="2">
+				coluna 5
+			</farm-col>
+			<farm-col lg="2">
+				coluna 6
+			</farm-col>
+		</farm-row>
+
 		<farm-row :extra-decrease="true">
 			<farm-container-footer>
 				Footer content