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

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@farm-investimentos/front-mfe-components",
-	"version": "11.10.7",
+	"version": "11.11.0",
 	"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/LoggerItem.scss

@@ -27,7 +27,10 @@
 
     &.logger__item--success {
         @include loggerMessage(var(--farm-primary-base));
+    }
 
+    &.logger__item--info {
+        @include loggerMessage(var(--farm-info-base));
     }
 }
 

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

@@ -60,6 +60,20 @@ 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 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>
@@ -25,9 +24,9 @@
 			title="Ver Detalhes"
 			:color="buttonColor"
 			@click="callDetails"
-			>
-				Ver Detalhes
-			</farm-btn>
+		>
+			Ver Detalhes
+		</farm-btn>
 	</section>
 </template>
 <script lang="ts">

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