@farm-investimentos/front-mfe-components 11.0.0 → 11.0.1

package/package.json

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

package/src/components/Buttons/DefaultButton/DefaultButton.scss

@@ -144,7 +144,7 @@
                 color: var(--farm-#{$color}-base);
             }
 
-            i.mdi {
+            ::v-deep .farm-btn__content i.mdi {
                 color: var(--farm-#{$color}-base);
             }
         }

package/src/components/CardContext/CardContext.stories.js

@@ -64,3 +64,12 @@ export const NoIcon = () => ({
         </farm-card-context>
     `,
 });
+
+export const TooltipText = () => ({
+	template: `
+        <farm-card-context tooltipText="Lorem Ipsum is simply dummy text of the printing and typesetting industry" icon="mdi-currency-usd" title="Titulo do Card">
+            <p>Conteúdo do Card</p>
+        </farm-card-context>
+    `,
+});
+

package/src/components/CardContext/CardContext.vue

@@ -9,9 +9,22 @@
 		<div class="card-context-header" v-if="isSuccess && title">
 			<farm-icon-box v-if="icon" :icon="icon" />
 			<div class="card-context-content">
-				<p :class="{ 'card-context-title': true, 'card-context-content--bold': bold }">
-					{{ title }}
-				</p>
+				<div class="d-flex align-center">
+					<p :class="{ 
+						'mr-2': true, 
+						'mb-1': true, 
+						'card-context-title': true, 
+						'card-context-content--bold': bold }"
+					>
+						{{ title }}
+					</p>
+					<farm-tooltip v-if="tooltipText !== null">
+						{{ tooltipText }}
+						<template v-slot:activator="{}">
+							<farm-icon size="sm" color="gray">help-circle</farm-icon>
+						</template>
+					</farm-tooltip>
+				</div>
 			</div>
 		</div>
 		<div class="card-context-body" v-if="isSuccess">
@@ -93,6 +106,13 @@ export default Vue.extend({
 			type: Boolean,
 			default: false,
 		},
+		/**
+		 * Show Tooltip and help text
+		 */
+		tooltipText: {
+			type: String,
+			default: null,
+		}
 	},
 	computed: {
 		isSuccess() {

package/src/components/layout/Box/Box.scss

@@ -12,25 +12,4 @@
         position: relative;
     }
 
-    @each $k in $justifications {
-        &#{'--justify-' + $k} {
-            >div {
-                justify-content: $k;
-            }
-        }
-    }
-
-    @each $k in $directions {
-        &#{'--direction-' + $k} {
-            >div {
-                flex-direction: $k;
-            }
-        }
-    }
-
-    @each $k in map-keys($gutters) {
-        &#{'[gutter=' + $k + ']'} {
-            padding: map-get($gutters, $k);
-        }
-    }
 }

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

@@ -1,5 +1,4 @@
 import Box from './Box.vue';
-import { directions, justifications } from '../../../configurations/flexVariables';
 import gutters from '../../../configurations/gutters';
 
 export default {
@@ -30,42 +29,6 @@ export const Tag = () => ({
 	</div>`,
 });
 
-export const Justify = () => ({
-	data() {
-		return {
-			justifications,
-		};
-	},
-	template: `<div>
-		<farm-box :justify="k" v-for="k in justifications" :key="'justify-_' + k" style="border:1px solid var(--farm-stroke-base); margin-bottom: 16px;">
-			<div>
-				justify {{ k }}
-			</div>
-			<div>
-				another div
-			</div>
-		</farm-box>
-	</div>`,
-});
-
-export const Directions = () => ({
-	data() {
-		return {
-			directions,
-		};
-	},
-	template: `<div>
-		<farm-box :direction="k" v-for="k in directions" :key="'direction-_' + k" style="border:1px solid var(--farm-stroke-base); margin-bottom: 16px;">
-			<div>
-			direction {{ k }}
-			</div>
-			<div>
-				another div
-			</div>
-		</farm-box>
-	</div>`,
-});
-
 export const Gutters = () => ({
 	data() {
 		return { gutters };

package/src/components/layout/Box/Box.vue

@@ -3,8 +3,6 @@
 		:is="tag"
 		:class="{
 			'farm-box': true,
-			[`farm-box--justify-${justify}`]: justify,
-			[`farm-box--direction-${direction}`]: direction,
 		}"
 		:gutter="gutter"
 	>
@@ -23,20 +21,6 @@ export default Vue.extend({
 		 * Html tag
 		 */
 		tag: { type: String, default: 'div' },
-		/**
-		 * Applies the flex-direction css property
-		 */
-		direction: {
-			type: String as PropType<'row' | 'row-reverse' | 'column' | 'column-reverse'>,
-			default: 'row',
-		},
-		/**
-		 * Applies the justify-content css property
-		 */
-		justify: {
-			type: String as PropType<'start' | 'center' | 'end' | 'space-between' | 'space-around'>,
-			default: '',
-		},
 		/**
 		 * Add gutter
 		 */