@farm-investimentos/front-mfe-components 11.4.1 → 11.4.3

package/package.json

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

package/src/components/AlertBox/AlertBox.vue

@@ -1,5 +1,10 @@
 <template>
-	<div>alertbox</div>
+	<div>
+		<!--
+			@slot Use this slot for the content
+		-->
+		<slot></slot>
+	</div>
 </template>
 
 <script lang="ts">

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

@@ -5,7 +5,7 @@
 .farm-btn {
     font-size: 14px;
     align-items: center;
-    border-radius: 4px;
+    border-radius: 6px;
     display: inline-flex;
     flex: 0 0 auto;
     font-weight: 700;
@@ -25,6 +25,10 @@
     min-width: 64px;
     padding: 0 16px;
 
+    &.farm-btn--full {
+        width: 100%;
+    }
+
     @each $size,
     $value in $sizes {
         &#{'.farm-btn[size=' + $size +']'} {
@@ -37,6 +41,7 @@
         display: flex;
         flex-direction: row;
         align-items: center;
+        gap: 8px;
 
         ::v-deep i.mdi {
             font-size: 1rem;
@@ -62,6 +67,8 @@
         }
     }
 
+
+    
     &:before {
         transition: all 0.28s ease;
         background-color: currentColor;
@@ -220,10 +227,15 @@
     background-color: white;
 
     i.mdi.farm-icon {
-        color: white;
+        color: #D6D6D6;
     }
 }
 
+.farm-btn--plain.farm-btn--disabled {
+    background-color: transparent;
+    border: none;
+}
+
 .farm-btn--elevated {
     box-shadow: 0px 3px 1px -2px rgb(0 0 0 / 20%), 0px 2px 2px 0px rgb(0 0 0 / 14%), 0px 1px 5px 0px rgb(0 0 0 / 12%);
 }

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

@@ -1,8 +1,8 @@
-import DefaultButton from './DefaultButton.vue';
 import { withDesign } from 'storybook-addon-designs';
 import baseThemeColors from '../../../configurations/_theme-colors-base.scss';
-const colors = Object.keys(baseThemeColors);
 import './Buttons.stories.scss';
+import DefaultButton from './DefaultButton.vue';
+const colors = Object.keys(baseThemeColors);
 
 export default {
 	title: 'Buttons/Default',
@@ -25,8 +25,42 @@ export default {
 	},
 };
 
-export const Primary = () => ({
-	template: '<farm-btn title="Pass text as slot">Pass text as slot</farm-btn>',
+export const Default = () => ({
+	template: '<farm-btn color="primary"> Pass text as slot </farm-btn>',
+});
+
+export const Full = () => ({
+	template:
+		'<farm-btn color="primary" full> <farm-icon>plus</farm-icon> Pass text as slot <farm-icon>plus</farm-icon></farm-btn>',
+});
+
+export const PrimaryActive = () => ({
+	template:
+		'<farm-btn color="primary"> <farm-icon>plus</farm-icon> Pass text as slot <farm-icon>plus</farm-icon></farm-btn>',
+});
+
+export const PrimaryInactive = () => ({
+	template:
+		'<farm-btn disabled> <farm-icon>plus</farm-icon> Pass text as slot <farm-icon>plus</farm-icon></farm-btn>',
+});
+export const SecondaryActive = () => ({
+	template:
+		'<farm-btn outlined> <farm-icon>plus</farm-icon> Pass text as slot <farm-icon>plus</farm-icon></farm-btn>',
+});
+
+export const SecondaryInactive = () => ({
+	template:
+		'<farm-btn outlined disabled> <farm-icon>plus</farm-icon> Pass text as slot <farm-icon>plus</farm-icon></farm-btn>',
+});
+
+export const TertiaryActive = () => ({
+	template:
+		'<farm-btn plain> <farm-icon>plus</farm-icon> Pass text as slot <farm-icon>plus</farm-icon></farm-btn>',
+});
+
+export const TertiaryInactive = () => ({
+	template:
+		'<farm-btn plain disabled> <farm-icon>plus</farm-icon> Pass text as slot <farm-icon>plus</farm-icon></farm-btn>',
 });
 
 export const HtmlMarkup = () => ({
@@ -34,7 +68,7 @@ export const HtmlMarkup = () => ({
 });
 
 export const Props = () => ({
-	template: '<farm-btn color="secondary" outlined>props</farm-btn>',
+	template: '<farm-btn outlined>props</farm-btn>',
 });
 
 export const Listener = () => ({
@@ -44,7 +78,7 @@ export const Listener = () => ({
 		};
 	},
 	template: `
-		<farm-btn color="error" @click="x = 2">click me to change: {{ x }}</farm-btn>
+		<farm-btn color="error" @click="x++">click me to change: {{ x }}</farm-btn>
 	`,
 });
 

package/src/components/Buttons/DefaultButton/DefaultButton.vue

@@ -38,7 +38,6 @@ export default Vue.extend({
 				| 'success'
 				| 'error'
 				| 'warning'
-				| 'success'
 				| 'extra-1'
 				| 'extra-2'
 			>,
@@ -52,6 +51,10 @@ export default Vue.extend({
 		 * Is plain
 		 */
 		plain: { type: Boolean, default: false },
+		/**
+		 * Is full
+		 */
+		full: { type: Boolean, default: false },
 		/**
 		 * Is disabled
 		 */
@@ -69,10 +72,17 @@ export default Vue.extend({
 			type: String,
 			default: 'button',
 		},
+		/**
+		 * Denotes the target route of the link
+		 * Will transform button into a router-link
+		 */
 		to: {
 			type: String,
 			default: null,
 		},
+		/**
+		 * Size
+		 */
 		size: {
 			type: String as PropType<'xs' | 'sm' | 'md' | 'lg' | 'xl'>,
 			default: 'default',
@@ -93,6 +103,7 @@ export default Vue.extend({
 				'farm-btn--round': this.isRound,
 				'farm-btn--rounded': this.rounded,
 				'farm-btn--icon': this.icon,
+				'farm-btn--full': this.full,
 				['farm-btn--' + this.color]: true,
 				...obj,
 			};

package/src/components/Collapsible/Collapsible.vue

@@ -13,7 +13,7 @@
 					</farm-typography>
 				</div>
 				<div class="collapsible__icon collapsible__icon--arrow">
-					<farm-icon size="md" color="primary">
+					<farm-icon size="md" color="secondary">
 						{{ arrowIcon }}
 					</farm-icon>
 				</div>
@@ -42,12 +42,16 @@ export default Vue.extend({
 			required: true,
 		},
 		/**
-		 * Icon
+		 * Icon (from Material Icons)
+		 * Example: chart-bar
 		 */
 		icon: {
 			type: String,
 			default: '',
 		},
+		/**
+		 * Is open?
+		 */
 		open: {
 			type: Boolean,
 			default: false,

package/src/components/Icon/Icon.stories.js

@@ -1,8 +1,8 @@
 import { withDesign } from 'storybook-addon-designs';
-import baseThemeColors from '../../configurations/_theme-colors-base.scss';
-const colors = Object.keys(baseThemeColors);
 import sizes from '../../configurations/sizes';
+import baseThemeColors from '../../configurations/_theme-colors-base.scss';
 import iconsList from './icons_list';
+const colors = Object.keys(baseThemeColors);
 
 import('./Icons.stories.scss');
 

package/src/components/IdCaption/IdCaption.vue

@@ -29,7 +29,8 @@ export default Vue.extend({
 	name: 'farm-idcaption',
 	props: {
 		/**
-		 * Icon
+		 * Icon (from Material Icons)
+		 * Example: chart-bar
 		 */
 		icon: {
 			type: String,

package/src/components/Tooltip/Tooltip.scss

@@ -4,14 +4,18 @@
 .farm-tooltip {
 	display: inline-block;
 	position: relative;
+}
+
+.farm-tooltip__popup {
+	background-color: themeColor('primary');
 
 	@each $color in $colors {
 		@each $color in $theme-colors-list {
-	
-			&--#{$color} {
-				.farm-tooltip__popup {
-					background-color: themeColor($color);
-				}
+
+			&.farm-tooltip--#{$color} {
+
+				background-color: themeColor($color);
+
 			}
 		}
 	}
@@ -27,8 +31,11 @@
 	padding: 8px 12px;
 	position: absolute;
 	width: 160px;
-	left: 50%;
-	transform: translate(-50%, -110%);
+	background-color: themeColor('primary');
+	contain: content;
+
+	display: block;
+	font-family: 'Montserrat', sans-serif !important;
 
 	&--visible {
 		opacity: 1;

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

@@ -37,7 +37,9 @@ export const Tooltips = () => ({
             :color="color"
             style="margin-right: 4px"
         >
-            this is the tooltip for {{ color }}
+            <span>
+			this is the tooltip for {{ color }}
+			</span>
             <template v-slot:activator="{ on, attrs }">
                 {{ color }}
             </template>
@@ -83,3 +85,16 @@ export const Visibility = () => ({
         </farm-tooltip>
 	</div>`,
 });
+
+export const TooltipTest = () => ({
+	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>
+				</template>
+			</farm-tooltip>
+		</farm-card>
+	</div>`,
+});

package/src/components/Tooltip/Tooltip.vue

@@ -1,24 +1,26 @@
 <template>
-	<span
-		:class="{ 'farm-tooltip': true, ['farm-tooltip--' + color]: true }"
-		@mouseover="onOver"
-		@mouseout="onOut"
-		ref="parent"
-	>
-		<slot name="activator"></slot>
+	<span :class="{ 'farm-tooltip': true }" ref="parent">
+		<span @mouseover="onOver" @mouseout="onOut" ref="activator">
+			<slot name="activator"></slot>
+		</span>
+
 		<span
+			ref="popup"
 			:class="{
 				'farm-tooltip__popup': true,
+				['farm-tooltip--' + color]: true,
 				'farm-tooltip__popup--visible':
 					(!externalControl && showOver) || (externalControl && toggleComponent),
 			}"
+			:style="styles"
+			@mouseout="onOut"
 		>
 			<slot></slot>
 		</span>
 	</span>
 </template>
 <script lang="ts">
-import Vue, { PropType, ref, computed } from 'vue';
+import Vue, { PropType, ref, computed, reactive, onBeforeUnmount } from 'vue';
 
 export default Vue.extend({
 	name: 'farm-tooltip',
@@ -52,23 +54,60 @@ export default Vue.extend({
 	},
 	setup(props) {
 		const parent = ref(null);
+		const popup = ref(null);
+		const activator = ref(null);
 		const showOver = ref(false);
+		const styles = reactive({
+			left: '0',
+			top: '0',
+		});
 
 		const toggleComponent = computed(() => props.value);
 		const externalControl = computed(() => props.value !== undefined);
 
+		let hasBeenBoostrapped = false;
+
 		const onOver = () => {
 			showOver.value = true;
+
+			if (!hasBeenBoostrapped) {
+				document.querySelector('body').appendChild(popup.value);
+				const parentBoundingClientRect = parent.value.getBoundingClientRect();
+				const activatorBoundingClientRect = activator.value.getBoundingClientRect();
+				const popupBoundingClientRect = popup.value.getBoundingClientRect();
+
+				styles.left =
+					parentBoundingClientRect.left +
+					window.scrollX -
+					(80 - activatorBoundingClientRect.width / 2) +
+					'px';
+				styles.top =
+					parentBoundingClientRect.top +
+					window.scrollY -
+					(popupBoundingClientRect.height + 8) +
+					'px';
+				
+				hasBeenBoostrapped = true;
+			}
 		};
 		const onOut = (event: MouseEvent) => {
 			showOver.value = parent.value.contains(event.relatedTarget);
 		};
 
+		onBeforeUnmount(() => {
+			if (hasBeenBoostrapped) {
+				document.querySelector('body').removeChild(popup.value);
+			}
+		});
+
 		return {
 			parent,
+			popup,
+			activator,
 			showOver,
 			toggleComponent,
 			externalControl,
+			styles,
 			onOver,
 			onOut,
 		};

package/src/components/layout/Col/Col.scss

@@ -6,6 +6,7 @@
     flex-basis: 0;
     flex-grow: 1;
     max-width: 100%;
+    width: 100;
 
     &--no-gutters {
         padding: 0;
@@ -13,11 +14,18 @@
 
     @each $k in $aligns {
         &#{'--align-' + $k} {
-            align-self: $k!important;
+            align-self: $k !important;
         }
     }
 }
 
+@for $i from 1 through 12 {
+    .farm-col--cols-#{$i * 1} {
+        flex: 0 0 (100/12 * $i)+#{"%"};
+        max-width: (100/12 * $i)+#{"%"};
+    }
+}
+
 @for $i from 1 through 12 {
     .farm-col--xs-#{$i * 1} {
         flex: 0 0 (100/12 * $i)+#{"%"};

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

@@ -22,51 +22,64 @@ const style = {
 	backgroundColor: 'var(--farm-extra-1-lighten)',
 };
 
+const items = Array.from(Array(12).keys());
+
 export const Primary = () => ({
 	data() {
 		return {
 			style,
 		};
 	},
-	template: '<farm-col :style="style">col</farm-col>',
+	template: `<farm-col>
+	<farm-col :style="style">col</farm-col>
+	</farm-col>`,
 });
-export const Xl = () => ({
+
+export const Cols = () => ({
 	data() {
 		return {
 			style,
+			items
 		};
 	},
 	template: `<farm-row>
-				<farm-col xl="4" :style="style">4</farm-col>
-				<farm-col xl="6" :style="style">6</farm-col>
-				<farm-col xl="12" :style="style">12</farm-col>
-				<farm-col xl="2" :style="style">2</farm-col>
+				<farm-col v-for="item in items" :key="'col_' + item" :cols="item + 1" :style="style">{{item + 1}}</farm-col>
 			</farm-row>`,
 });
+
+export const Xl = () => ({
+	data() {
+		return {
+			style,
+			items
+		};
+	},
+	template: `<farm-row>
+			<farm-col v-for="item in items" :key="'xl_' + item" :xl="item + 1" :style="style">{{item + 1}}</farm-col>
+		</farm-row>`,
+});
+
 export const Lg = () => ({
 	data() {
 		return {
 			style,
+			items
 		};
 	},
 	template: `<farm-row>
-		<farm-col lg="4" :style="style">4</farm-col>
-		<farm-col lg="6" :style="style">6</farm-col>
-		<farm-col lg="12" :style="style">12</farm-col>
-		<farm-col lg="2" :style="style">2</farm-col>
-	</farm-row>`,
+			<farm-col v-for="item in items" :key="'lg_' + item" :lg="item + 1" :style="style">{{item + 1}}</farm-col>
+		</farm-row>`,
 });
+
 export const Md = () => ({
 	data() {
 		return {
 			style,
+			items
 		};
 	},
 	template: `<farm-row>
-		<farm-col md="4" :style="style">4</farm-col>
-		<farm-col md="6" :style="style">6</farm-col>
-		<farm-col md="12" :style="style">12</farm-col>
-		<farm-col md="2" :style="style">2</farm-col>
+			<farm-col v-for="item in items" :key="'md_' + item" :md="item + 1" :style="style">{{item + 1}}</farm-col>
 		</farm-row>`,
 });
 
@@ -74,13 +87,11 @@ export const Sm = () => ({
 	data() {
 		return {
 			style,
+			items
 		};
 	},
 	template: `<farm-row>
-			<farm-col sm="4" :style="style">4</farm-col>
-			<farm-col sm="6" :style="style">6</farm-col>
-			<farm-col sm="12" :style="style">12</farm-col>
-			<farm-col sm="2" :style="style">2</farm-col>
+			<farm-col v-for="item in items" :key="'sm_' + item" :sm="item + 1" :style="style">{{item + 1}}</farm-col>
 		</farm-row>`,
 });
 
@@ -88,14 +99,12 @@ export const Xs = () => ({
 	data() {
 		return {
 			style,
+			items
 		};
 	},
 	template: `<farm-row>
-		<farm-col xs="4" :style="style">4</farm-col>
-		<farm-col xs="6" :style="style">6</farm-col>
-		<farm-col xs="12" :style="style">12</farm-col>
-		<farm-col xs="2" :style="style">2</farm-col>
-	</farm-row>`,
+			<farm-col v-for="item in items" :key="'xs_' + item" :xs="item + 1" :style="style">{{item + 1}}</farm-col>
+		</farm-row>`,
 });
 
 export const Combination = () => ({
@@ -105,7 +114,7 @@ export const Combination = () => ({
 		};
 	},
 	template: `<div>
-		<farm-col lg="5" md="4" sm="3" :style="style">lg: 5 - md: 4 - sm: 3</farm-col>
+		<farm-col cols="9" lg="5" md="4" sm="3" :style="style">lg: 5 - md: 4 - sm: 3</farm-col>
 	</div>`,
 });
 export const TagP = () => ({

package/src/components/layout/Col/Col.vue

@@ -9,6 +9,7 @@
 			[`farm-col--md-${md}`]: md,
 			[`farm-col--sm-${sm}`]: sm,
 			[`farm-col--xs-${xs}`]: xs,
+			[`farm-col--cols-${cols}`]: cols,
 			'farm-col--no-gutters': noGutters,
 		}"
 	>
@@ -25,6 +26,13 @@ export default Vue.extend({
 		 * Html tag
 		 */
 		tag: { type: String, default: 'div' },
+		/**
+		 * Sets the default number of columns the component extends
+		 */
+		cols: {
+			type: [String, Number] as PropType<1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12>,
+			default: null,
+		},
 		/**
 		 * Extra-large breakpoint
 		 */