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

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@farm-investimentos/front-mfe-components",
-	"version": "11.6.1",
+	"version": "11.6.2",
 	"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/TextFieldV2/TextFieldV2.scss

@@ -9,7 +9,7 @@
 		height: 36px;
 		border-radius: 5px;
 		padding: 8px;
-		margin-bottom: 8px;
+		margin-bottom: 4px;
 
 		> button {
 			display: flex;

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

@@ -20,7 +20,7 @@ export default {
 			description: {
 				component: `Text field v2<br />
 				selector: <em>farm-texfield-v2</em><br />
-				<span style="color: var(--farm-extra-1-base);">development</span>
+				<span style="color: var(--farm-primary-base);">ready for use</span>
 				`,
 			},
 		},
@@ -229,3 +229,27 @@ export const ToggleVisibility = () => ({
 		<farm-textfield-v2 v-model="v" :type="visible ? 'text' : 'password'"  :icon="visible ? 'eye-off' : 'eye'" @onClickIcon="toggle" />
 	</div>`,
 });
+
+
+export const Compare = () => ({
+	data() {
+		return {
+			v1: '',
+			rules: {
+				required: value => !!value || 'Required field',
+				email: v =>
+					!v ||
+					/^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/.test(v) ||
+					'Must be an e-mail',
+			},
+		};
+	},
+	template: `<div style="width: 480px">
+
+		<farm-label required>Required and e-mail</farm-label>
+		<farm-textfield-v2 v-model="v1" :rules="[rules.required, rules.email]" />
+
+		<farm-textfield v-model="v1" :rules="[rules.required, rules.email]" />
+
+	</div>`,
+});

package/src/components/Tooltip/Tooltip.vue

@@ -21,6 +21,7 @@
 </template>
 <script lang="ts">
 import Vue, { PropType, ref, computed, reactive, onBeforeUnmount } from 'vue';
+import { calculateMainZindex } from '../../helpers';
 
 export default Vue.extend({
 	name: 'farm-tooltip',
@@ -60,6 +61,7 @@ export default Vue.extend({
 		const styles = reactive({
 			left: '0',
 			top: '0',
+			zIndex: 1,
 		});
 
 		const toggleComponent = computed(() => props.value);
@@ -86,7 +88,8 @@ export default Vue.extend({
 					window.scrollY -
 					(popupBoundingClientRect.height + 8) +
 					'px';
-				
+				styles.zIndex = calculateMainZindex();
+
 				hasBeenBoostrapped = true;
 			}
 		};