@farm-investimentos/front-mfe-components 11.6.2 → 11.7.1

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="sm">calendar-blank</farm-icon>
+			<farm-caption color="gray" 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="sm">history</farm-icon>
+
+			<farm-caption color="gray" 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';
+
+interface ResourceMetaInfoProps {
+	createdAt: string;
+	updatedAt: string;
+	username: string;
+	updatedHours: string;
+}
+
+export default Vue.extend({
+	name: 'farm-resource-metainfo',
+	props: {
+		/**
+		 * Object with the metadata information
+		 */
+		infos: {
+			required: true,
+			type: Object as PropType<ResourceMetaInfoProps>,
+		},
+		/**
+		 * Show create metadata info if empty?
+		 */
+		showEmptyCreate: {
+			type: Boolean,
+			default: false,
+		},
+		/**
+		 * Show update metadata info if empty?
+		 */
+		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';
+</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');
+			});
+		});
+	});
+});

package/src/components/ResourceMetaInfo/index.ts

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

package/src/components/Tabs/Tabs.stories.js

@@ -3,6 +3,17 @@ import Tabs from './Tabs.vue';
 export default {
     title: 'Display/Tabs',
     component: Tabs,
+    parameters: {
+		docs: {
+			description: {
+				component: `Tabs<br />
+				selector: <em>farm-tabs</em><br />
+				<span style="color: var(--farm-primary-base);">ready for use</span>
+				`,
+			},
+		},
+		viewMode: 'docs',
+	},
 };
 
 export const Primary = () => ({

package/src/components/TextFieldV2/TextFieldV2.scss

@@ -1,5 +1,6 @@
 .farm-textfield {
 	height: 64px;
+
 	&--input {
 		display: flex;
 		align-items: center;
@@ -11,19 +12,30 @@
 		padding: 8px;
 		margin-bottom: 4px;
 
-		> button {
+		>button {
 			display: flex;
 		}
 
 		&>input {
 			flex: 1;
 			outline: none;
-			color: var(--farm-neutral-darken);
+			color: var(--farm-text-primary);
 			font-size: 12px;
 			font-weight: 400;
 		}
 
 		width: 100%;
+
+	}
+
+	&--disabled {
+		input {
+			color: var(--farm-gray-base);
+		}
+		.farm-icon {
+			color: var(--farm-gray-lighten);
+			cursor: default;
+		}
 	}
 
 	.farm-caption {

package/src/components/TextFieldV2/TextFieldV2.stories.js

@@ -52,6 +52,7 @@ export const Disabled = () => ({
 	},
 	template: `<div style="width: 480px">
 		<farm-textfield-v2 v-model="v" disabled />
+		<farm-textfield-v2 v-model="v" disabled icon="book" />
 	</div>`,
 });
 

package/src/components/TextFieldV2/TextFieldV2.vue

@@ -7,6 +7,7 @@
 			'farm-textfield--touched': isTouched,
 			'farm-textfield--blured': isBlured,
 			'farm-textfield--error': hasError,
+			'farm-textfield--disabled': disabled,
 		}"
 	>
 		<div class="farm-textfield--input">
@@ -20,9 +21,10 @@
 			<input
 				v-bind="$attrs"
 				v-model="innerValue"
-				v-mask="mask"
+				v-mask="mask"		
 				:disabled="disabled"
 				:readonly="readonly"
+				@click="$emit('click')"
 				@keyup="onKeyUp"
 				@blur="onBlur"
 			/>
@@ -34,7 +36,6 @@
 				<farm-icon color="gray" size="20px">{{ icon }}</farm-icon>
 			</button>
 		</div>
-
 		<farm-caption v-if="showErrorText" color="error" variation="regular">
 			{{ errorBucket[0] }}
 		</farm-caption>
@@ -156,12 +157,14 @@ export default Vue.extend({
 
 		let validate = validateFormMethodBuilder(errorBucket, valid, fieldValidator);
 
-		const onKeyUp = () => {
+		const onKeyUp = (event: Event) => {
 			isTouched.value = true;
+			emit('keyup', event);
 		};
 
-		const onBlur = () => {
+		const onBlur = (event: Event) => {
 			isBlured.value = true;
+			emit('blur', event);
 		};
 
 		const reset = () => {

package/src/components/Typography/BodyText/BodyText.stories.js

@@ -7,7 +7,8 @@ export default {
 		docs: {
 			description: {
 				component: `BodyText<br />
-				selector: <em>farm-bodytext</em>
+				selector: <em>farm-bodytext</em><br />
+				<span style="color: var(--farm-primary-base);">ready for use</span>
 				`,
 			},
 		},
@@ -37,7 +38,6 @@ export const Primary = () => ({
 });
 
 export const CustomTag = () => ({
-	components: { 'farm-bodytext': BodyText },
 	data() {
 		return {
 			tags: ['p', 'span', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'legend', 'label', 'li'],

package/src/components/Typography/Caption/Caption.stories.js

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

package/src/components/Typography/Heading/Heading.stories.js

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

package/src/components/Typography/OverlayText/OverlayText.stories.js

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

package/src/components/Typography/Subtitle/Subtitle.stories.js

@@ -7,7 +7,8 @@ export default {
 		docs: {
 			description: {
 				component: `Subtitle<br />
-				selector: <em>farm-subtitle</em>
+				selector: <em>farm-subtitle</em><br />
+				<span style="color: var(--farm-primary-base);">ready for use</span>
 				`,
 			},
 		},
@@ -16,7 +17,6 @@ export default {
 };
 
 export const Primary = () => ({
-	components: { 'farm-subtitle': Subtitle },
 	data() {
 		return {
 			types: [1, 2],
@@ -37,7 +37,6 @@ export const Primary = () => ({
 });
 
 export const CustomTag = () => ({
-	components: { 'farm-subtitle': Subtitle },
 	data() {
 		return {
 			tags: ['p', 'span', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'legend', 'label', 'li'],

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

@@ -73,3 +73,24 @@ export const Tertiary = () => ({
 	</farm-container>
 `,
 });
+
+export const WithTabs = () => ({
+	data() {
+		return {
+			steps: [
+				{ label: 'Step 1', icon: '' },
+				{ label: 'Step 2', icon: 'monitor' },
+				{ label: 'Step 3', icon: 'book' },
+				{ label: 'Step 4', icon: '' },
+			],
+			currentStep: 3,
+		};
+	},
+	template: `
+	<farm-container>
+		<farm-row extra-decrease>
+			<farm-tabs :tabs="steps" :showCounter="false" class="mt-n6" />
+		</farm-row>
+	</farm-container>
+`,
+});

package/src/components/layout/Container/Container.scss

@@ -16,6 +16,7 @@
         margin: gutter('lg');
         padding: gutter('lg');
         box-shadow: 0px 3px 1px -2px rgb(0 0 0 / 20%), 0px 2px 2px 0px rgb(0 0 0 / 14%), 0px 1px 5px 0px rgb(0 0 0 / 12%) !important;
+        overflow: hidden;
 
         // deprecated
         .container-main__footer-buttons-right {

package/src/main.ts

@@ -23,6 +23,7 @@ import CardContext from './components/CardContext';
 import DefaultButton from './components/Buttons/DefaultButton';
 import Collapsible from './components/Collapsible';
 import IdCaption from './components/IdCaption';
+import ResourceMetaInfo from './components/ResourceMetaInfo';
 
 export {
 	DataTableEmptyWrapper,
@@ -47,6 +48,7 @@ export {
 	CardContext,
 	Collapsible,
 	IdCaption,
+	ResourceMetaInfo,
 };
 
 export * from './components/AlertBox';
@@ -94,4 +96,3 @@ export * from './components/layout/Container';
 export * from './components/layout/ContainerFooter';
 export * from './components/layout/Row';
 export * from './components/layout/Line';
-