@farm-investimentos/front-mfe-components 15.10.1 → 15.11.0

package/package.json

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

package/src/components/RangeDatePicker/RangeDatePicker.stories.js

@@ -101,12 +101,12 @@ export const ValidacaoInputPadrao = () => ({
 		};
 	},
 	template: `<div style='max-width: 320px'>
-		<farm-label>Selecione uma data entre 01/01/2024 e 31/12/2024</farm-label>
+		<farm-label>Selecione uma data entre 01/01/2025 e 31/12/2025</farm-label>
 		<RangeDatePicker
 			inputId="input-custom-id"
 			v-model="date"
-			min="2024-01-01"
-			max="2024-12-31"
+			min="2025-01-01"
+			max="2025-12-31"
 			validateInput
 			required
 		/>
@@ -121,15 +121,15 @@ export const ValidacaoInputCustomizada = () => ({
 		};
 	},
 	template: `<div style='max-width: 320px'>
-		<farm-label>Selecione uma data do primeiro semestre de 2024</farm-label>
+		<farm-label>Selecione uma data do primeiro semestre de 2025</farm-label>
 		<RangeDatePicker
 			inputId="input-custom-id"
 			v-model="date"
-			min="2024-01-01"
-			max="2024-06-30"
+			min="2025-01-01"
+			max="2025-06-30"
 			validateInput
 			required
-			outOfRangeMessage="Por favor, selecione datas dentro do primeiro semestre de 2024 ({min} até {max})"
+			outOfRangeMessage="Por favor, selecione datas dentro do primeiro semestre de 2025 ({min} até {max})"
 		/>
 		date: {{ date }}
 	</div>`,

package/src/components/RangeDatePicker/RangeDatePicker.vue

@@ -164,15 +164,16 @@ export default defineComponent({
 					return true;
 				}
 
-				const [startDate, endDate] = value.split(' a ').map(date => {
-					const [day, month, year] = date.split('/');
-					return new Date(year, month - 1, day);
-				});
-
+				const [startDateStr, endDateStr] = value.split(' a ');
+				
+				const startDate = new Date(convertDate(startDateStr));
+				const endDate = new Date(convertDate(endDateStr));
 				const minDate = new Date(this.min);
 				const maxDate = new Date(this.max);
 
-				if (startDate < minDate || endDate > maxDate) {
+				const isValid = startDate.getTime() >= minDate.getTime() && endDate.getTime() <= maxDate.getTime();
+
+				if (!isValid) {
 					return this.outOfRangeMessage
 						.replace('{min}', dateDefaultFormatter(this.min))
 						.replace('{max}', dateDefaultFormatter(this.max));

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

@@ -104,4 +104,49 @@ describe('RangeDatePicker component', () => {
 			expect(component.fieldRange).toEqual('27/02/2023 a 28/02/2023');
 		});
 	});
+
+	describe('range validation', () => {
+		beforeEach(async () => {
+			await wrapper.setProps({
+				min: '2023-02-01',
+				max: '2023-02-28',
+				validateInput: true
+			});
+		});
+
+		it('should return true when date range is within min and max', () => {
+			const result = component.checkMinMax('15/02/2023 a 20/02/2023');
+			expect(result).toBe(true);
+		});
+
+		it('should return error message when start date is before min date', () => {
+			const result = component.checkMinMax('31/01/2023 a 15/02/2023');
+			expect(result).toBe('A data selecionada deve ser entre 01/02/2023 e 28/02/2023');
+		});
+
+		it('should return error message when end date is after max date', () => {
+			const result = component.checkMinMax('15/02/2023 a 01/03/2023');
+			expect(result).toBe('A data selecionada deve ser entre 01/02/2023 e 28/02/2023');
+		});
+
+		it('should return true when validateInput is false', async () => {
+			await wrapper.setProps({ validateInput: false });
+			const result = component.checkMinMax('31/01/2023 a 01/03/2023');
+			expect(result).toBe(true);
+		});
+
+		it('should return true when value is empty', () => {
+			const result = component.checkMinMax('');
+			expect(result).toBe(true);
+		});
+
+		it('should return true when min and max are not set', async () => {
+			await wrapper.setProps({
+				min: null,
+				max: null
+			});
+			const result = component.checkMinMax('15/02/2023 a 20/02/2023');
+			expect(result).toBe(true);
+		});
+	});
 });

package/src/components/Tooltip/Tooltip.scss

@@ -1,6 +1,9 @@
-@import '../../configurations/theme-colors';
 @import '../../configurations/variables';
 
+$arrow-size: 6px;
+$tooltip-color: #333333;
+$arrow-margin: 12px;
+
 .farm-tooltip {
 	display: inline-block;
 	position: relative;
@@ -11,31 +14,110 @@
 }
 
 .farm-tooltip__popup {
-	background-color: rgba(themeColor('primary'), 0.95);
-	@each $color in $theme-colors-list {
-		&.farm-tooltip--#{$color} {
-			background-color: rgba(themeColor($color), 0.95);
-		}
-	}
-}
-
-.farm-tooltip__popup {
+	background-color: $tooltip-color;
 	visibility: hidden;
 	opacity: 0;
 	transition: visibility 0.3s linear, opacity 0.3s linear;
 	position: absolute;
 	width: 160px;
-	contain: content;
-	color: white;
+	color: #f5f5f5;
 	border-radius: 5px;
 	font-family: 'Manrope', sans-serif !important;
 	font-size: 12px;
 	font-weight: 500px;
-	padding: 8px 12px;
+	padding: 16px;
 	display: block;
+	z-index: 9999;
+
+	&--fluid {
+		width: auto;
+		min-width: 160px;
+		max-width: 300px;
+	}
 
 	&--visible {
 		opacity: 1;
 		visibility: visible;
 	}
+
+	.farm-tooltip__header {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		margin-bottom: 8px;
+	}
+
+	.farm-tooltip__title {
+		font-weight: 600;
+		font-size: 13px;
+		margin-right: 16px;
+	}
+
+	.farm-tooltip__content {
+		font-weight: 500;
+	}
+
+	.farm-tooltip__arrow {
+		position: absolute;
+		width: 0;
+		height: 0;
+		border-style: solid;
+		z-index: 10000;
+	}
+
+	// Top positions - arrow at bottom
+	&--top-center .farm-tooltip__arrow,
+	&--top-left .farm-tooltip__arrow,
+	&--top-right .farm-tooltip__arrow {
+		border-width: $arrow-size $arrow-size 0 $arrow-size;
+		border-color: $tooltip-color transparent transparent transparent;
+		bottom: -$arrow-size;
+		z-index: 99999;
+	}
+
+	// Bottom positions - arrow at top
+	&--bottom-center .farm-tooltip__arrow,
+	&--bottom-left .farm-tooltip__arrow,
+	&--bottom-right .farm-tooltip__arrow {
+		border-width: 0 $arrow-size $arrow-size $arrow-size;
+		border-color: transparent transparent $tooltip-color transparent;
+		top: -$arrow-size;
+		z-index: 99999;
+	}
+
+	// Left alignment - arrow at left
+	&--top-left .farm-tooltip__arrow,
+	&--bottom-left .farm-tooltip__arrow {
+		left: $arrow-margin;
+	}
+
+	// Right alignment - arrow at right
+	&--top-right .farm-tooltip__arrow,
+	&--bottom-right .farm-tooltip__arrow {
+		right: $arrow-margin;
+	}
+
+	// Center alignment - arrow at center
+	&--top-center .farm-tooltip__arrow,
+	&--bottom-center .farm-tooltip__arrow {
+		left: 50%;
+		transform: translateX(-50%);
+	}
+
+	.farm-tooltip__close {
+		position: relative;
+		width: 16px;
+		height: 16px;
+		line-height: 16px;
+		text-align: center;
+		cursor: pointer;
+		font-size: 16px;
+		color: #f5f5f5;
+	}
+
+	&:not(.farm-tooltip__popup--has-title) .farm-tooltip__close {
+		position: absolute;
+		top: 8px;
+		right: 8px;
+	}
 }

package/src/components/Tooltip/Tooltip.stories.js

@@ -1,7 +1,5 @@
 import { withDesign } from 'storybook-addon-designs';
 import Tooltip from '.';
-import baseThemeColors from '../../configurations/_theme-colors-base.scss';
-const colors = Object.keys(baseThemeColors);
 
 export default {
 	title: 'Interactions/Tooltip',
@@ -13,6 +11,16 @@ export default {
 				component: `Tooltip<br />
 				selector: <em>farm-tooltip</em><br />
 				<span style="color: var(--farm-primary-base);">ready for use</span>
+				<br /><br />
+				<h3>Important notes:</h3>
+				<ul>
+					<li><strong>Do not add margin to the activator element</strong> - This can confuse the tooltip display watcher and prevent the arrow from being positioned correctly</li>
+					<li>Prefer to add margin to the parent element or sibling elements of the tooltip</li>
+					<li>Arrow positioning is calculated based on the activator element position</li>
+					<li>The close button (X) is automatically displayed only in tooltips controlled by v-model</li>
+					<li>The arrow is only displayed when a position is explicitly defined (position property). If no position is defined, the tooltip will not have an arrow</li>
+					<li>You can add a title to the tooltip using the "title" slot. When used in a controlled tooltip, the close button will be aligned with the title</li>
+				</ul>
 				`,
 			},
 		},
@@ -25,76 +33,173 @@ export default {
 };
 
 export const Tooltips = () => ({
-	data() {
-		return {
-			colors,
-		};
-	},
 	template: `<div style="padding-left: 80px; padding-top: 80px;">
-        <farm-tooltip
-            v-for="color of colors"
-            :key="color"
-            :color="color"
-            style="margin-right: 4px"
-        >
-            <span>
-			this is the tooltip for {{ color }}
-			</span>
-            <template v-slot:activator="{ on, attrs }">
-                {{ color }}
-            </template>
-        </farm-tooltip>
+        <span style="display: flex; align-items: center;">
+            Hover over the icon
+            <farm-tooltip>
+                <span>
+                    This is a simple tooltip
+                </span>
+                <template v-slot:activator>
+                    <farm-icon size="sm" color="gray" style="margin-left: 8px; cursor: help;">help-circle</farm-icon>
+                </template>
+            </farm-tooltip>
+        </span>
 	</div>`,
 });
 
-export const Iconed = () => ({
+export const InsideCard = () => ({
 	template: `<div style="padding-left: 80px; padding-top: 80px;">
-        <farm-tooltip>
-            some <em>sample</em> text
-            <br />with line break
-            <br />and a long text that does not fit
-            <template v-slot:activator="{ on, attrs }">
-                <farm-icon size="sm" color="gray">help-circle</farm-icon>
-            </template>
-        </farm-tooltip>
+        <farm-card style="padding: 32px">
+			<span style="display: flex; align-items: center;">
+				<span style="margin-right: 8px;">Important information</span>
+				<farm-tooltip>
+					this is the tooltip!
+					<template v-slot:activator>
+						<farm-icon size="sm" color="gray" style="cursor: help;">help-circle</farm-icon>
+					</template>
+				</farm-tooltip>
+			</span>
+		</farm-card>
 	</div>`,
 });
 
-export const Visibility = () => ({
-	data() {
-		return {
-			show: false,
-		};
-	},
+export const FluidTooltip = () => ({
 	template: `<div style="padding-left: 80px; padding-top: 80px;">
-        <farm-tooltip v-model="show">
-            some <em>sample</em> text<br />
-			some <em>sample</em> text<br />
-			some <em>sample</em> text<br />
-			some <em>sample</em> text<br />
-			some <em>sample</em> text<br />
-			some <em>sample</em> text<br />
-			some <em>sample</em> text<br />
-			some <em>sample</em> text<br />
-			some <em>sample</em> text<br />
-            <template v-slot:activator="{ on, attrs }">
-			<farm-btn @click="show = !show">
-				toggle me
-			</farm-btn>
-            </template>
-        </farm-tooltip>
+		<span style="display: flex; align-items: center;">
+			<span style="margin-right: 8px;">Fluid width tooltip</span>
+			<farm-tooltip fluid>
+				This is a fluid tooltip that will grow based on its content.
+				It contains a longer text to demonstrate how it expands horizontally.
+				<template v-slot:activator>
+					<farm-icon size="sm" color="gray" style="cursor: help;">help-circle</farm-icon>
+				</template>
+			</farm-tooltip>
+		</span>
 	</div>`,
 });
 
-export const InsideCard = () => ({
+export const TooltipPositions = () => ({
+	template: `<div style="padding: 100px; display: flex; flex-direction: column; align-items: center; gap: 50px;">
+		<div style="display: flex; gap: 30px; margin-bottom: 50px;">
+			<div style="display: flex; flex-direction: column; align-items: center;">
+				<p style="margin-bottom: 10px;">Top Left</p>
+				<farm-tooltip position="top-left">
+					Top-Left Position
+					<template v-slot:activator>
+						<farm-icon size="md" color="gray" style="cursor: help;">help-circle</farm-icon>
+					</template>
+				</farm-tooltip>
+			</div>
+
+			<div style="display: flex; flex-direction: column; align-items: center;">
+				<p style="margin-bottom: 10px;">Top Center</p>
+				<farm-tooltip position="top-center">
+					Top-Center Position (Default)
+					<template v-slot:activator>
+						<farm-icon size="md" color="gray" style="cursor: help;">help-circle</farm-icon>
+					</template>
+				</farm-tooltip>
+			</div>
+
+			<div style="display: flex; flex-direction: column; align-items: center;">
+				<p style="margin-bottom: 10px;">Top Right</p>
+				<farm-tooltip position="top-right">
+					Top-Right Position
+					<template v-slot:activator>
+						<farm-icon size="md" color="gray" style="cursor: help;">help-circle</farm-icon>
+					</template>
+				</farm-tooltip>
+			</div>
+		</div>
+
+		<div style="display: flex; gap: 30px;">
+			<div style="display: flex; flex-direction: column; align-items: center;">
+				<p style="margin-bottom: 10px;">Bottom Left</p>
+				<farm-tooltip position="bottom-left">
+					Bottom-Left Position
+					<template v-slot:activator>
+						<farm-icon size="md" color="gray" style="cursor: help;">help-circle</farm-icon>
+					</template>
+				</farm-tooltip>
+			</div>
+
+			<div style="display: flex; flex-direction: column; align-items: center;">
+				<p style="margin-bottom: 10px;">Bottom Center</p>
+				<farm-tooltip position="bottom-center">
+					Bottom-Center Position
+					<template v-slot:activator>
+						<farm-icon size="md" color="gray" style="cursor: help;">help-circle</farm-icon>
+					</template>
+				</farm-tooltip>
+			</div>
+
+			<div style="display: flex; flex-direction: column; align-items: center;">
+				<p style="margin-bottom: 10px;">Bottom Right</p>
+				<farm-tooltip position="bottom-right">
+					Bottom-Right Position
+					<template v-slot:activator>
+						<farm-icon size="md" color="gray" style="cursor: help;">help-circle</farm-icon>
+					</template>
+				</farm-tooltip>
+			</div>
+		</div>
+	</div>`,
+});
+
+export const FluidWithPosition = () => ({
+	template: `<div style="padding: 200px;">
+		<span style="display: flex; align-items: center;">
+			<span style="margin-right: 8px;">Fluid tooltip with position</span>
+			<farm-tooltip fluid position="bottom-left">
+				This is a fluid tooltip with Bottom-Left position.
+				Notice how it grows based on content and has the arrow in the correct position.
+				<template v-slot:activator>
+					<farm-icon size="md" color="gray" style="cursor: help;">help-circle</farm-icon>
+				</template>
+			</farm-tooltip>
+		</span>
+	</div>`,
+});
+
+export const TooltipWithTitle = () => ({
 	template: `<div style="padding-left: 80px; padding-top: 80px;">
-        <farm-card style="padding: 32px">
-			<farm-tooltip>
-				this is the tooltip!
-				<template v-slot:activator="{ on, attrs }">
-					<farm-btn style="height: 80px">try me</farm-btn>
+		<span style="display: flex; align-items: center;">
+			<span style="margin-right: 8px;">Tooltip with title</span>
+			<farm-tooltip fluid position="top-left">
+				<template v-slot:title>
+					<farm-icon size="sm" color="white">alert</farm-icon>
+					<span class="ml-10">Important Information</span>
+				</template>
+				This tooltip has a title that appears at the top.
+				<template v-slot:activator>
+					<farm-icon size="md" color="gray" style="cursor: help;">help-circle</farm-icon>
 				</template>
 			</farm-tooltip>
-		</farm-card>
+		</span>
+	</div>`,
+});
+
+export const ControlledTooltipWithTitle = () => ({
+	data() {
+		return {
+			showTooltip: false,
+		};
+	},
+	template: `<div style="padding: 80px;">
+		<span style="display: flex; align-items: center;">
+			<span style="margin-right: 8px;">Click to open:</span>
+			<farm-tooltip fluid v-model="showTooltip" position="top-right">
+				<template v-slot:title>
+					Tooltip Title
+				</template>
+				This is a controlled tooltip with title.
+				<br><br>
+				Notice how the close button is aligned with the title.
+				<template v-slot:activator>
+					<farm-icon @click="showTooltip = !showTooltip" size="md" color="blue" style="cursor: pointer;">help-circle</farm-icon>
+				</template>
+			</farm-tooltip>
+		</span>
 	</div>`,
 });