@farm-investimentos/front-mfe-components 12.1.2 → 12.1.4

package/package.json

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

package/src/components/DialogHeader/DialogHeader.scss

@@ -1,29 +1,33 @@
 .farm-dialog-header__close {
-    position: absolute;
-    margin-top: 0;
-    font-size: 16px;
+	position: absolute;
+	margin-top: 0;
+	font-size: 16px;
 
-    transition: all 0.4s;
+	transition: all 0.4s;
 
-    &:hover {
-        opacity: 0.8;
-    }
+	&:hover {
+		opacity: 0.8;
+	}
 }
 
 header {
-    font-size: 12px;
-    padding: 6px 16px;
-    background-color: #fff;
-    font-weight: 700;
-    color: var(--farm-primary-base);
-    border-bottom: 1px solid var(--farm-stroke-divider);
-    display: flex;
-    justify-content: flex-start;
-    align-items: center;
+	font-size: 12px;
+	padding: 6px 16px;
+	background-color: #fff;
+	font-weight: 700;
+	color: var(--farm-primary-base);
+	border-bottom: 1px solid var(--farm-stroke-divider);
+	display: flex;
+	justify-content: flex-start;
+	align-items: center;
+	height: 48px;
 
-    >.farm-typography.farm-caption {
-        align-items: center;
-        width: 100%;
-        margin-bottom: 0;
-    }
-}
+	> .farm-typography.farm-caption {
+		align-items: center;
+		width: 100%;
+		margin-bottom: 0;
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+}

package/src/components/DialogHeader/DialogHeader.stories.js

@@ -61,3 +61,9 @@ export const TemplateSlot = () => ({
 		</farm-dialog-header>
 	</div>`,
 });
+
+export const VeryLongTitle = () => ({
+	template: `<div style="max-width: 480px; position: relative;">
+		<farm-dialog-header title="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tincidunt leo nec orci hendrerit, in sagittis magna tincidunt." />
+	</div>`,
+});

package/src/components/IdCaption/IdCaption.scss

@@ -1,16 +1,23 @@
 .idcaption {
 	display: flex;
 	min-height: 48px;
+	max-width: 100%;
+
 	.farm-icon-box {
 		margin-right: 8px;
 	}
 
+	&.farm-idcaption--noicon .idcaption__body {
+		max-width: 100%;
+	}
+
 	&__body {
 
 		display: flex;
 		flex-direction: column;
 		justify-content: space-between;
 		align-content: flex-start;
+		max-width: calc(100% - 48px);
 
 		&--single {
 			justify-content: center;
@@ -21,22 +28,21 @@
 			margin-bottom: 0;
 			display: flex;
 			flex: none;
+			position: relative;
+			align-items: center;
+			height: 18px;
 
 			>span {
-				position: relative;
+				max-width: 100%;
+				white-space: nowrap;
+				overflow: hidden;
+				text-overflow: ellipsis;
 			}
 		}
 
-		.farm-btn,
 		.farm-tooltip {
-			position: absolute;
-			right: -30px;
-			top: -8px;
+			padding-right: 1px;
 		}
 	}
 
-	.farm-btn--clickable {
-		position: absolute;
-		top: -50%;
-	}
 }

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

@@ -23,11 +23,17 @@ export default {
 };
 
 export const Primary = () => ({
+    methods: {
+        onLinkClick() {
+            alert('onLinkClick');
+        }
+    },
 	template: `
     <farm-idcaption 
     icon="account-box-outline"
     copyText="texto a copiar"
     :link="true"
+    @onLinkClick="onLinkClick"
     >
         <template v-slot:title>
             Upper Line Text
@@ -77,7 +83,6 @@ export const NoUpperText = () => ({
     <farm-idcaption 
     icon="account-box-outline"
     copyText="texto a copiar"
-    :link="true"
     >
         <template v-slot:subtitle>
             Lower:Line Text
@@ -90,7 +95,6 @@ export const NoBottomText = () => ({
 	template: `
     <farm-idcaption 
     icon="account-box-outline" 
-    copyText="texto a copiar"
     :link="true"
     >
         <template v-slot:title>
@@ -100,10 +104,11 @@ export const NoBottomText = () => ({
     `,
 });
 
-export const NoTextToClip = () => ({
+export const NoTextToCopy = () => ({
 	template: `
     <farm-idcaption 
-    icon="account-box-outline" 
+    icon="account-box-outline"
+    copyText=""
     :link="true"
     >
         <template v-slot:title>
@@ -185,20 +190,20 @@ export const CustomTooltipColor = () => ({
     `,
 });
 
-
-export const Teste = () => ({
+export const LongTitles = () => ({
 	template: `
+    <farm-col sm="3">
     <farm-idcaption 
     icon="account-box-outline"
-    copy-text=""
+    copyText="texto a copiar"
     :link="true"
     >
         <template v-slot:title>
-            Upper Line Text
+            Upper Line Text Upper Line Text
         </template>
         <template v-slot:subtitle>
-            0
+            Lower: Line Text Line Text Line Text Line
         </template>
     </farm-idcaption>
-    `,
+    </farm-col>`,
 });

package/src/components/IdCaption/IdCaption.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="idcaption farm-idcaption">
+	<div :class="{ idcaption: true, 'farm-idcaption': true, 'farm-idcaption--noicon': !icon }">
 		<farm-icon-box v-if="icon" :icon="icon" :color="iconBoxColor" size="md" />
 		<div
 			:class="{ idcaption__body: true, 'idcaption__body--single': !hasTitle || !hasSubtitle }"
@@ -7,28 +7,28 @@
 			<farm-caption variation="medium" v-if="hasTitle">
 				<span>
 					<slot name="title"></slot>
-					<farm-btn
-						v-if="link"
-						icon
-						color="primary"
-						class="farm-btn--clickable"
-						@click="$emit('onLinkClick')"
-					>
-						<farm-icon size="xs">open-in-new</farm-icon>
-					</farm-btn>
 				</span>
+				<farm-btn
+					v-if="link"
+					icon
+					color="primary"
+					class="farm-btn--clickable"
+					@click="$emit('onLinkClick')"
+				>
+					<farm-icon size="xs">open-in-new</farm-icon>
+				</farm-btn>
 			</farm-caption>
 
 			<farm-caption variation="regular" color="gray" v-if="hasSubtitle">
 				<span>
 					<slot name="subtitle"></slot>
-					<farm-copytoclipboard
-						v-if="copyText"
-						:toCopy="copyText"
-						:successMessage="successMessage"
-						:tooltipColor="tooltipColor"
-					/>
 				</span>
+				<farm-copytoclipboard
+					v-if="copyText"
+					:toCopy="copyText"
+					:successMessage="successMessage"
+					:tooltipColor="tooltipColor"
+				/>
 			</farm-caption>
 		</div>
 	</div>

package/src/components/ModalPromptUser/ModalPromptUser.stories.js

@@ -71,4 +71,25 @@ export const ButtonLabels = () => ({
 			reabrir
 			</farm-btn>
 		</div>`,
+});
+
+export const Slot = () => ({
+	data() {
+		return {
+			showPrompt: false,
+		};
+	},
+	template: `<div>
+		<farm-prompt-user match="CONFIRMAR" title="Título" subtitle="" v-model="showPrompt">
+		<template v-slot:subtitle>
+			<farm-caption>Using caption and <farm-chip dense>chip</farm-chip></farm-caption>
+			<br />
+			Digite <strong>CONFIRMAR</strong> para habilitar
+		</template>
+		</farm-prompt-user>
+			click:
+			<farm-btn color="primary" @click="showPrompt = true;">
+			reabrir
+			</farm-btn>
+		</div>`,
 });

package/src/components/ModalPromptUser/ModalPromptUser.vue

@@ -5,6 +5,7 @@
 		</template>
 		<template v-slot:content>
 			<section class="modal-content">
+				<slot name="subtitle"></slot>
 				<farm-promptusertoconfirm
 					v-if="inputVal"
 					v-model="canConfirm"

package/src/components/Tooltip/Tooltip.scss

@@ -7,15 +7,12 @@
 }
 
 .farm-tooltip__popup {
-	background-color: themeColor('primary');
+	background-color: rgba(themeColor('primary'), 0.95);
 
 	@each $color in $colors {
 		@each $color in $theme-colors-list {
-
 			&.farm-tooltip--#{$color} {
-
-				background-color: themeColor($color);
-
+				background-color: rgba(themeColor($color), 0.95);
 			}
 		}
 	}
@@ -25,17 +22,16 @@
 	visibility: hidden;
 	opacity: 0;
 	transition: visibility 0.3s linear, opacity 0.3s linear;
-	color: white;
-	font-size: 14px;
-	border-radius: 4px;
-	padding: 8px 12px;
 	position: absolute;
 	width: 160px;
-	background-color: themeColor('primary');
 	contain: content;
-
-	display: block;
+	color: white;
+	background-color: themeColor('primary');
+	border-radius: 4px;
 	font-family: 'Montserrat', sans-serif !important;
+	font-size: 14px;
+	padding: 8px 12px;
+	display: block;
 
 	&--visible {
 		opacity: 1;

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

@@ -86,7 +86,7 @@ export const Visibility = () => ({
 	</div>`,
 });
 
-export const TooltipTest = () => ({
+export const InsideCard = () => ({
 	template: `<div style="padding-left: 80px; padding-top: 80px;">
         <farm-card style="padding: 32px">
 			<farm-tooltip>