@farm-investimentos/front-mfe-components 11.6.1 → 11.7.0

package/package.json

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

package/src/components/Buttons/ConfirmButton/ConfirmButton.stories.js

@@ -7,7 +7,8 @@ export default {
 		docs: {
 			description: {
 				component: `Confirm button<br />
-				selector: <em>farm-btn-confirm</em>
+				selector: <em>farm-btn-confirm</em><br />
+				<span style="color: var(--farm-primary-base);">ready for use</span>
 				`,
 			},
 		},
@@ -16,22 +17,18 @@ export default {
 };
 
 export const Primary = () => ({
-	components: { ConfirmButton },
 	template: '<ConfirmButton>Confirm Button</ConfirmButton>',
 });
 
 export const HtmlMarkup = () => ({
-	components: { ConfirmButton },
 	template: '<ConfirmButton><em>I am italic</strong></em></ConfirmButton>',
 });
 
 export const Props = () => ({
-	components: { ConfirmButton },
 	template: '<ConfirmButton title="custom title">custom title (hover me)</ConfirmButton>',
 });
 
 export const Listener = () => ({
-	components: { ConfirmButton },
 	data() {
 		return {
 			x: 1,
@@ -48,11 +45,6 @@ export const Iconed = () => ({
 		<ConfirmButton :icon="true">default icon</ConfirmButton>
 		<ConfirmButton :icon="true" customIcon="information-outline">information-outline</ConfirmButton>
 		<ConfirmButton :icon="true" customIcon="account-search">account-search</ConfirmButton>
+		<ConfirmButton :icon="true" customIcon="account-search" disabled>account-search</ConfirmButton>
 	</div>`,
-});
-
-Primary.storyName = 'Básico';
-HtmlMarkup.storyName = 'Html Markup';
-Props.storyName = 'Props';
-Listener.storyName = 'Listener';
-Iconed.storyName = 'Icon';
+});

package/src/components/Buttons/ConfirmButton/ConfirmButton.vue

@@ -1,6 +1,8 @@
 <template>
 	<farm-btn v-bind="$attrs" v-on="$listeners">
-		<i :class="{ mdi: true, [iconPath]: true, 'mr-3': true }" v-if="icon"></i>
+		<farm-icon v-if="icon" class="'mr-3">
+			{{ customIcon }}
+		</farm-icon>
 		<slot></slot>
 	</farm-btn>
 </template>
@@ -23,21 +25,9 @@ export default Vue.extend({
 		 */
 		customIcon: {
 			type: String,
-			default: '',
-		},
-	},
-	computed: {
-		iconPath() {
-			if (!this.customIcon) {
-				return 'mdi-check';
-			}
-			return `mdi-${this.customIcon}`;
+			default: 'check',
 		},
 	},
 });
 </script>
-<style lang="scss" scoped>
-i.mdi {
-	font-size: 1rem;
-}
-</style>
+

package/src/components/Buttons/ConfirmButton/__tests__/ConfirmButton.spec.js

@@ -3,31 +3,12 @@ import ConfirmButton from '../ConfirmButton';
 
 describe('ConfirmButton component', () => {
 	let wrapper;
-	let component;
 
 	beforeEach(() => {
 		wrapper = shallowMount(ConfirmButton);
-		component = wrapper.vm;
 	});
 
 	test('Created hook', () => {
 		expect(wrapper).toBeDefined();
 	});
-
-	describe('Computed properties', () => {
-		it('Should return default icon', () => {
-			wrapper.setProps({
-				icon: true,
-			});
-			expect(component.iconPath).toEqual('mdi-check');
-		});
-
-		it('Should return custom icon', async () => {
-			await wrapper.setProps({
-				icon: true,
-				customIcon: 'information',
-			});
-			expect(component.iconPath).toEqual('mdi-information');
-		});
-	});
 });

package/src/components/Buttons/DangerButton/DangerButton.stories.js

@@ -7,7 +7,8 @@ export default {
 		docs: {
 			description: {
 				component: `Danger button<br />
-				selector: <em>farm-btn-fanger</em>
+				selector: <em>farm-btn-fanger</em><br />
+				<span style="color: var(--farm-primary-base);">ready for use</span>
 				`,
 			},
 		},
@@ -43,5 +44,6 @@ export const Iconed = () => ({
 		<farm-btn-danger :icon="true">default icon</farm-btn-danger>
 		<farm-btn-danger :icon="true" customIcon="information-outline">information-outline</farm-btn-danger>
 		<farm-btn-danger :icon="true" customIcon="account-search">account-search</farm-btn-danger>
+		<farm-btn-danger :icon="true" customIcon="account-search" disabled>account-search</farm-btn-danger>
 	</div>`,
 });

package/src/components/Buttons/DangerButton/DangerButton.vue

@@ -1,6 +1,8 @@
 <template>
 	<farm-btn v-bind="$attrs" v-on="$listeners" color="error">
-		<i v-if="icon" :class="{mdi: true, [iconPath]: true, 'mr-3': true}"></i>
+		<farm-icon v-if="icon" class="'mr-3">
+			{{ customIcon }}
+		</farm-icon>
 		<slot></slot>
 	</farm-btn>
 </template>
@@ -26,13 +28,5 @@ export default Vue.extend({
 			default: '',
 		},
 	},
-	computed: {
-		iconPath(): string {
-			if (!this.customIcon) {
-				return 'mdi-trash-can-outline';
-			}
-			return `mdi-${this.customIcon}`;
-		},
-	},
 });
 </script>

package/src/components/Buttons/DangerButton/__tests__/DangerButton.spec.js

@@ -3,31 +3,12 @@ import DangerButton from '../DangerButton';
 
 describe('DangerButton component', () => {
 	let wrapper;
-	let component;
 
 	beforeEach(() => {
 		wrapper = shallowMount(DangerButton);
-		component = wrapper.vm;
 	});
 
 	test('Created hook', () => {
 		expect(wrapper).toBeDefined();
 	});
-
-	describe('Computed properties', () => {
-		it('Should return default icon', () => {
-			wrapper.setProps({
-				icon: true,
-			});
-			expect(component.iconPath).toEqual('mdi-trash-can-outline');
-		});
-
-		it('Should return custom icon', async () => {
-			await wrapper.setProps({
-				icon: true,
-				customIcon: 'information',
-			});
-			expect(component.iconPath).toEqual('mdi-information');
-		});
-	});
 });

package/src/components/CopyToClipboard/CopyToClipboard.stories.js

@@ -41,3 +41,25 @@ export const CustomTooltipColor = () => ({
 		<farm-copytoclipboard toCopy="To be copied" tooltip-color="info" />
     </div>`,
 });
+
+export const Modal = () => ({
+	data() {
+		return {
+			value: false,
+		};
+	},
+	template: `<div>
+	<farm-btn @click="value = true">abrir</farm-btn>
+	<farm-modal v-model="value">
+		<template v-slot:content>
+			<farm-copytoclipboard toCopy="To be copied" :isIcon="false" />
+		</template>
+	</farm-modal>
+	</div>`,
+});
+
+export const SuccessTimeout = () => ({
+	template: `<div style="max-width: 480px; padding-top: 80px; padding-left: 80px;">
+		<farm-copytoclipboard toCopy="To be copied" success-timeout="5000" />
+    </div>`,
+});

package/src/components/CopyToClipboard/CopyToClipboard.vue

@@ -53,12 +53,19 @@ export default Vue.extend({
 			>,
 			default: 'secondary',
 		},
+		/**
+		 * Success message timeout (in ms)
+		 */
+		successTimeout: {
+			type: [Number, String],
+			default: 2000,
+		},
 	},
 	setup(props) {
 		const show = ref(false);
 		const feedbackMessage = ref('');
 		const disabled = ref(false);
-		const { toCopy, isIcon, successMessage } = toRefs(props);
+		const { toCopy, isIcon, successMessage, successTimeout } = toRefs(props);
 
 		const onClick = async () => {
 			disabled.value = true;
@@ -73,7 +80,7 @@ export default Vue.extend({
 			setTimeout(() => {
 				show.value = false;
 				disabled.value = false;
-			}, 2000);
+			}, successTimeout.value);
 		};
 
 		return {

package/src/components/MainFilter/MainFilter.scss

@@ -3,7 +3,7 @@ section {
 	flex-direction: row;
 
 	.farm-btn {
-		margin-left: 1rem;
+		margin-left: 16px;
 	}
 
 	fieldset {

package/src/components/MainFilter/MainFilter.vue

@@ -12,7 +12,7 @@
 					</template>
 				</farm-tooltip>
 			</farm-label>
-			<farm-textfield v-model="inputValue" :id="elementId" @keyup="onKeyUp" />
+			<farm-textfield-v2 v-model="inputValue" :id="elementId" @keyup="onKeyUp" />
 		</fieldset>
 		<farm-btn
 			v-if="hasExtraFilters"
@@ -64,6 +64,9 @@ export default Vue.extend({
 			type: String,
 			default: '',
 		},
+		/**
+		 * Toggle filters
+		 */
 		showFilters: {
 			type: Boolean,
 			default: false,
@@ -100,18 +103,20 @@ export default Vue.extend({
 		onFilterClick() {
 			this.$emit('onClick');
 		},
+		isInvalidKey(keyCode: Number) {
+			return (
+				(keyCode < 48 && keyCode !== 8 && keyCode !== 46) ||
+				(keyCode > 90 && keyCode < 96 && keyCode !== 91) ||
+				(keyCode > 105 && keyCode < 186)
+			);
+		},
 		onKeyUp(event: KeyboardEvent) {
 			const keyCode = event.keyCode;
 			if (keyCode === 13) {
 				this.$emit('onEnter', (event.target as HTMLInputElement).value);
 				return false;
 			}
-
-			if (
-				(keyCode < 48 && keyCode !== 8 && keyCode !== 46) ||
-				(keyCode > 90 && keyCode < 96 && keyCode !== 91) ||
-				(keyCode > 105 && keyCode < 186)
-			) {
+			if (this.isInvalidKey(keyCode)) {
 				return false;
 			}
 			if (this.timer) {
@@ -119,7 +124,8 @@ export default Vue.extend({
 				this.timer = null;
 			}
 			this.timer = setTimeout(() => {
-				this.$emit('onInputChange', (event.target as HTMLInputElement).value);
+				console.log(this.inputValue);
+				this.$emit('onInputChange', this.inputValue);
 			}, 750);
 		},
 	},

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

@@ -19,6 +19,10 @@ describe('MainFilter component', () => {
 			component.onFilterClick();
 			expect(wrapper.emitted().onClick).toBeTruthy();
 		});
+
+		it('Should check if keyCode is valid', () => {
+			expect(component.isInvalidKey(120)).toBeTruthy();
+		});
 	});
 
 	describe('computed properties', () => {

package/src/components/ResourceMetaInfo/ResourceMetaInfo.scss

@@ -0,0 +1,14 @@
+.farm-resource-metainfo {
+	display: inline-flex;
+	flex-direction: column;
+	gap: 8px;
+
+	& div {
+		align-items: center;
+		display: inline-flex;
+
+		& .farm-icon {
+			margin-right: 8px;
+		}
+	}
+}

package/src/components/ResourceMetaInfo/ResourceMetaInfo.stories.js

@@ -0,0 +1,119 @@
+import ResourceMetaInfo from './ResourceMetaInfo.vue';
+
+export default {
+	title: 'Display/ResourceMetaInfo',
+	component: ResourceMetaInfo,
+	parameters: {
+		docs: {
+			description: {
+				component: `ResourceMetaInfo<br />
+				selector: <em>farm-resource-metainfo</em><br />
+				<span style="color: var(--farm-primary-base);">ready for use</span>
+				`,
+			},
+		},
+		viewMode: 'docs',
+	},
+};
+
+export const Primary = () => ({
+	data() {
+		return {
+			value: false,
+			info: {
+				createdAt: '21/10/2022',
+				updatedAt: '21/10/2022',
+				username: 'Test User',
+				updatedHours: '10:10:10',
+			},
+		};
+	},
+	template: `<div>
+	<farm-resource-metainfo :infos="info" />
+	</div>`,
+});
+
+export const WithoutUpdate = () => ({
+	data() {
+		return {
+			value: false,
+			info: {
+				createdAt: '21/10/2022',
+				updatedAt: null,
+				username: 'Test User',
+				updatedHours: '10:10:10',
+			},
+		};
+	},
+	template: `<div>
+	<farm-resource-metainfo :infos="info" />
+	</div>`,
+});
+
+export const WithoutCreate = () => ({
+	data() {
+		return {
+			value: false,
+			info: {
+				createdAt: null,
+				updatedAt: '21/10/2022',
+				username: 'Test User',
+				updatedHours: '10:10:10',
+			},
+		};
+	},
+	template: `<div>
+	<farm-resource-metainfo :infos="info" />
+	</div>`,
+});
+
+export const ShowUpdateWithNA = () => ({
+	data() {
+		return {
+			value: false,
+			info: {
+				createdAt: null,
+				updatedAt: null,
+				username: null,
+				updatedHours: null,
+			},
+		};
+	},
+	template: `<div>
+	<farm-resource-metainfo :infos="info" show-empty-update />
+	</div>`,
+});
+
+export const ShowCreateWithNA = () => ({
+	data() {
+		return {
+			value: false,
+			info: {
+				createdAt: null,
+				updatedAt: null,
+				username: null,
+				updatedHours: null,
+			},
+		};
+	},
+	template: `<div>
+	<farm-resource-metainfo :infos="info" show-empty-create />
+	</div>`,
+});
+
+export const ShowBothWithNA = () => ({
+	data() {
+		return {
+			value: false,
+			info: {
+				createdAt: null,
+				updatedAt: null,
+				username: null,
+				updatedHours: null,
+			},
+		};
+	},
+	template: `<div>
+	<farm-resource-metainfo :infos="info" show-empty-create show-empty-update />
+	</div>`,
+});

package/src/components/ResourceMetaInfo/ResourceMetaInfo.vue

@@ -0,0 +1,100 @@
+<template>
+	<div class="farm-resource-metainfo">
+		<div v-if="showCreate">
+			<farm-icon color="gray" size="14">calendar-blank</farm-icon>
+			<farm-caption color="gray" tag="p" variation="regular"
+				>Data de cadastro:
+				<farm-caption color="gray" variation="medium" tag="span">{{
+					formattedCreatedAt
+				}}</farm-caption>
+			</farm-caption>
+		</div>
+		<div v-if="showUpdate">
+			<farm-icon color="gray" size="14">history</farm-icon>
+
+			<farm-caption color="gray" tag="p" variation="regular"
+				>Última atualização feita por
+				<farm-caption color="gray" variation="medium" tag="span">{{
+					formattedUsername
+				}}</farm-caption
+				>, dia
+				<farm-caption color="gray" variation="medium" tag="span">{{
+					formattedUpdatedAt
+				}}</farm-caption>
+				às
+				<farm-caption color="gray" variation="medium" tag="span">{{
+					formattedUpdatedHours
+				}}</farm-caption>
+			</farm-caption>
+		</div>
+	</div>
+</template>
+<script lang="ts">
+import Vue, { computed, PropType, toRefs } from 'vue';
+import Icon from '../Icon';
+import { Caption } from '../Typography';
+
+interface ResourceMetaInfoProps {
+	createdAt: string;
+	updatedAt: string;
+	username: string;
+	updatedHours: string;
+}
+
+export default Vue.extend({
+	name: 'farm-resource-metainfo',
+	components: {
+		'farm-icon': Icon,
+		'farm-caption': Caption,
+	},
+	props: {
+		infos: {
+			required: true,
+			type: Object as PropType<ResourceMetaInfoProps>,
+		},
+		showEmptyCreate: {
+			type: Boolean,
+			default: false,
+		},
+		showEmptyUpdate: {
+			type: Boolean,
+			default: false,
+		},
+	},
+	setup(props) {
+		const { infos, showEmptyCreate, showEmptyUpdate } = toRefs(props);
+
+		const showUpdate = computed(
+			() =>
+				(infos.value.updatedAt !== null && infos.value.updatedAt !== undefined) ||
+				showEmptyUpdate.value
+		);
+
+		const showCreate = computed(
+			() =>
+				(infos.value.createdAt !== null && infos.value.createdAt !== undefined) ||
+				showEmptyCreate.value
+		);
+
+		const formattedCreatedAt = computed(() => infos.value.createdAt || 'N/A');
+
+		const formattedUpdatedAt = computed(() => infos.value.updatedAt || 'N/A');
+
+		const formattedUsername = computed(() => infos.value.username || 'N/A');
+
+		const formattedUpdatedHours = computed(() => infos.value.updatedHours || 'N/A');
+
+		return {
+			showUpdate,
+			showCreate,
+			formattedCreatedAt,
+			formattedUpdatedAt,
+			formattedUsername,
+			formattedUpdatedHours,
+		};
+	},
+});
+</script>
+<style lang="scss" scoped>
+@import 'ResourceMetaInfo.scss';
+</style>

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

@@ -0,0 +1,128 @@
+import { shallowMount } from '@vue/test-utils';
+import ResourceMetaInfo from '../ResourceMetaInfo.vue';
+
+describe('ResourceMetaInfo component', () => {
+	let wrapper;
+	let component;
+
+	beforeEach(() => {
+		wrapper = shallowMount(ResourceMetaInfo, {
+			propsData: {
+				infos: {
+					createdAt: '21/10/2022',
+					updatedAt: '21/10/2022',
+					username: 'Test User',
+					updatedHours: '10:10:10',
+				},
+			},
+		});
+
+		component = wrapper.vm;
+	});
+
+	test('Created hook', () => {
+		expect(wrapper).toBeDefined();
+	});
+
+	describe('mount component', () => {
+		it('renders correctly', () => {
+			expect(wrapper.element).toMatchSnapshot();
+		});
+	});
+
+	describe('Computed', () => {
+		describe('showUpdate', () => {
+			it('should return true when it has an update date', () => {
+				expect(component.showUpdate).toBeTruthy();
+			});
+
+			it('should return false when it has not an update date', async () => {
+				await wrapper.setProps({
+					infos: { updatedAt: null },
+				});
+				expect(component.showUpdate).toBeFalsy();
+			});
+
+			it('should return true when it has not an update date but showEmptyUpdate is true', async () => {
+				await wrapper.setProps({
+					infos: { updatedAt: null },
+					showEmptyUpdate: true,
+				});
+				expect(component.showUpdate).toBeTruthy();
+			});
+		});
+
+		describe('showCreate', () => {
+			it('should return true when it has an create date', () => {
+				expect(component.showCreate).toBeTruthy();
+			});
+
+			it('should return false when it has not an create date', async () => {
+				await wrapper.setProps({
+					infos: { createAt: null },
+				});
+				expect(component.showCreate).toBeFalsy();
+			});
+
+			it('should return true when it has not an update date but showEmptyCreate is true', async () => {
+				await wrapper.setProps({
+					infos: { createAt: null },
+					showEmptyCreate: true,
+				});
+				expect(component.showCreate).toBeTruthy();
+			});
+		});
+
+		describe('formattedCreatedAt', () => {
+			it('should return infos createdAt', () => {
+				expect(component.formattedCreatedAt).toBe('21/10/2022');
+			});
+
+			it('should return N/A when infos createdAt is empty', async () => {
+				await wrapper.setProps({
+					infos: { createAt: null },
+				});
+				expect(component.formattedCreatedAt).toBe('N/A');
+			});
+		});
+
+		describe('formattedUpdatedAt', () => {
+			it('should return infos updatedAt', () => {
+				expect(component.formattedUpdatedAt).toBe('21/10/2022');
+			});
+
+			it('should return N/A when infos updatedAt is empty', async () => {
+				await wrapper.setProps({
+					infos: { updatedAt: null },
+				});
+				expect(component.formattedUpdatedAt).toBe('N/A');
+			});
+		});
+
+		describe('formattedUsername', () => {
+			it('should return infos updatedAt', () => {
+				expect(component.formattedUsername).toBe('Test User');
+			});
+
+			it('should return N/A when infos username is empty', async () => {
+				await wrapper.setProps({
+					infos: { username: null },
+				});
+				expect(component.formattedUsername).toBe('N/A');
+			});
+		});
+
+		describe('formattedUpdatedHours', () => {
+			it('should return infos updatedHours', () => {
+				expect(component.formattedUpdatedHours).toBe('10:10:10');
+			});
+
+			it('should return N/A when infos updatedHours is empty', async () => {
+				await wrapper.setProps({
+					infos: { updatedHours: null },
+				});
+				expect(component.formattedUpdatedHours).toBe('N/A');
+			});
+		});
+	});
+});