@farm-investimentos/front-mfe-components-vue3 1.0.1 → 1.0.3

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@farm-investimentos/front-mfe-components-vue3",
-	"version": "1.0.1",
+	"version": "1.0.3",
 	"private": false,
 	"repository": {
 		"type": "git",

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

@@ -14,15 +14,15 @@ export default {
 };
 
 export const Primary = () => ({
-	template: '<ConfirmButton>Confirm Button</ConfirmButton>',
+	template: '<farm-btn-confirm>Confirm Button</farm-btn-confirm>',
 });
 
 export const HtmlMarkup = () => ({
-	template: '<ConfirmButton><em>I am italic</strong></em></ConfirmButton>',
+	template: '<farm-btn-confirm><em>I am italic</strong></em></farm-btn-confirm>',
 });
 
 export const Props = () => ({
-	template: '<ConfirmButton title="custom title">custom title (hover me)</ConfirmButton>',
+	template: '<farm-btn-confirm title="custom title">custom title (hover me)</farm-btn-confirm>',
 });
 
 export const Listener = () => ({
@@ -32,15 +32,15 @@ export const Listener = () => ({
 		};
 	},
 	template: `
-		<ConfirmButton color="error" @click="x = x + 1">click me to change: {{ x }}</ConfirmButton>
+		<farm-btn-confirm color="error" @click="x = x + 1">click me to change: {{ x }}</farm-btn-confirm>
 	`,
 });
 
 export const Iconed = () => ({
-	template: `<div>
-		<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>`,
+	template: `<farm-box>
+		<farm-btn-confirm :icon="true">default icon</farm-btn-confirm>
+		<farm-btn-confirm :icon="true" customIcon="information-outline">information-outline</farm-btn-confirm>
+		<farm-btn-confirm :icon="true" customIcon="account-search">account-search</farm-btn-confirm>
+		<farm-btn-confirm :icon="true" customIcon="account-search" disabled>account-search</farm-btn-confirm>
+	</farm-box>`,
 });

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

@@ -20,7 +20,7 @@ describe('DefaultButton component', () => {
 			expect(component.isRound).toBeFalsy();
 		});
 
-		it('get isRound false', async () => {
+		it('get isRound truthy', async () => {
 			await wrapper.setProps({ icon: true });
 			expect(component.isRound).toBeTruthy();
 		});

package/src/components/DialogFooter/DialogFooter.scss

@@ -10,7 +10,7 @@
 }
 
 .farm-btn {
-    margin-left: gutter('none');
+    margin-left: gutter('sm');
     margin-top: 0;
 
     .farm-icon {

package/src/components/DialogFooter/__tests__/{DialogFooter.spec.js → DialogFooter.spec.ts}

@@ -1,6 +1,6 @@
 import { shallowMount } from '@vue/test-utils';
 
-import DialogFooter from '../DialogFooter';
+import DialogFooter from '../DialogFooter.vue';
 
 describe('DialogFooter component', () => {
 	let wrapper;

package/src/components/Typography/OverlayText/OverlayText.vue

@@ -11,7 +11,6 @@
 </template>
 <script lang="ts">
 
-
 export default {
 	inheritAttrs: true,
 	name: 'farm-overlaytext',

package/src/components/Typography/Typography.vue

@@ -119,7 +119,6 @@ export default {
 			style.value.lineHeight = lineHeight.value;
 		}
 
-		// eslint-disable-next-line
 		return {
 			style,
 			isSizeFromBreakpoints,

package/src/components/Typography/__tests__/{Typography.spec.js → Typography.spec.ts}

@@ -1,6 +1,6 @@
 import { shallowMount } from '@vue/test-utils';
 
-import Typography from '../Typography';
+import Typography from '../Typography.vue';
 
 describe('Typography component', () => {
 	let wrapper;
@@ -30,7 +30,7 @@ describe('Typography component', () => {
 			expect(component.isSizeFromBreakpoints).toBeFalsy();
 		});
 
-		it('Should have isSizeFromBreakpoints truthy', async () => {
+		it('Should have isSizeFromBreakpoints truthy', () => {
 			const wrapperTest = shallowMount(Typography, {
 				propsData: {
 					size: 'lg',
@@ -45,14 +45,14 @@ describe('Typography component', () => {
 	});
 
 	describe('Prop data', () => {
-		it('Should have li tag', async () => {
+		it('Should have li tag', () => {
 			expect(component.tag).toEqual('li');
 		});
 
-		it('Should not allow invalid html tag', async () => {
+		it('Should not allow invalid html tag', () => {
 			const wrapperTest = shallowMount(Typography, {
 				propsData: {
-					tag: 'section',
+					tag: 'section' as any,
 				},
 			});
 			expect(wrapperTest.vm.tag).toEqual('p');

package/src/components/ValueCaption/ValueCaption.stories.js

@@ -58,3 +58,27 @@ export const Colors = () => ({
 		</farm-valuecaption>
 	</div>`,
 });
+
+export const NoTitle = () => ({
+	template: `
+    <farm-valuecaption
+    icon="account-box-outline"
+    >
+		<template v-slot:subtitle>
+			R$ 1.000,00
+		</template>
+    </farm-valuecaption>
+    `,
+});
+
+export const NoSubTitle = () => ({
+	template: `
+    <farm-valuecaption
+    icon="account-box-outline"
+    >
+        <template v-slot:title>
+            Upper Line Text
+        </template>
+    </farm-valuecaption>
+    `,
+});

package/src/components/ValueCaption/ValueCaption.vue

@@ -50,8 +50,8 @@ export default {
 	},
 
 	setup(_, { slots }) {
-		const hasTitle = computed(() => slots.title);
-		const hasSubtitle = computed(() => slots.subtitle);
+		const hasTitle = computed(() => !!slots.title);
+		const hasSubtitle = computed(() => !!slots.subtitle);
 
 		return { hasSubtitle, hasTitle };
 	},

package/src/components/ValueCaption/__tests__/ValueCaption.spec.ts

@@ -0,0 +1,31 @@
+import { shallowMount } from '@vue/test-utils';
+
+import ValueCaption from '../ValueCaption.vue';
+
+describe('ValueCaption component', () => {
+	test('Created hook', () => {
+		const wrapper = shallowMount(ValueCaption);
+		expect(wrapper).toBeDefined();
+		expect(wrapper.vm.hasTitle).toBeFalsy();
+	});
+
+	describe('Computed properties', () => {
+		it('hasTitle truthy', () => {
+			const wrapper = shallowMount(ValueCaption, {
+				slots: {
+					title: '',
+				},
+			});
+			expect(wrapper.vm.hasTitle).toBeTruthy();
+		});
+
+		it('hasSubtitle truthy', () => {
+			const wrapper = shallowMount(ValueCaption, {
+				slots: {
+					subtitle: '',
+				},
+			});
+			expect(wrapper.vm.hasSubtitle).toBeTruthy();
+		});
+	});
+});

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

@@ -1,15 +0,0 @@
-import { shallowMount } from '@vue/test-utils';
-
-import ValueCaption from '../ValueCaption.vue';
-
-describe('ValueCaption component', () => {
-	let wrapper;
-
-	beforeEach(() => {
-		wrapper = shallowMount(ValueCaption);
-	});
-
-	test('Created hook', () => {
-		expect(wrapper).toBeDefined();
-	});
-});