@farm-investimentos/front-mfe-components 11.4.0 → 11.4.2

package/package.json

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

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/ChipInviteStatus/__tests__/ChipInviteStatus.spec.js

@@ -2,7 +2,6 @@ import { shallowMount } from '@vue/test-utils';
 import ChipInviteStatus from '../ChipInviteStatus.vue';
 describe('ChipInviteStatus component', () => {
 	let wrapper;
-	let component;
 
 	beforeEach(() => {
 		wrapper = shallowMount(ChipInviteStatus, {
@@ -10,7 +9,6 @@ describe('ChipInviteStatus component', () => {
 				status: 10,
 			},
 		});
-		component = wrapper.vm;
 	});
 	test('ChipInviteStatus created', () => {
 		expect(wrapper).toBeDefined();

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/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/Typography/Typography.scss

@@ -30,6 +30,14 @@
 	@each $k in $theme-colors-list {
 		&#{'[color=' + $k + ']'} {
 			color: var(--farm-#{$k}-base);
+
+			&.farm-typography--lighten {
+				color: var(--farm-#{$k}-lighten);
+			}
+
+			&.farm-typography--darken {
+				color: var(--farm-#{$k}-darken);
+			}
 		}
 	}
 
@@ -59,5 +67,4 @@
 			font-size: calc(#{$val} - 2px);
 		}
 	}
-}
-
+}

package/src/components/Typography/Typography.stories.js

@@ -105,6 +105,42 @@ export const Colors = () => ({
 	</div>`,
 });
 
+export const ColorsLighten = () => ({
+	data() {
+		return {
+			colors: [ ...colors, 'white'],
+		};
+	},
+	template: `<div>
+		<farm-typography
+			v-for="color in colors"
+			color-variation="lighten"
+			:color="color"
+			:key="'lighten' + color"
+		>
+			Typography - color {{ color }} lighten
+		</farm-typography>
+	</div>`,
+});
+
+export const ColorsDarken = () => ({
+	data() {
+		return {
+			colors: [...colors, 'white'],
+		};
+	},
+	template: `<div>
+		<farm-typography
+			v-for="color in colors"
+			color-variation="darken"
+			:color="color"
+			:key="'darken' + color"
+		>
+			Typography - color {{ color }} darken
+		</farm-typography>
+	</div>`,
+});
+
 export const Tags = () => ({
 	data() {
 		return {

package/src/components/Typography/Typography.vue

@@ -5,6 +5,8 @@
 			'farm-typography': true,
 			['farm-typography--' + $props.size]: isSizeFromBreakpoints,
 			['farm-typography--weight-' + weight]: weight !== undefined,
+			'farm-typography--lighten': colorVariation === 'lighten',
+			'farm-typography--darken': colorVariation === 'darken',
 		}"
 		:style="style"
 		:color="color"
@@ -54,6 +56,13 @@ export default Vue.extend({
 			>,
 			default: 'default',
 		},
+		/**
+		 * Color variation
+		 */
+		colorVariation: {
+			type: String,
+			default: '',
+		},
 	},
 	setup(props) {
 		const { size, lineHeight } = toRefs(props);

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

@@ -35,7 +35,7 @@ export const Structure = () => ({
 		<farm-row>
 			<farm-col md="6" lg="3">
 				coluna 1
-			</farm-col>
+			</farm-col>›
 			<farm-col md="6" lg="3">
 				coluna 2
 			</farm-col>
@@ -46,7 +46,7 @@ export const Structure = () => ({
 				coluna 4
 			</farm-col>
 		</farm-row>
-		<farm-row extra-decrease="true">
+		<farm-row :extra-decrease="true">
 			<farm-container-footer>
 				Footer content
 			</farm-container-footer>