@farm-investimentos/front-mfe-components-vue3 0.0.1

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

@@ -0,0 +1,99 @@
+@mixin loggerMessage($color) {
+	> .farm-icon {
+		border-color: $color;
+		background-color: $color;
+	}
+
+	.farm-bodytext--2 {
+		color: $color;
+	}
+}
+
+.logger__item {
+	display: flex;
+	flex-direction: row;
+	height: 74px;
+	align-items: center;
+
+	> div {
+		display: flex;
+		flex-direction: column;
+		padding-left: 8px;
+
+		.logger__item--spacing-bottom {
+			margin-bottom: 8px;
+		}
+	}
+
+	> .farm-icon {
+		border: 1px solid var(--farm-stroke-base);
+		border-radius: 50%;
+		min-width: 32px;
+		min-height: 32px;
+		width: 32px;
+		height: 32px;
+		display: block;
+
+		display: flex;
+		align-items: center;
+		justify-content: center;
+
+		border-color: var(--farm-neutral-base);
+		background-color: var(--farm-neutral-base);
+
+		&:before {
+			color: white;
+		}
+	}
+
+	> .farm-btn.logger__item--button {
+		margin-left: 8px;
+	}
+
+	&.logger__item--error {
+		@include loggerMessage(var(--farm-error-base));
+	}
+
+	&.logger__item--success {
+		@include loggerMessage(var(--farm-success-base));
+	}
+
+	&.logger__item--info {
+		@include loggerMessage(var(--farm-info-base));
+	}
+
+	&--horizontal {
+		flex-direction: column;
+		height: auto;
+		width: 158px;
+
+		> div {
+			align-items: center;
+			text-align: center;
+			gap: 8px;
+			margin-bottom: 8px;
+			padding-left: 0;
+
+			.logger__item--spacing-bottom {
+				margin-bottom: 0;
+			}
+		}
+
+		> .farm-icon {
+			margin-bottom: 8px;
+		}
+
+		> .farm-btn.logger__item--button {
+			margin-left: 0;
+		}
+	}
+
+	&--left-aligned {
+		align-items: flex-start;
+
+		> div {
+			align-items: flex-start;
+			text-align: left;
+		}
+	}
+}

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

@@ -0,0 +1,144 @@
+import LoggerItem from './LoggerItem.vue';
+
+export default {
+	title: 'Feedback/Logger/LoggerItem',
+	component: LoggerItem,
+	parameters: {
+		docs: {
+			description: {
+				component: `LoggerItem<br />
+				selector: <em>farm-logger-item</em>
+				`,
+			},
+		},
+		design: {
+			type: 'figma',
+			url: 'https://www.figma.com/file/XDwOALFs1s9uXPFVE7BP9B/%E2%9C%8D---Cr%C3%A9dito?node-id=4029%3A28672',
+		},
+		viewMode: 'docs',
+	},
+};
+
+export const Default = () => ({
+	data() {
+		return {
+			item: {
+				message: 'Recusado entre as pré elegíveis',
+				userName: 'Cleyton Rasta',
+				formattedDate: '13/06/2022  20:40',
+			},
+		};
+	},
+	template: `<farm-logger-item :item="item" />`,
+});
+
+export const Success = () => ({
+	data() {
+		return {
+			item: {
+				message: 'Recusado entre as pré elegíveis',
+				userName: 'Cleyton Rasta',
+				formattedDate: '13/06/2022  20:40',
+				status: 'success',
+			},
+		};
+	},
+	template: `<farm-logger-item :item="item" />`,
+});
+
+export const Error = () => ({
+	data() {
+		return {
+			item: {
+				message: 'Recusado entre as pré elegíveis',
+				userName: 'Cleyton Rasta',
+				formattedDate: '13/06/2022  20:40',
+				status: '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 {
+			item: {
+				icon: 'book',
+				message: 'Recusado entre as pré elegíveis',
+				userName: 'Cleyton Rasta',
+				formattedDate: '13/06/2022  20:40',
+				status: 'success',
+			},
+		};
+	},
+	template: `<farm-logger-item :item="item" />`,
+});
+
+export const Details = () => ({
+	data() {
+		return {
+			items: [
+				{
+					icon: 'book',
+					message: 'Aprovado entre as pré elegíveis',
+					userName: 'Cleyton Rasta',
+					formattedDate: '13/06/2022  20:40',
+					status: 'success',
+					details() {
+						alert('Ver Detalhes');
+					},
+				},
+				{
+					icon: 'book',
+					message: 'Reprovado entre as pré elegíveis',
+					userName: 'Cleyton Rasta',
+					formattedDate: '13/06/2022  20:40',
+					status: 'error',
+					details() {
+						alert('Ver Detalhes');
+					},
+				},
+				{
+					icon: 'book',
+					message: 'Info',
+					userName: 'Cleyton Rasta',
+					formattedDate: '13/06/2022  20:40',
+					status: 'info',
+					details() {
+						alert('Ver Detalhes');
+					},
+				},
+			],
+		};
+	},
+	template: `<div><farm-logger-item v-for="item of items" :key="item.status" :item="item" /></div>`,
+});

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

@@ -0,0 +1,98 @@
+<template>
+	<section
+		class="logger__item"
+		:class="{
+			['logger__item--' + item.status]: true,
+		}"
+	>
+		<farm-icon size="16px">{{ mdiIconName }}</farm-icon>
+		<div>
+			<farm-bodysmall
+				variation="regular"
+				color="black"
+				colorVariation="50"
+				class="logger__item--spacing-bottom"
+			>
+				{{ item.formattedDate }}
+			</farm-bodysmall>
+			<farm-bodytext
+				:type="2"
+				variation="bold"
+				color="black"
+				colorVariation="50"
+				class="logger__item--spacing-bottom"
+			>
+				{{ item.message }}
+			</farm-bodytext>
+			<farm-bodysmall
+				variation="regular"
+				color="black"
+				colorVariation="50"
+				class="logger__item--user"
+				v-if="item.userName"
+			>
+				<farm-icon color="black" variation="50" size="xs">account-circle</farm-icon>
+				{{ item.userName }}
+			</farm-bodysmall>
+			<farm-caption variation="regular" v-if="item.extraMessage">
+				{{ item.extraMessage }}
+			</farm-caption>
+		</div>
+		<farm-btn
+			v-if="hasDetails"
+			outlined
+			title="Ver Detalhes"
+			class="logger__item--button"
+			:color="buttonColor"
+			@click="callDetails"
+		>
+			Ver Detalhes
+		</farm-btn>
+	</section>
+</template>
+<script lang="ts">
+import {  PropType } from 'vue';
+import ILoggerItem from './ILoggerItem';
+import mappingIconKeys from './mappingIconKeys';
+
+export default {
+	name: 'farm-logger-item',
+	props: {
+		/**
+		 * Logger item
+		 */
+		item: { required: true, type: Object as PropType<ILoggerItem> },
+		/**
+		 * Vertical or horizontal
+		 */
+		vertical: { type: Boolean, default: true },
+		customIcon: { type: String, required: false },
+	},
+	methods: {
+		callDetails(): void {
+			this.item.details();
+		},
+	},
+	computed: {
+		mdiIconName(): string {
+			if (this.item.icon) {
+				return `${this.item.icon}`;
+			}
+			if (!this.item.status) {
+				return '';
+			}
+
+			return this.item.status ? mappingIconKeys[this.item.status] : 'success';
+		},
+		buttonColor(): string {
+			return this.item.status ? this.item.status : 'success';
+		},
+		hasDetails(): boolean {
+			return !!this.item.details;
+		},
+	},
+};
+</script>
+<style lang="scss" scoped>
+@import './LoggerItem.scss';
+</style>

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

@@ -0,0 +1,93 @@
+import { shallowMount } from '@vue/test-utils';
+import LoggerItem from '../LoggerItem';
+
+describe('LoggerItem component', () => {
+	let wrapper;
+	let component;
+
+	beforeEach(() => {
+		wrapper = shallowMount(LoggerItem, {
+			propsData: {
+				item: {},
+			},
+		});
+		component = wrapper.vm;
+	});
+
+	test('LoggerItem created', () => {
+		expect(wrapper).toBeDefined();
+	});
+
+	describe('Computed properties', () => {
+		it('Should return custom icon', async () => {
+			await wrapper.setProps({
+				item: {
+					message: 'Recusado entre as pré elegíveis',
+					userName: 'Cleyton Rasta',
+					formattedDate: '13/06/2022  20:40',
+					icon: 'aaa',
+				},
+			});
+			expect(component.mdiIconName).toEqual('aaa');
+		});
+
+		it('Should return success icon', async () => {
+			await wrapper.setProps({
+				item: {
+					status: 'success',
+				},
+			});
+			expect(component.mdiIconName).toEqual('check');
+		});
+
+		it('Should return success icon', async () => {
+			await wrapper.setProps({
+				item: {
+					status: 'error',
+				},
+			});
+			expect(component.mdiIconName).toEqual('close');
+		});
+
+		it('Should return success button color', async () => {
+			await wrapper.setProps({
+				item: {
+					status: 'success',
+				},
+			});
+			expect(component.buttonColor).toEqual('success');
+		});
+
+		it('Should return error button color', async () => {
+			await wrapper.setProps({
+				item: {
+					status: 'error',
+				},
+			});
+			expect(component.buttonColor).toEqual('error');
+		});
+
+		it('Should return default button color', async () => {
+			await wrapper.setProps({
+				item: {
+					status: 'primary',
+				},
+			});
+			expect(component.buttonColor).toEqual('primary');
+		});
+
+		it('Should not have a detail button', async () => {
+			await wrapper.setProps({
+				item: {
+					details: () => {},
+				},
+			});
+
+			expect(component.hasDetails).toBeTruthy();
+		});
+
+		it('Should not have a detail button', () => {
+			expect(component.hasDetails).toBeFalsy();
+		});
+	});
+});

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

@@ -0,0 +1,4 @@
+import LoggerItem from './LoggerItem.vue';
+
+export { LoggerItem };
+export default LoggerItem;

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

@@ -0,0 +1,75 @@
+import { shallowMount } from '@vue/test-utils';
+import Logger from '../Logger';
+
+describe('Logger component', () => {
+	let wrapper;
+	let component;
+
+	beforeEach(() => {
+		wrapper = shallowMount(Logger, {
+			propsData: {
+				items: [
+					{
+						icon: 'book',
+						message: 'Recusado entre as pré elegíveis',
+						userName: 'Cleyton Rasta',
+						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('dividerCssClass', () => {
+			it('should return true', () => {
+				expect(component.dividerCssClass(0)).toEqual('logger__divider--error-to-error');
+				expect(component.dividerCssClass(1)).toEqual('logger__divider--error-to-success');
+			});
+		});
+	});
+});

package/src/components/Logger/index.ts

@@ -0,0 +1,4 @@
+import Logger from './Logger.vue';
+
+export { Logger };
+export default Logger;

package/src/components/MainFilter/MainFilter.scss

@@ -0,0 +1,16 @@
+.farm-tooltip {
+	margin-left: 4px;
+}
+
+.farm-btn.farm-btn__cta {
+	margin-left: 12px;
+	margin-top: 32px;
+}
+
+@media screen and (max-width: 600px) {
+	.farm-btn.farm-btn__cta {
+		width: calc(100% - 24px);
+		margin-left: 12px;
+		margin-top: 0 !important;
+	}
+}

package/src/components/MainFilter/MainFilter.stories.js

@@ -0,0 +1,84 @@
+import MainFilter from './MainFilter.vue';
+
+export default {
+	title: 'Form/MainFilter',
+	component: MainFilter,
+	parameters: {
+		docs: {
+			description: {
+				component: `Main Filter<br />
+				selector: <em>farm-form-mainfilter</em><br />
+				<span style="color: var(--farm-primary-base);">ready for use</span>
+				`,
+			},
+		},
+		viewMode: 'docs',
+	},
+};
+
+export const Primary = () => ({
+	template: '<farm-form-mainfilter />',
+});
+
+export const Secondary = () => ({
+	template: '<farm-form-mainfilter :hasExtraFilters="false" />',
+});
+
+export const CustomLabel = () => ({
+	template: '<farm-form-mainfilter label="Custom" />',
+});
+
+export const WithSlot = () => ({
+	template: '<farm-form-mainfilter>With Slot</farm-form-mainfilter>',
+});
+
+export const Tooltip = () => ({
+	data() {
+		return {
+			text: 'Some long tooltip text to be placed here!',
+		};
+	},
+	template: `
+	<div style="max-width: 480px; padding-top: 32px; margin-left: 32px;">
+		<farm-form-mainfilter label="Label" :tooltip="text" />
+	</div>`,
+});
+
+export const Application = () => ({
+	data() {
+		return {
+			showFilters: true,
+		};
+	},
+	template: `<div>
+		<farm-row>
+			<farm-col md="6">
+				<farm-form-mainfilter @onClick="showFilters = !showFilters" :showFilters="showFilters" />
+			</farm-col>
+		</farm-row>
+		<farm-row v-if="showFilters">
+			<farm-col cols="12">
+			Extra filters
+			</farm-col>
+			<farm-col cols="12" md="3">
+				<farm-textfield-v2 />
+			</farm-col>
+			<farm-col cols="12" md="3">
+				<farm-textfield-v2 />
+			</farm-col>
+			<farm-col cols="12" md="3">
+				<farm-textfield-v2 />
+			</farm-col>
+			<farm-col cols="12" md="3">
+				<farm-textfield-v2 />
+			</farm-col>
+		</farm-row>
+	</div>`,
+});
+
+export const FullWidth = () => ({
+	template: `
+	<div style="max-width: 480px; padding-top: 32px; margin-left: 32px;">
+		<farm-form-mainfilter  label="Label" fullWidth :hasExtraFilters="false"/>
+	</div>`,
+});