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

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@farm-investimentos/front-mfe-components",
-	"version": "11.6.0",
+	"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/Form/Form.stories.js

@@ -257,7 +257,7 @@ export const Grid = () => ({
 				</farm-col>
 				<farm-col cols="12" md="3">
 					<farm-label>Label 3</farm-label>
-					<farm-textfield />
+					<farm-textfield hint="some hint text" persistent-hint="true"  />
 				</farm-col>
 				<farm-col cols="12" md="3">
 					<farm-label>Label 4</farm-label>

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;
 			}
 		};

package/src/components/layout/Row/Row.scss

@@ -39,10 +39,4 @@
         margin-top: 12px;
         margin-bottom: 12px;
     }
-
-    &--y-form-gutters > .farm-col {
-        margin-top: 12px;
-        margin-bottom: -12px;
-    }
-
 }

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

@@ -110,34 +110,3 @@ export const yGridGutters = () => ({
 		</farm-row>
 	</div>`,
 });
-
-export const yFormGutters = () => ({
-	template: `<div>
-		<farm-row y-form-gutters>
-			<farm-col md="6">
-				<div style="border:1px solid red;">
-					<farm-label>label 1</farm-label>
-					<farm-textfield />
-				</div>
-			</farm-col>
-			<farm-col md="6">
-				<div style="border:1px solid red;">
-					<farm-label>label 2</farm-label>
-					<farm-textfield />
-				</div>
-			</farm-col>
-			<farm-col md="6">
-				<div style="border:1px solid red;">
-					<farm-label>label 3</farm-label>
-					<farm-textfield hint="some hint text" persistent-hint />
-				</div>
-			</farm-col>
-			<farm-col md="6">
-				<div style="border:1px solid red;">
-					<farm-label>label 4</farm-label>
-					<farm-textfield />
-				</div>
-			</farm-col>
-		</farm-row>
-	</div>`,
-});

package/src/components/layout/Row/Row.vue

@@ -9,7 +9,6 @@
 			'farm-row--no-default-gutters': noDefaultGutters,
 			'farm-row--extra-decrease': extraDecrease,
 			'farm-row--y-grid-gutters': yGridGutters,
-			'farm-row--y-form-gutters': yFormGutters,
 		}"
 	>
 		<slot></slot>
@@ -69,13 +68,6 @@ export default Vue.extend({
 			type: Boolean,
 			default: false,
 		},
-		/**
-		 * Add proper gutters to farm-cols in Y axis to be used with form elements
-		 */
-		yFormGutters: {
-			type: Boolean,
-			default: false,
-		},
 	},
 	inheritAttrs: true,
 });

package/src/scss/FormOverrides.scss

@@ -1,7 +1,9 @@
 .theme--light {
+
 	.fieldset-default,
 	.v-col-fieldset-default {
 		border: 0;
+
 		label {
 			font-weight: bold;
 			display: block;
@@ -15,49 +17,61 @@
 				.v-input__append-inner {
 					margin-top: 8px;
 				}
+
 				.v-input__prepend-inner {
 					margin-top: 8px;
 				}
 			}
+
 			.v-input__prepend-outer {
 				margin-top: 8px;
 			}
 		}
+
 		&.v-text-field.v-input--dense.v-text-field--outlined {
 			.v-input__slot {
 				min-height: 36px !important;
 				height: 36px;
 				background: white;
+
 				fieldset {
 					border-color: var(--v-gray-lighten2);
 				}
+
 				input,
 				.v-select__selection {
 					font-size: 0.75rem;
 				}
+
 				.v-input__append-inner {
 					margin-top: 8px;
 				}
+
 				.v-input__prepend-inner {
 					margin-top: 8px;
 				}
 			}
+
 			.v-input__prepend-outer {
 				margin-top: 8px;
 			}
+
 			&.v-input--is-label-active.v-input--is-focused {
 				.v-input__slot fieldset {
 					border-color: var(--v-secondary-base);
 				}
+
 				input {
 					color: var(--v-secondary-base);
 				}
 			}
+
 			&.error--text {
 				.v-input__slot fieldset {
 					border-color: var(--v-error-base);
 					border-width: 1px;
 				}
+
 				&:after {
 					content: '\F0028';
 					position: absolute;
@@ -68,28 +82,46 @@
 			}
 		}
 	}
+
 	.v-textarea.v-text-field--enclosed .v-text-field__slot {
 		textarea {
 			font-size: 0.75rem;
 			line-height: 1.25rem;
 		}
 	}
-	.v-text-field--outlined:not(.v-input--is-focused):not(.v-input--has-state)
-		> .v-input__control
-		> .v-input__slot
-		fieldset {
+
+	.v-text-field--outlined:not(.v-input--is-focused):not(.v-input--has-state)>.v-input__control>.v-input__slot fieldset {
 		border-color: var(--v-gray-lighten2);
 	}
-	.v-text-field--outlined.v-input--is-focused > .v-input__control > .v-input__slot fieldset {
+
+	.v-text-field--outlined.v-input--is-focused>.v-input__control>.v-input__slot fieldset {
 		border-color: var(--v-gray-lighten2);
 		border-width: 1px;
 	}
+
 	.v-text-field .v-text-field__details {
 		padding-left: 0 !important;
-		min-height: 16px;
+		min-height: 16px !important;
+		margin-bottom: 0 !important;
+	}
+}
+
+.v-text-field {
+	.v-input__slot {
+		margin-bottom: 4px;
+	}
+
+	&.v-text-field--enclosed .v-text-field__details {
+		min-height: 16px !important;
+		margin-bottom: 4px !important;
+	}
+
+	&.v-text-field--solo .v-input__control {
+		min-height: 30px;
 	}
 }
-.v-form {
+
+.v-text-field .v-form {
 	.v-col-fieldset-default {
 		margin-bottom: 0;
 		padding-bottom: 0;
@@ -98,57 +130,63 @@
 			color: var(--v-error-base);
 		}
 	}
+
 	.row.form__footer-buttons--right {
 		margin: 0;
 		margin-top: 1rem;
 		padding: 0;
 		justify-content: flex-end;
+
 		.v-btn {
 			margin-left: 1rem;
 		}
 	}
 }
+
 .v-form.v-form-importfile {
-	> .row:first-child {
+	>.row:first-child {
 		border-bottom: 1px solid var(--v-gray-lighten2);
 		padding: 1rem;
+
 		h3 {
 			font-weight: 700;
 			color: var(--v-secondary-base);
 		}
 	}
 
-	> .row:nth-child(2) {
+	>.row:nth-child(2) {
 		padding: 1rem;
+
 		legend {
 			font-weight: 700;
 			width: 100%;
 		}
 	}
 }
+
 .v-form.form-custom-disabled {
 	.theme--light {
 		&.v-text-field.v-input--is-disabled .v-input__slot {
 			padding-left: 0;
+
 			input,
 			label {
 				color: var(--v-primary-base);
 				font-size: 1rem !important;
 			}
 		}
+
 		&.v-text-field.v-input--is-disabled .v-input__slot fieldset {
 			border: none;
 		}
 	}
 }
-.v-text-field.v-text-field--solo .v-input__control {
-	min-height: 30px;
-}
 
 .theme--light.v-input--switch {
 	.v-input--switch__thumb {
 		color: #ffffff !important;
 	}
+
 	.v-input--switch__track.theme--light {
 		background: #f0643b;
 
@@ -156,6 +194,7 @@
 			background-color: var(--v-secondary-base);
 		}
 	}
+
 	label {
 		font-size: 0.5rem;
 		font-weight: 600;
@@ -168,9 +207,11 @@
 	.v-form {
 		.row.form__footer-buttons--right {
 			justify-content: unset;
+
 			.v-btn {
 				margin-left: 0;
 			}
+
 			.v-btn:not(:first-child) {
 				margin-top: 1rem;
 			}
@@ -183,11 +224,13 @@
 	.v-icon.v-icon {
 		font-size: 22px;
 		color: var(--farm-neutral-darken);
+
 		&.mdi-checkbox-marked,
 		&.mdi-minus-box {
 			color: var(--farm-primary-base);
 		}
 	}
+
 	.v-input--selection-controls__ripple {
 		display: none;
 	}
@@ -198,20 +241,24 @@
 		padding: 8px 12px;
 		height: 36px;
 		border-bottom: none;
+
 		&:hover {
 			background-color: var(--farm-primary-lighten);
 		}
 	}
+
 	.v-list-item .v-list-item__content {
 		padding: 0;
 	}
+
 	.v-list-item__title {
 		font-weight: 700;
 		font-size: 12px;
 		color: var(--farm-text-primary);
 		line-height: 12px;
 	}
+
 	.v-list-item__action:first-child {
 		margin-right: 16px;
 	}
-}
+}