@farm-investimentos/front-mfe-components 10.1.0 → 10.1.2

package/package.json

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

package/src/components/Card/CardContent/CardContent.vue

@@ -5,13 +5,16 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import Vue, { PropType } from 'vue';
 
 export default Vue.extend({
 	name: 'farm-card-content',
 	props: {
 		tag: { type: String, default: 'div' },
-		gutter: { type: String, default: 'default' },
+		gutter: {
+			type: String as PropType<'none' | 'xs' | 'sm' | 'default' | 'md' | 'lg' | 'xl'>,
+			default: 'default',
+		},
 	},
 	inheritAttrs: true,
 });

package/src/components/DialogHeader/DialogHeader.scss

@@ -14,6 +14,8 @@ header {
     padding: 16px;
     background-color: #fff;
     font-weight: 700;
-    color: var(--v-secondary-base);
-    border-bottom: 1px solid #d6d6d6;
+    color: var(--farm-primary-base);
+    border-bottom: 1px solid var(--farm-stroke-divider);
+    display: flex;
+    justify-content: flex-start;
 }

package/src/components/DialogHeader/DialogHeader.vue

@@ -1,7 +1,9 @@
 <template>
 	<header>
 		<farm-icon v-if="iconTitle" size="16px" color="secondary">{{ iconTitle }}</farm-icon>
-		{{ title }}
+		<farm-caption v-if="title" variation="regular" bold>
+			{{ title }}
+		</farm-caption>
 
 		<slot></slot>
 
@@ -19,7 +21,6 @@
 </template>
 <script lang="ts">
 import Vue from 'vue';
-import Icon from '../Icon';
 /**
  * Header de dialog/modal
  */
@@ -48,9 +49,6 @@ export default Vue.extend({
 			default: true,
 		},
 	},
-	components: {
-		'farm-icon': Icon,
-	},
 	methods: {
 		onClose() {
 			this.$emit('onClose', {});

package/src/components/Form/Form.vue

@@ -9,7 +9,7 @@ type ErrorsBag = Record<number, boolean>;
 export default Vue.extend({
 	name: 'farm-form',
 	props: {
-		value: { type: [Array, Boolean], required: true },
+		value: { type: [Boolean], required: true },
 	},
 	inheritAttrs: true,
 	setup(props, { emit }) {

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

@@ -3,11 +3,9 @@ import Form from '../Form';
 
 describe('Form component', () => {
 	let wrapper;
-	let component;
 
 	beforeEach(() => {
 		wrapper = shallowMount(Form);
-		component = wrapper.vm;
 	});
 
 	test('Created hook', () => {

package/src/components/ListItem/ListItem.stories.js

@@ -55,7 +55,7 @@ export const ClickableCursor = () => ({
 export const ClickListener = () => ({
 	methods: {
 		onClick() {
-			alert('Clicked')
+			alert('Clicked');
 		}
 	},
 	template:

package/src/components/MainFilter/MainFilter.scss

@@ -10,6 +10,10 @@ section {
 		border: 0;
 	}
 
+	.farm-tooltip {
+		margin-left: 4px;
+	}
+
 }
 
 @media screen and (max-width: 600px) {
@@ -22,4 +26,4 @@ section {
 			margin-top: 0 !important;
 		}
 	}
-}
+}

package/src/components/MainFilter/MainFilter.stories.js

@@ -3,6 +3,17 @@ import MainFilter from './MainFilter.vue';
 export default {
 	title: 'Form/MainFilter',
 	component: MainFilter,
+	parameters: {
+		docs: {
+			description: {
+				component: `Main Filter<br />
+				selector: <em>farm-form-mainfilter</em><br />
+				<span style="color: var(--farm-primary-base);">ready for use</span>
+				`,
+			},
+		},
+		viewMode: 'docs',
+	},
 };
 
 export const Primary = () => ({
@@ -17,7 +28,6 @@ export const CustomLabel = () => ({
 	template: '<farm-form-mainfilter label="Custom" />',
 });
 
-
 export const MainFilters = () => ({
 	data() {
 		return {
@@ -32,3 +42,15 @@ export const MainFilters = () => ({
         </section>
 	</div>`,
 });
+
+export const Tooltip = () => ({
+	data() {
+		return {
+			text: 'Some long tooltip text to be placed here!',
+		};
+	},
+	template: `
+	<div style="max-width: 480px; padding-top: 32px; margin-left: 32px;">
+		<farm-form-mainfilter label="Label" :tooltip="text" />
+	</div>`,
+});

package/src/components/MainFilter/MainFilter.vue

@@ -3,12 +3,16 @@
 		<fieldset v-if="hasInitialInput">
 			<farm-label :for="elementId">
 				{{ label }}
+				<farm-tooltip v-if="tooltip">
+					<farm-caption>
+						{{ tooltip }}
+					</farm-caption>
+					<template v-slot:activator="{}">
+						<farm-icon size="sm" color="gray">help-circle</farm-icon>
+					</template>
+				</farm-tooltip>
 			</farm-label>
-			<farm-textfield
-				v-model="inputValue"
-				:id="elementId"
-				@keyup="onKeyUp"
-			/>
+			<farm-textfield v-model="inputValue" :id="elementId" @keyup="onKeyUp" />
 		</fieldset>
 		<farm-btn
 			v-if="hasExtraFilters"
@@ -65,6 +69,13 @@ export default Vue.extend({
 			type: Boolean,
 			default: false,
 		},
+		/**
+		 * Tooltip text
+		 */
+		tooltip: {
+			type: String,
+			default: null,
+		},
 	},
 
 	watch: {

package/src/components/Modal/Modal.scss

@@ -18,7 +18,8 @@
         left: 0;
         width: 100vw;
         height: 100vh;
-        background: rgba(#999999, 0.8);
+        opacity: 0.46;
+        background-color: rgb(33, 33, 33) !important;
         z-index: 101;
     }
 

package/src/components/Modal/Modal.vue

@@ -25,7 +25,7 @@ export default Vue.extend({
 		/**
 		 * v-model binding
 		 */
-		value: { type: Boolean, required: true, default: true },
+		value: { type: Boolean, required: true, default: false },
 		/**
 		 * Is persistent
 		 */

package/src/components/Tooltip/Tooltip.scss

@@ -1,8 +1,20 @@
+@import '../../configurations/theme-colors';
 @import '../../configurations/variables';
 
 .farm-tooltip {
 	display: inline-block;
 	position: relative;
+
+	@each $color in $colors {
+		@each $color in $theme-colors-list {
+	
+			&--#{$color} {
+				.farm-tooltip__popup {
+					background-color: themeColor($color);
+				}
+			}
+		}
+	}
 }
 
 .farm-tooltip__popup {
@@ -22,15 +34,4 @@
 		opacity: 1;
 		visibility: visible;
 	}
-
-}
-
-
-@each $color in $colors {
-	#{'.farm-tooltip--' + $color} {
-		.farm-tooltip__popup {
-			background-color: var(--v-#{$color}-base);
-
-		}
-	}
 }

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

@@ -1,25 +1,29 @@
 import { withDesign } from 'storybook-addon-designs';
 import Tooltip from '.';
-import colors from '../../configurations/colors';
-
+import baseThemeColors from '../../configurations/_theme-colors-base.scss';
+const colors = Object.keys(baseThemeColors);
 
 export default {
-    title: 'Interactions/Tooltip',
-    component: Tooltip,
-    decorators: [withDesign],
-    parameters: {
+	title: 'Interactions/Tooltip',
+	component: Tooltip,
+	decorators: [withDesign],
+	parameters: {
 		docs: {
 			description: {
 				component: `Tooltip<br />
-				selector: <em>farm-tooltip</em>
+				selector: <em>farm-tooltip</em><br />
+				<span style="color: var(--farm-primary-base);">ready for use</span>
 				`,
 			},
 		},
+		design: {
+			type: 'figma',
+			url: 'https://www.figma.com/file/p62YDSTfWg0Mcnf5APfdvI/%E2%9C%8D-Design-System-%7C-v2?node-id=3779%3A6131',
+		},
 		viewMode: 'docs',
 	},
 };
 
-
 export const Tooltips = () => ({
 	data() {
 		return {
@@ -79,33 +83,3 @@ export const Visibility = () => ({
         </farm-tooltip>
 	</div>`,
 });
-
-Tooltips.story = {
-	name: 'Colors',
-	parameters: {
-		design: {
-			type: 'figma',
-			url: 'https://www.figma.com/file/p62YDSTfWg0Mcnf5APfdvI/%E2%9C%8D-Design-System-%7C-v2?node-id=3779%3A6131',
-		},
-	},
-};
-
-Iconed.story = {
-	name: 'Iconed',
-	parameters: {
-		design: {
-			type: 'figma',
-			url: 'https://www.figma.com/file/p62YDSTfWg0Mcnf5APfdvI/%E2%9C%8D-Design-System-%7C-v2?node-id=3779%3A6131',
-		},
-	},
-};
-
-Visibility.story = {
-	name: 'Visibility',
-	parameters: {
-		design: {
-			type: 'figma',
-			url: 'https://www.figma.com/file/p62YDSTfWg0Mcnf5APfdvI/%E2%9C%8D-Design-System-%7C-v2?node-id=3779%3A6131',
-		},
-	},
-};

package/src/components/Tooltip/Tooltip.vue

@@ -9,7 +9,8 @@
 		<span
 			:class="{
 				'farm-tooltip__popup': true,
-				'farm-tooltip__popup--visible': (!externalControl && showOver) || (externalControl && toggleComponent),
+				'farm-tooltip__popup--visible':
+					(!externalControl && showOver) || (externalControl && toggleComponent),
 			}"
 		>
 			<slot></slot>
@@ -29,32 +30,32 @@ export default Vue.extend({
 			type: String as PropType<
 				| 'primary'
 				| 'secondary'
-				| 'error'
-				| 'extra'
-				| 'accent'
+				| 'neutral'
 				| 'info'
 				| 'success'
-				| 'gray'
-				| 'yellow'
-				| 'white'
+				| 'error'
+				| 'warning'
+				| 'success'
+				| 'extra-1'
+				| 'extra-2'
 			>,
-			default: 'gray',
+			default: 'secondary',
 		},
 		/**
 		 * Control visibility
+		 * v-model bind
 		 */
-		value: {},
+		value: {
+			type: Boolean,
+			default: undefined,
+		},
 	},
 	setup(props) {
 		const parent = ref(null);
 		const showOver = ref(false);
 
-		const toggleComponent = computed(() => {
-			return props.value;
-		});
-		const externalControl = computed(() => {
-			return typeof props.value === 'boolean';
-		});
+		const toggleComponent = computed(() => props.value);
+		const externalControl = computed(() => props.value !== undefined);
 
 		const onOver = () => {
 			showOver.value = true;
@@ -66,10 +67,10 @@ export default Vue.extend({
 		return {
 			parent,
 			showOver,
-			onOver,
-			onOut,
 			toggleComponent,
 			externalControl,
+			onOver,
+			onOut,
 		};
 	},
 });

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

@@ -6,15 +6,25 @@
     max-width: 100%;
     transition: .2s cubic-bezier(.4, 0, .2, 1);
 
+    >div {
+        flex: 1 1 auto;
+        max-width: 100%;
+        position: relative;
+    }
+
     @each $k in $justifications {
         &#{'--justify-' + $k} {
-            justify-content: $k;
+            >div {
+                justify-content: $k;
+            }
         }
     }
 
     @each $k in $directions {
         &#{'--direction-' + $k} {
-            flex-direction: $k;
+            >div {
+                flex-direction: $k;
+            }
         }
     }
 }

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

@@ -7,7 +7,9 @@
 			[`farm-box--direction-${direction}`]: direction,
 		}"
 	>
-		<slot></slot>
+		<div>
+			<slot></slot>
+		</div>
 	</component>
 </template>
 <script lang="ts">

package/src/components/layout/Box/__tests__/Box.spec.js

@@ -3,11 +3,9 @@ import Box from '../Box';
 
 describe('Box component', () => {
 	let wrapper;
-	let component;
 
 	beforeEach(() => {
 		wrapper = shallowMount(Box);
-		component = wrapper.vm;
 	});
 
 	test('Created hook', () => {

package/src/components/layout/Col/__tests__/Col.spec.js

@@ -3,11 +3,9 @@ import Col from '../Col';
 
 describe('Col component', () => {
 	let wrapper;
-	let component;
 
 	beforeEach(() => {
 		wrapper = shallowMount(Col);
-		component = wrapper.vm;
 	});
 
 	test('Created hook', () => {

package/src/components/layout/Row/__tests__/Row.spec.js

@@ -3,11 +3,9 @@ import Row from '../Row';
 
 describe('Row component', () => {
 	let wrapper;
-	let component;
 
 	beforeEach(() => {
 		wrapper = shallowMount(Row);
-		component = wrapper.vm;
 	});
 
 	test('Created hook', () => {

package/src/configurations/_variables.scss

@@ -9,9 +9,9 @@ $sizes: (
 $gutters: (
     "none": 0,
     "xs": 4px,
-    'sm': 8px,
+    "sm": 8px,
     "default": 12px,
-    'md': 16px,
+    "md": 16px,
     "lg": 24px,
     "xl": 32px
 );