@farm-investimentos/front-mfe-components 11.5.3 → 11.5.5

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@farm-investimentos/front-mfe-components",
-	"version": "11.5.3",
+	"version": "11.5.5",
 	"author": "farm investimentos",
 	"private": false,
 	"main": "./dist/front-mfe-components.common.js",

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

@@ -142,6 +142,10 @@ export const DisabledButtons = () => ({
         <farm-btn v-for="color of colors":key="color + '_disabled_icon'" :color="color" plain disabled>
             <farm-icon>book</farm-icon> {{ color }}
         </farm-btn>
+		<farm-btn v-for="color of colors":key="'random_icon_' + color" :color="color" disabled>
+			<farm-icon>book</farm-icon>
+			{{ color }}
+	</farm-btn>
 	</div>`,
 });
 

package/src/components/ContextMenu/ContextMenu.stories.js

@@ -19,6 +19,39 @@ export default {
 };
 
 export const Primary = () => ({
+	template: `<div style="padding-left: 120px; padding-top: 80px; display: flex;">
+        <farm-contextmenu>
+            some text
+            <template v-slot:activator="{ on, attrs }">
+                <farm-btn
+					v-bind="attrs"
+					v-on="on"
+				>
+					toggle
+				</farm-btn>
+            </template>
+        </farm-contextmenu>
+	</div>`,
+});
+
+export const IconActivator = () => ({
+	template: `<div style="padding-left: 120px; padding-top: 80px; display: flex;">
+        <farm-contextmenu>
+            some text
+            <template v-slot:activator="{ on, attrs }">
+                <farm-btn
+					v-bind="attrs"
+					v-on="on"
+					icon
+				>
+					<farm-icon>help-circle</farm-icon>
+				</farm-btn>
+            </template>
+        </farm-contextmenu>
+	</div>`,
+});
+
+export const VModel = () => ({
 	data() {
 		return {
 			value: false,
@@ -160,4 +193,4 @@ export const MaxHeight = () => ({
             </template>
         </farm-contextmenu>
 	</div>`,
-});
+});

package/src/components/ContextMenu/ContextMenu.vue

@@ -1,6 +1,6 @@
 <template>
 	<div class="farm-contextmenu" ref="parent">
-		<span ref="activator">
+		<span ref="activator" @click="click">
 			<slot name="activator"></slot>
 		</span>
 
@@ -66,6 +66,7 @@ export default Vue.extend({
 		const outClick = (event: Event) => {
 			if (activator && !activator.value.contains(event.target)) {
 				emit('input', false);
+				inputValue.value = false;
 			}
 		};
 
@@ -74,12 +75,11 @@ export default Vue.extend({
 		};
 
 		watch(
-			() => props.value,
+			() => inputValue.value,
 			newValue => {
 				if (newValue) {
 					if (!hasBeenBoostrapped) {
 						document.querySelector('body').appendChild(popup.value);
-
 						hasBeenBoostrapped = true;
 					}
 					window.addEventListener('click', outClick);
@@ -88,11 +88,13 @@ export default Vue.extend({
 				} else {
 					window.removeEventListener('click', outClick);
 				}
-				inputValue.value = newValue;
 			}
 		);
 
 		const calculatePosition = () => {
+			if (!parent.value || !activator.value.children[0]) {
+				return;
+			}
 			const parentBoundingClientRect = parent.value.getBoundingClientRect();
 			const activatorBoundingClientRect = activator.value.children[0].getBoundingClientRect();
 			const popupClientRect = popup.value.getBoundingClientRect();
@@ -102,14 +104,9 @@ export default Vue.extend({
 				window.scrollY +
 				(!bottom.value ? 0 : activatorBoundingClientRect.height);
 
-			let offsetLeft = activatorBoundingClientRect.left;
-			if (popupClientRect.width > activatorBoundingClientRect.width) {
-				const w = popupClientRect.width < 96 ? 96 : popupClientRect.width;
-				offsetLeft =
-					activatorBoundingClientRect.left +
-					activatorBoundingClientRect.width / 2 -
-					w / 2;
-			}
+			const w = popupClientRect.width < 96 ? 96 : popupClientRect.width;
+			let offsetLeft =
+				activatorBoundingClientRect.left + activatorBoundingClientRect.width / 2 - w / 2;
 
 			styles.minWidth =
 				(activatorBoundingClientRect.width > 96
@@ -117,10 +114,10 @@ export default Vue.extend({
 					: 96) + 'px';
 
 			//Do not allow to open outside window
-			
+
 			const rightEdge = offsetLeft + popupClientRect.width;
 			const clientWidth = document.documentElement.clientWidth;
-			
+
 			if (rightEdge > clientWidth - 12) {
 				offsetLeft = clientWidth - 12 - popupClientRect.width;
 			}
@@ -131,7 +128,6 @@ export default Vue.extend({
 				offsetTop -= bottomEdge - window.scrollY - clientHeight + 12;
 			}
 
-
 			styles.top = `${offsetTop}px`;
 			styles.left = `${offsetLeft}px`;
 			styles.zIndex = calculateMainZindex();
@@ -145,12 +141,18 @@ export default Vue.extend({
 			}
 		});
 
+		const click = () => {
+			inputValue.value = !inputValue.value;
+			emit('input', inputValue.value);
+		};
+
 		return {
 			parent,
 			popup,
 			activator,
 			styles,
 			inputValue,
+			click,
 		};
 	},
 });

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

@@ -3,9 +3,11 @@ import ContextMenu from '../ContextMenu';
 
 describe('ContextMenu component', () => {
 	let wrapper;
+	let component;
 
 	beforeEach(() => {
 		wrapper = shallowMount(ContextMenu, {});
+		component = wrapper.vm;
 	});
 
 	test('Created hook', () => {
@@ -17,4 +19,11 @@ describe('ContextMenu component', () => {
 			expect(wrapper.element).toMatchSnapshot();
 		});
 	});
+
+	describe('Methods', () =>{
+		it('Should handle click', () =>{
+			component.click();
+			expect(component.inputValue).toBeTruthy();
+		})
+	})
 });

package/src/components/CopyToClipboard/CopyToClipboard.stories.js

@@ -19,22 +19,25 @@ export default {
 };
 
 export const Primary = () => ({
-	components: { 'farm-copytoclipboard': CopyToClipboard },
 	template: `<div style="max-width: 480px; padding-top: 80px; padding-left: 80px;">
 		<farm-copytoclipboard toCopy="To be copied" />
     </div>`,
 });
 
 export const NoIcon = () => ({
-	components: { 'farm-copytoclipboard': CopyToClipboard },
 	template: `<div style="max-width: 480px; padding-top: 80px; padding-left: 80px;">
 		<farm-copytoclipboard toCopy="To be copied" :isIcon="false" />
     </div>`,
 });
 
 export const CustomSuccessMessage = () => ({
-	components: { 'farm-copytoclipboard': CopyToClipboard },
 	template: `<div style="max-width: 480px; padding-top: 80px; padding-left: 80px;">
-		<farm-copytoclipboard toCopy="To be copied" success-message="Custom Succes Message" />
+		<farm-copytoclipboard toCopy="To be copied" success-message="Custom Success Message" />
+    </div>`,
+});
+
+export const CustomTooltipColor = () => ({
+	template: `<div style="max-width: 480px; padding-top: 80px; padding-left: 80px;">
+		<farm-copytoclipboard toCopy="To be copied" tooltip-color="info" />
     </div>`,
 });

package/src/components/CopyToClipboard/CopyToClipboard.vue

@@ -1,5 +1,5 @@
 <template>
-	<farm-tooltip v-model="show">
+	<farm-tooltip v-model="show" :color="tooltipColor">
 		{{ feedbackMessage }}
 		<template v-slot:activator="{}">
 			<farm-btn v-if="isIcon" title="Copiar" icon :disabled="disabled" @click="onClick">
@@ -14,7 +14,7 @@
 </template>
 
 <script lang="ts">
-import Vue, { ref, toRefs } from 'vue';
+import Vue, { PropType, ref, toRefs } from 'vue';
 import { toClipboard } from '@farm-investimentos/front-mfe-libs-ts';
 
 export default Vue.extend({
@@ -35,6 +35,24 @@ export default Vue.extend({
 			type: String,
 			default: 'Conteúdo copiado para a área de trabalho',
 		},
+		/**
+		 * Tooltip color
+		 */
+		tooltipColor: {
+			type: String as PropType<
+				| 'primary'
+				| 'secondary'
+				| 'neutral'
+				| 'info'
+				| 'success'
+				| 'error'
+				| 'warning'
+				| 'success'
+				| 'extra-1'
+				| 'extra-2'
+			>,
+			default: 'secondary',
+		},
 	},
 	setup(props) {
 		const show = ref(false);

package/src/components/DialogFooter/DialogFooter.scss

@@ -2,7 +2,7 @@
 @import '../../configurations/mixins';
 
 .farm-dialog__footer {
-    border-top: 1px solid var(--v-gray-lighten2);
+    border-top: 1px solid var(--farm-stroke-base);
     padding: gutter('md');
     display: flex;
     flex-direction: row;
@@ -10,7 +10,7 @@
 }
 
 .farm-btn {
-    margin-left: gutter();
+    margin-left: gutter('sm');
     margin-top: 0;
 
     .farm-icon {

package/src/components/Form/Form.stories.js

@@ -234,4 +234,60 @@ export const DatePickers = () => ({
             </div>
         </farm-form>
     `,
+});
+
+export const Grid = () => ({
+	data() {
+		return {
+			
+		};
+	},
+	template: `
+	<farm-container>
+        <farm-form ref="form">
+			
+			<farm-row>
+				<farm-col cols="12" md="3">
+					<farm-label>Label 1</farm-label>
+					<farm-textfield />
+				</farm-col>
+				<farm-col cols="12" md="3">
+					<farm-label>Label 2</farm-label>
+					<farm-textfield />
+				</farm-col>
+				<farm-col cols="12" md="3">
+					<farm-label>Label 3</farm-label>
+					<farm-textfield />
+				</farm-col>
+				<farm-col cols="12" md="3">
+					<farm-label>Label 4</farm-label>
+					<farm-textfield />
+				</farm-col>
+				<farm-col cols="12" md="6">
+					<farm-label>Label 6</farm-label>
+					<farm-textfield />
+				</farm-col>
+				<farm-col cols="12" md="2">
+					<farm-label>Label 7</farm-label>
+					<farm-textfield />
+				</farm-col>
+				<farm-col cols="12" md="4">
+					<farm-label>Label 4</farm-label>
+					<farm-textfield />
+				</farm-col>
+			</farm-row>
+			
+            <farm-row extra-decrease>
+				<farm-container-footer>
+					<farm-row>
+						<farm-col align="right">
+							<farm-btn color="secondary" outlined @click="$refs.form.reset()" class="mr-2">Reset</farm-btn>
+							<farm-btn>Salvar</farm-btn>
+						</farm-col>
+					</farm-row>
+				</farm-container-footer>
+			</farm-row>
+        </farm-form>
+	</farm-container>
+    `,
 });

package/src/components/IdCaption/IdCaption.stories.js

@@ -149,3 +149,37 @@ export const CustomTag = () => ({
     </farm-idcaption>
     `,
 });
+
+export const CustomSuccessMessageAfterCopyToClipboard = () => ({
+	template: `
+    <farm-idcaption 
+        icon="account-box-outline"
+        copy-text="Custom Success Message to be copied"
+        success-message="Custom Success Message"
+    >
+        <template v-slot:title>
+            <b>Upper Line Text</b>
+        </template>
+        <template v-slot:subtitle>
+            <b>Lower:</b> Line Text Line Text Line Text
+        </template>
+    </farm-idcaption>
+    `,
+});
+
+export const CustomTooltipColor = () => ({
+	template: `
+    <farm-idcaption 
+        icon="account-box-outline"
+        copy-text="Custom Success Message to be copied"
+        tooltip-color="info"
+    >
+        <template v-slot:title>
+            <b>Upper Line Text</b>
+        </template>
+        <template v-slot:subtitle>
+            <b>Lower:</b> Line Text Line Text Line Text
+        </template>
+    </farm-idcaption>
+    `,
+});

package/src/components/IdCaption/IdCaption.vue

@@ -16,7 +16,12 @@
 			<farm-caption variation="regular" color="gray" v-if="hasSubtitle">
 				<span>
 					<slot name="subtitle"></slot>
-					<farm-copytoclipboard v-if="copyText" :toCopy="copyText" />
+					<farm-copytoclipboard
+						v-if="copyText"
+						:toCopy="copyText"
+						:successMessage="successMessage"
+						:tooltipColor="tooltipColor"
+					/>
 				</span>
 			</farm-caption>
 		</div>
@@ -59,6 +64,7 @@ export default Vue.extend({
 		 */
 		copyText: {
 			type: String,
+			default: 'Conteúdo copiado para a área de trabalho',
 		},
 		/**
 		 * Has link?
@@ -67,6 +73,31 @@ export default Vue.extend({
 			type: Boolean,
 			default: false,
 		},
+		/**
+		 * Success message content after copy
+		 */
+		successMessage: {
+			type: String,
+			default: 'Conteúdo copiado para a área de trabalho',
+		},
+		/**
+		 * Tooltip color
+		 */
+		tooltipColor: {
+			type: String as PropType<
+				| 'primary'
+				| 'secondary'
+				| 'neutral'
+				| 'info'
+				| 'success'
+				| 'error'
+				| 'warning'
+				| 'success'
+				| 'extra-1'
+				| 'extra-2'
+			>,
+			default: 'secondary',
+		},
 	},
 
 	setup(_, { slots }) {
@@ -79,5 +110,5 @@ export default Vue.extend({
 </script>
 
 <style lang="scss" scoped>
-@import './IdCaption.scss';
+@import './IdCaption';
 </style>

package/src/components/layout/DisplayBreakpoints.stories.mdx

@@ -4,8 +4,6 @@ import { Meta } from '@storybook/addon-docs';
 
 # Display Breakpoints
 
-<farm-col>aaa</farm-col>
-
 <table width="100%">
 	<thead>
 		<tr>

package/src/components/layout/Line/Line.scss

@@ -1,7 +1,7 @@
 .farm-line {
 	width: 100%;
 	border: none;
-	border-bottom: 1px solid var(--v-gray-lighten2);
+	border-bottom: 1px solid var(--farm-stroke-base);
 	height: 1px;
 	margin-top: 0;
 	&--spacing {