@farm-investimentos/front-mfe-components 14.2.1 → 15.0.0

package/src/components/Tabs/Tabs.vue

@@ -1,32 +1,56 @@
 <template>
-	<v-tabs color="secondary" v-model="selected">
-		<v-tab
-			v-for="(tab, index) in tabs"
-			:key="index"
-			:class="{ hideCounter: !showCounter }"
-			@change="changeTab(tab, index)"
-			:disabled="!allowUserChange"
-		>
+	<div class="farm-tabs">
+		<div class="tabs" :class="{ 'tabs--disabled': !allowUserChange }">
 			<div
-				v-if="showCounter"
-				:class="{ 'is-selected': isSelected(index) }"
-				class="pl-3 pr-3 pt-2 pb-2 mr-2 rounded-circle d-inline-block white--text"
+				v-for="(tab, index) in tabs"
+				class="tabs__tab"
+				:key="index"
+				:class="{ hideCounter: !showCounter, 'tabs__tab--selected': isSelected(index) }"
+				@click="changeTab(tab, index)"
 			>
-				<span>{{ index + 1 }}</span>
+				<div
+					v-if="showCounter"
+					class="
+						mr-2
+						rounded-circle
+						d-inline-flex
+						align-center
+						justify-center
+						white--text
+					"
+					:class="{ 'is-selected': isSelected(index) }"
+				>
+					<farm-subtitle
+						color="white"
+						tag="span"
+						:type="2"
+						:color-variation="isSelected(index) ? 'base' : 'darken'"
+					>
+						{{ index + 1 }}
+					</farm-subtitle>
+				</div>
+				<farm-subtitle
+					tag="span"
+					:type="2"
+					:color="isSelected(index) ? 'primary' : 'gray'"
+					:color-variation="isSelected(index) ? 'base' : 'darken'"
+				>
+					{{ forceUppercase ? tab.name.toUpperCase() : tab.name }}
+				</farm-subtitle>
 			</div>
-			<span class="black--text text-capitalize">{{ tab.name }}</span>
-		</v-tab>
-	</v-tabs>
+		</div>
+	</div>
 </template>
 
 <script lang="ts">
 import Vue from 'vue';
-import { VTabs, VTab } from 'vuetify/lib/components/VTabs';
 export default Vue.extend({
 	name: 'farm-tabs',
-	data: () => ({
-		selected: 0,
-	}),
+	data() {
+		return {
+			selected: 0,
+		};
+	},
 	props: {
 		tabs: {
 			type: Array,
@@ -45,6 +69,9 @@ export default Vue.extend({
 			type: Boolean,
 			default: true,
 		},
+		/**
+		 * Initial tab selected
+		 */
 		initialSelect: {
 			type: Number,
 			default: 0,
@@ -53,19 +80,31 @@ export default Vue.extend({
 			type: Boolean,
 			default: true,
 		},
+		/**
+		 * Force uppercase in tab
+		 */
+		forceUppercase: {
+			type: Boolean,
+			default: true,
+		},
 	},
 	methods: {
 		isSelected(index) {
 			return index === this.selected;
 		},
 		changeTab(_, index) {
+			if (!this.allowUserChange) return;
+			this.selected = index;
 			this.$emit('update', this.tabs[index]);
 		},
 		next() {
+			if (this.tabs.length - 1 > this.selected + 1)
+				return this.$emit('update', this.tabs[this.selected]);
 			this.selected = this.selected + 1;
 			this.$emit('update', this.tabs[this.selected]);
 		},
 		previous() {
+			if (this.selected - 1 < 0) return this.$emit('update', this.tabs[this.selected]);
 			this.selected = this.selected - 1;
 			this.$emit('update', this.tabs[this.selected]);
 		},
@@ -83,20 +122,8 @@ export default Vue.extend({
 	created() {
 		this.selected = this.initialSelect;
 	},
-	components: {
-		VTabs,
-		VTab,
-	},
 });
 </script>
 <style scoped lang="scss">
-div.rounded-circle {
-	background-color: var(--v-gray-lighten3);
-	&.is-selected {
-		background-color: var(--v-secondary-base);
-	}
-}
-.v-tab--active.v-tab--disabled {
-	opacity: 1;
-}
+@import './Tabs.scss';
 </style>

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

@@ -2,58 +2,58 @@ import { shallowMount } from '@vue/test-utils';
 import Tabs from '../Tabs';
 
 describe('Tabs component', () => {
-    let wrapper;
-
-    beforeEach(() => {
-        wrapper = shallowMount(Tabs);
-    });
-
-    test('Created hook', () => {
-        expect(wrapper).toBeDefined();
-    });
-
-    describe('methods', () => {
-        it('Should check isSelected', () => {
-            expect(wrapper.vm.isSelected(1)).toBeFalsy();
-        });
-
-        it('Should emit event when tab is changed', () => {
-            wrapper.vm.changeTab();
-            expect(wrapper.emitted().update).toBeTruthy();
-        });
-
-        it('Should emit event when next is triggered', () => {
-            wrapper.vm.next();
-            expect(wrapper.emitted().update).toBeTruthy();
-        });
-
-        it('Should emit event when previous is triggered', () => {
-            wrapper.vm.previous();
-            expect(wrapper.emitted().update).toBeTruthy();
-        });
-
-        it('Should emit event when toIndex is triggered', () => {
-            wrapper.vm.toIndex(1);
-            expect(wrapper.vm.selected).toEqual(1);
-            expect(wrapper.emitted().update).toBeTruthy();
-        });
-
-        it('Should updateTab in parent and route', () => {
-            const _component = {
-                currentTab: '',
-                $router: {
-                    history: {
-                        current: {
-                            path: 'some',
-                        },
-                    },
-                    push: () => {},
-                },
-            };
-            const spyObj = jest.spyOn(_component.$router, 'push');
-            wrapper.vm.updateTabRouting(_component, { path: 'desembolso' }, 'nextRoutePrefix');
-            expect(_component.currentTab).toEqual('desembolso');
-            expect(spyObj).toHaveBeenCalled();
-        });
-    });
+	let wrapper;
+
+	beforeEach(() => {
+		wrapper = shallowMount(Tabs);
+	});
+
+	test('Created hook', () => {
+		expect(wrapper).toBeDefined();
+	});
+
+	describe('methods', () => {
+		it('Should check isSelected', () => {
+			expect(wrapper.vm.isSelected(1)).toBeFalsy();
+		});
+
+		it('Should emit event when tab is changed', () => {
+			wrapper.vm.changeTab();
+			expect(wrapper.emitted().update).toBeTruthy();
+		});
+
+		it('Should emit event when next is triggeredx', () => {
+			wrapper.vm.next();
+			expect(wrapper.emitted().update).toBeTruthy();
+		});
+
+		it('Should emit event when previous is triggered', () => {
+			wrapper.vm.previous();
+			expect(wrapper.emitted().update).toBeTruthy();
+		});
+
+		it('Should emit event when toIndex is triggered', () => {
+			wrapper.vm.toIndex(1);
+			expect(wrapper.vm.selected).toEqual(1);
+			expect(wrapper.emitted().update).toBeTruthy();
+		});
+
+		it('Should updateTab in parent and route', () => {
+			const _component = {
+				currentTab: '',
+				$router: {
+					history: {
+						current: {
+							path: 'some',
+						},
+					},
+					push: () => {},
+				},
+			};
+			const spyObj = jest.spyOn(_component.$router, 'push');
+			wrapper.vm.updateTabRouting(_component, { path: 'desembolso' }, 'nextRoutePrefix');
+			expect(_component.currentTab).toEqual('desembolso');
+			expect(spyObj).toHaveBeenCalled();
+		});
+	});
 });

package/src/components/Tabs/index.ts

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

package/src/components/TextArea/TextArea.scss

@@ -12,7 +12,7 @@
 		align-items: center;
 		gap: 8px;
 		border: 1px solid;
-		border-color: var(--farm-gray-lighten);
+		border-color: var(--farm-bw-black-10);
 		min-height: 36px;
 		border-radius: 5px;
 		padding: 8px 0 0 8px;
@@ -23,7 +23,7 @@
 		& > textarea {
 			flex: 1;
 			outline: none;
-			color: var(--farm-text-primary);
+			color: var(--farm-bw-black-50);
 			font-size: 12px;
 			font-weight: 400;
 			max-width: 100%;
@@ -31,9 +31,13 @@
 		}
 	}
 
+	&--focused .farm-textarea--textarea {
+		border-color: var(--farm-bw-black-30);
+	}
+
 	&--disabled {
 		textarea {
-			color: var(--farm-gray-base);
+			color: var(--farm-bw-black-30);
 		}
 	}
 

package/src/components/TextArea/TextArea.vue

@@ -9,6 +9,7 @@
 			'farm-textarea--error': hasError,
 			'farm-textarea--disabled': disabled,
 			'farm-textarea--hiddendetails': hideDetails,
+			'farm-textarea--focused': isFocus && !readonly,
 		}"
 	>
 		<div

package/src/components/TextFieldV2/TextFieldV2.scss

@@ -12,7 +12,7 @@
 		align-items: center;
 		gap: 8px;
 		border: 1px solid;
-		border-color: var(--farm-gray-lighten);
+		border-color: var(--farm-bw-black-10);
 		height: 36px;
 		border-radius: 5px;
 		padding: 8px;
@@ -26,7 +26,7 @@
 		& > input {
 			flex: 1;
 			outline: none;
-			color: var(--farm-text-primary);
+			color: var(--farm-bw-black-50);
 			font-size: 12px;
 			font-weight: 400;
 			max-width: 100%;
@@ -39,12 +39,16 @@
 		width: 100%;
 	}
 
+	&--focused .farm-textfield--input {
+		border-color: var(--farm-bw-black-30);
+	}
+
 	&--disabled {
 		input {
-			color: var(--farm-gray-base);
+			color: var(--farm-bw-black-30);
 		}
 		.farm-icon {
-			color: var(--farm-gray-lighten);
+			color: var(--farm-bw-black-30);
 			cursor: default;
 		}
 	}

package/src/components/TextFieldV2/TextFieldV2.vue

@@ -7,6 +7,7 @@
 			'farm-textfield--touched': isTouched,
 			'farm-textfield--blured': isBlured,
 			'farm-textfield--error': hasError,
+			'farm-textfield--focused': isFocus && !readonly,
 			'farm-textfield--disabled': disabled,
 			'farm-textfield--hiddendetails': hideDetails,
 			'farm-textfield--uppercase': isUppercase,

package/src/components/Tooltip/Tooltip.scss

@@ -8,14 +8,12 @@
 
 .farm-tooltip__popup {
 	background-color: rgba(themeColor('primary'), 0.95);
-
-	@each $color in $colors {
-		@each $color in $theme-colors-list {
-			&.farm-tooltip--#{$color} {
-				background-color: rgba(themeColor($color), 0.95);
-			}
+	@each $color in $theme-colors-list {
+		&.farm-tooltip--#{$color} {
+			background-color: rgba(themeColor($color), 0.95);
 		}
 	}
+
 }
 
 .farm-tooltip__popup {
@@ -26,10 +24,10 @@
 	width: 160px;
 	contain: content;
 	color: white;
-	background-color: themeColor('primary');
-	border-radius: 4px;
-	font-family: 'Montserrat', sans-serif !important;
-	font-size: 14px;
+	border-radius: 5px;
+	font-family: 'Manrope', sans-serif !important;
+	font-size: 12px;
+	font-weight: 500px;
 	padding: 8px 12px;
 	display: block;
 

package/src/components/Tooltip/Tooltip.vue

@@ -33,16 +33,18 @@ export default Vue.extend({
 			type: String as PropType<
 				| 'primary'
 				| 'secondary'
+				| 'secondary-green'
+				| 'secondary-golden'
 				| 'neutral'
 				| 'info'
 				| 'success'
 				| 'error'
 				| 'warning'
-				| 'success'
 				| 'extra-1'
 				| 'extra-2'
+				| 'gray'
 			>,
-			default: 'secondary',
+			default: 'gray',
 		},
 		/**
 		 * Control visibility

package/src/components/Typography/BodyText/BodyText.scss

@@ -1,8 +1,8 @@
 .farm-bodytext {
-    &--1 {
-        letter-spacing: 0.5px;
-    }
-    &--2 {
-        letter-spacing: 0.25px;
-    }
-}
+	&--1 {
+		letter-spacing: 0.5px;
+	}
+	&--2 {
+		letter-spacing: 0.5px;
+	}
+}

package/src/components/Typography/Caption/Caption.scss

@@ -1,8 +1,8 @@
 .farm-subtitle {
-    &--1 {
-        letter-spacing: 0.4px;
-    }
-    &--2 {
-        letter-spacing: 0.15px;
-    }
-}
+	&--1 {
+		letter-spacing: 0.5px;
+	}
+	&--2 {
+		letter-spacing: 0.5px;
+	}
+}

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

@@ -19,7 +19,7 @@ export default {
 export const Primary = () => ({
 	data() {
 		return {
-			variations: ['regular', 'medium'],
+			variations: ['regular', 'medium', 'semiBold'],
 		};
 	},
 	template: `<div>

package/src/components/Typography/Caption/Caption.vue

@@ -22,7 +22,10 @@ export default Vue.extend({
 		/**
 		 * Variation of the caption
 		 */
-		variation: { type: String as PropType<'regular' | 'medium'>, default: 'medium' },
+		variation: {
+			type: String as PropType<'regular' | 'medium' | 'semiBold'>,
+			default: 'medium',
+		},
 	},
 	setup(props) {
 		const { variation } = toRefs(props);

package/src/components/Typography/Caption/configurations.ts

@@ -1,6 +1,7 @@
 const Keys = {
-	'regular': { weight: 400, size: 'sm' },
-	'medium': { weight: 500, size: 'sm' },
+	regular: { weight: 400, size: 'sm' },
+	medium: { weight: 500, size: 'sm' },
+	semiBold: { weight: 600, size: 'sm' },
 };
 
 export { Keys };

package/src/components/Typography/Heading/Heading.scss

@@ -1,20 +1,20 @@
 .farm-heading-- {
-    &h1 {
-        letter-spacing: -1.5px;
-    }
-    &h2 {
-        letter-spacing: -0.5px;
-    }
-    &h3 {
-        letter-spacing: 0;
-    }
-    &h4 {
-        letter-spacing: 0.25px;
-    }
-    &h5 {
-        letter-spacing: 0;
-    }
-    &h6 {
-        letter-spacing: 0.15px;
-    }
-}
+	&h1 {
+		letter-spacing: 0.5px;
+	}
+	&h2 {
+		letter-spacing: 0.5px;
+	}
+	&h3 {
+		letter-spacing: 0.5px;
+	}
+	&h4 {
+		letter-spacing: 0.75px;
+	}
+	&h5 {
+		letter-spacing: 0.75px;
+	}
+	&h6 {
+		letter-spacing: 0.75px;
+	}
+}

package/src/components/Typography/Heading/configurations.ts

@@ -1,9 +1,9 @@
 const Keys = {
-	1: { weight: 300, size: '60px' },
-	2: { weight: 300, size: '56px' },
-	3: { weight: 400, size: '48px' },
-	4: { weight: 400, size: '32px' },
-	5: { weight: 400, size: 'xl' },
+	1: { weight: 200, size: '60px' },
+	2: { weight: 300, size: '52px' },
+	3: { weight: 600, size: '44px' },
+	4: { weight: 500, size: '32px' },
+	5: { weight: 600, size: 'xl' },
 	6: { weight: 500, size: 'lg' },
 };
 

package/src/components/Typography/Small/Small.scss

@@ -0,0 +1,3 @@
+.farm-small {
+	letter-spacing: 0.5px;
+}

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

@@ -0,0 +1,34 @@
+import Small from './Small';
+
+export default {
+	title: 'Typography/Small',
+	component: Small,
+	parameters: {
+		docs: {
+			description: {
+				component: `Small<br />
+				selector: <em>farm-bodysmall</em><br />
+				<span style="color: var(--farm-primary-base);">ready for use</span>
+				`,
+			},
+		},
+		viewMode: 'docs',
+	},
+};
+
+export const Primary = () => ({
+	data() {
+		return {
+			variations: ['regular', 'medium', 'bold'],
+		};
+	},
+	template: `<div >
+        <div v-for="variation in variations" :key="variation">
+            <farm-bodysmall  :variation="variation">
+                Small {{ variation }}
+            </farm-bodysmall>
+        </div>
+	</div>`,
+});
+
+Primary.storyName = 'Basic';

package/src/components/Typography/Small/Small.vue

@@ -0,0 +1,47 @@
+<template>
+	<farm-typography
+		v-bind="$attrs"
+		v-on="$listeners"
+		:weight="weight"
+		:size="size"
+		:key="key"
+		:class="{ 'farm-small': true, [`farm-small--${variation}`]: true }"
+	>
+		<slot></slot>
+	</farm-typography>
+</template>
+<script lang="ts">
+import Vue, { computed, ref, watch, toRefs, PropType } from 'vue';
+
+import { Keys } from './configurations';
+
+export default Vue.extend({
+	inheritAttrs: true,
+	name: 'farm-bodysmall',
+	props: {
+		/**
+		 * Variation of the small
+		 */
+		variation: { type: String as PropType<'regular' | 'medium' | 'bold'>, default: 'medium' },
+	},
+	setup(props) {
+		const { variation } = toRefs(props);
+		const key = ref(variation.value);
+
+		watch(
+			() => props,
+			() => {
+				key.value = variation.value;
+			}
+		);
+
+		const config = computed(() => Keys[key.value]);
+		const weight = computed(() => config.value.weight);
+		const size = computed(() => config.value.size);
+		return { weight, size, key, variation };
+	},
+});
+</script>
+<style lang="scss" scoped>
+@import 'Small';
+</style>

package/src/components/Typography/Small/__tests__/Small.spec.js

@@ -0,0 +1,31 @@
+import { shallowMount } from '@vue/test-utils';
+import Small from '../Small.vue';
+
+describe('Small component', () => {
+	let wrapper;
+	let component;
+
+	beforeEach(() => {
+		wrapper = shallowMount(Small, {});
+		component = wrapper.vm;
+	});
+
+	test('Created hook', () => {
+		expect(wrapper).toBeDefined();
+	});
+
+	describe('mount component', () => {
+		it('renders correctly', () => {
+			expect(wrapper.element).toMatchSnapshot();
+		});
+	});
+
+	describe('Computed properties', () => {
+		it('Should return weight 500', async () => {
+			await wrapper.setProps({
+				variation: 'medium',
+			});
+			expect(component.weight).toEqual(500);
+		});
+	});
+});

package/src/components/Typography/Small/configurations.ts

@@ -0,0 +1,7 @@
+const Keys = {
+	regular: { weight: 400, size: '10px' },
+	medium: { weight: 500, size: '10px' },
+	bold: { weight: 700, size: '10px' },
+};
+
+export { Keys };

package/src/components/Typography/Subtitle/Subtitle.scss

@@ -1,8 +1,8 @@
 .farm-subtitle {
-    &--1 {
-        letter-spacing: 0.15px;
-    }
-    &--2 {
-        letter-spacing: 0.1px;
-    }
-}
+	&--1 {
+		letter-spacing: 0.5px;
+	}
+	&--2 {
+		letter-spacing: 0.5px;
+	}
+}